Browse Source
Former-commit-id: 8852380512517879f6e0a44e23936763f5efa788 Former-commit-id: f0464d3b7200da807673fca4701f8381cfe65146beta
Jack Lukic
11 years ago
17 changed files with 1807 additions and 23 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,357 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic Module: Shape |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit March 25, 2013 |
||||
|
|
||||
|
An experimental plugin for manipulating 3D transitions on a 2D plane |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.transition = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = $.extend(true, {}, $.fn.transition.settings, parameters), |
||||
|
|
||||
|
// define namespaces for modules
|
||||
|
eventNamespace = '.' + settings.namespace, |
||||
|
moduleNamespace = 'module-' + settings.namespace, |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
// selector cache
|
||||
|
$module = $(this), |
||||
|
|
||||
|
// standard module
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
|
||||
|
// internal aliases
|
||||
|
errors = settings.error, |
||||
|
|
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module for', element); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
repaint: function(fakeAssignment) { |
||||
|
module.verbose('Forcing repaint event'); |
||||
|
fakeAssignment = element.offsetWidth; |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
|
||||
|
settings: function(animation, duration, easing, complete) { |
||||
|
// single settings object
|
||||
|
if($.isObject(animation) === undefined) { |
||||
|
return animation; |
||||
|
} |
||||
|
// duration is actually settings object
|
||||
|
else if(typeof duration == 'object') { |
||||
|
settings = $.extend({} , settings, duration); |
||||
|
} |
||||
|
// easing is actually complete callback
|
||||
|
else if(typeof easing == 'function') { |
||||
|
settings = $.extend({} , settings, { |
||||
|
duration: duration, |
||||
|
complete: easing |
||||
|
}); |
||||
|
} |
||||
|
// easing is actually settings
|
||||
|
else if(typeof easing == 'object') { |
||||
|
settings = $.extend(true, {} , settings, {duration: duration}, easing); |
||||
|
} |
||||
|
//
|
||||
|
else { |
||||
|
settings = $.extend({} , settings, { |
||||
|
duration : duration, |
||||
|
easing : easing, |
||||
|
complete : complete |
||||
|
}); |
||||
|
} |
||||
|
return settings; |
||||
|
}, |
||||
|
|
||||
|
transitionEvent: function() { |
||||
|
var |
||||
|
element = document.createElement('element'), |
||||
|
transitions = { |
||||
|
'transition' :'transitionend', |
||||
|
'OTransition' :'oTransitionEnd', |
||||
|
'MozTransition' :'transitionend', |
||||
|
'WebkitTransition' :'webkitTransitionEnd' |
||||
|
}, |
||||
|
transition |
||||
|
; |
||||
|
for(transition in transitions){ |
||||
|
if( element.style[transition] !== undefined ){ |
||||
|
return transitions[transition]; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
can: { |
||||
|
transition: function(transition) { |
||||
|
var |
||||
|
$fake = $('<div />') |
||||
|
; |
||||
|
$fake.addClass(transition); |
||||
|
return $fake.css('transitionDuration') !== '0s'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
animating: function() { |
||||
|
return module.animating; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
animate: function(settings) { |
||||
|
module.verbose('Converting arguments into settings object', arguments); |
||||
|
settings = module.get.settings(arguments); |
||||
|
|
||||
|
module.animating = true; |
||||
|
if( !module.can.transition() ) { |
||||
|
module.error(errors.noAnimation); |
||||
|
return false; |
||||
|
} |
||||
|
module.debug('Beginning animation'); |
||||
|
$(this) |
||||
|
.one( module.get.transitionEvent(), function() { |
||||
|
module.reset(settings.transition); |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
reset: function (transition) { |
||||
|
$(this) |
||||
|
.removeClass(transition) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
}, |
||||
|
performance: { |
||||
|
log: function(message) { |
||||
|
var |
||||
|
currentTime, |
||||
|
executionTime, |
||||
|
previousTime |
||||
|
; |
||||
|
if(settings.performance) { |
||||
|
currentTime = new Date().getTime(); |
||||
|
previousTime = time || currentTime, |
||||
|
executionTime = currentTime - previousTime; |
||||
|
time = currentTime; |
||||
|
performance.push({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
display: function() { |
||||
|
var |
||||
|
title = settings.moduleName + ':', |
||||
|
totalTime = 0 |
||||
|
; |
||||
|
time = false; |
||||
|
$.each(performance, function(index, data) { |
||||
|
totalTime += data['Execution Time']; |
||||
|
}); |
||||
|
title += ' ' + totalTime + 'ms'; |
||||
|
if(moduleSelector) { |
||||
|
title += ' \'' + moduleSelector + '\''; |
||||
|
} |
||||
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
||||
|
console.groupCollapsed(title); |
||||
|
if(console.table) { |
||||
|
console.table(performance); |
||||
|
} |
||||
|
else { |
||||
|
$.each(performance, function(index, data) { |
||||
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
||||
|
}); |
||||
|
} |
||||
|
console.groupEnd(); |
||||
|
} |
||||
|
performance = []; |
||||
|
} |
||||
|
}, |
||||
|
invoke: function(query, passedArguments, context) { |
||||
|
var |
||||
|
searchInstance = instance, |
||||
|
maxDepth, |
||||
|
found |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && searchInstance !== undefined) { |
||||
|
query = query.split('.'); |
||||
|
maxDepth = query.length - 1; |
||||
|
$.each(query, function(depth, value) { |
||||
|
if( $.isPlainObject( searchInstance[value] ) && (depth != maxDepth) ) { |
||||
|
searchInstance = searchInstance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
else if( searchInstance[value] !== undefined ) { |
||||
|
found = searchInstance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
instance.verbose('Executing invoked function', found); |
||||
|
return found.apply(context, passedArguments); |
||||
|
} |
||||
|
return found || false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
invokedResponse = module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
return (invokedResponse) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.transition.settings = { |
||||
|
|
||||
|
// module info
|
||||
|
moduleName : 'Shape Module', |
||||
|
|
||||
|
// debug content outputted to console
|
||||
|
debug : false, |
||||
|
|
||||
|
// verbose debug output
|
||||
|
verbose : false, |
||||
|
|
||||
|
// performance data output
|
||||
|
performance: false, |
||||
|
|
||||
|
// event namespace
|
||||
|
namespace : 'transition', |
||||
|
|
||||
|
// callback occurs on side change
|
||||
|
beforeChange : function() {}, |
||||
|
onChange : function() {}, |
||||
|
|
||||
|
// use css animation (currently only true is supported)
|
||||
|
useCSS : true, |
||||
|
|
||||
|
// animation duration (useful only with future js animations)
|
||||
|
duration : 1000, |
||||
|
easing : 'easeInOutQuad', |
||||
|
|
||||
|
// possible errors
|
||||
|
error: { |
||||
|
noAnimation : 'There is no css animation matching the one you specified.', |
||||
|
method : 'The method you called is not defined' |
||||
|
}, |
||||
|
|
||||
|
// selectors used
|
||||
|
selector : { |
||||
|
sides : '.sides', |
||||
|
side : '.side' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1 @@ |
|||||
|
!function(a,b,c,d){a.fn.transition=function(b){var e,f=a(this),g=a.extend(!0,{},a.fn.transition.settings,b),h="."+g.namespace,i="module-"+g.namespace,j=f.selector||"",k=(new Date).getTime(),l=[],m=arguments[0],n="string"==typeof m,o=[].slice.call(arguments,1);return f.each(function(){var b,f=a(this),p=this,q=f.data(i),r=g.error;b={initialize:function(){q=b,f.data(i,q)},destroy:function(){b.verbose("Destroying previous module for",p),f.removeData(i).off(h)},repaint:function(a){b.verbose("Forcing repaint event"),a=p.offsetWidth},get:{settings:function(b,c,e,f){return a.isObject(b)===d?b:g="object"==typeof c?a.extend({},g,c):"function"==typeof e?a.extend({},g,{duration:c,complete:e}):"object"==typeof e?a.extend(!0,{},g,{duration:c},e):a.extend({},g,{duration:c,easing:e,complete:f})},transitionEvent:function(){var a,b=c.createElement("element"),e={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in e)if(b.style[a]!==d)return e[a];return!1}},can:{transition:function(b){var c=a("<div />");return c.addClass(b),"0s"!==c.css("transitionDuration")}},is:{animating:function(){return b.animating}},animate:function(c){return b.verbose("Converting arguments into settings object",arguments),c=b.get.settings(arguments),b.animating=!0,b.can.transition()?(b.debug("Beginning animation"),a(this).one(b.get.transitionEvent(),function(){b.reset(c.transition)}),void 0):(b.error(r.noAnimation),!1)},reset:function(b){a(this).removeClass(b)},setting:function(b,c){return c===d?g[b]:(a.isPlainObject(b)?a.extend(!0,g,b):g[b]=c,void 0)},internal:function(c,e){return e===d?b[c]:(a.isPlainObject(c)?a.extend(!0,b,c):b[c]=e,void 0)},debug:function(){g.debug&&(g.performance?b.performance.log(arguments):b.debug=Function.prototype.bind.call(console.info,console,g.moduleName+":"))},verbose:function(){g.verbose&&g.debug&&(g.performance?b.performance.log(arguments):b.verbose=Function.prototype.bind.call(console.info,console,g.moduleName+":"))},error:function(){b.error=Function.prototype.bind.call(console.error,console,g.moduleName+":")},performance:{log:function(a){var c,d,e;g.performance&&(c=(new Date).getTime(),e=k||c,d=c-e,k=c,l.push({Element:p,Name:a[0],Arguments:[].slice.call(a,1)||"","Execution Time":d})),clearTimeout(b.performance.timer),b.performance.timer=setTimeout(b.performance.display,100)},display:function(){var b=g.moduleName+":",c=0;k=!1,a.each(l,function(a,b){c+=b["Execution Time"]}),b+=" "+c+"ms",j&&(b+=" '"+j+"'"),(console.group!==d||console.table!==d)&&l.length>0&&(console.groupCollapsed(b),console.table?console.table(l):a.each(l,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),l=[]}},invoke:function(c,e,f){var g,h,i=q;return e=e||o,f=p||f,"string"==typeof c&&i!==d&&(c=c.split("."),g=c.length-1,a.each(c,function(c,e){return a.isPlainObject(i[e])&&c!=g?(i=i[e],!0):i[e]!==d?(h=i[e],!0):(b.error(error.method),!1)})),a.isFunction(h)?(q.verbose("Executing invoked function",h),h.apply(f,e)):h||!1}},n?(q===d&&b.initialize(),e=b.invoke(m)):(q!==d&&b.destroy(),b.initialize())}),e?e:this},a.fn.transition.settings={moduleName:"Shape Module",debug:!1,verbose:!1,performance:!1,namespace:"transition",beforeChange:function(){},onChange:function(){},useCSS:!0,duration:1e3,easing:"easeInOutQuad",error:{noAnimation:"There is no css animation matching the one you specified.",method:"The method you called is not defined"},selector:{sides:".sides",side:".side"}}}(jQuery,window,document); |
||||
@ -0,0 +1,357 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic Module: Shape |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit March 25, 2013 |
||||
|
|
||||
|
An experimental plugin for manipulating 3D transitions on a 2D plane |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.transition = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = $.extend(true, {}, $.fn.transition.settings, parameters), |
||||
|
|
||||
|
// define namespaces for modules
|
||||
|
eventNamespace = '.' + settings.namespace, |
||||
|
moduleNamespace = 'module-' + settings.namespace, |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
// selector cache
|
||||
|
$module = $(this), |
||||
|
|
||||
|
// standard module
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
|
||||
|
// internal aliases
|
||||
|
errors = settings.error, |
||||
|
|
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module for', element); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
repaint: function(fakeAssignment) { |
||||
|
module.verbose('Forcing repaint event'); |
||||
|
fakeAssignment = element.offsetWidth; |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
|
||||
|
settings: function(animation, duration, easing, complete) { |
||||
|
// single settings object
|
||||
|
if($.isObject(animation) === undefined) { |
||||
|
return animation; |
||||
|
} |
||||
|
// duration is actually settings object
|
||||
|
else if(typeof duration == 'object') { |
||||
|
settings = $.extend({} , settings, duration); |
||||
|
} |
||||
|
// easing is actually complete callback
|
||||
|
else if(typeof easing == 'function') { |
||||
|
settings = $.extend({} , settings, { |
||||
|
duration: duration, |
||||
|
complete: easing |
||||
|
}); |
||||
|
} |
||||
|
// easing is actually settings
|
||||
|
else if(typeof easing == 'object') { |
||||
|
settings = $.extend(true, {} , settings, {duration: duration}, easing); |
||||
|
} |
||||
|
//
|
||||
|
else { |
||||
|
settings = $.extend({} , settings, { |
||||
|
duration : duration, |
||||
|
easing : easing, |
||||
|
complete : complete |
||||
|
}); |
||||
|
} |
||||
|
return settings; |
||||
|
}, |
||||
|
|
||||
|
transitionEvent: function() { |
||||
|
var |
||||
|
element = document.createElement('element'), |
||||
|
transitions = { |
||||
|
'transition' :'transitionend', |
||||
|
'OTransition' :'oTransitionEnd', |
||||
|
'MozTransition' :'transitionend', |
||||
|
'WebkitTransition' :'webkitTransitionEnd' |
||||
|
}, |
||||
|
transition |
||||
|
; |
||||
|
for(transition in transitions){ |
||||
|
if( element.style[transition] !== undefined ){ |
||||
|
return transitions[transition]; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
can: { |
||||
|
transition: function(transition) { |
||||
|
var |
||||
|
$fake = $('<div />') |
||||
|
; |
||||
|
$fake.addClass(transition); |
||||
|
return $fake.css('transitionDuration') !== '0s'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
animating: function() { |
||||
|
return module.animating; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
animate: function(settings) { |
||||
|
module.verbose('Converting arguments into settings object', arguments); |
||||
|
settings = module.get.settings(arguments); |
||||
|
|
||||
|
module.animating = true; |
||||
|
if( !module.can.transition() ) { |
||||
|
module.error(errors.noAnimation); |
||||
|
return false; |
||||
|
} |
||||
|
module.debug('Beginning animation'); |
||||
|
$(this) |
||||
|
.one( module.get.transitionEvent(), function() { |
||||
|
module.reset(settings.transition); |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
reset: function (transition) { |
||||
|
$(this) |
||||
|
.removeClass(transition) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
}, |
||||
|
performance: { |
||||
|
log: function(message) { |
||||
|
var |
||||
|
currentTime, |
||||
|
executionTime, |
||||
|
previousTime |
||||
|
; |
||||
|
if(settings.performance) { |
||||
|
currentTime = new Date().getTime(); |
||||
|
previousTime = time || currentTime, |
||||
|
executionTime = currentTime - previousTime; |
||||
|
time = currentTime; |
||||
|
performance.push({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
display: function() { |
||||
|
var |
||||
|
title = settings.moduleName + ':', |
||||
|
totalTime = 0 |
||||
|
; |
||||
|
time = false; |
||||
|
$.each(performance, function(index, data) { |
||||
|
totalTime += data['Execution Time']; |
||||
|
}); |
||||
|
title += ' ' + totalTime + 'ms'; |
||||
|
if(moduleSelector) { |
||||
|
title += ' \'' + moduleSelector + '\''; |
||||
|
} |
||||
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
||||
|
console.groupCollapsed(title); |
||||
|
if(console.table) { |
||||
|
console.table(performance); |
||||
|
} |
||||
|
else { |
||||
|
$.each(performance, function(index, data) { |
||||
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
||||
|
}); |
||||
|
} |
||||
|
console.groupEnd(); |
||||
|
} |
||||
|
performance = []; |
||||
|
} |
||||
|
}, |
||||
|
invoke: function(query, passedArguments, context) { |
||||
|
var |
||||
|
searchInstance = instance, |
||||
|
maxDepth, |
||||
|
found |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && searchInstance !== undefined) { |
||||
|
query = query.split('.'); |
||||
|
maxDepth = query.length - 1; |
||||
|
$.each(query, function(depth, value) { |
||||
|
if( $.isPlainObject( searchInstance[value] ) && (depth != maxDepth) ) { |
||||
|
searchInstance = searchInstance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
else if( searchInstance[value] !== undefined ) { |
||||
|
found = searchInstance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
instance.verbose('Executing invoked function', found); |
||||
|
return found.apply(context, passedArguments); |
||||
|
} |
||||
|
return found || false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
invokedResponse = module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
return (invokedResponse) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.transition.settings = { |
||||
|
|
||||
|
// module info
|
||||
|
moduleName : 'Shape Module', |
||||
|
|
||||
|
// debug content outputted to console
|
||||
|
debug : false, |
||||
|
|
||||
|
// verbose debug output
|
||||
|
verbose : false, |
||||
|
|
||||
|
// performance data output
|
||||
|
performance: false, |
||||
|
|
||||
|
// event namespace
|
||||
|
namespace : 'transition', |
||||
|
|
||||
|
// callback occurs on side change
|
||||
|
beforeChange : function() {}, |
||||
|
onChange : function() {}, |
||||
|
|
||||
|
// use css animation (currently only true is supported)
|
||||
|
useCSS : true, |
||||
|
|
||||
|
// animation duration (useful only with future js animations)
|
||||
|
duration : 1000, |
||||
|
easing : 'easeInOutQuad', |
||||
|
|
||||
|
// possible errors
|
||||
|
error: { |
||||
|
noAnimation : 'There is no css animation matching the one you specified.', |
||||
|
method : 'The method you called is not defined' |
||||
|
}, |
||||
|
|
||||
|
// selectors used
|
||||
|
selector : { |
||||
|
sides : '.sides', |
||||
|
side : '.side' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -1 +1 @@ |
|||||
42c3cc4a99ed2e70ec4a11424d8530f09673eddd |
91329b48b06994dca702e7104d8b07d99f5600a6 |
||||
@ -1 +1 @@ |
|||||
0c60aeca042691dfcd9275a809bfb1980469793e |
ea8b13eea93965a595e64dcc351580e22ff20eec |
||||
@ -0,0 +1,357 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic Module: Shape |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit March 25, 2013 |
||||
|
|
||||
|
An experimental plugin for manipulating 3D transitions on a 2D plane |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.transition = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = $.extend(true, {}, $.fn.transition.settings, parameters), |
||||
|
|
||||
|
// define namespaces for modules
|
||||
|
eventNamespace = '.' + settings.namespace, |
||||
|
moduleNamespace = 'module-' + settings.namespace, |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
// selector cache
|
||||
|
$module = $(this), |
||||
|
|
||||
|
// standard module
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
|
||||
|
// internal aliases
|
||||
|
errors = settings.error, |
||||
|
|
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module for', element); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
repaint: function(fakeAssignment) { |
||||
|
module.verbose('Forcing repaint event'); |
||||
|
fakeAssignment = element.offsetWidth; |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
|
||||
|
settings: function(animation, duration, easing, complete) { |
||||
|
// single settings object
|
||||
|
if($.isObject(animation) === undefined) { |
||||
|
return animation; |
||||
|
} |
||||
|
// duration is actually settings object
|
||||
|
else if(typeof duration == 'object') { |
||||
|
settings = $.extend({} , settings, duration); |
||||
|
} |
||||
|
// easing is actually complete callback
|
||||
|
else if(typeof easing == 'function') { |
||||
|
settings = $.extend({} , settings, { |
||||
|
duration: duration, |
||||
|
complete: easing |
||||
|
}); |
||||
|
} |
||||
|
// easing is actually settings
|
||||
|
else if(typeof easing == 'object') { |
||||
|
settings = $.extend(true, {} , settings, {duration: duration}, easing); |
||||
|
} |
||||
|
//
|
||||
|
else { |
||||
|
settings = $.extend({} , settings, { |
||||
|
duration : duration, |
||||
|
easing : easing, |
||||
|
complete : complete |
||||
|
}); |
||||
|
} |
||||
|
return settings; |
||||
|
}, |
||||
|
|
||||
|
transitionEvent: function() { |
||||
|
var |
||||
|
element = document.createElement('element'), |
||||
|
transitions = { |
||||
|
'transition' :'transitionend', |
||||
|
'OTransition' :'oTransitionEnd', |
||||
|
'MozTransition' :'transitionend', |
||||
|
'WebkitTransition' :'webkitTransitionEnd' |
||||
|
}, |
||||
|
transition |
||||
|
; |
||||
|
for(transition in transitions){ |
||||
|
if( element.style[transition] !== undefined ){ |
||||
|
return transitions[transition]; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
can: { |
||||
|
transition: function(transition) { |
||||
|
var |
||||
|
$fake = $('<div />') |
||||
|
; |
||||
|
$fake.addClass(transition); |
||||
|
return $fake.css('transitionDuration') !== '0s'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
animating: function() { |
||||
|
return module.animating; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
animate: function(settings) { |
||||
|
module.verbose('Converting arguments into settings object', arguments); |
||||
|
settings = module.get.settings(arguments); |
||||
|
|
||||
|
module.animating = true; |
||||
|
if( !module.can.transition() ) { |
||||
|
module.error(errors.noAnimation); |
||||
|
return false; |
||||
|
} |
||||
|
module.debug('Beginning animation'); |
||||
|
$(this) |
||||
|
.one( module.get.transitionEvent(), function() { |
||||
|
module.reset(settings.transition); |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
reset: function (transition) { |
||||
|
$(this) |
||||
|
.removeClass(transition) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
}, |
||||
|
performance: { |
||||
|
log: function(message) { |
||||
|
var |
||||
|
currentTime, |
||||
|
executionTime, |
||||
|
previousTime |
||||
|
; |
||||
|
if(settings.performance) { |
||||
|
currentTime = new Date().getTime(); |
||||
|
previousTime = time || currentTime, |
||||
|
executionTime = currentTime - previousTime; |
||||
|
time = currentTime; |
||||
|
performance.push({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
display: function() { |
||||
|
var |
||||
|
title = settings.moduleName + ':', |
||||
|
totalTime = 0 |
||||
|
; |
||||
|
time = false; |
||||
|
$.each(performance, function(index, data) { |
||||
|
totalTime += data['Execution Time']; |
||||
|
}); |
||||
|
title += ' ' + totalTime + 'ms'; |
||||
|
if(moduleSelector) { |
||||
|
title += ' \'' + moduleSelector + '\''; |
||||
|
} |
||||
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
||||
|
console.groupCollapsed(title); |
||||
|
if(console.table) { |
||||
|
console.table(performance); |
||||
|
} |
||||
|
else { |
||||
|
$.each(performance, function(index, data) { |
||||
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
||||
|
}); |
||||
|
} |
||||
|
console.groupEnd(); |
||||
|
} |
||||
|
performance = []; |
||||
|
} |
||||
|
}, |
||||
|
invoke: function(query, passedArguments, context) { |
||||
|
var |
||||
|
searchInstance = instance, |
||||
|
maxDepth, |
||||
|
found |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && searchInstance !== undefined) { |
||||
|
query = query.split('.'); |
||||
|
maxDepth = query.length - 1; |
||||
|
$.each(query, function(depth, value) { |
||||
|
if( $.isPlainObject( searchInstance[value] ) && (depth != maxDepth) ) { |
||||
|
searchInstance = searchInstance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
else if( searchInstance[value] !== undefined ) { |
||||
|
found = searchInstance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
instance.verbose('Executing invoked function', found); |
||||
|
return found.apply(context, passedArguments); |
||||
|
} |
||||
|
return found || false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
invokedResponse = module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
return (invokedResponse) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.transition.settings = { |
||||
|
|
||||
|
// module info
|
||||
|
moduleName : 'Shape Module', |
||||
|
|
||||
|
// debug content outputted to console
|
||||
|
debug : false, |
||||
|
|
||||
|
// verbose debug output
|
||||
|
verbose : false, |
||||
|
|
||||
|
// performance data output
|
||||
|
performance: false, |
||||
|
|
||||
|
// event namespace
|
||||
|
namespace : 'transition', |
||||
|
|
||||
|
// callback occurs on side change
|
||||
|
beforeChange : function() {}, |
||||
|
onChange : function() {}, |
||||
|
|
||||
|
// use css animation (currently only true is supported)
|
||||
|
useCSS : true, |
||||
|
|
||||
|
// animation duration (useful only with future js animations)
|
||||
|
duration : 1000, |
||||
|
easing : 'easeInOutQuad', |
||||
|
|
||||
|
// possible errors
|
||||
|
error: { |
||||
|
noAnimation : 'There is no css animation matching the one you specified.', |
||||
|
method : 'The method you called is not defined' |
||||
|
}, |
||||
|
|
||||
|
// selectors used
|
||||
|
selector : { |
||||
|
sides : '.sides', |
||||
|
side : '.side' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,357 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic Module: Shape |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit March 25, 2013 |
||||
|
|
||||
|
An experimental plugin for manipulating 3D transitions on a 2D plane |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.transition = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = $.extend(true, {}, $.fn.transition.settings, parameters), |
||||
|
|
||||
|
// define namespaces for modules
|
||||
|
eventNamespace = '.' + settings.namespace, |
||||
|
moduleNamespace = 'module-' + settings.namespace, |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
// selector cache
|
||||
|
$module = $(this), |
||||
|
|
||||
|
// standard module
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
|
||||
|
// internal aliases
|
||||
|
errors = settings.error, |
||||
|
|
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module for', element); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
repaint: function(fakeAssignment) { |
||||
|
module.verbose('Forcing repaint event'); |
||||
|
fakeAssignment = element.offsetWidth; |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
|
||||
|
settings: function(animation, duration, easing, complete) { |
||||
|
// single settings object
|
||||
|
if($.isObject(animation) === undefined) { |
||||
|
return animation; |
||||
|
} |
||||
|
// duration is actually settings object
|
||||
|
else if(typeof duration == 'object') { |
||||
|
settings = $.extend({} , settings, duration); |
||||
|
} |
||||
|
// easing is actually complete callback
|
||||
|
else if(typeof easing == 'function') { |
||||
|
settings = $.extend({} , settings, { |
||||
|
duration: duration, |
||||
|
complete: easing |
||||
|
}); |
||||
|
} |
||||
|
// easing is actually settings
|
||||
|
else if(typeof easing == 'object') { |
||||
|
settings = $.extend(true, {} , settings, {duration: duration}, easing); |
||||
|
} |
||||
|
//
|
||||
|
else { |
||||
|
settings = $.extend({} , settings, { |
||||
|
duration : duration, |
||||
|
easing : easing, |
||||
|
complete : complete |
||||
|
}); |
||||
|
} |
||||
|
return settings; |
||||
|
}, |
||||
|
|
||||
|
transitionEvent: function() { |
||||
|
var |
||||
|
element = document.createElement('element'), |
||||
|
transitions = { |
||||
|
'transition' :'transitionend', |
||||
|
'OTransition' :'oTransitionEnd', |
||||
|
'MozTransition' :'transitionend', |
||||
|
'WebkitTransition' :'webkitTransitionEnd' |
||||
|
}, |
||||
|
transition |
||||
|
; |
||||
|
for(transition in transitions){ |
||||
|
if( element.style[transition] !== undefined ){ |
||||
|
return transitions[transition]; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
can: { |
||||
|
transition: function(transition) { |
||||
|
var |
||||
|
$fake = $('<div />') |
||||
|
; |
||||
|
$fake.addClass(transition); |
||||
|
return $fake.css('transitionDuration') !== '0s'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
animating: function() { |
||||
|
return module.animating; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
animate: function(settings) { |
||||
|
module.verbose('Converting arguments into settings object', arguments); |
||||
|
settings = module.get.settings(arguments); |
||||
|
|
||||
|
module.animating = true; |
||||
|
if( !module.can.transition() ) { |
||||
|
module.error(errors.noAnimation); |
||||
|
return false; |
||||
|
} |
||||
|
module.debug('Beginning animation'); |
||||
|
$(this) |
||||
|
.one( module.get.transitionEvent(), function() { |
||||
|
module.reset(settings.transition); |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
reset: function (transition) { |
||||
|
$(this) |
||||
|
.removeClass(transition) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
}, |
||||
|
performance: { |
||||
|
log: function(message) { |
||||
|
var |
||||
|
currentTime, |
||||
|
executionTime, |
||||
|
previousTime |
||||
|
; |
||||
|
if(settings.performance) { |
||||
|
currentTime = new Date().getTime(); |
||||
|
previousTime = time || currentTime, |
||||
|
executionTime = currentTime - previousTime; |
||||
|
time = currentTime; |
||||
|
performance.push({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
display: function() { |
||||
|
var |
||||
|
title = settings.moduleName + ':', |
||||
|
totalTime = 0 |
||||
|
; |
||||
|
time = false; |
||||
|
$.each(performance, function(index, data) { |
||||
|
totalTime += data['Execution Time']; |
||||
|
}); |
||||
|
title += ' ' + totalTime + 'ms'; |
||||
|
if(moduleSelector) { |
||||
|
title += ' \'' + moduleSelector + '\''; |
||||
|
} |
||||
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
||||
|
console.groupCollapsed(title); |
||||
|
if(console.table) { |
||||
|
console.table(performance); |
||||
|
} |
||||
|
else { |
||||
|
$.each(performance, function(index, data) { |
||||
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
||||
|
}); |
||||
|
} |
||||
|
console.groupEnd(); |
||||
|
} |
||||
|
performance = []; |
||||
|
} |
||||
|
}, |
||||
|
invoke: function(query, passedArguments, context) { |
||||
|
var |
||||
|
searchInstance = instance, |
||||
|
maxDepth, |
||||
|
found |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && searchInstance !== undefined) { |
||||
|
query = query.split('.'); |
||||
|
maxDepth = query.length - 1; |
||||
|
$.each(query, function(depth, value) { |
||||
|
if( $.isPlainObject( searchInstance[value] ) && (depth != maxDepth) ) { |
||||
|
searchInstance = searchInstance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
else if( searchInstance[value] !== undefined ) { |
||||
|
found = searchInstance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
instance.verbose('Executing invoked function', found); |
||||
|
return found.apply(context, passedArguments); |
||||
|
} |
||||
|
return found || false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
invokedResponse = module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
return (invokedResponse) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.transition.settings = { |
||||
|
|
||||
|
// module info
|
||||
|
moduleName : 'Shape Module', |
||||
|
|
||||
|
// debug content outputted to console
|
||||
|
debug : false, |
||||
|
|
||||
|
// verbose debug output
|
||||
|
verbose : false, |
||||
|
|
||||
|
// performance data output
|
||||
|
performance: false, |
||||
|
|
||||
|
// event namespace
|
||||
|
namespace : 'transition', |
||||
|
|
||||
|
// callback occurs on side change
|
||||
|
beforeChange : function() {}, |
||||
|
onChange : function() {}, |
||||
|
|
||||
|
// use css animation (currently only true is supported)
|
||||
|
useCSS : true, |
||||
|
|
||||
|
// animation duration (useful only with future js animations)
|
||||
|
duration : 1000, |
||||
|
easing : 'easeInOutQuad', |
||||
|
|
||||
|
// possible errors
|
||||
|
error: { |
||||
|
noAnimation : 'There is no css animation matching the one you specified.', |
||||
|
method : 'The method you called is not defined' |
||||
|
}, |
||||
|
|
||||
|
// selectors used
|
||||
|
selector : { |
||||
|
sides : '.sides', |
||||
|
side : '.side' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,357 @@ |
|||||
|
/* ****************************** |
||||
|
Semantic Module: Shape |
||||
|
Author: Jack Lukic |
||||
|
Notes: First Commit March 25, 2013 |
||||
|
|
||||
|
An experimental plugin for manipulating 3D transitions on a 2D plane |
||||
|
|
||||
|
****************************** */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.transition = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = $.extend(true, {}, $.fn.transition.settings, parameters), |
||||
|
|
||||
|
// define namespaces for modules
|
||||
|
eventNamespace = '.' + settings.namespace, |
||||
|
moduleNamespace = 'module-' + settings.namespace, |
||||
|
moduleSelector = $allModules.selector || '', |
||||
|
|
||||
|
time = new Date().getTime(), |
||||
|
performance = [], |
||||
|
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
// selector cache
|
||||
|
$module = $(this), |
||||
|
|
||||
|
// standard module
|
||||
|
element = this, |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
|
||||
|
// internal aliases
|
||||
|
errors = settings.error, |
||||
|
|
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module for', element); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
repaint: function(fakeAssignment) { |
||||
|
module.verbose('Forcing repaint event'); |
||||
|
fakeAssignment = element.offsetWidth; |
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
|
||||
|
settings: function(animation, duration, easing, complete) { |
||||
|
// single settings object
|
||||
|
if($.isObject(animation) === undefined) { |
||||
|
return animation; |
||||
|
} |
||||
|
// duration is actually settings object
|
||||
|
else if(typeof duration == 'object') { |
||||
|
settings = $.extend({} , settings, duration); |
||||
|
} |
||||
|
// easing is actually complete callback
|
||||
|
else if(typeof easing == 'function') { |
||||
|
settings = $.extend({} , settings, { |
||||
|
duration: duration, |
||||
|
complete: easing |
||||
|
}); |
||||
|
} |
||||
|
// easing is actually settings
|
||||
|
else if(typeof easing == 'object') { |
||||
|
settings = $.extend(true, {} , settings, {duration: duration}, easing); |
||||
|
} |
||||
|
//
|
||||
|
else { |
||||
|
settings = $.extend({} , settings, { |
||||
|
duration : duration, |
||||
|
easing : easing, |
||||
|
complete : complete |
||||
|
}); |
||||
|
} |
||||
|
return settings; |
||||
|
}, |
||||
|
|
||||
|
transitionEvent: function() { |
||||
|
var |
||||
|
element = document.createElement('element'), |
||||
|
transitions = { |
||||
|
'transition' :'transitionend', |
||||
|
'OTransition' :'oTransitionEnd', |
||||
|
'MozTransition' :'transitionend', |
||||
|
'WebkitTransition' :'webkitTransitionEnd' |
||||
|
}, |
||||
|
transition |
||||
|
; |
||||
|
for(transition in transitions){ |
||||
|
if( element.style[transition] !== undefined ){ |
||||
|
return transitions[transition]; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
can: { |
||||
|
transition: function(transition) { |
||||
|
var |
||||
|
$fake = $('<div />') |
||||
|
; |
||||
|
$fake.addClass(transition); |
||||
|
return $fake.css('transitionDuration') !== '0s'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
animating: function() { |
||||
|
return module.animating; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
animate: function(settings) { |
||||
|
module.verbose('Converting arguments into settings object', arguments); |
||||
|
settings = module.get.settings(arguments); |
||||
|
|
||||
|
module.animating = true; |
||||
|
if( !module.can.transition() ) { |
||||
|
module.error(errors.noAnimation); |
||||
|
return false; |
||||
|
} |
||||
|
module.debug('Beginning animation'); |
||||
|
$(this) |
||||
|
.one( module.get.transitionEvent(), function() { |
||||
|
module.reset(settings.transition); |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
reset: function (transition) { |
||||
|
$(this) |
||||
|
.removeClass(transition) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
setting: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
}, |
||||
|
internal: function(name, value) { |
||||
|
if(value !== undefined) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, module, name); |
||||
|
} |
||||
|
else { |
||||
|
module[name] = value; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
return module[name]; |
||||
|
} |
||||
|
}, |
||||
|
debug: function() { |
||||
|
if(settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
verbose: function() { |
||||
|
if(settings.verbose && settings.debug) { |
||||
|
if(settings.performance) { |
||||
|
module.performance.log(arguments); |
||||
|
} |
||||
|
else { |
||||
|
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':'); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
error: function() { |
||||
|
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
||||
|
}, |
||||
|
performance: { |
||||
|
log: function(message) { |
||||
|
var |
||||
|
currentTime, |
||||
|
executionTime, |
||||
|
previousTime |
||||
|
; |
||||
|
if(settings.performance) { |
||||
|
currentTime = new Date().getTime(); |
||||
|
previousTime = time || currentTime, |
||||
|
executionTime = currentTime - previousTime; |
||||
|
time = currentTime; |
||||
|
performance.push({ |
||||
|
'Element' : element, |
||||
|
'Name' : message[0], |
||||
|
'Arguments' : [].slice.call(message, 1) || '', |
||||
|
'Execution Time' : executionTime |
||||
|
}); |
||||
|
} |
||||
|
clearTimeout(module.performance.timer); |
||||
|
module.performance.timer = setTimeout(module.performance.display, 100); |
||||
|
}, |
||||
|
display: function() { |
||||
|
var |
||||
|
title = settings.moduleName + ':', |
||||
|
totalTime = 0 |
||||
|
; |
||||
|
time = false; |
||||
|
$.each(performance, function(index, data) { |
||||
|
totalTime += data['Execution Time']; |
||||
|
}); |
||||
|
title += ' ' + totalTime + 'ms'; |
||||
|
if(moduleSelector) { |
||||
|
title += ' \'' + moduleSelector + '\''; |
||||
|
} |
||||
|
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
||||
|
console.groupCollapsed(title); |
||||
|
if(console.table) { |
||||
|
console.table(performance); |
||||
|
} |
||||
|
else { |
||||
|
$.each(performance, function(index, data) { |
||||
|
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
||||
|
}); |
||||
|
} |
||||
|
console.groupEnd(); |
||||
|
} |
||||
|
performance = []; |
||||
|
} |
||||
|
}, |
||||
|
invoke: function(query, passedArguments, context) { |
||||
|
var |
||||
|
searchInstance = instance, |
||||
|
maxDepth, |
||||
|
found |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && searchInstance !== undefined) { |
||||
|
query = query.split('.'); |
||||
|
maxDepth = query.length - 1; |
||||
|
$.each(query, function(depth, value) { |
||||
|
if( $.isPlainObject( searchInstance[value] ) && (depth != maxDepth) ) { |
||||
|
searchInstance = searchInstance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
else if( searchInstance[value] !== undefined ) { |
||||
|
found = searchInstance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
instance.verbose('Executing invoked function', found); |
||||
|
return found.apply(context, passedArguments); |
||||
|
} |
||||
|
return found || false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
invokedResponse = module.invoke(query); |
||||
|
} |
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
return (invokedResponse) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.transition.settings = { |
||||
|
|
||||
|
// module info
|
||||
|
moduleName : 'Shape Module', |
||||
|
|
||||
|
// debug content outputted to console
|
||||
|
debug : false, |
||||
|
|
||||
|
// verbose debug output
|
||||
|
verbose : false, |
||||
|
|
||||
|
// performance data output
|
||||
|
performance: false, |
||||
|
|
||||
|
// event namespace
|
||||
|
namespace : 'transition', |
||||
|
|
||||
|
// callback occurs on side change
|
||||
|
beforeChange : function() {}, |
||||
|
onChange : function() {}, |
||||
|
|
||||
|
// use css animation (currently only true is supported)
|
||||
|
useCSS : true, |
||||
|
|
||||
|
// animation duration (useful only with future js animations)
|
||||
|
duration : 1000, |
||||
|
easing : 'easeInOutQuad', |
||||
|
|
||||
|
// possible errors
|
||||
|
error: { |
||||
|
noAnimation : 'There is no css animation matching the one you specified.', |
||||
|
method : 'The method you called is not defined' |
||||
|
}, |
||||
|
|
||||
|
// selectors used
|
||||
|
selector : { |
||||
|
sides : '.sides', |
||||
|
side : '.side' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
Loading…
Reference in new issue