Skip to content

Commit

Permalink
Fixes to popup documentation, removing several debug: true values and…
Browse files Browse the repository at this point in the history 
… console log
  • Loading branch information
@jlukic
jlukic committed Sep 4, 2014
1 parent e515b99 commit 16545a5
Show file tree
Hide file tree
Showing 7 changed files with 117 additions and 44 deletions.
92 changes: 76 additions & 16 deletions server/documents/modules/popup.html.eco
View file
Expand Up @@ -90,17 +90,51 @@ themes : ['Default']

<div class="ui tab" data-tab="usage">

<h2 class="ui dividing header">Initializing</h2>
<h2 class="ui dividing header">Usage</h2>

<h3 class="ui header">Initializing an popup</h3>
<h3 class="ui header">Initializing A Popup</h3>
<p>A popup is initialized on an activating element</p>
<div class="code">
$('.ui.popup')
$('.activating.element')
.popup()
;
</div>

<div class="no example">
<h3 class="ui header">Including content with HTML Metadata</h3>
<h3 class="ui header">Using a Pre-existing Popup</h3>
<p>Using a pre-existing popup allows for you to include complex html inside your popup.<p>
<h4>As a sibling element</h4>
<p>If you include your popup on page load as an adjacent sibling element to your activating element it can be found automatically.</p>
<p>To instruct popup to look inline for your popup element you can initialize it with the <code>inline</code> parameter</p>
<div class="code" data-type="javascript">
$('.button')
.popup({
inline: true
})
;
</div>
<div class="code" data-type="html">
<i class="ui button">Activator</i>
<div class="ui special popup">
<div class="header">Custom Header</div>
<div class="ui button">Click Me</div>
</div>
</div>
</div>
<div class="no example">
<h4>Anywhere on the page</h4>
<p>If you cannot include your popup element as a sibling element, you can specify a custom selector to retrieve your popup</p>
<div class="code" data-type="javascript">
$('.button')
.popup({
popup: '.special.popup'
})
;
</div>
</div>

<div class="no example">
<h3 class="ui header">Specifying Content In Metadata</h3>
<p>Frequently used settings like, title, content, html, or offset or variation, can be included in html metadata<p>
<div class="ui info icon ignored message">
<i class="info icon"></i>
Expand All @@ -122,16 +156,17 @@ themes : ['Default']
</ul>
</div>
</div>
<h4 class="ui header">Initializing with metadata</h4>
<div class="code" data-type="html">
<i class="heart icon" title="Hello I am a popup"></i>
</div>
<div class="ui horizontal divider">Or</div>
<h4 class="ui header">Initializing with javascript content</h4>
</div>
<div class="no example">
<h3 class="ui header">Specifying Content In Javascript</h3>
<div class="code">
$('.ui.popup')
.popup({
content: 'Hello I am a popup'
title : 'Popup Title',
content : 'Hello I am a popup'
})
;
</div>
Expand Down Expand Up @@ -197,10 +232,12 @@ themes : ['Default']
<div class="ui tab" data-tab="examples">
<div class="example">
<h3 class="ui header">Wide Popup Menu</h3>
<p>An easier way to display complex content, like a wide popup menu is to have the popup content as a pre-existing part of your page's html.</p>
<p>Using the setting <code>inline: true</code> will let Semantic know to display the next sibling <code>ui popup</code> element after the activator.</p>
<div class="ignored">
<p>An easier way to display complex content, like a wide popup menu is to have the popup content as a pre- existing part of your page's html.</p>
<p>Using the setting <code>inline: true</code> will let Semantic know to display the next sibling <code>ui popup</code> element after the activator.</p>

<p>Tweaking settings like the delay for show, and hide, and making the menu hoverable will help it function more like a dropdown menu</p>
<p>Tweaking settings like the delay for show, and hide, and making the menu hoverable will help it function more like a dropdown menu</p>
</div>

<div class="evaluated code">
$('.example .menu .browse')
Expand All @@ -224,18 +261,41 @@ themes : ['Default']
Browse
</a>
<div class="ui very wide popup">
<div class="ui four column divided fitted grid">
<div class="ui four column fitted grid">
<div class="ui column">
1
<h5 class="ui header">Fabrics</h5>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="ui column">
2
<h5 class="ui header">Sizes</h5>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="ui column">
3
<h5 class="ui header">Colors</h5>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="ui column">
4
<h5 class="ui header">Types</h5>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
Expand Down
29 changes: 17 additions & 12 deletions server/files/javascript/semantic.js
View file
Expand Up @@ -311,7 +311,8 @@ semantic.ready = function() {
$annotation = $example.find('.annotation'),
$code = $annotation.find('.code'),
$header = $example.not('.another').children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
$demo = $example.children().not($header).not('i.code:first-child, .code, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$ignored = $('i.code:first-child, .code, .existing, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$demo = $example.children().not($header).not($ignored),
code = ''
;
if( $code.size() === 0) {
Expand All @@ -329,14 +330,14 @@ semantic.ready = function() {
},
createCode: function(type) {
var
$example = $(this).closest('.example'),
$header = $example.children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
$annotation = $example.find('.annotation'),
$code = $annotation.find('.code'),
$demo = $example.children().not($header).not('.ui.popup, i.code:first-child, .code, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
code = $example.data('code') || $.proxy(handler.generateCode, this)()
$example = $(this).closest('.example'),
$header = $example.children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
$annotation = $example.find('.annotation'),
$code = $annotation.find('.code'),
$ignoredContent = $('.ui.popup, i.code:first-child, .code, .existing.segment, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$demo = $example.children().not($header).not($ignoredContent),
code = $example.data('code') || $.proxy(handler.generateCode, this)()
;

if( $code.hasClass('existing') ) {
$annotation.show();
$code.removeClass('existing');
Expand All @@ -350,7 +351,7 @@ semantic.ready = function() {
;
}

if( $example.find('.ace_editor').size() === 0) {
if( $example.find('.instructive').size() === 0) {
$code = $('<div/>')
.data('type', 'html')
.addClass('code')
Expand Down Expand Up @@ -427,6 +428,7 @@ semantic.ready = function() {
$code = $(this).show(),
code = $code.html(),
existingCode = $code.hasClass('existing'),
evaluatedCode = $code.hasClass('evaluated'),
contentType = $code.data('type') || 'javascript',
title = $code.data('title') || false,
demo = $code.data('demo') || false,
Expand All @@ -439,8 +441,11 @@ semantic.ready = function() {
text : 'Command Line',
sh : 'Command Line'
},
indent = handler.getIndent(code) || 4,
indent = handler.getIndent(code) || 2,
padding = 20,
name = (evaluatedCode)
? 'existing'
: 'instructive',
whiteSpace,
$label,
editor,
Expand All @@ -460,7 +465,7 @@ semantic.ready = function() {
}

// evaluate if specified
if($code.hasClass('evaluated')) {
if(evaluatedCode) {
eval(code);
}

Expand All @@ -481,7 +486,7 @@ semantic.ready = function() {
codeHeight = editorSession.getScreenLength() * editor.renderer.lineHeight + padding;
$(this)
.height(codeHeight + 'px')
.wrap('<div class="ui instructive segment">')
.wrap('<div class="ui ' + name + ' segment">')
;
// add label
if(title) {
Expand Down
10 changes: 7 additions & 3 deletions src/definitions/collections/menu.less
View file
Expand Up @@ -331,9 +331,12 @@
Hover
---------------*/

.ui.link.menu .item:hover,
.ui.menu .link.item:hover,
.ui.menu a.item:hover {
.ui.link.menu > .item:hover,
.ui.menu > .link.item:hover,
.ui.menu > a.item:hover,
.ui.link.menu .menu > .item:hover,
.ui.menu .menu > .link.item:hover,
.ui.menu .menu > a.item:hover {
cursor: pointer;
background: @hoverBackground;
color: @hoverColor;
Expand Down Expand Up @@ -1516,6 +1519,7 @@
padding-top: @fixedGridMargin;
}


/*-------------------
Pointing
--------------------*/
Expand Down
6 changes: 3 additions & 3 deletions src/definitions/modules/popup.js
View file
Expand Up @@ -835,9 +835,9 @@ $.fn.popup.settings = {

name : 'Popup',

debug : true,
verbose : true,
performance : true,
debug : false,
verbose : false,
performance : false,
namespace : 'popup',

onCreate : function(){},
Expand Down
8 changes: 2 additions & 6 deletions src/definitions/modules/popup.less
View file
Expand Up @@ -41,15 +41,15 @@
border-radius: @borderRadius;
box-shadow: @boxShadow;
}
.ui.popup .header {
.ui.popup > .header {
padding: 0em;

font-family: @headerFont;
font-size: @headerFontSize;
line-height: @headerLineHeight;
font-weight: bold;
}
.ui.popup .header + .content {
.ui.popup > .header + .content {
padding-top: @headerDistance;
}

Expand All @@ -66,10 +66,6 @@
box-shadow: @arrowBoxShadow;
}

.ui.popup .ui.button {
width: @popupButtonWidth;
}

/*******************************
Types
*******************************/
Expand Down
6 changes: 3 additions & 3 deletions src/definitions/modules/tab.js
View file
Expand Up @@ -709,9 +709,9 @@ $.fn.tab.settings = {
name : 'Tab',
namespace : 'tab',

debug : true,
verbose : true,
performance : true,
debug : false,
verbose : false,
performance : false,

// only called first time a tab's content is loaded (when remote source)
onTabInit : function(tabPath, parameterArray, historyEvent) {},
Expand Down
10 changes: 9 additions & 1 deletion src/definitions/views/list.less
View file
Expand Up @@ -13,7 +13,7 @@
Theme
*******************************/

@type : 'view';
@type : 'element';
@element : 'list';

@import '../../semantic.config';
Expand Down Expand Up @@ -188,6 +188,14 @@ ol.ui.list ol,
margin-left: @floatMargin;
}

/*******************************
Coupling
*******************************/

.ui.menu .ui.list .item:before {
border: none;
background: none;
}


/*******************************
Expand Down

0 comments on commit 16545a5

Please sign in to comment.