From e7b6fa119e937ac3246feaabfbc22dfb1bf77db0 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 25 Aug 2014 18:39:40 -0400 Subject: [PATCH] Adds width and fluid variations to popup, fix issue where popup click events werent being removed on destroy, added several new examples of popup features --- server/documents/modules/popup.html.eco | 102 ++++++++++++++---- server/documents/views/list.html.eco | 4 +- server/files/javascript/popup.js | 7 ++ server/files/stylesheets/semantic.css | 2 +- src/definitions/modules/popup.js | 9 +- src/definitions/modules/popup.less | 25 +++++ .../packages/default/elements/icon.overrides | 1 + .../packages/default/modules/popup.variables | 4 + 8 files changed, 125 insertions(+), 29 deletions(-) diff --git a/server/documents/modules/popup.html.eco b/server/documents/modules/popup.html.eco index 48f46256f..607b76875 100755 --- a/server/documents/modules/popup.html.eco +++ b/server/documents/modules/popup.html.eco @@ -52,6 +52,27 @@ themes : ['Default']

Variations

+
+

Width

+

A popup can be extra wide to allow for longer content

+ + +
+ +
+

Fluid

+

A fluid popup will take up the entire width of its offset container

+
Show fluid popup
+
+
+
1
+
2
+
3
+
4
+
+
+
+

Size

A popup can vary in size

@@ -174,26 +195,62 @@ themes : ['Default']
+
+

Complex Content

+

An easier way to display complex content inside a popup, instead of generating it from data attributes, is to have the popup content as part of your page's html.

+

The easiest way to specify custom content for a popup, is to use the setting inline: true. This will let Semantic know to use the next sibling popup element after the activator as the popup content.

+ +
+ $('.example .menu .browse') + .popup({ + inline : true, + position : 'bottom left' + }) + ; +
+
+ + Home + + + Browse + + +
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+
+
+
-

Using Your Own Popup

-

When using an inline popup

+

Specifying a selector for a popup

+

If its not possible to include the popup content as the next sibling, you can also specify a custom selector to help link the popup contents to its activator.

- $('.example .teal.button') - .popup({ - on: 'click' - }) - ; - $('.example input') - .popup({ - on: 'focus' - }) - ; + $('.example .custom.button') + .popup({ + popup : $('.custom.popup'), + on : 'click' + }) + ;
-
Click Me
-
- - +
+
Show custom popup
+
+
+ I'm not on the same level as the button, but i can still be found.
@@ -236,7 +293,8 @@ themes : ['Default']
Hover Me
- +
+

Inline or relative to page

A popup can either be inserted directly after an element, or added as a child element to the page's body.

@@ -252,11 +310,11 @@ themes : ['Default'] }
- $('.inline.icon') - .popup({ - inline: true - }) - ; + $('.inline.icon') + .popup({ + inline: true + }) + ;
diff --git a/server/documents/views/list.html.eco b/server/documents/views/list.html.eco index de1481a70..f303ea74b 100755 --- a/server/documents/views/list.html.eco +++ b/server/documents/views/list.html.eco @@ -176,7 +176,7 @@ themes : ['Default']

Icon

-

A list item can have an icon

+

A list item can contain an icon

@@ -205,7 +205,7 @@ themes : ['Default']

Image

-

A list can contain an image

+

A list item can contain an image

diff --git a/server/files/javascript/popup.js b/server/files/javascript/popup.js index a7263dcb2..bb2a103ed 100755 --- a/server/files/javascript/popup.js +++ b/server/files/javascript/popup.js @@ -18,6 +18,13 @@ semantic.popup.ready = function() { }) ; + $('.fluid.example .button') + .popup({ + inline: true + }) + ; + + }; diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 83779afa9..0b6ed45d8 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -605,7 +605,7 @@ body.guide .main.container > * { height: 175px; } -#example.popup .example .popup { +#example.popup .inline.example .popup { color: #FF0000; } #example .position.example .icon { diff --git a/src/definitions/modules/popup.js b/src/definitions/modules/popup.js index 1136ecf33..cb9dea6f5 100755 --- a/src/definitions/modules/popup.js +++ b/src/definitions/modules/popup.js @@ -70,7 +70,7 @@ $.fn.popup = function(parameters) { module.refresh(); if(settings.on == 'click') { $module - .on('click', module.toggle) + .on('click' + eventNamespace, module.toggle) ; } else if( module.get.startEvent() ) { @@ -277,7 +277,7 @@ $.fn.popup = function(parameters) { if(!$popup) { return false; } - if(settings.inline) { + if(settings.inline || settings.popup) { return ( $popup.size() !== 0 ); } else { @@ -396,6 +396,7 @@ $.fn.popup = function(parameters) { offstage = {}, offstagePositions = [] ; + console.log($popup.width()); if(popup.position) { offstage = { top : (popup.position.top < boundary.top), @@ -464,7 +465,7 @@ $.fn.popup = function(parameters) { distanceAway = settings.distanceAway, - offset = (settings.inline) + offset = (settings.inline || settings.popup) ? $target.position() : $target.offset(), @@ -474,7 +475,7 @@ $.fn.popup = function(parameters) { position = position || $module.data(metadata.position) || settings.position; arrowOffset = arrowOffset || $module.data(metadata.offset) || settings.offset; // adjust for margin when inline - if(settings.inline) { + if(settings.inline || settings.popup) { if(position == 'left center' || position == 'right center') { arrowOffset += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10); distanceAway += -parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10); diff --git a/src/definitions/modules/popup.less b/src/definitions/modules/popup.less index 9e1b8022b..6f060dc68 100755 --- a/src/definitions/modules/popup.less +++ b/src/definitions/modules/popup.less @@ -204,6 +204,31 @@ Variations *******************************/ + +/*-------------- + Wide +---------------*/ + +.ui.wide.popup { + width: @wideWidth; + max-width: @wideWidth; +} +.ui.very.wide.popup { + width: @veryWideWidth; + max-width: @veryWideWidth; +} + + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.popup { + width: 100%; + max-width: 99999px; +} + + /*-------------- Colors ---------------*/ diff --git a/src/themes/packages/default/elements/icon.overrides b/src/themes/packages/default/elements/icon.overrides index 4f3687198..74c4c2f90 100755 --- a/src/themes/packages/default/elements/icon.overrides +++ b/src/themes/packages/default/elements/icon.overrides @@ -605,6 +605,7 @@ i.icon.magic:before { content: "\f0d0"; } i.icon.truck:before { content: "\f0d1"; } i.icon.currency:before { content: "\f0d6"; } i.icon.triangle.down:before { content: "\f0d7"; } +i.icon.dropdown:before { content: "\f0d7"; } i.icon.triangle.up:before { content: "\f0d8"; } i.icon.triangle.left:before { content: "\f0d9"; } i.icon.triangle.right:before { content: "\f0da"; } diff --git a/src/themes/packages/default/modules/popup.variables b/src/themes/packages/default/modules/popup.variables index 7a6c5cea4..b660612f7 100644 --- a/src/themes/packages/default/modules/popup.variables +++ b/src/themes/packages/default/modules/popup.variables @@ -67,6 +67,10 @@ Variations --------------------*/ +/* Wide */ +@wideWidth: 350px; +@veryWideWidth: 550px; + /* Inverted */ @invertedBackground: @black; @invertedColor: @white;