Browse Source
lazy commit of semantic module spec inside shape.. will edit out later
lazy commit of semantic module spec inside shape.. will edit out later
Former-commit-id:pull/258/headb7aa684d34Former-commit-id:7d07d34ddf
Jack Lukic
11 years ago
7 changed files with 947 additions and 30 deletions
Unified View
Diff Options
-
8examples/example.css
-
8examples/index.html
-
1examples/ui/table.css
-
270src/multiple.js
-
30src/shape.css
-
26src/shape.js
-
634src/single.js
@ -0,0 +1,270 @@ |
|||||
|
/* ******************************************************************************************* |
||||
|
|
||||
|
Example Boilerplate - Multiple Instances |
||||
|
|
||||
|
Version 0.1 |
||||
|
|
||||
|
Author : Jack Lukic |
||||
|
Last revision : April 2013 |
||||
|
|
||||
|
********************************************************************************************* */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.example = function(parameters) { |
||||
|
var |
||||
|
// store a reference to the module group, this can be useful to refer to other modules inside each module
|
||||
|
$allModules = $(this), |
||||
|
|
||||
|
// extend settings to merge run time settings with defaults
|
||||
|
settings = $.extend(true, {}, $.fn.example.settings, parameters), |
||||
|
|
||||
|
// define namespaces for modules
|
||||
|
eventNamespace = '.' + settings.namespace, |
||||
|
moduleNamespace = 'module-' + settings.namespace, |
||||
|
|
||||
|
// preserve original arguments to determine if a method is being invoked
|
||||
|
query = arguments[0], |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
// iterate over all elements to initialize module
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
// cache selectors using selector definitions for access inside instance of module
|
||||
|
$module = $(this), |
||||
|
$text = $module.find(settings.selector.text), |
||||
|
|
||||
|
// define private variables which can be used to maintain internal state
|
||||
|
foo = false, |
||||
|
|
||||
|
// define variables used to track module state. In semantic modules default values are set using 'a || b' syntax
|
||||
|
selector = $module.selector || '', |
||||
|
instance = $module.data(moduleNamespace), |
||||
|
element = this, |
||||
|
|
||||
|
// alias settings object for convenience and performance
|
||||
|
namespace = settings.namespace, |
||||
|
error = settings.error, |
||||
|
className = settings.className, |
||||
|
|
||||
|
// you may also find it useful to alias your own settings
|
||||
|
text = settings.text, |
||||
|
|
||||
|
module |
||||
|
; |
||||
|
|
||||
|
// define the entire module
|
||||
|
module = { |
||||
|
|
||||
|
// initialize attaches events and preserves each instance in html metadata
|
||||
|
initialize: function() { |
||||
|
module.verbose('Initializing module for', element); |
||||
|
$module |
||||
|
.on('click' + eventNamespace, module.exampleBehavior) |
||||
|
; |
||||
|
// the instance is just a copy of the module definition, we store it in metadata so we can use it outside of scope, but also define it for immediate use
|
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleNamespace, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
// destroy removes all events and the instance from metadata
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module for', element); |
||||
|
$module |
||||
|
.removeData(moduleNamespace) |
||||
|
.off(eventNamespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
// selectors are cached so we need a method to manually refresh the cache
|
||||
|
refresh: function() { |
||||
|
module.verbose('Refreshing selector cache for', element); |
||||
|
$module = $(element); |
||||
|
$text = $(this).find(settings.selector.text); |
||||
|
}, |
||||
|
|
||||
|
exampleBehavior: function(event) { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// all of your module's specific behavior goes here. In this example our module can only get and set text of a child node
|
||||
|
has: { |
||||
|
text: function(state) { |
||||
|
return (text[state] !== undefined); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
set: { |
||||
|
text: function(state) { |
||||
|
if( module.has.text(state) ) { |
||||
|
$text |
||||
|
.text( text[state] ) |
||||
|
; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// module settings can be read or set using this method
|
||||
|
setting: function(name, value) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else if(value === undefined) { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// verbose allows for additional data to be logged by the module which can assist in debugging
|
||||
|
verbose: function() { |
||||
|
if(settings.verbose) { |
||||
|
module.debug.apply(this, arguments); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// debug pushes arguments to the console formatted as a debug statement
|
||||
|
debug: function() { |
||||
|
var |
||||
|
output = [], |
||||
|
message = settings.moduleName + ': ' + arguments[0], |
||||
|
variables = [].slice.call( arguments, 1 ), |
||||
|
log = console.info || console.log || function(){} |
||||
|
; |
||||
|
log = Function.prototype.bind.call(log, console); |
||||
|
if(settings.debug) { |
||||
|
output.push(message); |
||||
|
log.apply(console, output.concat(variables) ); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// error allows for the module to report named error messages
|
||||
|
error: function() { |
||||
|
var |
||||
|
output = [], |
||||
|
errorMessage = settings.moduleName + ': ' + arguments[0], |
||||
|
variables = [].slice.call( arguments, 1 ), |
||||
|
log = console.warn || console.log || function(){} |
||||
|
; |
||||
|
log = Function.prototype.bind.call(log, console); |
||||
|
if(settings.debug) { |
||||
|
output.push(errorMessage); |
||||
|
output.concat(variables); |
||||
|
log.apply(console, output.concat(variables) ); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// invoke is used to lookup and invoke a method or property by its dot notation string definition
|
||||
|
invoke: function(query, passedArguments, context) { |
||||
|
var |
||||
|
maxDepth, |
||||
|
found |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments; |
||||
|
context = element || context; |
||||
|
// invoke iterates through the module instance looking for methods or properties that match the requested query
|
||||
|
if(typeof query == 'string' && instance !== undefined) { |
||||
|
query = query.split('.'); |
||||
|
maxDepth = query.length - 1; |
||||
|
$.each(query, function(depth, value) { |
||||
|
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
module.verbose('Executing invoked function', found); |
||||
|
return found.apply(context, passedArguments); |
||||
|
} |
||||
|
// return retrieved variable or chain
|
||||
|
return found || false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// the module checks to see if you passed in a method name to call
|
||||
|
if(methodInvoked) { |
||||
|
if(instance === undefined) { |
||||
|
module.initialize(); |
||||
|
} |
||||
|
invokedResponse = module.invoke(query); |
||||
|
} |
||||
|
// if you didn't pass in anything it can assume you are initializing the module
|
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
// if you called invoke, you may have a returned value which shoudl be returned, otherwise allow the call to chain
|
||||
|
return (invokedResponse) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
// After you define your plugin, its necessary to include a settings object which specifies the defaults for your module
|
||||
|
$.fn.example.settings = { |
||||
|
|
||||
|
// used in debug statements to refer to the module itself
|
||||
|
moduleName : 'Todo Module', |
||||
|
|
||||
|
// whether debug content should be outputted to console
|
||||
|
debug : true, |
||||
|
|
||||
|
// whether extra debug content should be outputted
|
||||
|
verbose : true, |
||||
|
|
||||
|
// a unique identifier used to namespace events, and preserve the module instance
|
||||
|
namespace : 'example', |
||||
|
|
||||
|
// callbacks are often useful to include in your settings object
|
||||
|
onChange : function() {}, |
||||
|
|
||||
|
// you may also want to include settings specific to your module's function
|
||||
|
text: { |
||||
|
hover: 'You are hovering me now', |
||||
|
click: 'You clicked on me' |
||||
|
}, |
||||
|
|
||||
|
// error messages returned by the module
|
||||
|
error: { |
||||
|
side : 'You tried to switch to a side that does not exist.', |
||||
|
method : 'The method you called is not defined' |
||||
|
}, |
||||
|
|
||||
|
// class names which your module refers to
|
||||
|
className : { |
||||
|
active : 'active' |
||||
|
}, |
||||
|
|
||||
|
// metadata stored by your module
|
||||
|
metadata: { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// selectors used by your module
|
||||
|
selector : { |
||||
|
example : '.example' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
@ -0,0 +1,634 @@ |
|||||
|
/* ******************************************************************************************* |
||||
|
|
||||
|
Shape - A 3D Animation Plugin |
||||
|
Version 0.1 |
||||
|
(built using Semantic module spec) |
||||
|
|
||||
|
Author : Jack Lukic |
||||
|
Last revision : April 2013 |
||||
|
|
||||
|
********************************************************************************************* */ |
||||
|
|
||||
|
;(function ( $, window, document, undefined ) { |
||||
|
|
||||
|
$.fn.shape = function(parameters) { |
||||
|
var |
||||
|
$allModules = $(this), |
||||
|
|
||||
|
settings = $.extend(true, {}, $.fn.shape.settings, parameters), |
||||
|
|
||||
|
// allow methods to be queried directly
|
||||
|
query = arguments[0], |
||||
|
queryArguments = [].slice.call(arguments, 1), |
||||
|
invokedResponse |
||||
|
; |
||||
|
|
||||
|
$allModules |
||||
|
.each(function() { |
||||
|
var |
||||
|
// selector cache
|
||||
|
$module = $(this), |
||||
|
$shape = $module.find(settings.selector.shape), |
||||
|
$side = $module.find(settings.selector.side), |
||||
|
|
||||
|
// private variables
|
||||
|
$activeSide, |
||||
|
$nextSide, |
||||
|
|
||||
|
endTransition = 'transitionend msTransitionEnd oTransitionEnd', |
||||
|
|
||||
|
// standard module
|
||||
|
selector = $module.selector || '', |
||||
|
element = this, |
||||
|
moduleName = 'module-' + settings.namespace, |
||||
|
instance = $module.data(moduleName), |
||||
|
methodInvoked = (typeof query == 'string'), |
||||
|
|
||||
|
// internal aliases
|
||||
|
namespace = settings.namespace, |
||||
|
error = settings.error, |
||||
|
className = settings.className, |
||||
|
|
||||
|
module |
||||
|
; |
||||
|
|
||||
|
module = { |
||||
|
|
||||
|
initialize: function() { |
||||
|
module.verbose('Initializing module for', element); |
||||
|
module.set.defaultSide(); |
||||
|
instance = module; |
||||
|
$module |
||||
|
.data(moduleName, instance) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
destroy: function() { |
||||
|
module.verbose('Destroying previous module for', element); |
||||
|
$module |
||||
|
.removeData(moduleName) |
||||
|
.off('.' + namespace) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
refresh: function() { |
||||
|
module.verbose('Refreshing selector cache for', element); |
||||
|
$module = $(element); |
||||
|
$shape = $(this).find(settings.selector.shape); |
||||
|
$side = $(this).find(settings.selector.side); |
||||
|
}, |
||||
|
|
||||
|
repaint: function() { |
||||
|
module.verbose('Forcing repaint event'); |
||||
|
var |
||||
|
fakeAssignment = $shape.get(0).offsetWidth |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
animate: function(propertyObject, callback) { |
||||
|
module.verbose('Animating box with properties', propertyObject); |
||||
|
callback = callback || function() { |
||||
|
module.reset(); |
||||
|
module.set.active(); |
||||
|
module.queue.perform(); |
||||
|
$.proxy(settings.onChange, $nextSide)(); |
||||
|
}; |
||||
|
if(settings.useCSS) { |
||||
|
module.verbose('Starting CSS animation'); |
||||
|
$module |
||||
|
.addClass(className.animating) |
||||
|
; |
||||
|
module.set.stageSize(); |
||||
|
module.repaint(); |
||||
|
$module |
||||
|
.addClass(className.css) |
||||
|
; |
||||
|
$activeSide |
||||
|
.addClass(className.hidden) |
||||
|
; |
||||
|
$shape |
||||
|
.css(propertyObject) |
||||
|
.one(endTransition, callback) |
||||
|
; |
||||
|
} |
||||
|
else { |
||||
|
// not yet supported until .animate() is extended to allow RotateX/Y
|
||||
|
module.verbose('Starting javascript animation'); |
||||
|
$module |
||||
|
.addClass(className.animating) |
||||
|
.removeClass(className.css) |
||||
|
; |
||||
|
module.set.stageSize(); |
||||
|
module.repaint(); |
||||
|
$activeSide |
||||
|
.animate({ |
||||
|
opacity: 0 |
||||
|
}, settings.duration, settings.easing) |
||||
|
; |
||||
|
$shape |
||||
|
.animate(propertyObject, settings.duration, settings.easing, callback) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
queue: function(method) { |
||||
|
module.debug('Queueing animation of', method); |
||||
|
$shape |
||||
|
.one(endTransition, function() { |
||||
|
$module.shape(method); |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
reset: function() { |
||||
|
module.verbose('Animating states reset'); |
||||
|
$module |
||||
|
.removeClass(className.css) |
||||
|
.removeClass(className.animating) |
||||
|
.removeAttr('style') |
||||
|
; |
||||
|
$shape |
||||
|
.removeAttr('style') |
||||
|
; |
||||
|
$side |
||||
|
.removeAttr('style') |
||||
|
.removeClass(className.hidden) |
||||
|
; |
||||
|
$nextSide |
||||
|
.removeClass(className.animating) |
||||
|
.removeAttr('style') |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
is: { |
||||
|
|
||||
|
animating: function() { |
||||
|
return $module.hasClass(className.animating); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
get: { |
||||
|
|
||||
|
nextSide: function() { |
||||
|
return ( $activeSide.next(settings.selector.side).size() > 0 ) |
||||
|
? $activeSide.next(settings.selector.side) |
||||
|
: $module.find(settings.selector.side).first() |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
set: { |
||||
|
|
||||
|
defaultSide: function() { |
||||
|
$activeSide = $module.find('.' + settings.className.active); |
||||
|
$nextSide = ( $activeSide.next(settings.selector.side).size() > 0 ) |
||||
|
? $activeSide.next(settings.selector.side) |
||||
|
: $module.find(settings.selector.side).first() |
||||
|
; |
||||
|
module.verbose('Active side set to', $activeSide); |
||||
|
module.verbose('Next side set to', $nextSide); |
||||
|
}, |
||||
|
|
||||
|
stageSize: function() { |
||||
|
var |
||||
|
stage = { |
||||
|
width : $nextSide.outerWidth(), |
||||
|
height : $nextSide.outerHeight() |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Resizing stage to fit new content', stage); |
||||
|
$module |
||||
|
.css({ |
||||
|
width : stage.width, |
||||
|
height : stage.height |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
nextSide: function(selector) { |
||||
|
$nextSide = $module.find(selector); |
||||
|
if($nextSide.size() === 0) { |
||||
|
module.error(error.side); |
||||
|
} |
||||
|
module.verbose('Next side manually set to', $nextSide); |
||||
|
}, |
||||
|
|
||||
|
active: function() { |
||||
|
module.verbose('Setting new side to active', $nextSide); |
||||
|
$side |
||||
|
.removeClass(className.active) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.active) |
||||
|
; |
||||
|
module.set.defaultSide(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
flip: { |
||||
|
|
||||
|
up: function() { |
||||
|
module.debug('Flipping up', $nextSide); |
||||
|
if( !module.is.animating() ) { |
||||
|
module.stage.above(); |
||||
|
module.animate( module.getTransform.up() ); |
||||
|
} |
||||
|
else { |
||||
|
module.queue('flip.up'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
down: function() { |
||||
|
module.debug('Flipping down', $nextSide); |
||||
|
if( !module.is.animating() ) { |
||||
|
module.stage.below(); |
||||
|
module.animate( module.getTransform.down() ); |
||||
|
} |
||||
|
else { |
||||
|
module.queue('flip.down'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
left: function() { |
||||
|
module.debug('Flipping left', $nextSide); |
||||
|
if( !module.is.animating() ) { |
||||
|
module.stage.left(); |
||||
|
module.animate(module.getTransform.left() ); |
||||
|
} |
||||
|
else { |
||||
|
module.queue('flip.left'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
right: function() { |
||||
|
module.debug('Flipping right', $nextSide); |
||||
|
if( !module.is.animating() ) { |
||||
|
module.stage.right(); |
||||
|
module.animate(module.getTransform.right() ); |
||||
|
} |
||||
|
else { |
||||
|
module.queue('flip.right'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
over: function() { |
||||
|
module.debug('Flipping over', $nextSide); |
||||
|
if( !module.is.animating() ) { |
||||
|
module.stage.behind(); |
||||
|
module.animate(module.getTransform.behind() ); |
||||
|
} |
||||
|
else { |
||||
|
module.queue('flip.over'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
getTransform: { |
||||
|
|
||||
|
up: function() { |
||||
|
var |
||||
|
translate = { |
||||
|
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
||||
|
z: -($activeSide.outerHeight() / 2) |
||||
|
} |
||||
|
; |
||||
|
return { |
||||
|
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
down: function() { |
||||
|
var |
||||
|
translate = { |
||||
|
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
||||
|
z: -($activeSide.outerHeight() / 2) |
||||
|
} |
||||
|
; |
||||
|
return { |
||||
|
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
left: function() { |
||||
|
var |
||||
|
translate = { |
||||
|
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2), |
||||
|
z : -($activeSide.outerWidth() / 2) |
||||
|
} |
||||
|
; |
||||
|
return { |
||||
|
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
right: function() { |
||||
|
var |
||||
|
translate = { |
||||
|
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2), |
||||
|
z : -($activeSide.outerWidth() / 2) |
||||
|
} |
||||
|
; |
||||
|
return { |
||||
|
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
behind: function() { |
||||
|
var |
||||
|
translate = { |
||||
|
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) |
||||
|
} |
||||
|
; |
||||
|
return { |
||||
|
transform: 'translateX(' + translate.x + 'px) rotateY(180deg)' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
stage: { |
||||
|
|
||||
|
above: function() { |
||||
|
var |
||||
|
box = { |
||||
|
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
||||
|
depth : { |
||||
|
active : ($nextSide.outerHeight() / 2), |
||||
|
next : ($activeSide.outerHeight() / 2) |
||||
|
} |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Setting the initial animation position as above', $nextSide, box); |
||||
|
$activeSide |
||||
|
.css({ |
||||
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.animating) |
||||
|
.css({ |
||||
|
'display' : 'block', |
||||
|
'top' : box.origin + 'px', |
||||
|
'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
below: function() { |
||||
|
var |
||||
|
box = { |
||||
|
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
||||
|
depth : { |
||||
|
active : ($nextSide.outerHeight() / 2), |
||||
|
next : ($activeSide.outerHeight() / 2) |
||||
|
} |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Setting the initial animation position as below', $nextSide, box); |
||||
|
$activeSide |
||||
|
.css({ |
||||
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.animating) |
||||
|
.css({ |
||||
|
'display' : 'block', |
||||
|
'top' : box.origin + 'px', |
||||
|
'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
left: function() { |
||||
|
var |
||||
|
box = { |
||||
|
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), |
||||
|
depth : { |
||||
|
active : ($nextSide.outerWidth() / 2), |
||||
|
next : ($activeSide.outerWidth() / 2) |
||||
|
} |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Setting the initial animation position as left', $nextSide, box); |
||||
|
$activeSide |
||||
|
.css({ |
||||
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.animating) |
||||
|
.css({ |
||||
|
'display' : 'block', |
||||
|
'left' : box.origin + 'px', |
||||
|
'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
right: function() { |
||||
|
var |
||||
|
box = { |
||||
|
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), |
||||
|
depth : { |
||||
|
active : ($nextSide.outerWidth() / 2), |
||||
|
next : ($activeSide.outerWidth() / 2) |
||||
|
} |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Setting the initial animation position as left', $nextSide, box); |
||||
|
$activeSide |
||||
|
.css({ |
||||
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.animating) |
||||
|
.css({ |
||||
|
'display' : 'block', |
||||
|
'left' : box.origin + 'px', |
||||
|
'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)' |
||||
|
}) |
||||
|
; |
||||
|
}, |
||||
|
|
||||
|
behind: function() { |
||||
|
var |
||||
|
box = { |
||||
|
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), |
||||
|
depth : { |
||||
|
active : ($nextSide.outerWidth() / 2), |
||||
|
next : ($activeSide.outerWidth() / 2) |
||||
|
} |
||||
|
} |
||||
|
; |
||||
|
module.verbose('Setting the initial animation position as behind', $nextSide, box); |
||||
|
$activeSide |
||||
|
.css({ |
||||
|
'transform' : 'rotateY(0deg)' |
||||
|
}) |
||||
|
; |
||||
|
$nextSide |
||||
|
.addClass(className.animating) |
||||
|
.css({ |
||||
|
'display' : 'block', |
||||
|
'left' : box.origin + 'px', |
||||
|
'transform' : 'rotateY(-180deg)' |
||||
|
}) |
||||
|
; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/* standard module */ |
||||
|
setting: function(name, value) { |
||||
|
if( $.isPlainObject(name) ) { |
||||
|
$.extend(true, settings, name); |
||||
|
} |
||||
|
else if(value === undefined) { |
||||
|
return settings[name]; |
||||
|
} |
||||
|
else { |
||||
|
settings[name] = value; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
verbose: function() { |
||||
|
if(settings.verbose) { |
||||
|
module.debug.apply(this, arguments); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
debug: function() { |
||||
|
var |
||||
|
output = [], |
||||
|
message = settings.moduleName + ': ' + arguments[0], |
||||
|
variables = [].slice.call( arguments, 1 ), |
||||
|
log = console.info || console.log || function(){} |
||||
|
; |
||||
|
log = Function.prototype.bind.call(log, console); |
||||
|
if(settings.debug) { |
||||
|
output.push(message); |
||||
|
log.apply(console, output.concat(variables) ); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
error: function() { |
||||
|
var |
||||
|
output = [], |
||||
|
errorMessage = settings.moduleName + ': ' + arguments[0], |
||||
|
variables = [].slice.call( arguments, 1 ), |
||||
|
log = console.warn || console.log || function(){} |
||||
|
; |
||||
|
log = Function.prototype.bind.call(log, console); |
||||
|
if(settings.debug) { |
||||
|
output.push(errorMessage); |
||||
|
output.concat(variables); |
||||
|
log.apply(console, output.concat(variables) ); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
invoke: function(query, passedArguments, context) { |
||||
|
var |
||||
|
maxDepth, |
||||
|
found |
||||
|
; |
||||
|
passedArguments = passedArguments || queryArguments || [].slice.call( arguments, 2 ); |
||||
|
context = element || context; |
||||
|
if(typeof query == 'string' && instance !== undefined) { |
||||
|
query = query.split('.'); |
||||
|
maxDepth = query.length - 1; |
||||
|
console.log('found is ', query, instance, context, passedArguments, found); |
||||
|
$.each(query, function(depth, value) { |
||||
|
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { |
||||
|
instance = instance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
else if( instance[value] !== undefined ) { |
||||
|
found = instance[value]; |
||||
|
return true; |
||||
|
} |
||||
|
module.error(error.method); |
||||
|
return false; |
||||
|
}); |
||||
|
} |
||||
|
if ( $.isFunction( found ) ) { |
||||
|
module.verbose('Executing invoked function', found); |
||||
|
return found.apply(context, passedArguments); |
||||
|
} |
||||
|
// return retrieved variable or chain
|
||||
|
return found; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// check for invoking internal method
|
||||
|
if(methodInvoked) { |
||||
|
invokedResponse = module.invoke(query); |
||||
|
} |
||||
|
// otherwise initialize
|
||||
|
else { |
||||
|
if(instance !== undefined) { |
||||
|
module.destroy(); |
||||
|
} |
||||
|
module.initialize(); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
// chain or return queried method
|
||||
|
return (invokedResponse !== undefined) |
||||
|
? invokedResponse |
||||
|
: this |
||||
|
; |
||||
|
}; |
||||
|
|
||||
|
$.fn.shape.settings = { |
||||
|
|
||||
|
// module info
|
||||
|
moduleName : 'Shape Module', |
||||
|
|
||||
|
// debug content outputted to console
|
||||
|
debug : true, |
||||
|
|
||||
|
// verbose debug output
|
||||
|
verbose : true, |
||||
|
|
||||
|
// event namespace
|
||||
|
namespace : 'shape', |
||||
|
|
||||
|
// 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: { |
||||
|
side : 'You tried to switch to a side that does not exist.', |
||||
|
method : 'The method you called is not defined' |
||||
|
}, |
||||
|
|
||||
|
// classnames used
|
||||
|
className : { |
||||
|
css : 'css', |
||||
|
animating : 'animating', |
||||
|
hidden : 'hidden', |
||||
|
active : 'active' |
||||
|
}, |
||||
|
|
||||
|
// selectors used
|
||||
|
selector : { |
||||
|
shape : '.shape', |
||||
|
side : '.side' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
})( jQuery, window , document ); |
||||
Write
Preview
Loading…
Cancel
Save