+
diff --git a/server/documents/modules/transition.html.eco b/server/documents/modules/transition.html.eco
index ebf10da76..1f463a538 100755
--- a/server/documents/modules/transition.html.eco
+++ b/server/documents/modules/transition.html.eco
@@ -18,7 +18,6 @@ type : 'UI Module'
-
@@ -188,7 +187,9 @@ type : 'UI Module'
-
+
+
+
@@ -346,7 +347,9 @@ type : 'UI Module'
-
+
+
+
diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js
index 537f44d53..89ca44978 100755
--- a/server/files/javascript/semantic.js
+++ b/server/files/javascript/semantic.js
@@ -501,7 +501,7 @@ semantic.ready = function() {
// add run code button
if(demo) {
$('
')
- .addClass('ui pointing below black label')
+ .addClass('ui pointing below label')
.html('Run Code')
.on('click', function() {
eval(code);
@@ -587,9 +587,11 @@ semantic.ready = function() {
context : '.main.container',
childrenOnly : true,
history : true,
- onTabInit : handler.makeCode,
+ onTabInit : function() {
+ handler.makeCode();
+ },
onTabLoad : function() {
-
+ $sticky.filter(':visible').sticky('refresh');
}
})
;
@@ -664,7 +666,10 @@ semantic.ready = function() {
;
$sticky
- .sticky()
+ .sticky({
+ context : '.main.container',
+ pushing : true
+ })
;
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index 3dbce0e42..6eb73336c 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -994,7 +994,7 @@ body#example {
display: none;
}
/*rtl:ignore*/
-/*#example div.code {
+#example div.code {
position: relative;
width: 100%;
height: 200px;
@@ -1010,11 +1010,10 @@ body#example {
padding-right: 20px;
padding-left: 10px;
}
-
#example div.code .ace_bracket {
background-color: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.1);
-}*/
+}
/* #example div.code .ace_indent-guide:after {
content: '';
position: absolute;
@@ -1376,27 +1375,15 @@ body.progress .ui.progress .bar {
display: none;
}
-#example .fixed.column .sticky-wrapper {
+#example .fixed.column {
position: relative;
- height: 0px !important;
}
-
-#example .fixed.column .fixed,
-#example .fixed.segment .fixed {
- position: fixed;
- top: 65px;
- -webkit-perspective: 1000px;
- -moz-perspective: 1000px;
- -ms-perspective: 1000px;
- perspective: 1000px;
-
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -ms-transform-style: preserve-3d;
- transform-style: preserve-3d;
+#example .fixed.column .sticky {
+ padding-top: 3em;
}
+
/*******************************
Responsive
*******************************/
@@ -1620,6 +1607,15 @@ body.progress .ui.progress .bar {
#example.transition .examples .pointing.below.label {
display: none;
}
+ #example .examples {
+ margin-right: 220px;
+ padding: 1px;
+ }
+ #example .fixed.column,
+ #example .fixed.column .fixed {
+ float: right;
+ width: 200px;
+ }
}
@media only screen and (min-width : 998px) {
#example.index .main.menu .container {
@@ -1627,7 +1623,7 @@ body.progress .ui.progress .bar {
padding: 0% 8%;
}
#example .examples {
- margin-right: 400px;
+ margin-right: 330px;
padding: 1px;
}
#example .fixed.column,
diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco
index 5c4721bb7..6e3095c10 100755
--- a/server/layouts/default.html.eco
+++ b/server/layouts/default.html.eco
@@ -119,6 +119,7 @@
<% if 'development' in @getEnvironments(): %>
+
diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
index e4d214de2..5262ebc23 100755
--- a/src/definitions/elements/segment.less
+++ b/src/definitions/elements/segment.less
@@ -45,13 +45,14 @@
margin-bottom: 0em;
}
+/* Testing removal
.ui.segment:after {
content: '';
display: block;
height: 0px;
clear: both;
visibility: hidden;
-}
+}*/
.ui.vertical.segment {
margin: 0em;
diff --git a/src/definitions/modules/popup.js b/src/definitions/modules/popup.js
index 57f8632a1..61fcbfb3b 100755
--- a/src/definitions/modules/popup.js
+++ b/src/definitions/modules/popup.js
@@ -396,7 +396,6 @@ $.fn.popup = function(parameters) {
offstage = {},
offstagePositions = []
;
- console.log($popup.width());
if(popup.position) {
offstage = {
top : (popup.position.top < boundary.top),
diff --git a/src/definitions/modules/sticky.js b/src/definitions/modules/sticky.js
index 55ee1d55f..84532cd32 100755
--- a/src/definitions/modules/sticky.js
+++ b/src/definitions/modules/sticky.js
@@ -28,22 +28,23 @@ $.fn.sticky = function(parameters) {
$allModules
.each(function() {
var
- settings = $.extend(true, {}, $.fn.sticky.settings, parameters),
+ settings = $.extend(true, {}, $.fn.sticky.settings, parameters),
- className = settings.className,
- namespace = settings.namespace,
- error = settings.error,
+ className = settings.className,
+ namespace = settings.namespace,
+ error = settings.error,
- eventNamespace = '.' + namespace,
- moduleNamespace = 'module-' + namespace,
+ eventNamespace = '.' + namespace,
+ moduleNamespace = 'module-' + namespace,
- $module = $(this),
- $window = $(window),
- $container = $module.offsetParent(),
+ $module = $(this),
+ $window = $(window),
+ $container = $module.offsetParent(),
+ $scroll = $(settings.scrollContext),
$context,
- selector = $module.selector || '',
- instance = $module.data(moduleNamespace),
+ selector = $module.selector || '',
+ instance = $module.data(moduleNamespace),
requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
@@ -52,12 +53,16 @@ $.fn.sticky = function(parameters) {
|| function(callback) { setTimeout(callback, 0); },
element = this,
+ observer,
module
;
module = {
initialize: function() {
+ if( !$module.is(':visible') ) {
+ module.error(error.visible, $module);
+ }
if(settings.context) {
$context = $(settings.context);
}
@@ -73,10 +78,13 @@ $.fn.sticky = function(parameters) {
}
$window
.on('resize' + eventNamespace, module.event.resize)
+ ;
+ $scroll
.on('scroll' + eventNamespace, module.event.scroll)
;
module.verbose('Initializing sticky', settings, $container);
module.save.positions();
+ module.observeChanges();
module.instantiate();
},
@@ -100,6 +108,30 @@ $.fn.sticky = function(parameters) {
;
},
+ observeChanges: function() {
+ var
+ context = $context[0]
+ ;
+ if(MutationObserver !== undefined) {
+ observer = new MutationObserver(function(mutations) {
+ clearTimeout(module.timer);
+ module.timer = setTimeout(function() {
+ module.verbose('DOM tree modified, updating sticky menu');
+ module.refresh();
+ }, 200);
+ });
+ observer.observe(element, {
+ childList : true,
+ subtree : true
+ });
+ observer.observe(context, {
+ childList : true,
+ subtree : true
+ });
+ module.debug('Setting up mutation observer', observer);
+ }
+ },
+
event: {
resize: function() {
requestAnimationFrame(module.refresh);
@@ -188,7 +220,7 @@ $.fn.sticky = function(parameters) {
var
direction = 'down'
;
- scroll = scroll || $window.scrollTop();
+ scroll = scroll || $scroll.scrollTop();
if(module.lastScroll !== undefined) {
if(module.lastScroll < scroll) {
direction = 'down';
@@ -206,14 +238,14 @@ $.fn.sticky = function(parameters) {
;
},
offsetChange: function(scroll) {
- scroll = scroll || $window.scrollTop();
+ scroll = scroll || $scroll.scrollTop();
return (module.lastScroll)
? Math.abs(scroll - module.lastScroll)
: 0
;
},
newOffset: function(scroll) {
- scroll = scroll || $window.scrollTop();
+ scroll = scroll || $scroll.scrollTop();
var
currentOffset = module.get.currentOffset(),
delta = module.get.offsetChange(scroll)
@@ -228,10 +260,8 @@ $.fn.sticky = function(parameters) {
tagName = $container.get(0).tagName
;
if(tagName === 'HTML' || tagName == 'body') {
- if($module.is(':visible')) {
- module.error(error.container, tagName, $module);
- $container = $module.offsetParent();
- }
+ module.error(error.container, tagName, $module);
+ $container = $module.offsetParent();
}
else {
module.debug('Settings container size', module.cache.context.height);
@@ -239,12 +269,14 @@ $.fn.sticky = function(parameters) {
}
},
size: function() {
- $module
- .css({
- width : module.cache.element.width,
- height : module.cache.element.height
- })
- ;
+ if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
+ $module
+ .css({
+ width : module.cache.element.width,
+ height : module.cache.element.height
+ })
+ ;
+ }
}
},
@@ -270,7 +302,7 @@ $.fn.sticky = function(parameters) {
element = cache.element,
window = cache.window,
context = cache.context,
- scrollTop = $window.scrollTop(),
+ scrollTop = $scroll.scrollTop(),
screen = {
top : scrollTop + settings.offset,
bottom : scrollTop + window.height + settings.offset
@@ -283,101 +315,103 @@ $.fn.sticky = function(parameters) {
;
module.save.scroll(scrollTop);
-
- if( module.is.fixed() ) {
- if(fits) {
- // if module is fixed top
- if(module.is.top()) {
- if( screen.top < element.top ) {
- module.unfix();
+ if(element.height !== 0) {
+
+ if( module.is.fixed() ) {
+ if(fits) {
+ // if module is fixed top
+ if(module.is.top()) {
+ if( screen.top < element.top ) {
+ module.unfix();
+ }
+ else if( fixedBottom > context.bottom ) {
+ module.debug('Top attached rail has reached bottom of container');
+ module.bindBottom();
+ }
}
- else if( fixedBottom > context.bottom ) {
- module.debug('Top attached rail has reached bottom of container');
+ // if module is fixed bottom
+ if(module.is.bottom() ) {
+ // top edge
+ if( (screen.bottom - element.height) < element.top) {
+ module.unfix();
+ }
+ // bottom edge
+ else if(screen.bottom > context.bottom) {
+ module.debug('Bottom attached rail has reached bottom of container');
+ module.bindBottom();
+ }
+ }
+ if( fixedBottom > context.bottom ) {
module.bindBottom();
}
}
- // if module is fixed bottom
- if(module.is.bottom() ) {
- // top edge
- if( (screen.bottom - element.height) < element.top) {
- module.unfix();
- }
- // bottom edge
- else if(screen.bottom > context.bottom) {
- module.debug('Bottom attached rail has reached bottom of container');
+ else {
+ if(screen.bottom > context.bottom) {
module.bindBottom();
}
- }
- if( fixedBottom > context.bottom ) {
- module.bindBottom();
+ else if(elementPassed) {
+ if(module.is.top() && direction == 'down') {
+ module.debug('Stuck content at bottom edge');
+ if(newOffset >= (element.height - window.height)) {
+ $module
+ .css('top', '')
+ ;
+ module.stickBottom();
+ }
+ else {
+ $module
+ .css('top', -newOffset)
+ ;
+ }
+ }
+ if(module.is.bottom() && direction == 'up') {
+ module.debug('Stuck content at top edge');
+ if(newOffset >= (element.height - window.height)) {
+ $module
+ .css('bottom', '')
+ ;
+ module.stickTop();
+ }
+ else {
+ $module
+ .css('bottom', -newOffset)
+ ;
+ }
+ }
+ }
+ else {
+ module.unfix();
+ }
}
}
else {
- if(screen.bottom > context.bottom) {
+ // determine if needs to be bound
+ if(screen.top + element.height > context.bottom) {
module.bindBottom();
}
- else if(elementPassed) {
- if(module.is.top() && direction == 'down') {
- module.debug('Stuck content at bottom edge');
- if(newOffset >= (element.height - window.height)) {
- $module
- .css('top', '')
- ;
- module.stickBottom();
+ if(fits) {
+ // fix to bottom of screen on way back up
+ if(module.is.bottom() ) {
+ if(settings.pushing) {
+ if(module.is.bound() && screen.bottom < context.bottom ) {
+ module.stickBottom();
+ }
}
else {
- $module
- .css('top', -newOffset)
- ;
+ if(module.is.bound() && screen.top < context.bottom - element.height) {
+ module.stickTop();
+ }
}
}
- if(module.is.bottom() && direction == 'up') {
- module.debug('Stuck content at top edge');
- if(newOffset >= (element.height - window.height)) {
- $module
- .css('bottom', '')
- ;
- module.stickTop();
- }
- else {
- $module
- .css('bottom', -newOffset)
- ;
- }
+ else if(screen.top >= element.top && screen.top < context.bottom - element.height) {
+ module.stickTop();
}
}
else {
- module.unfix();
- }
- }
- }
- else {
- // determine if needs to be bound
- if(screen.top + element.height > context.bottom) {
- module.bindBottom();
- }
- if(fits) {
- // fix to bottom of screen on way back up
- if(module.is.bottom() ) {
- if(settings.pushing) {
- if(module.is.bound() && screen.bottom < context.bottom ) {
- module.stickBottom();
- }
- }
- else {
- if(module.is.bound() && screen.top < context.bottom - element.height) {
- module.stickTop();
- }
+ if(elementPassed && screen.bottom < context.bottom ) {
+ module.stickBottom();
}
}
- else if(screen.top >= element.top && screen.top < context.bottom - element.height) {
- module.stickTop();
- }
- }
- else {
- if(elementPassed && screen.bottom < context.bottom ) {
- module.stickBottom();
- }
}
}
},
@@ -541,7 +575,7 @@ $.fn.sticky = function(parameters) {
});
}
clearTimeout(module.performance.timer);
- module.performance.timer = setTimeout(module.performance.display, 100);
+ module.performance.timer = setTimeout(module.performance.display, 0);
},
display: function() {
var
@@ -650,27 +684,29 @@ $.fn.sticky = function(parameters) {
$.fn.sticky.settings = {
- name : 'Sticky',
- namespace : 'sticky',
+ name : 'Sticky',
+ namespace : 'sticky',
- verbose : true,
- debug : false,
- performance : true,
+ verbose : false,
+ debug : false,
+ performance : false,
- pushing : false,
+ pushing : false,
- context : false,
- offset : 0,
+ context : false,
+ scrollContext : window,
+ offset : 0,
- onReposition : function(){},
- onScroll : function(){},
- onStick : function(){},
- onUnstick : function(){},
- onTop : function(){},
- onBottom : function(){},
+ onReposition : function(){},
+ onScroll : function(){},
+ onStick : function(){},
+ onUnstick : function(){},
+ onTop : function(){},
+ onBottom : function(){},
- error : {
+ error : {
container : 'Sticky element must be inside a relative container',
+ visible : 'Element is hidden, you must call refresh after element becomes visible',
method : 'The method you called is not defined.',
invalidContext : 'Context specified does not exist'
},