Update Semantic
Fixes #40,#24
This commit is contained in:
Tim Schumacher
parent
1715f27f44
commit
2027b94179
621 changed files with 172488 additions and 15939 deletions
578
web/semantic/src/definitions/modules/accordion.js
Normal file
578
web/semantic/src/definitions/modules/accordion.js
Normal file
|
|
@ -0,0 +1,578 @@
|
|||
/*!
|
||||
* # Semantic UI - Accordion
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
$.fn.accordion = function(parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
|
||||
time = new Date().getTime(),
|
||||
performance = [],
|
||||
|
||||
query = arguments[0],
|
||||
methodInvoked = (typeof query == 'string'),
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
|
||||
requestAnimationFrame = window.requestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| function(callback) { setTimeout(callback, 0); },
|
||||
|
||||
returnedValue
|
||||
;
|
||||
$allModules
|
||||
.each(function() {
|
||||
var
|
||||
settings = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.fn.accordion.settings, parameters)
|
||||
: $.extend({}, $.fn.accordion.settings),
|
||||
|
||||
className = settings.className,
|
||||
namespace = settings.namespace,
|
||||
selector = settings.selector,
|
||||
error = settings.error,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = 'module-' + namespace,
|
||||
moduleSelector = $allModules.selector || '',
|
||||
|
||||
$module = $(this),
|
||||
$title = $module.find(selector.title),
|
||||
$content = $module.find(selector.content),
|
||||
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
observer,
|
||||
module
|
||||
;
|
||||
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.debug('Initializing', $module);
|
||||
module.bind.events();
|
||||
module.observeChanges();
|
||||
module.instantiate();
|
||||
},
|
||||
|
||||
instantiate: function() {
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, module)
|
||||
;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.debug('Destroying previous instance', $module);
|
||||
$module
|
||||
.off(eventNamespace)
|
||||
.removeData(moduleNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
$title = $module.find(selector.title);
|
||||
$content = $module.find(selector.content);
|
||||
},
|
||||
|
||||
observeChanges: function() {
|
||||
if('MutationObserver' in window) {
|
||||
observer = new MutationObserver(function(mutations) {
|
||||
module.debug('DOM tree modified, updating selector cache');
|
||||
module.refresh();
|
||||
});
|
||||
observer.observe(element, {
|
||||
childList : true,
|
||||
subtree : true
|
||||
});
|
||||
module.debug('Setting up mutation observer', observer);
|
||||
}
|
||||
},
|
||||
|
||||
bind: {
|
||||
events: function() {
|
||||
module.debug('Binding delegated events');
|
||||
$module
|
||||
.on('click' + eventNamespace, selector.trigger, module.event.click)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
event: {
|
||||
click: function() {
|
||||
module.toggle.call(this);
|
||||
}
|
||||
},
|
||||
|
||||
toggle: function(query) {
|
||||
var
|
||||
$activeTitle = (query !== undefined)
|
||||
? (typeof query === 'number')
|
||||
? $title.eq(query)
|
||||
: $(query).closest(selector.title)
|
||||
: $(this).closest(selector.title),
|
||||
$activeContent = $activeTitle.next($content),
|
||||
isAnimating = $activeContent.hasClass(className.animating),
|
||||
isActive = $activeContent.hasClass(className.active),
|
||||
isOpen = (isActive && !isAnimating),
|
||||
isOpening = (!isActive && isAnimating)
|
||||
;
|
||||
module.debug('Toggling visibility of content', $activeTitle);
|
||||
if(isOpen || isOpening) {
|
||||
if(settings.collapsible) {
|
||||
module.close.call($activeTitle);
|
||||
}
|
||||
else {
|
||||
module.debug('Cannot close accordion content collapsing is disabled');
|
||||
}
|
||||
}
|
||||
else {
|
||||
module.open.call($activeTitle);
|
||||
}
|
||||
},
|
||||
|
||||
open: function(query) {
|
||||
var
|
||||
$activeTitle = (query !== undefined)
|
||||
? (typeof query === 'number')
|
||||
? $title.eq(query)
|
||||
: $(query).closest(selector.title)
|
||||
: $(this).closest(selector.title),
|
||||
$activeContent = $activeTitle.next($content),
|
||||
isAnimating = $activeContent.hasClass(className.animating),
|
||||
isActive = $activeContent.hasClass(className.active),
|
||||
isUnopen = (!isActive && !isAnimating)
|
||||
;
|
||||
if(isUnopen) {
|
||||
module.debug('Opening accordion content', $activeTitle);
|
||||
if(settings.exclusive) {
|
||||
module.closeOthers.call($activeTitle);
|
||||
}
|
||||
$activeTitle
|
||||
.addClass(className.active)
|
||||
;
|
||||
$activeContent.addClass(className.animating);
|
||||
if(settings.animateChildren) {
|
||||
if($.fn.transition !== undefined && $module.transition('is supported')) {
|
||||
$activeContent
|
||||
.children()
|
||||
.transition({
|
||||
animation : 'fade in',
|
||||
queue : false,
|
||||
useFailSafe : true,
|
||||
debug : settings.debug,
|
||||
verbose : settings.verbose,
|
||||
duration : settings.duration
|
||||
})
|
||||
;
|
||||
}
|
||||
else {
|
||||
$activeContent
|
||||
.children()
|
||||
.stop(true)
|
||||
.animate({
|
||||
opacity: 1
|
||||
}, settings.duration, module.resetOpacity)
|
||||
;
|
||||
}
|
||||
}
|
||||
$activeContent
|
||||
.stop(true)
|
||||
.slideDown(settings.duration, settings.easing, function() {
|
||||
$activeContent
|
||||
.removeClass(className.animating)
|
||||
.addClass(className.active)
|
||||
;
|
||||
module.reset.display.call(this);
|
||||
settings.onOpen.call(this);
|
||||
settings.onChange.call(this);
|
||||
})
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
close: function(query) {
|
||||
var
|
||||
$activeTitle = (query !== undefined)
|
||||
? (typeof query === 'number')
|
||||
? $title.eq(query)
|
||||
: $(query).closest(selector.title)
|
||||
: $(this).closest(selector.title),
|
||||
$activeContent = $activeTitle.next($content),
|
||||
isAnimating = $activeContent.hasClass(className.animating),
|
||||
isActive = $activeContent.hasClass(className.active),
|
||||
isOpening = (!isActive && isAnimating),
|
||||
isClosing = (isActive && isAnimating)
|
||||
;
|
||||
if((isActive || isOpening) && !isClosing) {
|
||||
module.debug('Closing accordion content', $activeContent);
|
||||
$activeTitle
|
||||
.removeClass(className.active)
|
||||
;
|
||||
$activeContent
|
||||
.addClass(className.animating)
|
||||
;
|
||||
if(settings.animateChildren) {
|
||||
if($.fn.transition !== undefined && $module.transition('is supported')) {
|
||||
$activeContent
|
||||
.children()
|
||||
.transition({
|
||||
animation : 'fade out',
|
||||
queue : false,
|
||||
useFailSafe : true,
|
||||
debug : settings.debug,
|
||||
verbose : settings.verbose,
|
||||
duration : settings.duration
|
||||
})
|
||||
;
|
||||
}
|
||||
else {
|
||||
$activeContent
|
||||
.children()
|
||||
.stop(true)
|
||||
.animate({
|
||||
opacity: 0
|
||||
}, settings.duration, module.resetOpacity)
|
||||
;
|
||||
}
|
||||
}
|
||||
$activeContent
|
||||
.stop(true)
|
||||
.slideUp(settings.duration, settings.easing, function() {
|
||||
$activeContent
|
||||
.removeClass(className.animating)
|
||||
.removeClass(className.active)
|
||||
;
|
||||
module.reset.display.call(this);
|
||||
settings.onClose.call(this);
|
||||
settings.onChange.call(this);
|
||||
})
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
closeOthers: function(index) {
|
||||
var
|
||||
$activeTitle = (index !== undefined)
|
||||
? $title.eq(index)
|
||||
: $(this).closest(selector.title),
|
||||
$parentTitles = $activeTitle.parents(selector.content).prev(selector.title),
|
||||
$activeAccordion = $activeTitle.closest(selector.accordion),
|
||||
activeSelector = selector.title + '.' + className.active + ':visible',
|
||||
activeContent = selector.content + '.' + className.active + ':visible',
|
||||
$openTitles,
|
||||
$nestedTitles,
|
||||
$openContents
|
||||
;
|
||||
if(settings.closeNested) {
|
||||
$openTitles = $activeAccordion.find(activeSelector).not($parentTitles);
|
||||
$openContents = $openTitles.next($content);
|
||||
}
|
||||
else {
|
||||
$openTitles = $activeAccordion.find(activeSelector).not($parentTitles);
|
||||
$nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles);
|
||||
$openTitles = $openTitles.not($nestedTitles);
|
||||
$openContents = $openTitles.next($content);
|
||||
}
|
||||
if( ($openTitles.length > 0) ) {
|
||||
module.debug('Exclusive enabled, closing other content', $openTitles);
|
||||
$openTitles
|
||||
.removeClass(className.active)
|
||||
;
|
||||
if(settings.animateChildren) {
|
||||
if($.fn.transition !== undefined && $module.transition('is supported')) {
|
||||
$openContents
|
||||
.children()
|
||||
.transition({
|
||||
animation : 'fade out',
|
||||
useFailSafe : true,
|
||||
debug : settings.debug,
|
||||
verbose : settings.verbose,
|
||||
duration : settings.duration
|
||||
})
|
||||
;
|
||||
}
|
||||
else {
|
||||
$openContents
|
||||
.children()
|
||||
.stop()
|
||||
.animate({
|
||||
opacity: 0
|
||||
}, settings.duration, module.resetOpacity)
|
||||
;
|
||||
}
|
||||
}
|
||||
$openContents
|
||||
.stop()
|
||||
.slideUp(settings.duration , settings.easing, function() {
|
||||
$(this).removeClass(className.active);
|
||||
module.reset.display.call(this);
|
||||
})
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
reset: {
|
||||
|
||||
display: function() {
|
||||
module.verbose('Removing inline display from element', this);
|
||||
$(this).css('display', '');
|
||||
if( $(this).attr('style') === '') {
|
||||
$(this)
|
||||
.attr('style', '')
|
||||
.removeAttr('style')
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
opacity: function() {
|
||||
module.verbose('Removing inline opacity from element', this);
|
||||
$(this).css('opacity', '');
|
||||
if( $(this).attr('style') === '') {
|
||||
$(this)
|
||||
.attr('style', '')
|
||||
.removeAttr('style')
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
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) {
|
||||
module.debug('Changing internal', 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.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) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.accordion.settings = {
|
||||
|
||||
name : 'Accordion',
|
||||
namespace : 'accordion',
|
||||
|
||||
debug : false,
|
||||
verbose : true,
|
||||
performance : true,
|
||||
|
||||
exclusive : true,
|
||||
collapsible : true,
|
||||
closeNested : false,
|
||||
animateChildren : true,
|
||||
|
||||
duration : 350,
|
||||
easing : 'easeOutQuad',
|
||||
|
||||
onOpen : function(){},
|
||||
onClose : function(){},
|
||||
onChange : function(){},
|
||||
|
||||
error: {
|
||||
method : 'The method you called is not defined'
|
||||
},
|
||||
|
||||
className : {
|
||||
active : 'active',
|
||||
animating : 'animating'
|
||||
},
|
||||
|
||||
selector : {
|
||||
accordion : '.accordion',
|
||||
title : '.title',
|
||||
trigger : '.title',
|
||||
content : '.content'
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Adds easing
|
||||
$.extend( $.easing, {
|
||||
easeOutQuad: function (x, t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
}
|
||||
});
|
||||
|
||||
})( jQuery, window , document );
|
||||
|
||||
220
web/semantic/src/definitions/modules/accordion.less
Normal file
220
web/semantic/src/definitions/modules/accordion.less
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
/*!
|
||||
* # Semantic UI - Accordion
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'accordion';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Accordion
|
||||
*******************************/
|
||||
|
||||
.ui.accordion,
|
||||
.ui.accordion .accordion {
|
||||
max-width: 100%;
|
||||
font-size: @fontSize;
|
||||
}
|
||||
.ui.accordion .accordion {
|
||||
margin: @childAccordionMargin;
|
||||
padding: @childAccordionPadding;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.ui.accordion .title,
|
||||
.ui.accordion .accordion .title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Default Styling */
|
||||
.ui.accordion .title:not(.ui) {
|
||||
padding: @titlePadding;
|
||||
font-family: @titleFont;
|
||||
font-size: @titleFontSize;
|
||||
color: @titleColor;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.ui.accordion .title ~ .content,
|
||||
.ui.accordion .accordion .title ~ .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Default Styling */
|
||||
.ui.accordion:not(.styled) .title ~ .content:not(.ui),
|
||||
.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
|
||||
margin: @contentMargin;
|
||||
padding: @contentPadding;
|
||||
}
|
||||
.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
|
||||
padding-bottom: 0em;
|
||||
}
|
||||
|
||||
/* Arrow */
|
||||
.ui.accordion .title .dropdown.icon,
|
||||
.ui.accordion .accordion .title .dropdown.icon {
|
||||
display: @iconDisplay;
|
||||
float: @iconFloat;
|
||||
opacity: @iconOpacity;
|
||||
width: @iconWidth;
|
||||
height: @iconHeight;
|
||||
margin: @iconMargin;
|
||||
padding: @iconPadding;
|
||||
font-size: @iconFontSize;
|
||||
transition: @iconTransition;
|
||||
vertical-align: @iconVerticalAlign;
|
||||
transform: @iconTransform;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Coupling
|
||||
---------------*/
|
||||
|
||||
/* Menu */
|
||||
.ui.accordion.menu .item .title {
|
||||
display: block;
|
||||
padding: @menuTitlePadding;
|
||||
}
|
||||
.ui.accordion.menu .item .title > .dropdown.icon {
|
||||
float: @menuIconFloat;
|
||||
margin: @menuIconMargin;
|
||||
transform: @menuIconTransform;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.ui.accordion .ui.header .dropdown.icon {
|
||||
font-size: @iconFontSize;
|
||||
margin: @iconMargin;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.accordion .active.title .dropdown.icon,
|
||||
.ui.accordion .accordion .active.title .dropdown.icon {
|
||||
transform: @activeIconTransform;
|
||||
}
|
||||
|
||||
.ui.accordion.menu .item .active.title > .dropdown.icon {
|
||||
transform: @activeIconTransform;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Styled
|
||||
---------------*/
|
||||
|
||||
.ui.styled.accordion {
|
||||
width: @styledWidth;
|
||||
}
|
||||
|
||||
.ui.styled.accordion,
|
||||
.ui.styled.accordion .accordion {
|
||||
border-radius: @styledBorderRadius;
|
||||
background: @styledBackground;
|
||||
box-shadow: @styledBoxShadow;
|
||||
}
|
||||
.ui.styled.accordion .title,
|
||||
.ui.styled.accordion .accordion .title {
|
||||
margin: @styledTitleMargin;
|
||||
padding: @styledTitlePadding;
|
||||
color: @styledTitleColor;
|
||||
font-weight: @styledTitleFontWeight;
|
||||
border-top: @styledTitleBorder;
|
||||
transition: @styledTitleTransition;
|
||||
}
|
||||
.ui.styled.accordion > .title:first-child,
|
||||
.ui.styled.accordion .accordion .title:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
||||
/* Content */
|
||||
.ui.styled.accordion .content,
|
||||
.ui.styled.accordion .accordion .content {
|
||||
margin: @styledContentMargin;
|
||||
padding: @styledContentPadding;
|
||||
}
|
||||
.ui.styled.accordion .accordion .content {
|
||||
padding: @styledChildContentMargin;
|
||||
padding: @styledChildContentPadding;
|
||||
}
|
||||
|
||||
|
||||
/* Hover */
|
||||
.ui.styled.accordion .title:hover,
|
||||
.ui.styled.accordion .active.title,
|
||||
.ui.styled.accordion .accordion .title:hover,
|
||||
.ui.styled.accordion .accordion .active.title {
|
||||
background: @styledTitleHoverBackground;
|
||||
color: @styledTitleHoverColor;
|
||||
}
|
||||
.ui.styled.accordion .accordion .title:hover,
|
||||
.ui.styled.accordion .accordion .active.title {
|
||||
background: @styledHoverChildTitleBackground;
|
||||
color: @styledHoverChildTitleColor;
|
||||
}
|
||||
|
||||
|
||||
/* Active */
|
||||
.ui.styled.accordion .active.title {
|
||||
background: @styledActiveTitleBackground;
|
||||
color: @styledActiveTitleColor;
|
||||
}
|
||||
.ui.styled.accordion .accordion .active.title {
|
||||
background: @styledActiveChildTitleBackground;
|
||||
color: @styledActiveChildTitleColor;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Active
|
||||
---------------*/
|
||||
|
||||
.ui.accordion .active.content,
|
||||
.ui.accordion .accordion .active.content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Fluid
|
||||
---------------*/
|
||||
|
||||
.ui.fluid.accordion,
|
||||
.ui.fluid.accordion .accordion {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.accordion .title:not(.ui) {
|
||||
color: @invertedTitleColor;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
509
web/semantic/src/definitions/modules/checkbox.js
Normal file
509
web/semantic/src/definitions/modules/checkbox.js
Normal file
|
|
@ -0,0 +1,509 @@
|
|||
/*!
|
||||
* # Semantic UI - Checkbox
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ( $, window, document, undefined ) {
|
||||
|
||||
"use strict";
|
||||
|
||||
$.fn.checkbox = 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.checkbox.settings, parameters),
|
||||
|
||||
className = settings.className,
|
||||
namespace = settings.namespace,
|
||||
selector = settings.selector,
|
||||
error = settings.error,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = 'module-' + namespace,
|
||||
|
||||
$module = $(this),
|
||||
$label = $(this).find(selector.label).first(),
|
||||
$input = $(this).find(selector.input),
|
||||
|
||||
instance = $module.data(moduleNamespace),
|
||||
|
||||
observer,
|
||||
element = this,
|
||||
module
|
||||
;
|
||||
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.verbose('Initializing checkbox', settings);
|
||||
|
||||
module.create.label();
|
||||
module.add.events();
|
||||
|
||||
if( module.is.checked() ) {
|
||||
module.set.checked();
|
||||
if(settings.fireOnInit) {
|
||||
settings.onChecked.call($input.get());
|
||||
}
|
||||
}
|
||||
else {
|
||||
module.remove.checked();
|
||||
if(settings.fireOnInit) {
|
||||
settings.onUnchecked.call($input.get());
|
||||
}
|
||||
}
|
||||
module.observeChanges();
|
||||
|
||||
module.instantiate();
|
||||
},
|
||||
|
||||
instantiate: function() {
|
||||
module.verbose('Storing instance of module', module);
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, module)
|
||||
;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying module');
|
||||
module.remove.events();
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
$module = $(this);
|
||||
$label = $(this).find(selector.label).first();
|
||||
$input = $(this).find(selector.input);
|
||||
},
|
||||
|
||||
observeChanges: function() {
|
||||
if('MutationObserver' in window) {
|
||||
observer = new MutationObserver(function(mutations) {
|
||||
module.debug('DOM tree modified, updating selector cache');
|
||||
module.refresh();
|
||||
});
|
||||
observer.observe(element, {
|
||||
childList : true,
|
||||
subtree : true
|
||||
});
|
||||
module.debug('Setting up mutation observer', observer);
|
||||
}
|
||||
},
|
||||
|
||||
attachEvents: function(selector, event) {
|
||||
var
|
||||
$element = $(selector)
|
||||
;
|
||||
event = $.isFunction(module[event])
|
||||
? module[event]
|
||||
: module.toggle
|
||||
;
|
||||
if($element.length > 0) {
|
||||
module.debug('Attaching checkbox events to element', selector, event);
|
||||
$element
|
||||
.on('click' + eventNamespace, event)
|
||||
;
|
||||
}
|
||||
else {
|
||||
module.error(error.notFound);
|
||||
}
|
||||
},
|
||||
|
||||
event: {
|
||||
keydown: function(event) {
|
||||
var
|
||||
key = event.which,
|
||||
keyCode = {
|
||||
enter : 13,
|
||||
space : 32,
|
||||
escape : 27
|
||||
}
|
||||
;
|
||||
if( key == keyCode.escape) {
|
||||
module.verbose('Escape key pressed blurring field');
|
||||
$module
|
||||
.blur()
|
||||
;
|
||||
}
|
||||
if(!event.ctrlKey && (key == keyCode.enter || key == keyCode.space)) {
|
||||
module.verbose('Enter key pressed, toggling checkbox');
|
||||
module.toggle.call(this);
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
is: {
|
||||
radio: function() {
|
||||
return $module.hasClass(className.radio);
|
||||
},
|
||||
checked: function() {
|
||||
return $input.prop('checked') !== undefined && $input.prop('checked');
|
||||
},
|
||||
unchecked: function() {
|
||||
return !module.is.checked();
|
||||
}
|
||||
},
|
||||
|
||||
can: {
|
||||
change: function() {
|
||||
return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') );
|
||||
},
|
||||
uncheck: function() {
|
||||
return (typeof settings.uncheckable === 'boolean')
|
||||
? settings.uncheckable
|
||||
: !module.is.radio()
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
set: {
|
||||
checked: function() {
|
||||
$module.addClass(className.checked);
|
||||
},
|
||||
tab: function() {
|
||||
if( $input.attr('tabindex') === undefined) {
|
||||
$input
|
||||
.attr('tabindex', 0)
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
create: {
|
||||
label: function() {
|
||||
if($input.prevAll(selector.label).length > 0) {
|
||||
$input.prev(selector.label).detach().insertAfter($input);
|
||||
module.debug('Moving existing label', $label);
|
||||
}
|
||||
else if( !module.has.label() ) {
|
||||
$label = $('<label>').insertAfter($input);
|
||||
module.debug('Creating label', $label);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
has: {
|
||||
label: function() {
|
||||
return ($label.length > 0);
|
||||
}
|
||||
},
|
||||
|
||||
add: {
|
||||
events: function() {
|
||||
module.verbose('Attaching checkbox events');
|
||||
$module
|
||||
.on('click' + eventNamespace, module.toggle)
|
||||
.on('keydown' + eventNamespace, selector.input, module.event.keydown)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
remove: {
|
||||
checked: function() {
|
||||
$module.removeClass(className.checked);
|
||||
},
|
||||
events: function() {
|
||||
module.debug('Removing events');
|
||||
$module
|
||||
.off(eventNamespace)
|
||||
.removeData(moduleNamespace)
|
||||
;
|
||||
$input
|
||||
.off(eventNamespace, module.event.keydown)
|
||||
;
|
||||
$label
|
||||
.off(eventNamespace)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
module.debug('Enabling checkbox functionality');
|
||||
$module.removeClass(className.disabled);
|
||||
$input.prop('disabled', false);
|
||||
settings.onEnabled.call($input.get());
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
module.debug('Disabling checkbox functionality');
|
||||
$module.addClass(className.disabled);
|
||||
$input.prop('disabled', 'disabled');
|
||||
settings.onDisabled.call($input.get());
|
||||
},
|
||||
|
||||
check: function() {
|
||||
module.debug('Enabling checkbox', $input);
|
||||
$input
|
||||
.prop('checked', true)
|
||||
.trigger('change')
|
||||
;
|
||||
module.set.checked();
|
||||
$input.trigger('blur');
|
||||
settings.onChange.call($input.get());
|
||||
settings.onChecked.call($input.get());
|
||||
},
|
||||
|
||||
uncheck: function() {
|
||||
module.debug('Disabling checkbox');
|
||||
$input
|
||||
.prop('checked', false)
|
||||
.trigger('change')
|
||||
;
|
||||
module.remove.checked();
|
||||
$input.trigger('blur');
|
||||
settings.onChange.call($input.get());
|
||||
settings.onUnchecked.call($input.get());
|
||||
},
|
||||
|
||||
toggle: function(event) {
|
||||
if( !module.can.change() ) {
|
||||
console.log(module.can.change());
|
||||
module.debug('Checkbox is read-only or disabled, ignoring toggle');
|
||||
return;
|
||||
}
|
||||
module.verbose('Determining new checkbox state');
|
||||
if( module.is.unchecked() ) {
|
||||
module.check();
|
||||
}
|
||||
else if( module.is.checked() && module.can.uncheck() ) {
|
||||
module.uncheck();
|
||||
}
|
||||
},
|
||||
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) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.checkbox.settings = {
|
||||
|
||||
name : 'Checkbox',
|
||||
namespace : 'checkbox',
|
||||
|
||||
debug : false,
|
||||
verbose : true,
|
||||
performance : true,
|
||||
|
||||
// delegated event context
|
||||
uncheckable : 'auto',
|
||||
fireOnInit : true,
|
||||
|
||||
onChange : function(){},
|
||||
onChecked : function(){},
|
||||
onUnchecked : function(){},
|
||||
onEnabled : function(){},
|
||||
onDisabled : function(){},
|
||||
|
||||
className : {
|
||||
checked : 'checked',
|
||||
disabled : 'disabled',
|
||||
radio : 'radio',
|
||||
readOnly : 'read-only'
|
||||
},
|
||||
|
||||
error : {
|
||||
method : 'The method you called is not defined'
|
||||
},
|
||||
|
||||
selector : {
|
||||
input : 'input[type="checkbox"], input[type="radio"]',
|
||||
label : 'label'
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})( jQuery, window , document );
|
||||
490
web/semantic/src/definitions/modules/checkbox.less
Normal file
490
web/semantic/src/definitions/modules/checkbox.less
Normal file
|
|
@ -0,0 +1,490 @@
|
|||
/*!
|
||||
* # Semantic UI - Checkbox
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'checkbox';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Checkbox
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
.ui.checkbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
min-height: @checkboxSize;
|
||||
|
||||
font-size: 1rem;
|
||||
line-height: @checkboxLineHeight;
|
||||
min-width: @checkboxSize;
|
||||
backface-visibility: hidden;
|
||||
|
||||
outline: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.checkbox input[type="checkbox"],
|
||||
.ui.checkbox input[type="radio"] {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
opacity: 0 !important;
|
||||
outline: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Box
|
||||
---------------*/
|
||||
|
||||
|
||||
.ui.checkbox .box,
|
||||
.ui.checkbox label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding-left: @labelPadding;
|
||||
outline: none;
|
||||
}
|
||||
.ui.checkbox label {
|
||||
font-size: @fontSize;
|
||||
}
|
||||
|
||||
.ui.checkbox .box:before,
|
||||
.ui.checkbox label:before {
|
||||
position: absolute;
|
||||
|
||||
line-height: 1;
|
||||
width: @checkboxSize;
|
||||
height: @checkboxSize;
|
||||
top: 0em;
|
||||
left: 0em;
|
||||
content: '';
|
||||
|
||||
background: @checkboxBackground;
|
||||
border-radius: @checkboxBorderRadius;
|
||||
|
||||
transition: @checkboxTransition;
|
||||
border: @checkboxBorder;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Checkmark
|
||||
---------------*/
|
||||
|
||||
.ui.checkbox .box:after,
|
||||
.ui.checkbox label:after {
|
||||
position: absolute;
|
||||
top: @checkboxCheckTop;
|
||||
left: @checkboxCheckLeft;
|
||||
line-height: @checkboxSize;
|
||||
width: @checkboxSize;
|
||||
height: @checkboxSize;
|
||||
text-align: center;
|
||||
|
||||
opacity: 0;
|
||||
color: @checkboxColor;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Label
|
||||
---------------*/
|
||||
|
||||
/* Inside */
|
||||
.ui.checkbox label,
|
||||
.ui.checkbox + label {
|
||||
cursor: pointer;
|
||||
color: @labelColor;
|
||||
transition: color 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Outside */
|
||||
.ui.checkbox + label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Hover
|
||||
---------------*/
|
||||
|
||||
.ui.checkbox .box:hover::before,
|
||||
.ui.checkbox label:hover::before {
|
||||
background: @checkboxHoverBackground;
|
||||
border: @checkboxHoverBorder;
|
||||
}
|
||||
.ui.checkbox label:hover,
|
||||
.ui.checkbox + label:hover {
|
||||
color: @labelHoverColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Down
|
||||
---------------*/
|
||||
|
||||
.ui.checkbox .box:active::before,
|
||||
.ui.checkbox label:active::before {
|
||||
background: @checkboxSelectedBackground;
|
||||
border: 1px solid @checkboxSelectedBorder;
|
||||
}
|
||||
.ui.checkbox input[type="checkbox"]:active ~ label,
|
||||
.ui.checkbox input[type="radio"]:active ~ label {
|
||||
color: @labelSelectedColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Focus
|
||||
---------------*/
|
||||
|
||||
.ui.checkbox input[type="checkbox"]:focus ~ .box:before,
|
||||
.ui.checkbox input[type="checkbox"]:focus ~ label:before,
|
||||
.ui.checkbox input[type="radio"]:focus ~ .box:before,
|
||||
.ui.checkbox input[type="radio"]:focus ~ label:before {
|
||||
background: @checkboxSelectedBackground;
|
||||
border: 1px solid @checkboxSelectedBorder;
|
||||
}
|
||||
.ui.checkbox input[type="checkbox"]:focus ~ label,
|
||||
.ui.checkbox input[type="radio"]:focus ~ label {
|
||||
color: @labelSelectedColor;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Active
|
||||
---------------*/
|
||||
|
||||
.ui.checkbox input[type="checkbox"]:checked ~ .box:after,
|
||||
.ui.checkbox input[type="checkbox"]:checked ~ label:after,
|
||||
.ui.checkbox input[type="radio"]:checked ~ .box:after,
|
||||
.ui.checkbox input[type="radio"]:checked ~ label:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Read-Only
|
||||
---------------*/
|
||||
|
||||
.ui.read-only.checkbox,
|
||||
.ui.read-only.checkbox label {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Disabled
|
||||
---------------*/
|
||||
|
||||
.ui.disabled.checkbox .box:after,
|
||||
.ui.disabled.checkbox label,
|
||||
.ui.checkbox input[type="checkbox"][disabled] ~ .box:after,
|
||||
.ui.checkbox input[type="checkbox"][disabled] ~ label,
|
||||
.ui.checkbox input[type="radio"][disabled] ~ .box:after,
|
||||
.ui.checkbox input[type="radio"][disabled] ~ label {
|
||||
cursor: default;
|
||||
opacity: @disabledCheckboxOpacity;
|
||||
color: @disabledCheckboxLabelColor;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Radio
|
||||
---------------*/
|
||||
|
||||
.ui.radio.checkbox {
|
||||
min-height: @checkboxRadioSize;
|
||||
}
|
||||
|
||||
/* Box */
|
||||
.ui.radio.checkbox .box:before,
|
||||
.ui.radio.checkbox label:before {
|
||||
width: @checkboxRadioSize;
|
||||
height: @checkboxRadioSize;
|
||||
border-radius: @circularRadius;
|
||||
top: @checkboxRadioTop;
|
||||
left: @checkboxRadioLeft;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Circle */
|
||||
.ui.radio.checkbox .box:after,
|
||||
.ui.radio.checkbox label:after {
|
||||
border: none;
|
||||
width: @checkboxRadioSize;
|
||||
height: @checkboxRadioSize;
|
||||
line-height: @checkboxRadioSize;
|
||||
top: @checkboxRadioTop;
|
||||
left: @checkboxRadioLeft;
|
||||
font-size: @checkboxRadioCircleSize;
|
||||
}
|
||||
/* Radio Checkbox */
|
||||
.ui.radio.checkbox .box:after,
|
||||
.ui.radio.checkbox label:after {
|
||||
width: @checkboxRadioSize;
|
||||
height: @checkboxRadioSize;
|
||||
border-radius: @checkboxBulletRadius;
|
||||
transform: scale(@checkboxBulletScale);
|
||||
background-color: @checkboxBulletColor;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Slider
|
||||
---------------*/
|
||||
|
||||
.ui.slider.checkbox {
|
||||
cursor: pointer;
|
||||
min-height: @sliderHeight;
|
||||
}
|
||||
|
||||
.ui.slider.checkbox .box,
|
||||
.ui.slider.checkbox label {
|
||||
padding-left: @sliderLabelDistance;
|
||||
line-height: @sliderLabelLineHeight;
|
||||
color: @sliderOffLabelColor;
|
||||
}
|
||||
|
||||
/* Line */
|
||||
.ui.slider.checkbox .box:before,
|
||||
.ui.slider.checkbox label:before {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: @sliderLineVerticalOffset;
|
||||
left: 0em;
|
||||
z-index: 1;
|
||||
border: none !important;
|
||||
|
||||
background-color: @sliderLineColor;
|
||||
width: @sliderLineWidth;
|
||||
height: @sliderLineHeight;
|
||||
|
||||
transform: none;
|
||||
border-radius: @sliderLineRadius;
|
||||
transition:
|
||||
background 0.3s ease
|
||||
;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.ui.slider.checkbox .box:after,
|
||||
.ui.slider.checkbox label:after {
|
||||
background: @handleBackground;
|
||||
position: absolute;
|
||||
content: '';
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
|
||||
border: none;
|
||||
box-shadow: @handleBoxShadow;
|
||||
width: @sliderHandleSize;
|
||||
height: @sliderHandleSize;
|
||||
top: @sliderHandleOffset;
|
||||
left: 0em;
|
||||
transform: none;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
transition:
|
||||
left 0.3s ease 0s
|
||||
;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.ui.slider.checkbox input[type="checkbox"]:focus ~ .box:before,
|
||||
.ui.slider.checkbox input[type="checkbox"]:focus ~ label:before,
|
||||
.ui.slider.checkbox input[type="radio"]:focus ~ .box:before,
|
||||
.ui.slider.checkbox input[type="radio"]:focus ~ label:before {
|
||||
background-color: @toggleFocusColor;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.ui.slider.checkbox .box:hover,
|
||||
.ui.slider.checkbox label:hover {
|
||||
color: @sliderHoverLabelColor;
|
||||
}
|
||||
.ui.slider.checkbox .box:hover::before,
|
||||
.ui.slider.checkbox label:hover::before {
|
||||
background: @sliderHoverLaneBackground;
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.ui.slider.checkbox input[type="checkbox"]:checked ~ .box,
|
||||
.ui.slider.checkbox input[type="checkbox"]:checked ~ label,
|
||||
.ui.slider.checkbox input[type="radio"]:checked ~ .box,
|
||||
.ui.slider.checkbox input[type="radio"]:checked ~ label {
|
||||
color: @sliderOnLabelColor;
|
||||
}
|
||||
.ui.slider.checkbox input[type="checkbox"]:checked ~ .box:before,
|
||||
.ui.slider.checkbox input[type="checkbox"]:checked ~ label:before,
|
||||
.ui.slider.checkbox input[type="radio"]:checked ~ .box:before,
|
||||
.ui.slider.checkbox input[type="radio"]:checked ~ label:before {
|
||||
background-color: @sliderOnLineColor;
|
||||
}
|
||||
.ui.slider.checkbox input[type="checkbox"]:checked ~ .box:after,
|
||||
.ui.slider.checkbox input[type="checkbox"]:checked ~ label:after,
|
||||
.ui.slider.checkbox input[type="radio"]:checked ~ .box:after,
|
||||
.ui.slider.checkbox input[type="radio"]:checked ~ label:after {
|
||||
left: @sliderTravelDistance;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Toggle
|
||||
---------------*/
|
||||
|
||||
.ui.toggle.checkbox {
|
||||
cursor: pointer;
|
||||
min-height: @toggleHeight;
|
||||
}
|
||||
|
||||
.ui.toggle.checkbox .box,
|
||||
.ui.toggle.checkbox label {
|
||||
min-height: @toggleHandleSize;
|
||||
padding-left: @toggleLabelDistance;
|
||||
color: @toggleOffLabelColor;
|
||||
}
|
||||
.ui.toggle.checkbox label {
|
||||
padding-top: @toggleLabelOffset;
|
||||
}
|
||||
|
||||
/* Switch */
|
||||
.ui.toggle.checkbox .box:before,
|
||||
.ui.toggle.checkbox label:before {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
content: '';
|
||||
|
||||
top: @toggleLaneVerticalOffset;
|
||||
z-index: 1;
|
||||
border: none;
|
||||
|
||||
background-color: @neutralCheckbox;
|
||||
width: @toggleLaneWidth;
|
||||
height: @toggleLaneHeight;
|
||||
border-radius: @toggleHandleRadius;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.ui.toggle.checkbox .box:after,
|
||||
.ui.toggle.checkbox label:after {
|
||||
background: @handleBackground;
|
||||
position: absolute;
|
||||
content: '';
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
|
||||
border: none;
|
||||
box-shadow: @handleBoxShadow;
|
||||
width: @toggleHandleSize;
|
||||
height: @toggleHandleSize;
|
||||
top: @toggleHandleOffset;
|
||||
left: 0em;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
transition:
|
||||
background 0.3s ease 0s,
|
||||
left 0.3s ease 0s
|
||||
;
|
||||
}
|
||||
|
||||
.ui.toggle.checkbox input[type="checkbox"] ~ .box:after,
|
||||
.ui.toggle.checkbox input[type="checkbox"] ~ label:after,
|
||||
.ui.toggle.checkbox input[type="radio"] ~ .box:after,
|
||||
.ui.toggle.checkbox input[type="radio"] ~ label:after {
|
||||
left: @toggleOffOffset;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.ui.toggle.checkbox input[type="checkbox"]:focus ~ .box:before,
|
||||
.ui.toggle.checkbox input[type="checkbox"]:focus ~ label:before,
|
||||
.ui.toggle.checkbox input[type="radio"]:focus ~ .box:before,
|
||||
.ui.toggle.checkbox input[type="radio"]:focus ~ label:before {
|
||||
background-color: @toggleFocusColor;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.ui.toggle.checkbox .box:hover::before,
|
||||
.ui.toggle.checkbox label:hover::before {
|
||||
background-color: @toggleHoverColor;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.ui.toggle.checkbox input[type="checkbox"]:checked ~ .box,
|
||||
.ui.toggle.checkbox input[type="checkbox"]:checked ~ label,
|
||||
.ui.toggle.checkbox input[type="radio"]:checked ~ .box,
|
||||
.ui.toggle.checkbox input[type="radio"]:checked ~ label {
|
||||
color: @toggleOnLabelColor;
|
||||
}
|
||||
.ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:before,
|
||||
.ui.toggle.checkbox input[type="checkbox"]:checked ~ label:before,
|
||||
.ui.toggle.checkbox input[type="radio"]:checked ~ .box:before,
|
||||
.ui.toggle.checkbox input[type="radio"]:checked ~ label:before {
|
||||
background-color: @toggleOnLaneColor;
|
||||
}
|
||||
.ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:after,
|
||||
.ui.toggle.checkbox input[type="checkbox"]:checked ~ label:after,
|
||||
.ui.toggle.checkbox input[type="radio"]:checked ~ .box:after,
|
||||
.ui.toggle.checkbox input[type="radio"]:checked ~ label:after {
|
||||
left: @toggleOnOffset;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Fitted
|
||||
---------------*/
|
||||
|
||||
.ui.fitted.checkbox .box,
|
||||
.ui.fitted.checkbox label {
|
||||
padding-left: 0em !important;
|
||||
}
|
||||
|
||||
.ui.fitted.toggle.checkbox,
|
||||
.ui.fitted.toggle.checkbox {
|
||||
width: @toggleWidth;
|
||||
}
|
||||
|
||||
.ui.fitted.slider.checkbox,
|
||||
.ui.fitted.slider.checkbox {
|
||||
width: @sliderWidth;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
669
web/semantic/src/definitions/modules/dimmer.js
Normal file
669
web/semantic/src/definitions/modules/dimmer.js
Normal file
|
|
@ -0,0 +1,669 @@
|
|||
/*!
|
||||
* # Semantic UI - Dimmer
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ( $, window, document, undefined ) {
|
||||
|
||||
"use strict";
|
||||
|
||||
$.fn.dimmer = function(parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
|
||||
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.dimmer.settings, parameters)
|
||||
: $.extend({}, $.fn.dimmer.settings),
|
||||
|
||||
selector = settings.selector,
|
||||
namespace = settings.namespace,
|
||||
className = settings.className,
|
||||
error = settings.error,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = 'module-' + namespace,
|
||||
moduleSelector = $allModules.selector || '',
|
||||
|
||||
clickEvent = ('ontouchstart' in document.documentElement)
|
||||
? 'touchstart'
|
||||
: 'click',
|
||||
|
||||
$module = $(this),
|
||||
$dimmer,
|
||||
$dimmable,
|
||||
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
module
|
||||
;
|
||||
|
||||
module = {
|
||||
|
||||
preinitialize: function() {
|
||||
if( module.is.dimmer() ) {
|
||||
$dimmable = $module.parent();
|
||||
$dimmer = $module;
|
||||
}
|
||||
else {
|
||||
$dimmable = $module;
|
||||
if( module.has.dimmer() ) {
|
||||
if(settings.dimmerName) {
|
||||
$dimmer = $dimmable.children(selector.dimmer).filter('.' + settings.dimmerName);
|
||||
}
|
||||
else {
|
||||
$dimmer = $dimmable.children(selector.dimmer);
|
||||
}
|
||||
}
|
||||
else {
|
||||
$dimmer = module.create();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
module.debug('Initializing dimmer', settings);
|
||||
if(settings.on == 'hover') {
|
||||
$dimmable
|
||||
.on('mouseenter' + eventNamespace, module.show)
|
||||
.on('mouseleave' + eventNamespace, module.hide)
|
||||
;
|
||||
}
|
||||
else if(settings.on == 'click') {
|
||||
$dimmable
|
||||
.on(clickEvent + eventNamespace, module.toggle)
|
||||
;
|
||||
}
|
||||
if( module.is.page() ) {
|
||||
module.debug('Setting as a page dimmer', $dimmable);
|
||||
module.set.pageDimmer();
|
||||
}
|
||||
|
||||
if( module.is.closable() ) {
|
||||
module.verbose('Adding dimmer close event', $dimmer);
|
||||
$dimmer
|
||||
.on(clickEvent + eventNamespace, module.event.click)
|
||||
;
|
||||
}
|
||||
module.set.dimmable();
|
||||
module.instantiate();
|
||||
},
|
||||
|
||||
instantiate: function() {
|
||||
module.verbose('Storing instance of module', module);
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, instance)
|
||||
;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying previous module', $dimmer);
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
;
|
||||
$dimmable
|
||||
.off(eventNamespace)
|
||||
;
|
||||
$dimmer
|
||||
.off(eventNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
event: {
|
||||
click: function(event) {
|
||||
module.verbose('Determining if event occured on dimmer', event);
|
||||
if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) {
|
||||
module.hide();
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addContent: function(element) {
|
||||
var
|
||||
$content = $(element)
|
||||
;
|
||||
module.debug('Add content to dimmer', $content);
|
||||
if($content.parent()[0] !== $dimmer[0]) {
|
||||
$content.detach().appendTo($dimmer);
|
||||
}
|
||||
},
|
||||
|
||||
create: function() {
|
||||
var
|
||||
$element = $( settings.template.dimmer() )
|
||||
;
|
||||
if(settings.variation) {
|
||||
module.debug('Creating dimmer with variation', settings.variation);
|
||||
$element.addClass(className.variation);
|
||||
}
|
||||
if(settings.dimmerName) {
|
||||
module.debug('Creating named dimmer', settings.dimmerName);
|
||||
$element.addClass(settings.dimmerName);
|
||||
}
|
||||
$element
|
||||
.appendTo($dimmable)
|
||||
;
|
||||
return $element;
|
||||
},
|
||||
|
||||
show: function(callback) {
|
||||
callback = $.isFunction(callback)
|
||||
? callback
|
||||
: function(){}
|
||||
;
|
||||
module.debug('Showing dimmer', $dimmer, settings);
|
||||
if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
|
||||
module.animate.show(callback);
|
||||
settings.onShow.call(element);
|
||||
settings.onChange.call(element);
|
||||
}
|
||||
else {
|
||||
module.debug('Dimmer is already shown or disabled');
|
||||
}
|
||||
},
|
||||
|
||||
hide: function(callback) {
|
||||
callback = $.isFunction(callback)
|
||||
? callback
|
||||
: function(){}
|
||||
;
|
||||
if( module.is.dimmed() || module.is.animating() ) {
|
||||
module.debug('Hiding dimmer', $dimmer);
|
||||
module.animate.hide(callback);
|
||||
settings.onHide.call(element);
|
||||
settings.onChange.call(element);
|
||||
}
|
||||
else {
|
||||
module.debug('Dimmer is not visible');
|
||||
}
|
||||
},
|
||||
|
||||
toggle: function() {
|
||||
module.verbose('Toggling dimmer visibility', $dimmer);
|
||||
if( !module.is.dimmed() ) {
|
||||
module.show();
|
||||
}
|
||||
else {
|
||||
module.hide();
|
||||
}
|
||||
},
|
||||
|
||||
animate: {
|
||||
show: function(callback) {
|
||||
callback = $.isFunction(callback)
|
||||
? callback
|
||||
: function(){}
|
||||
;
|
||||
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
|
||||
if(settings.opacity !== 'auto') {
|
||||
module.set.opacity();
|
||||
}
|
||||
$dimmer
|
||||
.transition({
|
||||
animation : settings.transition + ' in',
|
||||
queue : false,
|
||||
duration : module.get.duration(),
|
||||
useFailSafe : true,
|
||||
onStart : function() {
|
||||
module.set.dimmed();
|
||||
},
|
||||
onComplete : function() {
|
||||
module.set.active();
|
||||
callback();
|
||||
}
|
||||
})
|
||||
;
|
||||
}
|
||||
else {
|
||||
module.verbose('Showing dimmer animation with javascript');
|
||||
module.set.dimmed();
|
||||
if(settings.opacity == 'auto') {
|
||||
settings.opacity = 0.8;
|
||||
}
|
||||
$dimmer
|
||||
.stop()
|
||||
.css({
|
||||
opacity : 0,
|
||||
width : '100%',
|
||||
height : '100%'
|
||||
})
|
||||
.fadeTo(module.get.duration(), settings.opacity, function() {
|
||||
$dimmer.removeAttr('style');
|
||||
module.set.active();
|
||||
callback();
|
||||
})
|
||||
;
|
||||
}
|
||||
},
|
||||
hide: function(callback) {
|
||||
callback = $.isFunction(callback)
|
||||
? callback
|
||||
: function(){}
|
||||
;
|
||||
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
|
||||
module.verbose('Hiding dimmer with css');
|
||||
$dimmer
|
||||
.transition({
|
||||
animation : settings.transition + ' out',
|
||||
queue : false,
|
||||
duration : module.get.duration(),
|
||||
useFailSafe : true,
|
||||
onStart : function() {
|
||||
module.remove.dimmed();
|
||||
},
|
||||
onComplete : function() {
|
||||
module.remove.active();
|
||||
callback();
|
||||
}
|
||||
})
|
||||
;
|
||||
}
|
||||
else {
|
||||
module.verbose('Hiding dimmer with javascript');
|
||||
module.remove.dimmed();
|
||||
$dimmer
|
||||
.stop()
|
||||
.fadeOut(module.get.duration(), function() {
|
||||
module.remove.active();
|
||||
$dimmer.removeAttr('style');
|
||||
callback();
|
||||
})
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
get: {
|
||||
dimmer: function() {
|
||||
return $dimmer;
|
||||
},
|
||||
duration: function() {
|
||||
if(typeof settings.duration == 'object') {
|
||||
if( module.is.active() ) {
|
||||
return settings.duration.hide;
|
||||
}
|
||||
else {
|
||||
return settings.duration.show;
|
||||
}
|
||||
}
|
||||
return settings.duration;
|
||||
}
|
||||
},
|
||||
|
||||
has: {
|
||||
dimmer: function() {
|
||||
if(settings.dimmerName) {
|
||||
return ($module.children(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
|
||||
}
|
||||
else {
|
||||
return ( $module.children(selector.dimmer).length > 0 );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
is: {
|
||||
active: function() {
|
||||
return $dimmer.hasClass(className.active);
|
||||
},
|
||||
animating: function() {
|
||||
return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) );
|
||||
},
|
||||
closable: function() {
|
||||
if(settings.closable == 'auto') {
|
||||
if(settings.on == 'hover') {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return settings.closable;
|
||||
},
|
||||
dimmer: function() {
|
||||
return $module.is(selector.dimmer);
|
||||
},
|
||||
dimmable: function() {
|
||||
return $module.is(selector.dimmable);
|
||||
},
|
||||
dimmed: function() {
|
||||
return $dimmable.hasClass(className.dimmed);
|
||||
},
|
||||
disabled: function() {
|
||||
return $dimmable.hasClass(className.disabled);
|
||||
},
|
||||
enabled: function() {
|
||||
return !module.is.disabled();
|
||||
},
|
||||
page: function () {
|
||||
return $dimmable.is('body');
|
||||
},
|
||||
pageDimmer: function() {
|
||||
return $dimmer.hasClass(className.pageDimmer);
|
||||
}
|
||||
},
|
||||
|
||||
can: {
|
||||
show: function() {
|
||||
return !$dimmer.hasClass(className.disabled);
|
||||
}
|
||||
},
|
||||
|
||||
set: {
|
||||
opacity: function(opacity) {
|
||||
var
|
||||
opacity = settings.opacity || opacity,
|
||||
color = $dimmer.css('background-color'),
|
||||
colorArray = color.split(','),
|
||||
isRGBA = (colorArray && colorArray.length == 4)
|
||||
;
|
||||
if(isRGBA) {
|
||||
colorArray[3] = opacity + ')';
|
||||
color = colorArray.join(',');
|
||||
}
|
||||
else {
|
||||
color = 'rgba(0, 0, 0, ' + opacity + ')';
|
||||
}
|
||||
module.debug('Setting opacity to', opacity);
|
||||
$dimmer.css('background-color', color);
|
||||
},
|
||||
active: function() {
|
||||
$dimmer.addClass(className.active);
|
||||
},
|
||||
dimmable: function() {
|
||||
$dimmable.addClass(className.dimmable);
|
||||
},
|
||||
dimmed: function() {
|
||||
$dimmable.addClass(className.dimmed);
|
||||
},
|
||||
pageDimmer: function() {
|
||||
$dimmer.addClass(className.pageDimmer);
|
||||
},
|
||||
disabled: function() {
|
||||
$dimmer.addClass(className.disabled);
|
||||
}
|
||||
},
|
||||
|
||||
remove: {
|
||||
active: function() {
|
||||
$dimmer
|
||||
.removeClass(className.active)
|
||||
;
|
||||
},
|
||||
dimmed: function() {
|
||||
$dimmable.removeClass(className.dimmed);
|
||||
},
|
||||
disabled: function() {
|
||||
$dimmer.removeClass(className.disabled);
|
||||
}
|
||||
},
|
||||
|
||||
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($allModules.length > 1) {
|
||||
title += ' ' + '(' + $allModules.length + ')';
|
||||
}
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
module.preinitialize();
|
||||
|
||||
if(methodInvoked) {
|
||||
if(instance === undefined) {
|
||||
module.initialize();
|
||||
}
|
||||
module.invoke(query);
|
||||
}
|
||||
else {
|
||||
if(instance !== undefined) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.dimmer.settings = {
|
||||
|
||||
name : 'Dimmer',
|
||||
namespace : 'dimmer',
|
||||
|
||||
debug : false,
|
||||
verbose : true,
|
||||
performance : true,
|
||||
|
||||
// name to distinguish between multiple dimmers in context
|
||||
dimmerName : false,
|
||||
|
||||
// whether to add a variation type
|
||||
variation : false,
|
||||
|
||||
// whether to bind close events
|
||||
closable : 'auto',
|
||||
|
||||
// whether to use css animations
|
||||
useCSS : true,
|
||||
|
||||
// css animation to use
|
||||
transition : 'fade',
|
||||
|
||||
// event to bind to
|
||||
on : false,
|
||||
|
||||
// overriding opacity value
|
||||
opacity : 'auto',
|
||||
|
||||
// transition durations
|
||||
duration : {
|
||||
show : 500,
|
||||
hide : 500
|
||||
},
|
||||
|
||||
onChange : function(){},
|
||||
onShow : function(){},
|
||||
onHide : function(){},
|
||||
|
||||
error : {
|
||||
method : 'The method you called is not defined.'
|
||||
},
|
||||
|
||||
selector: {
|
||||
dimmable : '.dimmable',
|
||||
dimmer : '.ui.dimmer',
|
||||
content : '.ui.dimmer > .content, .ui.dimmer > .content > .center'
|
||||
},
|
||||
|
||||
template: {
|
||||
dimmer: function() {
|
||||
return $('<div />').attr('class', 'ui dimmer');
|
||||
}
|
||||
},
|
||||
|
||||
className : {
|
||||
active : 'active',
|
||||
animating : 'animating',
|
||||
dimmable : 'dimmable',
|
||||
dimmed : 'dimmed',
|
||||
disabled : 'disabled',
|
||||
hide : 'hide',
|
||||
pageDimmer : 'page',
|
||||
show : 'show'
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})( jQuery, window , document );
|
||||
179
web/semantic/src/definitions/modules/dimmer.less
Normal file
179
web/semantic/src/definitions/modules/dimmer.less
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
/*!
|
||||
* # Semantic UI - Dimmer
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'dimmer';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Dimmer
|
||||
*******************************/
|
||||
|
||||
.dimmable {
|
||||
position: @dimmablePosition;
|
||||
}
|
||||
|
||||
.ui.dimmer {
|
||||
display: none;
|
||||
position: @dimmerPosition;
|
||||
top: 0em !important;
|
||||
left: 0em !important;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
text-align: @textAlign;
|
||||
vertical-align: @verticalAlign;
|
||||
|
||||
background: @background;
|
||||
opacity: @hiddenOpacity;
|
||||
line-height: @lineHeight;
|
||||
|
||||
animation-fill-mode: both;
|
||||
animation-duration: @duration;
|
||||
transition: @transition;
|
||||
|
||||
user-select: none;
|
||||
will-change: opacity;
|
||||
z-index: @zIndex;
|
||||
}
|
||||
|
||||
/* Dimmer Content */
|
||||
.ui.dimmer > .content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: @contentDisplay;
|
||||
user-select: text;
|
||||
}
|
||||
.ui.dimmer > .content > div {
|
||||
display: @contentChildDisplay;
|
||||
vertical-align: @verticalAlign;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
|
||||
/* Loose Coupling */
|
||||
.ui.segment > .ui.dimmer {
|
||||
border-radius: inherit !important;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.animating.dimmable:not(body),
|
||||
.dimmed.dimmable:not(body) {
|
||||
overflow: @overflow;
|
||||
}
|
||||
|
||||
.dimmed.dimmable > .ui.animating.dimmer,
|
||||
.dimmed.dimmable > .ui.visible.dimmer,
|
||||
.ui.active.dimmer {
|
||||
display: block;
|
||||
opacity: @visibleOpacity;
|
||||
}
|
||||
|
||||
.ui.disabled.dimmer {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Page
|
||||
---------------*/
|
||||
|
||||
.ui.page.dimmer {
|
||||
position: @pageDimmerPosition;
|
||||
transform-style: @transformStyle;
|
||||
perspective: @perspective;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
body.animating.in.dimmable,
|
||||
body.dimmed.dimmable {
|
||||
overflow: hidden;
|
||||
}
|
||||
body.dimmable > .dimmer {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/*
|
||||
body.dimmable > :not(.dimmer) {
|
||||
filter: @elementStartFilter;
|
||||
}
|
||||
body.dimmed.dimmable > :not(.dimmer) {
|
||||
filter: @elementEndFilter;
|
||||
transition: @elementTransition;
|
||||
}
|
||||
*/
|
||||
|
||||
/*--------------
|
||||
Aligned
|
||||
---------------*/
|
||||
|
||||
.ui.dimmer > .top.aligned.content > * {
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.dimmer > .bottom.aligned.content > * {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.dimmer {
|
||||
background: @invertedBackground;
|
||||
}
|
||||
.ui.inverted.dimmer > .content > * {
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Simple
|
||||
---------------*/
|
||||
|
||||
/* Displays without javascript */
|
||||
.ui.simple.dimmer {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
width: 0%;
|
||||
height: 0%;
|
||||
z-index: -100;
|
||||
background-color: @simpleStartBackground;
|
||||
}
|
||||
.dimmed.dimmable > .ui.simple.dimmer {
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @simpleEndBackground;
|
||||
z-index: @simpleZIndex;
|
||||
}
|
||||
|
||||
.ui.simple.inverted.dimmer {
|
||||
background: @simpleInvertedStartBackground;
|
||||
}
|
||||
.dimmed.dimmable > .ui.simple.inverted.dimmer {
|
||||
background: @simpleInvertedEndBackground;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
1795
web/semantic/src/definitions/modules/dropdown.js
Normal file
1795
web/semantic/src/definitions/modules/dropdown.js
Normal file
File diff suppressed because it is too large
Load diff
1040
web/semantic/src/definitions/modules/dropdown.less
Normal file
1040
web/semantic/src/definitions/modules/dropdown.less
Normal file
File diff suppressed because it is too large
Load diff
860
web/semantic/src/definitions/modules/modal.js
Normal file
860
web/semantic/src/definitions/modules/modal.js
Normal file
|
|
@ -0,0 +1,860 @@
|
|||
/*!
|
||||
* # Semantic UI - Modal
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ( $, window, document, undefined ) {
|
||||
|
||||
"use strict";
|
||||
|
||||
$.fn.modal = function(parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
$window = $(window),
|
||||
$document = $(document),
|
||||
$body = $('body'),
|
||||
|
||||
moduleSelector = $allModules.selector || '',
|
||||
|
||||
time = new Date().getTime(),
|
||||
performance = [],
|
||||
|
||||
query = arguments[0],
|
||||
methodInvoked = (typeof query == 'string'),
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
|
||||
requestAnimationFrame = window.requestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| function(callback) { setTimeout(callback, 0); },
|
||||
|
||||
returnedValue
|
||||
;
|
||||
|
||||
$allModules
|
||||
.each(function() {
|
||||
var
|
||||
settings = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.fn.modal.settings, parameters)
|
||||
: $.extend({}, $.fn.modal.settings),
|
||||
|
||||
selector = settings.selector,
|
||||
className = settings.className,
|
||||
namespace = settings.namespace,
|
||||
error = settings.error,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = 'module-' + namespace,
|
||||
|
||||
$module = $(this),
|
||||
$context = $(settings.context),
|
||||
$close = $module.find(selector.close),
|
||||
|
||||
$allModals,
|
||||
$otherModals,
|
||||
$focusedElement,
|
||||
$dimmable,
|
||||
$dimmer,
|
||||
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
|
||||
elementNamespace,
|
||||
id,
|
||||
observer,
|
||||
module
|
||||
;
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.verbose('Initializing dimmer', $context);
|
||||
|
||||
module.create.id();
|
||||
module.create.dimmer();
|
||||
module.refreshModals();
|
||||
|
||||
module.verbose('Attaching close events', $close);
|
||||
module.bind.events();
|
||||
module.observeChanges();
|
||||
module.instantiate();
|
||||
},
|
||||
|
||||
instantiate: function() {
|
||||
module.verbose('Storing instance of modal');
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, instance)
|
||||
;
|
||||
},
|
||||
|
||||
create: {
|
||||
dimmer: function() {
|
||||
var
|
||||
defaultSettings = {
|
||||
debug : settings.debug,
|
||||
dimmerName : 'modals',
|
||||
duration : {
|
||||
show : settings.duration,
|
||||
hide : settings.duration
|
||||
}
|
||||
},
|
||||
dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
|
||||
;
|
||||
if($.fn.dimmer === undefined) {
|
||||
module.error(error.dimmer);
|
||||
return;
|
||||
}
|
||||
module.debug('Creating dimmer with settings', dimmerSettings);
|
||||
$dimmable = $context.dimmer(dimmerSettings);
|
||||
if(settings.detachable) {
|
||||
module.verbose('Modal is detachable, moving content into dimmer');
|
||||
$dimmable.dimmer('add content', $module);
|
||||
}
|
||||
$dimmer = $dimmable.dimmer('get dimmer');
|
||||
},
|
||||
id: function() {
|
||||
id = (Math.random().toString(16) + '000000000').substr(2,8);
|
||||
elementNamespace = '.' + id;
|
||||
module.verbose('Creating unique id for element', id);
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying previous modal');
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
.off(eventNamespace)
|
||||
;
|
||||
$window.off(elementNamespace);
|
||||
$close.off(eventNamespace);
|
||||
$context.dimmer('destroy');
|
||||
},
|
||||
|
||||
observeChanges: function() {
|
||||
if('MutationObserver' in window) {
|
||||
observer = new MutationObserver(function(mutations) {
|
||||
module.debug('DOM tree modified, refreshing');
|
||||
module.refresh();
|
||||
});
|
||||
observer.observe(element, {
|
||||
childList : true,
|
||||
subtree : true
|
||||
});
|
||||
module.debug('Setting up mutation observer', observer);
|
||||
}
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
module.remove.scrolling();
|
||||
module.cacheSizes();
|
||||
module.set.screenHeight();
|
||||
module.set.type();
|
||||
module.set.position();
|
||||
},
|
||||
|
||||
refreshModals: function() {
|
||||
$otherModals = $module.siblings(selector.modal);
|
||||
$allModals = $otherModals.add($module);
|
||||
},
|
||||
|
||||
attachEvents: function(selector, event) {
|
||||
var
|
||||
$toggle = $(selector)
|
||||
;
|
||||
event = $.isFunction(module[event])
|
||||
? module[event]
|
||||
: module.toggle
|
||||
;
|
||||
if($toggle.length > 0) {
|
||||
module.debug('Attaching modal events to element', selector, event);
|
||||
$toggle
|
||||
.off(eventNamespace)
|
||||
.on('click' + eventNamespace, event)
|
||||
;
|
||||
}
|
||||
else {
|
||||
module.error(error.notFound, selector);
|
||||
}
|
||||
},
|
||||
|
||||
bind: {
|
||||
events: function() {
|
||||
$close.on('click' + eventNamespace, module.event.close);
|
||||
$window.on('resize' + elementNamespace, module.event.resize);
|
||||
}
|
||||
},
|
||||
|
||||
get: {
|
||||
id: function() {
|
||||
return (Math.random().toString(16) + '000000000').substr(2,8);
|
||||
}
|
||||
},
|
||||
|
||||
event: {
|
||||
close: function() {
|
||||
module.verbose('Closing element pressed');
|
||||
if( $(this).is(selector.approve) ) {
|
||||
if(settings.onApprove.call(element) !== false) {
|
||||
module.hide();
|
||||
}
|
||||
else {
|
||||
module.verbose('Approve callback returned false cancelling hide');
|
||||
}
|
||||
}
|
||||
else if( $(this).is(selector.deny) ) {
|
||||
if(settings.onDeny.call(element) !== false) {
|
||||
module.hide();
|
||||
}
|
||||
else {
|
||||
module.verbose('Deny callback returned false cancelling hide');
|
||||
}
|
||||
}
|
||||
else {
|
||||
module.hide();
|
||||
}
|
||||
},
|
||||
click: function(event) {
|
||||
if( $(event.target).closest($module).length === 0 ) {
|
||||
module.debug('Dimmer clicked, hiding all modals');
|
||||
if( module.is.active() ) {
|
||||
module.remove.clickaway();
|
||||
if(settings.allowMultiple) {
|
||||
module.hide();
|
||||
}
|
||||
else {
|
||||
module.hideAll();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
debounce: function(method, delay) {
|
||||
clearTimeout(module.timer);
|
||||
module.timer = setTimeout(method, delay);
|
||||
},
|
||||
keyboard: function(event) {
|
||||
var
|
||||
keyCode = event.which,
|
||||
escapeKey = 27
|
||||
;
|
||||
if(keyCode == escapeKey) {
|
||||
if(settings.closable) {
|
||||
module.debug('Escape key pressed hiding modal');
|
||||
module.hide();
|
||||
}
|
||||
else {
|
||||
module.debug('Escape key pressed, but closable is set to false');
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
resize: function() {
|
||||
if( $dimmable.dimmer('is active') ) {
|
||||
requestAnimationFrame(module.refresh);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
toggle: function() {
|
||||
if( module.is.active() || module.is.animating() ) {
|
||||
module.hide();
|
||||
}
|
||||
else {
|
||||
module.show();
|
||||
}
|
||||
},
|
||||
|
||||
show: function(callback) {
|
||||
callback = $.isFunction(callback)
|
||||
? callback
|
||||
: function(){}
|
||||
;
|
||||
module.refreshModals();
|
||||
module.showModal(callback);
|
||||
},
|
||||
|
||||
hide: function(callback) {
|
||||
callback = $.isFunction(callback)
|
||||
? callback
|
||||
: function(){}
|
||||
;
|
||||
module.refreshModals();
|
||||
module.hideModal(callback);
|
||||
},
|
||||
|
||||
showModal: function(callback) {
|
||||
callback = $.isFunction(callback)
|
||||
? callback
|
||||
: function(){}
|
||||
;
|
||||
if( module.is.animating() || !module.is.active() ) {
|
||||
|
||||
module.showDimmer();
|
||||
module.cacheSizes();
|
||||
module.set.position();
|
||||
module.set.screenHeight();
|
||||
module.set.type();
|
||||
module.set.clickaway();
|
||||
|
||||
if( !settings.allowMultiple && $otherModals.filter('.' + className.active).length > 0) {
|
||||
module.debug('Other modals visible, queueing show animation');
|
||||
module.hideOthers(module.showModal);
|
||||
}
|
||||
else {
|
||||
settings.onShow.call(element);
|
||||
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||||
module.debug('Showing modal with css animations');
|
||||
$module
|
||||
.transition({
|
||||
debug : settings.debug,
|
||||
animation : settings.transition + ' in',
|
||||
queue : settings.queue,
|
||||
duration : settings.duration,
|
||||
useFailSafe : true,
|
||||
onComplete : function() {
|
||||
settings.onVisible.apply(element);
|
||||
module.add.keyboardShortcuts();
|
||||
module.save.focus();
|
||||
module.set.active();
|
||||
module.set.autofocus();
|
||||
callback();
|
||||
}
|
||||
})
|
||||
;
|
||||
}
|
||||
else {
|
||||
module.debug('Showing modal with javascript');
|
||||
$module
|
||||
.fadeIn(settings.duration, settings.easing, function() {
|
||||
settings.onVisible.apply(element);
|
||||
module.add.keyboardShortcuts();
|
||||
module.save.focus();
|
||||
module.set.active();
|
||||
callback();
|
||||
})
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
module.debug('Modal is already visible');
|
||||
}
|
||||
},
|
||||
|
||||
hideModal: function(callback, keepDimmed) {
|
||||
callback = $.isFunction(callback)
|
||||
? callback
|
||||
: function(){}
|
||||
;
|
||||
module.debug('Hiding modal');
|
||||
settings.onHide.call(element);
|
||||
|
||||
if( module.is.animating() || module.is.active() ) {
|
||||
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||||
module.remove.active();
|
||||
$module
|
||||
.transition({
|
||||
debug : settings.debug,
|
||||
animation : settings.transition + ' out',
|
||||
queue : settings.queue,
|
||||
duration : settings.duration,
|
||||
useFailSafe : true,
|
||||
onStart : function() {
|
||||
if(!module.othersActive() && !keepDimmed) {
|
||||
module.hideDimmer();
|
||||
}
|
||||
module.remove.keyboardShortcuts();
|
||||
},
|
||||
onComplete : function() {
|
||||
settings.onHidden.call(element);
|
||||
module.restore.focus();
|
||||
callback();
|
||||
}
|
||||
})
|
||||
;
|
||||
}
|
||||
else {
|
||||
module.remove.active();
|
||||
if( !module.othersActive() ) {
|
||||
module.hideDimmer();
|
||||
}
|
||||
module.remove.keyboardShortcuts();
|
||||
$module
|
||||
.fadeOut(settings.duration, settings.easing, function() {
|
||||
settings.onHidden.call(element);
|
||||
module.restore.focus();
|
||||
callback();
|
||||
})
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
showDimmer: function() {
|
||||
if($dimmable.dimmer('is animating') || !$dimmable.dimmer('is active') ) {
|
||||
module.debug('Showing dimmer');
|
||||
$dimmable.dimmer('show');
|
||||
}
|
||||
else {
|
||||
module.debug('Dimmer already visible');
|
||||
}
|
||||
},
|
||||
|
||||
hideDimmer: function() {
|
||||
if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) {
|
||||
$dimmable.dimmer('hide', function() {
|
||||
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
|
||||
module.remove.clickaway();
|
||||
module.remove.screenHeight();
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
module.debug('Dimmer is not visible cannot hide');
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
hideAll: function(callback) {
|
||||
var
|
||||
$visibleModals = $allModals.filter(':visible')
|
||||
;
|
||||
callback = $.isFunction(callback)
|
||||
? callback
|
||||
: function(){}
|
||||
;
|
||||
if( $visibleModals.length > 0 ) {
|
||||
module.debug('Hiding all visible modals');
|
||||
module.hideDimmer();
|
||||
$visibleModals
|
||||
.modal('hide modal', callback)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
hideOthers: function(callback) {
|
||||
var
|
||||
$visibleModals = $otherModals.filter(':visible')
|
||||
;
|
||||
callback = $.isFunction(callback)
|
||||
? callback
|
||||
: function(){}
|
||||
;
|
||||
if( $visibleModals.length > 0 ) {
|
||||
module.debug('Hiding other modals', $otherModals);
|
||||
$visibleModals
|
||||
.modal('hide modal', callback, true)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
othersActive: function() {
|
||||
return ($otherModals.filter('.' + className.active).length > 0);
|
||||
},
|
||||
|
||||
add: {
|
||||
keyboardShortcuts: function() {
|
||||
module.verbose('Adding keyboard shortcuts');
|
||||
$document
|
||||
.on('keyup' + eventNamespace, module.event.keyboard)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
save: {
|
||||
focus: function() {
|
||||
$focusedElement = $(document.activeElement).blur();
|
||||
}
|
||||
},
|
||||
|
||||
restore: {
|
||||
focus: function() {
|
||||
if($focusedElement && $focusedElement.length > 0) {
|
||||
$focusedElement.focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
remove: {
|
||||
active: function() {
|
||||
$module.removeClass(className.active);
|
||||
},
|
||||
clickaway: function() {
|
||||
if(settings.closable) {
|
||||
$dimmer
|
||||
.off('click' + elementNamespace)
|
||||
;
|
||||
}
|
||||
},
|
||||
screenHeight: function() {
|
||||
if(module.cache.height > module.cache.pageHeight) {
|
||||
module.debug('Removing page height');
|
||||
$body
|
||||
.css('height', '')
|
||||
;
|
||||
}
|
||||
},
|
||||
keyboardShortcuts: function() {
|
||||
module.verbose('Removing keyboard shortcuts');
|
||||
$document
|
||||
.off('keyup' + eventNamespace)
|
||||
;
|
||||
},
|
||||
scrolling: function() {
|
||||
$dimmable.removeClass(className.scrolling);
|
||||
$module.removeClass(className.scrolling);
|
||||
}
|
||||
},
|
||||
|
||||
cacheSizes: function() {
|
||||
var
|
||||
modalHeight = $module.outerHeight()
|
||||
;
|
||||
if(module.cache === undefined || modalHeight !== 0) {
|
||||
module.cache = {
|
||||
pageHeight : $(document).outerHeight(),
|
||||
height : modalHeight + settings.offset,
|
||||
contextHeight : (settings.context == 'body')
|
||||
? $(window).height()
|
||||
: $dimmable.height()
|
||||
};
|
||||
}
|
||||
module.debug('Caching modal and container sizes', module.cache);
|
||||
},
|
||||
|
||||
can: {
|
||||
fit: function() {
|
||||
return ( ( module.cache.height + (settings.padding * 2) ) < module.cache.contextHeight);
|
||||
}
|
||||
},
|
||||
|
||||
is: {
|
||||
active: function() {
|
||||
return $module.hasClass(className.active);
|
||||
},
|
||||
animating: function() {
|
||||
return $module.transition('is supported')
|
||||
? $module.transition('is animating')
|
||||
: $module.is(':visible')
|
||||
;
|
||||
},
|
||||
scrolling: function() {
|
||||
return $dimmable.hasClass(className.scrolling);
|
||||
},
|
||||
modernBrowser: function() {
|
||||
// appName for IE11 reports 'Netscape' can no longer use
|
||||
return !(window.ActiveXObject || "ActiveXObject" in window);
|
||||
}
|
||||
},
|
||||
|
||||
set: {
|
||||
autofocus: function() {
|
||||
if(settings.autofocus) {
|
||||
var
|
||||
$inputs = $module.find(':input:visible'),
|
||||
$autofocus = $inputs.filter('[autofocus]'),
|
||||
$input = ($autofocus.length > 0)
|
||||
? $autofocus
|
||||
: $inputs
|
||||
;
|
||||
$input.first().focus();
|
||||
}
|
||||
},
|
||||
clickaway: function() {
|
||||
if(settings.closable) {
|
||||
$dimmer
|
||||
.on('click' + elementNamespace, module.event.click)
|
||||
;
|
||||
}
|
||||
},
|
||||
screenHeight: function() {
|
||||
if( module.can.fit() ) {
|
||||
$body.css('height', '');
|
||||
}
|
||||
else {
|
||||
module.debug('Modal is taller than page content, resizing page height');
|
||||
$body
|
||||
.css('height', module.cache.height + (settings.padding / 2) )
|
||||
;
|
||||
}
|
||||
},
|
||||
active: function() {
|
||||
$module.addClass(className.active);
|
||||
},
|
||||
scrolling: function() {
|
||||
$dimmable.addClass(className.scrolling);
|
||||
$module.addClass(className.scrolling);
|
||||
},
|
||||
type: function() {
|
||||
if(module.can.fit()) {
|
||||
module.verbose('Modal fits on screen');
|
||||
if(!module.othersActive) {
|
||||
module.remove.scrolling();
|
||||
}
|
||||
}
|
||||
else {
|
||||
module.verbose('Modal cannot fit on screen setting to scrolling');
|
||||
module.set.scrolling();
|
||||
}
|
||||
},
|
||||
position: function() {
|
||||
module.verbose('Centering modal on page', module.cache);
|
||||
if(module.can.fit()) {
|
||||
$module
|
||||
.css({
|
||||
top: '',
|
||||
marginTop: -(module.cache.height / 2)
|
||||
})
|
||||
;
|
||||
}
|
||||
else {
|
||||
$module
|
||||
.css({
|
||||
marginTop : '',
|
||||
top : $document.scrollTop()
|
||||
})
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
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 {
|
||||
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) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.modal.settings = {
|
||||
|
||||
name : 'Modal',
|
||||
namespace : 'modal',
|
||||
|
||||
debug : false,
|
||||
verbose : true,
|
||||
performance : true,
|
||||
|
||||
allowMultiple : false,
|
||||
detachable : true,
|
||||
closable : true,
|
||||
autofocus : true,
|
||||
|
||||
dimmerSettings : {
|
||||
closable : false,
|
||||
useCSS : true
|
||||
},
|
||||
|
||||
context : 'body',
|
||||
|
||||
queue : false,
|
||||
duration : 500,
|
||||
easing : 'easeOutExpo',
|
||||
offset : 0,
|
||||
transition : 'scale',
|
||||
|
||||
padding : 50,
|
||||
|
||||
onShow : function(){},
|
||||
onHide : function(){},
|
||||
|
||||
onVisible : function(){},
|
||||
onHidden : function(){},
|
||||
|
||||
onApprove : function(){ return true; },
|
||||
onDeny : function(){ return true; },
|
||||
|
||||
selector : {
|
||||
close : '.close, .actions .button',
|
||||
approve : '.actions .positive, .actions .approve, .actions .ok',
|
||||
deny : '.actions .negative, .actions .deny, .actions .cancel',
|
||||
modal : '.ui.modal'
|
||||
},
|
||||
error : {
|
||||
dimmer : 'UI Dimmer, a required component is not included in this page',
|
||||
method : 'The method you called is not defined.',
|
||||
notFound : 'The element you specified could not be found'
|
||||
},
|
||||
className : {
|
||||
active : 'active',
|
||||
animating : 'animating',
|
||||
scrolling : 'scrolling'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
})( jQuery, window , document );
|
||||
438
web/semantic/src/definitions/modules/modal.less
Normal file
438
web/semantic/src/definitions/modules/modal.less
Normal file
|
|
@ -0,0 +1,438 @@
|
|||
/*!
|
||||
* # Semantic UI - Modal
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'modal';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Modal
|
||||
*******************************/
|
||||
|
||||
.ui.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: @zIndex;
|
||||
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
text-align: left;
|
||||
|
||||
width: @width;
|
||||
margin-left: @xOffset;
|
||||
|
||||
background: @background;
|
||||
border: @border;
|
||||
box-shadow: @boxShadow;
|
||||
|
||||
border-radius: @borderRadius;
|
||||
user-select: text;
|
||||
will-change: top, left, margin, transform, opacity;
|
||||
}
|
||||
|
||||
.ui.modal > :first-child:not(.icon),
|
||||
.ui.modal > .icon:first-child + * {
|
||||
border-top-left-radius: @borderRadius;
|
||||
border-top-right-radius: @borderRadius;
|
||||
}
|
||||
|
||||
.ui.modal > :last-child {
|
||||
border-bottom-left-radius: @borderRadius;
|
||||
border-bottom-right-radius: @borderRadius;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Close
|
||||
---------------*/
|
||||
|
||||
.ui.modal > .close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: @closeTop;
|
||||
right: @closeRight;
|
||||
z-index: 1;
|
||||
|
||||
opacity: @closeOpacity;
|
||||
font-size: @closeSize;
|
||||
color: @closeColor;
|
||||
|
||||
width: @closeHitbox;
|
||||
height: @closeHitbox;
|
||||
padding: @closePadding;
|
||||
}
|
||||
.ui.modal > .close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Header
|
||||
---------------*/
|
||||
|
||||
.ui.modal > .header {
|
||||
display: block;
|
||||
font-family: @headerFontFamily;
|
||||
background: @headerBackground;
|
||||
margin: @headerMargin;
|
||||
padding: @headerPadding;
|
||||
box-shadow: @headerBoxShadow;
|
||||
|
||||
font-size: @headerFontSize;
|
||||
line-height: @headerLineHeight;
|
||||
font-weight: @headerFontWeight;
|
||||
color: @headerColor;
|
||||
border-bottom: @headerBorder;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
.ui.modal > .content {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
font-size: @contentFontSize;
|
||||
line-height: @contentLineHeight;
|
||||
padding: @contentPadding;
|
||||
background: @contentBackground;
|
||||
}
|
||||
|
||||
/* Image */
|
||||
.ui.modal > .content > .image {
|
||||
display: table-cell;
|
||||
width: @imageWidth;
|
||||
vertical-align: @imageVerticalAlign;
|
||||
}
|
||||
.ui.modal > .content > .image[class*="top aligned"] {
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.modal > .content > .image[class*="middle aligned"] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Description */
|
||||
.ui.modal > .content > .description {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
vertical-align: @descriptionVerticalAlign;
|
||||
}
|
||||
|
||||
.ui.modal > .content > .icon + .description,
|
||||
.ui.modal > .content > .image + .description {
|
||||
min-width: @descriptionMinWidth;
|
||||
width: @descriptionWidth;
|
||||
padding-left: @descriptionDistance;
|
||||
}
|
||||
|
||||
/*rtl:ignore*/
|
||||
.ui.modal > .content > .image > i.icon {
|
||||
font-size: @imageIconSize;
|
||||
margin: 0em;
|
||||
opacity: 1;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Actions
|
||||
---------------*/
|
||||
|
||||
.ui.modal .actions {
|
||||
background: @actionBackground;
|
||||
padding: @actionPadding;
|
||||
border-top: @actionBorder;
|
||||
text-align: @actionAlign;
|
||||
}
|
||||
.ui.modal .actions > .button {
|
||||
margin-left: @buttonDistance;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Responsive
|
||||
--------------------*/
|
||||
|
||||
/* Modal Width */
|
||||
@media only screen and (max-width : @largestMobileScreen) {
|
||||
.ui.modal {
|
||||
width: @mobileWidth;
|
||||
margin: @mobileMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @tabletBreakpoint) {
|
||||
.ui.modal {
|
||||
width: @tabletWidth;
|
||||
margin: @tabletMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @computerBreakpoint) {
|
||||
.ui.modal {
|
||||
width: @computerWidth;
|
||||
margin: @computerMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @largeMonitorBreakpoint) {
|
||||
.ui.modal {
|
||||
width: @largeMonitorWidth;
|
||||
margin: @largeMonitorMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
|
||||
.ui.modal {
|
||||
width: @widescreenMonitorWidth;
|
||||
margin: @widescreenMonitorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet and Mobile */
|
||||
@media only screen and (max-width : @computerBreakpoint) {
|
||||
.ui.modal > .header {
|
||||
padding-right: @closeHitbox;
|
||||
}
|
||||
.ui.modal > .close {
|
||||
top: @innerCloseTop;
|
||||
right: @innerCloseRight;
|
||||
color: @innerCloseColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width : @largestMobileScreen) {
|
||||
|
||||
.ui.modal > .header {
|
||||
padding: @mobileHeaderPadding !important;
|
||||
padding-right: @closeHitbox !important;
|
||||
}
|
||||
.ui.modal > .content {
|
||||
display: block;
|
||||
padding: @mobileContentPadding !important;
|
||||
}
|
||||
.ui.modal > .close {
|
||||
top: @mobileCloseTop !important;
|
||||
right: @mobileCloseRight !important;
|
||||
}
|
||||
|
||||
/*rtl:ignore*/
|
||||
.ui.modal .content > .image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0em auto !important;
|
||||
text-align: center;
|
||||
padding: @mobileImagePadding !important;
|
||||
}
|
||||
.ui.modal > .content > .image > i.icon {
|
||||
font-size: @mobileImageIconSize;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*rtl:ignore*/
|
||||
.ui.modal .content > .description {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
margin: 0em !important;
|
||||
padding: @mobileDescriptionPadding !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Let Buttons Stack */
|
||||
.ui.modal > .actions {
|
||||
padding: @mobileActionPadding !important;
|
||||
}
|
||||
.ui.modal .actions > .buttons,
|
||||
.ui.modal .actions > .button {
|
||||
margin-bottom: @mobileButtonDistance;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
.ui.basic.modal {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0em;
|
||||
box-shadow: 0px 0px 0px 0px;
|
||||
color: @basicModalColor;
|
||||
}
|
||||
.ui.basic.modal > .header,
|
||||
.ui.basic.modal > .content,
|
||||
.ui.basic.modal > .actions {
|
||||
background-color: transparent;
|
||||
}
|
||||
.ui.basic.modal > .header {
|
||||
color: @basicModalHeaderColor;
|
||||
}
|
||||
.ui.basic.modal > .close {
|
||||
top: @basicModalCloseTop;
|
||||
right: @basicModalCloseRight;
|
||||
}
|
||||
|
||||
/* Tablet and Mobile */
|
||||
@media only screen and (max-width : @computerBreakpoint) {
|
||||
|
||||
.ui.basic.modal > .close {
|
||||
color: @basicInnerCloseColor;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/* A modal that cannot fit on the page */
|
||||
.scrolling.dimmable.dimmed {
|
||||
overflow: hidden;
|
||||
}
|
||||
.scrolling.dimmable.dimmed > .dimmer {
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.scrolling.dimmable > .dimmer {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.ui.scrolling.modal {
|
||||
position: static;
|
||||
margin: @scrollingMargin auto !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width : @computerBreakpoint) {
|
||||
.ui.scrolling.modal {
|
||||
margin-top: @mobileScrollingMargin;
|
||||
margin-bottom: @mobileScrollingMargin;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.active.modal {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Full Screen
|
||||
---------------*/
|
||||
|
||||
.ui.fullscreen.modal {
|
||||
width: @fullScreenWidth !important;
|
||||
left: @fullScreenOffset !important;
|
||||
margin: @fullScreenMargin;
|
||||
}
|
||||
.ui.fullscreen.scrolling.modal {
|
||||
left: 0em !important;
|
||||
}
|
||||
.ui.fullscreen.modal > .header {
|
||||
padding-right: @closeHitbox;
|
||||
}
|
||||
.ui.fullscreen.modal > .close {
|
||||
top: @innerCloseTop;
|
||||
right: @innerCloseRight;
|
||||
color: @innerCloseColor;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Size
|
||||
---------------*/
|
||||
|
||||
.ui.modal {
|
||||
font-size: @medium;
|
||||
}
|
||||
|
||||
/* Small */
|
||||
.ui.small.modal > .header {
|
||||
font-size: @smallHeaderSize;
|
||||
}
|
||||
|
||||
/* Small Modal Width */
|
||||
@media only screen and (max-width : @largestMobileScreen) {
|
||||
.ui.small.modal {
|
||||
width: @smallMobileWidth;
|
||||
margin: @smallMobileMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @tabletBreakpoint) {
|
||||
.ui.small.modal {
|
||||
width: @smallTabletWidth;
|
||||
margin: @smallTabletMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @computerBreakpoint) {
|
||||
.ui.small.modal {
|
||||
width: @smallComputerWidth;
|
||||
margin: @smallComputerMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @largeMonitorBreakpoint) {
|
||||
.ui.small.modal {
|
||||
width: @smallLargeMonitorWidth;
|
||||
margin: @smallLargeMonitorMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
|
||||
.ui.small.modal {
|
||||
width: @smallWidescreenMonitorWidth;
|
||||
margin: @smallWidescreenMonitorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Modal Width */
|
||||
.ui.large.modal > .header {
|
||||
font-size: @largeHeaderSize;
|
||||
}
|
||||
@media only screen and (max-width : @largestMobileScreen) {
|
||||
.ui.large.modal {
|
||||
width: @largeMobileWidth;
|
||||
margin: @largeMobileMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @tabletBreakpoint) {
|
||||
.ui.large.modal {
|
||||
width: @largeTabletWidth;
|
||||
margin: @largeTabletMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @computerBreakpoint) {
|
||||
.ui.large.modal {
|
||||
width: @largeComputerWidth;
|
||||
margin: @largeComputerMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @largeMonitorBreakpoint) {
|
||||
.ui.large.modal {
|
||||
width: @largeLargeMonitorWidth;
|
||||
margin: @largeLargeMonitorMargin;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : @widescreenMonitorBreakpoint) {
|
||||
.ui.large.modal {
|
||||
width: @largeWidescreenMonitorWidth;
|
||||
margin: @largeWidescreenMonitorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
477
web/semantic/src/definitions/modules/nag.js
Normal file
477
web/semantic/src/definitions/modules/nag.js
Normal file
|
|
@ -0,0 +1,477 @@
|
|||
/*!
|
||||
* # Semantic UI - Nag
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
$.fn.nag = 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 = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.fn.nag.settings, parameters)
|
||||
: $.extend({}, $.fn.nag.settings),
|
||||
|
||||
className = settings.className,
|
||||
selector = settings.selector,
|
||||
error = settings.error,
|
||||
namespace = settings.namespace,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = namespace + '-module',
|
||||
|
||||
$module = $(this),
|
||||
|
||||
$close = $module.find(selector.close),
|
||||
$context = (settings.context)
|
||||
? $(settings.context)
|
||||
: $('body'),
|
||||
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
|
||||
moduleOffset,
|
||||
moduleHeight,
|
||||
|
||||
contextWidth,
|
||||
contextHeight,
|
||||
contextOffset,
|
||||
|
||||
yOffset,
|
||||
yPosition,
|
||||
|
||||
timer,
|
||||
module,
|
||||
|
||||
requestAnimationFrame = window.requestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| function(callback) { setTimeout(callback, 0); }
|
||||
;
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.verbose('Initializing element');
|
||||
|
||||
$module
|
||||
.data(moduleNamespace, module)
|
||||
;
|
||||
$close
|
||||
.on('click' + eventNamespace, module.dismiss)
|
||||
;
|
||||
|
||||
if(settings.detachable && $module.parent()[0] !== $context[0]) {
|
||||
$module
|
||||
.detach()
|
||||
.prependTo($context)
|
||||
;
|
||||
}
|
||||
|
||||
if(settings.displayTime > 0) {
|
||||
setTimeout(module.hide, settings.displayTime);
|
||||
}
|
||||
module.show();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying instance');
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
.off(eventNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
show: function() {
|
||||
if( module.should.show() && !$module.is(':visible') ) {
|
||||
module.debug('Showing nag', settings.animation.show);
|
||||
if(settings.animation.show == 'fade') {
|
||||
$module
|
||||
.fadeIn(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
else {
|
||||
$module
|
||||
.slideDown(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
module.debug('Showing nag', settings.animation.hide);
|
||||
if(settings.animation.show == 'fade') {
|
||||
$module
|
||||
.fadeIn(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
else {
|
||||
$module
|
||||
.slideUp(settings.duration, settings.easing)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
onHide: function() {
|
||||
module.debug('Removing nag', settings.animation.hide);
|
||||
$module.remove();
|
||||
if (settings.onHide) {
|
||||
settings.onHide();
|
||||
}
|
||||
},
|
||||
|
||||
dismiss: function(event) {
|
||||
if(settings.storageMethod) {
|
||||
module.storage.set(settings.key, settings.value);
|
||||
}
|
||||
module.hide();
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
should: {
|
||||
show: function() {
|
||||
if(settings.persist) {
|
||||
module.debug('Persistent nag is set, can show nag');
|
||||
return true;
|
||||
}
|
||||
if( module.storage.get(settings.key) != settings.value.toString() ) {
|
||||
module.debug('Stored value is not set, can show nag', module.storage.get(settings.key));
|
||||
return true;
|
||||
}
|
||||
module.debug('Stored value is set, cannot show nag', module.storage.get(settings.key));
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
get: {
|
||||
storageOptions: function() {
|
||||
var
|
||||
options = {}
|
||||
;
|
||||
if(settings.expires) {
|
||||
options.expires = settings.expires;
|
||||
}
|
||||
if(settings.domain) {
|
||||
options.domain = settings.domain;
|
||||
}
|
||||
if(settings.path) {
|
||||
options.path = settings.path;
|
||||
}
|
||||
return options;
|
||||
}
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
module.storage.remove(settings.key);
|
||||
},
|
||||
|
||||
storage: {
|
||||
set: function(key, value) {
|
||||
var
|
||||
options = module.get.storageOptions()
|
||||
;
|
||||
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
|
||||
window.localStorage.setItem(key, value);
|
||||
module.debug('Value stored using local storage', key, value);
|
||||
}
|
||||
else if($.cookie !== undefined) {
|
||||
$.cookie(key, value, options);
|
||||
module.debug('Value stored using cookie', key, value, options);
|
||||
}
|
||||
else {
|
||||
module.error(error.noCookieStorage);
|
||||
return;
|
||||
}
|
||||
},
|
||||
get: function(key, value) {
|
||||
var
|
||||
storedValue
|
||||
;
|
||||
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
|
||||
storedValue = window.localStorage.getItem(key);
|
||||
}
|
||||
// get by cookie
|
||||
else if($.cookie !== undefined) {
|
||||
storedValue = $.cookie(key);
|
||||
}
|
||||
else {
|
||||
module.error(error.noCookieStorage);
|
||||
}
|
||||
if(storedValue == 'undefined' || storedValue == 'null' || storedValue === undefined || storedValue === null) {
|
||||
storedValue = undefined;
|
||||
}
|
||||
return storedValue;
|
||||
},
|
||||
remove: function(key) {
|
||||
var
|
||||
options = module.get.storageOptions()
|
||||
;
|
||||
if(settings.storageMethod == 'local' && window.store !== undefined) {
|
||||
window.localStorage.removeItem(key);
|
||||
}
|
||||
// store by cookie
|
||||
else if($.cookie !== undefined) {
|
||||
$.removeCookie(key, options);
|
||||
}
|
||||
else {
|
||||
module.error(error.noStorage);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
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) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.nag.settings = {
|
||||
|
||||
name : 'Nag',
|
||||
|
||||
debug : false,
|
||||
verbose : true,
|
||||
performance : true,
|
||||
|
||||
namespace : 'Nag',
|
||||
|
||||
// allows cookie to be overriden
|
||||
persist : false,
|
||||
|
||||
// set to zero to require manually dismissal, otherwise hides on its own
|
||||
displayTime : 0,
|
||||
|
||||
animation : {
|
||||
show : 'slide',
|
||||
hide : 'slide'
|
||||
},
|
||||
|
||||
context : false,
|
||||
detachable : false,
|
||||
|
||||
expires : 30,
|
||||
domain : false,
|
||||
path : '/',
|
||||
|
||||
// type of storage to use
|
||||
storageMethod : 'cookie',
|
||||
|
||||
// value to store in dismissed localstorage/cookie
|
||||
key : 'nag',
|
||||
value : 'dismiss',
|
||||
|
||||
error: {
|
||||
noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state',
|
||||
method : 'The method you called is not defined.'
|
||||
},
|
||||
|
||||
className : {
|
||||
bottom : 'bottom',
|
||||
fixed : 'fixed'
|
||||
},
|
||||
|
||||
selector : {
|
||||
close : '.close.icon'
|
||||
},
|
||||
|
||||
speed : 500,
|
||||
easing : 'easeOutQuad',
|
||||
|
||||
onHide: function() {}
|
||||
|
||||
};
|
||||
|
||||
})( jQuery, window , document );
|
||||
159
web/semantic/src/definitions/modules/nag.less
Normal file
159
web/semantic/src/definitions/modules/nag.less
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
/*!
|
||||
* # Semantic UI - Nag
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'nag';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Nag
|
||||
*******************************/
|
||||
|
||||
.ui.nag {
|
||||
display: none;
|
||||
opacity: @opacity;
|
||||
position: @position;
|
||||
|
||||
top: @top;
|
||||
left: 0px;
|
||||
z-index: @zIndex;
|
||||
|
||||
min-height: @minHeight;
|
||||
width: @width;
|
||||
|
||||
margin: @margin;
|
||||
padding: @padding;
|
||||
|
||||
background: @background;
|
||||
box-shadow: @boxShadow;
|
||||
|
||||
font-size: @fontSize;
|
||||
text-align: @textAlign;
|
||||
color: @color;
|
||||
|
||||
border-radius: @topBorderRadius;
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
a.ui.nag {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.nag > .title {
|
||||
display: inline-block;
|
||||
margin: @titleMargin;
|
||||
color: @titleColor;
|
||||
}
|
||||
|
||||
|
||||
.ui.nag > .close.icon {
|
||||
cursor: pointer;
|
||||
opacity: @closeOpacity;
|
||||
|
||||
position: absolute;
|
||||
top: @closeTop;
|
||||
right: @closeRight;
|
||||
|
||||
font-size: @closeSize;
|
||||
|
||||
margin: @closeMargin;
|
||||
color: @closeColor;
|
||||
transition: @closeTransition;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/* Hover */
|
||||
.ui.nag:hover {
|
||||
background: @nagHoverBackground;
|
||||
opacity: @nagHoverOpacity;
|
||||
}
|
||||
|
||||
.ui.nag .close:hover {
|
||||
opacity: @closeHoverOpacity;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Static
|
||||
---------------*/
|
||||
|
||||
.ui.overlay.nag {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Fixed
|
||||
---------------*/
|
||||
|
||||
.ui.fixed.nag {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Bottom
|
||||
---------------*/
|
||||
|
||||
.ui.bottom.nags,
|
||||
.ui.bottom.nag {
|
||||
border-radius: @bottomBorderRadius;
|
||||
top: auto;
|
||||
bottom: @bottom;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
White
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.nags .nag,
|
||||
.ui.inverted.nag {
|
||||
background-color: @invertedBackground;
|
||||
color: @darkTextColor;
|
||||
}
|
||||
.ui.inverted.nags .nag .close,
|
||||
.ui.inverted.nags .nag .title,
|
||||
.ui.inverted.nag .close,
|
||||
.ui.inverted.nag .title {
|
||||
color: @lightTextColor;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
.ui.nags .nag {
|
||||
border-radius: @groupedBorderRadius !important;
|
||||
}
|
||||
.ui.nags .nag:last-child {
|
||||
border-radius: @topBorderRadius;
|
||||
}
|
||||
.ui.bottom.nags .nag:last-child {
|
||||
border-radius: @bottomBorderRadius;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
1224
web/semantic/src/definitions/modules/popup.js
Normal file
1224
web/semantic/src/definitions/modules/popup.js
Normal file
File diff suppressed because it is too large
Load diff
294
web/semantic/src/definitions/modules/popup.less
Normal file
294
web/semantic/src/definitions/modules/popup.less
Normal file
|
|
@ -0,0 +1,294 @@
|
|||
/*!
|
||||
* # Semantic UI - Popup
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'popup';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Popup
|
||||
*******************************/
|
||||
|
||||
.ui.popup {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
|
||||
/* Fixes content being squished when inline (moz only) */
|
||||
min-width: -moz-max-content;
|
||||
|
||||
z-index: @zIndex;
|
||||
|
||||
border: @border;
|
||||
max-width: @maxWidth;
|
||||
background-color: @background;
|
||||
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
font-weight: @fontWeight;
|
||||
font-style: @fontStyle;
|
||||
color: @color;
|
||||
|
||||
border-radius: @borderRadius;
|
||||
box-shadow: @boxShadow;
|
||||
}
|
||||
.ui.popup > .header {
|
||||
padding: 0em;
|
||||
|
||||
font-family: @headerFont;
|
||||
font-size: @headerFontSize;
|
||||
line-height: @headerLineHeight;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui.popup > .header + .content {
|
||||
padding-top: @headerDistance;
|
||||
}
|
||||
|
||||
.ui.popup:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: @arrowSize;
|
||||
height: @arrowSize;
|
||||
|
||||
background: @arrowBackground;
|
||||
transform: rotate(45deg);
|
||||
|
||||
z-index: @arrowZIndex;
|
||||
box-shadow: @arrowBoxShadow;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Spacing
|
||||
---------------*/
|
||||
|
||||
.ui.popup {
|
||||
margin: 0em;
|
||||
}
|
||||
.ui.popup.bottom {
|
||||
margin: @popupDistanceAway 0em 0em;
|
||||
}
|
||||
.ui.popup.top {
|
||||
margin: 0em 0em @popupDistanceAway;
|
||||
}
|
||||
.ui.popup.left.center {
|
||||
margin: 0em @popupDistanceAway 0em 0em;
|
||||
}
|
||||
.ui.popup.right.center {
|
||||
margin: 0em 0em 0em @popupDistanceAway;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Pointer
|
||||
---------------*/
|
||||
|
||||
/*--- Below ---*/
|
||||
.ui.bottom.center.popup:before {
|
||||
margin-left: @arrowOffset;
|
||||
top: @arrowOffset;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
box-shadow: @bottomArrowBoxShadow;
|
||||
}
|
||||
|
||||
.ui.bottom.left.popup {
|
||||
margin-left: @boxArrowOffset;
|
||||
}
|
||||
.ui.bottom.left.popup:before {
|
||||
top: @arrowOffset;
|
||||
left: @arrowDistanceFromEdge;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
margin-left: 0em;
|
||||
box-shadow: @bottomArrowBoxShadow;
|
||||
}
|
||||
|
||||
.ui.bottom.right.popup {
|
||||
margin-right: @boxArrowOffset;
|
||||
}
|
||||
.ui.bottom.right.popup:before {
|
||||
top: @arrowOffset;
|
||||
right: @arrowDistanceFromEdge;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
margin-left: 0em;
|
||||
box-shadow: @bottomArrowBoxShadow;
|
||||
}
|
||||
|
||||
/*--- Above ---*/
|
||||
.ui.top.center.popup:before {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: @arrowOffset;
|
||||
left: 50%;
|
||||
margin-left: @arrowOffset;
|
||||
}
|
||||
.ui.top.left.popup {
|
||||
margin-left: @boxArrowOffset;
|
||||
}
|
||||
.ui.top.left.popup:before {
|
||||
bottom: @arrowOffset;
|
||||
left: @arrowDistanceFromEdge;
|
||||
top: auto;
|
||||
right: auto;
|
||||
margin-left: 0em;
|
||||
}
|
||||
.ui.top.right.popup {
|
||||
margin-right: @boxArrowOffset;
|
||||
}
|
||||
.ui.top.right.popup:before {
|
||||
bottom: @arrowOffset;
|
||||
right: @arrowDistanceFromEdge;
|
||||
top: auto;
|
||||
left: auto;
|
||||
margin-left: 0em;
|
||||
}
|
||||
|
||||
/*--- Left Center ---*/
|
||||
.ui.left.center.popup:before {
|
||||
top: 50%;
|
||||
right: @arrowOffset;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
margin-top: @arrowOffset;
|
||||
box-shadow: @leftArrowBoxShadow;
|
||||
}
|
||||
|
||||
/*--- Right Center ---*/
|
||||
.ui.right.center.popup:before {
|
||||
top: 50%;
|
||||
left: @arrowOffset;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
margin-top: @arrowOffset;
|
||||
box-shadow: @rightArrowBoxShadow;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Coupling
|
||||
*******************************/
|
||||
|
||||
/* Immediate Nested Grid */
|
||||
.ui.popup > .ui.grid:not(.padded) {
|
||||
width: @nestedGridWidth;
|
||||
margin: @nestedGridMargin;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.loading.popup {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
z-index: @loadingZIndex;
|
||||
}
|
||||
|
||||
.ui.animating.popup,
|
||||
.ui.visible.popup {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Basic
|
||||
---------------*/
|
||||
|
||||
.ui.basic.popup:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Wide
|
||||
---------------*/
|
||||
|
||||
.ui.wide.popup {
|
||||
max-width: @wideWidth;
|
||||
}
|
||||
.ui[class*="very wide"].popup {
|
||||
max-width: @veryWideWidth;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Fluid
|
||||
---------------*/
|
||||
|
||||
.ui.fluid.popup {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Colors
|
||||
---------------*/
|
||||
|
||||
/* Inverted colors */
|
||||
.ui.inverted.popup {
|
||||
background: @invertedBackground;
|
||||
color: @invertedColor;
|
||||
border: @invertedBorder;
|
||||
box-shadow: @invertedBoxShadow;
|
||||
}
|
||||
.ui.inverted.popup .header {
|
||||
background-color: @invertedHeaderBackground;
|
||||
color: @invertedHeaderColor;
|
||||
}
|
||||
.ui.inverted.popup:before {
|
||||
background-color: @invertedArrowColor;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Flowing
|
||||
---------------*/
|
||||
|
||||
.ui.flowing.popup {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
.ui.small.popup {
|
||||
font-size: @small;
|
||||
}
|
||||
.ui.popup {
|
||||
font-size: @medium;
|
||||
}
|
||||
.ui.large.popup {
|
||||
font-size: @large;
|
||||
}
|
||||
.ui.huge.popup {
|
||||
font-size: @huge;
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
785
web/semantic/src/definitions/modules/progress.js
Normal file
785
web/semantic/src/definitions/modules/progress.js
Normal file
|
|
@ -0,0 +1,785 @@
|
|||
/*!
|
||||
* # Semantic UI - Progress
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ( $, window, document, undefined ) {
|
||||
|
||||
"use strict";
|
||||
|
||||
$.fn.progress = 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 = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.fn.progress.settings, parameters)
|
||||
: $.extend({}, $.fn.progress.settings),
|
||||
|
||||
className = settings.className,
|
||||
metadata = settings.metadata,
|
||||
namespace = settings.namespace,
|
||||
selector = settings.selector,
|
||||
error = settings.error,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = 'module-' + namespace,
|
||||
|
||||
$module = $(this),
|
||||
$bar = $(this).find(selector.bar),
|
||||
$progress = $(this).find(selector.progress),
|
||||
$label = $(this).find(selector.label),
|
||||
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
|
||||
animating = false,
|
||||
transitionEnd,
|
||||
module
|
||||
;
|
||||
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.debug('Initializing progress bar', settings);
|
||||
|
||||
transitionEnd = module.get.transitionEnd();
|
||||
|
||||
module.read.metadata();
|
||||
module.set.duration();
|
||||
module.set.initials();
|
||||
module.instantiate();
|
||||
},
|
||||
|
||||
instantiate: function() {
|
||||
module.verbose('Storing instance of progress', module);
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, module)
|
||||
;
|
||||
},
|
||||
destroy: function() {
|
||||
module.verbose('Destroying previous progress for', $module);
|
||||
clearInterval(instance.interval);
|
||||
module.remove.state();
|
||||
$module.removeData(moduleNamespace);
|
||||
instance = undefined;
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
module.set.percent(0);
|
||||
},
|
||||
|
||||
complete: function() {
|
||||
if(module.percent === undefined || module.percent < 100) {
|
||||
module.set.percent(100);
|
||||
}
|
||||
},
|
||||
|
||||
read: {
|
||||
metadata: function() {
|
||||
if( $module.data(metadata.percent) ) {
|
||||
module.verbose('Current percent value set from metadata');
|
||||
module.percent = $module.data(metadata.percent);
|
||||
}
|
||||
if( $module.data(metadata.total) ) {
|
||||
module.verbose('Total value set from metadata');
|
||||
module.total = $module.data(metadata.total);
|
||||
}
|
||||
if( $module.data(metadata.value) ) {
|
||||
module.verbose('Current value set from metadata');
|
||||
module.value = $module.data(metadata.value);
|
||||
}
|
||||
},
|
||||
currentValue: function() {
|
||||
return (module.value !== undefined)
|
||||
? module.value
|
||||
: false
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
increment: function(incrementValue) {
|
||||
var
|
||||
total = module.total || false,
|
||||
edgeValue,
|
||||
startValue,
|
||||
newValue
|
||||
;
|
||||
if(total) {
|
||||
startValue = module.value || 0;
|
||||
incrementValue = incrementValue || 1;
|
||||
newValue = startValue + incrementValue;
|
||||
edgeValue = module.total;
|
||||
module.debug('Incrementing value by', incrementValue, startValue, edgeValue);
|
||||
if(newValue > edgeValue ) {
|
||||
module.debug('Value cannot increment above total', edgeValue);
|
||||
newValue = edgeValue;
|
||||
}
|
||||
module.set.progress(newValue);
|
||||
}
|
||||
else {
|
||||
startValue = module.percent || 0;
|
||||
incrementValue = incrementValue || module.get.randomValue();
|
||||
newValue = startValue + incrementValue;
|
||||
edgeValue = 100;
|
||||
module.debug('Incrementing percentage by', incrementValue, startValue);
|
||||
if(newValue > edgeValue ) {
|
||||
module.debug('Value cannot increment above 100 percent');
|
||||
newValue = edgeValue;
|
||||
}
|
||||
module.set.progress(newValue);
|
||||
}
|
||||
},
|
||||
decrement: function(decrementValue) {
|
||||
var
|
||||
total = module.total || false,
|
||||
edgeValue = 0,
|
||||
startValue,
|
||||
newValue
|
||||
;
|
||||
if(total) {
|
||||
startValue = module.value || 0;
|
||||
decrementValue = decrementValue || 1;
|
||||
newValue = startValue - decrementValue;
|
||||
module.debug('Decrementing value by', decrementValue, startValue);
|
||||
}
|
||||
else {
|
||||
startValue = module.percent || 0;
|
||||
decrementValue = decrementValue || module.get.randomValue();
|
||||
newValue = startValue - decrementValue;
|
||||
module.debug('Decrementing percentage by', decrementValue, startValue);
|
||||
}
|
||||
|
||||
if(newValue < edgeValue) {
|
||||
module.debug('Value cannot decrement below 0');
|
||||
newValue = 0;
|
||||
}
|
||||
module.set.progress(newValue);
|
||||
},
|
||||
|
||||
get: {
|
||||
text: function(templateText) {
|
||||
var
|
||||
value = module.value || 0,
|
||||
total = module.total || 0,
|
||||
percent = (module.is.visible() && animating)
|
||||
? module.get.displayPercent()
|
||||
: module.percent || 0,
|
||||
left = (module.total > 0)
|
||||
? (total - value)
|
||||
: (100 - percent)
|
||||
;
|
||||
templateText = templateText || '';
|
||||
templateText = templateText
|
||||
.replace('{value}', value)
|
||||
.replace('{total}', total)
|
||||
.replace('{left}', left)
|
||||
.replace('{percent}', percent)
|
||||
;
|
||||
module.debug('Adding variables to progress bar text', templateText);
|
||||
return templateText;
|
||||
},
|
||||
randomValue: function() {
|
||||
module.debug('Generating random increment percentage');
|
||||
return Math.floor((Math.random() * settings.random.max) + settings.random.min);
|
||||
},
|
||||
|
||||
transitionEnd: 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];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// gets current displayed percentage (if animating values this is the intermediary value)
|
||||
displayPercent: function() {
|
||||
var
|
||||
barWidth = $bar.width(),
|
||||
totalWidth = $module.width(),
|
||||
minDisplay = parseInt($bar.css('min-width'), 10),
|
||||
displayPercent = (barWidth > minDisplay)
|
||||
? (barWidth / totalWidth * 100)
|
||||
: module.percent
|
||||
;
|
||||
if(settings.precision === 0) {
|
||||
return Math.round(displayPercent);
|
||||
}
|
||||
return Math.round(displayPercent * (10 * settings.precision) / (10 * settings.precision) );
|
||||
},
|
||||
|
||||
percent: function() {
|
||||
return module.percent || 0;
|
||||
},
|
||||
value: function() {
|
||||
return module.value || false;
|
||||
},
|
||||
total: function() {
|
||||
return module.total || false;
|
||||
}
|
||||
},
|
||||
|
||||
is: {
|
||||
success: function() {
|
||||
return $module.hasClass(className.success);
|
||||
},
|
||||
warning: function() {
|
||||
return $module.hasClass(className.warning);
|
||||
},
|
||||
error: function() {
|
||||
return $module.hasClass(className.error);
|
||||
},
|
||||
active: function() {
|
||||
return $module.hasClass(className.active);
|
||||
},
|
||||
visible: function() {
|
||||
return $module.is(':visible');
|
||||
}
|
||||
},
|
||||
|
||||
remove: {
|
||||
state: function() {
|
||||
module.verbose('Removing stored state');
|
||||
delete module.total;
|
||||
delete module.percent;
|
||||
delete module.value;
|
||||
},
|
||||
active: function() {
|
||||
module.verbose('Removing active state');
|
||||
$module.removeClass(className.active);
|
||||
},
|
||||
success: function() {
|
||||
module.verbose('Removing success state');
|
||||
$module.removeClass(className.success);
|
||||
},
|
||||
warning: function() {
|
||||
module.verbose('Removing warning state');
|
||||
$module.removeClass(className.warning);
|
||||
},
|
||||
error: function() {
|
||||
module.verbose('Removing error state');
|
||||
$module.removeClass(className.error);
|
||||
}
|
||||
},
|
||||
|
||||
set: {
|
||||
barWidth: function(value) {
|
||||
if(value > 100) {
|
||||
module.error(error.tooHigh, value);
|
||||
}
|
||||
else if (value < 0) {
|
||||
module.error(error.tooLow, value);
|
||||
}
|
||||
else {
|
||||
$bar
|
||||
.css('width', value + '%')
|
||||
;
|
||||
$module
|
||||
.attr('data-percent', parseInt(value, 10))
|
||||
;
|
||||
}
|
||||
},
|
||||
duration: function(duration) {
|
||||
duration = duration || settings.duration;
|
||||
duration = (typeof duration == 'number')
|
||||
? duration + 'ms'
|
||||
: duration
|
||||
;
|
||||
module.verbose('Setting progress bar transition duration', duration);
|
||||
$bar
|
||||
.css({
|
||||
'-webkit-transition-duration': duration,
|
||||
'-moz-transition-duration': duration,
|
||||
'-ms-transition-duration': duration,
|
||||
'-o-transition-duration': duration,
|
||||
'transition-duration': duration
|
||||
})
|
||||
;
|
||||
},
|
||||
initials: function() {
|
||||
if(settings.total !== false) {
|
||||
module.verbose('Current total set in settings', settings.total);
|
||||
module.total = settings.total;
|
||||
}
|
||||
if(settings.value !== false) {
|
||||
module.verbose('Current value set in settings', settings.value);
|
||||
module.value = settings.value;
|
||||
}
|
||||
if(settings.percent !== false) {
|
||||
module.verbose('Current percent set in settings', settings.percent);
|
||||
module.percent = settings.percent;
|
||||
}
|
||||
if(module.percent !== undefined) {
|
||||
module.set.percent(module.percent);
|
||||
}
|
||||
else if(module.value !== undefined) {
|
||||
module.set.progress(module.value);
|
||||
}
|
||||
},
|
||||
percent: function(percent) {
|
||||
percent = (typeof percent == 'string')
|
||||
? +(percent.replace('%', ''))
|
||||
: percent
|
||||
;
|
||||
if(percent > 0 && percent < 1) {
|
||||
module.verbose('Module percentage passed as decimal, converting');
|
||||
percent = percent * 100;
|
||||
}
|
||||
// round percentage
|
||||
if(settings.precision === 0) {
|
||||
percent = Math.round(percent);
|
||||
}
|
||||
else {
|
||||
percent = Math.round(percent * (10 * settings.precision) / (10 * settings.precision) );
|
||||
}
|
||||
module.percent = percent;
|
||||
if(module.total) {
|
||||
module.value = Math.round( (percent / 100) * module.total);
|
||||
}
|
||||
else if(settings.limitValues) {
|
||||
module.value = (module.value > 100)
|
||||
? 100
|
||||
: (module.value < 0)
|
||||
? 0
|
||||
: module.value
|
||||
;
|
||||
}
|
||||
module.set.barWidth(percent);
|
||||
if( module.is.visible() ) {
|
||||
module.set.labelInterval();
|
||||
}
|
||||
module.set.labels();
|
||||
settings.onChange.call(element, percent, module.value, module.total);
|
||||
},
|
||||
labelInterval: function() {
|
||||
var
|
||||
animationCallback = function() {
|
||||
module.verbose('Bar finished animating, removing continuous label updates');
|
||||
clearInterval(module.interval);
|
||||
animating = false;
|
||||
module.set.labels();
|
||||
}
|
||||
;
|
||||
clearInterval(module.interval);
|
||||
$bar.one(transitionEnd + eventNamespace, animationCallback);
|
||||
module.timer = setTimeout(animationCallback, settings.duration + 100);
|
||||
animating = true;
|
||||
module.interval = setInterval(module.set.labels, settings.framerate);
|
||||
},
|
||||
labels: function() {
|
||||
module.verbose('Setting both bar progress and outer label text');
|
||||
module.set.barLabel();
|
||||
module.set.state();
|
||||
},
|
||||
label: function(text) {
|
||||
text = text || '';
|
||||
if(text) {
|
||||
text = module.get.text(text);
|
||||
module.debug('Setting label to text', text);
|
||||
$label.text(text);
|
||||
}
|
||||
},
|
||||
state: function(percent) {
|
||||
percent = (percent !== undefined)
|
||||
? percent
|
||||
: module.percent
|
||||
;
|
||||
if(percent === 100) {
|
||||
if(settings.autoSuccess && !(module.is.warning() || module.is.error())) {
|
||||
module.set.success();
|
||||
module.debug('Automatically triggering success at 100%');
|
||||
}
|
||||
else {
|
||||
module.verbose('Reached 100% removing active state');
|
||||
module.remove.active();
|
||||
}
|
||||
}
|
||||
else if(percent > 0) {
|
||||
module.verbose('Adjusting active progress bar label', percent);
|
||||
module.set.active();
|
||||
}
|
||||
else {
|
||||
module.remove.active();
|
||||
module.set.label(settings.text.active);
|
||||
}
|
||||
},
|
||||
barLabel: function(text) {
|
||||
if(text !== undefined) {
|
||||
$progress.text( module.get.text(text) );
|
||||
}
|
||||
else if(settings.label == 'ratio' && module.total) {
|
||||
module.debug('Adding ratio to bar label');
|
||||
$progress.text( module.get.text(settings.text.ratio) );
|
||||
}
|
||||
else if(settings.label == 'percent') {
|
||||
module.debug('Adding percentage to bar label');
|
||||
$progress.text( module.get.text(settings.text.percent) );
|
||||
}
|
||||
},
|
||||
active: function(text) {
|
||||
text = text || settings.text.active;
|
||||
module.debug('Setting active state');
|
||||
if(settings.showActivity && !module.is.active() ) {
|
||||
$module.addClass(className.active);
|
||||
}
|
||||
module.remove.warning();
|
||||
module.remove.error();
|
||||
module.remove.success();
|
||||
if(text) {
|
||||
module.set.label(text);
|
||||
}
|
||||
settings.onActive.call(element, module.value, module.total);
|
||||
},
|
||||
success : function(text) {
|
||||
text = text || settings.text.success;
|
||||
module.debug('Setting success state');
|
||||
$module.addClass(className.success);
|
||||
module.remove.active();
|
||||
module.remove.warning();
|
||||
module.remove.error();
|
||||
module.complete();
|
||||
if(text) {
|
||||
module.set.label(text);
|
||||
}
|
||||
settings.onSuccess.call(element, module.total);
|
||||
},
|
||||
warning : function(text) {
|
||||
text = text || settings.text.warning;
|
||||
module.debug('Setting warning state');
|
||||
$module.addClass(className.warning);
|
||||
module.remove.active();
|
||||
module.remove.success();
|
||||
module.remove.error();
|
||||
module.complete();
|
||||
if(text) {
|
||||
module.set.label(text);
|
||||
}
|
||||
settings.onWarning.call(element, module.value, module.total);
|
||||
},
|
||||
error : function(text) {
|
||||
text = text || settings.text.error;
|
||||
module.debug('Setting error state');
|
||||
$module.addClass(className.error);
|
||||
module.remove.active();
|
||||
module.remove.success();
|
||||
module.remove.warning();
|
||||
module.complete();
|
||||
if(text) {
|
||||
module.set.label(text);
|
||||
}
|
||||
settings.onError.call(element, module.value, module.total);
|
||||
},
|
||||
total: function(totalValue) {
|
||||
module.total = totalValue;
|
||||
},
|
||||
progress: function(value) {
|
||||
var
|
||||
numericValue = (typeof value === 'string')
|
||||
? (value.replace(/[^\d.]/g, '') !== '')
|
||||
? +(value.replace(/[^\d.]/g, ''))
|
||||
: false
|
||||
: value,
|
||||
percentComplete
|
||||
;
|
||||
if(numericValue === false) {
|
||||
module.error(error.nonNumeric, value);
|
||||
}
|
||||
if(module.total) {
|
||||
module.value = numericValue;
|
||||
percentComplete = (numericValue / module.total) * 100;
|
||||
module.debug('Calculating percent complete from total', percentComplete);
|
||||
module.set.percent( percentComplete );
|
||||
}
|
||||
else {
|
||||
percentComplete = numericValue;
|
||||
module.debug('Setting value to exact percentage value', percentComplete);
|
||||
module.set.percent( percentComplete );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
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) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.progress.settings = {
|
||||
|
||||
name : 'Progress',
|
||||
namespace : 'progress',
|
||||
|
||||
debug : false,
|
||||
verbose : true,
|
||||
performance : true,
|
||||
|
||||
random : {
|
||||
min : 2,
|
||||
max : 5
|
||||
},
|
||||
|
||||
duration : 300,
|
||||
|
||||
autoSuccess : true,
|
||||
showActivity : true,
|
||||
limitValues : true,
|
||||
|
||||
label : 'percent',
|
||||
precision : 1,
|
||||
framerate : (1000 / 30), /// 30 fps
|
||||
|
||||
percent : false,
|
||||
total : false,
|
||||
value : false,
|
||||
|
||||
onChange : function(percent, value, total){},
|
||||
onSuccess : function(total){},
|
||||
onActive : function(value, total){},
|
||||
onError : function(value, total){},
|
||||
onWarning : function(value, total){},
|
||||
|
||||
error : {
|
||||
method : 'The method you called is not defined.',
|
||||
nonNumeric : 'Progress value is non numeric',
|
||||
tooHigh : 'Value specified is above 100%',
|
||||
tooLow : 'Value specified is below 0%'
|
||||
},
|
||||
|
||||
regExp: {
|
||||
variable: /\{\$*[A-z0-9]+\}/g
|
||||
},
|
||||
|
||||
metadata: {
|
||||
percent : 'percent',
|
||||
total : 'total',
|
||||
value : 'value'
|
||||
},
|
||||
|
||||
selector : {
|
||||
bar : '> .bar',
|
||||
label : '> .label',
|
||||
progress : '.bar > .progress'
|
||||
},
|
||||
|
||||
text : {
|
||||
active : false,
|
||||
error : false,
|
||||
success : false,
|
||||
warning : false,
|
||||
percent : '{percent}%',
|
||||
ratio : '{value} of {total}'
|
||||
},
|
||||
|
||||
className : {
|
||||
active : 'active',
|
||||
error : 'error',
|
||||
success : 'success',
|
||||
warning : 'warning'
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
})( jQuery, window , document );
|
||||
451
web/semantic/src/definitions/modules/progress.less
Normal file
451
web/semantic/src/definitions/modules/progress.less
Normal file
|
|
@ -0,0 +1,451 @@
|
|||
/*!
|
||||
* # Semantic UI - Progress Bar
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributorss
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'progress';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Progress
|
||||
*******************************/
|
||||
|
||||
.ui.progress {
|
||||
position: relative;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
border: @border;
|
||||
margin: @margin;
|
||||
box-shadow: @boxShadow;
|
||||
background: @background;
|
||||
padding: @padding;
|
||||
border-radius: @borderRadius;
|
||||
}
|
||||
|
||||
.ui.progress:first-child {
|
||||
margin: @firstMargin;
|
||||
}
|
||||
.ui.progress:last-child {
|
||||
margin: @lastMargin;
|
||||
}
|
||||
|
||||
/* Indicating */
|
||||
.ui.indicating.progress .bar[style*="width: 1"],
|
||||
.ui.indicating.progress .bar[style*="width: 2"] {
|
||||
background-color: @indicatingFirstColor;
|
||||
}
|
||||
.ui.indicating.progress .bar[style*="width: 3"] {
|
||||
background-color: @indicatingSecondColor;
|
||||
}
|
||||
.ui.indicating.progress .bar[style*="width: 4"],
|
||||
.ui.indicating.progress .bar[style*="width: 5"] {
|
||||
background-color: @indicatingThirdColor;
|
||||
}
|
||||
.ui.indicating.progress .bar[style*="width: 6"] {
|
||||
background-color: @indicatingFourthColor;
|
||||
}
|
||||
.ui.indicating.progress .bar[style*="width: 7"],
|
||||
.ui.indicating.progress .bar[style*="width: 8"] {
|
||||
background-color: @indicatingFifthColor;
|
||||
}
|
||||
.ui.indicating.progress .bar[style*="width: 9"],
|
||||
.ui.indicating.progress .bar[style*="width: 100"] {
|
||||
background-color: @indicatingSixthColor;
|
||||
}
|
||||
|
||||
/* Indicating Label */
|
||||
.ui.indicating.progress[data-percent^="1"] .label,
|
||||
.ui.indicating.progress[data-percent^="2"] .label {
|
||||
color: @indicatingFirstColor;
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="3"] .label {
|
||||
color: @indicatingSecondColor;
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="4"] .label,
|
||||
.ui.indicating.progress[data-percent^="5"] .label {
|
||||
color: @indicatingThirdColor;
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="6"] .label {
|
||||
color: @indicatingFourthColor;
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="7"] .label,
|
||||
.ui.indicating.progress[data-percent^="8"] .label {
|
||||
color: @indicatingFifthColor;
|
||||
}
|
||||
.ui.indicating.progress[data-percent^="9"] .label,
|
||||
.ui.indicating.progress[data-percent^="100"] .label {
|
||||
color: @indicatingSixthColor;
|
||||
}
|
||||
|
||||
/* Single Digits */
|
||||
.ui.indicating.progress .bar[style^="width: 1%"],
|
||||
.ui.indicating.progress .bar[style^="width: 2%"],
|
||||
.ui.indicating.progress .bar[style^="width: 3%"],
|
||||
.ui.indicating.progress .bar[style^="width: 4%"],
|
||||
.ui.indicating.progress .bar[style^="width: 5%"],
|
||||
.ui.indicating.progress .bar[style^="width: 6%"],
|
||||
.ui.indicating.progress .bar[style^="width: 7%"],
|
||||
.ui.indicating.progress .bar[style^="width: 8%"],
|
||||
.ui.indicating.progress .bar[style^="width: 9%"] {
|
||||
background-color: @indicatingFirstColor;
|
||||
}
|
||||
.ui.indicating.progress[data-percent="1"] .label,
|
||||
.ui.indicating.progress[data-percent="2"] .label,
|
||||
.ui.indicating.progress[data-percent="3"] .label,
|
||||
.ui.indicating.progress[data-percent="4"] .label,
|
||||
.ui.indicating.progress[data-percent="5"] .label,
|
||||
.ui.indicating.progress[data-percent="6"] .label,
|
||||
.ui.indicating.progress[data-percent="7"] .label,
|
||||
.ui.indicating.progress[data-percent="8"] .label,
|
||||
.ui.indicating.progress[data-percent="9"] .label {
|
||||
color: @indicatingFirstColor;
|
||||
}
|
||||
|
||||
/* Indicating Success */
|
||||
.ui.indicating.progress.success .label {
|
||||
color: @successHeaderColor;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
/* Activity Bar */
|
||||
.ui.progress .bar {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
position: @barPosition;
|
||||
width: @barInitialWidth;
|
||||
min-width: @barMinWidth;
|
||||
background: @barBackground;
|
||||
border-radius: @barBorderRadius;
|
||||
transition: @barTransition;
|
||||
}
|
||||
|
||||
/* Percent Complete */
|
||||
.ui.progress .bar > .progress {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
width: @progressWidth;
|
||||
font-size: @progressSize;
|
||||
top: @progressTop;
|
||||
right: @progressRight;
|
||||
left: @progressLeft;
|
||||
bottom: @progressBottom;
|
||||
color: @progressColor;
|
||||
text-shadow: @progressTextShadow;
|
||||
margin-top: @progressOffset;
|
||||
font-weight: @progressFontWeight;
|
||||
text-align: @progressTextAlign;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.ui.progress > .label {
|
||||
position: absolute;
|
||||
width: @labelWidth;
|
||||
font-size: @labelSize;
|
||||
top: @labelTop;
|
||||
right: @labelRight;
|
||||
left: @labelLeft;
|
||||
bottom: @labelBottom;
|
||||
color: @labelColor;
|
||||
font-weight: @labelFontWeight;
|
||||
text-shadow: @labelTextShadow;
|
||||
margin-top: @labelOffset;
|
||||
text-align: @labelTextAlign;
|
||||
transition: @labelTransition;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Success
|
||||
---------------*/
|
||||
|
||||
.ui.progress.success .bar {
|
||||
background-color: @successColor !important;
|
||||
}
|
||||
.ui.progress.success .bar,
|
||||
.ui.progress.success .bar::after {
|
||||
animation: none !important;
|
||||
}
|
||||
.ui.progress.success > .label {
|
||||
color: @successHeaderColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Warning
|
||||
---------------*/
|
||||
|
||||
.ui.progress.warning .bar {
|
||||
background-color: @warningColor !important;
|
||||
}
|
||||
.ui.progress.warning .bar,
|
||||
.ui.progress.warning .bar::after {
|
||||
animation: none !important;
|
||||
}
|
||||
.ui.progress.warning > .label {
|
||||
color: @warningHeaderColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Error
|
||||
---------------*/
|
||||
|
||||
.ui.progress.error .bar {
|
||||
background-color: @errorColor !important;
|
||||
}
|
||||
.ui.progress.error .bar,
|
||||
.ui.progress.error .bar::after {
|
||||
animation: none !important;
|
||||
}
|
||||
.ui.progress.error > .label {
|
||||
color: @errorHeaderColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Active
|
||||
---------------*/
|
||||
|
||||
.ui.active.progress .bar {
|
||||
position: relative;
|
||||
min-width: @activeMinWidth;
|
||||
}
|
||||
.ui.active.progress .bar::after {
|
||||
content: '';
|
||||
opacity: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background: @activePulseColor;
|
||||
|
||||
border-radius: @barBorderRadius;
|
||||
|
||||
animation: progress-active @activePulseDuration @defaultEasing infinite;
|
||||
}
|
||||
@keyframes progress-active {
|
||||
0% {
|
||||
opacity: @activePulseMaxOpacity;
|
||||
width: 0;
|
||||
}
|
||||
90% {
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Disabled
|
||||
---------------*/
|
||||
|
||||
.ui.disabled.progress {
|
||||
opacity: 0.35;
|
||||
}
|
||||
.ui.disabled.progress .bar,
|
||||
.ui.disabled.progress .bar::after {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
.ui.inverted.progress {
|
||||
background: @invertedBackground;
|
||||
border: @invertedBorder;
|
||||
}
|
||||
.ui.inverted.progress .bar {
|
||||
background: @invertedBarBackground;
|
||||
}
|
||||
.ui.inverted.progress .bar > .progress {
|
||||
color: @invertedProgressColor;
|
||||
}
|
||||
.ui.inverted.progress > .label {
|
||||
color: @invertedLabelColor;
|
||||
}
|
||||
.ui.inverted.progress.success > .label {
|
||||
color: @successColor;
|
||||
}
|
||||
.ui.inverted.progress.warning > .label {
|
||||
color: @warningColor;
|
||||
}
|
||||
.ui.inverted.progress.error > .label {
|
||||
color: @errorColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Attached
|
||||
---------------*/
|
||||
|
||||
/* bottom attached */
|
||||
.ui.progress.attached {
|
||||
background: @attachedBackground;
|
||||
position: relative;
|
||||
border: none;
|
||||
margin: 0em;
|
||||
}
|
||||
.ui.progress.attached,
|
||||
.ui.progress.attached .bar {
|
||||
display: block;
|
||||
height: @attachedHeight;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
|
||||
}
|
||||
.ui.progress.attached .bar {
|
||||
border-radius: 0em;
|
||||
}
|
||||
|
||||
/* top attached */
|
||||
.ui.progress.top.attached,
|
||||
.ui.progress.top.attached .bar {
|
||||
top: 0px;
|
||||
border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
|
||||
}
|
||||
.ui.progress.top.attached .bar {
|
||||
border-radius: 0em;
|
||||
}
|
||||
|
||||
/* Coupling */
|
||||
.ui.segment > .ui.attached.progress,
|
||||
.ui.card > .ui.attached.progress {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.ui.segment > .ui.bottom.attached.progress,
|
||||
.ui.card > .ui.bottom.attached.progress {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Colors
|
||||
---------------*/
|
||||
|
||||
.ui.black.progress .bar {
|
||||
background-color: @black;
|
||||
}
|
||||
.ui.blue.progress .bar {
|
||||
background-color: @blue;
|
||||
}
|
||||
.ui.green.progress .bar {
|
||||
background-color: @green;
|
||||
}
|
||||
.ui.orange.progress .bar {
|
||||
background-color: @orange;
|
||||
}
|
||||
.ui.pink.progress .bar {
|
||||
background-color: @pink;
|
||||
}
|
||||
.ui.purple.progress .bar {
|
||||
background-color: @purple;
|
||||
}
|
||||
.ui.red.progress .bar {
|
||||
background-color: @red;
|
||||
}
|
||||
.ui.teal.progress .bar {
|
||||
background-color: @teal;
|
||||
}
|
||||
.ui.yellow.progress .bar {
|
||||
background-color: @yellow;
|
||||
}
|
||||
|
||||
.ui.black.inverted.progress .bar {
|
||||
background-color: @lightBlack;
|
||||
}
|
||||
.ui.blue.inverted.progress .bar {
|
||||
background-color: @lightBlue;
|
||||
}
|
||||
.ui.green.inverted.progress .bar {
|
||||
background-color: @lightGreen;
|
||||
}
|
||||
.ui.orange.inverted.progress .bar {
|
||||
background-color: @lightOrange;
|
||||
}
|
||||
.ui.pink.inverted.progress .bar {
|
||||
background-color: @lightPink;
|
||||
}
|
||||
.ui.purple.inverted.progress .bar {
|
||||
background-color: @lightPurple;
|
||||
}
|
||||
.ui.red.inverted.progress .bar {
|
||||
background-color: @lightRed;
|
||||
}
|
||||
.ui.teal.inverted.progress .bar {
|
||||
background-color: @lightTeal;
|
||||
}
|
||||
.ui.yellow.inverted.progress .bar {
|
||||
background-color: @lightYellow;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
.ui.tiny.progress {
|
||||
font-size: @tiny;
|
||||
}
|
||||
.ui.tiny.progress .bar {
|
||||
height: @tinyBarHeight;
|
||||
}
|
||||
|
||||
.ui.small.progress {
|
||||
font-size: @small;
|
||||
}
|
||||
.ui.small.progress .bar {
|
||||
height: @smallBarHeight;
|
||||
}
|
||||
|
||||
.ui.progress {
|
||||
font-size: @medium;
|
||||
}
|
||||
.ui.progress .bar {
|
||||
height: @barHeight;
|
||||
}
|
||||
|
||||
.ui.large.progress {
|
||||
font-size: @large;
|
||||
}
|
||||
.ui.large.progress .bar {
|
||||
height: @largeBarHeight;
|
||||
}
|
||||
|
||||
.ui.big.progress {
|
||||
font-size: @big;
|
||||
}
|
||||
.ui.big.progress .bar {
|
||||
height: @bigBarHeight;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
451
web/semantic/src/definitions/modules/rating.js
Normal file
451
web/semantic/src/definitions/modules/rating.js
Normal file
|
|
@ -0,0 +1,451 @@
|
|||
/*!
|
||||
* # Semantic UI - Rating
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
$.fn.rating = 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 = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.fn.rating.settings, parameters)
|
||||
: $.extend({}, $.fn.rating.settings),
|
||||
|
||||
namespace = settings.namespace,
|
||||
className = settings.className,
|
||||
metadata = settings.metadata,
|
||||
selector = settings.selector,
|
||||
error = settings.error,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = 'module-' + namespace,
|
||||
|
||||
element = this,
|
||||
instance = $(this).data(moduleNamespace),
|
||||
|
||||
$module = $(this),
|
||||
$icon = $module.find(selector.icon),
|
||||
|
||||
module
|
||||
;
|
||||
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.verbose('Initializing rating module', settings);
|
||||
|
||||
if($icon.length === 0) {
|
||||
module.setup.layout();
|
||||
}
|
||||
|
||||
if(settings.interactive) {
|
||||
module.enable();
|
||||
}
|
||||
else {
|
||||
module.disable();
|
||||
}
|
||||
if(settings.initialRating) {
|
||||
module.debug('Setting initial rating');
|
||||
module.setRating(settings.initialRating);
|
||||
}
|
||||
if( $module.data(metadata.rating) ) {
|
||||
module.debug('Rating found in metadata');
|
||||
module.setRating( $module.data(metadata.rating) );
|
||||
}
|
||||
module.instantiate();
|
||||
},
|
||||
|
||||
instantiate: function() {
|
||||
module.verbose('Instantiating module', settings);
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, module)
|
||||
;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying previous instance', instance);
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
;
|
||||
$icon
|
||||
.off(eventNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
$icon = $module.find(selector.icon);
|
||||
},
|
||||
|
||||
setup: {
|
||||
layout: function() {
|
||||
var
|
||||
maxRating = $module.data(metadata.maxRating) || settings.maxRating
|
||||
;
|
||||
module.debug('Generating icon html dynamically');
|
||||
$module
|
||||
.html($.fn.rating.settings.templates.icon(maxRating))
|
||||
;
|
||||
module.refresh();
|
||||
}
|
||||
},
|
||||
|
||||
event: {
|
||||
mouseenter: function() {
|
||||
var
|
||||
$activeIcon = $(this)
|
||||
;
|
||||
$activeIcon
|
||||
.nextAll()
|
||||
.removeClass(className.selected)
|
||||
;
|
||||
$module
|
||||
.addClass(className.selected)
|
||||
;
|
||||
$activeIcon
|
||||
.addClass(className.selected)
|
||||
.prevAll()
|
||||
.addClass(className.selected)
|
||||
;
|
||||
},
|
||||
mouseleave: function() {
|
||||
$module
|
||||
.removeClass(className.selected)
|
||||
;
|
||||
$icon
|
||||
.removeClass(className.selected)
|
||||
;
|
||||
},
|
||||
click: function() {
|
||||
var
|
||||
$activeIcon = $(this),
|
||||
currentRating = module.getRating(),
|
||||
rating = $icon.index($activeIcon) + 1,
|
||||
canClear = (settings.clearable == 'auto')
|
||||
? ($icon.length === 1)
|
||||
: settings.clearable
|
||||
;
|
||||
if(canClear && currentRating == rating) {
|
||||
module.clearRating();
|
||||
}
|
||||
else {
|
||||
module.setRating( rating );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
clearRating: function() {
|
||||
module.debug('Clearing current rating');
|
||||
module.setRating(0);
|
||||
},
|
||||
|
||||
getRating: function() {
|
||||
var
|
||||
currentRating = $icon.filter('.' + className.active).length
|
||||
;
|
||||
module.verbose('Current rating retrieved', currentRating);
|
||||
return currentRating;
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
module.debug('Setting rating to interactive mode');
|
||||
$icon
|
||||
.on('mouseenter' + eventNamespace, module.event.mouseenter)
|
||||
.on('mouseleave' + eventNamespace, module.event.mouseleave)
|
||||
.on('click' + eventNamespace, module.event.click)
|
||||
;
|
||||
$module
|
||||
.removeClass(className.disabled)
|
||||
;
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
module.debug('Setting rating to read-only mode');
|
||||
$icon
|
||||
.off(eventNamespace)
|
||||
;
|
||||
$module
|
||||
.addClass(className.disabled)
|
||||
;
|
||||
},
|
||||
|
||||
setRating: function(rating) {
|
||||
var
|
||||
ratingIndex = (rating - 1 >= 0)
|
||||
? (rating - 1)
|
||||
: 0,
|
||||
$activeIcon = $icon.eq(ratingIndex)
|
||||
;
|
||||
$module
|
||||
.removeClass(className.selected)
|
||||
;
|
||||
$icon
|
||||
.removeClass(className.selected)
|
||||
.removeClass(className.active)
|
||||
;
|
||||
if(rating > 0) {
|
||||
module.verbose('Setting current rating to', rating);
|
||||
$activeIcon
|
||||
.prevAll()
|
||||
.andSelf()
|
||||
.addClass(className.active)
|
||||
;
|
||||
}
|
||||
settings.onRate.call(element, rating);
|
||||
},
|
||||
|
||||
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($allModules.length > 1) {
|
||||
title += ' ' + '(' + $allModules.length + ')';
|
||||
}
|
||||
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 {
|
||||
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) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.rating.settings = {
|
||||
|
||||
name : 'Rating',
|
||||
namespace : 'rating',
|
||||
|
||||
debug : false,
|
||||
verbose : true,
|
||||
performance : true,
|
||||
|
||||
initialRating : 0,
|
||||
interactive : true,
|
||||
maxRating : 4,
|
||||
clearable : 'auto',
|
||||
|
||||
onRate : function(rating){},
|
||||
|
||||
error : {
|
||||
method : 'The method you called is not defined',
|
||||
noMaximum : 'No maximum rating specified. Cannot generate HTML automatically'
|
||||
},
|
||||
|
||||
|
||||
metadata: {
|
||||
rating : 'rating',
|
||||
maxRating : 'maxRating'
|
||||
},
|
||||
|
||||
className : {
|
||||
active : 'active',
|
||||
disabled : 'disabled',
|
||||
selected : 'selected',
|
||||
loading : 'loading'
|
||||
},
|
||||
|
||||
selector : {
|
||||
icon : '.icon'
|
||||
},
|
||||
|
||||
templates: {
|
||||
icon: function(maxRating) {
|
||||
var
|
||||
icon = 1,
|
||||
html = ''
|
||||
;
|
||||
while(icon <= maxRating) {
|
||||
html += '<i class="icon"></i>';
|
||||
icon++;
|
||||
}
|
||||
return html;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})( jQuery, window , document );
|
||||
189
web/semantic/src/definitions/modules/rating.less
Normal file
189
web/semantic/src/definitions/modules/rating.less
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
/*!
|
||||
* # Semantic UI - Rating
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'rating';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Rating
|
||||
*******************************/
|
||||
|
||||
.ui.rating {
|
||||
display: @display;
|
||||
vertical-align: @verticalAlign;
|
||||
}
|
||||
.ui.rating:last-child {
|
||||
margin-right: 0em;
|
||||
}
|
||||
|
||||
.ui.rating:before {
|
||||
display: block;
|
||||
content: '';
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.ui.rating .icon {
|
||||
cursor: pointer;
|
||||
|
||||
margin: 0em;
|
||||
width: @iconWidth;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
padding: 0em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Star
|
||||
--------------------*/
|
||||
|
||||
/* Inactive */
|
||||
.ui.star.rating .icon {
|
||||
width: @starIconWidth;
|
||||
color: @starInactiveColor;
|
||||
}
|
||||
|
||||
/* Active Star */
|
||||
.ui.star.rating .active.icon {
|
||||
color: @starActiveColor !important;
|
||||
text-shadow: @starActiveShadow;
|
||||
}
|
||||
|
||||
/* Selected Star */
|
||||
.ui.star.rating .icon.selected,
|
||||
.ui.star.rating .icon.selected.active {
|
||||
color: @starSelectedColor !important;
|
||||
}
|
||||
|
||||
.ui.star.rating.partial {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.ui.star.rating.partial:before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*-------------------
|
||||
Heart
|
||||
--------------------*/
|
||||
|
||||
.ui.heart.rating .icon {
|
||||
width: @heartIconWidth;
|
||||
color: @heartInactiveColor;
|
||||
}
|
||||
|
||||
/* Active Heart */
|
||||
.ui.heart.rating .active.icon {
|
||||
color: @heartActiveColor !important;
|
||||
text-shadow: @heartActiveShadow;
|
||||
}
|
||||
|
||||
/* Selected Heart */
|
||||
.ui.heart.rating .icon.selected,
|
||||
.ui.heart.rating .icon.selected.active {
|
||||
color: @heartSelectedColor !important;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Inactive Icon */
|
||||
.ui.rating .icon {
|
||||
color: @inactiveColor;
|
||||
}
|
||||
|
||||
/* Active Icon */
|
||||
.ui.rating .active.icon {
|
||||
color: @activeColor;
|
||||
}
|
||||
|
||||
/* Selected Icon */
|
||||
.ui.rating .icon.selected,
|
||||
.ui.rating .icon.selected.active {
|
||||
color: @hoverColor;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Disabled
|
||||
--------------------*/
|
||||
|
||||
/* disabled rating */
|
||||
.ui.disabled.rating .icon {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Interacting (Active)
|
||||
--------------------*/
|
||||
|
||||
/* Selected Rating */
|
||||
.ui.rating.selected .active.icon {
|
||||
opacity: @interactiveIconOpacity;
|
||||
}
|
||||
.ui.rating.selected .icon.selected,
|
||||
.ui.rating .icon.selected {
|
||||
opacity: @interactiveSelectedIconOpacity;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.mini.rating .icon {
|
||||
font-size: @mini;
|
||||
}
|
||||
.ui.tiny.rating .icon {
|
||||
font-size: @tiny;
|
||||
}
|
||||
.ui.small.rating .icon {
|
||||
font-size: @small;
|
||||
}
|
||||
.ui.rating .icon {
|
||||
font-size: @medium;
|
||||
}
|
||||
.ui.large.rating .icon {
|
||||
font-size: @large;
|
||||
}
|
||||
.ui.huge.rating .icon {
|
||||
font-size: @huge;
|
||||
}
|
||||
.ui.massive.rating .icon {
|
||||
font-size: @massive;
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
1096
web/semantic/src/definitions/modules/search.js
Normal file
1096
web/semantic/src/definitions/modules/search.js
Normal file
File diff suppressed because it is too large
Load diff
339
web/semantic/src/definitions/modules/search.less
Normal file
339
web/semantic/src/definitions/modules/search.less
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
/*!
|
||||
* # Semantic UI - Search
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'search';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Search
|
||||
*******************************/
|
||||
|
||||
.ui.search {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui.search > .prompt {
|
||||
margin: 0em;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
|
||||
text-shadow: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
|
||||
line-height: @promptLineHeight;
|
||||
padding: @promptPadding;
|
||||
font-size: @promptFontSize;
|
||||
|
||||
background: @promptBackground;
|
||||
border: @promptBorder;
|
||||
color: @promptColor;
|
||||
box-shadow: @promptBoxShadow;
|
||||
transition: @promptTransition;
|
||||
}
|
||||
|
||||
.ui.search .prompt {
|
||||
border-radius: @promptBorderRadius;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Icon
|
||||
---------------*/
|
||||
|
||||
.ui.search .prompt ~ .search.icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Results
|
||||
---------------*/
|
||||
|
||||
.ui.search > .results {
|
||||
display: none;
|
||||
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0%;
|
||||
|
||||
background: @resultsBackground;
|
||||
|
||||
margin-top: @resultsDistance;
|
||||
width: @resultsWidth;
|
||||
|
||||
border-radius: @resultsBorderRadius;
|
||||
box-shadow: @resultsBoxShadow;
|
||||
z-index: @resultsZIndex;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Result
|
||||
---------------*/
|
||||
|
||||
.ui.search > .results .result {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-size: @resultFontSize;
|
||||
padding: @resultVerticalPadding @resultHorizontalPadding;
|
||||
color: @resultTextColor;
|
||||
line-height: @resultLineHeight;
|
||||
border-bottom: @resultDivider;
|
||||
}
|
||||
.ui.search > .results .result:last-child {
|
||||
border-bottom: @resultLastDivider;
|
||||
}
|
||||
|
||||
/* Image */
|
||||
.ui.search > .results .result .image {
|
||||
float: @resultImageFloat;
|
||||
overflow: hidden;
|
||||
background: @resultImageBackground;
|
||||
width: @resultImageWidth;
|
||||
height: @resultImageHeight;
|
||||
border-radius: @resultImageBorderRadius;
|
||||
}
|
||||
.ui.search > .results .result .image img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Info
|
||||
---------------*/
|
||||
|
||||
.ui.search > .results .result .image + .content {
|
||||
margin: @resultImageMargin;
|
||||
}
|
||||
|
||||
.ui.search > .results .result .title {
|
||||
font-family: @resultTitleFont;
|
||||
font-weight: @resultTitleFontWeight;
|
||||
font-size: @resultTitleFontSize;
|
||||
color: @resultTitleColor;
|
||||
}
|
||||
.ui.search > .results .result .description {
|
||||
margin-top: @resultDescriptionDistance;
|
||||
font-size: @resultDescriptionFontSize;
|
||||
color: @resultDescriptionColor;
|
||||
}
|
||||
.ui.search > .results .result .price {
|
||||
float: @resultPriceFloat;
|
||||
color: @resultPriceColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Message
|
||||
---------------*/
|
||||
|
||||
.ui.search > .results > .message {
|
||||
padding: @messageVerticalPadding @messageHorizontalPadding;
|
||||
}
|
||||
.ui.search > .results > .message .header {
|
||||
font-family: @headerFont;
|
||||
font-size: @messageHeaderFontSize;
|
||||
font-weight: @messageHeaderFontWeight;
|
||||
color: @messageHeaderColor;
|
||||
}
|
||||
.ui.search > .results > .message .description {
|
||||
margin-top: @messageDescriptionDistance;
|
||||
font-size: @messageDescriptionFontSize;
|
||||
color: @messageDescriptionColor;
|
||||
}
|
||||
|
||||
/* View All Results */
|
||||
.ui.search > .results > .action {
|
||||
display: block;
|
||||
border-top: @actionBorder;
|
||||
background: @actionBackground;
|
||||
padding: @actionPadding;
|
||||
color: @actionColor;
|
||||
font-weight: @actionFontWeight;
|
||||
text-align: @actionAlign;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------------
|
||||
Loading
|
||||
---------------------*/
|
||||
|
||||
.ui.loading.search .input > .icon:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin: @loaderMargin;
|
||||
width: @loaderSize;
|
||||
height: @loaderSize;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
border: @loaderLineWidth solid @loaderFillColor;
|
||||
}
|
||||
.ui.loading.search .input > .icon:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin: @loaderMargin;
|
||||
width: @loaderSize;
|
||||
height: @loaderSize;
|
||||
|
||||
animation: button-spin @loaderSpeed linear;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
|
||||
border-color: @loaderLineColor transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: @loaderLineWidth;
|
||||
|
||||
box-shadow: 0px 0px 0px 1px transparent;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Hover
|
||||
---------------*/
|
||||
|
||||
.ui.search > .results .result:hover,
|
||||
.ui.category.search > .results .category .result:hover {
|
||||
background: @resultHoverBackground;
|
||||
}
|
||||
.ui.search .action:hover {
|
||||
background: @actionHoverBackground;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Active
|
||||
---------------*/
|
||||
|
||||
.ui.search > .results .category.active {
|
||||
background: @categoryActiveBackground;
|
||||
}
|
||||
.ui.search > .results .category.active > .name {
|
||||
color: @categoryNameActiveColor;
|
||||
}
|
||||
|
||||
.ui.search > .results .result.active,
|
||||
.ui.category.search > .results .category .result.active {
|
||||
position: relative;
|
||||
border-left-color: @resultActiveBorderLeft;
|
||||
background: @resultActiveBackground;
|
||||
box-shadow: @resultActiveBoxShadow;
|
||||
}
|
||||
.ui.search > .results .result.active .title {
|
||||
color: @resultActiveTitleColor;
|
||||
}
|
||||
.ui.search > .results .result.active .description {
|
||||
color: @resultActiveDescriptionColor;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Categories
|
||||
---------------*/
|
||||
|
||||
.ui.category.search .results {
|
||||
width: @categoryResultsWidth;
|
||||
}
|
||||
|
||||
/* Category */
|
||||
.ui.category.search > .results .category {
|
||||
background: @categoryBackground;
|
||||
box-shadow: @categoryBoxShadow;
|
||||
border-bottom: @categoryDivider;
|
||||
transition: @categoryTransition;
|
||||
}
|
||||
.ui.category.search > .results .category:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Category Result */
|
||||
.ui.category.search > .results .category .result {
|
||||
background: @categoryResultBackground;
|
||||
margin-left: @categoryNameWidth;
|
||||
border-left: @categoryResultLeftBorder;
|
||||
border-bottom: @categoryResultDivider;
|
||||
transition: @categoryResultTransition;
|
||||
}
|
||||
.ui.category.search > .results .category .result:last-child {
|
||||
border-bottom: @categoryResultLastDivider;
|
||||
}
|
||||
|
||||
/* Category Result Name */
|
||||
.ui.category.search > .results .category > .name {
|
||||
width: @categoryNameWidth;
|
||||
background: @categoryNameBackground;
|
||||
font-family: @categoryNameFont;
|
||||
font-size: @categoryNameFontSize;
|
||||
float: @categoryNameFontSize;
|
||||
float: @categoryNameFloat;
|
||||
padding: @categoryNamePadding;
|
||||
font-weight: @categoryNameFontWeight;
|
||||
color: @categoryNameColor;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Left / Right
|
||||
--------------------*/
|
||||
|
||||
.ui[class*="left aligned"].search > .results {
|
||||
right: auto;
|
||||
left: 0%;
|
||||
}
|
||||
.ui[class*="right aligned"].search > .results {
|
||||
right: 0%;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Fluid
|
||||
---------------*/
|
||||
|
||||
.ui.fluid.search .results {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
.ui.search {
|
||||
font-size: @medium;
|
||||
}
|
||||
.ui.large.search {
|
||||
font-size: @large;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
830
web/semantic/src/definitions/modules/shape.js
Normal file
830
web/semantic/src/definitions/modules/shape.js
Normal file
|
|
@ -0,0 +1,830 @@
|
|||
/*!
|
||||
* # Semantic UI - Shape
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ( $, window, document, undefined ) {
|
||||
|
||||
"use strict";
|
||||
|
||||
$.fn.shape = function(parameters) {
|
||||
var
|
||||
$allModules = $(this),
|
||||
$body = $('body'),
|
||||
|
||||
time = new Date().getTime(),
|
||||
performance = [],
|
||||
|
||||
query = arguments[0],
|
||||
methodInvoked = (typeof query == 'string'),
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
|
||||
requestAnimationFrame = window.requestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| function(callback) { setTimeout(callback, 0); },
|
||||
|
||||
returnedValue
|
||||
;
|
||||
|
||||
$allModules
|
||||
.each(function() {
|
||||
var
|
||||
moduleSelector = $allModules.selector || '',
|
||||
settings = $.extend(true, {}, $.fn.shape.settings, parameters),
|
||||
|
||||
// internal aliases
|
||||
namespace = settings.namespace,
|
||||
selector = settings.selector,
|
||||
error = settings.error,
|
||||
className = settings.className,
|
||||
|
||||
// define namespaces for modules
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = 'module-' + namespace,
|
||||
|
||||
// selector cache
|
||||
$module = $(this),
|
||||
$sides = $module.find(selector.sides),
|
||||
$side = $module.find(selector.side),
|
||||
|
||||
// private variables
|
||||
nextIndex = false,
|
||||
$activeSide,
|
||||
$nextSide,
|
||||
|
||||
// standard module
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
module
|
||||
;
|
||||
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.verbose('Initializing module for', element);
|
||||
module.set.defaultSide();
|
||||
module.instantiate();
|
||||
},
|
||||
|
||||
instantiate: function() {
|
||||
module.verbose('Storing instance of module', module);
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, instance)
|
||||
;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying previous module for', element);
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
.off(eventNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
module.verbose('Refreshing selector cache for', element);
|
||||
$module = $(element);
|
||||
$sides = $(this).find(selector.shape);
|
||||
$side = $(this).find(selector.side);
|
||||
},
|
||||
|
||||
repaint: function() {
|
||||
module.verbose('Forcing repaint event');
|
||||
var
|
||||
shape = $sides.get(0) || document.createElement('div'),
|
||||
fakeAssignment = shape.offsetWidth
|
||||
;
|
||||
},
|
||||
|
||||
animate: function(propertyObject, callback) {
|
||||
module.verbose('Animating box with properties', propertyObject);
|
||||
callback = callback || function(event) {
|
||||
module.verbose('Executing animation callback');
|
||||
if(event !== undefined) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
module.reset();
|
||||
module.set.active();
|
||||
};
|
||||
settings.beforeChange.call($nextSide.get());
|
||||
if(module.get.transitionEvent()) {
|
||||
module.verbose('Starting CSS animation');
|
||||
$module
|
||||
.addClass(className.animating)
|
||||
;
|
||||
$sides
|
||||
.css(propertyObject)
|
||||
.one(module.get.transitionEvent(), callback)
|
||||
;
|
||||
module.set.duration(settings.duration);
|
||||
requestAnimationFrame(function() {
|
||||
$module
|
||||
.addClass(className.animating)
|
||||
;
|
||||
$activeSide
|
||||
.addClass(className.hidden)
|
||||
;
|
||||
});
|
||||
}
|
||||
else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
queue: function(method) {
|
||||
module.debug('Queueing animation of', method);
|
||||
$sides
|
||||
.one(module.get.transitionEvent(), function() {
|
||||
module.debug('Executing queued animation');
|
||||
setTimeout(function(){
|
||||
$module.shape(method);
|
||||
}, 0);
|
||||
})
|
||||
;
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
module.verbose('Animating states reset');
|
||||
$module
|
||||
.removeClass(className.animating)
|
||||
.attr('style', '')
|
||||
.removeAttr('style')
|
||||
;
|
||||
// removeAttr style does not consistently work in safari
|
||||
$sides
|
||||
.attr('style', '')
|
||||
.removeAttr('style')
|
||||
;
|
||||
$side
|
||||
.attr('style', '')
|
||||
.removeAttr('style')
|
||||
.removeClass(className.hidden)
|
||||
;
|
||||
$nextSide
|
||||
.removeClass(className.animating)
|
||||
.attr('style', '')
|
||||
.removeAttr('style')
|
||||
;
|
||||
},
|
||||
|
||||
is: {
|
||||
complete: function() {
|
||||
return ($side.filter('.' + className.active)[0] == $nextSide[0]);
|
||||
},
|
||||
animating: function() {
|
||||
return $module.hasClass(className.animating);
|
||||
}
|
||||
},
|
||||
|
||||
set: {
|
||||
|
||||
defaultSide: function() {
|
||||
$activeSide = $module.find('.' + settings.className.active);
|
||||
$nextSide = ( $activeSide.next(selector.side).length > 0 )
|
||||
? $activeSide.next(selector.side)
|
||||
: $module.find(selector.side).first()
|
||||
;
|
||||
nextIndex = false;
|
||||
module.verbose('Active side set to', $activeSide);
|
||||
module.verbose('Next side set to', $nextSide);
|
||||
},
|
||||
|
||||
duration: function(duration) {
|
||||
duration = duration || settings.duration;
|
||||
duration = (typeof duration == 'number')
|
||||
? duration + 'ms'
|
||||
: duration
|
||||
;
|
||||
module.verbose('Setting animation duration', duration);
|
||||
$sides.add($side)
|
||||
.css({
|
||||
'-webkit-transition-duration': duration,
|
||||
'-moz-transition-duration': duration,
|
||||
'-ms-transition-duration': duration,
|
||||
'-o-transition-duration': duration,
|
||||
'transition-duration': duration
|
||||
})
|
||||
;
|
||||
},
|
||||
|
||||
stageSize: function() {
|
||||
var
|
||||
$clone = $module.clone().addClass(className.loading),
|
||||
$activeSide = $clone.find('.' + settings.className.active),
|
||||
$nextSide = (nextIndex)
|
||||
? $clone.find(selector.side).eq(nextIndex)
|
||||
: ( $activeSide.next(selector.side).length > 0 )
|
||||
? $activeSide.next(selector.side)
|
||||
: $clone.find(selector.side).first(),
|
||||
newSize = {}
|
||||
;
|
||||
$activeSide.removeClass(className.active);
|
||||
$nextSide.addClass(className.active);
|
||||
$clone.insertAfter($module);
|
||||
newSize = {
|
||||
width : $nextSide.outerWidth(),
|
||||
height : $nextSide.outerHeight()
|
||||
};
|
||||
$clone.remove();
|
||||
$module
|
||||
.css(newSize)
|
||||
;
|
||||
module.verbose('Resizing stage to fit new content', newSize);
|
||||
},
|
||||
|
||||
nextSide: function(selector) {
|
||||
nextIndex = selector;
|
||||
$nextSide = $side.filter(selector);
|
||||
nextIndex = $side.index($nextSide);
|
||||
if($nextSide.length === 0) {
|
||||
module.set.defaultSide();
|
||||
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)
|
||||
;
|
||||
settings.onChange.call($nextSide.get());
|
||||
module.set.defaultSide();
|
||||
}
|
||||
},
|
||||
|
||||
flip: {
|
||||
|
||||
up: function() {
|
||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||||
module.debug('Side already visible', $nextSide);
|
||||
return;
|
||||
}
|
||||
if( !module.is.animating()) {
|
||||
module.debug('Flipping up', $nextSide);
|
||||
module.set.stageSize();
|
||||
module.stage.above();
|
||||
module.animate( module.get.transform.up() );
|
||||
}
|
||||
else {
|
||||
module.queue('flip up');
|
||||
}
|
||||
},
|
||||
|
||||
down: function() {
|
||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||||
module.debug('Side already visible', $nextSide);
|
||||
return;
|
||||
}
|
||||
if( !module.is.animating()) {
|
||||
module.debug('Flipping down', $nextSide);
|
||||
module.set.stageSize();
|
||||
module.stage.below();
|
||||
module.animate( module.get.transform.down() );
|
||||
}
|
||||
else {
|
||||
module.queue('flip down');
|
||||
}
|
||||
},
|
||||
|
||||
left: function() {
|
||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||||
module.debug('Side already visible', $nextSide);
|
||||
return;
|
||||
}
|
||||
if( !module.is.animating()) {
|
||||
module.debug('Flipping left', $nextSide);
|
||||
module.set.stageSize();
|
||||
module.stage.left();
|
||||
module.animate(module.get.transform.left() );
|
||||
}
|
||||
else {
|
||||
module.queue('flip left');
|
||||
}
|
||||
},
|
||||
|
||||
right: function() {
|
||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||||
module.debug('Side already visible', $nextSide);
|
||||
return;
|
||||
}
|
||||
if( !module.is.animating()) {
|
||||
module.debug('Flipping right', $nextSide);
|
||||
module.set.stageSize();
|
||||
module.stage.right();
|
||||
module.animate(module.get.transform.right() );
|
||||
}
|
||||
else {
|
||||
module.queue('flip right');
|
||||
}
|
||||
},
|
||||
|
||||
over: function() {
|
||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||||
module.debug('Side already visible', $nextSide);
|
||||
return;
|
||||
}
|
||||
if( !module.is.animating()) {
|
||||
module.debug('Flipping over', $nextSide);
|
||||
module.set.stageSize();
|
||||
module.stage.behind();
|
||||
module.animate(module.get.transform.over() );
|
||||
}
|
||||
else {
|
||||
module.queue('flip over');
|
||||
}
|
||||
},
|
||||
|
||||
back: function() {
|
||||
if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
|
||||
module.debug('Side already visible', $nextSide);
|
||||
return;
|
||||
}
|
||||
if( !module.is.animating()) {
|
||||
module.debug('Flipping back', $nextSide);
|
||||
module.set.stageSize();
|
||||
module.stage.behind();
|
||||
module.animate(module.get.transform.back() );
|
||||
}
|
||||
else {
|
||||
module.queue('flip back');
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
get: {
|
||||
|
||||
transform: {
|
||||
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)'
|
||||
};
|
||||
},
|
||||
|
||||
over: function() {
|
||||
var
|
||||
translate = {
|
||||
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
|
||||
}
|
||||
;
|
||||
return {
|
||||
transform: 'translateX(' + translate.x + 'px) rotateY(180deg)'
|
||||
};
|
||||
},
|
||||
|
||||
back: function() {
|
||||
var
|
||||
translate = {
|
||||
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
|
||||
}
|
||||
;
|
||||
return {
|
||||
transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)'
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
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];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
nextSide: function() {
|
||||
return ( $activeSide.next(selector.side).length > 0 )
|
||||
? $activeSide.next(selector.side)
|
||||
: $module.find(selector.side).first()
|
||||
;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
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)'
|
||||
})
|
||||
;
|
||||
}
|
||||
},
|
||||
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($allModules.length > 1) {
|
||||
title += ' ' + '(' + $allModules.length + ')';
|
||||
}
|
||||
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 {
|
||||
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) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.shape.settings = {
|
||||
|
||||
// module info
|
||||
name : 'Shape',
|
||||
|
||||
// debug content outputted to console
|
||||
debug : false,
|
||||
|
||||
// verbose debug output
|
||||
verbose : true,
|
||||
|
||||
// performance data output
|
||||
performance: true,
|
||||
|
||||
// event namespace
|
||||
namespace : 'shape',
|
||||
|
||||
// callback occurs on side change
|
||||
beforeChange : function() {},
|
||||
onChange : function() {},
|
||||
|
||||
// allow animation to same side
|
||||
allowRepeats: false,
|
||||
|
||||
// animation duration
|
||||
duration : 700,
|
||||
|
||||
// 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 : {
|
||||
animating : 'animating',
|
||||
hidden : 'hidden',
|
||||
loading : 'loading',
|
||||
active : 'active'
|
||||
},
|
||||
|
||||
// selectors used
|
||||
selector : {
|
||||
sides : '.sides',
|
||||
side : '.side'
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
})( jQuery, window , document );
|
||||
152
web/semantic/src/definitions/modules/shape.less
Normal file
152
web/semantic/src/definitions/modules/shape.less
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
/*!
|
||||
* # Semantic UI - Shape
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'shape';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Shape
|
||||
*******************************/
|
||||
|
||||
.ui.shape {
|
||||
position: relative;
|
||||
display: @display;
|
||||
perspective: @perspective;
|
||||
}
|
||||
|
||||
.ui.shape .sides {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.ui.shape .side {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
|
||||
margin: @sideMargin !important;
|
||||
|
||||
backface-visibility: @backfaceVisibility;
|
||||
}
|
||||
|
||||
.ui.shape .side {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.shape .side > * {
|
||||
backface-visibility: visible !important;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
.ui.cube.shape .side {
|
||||
min-width: @cubeSize;
|
||||
height: @cubeSize;
|
||||
|
||||
padding: @cubePadding;
|
||||
|
||||
background-color: @cubeBackground;
|
||||
color: @cubeTextColor;
|
||||
box-shadow: @cubeBoxShadow;
|
||||
}
|
||||
.ui.cube.shape .side > .content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: table;
|
||||
|
||||
text-align: @cubeTextAlign;
|
||||
user-select: text;
|
||||
}
|
||||
.ui.cube.shape .side > .content > div {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: @cubeFontSize;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui.text.shape.animating .sides {
|
||||
position: static;
|
||||
}
|
||||
.ui.text.shape .side {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ui.text.shape .side > * {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Loading
|
||||
---------------*/
|
||||
|
||||
.ui.loading.shape {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Animating
|
||||
---------------*/
|
||||
|
||||
.ui.shape .animating.side {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: @animatingZIndex;
|
||||
}
|
||||
.ui.shape .hidden.side {
|
||||
opacity: @hiddenSideOpacity;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
CSS
|
||||
---------------*/
|
||||
|
||||
.ui.shape.animating {
|
||||
transition: @transition;
|
||||
}
|
||||
.ui.shape.animating .sides {
|
||||
position: absolute;
|
||||
}
|
||||
.ui.shape.animating .sides {
|
||||
transition: @transition;
|
||||
}
|
||||
.ui.shape.animating .side {
|
||||
transition: @sideTransition;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Active
|
||||
---------------*/
|
||||
|
||||
.ui.shape .active.side {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
1089
web/semantic/src/definitions/modules/sidebar.js
Normal file
1089
web/semantic/src/definitions/modules/sidebar.js
Normal file
File diff suppressed because it is too large
Load diff
550
web/semantic/src/definitions/modules/sidebar.less
Normal file
550
web/semantic/src/definitions/modules/sidebar.less
Normal file
|
|
@ -0,0 +1,550 @@
|
|||
/*!
|
||||
* # Semantic UI - Sidebar
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributorss
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'sidebar';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Sidebar
|
||||
*******************************/
|
||||
|
||||
/* Sidebar Menu */
|
||||
.ui.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
backface-visibility: hidden;
|
||||
transition: none;
|
||||
will-change: transform;
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
height: 100% !important;
|
||||
border-radius: 0em !important;
|
||||
margin: 0em !important;
|
||||
overflow-y: auto !important;
|
||||
z-index: @topLayer;
|
||||
}
|
||||
|
||||
/* GPU Layers for Child Elements */
|
||||
.ui.sidebar > * {
|
||||
backface-visibility: hidden;
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Direction
|
||||
---------------*/
|
||||
|
||||
.ui.left.sidebar {
|
||||
right: auto;
|
||||
left: 0px;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.ui.right.sidebar {
|
||||
right: 0px !important;
|
||||
left: auto !important;
|
||||
transform: translate3d(100%, 0%, 0);
|
||||
}
|
||||
|
||||
.ui.top.sidebar,
|
||||
.ui.bottom.sidebar {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
overflow-y: visible !important;
|
||||
}
|
||||
.ui.top.sidebar {
|
||||
top: 0px !important;
|
||||
bottom: auto !important;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
.ui.bottom.sidebar {
|
||||
top: auto !important;
|
||||
bottom: 0px !important;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Pushable
|
||||
---------------*/
|
||||
|
||||
.pushable {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
padding: 0em !important;
|
||||
}
|
||||
|
||||
/* Whole Page */
|
||||
body.pushable {
|
||||
background: @canvasBackground !important;
|
||||
}
|
||||
|
||||
/* Page Context */
|
||||
.pushable:not(body) {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.pushable:not(body) > .ui.sidebar,
|
||||
.pushable:not(body) > .fixed,
|
||||
.pushable:not(body) > .pusher:after {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Fixed
|
||||
---------------*/
|
||||
|
||||
.pushable > .fixed {
|
||||
position: fixed;
|
||||
backface-visibility: hidden;
|
||||
|
||||
transition: transform @duration @easing;
|
||||
will-change: transform;
|
||||
z-index: @fixedLayer;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Page
|
||||
---------------*/
|
||||
|
||||
.pushable > .pusher {
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
transition: transform @duration @easing;
|
||||
z-index: @middleLayer;
|
||||
}
|
||||
|
||||
body.pushable > .pusher {
|
||||
background: @pageBackground;
|
||||
}
|
||||
|
||||
.pushable > .pusher {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Dimmer
|
||||
---------------*/
|
||||
|
||||
.pushable > .pusher:after {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
content: '';
|
||||
background-color: @dimmerColor;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: @dimmerTransition;
|
||||
will-change: opacity;
|
||||
z-index: @dimmerLayer;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Coupling
|
||||
---------------*/
|
||||
|
||||
.ui.sidebar.menu .item {
|
||||
border-radius: 0em !important;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Dimmed
|
||||
---------------*/
|
||||
|
||||
.pushable > .pusher.dimmed:after {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Animating
|
||||
---------------*/
|
||||
|
||||
.ui.animating.sidebar {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Visible
|
||||
---------------*/
|
||||
|
||||
.ui.visible.sidebar {
|
||||
visibility: visible;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* Shadow Direction */
|
||||
.ui.left.visible.sidebar,
|
||||
.ui.right.visible.sidebar {
|
||||
box-shadow: @horizontalBoxShadow;
|
||||
}
|
||||
.ui.top.visible.sidebar,
|
||||
.ui.bottom.visible.sidebar {
|
||||
box-shadow: @verticalBoxShadow;
|
||||
}
|
||||
|
||||
/* Visible On Load */
|
||||
.ui.visible.left.sidebar ~ .fixed,
|
||||
.ui.visible.left.sidebar ~ .pusher {
|
||||
transform: translate3d(@width, 0, 0);
|
||||
}
|
||||
.ui.visible.right.sidebar ~ .fixed,
|
||||
.ui.visible.right.sidebar ~ .pusher {
|
||||
transform: translate3d(-@width, 0, 0);
|
||||
}
|
||||
.ui.visible.top.sidebar ~ .fixed,
|
||||
.ui.visible.top.sidebar ~ .pusher {
|
||||
transform: translate3d(0, @height, 0);
|
||||
}
|
||||
.ui.visible.bottom.sidebar ~ .fixed,
|
||||
.ui.visible.bottom.sidebar ~ .pusher {
|
||||
transform: translate3d(0, -@height, 0);
|
||||
}
|
||||
|
||||
/* opposite sides visible forces content overlay */
|
||||
.ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed,
|
||||
.ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher,
|
||||
.ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed,
|
||||
.ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/*--------------
|
||||
iOS
|
||||
---------------*/
|
||||
|
||||
/*
|
||||
iOS incorrectly sizes document when content
|
||||
is presented outside of view with 2Dtranslate
|
||||
*/
|
||||
html.ios {
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Width
|
||||
---------------*/
|
||||
|
||||
/* Left / Right */
|
||||
.ui[class*="very thin"].left.sidebar,
|
||||
.ui[class*="very thin"].right.sidebar {
|
||||
width: @veryThinWidth;
|
||||
}
|
||||
.ui.thin.left.sidebar,
|
||||
.ui.thin.right.sidebar {
|
||||
width: @thinWidth;
|
||||
}
|
||||
.ui.left.sidebar,
|
||||
.ui.right.sidebar {
|
||||
width: @width;
|
||||
}
|
||||
.ui.wide.left.sidebar,
|
||||
.ui.wide.right.sidebar {
|
||||
width: @wideWidth;
|
||||
}
|
||||
.ui[class*="very wide"].left.sidebar,
|
||||
.ui[class*="very wide"].right.sidebar {
|
||||
width: @veryWideWidth;
|
||||
}
|
||||
|
||||
/* Left Visible */
|
||||
.ui.visible[class*="very thin"].left.sidebar ~ .fixed,
|
||||
.ui.visible[class*="very thin"].left.sidebar ~ .pusher {
|
||||
transform: translate3d(@veryThinWidth, 0, 0);
|
||||
}
|
||||
.ui.visible.thin.left.sidebar ~ .fixed,
|
||||
.ui.visible.thin.left.sidebar ~ .pusher {
|
||||
transform: translate3d(@thinWidth, 0, 0);
|
||||
}
|
||||
.ui.visible.wide.left.sidebar ~ .fixed,
|
||||
.ui.visible.wide.left.sidebar ~ .pusher {
|
||||
transform: translate3d(@wideWidth, 0, 0);
|
||||
}
|
||||
.ui.visible[class*="very wide"].left.sidebar ~ .fixed,
|
||||
.ui.visible[class*="very wide"].left.sidebar ~ .pusher {
|
||||
transform: translate3d(@veryWideWidth, 0, 0);
|
||||
}
|
||||
|
||||
/* Right Visible */
|
||||
.ui.visible[class*="very thin"].right.sidebar ~ .fixed,
|
||||
.ui.visible[class*="very thin"].right.sidebar ~ .pusher {
|
||||
transform: translate3d(-@veryThinWidth, 0, 0);
|
||||
}
|
||||
.ui.visible.thin.right.sidebar ~ .fixed,
|
||||
.ui.visible.thin.right.sidebar ~ .pusher {
|
||||
transform: translate3d(-@thinWidth, 0, 0);
|
||||
}
|
||||
.ui.visible.wide.right.sidebar ~ .fixed,
|
||||
.ui.visible.wide.right.sidebar ~ .pusher {
|
||||
transform: translate3d(-@wideWidth, 0, 0);
|
||||
}
|
||||
.ui.visible[class*="very wide"].right.sidebar ~ .fixed,
|
||||
.ui.visible[class*="very wide"].right.sidebar ~ .pusher {
|
||||
transform: translate3d(-@veryWideWidth, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Animations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Overlay
|
||||
---------------*/
|
||||
|
||||
/* Set-up */
|
||||
.ui.overlay.sidebar {
|
||||
z-index: @topLayer;
|
||||
}
|
||||
|
||||
/* Initial */
|
||||
.ui.left.overlay.sidebar {
|
||||
transform: translate3d(-100%, 0%, 0);
|
||||
}
|
||||
.ui.right.overlay.sidebar {
|
||||
transform: translate3d(100%, 0%, 0);
|
||||
}
|
||||
.ui.top.overlay.sidebar {
|
||||
transform: translate3d(0%, -100%, 0);
|
||||
}
|
||||
.ui.bottom.overlay.sidebar {
|
||||
transform: translate3d(0%, 100%, 0);
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.animating.ui.overlay.sidebar,
|
||||
.ui.visible.overlay.sidebar {
|
||||
transition: transform @duration @easing;
|
||||
}
|
||||
|
||||
/* End - Sidebar */
|
||||
.ui.visible.left.overlay.sidebar {
|
||||
transform: translate3d(0%, 0%, 0);
|
||||
}
|
||||
.ui.visible.right.overlay.sidebar {
|
||||
transform: translate3d(0%, 0%, 0);
|
||||
}
|
||||
.ui.visible.top.overlay.sidebar {
|
||||
transform: translate3d(0%, 0%, 0);
|
||||
}
|
||||
.ui.visible.bottom.overlay.sidebar {
|
||||
transform: translate3d(0%, 0%, 0);
|
||||
}
|
||||
|
||||
/* End - Pusher */
|
||||
.ui.visible.overlay.sidebar ~ .fixed,
|
||||
.ui.visible.overlay.sidebar ~ .pusher {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*--------------
|
||||
Push
|
||||
---------------*/
|
||||
|
||||
/* Initial */
|
||||
.ui.push.sidebar {
|
||||
transition: transform @duration @easing;
|
||||
z-index: @topLayer;
|
||||
}
|
||||
|
||||
/* Sidebar - Initial */
|
||||
.ui.left.push.sidebar {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.ui.right.push.sidebar {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
.ui.top.push.sidebar {
|
||||
transform: translate3d(0%, -100%, 0);
|
||||
}
|
||||
.ui.bottom.push.sidebar {
|
||||
transform: translate3d(0%, 100%, 0);
|
||||
}
|
||||
|
||||
/* End */
|
||||
.ui.visible.push.sidebar {
|
||||
transform: translate3d(0%, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Uncover
|
||||
---------------*/
|
||||
|
||||
/* Initial */
|
||||
.ui.uncover.sidebar {
|
||||
transform: translate3d(0, 0, 0);
|
||||
z-index: @bottomLayer;
|
||||
}
|
||||
|
||||
/* End */
|
||||
.ui.visible.uncover.sidebar {
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: transform @duration @easing;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Slide Along
|
||||
---------------*/
|
||||
|
||||
/* Initial */
|
||||
.ui.slide.along.sidebar {
|
||||
z-index: @bottomLayer;
|
||||
}
|
||||
|
||||
/* Sidebar - Initial */
|
||||
.ui.left.slide.along.sidebar {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
.ui.right.slide.along.sidebar {
|
||||
transform: translate3d(50%, 0, 0);
|
||||
}
|
||||
.ui.top.slide.along.sidebar {
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
.ui.bottom.slide.along.sidebar {
|
||||
transform: translate3d(0%, 50%, 0);
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.ui.animating.slide.along.sidebar {
|
||||
transition: transform @duration @easing;
|
||||
}
|
||||
|
||||
/* End */
|
||||
.ui.visible.slide.along.sidebar {
|
||||
transform: translate3d(0%, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Slide Out
|
||||
---------------*/
|
||||
|
||||
/* Initial */
|
||||
.ui.slide.out.sidebar {
|
||||
z-index: @bottomLayer;
|
||||
}
|
||||
|
||||
/* Sidebar - Initial */
|
||||
.ui.left.slide.out.sidebar {
|
||||
transform: translate3d(50%, 0, 0);
|
||||
}
|
||||
.ui.right.slide.out.sidebar {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
.ui.top.slide.out.sidebar {
|
||||
transform: translate3d(0%, 50%, 0);
|
||||
}
|
||||
.ui.bottom.slide.out.sidebar {
|
||||
transform: translate3d(0%, -50%, 0);
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.ui.animating.slide.out.sidebar {
|
||||
transition: transform @duration @easing;
|
||||
}
|
||||
|
||||
/* End */
|
||||
.ui.visible.slide.out.sidebar {
|
||||
transform: translate3d(0%, 0, 0);
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Scale Down
|
||||
---------------*/
|
||||
|
||||
/* Initial */
|
||||
.ui.scale.down.sidebar {
|
||||
transition: transform @duration @easing;
|
||||
z-index: @topLayer;
|
||||
}
|
||||
|
||||
/* Sidebar - Initial */
|
||||
.ui.left.scale.down.sidebar {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.ui.right.scale.down.sidebar {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
.ui.top.scale.down.sidebar {
|
||||
transform: translate3d(0%, -100%, 0);
|
||||
}
|
||||
.ui.bottom.scale.down.sidebar {
|
||||
transform: translate3d(0%, 100%, 0);
|
||||
}
|
||||
|
||||
/* Pusher - Initial */
|
||||
.ui.scale.down.left.sidebar ~ .pusher {
|
||||
transform-origin: 75% 50%;
|
||||
}
|
||||
.ui.scale.down.right.sidebar ~ .pusher {
|
||||
transform-origin: 25% 50%;
|
||||
}
|
||||
.ui.scale.down.top.sidebar ~ .pusher {
|
||||
transform-origin: 50% 75%;
|
||||
}
|
||||
.ui.scale.down.bottom.sidebar ~ .pusher {
|
||||
transform-origin: 50% 25%;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.ui.animating.scale.down > .visible.ui.sidebar {
|
||||
transition: transform @duration @easing;
|
||||
}
|
||||
.ui.visible.scale.down.sidebar ~ .pusher,
|
||||
.ui.animating.scale.down.sidebar ~ .pusher {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* End */
|
||||
.ui.visible.scale.down.sidebar {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.ui.visible.scale.down.sidebar ~ .pusher {
|
||||
transform: scale(0.75);
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
792
web/semantic/src/definitions/modules/sticky.js
Normal file
792
web/semantic/src/definitions/modules/sticky.js
Normal file
|
|
@ -0,0 +1,792 @@
|
|||
/*!
|
||||
* # Semantic UI - Sticky
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributorss
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ( $, window, document, undefined ) {
|
||||
|
||||
"use strict";
|
||||
|
||||
$.fn.sticky = 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 = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.fn.sticky.settings, parameters)
|
||||
: $.extend({}, $.fn.sticky.settings),
|
||||
|
||||
className = settings.className,
|
||||
namespace = settings.namespace,
|
||||
error = settings.error,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = 'module-' + namespace,
|
||||
|
||||
$module = $(this),
|
||||
$window = $(window),
|
||||
$container = $module.offsetParent(),
|
||||
$scroll = $(settings.scrollContext),
|
||||
$context,
|
||||
|
||||
selector = $module.selector || '',
|
||||
instance = $module.data(moduleNamespace),
|
||||
|
||||
requestAnimationFrame = window.requestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| function(callback) { setTimeout(callback, 0); },
|
||||
|
||||
element = this,
|
||||
observer,
|
||||
module
|
||||
;
|
||||
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
|
||||
module.determineContext();
|
||||
module.verbose('Initializing sticky', settings, $container);
|
||||
|
||||
module.save.positions();
|
||||
module.checkErrors();
|
||||
module.bind.events();
|
||||
|
||||
if(settings.observeChanges) {
|
||||
module.observeChanges();
|
||||
}
|
||||
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.reset();
|
||||
if(observer) {
|
||||
observer.disconnect();
|
||||
}
|
||||
$window.off('resize' + eventNamespace, module.event.resize);
|
||||
$scroll.off('scroll' + eventNamespace, module.event.scroll);
|
||||
$module.removeData(moduleNamespace);
|
||||
},
|
||||
|
||||
observeChanges: function() {
|
||||
var
|
||||
context = $context[0]
|
||||
;
|
||||
if('MutationObserver' in window) {
|
||||
observer = new MutationObserver(function(mutations) {
|
||||
clearTimeout(module.timer);
|
||||
module.timer = setTimeout(function() {
|
||||
module.verbose('DOM tree modified, updating sticky menu');
|
||||
module.refresh();
|
||||
}, 20);
|
||||
});
|
||||
observer.observe(element, {
|
||||
childList : true,
|
||||
subtree : true
|
||||
});
|
||||
observer.observe(context, {
|
||||
childList : true,
|
||||
subtree : true
|
||||
});
|
||||
module.debug('Setting up mutation observer', observer);
|
||||
}
|
||||
},
|
||||
|
||||
determineContext: function() {
|
||||
if(settings.context) {
|
||||
$context = $(settings.context);
|
||||
}
|
||||
else {
|
||||
$context = $container;
|
||||
}
|
||||
if($context.length === 0) {
|
||||
module.error(error.invalidContext, settings.context, $module);
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
checkErrors: function() {
|
||||
if( module.is.hidden() ) {
|
||||
module.error(error.visible, $module);
|
||||
}
|
||||
if(module.cache.element.height > module.cache.context.height) {
|
||||
module.reset();
|
||||
module.error(error.elementSize, $module);
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
bind: {
|
||||
events: function() {
|
||||
$window.on('resize' + eventNamespace, module.event.resize);
|
||||
$scroll.on('scroll' + eventNamespace, module.event.scroll);
|
||||
}
|
||||
},
|
||||
|
||||
event: {
|
||||
resize: function() {
|
||||
requestAnimationFrame(function() {
|
||||
module.refresh();
|
||||
module.stick();
|
||||
});
|
||||
},
|
||||
scroll: function() {
|
||||
requestAnimationFrame(function() {
|
||||
module.stick();
|
||||
settings.onScroll.call(element);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
refresh: function(hardRefresh) {
|
||||
module.reset();
|
||||
if(hardRefresh) {
|
||||
$container = $module.offsetParent();
|
||||
}
|
||||
module.save.positions();
|
||||
module.stick();
|
||||
settings.onReposition.call(element);
|
||||
},
|
||||
|
||||
supports: {
|
||||
sticky: function() {
|
||||
var
|
||||
$element = $('<div/>'),
|
||||
element = $element.get()
|
||||
;
|
||||
$element.addClass(className.supported);
|
||||
return($element.css('position').match('sticky'));
|
||||
}
|
||||
},
|
||||
|
||||
save: {
|
||||
scroll: function(scroll) {
|
||||
module.lastScroll = scroll;
|
||||
},
|
||||
positions: function() {
|
||||
var
|
||||
window = {
|
||||
height: $window.height()
|
||||
},
|
||||
element = {
|
||||
margin: {
|
||||
top : parseInt($module.css('margin-top'), 10),
|
||||
bottom : parseInt($module.css('margin-bottom'), 10),
|
||||
},
|
||||
offset : $module.offset(),
|
||||
width : $module.outerWidth(),
|
||||
height : $module.outerHeight()
|
||||
},
|
||||
context = {
|
||||
offset : $context.offset(),
|
||||
height : $context.outerHeight(),
|
||||
bottomPadding : parseInt($context.css('padding-bottom'), 10)
|
||||
}
|
||||
;
|
||||
module.cache = {
|
||||
fits : ( element.height < window.height ),
|
||||
window: {
|
||||
height: window.height
|
||||
},
|
||||
element: {
|
||||
margin : element.margin,
|
||||
top : element.offset.top - element.margin.top,
|
||||
left : element.offset.left,
|
||||
width : element.width,
|
||||
height : element.height,
|
||||
bottom : element.offset.top + element.height
|
||||
},
|
||||
context: {
|
||||
top : context.offset.top,
|
||||
height : context.height,
|
||||
bottomPadding : context.bottomPadding,
|
||||
bottom : context.offset.top + context.height - context.bottomPadding
|
||||
}
|
||||
};
|
||||
module.set.containerSize();
|
||||
module.set.size();
|
||||
module.stick();
|
||||
module.debug('Caching element positions', module.cache);
|
||||
}
|
||||
},
|
||||
|
||||
get: {
|
||||
direction: function(scroll) {
|
||||
var
|
||||
direction = 'down'
|
||||
;
|
||||
scroll = scroll || $scroll.scrollTop();
|
||||
if(module.lastScroll !== undefined) {
|
||||
if(module.lastScroll < scroll) {
|
||||
direction = 'down';
|
||||
}
|
||||
else if(module.lastScroll > scroll) {
|
||||
direction = 'up';
|
||||
}
|
||||
}
|
||||
return direction;
|
||||
},
|
||||
scrollChange: function(scroll) {
|
||||
scroll = scroll || $scroll.scrollTop();
|
||||
return (module.lastScroll)
|
||||
? (scroll - module.lastScroll)
|
||||
: 0
|
||||
;
|
||||
},
|
||||
currentElementScroll: function() {
|
||||
return ( module.is.top() )
|
||||
? Math.abs(parseInt($module.css('top'), 10)) || 0
|
||||
: Math.abs(parseInt($module.css('bottom'), 10)) || 0
|
||||
;
|
||||
},
|
||||
elementScroll: function(scroll) {
|
||||
scroll = scroll || $scroll.scrollTop();
|
||||
var
|
||||
element = module.cache.element,
|
||||
window = module.cache.window,
|
||||
delta = module.get.scrollChange(scroll),
|
||||
maxScroll = (element.height - window.height + settings.offset),
|
||||
currentScroll = module.get.currentElementScroll(),
|
||||
possibleScroll = (currentScroll + delta),
|
||||
elementScroll
|
||||
;
|
||||
if(module.cache.fits || possibleScroll < 0) {
|
||||
elementScroll = 0;
|
||||
}
|
||||
else if (possibleScroll > maxScroll ) {
|
||||
elementScroll = maxScroll;
|
||||
}
|
||||
else {
|
||||
elementScroll = possibleScroll;
|
||||
}
|
||||
return elementScroll;
|
||||
}
|
||||
},
|
||||
|
||||
remove: {
|
||||
offset: function() {
|
||||
$module.css('margin-top', '');
|
||||
}
|
||||
},
|
||||
|
||||
set: {
|
||||
offset: function() {
|
||||
module.verbose('Setting offset on element', settings.offset);
|
||||
$module.css('margin-top', settings.offset);
|
||||
},
|
||||
containerSize: function() {
|
||||
var
|
||||
tagName = $container.get(0).tagName
|
||||
;
|
||||
if(tagName === 'HTML' || tagName == 'body') {
|
||||
// this can trigger for too many reasons
|
||||
//module.error(error.container, tagName, $module);
|
||||
$container = $module.offsetParent();
|
||||
}
|
||||
else {
|
||||
module.debug('Settings container size', module.cache.context.height);
|
||||
if( Math.abs($container.height() - module.cache.context.height) > 5) {
|
||||
$container.css({
|
||||
height: module.cache.context.height
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
scroll: function(scroll) {
|
||||
module.debug('Setting scroll on element', scroll);
|
||||
if( module.is.top() ) {
|
||||
$module
|
||||
.css('bottom', '')
|
||||
.css('top', -scroll)
|
||||
;
|
||||
}
|
||||
if( module.is.bottom() ) {
|
||||
$module
|
||||
.css('top', '')
|
||||
.css('bottom', scroll)
|
||||
;
|
||||
}
|
||||
},
|
||||
size: function() {
|
||||
if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
|
||||
$module
|
||||
.css({
|
||||
width : module.cache.element.width,
|
||||
height : module.cache.element.height
|
||||
})
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
is: {
|
||||
top: function() {
|
||||
return $module.hasClass(className.top);
|
||||
},
|
||||
bottom: function() {
|
||||
return $module.hasClass(className.bottom);
|
||||
},
|
||||
initialPosition: function() {
|
||||
return (!module.is.fixed() && !module.is.bound());
|
||||
},
|
||||
hidden: function() {
|
||||
return (!$module.is(':visible'));
|
||||
},
|
||||
bound: function() {
|
||||
return $module.hasClass(className.bound);
|
||||
},
|
||||
fixed: function() {
|
||||
return $module.hasClass(className.fixed);
|
||||
}
|
||||
},
|
||||
|
||||
stick: function() {
|
||||
var
|
||||
cache = module.cache,
|
||||
fits = cache.fits,
|
||||
element = cache.element,
|
||||
window = cache.window,
|
||||
context = cache.context,
|
||||
offset = (module.is.bottom() && settings.pushing)
|
||||
? settings.bottomOffset
|
||||
: settings.offset,
|
||||
scroll = {
|
||||
top : $scroll.scrollTop() + offset,
|
||||
bottom : $scroll.scrollTop() + offset + window.height
|
||||
},
|
||||
direction = module.get.direction(scroll.top),
|
||||
elementScroll = module.get.elementScroll(scroll.top),
|
||||
|
||||
// shorthand
|
||||
doesntFit = !fits,
|
||||
elementVisible = (element.height !== 0)
|
||||
;
|
||||
|
||||
// save current scroll for next run
|
||||
module.save.scroll(scroll.top);
|
||||
|
||||
if(elementVisible) {
|
||||
|
||||
if( module.is.initialPosition() ) {
|
||||
if(scroll.top >= context.bottom) {
|
||||
console.log(scroll.top, context.bottom);
|
||||
module.debug('Element bottom of container');
|
||||
module.bindBottom();
|
||||
}
|
||||
else if(scroll.top >= element.top) {
|
||||
module.debug('Element passed, fixing element to page');
|
||||
module.fixTop();
|
||||
}
|
||||
}
|
||||
else if( module.is.fixed() ) {
|
||||
|
||||
// currently fixed top
|
||||
if( module.is.top() ) {
|
||||
if( scroll.top < element.top ) {
|
||||
module.debug('Fixed element reached top of container');
|
||||
module.setInitialPosition();
|
||||
}
|
||||
else if( (element.height + scroll.top - elementScroll) > context.bottom ) {
|
||||
module.debug('Fixed element reached bottom of container');
|
||||
module.bindBottom();
|
||||
}
|
||||
// scroll element if larger than screen
|
||||
else if(doesntFit) {
|
||||
module.set.scroll(elementScroll);
|
||||
}
|
||||
}
|
||||
|
||||
// currently fixed bottom
|
||||
else if(module.is.bottom() ) {
|
||||
|
||||
// top edge
|
||||
if( (scroll.bottom - element.height) < element.top) {
|
||||
module.debug('Bottom fixed rail has reached top of container');
|
||||
module.setInitialPosition();
|
||||
}
|
||||
// bottom edge
|
||||
else if(scroll.bottom > context.bottom) {
|
||||
module.debug('Bottom fixed rail has reached bottom of container');
|
||||
module.bindBottom();
|
||||
}
|
||||
// scroll element if larger than screen
|
||||
else if(doesntFit) {
|
||||
module.set.scroll(elementScroll);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
else if( module.is.bottom() ) {
|
||||
if(settings.pushing) {
|
||||
if(module.is.bound() && scroll.bottom < context.bottom ) {
|
||||
module.debug('Fixing bottom attached element to bottom of browser.');
|
||||
module.fixBottom();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if(module.is.bound() && (scroll.top < context.bottom - element.height) ) {
|
||||
module.debug('Fixing bottom attached element to top of browser.');
|
||||
module.fixTop();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
bindTop: function() {
|
||||
module.debug('Binding element to top of parent container');
|
||||
module.remove.offset();
|
||||
$module
|
||||
.css('left' , '')
|
||||
.css('top' , '')
|
||||
.css('margin-bottom' , '')
|
||||
.removeClass(className.fixed)
|
||||
.removeClass(className.bottom)
|
||||
.addClass(className.bound)
|
||||
.addClass(className.top)
|
||||
;
|
||||
settings.onTop.call(element);
|
||||
settings.onUnstick.call(element);
|
||||
},
|
||||
bindBottom: function() {
|
||||
module.debug('Binding element to bottom of parent container');
|
||||
module.remove.offset();
|
||||
$module
|
||||
.css('left' , '')
|
||||
.css('top' , '')
|
||||
.css('margin-bottom' , module.cache.context.bottomPadding)
|
||||
.removeClass(className.fixed)
|
||||
.removeClass(className.top)
|
||||
.addClass(className.bound)
|
||||
.addClass(className.bottom)
|
||||
;
|
||||
settings.onBottom.call(element);
|
||||
settings.onUnstick.call(element);
|
||||
},
|
||||
|
||||
setInitialPosition: function() {
|
||||
module.unfix();
|
||||
module.unbind();
|
||||
},
|
||||
|
||||
|
||||
fixTop: function() {
|
||||
module.debug('Fixing element to top of page');
|
||||
module.set.offset();
|
||||
$module
|
||||
.css('left', module.cache.element.left)
|
||||
.css('bottom' , '')
|
||||
.removeClass(className.bound)
|
||||
.removeClass(className.bottom)
|
||||
.addClass(className.fixed)
|
||||
.addClass(className.top)
|
||||
;
|
||||
settings.onStick.call(element);
|
||||
},
|
||||
|
||||
fixBottom: function() {
|
||||
module.debug('Sticking element to bottom of page');
|
||||
module.set.offset();
|
||||
$module
|
||||
.css('left', module.cache.element.left)
|
||||
.css('bottom' , '')
|
||||
.removeClass(className.bound)
|
||||
.removeClass(className.top)
|
||||
.addClass(className.fixed)
|
||||
.addClass(className.bottom)
|
||||
;
|
||||
settings.onStick.call(element);
|
||||
},
|
||||
|
||||
unbind: function() {
|
||||
module.debug('Removing absolute position on element');
|
||||
module.remove.offset();
|
||||
$module
|
||||
.removeClass(className.bound)
|
||||
.removeClass(className.top)
|
||||
.removeClass(className.bottom)
|
||||
;
|
||||
},
|
||||
|
||||
unfix: function() {
|
||||
module.debug('Removing fixed position on element');
|
||||
module.remove.offset();
|
||||
$module
|
||||
.removeClass(className.fixed)
|
||||
.removeClass(className.top)
|
||||
.removeClass(className.bottom)
|
||||
;
|
||||
settings.onUnstick.call(element);
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
module.debug('Reseting elements position');
|
||||
module.unbind();
|
||||
module.unfix();
|
||||
module.resetCSS();
|
||||
},
|
||||
|
||||
resetCSS: function() {
|
||||
$module
|
||||
.css({
|
||||
top : '',
|
||||
bottom : '',
|
||||
width : '',
|
||||
height : ''
|
||||
})
|
||||
;
|
||||
$container
|
||||
.css({
|
||||
height: ''
|
||||
})
|
||||
;
|
||||
},
|
||||
|
||||
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, 0);
|
||||
},
|
||||
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 {
|
||||
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) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.sticky.settings = {
|
||||
|
||||
name : 'Sticky',
|
||||
namespace : 'sticky',
|
||||
|
||||
debug : false,
|
||||
verbose : false,
|
||||
performance : false,
|
||||
|
||||
pushing : false,
|
||||
context : false,
|
||||
scrollContext : window,
|
||||
|
||||
offset : 0,
|
||||
bottomOffset : 0,
|
||||
|
||||
observeChanges : true,
|
||||
|
||||
onReposition : function(){},
|
||||
onScroll : function(){},
|
||||
onStick : function(){},
|
||||
onUnstick : function(){},
|
||||
onTop : function(){},
|
||||
onBottom : function(){},
|
||||
|
||||
error : {
|
||||
container : 'Sticky element must be inside a relative container',
|
||||
visible : 'Element is hidden, you must call refresh after element becomes visible',
|
||||
method : 'The method you called is not defined.',
|
||||
invalidContext : 'Context specified does not exist',
|
||||
elementSize : 'Sticky element is larger than its container, cannot create sticky.'
|
||||
},
|
||||
|
||||
className : {
|
||||
bound : 'bound',
|
||||
fixed : 'fixed',
|
||||
supported : 'native',
|
||||
top : 'top',
|
||||
bottom : 'bottom'
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})( jQuery, window , document );
|
||||
75
web/semantic/src/definitions/modules/sticky.less
Normal file
75
web/semantic/src/definitions/modules/sticky.less
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
/*!
|
||||
* # Semantic UI - Sticky
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'sticky';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Sticky
|
||||
*******************************/
|
||||
|
||||
.ui.sticky {
|
||||
position: static;
|
||||
transition: @transition;
|
||||
z-index: @zIndex;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/* Bound */
|
||||
.ui.sticky.bound {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/* Fixed */
|
||||
.ui.sticky.fixed {
|
||||
position: fixed;
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/* Bound/Fixed Position */
|
||||
.ui.sticky.bound.top,
|
||||
.ui.sticky.fixed.top {
|
||||
top: 0px;
|
||||
bottom: auto;
|
||||
}
|
||||
.ui.sticky.bound.bottom,
|
||||
.ui.sticky.fixed.bottom {
|
||||
top: auto;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
.ui.native.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: -moz-sticky;
|
||||
position: -ms-sticky;
|
||||
position: -o-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
802
web/semantic/src/definitions/modules/tab.js
Normal file
802
web/semantic/src/definitions/modules/tab.js
Normal file
|
|
@ -0,0 +1,802 @@
|
|||
/*!
|
||||
* # Semantic UI - Tab
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributorss
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
$.fn.tab = function(parameters) {
|
||||
|
||||
var
|
||||
// use window context if none specified
|
||||
$allModules = $.isFunction(this)
|
||||
? $(window)
|
||||
: $(this),
|
||||
|
||||
settings = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.fn.tab.settings, parameters)
|
||||
: $.extend({}, $.fn.tab.settings),
|
||||
|
||||
moduleSelector = $allModules.selector || '',
|
||||
time = new Date().getTime(),
|
||||
performance = [],
|
||||
|
||||
query = arguments[0],
|
||||
methodInvoked = (typeof query == 'string'),
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
|
||||
module,
|
||||
returnedValue
|
||||
;
|
||||
|
||||
$allModules
|
||||
.each(function() {
|
||||
var
|
||||
|
||||
className = settings.className,
|
||||
metadata = settings.metadata,
|
||||
selector = settings.selector,
|
||||
error = settings.error,
|
||||
|
||||
eventNamespace = '.' + settings.namespace,
|
||||
moduleNamespace = 'module-' + settings.namespace,
|
||||
|
||||
$module = $(this),
|
||||
|
||||
cache = {},
|
||||
firstLoad = true,
|
||||
recursionDepth = 0,
|
||||
|
||||
$context,
|
||||
$tabs,
|
||||
activeTabPath,
|
||||
parameterArray,
|
||||
historyEvent,
|
||||
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace)
|
||||
;
|
||||
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.debug('Initializing tab menu item', $module);
|
||||
|
||||
module.determineTabs();
|
||||
module.debug('Determining tabs', settings.context, $tabs);
|
||||
|
||||
// set up automatic routing
|
||||
if(settings.auto) {
|
||||
module.set.auto();
|
||||
}
|
||||
|
||||
// attach events if navigation wasn't set to window
|
||||
if( !$.isWindow( element ) ) {
|
||||
module.debug('Attaching tab activation events to element', $module);
|
||||
$module
|
||||
.on('click' + eventNamespace, module.event.click)
|
||||
;
|
||||
}
|
||||
module.instantiate();
|
||||
},
|
||||
|
||||
determineTabs: function() {
|
||||
var
|
||||
$reference
|
||||
;
|
||||
|
||||
// determine tab context
|
||||
if(settings.context === 'parent') {
|
||||
if($module.closest(selector.ui).length > 0) {
|
||||
$reference = $module.closest(selector.ui);
|
||||
module.verbose('Using closest UI element for determining parent', $reference);
|
||||
}
|
||||
else {
|
||||
$reference = $module;
|
||||
}
|
||||
$context = $reference.parent();
|
||||
module.verbose('Determined parent element for creating context', $context);
|
||||
}
|
||||
else if(settings.context) {
|
||||
$context = $(settings.context);
|
||||
module.verbose('Using selector for tab context', settings.context, $context);
|
||||
}
|
||||
else {
|
||||
$context = $('body');
|
||||
}
|
||||
|
||||
// find tabs
|
||||
if(settings.childrenOnly) {
|
||||
$tabs = $context.children(selector.tabs);
|
||||
module.debug('Searching tab context children for tabs', $context, $tabs);
|
||||
}
|
||||
else {
|
||||
$tabs = $context.find(selector.tabs);
|
||||
module.debug('Searching tab context for tabs', $context, $tabs);
|
||||
}
|
||||
},
|
||||
|
||||
initializeHistory: function() {
|
||||
if(settings.history) {
|
||||
module.debug('Initializing page state');
|
||||
if( $.address === undefined ) {
|
||||
module.error(error.state);
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
if(settings.historyType == 'state') {
|
||||
module.debug('Using HTML5 to manage state');
|
||||
if(settings.path !== false) {
|
||||
$.address
|
||||
.history(true)
|
||||
.state(settings.path)
|
||||
;
|
||||
}
|
||||
else {
|
||||
module.error(error.path);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
$.address
|
||||
.bind('change', module.event.history.change)
|
||||
;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
instantiate: function () {
|
||||
module.verbose('Storing instance of module', module);
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, module)
|
||||
;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.debug('Destroying tabs', $module);
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
.off(eventNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
event: {
|
||||
click: function(event) {
|
||||
var
|
||||
tabPath = $(this).data(metadata.tab)
|
||||
;
|
||||
if(tabPath !== undefined) {
|
||||
if(settings.history) {
|
||||
module.verbose('Updating page state', event);
|
||||
$.address.value(tabPath);
|
||||
}
|
||||
else {
|
||||
module.verbose('Changing tab', event);
|
||||
module.changeTab(tabPath);
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
else {
|
||||
module.debug('No tab specified');
|
||||
}
|
||||
},
|
||||
history: {
|
||||
change: function(event) {
|
||||
var
|
||||
tabPath = event.pathNames.join('/') || module.get.initialPath(),
|
||||
pageTitle = settings.templates.determineTitle(tabPath) || false
|
||||
;
|
||||
module.performance.display();
|
||||
module.debug('History change event', tabPath, event);
|
||||
historyEvent = event;
|
||||
if(tabPath !== undefined) {
|
||||
module.changeTab(tabPath);
|
||||
}
|
||||
if(pageTitle) {
|
||||
$.address.title(pageTitle);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
if(activeTabPath) {
|
||||
module.debug('Refreshing tab', activeTabPath);
|
||||
module.changeTab(activeTabPath);
|
||||
}
|
||||
},
|
||||
|
||||
cache: {
|
||||
|
||||
read: function(cacheKey) {
|
||||
return (cacheKey !== undefined)
|
||||
? cache[cacheKey]
|
||||
: false
|
||||
;
|
||||
},
|
||||
add: function(cacheKey, content) {
|
||||
cacheKey = cacheKey || activeTabPath;
|
||||
module.debug('Adding cached content for', cacheKey);
|
||||
cache[cacheKey] = content;
|
||||
},
|
||||
remove: function(cacheKey) {
|
||||
cacheKey = cacheKey || activeTabPath;
|
||||
module.debug('Removing cached content for', cacheKey);
|
||||
delete cache[cacheKey];
|
||||
}
|
||||
},
|
||||
|
||||
set: {
|
||||
auto: function() {
|
||||
var
|
||||
url = (typeof settings.path == 'string')
|
||||
? settings.path.replace(/\/$/, '') + '/{$tab}'
|
||||
: '/{$tab}'
|
||||
;
|
||||
module.verbose('Setting up automatic tab retrieval from server', url);
|
||||
if($.isPlainObject(settings.apiSettings)) {
|
||||
settings.apiSettings.url = url;
|
||||
}
|
||||
else {
|
||||
settings.apiSettings = {
|
||||
url: url
|
||||
};
|
||||
}
|
||||
},
|
||||
state: function(state) {
|
||||
$.address.value(state);
|
||||
}
|
||||
},
|
||||
|
||||
changeTab: function(tabPath) {
|
||||
var
|
||||
pushStateAvailable = (window.history && window.history.pushState),
|
||||
shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad),
|
||||
remoteContent = (settings.auto || $.isPlainObject(settings.apiSettings) ),
|
||||
// only get default path if not remote content
|
||||
pathArray = (remoteContent && !shouldIgnoreLoad)
|
||||
? module.utilities.pathToArray(tabPath)
|
||||
: module.get.defaultPathArray(tabPath)
|
||||
;
|
||||
tabPath = module.utilities.arrayToPath(pathArray);
|
||||
$.each(pathArray, function(index, tab) {
|
||||
var
|
||||
currentPathArray = pathArray.slice(0, index + 1),
|
||||
currentPath = module.utilities.arrayToPath(currentPathArray),
|
||||
|
||||
isTab = module.is.tab(currentPath),
|
||||
isLastIndex = (index + 1 == pathArray.length),
|
||||
|
||||
$tab = module.get.tabElement(currentPath),
|
||||
$anchor,
|
||||
nextPathArray,
|
||||
nextPath,
|
||||
isLastTab
|
||||
;
|
||||
module.verbose('Looking for tab', tab);
|
||||
if(isTab) {
|
||||
|
||||
module.verbose('Tab was found', tab);
|
||||
// scope up
|
||||
activeTabPath = currentPath;
|
||||
parameterArray = module.utilities.filterArray(pathArray, currentPathArray);
|
||||
|
||||
if(isLastIndex) {
|
||||
isLastTab = true;
|
||||
}
|
||||
else {
|
||||
nextPathArray = pathArray.slice(0, index + 2);
|
||||
nextPath = module.utilities.arrayToPath(nextPathArray);
|
||||
isLastTab = ( !module.is.tab(nextPath) );
|
||||
if(isLastTab) {
|
||||
module.verbose('Tab parameters found', nextPathArray);
|
||||
}
|
||||
}
|
||||
if(isLastTab && remoteContent) {
|
||||
if(!shouldIgnoreLoad) {
|
||||
module.activate.navigation(currentPath);
|
||||
module.content.fetch(currentPath, tabPath);
|
||||
}
|
||||
else {
|
||||
module.debug('Ignoring remote content on first tab load', currentPath);
|
||||
firstLoad = false;
|
||||
module.cache.add(tabPath, $tab.html());
|
||||
module.activate.all(currentPath);
|
||||
settings.onTabInit.call($tab, currentPath, parameterArray, historyEvent);
|
||||
settings.onTabLoad.call($tab, currentPath, parameterArray, historyEvent);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
module.debug('Opened local tab', currentPath);
|
||||
module.activate.all(currentPath);
|
||||
if( !module.cache.read(currentPath) ) {
|
||||
module.cache.add(currentPath, true);
|
||||
module.debug('First time tab loaded calling tab init');
|
||||
settings.onTabInit.call($tab, currentPath, parameterArray, historyEvent);
|
||||
}
|
||||
settings.onTabLoad.call($tab, currentPath, parameterArray, historyEvent);
|
||||
}
|
||||
}
|
||||
else if(tabPath.search('/') == -1 && tabPath !== '') {
|
||||
// look for in page anchor
|
||||
$anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]'),
|
||||
currentPath = $anchor.closest('[data-tab]').data('tab');
|
||||
$tab = module.get.tabElement(currentPath);
|
||||
// if anchor exists use parent tab
|
||||
if($anchor && $anchor.length > 0 && currentPath) {
|
||||
module.debug('No tab found, but deep anchor link present, opening parent tab');
|
||||
module.activate.all(currentPath);
|
||||
if( !module.cache.read(currentPath) ) {
|
||||
module.cache.add(currentPath, true);
|
||||
module.debug('First time tab loaded calling tab init');
|
||||
settings.onTabInit.call($tab, currentPath, parameterArray, historyEvent);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
else {
|
||||
module.error(error.missingTab, $module, $context, currentPath);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
content: {
|
||||
|
||||
fetch: function(tabPath, fullTabPath) {
|
||||
var
|
||||
$tab = module.get.tabElement(tabPath),
|
||||
apiSettings = {
|
||||
dataType : 'html',
|
||||
on : 'now',
|
||||
onSuccess : function(response) {
|
||||
module.cache.add(fullTabPath, response);
|
||||
module.content.update(tabPath, response);
|
||||
if(tabPath == activeTabPath) {
|
||||
module.debug('Content loaded', tabPath);
|
||||
module.activate.tab(tabPath);
|
||||
}
|
||||
else {
|
||||
module.debug('Content loaded in background', tabPath);
|
||||
}
|
||||
settings.onTabInit.call($tab, tabPath, parameterArray, historyEvent);
|
||||
settings.onTabLoad.call($tab, tabPath, parameterArray, historyEvent);
|
||||
},
|
||||
urlData: { tab: fullTabPath }
|
||||
},
|
||||
request = $tab.api('get request') || false,
|
||||
existingRequest = ( request && request.state() === 'pending' ),
|
||||
requestSettings,
|
||||
cachedContent
|
||||
;
|
||||
|
||||
fullTabPath = fullTabPath || tabPath;
|
||||
cachedContent = module.cache.read(fullTabPath);
|
||||
|
||||
|
||||
module.activate.tab(tabPath);
|
||||
|
||||
if(settings.cache && cachedContent) {
|
||||
module.debug('Showing existing content', fullTabPath);
|
||||
module.content.update(tabPath, cachedContent);
|
||||
settings.onTabLoad.call($tab, tabPath, parameterArray, historyEvent);
|
||||
}
|
||||
else if(existingRequest) {
|
||||
module.debug('Content is already loading', fullTabPath);
|
||||
$tab.addClass(className.loading);
|
||||
}
|
||||
else if($.api !== undefined) {
|
||||
requestSettings = $.extend(true, {
|
||||
headers: { 'X-Remote': true }
|
||||
}, settings.apiSettings, apiSettings);
|
||||
module.debug('Retrieving remote content', fullTabPath, requestSettings);
|
||||
$tab.api( requestSettings );
|
||||
}
|
||||
else {
|
||||
module.error(error.api);
|
||||
}
|
||||
},
|
||||
|
||||
update: function(tabPath, html) {
|
||||
module.debug('Updating html for', tabPath);
|
||||
var
|
||||
$tab = module.get.tabElement(tabPath)
|
||||
;
|
||||
$tab
|
||||
.html(html)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
activate: {
|
||||
all: function(tabPath) {
|
||||
module.activate.tab(tabPath);
|
||||
module.activate.navigation(tabPath);
|
||||
},
|
||||
tab: function(tabPath) {
|
||||
var
|
||||
$tab = module.get.tabElement(tabPath)
|
||||
;
|
||||
module.verbose('Showing tab content for', $tab);
|
||||
$tab
|
||||
.addClass(className.active)
|
||||
.siblings($tabs)
|
||||
.removeClass(className.active + ' ' + className.loading)
|
||||
;
|
||||
},
|
||||
navigation: function(tabPath) {
|
||||
var
|
||||
$navigation = module.get.navElement(tabPath)
|
||||
;
|
||||
module.verbose('Activating tab navigation for', $navigation, tabPath);
|
||||
$navigation
|
||||
.addClass(className.active)
|
||||
.siblings($allModules)
|
||||
.removeClass(className.active + ' ' + className.loading)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
deactivate: {
|
||||
all: function() {
|
||||
module.deactivate.navigation();
|
||||
module.deactivate.tabs();
|
||||
},
|
||||
navigation: function() {
|
||||
$allModules
|
||||
.removeClass(className.active)
|
||||
;
|
||||
},
|
||||
tabs: function() {
|
||||
$tabs
|
||||
.removeClass(className.active + ' ' + className.loading)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
is: {
|
||||
tab: function(tabName) {
|
||||
return (tabName !== undefined)
|
||||
? ( module.get.tabElement(tabName).length > 0 )
|
||||
: false
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
get: {
|
||||
initialPath: function() {
|
||||
return $allModules.eq(0).data(metadata.tab) || $tabs.eq(0).data(metadata.tab);
|
||||
},
|
||||
path: function() {
|
||||
return $.address.value();
|
||||
},
|
||||
// adds default tabs to tab path
|
||||
defaultPathArray: function(tabPath) {
|
||||
return module.utilities.pathToArray( module.get.defaultPath(tabPath) );
|
||||
},
|
||||
defaultPath: function(tabPath) {
|
||||
var
|
||||
$defaultNav = $allModules.filter('[data-' + metadata.tab + '^="' + tabPath + '/"]').eq(0),
|
||||
defaultTab = $defaultNav.data(metadata.tab) || false
|
||||
;
|
||||
if( defaultTab ) {
|
||||
module.debug('Found default tab', defaultTab);
|
||||
if(recursionDepth < settings.maxDepth) {
|
||||
recursionDepth++;
|
||||
return module.get.defaultPath(defaultTab);
|
||||
}
|
||||
module.error(error.recursion);
|
||||
}
|
||||
else {
|
||||
module.debug('No default tabs found for', tabPath, $tabs);
|
||||
}
|
||||
recursionDepth = 0;
|
||||
return tabPath;
|
||||
},
|
||||
navElement: function(tabPath) {
|
||||
tabPath = tabPath || activeTabPath;
|
||||
return $allModules.filter('[data-' + metadata.tab + '="' + tabPath + '"]');
|
||||
},
|
||||
tabElement: function(tabPath) {
|
||||
var
|
||||
$fullPathTab,
|
||||
$simplePathTab,
|
||||
tabPathArray,
|
||||
lastTab
|
||||
;
|
||||
tabPath = tabPath || activeTabPath;
|
||||
tabPathArray = module.utilities.pathToArray(tabPath);
|
||||
lastTab = module.utilities.last(tabPathArray);
|
||||
$fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]');
|
||||
$simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]');
|
||||
return ($fullPathTab.length > 0)
|
||||
? $fullPathTab
|
||||
: $simplePathTab
|
||||
;
|
||||
},
|
||||
tab: function() {
|
||||
return activeTabPath;
|
||||
}
|
||||
},
|
||||
|
||||
utilities: {
|
||||
filterArray: function(keepArray, removeArray) {
|
||||
return $.grep(keepArray, function(keepValue) {
|
||||
return ( $.inArray(keepValue, removeArray) == -1);
|
||||
});
|
||||
},
|
||||
last: function(array) {
|
||||
return $.isArray(array)
|
||||
? array[ array.length - 1]
|
||||
: false
|
||||
;
|
||||
},
|
||||
pathToArray: function(pathName) {
|
||||
if(pathName === undefined) {
|
||||
pathName = activeTabPath;
|
||||
}
|
||||
return typeof pathName == 'string'
|
||||
? pathName.split('/')
|
||||
: [pathName]
|
||||
;
|
||||
},
|
||||
arrayToPath: function(pathArray) {
|
||||
return $.isArray(pathArray)
|
||||
? pathArray.join('/')
|
||||
: false
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
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) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
if(module && !methodInvoked) {
|
||||
module.initializeHistory();
|
||||
}
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
|
||||
};
|
||||
|
||||
// shortcut for tabbed content with no defined navigation
|
||||
$.tab = function() {
|
||||
$(window).tab.apply(this, arguments);
|
||||
};
|
||||
|
||||
$.fn.tab.settings = {
|
||||
|
||||
name : 'Tab',
|
||||
namespace : 'tab',
|
||||
|
||||
debug : false,
|
||||
verbose : true,
|
||||
performance : true,
|
||||
|
||||
auto : false, // uses pjax style endpoints fetching content from same url with remote-content headers
|
||||
history : false, // use browser history
|
||||
historyType : 'hash', // #/ or html5 state
|
||||
path : false, // base path of url
|
||||
|
||||
context : false, // specify a context that tabs must appear inside
|
||||
childrenOnly : false, // use only tabs that are children of context
|
||||
maxDepth : 25, // max depth a tab can be nested
|
||||
|
||||
alwaysRefresh : false, // load tab content new every tab click
|
||||
cache : true, // cache the content requests to pull locally
|
||||
ignoreFirstLoad : false, // don't load remote content on first load
|
||||
apiSettings : false, // settings for api call
|
||||
|
||||
onTabInit : function(tabPath, parameterArray, historyEvent) {}, // called first time loaded
|
||||
onTabLoad : function(tabPath, parameterArray, historyEvent) {}, // called on every load
|
||||
|
||||
templates : {
|
||||
determineTitle: function(tabArray) {} // returns page title for path
|
||||
},
|
||||
|
||||
error: {
|
||||
api : 'You attempted to load content without API module',
|
||||
method : 'The method you called is not defined',
|
||||
missingTab : 'Activated tab cannot be found for this context.',
|
||||
noContent : 'The tab you specified is missing a content url.',
|
||||
path : 'History enabled, but no path was specified',
|
||||
recursion : 'Max recursive depth reached',
|
||||
state : 'History requires Asual\'s Address library <https://github.com/asual/jquery-address>'
|
||||
},
|
||||
|
||||
metadata : {
|
||||
tab : 'tab',
|
||||
loaded : 'loaded',
|
||||
promise: 'promise'
|
||||
},
|
||||
|
||||
className : {
|
||||
loading : 'loading',
|
||||
active : 'active'
|
||||
},
|
||||
|
||||
selector : {
|
||||
tabs : '.ui.tab',
|
||||
ui : '.ui'
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})( jQuery, window , document );
|
||||
95
web/semantic/src/definitions/modules/tab.less
Normal file
95
web/semantic/src/definitions/modules/tab.less
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
/*!
|
||||
* # Semantic UI - Tab
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'tab';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
UI Tabs
|
||||
*******************************/
|
||||
|
||||
.ui.tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------------
|
||||
Active
|
||||
---------------------*/
|
||||
|
||||
.ui.tab.active,
|
||||
.ui.tab.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Loading
|
||||
---------------------*/
|
||||
|
||||
.ui.tab.loading {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
min-height: @loadingMinHeight;
|
||||
}
|
||||
.ui.tab.loading * {
|
||||
position: @loadingContentPosition !important;
|
||||
left: @loadingContentOffset !important;
|
||||
}
|
||||
|
||||
.ui.tab.loading:before,
|
||||
.ui.tab.loading.segment:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: @loaderDistanceFromTop;
|
||||
left: 50%;
|
||||
|
||||
margin: @loaderMargin;
|
||||
width: @loaderSize;
|
||||
height: @loaderSize;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
border: @loaderLineWidth solid @loaderFillColor;
|
||||
}
|
||||
.ui.tab.loading:after,
|
||||
.ui.tab.loading.segment:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: @loaderDistanceFromTop;
|
||||
left: 50%;
|
||||
|
||||
margin: @loaderMargin;
|
||||
width: @loaderSize;
|
||||
height: @loaderSize;
|
||||
|
||||
animation: button-spin @loaderSpeed linear;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
|
||||
border-color: @loaderLineColor transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: @loaderLineWidth;
|
||||
|
||||
box-shadow: 0px 0px 0px 1px transparent;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
1038
web/semantic/src/definitions/modules/transition.js
Normal file
1038
web/semantic/src/definitions/modules/transition.js
Normal file
File diff suppressed because it is too large
Load diff
80
web/semantic/src/definitions/modules/transition.less
Normal file
80
web/semantic/src/definitions/modules/transition.less
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/*!
|
||||
* # Semantic UI - Transition
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributorss
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'transition';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Transitions
|
||||
*******************************/
|
||||
|
||||
.transition {
|
||||
animation-iteration-count: 1;
|
||||
animation-duration: @transitionDefaultDuration;
|
||||
animation-timing-function: @transitionDefaultEasing;
|
||||
animation-fill-mode: @transitionDefaultFill;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Animating */
|
||||
.animating.transition {
|
||||
backface-visibility: @backfaceVisibility;
|
||||
transform: @use3DAcceleration;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
.loading.transition {
|
||||
position: absolute;
|
||||
top: -99999px;
|
||||
left: -99999px;
|
||||
}
|
||||
|
||||
/* Hidden */
|
||||
.hidden.transition {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Visible */
|
||||
.visible.transition {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
backface-visibility: @backfaceVisibility;
|
||||
transform: @use3DAcceleration;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.disabled.transition {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.looping.transition {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
540
web/semantic/src/definitions/modules/video.js
Normal file
540
web/semantic/src/definitions/modules/video.js
Normal file
|
|
@ -0,0 +1,540 @@
|
|||
/*!
|
||||
* # Semantic UI - Video
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributorss
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
$.fn.video = 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),
|
||||
|
||||
requestAnimationFrame = window.requestAnimationFrame
|
||||
|| window.mozRequestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame
|
||||
|| window.msRequestAnimationFrame
|
||||
|| function(callback) { setTimeout(callback, 0); },
|
||||
|
||||
returnedValue
|
||||
;
|
||||
|
||||
$allModules
|
||||
.each(function() {
|
||||
var
|
||||
settings = ( $.isPlainObject(parameters) )
|
||||
? $.extend(true, {}, $.fn.video.settings, parameters)
|
||||
: $.extend({}, $.fn.video.settings),
|
||||
|
||||
selector = settings.selector,
|
||||
className = settings.className,
|
||||
error = settings.error,
|
||||
metadata = settings.metadata,
|
||||
namespace = settings.namespace,
|
||||
templates = settings.templates,
|
||||
|
||||
eventNamespace = '.' + namespace,
|
||||
moduleNamespace = 'module-' + namespace,
|
||||
|
||||
$window = $(window),
|
||||
$module = $(this),
|
||||
$placeholder = $module.find(selector.placeholder),
|
||||
$playButton = $module.find(selector.playButton),
|
||||
$embed = $module.find(selector.embed),
|
||||
|
||||
element = this,
|
||||
instance = $module.data(moduleNamespace),
|
||||
module
|
||||
;
|
||||
|
||||
module = {
|
||||
|
||||
initialize: function() {
|
||||
module.debug('Initializing video');
|
||||
module.create();
|
||||
$placeholder
|
||||
.on('click' + eventNamespace, module.play)
|
||||
;
|
||||
$playButton
|
||||
.on('click' + eventNamespace, module.play)
|
||||
;
|
||||
module.instantiate();
|
||||
},
|
||||
|
||||
instantiate: function() {
|
||||
module.verbose('Storing instance of module', module);
|
||||
instance = module;
|
||||
$module
|
||||
.data(moduleNamespace, module)
|
||||
;
|
||||
},
|
||||
|
||||
create: function() {
|
||||
var
|
||||
image = $module.data(metadata.image),
|
||||
html = templates.video(image)
|
||||
;
|
||||
$module.html(html);
|
||||
module.refresh();
|
||||
if(!image) {
|
||||
module.play();
|
||||
}
|
||||
module.debug('Creating html for video element', html);
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying previous instance of video');
|
||||
module.reset();
|
||||
$module
|
||||
.removeData(moduleNamespace)
|
||||
.off(eventNamespace)
|
||||
;
|
||||
$placeholder
|
||||
.off(eventNamespace)
|
||||
;
|
||||
$playButton
|
||||
.off(eventNamespace)
|
||||
;
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
module.verbose('Refreshing selector cache');
|
||||
$placeholder = $module.find(selector.placeholder);
|
||||
$playButton = $module.find(selector.playButton);
|
||||
$embed = $module.find(selector.embed);
|
||||
},
|
||||
|
||||
// sets new video
|
||||
change: function(source, id, url) {
|
||||
module.debug('Changing video to ', source, id, url);
|
||||
$module
|
||||
.data(metadata.source, source)
|
||||
.data(metadata.id, id)
|
||||
.data(metadata.url, url)
|
||||
;
|
||||
settings.onChange();
|
||||
},
|
||||
|
||||
// clears video embed
|
||||
reset: function() {
|
||||
module.debug('Clearing video embed and showing placeholder');
|
||||
$module
|
||||
.removeClass(className.active)
|
||||
;
|
||||
$embed
|
||||
.html(' ')
|
||||
;
|
||||
$placeholder
|
||||
.show()
|
||||
;
|
||||
settings.onReset();
|
||||
},
|
||||
|
||||
// plays current video
|
||||
play: function() {
|
||||
module.debug('Playing video');
|
||||
var
|
||||
source = $module.data(metadata.source) || false,
|
||||
url = $module.data(metadata.url) || false,
|
||||
id = $module.data(metadata.id) || false
|
||||
;
|
||||
$embed
|
||||
.html( module.generate.html(source, id, url) )
|
||||
;
|
||||
$module
|
||||
.addClass(className.active)
|
||||
;
|
||||
settings.onPlay();
|
||||
},
|
||||
|
||||
get: {
|
||||
source: function(url) {
|
||||
if(typeof url !== 'string') {
|
||||
return false;
|
||||
}
|
||||
if(url.search('youtube.com') !== -1) {
|
||||
return 'youtube';
|
||||
}
|
||||
else if(url.search('vimeo.com') !== -1) {
|
||||
return 'vimeo';
|
||||
}
|
||||
return false;
|
||||
},
|
||||
id: function(url) {
|
||||
if(url.match(settings.regExp.youtube)) {
|
||||
return url.match(settings.regExp.youtube)[1];
|
||||
}
|
||||
else if(url.match(settings.regExp.vimeo)) {
|
||||
return url.match(settings.regExp.vimeo)[2];
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
generate: {
|
||||
// generates iframe html
|
||||
html: function(source, id, url) {
|
||||
module.debug('Generating embed html');
|
||||
var
|
||||
html
|
||||
;
|
||||
// allow override of settings
|
||||
source = source || settings.source;
|
||||
id = id || settings.id;
|
||||
if((source && id) || url) {
|
||||
if(!source || !id) {
|
||||
source = module.get.source(url);
|
||||
id = module.get.id(url);
|
||||
}
|
||||
if(source == 'vimeo') {
|
||||
html = ''
|
||||
+ '<iframe src="//player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"'
|
||||
+ ' width="100%" height="100%"'
|
||||
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
|
||||
;
|
||||
}
|
||||
else if(source == 'youtube') {
|
||||
html = ''
|
||||
+ '<iframe src="//www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"'
|
||||
+ ' width="100%" height="100%"'
|
||||
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
|
||||
;
|
||||
}
|
||||
}
|
||||
else {
|
||||
module.error(error.noVideo);
|
||||
}
|
||||
return html;
|
||||
},
|
||||
|
||||
// generate url parameters
|
||||
url: function(source) {
|
||||
var
|
||||
api = (settings.api)
|
||||
? 1
|
||||
: 0,
|
||||
autoplay = (settings.autoplay === 'auto')
|
||||
? ($module.data('image') !== undefined)
|
||||
: settings.autoplay,
|
||||
hd = (settings.hd)
|
||||
? 1
|
||||
: 0,
|
||||
showUI = (settings.showUI)
|
||||
? 1
|
||||
: 0,
|
||||
// opposite used for some params
|
||||
hideUI = !(settings.showUI)
|
||||
? 1
|
||||
: 0,
|
||||
url = ''
|
||||
;
|
||||
if(source == 'vimeo') {
|
||||
url = ''
|
||||
+ 'api=' + api
|
||||
+ '&title=' + showUI
|
||||
+ '&byline=' + showUI
|
||||
+ '&portrait=' + showUI
|
||||
+ '&autoplay=' + autoplay
|
||||
;
|
||||
if(settings.color) {
|
||||
url += '&color=' + settings.color;
|
||||
}
|
||||
}
|
||||
if(source == 'ustream') {
|
||||
url = ''
|
||||
+ 'autoplay=' + autoplay
|
||||
;
|
||||
if(settings.color) {
|
||||
url += '&color=' + settings.color;
|
||||
}
|
||||
}
|
||||
else if(source == 'youtube') {
|
||||
url = ''
|
||||
+ 'enablejsapi=' + api
|
||||
+ '&autoplay=' + autoplay
|
||||
+ '&autohide=' + hideUI
|
||||
+ '&hq=' + hd
|
||||
+ '&modestbranding=1'
|
||||
;
|
||||
if(settings.color) {
|
||||
url += '&color=' + settings.color;
|
||||
}
|
||||
}
|
||||
return url;
|
||||
}
|
||||
},
|
||||
|
||||
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($allModules.length > 1) {
|
||||
title += ' ' + '(' + $allModules.length + ')';
|
||||
}
|
||||
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) {
|
||||
instance.invoke('destroy');
|
||||
}
|
||||
module.initialize();
|
||||
}
|
||||
})
|
||||
;
|
||||
return (returnedValue !== undefined)
|
||||
? returnedValue
|
||||
: this
|
||||
;
|
||||
};
|
||||
|
||||
$.fn.video.settings = {
|
||||
|
||||
name : 'Video',
|
||||
namespace : 'video',
|
||||
|
||||
debug : false,
|
||||
verbose : true,
|
||||
performance : true,
|
||||
|
||||
metadata : {
|
||||
id : 'id',
|
||||
image : 'image',
|
||||
source : 'source',
|
||||
url : 'url'
|
||||
},
|
||||
|
||||
source : false,
|
||||
url : false,
|
||||
id : false,
|
||||
|
||||
aspectRatio : (16/9),
|
||||
|
||||
onPlay : function(){},
|
||||
onReset : function(){},
|
||||
onChange : function(){},
|
||||
|
||||
// callbacks not coded yet (needs to use jsapi)
|
||||
onPause : function() {},
|
||||
onStop : function() {},
|
||||
|
||||
width : 'auto',
|
||||
height : 'auto',
|
||||
|
||||
autoplay : 'auto',
|
||||
color : '#442359',
|
||||
hd : true,
|
||||
showUI : false,
|
||||
api : true,
|
||||
|
||||
regExp : {
|
||||
youtube : /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/,
|
||||
vimeo : /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/
|
||||
},
|
||||
|
||||
error : {
|
||||
noVideo : 'No video specified',
|
||||
method : 'The method you called is not defined'
|
||||
},
|
||||
|
||||
className : {
|
||||
active : 'active'
|
||||
},
|
||||
|
||||
selector : {
|
||||
embed : '.embed',
|
||||
placeholder : '.placeholder',
|
||||
playButton : '.play'
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.video.settings.templates = {
|
||||
video: function(image) {
|
||||
var
|
||||
html = ''
|
||||
;
|
||||
if(image) {
|
||||
html += ''
|
||||
+ '<i class="video play icon"></i>'
|
||||
+ '<img class="placeholder" src="' + image + '">'
|
||||
;
|
||||
}
|
||||
html += '<div class="embed"></div>';
|
||||
return html;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
})( jQuery, window , document );
|
||||
125
web/semantic/src/definitions/modules/video.less
Normal file
125
web/semantic/src/definitions/modules/video.less
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
/*!
|
||||
* # Semantic UI - Video
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'module';
|
||||
@element : 'video';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Video
|
||||
*******************************/
|
||||
|
||||
.ui.video {
|
||||
position: relative;
|
||||
background-color: @background;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
/* Placeholder Image */
|
||||
.ui.video .placeholder {
|
||||
background-color: @placeholderBackground;
|
||||
}
|
||||
|
||||
/* Play Icon Overlay */
|
||||
.ui.video .play {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
opacity: @playOpacity;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.ui.video .play.icon:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 11;
|
||||
|
||||
background: @playBackground;
|
||||
|
||||
width: (@playSize + @playBorderSize);
|
||||
height: (@playSize + @playBorderSize);
|
||||
line-height: (@playSize + @playBorderSize);
|
||||
border-radius: @playBorderRadius;
|
||||
|
||||
color: @playColor;
|
||||
font-size: @playSize;
|
||||
text-shadow: @playShadow;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.ui.video .placeholder {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* IFrame Embed */
|
||||
.ui.video .embed iframe,
|
||||
.ui.video .embed embed,
|
||||
.ui.video .embed object {
|
||||
position: absolute;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Hover
|
||||
---------------*/
|
||||
|
||||
.ui.video .play:hover {
|
||||
opacity: @playHoverOpacity;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Active
|
||||
---------------*/
|
||||
|
||||
.ui.video.active .play,
|
||||
.ui.video.active .placeholder {
|
||||
display: none;
|
||||
}
|
||||
.ui.video.active .embed {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
Reference in a new issue