jlukic
10 years ago
10 changed files with 3911 additions and 7 deletions
Split View
Diff Options
-
265dist/components/ad.css
-
11dist/components/ad.min.css
-
690dist/components/state.js
-
11dist/components/state.min.js
-
970dist/components/visibility.js
-
11dist/components/visibility.min.js
-
283dist/semantic.css
-
1662dist/semantic.js
-
2dist/semantic.min.css
-
13dist/semantic.min.js
@ -0,0 +1,265 @@ |
|||
/* |
|||
* # Semantic UI |
|||
* https://github.com/Semantic-Org/Semantic-UI |
|||
* http://www.semantic-ui.com/ |
|||
* |
|||
* Copyright 2014 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Advertisement |
|||
*******************************/ |
|||
|
|||
.ui.ad { |
|||
display: block; |
|||
overflow: hidden; |
|||
margin: 1em 0em; |
|||
} |
|||
.ui.ad:first-child { |
|||
margin: 0em; |
|||
} |
|||
.ui.ad:last-child { |
|||
margin: 0em; |
|||
} |
|||
.ui.ad iframe { |
|||
margin: 0em; |
|||
padding: 0em; |
|||
border: none; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/*-------------- |
|||
Common |
|||
---------------*/ |
|||
|
|||
|
|||
/* Leaderboard */ |
|||
.ui.leaderboard.ad { |
|||
width: 728px; |
|||
height: 90px; |
|||
} |
|||
|
|||
/* Medium Rectangle */ |
|||
.ui[class*="medium rectangle"].ad { |
|||
width: 300px; |
|||
height: 250px; |
|||
} |
|||
|
|||
/* Large Rectangle */ |
|||
.ui[class*="large rectangle"].ad { |
|||
width: 336px; |
|||
height: 280px; |
|||
} |
|||
|
|||
/* Half Page */ |
|||
.ui[class*="half page"].ad { |
|||
width: 300px; |
|||
height: 600px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Square |
|||
---------------*/ |
|||
|
|||
|
|||
/* Square */ |
|||
.ui.square.ad { |
|||
width: 250px; |
|||
height: 250px; |
|||
} |
|||
|
|||
/* Small Square */ |
|||
.ui[class*="small square"].ad { |
|||
width: 200px; |
|||
height: 200px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Rectangle |
|||
---------------*/ |
|||
|
|||
|
|||
/* Small Rectangle */ |
|||
.ui[class*="small rectangle"].ad { |
|||
width: 180px; |
|||
height: 150px; |
|||
} |
|||
|
|||
/* Vertical Rectangle */ |
|||
.ui[class*="vertical rectangle"].ad { |
|||
width: 240px; |
|||
height: 400px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Button |
|||
---------------*/ |
|||
|
|||
.ui.button.ad { |
|||
width: 120px; |
|||
height: 90px; |
|||
} |
|||
.ui[class*="square button"].ad { |
|||
width: 125px; |
|||
height: 125px; |
|||
} |
|||
.ui[class*="small button"].ad { |
|||
width: 120px; |
|||
height: 60px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Skyscrapers |
|||
---------------*/ |
|||
|
|||
|
|||
/* Skyscraper */ |
|||
.ui.skyscraper.ad { |
|||
width: 120px; |
|||
height: 600px; |
|||
} |
|||
|
|||
/* Wide Skyscraper */ |
|||
.ui[class*="wide skyscraper"].ad { |
|||
width: 160px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Banners |
|||
---------------*/ |
|||
|
|||
|
|||
/* Banner */ |
|||
.ui.banner.ad { |
|||
width: 468px; |
|||
height: 60px; |
|||
} |
|||
|
|||
/* Vertical Banner */ |
|||
.ui[class*="vertical banner"].ad { |
|||
width: 120px; |
|||
height: 240px; |
|||
} |
|||
|
|||
/* Top Banner */ |
|||
.ui[class*="top banner"].ad { |
|||
width: 930px; |
|||
height: 180px; |
|||
} |
|||
|
|||
/* Half Banner */ |
|||
.ui[class*="half banner"].ad { |
|||
width: 234px; |
|||
height: 60px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Boards |
|||
---------------*/ |
|||
|
|||
|
|||
/* Leaderboard */ |
|||
.ui[class*="large leaderboard"].ad { |
|||
width: 970px; |
|||
height: 90px; |
|||
} |
|||
|
|||
/* Billboard */ |
|||
.ui.billboard.ad { |
|||
width: 970px; |
|||
height: 250px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Panorama |
|||
---------------*/ |
|||
|
|||
|
|||
/* Panorama */ |
|||
.ui.panorama.ad { |
|||
width: 980px; |
|||
height: 120px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Netboard |
|||
---------------*/ |
|||
|
|||
|
|||
/* Netboard */ |
|||
.ui.netboard.ad { |
|||
width: 580px; |
|||
height: 400px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Mobile |
|||
---------------*/ |
|||
|
|||
|
|||
/* Large Mobile Banner */ |
|||
.ui[class*="large mobile banner"].ad { |
|||
width: 320px; |
|||
height: 100px; |
|||
} |
|||
|
|||
/* Mobile Leaderboard */ |
|||
.ui[class*="mobile leaderboard"].ad { |
|||
width: 320px; |
|||
height: 50px; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
|
|||
/* Mobile Sizes */ |
|||
.ui.mobile.ad { |
|||
display: none; |
|||
} |
|||
@media only screen and (max-width: 767px) { |
|||
.ui.mobile.ad { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.centered.ad { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
.ui.test.ad { |
|||
position: relative; |
|||
background: #333333; |
|||
} |
|||
.ui.test.ad:after { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
width: 100%; |
|||
text-align: center; |
|||
-webkit-transform: translateX(-50%) translateY(-50%); |
|||
-ms-transform: translateX(-50%) translateY(-50%); |
|||
transform: translateX(-50%) translateY(-50%); |
|||
content: 'Ad'; |
|||
color: #ffffff; |
|||
font-size: 1em; |
|||
font-weight: bold; |
|||
} |
|||
.ui.mobile.test.ad:after { |
|||
font-size: 0.85714em; |
|||
} |
|||
.ui.test.ad[data-text]:after { |
|||
content: attr(data-text); |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
/* |
|||
* # Semantic UI |
|||
* https://github.com/Semantic-Org/Semantic-UI |
|||
* http://www.semantic-ui.com/ |
|||
* |
|||
* Copyright 2014 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
.ui.ad{display:block;overflow:hidden;margin:1em 0}.ui.ad:first-child,.ui.ad:last-child{margin:0}.ui.ad iframe{margin:0;padding:0;border:none;overflow:hidden}.ui.leaderboard.ad{width:728px;height:90px}.ui[class*="medium rectangle"].ad{width:300px;height:250px}.ui[class*="large rectangle"].ad{width:336px;height:280px}.ui[class*="half page"].ad{width:300px;height:600px}.ui.square.ad{width:250px;height:250px}.ui[class*="small square"].ad{width:200px;height:200px}.ui[class*="small rectangle"].ad{width:180px;height:150px}.ui[class*="vertical rectangle"].ad{width:240px;height:400px}.ui.button.ad{width:120px;height:90px}.ui[class*="square button"].ad{width:125px;height:125px}.ui[class*="small button"].ad{width:120px;height:60px}.ui.skyscraper.ad{width:120px;height:600px}.ui[class*="wide skyscraper"].ad{width:160px}.ui.banner.ad{width:468px;height:60px}.ui[class*="vertical banner"].ad{width:120px;height:240px}.ui[class*="top banner"].ad{width:930px;height:180px}.ui[class*="half banner"].ad{width:234px;height:60px}.ui[class*="large leaderboard"].ad{width:970px;height:90px}.ui.billboard.ad{width:970px;height:250px}.ui.panorama.ad{width:980px;height:120px}.ui.netboard.ad{width:580px;height:400px}.ui[class*="large mobile banner"].ad{width:320px;height:100px}.ui[class*="mobile leaderboard"].ad{width:320px;height:50px}.ui.mobile.ad{display:none}@media only screen and (max-width:767px){.ui.mobile.ad{display:block}}.ui.centered.ad{margin-left:auto;margin-right:auto}.ui.test.ad{position:relative;background:#333}.ui.test.ad:after{position:absolute;top:50%;left:50%;width:100%;text-align:center;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);content:'Ad';color:#fff;font-size:1em;font-weight:700}.ui.mobile.test.ad:after{font-size:.85714em}.ui.test.ad[data-text]:after{content:attr(data-text)} |
|||
@ -0,0 +1,690 @@ |
|||
/* |
|||
* # Semantic - State |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2014 Contributor |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.state = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
|
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
hasTouch = ('ontouchstart' in document.documentElement), |
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
|
|||
returnedValue |
|||
; |
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
settings = ( $.isPlainObject(parameters) ) |
|||
? $.extend(true, {}, $.fn.state.settings, parameters) |
|||
: $.extend({}, $.fn.state.settings), |
|||
|
|||
error = settings.error, |
|||
metadata = settings.metadata, |
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
states = settings.states, |
|||
text = settings.text, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = namespace + '-module', |
|||
|
|||
$module = $(this), |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
|
|||
module |
|||
; |
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing module'); |
|||
|
|||
// allow module to guess desired state based on element
|
|||
if(settings.automatic) { |
|||
module.add.defaults(); |
|||
} |
|||
|
|||
// bind events with delegated events
|
|||
if(settings.context && moduleSelector !== '') { |
|||
$(settings.context) |
|||
.on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text) |
|||
.on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text) |
|||
.on(moduleSelector, 'click' + eventNamespace, module.toggle.state) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.on('mouseenter' + eventNamespace, module.change.text) |
|||
.on('mouseleave' + eventNamespace, module.reset.text) |
|||
.on('click' + eventNamespace, module.toggle.state) |
|||
; |
|||
} |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module', instance); |
|||
$module |
|||
.off(eventNamespace) |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.verbose('Refreshing selector cache'); |
|||
$module = $(element); |
|||
}, |
|||
|
|||
add: { |
|||
defaults: function() { |
|||
var |
|||
userStates = parameters && $.isPlainObject(parameters.states) |
|||
? parameters.states |
|||
: {} |
|||
; |
|||
$.each(settings.defaults, function(type, typeStates) { |
|||
if( module.is[type] !== undefined && module.is[type]() ) { |
|||
module.verbose('Adding default states', type, element); |
|||
$.extend(settings.states, typeStates, userStates); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
|
|||
active: function() { |
|||
return $module.hasClass(className.active); |
|||
}, |
|||
loading: function() { |
|||
return $module.hasClass(className.loading); |
|||
}, |
|||
inactive: function() { |
|||
return !( $module.hasClass(className.active) ); |
|||
}, |
|||
state: function(state) { |
|||
if(className[state] === undefined) { |
|||
return false; |
|||
} |
|||
return $module.hasClass( className[state] ); |
|||
}, |
|||
|
|||
enabled: function() { |
|||
return !( $module.is(settings.filter.active) ); |
|||
}, |
|||
disabled: function() { |
|||
return ( $module.is(settings.filter.active) ); |
|||
}, |
|||
textEnabled: function() { |
|||
return !( $module.is(settings.filter.text) ); |
|||
}, |
|||
|
|||
// definitions for automatic type detection
|
|||
button: function() { |
|||
return $module.is('.button:not(a, .submit)'); |
|||
}, |
|||
input: function() { |
|||
return $module.is('input'); |
|||
}, |
|||
progress: function() { |
|||
return $module.is('.ui.progress'); |
|||
} |
|||
}, |
|||
|
|||
allow: function(state) { |
|||
module.debug('Now allowing state', state); |
|||
states[state] = true; |
|||
}, |
|||
disallow: function(state) { |
|||
module.debug('No longer allowing', state); |
|||
states[state] = false; |
|||
}, |
|||
|
|||
allows: function(state) { |
|||
return states[state] || false; |
|||
}, |
|||
|
|||
enable: function() { |
|||
$module.removeClass(className.disabled); |
|||
}, |
|||
|
|||
disable: function() { |
|||
$module.addClass(className.disabled); |
|||
}, |
|||
|
|||
setState: function(state) { |
|||
if(module.allows(state)) { |
|||
$module.addClass( className[state] ); |
|||
} |
|||
}, |
|||
|
|||
removeState: function(state) { |
|||
if(module.allows(state)) { |
|||
$module.removeClass( className[state] ); |
|||
} |
|||
}, |
|||
|
|||
toggle: { |
|||
state: function() { |
|||
var |
|||
apiRequest |
|||
; |
|||
if( module.allows('active') && module.is.enabled() ) { |
|||
module.refresh(); |
|||
if($.fn.api !== undefined) { |
|||
apiRequest = $module.api('get request'); |
|||
if(apiRequest) { |
|||
module.listenTo(apiRequest); |
|||
return; |
|||
} |
|||
} |
|||
module.change.state(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
listenTo: function(apiRequest) { |
|||
module.debug('API request detected, waiting for state signal', apiRequest); |
|||
if(apiRequest) { |
|||
if(text.loading) { |
|||
module.update.text(text.loading); |
|||
} |
|||
$.when(apiRequest) |
|||
.then(function() { |
|||
if(apiRequest.state() == 'resolved') { |
|||
module.debug('API request succeeded'); |
|||
settings.activateTest = function(){ return true; }; |
|||
settings.deactivateTest = function(){ return true; }; |
|||
} |
|||
else { |
|||
module.debug('API request failed'); |
|||
settings.activateTest = function(){ return false; }; |
|||
settings.deactivateTest = function(){ return false; }; |
|||
} |
|||
module.change.state(); |
|||
}) |
|||
; |
|||
} |
|||
// xhr exists but set to false, beforeSend killed the xhr
|
|||
else { |
|||
settings.activateTest = function(){ return false; }; |
|||
settings.deactivateTest = function(){ return false; }; |
|||
} |
|||
}, |
|||
|
|||
// checks whether active/inactive state can be given
|
|||
change: { |
|||
|
|||
state: function() { |
|||
module.debug('Determining state change direction'); |
|||
// inactive to active change
|
|||
if( module.is.inactive() ) { |
|||
module.activate(); |
|||
} |
|||
else { |
|||
module.deactivate(); |
|||
} |
|||
if(settings.sync) { |
|||
module.sync(); |
|||
} |
|||
$.proxy(settings.onChange, element)(); |
|||
}, |
|||
|
|||
text: function() { |
|||
if( module.is.textEnabled() ) { |
|||
if(module.is.disabled() ) { |
|||
module.verbose('Changing text to disabled text', text.hover); |
|||
module.update.text(text.disabled); |
|||
} |
|||
else if( module.is.active() ) { |
|||
if(text.hover) { |
|||
module.verbose('Changing text to hover text', text.hover); |
|||
module.update.text(text.hover); |
|||
} |
|||
else if(text.deactivate) { |
|||
module.verbose('Changing text to deactivating text', text.deactivate); |
|||
module.update.text(text.deactivate); |
|||
} |
|||
} |
|||
else { |
|||
if(text.hover) { |
|||
module.verbose('Changing text to hover text', text.hover); |
|||
module.update.text(text.hover); |
|||
} |
|||
else if(text.activate){ |
|||
module.verbose('Changing text to activating text', text.activate); |
|||
module.update.text(text.activate); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
activate: function() { |
|||
if( $.proxy(settings.activateTest, element)() ) { |
|||
module.debug('Setting state to active'); |
|||
$module |
|||
.addClass(className.active) |
|||
; |
|||
module.update.text(text.active); |
|||
$.proxy(settings.onActivate, element)(); |
|||
} |
|||
}, |
|||
|
|||
deactivate: function() { |
|||
if($.proxy(settings.deactivateTest, element)() ) { |
|||
module.debug('Setting state to inactive'); |
|||
$module |
|||
.removeClass(className.active) |
|||
; |
|||
module.update.text(text.inactive); |
|||
$.proxy(settings.onDeactivate, element)(); |
|||
} |
|||
}, |
|||
|
|||
sync: function() { |
|||
module.verbose('Syncing other buttons to current state'); |
|||
if( module.is.active() ) { |
|||
$allModules |
|||
.not($module) |
|||
.state('activate'); |
|||
} |
|||
else { |
|||
$allModules |
|||
.not($module) |
|||
.state('deactivate') |
|||
; |
|||
} |
|||
}, |
|||
|
|||
get: { |
|||
text: function() { |
|||
return (settings.selector.text) |
|||
? $module.find(settings.selector.text).text() |
|||
: $module.html() |
|||
; |
|||
}, |
|||
textFor: function(state) { |
|||
return text[state] || false; |
|||
} |
|||
}, |
|||
|
|||
flash: { |
|||
text: function(text, duration, callback) { |
|||
var |
|||
previousText = module.get.text() |
|||
; |
|||
module.debug('Flashing text message', text, duration); |
|||
text = text || settings.text.flash; |
|||
duration = duration || settings.flashDuration; |
|||
callback = callback || function() {}; |
|||
module.update.text(text); |
|||
setTimeout(function(){ |
|||
module.update.text(previousText); |
|||
$.proxy(callback, element)(); |
|||
}, duration); |
|||
} |
|||
}, |
|||
|
|||
reset: { |
|||
// on mouseout sets text to previous value
|
|||
text: function() { |
|||
var |
|||
activeText = text.active || $module.data(metadata.storedText), |
|||
inactiveText = text.inactive || $module.data(metadata.storedText) |
|||
; |
|||
if( module.is.textEnabled() ) { |
|||
if( module.is.active() && activeText) { |
|||
module.verbose('Resetting active text', activeText); |
|||
module.update.text(activeText); |
|||
} |
|||
else if(inactiveText) { |
|||
module.verbose('Resetting inactive text', activeText); |
|||
module.update.text(inactiveText); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
update: { |
|||
text: function(text) { |
|||
var |
|||
currentText = module.get.text() |
|||
; |
|||
if(text && text !== currentText) { |
|||
module.debug('Updating text', text); |
|||
if(settings.selector.text) { |
|||
$module |
|||
.data(metadata.storedText, text) |
|||
.find(settings.selector.text) |
|||
.text(text) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.data(metadata.storedText, text) |
|||
.html(text) |
|||
; |
|||
} |
|||
} |
|||
else { |
|||
module.debug('Text is already sane, ignoring update', text); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
module.debug('Changing setting', name, value); |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
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.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
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.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
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({ |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Element' : element, |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.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 |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
module.error(error.method, query); |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.state.settings = { |
|||
|
|||
// module info
|
|||
name : 'State', |
|||
|
|||
// debug output
|
|||
debug : false, |
|||
|
|||
// verbose debug output
|
|||
verbose : true, |
|||
|
|||
// namespace for events
|
|||
namespace : 'state', |
|||
|
|||
// debug data includes performance
|
|||
performance: true, |
|||
|
|||
// callback occurs on state change
|
|||
onActivate : function() {}, |
|||
onDeactivate : function() {}, |
|||
onChange : function() {}, |
|||
|
|||
// state test functions
|
|||
activateTest : function() { return true; }, |
|||
deactivateTest : function() { return true; }, |
|||
|
|||
// whether to automatically map default states
|
|||
automatic : true, |
|||
|
|||
// activate / deactivate changes all elements instantiated at same time
|
|||
sync : false, |
|||
|
|||
// default flash text duration, used for temporarily changing text of an element
|
|||
flashDuration : 1000, |
|||
|
|||
// selector filter
|
|||
filter : { |
|||
text : '.loading, .disabled', |
|||
active : '.disabled' |
|||
}, |
|||
|
|||
context : false, |
|||
|
|||
// error
|
|||
error: { |
|||
method : 'The method you called is not defined.' |
|||
}, |
|||
|
|||
// metadata
|
|||
metadata: { |
|||
promise : 'promise', |
|||
storedText : 'stored-text' |
|||
}, |
|||
|
|||
// change class on state
|
|||
className: { |
|||
active : 'active', |
|||
disabled : 'disabled', |
|||
error : 'error', |
|||
loading : 'loading', |
|||
success : 'success', |
|||
warning : 'warning' |
|||
}, |
|||
|
|||
selector: { |
|||
// selector for text node
|
|||
text: false |
|||
}, |
|||
|
|||
defaults : { |
|||
input: { |
|||
disabled : true, |
|||
loading : true, |
|||
active : true |
|||
}, |
|||
button: { |
|||
disabled : true, |
|||
loading : true, |
|||
active : true, |
|||
}, |
|||
progress: { |
|||
active : true, |
|||
success : true, |
|||
warning : true, |
|||
error : true |
|||
} |
|||
}, |
|||
|
|||
states : { |
|||
active : true, |
|||
disabled : true, |
|||
error : true, |
|||
loading : true, |
|||
success : true, |
|||
warning : true |
|||
}, |
|||
|
|||
text : { |
|||
disabled : false, |
|||
flash : false, |
|||
hover : false, |
|||
active : false, |
|||
inactive : false, |
|||
activate : false, |
|||
deactivate : false |
|||
} |
|||
|
|||
}; |
|||
|
|||
|
|||
|
|||
})( jQuery, window , document ); |
|||
11
dist/components/state.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,970 @@ |
|||
/* |
|||
* # Semantic - Visibility |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2014 Contributor |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.visibility = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
returnedValue |
|||
; |
|||
|
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.visibility.settings, parameters), |
|||
|
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
$window = $(window), |
|||
$module = $(this), |
|||
$context = $(settings.context), |
|||
$container = $module.offsetParent(), |
|||
|
|||
selector = $module.selector || '', |
|||
instance = $module.data(moduleNamespace), |
|||
|
|||
requestAnimationFrame = window.requestAnimationFrame |
|||
|| window.mozRequestAnimationFrame |
|||
|| window.webkitRequestAnimationFrame |
|||
|| window.msRequestAnimationFrame |
|||
|| function(callback) { setTimeout(callback, 0); }, |
|||
|
|||
element = this, |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing visibility', settings); |
|||
|
|||
module.setup.cache(); |
|||
module.save.position(); |
|||
|
|||
if( module.should.trackChanges() ) { |
|||
module.bindEvents(); |
|||
if(settings.type == 'image') { |
|||
module.setup.image(); |
|||
} |
|||
if(settings.type == 'fixed') { |
|||
module.setup.fixed(); |
|||
} |
|||
} |
|||
module.checkVisibility(); |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module'); |
|||
$module |
|||
.off(eventNamespace) |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
|
|||
bindEvents: function() { |
|||
module.verbose('Binding visibility events to scroll and resize'); |
|||
$window |
|||
.on('resize' + eventNamespace, module.event.refresh) |
|||
; |
|||
$context |
|||
.on('scroll' + eventNamespace, module.event.scroll) |
|||
; |
|||
}, |
|||
|
|||
event: { |
|||
refresh: function() { |
|||
requestAnimationFrame(module.refresh); |
|||
}, |
|||
scroll: function() { |
|||
module.verbose('Scroll position changed'); |
|||
if(settings.throttle) { |
|||
clearTimeout(module.timer); |
|||
module.timer = setTimeout(module.checkVisibility, settings.throttle); |
|||
} |
|||
else { |
|||
requestAnimationFrame(module.checkVisibility); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
precache: function(images, callback) { |
|||
if (!(images instanceof Array)) { |
|||
images = [images]; |
|||
} |
|||
var |
|||
imagesLength = images.length, |
|||
loadedCounter = 0, |
|||
cache = [], |
|||
cacheImage = document.createElement('img'), |
|||
handleLoad = function() { |
|||
loadedCounter++; |
|||
if (loadedCounter >= images.length) { |
|||
if ($.isFunction(callback)) { |
|||
callback(); |
|||
} |
|||
} |
|||
} |
|||
; |
|||
while (imagesLength--) { |
|||
cacheImage = document.createElement('img'); |
|||
cacheImage.onload = handleLoad; |
|||
cacheImage.onerror = handleLoad; |
|||
cacheImage.src = images[imagesLength]; |
|||
cache.push(cacheImage); |
|||
} |
|||
}, |
|||
|
|||
should: { |
|||
|
|||
trackChanges: function() { |
|||
if(methodInvoked && queryArguments.length > 0) { |
|||
module.debug('One time query, no need to bind events'); |
|||
return false; |
|||
} |
|||
module.debug('Query is attaching callbacks, watching for changes with scroll'); |
|||
return true; |
|||
} |
|||
|
|||
}, |
|||
|
|||
setup: { |
|||
cache: function() { |
|||
module.cache = { |
|||
occurred : {}, |
|||
screen : {}, |
|||
element : {}, |
|||
}; |
|||
}, |
|||
image: function() { |
|||
var |
|||
src = $module.data('src') |
|||
; |
|||
if(src) { |
|||
module.verbose('Lazy loading image', src); |
|||
// show when top visible
|
|||
module.topVisible(function() { |
|||
module.precache(src, function() { |
|||
module.set.image(src); |
|||
settings.onTopVisible = false; |
|||
}); |
|||
}); |
|||
} |
|||
}, |
|||
fixed: function() { |
|||
module.verbose('Setting up fixed on element pass'); |
|||
$module |
|||
.visibility({ |
|||
once: false, |
|||
continuous: false, |
|||
onTopPassed: function() { |
|||
$module |
|||
.addClass(className.fixed) |
|||
.css({ |
|||
position: 'fixed', |
|||
top: settings.offset + 'px' |
|||
}) |
|||
; |
|||
if(settings.animation && $.fn.transition !== undefined) { |
|||
$module.transition(settings.transition, settings.duration); |
|||
} |
|||
}, |
|||
onTopPassedReverse: function() { |
|||
$module |
|||
.removeClass(className.fixed) |
|||
.css({ |
|||
position: '', |
|||
top: '' |
|||
}) |
|||
; |
|||
} |
|||
}) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
image: function(src) { |
|||
var |
|||
offScreen = (module.cache.screen.bottom < module.cache.element.top) |
|||
; |
|||
$module |
|||
.attr('src', src) |
|||
; |
|||
if(offScreen) { |
|||
module.verbose('Image outside browser, no show animation'); |
|||
$module.show(); |
|||
} |
|||
else { |
|||
if(settings.transition && $.fn.transition !== undefined) { |
|||
$module.transition(settings.transition, settings.duration); |
|||
} |
|||
else { |
|||
$module.fadeIn(settings.duration); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.debug('Refreshing constants (element width/height)'); |
|||
module.reset(); |
|||
module.save.position(); |
|||
module.checkVisibility(); |
|||
$.proxy(settings.onRefresh, element)(); |
|||
}, |
|||
|
|||
reset: function() { |
|||
module.verbose('Reseting all cached values'); |
|||
if( $.isPlainObject(module.cache) ) { |
|||
module.cache.screen = {}; |
|||
module.cache.element = {}; |
|||
} |
|||
}, |
|||
|
|||
checkVisibility: function() { |
|||
module.verbose('Checking visibility of element', module.cache.element); |
|||
module.save.calculations(); |
|||
|
|||
// percentage
|
|||
module.passed(); |
|||
|
|||
// reverse (must be first)
|
|||
module.passingReverse(); |
|||
module.topVisibleReverse(); |
|||
module.bottomVisibleReverse(); |
|||
module.topPassedReverse(); |
|||
module.bottomPassedReverse(); |
|||
|
|||
// one time
|
|||
module.passing(); |
|||
module.topVisible(); |
|||
module.bottomVisible(); |
|||
module.topPassed(); |
|||
module.bottomPassed(); |
|||
}, |
|||
|
|||
passed: function(amount, newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
amountInPixels |
|||
; |
|||
// assign callback
|
|||
if(amount !== undefined && newCallback !== undefined) { |
|||
settings.onPassed[amount] = newCallback; |
|||
} |
|||
else if(amount !== undefined) { |
|||
return (module.get.pixelsPassed(amount) > calculations.pixelsPassed); |
|||
} |
|||
else if(calculations.passing) { |
|||
$.each(settings.onPassed, function(amount, callback) { |
|||
if(calculations.bottomVisible || calculations.pixelsPassed > module.get.pixelsPassed(amount)) { |
|||
module.execute(callback, amount); |
|||
} |
|||
else if(!settings.once) { |
|||
module.remove.occurred(callback); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
passing: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
callback = newCallback || settings.onPassing, |
|||
callbackName = 'passing' |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for passing', newCallback); |
|||
settings.onPassing = newCallback; |
|||
} |
|||
if(calculations.passing) { |
|||
module.execute(callback, callbackName); |
|||
} |
|||
else if(!settings.once) { |
|||
module.remove.occurred(callbackName); |
|||
} |
|||
if(newCallback !== undefined) { |
|||
return calculations.passing; |
|||
} |
|||
}, |
|||
|
|||
|
|||
topVisible: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
callback = newCallback || settings.onTopVisible, |
|||
callbackName = 'topVisible' |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for top visible', newCallback); |
|||
settings.onTopVisible = newCallback; |
|||
} |
|||
if(calculations.topVisible) { |
|||
module.execute(callback, callbackName); |
|||
} |
|||
else if(!settings.once) { |
|||
module.remove.occurred(callbackName); |
|||
} |
|||
if(newCallback === undefined) { |
|||
return calculations.topVisible; |
|||
} |
|||
}, |
|||
|
|||
bottomVisible: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
callback = newCallback || settings.onBottomVisible, |
|||
callbackName = 'bottomVisible' |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for bottom visible', newCallback); |
|||
settings.onBottomVisible = newCallback; |
|||
} |
|||
if(calculations.bottomVisible) { |
|||
module.execute(callback, callbackName); |
|||
} |
|||
else if(!settings.once) { |
|||
module.remove.occurred(callbackName); |
|||
} |
|||
if(newCallback === undefined) { |
|||
return calculations.bottomVisible; |
|||
} |
|||
}, |
|||
|
|||
topPassed: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
callback = newCallback || settings.onTopPassed, |
|||
callbackName = 'topPassed' |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for top passed', newCallback); |
|||
settings.onTopPassed = newCallback; |
|||
} |
|||
if(calculations.topPassed) { |
|||
module.execute(callback, callbackName); |
|||
} |
|||
else if(!settings.once) { |
|||
module.remove.occurred(callbackName); |
|||
} |
|||
if(newCallback === undefined) { |
|||
return calculations.topPassed; |
|||
} |
|||
}, |
|||
|
|||
bottomPassed: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
callback = newCallback || settings.onBottomPassed, |
|||
callbackName = 'bottomPassed' |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for bottom passed', newCallback); |
|||
settings.onBottomPassed = newCallback; |
|||
} |
|||
if(calculations.bottomPassed) { |
|||
module.execute(callback, callbackName); |
|||
} |
|||
else if(!settings.once) { |
|||
module.remove.occurred(callbackName); |
|||
} |
|||
if(newCallback === undefined) { |
|||
return calculations.bottomPassed; |
|||
} |
|||
}, |
|||
|
|||
passingReverse: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
callback = newCallback || settings.onPassingReverse, |
|||
callbackName = 'passingReverse' |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for passing reverse', newCallback); |
|||
settings.onPassingReverse = newCallback; |
|||
} |
|||
if(!calculations.passing) { |
|||
if(module.get.occurred('passing')) { |
|||
module.execute(callback, callbackName); |
|||
} |
|||
} |
|||
else if(!settings.once) { |
|||
module.remove.occurred(callbackName); |
|||
} |
|||
if(newCallback !== undefined) { |
|||
return !calculations.passing; |
|||
} |
|||
}, |
|||
|
|||
|
|||
topVisibleReverse: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
callback = newCallback || settings.onTopVisibleReverse, |
|||
callbackName = 'topVisibleReverse' |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for top visible reverse', newCallback); |
|||
settings.onTopVisibleReverse = newCallback; |
|||
} |
|||
if(!calculations.topVisible) { |
|||
if(module.get.occurred('topVisible')) { |
|||
module.execute(callback, callbackName); |
|||
} |
|||
} |
|||
else if(!settings.once) { |
|||
module.remove.occurred(callbackName); |
|||
} |
|||
if(newCallback === undefined) { |
|||
return !calculations.topVisible; |
|||
} |
|||
}, |
|||
|
|||
bottomVisibleReverse: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
callback = newCallback || settings.onBottomVisibleReverse, |
|||
callbackName = 'bottomVisibleReverse' |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for bottom visible reverse', newCallback); |
|||
settings.onBottomVisibleReverse = newCallback; |
|||
} |
|||
if(!calculations.bottomVisible) { |
|||
if(module.get.occurred('bottomVisible')) { |
|||
module.execute(callback, callbackName); |
|||
} |
|||
} |
|||
else if(!settings.once) { |
|||
module.remove.occurred(callbackName); |
|||
} |
|||
if(newCallback === undefined) { |
|||
return !calculations.bottomVisible; |
|||
} |
|||
}, |
|||
|
|||
topPassedReverse: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
callback = newCallback || settings.onTopPassedReverse, |
|||
callbackName = 'topPassedReverse' |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for top passed reverse', newCallback); |
|||
settings.onTopPassedReverse = newCallback; |
|||
} |
|||
if(!calculations.topPassed) { |
|||
if(module.get.occurred('topPassed')) { |
|||
module.execute(callback, callbackName); |
|||
} |
|||
} |
|||
else if(!settings.once) { |
|||
module.remove.occurred(callbackName); |
|||
} |
|||
if(newCallback === undefined) { |
|||
return !calculations.onTopPassed; |
|||
} |
|||
}, |
|||
|
|||
bottomPassedReverse: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
callback = newCallback || settings.onBottomPassedReverse, |
|||
callbackName = 'bottomPassedReverse' |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for bottom passed reverse', newCallback); |
|||
settings.onBottomPassedReverse = newCallback; |
|||
} |
|||
if(!calculations.bottomPassed) { |
|||
if(module.get.occurred('bottomPassed')) { |
|||
module.execute(callback, callbackName); |
|||
} |
|||
} |
|||
else if(!settings.once) { |
|||
module.remove.occurred(callbackName); |
|||
} |
|||
if(newCallback === undefined) { |
|||
return !calculations.bottomPassed; |
|||
} |
|||
}, |
|||
|
|||
execute: function(callback, callbackName) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
screen = module.get.screenCalculations() |
|||
; |
|||
callback = callback || false; |
|||
if(callback) { |
|||
if(settings.continuous) { |
|||
module.debug('Callback being called continuously', callbackName, calculations); |
|||
$.proxy(callback, element)(calculations, screen); |
|||
} |
|||
else if(!module.get.occurred(callbackName)) { |
|||
module.debug('Conditions met', callbackName, calculations); |
|||
$.proxy(callback, element)(calculations, screen); |
|||
} |
|||
} |
|||
module.save.occurred(callbackName); |
|||
}, |
|||
|
|||
remove: { |
|||
occurred: function(callback) { |
|||
if(callback) { |
|||
if(module.cache.occurred[callback] !== undefined && module.cache.occurred[callback] === true) { |
|||
module.debug('Callback can now be called again', callback); |
|||
module.cache.occurred[callback] = false; |
|||
} |
|||
} |
|||
else { |
|||
module.cache.occurred = {}; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
save: { |
|||
calculations: function() { |
|||
module.verbose('Saving all calculations necessary to determine positioning'); |
|||
module.save.scroll(); |
|||
module.save.direction(); |
|||
module.save.screenCalculations(); |
|||
module.save.elementCalculations(); |
|||
}, |
|||
occurred: function(callback) { |
|||
if(callback) { |
|||
if(module.cache.occurred[callback] === undefined || (module.cache.occurred[callback] !== true)) { |
|||
module.verbose('Saving callback occurred', callback); |
|||
module.cache.occurred[callback] = true; |
|||
} |
|||
} |
|||
}, |
|||
scroll: function() { |
|||
module.cache.scroll = $context.scrollTop() + settings.offset; |
|||
}, |
|||
direction: function() { |
|||
var |
|||
scroll = module.get.scroll(), |
|||
lastScroll = module.get.lastScroll(), |
|||
direction |
|||
; |
|||
if(scroll > lastScroll && lastScroll) { |
|||
direction = 'down'; |
|||
} |
|||
else if(scroll < lastScroll && lastScroll) { |
|||
direction = 'up'; |
|||
} |
|||
else { |
|||
direction = 'static'; |
|||
} |
|||
module.cache.direction = direction; |
|||
return module.cache.direction; |
|||
}, |
|||
elementPosition: function() { |
|||
var |
|||
screen = module.get.screenSize() |
|||
; |
|||
module.verbose('Saving element position'); |
|||
$.extend(module.cache.element, { |
|||
margin : { |
|||
top : parseInt($module.css('margin-top'), 10), |
|||
bottom : parseInt($module.css('margin-bottom'), 10) |
|||
}, |
|||
fits : (element.height < screen.height), |
|||
offset : $module.offset(), |
|||
width : $module.outerWidth(), |
|||
height : $module.outerHeight() |
|||
}); |
|||
return module.cache.element; |
|||
}, |
|||
elementCalculations: function() { |
|||
var |
|||
screen = module.get.screenCalculations(), |
|||
element = module.get.elementPosition() |
|||
; |
|||
// offset
|
|||
if(settings.includeMargin) { |
|||
$.extend(module.cache.element, { |
|||
top : element.offset.top - element.margin.top, |
|||
bottom : element.offset.top + element.height + element.margin.bottom |
|||
}); |
|||
} |
|||
else { |
|||
$.extend(module.cache.element, { |
|||
top : element.offset.top, |
|||
bottom : element.offset.top + element.height |
|||
}); |
|||
} |
|||
// visibility
|
|||
$.extend(module.cache.element, { |
|||
topVisible : (screen.bottom >= element.top), |
|||
topPassed : (screen.top >= element.top), |
|||
bottomVisible : (screen.bottom >= element.bottom), |
|||
bottomPassed : (screen.top >= element.bottom), |
|||
pixelsPassed : 0, |
|||
percentagePassed : 0 |
|||
}); |
|||
// meta calculations
|
|||
$.extend(module.cache.element, { |
|||
visible : (module.cache.element.topVisible || module.cache.element.bottomVisible), |
|||
passing : (module.cache.element.topPassed && !module.cache.element.bottomPassed), |
|||
hidden : (!module.cache.element.topVisible && !module.cache.element.bottomVisible) |
|||
}); |
|||
if(module.cache.element.passing) { |
|||
module.cache.element.pixelsPassed = (screen.top - element.top); |
|||
module.cache.element.percentagePassed = (screen.top - element.top) / element.height; |
|||
} |
|||
module.verbose('Updated element calculations', module.cache.element); |
|||
}, |
|||
screenCalculations: function() { |
|||
var |
|||
scroll = $context.scrollTop() + settings.offset |
|||
; |
|||
if(module.cache.scroll === undefined) { |
|||
module.cache.scroll = $context.scrollTop() + settings.offset; |
|||
} |
|||
module.save.direction(); |
|||
$.extend(module.cache.screen, { |
|||
top : scroll, |
|||
bottom : scroll + module.cache.screen.height |
|||
}); |
|||
return module.cache.screen; |
|||
}, |
|||
screenSize: function() { |
|||
module.verbose('Saving window position'); |
|||
module.cache.screen = { |
|||
height: $context.height() |
|||
}; |
|||
}, |
|||
position: function() { |
|||
module.save.screenSize(); |
|||
module.save.elementPosition(); |
|||
} |
|||
}, |
|||
|
|||
get: { |
|||
pixelsPassed: function(amount) { |
|||
var |
|||
element = module.get.elementCalculations() |
|||
; |
|||
if(amount.search('%') > -1) { |
|||
return ( element.height * (parseInt(amount, 10) / 100) ); |
|||
} |
|||
return parseInt(amount, 10); |
|||
}, |
|||
occurred: function(callback) { |
|||
return (module.cache.occurred !== undefined) |
|||
? module.cache.occurred[callback] || false |
|||
: false |
|||
; |
|||
}, |
|||
direction: function() { |
|||
if(module.cache.direction === undefined) { |
|||
module.save.direction(); |
|||
} |
|||
return module.cache.direction; |
|||
}, |
|||
elementPosition: function() { |
|||
if(module.cache.element === undefined) { |
|||
module.save.elementPosition(); |
|||
} |
|||
return module.cache.element; |
|||
}, |
|||
elementCalculations: function() { |
|||
if(module.cache.element === undefined) { |
|||
module.save.elementCalculations(); |
|||
} |
|||
return module.cache.element; |
|||
}, |
|||
screenCalculations: function() { |
|||
if(module.cache.screen === undefined) { |
|||
module.save.screenCalculations(); |
|||
} |
|||
return module.cache.screen; |
|||
}, |
|||
screenSize: function() { |
|||
if(module.cache.screen === undefined) { |
|||
module.save.screenSize(); |
|||
} |
|||
return module.cache.screen; |
|||
}, |
|||
scroll: function() { |
|||
if(module.cache.scroll === undefined) { |
|||
module.save.scroll(); |
|||
} |
|||
return module.cache.scroll; |
|||
}, |
|||
lastScroll: function() { |
|||
if(module.cache.screen === undefined) { |
|||
module.debug('First scroll event, no last scroll could be found'); |
|||
return false; |
|||
} |
|||
return module.cache.screen.top; |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
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.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
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.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
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({ |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Element' : element, |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.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 |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
module.error(error.method, query); |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.visibility.settings = { |
|||
|
|||
name : 'Visibility', |
|||
namespace : 'visibility', |
|||
|
|||
className: { |
|||
fixed: 'fixed' |
|||
}, |
|||
|
|||
debug : false, |
|||
verbose : false, |
|||
performance : true, |
|||
|
|||
offset : 0, |
|||
includeMargin : false, |
|||
|
|||
context : window, |
|||
|
|||
// visibility check delay in ms (defaults to animationFrame)
|
|||
throttle : false, |
|||
|
|||
// special visibility type (image, fixed)
|
|||
type : false, |
|||
|
|||
// image only animation settings
|
|||
transition : false, |
|||
duration : 500, |
|||
|
|||
// array of callbacks for percentage
|
|||
onPassed : {}, |
|||
|
|||
// standard callbacks
|
|||
onPassing : false, |
|||
onTopVisible : false, |
|||
onBottomVisible : false, |
|||
onTopPassed : false, |
|||
onBottomPassed : false, |
|||
|
|||
// reverse callbacks
|
|||
onPassingReverse : false, |
|||
onTopVisibleReverse : false, |
|||
onBottomVisibleReverse : false, |
|||
onTopPassedReverse : false, |
|||
onBottomPassedReverse : false, |
|||
|
|||
once : true, |
|||
continuous : false, |
|||
|
|||
// utility callbacks
|
|||
onRefresh : function(){}, |
|||
onScroll : function(){}, |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined.' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
11
dist/components/visibility.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1662
dist/semantic.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/semantic.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
13
dist/semantic.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save