Krautspace/calcifer
Archived
2
0
Fork 0
Code Issues 11 Pull requests 2 Activity

Update Semantic to 2.1

Browse source 
Ticket #56
This commit is contained in:
Tim Schumacher 2016-06-10 00:34:34 +02:00
parent 3f1e728781
commit 4385f1acbc
425 changed files with 59924 additions and 37200 deletions
Download patch file Download diff file Expand all files Collapse all files

148
web/semantic/src/definitions/modules/accordion.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -63,7 +63,9 @@ $.fn.accordion = function(parameters) {
initialize: function() {
module.debug('Initializing', $module);
module.bind.events();
module.observeChanges();
if(settings.observeChanges) {
module.observeChanges();
}
module.instantiate();
},
@ -105,7 +107,7 @@ $.fn.accordion = function(parameters) {
events: function() {
module.debug('Binding delegated events');
$module
.on('click' + eventNamespace, selector.trigger, module.event.click)
.on(settings.on + eventNamespace, selector.trigger, module.event.click)
;
}
},
@ -153,54 +155,59 @@ $.fn.accordion = function(parameters) {
$activeContent = $activeTitle.next($content),
isAnimating = $activeContent.hasClass(className.animating),
isActive = $activeContent.hasClass(className.active),
isUnopen = (!isActive && !isAnimating)
isOpen = (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);
})
;
if(isOpen) {
module.debug('Accordion already open, skipping', $activeContent);
return;
}
module.debug('Opening accordion content', $activeTitle);
settings.onOpening.call($activeContent);
if(settings.exclusive) {
module.closeOthers.call($activeTitle);
}
$activeTitle
.addClass(className.active)
;
$activeContent
.stop(true, true)
.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, true)
.animate({
opacity: 1
}, settings.duration, module.resetOpacity)
;
}
}
$activeContent
.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) {
@ -218,10 +225,12 @@ $.fn.accordion = function(parameters) {
;
if((isActive || isOpening) && !isClosing) {
module.debug('Closing accordion content', $activeContent);
settings.onClosing.call($activeContent);
$activeTitle
.removeClass(className.active)
;
$activeContent
.stop(true, true)
.addClass(className.animating)
;
if(settings.animateChildren) {
@ -241,7 +250,7 @@ $.fn.accordion = function(parameters) {
else {
$activeContent
.children()
.stop(true)
.stop(true, true)
.animate({
opacity: 0
}, settings.duration, module.resetOpacity)
@ -249,7 +258,6 @@ $.fn.accordion = function(parameters) {
}
}
$activeContent
.stop(true)
.slideUp(settings.duration, settings.easing, function() {
$activeContent
.removeClass(className.animating)
@ -291,6 +299,10 @@ $.fn.accordion = function(parameters) {
$openTitles
.removeClass(className.active)
;
$openContents
.removeClass(className.animating)
.stop(true, true)
;
if(settings.animateChildren) {
if($.fn.transition !== undefined && $module.transition('is supported')) {
$openContents
@ -307,7 +319,7 @@ $.fn.accordion = function(parameters) {
else {
$openContents
.children()
.stop()
.stop(true, true)
.animate({
opacity: 0
}, settings.duration, module.resetOpacity)
@ -315,7 +327,6 @@ $.fn.accordion = function(parameters) {
}
}
$openContents
.stop()
.slideUp(settings.duration , settings.easing, function() {
$(this).removeClass(className.active);
module.reset.display.call(this);
@ -422,7 +433,7 @@ $.fn.accordion = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -534,20 +545,27 @@ $.fn.accordion.settings = {
namespace : 'accordion',
debug : false,
verbose : true,
verbose : false,
performance : true,
exclusive : true,
collapsible : true,
closeNested : false,
animateChildren : true,
on : 'click', // event on title that opens accordion
duration : 350,
easing : 'easeOutQuad',
observeChanges : true, // whether accordion should automatically refresh on DOM insertion
onOpen : function(){},
onClose : function(){},
onChange : function(){},
exclusive : true, // whether a single accordion content panel should be open at once
collapsible : true, // whether accordion content can be closed
closeNested : false, // whether nested content should be closed when a panel is closed
animateChildren : true, // whether children opacity should be animated
duration : 350, // duration of animation
easing : 'easeOutQuad', // easing equation for animation
onOpening : function(){}, // callback before open animation
onOpen : function(){}, // callback after open animation
onClosing : function(){}, // callback before closing animation
onClose : function(){}, // callback after closing animation
onChange : function(){}, // callback after closing or opening animation
error: {
method : 'The method you called is not defined'
@ -574,5 +592,5 @@ $.extend( $.easing, {
}
});
})( jQuery, window , document );
})( jQuery, window, document );

440
web/semantic/src/definitions/modules/accordion.less Normal file → Executable file
View file

@ -1,220 +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();
/*!
* # Semantic UI - Accordion
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2015 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%;
}
.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();

528
web/semantic/src/definitions/modules/checkbox.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -41,9 +41,12 @@ $.fn.checkbox = function(parameters) {
moduleNamespace = 'module-' + namespace,
$module = $(this),
$label = $(this).find(selector.label).first(),
$input = $(this).find(selector.input),
$label = $(this).children(selector.label),
$input = $(this).children(selector.input),
input = $input[0],
initialLoad = false,
shortcutPressed = false,
instance = $module.data(moduleNamespace),
observer,
@ -57,23 +60,14 @@ $.fn.checkbox = function(parameters) {
module.verbose('Initializing checkbox', settings);
module.create.label();
module.add.events();
module.bind.events();
module.set.tabbable();
module.hide.input();
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();
module.setup();
},
instantiate: function() {
@ -86,16 +80,55 @@ $.fn.checkbox = function(parameters) {
destroy: function() {
module.verbose('Destroying module');
module.remove.events();
$module
.removeData(moduleNamespace)
;
module.unbind.events();
module.show.input();
$module.removeData(moduleNamespace);
},
fix: {
reference: function() {
if( $module.is(selector.input) ) {
module.debug('Behavior called on <input> adjusting invoked element');
$module = $module.closest(selector.checkbox);
module.refresh();
}
}
},
setup: function() {
module.set.initialLoad();
if( module.is.indeterminate() ) {
module.debug('Initial value is indeterminate');
module.indeterminate();
}
else if( module.is.checked() ) {
module.debug('Initial value is checked');
module.check();
}
else {
module.debug('Initial value is unchecked');
module.uncheck();
}
module.remove.initialLoad();
},
refresh: function() {
$module = $(this);
$label = $(this).find(selector.label).first();
$input = $(this).find(selector.input);
$label = $module.children(selector.label);
$input = $module.children(selector.input);
input = $input[0];
},
hide: {
input: function() {
module.verbose('Modfying <input> z-index to be unselectable');
$input.addClass(className.hidden);
}
},
show: {
input: function() {
module.verbose('Modfying <input> z-index to be selectable');
$input.removeClass(className.hidden);
}
},
observeChanges: function() {
@ -132,6 +165,22 @@ $.fn.checkbox = function(parameters) {
},
event: {
click: function(event) {
var
$target = $(event.target)
;
if( $target.is(selector.input) ) {
module.verbose('Using default check action on initialized checkbox');
return;
}
if( $target.is(selector.link) ) {
module.debug('Clicking link inside checkbox, skipping toggle');
return;
}
module.toggle();
$input.focus();
event.preventDefault();
},
keydown: function(event) {
var
key = event.which,
@ -141,35 +190,195 @@ $.fn.checkbox = function(parameters) {
escape : 27
}
;
if( key == keyCode.escape) {
if(key == keyCode.escape) {
module.verbose('Escape key pressed blurring field');
$module
.blur()
;
$input.blur();
shortcutPressed = true;
}
if(!event.ctrlKey && (key == keyCode.enter || key == keyCode.space)) {
module.verbose('Enter key pressed, toggling checkbox');
module.toggle.call(this);
else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) {
module.verbose('Enter/space key pressed, toggling checkbox');
module.toggle();
shortcutPressed = true;
}
else {
shortcutPressed = false;
}
},
keyup: function(event) {
if(shortcutPressed) {
event.preventDefault();
}
}
},
check: function() {
if( !module.should.allowCheck() ) {
return;
}
module.debug('Checking checkbox', $input);
module.set.checked();
if( !module.should.ignoreCallbacks() ) {
settings.onChecked.call(input);
settings.onChange.call(input);
}
},
uncheck: function() {
if( !module.should.allowUncheck() ) {
return;
}
module.debug('Unchecking checkbox');
module.set.unchecked();
if( !module.should.ignoreCallbacks() ) {
settings.onUnchecked.call(input);
settings.onChange.call(input);
}
},
indeterminate: function() {
if( module.should.allowIndeterminate() ) {
module.debug('Checkbox is already indeterminate');
return;
}
module.debug('Making checkbox indeterminate');
module.set.indeterminate();
if( !module.should.ignoreCallbacks() ) {
settings.onIndeterminate.call(input);
settings.onChange.call(input);
}
},
determinate: function() {
if( module.should.allowDeterminate() ) {
module.debug('Checkbox is already determinate');
return;
}
module.debug('Making checkbox determinate');
module.set.determinate();
if( !module.should.ignoreCallbacks() ) {
settings.onDeterminate.call(input);
settings.onChange.call(input);
}
},
enable: function() {
if( module.is.enabled() ) {
module.debug('Checkbox is already enabled');
return;
}
module.debug('Enabling checkbox');
module.set.enabled();
settings.onEnabled.call(input);
},
disable: function() {
if( module.is.disabled() ) {
module.debug('Checkbox is already disabled');
return;
}
module.debug('Disabling checkbox');
module.set.disabled();
settings.onDisabled.call(input);
},
get: {
radios: function() {
var
name = module.get.name()
;
return $('input[name="' + name + '"]').closest(selector.checkbox);
},
otherRadios: function() {
return module.get.radios().not($module);
},
name: function() {
return $input.attr('name');
}
},
is: {
initialLoad: function() {
return initialLoad;
},
radio: function() {
return $module.hasClass(className.radio);
return ($input.hasClass(className.radio) || $input.attr('type') == 'radio');
},
indeterminate: function() {
return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate');
},
checked: function() {
return $input.prop('checked') !== undefined && $input.prop('checked');
},
disabled: function() {
return $input.prop('disabled') !== undefined && $input.prop('disabled');
},
enabled: function() {
return !module.is.disabled();
},
determinate: function() {
return !module.is.indeterminate();
},
unchecked: function() {
return !module.is.checked();
}
},
should: {
allowCheck: function() {
if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) {
module.debug('Should not allow check, checkbox is already checked');
return false;
}
if(settings.beforeChecked.apply(input) === false) {
module.debug('Should not allow check, beforeChecked cancelled');
return false;
}
return true;
},
allowUncheck: function() {
if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) {
module.debug('Should not allow uncheck, checkbox is already unchecked');
return false;
}
if(settings.beforeUnchecked.apply(input) === false) {
module.debug('Should not allow uncheck, beforeUnchecked cancelled');
return false;
}
return true;
},
allowIndeterminate: function() {
if(module.is.indeterminate() && !module.should.forceCallbacks() ) {
module.debug('Should not allow indeterminate, checkbox is already indeterminate');
return false;
}
if(settings.beforeIndeterminate.apply(input) === false) {
module.debug('Should not allow indeterminate, beforeIndeterminate cancelled');
return false;
}
return true;
},
allowDeterminate: function() {
if(module.is.determinate() && !module.should.forceCallbacks() ) {
module.debug('Should not allow determinate, checkbox is already determinate');
return false;
}
if(settings.beforeDeterminate.apply(input) === false) {
module.debug('Should not allow determinate, beforeDeterminate cancelled');
return false;
}
return true;
},
forceCallbacks: function() {
return (module.is.initialLoad() && settings.fireOnInit);
},
ignoreCallbacks: function() {
return (initialLoad && !settings.fireOnInit);
}
},
can: {
change: function() {
return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') );
return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') );
},
uncheck: function() {
return (typeof settings.uncheckable === 'boolean')
@ -180,18 +389,132 @@ $.fn.checkbox = function(parameters) {
},
set: {
checked: function() {
$module.addClass(className.checked);
initialLoad: function() {
initialLoad = true;
},
tab: function() {
checked: function() {
module.verbose('Setting class to checked');
$module
.removeClass(className.indeterminate)
.addClass(className.checked)
;
if( module.is.radio() ) {
module.uncheckOthers();
}
if(!module.is.indeterminate() && module.is.checked()) {
module.debug('Input is already checked, skipping input property change');
return;
}
module.verbose('Setting state to checked', input);
$input
.prop('indeterminate', false)
.prop('checked', true)
;
module.trigger.change();
},
unchecked: function() {
module.verbose('Removing checked class');
$module
.removeClass(className.indeterminate)
.removeClass(className.checked)
;
if(!module.is.indeterminate() && module.is.unchecked() ) {
module.debug('Input is already unchecked');
return;
}
module.debug('Setting state to unchecked');
$input
.prop('indeterminate', false)
.prop('checked', false)
;
module.trigger.change();
},
indeterminate: function() {
module.verbose('Setting class to indeterminate');
$module
.addClass(className.indeterminate)
;
if( module.is.indeterminate() ) {
module.debug('Input is already indeterminate, skipping input property change');
return;
}
module.debug('Setting state to indeterminate');
$input
.prop('indeterminate', true)
;
module.trigger.change();
},
determinate: function() {
module.verbose('Removing indeterminate class');
$module
.removeClass(className.indeterminate)
;
if( module.is.determinate() ) {
module.debug('Input is already determinate, skipping input property change');
return;
}
module.debug('Setting state to determinate');
$input
.prop('indeterminate', false)
;
},
disabled: function() {
module.verbose('Setting class to disabled');
$module
.addClass(className.disabled)
;
if( module.is.disabled() ) {
module.debug('Input is already disabled, skipping input property change');
return;
}
module.debug('Setting state to disabled');
$input
.prop('disabled', 'disabled')
;
module.trigger.change();
},
enabled: function() {
module.verbose('Removing disabled class');
$module.removeClass(className.disabled);
if( module.is.enabled() ) {
module.debug('Input is already enabled, skipping input property change');
return;
}
module.debug('Setting state to enabled');
$input
.prop('disabled', false)
;
module.trigger.change();
},
tabbable: function() {
module.verbose('Adding tabindex to checkbox');
if( $input.attr('tabindex') === undefined) {
$input
.attr('tabindex', 0)
;
$input.attr('tabindex', 0);
}
}
},
remove: {
initialLoad: function() {
initialLoad = false;
}
},
trigger: {
change: function() {
var
events = document.createEvent('HTMLEvents'),
inputElement = $input[0]
;
if(inputElement) {
module.verbose('Triggering native change event');
events.initEvent('change', true, false);
inputElement.dispatchEvent(events);
}
}
},
create: {
label: function() {
if($input.prevAll(selector.label).length > 0) {
@ -211,84 +534,47 @@ $.fn.checkbox = function(parameters) {
}
},
add: {
bind: {
events: function() {
module.verbose('Attaching checkbox events');
$module
.on('click' + eventNamespace, module.toggle)
.on('click' + eventNamespace, module.event.click)
.on('keydown' + eventNamespace, selector.input, module.event.keydown)
.on('keyup' + eventNamespace, selector.input, module.event.keyup)
;
}
},
remove: {
checked: function() {
$module.removeClass(className.checked);
},
unbind: {
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')
uncheckOthers: function() {
var
$radios = module.get.otherRadios()
;
module.set.checked();
$input.trigger('blur');
settings.onChange.call($input.get());
settings.onChecked.call($input.get());
module.debug('Unchecking other radios', $radios);
$radios.removeClass(className.checked);
},
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) {
toggle: function() {
if( !module.can.change() ) {
console.log(module.can.change());
module.debug('Checkbox is read-only or disabled, ignoring toggle');
if(!module.is.radio()) {
module.debug('Checkbox is read-only or disabled, ignoring toggle');
}
return;
}
module.verbose('Determining new checkbox state');
if( module.is.unchecked() ) {
if( module.is.indeterminate() || module.is.unchecked() ) {
module.debug('Currently unchecked');
module.check();
}
else if( module.is.checked() && module.can.uncheck() ) {
module.debug('Currently checked');
module.uncheck();
}
},
@ -361,7 +647,7 @@ $.fn.checkbox = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -471,39 +757,53 @@ $.fn.checkbox = function(parameters) {
$.fn.checkbox.settings = {
name : 'Checkbox',
namespace : 'checkbox',
name : 'Checkbox',
namespace : 'checkbox',
debug : false,
verbose : true,
performance : true,
debug : false,
verbose : true,
performance : true,
// delegated event context
uncheckable : 'auto',
fireOnInit : true,
uncheckable : 'auto',
fireOnInit : false,
onChange : function(){},
onChecked : function(){},
onUnchecked : function(){},
onEnabled : function(){},
onDisabled : function(){},
onChange : function(){},
className : {
checked : 'checked',
disabled : 'disabled',
radio : 'radio',
readOnly : 'read-only'
beforeChecked : function(){},
beforeUnchecked : function(){},
beforeDeterminate : function(){},
beforeIndeterminate : function(){},
onChecked : function(){},
onUnchecked : function(){},
onDeterminate : function() {},
onIndeterminate : function() {},
onEnable : function(){},
onDisable : function(){},
className : {
checked : 'checked',
indeterminate : 'indeterminate',
disabled : 'disabled',
hidden : 'hidden',
radio : 'radio',
readOnly : 'read-only'
},
error : {
method : 'The method you called is not defined'
method : 'The method you called is not defined'
},
selector : {
input : 'input[type="checkbox"], input[type="radio"]',
label : 'label'
checkbox : '.ui.checkbox',
label : 'label, .box',
input : 'input[type="checkbox"], input[type="radio"]',
link : 'a[href]'
}
};
})( jQuery, window , document );
})( jQuery, window, document );

366
web/semantic/src/definitions/modules/checkbox.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -30,25 +30,29 @@
.ui.checkbox {
position: relative;
display: inline-block;
backface-visibility: hidden;
outline: none;
vertical-align: baseline;
font-style: normal;
min-height: @checkboxSize;
font-size: 1rem;
font-size: @medium;
line-height: @checkboxLineHeight;
min-width: @checkboxSize;
backface-visibility: hidden;
outline: none;
vertical-align: middle;
}
/* HTML Checkbox */
.ui.checkbox input[type="checkbox"],
.ui.checkbox input[type="radio"] {
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
opacity: 0 !important;
outline: none;
z-index: -1;
z-index: 3;
width: @checkboxSize;
height: @checkboxSize;
}
@ -59,24 +63,22 @@
.ui.checkbox .box,
.ui.checkbox label {
cursor: auto;
position: relative;
display: block;
cursor: pointer;
padding-left: @labelPadding;
padding-left: @labelDistance;
outline: none;
}
.ui.checkbox label {
font-size: @fontSize;
font-size: @labelFontSize;
}
.ui.checkbox .box:before,
.ui.checkbox label:before {
position: absolute;
top: 0px;
left: 0px;
line-height: 1;
width: @checkboxSize;
height: @checkboxSize;
top: 0em;
left: 0em;
content: '';
background: @checkboxBackground;
@ -93,16 +95,16 @@
.ui.checkbox .box:after,
.ui.checkbox label:after {
position: absolute;
font-size: @checkboxCheckFontSize;
top: @checkboxCheckTop;
left: @checkboxCheckLeft;
line-height: @checkboxSize;
width: @checkboxSize;
height: @checkboxSize;
width: @checkboxCheckSize;
height: @checkboxCheckSize;
text-align: center;
opacity: 0;
color: @checkboxColor;
transition: all 0.1s ease;
transition: @checkboxTransition;
}
/*--------------
@ -112,10 +114,8 @@
/* Inside */
.ui.checkbox label,
.ui.checkbox + label {
cursor: pointer;
color: @labelColor;
transition: color 0.2s ease;
user-select: none;
transition: @labelTransition;
}
/* Outside */
@ -136,7 +136,7 @@
.ui.checkbox .box:hover::before,
.ui.checkbox label:hover::before {
background: @checkboxHoverBackground;
border: @checkboxHoverBorder;
border-color: @checkboxHoverBorderColor;
}
.ui.checkbox label:hover,
.ui.checkbox + label:hover {
@ -149,41 +149,82 @@
.ui.checkbox .box:active::before,
.ui.checkbox label:active::before {
background: @checkboxSelectedBackground;
border: 1px solid @checkboxSelectedBorder;
background: @checkboxPressedBackground;
border-color: @checkboxPressedBorderColor;
}
.ui.checkbox input[type="checkbox"]:active ~ label,
.ui.checkbox input[type="radio"]:active ~ label {
color: @labelSelectedColor;
.ui.checkbox .box:active::after,
.ui.checkbox label:active::after {
color: @checkboxPressedColor;
}
.ui.checkbox input:active ~ label {
color: @labelPressedColor;
}
/*--------------
Focus
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:focus ~ .box:before,
.ui.checkbox input:focus ~ label:before {
background: @checkboxFocusBackground;
border-color: @checkboxFocusBorderColor;
}
.ui.checkbox input[type="checkbox"]:focus ~ label,
.ui.checkbox input[type="radio"]:focus ~ label {
color: @labelSelectedColor;
.ui.checkbox input:focus ~ .box:after,
.ui.checkbox input:focus ~ label:after {
color: @checkboxFocusCheckColor;
}
.ui.checkbox input:focus ~ label {
color: @labelFocusColor;
}
/*--------------
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;
.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before {
background: @checkboxActiveBackground;
border-color: @checkboxActiveBorderColor;
}
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
opacity: @checkboxActiveCheckOpacity;
color: @checkboxActiveCheckColor;
}
/*--------------
Indeterminate
---------------*/
.ui.checkbox input:indeterminate ~ .box:before,
.ui.checkbox input:indeterminate ~ label:before {
background: @checkboxIndeterminateBackground;
border-color: @checkboxIndeterminateBorderColor;
}
.ui.checkbox input:indeterminate ~ .box:after,
.ui.checkbox input:indeterminate ~ label:after {
opacity: @checkboxIndeterminateCheckOpacity;
color: @checkboxIndeterminateCheckColor;
}
/*--------------
Active Focus
---------------*/
.ui.checkbox input:indeterminate:focus ~ .box:before,
.ui.checkbox input:indeterminate:focus ~ label:before,
.ui.checkbox input:checked:focus ~ .box:before,
.ui.checkbox input:checked:focus ~ label:before {
background: @checkboxActiveFocusBackground;
border-color: @checkboxActiveFocusBorderColor;
}
.ui.checkbox input:indeterminate:focus ~ .box:after,
.ui.checkbox input:indeterminate:focus ~ label:after,
.ui.checkbox input:checked:focus ~ .box:after,
.ui.checkbox input:checked:focus ~ label:after {
color: @checkboxActiveFocusCheckColor;
}
/*--------------
Read-Only
@ -201,15 +242,29 @@
.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 {
.ui.checkbox input[disabled] ~ .box:after,
.ui.checkbox input[disabled] ~ label {
cursor: default;
opacity: @disabledCheckboxOpacity;
color: @disabledCheckboxLabelColor;
}
/*--------------
Hidden
---------------*/
/* Initialized checkbox moves input below element
to prevent manually triggering */
.ui.checkbox input.hidden {
z-index: -1;
}
/* Selectable Label */
.ui.checkbox input.hidden + label {
cursor: pointer;
user-select: none;
}
/*******************************
Types
@ -221,51 +276,100 @@
---------------*/
.ui.radio.checkbox {
min-height: @checkboxRadioSize;
min-height: @radioSize;
}
.ui.radio.checkbox .box,
.ui.radio.checkbox label {
padding-left: @radioLabelDistance;
}
/* Box */
.ui.radio.checkbox .box:before,
.ui.radio.checkbox label:before {
width: @checkboxRadioSize;
height: @checkboxRadioSize;
border-radius: @circularRadius;
top: @checkboxRadioTop;
left: @checkboxRadioLeft;
content: '';
transform: none;
width: @radioSize;
height: @radioSize;
border-radius: @circularRadius;
top: @radioTop;
left: @radioLeft;
}
/* Circle */
/* Bullet */
.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;
content: '' !important;
width: @radioSize;
height: @radioSize;
line-height: @radioSize;
}
/* 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;
top: @bulletTop;
left: @bulletLeft;
width: @radioSize;
height: @radioSize;
border-radius: @bulletRadius;
transform: scale(@bulletScale);
background-color: @bulletColor;
}
/* Focus */
.ui.radio.checkbox input:focus ~ .box:before,
.ui.radio.checkbox input:focus ~ label:before {
background-color: @radioFocusBackground;
}
.ui.radio.checkbox input:focus ~ .box:after,
.ui.radio.checkbox input:focus ~ label:after {
background-color: @radioFocusBulletColor;
}
/* Indeterminate */
.ui.radio.checkbox input:indeterminate ~ .box:after,
.ui.radio.checkbox input:indeterminate ~ label:after {
opacity: 0;
}
/* Active */
.ui.radio.checkbox input:checked ~ .box:before,
.ui.radio.checkbox input:checked ~ label:before {
background-color: @radioActiveBackground;
}
.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ label:after {
background-color: @radioActiveBulletColor;
}
/* Active Focus */
.ui.radio.checkbox input:focus:checked ~ .box:before,
.ui.radio.checkbox input:focus:checked ~ label:before {
background-color: @radioActiveFocusBackground;
}
.ui.radio.checkbox input:focus:checked ~ .box:after,
.ui.radio.checkbox input:focus:checked ~ label:after {
background-color: @radioActiveFocusBulletColor;
}
/*--------------
Slider
---------------*/
.ui.slider.checkbox {
cursor: pointer;
min-height: @sliderHeight;
}
/* Input */
.ui.slider.checkbox input {
width: @sliderWidth;
height: @sliderHeight;
}
/* Label */
.ui.slider.checkbox .box,
.ui.slider.checkbox label {
padding-left: @sliderLabelDistance;
@ -276,15 +380,15 @@
/* Line */
.ui.slider.checkbox .box:before,
.ui.slider.checkbox label:before {
cursor: pointer;
display: block;
position: absolute;
content: '';
top: @sliderLineVerticalOffset;
transform: none;
border: none !important;
left: 0em;
z-index: 1;
border: none !important;
top: @sliderLineVerticalOffset;
background-color: @sliderLineColor;
width: @sliderLineWidth;
@ -292,9 +396,8 @@
transform: none;
border-radius: @sliderLineRadius;
transition:
background 0.3s ease
;
transition: @sliderLineTransition;
}
/* Handle */
@ -302,7 +405,7 @@
.ui.slider.checkbox label:after {
background: @handleBackground;
position: absolute;
content: '';
content: '' !important;
opacity: 1;
z-index: 2;
@ -315,16 +418,12 @@
transform: none;
border-radius: @circularRadius;
transition:
left 0.3s ease 0s
;
transition: @sliderHandleTransition;
}
/* 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 {
.ui.slider.checkbox input:focus ~ .box:before,
.ui.slider.checkbox input:focus ~ label:before {
background-color: @toggleFocusColor;
border: none;
}
@ -340,35 +439,45 @@
}
/* 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:checked ~ .box,
.ui.slider.checkbox input:checked ~ label {
color: @sliderOnLabelColor !important;
}
.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:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ label:before {
background-color: @sliderOnLineColor !important;
}
.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 {
.ui.slider.checkbox input:checked ~ .box:after,
.ui.slider.checkbox input:checked ~ label:after {
left: @sliderTravelDistance;
}
/* Active Focus */
.ui.slider.checkbox input:focus:checked ~ .box,
.ui.slider.checkbox input:focus:checked ~ label {
color: @sliderOnFocusLabelColor !important;
}
.ui.slider.checkbox input:focus:checked ~ .box:before,
.ui.slider.checkbox input:focus:checked ~ label:before {
background-color: @sliderOnFocusLineColor !important;
}
/*--------------
Toggle
---------------*/
.ui.toggle.checkbox {
cursor: pointer;
min-height: @toggleHeight;
}
/* Input */
.ui.toggle.checkbox input {
width: @toggleWidth;
height: @toggleHeight;
}
/* Label */
.ui.toggle.checkbox .box,
.ui.toggle.checkbox label {
min-height: @toggleHandleSize;
@ -382,17 +491,16 @@
/* Switch */
.ui.toggle.checkbox .box:before,
.ui.toggle.checkbox label:before {
cursor: pointer;
display: block;
position: absolute;
content: '';
top: @toggleLaneVerticalOffset;
z-index: 1;
transform: none;
border: none;
background-color: @neutralCheckbox;
top: @toggleLaneVerticalOffset;
background: @toggleLaneBackground;
width: @toggleLaneWidth;
height: @toggleLaneHeight;
border-radius: @toggleHandleRadius;
@ -403,7 +511,7 @@
.ui.toggle.checkbox label:after {
background: @handleBackground;
position: absolute;
content: '';
content: '' !important;
opacity: 1;
z-index: 2;
@ -415,24 +523,17 @@
left: 0em;
border-radius: @circularRadius;
transition:
background 0.3s ease 0s,
left 0.3s ease 0s
;
transition: @toggleHandleTransition;
}
.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 {
.ui.toggle.checkbox input ~ .box:after,
.ui.toggle.checkbox input ~ 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 {
.ui.toggle.checkbox input:focus ~ .box:before,
.ui.toggle.checkbox input:focus ~ label:before {
background-color: @toggleFocusColor;
border: none;
}
@ -445,25 +546,30 @@
}
/* 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:checked ~ .box,
.ui.toggle.checkbox input:checked ~ label {
color: @toggleOnLabelColor !important;
}
.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:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
background-color: @toggleOnLaneColor !important;
}
.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 {
.ui.toggle.checkbox input:checked ~ .box:after,
.ui.toggle.checkbox input:checked ~ label:after {
left: @toggleOnOffset;
}
/* Active Focus */
.ui.toggle.checkbox input:focus:checked ~ .box,
.ui.toggle.checkbox input:focus:checked ~ label {
color: @toggleOnFocusLabelColor !important;
}
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ label:before {
background-color: @toggleOnFocusLaneColor !important;
}
/*******************************
Variations
*******************************/

128
web/semantic/src/definitions/modules/dimmer.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -60,6 +60,7 @@ $.fn.dimmer = function(parameters) {
preinitialize: function() {
if( module.is.dimmer() ) {
$dimmable = $module.parent();
$dimmer = $module;
}
@ -67,10 +68,10 @@ $.fn.dimmer = function(parameters) {
$dimmable = $module;
if( module.has.dimmer() ) {
if(settings.dimmerName) {
$dimmer = $dimmable.children(selector.dimmer).filter('.' + settings.dimmerName);
$dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName);
}
else {
$dimmer = $dimmable.children(selector.dimmer);
$dimmer = $dimmable.find(selector.dimmer);
}
}
else {
@ -81,28 +82,8 @@ $.fn.dimmer = function(parameters) {
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.bind.events();
module.set.dimmable();
module.instantiate();
},
@ -117,15 +98,46 @@ $.fn.dimmer = function(parameters) {
destroy: function() {
module.verbose('Destroying previous module', $dimmer);
$module
.removeData(moduleNamespace)
;
module.unbind.events();
module.remove.variation();
$dimmable
.off(eventNamespace)
;
$dimmer
.off(eventNamespace)
;
},
bind: {
events: function() {
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);
$dimmable
.on(clickEvent + eventNamespace, selector.dimmer, module.event.click)
;
}
}
},
unbind: {
events: function() {
$module
.removeData(moduleNamespace)
;
}
},
event: {
@ -154,7 +166,7 @@ $.fn.dimmer = function(parameters) {
;
if(settings.variation) {
module.debug('Creating dimmer with variation', settings.variation);
$element.addClass(className.variation);
$element.addClass(settings.variation);
}
if(settings.dimmerName) {
module.debug('Creating named dimmer', settings.dimmerName);
@ -313,10 +325,10 @@ $.fn.dimmer = function(parameters) {
has: {
dimmer: function() {
if(settings.dimmerName) {
return ($module.children(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
return ($module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
}
else {
return ( $module.children(selector.dimmer).length > 0 );
return ( $module.find(selector.dimmer).length > 0 );
}
}
},
@ -338,10 +350,10 @@ $.fn.dimmer = function(parameters) {
return settings.closable;
},
dimmer: function() {
return $module.is(selector.dimmer);
return $module.hasClass(className.dimmer);
},
dimmable: function() {
return $module.is(selector.dimmable);
return $module.hasClass(className.dimmable);
},
dimmed: function() {
return $dimmable.hasClass(className.dimmed);
@ -369,11 +381,11 @@ $.fn.dimmer = function(parameters) {
set: {
opacity: function(opacity) {
var
opacity = settings.opacity || opacity,
color = $dimmer.css('background-color'),
colorArray = color.split(','),
isRGBA = (colorArray && colorArray.length == 4)
;
opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity;
if(isRGBA) {
colorArray[3] = opacity + ')';
color = colorArray.join(',');
@ -398,6 +410,12 @@ $.fn.dimmer = function(parameters) {
},
disabled: function() {
$dimmer.addClass(className.disabled);
},
variation: function(variation) {
variation = variation || settings.variation;
if(variation) {
$dimmer.addClass(variation);
}
}
},
@ -412,6 +430,12 @@ $.fn.dimmer = function(parameters) {
},
disabled: function() {
$dimmer.removeClass(className.disabled);
},
variation: function(variation) {
variation = variation || settings.variation;
if(variation) {
$dimmer.removeClass(variation);
}
}
},
@ -484,7 +508,7 @@ $.fn.dimmer = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -603,7 +627,7 @@ $.fn.dimmer.settings = {
namespace : 'dimmer',
debug : false,
verbose : true,
verbose : false,
performance : true,
// name to distinguish between multiple dimmers in context
@ -641,9 +665,20 @@ $.fn.dimmer.settings = {
method : 'The method you called is not defined.'
},
className : {
active : 'active',
animating : 'animating',
dimmable : 'dimmable',
dimmed : 'dimmed',
dimmer : 'dimmer',
disabled : 'disabled',
hide : 'hide',
pageDimmer : 'page',
show : 'show'
},
selector: {
dimmable : '.dimmable',
dimmer : '.ui.dimmer',
dimmer : '> .ui.dimmer',
content : '.ui.dimmer > .content, .ui.dimmer > .content > .center'
},
@ -651,19 +686,8 @@ $.fn.dimmer.settings = {
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 );
})( jQuery, window, document );

41
web/semantic/src/definitions/modules/dimmer.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -38,7 +38,7 @@
text-align: @textAlign;
vertical-align: @verticalAlign;
background: @background;
background-color: @backgroundColor;
opacity: @hiddenOpacity;
line-height: @lineHeight;
@ -58,7 +58,7 @@
display: @contentDisplay;
user-select: text;
}
.ui.dimmer > .content > div {
.ui.dimmer > .content > * {
display: @contentChildDisplay;
vertical-align: @verticalAlign;
color: @textColor;
@ -110,19 +110,30 @@ body.animating.in.dimmable,
body.dimmed.dimmable {
overflow: hidden;
}
body.dimmable > .dimmer {
position: fixed;
}
/*
body.dimmable > :not(.dimmer) {
filter: @elementStartFilter;
/*--------------
Blurring
---------------*/
.blurring.dimmable > :not(.dimmer) {
filter: @blurredStartFilter;
transition: @blurredTransition;
}
body.dimmed.dimmable > :not(.dimmer) {
filter: @elementEndFilter;
transition: @elementTransition;
.blurring.dimmed.dimmable > :not(.dimmer) {
filter: @blurredEndFilter;
}
/* Dimmer Color */
.blurring.dimmable > .dimmer {
background-color: @blurredBackgroundColor;
}
.blurring.dimmable > .inverted.dimmer {
background-color: @blurredInvertedBackgroundColor;
}
*/
/*--------------
Aligned
@ -140,7 +151,7 @@ body.dimmed.dimmable > :not(.dimmer) {
---------------*/
.ui.inverted.dimmer {
background: @invertedBackground;
background-color: @invertedBackgroundColor;
}
.ui.inverted.dimmer > .content > * {
color: @textColor;
@ -158,22 +169,22 @@ body.dimmed.dimmable > :not(.dimmer) {
width: 0%;
height: 0%;
z-index: -100;
background-color: @simpleStartBackground;
background-color: @simpleStartBackgroundColor;
}
.dimmed.dimmable > .ui.simple.dimmer {
overflow: visible;
opacity: 1;
width: 100%;
height: 100%;
background: @simpleEndBackground;
background-color: @simpleEndBackgroundColor;
z-index: @simpleZIndex;
}
.ui.simple.inverted.dimmer {
background: @simpleInvertedStartBackground;
background-color: @simpleInvertedStartBackgroundColor;
}
.dimmed.dimmable > .ui.simple.inverted.dimmer {
background: @simpleInvertedEndBackground;
background-color: @simpleInvertedEndBackgroundColor;
}
.loadUIOverrides();

2919
web/semantic/src/definitions/modules/dropdown.js
View file

File diff suppressed because it is too large Load diff

466
web/semantic/src/definitions/modules/dropdown.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -27,13 +27,12 @@
cursor: pointer;
position: relative;
display: inline-block;
line-height: 1em;
tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
text-align: left;
transition: @transition;
}
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*******************************
Content
@ -49,15 +48,14 @@
display: none;
outline: none;
top: 100%;
min-width: max-content;
transition: @menuTransition;
margin: @menuMargin;
padding: @menuPadding;
background: @menuBackground;
min-width: 100%;
white-space: @menuWrap;
font-size: 1rem;
font-size: @relativeMedium;
text-shadow: none;
text-align: @menuTextAlign;
@ -69,6 +67,11 @@
will-change: transform, opacity;
}
.ui.dropdown .menu > * {
white-space: nowrap;
}
/*--------------
Hidden Input
---------------*/
@ -83,7 +86,9 @@
---------------*/
.ui.dropdown > .dropdown.icon {
position: relative;
width: auto;
font-size: @dropdownIconSize;
margin: @dropdownIconMargin;
}
.ui.dropdown .menu > .item .dropdown.icon {
@ -115,13 +120,14 @@
display: block;
border: @itemBorder;
height: @itemHeight;
text-align: @itemTextAlign;
border-top: @itemDivider;
line-height: @itemLineHeight;
font-size: @itemFontSize;
color: @itemColor;
padding: @itemVerticalPadding @itemHorizontalPadding !important;
padding: @itemPadding !important;
font-size: @itemFontSize;
text-transform: @itemTextTransform;
font-weight: @itemFontWeight;
@ -177,6 +183,8 @@
}
.ui.dropdown .menu > .input {
width: auto;
display: flex;
margin: @menuInputMargin;
min-width: @menuInputMinWidth;
}
@ -199,10 +207,22 @@
.ui.dropdown > .text > .description,
.ui.dropdown .menu > .item > .description {
float: @itemDescriptionFloat;
margin: @itemDescriptionMargin;
color: @itemDescriptionColor;
}
/*-----------------
Message
-------------------*/
.ui.dropdown .menu > .message {
padding: @messagePadding;
font-weight: @messageFontWeight;
}
.ui.dropdown .menu > .message:not(.ui) {
color: @messageColor;
}
/*--------------
Sub Menu
@ -222,11 +242,6 @@
display: none;
}
/*******************************
Coupling
*******************************/
/*--------------
Sub Elements
---------------*/
@ -258,6 +273,7 @@
.ui.dropdown .menu > .item > .image,
.ui.dropdown .menu > .item > img {
margin-left: 0em;
float: @itemElementFloat;
margin-right: @itemElementDistance;
}
@ -276,6 +292,11 @@
}
/*******************************
Coupling
*******************************/
/*--------------
Menu
---------------*/
@ -299,6 +320,15 @@
right: 0em;
}
/*--------------
Label
---------------*/
/* Dropdown Menu */
.ui.label.dropdown .menu {
min-width: 100%;
}
/*--------------
Button
---------------*/
@ -307,10 +337,8 @@
.ui.dropdown.icon.button > .dropdown.icon {
margin: 0em;
}
.ui.dropdown.button:not(.pointing):not(.floating).active,
.ui.dropdown.button:not(.pointing):not(.floating).visible {
border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em;
.ui.button.dropdown .menu {
min-width: 100%;
}
@ -327,11 +355,13 @@
.ui.selection.dropdown {
cursor: pointer;
word-wrap: break-word;
line-height: 1em;
white-space: normal;
outline: 0;
transform: rotateZ(0deg);
min-width: @selectionMinWidth;
min-height: @selectionMinHeight;
background: @selectionBackground;
display: @selectionDisplay;
@ -353,9 +383,6 @@ select.ui.dropdown {
border: @selectBorder;
visibility: @selectVisibility;
}
.ui.selection.dropdown > .text {
margin-right: @selectionTextIconDistance;
}
.ui.selection.dropdown > .search.icon,
.ui.selection.dropdown > .delete.icon,
.ui.selection.dropdown > .dropdown.icon {
@ -363,6 +390,7 @@ select.ui.dropdown {
position: absolute;
top: auto;
width: auto;
z-index: @selectionIconZIndex;
margin: @selectionIconMargin;
padding: @selectionIconPadding;
right: @selectionHorizontalPadding;
@ -383,10 +411,12 @@ select.ui.dropdown {
-webkit-overflow-scrolling: touch;
border-top-width: 0px !important;
width: auto;
outline: none;
margin: 0px -@menuBorderWidth;
min-width: @menuMinWidth;
outline: none;
width: @menuMinWidth;
border-radius: @selectionMenuBorderRadius;
box-shadow: @selectionMenuBoxShadow;
transition: @selectionMenuTransition;
}
@ -395,12 +425,12 @@ select.ui.dropdown {
display: none;
}
/*--------------
Message
---------------*/
/* Scrollbar in IE */
@media all and (-ms-high-contrast:none) {
.ui.selection.dropdown .menu {
min-width: calc(100% - @scrollBarWidth);
}
.ui.selection.dropdown .menu > .message {
padding: @selectionMessagePadding;
}
@media only screen and (max-width : @largestMobileScreen) {
@ -427,9 +457,7 @@ select.ui.dropdown {
/* Menu Item */
.ui.selection.dropdown .menu > .item {
border-top: @selectionItemDivider;
padding-left: @selectionHorizontalPadding !important;
/* Add in spacing for scroll bar */
padding-right: calc(@selectionHorizontalPadding + 1em) !important;
padding: @selectionItemPadding !important;
white-space: normal;
word-wrap: normal;
}
@ -440,39 +468,42 @@ select.ui.dropdown {
box-shadow: @selectionHoverBoxShadow;
}
/* Disabled */
.ui.selection.dropdown.disabled,
.ui.selection.dropdown.disabled:hover {
cursor: default;
box-shadow: none;
color: @selectionTextColor;
border: @selectionBorder;
opacity: @disabledOpacity !important;
}
/* Visible Hover */
.ui.selection.visible.dropdown:hover {
border-color: @selectionVisibleHoverBorderColor;
box-shadow: @selectionVisibleHoverBoxShadow;
}
.ui.selection.visible.dropdown:hover .menu {
border: @selectionVisibleHoverMenuBorder;
box-shadow: @selectionVisibleHoverMenuBoxShadow;
}
/* Visible */
.ui.selection.dropdown.visible {
/* Active */
.ui.selection.active.dropdown {
border-color: @selectionVisibleBorderColor;
box-shadow: @selectionVisibleBoxShadow;
}
.ui.selection.active.dropdown .menu {
border-color: @selectionVisibleBorderColor;
box-shadow: @selectionVisibleMenuBoxShadow;
}
/* Active Item */
.ui.selection.active.dropdown > .text:not(.default),
/* Focus */
.ui.selection.dropdown:focus {
border-color: @selectionFocusBorderColor;
box-shadow: @selectionFocusBoxShadow;
}
.ui.selection.dropdown:focus .menu {
border-color: @selectionFocusBorderColor;
box-shadow: @selectionFocusMenuBoxShadow;
}
/* Visible */
.ui.selection.visible.dropdown > .text:not(.default) {
font-weight: @selectionVisibleTextFontWeight;
color: @selectionVisibleTextColor;
}
/* Visible Hover */
.ui.selection.active.dropdown:hover {
border-color: @selectionActiveHoverBorderColor;
box-shadow: @selectionActiveHoverBoxShadow;
}
.ui.selection.active.dropdown:hover .menu {
border-color: @selectionActiveHoverBorderColor;
box-shadow: @selectionActiveHoverMenuBoxShadow;
}
/* Dropdown Icon */
.ui.active.selection.dropdown > .dropdown.icon,
.ui.visible.selection.dropdown > .dropdown.icon {
@ -481,8 +512,7 @@ select.ui.dropdown {
}
/* Connecting Border */
.ui.active.selection.dropdown,
.ui.visible.selection.dropdown {
.ui.active.selection.dropdown {
border-bottom-left-radius: @selectionVisibleConnectingBorder !important;
border-bottom-right-radius: @selectionVisibleConnectingBorder !important;
}
@ -501,7 +531,6 @@ select.ui.dropdown {
background: none transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0em !important;
cursor: pointer;
top: 0em;
left: 0em;
@ -537,8 +566,14 @@ select.ui.dropdown {
.ui.search.dropdown.visible > .text {
pointer-events: none;
}
.ui.active.search.dropdown > input.search:focus + .text {
color: @unselectedTextColor !important;
/* Filtered Text */
.ui.active.search.dropdown input.search:focus + .text .icon,
.ui.active.search.dropdown input.search:focus + .text .flag {
opacity: @selectionTextUnderlayIconOpacity;
}
.ui.active.search.dropdown input.search:focus + .text {
color: @selectionTextUnderlayColor !important;
}
/* Search Menu */
@ -569,6 +604,83 @@ select.ui.dropdown {
}
}
/*--------------
Multiple
---------------*/
/* Multiple Selection */
.ui.multiple.dropdown {
padding: @multipleSelectionPadding;
}
.ui.multiple.dropdown .menu {
cursor: auto;
}
/* Multiple Search Selection */
.ui.multiple.search.dropdown,
.ui.multiple.search.dropdown > input.search {
cursor: text;
}
/* Selection Label */
.ui.multiple.dropdown > .label {
user-select: none;
display: inline-block;
vertical-align: top;
white-space: normal;
font-size: @labelSize;
padding: @labelPadding;
margin: @labelMargin;
box-shadow: @labelBoxShadow;
}
/* Dropdown Icon */
.ui.multiple.dropdown .dropdown.icon {
margin: @multipleSelectionDropdownIconMargin;
padding: @multipleSelectionDropdownIconPadding;
}
/* Text */
.ui.multiple.dropdown > .text {
position: static;
padding: 0;
max-width: 100%;
margin: @multipleSelectionChildMargin;
line-height: @multipleSelectionChildLineHeight;
}
.ui.multiple.dropdown > .label ~ .text {
display: none;
}
/*-----------------
Multiple Search
-----------------*/
/* Prompt Text */
.ui.multiple.search.dropdown > .text {
display: inline-block;
position: absolute;
top: 0;
left: 0;
padding: inherit;
margin: @multipleSelectionChildMargin;
line-height: @multipleSelectionChildLineHeight;
}
.ui.multiple.search.dropdown > .label ~ .text {
display: none;
}
/* Search */
.ui.multiple.search.dropdown > input.search {
position: static;
padding: 0;
max-width: 100%;
margin: @multipleSelectionChildMargin;
width: @multipleSelectionSearchStartWidth;
line-height: @multipleSelectionChildLineHeight;
}
/*--------------
Inline
@ -581,7 +693,7 @@ select.ui.dropdown {
}
.ui.inline.dropdown .dropdown.icon {
margin: @inlineIconMargin;
vertical-align: top;
vertical-align: baseline;
}
.ui.inline.dropdown > .text {
font-weight: @inlineTextFontWeight;
@ -598,17 +710,6 @@ select.ui.dropdown {
*******************************/
/*--------------------
Hover
----------------------*/
/* Menu Item Hover */
.ui.dropdown .menu > .item:hover {
background: @hoveredItemBackground;
color: @hoveredItemColor;
z-index: 12;
}
/*--------------------
Active
----------------------*/
@ -622,6 +723,85 @@ select.ui.dropdown {
z-index: @activeItemZIndex;
}
/*--------------------
Hover
----------------------*/
/* Menu Item Hover */
.ui.dropdown .menu > .item:hover {
background: @hoveredItemBackground;
color: @hoveredItemColor;
z-index: @hoveredZIndex;
}
/*--------------------
Loading
---------------------*/
/* Positioning */
.ui.loading.dropdown > i.icon:before,
.ui.loading.dropdown > i.icon:after {
left: 30% !important;
}
.ui.loading.dropdown > i.icon {
top: 50% !important;
}
.ui.multiple.loading.dropdown > i.icon:before,
.ui.multiple.loading.dropdown > i.icon:after {
top: 0% !important;
left: 0% !important;
}
.ui.loading.dropdown > i.icon:before {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: @loaderMargin;
width: @loaderSize;
height: @loaderSize;
border-radius: @circularRadius;
border: @loaderLineWidth solid @loaderFillColor;
}
.ui.loading.dropdown > i.icon:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
box-shadow: 0px 0px 0px 1px transparent;
margin: @loaderMargin;
width: @loaderSize;
height: @loaderSize;
animation: dropdown-spin @loaderSpeed linear;
animation-iteration-count: infinite;
border-radius: @circularRadius;
border-color: @loaderLineColor transparent transparent;
border-style: solid;
border-width: @loaderLineWidth;
}
/* Coupling */
.ui.loading.dropdown.button > i.icon:before,
.ui.loading.dropdown.button > i.icon:after {
display: none;
}
@keyframes dropdown-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*--------------------
Default Text
----------------------*/
@ -642,7 +822,9 @@ select.ui.dropdown {
.ui.loading.dropdown > .text {
transition: none;
}
.ui.dropdown > .loading.menu {
/* Used To Check Position */
.ui.dropdown .loading.menu {
display: block;
visibility: hidden;
z-index: @loadingZIndex;
@ -669,7 +851,7 @@ select.ui.dropdown {
visibility: hidden;
}
.ui.dropdown .filtered.item {
display: none;
display: none !important;
}
@ -687,7 +869,6 @@ select.ui.dropdown {
background: @errorBackgroundColor;
border-color: @errorBorderColor;
}
.ui.selection.dropdown.error:hover {
border-color: @errorBorderColor;
}
@ -696,10 +877,12 @@ select.ui.dropdown {
.ui.dropdown.error > .menu .menu {
border-color: @errorBorderColor;
}
.ui.dropdown.error > .menu > .item {
color: @errorItemTextColor;
}
.ui.multiple.selection.error.dropdown > .label {
border-color: @errorBorderColor;
}
/* Item Hover */
.ui.dropdown.error > .menu > .item:hover {
@ -718,7 +901,8 @@ select.ui.dropdown {
----------------------*/
/* Disabled */
.ui.disabled.dropdown {
.ui.disabled.dropdown,
.ui.dropdown .menu > .disabled.item {
cursor: default;
pointer-events: none;
opacity: @disabledOpacity;
@ -744,6 +928,7 @@ select.ui.dropdown {
.ui.dropdown .menu .right.menu {
left: 100% !important;
right: auto !important;
border-radius: @subMenuBorderRadius !important;
}
/* Left Flyout Menu */
@ -751,6 +936,7 @@ select.ui.dropdown {
.ui.dropdown .menu .left.menu {
left: auto !important;
right: 100% !important;
border-radius: @leftSubMenuBorderRadius !important;
}
.ui.dropdown .item .left.dropdown.icon,
@ -775,6 +961,7 @@ select.ui.dropdown {
Upward
---------------*/
/* Upward Main Menu */
.ui.upward.dropdown > .menu {
top: auto;
bottom: 100%;
@ -782,13 +969,18 @@ select.ui.dropdown {
border-radius: @upwardMenuBorderRadius;
}
/* Upward Sub Menu */
.ui.dropdown .upward.menu {
top: auto !important;
bottom: 0 !important;
}
/* Active Upward */
.ui.simple.upward.active.dropdown,
.ui.simple.upward.dropdown:hover {
border-radius: @borderRadius @borderRadius 0em 0em !important;
}
.ui.upward.dropdown.button:not(.pointing):not(.floating).active,
.ui.upward.dropdown.button:not(.pointing):not(.floating).visible {
.ui.upward.dropdown.button:not(.pointing):not(.floating).active {
border-radius: @borderRadius @borderRadius 0em 0em;
}
@ -796,22 +988,106 @@ select.ui.dropdown {
.ui.upward.selection.dropdown .menu {
border-top-width: @menuBorderWidth !important;
border-bottom-width: 0px !important;
box-shadow: @upwardSelectionMenuBoxShadow;
}
.ui.upward.selection.dropdown:hover {
box-shadow: @upwardSelectionHoverBoxShadow;
}
.ui.upward.selection.visible.dropdown:hover {
box-shadow: @upwardSelectionVisibleHoverBoxShadow;
}
.ui.active.upward.selection.dropdown,
.ui.visible.upward.selection.dropdown {
/* Active Upward */
.ui.active.upward.selection.dropdown {
border-radius: @upwardSelectionVisibleBorderRadius !important;
}
/* Visible Upward */
.ui.upward.selection.dropdown.visible {
box-shadow: @upwardSelectionVisibleBoxShadow;
border-radius: @upwardSelectionVisibleBorderRadius !important;
}
.ui.upward.selection.visible.dropdown:hover .menu {
box-shadow: @upwardSelectionVisibleHoverMenuBoxShadow;
/* Visible Hover Upward */
.ui.upward.active.selection.dropdown:hover {
box-shadow: @upwardSelectionActiveHoverBoxShadow;
}
.ui.upward.active.selection.dropdown:hover .menu {
box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
}
/*--------------
Simple
---------------*/
/* Selection Menu */
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
overflow-x: hidden;
overflow-y: auto;
}
.ui.scrolling.dropdown .menu {
overflow-x: hidden;
overflow-y: auto;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
min-width: 100% !important;
width: auto !important;
}
.ui.dropdown .scrolling.menu {
position: static;
overflow-y: auto;
border: none;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
min-width: 100% !important;
width: auto !important;
border-top: @menuBorder;
}
.ui.scrolling.dropdown .menu .item.item.item,
.ui.dropdown .scrolling.menu > .item.item.item {
border-top: @scrollingMenuItemBorder;
padding-right: @scrollingMenuRightItemPadding !important;
}
.ui.scrolling.dropdown .menu .item:first-child,
.ui.dropdown .scrolling.menu .item:first-child {
border-top: none;
}
.ui.dropdown > .animating.menu .scrolling.menu,
.ui.dropdown > .visible.menu .scrolling.menu {
display: block;
}
/* Scrollbar in IE */
@media all and (-ms-high-contrast:none) {
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
min-width: ~"calc(100% - "@scrollbarWidth~")";
}
}
@media only screen and (max-width : @largestMobileScreen) {
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
max-height: @scrollingMobileMaxMenuHeight;
}
}
@media only screen and (min-width: @tabletBreakpoint) {
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
max-height: @scrollingTabletMaxMenuHeight;
}
}
@media only screen and (min-width: @computerBreakpoint) {
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
max-height: @scrollingComputerMaxMenuHeight;
}
}
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
max-height: @scrollingWidescreenMaxMenuHeight;
}
}
/*--------------
@ -891,11 +1167,12 @@ select.ui.dropdown {
.ui.floating.dropdown .menu {
left: 0;
right: auto;
box-shadow: @floatingMenuBoxShadow;
border-radius: @floatingMenuBorderRadius;
box-shadow: @floatingMenuBoxShadow !important;
border-radius: @floatingMenuBorderRadius !important;
}
.ui.floating.dropdown > .menu {
margin-top: @floatingMenuDistance !important;
border-radius: @floatingMenuBorderRadius !important;
}
/*--------------
@ -1037,4 +1314,21 @@ select.ui.dropdown {
right: @pointingArrowDistanceFromEdge;
}
/* Upward pointing */
.ui.upward.pointing.dropdown > .menu,
.ui.upward.top.pointing.dropdown > .menu {
top: auto;
bottom: 100%;
margin: 0em 0em @pointingMenuDistance;
border-radius: @pointingUpwardMenuBorderRadius;
}
.ui.upward.pointing.dropdown > .menu:after,
.ui.upward.top.pointing.dropdown > .menu:after {
top: 100%;
bottom: auto;
box-shadow: @pointingUpwardArrowBoxShadow;
margin: @pointingArrowOffset 0em 0em;
}
.loadUIOverrides();

659
web/semantic/src/definitions/modules/embed.js Normal file
View file

@ -0,0 +1,659 @@
/*!
* # Semantic UI - Video
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
;(function ($, window, document, undefined) {
"use strict";
$.fn.embed = 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.embed.settings, parameters)
: $.extend({}, $.fn.embed.settings),
selector = settings.selector,
className = settings.className,
sources = settings.sources,
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),
$icon = $module.find(selector.icon),
$embed = $module.find(selector.embed),
element = this,
instance = $module.data(moduleNamespace),
module
;
module = {
initialize: function() {
module.debug('Initializing embed');
module.determine.autoplay();
module.create();
module.bind.events();
module.instantiate();
},
instantiate: function() {
module.verbose('Storing instance of module', module);
instance = module;
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
module.verbose('Destroying previous instance of embed');
module.reset();
$module
.removeData(moduleNamespace)
.off(eventNamespace)
;
},
refresh: function() {
module.verbose('Refreshing selector cache');
$placeholder = $module.find(selector.placeholder);
$icon = $module.find(selector.icon);
$embed = $module.find(selector.embed);
},
bind: {
events: function() {
if( module.has.placeholder() ) {
module.debug('Adding placeholder events');
$module
.on('click' + eventNamespace, selector.placeholder, module.createAndShow)
.on('click' + eventNamespace, selector.icon, module.createAndShow)
;
}
}
},
create: function() {
var
placeholder = module.get.placeholder()
;
if(placeholder) {
module.createPlaceholder();
}
else {
module.createAndShow();
}
},
createPlaceholder: function(placeholder) {
var
icon = module.get.icon(),
url = module.get.url(),
embed = module.generate.embed(url)
;
placeholder = placeholder || module.get.placeholder();
$module.html( templates.placeholder(placeholder, icon) );
module.debug('Creating placeholder for embed', placeholder, icon);
},
createEmbed: function(url) {
module.refresh();
url = url || module.get.url();
$embed = $('<div/>')
.addClass(className.embed)
.html( module.generate.embed(url) )
.appendTo($module)
;
settings.onCreate.call(element, url);
module.debug('Creating embed object', $embed);
},
createAndShow: function() {
module.createEmbed();
module.show();
},
// sets new embed
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)
;
module.create();
},
// clears embed
reset: function() {
module.debug('Clearing embed and showing placeholder');
module.remove.active();
module.remove.embed();
module.showPlaceholder();
settings.onReset.call(element);
},
// shows current embed
show: function() {
module.debug('Showing embed');
module.set.active();
settings.onDisplay.call(element);
},
hide: function() {
module.debug('Hiding embed');
module.showPlaceholder();
},
showPlaceholder: function() {
module.debug('Showing placeholder image');
module.remove.active();
settings.onPlaceholderDisplay.call(element);
},
get: {
id: function() {
return settings.id || $module.data(metadata.id);
},
placeholder: function() {
return settings.placeholder || $module.data(metadata.placeholder);
},
icon: function() {
return (settings.icon)
? settings.icon
: ($module.data(metadata.icon) !== undefined)
? $module.data(metadata.icon)
: module.determine.icon()
;
},
source: function(url) {
return (settings.source)
? settings.source
: ($module.data(metadata.source) !== undefined)
? $module.data(metadata.source)
: module.determine.source()
;
},
type: function() {
var source = module.get.source();
return (sources[source] !== undefined)
? sources[source].type
: false
;
},
url: function() {
return (settings.url)
? settings.url
: ($module.data(metadata.url) !== undefined)
? $module.data(metadata.url)
: module.determine.url()
;
}
},
determine: {
autoplay: function() {
if(module.should.autoplay()) {
settings.autoplay = true;
}
},
source: function(url) {
var
matchedSource = false
;
url = url || module.get.url();
if(url) {
$.each(sources, function(name, source) {
if(url.search(source.domain) !== -1) {
matchedSource = name;
return false;
}
});
}
return matchedSource;
},
icon: function() {
var
source = module.get.source()
;
return (sources[source] !== undefined)
? sources[source].icon
: false
;
},
url: function() {
var
id = settings.id || $module.data(metadata.id),
source = settings.source || $module.data(metadata.source),
url
;
url = (sources[source] !== undefined)
? sources[source].url.replace('{id}', id)
: false
;
if(url) {
$module.data(metadata.url, url);
}
return url;
}
},
set: {
active: function() {
$module.addClass(className.active);
}
},
remove: {
active: function() {
$module.removeClass(className.active);
},
embed: function() {
$embed.empty();
}
},
encode: {
parameters: function(parameters) {
var
urlString = [],
index
;
for (index in parameters) {
urlString.push( encodeURIComponent(index) + '=' + encodeURIComponent( parameters[index] ) );
}
return urlString.join('&amp;');
}
},
generate: {
embed: function(url) {
module.debug('Generating embed html');
var
source = module.get.source(),
html,
parameters
;
url = module.get.url(url);
if(url) {
parameters = module.generate.parameters(source);
html = templates.iframe(url, parameters);
}
else {
module.error(error.noURL, $module);
}
return html;
},
parameters: function(source, extraParameters) {
var
parameters = (sources[source] && sources[source].parameters !== undefined)
? sources[source].parameters(settings)
: {}
;
extraParameters = extraParameters || settings.parameters;
if(extraParameters) {
parameters = $.extend({}, parameters, extraParameters);
}
parameters = settings.onEmbed(parameters);
return module.encode.parameters(parameters);
}
},
has: {
placeholder: function() {
return settings.placeholder || $module.data(metadata.placeholder);
}
},
should: {
autoplay: function() {
return (settings.autoplay === 'auto')
? (settings.placeholder || $module.data(metadata.placeholder) !== undefined)
: settings.autoplay
;
}
},
is: {
video: function() {
return module.get.type() == 'video';
}
},
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, 500);
},
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.embed.settings = {
name : 'Embed',
namespace : 'embed',
debug : false,
verbose : false,
performance : true,
icon : false,
source : false,
url : false,
id : false,
// standard video settings
autoplay : 'auto',
color : '#444444',
hd : true,
brandedUI : false,
// additional parameters to include with the embed
parameters: false,
onDisplay : function() {},
onPlaceholderDisplay : function() {},
onReset : function() {},
onCreate : function(url) {},
onEmbed : function(parameters) {
return parameters;
},
metadata : {
id : 'id',
icon : 'icon',
placeholder : 'placeholder',
source : 'source',
url : 'url'
},
error : {
noURL : 'No URL specified',
method : 'The method you called is not defined'
},
className : {
active : 'active',
embed : 'embed'
},
selector : {
embed : '.embed',
placeholder : '.placeholder',
icon : '.icon'
},
sources: {
youtube: {
name : 'youtube',
type : 'video',
icon : 'video play',
domain : 'youtube.com',
url : '//www.youtube.com/embed/{id}',
parameters: function(settings) {
return {
autohide : !settings.brandedUI,
autoplay : settings.autoplay,
color : settings.colors || undefined,
hq : settings.hd,
jsapi : settings.api,
modestbranding : !settings.brandedUI
};
}
},
vimeo: {
name : 'vimeo',
type : 'video',
icon : 'video play',
domain : 'vimeo.com',
url : '//player.vimeo.com/video/{id}',
parameters: function(settings) {
return {
api : settings.api,
autoplay : settings.autoplay,
byline : settings.brandedUI,
color : settings.colors || undefined,
portrait : settings.brandedUI,
title : settings.brandedUI
};
}
}
},
templates: {
iframe : function(url, parameters) {
return ''
+ '<iframe src="' + url + '?' + parameters + '"'
+ ' width="100%" height="100%"'
+ ' frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
;
},
placeholder : function(image, icon) {
var
html = ''
;
if(icon) {
html += '<i class="' + icon + ' icon"></i>';
}
if(image) {
html += '<img class="placeholder" src="' + image + '">';
}
return html;
}
},
// NOT YET IMPLEMENTED
api : true,
onPause : function() {},
onPlay : function() {},
onStop : function() {}
};
})( jQuery, window, document );

164
web/semantic/src/definitions/modules/embed.less Normal file
View file

@ -0,0 +1,164 @@
/*!
* # Semantic UI - Video
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Theme
*******************************/
@type : 'module';
@element : 'embed';
@import (multiple) '../../theme.config';
/*******************************
Types
*******************************/
.ui.embed {
position: relative;
position: relative;
max-width: 100%;
height: 0px;
overflow: hidden;
background: @background;
padding-bottom: @widescreenRatio;
}
/*-----------------
Embedded Content
------------------*/
.ui.embed iframe,
.ui.embed embed,
.ui.embed object {
position: absolute;
border: none;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0em;
padding: 0em;
}
/*-----------------
Embed
------------------*/
.ui.embed > .embed {
display: none;
}
/*--------------
Placeholder
---------------*/
.ui.embed > .placeholder {
position: absolute;
cursor: pointer;
top: 0px;
left: 0px;
display: block;
width: 100%;
height: 100%;
background-color: @placeholderBackground;
}
/*--------------
Icon
---------------*/
.ui.embed > .icon {
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2;
}
.ui.embed > .icon:after {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index: 3;
content: '';
background: @placeholderBackground;
opacity: @placeholderBackgroundOpacity;
transition: @placeholderBackgroundTransition;
}
.ui.embed > .icon:before {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
transform: translateX(-50%) translateY(-50%);
color: @iconColor;
font-size: @iconSize;
text-shadow: @iconShadow;
transition: @iconTransition;
z-index: @iconZIndex;
}
/*******************************
States
*******************************/
/*--------------
Hover
---------------*/
.ui.embed .icon:hover:after {
background: @hoverPlaceholderBackground;
opacity: @hoverPlaceholderBackgroundOpacity;
}
.ui.embed .icon:hover:before {
color: @hoverIconColor;
}
/*--------------
Active
---------------*/
.ui.active.embed > .icon,
.ui.active.embed > .placeholder {
display: none;
}
.ui.active.embed > .embed {
display: block;
}
.loadUIOverrides();
/*******************************
Variations
*******************************/
.ui.square.embed {
padding-bottom: @squareRatio;
}
.ui[class*="4:3"].embed {
padding-bottom: @standardRatio;
}
.ui[class*="16:9"].embed {
padding-bottom: @widescreenRatio;
}
.ui[class*="21:9"].embed {
padding-bottom: @ultraWidescreenRatio;
}

228
web/semantic/src/definitions/modules/modal.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -80,9 +80,10 @@ $.fn.modal = function(parameters) {
module.create.dimmer();
module.refreshModals();
module.verbose('Attaching close events', $close);
module.bind.events();
module.observeChanges();
if(settings.observeChanges) {
module.observeChanges();
}
module.instantiate();
},
@ -107,6 +108,12 @@ $.fn.modal = function(parameters) {
},
dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
;
if(settings.inverted) {
dimmerSettings.variation = (dimmerSettings.variation !== undefined)
? dimmerSettings.variation + ' inverted'
: 'inverted'
;
}
if($.fn.dimmer === undefined) {
module.error(error.dimmer);
return;
@ -117,6 +124,12 @@ $.fn.modal = function(parameters) {
module.verbose('Modal is detachable, moving content into dimmer');
$dimmable.dimmer('add content', $module);
}
else {
module.set.undetached();
}
if(settings.blurring) {
$dimmable.addClass(className.blurring);
}
$dimmer = $dimmable.dimmer('get dimmer');
},
id: function() {
@ -186,8 +199,15 @@ $.fn.modal = function(parameters) {
bind: {
events: function() {
$close.on('click' + eventNamespace, module.event.close);
$window.on('resize' + elementNamespace, module.event.resize);
module.verbose('Attaching events');
$module
.on('click' + eventNamespace, selector.close, module.event.close)
.on('click' + eventNamespace, selector.approve, module.event.approve)
.on('click' + eventNamespace, selector.deny, module.event.deny)
;
$window
.on('resize' + elementNamespace, module.event.resize)
;
}
},
@ -198,30 +218,30 @@ $.fn.modal = function(parameters) {
},
event: {
approve: function() {
if(settings.onApprove.call(element, $(this)) === false) {
module.verbose('Approve callback returned false cancelling hide');
return;
}
module.hide();
},
deny: function() {
if(settings.onDeny.call(element, $(this)) === false) {
module.verbose('Deny callback returned false cancelling hide');
return;
}
module.hide();
},
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();
}
module.hide();
},
click: function(event) {
if( $(event.target).closest($module).length === 0 ) {
var
$target = $(event.target),
isInModal = ($target.closest(selector.modal).length > 0),
isInDOM = $.contains(document.documentElement, event.target)
;
if(!isInModal && isInDOM) {
module.debug('Dimmer clicked, hiding all modals');
if( module.is.active() ) {
module.remove.clickaway();
@ -302,8 +322,7 @@ $.fn.modal = function(parameters) {
module.set.type();
module.set.clickaway();
if( !settings.allowMultiple && $otherModals.filter('.' + className.active).length > 0) {
module.debug('Other modals visible, queueing show animation');
if( !settings.allowMultiple && module.others.active() ) {
module.hideOthers(module.showModal);
}
else {
@ -322,23 +341,16 @@ $.fn.modal = function(parameters) {
module.add.keyboardShortcuts();
module.save.focus();
module.set.active();
module.set.autofocus();
if(settings.autofocus) {
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();
})
;
module.error(error.noTransition);
}
}
}
@ -353,7 +365,10 @@ $.fn.modal = function(parameters) {
: function(){}
;
module.debug('Hiding modal');
settings.onHide.call(element);
if(settings.onHide.call(element, $(this)) === false) {
module.verbose('Hide callback returned false cancelling hide');
return;
}
if( module.is.animating() || module.is.active() ) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
@ -366,7 +381,7 @@ $.fn.modal = function(parameters) {
duration : settings.duration,
useFailSafe : true,
onStart : function() {
if(!module.othersActive() && !keepDimmed) {
if(!module.others.active() && !keepDimmed) {
module.hideDimmer();
}
module.remove.keyboardShortcuts();
@ -380,18 +395,7 @@ $.fn.modal = function(parameters) {
;
}
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();
})
;
module.error(error.noTransition);
}
}
},
@ -409,10 +413,8 @@ $.fn.modal = function(parameters) {
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();
}
module.remove.clickaway();
module.remove.screenHeight();
});
}
else {
@ -423,7 +425,7 @@ $.fn.modal = function(parameters) {
hideAll: function(callback) {
var
$visibleModals = $allModals.filter(':visible')
$visibleModals = $allModals.filter('.' + className.active + ', .' + className.animating)
;
callback = $.isFunction(callback)
? callback
@ -440,7 +442,7 @@ $.fn.modal = function(parameters) {
hideOthers: function(callback) {
var
$visibleModals = $otherModals.filter(':visible')
$visibleModals = $otherModals.filter('.' + className.active + ', .' + className.animating)
;
callback = $.isFunction(callback)
? callback
@ -454,10 +456,16 @@ $.fn.modal = function(parameters) {
}
},
othersActive: function() {
return ($otherModals.filter('.' + className.active).length > 0);
others: {
active: function() {
return ($otherModals.filter('.' + className.active).length > 0);
},
animating: function() {
return ($otherModals.filter('.' + className.animating).length > 0);
}
},
add: {
keyboardShortcuts: function() {
module.verbose('Adding keyboard shortcuts');
@ -492,14 +500,18 @@ $.fn.modal = function(parameters) {
;
}
},
screenHeight: function() {
if(module.cache.height > module.cache.pageHeight) {
module.debug('Removing page height');
$body
.css('height', '')
;
bodyStyle: function() {
if($body.attr('style') === '') {
module.verbose('Removing style attribute');
$body.removeAttr('style');
}
},
screenHeight: function() {
module.debug('Removing page height');
$body
.css('height', '')
;
},
keyboardShortcuts: function() {
module.verbose('Removing keyboard shortcuts');
$document
@ -555,15 +567,15 @@ $.fn.modal = function(parameters) {
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();
var
$inputs = $module.find(':input').filter(':visible'),
$autofocus = $inputs.filter('[autofocus]'),
$input = ($autofocus.length > 0)
? $autofocus.first()
: $inputs.first()
;
if($input.length > 0) {
$input.focus();
}
},
clickaway: function() {
@ -580,7 +592,7 @@ $.fn.modal = function(parameters) {
else {
module.debug('Modal is taller than page content, resizing page height');
$body
.css('height', module.cache.height + (settings.padding / 2) )
.css('height', module.cache.height + (settings.padding * 2) )
;
}
},
@ -594,7 +606,7 @@ $.fn.modal = function(parameters) {
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
if(!module.othersActive) {
if(!module.others.active() && !module.others.animating()) {
module.remove.scrolling();
}
}
@ -621,6 +633,9 @@ $.fn.modal = function(parameters) {
})
;
}
},
undetached: function() {
$dimmable.addClass(className.undetached);
}
},
@ -693,7 +708,7 @@ $.fn.modal = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -806,40 +821,55 @@ $.fn.modal.settings = {
namespace : 'modal',
debug : false,
verbose : true,
verbose : false,
performance : true,
observeChanges : false,
allowMultiple : false,
detachable : true,
closable : true,
autofocus : true,
inverted : false,
blurring : false,
dimmerSettings : {
closable : false,
useCSS : true
},
context : 'body',
queue : false,
duration : 500,
easing : 'easeOutExpo',
offset : 0,
transition : 'scale',
context : 'body',
padding : 50,
queue : false,
duration : 500,
offset : 0,
transition : 'scale',
onShow : function(){},
onHide : function(){},
// padding with edge of page
padding : 50,
onVisible : function(){},
onHidden : function(){},
// called before show animation
onShow : function(){},
onApprove : function(){ return true; },
onDeny : function(){ return true; },
// called after show animation
onVisible : function(){},
// called before hide animation
onHide : function(){ return true; },
// called after hide animation
onHidden : function(){},
// called after approve selector match
onApprove : function(){ return true; },
// called after deny selector match
onDeny : function(){ return true; },
selector : {
close : '.close, .actions .button',
close : '> .close',
approve : '.actions .positive, .actions .approve, .actions .ok',
deny : '.actions .negative, .actions .deny, .actions .cancel',
modal : '.ui.modal'
@ -850,11 +880,13 @@ $.fn.modal.settings = {
notFound : 'The element you specified could not be found'
},
className : {
active : 'active',
animating : 'animating',
scrolling : 'scrolling'
active : 'active',
animating : 'animating',
blurring : 'blurring',
scrolling : 'scrolling',
undetached : 'undetached'
}
};
})( jQuery, window , document );
})( jQuery, window, document );

149
web/semantic/src/definitions/modules/modal.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -32,12 +32,10 @@
left: 50%;
text-align: left;
width: @width;
margin-left: @xOffset;
background: @background;
border: @border;
box-shadow: @boxShadow;
transform-origin: @transformOrigin;
border-radius: @borderRadius;
user-select: text;
@ -94,11 +92,13 @@
padding: @headerPadding;
box-shadow: @headerBoxShadow;
color: @headerColor;
border-bottom: @headerBorder;
}
.ui.modal > .header:not(.ui) {
font-size: @headerFontSize;
line-height: @headerLineHeight;
font-weight: @headerFontWeight;
color: @headerColor;
border-bottom: @headerBorder;
}
/*--------------
@ -106,37 +106,46 @@
---------------*/
.ui.modal > .content {
display: table;
table-layout: fixed;
display: block;
width: 100%;
font-size: @contentFontSize;
line-height: @contentLineHeight;
padding: @contentPadding;
background: @contentBackground;
}
.ui.modal > .image.content {
display: flex;
flex-direction: row;
}
/* Image */
.ui.modal > .content > .image {
display: table-cell;
display: block;
flex: 0 1 auto;
width: @imageWidth;
vertical-align: @imageVerticalAlign;
align-self: @imageVerticalAlign;
}
.ui.modal > .content > .image[class*="top aligned"] {
vertical-align: top;
.ui.modal > [class*="top aligned"] {
align-self: top;
}
.ui.modal > .content > .image[class*="middle aligned"] {
vertical-align: middle;
.ui.modal > [class*="middle aligned"] {
align-self: middle;
}
.ui.modal > [class*="stretched"] {
align-self: stretch;
}
/* Description */
.ui.modal > .content > .description {
display: table-cell;
vertical-align: top;
vertical-align: @descriptionVerticalAlign;
display: block;
flex: 1 0 auto;
min-width: 0px;
align-self: @descriptionVerticalAlign;
}
.ui.modal > .content > .icon + .description,
.ui.modal > .content > .image + .description {
flex: 0 1 auto;
min-width: @descriptionMinWidth;
width: @descriptionWidth;
padding-left: @descriptionDistance;
@ -144,17 +153,18 @@
/*rtl:ignore*/
.ui.modal > .content > .image > i.icon {
font-size: @imageIconSize;
margin: 0em;
opacity: 1;
width: auto;
line-height: 1;
font-size: @imageIconSize;
}
/*--------------
Actions
---------------*/
.ui.modal .actions {
.ui.modal > .actions {
background: @actionBackground;
padding: @actionPadding;
border-top: @actionBorder;
@ -201,7 +211,7 @@
}
/* Tablet and Mobile */
@media only screen and (max-width : @computerBreakpoint) {
@media only screen and (max-width : @largestTabletScreen) {
.ui.modal > .header {
padding-right: @closeHitbox;
}
@ -229,6 +239,9 @@
}
/*rtl:ignore*/
.ui.modal .image.content {
flex-direction: column;
}
.ui.modal .content > .image {
display: block;
max-width: 100%;
@ -260,6 +273,14 @@
}
}
/*--------------
Coupling
---------------*/
.ui.inverted.dimmer > .ui.modal {
box-shadow: @invertedBoxShadow;
}
/*******************************
Types
*******************************/
@ -268,7 +289,7 @@
background-color: transparent;
border: none;
border-radius: 0em;
box-shadow: 0px 0px 0px 0px;
box-shadow: none !important;
color: @basicModalColor;
}
.ui.basic.modal > .header,
@ -284,41 +305,20 @@
right: @basicModalCloseRight;
}
/* Tablet and Mobile */
@media only screen and (max-width : @computerBreakpoint) {
.ui.inverted.dimmer > .basic.modal {
color: @basicInvertedModalColor;
}
.ui.inverted.dimmer > .ui.basic.modal > .header {
color: @basicInvertedModalHeaderColor;
}
/* Tablet and Mobile */
@media only screen and (max-width : @largestTabletScreen) {
.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
@ -332,6 +332,53 @@
Variations
*******************************/
/*--------------
Scrolling
---------------*/
/* 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;
}
.modals.dimmer .ui.scrolling.modal {
position: static !important;
margin: @scrollingMargin auto !important;
}
/* undetached scrolling */
.scrolling.undetached.dimmable.dimmed {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling.undetached.dimmable.dimmed > .dimmer {
overflow: hidden;
}
.scrolling.undetached.dimmable .ui.scrolling.modal {
position: absolute;
left: 50%;
margin-top: @scrollingMargin !important;
}
/* Coupling with Sidebar */
.undetached.dimmable.dimmed > .pusher {
z-index: auto;
}
@media only screen and (max-width : @largestTabletScreen) {
.modals.dimmer .ui.scrolling.modal {
margin-top: @mobileScrollingMargin !important;
margin-bottom: @mobileScrollingMargin !important;
}
}
/*--------------
Full Screen
---------------*/
@ -363,7 +410,7 @@
}
/* Small */
.ui.small.modal > .header {
.ui.small.modal > .header:not(.ui) {
font-size: @smallHeaderSize;
}

29
web/semantic/src/definitions/modules/nag.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -76,11 +76,9 @@ $.fn.nag = function(parameters) {
module.verbose('Initializing element');
$module
.on('click' + eventNamespace, selector.close, module.dismiss)
.data(moduleNamespace, module)
;
$close
.on('click' + eventNamespace, module.dismiss)
;
if(settings.detachable && $module.parent()[0] !== $context[0]) {
$module
@ -196,6 +194,10 @@ $.fn.nag = function(parameters) {
window.localStorage.setItem(key, value);
module.debug('Value stored using local storage', key, value);
}
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
window.sessionStorage.setItem(key, value);
module.debug('Value stored using session storage', key, value);
}
else if($.cookie !== undefined) {
$.cookie(key, value, options);
module.debug('Value stored using cookie', key, value, options);
@ -212,6 +214,9 @@ $.fn.nag = function(parameters) {
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
storedValue = window.localStorage.getItem(key);
}
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
storedValue = window.sessionStorage.getItem(key);
}
// get by cookie
else if($.cookie !== undefined) {
storedValue = $.cookie(key);
@ -228,9 +233,12 @@ $.fn.nag = function(parameters) {
var
options = module.get.storageOptions()
;
if(settings.storageMethod == 'local' && window.store !== undefined) {
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
window.localStorage.removeItem(key);
}
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
window.sessionStorage.removeItem(key);
}
// store by cookie
else if($.cookie !== undefined) {
$.removeCookie(key, options);
@ -310,7 +318,7 @@ $.fn.nag = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -423,7 +431,7 @@ $.fn.nag.settings = {
name : 'Nag',
debug : false,
verbose : true,
verbose : false,
performance : true,
namespace : 'Nag',
@ -454,8 +462,9 @@ $.fn.nag.settings = {
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.'
noCookieStorage : '$.cookie is not included. A storage solution is required.',
noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state',
method : 'The method you called is not defined.'
},
className : {
@ -474,4 +483,4 @@ $.fn.nag.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

2
web/semantic/src/definitions/modules/nag.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*

675
web/semantic/src/definitions/modules/popup.js
View file

File diff suppressed because it is too large Load diff

100
web/semantic/src/definitions/modules/popup.less Normal file → Executable file
View file

@ -1,9 +1,10 @@
/*!
* # Semantic UI - Popup
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -31,13 +32,13 @@
right: 0px;
/* Fixes content being squished when inline (moz only) */
min-width: -moz-max-content;
min-width: min-content;
z-index: @zIndex;
border: @border;
line-height: @lineHeight;
max-width: @maxWidth;
background-color: @background;
background: @background;
padding: @verticalPadding @horizontalPadding;
font-weight: @fontWeight;
@ -83,17 +84,43 @@
.ui.popup {
margin: 0em;
}
.ui.popup.bottom {
margin: @popupDistanceAway 0em 0em;
}
.ui.popup.top {
/* Extending from Top */
.ui.top.popup {
margin: 0em 0em @popupDistanceAway;
}
.ui.popup.left.center {
margin: 0em @popupDistanceAway 0em 0em;
.ui.top.left.popup {
transform-origin: left bottom;
}
.ui.popup.right.center {
.ui.top.center.popup {
transform-origin: center bottom;
}
.ui.top.right.popup {
transform-origin: right bottom;
}
/* Extending from Vertical Center */
.ui.left.center.popup {
margin: 0em @popupDistanceAway 0em 0em;
transform-origin: right 50%;
}
.ui.right.center.popup {
margin: 0em 0em 0em @popupDistanceAway;
transform-origin: left 50%;
}
/* Extending from Bottom */
.ui.bottom.popup {
margin: @popupDistanceAway 0em 0em;
}
.ui.bottom.left.popup {
transform-origin: left top;
}
.ui.bottom.center.popup {
transform-origin: center top;
}
.ui.bottom.right.popup {
transform-origin: right top;
}
/*--------------
@ -113,6 +140,7 @@
.ui.bottom.left.popup {
margin-left: @boxArrowOffset;
}
/*rtl:rename*/
.ui.bottom.left.popup:before {
top: @arrowOffset;
left: @arrowDistanceFromEdge;
@ -125,6 +153,7 @@
.ui.bottom.right.popup {
margin-right: @boxArrowOffset;
}
/*rtl:rename*/
.ui.bottom.right.popup:before {
top: @arrowOffset;
right: @arrowDistanceFromEdge;
@ -145,6 +174,7 @@
.ui.top.left.popup {
margin-left: @boxArrowOffset;
}
/*rtl:rename*/
.ui.top.left.popup:before {
bottom: @arrowOffset;
left: @arrowDistanceFromEdge;
@ -155,6 +185,7 @@
.ui.top.right.popup {
margin-right: @boxArrowOffset;
}
/*rtl:rename*/
.ui.top.right.popup:before {
bottom: @arrowOffset;
right: @arrowDistanceFromEdge;
@ -164,6 +195,7 @@
}
/*--- Left Center ---*/
/*rtl:rename*/
.ui.left.center.popup:before {
top: 50%;
right: @arrowOffset;
@ -174,6 +206,7 @@
}
/*--- Right Center ---*/
/*rtl:rename*/
.ui.right.center.popup:before {
top: 50%;
left: @arrowOffset;
@ -183,6 +216,31 @@
box-shadow: @rightArrowBoxShadow;
}
/* Arrow Color By Location */
.ui.bottom.popup:before {
background: @arrowTopBackground;
}
.ui.right.center.popup:before,
.ui.left.center.popup:before {
background: @arrowCenterBackground;
}
.ui.top.popup:before {
background: @arrowBottomBackground;
}
/* Inverted Arrow Color */
.ui.inverted.bottom.popup:before {
background: @invertedArrowTopBackground;
}
.ui.inverted.right.center.popup:before,
.ui.inverted.left.center.popup:before {
background: @invertedArrowCenterBackground;
}
.ui.inverted.top.popup:before {
background: @invertedArrowBottomBackground;
}
/*******************************
Coupling
*******************************/
@ -208,6 +266,11 @@
display: block;
}
.ui.visible.popup {
transform: translateZ(0px);
backface-visibility: hidden;
}
/*******************************
Variations
@ -233,6 +296,13 @@
max-width: @veryWideWidth;
}
@media only screen and (max-width: @largestMobileScreen) {
.ui.wide.popup,
.ui[class*="very wide"].popup {
max-width: @maxWidth;
}
}
/*--------------
Fluid
@ -277,6 +347,12 @@
Sizes
---------------*/
.ui.mini.popup {
font-size: @mini;
}
.ui.tiny.popup {
font-size: @tiny;
}
.ui.small.popup {
font-size: @small;
}
@ -291,4 +367,4 @@
}
.loadUIOverrides();
.loadUIOverrides();

216
web/semantic/src/definitions/modules/progress.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -63,11 +63,12 @@ $.fn.progress = function(parameters) {
initialize: function() {
module.debug('Initializing progress bar', settings);
transitionEnd = module.get.transitionEnd();
module.set.duration();
module.set.transitionEvent();
module.read.metadata();
module.set.duration();
module.set.initials();
module.read.settings();
module.instantiate();
},
@ -88,6 +89,7 @@ $.fn.progress = function(parameters) {
reset: function() {
module.set.percent(0);
module.set.value(0);
},
complete: function() {
@ -98,92 +100,116 @@ $.fn.progress = function(parameters) {
read: {
metadata: function() {
if( $module.data(metadata.percent) ) {
module.verbose('Current percent value set from metadata');
module.percent = $module.data(metadata.percent);
var
data = {
percent : $module.data(metadata.percent),
total : $module.data(metadata.total),
value : $module.data(metadata.value)
}
;
if(data.percent) {
module.debug('Current percent value set from metadata', data.percent);
module.set.percent(data.percent);
}
if( $module.data(metadata.total) ) {
module.verbose('Total value set from metadata');
module.total = $module.data(metadata.total);
if(data.total) {
module.debug('Total value set from metadata', data.total);
module.set.total(data.total);
}
if( $module.data(metadata.value) ) {
module.verbose('Current value set from metadata');
module.value = $module.data(metadata.value);
if(data.value) {
module.debug('Current value set from metadata', data.value);
module.set.value(data.value);
module.set.progress(data.value);
}
},
currentValue: function() {
return (module.value !== undefined)
? module.value
: false
;
settings: function() {
if(settings.total !== false) {
module.debug('Current total set in settings', settings.total);
module.set.total(settings.total);
}
if(settings.value !== false) {
module.debug('Current value set in settings', settings.value);
module.set.value(settings.value);
module.set.progress(module.value);
}
if(settings.percent !== false) {
module.debug('Current percent set in settings', settings.percent);
module.set.percent(settings.percent);
}
}
},
increment: function(incrementValue) {
var
total = module.total || false,
edgeValue,
maxValue,
startValue,
newValue
;
if(total) {
startValue = module.value || 0;
if( module.has.total() ) {
startValue = module.get.value();
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;
maxValue = module.get.total();
module.debug('Incrementing value', startValue, newValue, maxValue);
if(newValue > maxValue ) {
module.debug('Value cannot increment above total', maxValue);
newValue = maxValue;
}
module.set.progress(newValue);
}
else {
startValue = module.percent || 0;
startValue = module.get.percent();
incrementValue = incrementValue || module.get.randomValue();
newValue = startValue + incrementValue;
edgeValue = 100;
module.debug('Incrementing percentage by', incrementValue, startValue);
if(newValue > edgeValue ) {
maxValue = 100;
module.debug('Incrementing percentage by', startValue, newValue);
if(newValue > maxValue ) {
module.debug('Value cannot increment above 100 percent');
newValue = edgeValue;
newValue = maxValue;
}
module.set.progress(newValue);
}
module.set.progress(newValue);
},
decrement: function(decrementValue) {
var
total = module.total || false,
edgeValue = 0,
total = module.get.total(),
startValue,
newValue
;
if(total) {
startValue = module.value || 0;
startValue = module.get.value();
decrementValue = decrementValue || 1;
newValue = startValue - decrementValue;
module.debug('Decrementing value by', decrementValue, startValue);
}
else {
startValue = module.percent || 0;
startValue = module.get.percent();
decrementValue = decrementValue || module.get.randomValue();
newValue = startValue - decrementValue;
module.debug('Decrementing percentage by', decrementValue, startValue);
}
if(newValue < edgeValue) {
if(newValue < 0) {
module.debug('Value cannot decrement below 0');
newValue = 0;
}
module.set.progress(newValue);
},
has: {
total: function() {
return (module.get.total() !== false);
}
},
get: {
text: function(templateText) {
var
value = module.value || 0,
total = module.total || 0,
percent = (module.is.visible() && animating)
percent = (animating)
? module.get.displayPercent()
: module.percent || 0,
left = (module.total > 0)
@ -200,11 +226,22 @@ $.fn.progress = function(parameters) {
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);
},
numericValue: function(value) {
return (typeof value === 'string')
? (value.replace(/[^\d.]/g, '') !== '')
? +(value.replace(/[^\d.]/g, ''))
: false
: value
;
},
transitionEnd: function() {
var
element = document.createElement('element'),
@ -233,17 +270,17 @@ $.fn.progress = function(parameters) {
? (barWidth / totalWidth * 100)
: module.percent
;
if(settings.precision === 0) {
return Math.round(displayPercent);
}
return Math.round(displayPercent * (10 * settings.precision) / (10 * settings.precision) );
return (settings.precision > 0)
? Math.round(displayPercent * (10 * settings.precision)) / (10 * settings.precision)
: Math.round(displayPercent)
;
},
percent: function() {
return module.percent || 0;
},
value: function() {
return module.value || false;
return module.value || 0;
},
total: function() {
return module.total || false;
@ -319,66 +356,37 @@ $.fn.progress = function(parameters) {
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) );
}
// round display percentage
percent = (settings.precision > 0)
? Math.round(percent * (10 * settings.precision)) / (10 * settings.precision)
: Math.round(percent)
;
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
if( !module.has.total() ) {
module.value = (settings.precision > 0)
? Math.round( (percent / 100) * module.total * (10 * settings.precision)) / (10 * settings.precision)
: Math.round( (percent / 100) * module.total * 10) / 10
;
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.labelInterval();
module.set.labels();
settings.onChange.call(element, percent, module.value, module.total);
},
@ -500,23 +508,25 @@ $.fn.progress = function(parameters) {
}
settings.onError.call(element, module.value, module.total);
},
transitionEvent: function() {
transitionEnd = module.get.transitionEnd();
},
total: function(totalValue) {
module.total = totalValue;
},
value: function(value) {
module.value = value;
},
progress: function(value) {
var
numericValue = (typeof value === 'string')
? (value.replace(/[^\d.]/g, '') !== '')
? +(value.replace(/[^\d.]/g, ''))
: false
: value,
numericValue = module.get.numericValue(value),
percentComplete
;
if(numericValue === false) {
module.error(error.nonNumeric, value);
}
if(module.total) {
module.value = numericValue;
if( module.has.total() ) {
module.set.value(numericValue);
percentComplete = (numericValue / module.total) * 100;
module.debug('Calculating percent complete from total', percentComplete);
module.set.percent( percentComplete );
@ -598,7 +608,7 @@ $.fn.progress = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -712,7 +722,7 @@ $.fn.progress.settings = {
namespace : 'progress',
debug : false,
verbose : true,
verbose : false,
performance : true,
random : {
@ -727,7 +737,7 @@ $.fn.progress.settings = {
limitValues : true,
label : 'percent',
precision : 1,
precision : 0,
framerate : (1000 / 30), /// 30 fps
percent : false,
@ -782,4 +792,4 @@ $.fn.progress.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

301
web/semantic/src/definitions/modules/progress.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -42,83 +42,6 @@
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
*******************************/
@ -138,7 +61,7 @@
/* Percent Complete */
.ui.progress .bar > .progress {
white-space: nowrap;
position: absolute;
position: @progressPosition;
width: @progressWidth;
font-size: @progressSize;
top: @progressTop;
@ -170,6 +93,88 @@
}
/*******************************
Types
*******************************/
/* Indicating */
.ui.indicating.progress[data-percent^="1"] .bar,
.ui.indicating.progress[data-percent^="2"] .bar {
background-color: @indicatingFirstColor;
}
.ui.indicating.progress[data-percent^="3"] .bar {
background-color: @indicatingSecondColor;
}
.ui.indicating.progress[data-percent^="4"] .bar,
.ui.indicating.progress[data-percent^="5"] .bar {
background-color: @indicatingThirdColor;
}
.ui.indicating.progress[data-percent^="6"] .bar {
background-color: @indicatingFourthColor;
}
.ui.indicating.progress[data-percent^="7"] .bar,
.ui.indicating.progress[data-percent^="8"] .bar {
background-color: @indicatingFifthColor;
}
.ui.indicating.progress[data-percent^="9"] .bar,
.ui.indicating.progress[data-percent^="100"] .bar {
background-color: @indicatingSixthColor;
}
/* Indicating Label */
.ui.indicating.progress[data-percent^="1"] .label,
.ui.indicating.progress[data-percent^="2"] .label {
color: @indicatingFirstLabelColor;
}
.ui.indicating.progress[data-percent^="3"] .label {
color: @indicatingSecondLabelColor;
}
.ui.indicating.progress[data-percent^="4"] .label,
.ui.indicating.progress[data-percent^="5"] .label {
color: @indicatingThirdLabelColor;
}
.ui.indicating.progress[data-percent^="6"] .label {
color: @indicatingFourthLabelColor;
}
.ui.indicating.progress[data-percent^="7"] .label,
.ui.indicating.progress[data-percent^="8"] .label {
color: @indicatingFifthLabelColor;
}
.ui.indicating.progress[data-percent^="9"] .label,
.ui.indicating.progress[data-percent^="100"] .label {
color: @indicatingSixthLabelColor;
}
/* Single Digits */
.ui.indicating.progress[data-percent="1"] .bar,
.ui.indicating.progress[data-percent="2"] .bar,
.ui.indicating.progress[data-percent="3"] .bar,
.ui.indicating.progress[data-percent="4"] .bar,
.ui.indicating.progress[data-percent="5"] .bar,
.ui.indicating.progress[data-percent="6"] .bar,
.ui.indicating.progress[data-percent="7"] .bar,
.ui.indicating.progress[data-percent="8"] .bar,
.ui.indicating.progress[data-percent="9"] .bar {
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: @indicatingFirstLabelColor;
}
/* Indicating Success */
.ui.indicating.progress.success .label {
color: @successHeaderColor;
}
/*******************************
States
*******************************/
@ -353,62 +358,110 @@
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;
}
/* Red */
.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;
/* Orange */
.ui.orange.progress .bar {
background-color: @orange;
}
.ui.orange.inverted.progress .bar {
background-color: @lightOrange;
}
/* Yellow */
.ui.yellow.progress .bar {
background-color: @yellow;
}
.ui.yellow.inverted.progress .bar {
background-color: @lightYellow;
}
/* Olive */
.ui.olive.progress .bar {
background-color: @olive;
}
.ui.olive.inverted.progress .bar {
background-color: @lightOlive;
}
/* Green */
.ui.green.progress .bar {
background-color: @green;
}
.ui.green.inverted.progress .bar {
background-color: @lightGreen;
}
/* Teal */
.ui.teal.progress .bar {
background-color: @teal;
}
.ui.teal.inverted.progress .bar {
background-color: @lightTeal;
}
/* Blue */
.ui.blue.progress .bar {
background-color: @blue;
}
.ui.blue.inverted.progress .bar {
background-color: @lightBlue;
}
/* Violet */
.ui.violet.progress .bar {
background-color: @violet;
}
.ui.violet.inverted.progress .bar {
background-color: @lightViolet;
}
/* Purple */
.ui.purple.progress .bar {
background-color: @purple;
}
.ui.purple.inverted.progress .bar {
background-color: @lightPurple;
}
/* Pink */
.ui.pink.progress .bar {
background-color: @pink;
}
.ui.pink.inverted.progress .bar {
background-color: @lightPink;
}
/* Brown */
.ui.brown.progress .bar {
background-color: @brown;
}
.ui.brown.inverted.progress .bar {
background-color: @lightBrown;
}
/* Grey */
.ui.grey.progress .bar {
background-color: @grey;
}
.ui.grey.inverted.progress .bar {
background-color: @lightGrey;
}
/* Black */
.ui.black.progress .bar {
background-color: @black;
}
.ui.black.inverted.progress .bar {
background-color: @lightBlack;
}
/*--------------
Sizes
---------------*/

134
web/semantic/src/definitions/modules/rating.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -66,14 +66,7 @@ $.fn.rating = function(parameters) {
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.set.rating( module.get.initialRating() );
module.instantiate();
},
@ -87,12 +80,10 @@ $.fn.rating = function(parameters) {
destroy: function() {
module.verbose('Destroying previous instance', instance);
module.remove.events();
$module
.removeData(moduleNamespace)
;
$icon
.off(eventNamespace)
;
},
refresh: function() {
@ -102,11 +93,12 @@ $.fn.rating = function(parameters) {
setup: {
layout: function() {
var
maxRating = $module.data(metadata.maxRating) || settings.maxRating
maxRating = module.get.maxRating(),
html = $.fn.rating.settings.templates.icon(maxRating)
;
module.debug('Generating icon html dynamically');
$module
.html($.fn.rating.settings.templates.icon(maxRating))
.html(html)
;
module.refresh();
}
@ -141,7 +133,7 @@ $.fn.rating = function(parameters) {
click: function() {
var
$activeIcon = $(this),
currentRating = module.getRating(),
currentRating = module.get.rating(),
rating = $icon.index($activeIcon) + 1,
canClear = (settings.clearable == 'auto')
? ($icon.length === 1)
@ -151,31 +143,39 @@ $.fn.rating = function(parameters) {
module.clearRating();
}
else {
module.setRating( rating );
module.set.rating( rating );
}
}
},
clearRating: function() {
module.debug('Clearing current rating');
module.setRating(0);
module.set.rating(0);
},
getRating: function() {
var
currentRating = $icon.filter('.' + className.active).length
;
module.verbose('Current rating retrieved', currentRating);
return currentRating;
bind: {
events: function() {
module.verbose('Binding events');
$module
.on('mouseenter' + eventNamespace, selector.icon, module.event.mouseenter)
.on('mouseleave' + eventNamespace, selector.icon, module.event.mouseleave)
.on('click' + eventNamespace, selector.icon, module.event.click)
;
}
},
remove: {
events: function() {
module.verbose('Removing events');
$module
.off(eventNamespace)
;
}
},
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.bind.events();
$module
.removeClass(className.disabled)
;
@ -183,37 +183,61 @@ $.fn.rating = function(parameters) {
disable: function() {
module.debug('Setting rating to read-only mode');
$icon
.off(eventNamespace)
;
module.remove.events();
$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)
get: {
initialRating: function() {
if($module.data(metadata.rating) !== undefined) {
$module.removeData(metadata.rating);
return $module.data(metadata.rating);
}
return settings.initialRating;
},
maxRating: function() {
if($module.data(metadata.maxRating) !== undefined) {
$module.removeData(metadata.maxRating);
return $module.data(metadata.maxRating);
}
return settings.maxRating;
},
rating: function() {
var
currentRating = $icon.filter('.' + className.active).length
;
module.verbose('Current rating retrieved', currentRating);
return currentRating;
}
},
set: {
rating: 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);
}
settings.onRate.call(element, rating);
},
setting: function(name, value) {
@ -285,7 +309,7 @@ $.fn.rating = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -400,7 +424,7 @@ $.fn.rating.settings = {
namespace : 'rating',
debug : false,
verbose : true,
verbose : false,
performance : true,
initialRating : 0,
@ -448,4 +472,4 @@ $.fn.rating.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

113
web/semantic/src/definitions/modules/rating.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -24,32 +24,26 @@
*******************************/
.ui.rating {
display: @display;
display: inline-flex;
white-space: @whiteSpace;
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;
margin: 0em;
text-align: center;
font-weight: normal;
font-style: normal;
flex: 1 0 auto;
cursor: @iconCursor;
width: @iconWidth;
height: @iconHeight;
transition: @iconTransition;
}
@ -57,6 +51,31 @@
Types
*******************************/
/*-------------------
Standard
--------------------*/
/* Inactive Icon */
.ui.rating .icon {
background: @inactiveBackground;
color: @inactiveColor;
}
/* Active Icon */
.ui.rating .active.icon {
background: @activeBackground;
color: @activeColor;
}
/* Selected Icon */
.ui.rating .icon.selected,
.ui.rating .icon.selected.active {
background: @selectedBackground;
color: @selectedColor;
}
/*-------------------
Star
--------------------*/
@ -64,31 +83,27 @@
/* Inactive */
.ui.star.rating .icon {
width: @starIconWidth;
height: @starIconHeight;
background: @starInactiveBackground;
color: @starInactiveColor;
text-shadow: @starInactiveTextShadow;
}
/* Active Star */
.ui.star.rating .active.icon {
background: @starActiveBackground !important;
color: @starActiveColor !important;
text-shadow: @starActiveShadow;
text-shadow: @starActiveTextShadow !important;
}
/* Selected Star */
.ui.star.rating .icon.selected,
.ui.star.rating .icon.selected.active {
background: @starSelectedBackground !important;
color: @starSelectedColor !important;
text-shadow: @starSelectedTextShadow !important;
}
.ui.star.rating.partial {
position: relative;
z-index: 1;
}
.ui.star.rating.partial:before {
position: absolute;
z-index: -1;
}
/*-------------------
Heart
@ -96,19 +111,25 @@
.ui.heart.rating .icon {
width: @heartIconWidth;
height: @heartIconHeight;
background: @heartInactiveBackground;
color: @heartInactiveColor;
text-shadow: @heartInactiveTextShadow !important;
}
/* Active Heart */
.ui.heart.rating .active.icon {
background: @heartActiveBackground !important;
color: @heartActiveColor !important;
text-shadow: @heartActiveShadow;
text-shadow: @heartActiveTextShadow !important;
}
/* Selected Heart */
.ui.heart.rating .icon.selected,
.ui.heart.rating .icon.selected.active {
background: @heartSelectedBackground !important;
color: @heartSelectedColor !important;
text-shadow: @heartSelectedTextShadow !important;
}
@ -116,24 +137,6 @@
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
--------------------*/
@ -145,12 +148,12 @@
/*-------------------
Interacting (Active)
User Interactive
--------------------*/
/* Selected Rating */
.ui.rating.selected .active.icon {
opacity: @interactiveIconOpacity;
opacity: @interactiveActiveIconOpacity;
}
.ui.rating.selected .icon.selected,
.ui.rating .icon.selected {
@ -163,25 +166,25 @@
Variations
*******************************/
.ui.mini.rating .icon {
.ui.mini.rating {
font-size: @mini;
}
.ui.tiny.rating .icon {
.ui.tiny.rating {
font-size: @tiny;
}
.ui.small.rating .icon {
.ui.small.rating {
font-size: @small;
}
.ui.rating .icon {
.ui.rating {
font-size: @medium;
}
.ui.large.rating .icon {
.ui.large.rating {
font-size: @large;
}
.ui.huge.rating .icon {
.ui.huge.rating {
font-size: @huge;
}
.ui.massive.rating .icon {
.ui.massive.rating {
font-size: @massive;
}

631
web/semantic/src/definitions/modules/search.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -29,11 +29,14 @@ $.fn.search = function(parameters) {
$(this)
.each(function() {
var
settings = $.extend(true, {}, $.fn.search.settings, parameters),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.search.settings, parameters)
: $.extend({}, $.fn.search.settings),
className = settings.className,
metadata = settings.metadata,
regExp = settings.regExp,
fields = settings.fields,
selector = settings.selector,
error = settings.error,
namespace = settings.namespace,
@ -53,37 +56,15 @@ $.fn.search = function(parameters) {
module
;
module = {
initialize: function() {
module.verbose('Initializing module');
var
prompt = $prompt[0],
inputEvent = (prompt !== undefined && prompt.oninput !== undefined)
? 'input'
: (prompt !== undefined && prompt.onpropertychange !== undefined)
? 'propertychange'
: 'keyup'
;
if(settings.automatic) {
$prompt
.on(inputEvent + eventNamespace, module.throttle)
.attr('autocomplete', 'off')
;
}
$prompt
.on('focus' + eventNamespace, module.event.focus)
.on('blur' + eventNamespace, module.event.blur)
.on('keydown' + eventNamespace, module.handleKeyboard)
;
$searchButton
.on('click' + eventNamespace, module.query)
;
$results
.on('mousedown' + eventNamespace, module.event.result.mousedown)
.on('mouseup' + eventNamespace, module.event.result.mouseup)
.on('click' + eventNamespace, selector.result, module.event.result.click)
;
module.determine.searchFields();
module.bind.events();
module.set.type();
module.create.results();
module.instantiate();
},
instantiate: function() {
@ -96,35 +77,86 @@ $.fn.search = function(parameters) {
destroy: function() {
module.verbose('Destroying instance');
$module
.off(eventNamespace)
.removeData(moduleNamespace)
;
$prompt
.off(eventNamespace)
;
$searchButton
.off(eventNamespace)
;
$results
.off(eventNamespace)
;
},
bind: {
events: function() {
module.verbose('Binding events to search');
if(settings.automatic) {
$module
.on(module.get.inputEvent() + eventNamespace, selector.prompt, module.event.input)
;
$prompt
.attr('autocomplete', 'off')
;
}
$module
// prompt
.on('focus' + eventNamespace, selector.prompt, module.event.focus)
.on('blur' + eventNamespace, selector.prompt, module.event.blur)
.on('keydown' + eventNamespace, selector.prompt, module.handleKeyboard)
// search button
.on('click' + eventNamespace, selector.searchButton, module.query)
// results
.on('mousedown' + eventNamespace, selector.results, module.event.result.mousedown)
.on('mouseup' + eventNamespace, selector.results, module.event.result.mouseup)
.on('click' + eventNamespace, selector.result, module.event.result.click)
;
}
},
determine: {
searchFields: function() {
// this makes sure $.extend does not add specified search fields to default fields
// this is the only setting which should not extend defaults
if(parameters && parameters.searchFields !== undefined) {
settings.searchFields = parameters.searchFields;
}
}
},
event: {
input: function() {
clearTimeout(module.timer);
module.timer = setTimeout(module.query, settings.searchDelay);
},
focus: function() {
module.set.focus();
clearTimeout(module.timer);
module.throttle();
if( module.has.minimumCharacters() ) {
module.showResults();
module.query();
if( module.can.show() ) {
module.showResults();
}
}
},
blur: function(event) {
var
pageLostFocus = (document.activeElement === this)
pageLostFocus = (document.activeElement === this),
callback = function() {
module.cancel.query();
module.remove.focus();
module.timer = setTimeout(module.hideResults, settings.hideDelay);
}
;
if(!pageLostFocus && !module.resultsClicked) {
module.cancel.query();
module.remove.focus();
module.timer = setTimeout(module.hideResults, settings.hideDelay);
if(pageLostFocus) {
return;
}
if(module.resultsClicked) {
module.debug('Determining if user action caused search to close');
$module
.one('click', selector.results, function(event) {
if( !module.is.animating() && !module.is.hidden() ) {
callback();
}
})
;
}
else {
module.debug('Input blurred without user action, closing results');
callback();
}
},
result: {
@ -143,11 +175,12 @@ $.fn.search = function(parameters) {
href = $link.attr('href') || false,
target = $link.attr('target') || false,
title = $title.html(),
name = ($title.length > 0)
// title is used for result lookup
value = ($title.length > 0)
? $title.text()
: false,
results = module.get.results(),
result = module.get.result(name, results),
result = $result.data(metadata.result) || module.get.result(value, results),
returnedValue
;
if( $.isFunction(settings.onSelect) ) {
@ -157,8 +190,8 @@ $.fn.search = function(parameters) {
}
}
module.hideResults();
if(name) {
module.set.value(name);
if(value) {
module.set.value(value);
}
if(href) {
module.verbose('Opening search link found in result', $link);
@ -193,9 +226,7 @@ $.fn.search = function(parameters) {
// search shortcuts
if(keyCode == keys.escape) {
module.verbose('Escape key pressed, blurring search field');
$prompt
.trigger('blur')
;
module.trigger.blur();
}
if( module.is.visible() ) {
if(keyCode == keys.enter) {
@ -258,9 +289,11 @@ $.fn.search = function(parameters) {
api: function() {
var
apiSettings = {
debug : settings.debug,
on : false,
cache : 'local',
action : 'search',
onFailure : module.error
onError : module.error
},
searchHTML
;
@ -273,12 +306,21 @@ $.fn.search = function(parameters) {
useAPI: function() {
return $.fn.api !== undefined;
},
show: function() {
return module.is.focused() && !module.is.visible() && !module.is.empty();
},
transition: function() {
return settings.transition && $.fn.transition !== undefined && $module.transition('is supported');
}
},
is: {
animating: function() {
return $results.hasClass(className.animating);
},
hidden: function() {
return $results.hasClass(className.hidden);
},
empty: function() {
return ($results.html() === '');
},
@ -290,7 +332,32 @@ $.fn.search = function(parameters) {
}
},
trigger: {
blur: function() {
var
events = document.createEvent('HTMLEvents'),
promptElement = $prompt[0]
;
if(promptElement) {
module.verbose('Triggering native blur event');
events.initEvent('blur', false, false);
promptElement.dispatchEvent(events);
}
}
},
get: {
inputEvent: function() {
var
prompt = $prompt[0],
inputEvent = (prompt !== undefined && prompt.oninput !== undefined)
? 'input'
: (prompt !== undefined && prompt.onpropertychange !== undefined)
? 'propertychange'
: 'keyup'
;
return inputEvent;
},
value: function() {
return $prompt.val();
},
@ -302,26 +369,34 @@ $.fn.search = function(parameters) {
},
result: function(value, results) {
var
result = false
lookupFields = ['title', 'id'],
result = false
;
value = (value !== undefined)
? value
: module.get.value()
;
results = (results !== undefined)
? results
: module.get.results()
;
value = value || module.get.value();
results = results || module.get.results();
if(settings.type === 'category') {
module.debug('Finding result that matches', value);
$.each(results, function(index, category) {
if($.isArray(category.results)) {
result = module.search.object(value, category.results)[0];
if(result && result.length > 0) {
return true;
result = module.search.object(value, category.results, lookupFields)[0];
// don't continue searching if a result is found
if(result) {
return false;
}
}
});
}
else {
module.debug('Finding result in results object', value);
result = module.search.object(value, results)[0];
result = module.search.object(value, results, lookupFields)[0];
}
return result;
return result || false;
},
},
@ -334,8 +409,15 @@ $.fn.search = function(parameters) {
},
value: function(value) {
module.verbose('Setting search input value', value);
$prompt.val(value);
module.query();
$prompt
.val(value)
;
},
type: function(type) {
type = type || settings.type;
if(settings.type == 'category') {
$module.addClass(settings.type);
}
},
buttonPressed: function() {
$searchButton.addClass(className.pressed);
@ -359,55 +441,52 @@ $.fn.search = function(parameters) {
searchTerm = module.get.value(),
cache = module.read.cache(searchTerm)
;
if(cache) {
module.debug('Reading result for ' + searchTerm + ' from cache');
module.save.results(cache.results);
module.addResults(cache.html);
}
else {
module.debug('Querying for ' + searchTerm);
if($.isPlainObject(settings.source) || $.isArray(settings.source)) {
module.search.local(searchTerm);
if( module.has.minimumCharacters() ) {
if(cache) {
module.debug('Reading result from cache', searchTerm);
module.save.results(cache.results);
module.addResults(cache.html);
module.inject.id(cache.results);
}
else if( module.can.useAPI() ) {
if(settings.apiSettings) {
module.debug('Searching with specified API settings', settings.apiSettings);
module.search.remote(searchTerm);
else {
module.debug('Querying for', searchTerm);
if($.isPlainObject(settings.source) || $.isArray(settings.source)) {
module.search.local(searchTerm);
}
else if($.api.settings.api.search !== undefined) {
module.debug('Searching with default search API endpoint');
else if( module.can.useAPI() ) {
module.search.remote(searchTerm);
}
else {
module.error(error.noEndpoint);
module.error(error.source);
}
}
else {
module.error(error.source);
}
settings.onSearchQuery.call(element, searchTerm);
}
else {
module.hideResults();
}
},
search: {
local: function(searchTerm) {
var
searchResults = module.search.object(searchTerm, settings.content),
results = module.search.object(searchTerm, settings.content),
searchHTML
;
module.set.loading();
module.save.results(searchResults);
module.debug('Returned local search results', searchResults);
module.save.results(results);
module.debug('Returned local search results', results);
searchHTML = module.generateResults({
results: searchResults
results: results
});
module.remove.loading();
module.addResults(searchHTML);
module.inject.id(results);
module.write.cache(searchTerm, {
html : searchHTML,
results : searchResults
results : results
});
module.addResults(searchHTML);
},
remote: function(searchTerm) {
var
@ -415,6 +494,9 @@ $.fn.search = function(parameters) {
onSuccess : function(response) {
module.parse.response.call(element, response, searchTerm);
},
onFailure: function() {
module.displayMessage(error.serverError);
},
urlData: {
query: searchTerm
}
@ -431,43 +513,60 @@ $.fn.search = function(parameters) {
.api('query')
;
},
object: function(searchTerm, source) {
object: function(searchTerm, source, searchFields) {
var
results = [],
fullTextResults = [],
searchFields = $.isArray(settings.searchFields)
? settings.searchFields
: [settings.searchFields],
searchExp = searchTerm.replace(regExp.escape, '\\$&'),
searchRegExp = new RegExp(regExp.exact + searchExp, 'i')
results = [],
fuzzyResults = [],
searchExp = searchTerm.toString().replace(regExp.escape, '\\$&'),
matchRegExp = new RegExp(regExp.beginsWith + searchExp, 'i'),
// avoid duplicates when pushing results
addResult = function(array, result) {
var
notResult = ($.inArray(result, results) == -1),
notFuzzyResult = ($.inArray(result, fuzzyResults) == -1)
;
if(notResult && notFuzzyResult) {
array.push(result);
}
}
;
source = source || settings.source;
searchFields = (searchFields !== undefined)
? searchFields
: settings.searchFields
;
source = source || settings.source;
// search fields should be array to loop correctly
if(!$.isArray(searchFields)) {
searchFields = [searchFields];
}
// exit conditions on no source
if(source === undefined) {
// exit conditions if no source
if(source === undefined || source === false) {
module.error(error.source);
return [];
}
// iterate through search fields in array order
// iterate through search fields looking for matches
$.each(searchFields, function(index, field) {
$.each(source, function(label, content) {
var
fieldExists = (typeof content[field] == 'string'),
notAlreadyResult = ($.inArray(content, results) == -1 && $.inArray(content, fullTextResults) == -1)
fieldExists = (typeof content[field] == 'string')
;
if(fieldExists && notAlreadyResult) {
if( content[field].match(searchRegExp) ) {
results.push(content);
if(fieldExists) {
if( content[field].search(matchRegExp) !== -1) {
// content starts with value (first in results)
addResult(results, content);
}
else if(settings.searchFullText && module.fuzzySearch(searchTerm, content[field]) ) {
fullTextResults.push(content);
// content fuzzy matches (last in results)
addResult(fuzzyResults, content);
}
}
});
});
return $.merge(results, fullTextResults);
return $.merge(results, fuzzyResults);
}
},
@ -476,6 +575,9 @@ $.fn.search = function(parameters) {
termLength = term.length,
queryLength = query.length
;
if(typeof query !== 'string') {
return false;
}
query = query.toLowerCase();
term = term.toLowerCase();
if(queryLength > termLength) {
@ -505,28 +607,19 @@ $.fn.search = function(parameters) {
;
module.verbose('Parsing server response', response);
if(response !== undefined) {
if(searchTerm !== undefined && response.results !== undefined) {
if(searchTerm !== undefined && response[fields.results] !== undefined) {
module.addResults(searchHTML);
module.inject.id(response[fields.results]);
module.write.cache(searchTerm, {
html : searchHTML,
results : response.results
results : response[fields.results]
});
module.save.results(response.results);
module.addResults(searchHTML);
module.save.results(response[fields.results]);
}
}
}
},
throttle: function() {
clearTimeout(module.timer);
if(module.has.minimumCharacters()) {
module.timer = setTimeout(module.query, settings.searchDelay);
}
else {
module.hideResults();
}
},
cancel: {
query: function() {
if( module.can.useAPI() ) {
@ -545,6 +638,23 @@ $.fn.search = function(parameters) {
}
},
clear: {
cache: function(value) {
var
cache = $module.data(metadata.cache)
;
if(!value) {
module.debug('Clearing cache', value);
$module.removeData(metadata.cache);
}
else if(value && cache && cache[value]) {
module.debug('Removing value from cache', value);
delete cache[value];
$module.data(metadata.cache, cache);
}
}
},
read: {
cache: function(name) {
var
@ -561,6 +671,94 @@ $.fn.search = function(parameters) {
}
},
create: {
id: function(resultIndex, categoryIndex) {
var
resultID = (resultIndex + 1), // not zero indexed
categoryID = (categoryIndex + 1),
firstCharCode,
letterID,
id
;
if(categoryIndex !== undefined) {
// start char code for "A"
letterID = String.fromCharCode(97 + categoryIndex);
id = letterID + resultID;
module.verbose('Creating category result id', id);
}
else {
id = resultID;
module.verbose('Creating result id', id);
}
return id;
},
results: function() {
if($results.length === 0) {
$results = $('<div />')
.addClass(className.results)
.appendTo($module)
;
}
}
},
inject: {
result: function(result, resultIndex, categoryIndex) {
module.verbose('Injecting result into results');
var
$selectedResult = (categoryIndex !== undefined)
? $results
.children().eq(categoryIndex)
.children(selector.result).eq(resultIndex)
: $results
.children(selector.result).eq(resultIndex)
;
module.verbose('Injecting results metadata', $selectedResult);
$selectedResult
.data(metadata.result, result)
;
},
id: function(results) {
module.debug('Injecting unique ids into results');
var
// since results may be object, we must use counters
categoryIndex = 0,
resultIndex = 0
;
if(settings.type === 'category') {
// iterate through each category result
$.each(results, function(index, category) {
resultIndex = 0;
$.each(category.results, function(index, value) {
var
result = category.results[index]
;
if(result.id === undefined) {
result.id = module.create.id(resultIndex, categoryIndex);
}
module.inject.result(result, resultIndex, categoryIndex);
resultIndex++;
});
categoryIndex++;
});
}
else {
// top level
$.each(results, function(index, value) {
var
result = results[index]
;
if(result.id === undefined) {
result.id = module.create.id(resultIndex);
}
module.inject.result(result, resultIndex);
resultIndex++;
});
}
return results;
}
},
save: {
results: function(results) {
module.verbose('Saving current search results to metadata', results);
@ -595,16 +793,20 @@ $.fn.search = function(parameters) {
$results
.html(html)
;
module.showResults();
if( module.can.show() ) {
module.showResults();
}
},
showResults: function() {
if( !module.is.visible() && module.is.focused() && !module.is.empty() ) {
if(!module.is.visible()) {
if( module.can.transition() ) {
module.debug('Showing results with css animations');
$results
.transition({
animation : settings.transition + ' in',
debug : settings.debug,
verbose : settings.verbose,
duration : settings.duration,
queue : true
})
@ -627,6 +829,8 @@ $.fn.search = function(parameters) {
$results
.transition({
animation : settings.transition + ' out',
debug : settings.debug,
verbose : settings.verbose,
duration : settings.duration,
queue : true
})
@ -647,8 +851,8 @@ $.fn.search = function(parameters) {
module.debug('Generating html from response', response);
var
template = settings.templates[settings.type],
isProperObject = ($.isPlainObject(response.results) && !$.isEmptyObject(response.results)),
isProperArray = ($.isArray(response.results) && response.results.length > 0),
isProperObject = ($.isPlainObject(response[fields.results]) && !$.isEmptyObject(response[fields.results])),
isProperArray = ($.isArray(response[fields.results]) && response[fields.results].length > 0),
html = ''
;
if(isProperObject || isProperArray ) {
@ -659,11 +863,11 @@ $.fn.search = function(parameters) {
}
}
else {
response.results = response.results.slice(0, settings.maxResults);
response[fields.results] = response[fields.results].slice(0, settings.maxResults);
}
}
if($.isFunction(template)) {
html = template(response);
html = template(response, fields);
}
else {
module.error(error.noTemplate, false);
@ -751,7 +955,7 @@ $.fn.search = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -863,51 +1067,76 @@ $.fn.search = function(parameters) {
$.fn.search.settings = {
name : 'Search Module',
name : 'Search',
namespace : 'search',
debug : false,
verbose : true,
verbose : false,
performance : true,
type : 'standard',
minCharacters : 1,
// template to use (specified in settings.templates)
minCharacters : 1,
// minimum characters required to search
// api config
apiSettings : false,
// API config
source : false,
// object to search
searchFields : [
'title',
'description'
],
// fields to search
displayField : '',
// field to display in standard results template
searchFullText : true,
// whether to include fuzzy results in local search
automatic : true,
// whether to add events to prompt automatically
automatic : 'true',
hideDelay : 0,
searchDelay : 100,
maxResults : 7,
cache : true,
// delay before hiding menu after blur
searchDelay : 200,
// delay before searching
maxResults : 7,
// maximum results returned from local
cache : true,
// whether to store lookups in local cache
// transition settings
transition : 'scale',
duration : 300,
duration : 200,
easing : 'easeOutExpo',
// callbacks
onSelect : false,
onResultsAdd : false,
onSearchQuery : function(){},
onSearchQuery : function(query){},
onResults : function(response){},
onResultsOpen : function(){},
onResultsClose : function(){},
className: {
active : 'active',
empty : 'empty',
focus : 'focus',
loading : 'loading',
pressed : 'down'
animating : 'animating',
active : 'active',
empty : 'empty',
focus : 'focus',
hidden : 'hidden',
loading : 'loading',
results : 'results',
pressed : 'down'
},
error : {
@ -916,19 +1145,36 @@ $.fn.search.settings = {
logging : 'Error in debug logging, exiting.',
noEndpoint : 'No search endpoint was specified',
noTemplate : 'A valid template name was not specified.',
serverError : 'There was an issue with querying the server.',
serverError : 'There was an issue querying the server.',
maxResults : 'Results must be an array to use maxResults setting',
method : 'The method you called is not defined.'
},
metadata: {
cache : 'cache',
results : 'results'
results : 'results',
result : 'result'
},
regExp: {
escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
exact : '(?:\s|^)'
escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
beginsWith : '(?:\s|^)'
},
// maps api response attributes to internal representation
fields: {
categories : 'results', // array of categories (category view)
categoryName : 'name', // name of category (category view)
categoryResults : 'results', // array of results (category view)
description : 'description', // result description
image : 'image', // result image
price : 'price', // result price
results : 'results', // array of results (standard)
title : 'title', // result title
url : 'url', // result url
action : 'action', // "view more" object name
actionText : 'text', // "view more" text
actionURL : 'url' // "view more" url
},
selector : {
@ -984,95 +1230,98 @@ $.fn.search.settings = {
}
return html;
},
category: function(response) {
category: function(response, fields) {
var
html = '',
escape = $.fn.search.settings.templates.escape
;
if(response.results !== undefined) {
if(response[fields.categoryResults] !== undefined) {
// each category
$.each(response.results, function(index, category) {
if(category.results !== undefined && category.results.length > 0) {
html += ''
+ '<div class="category">'
+ '<div class="name">' + category.name + '</div>'
;
$.each(response[fields.categoryResults], function(index, category) {
if(category[fields.results] !== undefined && category.results.length > 0) {
html += '<div class="category">';
if(category[fields.categoryName] !== undefined) {
html += '<div class="name">' + category[fields.categoryName] + '</div>';
}
// each item inside category
$.each(category.results, function(index, result) {
html += '<div class="result">';
if(result.url) {
html += '<a href="' + result.url + '"></a>';
if(result[fields.url]) {
html += '<a class="result" href="' + result[fields.url] + '">';
}
if(result.image !== undefined) {
result.image = escape(result.image);
else {
html += '<a class="result">';
}
if(result[fields.image] !== undefined) {
html += ''
+ '<div class="image">'
+ ' <img src="' + result.image + '" alt="">'
+ ' <img src="' + result[fields.image] + '">'
+ '</div>'
;
}
html += '<div class="content">';
if(result.price !== undefined) {
result.price = escape(result.price);
html += '<div class="price">' + result.price + '</div>';
if(result[fields.price] !== undefined) {
html += '<div class="price">' + result[fields.price] + '</div>';
}
if(result.title !== undefined) {
result.title = escape(result.title);
html += '<div class="title">' + result.title + '</div>';
if(result[fields.title] !== undefined) {
html += '<div class="title">' + result[fields.title] + '</div>';
}
if(result.description !== undefined) {
html += '<div class="description">' + result.description + '</div>';
if(result[fields.description] !== undefined) {
html += '<div class="description">' + result[fields.description] + '</div>';
}
html += ''
+ '</div>'
+ '</div>'
;
html += '</a>';
});
html += ''
+ '</div>'
;
}
});
if(response.action) {
if(response[fields.action]) {
html += ''
+ '<a href="' + response.action.url + '" class="action">'
+ response.action.text
+ '<a href="' + response[fields.action][fields.actionURL] + '" class="action">'
+ response[fields.action][fields.actionText]
+ '</a>';
}
return html;
}
return false;
},
standard: function(response) {
standard: function(response, fields) {
var
html = ''
;
if(response.results !== undefined) {
if(response[fields.results] !== undefined) {
// each result
$.each(response.results, function(index, result) {
if(result.url) {
html += '<a class="result" href="' + result.url + '">';
$.each(response[fields.results], function(index, result) {
if(result[fields.url]) {
html += '<a class="result" href="' + result[fields.url] + '">';
}
else {
html += '<a class="result">';
}
if(result.image !== undefined) {
if(result[fields.image] !== undefined) {
html += ''
+ '<div class="image">'
+ ' <img src="' + result.image + '">'
+ ' <img src="' + result[fields.image] + '">'
+ '</div>'
;
}
html += '<div class="content">';
if(result.price !== undefined) {
html += '<div class="price">' + result.price + '</div>';
if(result[fields.price] !== undefined) {
html += '<div class="price">' + result[fields.price] + '</div>';
}
if(result.title !== undefined) {
html += '<div class="title">' + result.title + '</div>';
if(result[fields.title] !== undefined) {
html += '<div class="title">' + result[fields.title] + '</div>';
}
if(result.description !== undefined) {
html += '<div class="description">' + result.description + '</div>';
if(result[fields.description] !== undefined) {
html += '<div class="description">' + result[fields.description] + '</div>';
}
html += ''
+ '</div>'
@ -1080,10 +1329,10 @@ $.fn.search.settings = {
html += '</a>';
});
if(response.action) {
if(response[fields.action]) {
html += ''
+ '<a href="' + response.action.url + '" class="action">'
+ response.action.text
+ '<a href="' + response[fields.action][fields.actionURL] + '" class="action">'
+ response[fields.action][fields.actionText]
+ '</a>';
}
return html;
@ -1093,4 +1342,4 @@ $.fn.search.settings = {
}
};
})( jQuery, window , document );
})( jQuery, window, document );

100
web/semantic/src/definitions/modules/search.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -71,6 +71,7 @@
position: absolute;
top: 100%;
left: 0%;
transform-origin: center top;
background: @resultsBackground;
@ -79,8 +80,15 @@
border-radius: @resultsBorderRadius;
box-shadow: @resultsBoxShadow;
border: @resultsBorder;
z-index: @resultsZIndex;
}
.ui.search > .results > :first-child {
border-radius: @resultsBorderRadius @resultsBorderRadius 0em 0em;
}
.ui.search > .results > :last-child {
border-radius: 0em 0em @resultsBorderRadius @resultsBorderRadius;
}
/*--------------
Result
@ -91,13 +99,13 @@
display: block;
overflow: hidden;
font-size: @resultFontSize;
padding: @resultVerticalPadding @resultHorizontalPadding;
padding: @resultPadding;
color: @resultTextColor;
line-height: @resultLineHeight;
border-bottom: @resultDivider;
}
.ui.search > .results .result:last-child {
border-bottom: @resultLastDivider;
border-bottom: @resultLastDivider !important;
}
/* Image */
@ -124,6 +132,7 @@
}
.ui.search > .results .result .title {
margin: @resultTitleMargin;
font-family: @resultTitleFont;
font-weight: @resultTitleFontWeight;
font-size: @resultTitleFontSize;
@ -174,11 +183,21 @@
States
*******************************/
/*--------------------
Focus
---------------------*/
.ui.search > .prompt:focus {
border-color: @promptFocusBorderColor;
background: @promptFocusBackground;
color: @promptFocusColor;
}
/*--------------------
Loading
---------------------*/
.ui.loading.search .input > .icon:before {
.ui.loading.search .input > i.icon:before {
position: absolute;
content: '';
top: 50%;
@ -191,7 +210,7 @@
border-radius: @circularRadius;
border: @loaderLineWidth solid @loaderFillColor;
}
.ui.loading.search .input > .icon:after {
.ui.loading.search .input > i.icon:after {
position: absolute;
content: '';
top: 50%;
@ -230,10 +249,10 @@
Active
---------------*/
.ui.search > .results .category.active {
.ui.category.search > .results .category.active {
background: @categoryActiveBackground;
}
.ui.search > .results .category.active > .name {
.ui.category.search > .results .category.active > .name {
color: @categoryNameActiveColor;
}
@ -256,7 +275,40 @@
*******************************/
/*--------------
Categories
Selection
---------------*/
.ui.search.selection .prompt {
border-radius: @selectionPromptBorderRadius;
}
/* Remove input */
.ui.search.selection > .icon.input > .remove.icon {
pointer-events: none;
position: absolute;
left: auto;
opacity: 0;
color: @selectionCloseIconColor;
top: @selectionCloseTop;
right: @selectionCloseRight;
transition: @selectionCloseTransition;
}
.ui.search.selection > .icon.input > .active.remove.icon {
cursor: pointer;
opacity: @selectionCloseIconOpacity;
pointer-events: auto;
}
.ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
right: @selectionCloseIconInputRight;
}
.ui.search.selection > .icon.input > .remove.icon:hover {
opacity: @selectionCloseIconHoverOpacity;
color: @selectionCloseIconHoverColor;
}
/*--------------
Category
---------------*/
.ui.category.search .results {
@ -270,10 +322,20 @@
border-bottom: @categoryDivider;
transition: @categoryTransition;
}
/* Last Category */
.ui.category.search > .results .category:last-child {
border-bottom: none;
}
/* First / Last */
.ui.category.search > .results .category:first-child .name + .result {
border-radius: 0em @resultsBorderRadius 0em 0em;
}
.ui.category.search > .results .category:last-child .result:last-child {
border-radius: 0em 0em @resultsBorderRadius 0em;
}
/* Category Result */
.ui.category.search > .results .category .result {
background: @categoryResultBackground;
@ -281,8 +343,9 @@
border-left: @categoryResultLeftBorder;
border-bottom: @categoryResultDivider;
transition: @categoryResultTransition;
padding: @categoryResultPadding;
}
.ui.category.search > .results .category .result:last-child {
.ui.category.search > .results .category:last-child .result:last-child {
border-bottom: @categoryResultLastDivider;
}
@ -329,11 +392,26 @@
Sizes
---------------*/
.ui.mini.search {
font-size: @relativeMini;
}
.ui.small.search {
font-size: @relativeSmall;
}
.ui.search {
font-size: @medium;
font-size: @relativeMedium;
}
.ui.large.search {
font-size: @large;
font-size: @relativeLarge;
}
.ui.big.search {
font-size: @relativeBig;
}
.ui.huge.search {
font-size: @relativeHuge;
}
.ui.massive.search {
font-size: @relativeMassive;
}
.loadUIOverrides();

142
web/semantic/src/definitions/modules/shape.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -37,8 +37,10 @@ $.fn.shape = function(parameters) {
$allModules
.each(function() {
var
moduleSelector = $allModules.selector || '',
settings = $.extend(true, {}, $.fn.shape.settings, parameters),
moduleSelector = $allModules.selector || '',
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.shape.settings, parameters)
: $.extend({}, $.fn.shape.settings),
// internal aliases
namespace = settings.namespace,
@ -100,7 +102,7 @@ $.fn.shape = function(parameters) {
repaint: function() {
module.verbose('Forcing repaint event');
var
shape = $sides.get(0) || document.createElement('div'),
shape = $sides[0] || document.createElement('div'),
fakeAssignment = shape.offsetWidth
;
},
@ -115,7 +117,7 @@ $.fn.shape = function(parameters) {
module.reset();
module.set.active();
};
settings.beforeChange.call($nextSide.get());
settings.beforeChange.call($nextSide[0]);
if(module.get.transitionEvent()) {
module.verbose('Starting CSS animation');
$module
@ -205,13 +207,29 @@ $.fn.shape = function(parameters) {
: duration
;
module.verbose('Setting animation duration', duration);
$sides.add($side)
if(settings.duration || settings.duration === 0) {
$sides.add($side)
.css({
'-webkit-transition-duration': duration,
'-moz-transition-duration': duration,
'-ms-transition-duration': duration,
'-o-transition-duration': duration,
'transition-duration': duration
})
;
}
},
currentStageSize: function() {
var
$activeSide = $module.find('.' + settings.className.active),
width = $activeSide.outerWidth(true),
height = $activeSide.outerHeight(true)
;
$module
.css({
'-webkit-transition-duration': duration,
'-moz-transition-duration': duration,
'-ms-transition-duration': duration,
'-o-transition-duration': duration,
'transition-duration': duration
width: width,
height: height
})
;
},
@ -227,12 +245,13 @@ $.fn.shape = function(parameters) {
: $clone.find(selector.side).first(),
newSize = {}
;
module.set.currentStageSize();
$activeSide.removeClass(className.active);
$nextSide.addClass(className.active);
$clone.insertAfter($module);
newSize = {
width : $nextSide.outerWidth(),
height : $nextSide.outerHeight()
width : $nextSide.outerWidth(true),
height : $nextSide.outerHeight(true)
};
$clone.remove();
$module
@ -260,7 +279,7 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.active)
;
settings.onChange.call($nextSide.get());
settings.onChange.call($nextSide[0]);
module.set.defaultSide();
}
},
@ -371,8 +390,8 @@ $.fn.shape = function(parameters) {
up: function() {
var
translate = {
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
z: -($activeSide.outerHeight() / 2)
y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
z: -($activeSide.outerHeight(true) / 2)
}
;
return {
@ -383,8 +402,8 @@ $.fn.shape = function(parameters) {
down: function() {
var
translate = {
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
z: -($activeSide.outerHeight() / 2)
y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
z: -($activeSide.outerHeight(true) / 2)
}
;
return {
@ -395,8 +414,8 @@ $.fn.shape = function(parameters) {
left: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
z : -($activeSide.outerWidth() / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
z : -($activeSide.outerWidth(true) / 2)
}
;
return {
@ -407,8 +426,8 @@ $.fn.shape = function(parameters) {
right: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
z : -($activeSide.outerWidth() / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
z : -($activeSide.outerWidth(true) / 2)
}
;
return {
@ -419,7 +438,7 @@ $.fn.shape = function(parameters) {
over: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
}
;
return {
@ -430,7 +449,7 @@ $.fn.shape = function(parameters) {
back: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
}
;
return {
@ -471,14 +490,19 @@ $.fn.shape = function(parameters) {
above: function() {
var
box = {
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
depth : {
active : ($nextSide.outerHeight() / 2),
next : ($activeSide.outerHeight() / 2)
active : ($nextSide.outerHeight(true) / 2),
next : ($activeSide.outerHeight(true) / 2)
}
}
;
module.verbose('Setting the initial animation position as above', $nextSide, box);
$sides
.css({
'transform' : 'translateZ(-' + box.depth.active + 'px)'
})
;
$activeSide
.css({
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@ -487,7 +511,6 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.animating)
.css({
'display' : 'block',
'top' : box.origin + 'px',
'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)'
})
@ -497,14 +520,19 @@ $.fn.shape = function(parameters) {
below: function() {
var
box = {
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
depth : {
active : ($nextSide.outerHeight() / 2),
next : ($activeSide.outerHeight() / 2)
active : ($nextSide.outerHeight(true) / 2),
next : ($activeSide.outerHeight(true) / 2)
}
}
;
module.verbose('Setting the initial animation position as below', $nextSide, box);
$sides
.css({
'transform' : 'translateZ(-' + box.depth.active + 'px)'
})
;
$activeSide
.css({
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@ -513,7 +541,6 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.animating)
.css({
'display' : 'block',
'top' : box.origin + 'px',
'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)'
})
@ -522,15 +549,24 @@ $.fn.shape = function(parameters) {
left: function() {
var
height = {
active : $activeSide.outerWidth(true),
next : $nextSide.outerWidth(true)
},
box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( height.active - height.next ) / 2),
depth : {
active : ($nextSide.outerWidth() / 2),
next : ($activeSide.outerWidth() / 2)
active : (height.next / 2),
next : (height.active / 2)
}
}
;
module.verbose('Setting the initial animation position as left', $nextSide, box);
$sides
.css({
'transform' : 'translateZ(-' + box.depth.active + 'px)'
})
;
$activeSide
.css({
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@ -539,7 +575,6 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.animating)
.css({
'display' : 'block',
'left' : box.origin + 'px',
'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)'
})
@ -548,15 +583,24 @@ $.fn.shape = function(parameters) {
right: function() {
var
height = {
active : $activeSide.outerWidth(true),
next : $nextSide.outerWidth(true)
},
box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( height.active - height.next ) / 2),
depth : {
active : ($nextSide.outerWidth() / 2),
next : ($activeSide.outerWidth() / 2)
active : (height.next / 2),
next : (height.active / 2)
}
}
;
module.verbose('Setting the initial animation position as left', $nextSide, box);
$sides
.css({
'transform' : 'translateZ(-' + box.depth.active + 'px)'
})
;
$activeSide
.css({
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@ -565,7 +609,6 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.animating)
.css({
'display' : 'block',
'left' : box.origin + 'px',
'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)'
})
@ -574,11 +617,15 @@ $.fn.shape = function(parameters) {
behind: function() {
var
height = {
active : $activeSide.outerWidth(true),
next : $nextSide.outerWidth(true)
},
box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( height.active - height.next ) / 2),
depth : {
active : ($nextSide.outerWidth() / 2),
next : ($activeSide.outerWidth() / 2)
active : (height.next / 2),
next : (height.active / 2)
}
}
;
@ -591,7 +638,6 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.animating)
.css({
'display' : 'block',
'left' : box.origin + 'px',
'transform' : 'rotateY(-180deg)'
})
@ -667,7 +713,7 @@ $.fn.shape = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -786,7 +832,7 @@ $.fn.shape.settings = {
debug : false,
// verbose debug output
verbose : true,
verbose : false,
// performance data output
performance: true,
@ -802,7 +848,7 @@ $.fn.shape.settings = {
allowRepeats: false,
// animation duration
duration : 700,
duration : false,
// possible errors
error: {
@ -827,4 +873,4 @@ $.fn.shape.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

11
web/semantic/src/definitions/modules/shape.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -26,8 +26,10 @@
.ui.shape {
position: relative;
vertical-align: top;
display: @display;
perspective: @perspective;
transition: @transition;
}
.ui.shape .sides {
@ -39,7 +41,6 @@
width: 100%;
margin: @sideMargin !important;
backface-visibility: @backfaceVisibility;
}
@ -47,7 +48,7 @@
display: none;
}
.ui.shape .side > * {
.ui.shape .side * {
backface-visibility: visible !important;
}
@ -117,6 +118,7 @@
position: absolute;
top: 0px;
left: 0px;
display: block;
z-index: @animatingZIndex;
}
.ui.shape .hidden.side {
@ -128,9 +130,6 @@
CSS
---------------*/
.ui.shape.animating {
transition: @transition;
}
.ui.shape.animating .sides {
position: absolute;
}

235
web/semantic/src/definitions/modules/sidebar.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -83,12 +83,6 @@ $.fn.sidebar = function(parameters) {
transitionEvent = module.get.transitionEvent();
// cache on initialize
if( ( settings.useLegacy == 'auto' && module.is.legacy() ) || settings.useLegacy === true) {
settings.transition = 'overlay';
settings.useLegacy = true;
}
if(module.is.ios()) {
module.set.ios();
}
@ -101,6 +95,10 @@ $.fn.sidebar = function(parameters) {
module.setup.layout();
}
requestAnimationFrame(function() {
module.setup.cache();
});
module.instantiate();
},
@ -122,11 +120,13 @@ $.fn.sidebar = function(parameters) {
destroy: function() {
module.verbose('Destroying previous module for', $module);
module.remove.direction();
$module
.off(eventNamespace)
.removeData(moduleNamespace)
;
if(module.is.ios()) {
module.remove.ios();
}
// bound by uuid
$context.off(elementNamespace);
$window.off(elementNamespace);
@ -171,7 +171,7 @@ $.fn.sidebar = function(parameters) {
module.verbose('Adding clickaway events to context', $context);
if(settings.closable) {
$context
.on('click' + elementNamespace, module.event.clickaway)
.on('click' + elementNamespace, module.event.clickaway)
.on('touchend' + elementNamespace, module.event.clickaway)
;
}
@ -206,10 +206,11 @@ $.fn.sidebar = function(parameters) {
},
add: {
bodyCSS: function() {
inlineCSS: function() {
var
width = $module.outerWidth(),
height = $module.outerHeight(),
width = module.cache.width || $module.outerWidth(),
height = module.cache.height || $module.outerHeight(),
isRTL = module.is.rtl(),
direction = module.get.direction(),
distance = {
left : width,
@ -219,13 +220,14 @@ $.fn.sidebar = function(parameters) {
},
style
;
if( module.is.rtl() ){
if(isRTL){
module.verbose('RTL detected, flipping widths');
distance.left = -width;
distance.right = width;
}
style = '<style title="' + namespace + '">';
style = '<style>';
if(direction === 'left' || direction === 'right') {
module.debug('Adding CSS rules for animation distance', width);
@ -277,8 +279,9 @@ $.fn.sidebar = function(parameters) {
;
}
style += '</style>';
$head.append(style);
$style = $('style[title=' + namespace + ']');
$style = $(style)
.appendTo($head)
;
module.debug('Adding sizing css to head', $style);
}
},
@ -289,6 +292,7 @@ $.fn.sidebar = function(parameters) {
$sidebars = $context.children(selector.sidebar);
$pusher = $context.children(selector.pusher);
$fixed = $context.children(selector.fixed);
module.clear.cache();
},
refreshSidebars: function() {
@ -298,13 +302,20 @@ $.fn.sidebar = function(parameters) {
repaint: function() {
module.verbose('Forcing repaint event');
element.style.display='none';
element.offsetHeight;
element.style.display = 'none';
var ignored = element.offsetHeight;
element.scrollTop = element.scrollTop;
element.style.display='';
element.style.display = '';
},
setup: {
cache: function() {
module.cache = {
width : $module.outerWidth(),
height : $module.outerHeight(),
rtl : ($module.css('direction') == 'rtl')
};
},
layout: function() {
if( $context.children(selector.pusher).length === 0 ) {
module.debug('Adding wrapper element for sidebar');
@ -324,6 +335,7 @@ $.fn.sidebar = function(parameters) {
$module.detach().prependTo($context);
module.refresh();
}
module.clear.cache();
module.set.pushable();
module.set.direction();
}
@ -349,11 +361,6 @@ $.fn.sidebar = function(parameters) {
},
show: function(callback) {
var
animateMethod = (settings.useLegacy === true)
? module.legacyPushPage
: module.pushPage
;
callback = $.isFunction(callback)
? callback
: function(){}
@ -381,7 +388,7 @@ $.fn.sidebar = function(parameters) {
settings.transition = 'overlay';
}
}
animateMethod(function() {
module.pushPage(function() {
callback.call(element);
settings.onShow.call(element);
});
@ -394,11 +401,6 @@ $.fn.sidebar = function(parameters) {
},
hide: function(callback) {
var
animateMethod = (settings.useLegacy === true)
? module.legacyPullPage
: module.pullPage
;
callback = $.isFunction(callback)
? callback
: function(){}
@ -406,7 +408,7 @@ $.fn.sidebar = function(parameters) {
if(module.is.visible() || module.is.animating()) {
module.debug('Hiding sidebar', callback);
module.refreshSidebars();
animateMethod(function() {
module.pullPage(function() {
callback.call(element);
settings.onHidden.call(element);
});
@ -455,12 +457,11 @@ $.fn.sidebar = function(parameters) {
pushPage: function(callback) {
var
transition = module.get.transition(),
$transition = (transition == 'safe')
? $context
: (transition === 'overlay' || module.othersActive())
? $module
: $pusher,
$transition = (transition === 'overlay' || module.othersActive())
? $module
: $pusher,
animate,
dim,
transitionEnd
;
callback = $.isFunction(callback)
@ -474,14 +475,12 @@ $.fn.sidebar = function(parameters) {
module.repaint();
animate = function() {
module.bind.clickaway();
module.add.bodyCSS();
module.add.inlineCSS();
module.set.animating();
module.set.visible();
if(!module.othersVisible()) {
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
}
};
dim = function() {
module.set.dimmed();
};
transitionEnd = function(event) {
if( event.target == $transition[0] ) {
@ -494,16 +493,17 @@ $.fn.sidebar = function(parameters) {
$transition.off(transitionEvent + elementNamespace);
$transition.on(transitionEvent + elementNamespace, transitionEnd);
requestAnimationFrame(animate);
if(settings.dimPage && !module.othersVisible()) {
requestAnimationFrame(dim);
}
},
pullPage: function(callback) {
var
transition = module.get.transition(),
$transition = (transition == 'safe')
? $context
: (transition == 'overlay' || module.othersActive())
? $module
: $pusher,
$transition = (transition == 'overlay' || module.othersActive())
? $module
: $pusher,
animate,
transitionEnd
;
@ -513,11 +513,11 @@ $.fn.sidebar = function(parameters) {
;
module.verbose('Removing context push state', module.get.direction());
module.set.transition(transition);
module.unbind.clickaway();
module.unbind.scrollLock();
animate = function() {
module.set.transition(transition);
module.set.animating();
module.remove.visible();
if(settings.dimPage && !module.othersVisible()) {
@ -529,7 +529,7 @@ $.fn.sidebar = function(parameters) {
$transition.off(transitionEvent + elementNamespace, transitionEnd);
module.remove.animating();
module.remove.transition();
module.remove.bodyCSS();
module.remove.inlineCSS();
if(transition == 'scale down' || (settings.returnScroll && module.is.mobile()) ) {
module.scrollBack();
}
@ -541,62 +541,6 @@ $.fn.sidebar = function(parameters) {
requestAnimationFrame(animate);
},
legacyPushPage: function(callback) {
var
distance = $module.width(),
direction = module.get.direction(),
properties = {}
;
distance = distance || $module.width();
callback = $.isFunction(callback)
? callback
: function(){}
;
properties[direction] = distance;
module.debug('Using javascript to push context', properties);
module.set.visible();
module.set.transition();
module.set.animating();
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
$context
.css('position', 'relative')
.animate(properties, settings.duration, settings.easing, function() {
module.remove.animating();
module.bind.clickaway();
callback.call(element);
})
;
},
legacyPullPage: function(callback) {
var
distance = 0,
direction = module.get.direction(),
properties = {}
;
distance = distance || $module.width();
callback = $.isFunction(callback)
? callback
: function(){}
;
properties[direction] = '0px';
module.debug('Using javascript to pull context', properties);
module.unbind.clickaway();
module.set.animating();
module.remove.visible();
if(settings.dimPage && !module.othersActive()) {
$pusher.removeClass(className.dimmed);
}
$context
.css('position', 'relative')
.animate(properties, settings.duration, settings.easing, function() {
module.remove.animating();
callback.call(element);
})
;
},
scrollToTop: function() {
module.verbose('Scrolling to top of page to avoid animation issues');
currentScroll = $(window).scrollTop();
@ -609,8 +553,16 @@ $.fn.sidebar = function(parameters) {
window.scrollTo(0, currentScroll);
},
clear: {
cache: function() {
module.verbose('Clearing cached dimensions');
module.cache = {};
}
},
set: {
// html
// ios only (scroll on html not document). This prevent auto-resize canvas/scroll in ios
ios: function() {
$html.addClass(className.ios);
},
@ -623,6 +575,11 @@ $.fn.sidebar = function(parameters) {
$context.addClass(className.pushable);
},
// pusher
dimmed: function() {
$pusher.addClass(className.dimmed);
},
// sidebar
active: function() {
$module.addClass(className.active);
@ -647,13 +604,18 @@ $.fn.sidebar = function(parameters) {
},
remove: {
bodyCSS: function() {
module.debug('Removing body css styles', $style);
inlineCSS: function() {
module.debug('Removing inline css styles', $style);
if($style && $style.length > 0) {
$style.remove();
}
},
// ios scroll on html not document
ios: function() {
$html.removeClass(className.ios);
},
// context
pushed: function() {
$context.removeClass(className.pushed);
@ -743,36 +705,13 @@ $.fn.sidebar = function(parameters) {
return (isIE11 || isIE);
},
legacy: function() {
var
element = document.createElement('div'),
transforms = {
'webkitTransform' :'-webkit-transform',
'OTransform' :'-o-transform',
'msTransform' :'-ms-transform',
'MozTransform' :'-moz-transform',
'transform' :'transform'
},
has3D
;
// Add it to the body to get the computed style.
document.body.insertBefore(element, null);
for (var transform in transforms) {
if (element.style[transform] !== undefined) {
element.style[transform] = "translate3d(1px,1px,1px)";
has3D = window.getComputedStyle(element).getPropertyValue(transforms[transform]);
}
}
document.body.removeChild(element);
return !(has3D !== undefined && has3D.length > 0 && has3D !== 'none');
},
ios: function() {
var
userAgent = navigator.userAgent,
isIOS = userAgent.match(regExp.ios)
userAgent = navigator.userAgent,
isIOS = userAgent.match(regExp.ios),
isMobileChrome = userAgent.match(regExp.mobileChrome)
;
if(isIOS) {
if(isIOS && !isMobileChrome) {
module.verbose('Browser was found to be iOS', userAgent);
return true;
}
@ -814,7 +753,10 @@ $.fn.sidebar = function(parameters) {
return $context.hasClass(className.animating);
},
rtl: function () {
return $module.css('direction') == 'rtl';
if(module.cache.rtl === undefined) {
module.cache.rtl = ($module.css('direction') == 'rtl');
}
return module.cache.rtl;
}
},
@ -887,7 +829,7 @@ $.fn.sidebar = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -1001,7 +943,7 @@ $.fn.sidebar.settings = {
namespace : 'sidebar',
debug : false,
verbose : true,
verbose : false,
performance : true,
transition : 'auto',
@ -1030,9 +972,7 @@ $.fn.sidebar.settings = {
returnScroll : false,
delaySetup : false,
useLegacy : 'auto',
duration : 500,
easing : 'easeInOutQuint',
onChange : function(){},
onShow : function(){},
@ -1063,8 +1003,9 @@ $.fn.sidebar.settings = {
},
regExp: {
ios : /(iPad|iPhone|iPod)/g,
mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
ios : /(iPad|iPhone|iPod)/g,
mobileChrome : /(CriOS)/g,
mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
},
error : {
@ -1077,13 +1018,5 @@ $.fn.sidebar.settings = {
};
// Adds easing
$.extend( $.easing, {
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
});
})( jQuery, window , document );
})( jQuery, window, document );

39
web/semantic/src/definitions/modules/sidebar.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -38,6 +38,7 @@
-webkit-overflow-scrolling: touch;
height: 100% !important;
max-height: 100%;
border-radius: 0em !important;
margin: 0em !important;
overflow-y: auto !important;
@ -47,7 +48,6 @@
/* GPU Layers for Child Elements */
.ui.sidebar > * {
backface-visibility: hidden;
transform: rotateZ(0deg);
}
@ -70,7 +70,6 @@
.ui.bottom.sidebar {
width: 100% !important;
height: auto !important;
overflow-y: visible !important;
}
.ui.top.sidebar {
top: 0px !important;
@ -140,6 +139,7 @@ body.pushable > .pusher {
background: @pageBackground;
}
/* Pusher should inherit background from context */
.pushable > .pusher {
background: inherit;
}
@ -154,8 +154,6 @@ body.pushable > .pusher {
right: 0px;
content: '';
background-color: @dimmerColor;
width: 0px;
height: 0px;
overflow: hidden;
opacity: 0;
transition: @dimmerTransition;
@ -251,6 +249,11 @@ html.ios {
-webkit-overflow-scrolling: touch;
}
html.ios,
html.ios body {
height: initial !important;
}
/*******************************
Variations
@ -261,14 +264,14 @@ html.ios {
---------------*/
/* 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[class*="very thin"].left.sidebar,
.ui[class*="very thin"].right.sidebar {
width: @veryThinWidth;
}
.ui.left.sidebar,
.ui.right.sidebar {
width: @width;
@ -283,14 +286,14 @@ html.ios {
}
/* 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[class*="very thin"].left.sidebar ~ .fixed,
.ui.visible[class*="very thin"].left.sidebar ~ .pusher {
transform: translate3d(@veryThinWidth, 0, 0);
}
.ui.visible.wide.left.sidebar ~ .fixed,
.ui.visible.wide.left.sidebar ~ .pusher {
transform: translate3d(@wideWidth, 0, 0);
@ -301,14 +304,14 @@ html.ios {
}
/* 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[class*="very thin"].right.sidebar ~ .fixed,
.ui.visible[class*="very thin"].right.sidebar ~ .pusher {
transform: translate3d(-@veryThinWidth, 0, 0);
}
.ui.visible.wide.right.sidebar ~ .fixed,
.ui.visible.wide.right.sidebar ~ .pusher {
transform: translate3d(-@wideWidth, 0, 0);
@ -536,7 +539,7 @@ html.ios {
display: block !important;
width: 100%;
height: 100%;
overflow: hidden;
overflow: hidden !important;
}
/* End */

315
web/semantic/src/definitions/modules/sticky.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -43,8 +43,8 @@ $.fn.sticky = function(parameters) {
$module = $(this),
$window = $(window),
$container = $module.offsetParent(),
$scroll = $(settings.scrollContext),
$container,
$context,
selector = $module.selector || '',
@ -65,6 +65,7 @@ $.fn.sticky = function(parameters) {
initialize: function() {
module.determineContainer();
module.determineContext();
module.verbose('Initializing sticky', settings, $container);
@ -87,13 +88,18 @@ $.fn.sticky = function(parameters) {
},
destroy: function() {
module.verbose('Destroying previous module');
module.verbose('Destroying previous instance');
module.reset();
if(observer) {
observer.disconnect();
}
$window.off('resize' + eventNamespace, module.event.resize);
$scroll.off('scroll' + eventNamespace, module.event.scroll);
$window
.off('load' + eventNamespace, module.event.load)
.off('resize' + eventNamespace, module.event.resize)
;
$scroll
.off('scrollchange' + eventNamespace, module.event.scrollchange)
;
$module.removeData(moduleNamespace);
},
@ -105,9 +111,9 @@ $.fn.sticky = function(parameters) {
observer = new MutationObserver(function(mutations) {
clearTimeout(module.timer);
module.timer = setTimeout(function() {
module.verbose('DOM tree modified, updating sticky menu');
module.verbose('DOM tree modified, updating sticky menu', mutations);
module.refresh();
}, 20);
}, 100);
});
observer.observe(element, {
childList : true,
@ -121,6 +127,10 @@ $.fn.sticky = function(parameters) {
}
},
determineContainer: function() {
$container = $module.offsetParent();
},
determineContext: function() {
if(settings.context) {
$context = $(settings.context);
@ -147,30 +157,46 @@ $.fn.sticky = function(parameters) {
bind: {
events: function() {
$window.on('resize' + eventNamespace, module.event.resize);
$scroll.on('scroll' + eventNamespace, module.event.scroll);
$window
.on('load' + eventNamespace, module.event.load)
.on('resize' + eventNamespace, module.event.resize)
;
// pub/sub pattern
$scroll
.off('scroll' + eventNamespace)
.on('scroll' + eventNamespace, module.event.scroll)
.on('scrollchange' + eventNamespace, module.event.scrollchange)
;
}
},
event: {
load: function() {
module.verbose('Page contents finished loading');
requestAnimationFrame(module.refresh);
},
resize: function() {
requestAnimationFrame(function() {
module.refresh();
module.stick();
});
module.verbose('Window resized');
requestAnimationFrame(module.refresh);
},
scroll: function() {
requestAnimationFrame(function() {
module.stick();
settings.onScroll.call(element);
$scroll.triggerHandler('scrollchange' + eventNamespace, $scroll.scrollTop() );
});
},
scrollchange: function(event, scrollPosition) {
module.stick(scrollPosition);
settings.onScroll.call(element);
}
},
refresh: function(hardRefresh) {
module.reset();
if(!settings.context) {
module.determineContext();
}
if(hardRefresh) {
$container = $module.offsetParent();
module.determineContainer();
}
module.save.positions();
module.stick();
@ -181,7 +207,7 @@ $.fn.sticky = function(parameters) {
sticky: function() {
var
$element = $('<div/>'),
element = $element.get()
element = $element[0]
;
$element.addClass(className.supported);
return($element.css('position').match('sticky'));
@ -189,13 +215,16 @@ $.fn.sticky = function(parameters) {
},
save: {
scroll: function(scroll) {
lastScroll: function(scroll) {
module.lastScroll = scroll;
},
elementScroll: function(scroll) {
module.elementScroll = scroll;
},
positions: function() {
var
window = {
height: $window.height()
scrollContext = {
height : $scroll.height()
},
element = {
margin: {
@ -207,15 +236,28 @@ $.fn.sticky = function(parameters) {
height : $module.outerHeight()
},
context = {
offset : $context.offset(),
height : $context.outerHeight(),
bottomPadding : parseInt($context.css('padding-bottom'), 10)
offset : $context.offset(),
height : $context.outerHeight()
},
container = {
height: $container.outerHeight()
}
;
if( !module.is.standardScroll() ) {
module.debug('Non-standard scroll. Removing scroll offset from element offset');
scrollContext.top = $scroll.scrollTop();
scrollContext.left = $scroll.scrollLeft();
element.offset.top += scrollContext.top;
context.offset.top += scrollContext.top;
element.offset.left += scrollContext.left;
context.offset.left += scrollContext.left;
}
module.cache = {
fits : ( element.height < window.height ),
window: {
height: window.height
fits : ( element.height < scrollContext.height ),
scrollContext : {
height : scrollContext.height
},
element: {
margin : element.margin,
@ -228,8 +270,7 @@ $.fn.sticky = function(parameters) {
context: {
top : context.offset.top,
height : context.height,
bottomPadding : context.bottomPadding,
bottom : context.offset.top + context.height - context.bottomPadding
bottom : context.offset.top + context.height
}
};
module.set.containerSize();
@ -263,26 +304,29 @@ $.fn.sticky = function(parameters) {
;
},
currentElementScroll: function() {
if(module.elementScroll) {
return module.elementScroll;
}
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,
scrollContext = module.cache.scrollContext,
delta = module.get.scrollChange(scroll),
maxScroll = (element.height - window.height + settings.offset),
currentScroll = module.get.currentElementScroll(),
possibleScroll = (currentScroll + delta),
elementScroll
maxScroll = (element.height - scrollContext.height + settings.offset),
elementScroll = module.get.currentElementScroll(),
possibleScroll = (elementScroll + delta)
;
if(module.cache.fits || possibleScroll < 0) {
elementScroll = 0;
}
else if (possibleScroll > maxScroll ) {
else if(possibleScroll > maxScroll ) {
elementScroll = maxScroll;
}
else {
@ -293,6 +337,12 @@ $.fn.sticky = function(parameters) {
},
remove: {
lastScroll: function() {
delete module.lastScroll;
},
elementScroll: function(scroll) {
delete module.elementScroll;
},
offset: function() {
$module.css('margin-top', '');
}
@ -301,7 +351,9 @@ $.fn.sticky = function(parameters) {
set: {
offset: function() {
module.verbose('Setting offset on element', settings.offset);
$module.css('margin-top', settings.offset);
$module
.css('margin-top', settings.offset)
;
},
containerSize: function() {
var
@ -310,19 +362,30 @@ $.fn.sticky = function(parameters) {
if(tagName === 'HTML' || tagName == 'body') {
// this can trigger for too many reasons
//module.error(error.container, tagName, $module);
$container = $module.offsetParent();
module.determineContainer();
}
else {
module.debug('Settings container size', module.cache.context.height);
if( Math.abs($container.height() - module.cache.context.height) > 5) {
if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) {
module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
$container.css({
height: module.cache.context.height
});
}
}
},
minimumSize: function() {
var
element = module.cache.element
;
$container
.css('min-height', element.height)
;
},
scroll: function(scroll) {
module.debug('Setting scroll on element', scroll);
if(module.elementScroll == scroll) {
return;
}
if( module.is.top() ) {
$module
.css('bottom', '')
@ -338,17 +401,16 @@ $.fn.sticky = function(parameters) {
},
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
})
;
element.style.setProperty('width', module.cache.element.width + 'px', 'important');
element.style.setProperty('height', module.cache.element.height + 'px', 'important');
}
}
},
is: {
standardScroll: function() {
return ($scroll[0] == window);
},
top: function() {
return $module.hasClass(className.top);
},
@ -369,59 +431,67 @@ $.fn.sticky = function(parameters) {
}
},
stick: function() {
stick: function(scroll) {
var
cachedPosition = scroll || $scroll.scrollTop(),
cache = module.cache,
fits = cache.fits,
element = cache.element,
window = cache.window,
scrollContext = cache.scrollContext,
context = cache.context,
offset = (module.is.bottom() && settings.pushing)
? settings.bottomOffset
: settings.offset,
scroll = {
top : $scroll.scrollTop() + offset,
bottom : $scroll.scrollTop() + offset + window.height
top : cachedPosition + offset,
bottom : cachedPosition + offset + scrollContext.height
},
direction = module.get.direction(scroll.top),
elementScroll = module.get.elementScroll(scroll.top),
elementScroll = (fits)
? 0
: 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.debug('Initial element position is bottom of container');
module.bindBottom();
}
else if(scroll.top >= element.top) {
module.debug('Element passed, fixing element to page');
module.fixTop();
else if(scroll.top > element.top) {
if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
module.debug('Initial element position is bottom of container');
module.bindBottom();
}
else {
module.debug('Initial element position is fixed');
module.fixTop();
}
}
}
else if( module.is.fixed() ) {
// currently fixed top
if( module.is.top() ) {
if( scroll.top < element.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 ) {
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);
module.save.lastScroll(scroll.top);
module.save.elementScroll(elementScroll);
}
}
@ -429,33 +499,41 @@ $.fn.sticky = function(parameters) {
else if(module.is.bottom() ) {
// top edge
if( (scroll.bottom - element.height) < element.top) {
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) {
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);
module.save.lastScroll(scroll.top);
module.save.elementScroll(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();
}
if( scroll.top <= element.top ) {
module.debug('Jumped from bottom fixed to top fixed, most likely used home/end button');
module.setInitialPosition();
}
else {
if(module.is.bound() && (scroll.top < context.bottom - element.height) ) {
module.debug('Fixing bottom attached element to top of browser.');
module.fixTop();
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();
}
}
}
}
@ -466,9 +544,11 @@ $.fn.sticky = function(parameters) {
module.debug('Binding element to top of parent container');
module.remove.offset();
$module
.css('left' , '')
.css('top' , '')
.css('margin-bottom' , '')
.css({
left : '',
top : '',
marginBottom : ''
})
.removeClass(className.fixed)
.removeClass(className.bottom)
.addClass(className.bound)
@ -481,9 +561,10 @@ $.fn.sticky = function(parameters) {
module.debug('Binding element to bottom of parent container');
module.remove.offset();
$module
.css('left' , '')
.css('top' , '')
.css('margin-bottom' , module.cache.context.bottomPadding)
.css({
left : '',
top : ''
})
.removeClass(className.fixed)
.removeClass(className.top)
.addClass(className.bound)
@ -494,6 +575,7 @@ $.fn.sticky = function(parameters) {
},
setInitialPosition: function() {
module.debug('Returning to initial position');
module.unfix();
module.unbind();
},
@ -501,10 +583,14 @@ $.fn.sticky = function(parameters) {
fixTop: function() {
module.debug('Fixing element to top of page');
module.set.minimumSize();
module.set.offset();
$module
.css('left', module.cache.element.left)
.css('bottom' , '')
.css({
left : module.cache.element.left,
bottom : '',
marginBottom : ''
})
.removeClass(className.bound)
.removeClass(className.bottom)
.addClass(className.fixed)
@ -515,10 +601,14 @@ $.fn.sticky = function(parameters) {
fixBottom: function() {
module.debug('Sticking element to bottom of page');
module.set.minimumSize();
module.set.offset();
$module
.css('left', module.cache.element.left)
.css('bottom' , '')
.css({
left : module.cache.element.left,
bottom : '',
marginBottom : ''
})
.removeClass(className.bound)
.removeClass(className.top)
.addClass(className.fixed)
@ -528,24 +618,28 @@ $.fn.sticky = function(parameters) {
},
unbind: function() {
module.debug('Removing absolute position on element');
module.remove.offset();
$module
.removeClass(className.bound)
.removeClass(className.top)
.removeClass(className.bottom)
;
if( module.is.bound() ) {
module.debug('Removing container bound 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);
if( module.is.fixed() ) {
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() {
@ -553,13 +647,13 @@ $.fn.sticky = function(parameters) {
module.unbind();
module.unfix();
module.resetCSS();
module.remove.offset();
module.remove.lastScroll();
},
resetCSS: function() {
$module
.css({
top : '',
bottom : '',
width : '',
height : ''
})
@ -752,23 +846,44 @@ $.fn.sticky.settings = {
namespace : 'sticky',
debug : false,
verbose : false,
performance : false,
verbose : true,
performance : true,
// whether to stick in the opposite direction on scroll up
pushing : false,
context : false,
// Context to watch scroll events
scrollContext : window,
// Offset to adjust scroll
offset : 0,
// Offset to adjust scroll when attached to bottom of screen
bottomOffset : 0,
observeChanges : true,
jitter : 5, // will only set container height if difference between context and container is larger than this number
// Whether to automatically observe changes with Mutation Observers
observeChanges : false,
// Called when position is recalculated
onReposition : function(){},
// Called on each scroll
onScroll : function(){},
// Called when element is stuck to viewport
onStick : function(){},
// Called when element is unstuck from viewport
onUnstick : function(){},
// Called when element reaches top of context
onTop : function(){},
// Called when element reaches bottom of context
onBottom : function(){},
error : {
@ -789,4 +904,4 @@ $.fn.sticky.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

2
web/semantic/src/definitions/modules/sticky.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*

408
web/semantic/src/definitions/modules/tab.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -21,10 +21,6 @@ $.fn.tab = function(parameters) {
? $(window)
: $(this),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.tab.settings, parameters)
: $.extend({}, $.fn.tab.settings),
moduleSelector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
@ -33,7 +29,7 @@ $.fn.tab = function(parameters) {
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
module,
initializedHistory = false,
returnedValue
;
@ -41,117 +37,58 @@ $.fn.tab = function(parameters) {
.each(function() {
var
className = settings.className,
metadata = settings.metadata,
selector = settings.selector,
error = settings.error,
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.tab.settings, parameters)
: $.extend({}, $.fn.tab.settings),
eventNamespace = '.' + settings.namespace,
moduleNamespace = 'module-' + settings.namespace,
className = settings.className,
metadata = settings.metadata,
selector = settings.selector,
error = settings.error,
$module = $(this),
cache = {},
firstLoad = true,
recursionDepth = 0,
eventNamespace = '.' + settings.namespace,
moduleNamespace = 'module-' + settings.namespace,
$module = $(this),
$context,
$tabs,
cache = {},
firstLoad = true,
recursionDepth = 0,
element = this,
instance = $module.data(moduleNamespace),
activeTabPath,
parameterArray,
historyEvent,
module,
historyEvent
element = this,
instance = $module.data(moduleNamespace)
;
module = {
initialize: function() {
module.debug('Initializing tab menu item', $module);
module.fix.callbacks();
module.determineTabs();
module.debug('Determining tabs', settings.context, $tabs);
module.debug('Determining tabs', settings.context, $tabs);
// set up automatic routing
if(settings.auto) {
module.set.auto();
}
module.bind.events();
// 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)
;
if(settings.history && !initializedHistory) {
module.initializeHistory();
initializedHistory = true;
}
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;
@ -168,6 +105,97 @@ $.fn.tab = function(parameters) {
;
},
bind: {
events: function() {
// if using $.tab don't add events
if( !$.isWindow( element ) ) {
module.debug('Attaching tab activation events to element', $module);
$module
.on('click' + eventNamespace, module.event.click)
;
}
}
},
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 as 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);
}
},
fix: {
callbacks: function() {
if( $.isPlainObject(parameters) && (parameters.onTabLoad || parameters.onTabInit) ) {
if(parameters.onTabLoad) {
parameters.onLoad = parameters.onTabLoad;
delete parameters.onTabLoad;
module.error(error.legacyLoad, parameters.onLoad);
}
if(parameters.onTabInit) {
parameters.onFirstLoad = parameters.onTabInit;
delete parameters.onTabInit;
module.error(error.legacyInit, parameters.onFirstLoad);
}
settings = $.extend(true, {}, $.fn.tab.settings, parameters);
}
}
},
initializeHistory: function() {
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)
;
}
},
event: {
click: function(event) {
var
@ -251,6 +279,23 @@ $.fn.tab = function(parameters) {
};
}
},
loading: function(tabPath) {
var
$tab = module.get.tabElement(tabPath),
isLoading = $tab.hasClass(className.loading)
;
if(!isLoading) {
module.verbose('Setting loading state for', $tab);
$tab
.addClass(className.loading)
.siblings($tabs)
.removeClass(className.active + ' ' + className.loading)
;
if($tab.length > 0) {
settings.onRequest.call($tab[0], tabPath);
}
}
},
state: function(state) {
$.address.value(state);
}
@ -261,7 +306,7 @@ $.fn.tab = function(parameters) {
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
// only add default path if not remote content
pathArray = (remoteContent && !shouldIgnoreLoad)
? module.utilities.pathToArray(tabPath)
: module.get.defaultPathArray(tabPath)
@ -283,7 +328,6 @@ $.fn.tab = function(parameters) {
;
module.verbose('Looking for tab', tab);
if(isTab) {
module.verbose('Tab was found', tab);
// scope up
activeTabPath = currentPath;
@ -303,15 +347,15 @@ $.fn.tab = function(parameters) {
if(isLastTab && remoteContent) {
if(!shouldIgnoreLoad) {
module.activate.navigation(currentPath);
module.content.fetch(currentPath, tabPath);
module.fetch.content(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);
settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent);
}
return false;
}
@ -321,25 +365,32 @@ $.fn.tab = function(parameters) {
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.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
}
settings.onTabLoad.call($tab, currentPath, parameterArray, historyEvent);
settings.onLoad.call($tab[0], 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');
$anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]');
currentPath = $anchor.closest('[data-tab]').data(metadata.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.debug('Anchor link used, opening parent tab', $tab, $anchor);
if( !$tab.hasClass(className.active) ) {
setTimeout(function() {
module.scrollTo($anchor);
}, 0);
}
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.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
}
settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent);
return false;
}
}
@ -350,17 +401,55 @@ $.fn.tab = function(parameters) {
});
},
content: {
scrollTo: function($element) {
var
scrollOffset = ($element && $element.length > 0)
? $element.offset().top
: false
;
if(scrollOffset !== false) {
module.debug('Forcing scroll to an in-page link in a hidden tab', scrollOffset, $element);
$(document).scrollTop(scrollOffset);
}
},
fetch: function(tabPath, fullTabPath) {
update: {
content: function(tabPath, html, evaluateScripts) {
var
$tab = module.get.tabElement(tabPath),
tab = $tab[0]
;
evaluateScripts = (evaluateScripts !== undefined)
? evaluateScripts
: settings.evaluateScripts
;
if(evaluateScripts) {
module.debug('Updating HTML and evaluating inline scripts', tabPath, html);
$tab.html(html);
}
else {
module.debug('Updating HTML', tabPath, html);
tab.innerHTML = html;
}
}
},
fetch: {
content: function(tabPath, fullTabPath) {
var
$tab = module.get.tabElement(tabPath),
apiSettings = {
dataType : 'html',
on : 'now',
onSuccess : function(response) {
dataType : 'html',
encodeParameters : false,
on : 'now',
cache : settings.alwaysRefresh,
headers : {
'X-Remote': true
},
onSuccess : function(response) {
module.cache.add(fullTabPath, response);
module.content.update(tabPath, response);
module.update.content(tabPath, response);
if(tabPath == activeTabPath) {
module.debug('Content loaded', tabPath);
module.activate.tab(tabPath);
@ -368,10 +457,12 @@ $.fn.tab = function(parameters) {
else {
module.debug('Content loaded in background', tabPath);
}
settings.onTabInit.call($tab, tabPath, parameterArray, historyEvent);
settings.onTabLoad.call($tab, tabPath, parameterArray, historyEvent);
settings.onFirstLoad.call($tab[0], tabPath, parameterArray, historyEvent);
settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent);
},
urlData: { tab: fullTabPath }
urlData: {
tab: fullTabPath
}
},
request = $tab.api('get request') || false,
existingRequest = ( request && request.state() === 'pending' ),
@ -383,37 +474,30 @@ $.fn.tab = function(parameters) {
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);
module.activate.tab(tabPath);
module.debug('Adding cached content', fullTabPath);
if(settings.evaluateScripts == 'once') {
module.update.content(tabPath, cachedContent, false);
}
else {
module.update.content(tabPath, cachedContent);
}
settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent);
}
else if(existingRequest) {
module.set.loading(tabPath);
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);
requestSettings = $.extend(true, {}, settings.apiSettings, apiSettings);
module.debug('Retrieving remote content', fullTabPath, requestSettings);
$tab.api( requestSettings );
module.set.loading(tabPath);
$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)
;
}
},
@ -424,25 +508,34 @@ $.fn.tab = function(parameters) {
},
tab: function(tabPath) {
var
$tab = module.get.tabElement(tabPath)
$tab = module.get.tabElement(tabPath),
isActive = $tab.hasClass(className.active)
;
module.verbose('Showing tab content for', $tab);
$tab
.addClass(className.active)
.siblings($tabs)
.removeClass(className.active + ' ' + className.loading)
;
if(!isActive) {
$tab
.addClass(className.active)
.siblings($tabs)
.removeClass(className.active + ' ' + className.loading)
;
if($tab.length > 0) {
settings.onVisible.call($tab[0], tabPath);
}
}
},
navigation: function(tabPath) {
var
$navigation = module.get.navElement(tabPath)
$navigation = module.get.navElement(tabPath),
isActive = $navigation.hasClass(className.active)
;
module.verbose('Activating tab navigation for', $navigation, tabPath);
$navigation
.addClass(className.active)
.siblings($allModules)
.removeClass(className.active + ' ' + className.loading)
;
if(!isActive) {
$navigation
.addClass(className.active)
.siblings($allModules)
.removeClass(className.active + ' ' + className.loading)
;
}
}
},
@ -516,8 +609,8 @@ $.fn.tab = function(parameters) {
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 + '"]');
$fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]');
$simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]');
return ($fullPathTab.length > 0)
? $fullPathTab
: $simplePathTab
@ -626,7 +719,7 @@ $.fn.tab = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -726,9 +819,6 @@ $.fn.tab = function(parameters) {
}
})
;
if(module && !methodInvoked) {
module.initializeHistory();
}
return (returnedValue !== undefined)
? returnedValue
: this
@ -747,7 +837,7 @@ $.fn.tab.settings = {
namespace : 'tab',
debug : false,
verbose : true,
verbose : false,
performance : true,
auto : false, // uses pjax style endpoints fetching content from same url with remote-content headers
@ -762,10 +852,14 @@ $.fn.tab.settings = {
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
apiSettings : false, // settings for api call
evaluateScripts : 'once', // whether inline scripts should be parsed (true/false/once). Once will not re-evaluate on cached content
onFirstLoad : function(tabPath, parameterArray, historyEvent) {}, // called first time loaded
onLoad : function(tabPath, parameterArray, historyEvent) {}, // called on every load
onVisible : function(tabPath, parameterArray, historyEvent) {}, // called every time tab visible
onRequest : function(tabPath, parameterArray, historyEvent) {}, // called ever time a tab beings loading remote content
templates : {
determineTitle: function(tabArray) {} // returns page title for path
@ -774,10 +868,12 @@ $.fn.tab.settings = {
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.',
missingTab : 'Activated tab cannot be found. Tabs are case-sensitive.',
noContent : 'The tab you specified is missing a content url.',
path : 'History enabled, but no path was specified',
recursion : 'Max recursive depth reached',
legacyInit : 'onTabInit has been renamed to onFirstLoad in 2.0, please adjust your code.',
legacyLoad : 'onTabLoad has been renamed to onLoad in 2.0. Please adjust your code',
state : 'History requires Asual\'s Address library <https://github.com/asual/jquery-address>'
},
@ -799,4 +895,4 @@ $.fn.tab.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

2
web/semantic/src/definitions/modules/tab.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*

380
web/semantic/src/definitions/modules/transition.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -47,7 +47,6 @@ $.fn.transition = function() {
error,
className,
metadata,
animationStart,
animationEnd,
animationName,
@ -76,8 +75,6 @@ $.fn.transition = function() {
// get vendor specific events
animationEnd = module.get.animationEndEvent();
animationName = module.get.animationName();
animationStart = module.get.animationStartEvent();
if(methodInvoked) {
methodInvoked = module.invoke(query);
@ -139,15 +136,22 @@ $.fn.transition = function() {
delay: function(interval) {
var
isReverse = (settings.reverse === true),
shouldReverse = (settings.reverse == 'auto' && module.get.direction() == className.outward),
direction = module.get.animationDirection(),
shouldReverse,
delay
;
interval = (typeof interval !== undefined)
if(!direction) {
direction = module.can.transition()
? module.get.direction()
: 'static'
;
}
interval = (interval !== undefined)
? interval
: settings.interval
;
delay = (isReverse || shouldReverse)
shouldReverse = (settings.reverse == 'auto' && direction == className.outward);
delay = (shouldReverse || settings.reverse == true)
? ($allModules.length - index) * settings.interval
: index * settings.interval
;
@ -178,7 +182,7 @@ $.fn.transition = function() {
}
else {
module.debug('New animation started, completing previous early', settings.animation);
module.complete();
instance.complete();
}
}
if( module.can.animate() ) {
@ -217,21 +221,58 @@ $.fn.transition = function() {
module.verbose('Animation is outward, hiding element');
module.restore.conditions();
module.hide();
settings.onHide.call(this);
}
else if( module.is.inward() ) {
module.verbose('Animation is outward, showing element');
module.restore.conditions();
module.show();
settings.onShow.call(this);
}
else {
module.verbose('Static animation completed');
module.restore.conditions();
settings.onComplete.call(element);
}
}
},
force: {
visible: function() {
var
style = $module.attr('style'),
userStyle = module.get.userStyle(),
displayType = module.get.displayType(),
overrideStyle = userStyle + 'display: ' + displayType + ' !important;',
currentDisplay = $module.css('display'),
emptyStyle = (style === undefined || style === '')
;
if(currentDisplay !== displayType) {
module.verbose('Overriding default display to show element', displayType);
$module
.attr('style', overrideStyle)
;
}
else if(emptyStyle) {
$module.removeAttr('style');
}
},
hidden: function() {
var
style = $module.attr('style'),
currentDisplay = $module.css('display'),
emptyStyle = (style === undefined || style === '')
;
if(currentDisplay !== 'none' && !module.is.hidden()) {
module.verbose('Overriding default display to hide element');
$module
.css('display', 'none')
;
}
else if(emptyStyle) {
$module
.removeAttr('style')
;
}
module.remove.animation();
module.remove.animating();
}
settings.onComplete.call(this);
},
has: {
@ -260,28 +301,28 @@ $.fn.transition = function() {
set: {
animating: function(animation) {
animation = animation || settings.animation;
if(!module.is.animating()) {
module.save.conditions();
}
module.remove.direction();
module.remove.completeCallback();
if(module.can.transition() && !module.has.direction()) {
module.set.direction();
}
module.remove.hidden();
module.set.display();
$module
.addClass(className.animating + ' ' + className.transition + ' ' + animation)
.addClass(animation)
.one(animationEnd + '.complete' + eventNamespace, module.complete)
var
animationClass,
direction
;
if(settings.useFailSafe) {
module.add.failSafe();
}
module.set.duration(settings.duration);
settings.onStart.call(this);
module.debug('Starting tween', animation, $module.attr('class'));
// remove previous callbacks
module.remove.completeCallback();
// determine exact animation
animation = animation || settings.animation;
animationClass = module.get.animationClass(animation);
// save animation class in cache to restore class names
module.save.animation(animationClass);
// override display if necessary so animation appears visibly
module.force.visible();
module.remove.hidden();
module.remove.direction();
module.start.animation(animationClass);
},
duration: function(animationName, duration) {
duration = duration || settings.duration;
@ -293,44 +334,18 @@ $.fn.transition = function() {
module.verbose('Setting animation duration', duration);
$module
.css({
'-webkit-animation-duration': duration,
'-moz-animation-duration': duration,
'-ms-animation-duration': duration,
'-o-animation-duration': duration,
'animation-duration': duration
})
;
}
},
display: function() {
var
style = module.get.style(),
displayType = module.get.displayType(),
overrideStyle = style + 'display: ' + displayType + ' !important;'
;
$module.css('display', '');
module.refresh();
if( $module.css('display') !== displayType ) {
module.verbose('Setting inline visibility to', displayType);
$module
.attr('style', overrideStyle)
;
}
},
direction: function() {
if($module.is(':visible') && !module.is.hidden()) {
module.debug('Automatically determining the direction of animation', 'Outward');
$module
.removeClass(className.inward)
.addClass(className.outward)
;
direction: function(direction) {
direction = direction || module.get.direction();
if(direction == className.inward) {
module.set.inward();
}
else {
module.debug('Automatically determining the direction of animation', 'Inward');
$module
.removeClass(className.outward)
.addClass(className.inward)
;
module.set.outward();
}
},
looping: function() {
@ -340,18 +355,24 @@ $.fn.transition = function() {
;
},
hidden: function() {
if(!module.is.hidden()) {
$module
.addClass(className.transition)
.addClass(className.hidden)
;
}
if($module.css('display') !== 'none') {
module.verbose('Overriding default display to hide element');
$module
.css('display', 'none')
;
}
$module
.addClass(className.transition)
.addClass(className.hidden)
;
},
inward: function() {
module.debug('Setting direction to inward');
$module
.removeClass(className.outward)
.addClass(className.inward)
;
},
outward: function() {
module.debug('Setting direction to outward');
$module
.removeClass(className.inward)
.addClass(className.outward)
;
},
visible: function() {
$module
@ -361,49 +382,52 @@ $.fn.transition = function() {
}
},
start: {
animation: function(animationClass) {
animationClass = animationClass || module.get.animationClass();
module.debug('Starting tween', animationClass);
$module
.addClass(animationClass)
.one(animationEnd + '.complete' + eventNamespace, module.complete)
;
if(settings.useFailSafe) {
module.add.failSafe();
}
module.set.duration(settings.duration);
settings.onStart.call(element);
}
},
save: {
animation: function(animation) {
if(!module.cache) {
module.cache = {};
}
module.cache.animation = animation;
},
displayType: function(displayType) {
$module.data(metadata.displayType, displayType);
if(displayType !== 'none') {
$module.data(metadata.displayType, displayType);
}
},
transitionExists: function(animation, exists) {
$.fn.transition.exists[animation] = exists;
module.verbose('Saving existence of transition', animation, exists);
},
conditions: function() {
var
clasName = $module.attr('class') || false,
style = $module.attr('style') || ''
;
$module.removeClass(settings.animation);
module.remove.direction();
module.cache = {
className : $module.attr('class'),
style : module.get.style()
};
module.verbose('Saving original attributes', module.cache);
}
},
restore: {
conditions: function() {
if(module.cache === undefined) {
return false;
var
animation = module.get.currentAnimation()
;
if(animation) {
$module
.removeClass(animation)
;
module.verbose('Removing animation class', module.cache);
}
if(module.cache.className) {
$module.attr('class', module.cache.className);
}
else {
$module.removeAttr('class');
}
if(module.cache.style) {
module.verbose('Restoring original style attribute', module.cache.style);
$module.attr('style', module.cache.style);
}
else {
module.verbose('Clearing style attribute');
$module.removeAttr('style');
}
module.verbose('Restoring original attributes', module.cache);
module.remove.duration();
}
},
@ -413,7 +437,7 @@ $.fn.transition = function() {
duration = module.get.duration()
;
module.timer = setTimeout(function() {
$module.trigger(animationEnd);
$module.triggerHandler(animationEnd);
}, duration + settings.failSafeDelay);
module.verbose('Adding fail safe timer', module.timer);
}
@ -423,23 +447,12 @@ $.fn.transition = function() {
animating: function() {
$module.removeClass(className.animating);
},
animation: function() {
$module
.css({
'-webkit-animation' : '',
'-moz-animation' : '',
'-ms-animation' : '',
'-o-animation' : '',
'animation' : ''
})
;
},
animationCallbacks: function() {
module.remove.queueCallback();
module.remove.completeCallback();
},
queueCallback: function() {
$module.off('.queue' + eventNamespace)
$module.off('.queue' + eventNamespace);
},
completeCallback: function() {
$module.off('.complete' + eventNamespace);
@ -453,6 +466,11 @@ $.fn.transition = function() {
.removeClass(className.outward)
;
},
duration: function() {
$module
.css('animation-duration', '')
;
},
failSafe: function() {
module.verbose('Removing fail safe timer', module.timer);
if(module.timer) {
@ -523,30 +541,59 @@ $.fn.transition = function() {
}
return $.fn.transition.settings;
},
direction: function(animation) {
// quickest manually specified direction
animationClass: function(animation) {
var
animationClass = animation || settings.animation,
directionClass = (module.can.transition() && !module.has.direction())
? module.get.direction() + ' '
: ''
;
return className.animating + ' '
+ className.transition + ' '
+ directionClass
+ animationClass
;
},
currentAnimation: function() {
return (module.cache && module.cache.animation !== undefined)
? module.cache.animation
: false
;
},
currentDirection: function() {
return module.is.inward()
? className.inward
: className.outward
;
},
direction: function() {
return module.is.hidden() || !module.is.visible()
? className.inward
: className.outward
;
},
animationDirection: function(animation) {
var
direction
;
animation = animation || settings.animation;
if(typeof animation === 'string') {
animation = animation.split(' ');
// search animation name for out/in class
$.each(animation, function(index, word){
if(word === className.inward) {
return className.inward;
direction = className.inward;
}
else if(word === className.outward) {
return className.outward;
direction = className.outward;
}
});
}
// slower backup
if( !module.can.transition() ) {
return 'static';
}
if($module.is(':visible') && !module.is.hidden()) {
return className.outward;
}
else {
return className.inward;
// return found direction
if(direction) {
return direction;
}
return false;
},
duration: function(duration) {
duration = duration || settings.duration;
@ -570,33 +617,13 @@ $.fn.transition = function() {
}
return $module.data(metadata.displayType);
},
style: function() {
var
style = $module.attr('style') || ''
;
userStyle: function(style) {
style = style || $module.attr('style') || '';
return style.replace(/display.*?;/, '');
},
transitionExists: function(animation) {
return $.fn.transition.exists[animation];
},
animationName: function() {
var
element = document.createElement('div'),
animations = {
'animation' :'animationName',
'OAnimation' :'oAnimationName',
'MozAnimation' :'mozAnimationName',
'WebkitAnimation' :'webkitAnimationName'
},
animation
;
for(animation in animations){
if( element.style[animation] !== undefined ){
return animations[animation];
}
}
return false;
},
animationStartEvent: function() {
var
element = document.createElement('div'),
@ -639,10 +666,10 @@ $.fn.transition = function() {
can: {
transition: function(forced) {
var
elementClass = $module.attr('class'),
tagName = $module.prop('tagName'),
animation = settings.animation,
transitionExists = module.get.transitionExists(animation),
elementClass,
tagName,
$clone,
currentAnimation,
inAnimation,
@ -651,6 +678,9 @@ $.fn.transition = function() {
;
if( transitionExists === undefined || forced) {
module.verbose('Determining whether animation exists');
elementClass = $module.attr('class');
tagName = $module.prop('tagName');
$clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
currentAnimation = $clone
.addClass(animation)
@ -658,11 +688,11 @@ $.fn.transition = function() {
.removeClass(className.outward)
.addClass(className.animating)
.addClass(className.transition)
.css(animationName)
.css('animationName')
;
inAnimation = $clone
.addClass(className.inward)
.css(animationName)
.css('animationName')
;
displayType = $clone
.attr('class', elementClass)
@ -726,7 +756,7 @@ $.fn.transition = function() {
return $module.css('visibility') === 'hidden';
},
supported: function() {
return(animationName !== false && animationEnd !== false);
return(animationEnd !== false);
}
},
@ -735,18 +765,24 @@ $.fn.transition = function() {
if( module.is.animating() ) {
module.reset();
}
element.blur(); // IE will trigger focus change if element is not blurred before hiding
module.remove.display();
module.remove.visible();
module.set.hidden();
module.repaint();
module.force.hidden();
settings.onHide.call(element);
settings.onComplete.call(element);
// module.repaint();
},
show: function(display) {
module.verbose('Showing element', display);
module.remove.hidden();
module.set.visible();
module.set.display();
module.repaint();
module.force.visible();
settings.onShow.call(element);
settings.onComplete.call(element);
// module.repaint();
},
toggle: function() {
@ -760,18 +796,18 @@ $.fn.transition = function() {
stop: function() {
module.debug('Stopping current animation');
$module.trigger(animationEnd);
$module.triggerHandler(animationEnd);
},
stopAll: function() {
module.debug('Stopping all animation');
module.remove.queueCallback();
$module.trigger(animationEnd);
$module.triggerHandler(animationEnd);
},
clear: {
queue: function() {
module.debug('Clearing animation queue')
module.debug('Clearing animation queue');
module.remove.queueCallback();
}
},
@ -855,7 +891,7 @@ $.fn.transition = function() {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -969,7 +1005,7 @@ $.fn.transition.settings = {
debug : false,
// verbose debug output
verbose : true,
verbose : false,
// performance data output
performance : true,
@ -1026,7 +1062,7 @@ $.fn.transition.settings = {
// possible errors
error: {
noAnimation : 'There is no css animation matching the one you specified.',
noAnimation : 'Element is no longer attached to DOM. Unable to animate.',
repeated : 'That animation is already occurring, cancelling repeated animation',
method : 'The method you called is not defined',
support : 'This browser does not support CSS animations'
@ -1035,4 +1071,4 @@ $.fn.transition.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

7
web/semantic/src/definitions/modules/transition.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -38,7 +38,6 @@
/* Animating */
.animating.transition {
backface-visibility: @backfaceVisibility;
transform: @use3DAcceleration;
visibility: visible !important;
}
@ -59,8 +58,8 @@
.visible.transition {
display: block !important;
visibility: visible !important;
backface-visibility: @backfaceVisibility;
transform: @use3DAcceleration;
/* backface-visibility: @backfaceVisibility;
transform: @use3DAcceleration;*/
}
/* Disabled */

540
web/semantic/src/definitions/modules/video.js
View file

@ -1,540 +0,0 @@
/*!
* # 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
+ '&amp;title=' + showUI
+ '&amp;byline=' + showUI
+ '&amp;portrait=' + showUI
+ '&amp;autoplay=' + autoplay
;
if(settings.color) {
url += '&amp;color=' + settings.color;
}
}
if(source == 'ustream') {
url = ''
+ 'autoplay=' + autoplay
;
if(settings.color) {
url += '&amp;color=' + settings.color;
}
}
else if(source == 'youtube') {
url = ''
+ 'enablejsapi=' + api
+ '&amp;autoplay=' + autoplay
+ '&amp;autohide=' + hideUI
+ '&amp;hq=' + hd
+ '&amp;modestbranding=1'
;
if(settings.color) {
url += '&amp;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
View file

@ -1,125 +0,0 @@
/*!
* # 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();