fade in edit controls
This commit is contained in:
Felix Niklas
parent
4676b51498
commit
f3539c325f
7 changed files with 829 additions and 106 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="306px" height="375px" viewBox="0 0 306 375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<svg width="306px" height="371px" viewBox="0 0 306 371" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<title> 1</title>
|
||||
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
|
||||
<defs></defs>
|
||||
|
|
@ -190,8 +190,8 @@
|
|||
<path d="M34.0951807,347.311111 L34.0951807,344.466667 C37.3686747,344.466667 40.0240964,347.044444 40.0240964,350.222222 C40.0240964,353.422222 37.3686747,356 34.0951807,356 C38.9939759,356 42.9542169,352.155556 42.9542169,347.377778 C42.9542169,342.622222 38.9939759,338.777778 34.0951807,338.777778 L34.0951807,336 L29.0361446,338.822222 L24,341.666667 L29.0361446,344.488889 L34.0951807,347.311111 Z" id="reply" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M58.6084051,344.2388 L58.5990886,344.2 L57.164557,344.2 L57.164557,340.08 C57.164557,339.922 57.3810633,336 53.0956962,336 L51.0033418,336 C46.7127089,336 46.8629873,340 46.8702785,340.2 L46.835443,340.2 L46.835443,344.2 L45.4926582,344.2 C44.7333671,344.2 44,344.8696 44,345.6196 L44,354.5798 L44,354.6154 C44,355.365 44.7331646,356.0002 45.4926582,356.0002 L58.5990886,356.0002 L58.6306835,356.0002 C59.3899747,356 60,355.3652 60,354.6152 L60,354.5796 L60,345.6196 C60,344.8694 59.3678987,344.2388 58.6084051,344.2388 L58.6084051,344.2388 Z M54.3291139,344.2 L49.6708861,344.2 L49.6708861,340.086 C49.6708861,339.4706 50.1689114,338.8 51.0033418,338.8 L53.1088608,338.8 C53.9430886,338.8 54.3291139,339.4524 54.3291139,340.08 L54.3291139,344.2 L54.3291139,344.2 Z" id="lock" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M3,351 C3.00000025,347.658831 4.05916618,345.96066 6.66411898,343.827098 C6.61537225,343.867024 7.151972,343.429157 7.29335721,343.312088 C9.6234159,341.382774 10.5000001,339.771038 10.5,336 L10.5,336 L13.5,336 L13.5,336 C13.5000001,339.771037 14.3765843,341.382774 16.7066428,343.312088 C16.8480281,343.429157 17.3846279,343.867023 17.3358812,343.827098 C19.9408339,345.96066 20.9999998,347.658831 21,351 L21.0000001,351 L15,351 L19.5,356 L24,351 L21,351 L18,351 C17.9999999,348.710889 17.4108706,347.766332 15.4349741,346.147992 C15.4916405,346.194405 14.9444912,345.747929 14.7933572,345.622789 C13.4178353,344.483842 12.3966281,343.353786 11.6960735,342 L12.3039268,342 L12.3039268,342 C11.6033722,343.353786 10.5821649,344.483842 9.20664279,345.622789 C9.05550884,345.74793 8.50835957,346.194405 8.56502604,346.147993 C6.58912946,347.766332 6.00000015,348.710889 6,351 L3,351 L9,351 L4.5,356 L0,351 L2.99999991,351 Z" id="split" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M15.0068455,365 C14.4507801,365 14,365.455664 14,365.995398 L14,374.004602 C14,374.554345 14.4499488,375 15.0068455,375 L26.9931545,375 C27.5492199,375 28,374.544336 28,374.004602 L28,365.995398 C28,365.445655 27.5500512,365 26.9931545,365 L15.0068455,365 Z M18.0001535,363 L17.9923928,362.875658 C17.9933444,362.88493 17.9912732,362.863896 17.989468,362.83771 C17.9599587,362.409647 18.0185461,361.880411 18.2283326,361.40063 C18.6141117,360.518353 19.4239828,360 20.9994467,360 C22.5749814,360 23.3851297,360.518439 23.7712104,361.400844 C23.9812111,361.88081 24.0399125,362.410193 24.0104777,362.838202 C24.008685,362.864271 24.0066273,362.885215 24.0075787,362.875929 L23.9998521,363 L23.9998521,365 L25.9998521,365 L25.9998521,363 L25.9921254,363.124071 C25.9972115,363.081717 26.0013558,363.039534 26.0057649,362.975421 C26.055384,362.253913 25.9630045,361.420813 25.6035034,360.599156 C24.8957536,358.981562 23.3618963,358 20.9994469,358 C18.6369264,358 17.1032087,358.981647 16.3958525,360.59937 C16.0366701,361.42082 15.9444643,362.253739 15.9942034,362.975257 C15.9986365,363.039564 16.0028037,363.081883 16.0079141,363.124342 L16.0001535,363 L16.0001535,365 L18.0001535,365 L18.0001535,363 Z" id="internal" fill="#F58957" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M4.00015347,365 L12.9931545,365 C13.5500512,365 14,365.445655 14,365.995398 L14,374.004602 C14,374.544336 13.5492199,375 12.9931545,375 L1.00684547,375 C0.449948758,375 0,374.554345 0,374.004602 L0,365.995398 C0,365.455664 0.450780073,365 1.00684547,365 L2.00015347,365 L2.00015346,361 L2.0079141,361.124342 C2.00280368,361.081883 1.99863651,361.039564 1.99420336,360.975257 C1.94446429,360.253739 2.03667013,359.42082 2.39585248,358.59937 C3.10320874,356.981647 4.63692643,356 6.99944694,356 C9.36189629,356 10.8957536,356.981562 11.6035034,358.599156 C11.9630045,359.420813 12.055384,360.253913 12.0057649,360.975421 C12.0013558,361.039534 11.9972115,361.081717 11.9921254,361.124071 L11.9998521,361 L11.9998521,363 L9.99985208,363 L9.99985208,361 L10.0075787,360.875929 C10.0066273,360.885215 10.008685,360.864271 10.0104777,360.838202 C10.0399125,360.410193 9.98121107,359.88081 9.77121041,359.400844 C9.38512974,358.518439 8.57498138,358 6.99944672,358 C5.42398278,358 4.61411166,358.518353 4.2283326,359.40063 C4.01854612,359.880411 3.95995868,360.409647 3.98946796,360.83771 C3.99127317,360.863896 3.99334435,360.88493 3.99239283,360.875658 L4.00015346,361 L4.00015347,365 Z" id="public" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M37.0409639,368 L37.0409639,365 C40.031302,365.196667 42.4129445,367.387778 42.0409639,370 C42.4129445,372.808889 40.031302,375 37.0409639,375 C41.4890315,375 45.0409639,371.732222 45.0409639,368 C45.0409639,363.628889 41.4890315,360.361111 37.0409639,360 L37.0409639,358 L33.0409639,360 L28.0409639,363 L33.0409639,365 L37.0409639,368 Z" id="recipients" fill="#000000" sketch:type="MSShapeGroup" transform="translate(36.500000, 366.500000) rotate(-180.000000) translate(-36.500000, -366.500000) "></path>
|
||||
<path d="M11.9955775,363 C11.4457352,363 11,363.453036 11,363.99703 L11,370.00297 C11,370.553614 11.444837,371 11.9955775,371 L21.0044225,371 C21.5542648,371 22,370.546964 22,370.00297 L22,363.99703 C22,363.446386 21.555163,363 21.0044225,363 L11.9955775,363 Z M14.4077632,361.571429 L14.4023505,361.482613 C14.4030141,361.489235 14.4015696,361.474212 14.4003105,361.455507 C14.379729,361.149748 14.4205913,360.771722 14.5669088,360.429021 C14.8359739,359.798824 15.4008258,359.428571 16.4996473,359.428571 C17.5985181,359.428572 18.1635634,359.798885 18.4328388,360.429174 C18.5793057,360.772007 18.6202475,361.150138 18.599718,361.455859 C18.5984676,361.474479 18.5970325,361.489439 18.5976961,361.482806 L18.592307,361.571429 L18.592307,363 L19.987225,363 L19.987225,361.571429 L19.981836,361.660051 C19.9853834,361.629798 19.9882738,361.599667 19.991349,361.553872 C20.0259563,361.038509 19.9615254,360.443438 19.7107881,359.85654 C19.2171616,358.701116 18.147359,358 16.4996474,358 C14.8518862,358 13.782181,358.701176 13.288829,359.856693 C13.0383141,360.443443 12.9740043,361.038385 13.0086952,361.553755 C13.0117872,361.599689 13.0146936,361.629916 13.0182579,361.660245 L13.0128452,361.571429 L13.0128452,363 L14.4077632,363 L14.4077632,361.571429 Z" id="internal" fill="#F58957" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M3.4077632,363 L10.0044225,363 C10.555163,363 11,363.446386 11,363.99703 L11,370.00297 C11,370.546964 10.5542648,371 10.0044225,371 L0.995577499,371 C0.444836974,371 0,370.553614 0,370.00297 L0,363.99703 C0,363.453036 0.445735229,363 0.995577499,363 L2.01284519,363 L2.01284519,360.210526 L2.01825791,360.315236 C2.0146936,360.27948 2.01178717,360.243843 2.00869523,360.18969 C1.97400427,359.582096 2.03831406,358.880691 2.28882902,358.188943 C2.78218102,356.82665 3.85188624,356 5.49964745,356 C7.14735902,356 8.21716163,356.826578 8.71078808,358.188763 C8.96152537,358.880684 9.02595628,359.582243 8.99134902,360.189828 C8.98827381,360.243818 8.98538336,360.279341 8.98183602,360.315007 L8.98722504,360.210526 L8.98722504,361.894737 L7.59230703,361.894737 L7.59230703,360.210526 L7.59769605,360.106046 C7.59703245,360.113866 7.5984676,360.096228 7.59971799,360.074275 C7.62024752,359.713847 7.57930569,359.26805 7.43283884,358.863868 C7.1635634,358.12079 6.59851813,357.684211 5.49964729,357.684211 C4.40082578,357.68421 3.83597387,358.120718 3.56690879,358.863688 C3.42059132,359.267715 3.37972899,359.713387 3.4003105,360.073861 C3.40156956,360.095913 3.40301412,360.113625 3.40235047,360.105817 L3.4077632,360.210526 L3.4077632,363 Z" id="public" fill="#000000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M29.9409639,369 L29.9409639,366.9 C29.9409639,366.9 29.9409637,367 33.5,367 C37.0590363,367 38,371 38,371 C38,371 39.0012466,366.376064 37.5,363.5 C36.4923852,361.569628 34.7285772,361 33.5,361 C29.9409637,361 30.0409639,361 30.0409639,361 L29.9409639,359 L27.0409639,361 L23,364 L27.0409639,367 L29.9409639,369 Z" id="recipients" fill="#000000" sketch:type="MSShapeGroup" transform="translate(30.500000, 365.000000) rotate(-180.000000) translate(-30.500000, -365.000000) "></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 89 KiB |
|
|
@ -319,6 +319,7 @@ class Sidebar extends App.Controller
|
|||
class Edit extends App.Controller
|
||||
elements:
|
||||
'textarea' : 'textarea'
|
||||
'.js-edit-control' : 'editControls'
|
||||
|
||||
events:
|
||||
'click .submit': 'update'
|
||||
|
|
@ -326,7 +327,7 @@ class Edit extends App.Controller
|
|||
'click .visibility-toggle': 'toggle_visibility'
|
||||
'click .pop-selectable': 'select_type'
|
||||
'click .pop-selected': 'show_selectable_types'
|
||||
'focus textarea': 'show_controls'
|
||||
'focus textarea': 'open_textarea'
|
||||
'input textarea': 'detect_empty_textarea'
|
||||
'click .recipient-picker': 'show_recipients'
|
||||
'click .recipient-list': 'stopPropagation'
|
||||
|
|
@ -335,6 +336,11 @@ class Edit extends App.Controller
|
|||
|
||||
constructor: ->
|
||||
super
|
||||
|
||||
@textareaHeight =
|
||||
open: 148
|
||||
closed: 38
|
||||
|
||||
@render()
|
||||
|
||||
stopPropagation: (e) ->
|
||||
|
|
@ -559,17 +565,44 @@ class Edit extends App.Controller
|
|||
else
|
||||
@remove_textarea_catcher()
|
||||
|
||||
show_controls: =>
|
||||
open_textarea: =>
|
||||
if !@textareaCatcher and !@textarea.val()
|
||||
@el.addClass('mode--edit')
|
||||
|
||||
# scroll to bottom
|
||||
@el.scrollParent().scrollTop(99999)
|
||||
@textarea.velocity "scroll",
|
||||
container: @textarea.scrollParent()
|
||||
offset: @textareaHeight.open - @textareaHeight.closed
|
||||
duration: 300
|
||||
easing: 'easeOutQuad'
|
||||
|
||||
@textarea.velocity
|
||||
properties:
|
||||
height: "#{ @textareaHeight.open }px"
|
||||
options:
|
||||
speed: 300
|
||||
easing: 'easeOutQuad'
|
||||
queue: false
|
||||
|
||||
@editControls.velocity
|
||||
properties:
|
||||
translateY: [
|
||||
(i) -> (i+1) * 38,
|
||||
'easeOutQuad',
|
||||
0
|
||||
]
|
||||
opacity: [ 1, [ 0.34, 1.61, 0.7, 1 ], 0]
|
||||
scale: [ 1, 'easeOutQuad', 0 ]
|
||||
options:
|
||||
speed: 300
|
||||
stagger: (i) -> i*100
|
||||
|
||||
@add_textarea_catcher()
|
||||
|
||||
add_textarea_catcher: ->
|
||||
@textareaCatcher = new App.clickCatcher
|
||||
holder: @el.offsetParent()
|
||||
callback: @hide_controls
|
||||
callback: @close_textarea
|
||||
zIndexScale: 4
|
||||
|
||||
remove_textarea_catcher: ->
|
||||
|
|
@ -577,11 +610,32 @@ class Edit extends App.Controller
|
|||
@textareaCatcher.remove()
|
||||
@textareaCatcher = null
|
||||
|
||||
hide_controls: =>
|
||||
close_textarea: =>
|
||||
@remove_textarea_catcher()
|
||||
if !@textarea.val()
|
||||
@el.removeClass('mode--edit')
|
||||
|
||||
@textarea.velocity
|
||||
properties:
|
||||
height: "#{ @textareaHeight.closed }px"
|
||||
options:
|
||||
speed: 300
|
||||
easing: 'easeOutQuad'
|
||||
|
||||
@editControls.velocity
|
||||
properties:
|
||||
translateY: [
|
||||
0,
|
||||
'easeOutQuad',
|
||||
(i) -> (i+1) * 38
|
||||
]
|
||||
scale: [ 0, [ 0.34, 1.61, 0.7, 1 ], 1 ]
|
||||
opacity: [ 0, 'easeOutQuad', 1 ]
|
||||
options:
|
||||
speed: 300
|
||||
stagger: 300
|
||||
backwards: true
|
||||
|
||||
autosaveStop: =>
|
||||
@clearInterval( 'autosave' )
|
||||
|
||||
|
|
|
|||
672
app/assets/javascripts/app/lib/animations/velocity.ui.js
Normal file
672
app/assets/javascripts/app/lib/animations/velocity.ui.js
Normal file
|
|
@ -0,0 +1,672 @@
|
|||
/**********************
|
||||
Velocity UI Pack
|
||||
**********************/
|
||||
|
||||
/* VelocityJS.org UI Pack (4.1.4). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */
|
||||
|
||||
;(function (factory) {
|
||||
/* CommonJS module. */
|
||||
if (typeof module === "object" && typeof module.exports === "object") {
|
||||
module.exports = factory();
|
||||
/* AMD module. */
|
||||
} else if (typeof define === "function" && define.amd) {
|
||||
define([ "velocity" ], factory);
|
||||
/* Browser globals. */
|
||||
} else {
|
||||
factory();
|
||||
}
|
||||
}(function() {
|
||||
return function (global, window, document, undefined) {
|
||||
|
||||
/**************
|
||||
Checks
|
||||
**************/
|
||||
|
||||
if (!global.Velocity || !global.Velocity.Utilities) {
|
||||
window.console && console.log("Velocity UI Pack: Velocity must be loaded first. Aborting.");
|
||||
return;
|
||||
} else if (!global.Velocity.version || (global.Velocity.version.major <= 0 && global.Velocity.version.minor <= 11 && global.Velocity.version.patch < 8)) {
|
||||
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
|
||||
******************/
|
||||
|
||||
global.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. */
|
||||
global.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;
|
||||
|
||||
global.Velocity.Utilities.each([ "height", "paddingTop", "paddingBottom", "marginTop", "marginBottom"], function(i, property) {
|
||||
totalHeightDelta += parseFloat(global.Velocity.CSS.getPropertyValue(element, property));
|
||||
});
|
||||
});
|
||||
|
||||
/* Animate the parent element's height adjustment (with a varying duration multiplier for aesthetic benefits). */
|
||||
global.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. */
|
||||
global.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 !== undefined && 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 = global.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)) {
|
||||
global.Velocity.Utilities.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
|
||||
global.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;
|
||||
}
|
||||
|
||||
global.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;
|
||||
}
|
||||
}
|
||||
|
||||
global.Velocity.animate(element, propertyMap, opts);
|
||||
}
|
||||
};
|
||||
|
||||
/* Return the Velocity object so that RegisterUI calls can be chained. */
|
||||
return global.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. */
|
||||
global.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 global.Velocity.RegisterUI.packagedEffects) {
|
||||
global.Velocity.RegisterUI(effectName, global.Velocity.RegisterUI.packagedEffects[effectName]);
|
||||
}
|
||||
}((window.jQuery || window.Zepto || window), window, document);
|
||||
}));
|
||||
|
|
@ -1,79 +1,75 @@
|
|||
<form class="ticket-update <% if @formChanged: %>form-changed<% end %>">
|
||||
<div class="bubble-grid horizontal">
|
||||
<div class="vertical center">
|
||||
<div class="vertical center u-positionOrigin">
|
||||
<div class="avatar user-popover zIndex-5" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
|
||||
<div class="edit-controls">
|
||||
<div class="dark pop-select zIndex-7">
|
||||
<div class="pop-selected u-clickable centered">
|
||||
<div class="gray <%- @type %> channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selector hide">
|
||||
<div class="horizontal">
|
||||
<div class="pop-selectable u-clickable centered" data-value="email">
|
||||
<div class="white email channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable u-clickable centered" data-value="facebook">
|
||||
<div class="white facebook channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable u-clickable centered" data-value="twitter">
|
||||
<div class="white twitter channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable u-clickable centered" data-value="phone">
|
||||
<div class="white phone channel icon"></div>
|
||||
</div>
|
||||
<div class="dark pop-select zIndex-7 js-edit-control">
|
||||
<div class="pop-selected u-clickable centered">
|
||||
<div class="gray <%- @type %> channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selector hide">
|
||||
<div class="horizontal">
|
||||
<div class="pop-selectable u-clickable centered" data-value="email">
|
||||
<div class="white email channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable u-clickable centered" data-value="facebook">
|
||||
<div class="white facebook channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable u-clickable centered" data-value="twitter">
|
||||
<div class="white twitter channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selectable u-clickable centered" data-value="phone">
|
||||
<div class="white phone channel icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="u-positionOrigin">
|
||||
<div class="recipient-picker zIndex-5 u-clickable horizontal centered">
|
||||
<div class="recipients icon"></div>
|
||||
<div class="recipient-count">3</div>
|
||||
</div>
|
||||
<div class="recipient-list zIndex-7 hide">
|
||||
<div class="list-arrow"></div>
|
||||
<div class="list-head horizontal">
|
||||
<%- @T('Recipients') %>
|
||||
<div class="align-right"><%- @T('type') %></div>
|
||||
</div>
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
|
||||
<div class="list-entry-name flex">Hans Peter Baxxter</div>
|
||||
<div class="list-entry-type u-clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/48.jpg)"></div>
|
||||
<div class="list-entry-name flex">Julia Maier</div>
|
||||
<div class="list-entry-type u-clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/sindresorhus/48.jpg)"></div>
|
||||
<div class="list-entry-name flex">Remo Batlogg</div>
|
||||
<div class="list-entry-type u-clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<form class="list-edit">
|
||||
<input type="email" class="list-entry" placeholder="<%- @T('Add recipients..') %>"></input>
|
||||
<input type="submit" tabindex="-1"></input>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-positionOrigin js-edit-control">
|
||||
<div class="recipient-picker zIndex-5 u-clickable horizontal centered">
|
||||
<div class="recipients icon"></div>
|
||||
<div class="recipient-count">3</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="visibility-toggle zIndex-7 u-clickable centered">
|
||||
<div class="internal-visibility" title="<%- @T("unset internal") %>">
|
||||
<div class="internal visibility icon"></div>
|
||||
<div class="recipient-list zIndex-7 hide">
|
||||
<div class="list-arrow"></div>
|
||||
<div class="list-head horizontal">
|
||||
<%- @T('Recipients') %>
|
||||
<div class="align-right"><%- @T('type') %></div>
|
||||
</div>
|
||||
<div class="public-visibility" title="<%- @T("set internal") %>">
|
||||
<div class="public visibility icon"></div>
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
|
||||
<div class="list-entry-name flex">Hans Peter Baxxter</div>
|
||||
<div class="list-entry-type u-clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/48.jpg)"></div>
|
||||
<div class="list-entry-name flex">Julia Maier</div>
|
||||
<div class="list-entry-type u-clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-entry horizontal centered">
|
||||
<div class="avatar" style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/sindresorhus/48.jpg)"></div>
|
||||
<div class="list-entry-name flex">Remo Batlogg</div>
|
||||
<div class="list-entry-type u-clickable horizontal">
|
||||
<div class="active" data-value="to">To</div>
|
||||
<div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
|
||||
</div>
|
||||
</div>
|
||||
<form class="list-edit">
|
||||
<input type="email" class="list-entry" placeholder="<%- @T('Add recipients..') %>"></input>
|
||||
<input type="submit" tabindex="-1"></input>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visibility-toggle zIndex-7 u-clickable js-edit-control">
|
||||
<div class="internal-visibility centered" title="<%- @T("unset internal") %>">
|
||||
<div class="internal visibility icon"></div>
|
||||
</div>
|
||||
<div class="public-visibility centered" title="<%- @T("set internal") %>">
|
||||
<div class="public visibility icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@
|
|||
//= require ./app/lib/core/jquery-1.11.0.js
|
||||
//= require ./app/lib/core/jquery-ui-1.8.23.custom.min.js
|
||||
//= require ./app/lib/core/underscore-1.6.0.js
|
||||
//= require ./app/lib/core/jquery.velocity.min.js
|
||||
|
||||
//= require ./app/lib/animations/jquery.velocity.min.js
|
||||
//= require ./app/lib/animations/velocity.ui.js
|
||||
|
||||
//not_used= require_tree ./app/lib/spine
|
||||
//= require ./app/lib/spine/spine.coffee
|
||||
|
|
|
|||
|
|
@ -1460,21 +1460,21 @@ ol.tabs li {
|
|||
}
|
||||
|
||||
.public.visibility.icon {
|
||||
width: 14px;
|
||||
height: 19px;
|
||||
width: 11px;
|
||||
height: 15px;
|
||||
background-position: 0 -356px;
|
||||
}
|
||||
|
||||
.internal.visibility.icon {
|
||||
width: 14px;
|
||||
height: 19px;
|
||||
background-position: -14px -356px;
|
||||
width: 11px;
|
||||
height: 15px;
|
||||
background-position: -11px -356px;
|
||||
}
|
||||
|
||||
.recipients.icon {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
background-position: -28px -358px;
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
background-position: -22px -359px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -2798,12 +2798,16 @@ footer {
|
|||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.ticket-edit .edit-controls {
|
||||
display: none;
|
||||
.ticket-edit .js-edit-control {
|
||||
width: 38px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.ticket-edit.mode--edit .edit-controls {
|
||||
display: block;
|
||||
.ticket-edit .js-edit-control:not(:last-child) {
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.ticket-edit .pop-selectable .icon {
|
||||
|
|
@ -2820,32 +2824,31 @@ footer {
|
|||
float: right;
|
||||
}
|
||||
|
||||
.ticket-edit hr {
|
||||
border-color: #e6e6e6;
|
||||
.visibility-toggle > * {
|
||||
height: 36px;
|
||||
width: 38px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.visibility-toggle {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
.visibility-toggle .icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.visibility-toggle,
|
||||
.visibility-toggle .icon,
|
||||
.recipient-picker {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.ticket-edit.is-public .internal-visibility {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ticket-edit.is-internal .visibility-toggle {
|
||||
.ticket-edit.is-internal .visibility-toggle .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ticket-edit.is-internal .public-visibility {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ticket-edit .recipient-picker {
|
||||
|
|
@ -2859,12 +2862,12 @@ footer {
|
|||
}
|
||||
|
||||
.recipient-picker .icon {
|
||||
margin-top: -3px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.recipient-count {
|
||||
margin-top: 5px;
|
||||
margin-left: 3px;
|
||||
margin-top: 1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
|
@ -2979,12 +2982,8 @@ footer {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
.ticket-edit.mode--edit textarea {
|
||||
height: 155px;
|
||||
}
|
||||
|
||||
.ticket-edit.mode--edit .bubble-placeholder {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ticket-edit .bubble-arrow:after {
|
||||
|
|
|
|||
Loading…
Reference in a new issue