Difference between revisions of "Template:Toronto/CSS"

Line 222: Line 222:
 
transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
 
transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
 
}
 
}
 +
<script type="text/javascript">
 +
(function($) {
 +
 +
'use strict';
 +
 +
var methods = {
 +
init : function(settings) {
 +
 +
// Set default parameters
 +
var defaultSettings = {
 +
easing:      'ease',    // Easing transition
 +
duration:    700,      // Duration of animation
 +
margins:    false,    // Whether or not to include margins
 +
setOnClick:  false,    // Whether or not to set the new active element on click
 +
activeObj:  '.active', // Selector for the active element
 +
autoUpdate:  false,    // Update every interval
 +
updateTime:  100,      // Time between update checks
 +
enableHover: true,      // lavalamp moves with hover instead of click
 +
delayOn:    0,        // Delay time on hover
 +
delayOff:    0,        // Delay time off hover
 +
enableFocus: false,    // Animate on keyboard focus
 +
deepFocus:  false,    // Animate on decendant focus
 +
}; // End options
 +
 +
// Override default options
 +
settings = $.extend({}, defaultSettings, settings);
 +
 +
return this.each(function(){
 +
 +
// Get the options
 +
var margins    = settings.margins;
 +
var setOnClick  = settings.setOnClick;
 +
var activeObj  = settings.activeObj;
 +
var autoUpdate  = settings.autoUpdate;
 +
var updateTime  = settings.updateTime;
 +
var enableHover = settings.enableHover;
 +
var delayOn    = settings.delayOn;
 +
var delayOff    = settings.delayOff;
 +
var enableFocus = settings.enableFocus;
 +
var deepFocus  = settings.deepFocus;
 +
var duration    = settings.duration;
 +
var easing      = settings.easing;
 +
 +
// Set variables
 +
var list  = $(this);
 +
var items  = list.children();
 +
var active = list.children(activeObj);
 +
 +
// Check if active element exists
 +
if (active.length === 0) {
 +
active = items.eq(0);
 +
}
 +
 +
// Set variables to object
 +
list.addClass('lavalamp').data({
 +
lavalampActive: active,
 +
isAnim:        false,
 +
settings:      settings
 +
});
 +
 +
// Create lavalamp object
 +
var obj = $('<div class="lavalamp-object '+easing+'" />').prependTo(list);
 +
items.addClass('lavalamp-item');
 +
 +
// Check for CSS3 animations
 +
obj.css({
 +
WebkitTransitionDuration: duration / 1000 + 's',
 +
msTransitionDuration: duration / 1000 + 's',
 +
MozTransitionDuration: duration / 1000 + 's',
 +
OTransitionDuration: duration / 1000 + 's',
 +
transitionDuration: duration / 1000 + 's',
 +
});
 +
 +
var w  = active.outerWidth(margins);
 +
var h  = active.outerHeight(margins);
 +
var t  = active.position().top;
 +
var l  = active.position().left;
 +
var mt = active.css('marginTop');
 +
var ml = active.css('marginLeft');
 +
 +
// Add margins to calculations
 +
if(!margins) {
 +
ml = parseInt(ml);
 +
mt = parseInt(mt);
 +
 +
l = l + ml;
 +
t = t + mt;
 +
}
 +
 +
obj.css({
 +
width:    w,
 +
height:    h,
 +
transform: 'translate('+l+'px,'+t+'px)'
 +
});
 +
 +
var onHover = false; // check if item is still hovered after delay
 +
var enAnim  = true; // temporarily disable animations when in focus
 +
lavalampEnter = function() {
 +
var des = $(this);
 +
onHover = true;
 +
 +
// delay and animate
 +
setTimeout(function() {
 +
if (onHover && enAnim) {
 +
list.lavalamp('anim',des);
 +
}
 +
},delayOn);
 +
 +
}; // end mousenter
 +
lavalampLeave = function(des) {
 +
des = list.data('lavalampActive');
 +
onHover = false;
 +
 +
// delay and animate
 +
setTimeout(function() {
 +
if (!onHover && enAnim) {
 +
list.lavalamp('anim',des);
 +
}
 +
},delayOff);
 +
 +
}; // end mouseleave
 +
 +
focusIn = function() {
 +
var des = $(this);
 +
 +
// Back out of deep decendents
 +
if (!des.hasClass('lavalamp-item')) {
 +
des = des.parents('.lavalamp-item');
 +
}
 +
 +
enAnim = false;
 +
 +
// delay and animate
 +
setTimeout(function() {
 +
list.lavalamp('anim',des);
 +
},delayOn);
 +
 +
}; // end focus in
 +
focusOut = function() {
 +
enAnim = true;
 +
 +
var des = list.data('lavalampActive');
 +
 +
// delay and animate
 +
setTimeout(function() {
 +
list.lavalamp('anim',des);
 +
},delayOff);
 +
}; // end focus out
 +
 +
// items.hover(enter, leave);
 +
 +
 +
if (enableHover) {
 +
list.on('mouseenter','.lavalamp-item',lavalampEnter);
 +
list.on('mouseleave','.lavalamp-item',lavalampLeave);
 +
}
 +
if (enableFocus) {
 +
list.on('focusin','.lavalamp-item',focusIn);
 +
list.on('focusout','.lavalamp-item',focusOut);
 +
}
 +
if (deepFocus) {
 +
list.on('focusin','.lavalamp-item *',focusIn);
 +
list.on('focusout','.lavalamp-item *',focusOut);
 +
}
 +
 +
 +
if (setOnClick) {
 +
items.click(function() {
 +
active = $(this);
 +
list.data('lavalampActive',active).lavalamp('update');
 +
});
 +
} // End set on click
 +
 +
if (autoUpdate) {
 +
var updateInterval = setInterval(function() {
 +
var isAnim = list.data('isAnim');
 +
if (!onHover && !isAnim) {
 +
list.lavalamp('update');
 +
}
 +
}, updateTime); // End setinterval
 +
 +
list.data('updateInterval',updateInterval);
 +
} // End auto update
 +
}); // End object loop
 +
 +
}, // End init
 +
destroy : function() {
 +
return this.each(function(){
 +
var list        = $(this);
 +
var settings    = list.data('settings');
 +
var items      = list.children('.lavalamp-item');
 +
var enableHover = settings.enableHover;
 +
var enableFocus = settings.enableFocus;
 +
var deepFocus  = settings.deepFocus;
 +
var autoUpdate  = settings.autoUpdate;
 +
 +
// Unbind the plugin effect
 +
if (enableHover) {
 +
list.off('mouseenter', '.lavalamp-item', lavalampEnter);
 +
list.off('mouseleave', '.lavalamp-item', lavalampLeave);
 +
}
 +
if (enableFocus) {
 +
list.off('focusin','.lavalamp-item',focusIn);
 +
list.off('focusout','.lavalamp-item',focusOut);
 +
}
 +
if (deepFocus) {
 +
list.off('focusin','.lavalamp-item *',focusIn);
 +
list.off('focusout','.lavalamp-item *',focusOut);
 +
}
 +
 +
// Remove CSS
 +
list.removeClass('lavalamp');
 +
items.removeClass('lavalamp-item');
 +
 +
// remove auto update
 +
if (autoUpdate) {
 +
var updateInterval = list.data('updateInterval');
 +
clearInterval(updateInterval);
 +
} // End auto update
 +
 +
// Remove the lavalamp object
 +
list.children('.lavalamp-object').remove();
 +
 +
// Remove data from wrapper
 +
list.removeData();
 +
 +
});
 +
}, // End destroy
 +
update : function () {
 +
return this.each(function(){
 +
var list  = $(this);
 +
var items  = list.children(':not(.lavalamp-object)');
 +
var active = list.data('lavalampActive');
 +
 +
// reset list objects
 +
items.addClass('lavalamp-item').css({
 +
zIndex:5,
 +
position:'relative'
 +
});
 +
 +
// reset to active item
 +
list.lavalamp('anim',active);
 +
 +
});
 +
}, // End update
 +
anim : function(destination) {
 +
var list    = this;
 +
var settings = list.data('settings');
 +
var duration = settings.duration;
 +
var margins  = settings.margins;
 +
 +
var obj = list.children('.lavalamp-object');
 +
 +
var w  = destination.outerWidth(margins);
 +
var h  = destination.outerHeight(margins);
 +
var t  = destination.position().top;
 +
var l  = destination.position().left;
 +
var mt = destination.css('marginTop');
 +
var ml = destination.css('marginLeft');
 +
 +
// Add margins to calculations
 +
if(!margins) {
 +
ml = parseInt(ml);
 +
mt = parseInt(mt);
 +
 +
l = l + ml;
 +
t = t + mt;
 +
}
 +
 +
list.data('isAnim',true);
 +
obj.css({
 +
width:    w,
 +
height:    h,
 +
transform: 'translate('+l+'px,'+t+'px)'
 +
});
 +
setTimeout(function() {
 +
list.data('isAnim',false);
 +
},duration);
 +
} // End animate
 +
}; // End method
 +
   
 +
 +
$.fn.lavalamp = function(method) {
 +
 +
if ( methods[method] ) {
 +
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
 +
} else if ( typeof method === 'object' || ! method ) {
 +
return methods.init.apply( this, arguments );
 +
} else {
 +
$.error( 'Method ' +  method + ' does not exist on jQuery.lavalamp' );
 +
}
 +
 +
}; // End plugin
 +
 +
// Create outer variables
 +
var lavalampEnter, lavalampLeave, focusIn, focusOut;
 +
 +
})(jQuery);
 +
</script>
  
 
body {
 
body {

Revision as of 19:45, 9 July 2018