Browse Source

UI Transiutions now forces display on element during animation with important to avoid inheritance issues. Rewrite of some more form variables

pull/912/head
jlukic 11 years ago
parent
commit
869115b206
10 changed files with 719 additions and 1385 deletions
  1. 20
      server/documents/collections/form.html.eco
  2. 2
      server/documents/modules/dimmer.html.eco
  3. 1002
      server/documents/modules/form.html.eco
  4. 24
      server/files/javascript/validate-form.js
  5. 264
      src/definitions/collections/form.less
  6. 3
      src/definitions/modules/dropdown.less
  7. 8
      src/definitions/modules/transition.js
  8. 729
      src/modules/modal.js
  9. 39
      src/themes/packages/default/collections/form.variables
  10. 13
      src/themes/packages/default/globals/site.variables

20
server/documents/collections/form.html.eco

@ -211,8 +211,8 @@ type : 'UI Collection'
</div> </div>
<div class="field"> <div class="field">
<label>Gender</label> <label>Gender</label>
<div class="ui fluid selection dropdown">
<div class="text">Select</div>
<div class="ui selection dropdown">
<div class="default text">Select</div>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<input type="hidden" name="gender"> <input type="hidden" name="gender">
<div class="menu"> <div class="menu">
@ -259,7 +259,7 @@ type : 'UI Collection'
</div> </div>
<div class="field"> <div class="field">
<label>Gender</label> <label>Gender</label>
<div class="ui fluid selection dropdown">
<div class="ui selection dropdown">
<div class="text">Select</div> <div class="text">Select</div>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<input type="hidden" name="gender"> <input type="hidden" name="gender">
@ -299,16 +299,14 @@ type : 'UI Collection'
<li>And also your <b>last name</b></li> <li>And also your <b>last name</b></li>
</ul> </ul>
</div> </div>
<div class="two error fields">
<div class="twofields">
<div class="field"> <div class="field">
<label>First Name</label> <label>First Name</label>
<input placeholder="First Name" type="text"> <input placeholder="First Name" type="text">
<div class="ui red pointing above ui label">Enter a first name</div>
</div> </div>
<div class="field"> <div class="field">
<label>Last Name</label> <label>Last Name</label>
<input placeholder="Last Name" type="text"> <input placeholder="Last Name" type="text">
<div class="ui red pointing above ui label">Enter a last name</div>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
@ -348,8 +346,8 @@ type : 'UI Collection'
</div> </div>
<div class="field error"> <div class="field error">
<label>Gender</label> <label>Gender</label>
<div class="ui fluid selection dropdown">
<div class="text">Select</div>
<div class="ui selection dropdown">
<div class="default text">Select</div>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<input type="hidden" name="gender"> <input type="hidden" name="gender">
<div class="menu"> <div class="menu">
@ -358,6 +356,12 @@ type : 'UI Collection'
</div> </div>
</div> </div>
</div> </div>
<div class="inline error field">
<div class="ui checkbox">
<input type="checkbox" />
<label>I agree to the Terms and Conditions</label>
</div>
</div>
</div> </div>
</div> </div>

2
server/documents/modules/dimmer.html.eco

@ -151,7 +151,7 @@ type : 'UI Module'
<div class="ui dimmer"> <div class="ui dimmer">
<div class="content"> <div class="content">
<div class="center"> <div class="center">
<h2 class="ui header">Puppy</h2>
<h2 class="ui inverted header">Puppy</h2>
<div class="ui green button">Vote</div> <div class="ui green button">Vote</div>
<a class="ui button">View</a> <a class="ui button">View</a>
</div> </div>

1002
server/documents/modules/form.html.eco
File diff suppressed because it is too large
View File

24
server/files/javascript/validate-form.js

@ -8,7 +8,8 @@ semantic.validateForm.ready = function() {
$dogForm = $('.dog.example .ui.form'), $dogForm = $('.dog.example .ui.form'),
$inlineForm = $('.inline.example .ui.form'), $inlineForm = $('.inline.example .ui.form'),
$form = $('.ui.form').not($dogForm).not($inlineForm), $form = $('.ui.form').not($dogForm).not($inlineForm),
$checkbox = $('.ui.checkbox'),
$checkbox = $('.example .ui.checkbox'),
$dropdown = $('.example .ui.dropdown'),
// alias // alias
handler handler
; ;
@ -20,6 +21,9 @@ semantic.validateForm.ready = function() {
$checkbox $checkbox
.checkbox() .checkbox()
; ;
$dropdown
.dropdown()
;
$.fn.form.settings.defaults = { $.fn.form.settings.defaults = {
firstName: { firstName: {
@ -31,6 +35,24 @@ semantic.validateForm.ready = function() {
} }
] ]
}, },
name: {
identifier : 'name',
rules: [
{
type : 'empty',
prompt : 'Please enter you name'
}
]
},
gender: {
identifier : 'gender',
rules: [
{
type : 'empty',
prompt : 'Please select a gender'
}
]
},
lastName: { lastName: {
identifier : 'last-name', identifier : 'last-name',
rules: [ rules: [

264
src/definitions/collections/form.less

@ -9,6 +9,15 @@
* *
*/ */
/*******************************
Theme
*******************************/
@type : 'collection';
@element : 'form';
@import '../../semantic.config';
/******************************* /*******************************
Standard Standard
@ -28,7 +37,7 @@
---------------------*/ ---------------------*/
.ui.form > p { .ui.form > p {
margin: 1em 0;
margin: @paragraphMargin;
} }
/*-------------------- /*--------------------
@ -37,7 +46,7 @@
.ui.form .field { .ui.form .field {
clear: both; clear: both;
margin: 0em 0em 1em;
margin: @fieldMargin;
} }
/*-------------------- /*--------------------
@ -45,11 +54,11 @@
---------------------*/ ---------------------*/
.ui.form .field > label { .ui.form .field > label {
margin: 0em 0em 0.3em;
margin: @labelMargin;
display: block; display: block;
color: #111111;
font-size: 0.875em;
color: @labelColor;
font-size: @labelFontSize;
} }
/*-------------------- /*--------------------
@ -77,82 +86,66 @@
.ui.form input[type="number"], .ui.form input[type="number"],
.ui.form input[type="url"], .ui.form input[type="url"],
.ui.form input[type="tel"] { .ui.form input[type="tel"] {
margin: 0em; margin: 0em;
padding: 0.65em 1em;
font-size: 1em;
padding: @inputVerticalPadding @inputHorizontalPadding;
font-size: @inputFontSize;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
background: @inputBackground;
border: @inputBorder;
outline: none; outline: none;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em; border-radius: 0.3125em;
-webkit-transition:
background-color 0.3s ease-out,
box-shadow 0.2s ease,
border-color 0.2s ease
;
-moz-transition:
background-color 0.3s ease-out,
box-shadow 0.2s ease,
border-color 0.2s ease
;
-o-transition:
background-color 0.3s ease-out,
box-shadow 0.2s ease,
border-color 0.2s ease
;
-ms-transition:
background-color 0.3s ease-out,
box-shadow 0.2s ease,
border-color 0.2s ease
;
transition:
background-color 0.3s ease-out,
box-shadow 0.2s ease,
border-color 0.2s ease
;
-webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
box-shadow: @inputBoxShadow;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
transition: @inputTransition;
} }
.ui.textarea, .ui.textarea,
.ui.form textarea { .ui.form textarea {
line-height: 1.33;
min-height: 8em;
height: 12em;
max-height: 24em;
resize: vertical;
font-size: @textAreaFontSize;
height: @textAreaHeight;
min-height: @textAreaMinHeight;
max-height: @textAreaMaxHeight;
line-height: @textAreaLineHeight;
resize: @textAreaResize;
} }
.ui.form textarea, .ui.form textarea,
.ui.form input[type="checkbox"] { .ui.form input[type="checkbox"] {
vertical-align: top;
vertical-align: @checkboxVerticalAlign;
} }
/*--------------------
Dropdown
---------------------*/
.ui.form .field > .selection.dropdown {
width: 100%;
}
.ui.form .field > .selection.dropdown > .dropdown.icon {
float: right;
}
.ui.form .inline.field > .selection.dropdown {
width: auto;
}
.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
float: none;
}
/*-------------------- /*--------------------
Dividers Dividers
---------------------*/ ---------------------*/
.ui.form .divider { .ui.form .divider {
clear: both; clear: both;
margin: 1em 0em;
margin: @dividerMargin;
} }
@ -179,11 +172,10 @@
white-space: nowrap; white-space: nowrap;
} }
.ui.form .inline.field .prompt { .ui.form .inline.field .prompt {
margin-top: 0em;
margin-left: 1em;
margin: @validationMargin;
} }
.ui.form .inline.field .prompt:before { .ui.form .inline.field .prompt:before {
margin-top: -0.3em;
margin-top: @validationArrowOffset;
bottom: auto; bottom: auto;
right: auto; right: auto;
top: 50%; top: 50%;
@ -196,6 +188,38 @@
*******************************/ *******************************/
/*--------------------
Placeholder
---------------------*/
/* browsers require these rules separate */
.ui.form ::-webkit-input-placeholder {
color: @inputPlaceholderColor;
}
.ui.form ::-moz-placeholder {
color: @inputPlaceholderColor;
}
.ui.form :focus::-webkit-input-placeholder {
color: @inputPlaceholderFocusColor;
}
.ui.form :focus::-moz-placeholder {
color: @inputPlaceholderFocusColor;
}
/* Error Placeholder */
.ui.form .error ::-webkit-input-placeholder {
color: @inputErrorPlaceholderColor;
}
.ui.form .error ::-moz-placeholder {
color: @inputErrorPlaceholderColor;
}
.ui.form .error :focus::-webkit-input-placeholder {
color: @inputErrorPlaceholderFocusColor;
}
.ui.form .error :focus::-moz-placeholder {
color: @inputErrorPlaceholderFocusColor;
}
/*-------------------- /*--------------------
Focus Focus
---------------------*/ ---------------------*/
@ -208,16 +232,12 @@
.ui.form input[type="url"]:focus, .ui.form input[type="url"]:focus,
.ui.form input[type="tel"]:focus, .ui.form input[type="tel"]:focus,
.ui.form textarea:focus{ .ui.form textarea:focus{
color: rgba(0, 0, 0, 0.85);
border-color: rgba(0, 0, 0, 0.2);
border-bottom-left-radius: 0;
border-top-left-radius: 0;
color: @inputFocusColor;
border-color: @inputFocusBorderColor;
border-radius: @inputFocusBorderRadius;
background: @inputFocusBackground;
box-shadow: @inputFocusBoxShadow;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
} }
/*-------------------- /*--------------------
@ -243,13 +263,13 @@
.ui.form .field.error label, .ui.form .field.error label,
.ui.form .fields.error .field .input, .ui.form .fields.error .field .input,
.ui.form .field.error .input { .ui.form .field.error .input {
color: #D95C5C;
color: @formErrorColor;
} }
.ui.form .fields.error .field .corner.label, .ui.form .fields.error .field .corner.label,
.ui.form .field.error .corner.label { .ui.form .field.error .corner.label {
border-color: #D95C5C;
color: #FFFFFF;
border-color: @formErrorColor;
color: @white;
} }
.ui.form .fields.error .field textarea, .ui.form .fields.error .field textarea,
@ -268,19 +288,11 @@
.ui.form .field.error input[type="number"], .ui.form .field.error input[type="number"],
.ui.form .field.error input[type="url"], .ui.form .field.error input[type="url"],
.ui.form .field.error input[type="tel"] { .ui.form .field.error input[type="tel"] {
background-color: #FFFAFA;
border-color: #E7BEBE;
border-left: none;
color: #D95C5C;
padding-left: 1.2em;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
-webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
-moz-box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
background: @formErrorBackground;
border-color: @formErrorBorder;
color: @formErrorColor;
border-radius: @inputErrorBorderRadius;
box-shadow: @inputErrorBoxShadow;
} }
.ui.form .field.error textarea:focus, .ui.form .field.error textarea:focus,
.ui.form .field.error input[type="text"]:focus, .ui.form .field.error input[type="text"]:focus,
@ -290,85 +302,61 @@
.ui.form .field.error input[type="number"]:focus, .ui.form .field.error input[type="number"]:focus,
.ui.form .field.error input[type="url"]:focus, .ui.form .field.error input[type="url"]:focus,
.ui.form .field.error input[type="tel"]:focus{ .ui.form .field.error input[type="tel"]:focus{
border-color: rgba(255, 80, 80, 1);
color: rgba(255, 80, 80, 1);
border-color: @formErrorFocusBorder;
color: @formErrorFocusColor;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
-moz-box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
box-shadow: @inputErrorFocusBoxShadow;
} }
/*----------------------------
Dropdown Selection Warning
-----------------------------*/
/*------------------
Dropdown Error
--------------------*/
.ui.form .fields.error .field .ui.dropdown, .ui.form .fields.error .field .ui.dropdown,
.ui.form .fields.error .field .ui.dropdown .item, .ui.form .fields.error .field .ui.dropdown .item,
.ui.form .field.error .ui.dropdown, .ui.form .field.error .ui.dropdown,
.ui.form .field.error .ui.dropdown .text,
.ui.form .field.error .ui.dropdown .item { .ui.form .field.error .ui.dropdown .item {
background-color: #FFFAFA;
color: #D95C5C;
background: @formErrorBackground;
color: @formErrorColor;
} }
.ui.form .fields.error .field .ui.dropdown, .ui.form .fields.error .field .ui.dropdown,
.ui.form .field.error .ui.dropdown { .ui.form .field.error .ui.dropdown {
-webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important;
box-shadow: 0px 0px 0px 1px #E7BEBE !important;
box-shadow: 0px 0px 0px 1px @formErrorBorder !important;
} }
.ui.form .fields.error .field .ui.dropdown:hover, .ui.form .fields.error .field .ui.dropdown:hover,
.ui.form .field.error .ui.dropdown:hover { .ui.form .field.error .ui.dropdown:hover {
-webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important;
box-shadow: 0px 0px 0px 1px #E7BEBE !important;
box-shadow: 0px 0px 0px 1px @formErrorBorder !important;
} }
.ui.form .fields.error .field .ui.dropdown:hover .menu, .ui.form .fields.error .field .ui.dropdown:hover .menu,
.ui.form .field.error .ui.dropdown:hover .menu { .ui.form .field.error .ui.dropdown:hover .menu {
-webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
box-shadow: 0px 1px 0px 1px #E7BEBE;
box-shadow: 0px 1px 0px 1px @formErrorBorder;
} }
/* Hover */
.ui.form .fields.error .field .ui.dropdown .menu .item:hover, .ui.form .fields.error .field .ui.dropdown .menu .item:hover,
.ui.form .field.error .ui.dropdown .menu .item:hover { .ui.form .field.error .ui.dropdown .menu .item:hover {
background-color: #FFF2F2;
background-color: @dropdownErrorHoverBackground;
} }
/* Active */
.ui.form .fields.error .field .ui.dropdown .menu .active.item, .ui.form .fields.error .field .ui.dropdown .menu .active.item,
.ui.form .field.error .ui.dropdown .menu .active.item { .ui.form .field.error .ui.dropdown .menu .active.item {
background-color: #FDCFCF !important;
background-color: @dropdownErrorActiveBackground !important;
} }
/*-------------------- /*--------------------
Empty (Placeholder)
Checkbox Error
---------------------*/ ---------------------*/
/* browsers require these rules separate */
.ui.form ::-webkit-input-placeholder {
color: #AAAAAA;
}
.ui.form ::-moz-placeholder {
color: #AAAAAA;
}
.ui.form :focus::-webkit-input-placeholder {
color: #999999;
}
.ui.form :focus::-moz-placeholder {
color: #999999;
}
/* Error Placeholder */
.ui.form .error ::-webkit-input-placeholder {
color: rgba(255, 80, 80, 0.4);
.ui.form .fields.error .field .checkbox label,
.ui.form .field.error .checkbox label,
.ui.form .fields.error .field .checkbox .box,
.ui.form .field.error .checkbox .box {
color: @formErrorColor;
} }
.ui.form .error ::-moz-placeholder {
color: rgba(255, 80, 80, 0.4);
}
.ui.form .error :focus::-webkit-input-placeholder {
color: rgba(255, 80, 80, 0.7);
}
.ui.form .error :focus::-moz-placeholder {
color: rgba(255, 80, 80, 0.7);
.ui.form .fields.error .field .checkbox label:before,
.ui.form .field.error .checkbox label:before,
.ui.form .fields.error .field .checkbox .box:before,
.ui.form .field.error .checkbox .box:before {
border-color: @formErrorBorder;
} }
/*-------------------- /*--------------------
@ -403,7 +391,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%;
background: @formLoaderDimmerColor @formLoaderPath no-repeat @formLoaderPosition;
visibility: visible; visibility: visible;
} }
@ -419,9 +407,6 @@
.ui.form.fluid { .ui.form.fluid {
width: 100%; width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
@ -514,9 +499,6 @@
.ui.form .fields > .field { .ui.form .fields > .field {
clear: none; clear: none;
float: left; float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.ui.form .fields > .field:first-child { .ui.form .fields > .field:first-child {

3
src/definitions/modules/dropdown.less

@ -344,6 +344,9 @@
word-wrap: break-word; word-wrap: break-word;
white-space: normal; white-space: normal;
/* Matches selection dropdown height to input height */
border-top: 1px solid transparent;
background-color: #FFFFFF; background-color: #FFFFFF;
padding: 0.65em 1em; padding: 0.65em 1em;

8
src/definitions/modules/transition.js

@ -224,14 +224,14 @@ $.fn.transition = function() {
display: function() { display: function() {
var var
displayType = module.get.displayType()
style = $module.css('style'),
displayType = module.get.displayType(),
overrideStyle = style + ';display: ' + displayType + ' !important;'
; ;
if(displayType !== 'block') { if(displayType !== 'block') {
module.verbose('Setting final visibility to', displayType); module.verbose('Setting final visibility to', displayType);
$module $module
.css({
display: displayType
})
.attr('style', overrideStyle)
; ;
} }
}, },

729
src/modules/modal.js

@ -1,729 +0,0 @@
/*
* # Semantic - Modal
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
;(function ( $, window, document, undefined ) {
$.fn.modal = function(parameters) {
var
$allModules = $(this),
$window = $(window),
$document = $(document),
$body = $('body'),
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.modal.settings, parameters)
: $.extend({}, $.fn.modal.settings),
selector = settings.selector,
className = settings.className,
namespace = settings.namespace,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
$module = $(this),
$context = $(settings.context),
$close = $module.find(selector.close),
$allModals,
$otherModals,
$focusedElement,
$dimmable,
$dimmer,
element = this,
instance = $module.data(moduleNamespace),
module
;
module = {
initialize: function() {
module.verbose('Initializing dimmer', $context);
if($.fn.dimmer === undefined) {
module.error(error.dimmer);
return;
}
$dimmable = $context
.dimmer({
closable : false,
useCSS : true,
duration : {
show : settings.duration * 0.9,
hide : settings.duration * 1.1
}
})
;
if(settings.detachable) {
$dimmable.dimmer('add content', $module);
}
$dimmer = $dimmable
.dimmer('get dimmer')
;
$otherModals = $module.siblings(selector.modal);
$allModals = $otherModals.add($module);
module.verbose('Attaching close events', $close);
$close
.on('click' + eventNamespace, module.event.close)
;
$window
.on('resize' + eventNamespace, module.event.resize)
;
module.instantiate();
},
instantiate: function() {
module.verbose('Storing instance of modal');
instance = module;
$module
.data(moduleNamespace, instance)
;
},
destroy: function() {
module.verbose('Destroying previous modal');
$module
.removeData(moduleNamespace)
.off(eventNamespace)
;
$close
.off(eventNamespace)
;
$context
.dimmer('destroy')
;
},
refresh: function() {
module.remove.scrolling();
module.cacheSizes();
module.set.screenHeight();
module.set.type();
module.set.position();
},
attachEvents: function(selector, event) {
var
$toggle = $(selector)
;
event = $.isFunction(module[event])
? module[event]
: module.toggle
;
if($toggle.size() > 0) {
module.debug('Attaching modal events to element', selector, event);
$toggle
.off(eventNamespace)
.on('click' + eventNamespace, event)
;
}
else {
module.error(error.notFound);
}
},
event: {
close: function() {
module.verbose('Closing element pressed');
if( $(this).is(selector.approve) ) {
if($.proxy(settings.onApprove, element)() !== false) {
module.hide();
}
else {
module.verbose('Approve callback returned false cancelling hide');
}
}
else if( $(this).is(selector.deny) ) {
if($.proxy(settings.onDeny, element)() !== false) {
module.hide();
}
else {
module.verbose('Deny callback returned false cancelling hide');
}
}
else {
module.hide();
}
},
click: function(event) {
if( $(event.target).closest(selector.modal).size() === 0 ) {
module.debug('Dimmer clicked, hiding all modals');
if(settings.allowMultiple) {
module.hide();
}
else {
module.hideAll();
}
event.stopImmediatePropagation();
}
},
debounce: function(method, delay) {
clearTimeout(module.timer);
module.timer = setTimeout(method, delay);
},
keyboard: function(event) {
var
keyCode = event.which,
escapeKey = 27
;
if(keyCode == escapeKey) {
if(settings.closable) {
module.debug('Escape key pressed hiding modal');
module.hide();
}
else {
module.debug('Escape key pressed, but closable is set to false');
}
event.preventDefault();
}
},
resize: function() {
if( $dimmable.dimmer('is active') ) {
requestAnimationFrame(module.refresh);
}
}
},
toggle: function() {
if( module.is.active() ) {
module.hide();
}
else {
module.show();
}
},
show: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
module.showDimmer();
module.showModal(callback);
},
showModal: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if( !module.is.active() ) {
module.cacheSizes();
module.set.position();
module.set.screenHeight();
module.set.type();
if( $otherModals.filter(':visible').size() > 0 && !settings.allowMultiple) {
module.debug('Other modals visible, queueing show animation');
module.hideOthers(module.showModal);
}
else {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
module.debug('Showing modal with css animations');
$module
.transition(settings.transition + ' in', settings.duration, function() {
module.set.active();
callback();
})
;
}
else {
module.debug('Showing modal with javascript');
$module
.fadeIn(settings.duration, settings.easing, function() {
module.set.active();
callback();
})
;
}
$.proxy(settings.onShow, element)();
}
}
else {
module.debug('Modal is already visible');
}
},
showDimmer: function() {
if( !$dimmable.dimmer('is active') ) {
module.debug('Showing dimmer');
$dimmable.dimmer('show');
}
else {
module.debug('Dimmer already visible');
}
},
hide: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if($allModals.filter(':visible').size() <= 1) {
module.hideDimmer();
}
module.hideModal(callback);
},
hideDimmer: function() {
if( !module.is.active() ) {
module.debug('Dimmer is not visible cannot hide');
return;
}
module.debug('Hiding dimmer');
if(settings.closable) {
$dimmer
.off('click' + eventNamespace)
;
}
$dimmable.dimmer('hide', function() {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$module
.transition('reset')
;
module.remove.screenHeight();
}
module.remove.active();
});
},
hideModal: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if( !module.is.active() ) {
module.debug('Cannot hide modal it is not active');
return;
}
module.debug('Hiding modal');
module.remove.keyboardShortcuts();
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$module
.transition(settings.transition + ' out', settings.duration, function() {
module.remove.active();
module.restore.focus();
callback();
})
;
}
else {
$module
.fadeOut(settings.duration, settings.easing, function() {
module.remove.active();
module.restore.focus();
callback();
})
;
}
$.proxy(settings.onHide, element)();
},
hideAll: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if( $allModals.is(':visible') ) {
module.debug('Hiding all visible modals');
module.hideDimmer();
$allModals
.filter(':visible')
.modal('hide modal', callback)
;
}
},
hideOthers: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if( $otherModals.is(':visible') ) {
module.debug('Hiding other modals');
$otherModals
.filter(':visible')
.modal('hide modal', callback)
;
}
},
add: {
keyboardShortcuts: function() {
module.verbose('Adding keyboard shortcuts');
$document
.on('keyup' + eventNamespace, module.event.keyboard)
;
}
},
save: {
focus: function() {
$focusedElement = $(document.activeElement).blur();
}
},
restore: {
focus: function() {
if($focusedElement && $focusedElement.size() > 0) {
$focusedElement.focus();
}
}
},
remove: {
active: function() {
$module.removeClass(className.active);
},
screenHeight: function() {
if(module.cache.height > module.cache.pageHeight) {
module.debug('Removing page height');
$body
.css('height', '')
;
}
},
keyboardShortcuts: function() {
module.verbose('Removing keyboard shortcuts');
$document
.off('keyup' + eventNamespace)
;
},
scrolling: function() {
$dimmable.removeClass(className.scrolling);
$module.removeClass(className.scrolling);
}
},
cacheSizes: function() {
module.cache = {
pageHeight : $body.outerHeight(),
height : $module.outerHeight() + settings.offset,
contextHeight : (settings.context == 'body')
? $(window).height()
: $dimmable.height()
};
module.debug('Caching modal and container sizes', module.cache);
},
can: {
fit: function() {
return (module.cache.height < module.cache.contextHeight);
}
},
is: {
active: function() {
return $module.hasClass(className.active);
},
modernBrowser: function() {
// appName for IE11 reports 'Netscape' can no longer use
return !(window.ActiveXObject || "ActiveXObject" in window);
}
},
set: {
screenHeight: function() {
if(module.cache.height > module.cache.pageHeight) {
module.debug('Modal is taller than page content, resizing page height');
$body
.css('height', module.cache.height + settings.padding)
;
}
},
active: function() {
module.add.keyboardShortcuts();
module.save.focus();
$module
.addClass(className.active)
;
if(settings.closable) {
$dimmer
.off('click' + eventNamespace)
.on('click' + eventNamespace, module.event.click)
;
}
},
scrolling: function() {
$dimmable.addClass(className.scrolling);
$module.addClass(className.scrolling);
},
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
module.remove.scrolling();
}
else {
module.verbose('Modal cannot fit on screen setting to scrolling');
module.set.scrolling();
}
},
position: function() {
module.verbose('Centering modal on page', module.cache);
if(module.can.fit()) {
$module
.css({
top: '',
marginTop: -(module.cache.height / 2)
})
;
}
else {
$module
.css({
marginTop : '1em',
top : $document.scrollTop()
})
;
}
}
},
setting: function(name, value) {
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else if(value !== undefined) {
settings[name] = value;
}
else {
return settings[name];
}
},
internal: function(name, value) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else if(value !== undefined) {
module[name] = value;
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
module.debug.apply(console, arguments);
}
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
module.verbose.apply(console, arguments);
}
}
},
error: function() {
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
module.error.apply(console, arguments);
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime;
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Element' : element,
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Execution Time' : executionTime
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
},
display: function() {
var
title = settings.name + ':',
totalTime = 0
;
time = false;
clearTimeout(module.performance.timer);
$.each(performance, function(index, data) {
totalTime += data['Execution Time'];
});
title += ' ' + totalTime + 'ms';
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
object = instance,
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && object !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
object = object[camelCaseValue];
}
else if( object[camelCaseValue] !== undefined ) {
found = object[camelCaseValue];
return false;
}
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
object = object[value];
}
else if( object[value] !== undefined ) {
found = object[value];
return false;
}
else {
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if($.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
returnedValue = [returnedValue, response];
}
else if(response !== undefined) {
returnedValue = response;
}
return found;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
module.initialize();
}
})
;
return (returnedValue !== undefined)
? returnedValue
: this
;
};
$.fn.modal.settings = {
name : 'Modal',
namespace : 'modal',
debug : true,
verbose : true,
performance : true,
allowMultiple : true,
detachable : true,
closable : true,
context : 'body',
duration : 500,
easing : 'easeOutExpo',
offset : 0,
transition : 'scale',
padding : 30,
onShow : function(){},
onHide : function(){},
onApprove : function(){ return true; },
onDeny : function(){ return true; },
selector : {
close : '.close, .actions .button',
approve : '.actions .positive, .actions .approve, .actions .ok',
deny : '.actions .negative, .actions .deny, .actions .cancel',
modal : '.ui.modal'
},
error : {
dimmer : 'UI Dimmer, a required component is not included in this page',
method : 'The method you called is not defined.'
},
className : {
active : 'active',
scrolling : 'scrolling'
}
};
})( jQuery, window , document );

39
src/themes/packages/default/collections/form.variables

@ -34,11 +34,12 @@
@inputBorderRadius: 0.3125em; @inputBorderRadius: 0.3125em;
@inputColor: @textColor; @inputColor: @textColor;
@inputTransition: @inputTransition:
background-color 0.3s ease-out,
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease, box-shadow 0.2s ease,
border-color 0.2s ease border-color 0.2s ease
; ;
@inputBoxShadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
@inputBoxShadow: 0em 0em 0em 0em transparent inset;
@textAreaFontSize: @inputFontSize; @textAreaFontSize: @inputFontSize;
@textAreaHeight: 12em; @textAreaHeight: 12em;
@ -63,16 +64,42 @@
--------------------*/ --------------------*/
/* Focus */ /* Focus */
@inputFocusPointerSize: 0.3em;
/* Input Focus */
@inputFocusBackground: #FFFFFF; @inputFocusBackground: #FFFFFF;
@inputFocusBorderColor: @selectedBorderColor; @inputFocusBorderColor: @selectedBorderColor;
@inputFocusColor: rgba(0, 0, 0, 0.85); @inputFocusColor: rgba(0, 0, 0, 0.85);
@inputFocusBoxShadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
@inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset;
@inputFocusBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em; @inputFocusBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em;
/* Error */ /* Error */
@formErrorColor: @negativeColor;
@formErrorBorder: @negativeBorderColor;
@formErrorBackground: @negativeBackgroundColor;
/* Input Error */
@inputErrorBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em;
@inputErrorBoxShadow: @inputFocusPointerSize 0em 0em 0em @formErrorColor inset;
/* Dropdown Error */
@dropdownErrorHoverBackground: #FFF2F2;
@dropdownErrorActiveBackground: #FDCFCF;
/* Focused Error */
@formErrorFocusColor: @negativeColorHover;
@formErrorFocusBorder: @negativeBorderColor;
@formErrorFocusBackground: @negativeBackgroundColor;
/* Input Focused Error */
@inputErrorFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @negativeColorHover inset;
/* Placeholder */
@inputPlaceholderColor: lighten(@inputColor, 70);
@inputPlaceholderFocusColor: lighten(@inputColor, 55);
@inputErrorPlaceholderColor: lighten(@formErrorColor, 10);
@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5);
/* Loading */
@formLoaderDimmerColor: rgba(255, 255, 255, 0.8);
@formLoaderPath: "@{imagePath}/loader-large.gif";
@formLoaderPosition: 50% 1em;
/*------------------- /*-------------------
Types Types

13
src/themes/packages/default/globals/site.variables

@ -85,8 +85,6 @@
@tertiaryColor : @orange; @tertiaryColor : @orange;
/*--- Emotive ---*/ /*--- Emotive ---*/
@positiveColor : @green;
@negativeColor : @red;
@infoColor : #E6F4F9; @infoColor : #E6F4F9;
@warningColor : #96904D; @warningColor : #96904D;
@ -105,6 +103,17 @@
@offWhite : #FAFAFA; @offWhite : #FAFAFA;
@darkWhite : #F0F0F0; @darkWhite : #F0F0F0;
/*-------------------
Emotive
--------------------*/
@positiveColor : @green;
@positiveBorderColor : #FFFAFA;
@positiveBackgroundColor : #E7BEBE;
@negativeColor : @red;
@negativeBorderColor : lighten(@red, 25);
@negativeBackgroundColor : lighten(@red, 38);
/*------------------- /*-------------------
Text Colors Text Colors
--------------------*/ --------------------*/

Loading…
Cancel
Save