click handler logic for menus
This commit is contained in:
Max Ogden
parent
770210a45b
commit
9ce27dddda
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
@ -4,7 +4,6 @@
|
||||
<meta charset="utf-8">
|
||||
<title>CouchDB Data Explorer</title>
|
||||
<link rel="stylesheet" href="style/reset.css" media="screen">
|
||||
<link rel="stylesheet" href="style/css3buttons.css" media="screen">
|
||||
<link rel="stylesheet" href="style/data-table.css" media="screen">
|
||||
<link rel="stylesheet" href="style/demo.css" media="screen">
|
||||
<script type="text/javascript" src="script/jquery-1.6.1.min.js"></script>
|
||||
@ -20,7 +19,7 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="menu-overlay" style="display: none; z-index: 101; "> </div>
|
||||
<ul class="menu">
|
||||
<ul class="menu" id="menu">
|
||||
<li><a class="transform" href="JavaScript:void(0);">Transform...</a></li>
|
||||
</ul>
|
||||
<div id="header">
|
||||
@ -72,12 +71,20 @@
|
||||
</script>
|
||||
|
||||
<script type='text/mustache' id="actionsTemplate">
|
||||
<a href="javascript:void(false)" class="button csv"><span class="downarrow icon"></span>Download CSV</a>
|
||||
<a class="button" id="export-button" href="javascript:{}"><span class="button-menu">Export</span></a>
|
||||
</script>
|
||||
|
||||
<script type='text/mustache' id="exportActionsTemplate">
|
||||
<li><a class="csv" href="JavaScript:void(0);">CSV</a></li>
|
||||
</script>
|
||||
|
||||
<script type='text/mustache' id="columnActionsTemplate">
|
||||
<li><a class="transform" href="JavaScript:void(0);">Transform...</a></li>
|
||||
</script>
|
||||
|
||||
<script type='text/mustache' id="titleTemplate"><span id="project-name-button" class="app-path-section">{{db_name}}</span></script>
|
||||
<script type='text/mustache' id="bulkTemplate">http://{{host}}/{{db_name}}/_bulk_docs</script>
|
||||
<script type='text/mustache' id="generatingTemplate"><div class="loading">Precomputing CSV...</div></script>
|
||||
<script type='text/mustache' id="generatingTemplate"><div class="loading">Loading...</div></script>
|
||||
|
||||
<script type='text/mustache' id="tableContainerTemplate">
|
||||
<div bind="rightPanelDiv" id="right-panel">
|
||||
|
||||
@ -4,6 +4,31 @@ var removalist = function() {
|
||||
return (parseFloat(bytes)/1024/1024).toString().substr(0,4) + "MB"
|
||||
}
|
||||
|
||||
function handleMenuClick() {
|
||||
$( '.menu .csv' ).click(function( e ) {
|
||||
window.location.href = app.csvUrl;
|
||||
e.preventDefault();
|
||||
})
|
||||
|
||||
$( '.menu .transform' ).click(function( e ) {
|
||||
$('.dialog-overlay').show();
|
||||
$('.dialog-container').show();
|
||||
util.render('bulkEdit', 'dialog-content');
|
||||
$('.cancelButton').click(function(e) {
|
||||
$('.dialog-overlay').hide();
|
||||
$('.dialog-container').hide();
|
||||
})
|
||||
$('.menu').hide();
|
||||
$('.menu-overlay').hide();
|
||||
e.preventDefault();
|
||||
})
|
||||
|
||||
$( '.menu li' ).click(function() {
|
||||
$('.menu').hide();
|
||||
$('.menu-overlay').hide();
|
||||
})
|
||||
}
|
||||
|
||||
function renderRows(response) {
|
||||
var rows = response.rows;
|
||||
|
||||
@ -125,6 +150,7 @@ var removalist = function() {
|
||||
|
||||
return {
|
||||
formatDiskSize: formatDiskSize,
|
||||
handleMenuClick: handleMenuClick,
|
||||
bootstrap: bootstrap,
|
||||
fetchRows: fetchRows,
|
||||
activateControls: activateControls,
|
||||
|
||||
@ -15,24 +15,6 @@ app.handler = function(route) {
|
||||
app.routes = {
|
||||
home: function() {
|
||||
removalist.bootstrap();
|
||||
|
||||
$( '.csv' ).live('click', ( function( e ) {
|
||||
window.location.href = app.csvUrl;
|
||||
e.preventDefault();
|
||||
}))
|
||||
|
||||
$( '.transform' ).live('click', ( function( e ) {
|
||||
$('.dialog-overlay').show();
|
||||
$('.dialog-container').show();
|
||||
util.render('bulkEdit', 'dialog-content');
|
||||
$('.cancelButton').click(function(e) {
|
||||
$('.dialog-overlay').hide();
|
||||
$('.dialog-container').hide();
|
||||
})
|
||||
$('.menu').hide();
|
||||
$('.menu-overlay').hide();
|
||||
e.preventDefault();
|
||||
}))
|
||||
},
|
||||
page: function(id) {
|
||||
removalist.getPageSize();
|
||||
@ -44,15 +26,19 @@ app.after = {
|
||||
removalist.activateControls();
|
||||
},
|
||||
dataTable: function() {
|
||||
$('.column-header-menu').click(function(e) {
|
||||
var offset = $(e.target).offset();
|
||||
$('.menu-overlay').show().click(function(e) {
|
||||
$(e.target).hide();
|
||||
$('.menu').hide();
|
||||
});
|
||||
$('.menu').show().css({top: offset.top + 20, left: offset.left});
|
||||
})
|
||||
}
|
||||
$('.column-header-menu').click(function(e) {
|
||||
util.show('menu', e);
|
||||
util.render('columnActions', 'menu');
|
||||
});
|
||||
},
|
||||
actions: function() {
|
||||
$('.button').click(function(e) {
|
||||
util.show('menu', e, {left: -60});
|
||||
util.render('exportActions', 'menu');
|
||||
});
|
||||
},
|
||||
exportActions: removalist.handleMenuClick,
|
||||
columnActions: removalist.handleMenuClick
|
||||
}
|
||||
|
||||
app.sammy = $.sammy(function () {
|
||||
|
||||
@ -23,6 +23,19 @@ var util = function() {
|
||||
}
|
||||
return exists;
|
||||
}
|
||||
|
||||
function show( thing, elem, offset ) {
|
||||
var position = $(elem.target).offset();
|
||||
if (offset) {
|
||||
if (offset.top) position.top += offset.top;
|
||||
if (offset.left) position.left += offset.left;
|
||||
}
|
||||
$('.' + thing + '-overlay').show().click(function(e) {
|
||||
$(e.target).hide();
|
||||
$('.' + thing).hide();
|
||||
});
|
||||
$('.' + thing).show().css({top: position.top + $(elem.target).height(), left: position.left});
|
||||
}
|
||||
|
||||
function render( template, target, options ) {
|
||||
if ( !options ) options = {data: {}};
|
||||
@ -122,6 +135,7 @@ var util = function() {
|
||||
|
||||
return {
|
||||
inURL: inURL,
|
||||
show: show,
|
||||
render: render,
|
||||
formatMetadata:formatMetadata,
|
||||
getBaseURL:getBaseURL,
|
||||
|
||||
@ -1,79 +0,0 @@
|
||||
a.button { display: inline-block; padding: 3px 5px 3px 5px; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-background-clip: padding-box; border-radius: 2px; outline: none; position: relative; zoom: 1; *display: inline; }
|
||||
a.button.primary { font-weight: bold }
|
||||
a.button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }
|
||||
a.button:active,
|
||||
a.button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }
|
||||
a.button:active { top: 1px }
|
||||
a.button.negative:hover { color: #FFFFFF; background-position: 0 -121px; background-color: #D84743; border-color: #911D1B; }
|
||||
a.button.negative:active,
|
||||
a.button.negative.active { background-position: 0 -161px; background-color: #A5211E; border-color: #911D1B; }
|
||||
a.button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; padding: 2px 10px 2px 10px; }
|
||||
a.button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; }
|
||||
a.button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-right: none; border-left: none; }
|
||||
a.button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; }
|
||||
a.button.left:active,
|
||||
a.button.middle:active,
|
||||
a.button.right:active { top: 0px }
|
||||
a.button.big { font-size: 16px; padding-left: 17px; padding-right: 17px; }
|
||||
a.button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 2px; background-image: url('../images/css3buttons_icons.png'); background-repeat: no-repeat; }
|
||||
a.big.button span.icon { top: 0px }
|
||||
a.button span.icon.book { background-position: 0 0 }
|
||||
a.button:hover span.icon.book { background-position: 0 -15px }
|
||||
a.button span.icon.calendar { background-position: 0 -30px }
|
||||
a.button:hover span.icon.calendar { background-position: 0 -45px }
|
||||
a.button span.icon.chat { background-position: 0 -60px }
|
||||
a.button:hover span.icon.chat { background-position: 0 -75px }
|
||||
a.button span.icon.check { background-position: 0 -90px }
|
||||
a.button:hover span.icon.check { background-position: 0 -103px }
|
||||
a.button span.icon.clock { background-position: 0 -116px }
|
||||
a.button:hover span.icon.clock { background-position: 0 -131px }
|
||||
a.button span.icon.cog { background-position: 0 -146px }
|
||||
a.button:hover span.icon.cog { background-position: 0 -161px }
|
||||
a.button span.icon.comment { background-position: 0 -176px }
|
||||
a.button:hover span.icon.comment { background-position: 0 -190px }
|
||||
a.button span.icon.cross { background-position: 0 -204px }
|
||||
a.button:hover span.icon.cross { background-position: 0 -219px }
|
||||
a.button span.icon.downarrow { background-position: 0 -234px }
|
||||
a.button:hover span.icon.downarrow { background-position: 0 -249px }
|
||||
a.button span.icon.fork { background-position: 0 -264px }
|
||||
a.button:hover span.icon.fork { background-position: 0 -279px }
|
||||
a.button span.icon.heart { background-position: 0 -294px }
|
||||
a.button:hover span.icon.heart { background-position: 0 -308px }
|
||||
a.button span.icon.home { background-position: 0 -322px }
|
||||
a.button:hover span.icon.home { background-position: 0 -337px }
|
||||
a.button span.icon.key { background-position: 0 -352px }
|
||||
a.button:hover span.icon.key { background-position: 0 -367px }
|
||||
a.button span.icon.leftarrow { background-position: 0 -382px }
|
||||
a.button:hover span.icon.leftarrow { background-position: 0 -397px }
|
||||
a.button span.icon.lock { background-position: 0 -412px }
|
||||
a.button:hover span.icon.lock { background-position: 0 -427px }
|
||||
a.button span.icon.loop { background-position: 0 -442px }
|
||||
a.button:hover span.icon.loop { background-position: 0 -457px }
|
||||
a.button span.icon.magnifier { background-position: 0 -472px }
|
||||
a.button:hover span.icon.magnifier { background-position: 0 -487px }
|
||||
a.button span.icon.mail { background-position: 0 -502px }
|
||||
a.button:hover span.icon.mail { background-position: 0 -514px }
|
||||
a.button span.icon.move { background-position: 0 -526px }
|
||||
a.button:hover span.icon.move { background-position: 0 -541px }
|
||||
a.button span.icon.pen { background-position: 0 -556px }
|
||||
a.button:hover span.icon.pen { background-position: 0 -571px }
|
||||
a.button span.icon.pin { background-position: 0 -586px }
|
||||
a.button:hover span.icon.pin { background-position: 0 -601px }
|
||||
a.button span.icon.plus { background-position: 0 -616px }
|
||||
a.button:hover span.icon.plus { background-position: 0 -631px }
|
||||
a.button span.icon.reload { background-position: 0 -646px }
|
||||
a.button:hover span.icon.reload { background-position: 0 -660px }
|
||||
a.button span.icon.rightarrow { background-position: 0 -674px }
|
||||
a.button:hover span.icon.rightarrow { background-position: 0 -689px }
|
||||
a.button span.icon.rss { background-position: 0 -704px }
|
||||
a.button:hover span.icon.rss { background-position: 0 -719px }
|
||||
a.button span.icon.tag { background-position: 0 -734px }
|
||||
a.button:hover span.icon.tag { background-position: 0 -749px }
|
||||
a.button span.icon.trash { background-position: 0 -764px }
|
||||
a.button:hover span.icon.trash { background-position: 0 -779px }
|
||||
a.button span.icon.unlock { background-position: 0 -794px }
|
||||
a.button:hover span.icon.unlock { background-position: 0 -809px }
|
||||
a.button span.icon.uparrow { background-position: 0 -824px }
|
||||
a.button:hover span.icon.uparrow { background-position: 0 -839px }
|
||||
a.button span.icon.user { background-position: 0 -854px }
|
||||
a.button:hover span.icon.user { background-position: 0 -869px }
|
||||
@ -427,7 +427,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
}
|
||||
|
||||
#project-controls {
|
||||
margin-top: 1px;
|
||||
margin: 3px 2px 0px 0px;
|
||||
display: block;
|
||||
float: right;
|
||||
font-size: 1.3em;
|
||||
@ -1131,7 +1131,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
}
|
||||
|
||||
.button-menu, a.button-menu {
|
||||
background: url(/images/down-arrow.png) no-repeat right 6px;
|
||||
background: url(images/down-arrow.png) no-repeat right 6px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
|
||||
@ -19,13 +19,13 @@
|
||||
#database h2{margin:0;}
|
||||
#database .group{border-top:1px solid #bedce7;}
|
||||
#database .separator{padding-top:1em;}
|
||||
#database .envelope{border-bottom:1px solid #bedce7;border-left:1px solid #bedce7;border-right:1px solid #bedce7;padding:0 .7em .7em .7em;background:#eaf2f5 url(../images/bg_gradient.gif) 0 100% repeat-x;overflow:hidden;}
|
||||
#database .envelope{border-bottom:1px solid #bedce7;border-left:1px solid #bedce7;border-right:1px solid #bedce7;padding:0 .7em .7em .7em;background:#eaf2f5 url(images/bg_gradient.gif) 0 100% repeat-x;overflow:hidden;}
|
||||
#database .envelope.selected{background:#fffeeb!important;}
|
||||
#database .envelope.selected .machine span{border-bottom:1px dotted #4183c4;}
|
||||
#database.single_database .envelope .machine span{border-bottom:1px dotted #4183c4;}
|
||||
#database .machine{float:right;width:18em;padding:.8em 0 .8em 1.2em;border-left:1px solid #bedce7;color:#808080;font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;font-size:.85em;line-height:1.5em;}
|
||||
#database .dbInfo {background:#fff url(../images/bg_gradient.gif) 0 100% repeat-x;}
|
||||
#database .action {background:#eaf2f5 url(../images/bg_gradient.gif) 0 100% repeat-x;}
|
||||
#database .dbInfo {background:#fff url(images/bg_gradient.gif) 0 100% repeat-x;}
|
||||
#database .action {background:#eaf2f5 url(images/bg_gradient.gif) 0 100% repeat-x;}
|
||||
#database .database_oneline td{border-bottom:1px solid #bedce7;}
|
||||
#database .database_oneline .date{color:#888;width:1%;padding:0 1em 0 .5em;border-left:1px solid #bedce7;}
|
||||
#database .database_oneline .author{width:15%;}
|
||||
@ -39,9 +39,9 @@
|
||||
a {text-decoration: none;}
|
||||
a:hover{text-decoration:underline;}
|
||||
.usingMouse a{outline:none;}
|
||||
a.button span.icon.loading { background-image: url(../images/loader.gif); }
|
||||
.loading { background-image: url(../images/loader.gif); background-repeat: no-repeat; padding-left: 15px; background-position: 0px 3px;}
|
||||
a.button:hover span.icon.loading { background-image: url(../images/loader-blue.gif); }
|
||||
a.button span.icon.loading { background-image: url(images/loader.gif); }
|
||||
.loading { background-image: url(images/loader.gif); background-repeat: no-repeat; padding-left: 15px; background-position: 0px 3px;}
|
||||
a.button:hover span.icon.loading { background-image: url(images/loader-blue.gif); }
|
||||
#couchLogo {float: left; margin-right: 5px; margin-top: 3px}
|
||||
|
||||
.menu-overlay {
|
||||
|
||||
BIN
attachments/style/images/down-arrow.png
Executable file
BIN
attachments/style/images/down-arrow.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 971 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Loading…
x
Reference in New Issue
Block a user