You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2014/08/26 18:24:10 UTC
[1/7] fauxton commit: updated refs/heads/master to 6c9a5a6
Repository: couchdb-fauxton
Updated Branches:
refs/heads/master 895d13c42 -> 6c9a5a643
Fix failing tests
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/a94f56f0
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/a94f56f0
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/a94f56f0
Branch: refs/heads/master
Commit: a94f56f041d62a3f7a2389986de71a167e18f27b
Parents: 6f145e8
Author: Garren Smith <ga...@gmail.com>
Authored: Tue Aug 26 11:07:32 2014 +0200
Committer: Garren Smith <ga...@gmail.com>
Committed: Tue Aug 26 18:22:41 2014 +0200
----------------------------------------------------------------------
app/addons/fauxton/tests/baseSpec.js | 6 +++++-
app/core/tests/routeObjectSpec.js | 22 ++++++++++++++++++----
2 files changed, 23 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/a94f56f0/app/addons/fauxton/tests/baseSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/tests/baseSpec.js b/app/addons/fauxton/tests/baseSpec.js
index b9814bc..7ecb1a0 100644
--- a/app/addons/fauxton/tests/baseSpec.js
+++ b/app/addons/fauxton/tests/baseSpec.js
@@ -41,7 +41,11 @@ define([
// Need to find a better way of doing this
mockLayout = {
- setTemplate: sinon.spy(),
+ setTemplate: function () {
+ var promise = $.Deferred();
+ promise.resolve();
+ return promise;
+ },
clearBreadcrumbs: sinon.spy(),
setView: setViewSpy,
renderView: sinon.spy(),
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/a94f56f0/app/core/tests/routeObjectSpec.js
----------------------------------------------------------------------
diff --git a/app/core/tests/routeObjectSpec.js b/app/core/tests/routeObjectSpec.js
index f3f4b48..5e5aa49 100644
--- a/app/core/tests/routeObjectSpec.js
+++ b/app/core/tests/routeObjectSpec.js
@@ -32,7 +32,11 @@ define([
// Need to find a better way of doing this
mockLayout = {
- setTemplate: sinon.spy(),
+ setTemplate: function () {
+ var promise = $.Deferred();
+ promise.resolve();
+ return promise;
+ },
clearBreadcrumbs: sinon.spy(),
setView: sinon.spy(),
renderView: sinon.spy(),
@@ -44,17 +48,27 @@ define([
});
it('Should set template for first render ', function () {
+ var setTemplateSpy = sinon.stub(mockLayout, 'setTemplate'),
+ promise = $.Deferred();
+
+ promise.resolve();
+ setTemplateSpy.returns(promise);
testRouteObject.renderWith('the-route', mockLayout, 'args');
- assert.ok(mockLayout.setTemplate.calledOnce, 'setTempalte was called');
+ assert.ok(setTemplateSpy.calledOnce, 'setTempalte was called');
});
it('Should not set template after first render', function () {
- testRouteObject.renderWith('the-route', mockLayout, 'args');
+ var setTemplateSpy = sinon.stub(mockLayout, 'setTemplate'),
+ promise = $.Deferred();
+ promise.resolve();
+ setTemplateSpy.returns(promise);
+
+ testRouteObject.renderWith('the-route', mockLayout, 'args');
testRouteObject.renderWith('the-route', mockLayout, 'args');
- assert.ok(mockLayout.setTemplate.calledOnce, 'SetTemplate not meant to be called');
+ assert.ok(setTemplateSpy.calledOnce, 'SetTemplate not meant to be called');
});
[6/7] fauxton commit: updated refs/heads/master to 6c9a5a6
Posted by ga...@apache.org.
API URL style updates, added Velocity.js (http://julian.com/research/velocity/) for use on animated transitions
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/3e6ab2e4
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/3e6ab2e4
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/3e6ab2e4
Branch: refs/heads/master
Commit: 3e6ab2e4f09da7609ebe9dc5acae0e6421057e26
Parents: ab8004d
Author: sean barclay <fu...@hotmail.com>
Authored: Fri Aug 22 23:36:31 2014 -0700
Committer: Garren Smith <ga...@gmail.com>
Committed: Tue Aug 26 18:23:44 2014 +0200
----------------------------------------------------------------------
app/addons/fauxton/base.js | 17 +-
app/app.js | 6 +-
app/config.js | 10 +-
assets/js/plugins/jquery.velocity.js | 3430 +++++++++++++++++++++++++++++
assets/js/plugins/velocity.ui.js | 664 ++++++
assets/less/fauxton.less | 54 +-
assets/less/variables.less | 2 +
7 files changed, 4154 insertions(+), 29 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/3e6ab2e4/app/addons/fauxton/base.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/base.js b/app/addons/fauxton/base.js
index a961b8b..e890c1a 100644
--- a/app/addons/fauxton/base.js
+++ b/app/addons/fauxton/base.js
@@ -15,10 +15,12 @@ define([
"api",
"addons/fauxton/resizeColumns",
"addons/fauxton/components",
- "plugins/zeroclipboard/ZeroClipboard"
+ "plugins/zeroclipboard/ZeroClipboard",
+ "velocity",
+ "velocity.ui"
],
-function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
+function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard, velocity) {
var Fauxton = FauxtonAPI.addon();
FauxtonAPI.addNotification = function (options) {
@@ -288,7 +290,8 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
},
hideAPIbar: function () {
- this.$('.api-navbar').hide();
+ this.$('.api-navbar').velocity("reverse", 250);
+
this.apiBarVisible = false;
},
@@ -298,11 +301,15 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
if (this.apiBarVisible) {
this.apiBarVisible = false;
+
+ this.$('.api-navbar')
+ .velocity("reverse", 250);
} else {
this.apiBarVisible = true;
+
+ this.$('.api-navbar')
+ .velocity("transition.slideUpIn", 250);
}
- this.$('.api-navbar').toggle();
- console.log('ap', this.apiBarVisible);
},
serialize: function() {
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/3e6ab2e4/app/app.js
----------------------------------------------------------------------
diff --git a/app/app.js b/app/app.js
index 3ec2c99..8635eac 100644
--- a/app/app.js
+++ b/app/app.js
@@ -27,11 +27,11 @@ define([
"core/couchdbSession",
// Plugins.
"plugins/backbone.layoutmanager",
- "plugins/jquery.form"
-
+ "plugins/jquery.form",
+ "velocity"
],
-function(app, $, _, Backbone, Bootstrap, Helpers, Utils, FauxtonAPI, Couchdb) {
+function(app, $, _, Backbone, Bootstrap, Helpers, Utils, FauxtonAPI, Couchdb, velocity) {
// Make sure we have a console.log
if (typeof console == "undefined") {
console = {
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/3e6ab2e4/app/config.js
----------------------------------------------------------------------
diff --git a/app/config.js b/app/config.js
index edcd9a2..1a8a190 100644
--- a/app/config.js
+++ b/app/config.js
@@ -31,7 +31,9 @@ require.config({
d3: "../assets/js/libs/d3",
"nv.d3": "../assets/js/libs/nv.d3",
"ace":"../assets/js/libs/ace",
- "cloudant.pagingcollection": "../assets/js/plugins/cloudant.pagingcollection"
+ "cloudant.pagingcollection": "../assets/js/plugins/cloudant.pagingcollection",
+ "velocity": "../assets/js/plugins/jquery.velocity",
+ "velocity.ui": "../assets/js/plugins/velocity.ui",
},
baseUrl: '/',
@@ -58,7 +60,11 @@ require.config({
"plugins/prettify": [],
"plugins/beautify": [],
- "plugins/jquery.form": ["jquery"]
+ "plugins/jquery.form": ["jquery"],
+
+ "velocity": ["jquery"],
+
+ "velocity.ui": ["jquery"]
}
});
[7/7] fauxton commit: updated refs/heads/master to 6c9a5a6
Posted by ga...@apache.org.
Code improvements from PR
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/6c9a5a64
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/6c9a5a64
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/6c9a5a64
Branch: refs/heads/master
Commit: 6c9a5a643fa6bd2e090ea25fb09bef2c477877c2
Parents: 3e6ab2e
Author: Garren Smith <ga...@gmail.com>
Authored: Mon Aug 25 11:17:05 2014 +0200
Committer: Garren Smith <ga...@gmail.com>
Committed: Tue Aug 26 18:23:44 2014 +0200
----------------------------------------------------------------------
app/addons/fauxton/base.js | 41 +++++++++++++++++++----------------------
1 file changed, 19 insertions(+), 22 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/6c9a5a64/app/addons/fauxton/base.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/base.js b/app/addons/fauxton/base.js
index e890c1a..207a0f6 100644
--- a/app/addons/fauxton/base.js
+++ b/app/addons/fauxton/base.js
@@ -266,49 +266,47 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard, velocity) {
endpoint: '_all_docs',
documentation: 'docs',
- apiBarVisible: false,
events: {
"click .api-url-btn" : "toggleAPIbar"
},
initialize: function () {
- var that = this;
+ var hideAPIbar = _.bind(this.hideAPIbar, this),
+ navbarVisible = _.bind(this.navbarVisible, this);
+
$('body').on('click.apibar',function(e) {
- if (!that.apiBarVisible) { return;}
- if ($(e.target).hasClass('.api-url-btn')) { return;}
+ var $navbar = $(e.target);
+ if (!navbarVisible()) { return;}
+ if ($navbar.hasClass('.api-url-btn')) { return;}
- if (!$(e.target).closest('.api-navbar').length){
- that.hideAPIbar();
+ if (!$navbar.closest('.api-navbar').length){
+ hideAPIbar();
}
});
},
+ navbarVisible: function () {
+ return this.$('.api-navbar').is(':visible');
+ },
+
cleanup: function () {
$('body').off('click.apibar');
},
hideAPIbar: function () {
- this.$('.api-navbar').velocity("reverse", 250);
-
- this.apiBarVisible = false;
+ var $navBar = this.$('.api-navbar');
+ $navBar.velocity("reverse", 250, function () {
+ $navBar.hide();
+ });
},
toggleAPIbar: function(event){
- event.preventDefault();
- event.stopPropagation();
-
- if (this.apiBarVisible) {
- this.apiBarVisible = false;
-
- this.$('.api-navbar')
- .velocity("reverse", 250);
+ if (this.navbarVisible()) {
+ this.$('.api-navbar').velocity("reverse", 250);
} else {
- this.apiBarVisible = true;
-
- this.$('.api-navbar')
- .velocity("transition.slideUpIn", 250);
+ this.$('.api-navbar').velocity("transition.slideDownIn", 250);
}
},
@@ -320,7 +318,6 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard, velocity) {
},
hide: function(){
- this.apiBarVisible = false;
this.$el.addClass('hide');
},
show: function(){
[2/7] fauxton commit: updated refs/heads/master to 6c9a5a6
Posted by ga...@apache.org.
Fix double render when a new template is rendered
This fixes the double render issue we are getting. This is very
noticeable on a first render. The fix is to wait for the layout to
rendered and then only render the views.
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/6f145e8f
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/6f145e8f
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/6f145e8f
Branch: refs/heads/master
Commit: 6f145e8f7dd386216ff921687628f4c921685fe9
Parents: 895d13c
Author: Garren Smith <ga...@gmail.com>
Authored: Mon Aug 25 11:45:06 2014 +0200
Committer: Garren Smith <ga...@gmail.com>
Committed: Tue Aug 26 18:22:41 2014 +0200
----------------------------------------------------------------------
app/core/base.js | 2 +-
app/core/layout.js | 2 +-
app/core/routeObject.js | 20 +++++++++++++++-----
3 files changed, 17 insertions(+), 7 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/6f145e8f/app/core/base.js
----------------------------------------------------------------------
diff --git a/app/core/base.js b/app/core/base.js
index 61da5e4..3d51e06 100644
--- a/app/core/base.js
+++ b/app/core/base.js
@@ -62,7 +62,7 @@ function(Backbone, LayoutManager) {
manage: true,
disableLoader: false,
- useRAF: false,
+ useRAF: true,
forceRender: function () {
this.hasRendered = false;
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/6f145e8f/app/core/layout.js
----------------------------------------------------------------------
diff --git a/app/core/layout.js b/app/core/layout.js
index 8d589e7..2faa230 100644
--- a/app/core/layout.js
+++ b/app/core/layout.js
@@ -48,7 +48,7 @@ define([
// existing views in the layout.
_.each(this.layoutViews, function(view){view.removeView();});
this.layoutViews = {};
- this.render();
+ return this.render().promise();
},
setView: function(selector, view, keep) {
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/6f145e8f/app/core/routeObject.js
----------------------------------------------------------------------
diff --git a/app/core/routeObject.js b/app/core/routeObject.js
index 898afcb..c3b998c 100644
--- a/app/core/routeObject.js
+++ b/app/core/routeObject.js
@@ -92,26 +92,36 @@ function(FauxtonAPI, Backbone) {
args: args
};
- this.setTemplateOnFullRender(masterLayout);
+ var promiseLayout = this.setTemplateOnFullRender(masterLayout);
this.triggerBroadcast('beforeEstablish');
var renderAllViews = _.bind(this.renderAllViews, this, options),
establishError = _.bind(this.establishError, this),
renderComplete = _.bind(this.renderComplete, this),
+ callEstablish = _.bind(this.callEstablish, this),
promise = this.establish();
- this.callEstablish(promise)
- .then(renderAllViews, establishError)
- .then(renderComplete);
+ // Only start the view rendering process once the template has been rendered
+ // otherwise we get double renders
+ promiseLayout.then(function () {
+ callEstablish(promise)
+ .then(renderAllViews, establishError)
+ .then(renderComplete);
+ });
},
setTemplateOnFullRender: function(masterLayout){
+ var promise = $.Deferred();
// Only want to redo the template if its a full render
if (!this.renderedState) {
- masterLayout.setTemplate(this.layout);
this.triggerBroadcast('beforeFullRender');
+ masterLayout.setTemplate(this.layout).then(promise.resolve, promise.reject);
+ } else {
+ promise.resolve();
}
+
+ return promise;
},
callEstablish: function(establishPromise) {
[4/7] API URL style updates,
added Velocity.js (http://julian.com/research/velocity/) for use on
animated transitions
Posted by ga...@apache.org.
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/3e6ab2e4/assets/js/plugins/velocity.ui.js
----------------------------------------------------------------------
diff --git a/assets/js/plugins/velocity.ui.js b/assets/js/plugins/velocity.ui.js
new file mode 100644
index 0000000..c447d63
--- /dev/null
+++ b/assets/js/plugins/velocity.ui.js
@@ -0,0 +1,664 @@
+/**********************
+ Velocity UI Pack
+**********************/
+
+/* VelocityJS.org UI Pack (4.1.2). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */
+
+(function() {
+
+ /*************
+ Setup
+ *************/
+
+ var Container = (window.jQuery || window.Zepto || window);
+
+ if (!Container.Velocity || !Container.Velocity.Utilities) {
+ window.console && console.log("Velocity UI Pack: Velocity must be loaded first. Aborting.");
+
+ return;
+ }
+
+ if (!Container.Velocity.version || (Container.Velocity.version.major <= 0 && Container.Velocity.version.minor <= 5 && Container.Velocity.version.patch <= 2)) {
+ var abortError = "Velocity UI Pack: You need to update Velocity (jquery.velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.";
+
+ alert(abortError);
+ throw new Error(abortError);
+ }
+
+ /******************
+ Register UI
+ ******************/
+
+ Container.Velocity.RegisterUI = function (effectName, properties) {
+ /* Animate the expansion/contraction of the elements' parent's height for In/Out effects. */
+ function animateParentHeight (elements, direction, totalDuration, stagger) {
+ var totalHeightDelta = 0,
+ parentNode;
+
+ /* Sum the total height (including padding and margin) of all targeted elements. */
+ Container.Velocity.Utilities.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
+ if (stagger) {
+ /* Increase the totalDuration by the successive delay amounts produced by the stagger option. */
+ totalDuration += i * stagger;
+ }
+
+ parentNode = element.parentNode;
+
+ Container.Velocity.Utilities.each([ "height", "paddingTop", "paddingBottom", "marginTop", "marginBottom"], function(i, property) {
+ totalHeightDelta += parseFloat(Container.Velocity.CSS.getPropertyValue(element, property));
+ });
+ });
+
+ /* Animate the parent element's height adjustment (with a varying duration multiplier for aesthetic benefits). */
+ Container.Velocity.animate(
+ parentNode,
+ { height: (direction === "In" ? "+" : "-") + "=" + totalHeightDelta },
+ { queue: false, easing: "ease-in-out", duration: totalDuration * (direction === "In" ? 0.6 : 1) }
+ );
+ }
+
+ /* Register a custom sequence for each effect. */
+ Container.Velocity.Sequences[effectName] = function (element, sequenceOptions, elementsIndex, elementsSize, elements, promiseData) {
+ var finalElement = (elementsIndex === elementsSize - 1);
+
+ /* Iterate through each effect's call array. */
+ for (var callIndex = 0; callIndex < properties.calls.length; callIndex++) {
+ var call = properties.calls[callIndex],
+ propertyMap = call[0],
+ sequenceDuration = (sequenceOptions.duration || properties.defaultDuration || 1000),
+ durationPercentage = call[1],
+ callOptions = call[2] || {},
+ opts = {};
+
+ /* Assign the whitelisted per-call options. */
+ opts.duration = sequenceDuration * (durationPercentage || 1);
+ opts.queue = sequenceOptions.queue || "";
+ opts.easing = callOptions.easing || "ease";
+ opts.delay = callOptions.delay || 0;
+ opts._cacheValues = callOptions._cacheValues || true;
+
+ /* Special processing for the first effect call. */
+ if (callIndex === 0) {
+ /* If a delay was passed into the sequence, combine it with the first call's delay. */
+ opts.delay += (sequenceOptions.delay || 0);
+
+ if (elementsIndex === 0) {
+ opts.begin = function() {
+ /* Only trigger a begin callback on the first effect call with the first element in the set. */
+ sequenceOptions.begin && sequenceOptions.begin.call(elements, elements);
+
+ /* Only trigger animateParentHeight() if we're using an In/Out transition. */
+ var direction = effectName.match(/(In|Out)$/);
+ if (sequenceOptions.animateParentHeight && direction) {
+ animateParentHeight(elements, direction[0], sequenceDuration + opts.delay, sequenceOptions.stagger);
+ }
+ }
+ }
+
+ /* If the user isn't overriding the display option, default to "auto" for "In"-suffixed transitions. */
+ if (sequenceOptions.display !== null) {
+ if (sequenceOptions.display && sequenceOptions.display !== "none") {
+ opts.display = sequenceOptions.display;
+ } else if (/In$/.test(effectName)) {
+ /* Inline elements cannot be subjected to transforms, so we switch them to inline-block. */
+ var defaultDisplay = Container.Velocity.CSS.Values.getDisplayType(element);
+ opts.display = (defaultDisplay === "inline") ? "inline-block" : defaultDisplay;
+ }
+ }
+
+ if (sequenceOptions.visibility && sequenceOptions.visibility !== "hidden") {
+ opts.visibility = sequenceOptions.visibility;
+ }
+ }
+
+ /* Special processing for the last effect call. */
+ if (callIndex === properties.calls.length - 1) {
+ /* Append promise resolving onto the user's sequence callback. */
+ function injectFinalCallbacks () {
+ if ((sequenceOptions.display === undefined || sequenceOptions.display === "none") && /Out$/.test(effectName)) {
+ Container.Velocity.Utilities.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
+ Container.Velocity.CSS.setPropertyValue(element, "display", "none");
+ });
+ }
+
+ sequenceOptions.complete && sequenceOptions.complete.call(elements, elements);
+
+ if (promiseData) {
+ promiseData.resolver(elements || element);
+ }
+ }
+
+ opts.complete = function() {
+ if (properties.reset) {
+ for (var resetProperty in properties.reset) {
+ var resetValue = properties.reset[resetProperty];
+
+ /* Format each non-array value in the reset property map to [ value, value ] so that changes apply
+ immediately and DOM querying is avoided (via forcefeeding). */
+ if (typeof resetValue === "string" || typeof resetValue === "number") {
+ properties.reset[resetProperty] = [ properties.reset[resetProperty], properties.reset[resetProperty] ];
+ }
+ }
+
+ /* So that the reset values are applied instantly upon the next rAF tick, use a zero duration and parallel queueing. */
+ var resetOptions = { duration: 0, queue: false };
+
+ /* Since the reset option uses up the complete callback, we trigger the user's complete callback at the end of ours. */
+ if (finalElement) {
+ resetOptions.complete = injectFinalCallbacks;
+ }
+
+ Container.Velocity.animate(element, properties.reset, resetOptions);
+ /* Only trigger the user's complete callback on the last effect call with the last element in the set. */
+ } else if (finalElement) {
+ injectFinalCallbacks();
+ }
+ };
+
+ if (sequenceOptions.visibility === "hidden") {
+ opts.visibility = sequenceOptions.visibility;
+ }
+ }
+
+ Container.Velocity.animate(element, propertyMap, opts);
+ }
+ };
+
+ /* Return the Velocity object so that RegisterUI calls can be chained. */
+ return Container.Velocity;
+ };
+
+ /*********************
+ Packaged Effects
+ *********************/
+
+ /* Externalize the packagedEffects data so that they can optionally be modified and re-registered. */
+ /* Support: <=IE8: Callouts will have no effect, and transitions will simply fade in/out. IE9/Android 2.3: Most effects are fully supported, the rest fade in/out. All other browsers: full support. */
+ Container.Velocity.RegisterUI.packagedEffects =
+ {
+ /* Animate.css */
+ "callout.bounce": {
+ defaultDuration: 550,
+ calls: [
+ [ { translateY: -30 }, 0.25 ],
+ [ { translateY: 0 }, 0.125 ],
+ [ { translateY: -15 }, 0.125 ],
+ [ { translateY: 0 }, 0.25 ]
+ ]
+ },
+ /* Animate.css */
+ "callout.shake": {
+ defaultDuration: 800,
+ calls: [
+ [ { translateX: -11 }, 0.125 ],
+ [ { translateX: 11 }, 0.125 ],
+ [ { translateX: -11 }, 0.125 ],
+ [ { translateX: 11 }, 0.125 ],
+ [ { translateX: -11 }, 0.125 ],
+ [ { translateX: 11 }, 0.125 ],
+ [ { translateX: -11 }, 0.125 ],
+ [ { translateX: 0 }, 0.125 ]
+ ]
+ },
+ /* Animate.css */
+ "callout.flash": {
+ defaultDuration: 1100,
+ calls: [
+ [ { opacity: [ 0, "easeInOutQuad", 1 ] }, 0.25 ],
+ [ { opacity: [ 1, "easeInOutQuad" ] }, 0.25 ],
+ [ { opacity: [ 0, "easeInOutQuad" ] }, 0.25 ],
+ [ { opacity: [ 1, "easeInOutQuad" ] }, 0.25 ]
+ ]
+ },
+ /* Animate.css */
+ "callout.pulse": {
+ defaultDuration: 825,
+ calls: [
+ [ { scaleX: 1.1, scaleY: 1.1 }, 0.50 ],
+ [ { scaleX: 1, scaleY: 1 }, 0.50 ]
+ ]
+ },
+ /* Animate.css */
+ "callout.swing": {
+ defaultDuration: 950,
+ calls: [
+ [ { rotateZ: 15 }, 0.20 ],
+ [ { rotateZ: -10 }, 0.20 ],
+ [ { rotateZ: 5 }, 0.20 ],
+ [ { rotateZ: -5 }, 0.20 ],
+ [ { rotateZ: 0 }, 0.20 ]
+ ]
+ },
+ /* Animate.css */
+ "callout.tada": {
+ defaultDuration: 1000,
+ calls: [
+ [ { scaleX: 0.9, scaleY: 0.9, rotateZ: -3 }, 0.10 ],
+ [ { scaleX: 1.1, scaleY: 1.1, rotateZ: 3 }, 0.10 ],
+ [ { scaleX: 1.1, scaleY: 1.1, rotateZ: -3 }, 0.10 ],
+ [ "reverse", 0.125 ],
+ [ "reverse", 0.125 ],
+ [ "reverse", 0.125 ],
+ [ "reverse", 0.125 ],
+ [ "reverse", 0.125 ],
+ [ { scaleX: 1, scaleY: 1, rotateZ: 0 }, 0.20 ]
+ ]
+ },
+ "transition.fadeIn": {
+ defaultDuration: 500,
+ calls: [
+ [ { opacity: [ 1, 0 ] } ]
+ ]
+ },
+ "transition.fadeOut": {
+ defaultDuration: 500,
+ calls: [
+ [ { opacity: [ 0, 1 ] } ]
+ ]
+ },
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipXIn": {
+ defaultDuration: 700,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], rotateY: [ 0, -55 ] } ]
+ ],
+ reset: { transformPerspective: 0 }
+ },
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipXOut": {
+ defaultDuration: 700,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], rotateY: 55 } ]
+ ],
+ reset: { transformPerspective: 0, rotateY: 0 }
+ },
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipYIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], rotateX: [ 0, -45 ] } ]
+ ],
+ reset: { transformPerspective: 0 }
+ },
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipYOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], rotateX: 25 } ]
+ ],
+ reset: { transformPerspective: 0, rotateX: 0 }
+ },
+ /* Animate.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipBounceXIn": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 0.725, 0 ], transformPerspective: [ 400, 400 ], rotateY: [ -10, 90 ] }, 0.50 ],
+ [ { opacity: 0.80, rotateY: 10 }, 0.25 ],
+ [ { opacity: 1, rotateY: 0 }, 0.25 ]
+ ],
+ reset: { transformPerspective: 0 }
+ },
+ /* Animate.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipBounceXOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 0.9, 1 ], transformPerspective: [ 400, 400 ], rotateY: -10 }, 0.50 ],
+ [ { opacity: 0, rotateY: 90 }, 0.50 ]
+ ],
+ reset: { transformPerspective: 0, rotateY: 0 }
+ },
+ /* Animate.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipBounceYIn": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 0.725, 0 ], transformPerspective: [ 400, 400 ], rotateX: [ -10, 90 ] }, 0.50 ],
+ [ { opacity: 0.80, rotateX: 10 }, 0.25 ],
+ [ { opacity: 1, rotateX: 0 }, 0.25 ]
+ ],
+ reset: { transformPerspective: 0 }
+ },
+ /* Animate.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipBounceYOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 0.9, 1 ], transformPerspective: [ 400, 400 ], rotateX: -15 }, 0.50 ],
+ [ { opacity: 0, rotateX: 90 }, 0.50 ]
+ ],
+ reset: { transformPerspective: 0, rotateX: 0 }
+ },
+ /* Magic.css */
+ "transition.swoopIn": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformOriginX: [ "100%", "50%" ], transformOriginY: [ "100%", "100%" ], scaleX: [ 1, 0 ], scaleY: [ 1, 0 ], translateX: [ 0, -700 ], translateZ: 0 } ]
+ ],
+ reset: { transformOriginX: "50%", transformOriginY: "50%" }
+ },
+ /* Magic.css */
+ "transition.swoopOut": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "100%" ], transformOriginY: [ "100%", "100%" ], scaleX: 0, scaleY: 0, translateX: -700, translateZ: 0 } ]
+ ],
+ reset: { transformOriginX: "50%", transformOriginY: "50%", scaleX: 1, scaleY: 1, translateX: 0 }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */
+ "transition.whirlIn": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 0 ], scaleY: [ 1, 0 ], rotateY: [ 0, 160 ] } ]
+ ]
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */
+ "transition.whirlOut": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 0, scaleY: 0, rotateY: 160 } ]
+ ],
+ reset: { scaleX: 1, scaleY: 1, rotateY: 0 }
+ },
+ "transition.shrinkIn": {
+ defaultDuration: 700,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 1.5 ], scaleY: [ 1, 1.5 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.shrinkOut": {
+ defaultDuration: 650,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 1.3, scaleY: 1.3, translateZ: 0 } ]
+ ],
+ reset: { scaleX: 1, scaleY: 1 }
+ },
+ "transition.expandIn": {
+ defaultDuration: 700,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 0.625 ], scaleY: [ 1, 0.625 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.expandOut": {
+ defaultDuration: 700,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 0.5, scaleY: 0.5, translateZ: 0 } ]
+ ],
+ reset: { scaleX: 1, scaleY: 1 }
+ },
+ /* Animate.css */
+ "transition.bounceIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], scaleX: [ 1.05, 0.3 ], scaleY: [ 1.05, 0.3 ] }, 0.40 ],
+ [ { scaleX: 0.9, scaleY: 0.9, translateZ: 0 }, 0.20 ],
+ [ { scaleX: 1, scaleY: 1 }, 0.50 ]
+ ]
+ },
+ /* Animate.css */
+ "transition.bounceOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { scaleX: 0.95, scaleY: 0.95 }, 0.40 ],
+ [ { scaleX: 1.1, scaleY: 1.1, translateZ: 0 }, 0.40 ],
+ [ { opacity: [ 0, 1 ], scaleX: 0.3, scaleY: 0.3 }, 0.20 ]
+ ],
+ reset: { scaleX: 1, scaleY: 1 }
+ },
+ /* Animate.css */
+ "transition.bounceUpIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ -30, 1000 ] }, 0.60, { easing: "easeOutCirc" } ],
+ [ { translateY: 10 }, 0.20 ],
+ [ { translateY: 0 }, 0.20 ]
+ ]
+ },
+ /* Animate.css */
+ "transition.bounceUpOut": {
+ defaultDuration: 1000,
+ calls: [
+ [ { translateY: 20 }, 0.20 ],
+ [ { opacity: [ 0, "easeInCirc", 1 ], translateY: -1000 }, 0.80 ]
+ ],
+ reset: { translateY: 0 }
+ },
+ /* Animate.css */
+ "transition.bounceDownIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ 30, -1000 ] }, 0.60, { easing: "easeOutCirc" } ],
+ [ { translateY: -10 }, 0.20 ],
+ [ { translateY: 0 }, 0.20 ]
+ ]
+ },
+ /* Animate.css */
+ "transition.bounceDownOut": {
+ defaultDuration: 1000,
+ calls: [
+ [ { translateY: -20 }, 0.20 ],
+ [ { opacity: [ 0, "easeInCirc", 1 ], translateY: 1000 }, 0.80 ]
+ ],
+ reset: { translateY: 0 }
+ },
+ /* Animate.css */
+ "transition.bounceLeftIn": {
+ defaultDuration: 750,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ 30, -1250 ] }, 0.60, { easing: "easeOutCirc" } ],
+ [ { translateX: -10 }, 0.20 ],
+ [ { translateX: 0 }, 0.20 ]
+ ]
+ },
+ /* Animate.css */
+ "transition.bounceLeftOut": {
+ defaultDuration: 750,
+ calls: [
+ [ { translateX: 30 }, 0.20 ],
+ [ { opacity: [ 0, "easeInCirc", 1 ], translateX: -1250 }, 0.80 ]
+ ],
+ reset: { translateX: 0 }
+ },
+ /* Animate.css */
+ "transition.bounceRightIn": {
+ defaultDuration: 750,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ -30, 1250 ] }, 0.60, { easing: "easeOutCirc" } ],
+ [ { translateX: 10 }, 0.20 ],
+ [ { translateX: 0 }, 0.20 ]
+ ]
+ },
+ /* Animate.css */
+ "transition.bounceRightOut": {
+ defaultDuration: 750,
+ calls: [
+ [ { translateX: -30 }, 0.20 ],
+ [ { opacity: [ 0, "easeInCirc", 1 ], translateX: 1250 }, 0.80 ]
+ ],
+ reset: { translateX: 0 }
+ },
+ "transition.slideUpIn": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ 0, 20 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideUpOut": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateY: -20, translateZ: 0 } ]
+ ],
+ reset: { translateY: 0 }
+ },
+ "transition.slideDownIn": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ 0, -20 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideDownOut": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateY: 20, translateZ: 0 } ]
+ ],
+ reset: { translateY: 0 }
+ },
+ "transition.slideLeftIn": {
+ defaultDuration: 1000,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ 0, -20 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideLeftOut": {
+ defaultDuration: 1050,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateX: -20, translateZ: 0 } ]
+ ],
+ reset: { translateX: 0 }
+ },
+ "transition.slideRightIn": {
+ defaultDuration: 1000,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ 0, 20 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideRightOut": {
+ defaultDuration: 1050,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateX: 20, translateZ: 0 } ]
+ ],
+ reset: { translateX: 0 }
+ },
+ "transition.slideUpBigIn": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ 0, 75 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideUpBigOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateY: -75, translateZ: 0 } ]
+ ],
+ reset: { translateY: 0 }
+ },
+ "transition.slideDownBigIn": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ 0, -75 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideDownBigOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateY: 75, translateZ: 0 } ]
+ ],
+ reset: { translateY: 0 }
+ },
+ "transition.slideLeftBigIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ 0, -75 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideLeftBigOut": {
+ defaultDuration: 750,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateX: -75, translateZ: 0 } ]
+ ],
+ reset: { translateX: 0 }
+ },
+ "transition.slideRightBigIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ 0, 75 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideRightBigOut": {
+ defaultDuration: 750,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateX: 75, translateZ: 0 } ]
+ ],
+ reset: { translateX: 0 }
+ },
+ /* Magic.css */
+ "transition.perspectiveUpIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ "100%", "100%" ], rotateX: [ 0, -180 ] } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveUpOut": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ "100%", "100%" ], rotateX: -180 } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0 }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveDownIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateX: [ 0, 180 ] } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveDownOut": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateX: 180 } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0 }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveLeftIn": {
+ defaultDuration: 950,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateY: [ 0, -180 ] } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveLeftOut": {
+ defaultDuration: 950,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateY: -180 } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0 }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveRightIn": {
+ defaultDuration: 950,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ "100%", "100%" ], transformOriginY: [ 0, 0 ], rotateY: [ 0, 180 ] } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveRightOut": {
+ defaultDuration: 950,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ "100%", "100%" ], transformOriginY: [ 0, 0 ], rotateY: 180 } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0 }
+ }
+ };
+
+ /* Register the packaged effects. */
+ for (var effectName in Container.Velocity.RegisterUI.packagedEffects) {
+ Container.Velocity.RegisterUI(effectName, Container.Velocity.RegisterUI.packagedEffects[effectName]);
+ }
+})();
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/3e6ab2e4/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 04eeb22..5abbc10 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -383,11 +383,11 @@ table.databases {
}
}
.bottom-container {
- height: 110px;
- position: fixed;
- bottom: 0;
- width: 220px;
- background: #3a2c2b;
+ height: 110px;
+ position: fixed;
+ bottom: 0;
+ width: 220px;
+ background: #3a2c2b;
.brand {
.box-sizing(content-box);
.hide-text;
@@ -413,19 +413,19 @@ table.databases {
}
}
#footer-nav-links {
- li {
- a {
- font-size: 12px;
- color: @red;
- padding: 12px;
- text-shadow: none;
- }
- &.active, &:hover{
+ li {
+ a {
+ font-size: 12px;
+ color: @red;
+ padding: 12px;
+ text-shadow: none;
+ }
+ &.active, &:hover{
a {
text-decoration: underline;
}
}
- }
+ }
}
}
nav {
@@ -899,16 +899,19 @@ div.spinner {
margin-top: 5px;
margin-bottom: 5px;
.icon {
- font-size: 11px;
+ font-size: 12px;
}
}
.api-navbar {
- .border-radius(5px);
+ .border-radius(0px);
+ display: none;
position: absolute;
right: 5px;
background-color: #333;
- padding: 5px 20px;
+ border: 1px solid black;
+ padding: 16px 20px 28px;
+ .box-shadow(@boxShadowLeft);
.input-append.input-prepend {
margin-bottom: 0px;
.copying {
@@ -918,29 +921,42 @@ div.spinner {
.add-on {
background: none;
padding: 0px;
- margin: 10px 0;
+ margin: 12px 0;
border: none;
display: block;
text-align: left;
color: #fff;
text-shadow: none;
height: auto;
+ font-size: 16px;
}
.input-xxlarge {
.border-radius(5px 0 0 5px);
border: none;
- padding: 9px;
+ padding: 8px;
font-size: 18px;
-moz-transition: background-color 100ms linear;
-webkit-transition: background-color 100ms linear;
transition: background-color 100ms linear;
+
+ // background-color: rgba(113, 121, 129, 0.2);
+ // color: #308a75;
+ border: 1px solid;
+ border-color: rgba(113, 121, 129, 0);
}
+ .input-xxlarge:focus{
+ box-shadow: none;
+ border: 1px solid rgba(218, 79, 73, 1);
+ color: rgba(85, 85, 85, 0.8);
+ }
+
.btn{
background-color: @red;
color: #333;
margin-left: -1px;
padding: 10px 10px 8px;
border: none;
+ height: 40px;
.border-radius(5px);
&:hover{
background-color: #cbcbcb;
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/3e6ab2e4/assets/less/variables.less
----------------------------------------------------------------------
diff --git a/assets/less/variables.less b/assets/less/variables.less
index f66f257..467ec2e 100644
--- a/assets/less/variables.less
+++ b/assets/less/variables.less
@@ -76,6 +76,8 @@
@boxShadow: 2px 2px rgba(0,0,0,0.2);
@boxShadowOff: 2px 2px rgba(0,0,0,0);
+@boxShadowLeft: -4px 4px rgba(0,0,0,0.2);
+@boxShadowLeftOff: -4px 4px rgba(0,0,0,0);
@textShadow: 1px 2px rgba(0,0,0,0.2);
@textShadowOff: 1px 2px rgba(0,0,0,0);
[5/7] API URL style updates,
added Velocity.js (http://julian.com/research/velocity/) for use on
animated transitions
Posted by ga...@apache.org.
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/3e6ab2e4/assets/js/plugins/jquery.velocity.js
----------------------------------------------------------------------
diff --git a/assets/js/plugins/jquery.velocity.js b/assets/js/plugins/jquery.velocity.js
new file mode 100644
index 0000000..3045b8c
--- /dev/null
+++ b/assets/js/plugins/jquery.velocity.js
@@ -0,0 +1,3430 @@
+/******************
+ Velocity.js
+******************/
+
+/*! VelocityJS.org (0.11.7). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License */
+
+;(function (factory) {
+ /* CommonJS module. */
+ if (typeof module === "object" && typeof module.exports === "object") {
+ module.exports = factory(window.Velocity ? window.jQuery : require("jquery"));
+ /* AMD module. */
+ } else if (typeof define === "function" && define.amd) {
+ if (window.Velocity) {
+ define("velocity", factory);
+ } else {
+ define("velocity", [ "jquery" ], factory)
+ }
+ /* Browser globals. */
+ } else {
+ factory(window.jQuery);
+ }
+}(function (jQuery) {
+return function (global, window, document, undefined) {
+ /*
+ Structure:
+ - CSS: CSS stack that works independently from the rest of Velocity.
+ - animate(): Core animation method that iterates over the targeted elements and queues the incoming call onto each element individually.
+ - Pre-Queueing: Prepare the element for animation by instantiating its data cache and processing the call's options.
+ - Queueing: The logic that runs once the call has reached its point of execution in the element's $.queue() stack.
+ Most logic is placed here to avoid risking it becoming stale (if the element's properties have changed).
+ - Pushing: Consolidation of the tween data followed by its push onto the global in-progress calls container.
+ - tick(): The single requestAnimationFrame loop responsible for tweening all in-progress calls.
+ - completeCall(): Handles the cleanup process for each Velocity call.
+ */
+
+ /*****************
+ Constants
+ *****************/
+
+ var NAME = "velocity",
+ DEFAULT_DURATION = 400,
+ DEFAULT_EASING = "swing";
+
+ /*********************
+ Helper Functions
+ *********************/
+
+ /* IE detection. Gist: https://gist.github.com/julianshapiro/9098609 */
+ var IE = (function() {
+ if (document.documentMode) {
+ return document.documentMode;
+ } else {
+ for (var i = 7; i > 4; i--) {
+ var div = document.createElement("div");
+
+ div.innerHTML = "<!--[if IE " + i + "]><span></span><![endif]-->";
+
+ if (div.getElementsByTagName("span").length) {
+ div = null;
+
+ return i;
+ }
+ }
+ }
+
+ return undefined;
+ })();
+
+ /* rAF polyfill. Gist: https://gist.github.com/julianshapiro/9497513 */
+ var rAFPollyfill = (function() {
+ var timeLast = 0;
+
+ return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
+ var timeCurrent = (new Date()).getTime(),
+ timeDelta;
+
+ /* Dynamically set delay on a per-tick basis to match 60fps. */
+ /* Technique by Erik Moller. MIT license: https://gist.github.com/paulirish/1579671 */
+ timeDelta = Math.max(0, 16 - (timeCurrent - timeLast));
+ timeLast = timeCurrent + timeDelta;
+
+ return setTimeout(function() { callback(timeCurrent + timeDelta); }, timeDelta);
+ };
+ })();
+
+ var ticker = window.requestAnimationFrame || rAFPollyfill;
+
+ /* Array compacting. Copyright Lo-Dash. MIT License: https://github.com/lodash/lodash/blob/master/LICENSE.txt */
+ function compactSparseArray (array) {
+ var index = -1,
+ length = array ? array.length : 0,
+ result = [];
+
+ while (++index < length) {
+ var value = array[index];
+
+ if (value) {
+ result.push(value);
+ }
+ }
+
+ return result;
+ }
+
+ /* Wrap single elements in an array so that $.each() can iterate with the element instead of its node's children. */
+ function createElementsArray (elements) {
+ return Type.isNode(elements) ? [ elements ] : elements;
+ }
+
+ var Type = {
+ isString: function (variable) {
+ return (typeof variable === "string");
+ },
+
+ isArray: Array.isArray || function (variable) {
+ return Object.prototype.toString.call(variable) === "[object Array]";
+ },
+
+ isFunction: function (variable) {
+ return Object.prototype.toString.call(variable) === "[object Function]";
+ },
+
+ isNode: function (variable) {
+ return variable && variable.nodeType;
+ },
+
+ /* Copyright Martin Bohm. MIT License: https://gist.github.com/Tomalak/818a78a226a0738eaade */
+ isNodeList: function (variable) {
+ return typeof variable === "object" &&
+ /^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(variable)) &&
+ variable.length !== undefined &&
+ (variable.length === 0 || (typeof variable[0] === "object" && variable[0].nodeType > 0));
+ },
+
+ /* Determine if variable is a wrapped jQuery or Zepto element. */
+ isWrapped: function (variable) {
+ return variable && (variable.jquery || (window.Zepto && window.Zepto.zepto.isZ(variable)));
+ },
+
+ isSVG: function (variable) {
+ return window.SVGElement && (variable instanceof SVGElement);
+ },
+
+ isEmptyObject: function (variable) {
+ var name;
+
+ for (name in variable) {
+ return false;
+ }
+
+ return true;
+ }
+ };
+
+ /*****************
+ Dependencies
+ *****************/
+
+ /* Local to our Velocity scope, assign $ to jQuery or the jQuery shim. (The shim is a port of the jQuery utility functions that Velocity uses.) */
+ var $;
+
+ /* The argument passed in by the module loader can either be jQuery (if it was required) or a helper function provided by the module loader
+ (in the case that Velocity's jQuery shim is being used). We check for jQuery by sniffing its unique .fn property. */
+ if (jQuery && jQuery.fn !== undefined) {
+ $ = jQuery;
+ } else if (window.Velocity && window.Velocity.Utilities) {
+ $ = window.Velocity.Utilities;
+ }
+
+ if (!$) {
+ throw new Error("Velocity: Either jQuery or Velocity's jQuery shim must first be loaded.")
+ /* We allow the global Velocity variable to pre-exist so long as we were responsible for its creation
+ (via the jQuery shim, which uniquely assigns a Utilities property to the Velocity object). */
+ } else if (global.Velocity !== undefined && global.Velocity.Utilities == undefined) {
+ throw new Error("Velocity: Namespace is occupied.");
+ /* Nothing prevents Velocity from working on IE6+7, but it is not worth the time to test on them.
+ Revert to jQuery's $.animate(), and lose Velocity's extra features. */
+ } else if (IE <= 7) {
+ if (!jQuery) {
+ throw new Error("Velocity: In IE<=7, Velocity falls back to jQuery, which must first be loaded.");
+ } else {
+ jQuery.fn.velocity = jQuery.fn.animate;
+
+ /* Now that $.fn.velocity is aliased, abort this Velocity declaration. */
+ return;
+ }
+ /* IE8 doesn't work with the jQuery shim; it requires jQuery proper. */
+ } else if (IE === 8 && !jQuery) {
+ throw new Error("Velocity: In IE8, Velocity requires jQuery proper to be loaded; Velocity's jQuery shim does not work with IE8.");
+ }
+
+ /* Shorthand alias for jQuery's $.data() utility. */
+ function Data (element) {
+ /* Hardcode a reference to the plugin name. */
+ var response = $.data(element, NAME);
+
+ /* jQuery <=1.4.2 returns null instead of undefined when no match is found. We normalize this behavior. */
+ return response === null ? undefined : response;
+ };
+
+ /*************
+ State
+ *************/
+
+ /* Note: The global object also doubles as a publicly-accessible data store for the purposes of unit testing. */
+ /* Note: Alias the lowercase and uppercase variants of "velocity" to minimize user confusion due to the lowercase nature of the $.fn extension. */
+ var Velocity = {
+ /* Container for page-wide Velocity state data. */
+ State: {
+ /* Detect mobile devices to determine if mobileHA should be turned on. */
+ isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
+ /* The mobileHA option's behavior changes on older Android devices (Gingerbread, versions 2.3.3-2.3.7). */
+ isAndroid: /Android/i.test(navigator.userAgent),
+ isGingerbread: /Android 2\.3\.[3-7]/i.test(navigator.userAgent),
+ isChrome: window.chrome,
+ isFirefox: /Firefox/i.test(navigator.userAgent),
+ /* Create a cached element for re-use when checking for CSS property prefixes. */
+ prefixElement: document.createElement("div"),
+ /* Cache every prefix match to avoid repeating lookups. */
+ prefixMatches: {},
+ /* Cache the anchor used for animating window scrolling. */
+ scrollAnchor: null,
+ /* Cache the property names associated with the scroll anchor. */
+ scrollPropertyLeft: null,
+ scrollPropertyTop: null,
+ /* Keep track of whether our RAF tick is running. */
+ isTicking: false,
+ /* Container for every in-progress call to Velocity. */
+ calls: []
+ },
+ /* Velocity's custom CSS stack. Made global for unit testing. */
+ CSS: { /* Defined below. */ },
+ /* Defined by Velocity's optional jQuery shim. */
+ Utilities: $,
+ /* Container for the user's custom animation sequences that are referenced by name in place of a properties map object. */
+ Sequences: {
+ /* Manually registered by the user. Learn more: VelocityJS.org/#sequences */
+ },
+ Easings: {
+ /* Defined below. */
+ },
+ /* Attempt to use ES6 Promises by default. Users can override this with a third-party promises library. */
+ Promise: window.Promise,
+ /* Page-wide option defaults, which can be overriden by the user. */
+ defaults: {
+ queue: "",
+ duration: DEFAULT_DURATION,
+ easing: DEFAULT_EASING,
+ begin: null,
+ complete: null,
+ progress: null,
+ display: null,
+ loop: false,
+ delay: false,
+ mobileHA: true,
+ /* Set to false to prevent property values from being cached between consecutive Velocity-initiated chain calls. */
+ _cacheValues: true
+ },
+ /* A design goal of Velocity is to cache data wherever possible in order to avoid DOM requerying.
+ Accordingly, each element has a data cache instantiated on it. */
+ init: function (element) {
+ $.data(element, NAME, {
+ /* Store whether this is an SVG element, since its properties are retrieved and updated differently than standard HTML elements. */
+ isSVG: Type.isSVG(element),
+ /* Keep track of whether the element is currently being animated by Velocity.
+ This is used to ensure that property values are not transferred between non-consecutive (stale) calls. */
+ isAnimating: false,
+ /* A reference to the element's live computedStyle object. Learn more here: https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle */
+ computedStyle: null,
+ /* Tween data is cached for each animation on the element so that data can be passed across calls --
+ in particular, end values are used as subsequent start values in consecutive Velocity calls. */
+ tweensContainer: null,
+ /* The full root property values of each CSS hook being animated on this element are cached so that:
+ 1) Concurrently-animating hooks sharing the same root can have their root values' merged into one while tweening.
+ 2) Post-hook-injection root values can be transferred over to consecutively chained Velocity calls as starting root values. */
+ rootPropertyValueCache: {},
+ /* A cache for transform updates, which must be manually flushed via CSS.flushTransformCache(). */
+ transformCache: {}
+ });
+ },
+ /* Velocity's core animation method, later aliased to $.fn if a framework (jQuery or Zepto) is detected. */
+ animate: null, /* Defined below. */
+ /* A reimplementation of jQuery's $.css(), used for getting/setting Velocity's hooked CSS properties. */
+ hook: function (elements, arg2, arg3) {
+ var value = undefined;
+
+ /* Unwrap jQuery/Zepto objects. */
+ if (Type.isWrapped(elements)) {
+ elements = [].slice.call(elements);
+ }
+
+ $.each(createElementsArray(elements), function(i, element) {
+ /* Initialize Velocity's per-element data cache if this element hasn't previously been animated. */
+ if (Data(element) === undefined) {
+ Velocity.init(element);
+ }
+
+ /* Get property value. If an element set was passed in, only return the value for the first element. */
+ if (arg3 === undefined) {
+ if (value === undefined) {
+ value = Velocity.CSS.getPropertyValue(element, arg2);
+ }
+ /* Set property value. */
+ } else {
+ /* sPV returns an array of the normalized propertyName/propertyValue pair used to update the DOM. */
+ var adjustedSet = Velocity.CSS.setPropertyValue(element, arg2, arg3);
+
+ /* Transform properties don't automatically set. They have to be flushed to the DOM. */
+ if (adjustedSet[0] === "transform") {
+ Velocity.CSS.flushTransformCache(element);
+ }
+
+ value = adjustedSet;
+ }
+ });
+
+ return value;
+ },
+ /* Set to true to force a duration of 1ms for all animations so that UI testing can be performed without waiting on animations to complete. */
+ mock: false,
+ version: { major: 0, minor: 11, patch: 7 },
+ /* Set to 1 or 2 (most verbose) to output debug info to console. */
+ debug: false
+ };
+
+ /* Retrieve the appropriate scroll anchor and property name for the browser: https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY */
+ if (window.pageYOffset !== undefined) {
+ Velocity.State.scrollAnchor = window;
+ Velocity.State.scrollPropertyLeft = "pageXOffset";
+ Velocity.State.scrollPropertyTop = "pageYOffset";
+ } else {
+ Velocity.State.scrollAnchor = document.documentElement || document.body.parentNode || document.body;
+ Velocity.State.scrollPropertyLeft = "scrollLeft";
+ Velocity.State.scrollPropertyTop = "scrollTop";
+ }
+
+ /**************
+ Easing
+ **************/
+
+ /* Step easing generator. */
+ function generateStep (steps) {
+ return function (p) {
+ return Math.round(p * steps) * (1 / steps);
+ };
+ }
+
+ /* Bezier curve function generator. Copyright Gaetan Renaudeau. MIT License: http://en.wikipedia.org/wiki/MIT_License */
+ var generateBezier = (function () {
+ function A (aA1, aA2) {
+ return 1.0 - 3.0 * aA2 + 3.0 * aA1;
+ }
+
+ function B (aA1, aA2) {
+ return 3.0 * aA2 - 6.0 * aA1;
+ }
+ function C (aA1) {
+ return 3.0 * aA1;
+ }
+
+ function calcBezier (aT, aA1, aA2) {
+ return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
+ }
+
+ function getSlope (aT, aA1, aA2) {
+ return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+ }
+
+ return function (mX1, mY1, mX2, mY2) {
+ /* Must contain four arguments. */
+ if (arguments.length !== 4) {
+ return false;
+ }
+
+ /* Arguments must be numbers. */
+ for (var i = 0; i < 4; ++i) {
+ if (typeof arguments[i] !== "number" || isNaN(arguments[i]) || !isFinite(arguments[i])) {
+ return false;
+ }
+ }
+
+ /* X values must be in the [0, 1] range. */
+ mX1 = Math.min(mX1, 1);
+ mX2 = Math.min(mX2, 1);
+ mX1 = Math.max(mX1, 0);
+ mX2 = Math.max(mX2, 0);
+
+ function getTForX (aX) {
+ var aGuessT = aX;
+
+ for (var i = 0; i < 8; ++i) {
+ var currentSlope = getSlope(aGuessT, mX1, mX2);
+
+ if (currentSlope === 0.0) {
+ return aGuessT;
+ }
+
+ var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+
+ aGuessT -= currentX / currentSlope;
+ }
+
+ return aGuessT;
+ }
+
+ return function (aX) {
+ if (mX1 === mY1 && mX2 === mY2) {
+ return aX;
+ } else {
+ return calcBezier(getTForX(aX), mY1, mY2);
+ }
+ };
+ };
+ }());
+
+ /* Runge-Kutta spring physics function generator. Adapted from Framer.js, copyright Koen Bok. MIT License: http://en.wikipedia.org/wiki/MIT_License */
+ /* Given a tension, friction, and duration, a simulation at 60FPS will first run without a defined duration in order to calculate the full path. A second pass
+ then adjusts the time dela -- using the relation between actual time and duration -- to calculate the path for the duration-constrained animation. */
+ var generateSpringRK4 = (function () {
+
+ function springAccelerationForState (state) {
+ return (-state.tension * state.x) - (state.friction * state.v);
+ }
+
+ function springEvaluateStateWithDerivative (initialState, dt, derivative) {
+ var state = {
+ x: initialState.x + derivative.dx * dt,
+ v: initialState.v + derivative.dv * dt,
+ tension: initialState.tension,
+ friction: initialState.friction
+ };
+
+ return { dx: state.v, dv: springAccelerationForState(state) };
+ }
+
+ function springIntegrateState (state, dt) {
+ var a = {
+ dx: state.v,
+ dv: springAccelerationForState(state)
+ },
+ b = springEvaluateStateWithDerivative(state, dt * 0.5, a),
+ c = springEvaluateStateWithDerivative(state, dt * 0.5, b),
+ d = springEvaluateStateWithDerivative(state, dt, c),
+ dxdt = 1.0 / 6.0 * (a.dx + 2.0 * (b.dx + c.dx) + d.dx),
+ dvdt = 1.0 / 6.0 * (a.dv + 2.0 * (b.dv + c.dv) + d.dv);
+
+ state.x = state.x + dxdt * dt;
+ state.v = state.v + dvdt * dt;
+
+ return state;
+ }
+
+ return function springRK4Factory (tension, friction, duration) {
+
+ var initState = {
+ x: -1,
+ v: 0,
+ tension: null,
+ friction: null
+ },
+ path = [0],
+ time_lapsed = 0,
+ tolerance = 1 / 10000,
+ DT = 16 / 1000,
+ have_duration, dt, last_state;
+
+ tension = parseFloat(tension) || 500;
+ friction = parseFloat(friction) || 20;
+ duration = duration || null;
+
+ initState.tension = tension;
+ initState.friction = friction;
+
+ have_duration = duration !== null;
+
+ /* Calculate the actual time it takes for this animation to complete with the provided conditions. */
+ if (have_duration) {
+ /* Run the simulation without a duration. */
+ time_lapsed = springRK4Factory(tension, friction);
+ /* Compute the adjusted time delta. */
+ dt = time_lapsed / duration * DT;
+ } else {
+ dt = DT;
+ }
+
+ while (true) {
+ /* Next/step function .*/
+ last_state = springIntegrateState(last_state || initState, dt);
+ /* Store the position. */
+ path.push(1 + last_state.x);
+ time_lapsed += 16;
+ /* If the change threshold is reached, break. */
+ if (!(Math.abs(last_state.x) > tolerance && Math.abs(last_state.v) > tolerance)) {
+ break;
+ }
+ }
+
+ /* If duration is not defined, return the actual time required for completing this animation. Otherwise, return a closure that holds the
+ computed path and returns a snapshot of the position according to a given percentComplete. */
+ return !have_duration ? time_lapsed : function(percentComplete) { return path[ (percentComplete * (path.length - 1)) | 0 ]; };
+ };
+ }());
+
+ /* Velocity embeds the named easings from jQuery, jQuery UI, and CSS3 in order to save users from having to include additional libraries on their page. */
+ (function () {
+ /* jQuery's default named easing types. */
+ Velocity.Easings["linear"] = function(p) {
+ return p;
+ };
+
+ Velocity.Easings["swing"] = function(p) {
+ return 0.5 - Math.cos(p * Math.PI) / 2;
+ };
+
+ /* Bonus "spring" easing, which is a less exaggerated version of easeInOutElastic. */
+ Velocity.Easings["spring"] = function(p) {
+ return 1 - (Math.cos(p * 4.5 * Math.PI) * Math.exp(-p * 6));
+ };
+
+ /* CSS3's named easing types. */
+ Velocity.Easings["ease"] = generateBezier(0.25, 0.1, 0.25, 1.0);
+ Velocity.Easings["ease-in"] = generateBezier(0.42, 0.0, 1.00, 1.0);
+ Velocity.Easings["ease-out"] = generateBezier(0.00, 0.0, 0.58, 1.0);
+ Velocity.Easings["ease-in-out"] = generateBezier(0.42, 0.0, 0.58, 1.0);
+
+ /* jQuery UI's Robert Penner easing equations. Copyright The jQuery Foundation. MIT License: https://jquery.org/license */
+ var baseEasings = {};
+
+ $.each(["Quad", "Cubic", "Quart", "Quint", "Expo"], function(i, name) {
+ baseEasings[name] = function(p) {
+ return Math.pow(p, i + 2);
+ };
+ });
+
+ $.extend(baseEasings, {
+ Sine: function (p) {
+ return 1 - Math.cos(p * Math.PI / 2);
+ },
+
+ Circ: function (p) {
+ return 1 - Math.sqrt(1 - p * p);
+ },
+
+ Elastic: function(p) {
+ return p === 0 || p === 1 ? p :
+ -Math.pow(2, 8 * (p - 1)) * Math.sin(((p - 1) * 80 - 7.5) * Math.PI / 15);
+ },
+
+ Back: function(p) {
+ return p * p * (3 * p - 2);
+ },
+
+ Bounce: function (p) {
+ var pow2,
+ bounce = 4;
+
+ while (p < ((pow2 = Math.pow(2, --bounce)) - 1) / 11) {}
+ return 1 / Math.pow(4, 3 - bounce) - 7.5625 * Math.pow((pow2 * 3 - 2) / 22 - p, 2);
+ }
+ });
+
+ /* jQuery's easing generator for the object above. */
+ $.each(baseEasings, function(name, easeIn) {
+ Velocity.Easings["easeIn" + name] = easeIn;
+ Velocity.Easings["easeOut" + name] = function(p) {
+ return 1 - easeIn(1 - p);
+ };
+ Velocity.Easings["easeInOut" + name] = function(p) {
+ return p < 0.5 ?
+ easeIn(p * 2) / 2 :
+ 1 - easeIn(p * -2 + 2) / 2;
+ };
+ });
+ })();
+
+ /* Determine the appropriate easing type given an easing input. */
+ function getEasing(value, duration) {
+ var easing = value;
+
+ /* The easing option can either be a string that references a pre-registered easing,
+ or it can be a two-/four-item array of integers to be converted into a bezier/spring function. */
+ if (Type.isString(value)) {
+ /* Ensure that the easing has been assigned to jQuery's Velocity.Easings object. */
+ if (!Velocity.Easings[value]) {
+ easing = false;
+ }
+ } else if (Type.isArray(value) && value.length === 1) {
+ easing = generateStep.apply(null, value);
+ } else if (Type.isArray(value) && value.length === 2) {
+ /* springRK4 must be passed the animation's duration. */
+ /* Note: If the springRK4 array contains non-numbers, generateSpringRK4() returns an easing
+ function generated with default tension and friction values. */
+ easing = generateSpringRK4.apply(null, value.concat([ duration ]));
+ } else if (Type.isArray(value) && value.length === 4) {
+ /* Note: If the bezier array contains non-numbers, generateBezier() returns false. */
+ easing = generateBezier.apply(null, value);
+ } else {
+ easing = false;
+ }
+
+ /* Revert to the Velocity-wide default easing type, or fall back to "swing" (which is also jQuery's default)
+ if the Velocity-wide default has been incorrectly modified. */
+ if (easing === false) {
+ if (Velocity.Easings[Velocity.defaults.easing]) {
+ easing = Velocity.defaults.easing;
+ } else {
+ easing = DEFAULT_EASING;
+ }
+ }
+
+ return easing;
+ }
+
+ /*****************
+ CSS Stack
+ *****************/
+
+ /* The CSS object is a highly condensed and performant CSS stack that fully replaces jQuery's.
+ It handles the validation, getting, and setting of both standard CSS properties and CSS property hooks. */
+ /* Note: A "CSS" shorthand is aliased so that our code is easier to read. */
+ var CSS = Velocity.CSS = {
+
+ /*************
+ RegEx
+ *************/
+
+ RegEx: {
+ /* Unwrap a property value's surrounding text, e.g. "rgba(4, 3, 2, 1)" ==> "4, 3, 2, 1" and "rect(4px 3px 2px 1px)" ==> "4px 3px 2px 1px". */
+ isHex: /^#([A-f\d]{3}){1,2}$/i,
+ valueUnwrap: /^[A-z]+\((.*)\)$/i,
+ wrappedValueAlreadyExtracted: /[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/,
+ /* Split a multi-value property into an array of subvalues, e.g. "rgba(4, 3, 2, 1) 4px 3px 2px 1px" ==> [ "rgba(4, 3, 2, 1)", "4px", "3px", "2px", "1px" ]. */
+ valueSplit: /([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/ig
+ },
+
+ /************
+ Lists
+ ************/
+
+ Lists: {
+ colors: [ "fill", "stroke", "stopColor", "color", "backgroundColor", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", "outlineColor" ],
+ transformsBase: [ "translateX", "translateY", "scale", "scaleX", "scaleY", "skewX", "skewY", "rotateZ" ],
+ transforms3D: [ "transformPerspective", "translateZ", "scaleZ", "rotateX", "rotateY" ]
+ },
+
+ /************
+ Hooks
+ ************/
+
+ /* Hooks allow a subproperty (e.g. "boxShadowBlur") of a compound-value CSS property
+ (e.g. "boxShadow: X Y Blur Spread Color") to be animated as if it were a discrete property. */
+ /* Note: Beyond enabling fine-grained property animation, hooking is necessary since Velocity only
+ tweens properties with single numeric values; unlike CSS transitions, Velocity does not interpolate compound-values. */
+ Hooks: {
+ /********************
+ Registration
+ ********************/
+
+ /* Templates are a concise way of indicating which subproperties must be individually registered for each compound-value CSS property. */
+ /* Each template consists of the compound-value's base name, its constituent subproperty names, and those subproperties' default values. */
+ templates: {
+ "textShadow": [ "Color X Y Blur", "black 0px 0px 0px" ],
+ /* Todo: Add support for inset boxShadows. (webkit places it last whereas IE places it first.) */
+ "boxShadow": [ "Color X Y Blur Spread", "black 0px 0px 0px 0px" ],
+ "clip": [ "Top Right Bottom Left", "0px 0px 0px 0px" ],
+ "backgroundPosition": [ "X Y", "0% 0%" ],
+ "transformOrigin": [ "X Y Z", "50% 50% 0px" ],
+ "perspectiveOrigin": [ "X Y", "50% 50%" ]
+ },
+
+ /* A "registered" hook is one that has been converted from its template form into a live,
+ tweenable property. It contains data to associate it with its root property. */
+ registered: {
+ /* Note: A registered hook looks like this ==> textShadowBlur: [ "textShadow", 3 ],
+ which consists of the subproperty's name, the associated root property's name,
+ and the subproperty's position in the root's value. */
+ },
+ /* Convert the templates into individual hooks then append them to the registered object above. */
+ register: function () {
+ /* Color hooks registration. */
+ /* Note: Colors are defaulted to white -- as opposed to black -- since colors that are
+ currently set to "transparent" default to their respective template below when color-animated,
+ and white is typically a closer match to transparent than black is. */
+ for (var i = 0; i < CSS.Lists.colors.length; i++) {
+ CSS.Hooks.templates[CSS.Lists.colors[i]] = [ "Red Green Blue Alpha", "255 255 255 1" ];
+ }
+
+ var rootProperty,
+ hookTemplate,
+ hookNames;
+
+ /* In IE, color values inside compound-value properties are positioned at the end the value instead of at the beginning.
+ Thus, we re-arrange the templates accordingly. */
+ if (IE) {
+ for (rootProperty in CSS.Hooks.templates) {
+ hookTemplate = CSS.Hooks.templates[rootProperty];
+ hookNames = hookTemplate[0].split(" ");
+
+ var defaultValues = hookTemplate[1].match(CSS.RegEx.valueSplit);
+
+ if (hookNames[0] === "Color") {
+ /* Reposition both the hook's name and its default value to the end of their respective strings. */
+ hookNames.push(hookNames.shift());
+ defaultValues.push(defaultValues.shift());
+
+ /* Replace the existing template for the hook's root property. */
+ CSS.Hooks.templates[rootProperty] = [ hookNames.join(" "), defaultValues.join(" ") ];
+ }
+ }
+ }
+
+ /* Hook registration. */
+ for (rootProperty in CSS.Hooks.templates) {
+ hookTemplate = CSS.Hooks.templates[rootProperty];
+ hookNames = hookTemplate[0].split(" ");
+
+ for (var i in hookNames) {
+ var fullHookName = rootProperty + hookNames[i],
+ hookPosition = i;
+
+ /* For each hook, register its full name (e.g. textShadowBlur) with its root property (e.g. textShadow)
+ and the hook's position in its template's default value string. */
+ CSS.Hooks.registered[fullHookName] = [ rootProperty, hookPosition ];
+ }
+ }
+ },
+
+ /*****************************
+ Injection and Extraction
+ *****************************/
+
+ /* Look up the root property associated with the hook (e.g. return "textShadow" for "textShadowBlur"). */
+ /* Since a hook cannot be set directly (the browser won't recognize it), style updating for hooks is routed through the hook's root property. */
+ getRoot: function (property) {
+ var hookData = CSS.Hooks.registered[property];
+
+ if (hookData) {
+ return hookData[0];
+ } else {
+ /* If there was no hook match, return the property name untouched. */
+ return property;
+ }
+ },
+ /* Convert any rootPropertyValue, null or otherwise, into a space-delimited list of hook values so that
+ the targeted hook can be injected or extracted at its standard position. */
+ cleanRootPropertyValue: function(rootProperty, rootPropertyValue) {
+ /* If the rootPropertyValue is wrapped with "rgb()", "clip()", etc., remove the wrapping to normalize the value before manipulation. */
+ if (CSS.RegEx.valueUnwrap.test(rootPropertyValue)) {
+ rootPropertyValue = rootPropertyValue.match(CSS.Hooks.RegEx.valueUnwrap)[1];
+ }
+
+ /* If rootPropertyValue is a CSS null-value (from which there's inherently no hook value to extract),
+ default to the root's default value as defined in CSS.Hooks.templates. */
+ /* Note: CSS null-values include "none", "auto", and "transparent". They must be converted into their
+ zero-values (e.g. textShadow: "none" ==> textShadow: "0px 0px 0px black") for hook manipulation to proceed. */
+ if (CSS.Values.isCSSNullValue(rootPropertyValue)) {
+ rootPropertyValue = CSS.Hooks.templates[rootProperty][1];
+ }
+
+ return rootPropertyValue;
+ },
+ /* Extracted the hook's value from its root property's value. This is used to get the starting value of an animating hook. */
+ extractValue: function (fullHookName, rootPropertyValue) {
+ var hookData = CSS.Hooks.registered[fullHookName];
+
+ if (hookData) {
+ var hookRoot = hookData[0],
+ hookPosition = hookData[1];
+
+ rootPropertyValue = CSS.Hooks.cleanRootPropertyValue(hookRoot, rootPropertyValue);
+
+ /* Split rootPropertyValue into its constituent hook values then grab the desired hook at its standard position. */
+ return rootPropertyValue.toString().match(CSS.RegEx.valueSplit)[hookPosition];
+ } else {
+ /* If the provided fullHookName isn't a registered hook, return the rootPropertyValue that was passed in. */
+ return rootPropertyValue;
+ }
+ },
+ /* Inject the hook's value into its root property's value. This is used to piece back together the root property
+ once Velocity has updated one of its individually hooked values through tweening. */
+ injectValue: function (fullHookName, hookValue, rootPropertyValue) {
+ var hookData = CSS.Hooks.registered[fullHookName];
+
+ if (hookData) {
+ var hookRoot = hookData[0],
+ hookPosition = hookData[1],
+ rootPropertyValueParts,
+ rootPropertyValueUpdated;
+
+ rootPropertyValue = CSS.Hooks.cleanRootPropertyValue(hookRoot, rootPropertyValue);
+
+ /* Split rootPropertyValue into its individual hook values, replace the targeted value with hookValue,
+ then reconstruct the rootPropertyValue string. */
+ rootPropertyValueParts = rootPropertyValue.toString().match(CSS.RegEx.valueSplit);
+ rootPropertyValueParts[hookPosition] = hookValue;
+ rootPropertyValueUpdated = rootPropertyValueParts.join(" ");
+
+ return rootPropertyValueUpdated;
+ } else {
+ /* If the provided fullHookName isn't a registered hook, return the rootPropertyValue that was passed in. */
+ return rootPropertyValue;
+ }
+ }
+ },
+
+ /*******************
+ Normalizations
+ *******************/
+
+ /* Normalizations standardize CSS property manipulation by pollyfilling browser-specific implementations (e.g. opacity)
+ and reformatting special properties (e.g. clip, rgba) to look like standard ones. */
+ Normalizations: {
+ /* Normalizations are passed a normalization target (either the property's name, its extracted value, or its injected value),
+ the targeted element (which may need to be queried), and the targeted property value. */
+ registered: {
+ clip: function(type, element, propertyValue) {
+ switch (type) {
+ case "name":
+ return "clip";
+ /* Clip needs to be unwrapped and stripped of its commas during extraction. */
+ case "extract":
+ var extracted;
+
+ /* If Velocity also extracted this value, skip extraction. */
+ if (CSS.RegEx.wrappedValueAlreadyExtracted.test(propertyValue)) {
+ extracted = propertyValue;
+ } else {
+ /* Remove the "rect()" wrapper. */
+ extracted = propertyValue.toString().match(CSS.RegEx.valueUnwrap);
+
+ /* Strip off commas. */
+ extracted = extracted ? extracted[1].replace(/,(\s+)?/g, " ") : propertyValue;
+ }
+
+ return extracted;
+ /* Clip needs to be re-wrapped during injection. */
+ case "inject":
+ return "rect(" + propertyValue + ")";
+ }
+ },
+
+ /* <=IE8 do not support the standard opacity property. They use filter:alpha(opacity=INT) instead. */
+ opacity: function (type, element, propertyValue) {
+ if (IE <= 8) {
+ switch (type) {
+ case "name":
+ return "filter";
+ case "extract":
+ /* <=IE8 return a "filter" value of "alpha(opacity=\d{1,3})".
+ Extract the value and convert it to a decimal value to match the standard CSS opacity property's formatting. */
+ var extracted = propertyValue.toString().match(/alpha\(opacity=(.*)\)/i);
+
+ if (extracted) {
+ /* Convert to decimal value. */
+ propertyValue = extracted[1] / 100;
+ } else {
+ /* When extracting opacity, default to 1 since a null value means opacity hasn't been set. */
+ propertyValue = 1;
+ }
+
+ return propertyValue;
+ case "inject":
+ /* Opacified elements are required to have their zoom property set to a non-zero value. */
+ element.style.zoom = 1;
+
+ /* Setting the filter property on elements with certain font property combinations can result in a
+ highly unappealing ultra-bolding effect. There's no way to remedy this throughout a tween, but dropping the
+ value altogether (when opacity hits 1) at leasts ensures that the glitch is gone post-tweening. */
+ if (parseFloat(propertyValue) >= 1) {
+ return "";
+ } else {
+ /* As per the filter property's spec, convert the decimal value to a whole number and wrap the value. */
+ return "alpha(opacity=" + parseInt(parseFloat(propertyValue) * 100, 10) + ")";
+ }
+ }
+ /* With all other browsers, normalization is not required; return the same values that were passed in. */
+ } else {
+ switch (type) {
+ case "name":
+ return "opacity";
+ case "extract":
+ return propertyValue;
+ case "inject":
+ return propertyValue;
+ }
+ }
+ }
+ },
+
+ /*****************************
+ Batched Registrations
+ *****************************/
+
+ /* Note: Batched normalizations extend the CSS.Normalizations.registered object. */
+ register: function () {
+
+ /*****************
+ Transforms
+ *****************/
+
+ /* Transforms are the subproperties contained by the CSS "transform" property. Transforms must undergo normalization
+ so that they can be referenced in a properties map by their individual names. */
+ /* Note: When transforms are "set", they are actually assigned to a per-element transformCache. When all transform
+ setting is complete complete, CSS.flushTransformCache() must be manually called to flush the values to the DOM.
+ Transform setting is batched in this way to improve performance: the transform style only needs to be updated
+ once when multiple transform subproperties are being animated simultaneously. */
+ /* Note: IE9 and Android Gingerbread have support for 2D -- but not 3D -- transforms. Since animating unsupported
+ transform properties results in the browser ignoring the *entire* transform string, we prevent these 3D values
+ from being normalized for these browsers so that tweening skips these properties altogether
+ (since it will ignore them as being unsupported by the browser.) */
+ if (!(IE <= 9) && !Velocity.State.isGingerbread) {
+ /* Note: Since the standalone CSS "perspective" property and the CSS transform "perspective" subproperty
+ share the same name, the latter is given a unique token within Velocity: "transformPerspective". */
+ CSS.Lists.transformsBase = CSS.Lists.transformsBase.concat(CSS.Lists.transforms3D);
+ }
+
+ for (var i = 0; i < CSS.Lists.transformsBase.length; i++) {
+ /* Wrap the dynamically generated normalization function in a new scope so that transformName's value is
+ paired with its respective function. (Otherwise, all functions would take the final for loop's transformName.) */
+ (function() {
+ var transformName = CSS.Lists.transformsBase[i];
+
+ CSS.Normalizations.registered[transformName] = function (type, element, propertyValue) {
+ switch (type) {
+ /* The normalized property name is the parent "transform" property -- the property that is actually set in CSS. */
+ case "name":
+ return "transform";
+ /* Transform values are cached onto a per-element transformCache object. */
+ case "extract":
+ /* If this transform has yet to be assigned a value, return its null value. */
+ if (Data(element) === undefined || Data(element).transformCache[transformName] === undefined) {
+ /* Scale CSS.Lists.transformsBase default to 1 whereas all other transform properties default to 0. */
+ return /^scale/i.test(transformName) ? 1 : 0;
+ /* When transform values are set, they are wrapped in parentheses as per the CSS spec.
+ Thus, when extracting their values (for tween calculations), we strip off the parentheses. */
+ } else {
+ return Data(element).transformCache[transformName].replace(/[()]/g, "");
+ }
+ case "inject":
+ var invalid = false;
+
+ /* If an individual transform property contains an unsupported unit type, the browser ignores the *entire* transform property.
+ Thus, protect users from themselves by skipping setting for transform values supplied with invalid unit types. */
+ /* Switch on the base transform type; ignore the axis by removing the last letter from the transform's name. */
+ switch (transformName.substr(0, transformName.length - 1)) {
+ /* Whitelist unit types for each transform. */
+ case "translate":
+ invalid = !/(%|px|em|rem|vw|vh|\d)$/i.test(propertyValue);
+ break;
+ /* Since an axis-free "scale" property is supported as well, a little hack is used here to detect it by chopping off its last letter. */
+ case "scal":
+ case "scale":
+ /* Chrome on Android has a bug in which scaled elements blur if their initial scale
+ value is below 1 (which can happen with forcefeeding). Thus, we detect a yet-unset scale property
+ and ensure that its first value is always 1. More info: http://stackoverflow.com/questions/10417890/css3-animations-with-transform-causes-blurred-elements-on-webkit/10417962#10417962 */
+ if (Velocity.State.isAndroid && Data(element).transformCache[transformName] === undefined && propertyValue < 1) {
+ propertyValue = 1;
+ }
+
+ invalid = !/(\d)$/i.test(propertyValue);
+ break;
+ case "skew":
+ invalid = !/(deg|\d)$/i.test(propertyValue);
+ break;
+ case "rotate":
+ invalid = !/(deg|\d)$/i.test(propertyValue);
+ break;
+ }
+
+ if (!invalid) {
+ /* As per the CSS spec, wrap the value in parentheses. */
+ Data(element).transformCache[transformName] = "(" + propertyValue + ")";
+ }
+
+ /* Although the value is set on the transformCache object, return the newly-updated value for the calling code to process as normal. */
+ return Data(element).transformCache[transformName];
+ }
+ };
+ })();
+ }
+
+ /*************
+ Colors
+ *************/
+
+ /* Since Velocity only animates a single numeric value per property, color animation is achieved by hooking the individual RGBA components of CSS color properties.
+ Accordingly, color values must be normalized (e.g. "#ff0000", "red", and "rgb(255, 0, 0)" ==> "255 0 0 1") so that their components can be injected/extracted by CSS.Hooks logic. */
+ for (var i = 0; i < CSS.Lists.colors.length; i++) {
+ /* Wrap the dynamically generated normalization function in a new scope so that colorName's value is paired with its respective function.
+ (Otherwise, all functions would take the final for loop's colorName.) */
+ (function () {
+ var colorName = CSS.Lists.colors[i];
+
+ /* Note: In IE<=8, which support rgb but not rgba, color properties are reverted to rgb by stripping off the alpha component. */
+ CSS.Normalizations.registered[colorName] = function(type, element, propertyValue) {
+ switch (type) {
+ case "name":
+ return colorName;
+ /* Convert all color values into the rgb format. (Old IE can return hex values and color names instead of rgb/rgba.) */
+ case "extract":
+ var extracted;
+
+ /* If the color is already in its hookable form (e.g. "255 255 255 1") due to having been previously extracted, skip extraction. */
+ if (CSS.RegEx.wrappedValueAlreadyExtracted.test(propertyValue)) {
+ extracted = propertyValue;
+ } else {
+ var converted,
+ colorNames = {
+ black: "rgb(0, 0, 0)",
+ blue: "rgb(0, 0, 255)",
+ gray: "rgb(128, 128, 128)",
+ green: "rgb(0, 128, 0)",
+ red: "rgb(255, 0, 0)",
+ white: "rgb(255, 255, 255)"
+ };
+
+ /* Convert color names to rgb. */
+ if (/^[A-z]+$/i.test(propertyValue)) {
+ if (colorNames[propertyValue] !== undefined) {
+ converted = colorNames[propertyValue]
+ } else {
+ /* If an unmatched color name is provided, default to black. */
+ converted = colorNames.black;
+ }
+ /* Convert hex values to rgb. */
+ } else if (CSS.RegEx.isHex.test(propertyValue)) {
+ converted = "rgb(" + CSS.Values.hexToRgb(propertyValue).join(" ") + ")";
+ /* If the provided color doesn't match any of the accepted color formats, default to black. */
+ } else if (!(/^rgba?\(/i.test(propertyValue))) {
+ converted = colorNames.black;
+ }
+
+ /* Remove the surrounding "rgb/rgba()" string then replace commas with spaces and strip
+ repeated spaces (in case the value included spaces to begin with). */
+ extracted = (converted || propertyValue).toString().match(CSS.RegEx.valueUnwrap)[1].replace(/,(\s+)?/g, " ");
+ }
+
+ /* So long as this isn't <=IE8, add a fourth (alpha) component if it's missing and default it to 1 (visible). */
+ if (!(IE <= 8) && extracted.split(" ").length === 3) {
+ extracted += " 1";
+ }
+
+ return extracted;
+ case "inject":
+ /* If this is IE<=8 and an alpha component exists, strip it off. */
+ if (IE <= 8) {
+ if (propertyValue.split(" ").length === 4) {
+ propertyValue = propertyValue.split(/\s+/).slice(0, 3).join(" ");
+ }
+ /* Otherwise, add a fourth (alpha) component if it's missing and default it to 1 (visible). */
+ } else if (propertyValue.split(" ").length === 3) {
+ propertyValue += " 1";
+ }
+
+ /* Re-insert the browser-appropriate wrapper("rgb/rgba()"), insert commas, and strip off decimal units
+ on all values but the fourth (R, G, and B only accept whole numbers). */
+ return (IE <= 8 ? "rgb" : "rgba") + "(" + propertyValue.replace(/\s+/g, ",").replace(/\.(\d)+(?=,)/g, "") + ")";
+ }
+ };
+ })();
+ }
+ }
+ },
+
+ /************************
+ CSS Property Names
+ ************************/
+
+ Names: {
+ /* Camelcase a property name into its JavaScript notation (e.g. "background-color" ==> "backgroundColor").
+ Camelcasing is used to normalize property names between and across calls. */
+ camelCase: function (property) {
+ return property.replace(/-(\w)/g, function (match, subMatch) {
+ return subMatch.toUpperCase();
+ });
+ },
+
+ /* For SVG elements, some properties (namely, dimensional ones) are GET/SET via the element's HTML attributes (instead of via CSS styles). */
+ SVGAttribute: function (property) {
+ var SVGAttributes = "width|height|x|y|cx|cy|r|rx|ry|x1|x2|y1|y2";
+
+ /* Certain browsers require an SVG transform to be applied as an attribute. (Otherwise, application via CSS is preferable due to 3D support.) */
+ if (IE || (Velocity.State.isAndroid && !Velocity.State.isChrome)) {
+ SVGAttributes += "|transform";
+ }
+
+ return new RegExp("^(" + SVGAttributes + ")$", "i").test(property);
+ },
+
+ /* Determine whether a property should be set with a vendor prefix. */
+ /* If a prefixed version of the property exists, return it. Otherwise, return the original property name.
+ If the property is not at all supported by the browser, return a false flag. */
+ prefixCheck: function (property) {
+ /* If this property has already been checked, return the cached value. */
+ if (Velocity.State.prefixMatches[property]) {
+ return [ Velocity.State.prefixMatches[property], true ];
+ } else {
+ var vendors = [ "", "Webkit", "Moz", "ms", "O" ];
+
+ for (var i = 0, vendorsLength = vendors.length; i < vendorsLength; i++) {
+ var propertyPrefixed;
+
+ if (i === 0) {
+ propertyPrefixed = property;
+ } else {
+ /* Capitalize the first letter of the property to conform to JavaScript vendor prefix notation (e.g. webkitFilter). */
+ propertyPrefixed = vendors[i] + property.replace(/^\w/, function(match) { return match.toUpperCase(); });
+ }
+
+ /* Check if the browser supports this property as prefixed. */
+ if (Type.isString(Velocity.State.prefixElement.style[propertyPrefixed])) {
+ /* Cache the match. */
+ Velocity.State.prefixMatches[property] = propertyPrefixed;
+
+ return [ propertyPrefixed, true ];
+ }
+ }
+
+ /* If the browser doesn't support this property in any form, include a false flag so that the caller can decide how to proceed. */
+ return [ property, false ];
+ }
+ }
+ },
+
+ /************************
+ CSS Property Values
+ ************************/
+
+ Values: {
+ /* Hex to RGB conversion. Copyright Tim Down: http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb */
+ hexToRgb: function (hex) {
+ var shortformRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+ longformRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,
+ rgbParts;
+
+ hex = hex.replace(shortformRegex, function (m, r, g, b) {
+ return r + r + g + g + b + b;
+ });
+
+ rgbParts = longformRegex.exec(hex);
+
+ return rgbParts ? [ parseInt(rgbParts[1], 16), parseInt(rgbParts[2], 16), parseInt(rgbParts[3], 16) ] : [ 0, 0, 0 ];
+ },
+ isCSSNullValue: function (value) {
+ /* The browser defaults CSS values that have not been set to either 0 or one of several possible null-value strings.
+ Thus, we check for both falsiness and these special strings. */
+ /* Null-value checking is performed to default the special strings to 0 (for the sake of tweening) or their hook
+ templates as defined as CSS.Hooks (for the sake of hook injection/extraction). */
+ /* Note: Chrome returns "rgba(0, 0, 0, 0)" for an undefined color whereas IE returns "transparent". */
+ return (value == 0 || /^(none|auto|transparent|(rgba\(0, ?0, ?0, ?0\)))$/i.test(value));
+ },
+ /* Retrieve a property's default unit type. Used for assigning a unit type when one is not supplied by the user. */
+ getUnitType: function (property) {
+ if (/^(rotate|skew)/i.test(property)) {
+ return "deg";
+ } else if (/(^(scale|scaleX|scaleY|scaleZ|alpha|flexGrow|flexHeight|zIndex|fontWeight)$)|((opacity|red|green|blue|alpha)$)/i.test(property)) {
+ /* The above properties are unitless. */
+ return "";
+ } else {
+ /* Default to px for all other properties. */
+ return "px";
+ }
+ },
+ /* HTML elements default to an associated display type when they're not set to display:none. */
+ /* Note: This function is used for correctly setting the non-"none" display value in certain Velocity sequences, such as fadeIn/Out. */
+ getDisplayType: function (element) {
+ var tagName = element.tagName.toString().toLowerCase();
+
+ if (/^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|var|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i.test(tagName)) {
+ return "inline";
+ } else if (/^(li)$/i.test(tagName)) {
+ return "list-item";
+ } else if (/^(tr)$/i.test(tagName)) {
+ return "table-row";
+ /* Default to "block" when no match is found. */
+ } else {
+ return "block";
+ }
+ },
+ /* The class add/remove functions are used to temporarily apply a "velocity-animating" class to elements while they're animating. */
+ addClass: function (element, className) {
+ if (element.classList) {
+ element.classList.add(className);
+ } else {
+ element.className += (element.className.length ? " " : "") + className;
+ }
+ },
+ removeClass: function (element, className) {
+ if (element.classList) {
+ element.classList.remove(className);
+ } else {
+ element.className = element.className.toString().replace(new RegExp("(^|\\s)" + className.split(" ").join("|") + "(\\s|$)", "gi"), " ");
+ }
+ }
+ },
+
+ /****************************
+ Style Getting & Setting
+ ****************************/
+
+ /* The singular getPropertyValue, which routes the logic for all normalizations, hooks, and standard CSS properties. */
+ getPropertyValue: function (element, property, rootPropertyValue, forceStyleLookup) {
+ /* Get an element's computed property value. */
+ /* Note: Retrieving the value of a CSS property cannot simply be performed by checking an element's
+ style attribute (which only reflects user-defined values). Instead, the browser must be queried for a property's
+ *computed* value. You can read more about getComputedStyle here: https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle */
+ function computePropertyValue (element, property) {
+ /* When box-sizing isn't set to border-box, height and width style values are incorrectly computed when an
+ element's scrollbars are visible (which expands the element's dimensions). Thus, we defer to the more accurate
+ offsetHeight/Width property, which includes the total dimensions for interior, border, padding, and scrollbar.
+ We subtract border and padding to get the sum of interior + scrollbar. */
+
+ var computedValue = 0;
+
+ /* IE<=8 doesn't support window.getComputedStyle, thus we defer to jQuery, which has an extensive array
+ of hacks to accurately retrieve IE8 property values. Re-implementing that logic here is not worth bloating the
+ codebase for a dying browser. The performance repercussions of using jQuery here are minimal since
+ Velocity is optimized to rarely (and sometimes never) query the DOM. Further, the $.css() codepath isn't that slow. */
+ if (IE <= 8) {
+ computedValue = $.css(element, property); /* GET */
+ /* All other browsers support getComputedStyle. The returned live object reference is cached onto its
+ associated element so that it does not need to be refetched upon every GET. */
+ } else {
+ /* Browsers do not return height and width values for elements that are set to display:"none". Thus, we temporarily
+ toggle display to the element type's default value. */
+ var toggleDisplay = false;
+
+ if (/^(width|height)$/.test(property) && CSS.getPropertyValue(element, "display") === 0) {
+ toggleDisplay = true;
+ CSS.setPropertyValue(element, "display", CSS.Values.getDisplayType(element));
+ }
+
+ function revertDisplay () {
+ if (toggleDisplay) {
+ CSS.setPropertyValue(element, "display", "none");
+ }
+ }
+
+ if (!forceStyleLookup) {
+ if (property === "height" && CSS.getPropertyValue(element, "boxSizing").toString().toLowerCase() !== "border-box") {
+ var contentBoxHeight = element.offsetHeight - (parseFloat(CSS.getPropertyValue(element, "borderTopWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "borderBottomWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingTop")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingBottom")) || 0);
+ revertDisplay();
+
+ return contentBoxHeight;
+ } else if (property === "width" && CSS.getPropertyValue(element, "boxSizing").toString().toLowerCase() !== "border-box") {
+ var contentBoxWidth = element.offsetWidth - (parseFloat(CSS.getPropertyValue(element, "borderLeftWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "borderRightWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingLeft")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingRight")) || 0);
+ revertDisplay();
+
+ return contentBoxWidth;
+ }
+ }
+
+ var computedStyle;
+
+ /* For elements that Velocity hasn't been called on directly (e.g. when Velocity queries the DOM on behalf
+ of a parent of an element its animating), perform a direct getComputedStyle lookup since the object isn't cached. */
+ if (Data(element) === undefined) {
+ computedStyle = window.getComputedStyle(element, null); /* GET */
+ /* If the computedStyle object has yet to be cached, do so now. */
+ } else if (!Data(element).computedStyle) {
+ computedStyle = Data(element).computedStyle = window.getComputedStyle(element, null); /* GET */
+ /* If computedStyle is cached, use it. */
+ } else {
+ computedStyle = Data(element).computedStyle;
+ }
+
+ /* IE and Firefox do not return a value for the generic borderColor -- they only return individual values for each border side's color.
+ As a polyfill for querying individual border side colors, just return the top border's color. */
+ if ((IE || Velocity.State.isFirefox) && property === "borderColor") {
+ property = "borderTopColor";
+ }
+
+ /* IE9 has a bug in which the "filter" property must be accessed from computedStyle using the getPropertyValue method
+ instead of a direct property lookup. The getPropertyValue method is slower than a direct lookup, which is why we avoid it by default. */
+ if (IE === 9 && property === "filter") {
+ computedValue = computedStyle.getPropertyValue(property); /* GET */
+ } else {
+ computedValue = computedStyle[property];
+ }
+
+ /* Fall back to the property's style value (if defined) when computedValue returns nothing,
+ which can happen when the element hasn't been painted. */
+ if (computedValue === "" || computedValue === null) {
+ computedValue = element.style[property];
+ }
+
+ revertDisplay();
+ }
+
+ /* For top, right, bottom, and left (TRBL) values that are set to "auto" on elements of "fixed" or "absolute" position,
+ defer to jQuery for converting "auto" to a numeric value. (For elements with a "static" or "relative" position, "auto" has the same
+ effect as being set to 0, so no conversion is necessary.) */
+ /* An example of why numeric conversion is necessary: When an element with "position:absolute" has an untouched "left"
+ property, which reverts to "auto", left's value is 0 relative to its parent element, but is often non-zero relative
+ to its *containing* (not parent) element, which is the nearest "position:relative" ancestor or the viewport (and always the viewport in the case of "position:fixed"). */
+ if (computedValue === "auto" && /^(top|right|bottom|left)$/i.test(property)) {
+ var position = computePropertyValue(element, "position"); /* GET */
+
+ /* For absolute positioning, jQuery's $.position() only returns values for top and left;
+ right and bottom will have their "auto" value reverted to 0. */
+ /* Note: A jQuery object must be created here since jQuery doesn't have a low-level alias for $.position().
+ Not a big deal since we're currently in a GET batch anyway. */
+ if (position === "fixed" || (position === "absolute" && /top|left/i.test(property))) {
+ /* Note: jQuery strips the pixel unit from its returned values; we re-add it here to conform with computePropertyValue's behavior. */
+ computedValue = $(element).position()[property] + "px"; /* GET */
+ }
+ }
+
+ return computedValue;
+ }
+
+ var propertyValue;
+
+ /* If this is a hooked property (e.g. "clipLeft" instead of the root property of "clip"),
+ extract the hook's value from a normalized rootPropertyValue using CSS.Hooks.extractValue(). */
+ if (CSS.Hooks.registered[property]) {
+ var hook = property,
+ hookRoot = CSS.Hooks.getRoot(hook);
+
+ /* If a cached rootPropertyValue wasn't passed in (which Velocity always attempts to do in order to avoid requerying the DOM),
+ query the DOM for the root property's value. */
+ if (rootPropertyValue === undefined) {
+ /* Since the browser is now being directly queried, use the official post-prefixing property name for this lookup. */
+ rootPropertyValue = CSS.getPropertyValue(element, CSS.Names.prefixCheck(hookRoot)[0]); /* GET */
+ }
+
+ /* If this root has a normalization registered, peform the associated normalization extraction. */
+ if (CSS.Normalizations.registered[hookRoot]) {
+ rootPropertyValue = CSS.Normalizations.registered[hookRoot]("extract", element, rootPropertyValue);
+ }
+
+ /* Extract the hook's value. */
+ propertyValue = CSS.Hooks.extractValue(hook, rootPropertyValue);
+
+ /* If this is a normalized property (e.g. "opacity" becomes "filter" in <=IE8) or "translateX" becomes "transform"),
+ normalize the property's name and value, and handle the special case of transforms. */
+ /* Note: Normalizing a property is mutually exclusive from hooking a property since hook-extracted values are strictly
+ numerical and therefore do not require normalization extraction. */
+ } else if (CSS.Normalizations.registered[property]) {
+ var normalizedPropertyName,
+ normalizedPropertyValue;
+
+ normalizedPropertyName = CSS.Normalizations.registered[property]("name", element);
+
+ /* Transform values are calculated via normalization extraction (see below), which checks against the element's transformCache.
+ At no point do transform GETs ever actually query the DOM; initial stylesheet values are never processed.
+ This is because parsing 3D transform matrices is not always accurate and would bloat our codebase;
+ thus, normalization extraction defaults initial transform values to their zero-values (e.g. 1 for scaleX and 0 for translateX). */
+ if (normalizedPropertyName !== "transform") {
+ normalizedPropertyValue = computePropertyValue(element, CSS.Names.prefixCheck(normalizedPropertyName)[0]); /* GET */
+
+ /* If the value is a CSS null-value and this property has a hook template, use that zero-value template so that hooks can be extracted from it. */
+ if (CSS.Values.isCSSNullValue(normalizedPropertyValue) && CSS.Hooks.templates[property]) {
+ normalizedPropertyValue = CSS.Hooks.templates[property][1];
+ }
+ }
+
+ propertyValue = CSS.Normalizations.registered[property]("extract", element, normalizedPropertyValue);
+ }
+
+ /* If a (numeric) value wasn't produced via hook extraction or normalization, query the DOM. */
+ if (!/^[\d-]/.test(propertyValue)) {
+ /* For SVG elements, dimensional properties (which SVGAttribute() detects) are tweened via
+ their HTML attribute values instead of their CSS style values. */
+ if (Data(element) && Data(element).isSVG && CSS.Names.SVGAttribute(property)) {
+ /* Since the height/width attribute values must be set manually, they don't reflect computed values.
+ Thus, we use use getBBox() to ensure we always get values for elements with undefined height/width attributes. */
+ if (/^(height|width)$/i.test(property)) {
+ propertyValue = element.getBBox()[property];
+ /* Otherwise, access the attribute value directly. */
+ } else {
+ propertyValue = element.getAttribute(property);
+ }
+ } else {
+ propertyValue = computePropertyValue(element, CSS.Names.prefixCheck(property)[0]); /* GET */
+ }
+ }
+
+ /* Since property lookups are for animation purposes (which entails computing the numeric delta between start and end values),
+ convert CSS null-values to an integer of value 0. */
+ if (CSS.Values.isCSSNullValue(propertyValue)) {
+ propertyValue = 0;
+ }
+
+ if (Velocity.debug >= 2) console.log("Get " + property + ": " + propertyValue);
+
+ return propertyValue;
+ },
+
+ /* The singular setPropertyValue, which routes the logic for all normalizations, hooks, and standard CSS properties. */
+ setPropertyValue: function(element, property, propertyValue, rootPropertyValue, scrollData) {
+ var propertyName = property;
+
+ /* In order to be subjected to call options and element queueing, scroll animation is routed through Velocity as if it were a standard CSS property. */
+ if (property === "scroll") {
+ /* If a container option is present, scroll the container instead of the browser window. */
+ if (scrollData.container) {
+ scrollData.container["scroll" + scrollData.direction] = propertyValue;
+ /* Otherwise, Velocity defaults to scrolling the browser window. */
+ } else {
+ if (scrollData.direction === "Left") {
+ window.scrollTo(propertyValue, scrollData.alternateValue);
+ } else {
+ window.scrollTo(scrollData.alternateValue, propertyValue);
+ }
+ }
+ } else {
+ /* Transforms (translateX, rotateZ, etc.) are applied to a per-element transformCache object, which is manually flushed via flushTransformCache().
+ Thus, for now, we merely cache transforms being SET. */
+ if (CSS.Normalizations.registered[property] && CSS.Normalizations.registered[property]("name", element) === "transform") {
+ /* Perform a normalization injection. */
+ /* Note: The normalization logic handles the transformCache updating. */
+ CSS.Normalizations.registered[property]("inject", element, propertyValue);
+
+ propertyName = "transform";
+ propertyValue = Data(element).transformCache[property];
+ } else {
+ /* Inject hooks. */
+ if (CSS.Hooks.registered[property]) {
+ var hookName = property,
+ hookRoot = CSS.Hooks.getRoot(property);
+
+ /* If a cached rootPropertyValue was not provided, query the DOM for the hookRoot's current value. */
+ rootPropertyValue = rootPropertyValue || CSS.getPropertyValue(element, hookRoot); /* GET */
+
+ propertyValue = CSS.Hooks.injectValue(hookName, propertyValue, rootPropertyValue);
+ property = hookRoot;
+ }
+
+ /* Normalize names and values. */
+ if (CSS.Normalizations.registered[property]) {
+ propertyValue = CSS.Normalizations.registered[property]("inject", element, propertyValue);
+ property = CSS.Normalizations.registered[property]("name", element);
+ }
+
+ /* Assign the appropriate vendor prefix before performing an official style update. */
+ propertyName = CSS.Names.prefixCheck(property)[0];
+
+ /* A try/catch is used for IE<=8, which throws an error when "invalid" CSS values are set, e.g. a negative width.
+ Try/catch is avoided for other browsers since it incurs a performance overhead. */
+ if (IE <= 8) {
+ try {
+ element.style[propertyName] = propertyValue;
+ } catch (error) { if (Velocity.debug) console.log("Browser does not support [" + propertyValue + "] for [" + propertyName + "]"); }
+ /* SVG elements have their dimensional properties (width, height, x, y, cx, etc.) applied directly as attributes instead of as styles. */
+ /* Note: IE8 does not support SVG elements, so it's okay that we skip it for SVG animation. */
+ } else if (Data(element) && Data(element).isSVG && CSS.Names.SVGAttribute(property)) {
+ /* Note: For SVG attributes, vendor-prefixed property names are never used. */
+ /* Note: Not all CSS properties can be animated via attributes, but the browser won't throw an error for unsupported properties. */
+ element.setAttribute(property, propertyValue);
+ } else {
+ element.style[propertyName] = propertyValue;
+ }
+
+ if (Velocity.debug >= 2) console.log("Set " + property + " (" + propertyName + "): " + propertyValue);
+ }
+ }
+
+ /* Return the normalized property name and value in case the caller wants to know how these values were modified before being applied to the DOM. */
+ return [ propertyName, propertyValue ];
+ },
+
+ /* To increase performance by batching transform updates into a single SET, transforms are not directly applied to an element until flushTransformCache() is called. */
+ /* Note: Velocity applies transform properties in the same order that they are chronogically introduced to the element's CSS styles. */
+ flushTransformCache: function(element) {
+ var transformString = "";
+
+ /* Certain browsers require that SVG transforms be applied as an attribute. However, the SVG transform attribute takes a modified version of CSS's transform string
+ (units are dropped and, except for skewX/Y, subproperties are merged into their master property -- e.g. scaleX and scaleY are merged into scale(X Y). */
+ if ((IE || (Velocity.State.isAndroid && !Velocity.State.isChrome)) && Data(element).isSVG) {
+ /* Since transform values are stored in their parentheses-wrapped form, we use a helper function to strip out their numeric values.
+ Further, SVG transform properties only take unitless (representing pixels) values, so it's okay that parseFloat() strips the unit suffixed to the float value. */
+ function getTransformFloat (transformProperty) {
+ return parseFloat(CSS.getPropertyValue(element, transformProperty));
+ }
+
+ /* Create an object to organize all the transforms that we'll apply to the SVG element. To keep the logic simple,
+ we process *all* transform properties -- even those that may not be explicitly applied (since they default to their zero-values anyway). */
+ var SVGTransforms = {
+ translate: [ getTransformFloat("translateX"), getTransformFloat("translateY") ],
+ skewX: [ getTransformFloat("skewX") ], skewY: [ getTransformFloat("skewY") ],
+ /* If the scale property is set (non-1), use that value for the scaleX and scaleY values
+ (this behavior mimics the result of animating all these properties at once on HTML elements). */
+ scale: getTransformFloat("scale") !== 1 ? [ getTransformFloat("scale"), getTransformFloat("scale") ] : [ getTransformFloat("scaleX"), getTransformFloat("scaleY") ],
+ /* Note: SVG's rotate transform takes three values: rotation degrees followed by the X and Y values
+ defining the rotation's origin point. We ignore the origin values (default them to 0). */
+ rotate: [ getTransformFloat("rotateZ"), 0, 0 ]
+ };
+
+ /* Iterate through the transform properties in the user-defined property map order.
+ (This mimics the behavior of non-SVG transform animation.) */
+ $.each(Data(element).transformCache, function(transformName) {
+ /* Except for with skewX/Y, revert the axis-specific transform subproperties to their axis-free master
+ properties so that they match up with SVG's accepted transform properties. */
+ if (/^translate/i.test(transformName)) {
+ transformName = "translate";
+ } else if (/^scale/i.test(transformName)) {
+ transformName = "scale";
+ } else if (/^rotate/i.test(transformName)) {
+ transformName = "rotate";
+ }
+
+ /* Check that we haven't yet deleted the property from the SVGTransforms container. */
+ if (SVGTransforms[transformName]) {
+ /* Append the transform property in the SVG-supported transform format. As per the spec, surround the space-delimited values in parentheses. */
+ transformString += transformName + "(" + SVGTransforms[transformName].join(" ") + ")" + " ";
+
+ /* After processing an SVG transform property, delete it from the SVGTransforms container so we don't
+ re-insert the same master property if we encounter another one of its axis-specific properties. */
+ delete SVGTransforms[transformName];
+ }
+ });
+ } else {
+ var transformValue,
+ perspective;
+
+ /* Transform properties are stored as members of the transformCache object. Concatenate all the members into a string. */
+ $.each(Data(element).transformCache, function(transformName) {
+ transformValue = Data(element).transformCache[transformName];
+
+ /* Transform's perspective subproperty must be set first in order to take effect. Store it temporarily. */
+ if (transformName === "transformPerspective") {
+ perspective = transformValue;
+ return true;
+ }
+
+ /* IE9 only supports one rotation type, rotateZ, which it refers to as "rotate". */
+ if (IE === 9 && transformName === "rotateZ") {
+ transformName = "rotate";
+ }
+
+ transformString += transformName + transformValue + " ";
+ });
+
+ /* If present, set the perspective subproperty first. */
+ if (perspective) {
+ transformString = "perspective" + perspective + " " + transformString;
+ }
+ }
+
+ CSS.setPropertyValue(element, "transform", transformString);
+ }
+ };
+
+ /* Register hooks and normalizations. */
+ CSS.Hooks.register();
+ CSS.Normalizations.register();
+
+ /*****************
+ Animation
+ *****************/
+
+ var animate = function() {
+
+ /******************
+ Call Chain
+ ******************/
+
+ /* Logic for determining what to return to the call stack when exiting out of Velocity. */
+ function getChain () {
+ /* If we are using the utility function, attempt to return this call's promise. If no promise library was detected,
+ default to null instead of returning the targeted elements so that utility function's return value is standardized. */
+ if (isUtility) {
+ return promiseData.promise || null;
+ /* Otherwise, if we're using $.fn, return the jQuery-/Zepto-wrapped element set. */
+ } else {
+ return elementsWrapped;
+ }
+ }
+
+ /*************************
+ Arguments Assignment
+ *************************/
+
+ /* To allow for expressive CoffeeScript code, Velocity supports an alternative syntax in which "properties" and "options"
+ objects are defined on a container object that's passed in as Velocity's sole argument. */
+ /* Note: Some browsers automatically populate arguments with a "properties" object. We detect it by checking for its default "names" property. */
+ var syntacticSugar = (arguments[0] && (($.isPlainObject(arguments[0].properties) && !arguments[0].properties.names) || Type.isString(arguments[0].properties))),
+ /* Whether Velocity was called via the utility function (as opposed to on a jQuery/Zepto object). */
+ isUtility,
+ /* When Velocity is called via the utility function ($.Velocity()/Velocity()), elements are explicitly
+ passed in as the first parameter. Thus, argument positioning varies. We normalize them here. */
+ elementsWrapped,
+ argumentIndex;
+
+ var elements,
+
<TRUNCATED>
[3/7] fauxton commit: updated refs/heads/master to 6c9a5a6
Posted by ga...@apache.org.
Api bar improvements
If the api bar is visible and a user clicks elsewhere it closes.
Also use correct icons
Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/ab8004d1
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/ab8004d1
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/ab8004d1
Branch: refs/heads/master
Commit: ab8004d10ffa35e3e5fa263c8bbcac2b8b34c81d
Parents: a94f56f
Author: Garren Smith <ga...@gmail.com>
Authored: Thu Aug 21 13:18:22 2014 +0200
Committer: Garren Smith <ga...@gmail.com>
Committed: Tue Aug 26 18:23:44 2014 +0200
----------------------------------------------------------------------
app/addons/fauxton/base.js | 41 +++++++++++++++++++++-----
app/addons/fauxton/templates/api_bar.html | 6 ++--
assets/less/fauxton.less | 1 +
assets/less/variables.less | 1 -
4 files changed, 38 insertions(+), 11 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ab8004d1/app/addons/fauxton/base.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/base.js b/app/addons/fauxton/base.js
index 8b88d36..a961b8b 100644
--- a/app/addons/fauxton/base.js
+++ b/app/addons/fauxton/base.js
@@ -264,19 +264,45 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
endpoint: '_all_docs',
documentation: 'docs',
+ apiBarVisible: false,
events: {
"click .api-url-btn" : "toggleAPIbar"
},
+
+ initialize: function () {
+ var that = this;
+
+ $('body').on('click.apibar',function(e) {
+ if (!that.apiBarVisible) { return;}
+ if ($(e.target).hasClass('.api-url-btn')) { return;}
+
+ if (!$(e.target).closest('.api-navbar').length){
+ that.hideAPIbar();
+ }
+ });
+ },
- toggleAPIbar: function(e){
- var $currentTarget = $(e.currentTarget).find('span');
- if ($currentTarget.hasClass("fonticon-plus")){
- $currentTarget.removeClass("fonticon-plus").addClass("fonticon-minus");
- }else{
- $currentTarget.removeClass("fonticon-minus").addClass("fonticon-plus");
+ cleanup: function () {
+ $('body').off('click.apibar');
+ },
+
+ hideAPIbar: function () {
+ this.$('.api-navbar').hide();
+ this.apiBarVisible = false;
+ },
+
+ toggleAPIbar: function(event){
+ event.preventDefault();
+ event.stopPropagation();
+
+ if (this.apiBarVisible) {
+ this.apiBarVisible = false;
+ } else {
+ this.apiBarVisible = true;
}
- $('.api-navbar').toggle();
+ this.$('.api-navbar').toggle();
+ console.log('ap', this.apiBarVisible);
},
serialize: function() {
@@ -287,6 +313,7 @@ function(app, FauxtonAPI, resizeColumns, Components, ZeroClipboard) {
},
hide: function(){
+ this.apiBarVisible = false;
this.$el.addClass('hide');
},
show: function(){
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ab8004d1/app/addons/fauxton/templates/api_bar.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/api_bar.html b/app/addons/fauxton/templates/api_bar.html
index f56741c..3f29223 100644
--- a/app/addons/fauxton/templates/api_bar.html
+++ b/app/addons/fauxton/templates/api_bar.html
@@ -14,7 +14,7 @@ the License.
<button class="btn btn-primary pull-right api-url-btn">
API URL
- <i class="fonticon-plus icon"></i>
+ <i class="fonticon-link icon"></i>
</button>
<div class="clearfix"></div>
<div class="api-navbar" style="display: none">
@@ -27,12 +27,12 @@ the License.
</span>
<input id="api-url-text" type="text" class="input-xxlarge" value="<%- endpoint %>">
<a class="btn copy-url" data-clipboard-target="api-url-text">
- <i class="fonticon-eye icon"></i>
+ <i class="fonticon-clipboard icon"></i>
Copy
</a>
<div class="add-on">
- <a data-bypass="true" href="<%- endpoint %>" target="_blank" class="btn">
+ <a data-bypass="true" href="<%- endpoint %>" target="_blank" class="btn btn-primary">
<i class="fonticon-eye icon"></i>
View JSON
</a>
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ab8004d1/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 93afce6..04eeb22 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -930,6 +930,7 @@ div.spinner {
.border-radius(5px 0 0 5px);
border: none;
padding: 9px;
+ font-size: 18px;
-moz-transition: background-color 100ms linear;
-webkit-transition: background-color 100ms linear;
transition: background-color 100ms linear;
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/ab8004d1/assets/less/variables.less
----------------------------------------------------------------------
diff --git a/assets/less/variables.less b/assets/less/variables.less
index d3ea957..f66f257 100644
--- a/assets/less/variables.less
+++ b/assets/less/variables.less
@@ -83,4 +83,3 @@
@baseBorderRadius: 0;
@transitionSpeed: .25s;
@transitionEaseType: linear;
-