summaryrefslogtreecommitdiff
path: root/share/www
diff options
context:
space:
mode:
authorChristopher Lenz <cmlenz@apache.org>2008-06-02 21:57:35 +0000
committerChristopher Lenz <cmlenz@apache.org>2008-06-02 21:57:35 +0000
commitefd28ccaa331fc983749dd6322fb4f4303c2e3b7 (patch)
tree69329772f2f0d17e31aa78fb8f08892036bb1542 /share/www
parent303230cb554aa07ce7ada5520b4d3dc0bb89ec51 (diff)
* The map/reduce function textareas in Futon are now horizontally resizable split-pane style
* The initial height of the view code textareas is adjusted to the number of lines in the map/reduce functions. git-svn-id: https://svn.apache.org/repos/asf/incubator/couchdb/trunk@662587 13f79535-47bb-0310-9956-ffa450edef68
Diffstat (limited to 'share/www')
-rw-r--r--share/www/browse/database.html33
-rw-r--r--share/www/script/browse.js12
-rw-r--r--share/www/script/jquery.resizer.js38
-rw-r--r--share/www/style/layout.css35
4 files changed, 77 insertions, 41 deletions
diff --git a/share/www/browse/database.html b/share/www/browse/database.html
index 120c47c6..3405dbb4 100644
--- a/share/www/browse/database.html
+++ b/share/www/browse/database.html
@@ -37,7 +37,7 @@ specific language governing permissions and limitations under the License.
$(document).ready(function() {
$("h1 strong").text(page.db.name);
$("#viewcode span").click(function() {
- $("#viewcode").toggleClass("expanded");
+ $("#viewcode").toggleClass("collapsed");
});
$("#viewcode button.run").click(function() {
page.updateDocumentListing();
@@ -51,9 +51,15 @@ specific language governing permissions and limitations under the License.
$("#viewcode button.saveas").click(function() {
page.saveViewAs();
});
- $("#viewcode textarea").resizable({
+ $("#viewcode textarea").makeResizable({
always: true,
- grippie: $("#viewcode .bottom")
+ grippie: $("#viewcode .bottom"),
+ vertical: true
+ });
+ $("#viewcode td.map").makeResizable({
+ always: true,
+ grippie: $("#viewcode td.splitter"),
+ horizontal: true
});
// Restore preferences/state from cookies
@@ -108,21 +114,24 @@ specific language governing permissions and limitations under the License.
<li><button class="delete">Delete Database</button></li>
</ul>
- <div id="viewcode" style="display: none">
+ <div id="viewcode" class="collapsed" style="display: none">
<div class="top">
<a id="designdoc-link"></a>
<span id="view-toggle">View Code</span>
</div>
- <div class="code map">
- <label for="viewcode_map">Map Function:</label>
- <textarea id="viewcode_map" class="map" rows="5" cols="79" spellcheck="false" wrap="off">function(doc) {
+ <table summary="View functions"><tr>
+ <td class="code map">
+ <label for="viewcode_map">Map Function:</label>
+ <textarea id="viewcode_map" class="map" rows="5" cols="20" spellcheck="false" wrap="off">function(doc) {
emit(null, doc);
}</textarea>
- </div>
- <div class="code reduce">
- <label for="viewcode_reduce">Reduce Function (optional):</label>
- <textarea id="viewcode_reduce" class="reduce" rows="5" cols="79" spellcheck="false" wrap="off"></textarea>
- </div>
+ </td>
+ <td class="splitter"></td>
+ <td class="code reduce">
+ <label for="viewcode_reduce">Reduce Function (optional):</label>
+ <textarea id="viewcode_reduce" class="reduce" rows="5" cols="20" spellcheck="false" wrap="off"></textarea>
+ </td>
+ </tr></table>
<div class="bottom">
<button class="save" type="button" disabled>Save</button>
<button class="saveas" type="button">Save As…</button>
diff --git a/share/www/script/browse.js b/share/www/script/browse.js
index d7e3fcee..7c6440dd 100644
--- a/share/www/script/browse.js
+++ b/share/www/script/browse.js
@@ -214,10 +214,14 @@ function CouchDatabasePage() {
}
},
success: function(resp) {
- page.storedViewCode = resp.views[localViewName];
- $("#viewcode_map").val(page.storedViewCode.map);
- $("#viewcode_reduce").val(page.storedViewCode.reduce || "");
+ var viewCode = resp.views[localViewName];
+ $("#viewcode_map").val(viewCode.map);
+ $("#viewcode_reduce").val(viewCode.reduce || "");
+ var lines = Math.max(viewCode.map.split("\n").length,
+ (viewCode.reduce ? viewCode.reduce.split("\n").length : 1));
+ $("#viewcode textarea").attr("rows", Math.min(15, Math.max(3, lines)));
$("#viewcode button.revert, #viewcode button.save").attr("disabled", "disabled");
+ page.storedViewCode = viewCode;
if (callback) callback();
}
});
@@ -744,7 +748,7 @@ function CouchDocumentPage() {
tools.appendTo(td);
input.val(prettyPrintJSON(value)).appendTo(td);
input.each(function() { this.focus(); this.select(); });
- if (needsTextarea) input.resizable();
+ if (needsTextarea) input.makeResizable({vertical: true});
}
function _initKey(doc, row, fieldName) {
diff --git a/share/www/script/jquery.resizer.js b/share/www/script/jquery.resizer.js
index 081c7177..f020d3e2 100644
--- a/share/www/script/jquery.resizer.js
+++ b/share/www/script/jquery.resizer.js
@@ -12,10 +12,12 @@
(function($) {
- $.fn.resizable = function(options) {
+ $.fn.makeResizable = function(options) {
options = options || {};
options.always = options.always || false;
options.grippie = options.grippie || null;
+ options.minWidth = options.minWidth || 100;
+ options.maxWidth = options.maxWidth || null;
options.minHeight = options.minHeight || 32;
options.maxHeight = options.maxHeight || null;
@@ -28,19 +30,33 @@
grippie.addClass("grippie");
var elem = $(this);
grippie.mousedown(function(e) {
- var pos = e.screenY;
- var height = elem.height();
+ var pos = {x: e.screenX, y: e.screenY};
+ var dimensions = {width: elem.width(), height: elem.height()};
$(document)
.mousemove(function(e) {
- var offset = e.screenY - pos;
- if (offset) {
- var newHeight = height + offset;
- if (newHeight >= options.minHeight &&
- (!options.maxHeight || newHeight <= options.maxHeight)) {
- elem.height(newHeight);
- height = newHeight;
+ if (options.horizontal) {
+ var offset = e.screenX - pos.x;
+ if (offset) {
+ var newWidth = dimensions.width + offset;
+ if (newWidth >= options.minWidth &&
+ (!options.maxWidth || newWidth <= options.maxWidth)) {
+ elem.width(newWidth);
+ dimensions.width = newWidth;
+ }
+ pos.x = e.screenX;
+ }
+ }
+ if (options.vertical) {
+ var offset = e.screenY - pos.y;
+ if (offset) {
+ var newHeight = dimensions.height + offset;
+ if (newHeight >= options.minHeight &&
+ (!options.maxHeight || newHeight <= options.maxHeight)) {
+ elem.height(newHeight);
+ dimensions.height = newHeight;
+ }
+ pos.y = e.screenY;
}
- pos = e.screenY;
}
document.onselectstart = function() { return false }; // for IE
return false;
diff --git a/share/www/style/layout.css b/share/www/style/layout.css
index 0dd93a19..6f84aaae 100644
--- a/share/www/style/layout.css
+++ b/share/www/style/layout.css
@@ -249,13 +249,13 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
/* View function editing */
#viewcode { background: #fff; border: 1px solid;
- border-color: #999 #ddd #ddd #999; margin: 0 0 1em; padding: 0 .5em;
+ border-color: #999 #ddd #ddd #999; margin: 0 0 1em; overflow: hidden;
}
#viewcode .top, #viewcode .bottom { background-color: #e9e9e9;
border: 1px solid; border-color: #ddd #ddd #e9e9e9 #ddd; color: #333;
- margin: 0 -.5em; padding: 0 .5em 2px;
+ padding: 0 .5em 2px;
}
-#viewcode .top { color: #aaa; font-size: 95%; }
+#viewcode .top { border-bottom: 1px solid #ddd; color: #aaa; font-size: 95%; }
#viewcode .top span { background: url(../image/twisty.gif) 0 3px no-repeat;
border: none; color: #666; cursor: pointer; display: block; font-size: 90%;
margin: 0; padding: 2px 0 0 15px;
@@ -264,15 +264,22 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
padding: 2px 2px 0 0;
}
#viewcode .top a:link, #viewcode .top a:visited { color: #999; }
-#viewcode .code, #viewcode .bottom { display: none; }
-#viewcode .code { float: left; padding: .2em 0; width: 49%; }
-#viewcode .code label { font-size: 90%; color: #999; }
+#viewcode table { border-collapse: separate; border-spacing: 0;
+ margin: 0; table-layout: fixed; width: 100%; max-width: 100%;
+}
+#viewcode table td.splitter { background: #e9e9e9; cursor: col-resize;
+ width: 4px;
+}
+#viewcode table td.map { border-right: 1px solid #ccc; }
+#viewcode table td.reduce { border-left: 1px solid #ccc; }
+#viewcode .code label { font-size: 90%; color: #999; padding: 0 .5em;
+ white-space: nowrap;
+}
#viewcode .code textarea { border: none; border-top: 1px solid #ccc;
- color: #333; margin: 0 0 .4em; min-height: 50px; max-width: 98%;
- padding: .2em 0; resize: none;
+ color: #333; margin: 0; min-height: 50px; padding: .4em 0 0; resize: none;
+ width: 100%;
}
-#viewcode .code textarea:focus { background: #ffffe9; }
-#viewcode div.map { border-right: 3px double #ccc; margin-right: .5em; }
+#viewcode .code textarea:focus { background: #e9e9ff; }
#viewcode .bottom { border-bottom: none; clear: left; padding: 1px 3px; }
#viewcode .bottom button { font-size: 90%; margin: 0 1em 0 0;
padding-left: 2em; padding-right: 2em;
@@ -284,10 +291,10 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
float: right; margin: 0 0 0 1em;
}
#viewcode .bottom button.save { font-weight: bold; }
-#viewcode .grippie { background-position: 49% 50%; }
-#viewcode.expanded .top { border-bottom: 1px solid #ddd; }
-#viewcode.expanded .top span { background-position: 0 -96px; }
-#viewcode.expanded .code, #viewcode.expanded .bottom { display: block; }
+#viewcode .grippie { background-position: 50% 50%; }
+#viewcode.collapsed .top { border-bottom: none; }
+#viewcode.collapsed .top span { background-position: 0 -96px; }
+#viewcode.collapsed table, #viewcode.collapsed .bottom { display: none; }
/* Database table */