richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Refactors modal plugin, modals now have icons auto formatted. Removes selector count from popup 

Former-commit-id: 7de4e027ee
Former-commit-id: 142c99d2e5
pull/258/head
jlukic 11 years ago
parent
700fda509e
commit
df0777b0da
3 changed files with 67 additions and 65 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 115
      src/modules/modal.js
  2. 12
      src/modules/modal.less
  3. 5
      src/modules/popup.js

115
src/modules/modal.js
View File

@ -13,10 +13,11 @@
$.fn.modal = function(parameters) {
var
$allModules = $(this),
$document = $(document),
$allModules = $(this),
$window = $(window),
$document = $(document),
settings = ( $.isPlainObject(parameters) )
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.modal.settings, parameters)
: $.fn.modal.settings,
@ -39,15 +40,14 @@ $.fn.modal = function(parameters) {
invokedResponse
;
$allModules
.each(function() {
var
$module = $(this),
$context = $(settings.context),
$otherModals = $allModules.not($module),
$closeButton = $module.find(selector.closeButton),
$dimmer,
$close = $module.find(selector.close),
element = this,
instance = $module.data(moduleNamespace),
@ -57,39 +57,21 @@ $.fn.modal = function(parameters) {
module = {
initialize: function() {
module.verbose('Attaching events');
$closeButton
.on('click', module.event.close)
module.verbose('Initializing dimmer', $context);
$context
.dimmer('add content', $module)
;
module.cache.sizes();
module.verbose('Creating dimmer');
$context
.dimmer({
closable: settings.closable,
duration: settings.duration,
onShow: function() {
module.add.keyboardShortcuts();
$.proxy(settings.onShow, this)();
},
onHide: function() {
if($module.is(':visible')) {
$context.off('.dimmer');
module.hide();
$.proxy(settings.onHide, this)();
}
module.remove.keyboardShortcuts();
}
module.verbose('Attaching close events', $close);
$close
.on('click' + eventNamespace, module.event.close)
;
$window
.on('resize', function() {
module.event.debounce(module.refresh, 50);
})
;
$dimmer = $context.children(selector.dimmer);
if( $module.parent()[0] !== $dimmer[0] ) {
module.debug('Moving element inside dimmer', $context);
$module = $module
.detach()
.appendTo($dimmer)
;
}
module.instantiate();
},
@ -108,11 +90,21 @@ $.fn.modal = function(parameters) {
;
},
refresh: function() {
module.cacheSizes();
module.set.type();
module.set.position();
},
event: {
close: function() {
module.verbose('Close button pressed');
$context.dimmer('hide');
},
debounce: function(method, delay) {
clearTimeout(module.timer);
module.timer = setTimeout(method, delay);
},
keyboard: function(event) {
var
keyCode = event.which,
@ -125,10 +117,8 @@ $.fn.modal = function(parameters) {
}
},
resize: function() {
module.cache.sizes();
if( $module.is(':visible') ) {
module.set.type();
module.set.position();
if( $context.dimmer('is active') ) {
module.refresh();
}
}
},
@ -143,7 +133,8 @@ $.fn.modal = function(parameters) {
},
show: function() {
module.debug('Showing modal');
module.showDimmer();
module.cacheSizes();
module.set.type();
module.set.position();
module.hideAll();
@ -158,6 +149,12 @@ $.fn.modal = function(parameters) {
;
}
module.debug('Triggering dimmer');
$.proxy(settings.onShow, element)();
},
showDimmer: function() {
module.debug('Showing modal');
module.set.dimmerSettings();
$context.dimmer('show');
},
@ -179,6 +176,7 @@ $.fn.modal = function(parameters) {
.fadeOut(settings.duration, settings.easing, module.remove.active)
;
}
$.proxy(settings.onHide, element)();
},
hideAll: function() {
@ -209,16 +207,14 @@ $.fn.modal = function(parameters) {
}
},
cache: {
sizes: function() {
module.cache = {
height : $module.outerHeight() + settings.offset,
contextHeight : (settings.context == 'body')
? $(window).height()
: $context.height()
};
module.debug('Caching modal and container sizes', module.cache);
}
cacheSizes: function() {
module.cache = {
height : $module.outerHeight() + settings.offset,
contextHeight : (settings.context == 'body')
? $(window).height()
: $context.height()
};
module.debug('Caching modal and container sizes', module.cache);
},
can: {
@ -237,6 +233,20 @@ $.fn.modal = function(parameters) {
active: function() {
$module.addClass(className.active);
},
dimmerSettings: function() {
module.debug('Setting dimmer settings', settings.closable);
$context
.dimmer('setting', 'closable', settings.closable)
.dimmer('setting', 'duration', settings.duration)
.dimmer('setting', 'onShow' , module.add.keyboardShortcuts)
.dimmer('setting', 'onHide', function() {
module.hide();
module.remove.keyboardShortcuts();
})
.dimmer('destroy')
.dimmer('initialize')
;
},
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
@ -248,7 +258,7 @@ $.fn.modal = function(parameters) {
}
},
position: function() {
module.verbose('Centering modal on page', module.cache.height / 2);
module.verbose('Centering modal on page', module.cache, module.cache.height / 2);
if(module.can.fit()) {
$module
.css({
@ -465,8 +475,7 @@ $.fn.modal.settings = {
onHide : function(){},
selector : {
closeButton : '.close, .actions .button',
dimmer: '.ui.dimmer'
close : '.close, .actions .button'
},
error : {
method : 'The method you called is not defined.'

12
src/modules/modal.less
View File

@ -63,8 +63,6 @@
---------------*/
.ui.modal > .header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin: 0em;
padding: 1.5rem 2rem;
@ -99,9 +97,11 @@
.ui.modal > .content > .right {
display: table-cell;
padding-left: 5%;
vertical-align: middle;
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
vertical-align: top;
}
.ui.modal > .content > .left > .icon {
font-size: 8em;
margin: 0em;
}
.ui.modal > .content p {
line-height: 1.6;
@ -112,8 +112,6 @@
---------------*/
.ui.modal .actions {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding: 1rem 2rem;
text-align: right;
}

5
src/modules/popup.js
View File

@ -552,11 +552,6 @@ $.fn.popup = function(parameters) {
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if($allModules.size() > 1) {
if($allModules.size() > 1) {
title += ' ' + '(' + $allModules.size() + ')';
}
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {

Write Preview
Loading…
Cancel
Save