Skip to content

Commit

Permalink
Updated component to version 2.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@Semantic-Pusher-Robot
Semantic-Pusher-Robot committed Jul 1, 2015
1 parent 1a02e53 commit 7e2844f
Show file tree
Hide file tree
Showing 9 changed files with 228 additions and 78 deletions.
10 changes: 10 additions & 0 deletions RELEASE-NOTES.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
### Version 2.0.0 - June 30, 2015

- **Visibility** - Visibility and sticky now use a more performant [pub/sub pattern](http://davidwalsh.name/pubsub-javascript) that will only attach a single event to context `scroll`.
- **Sticky** - Sticky now internally caches current scroll position when `cantFit = true` to avoid getting DOM property on scroll.
- **Visibility/Sticky** - Visibility and sticky now refresh automatically after page content loading to deal with changes in position from images loading
- **Visibility/Sticky** - Visibility now uses pub/sub pattern to greatly improve scroll performance when attaching multiple events
- **Sticky** - Fix issue with sticky content scroll css transition causing element to scroll too slowly when cannot fit on screen.
- **Sticky** - Fix issues when `pushing: true` with sticky content having incorrect bottom spacing, when container has bottom padding
- **Sticky** - Fixed issue with sticky content animating width on display in some cases.

### Version 1.12.0 - April 13, 2015

- **Sticky** - Adds sticky module from `2.x` branch. Sticky elements now use pub/sub with drastically improved performance. Sticky elements that do not fit on page will now scroll at the same speed as the page is scrolled instead of slower.
Expand Down
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@
"framework"
],
"license": "MIT",
"version": "1.12.3"
"version": "2.0.0"
}
130 changes: 100 additions & 30 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/*!
* # Semantic UI 1.12.3 - Sticky
* # Semantic UI 2.0.0 - Sticky
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
Expand Down Expand Up @@ -44,8 +44,8 @@ module.exports = function(parameters) {

$module = $(this),
$window = $(window),
$container = $module.offsetParent(),
$scroll = $(settings.scrollContext),
$container,
$context,

selector = $module.selector || '',
Expand All @@ -66,6 +66,7 @@ module.exports = function(parameters) {

initialize: function() {

module.determineContainer();
module.determineContext();
module.verbose('Initializing sticky', settings, $container);

Expand Down Expand Up @@ -111,7 +112,7 @@ module.exports = function(parameters) {
observer = new MutationObserver(function(mutations) {
clearTimeout(module.timer);
module.timer = setTimeout(function() {
module.verbose('DOM tree modified, updating sticky menu');
module.verbose('DOM tree modified, updating sticky menu', mutations);
module.refresh();
}, 100);
});
Expand All @@ -127,6 +128,10 @@ module.exports = function(parameters) {
}
},

determineContainer: function() {
$container = $module.offsetParent();
},

determineContext: function() {
if(settings.context) {
$context = $(settings.context);
Expand Down Expand Up @@ -177,7 +182,7 @@ module.exports = function(parameters) {
},
scroll: function() {
requestAnimationFrame(function() {
$scroll.trigger('scrollchange' + eventNamespace, $scroll.scrollTop() );
$scroll.triggerHandler('scrollchange' + eventNamespace, $scroll.scrollTop() );
});
},
scrollchange: function(event, scrollPosition) {
Expand All @@ -188,8 +193,11 @@ module.exports = function(parameters) {

refresh: function(hardRefresh) {
module.reset();
if(!settings.context) {
module.determineContext();
}
if(hardRefresh) {
$container = $module.offsetParent();
module.determineContainer();
}
module.save.positions();
module.stick();
Expand All @@ -200,7 +208,7 @@ module.exports = function(parameters) {
sticky: function() {
var
$element = $('<div/>'),
element = $element.get()
element = $element[0]
;
$element.addClass(className.supported);
return($element.css('position').match('sticky'));
Expand All @@ -211,6 +219,9 @@ module.exports = function(parameters) {
lastScroll: function(scroll) {
module.lastScroll = scroll;
},
elementScroll: function(scroll) {
module.elementScroll = scroll;
},
positions: function() {
var
window = {
Expand All @@ -229,6 +240,9 @@ module.exports = function(parameters) {
offset : $context.offset(),
height : $context.outerHeight(),
bottomPadding : parseInt($context.css('padding-bottom'), 10)
},
container = {
height: $container.outerHeight()
}
;
module.cache = {
Expand Down Expand Up @@ -282,6 +296,9 @@ module.exports = function(parameters) {
;
},
currentElementScroll: function() {
if(module.elementScroll) {
return module.elementScroll;
}
return ( module.is.top() )
? Math.abs(parseInt($module.css('top'), 10)) || 0
: Math.abs(parseInt($module.css('bottom'), 10)) || 0
Expand All @@ -296,8 +313,7 @@ module.exports = function(parameters) {
delta = module.get.scrollChange(scroll),
maxScroll = (element.height - window.height + settings.offset),
elementScroll = module.get.currentElementScroll(),
possibleScroll = (elementScroll + delta),
elementScroll
possibleScroll = (elementScroll + delta)
;
if(module.cache.fits || possibleScroll < 0) {
elementScroll = 0;
Expand All @@ -313,6 +329,12 @@ module.exports = function(parameters) {
},

remove: {
lastScroll: function() {
delete module.lastScroll;
},
elementScroll: function(scroll) {
delete module.elementScroll;
},
offset: function() {
$module.css('margin-top', '');
}
Expand All @@ -321,7 +343,9 @@ module.exports = function(parameters) {
set: {
offset: function() {
module.verbose('Setting offset on element', settings.offset);
$module.css('margin-top', settings.offset);
$module
.css('margin-top', settings.offset)
;
},
containerSize: function() {
var
Expand All @@ -330,19 +354,30 @@ module.exports = function(parameters) {
if(tagName === 'HTML' || tagName == 'body') {
// this can trigger for too many reasons
//module.error(error.container, tagName, $module);
$container = $module.offsetParent();
module.determineContainer();
}
else {
if( Math.abs($container.height() - module.cache.context.height) > 5) {
if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) {
module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
$container.css({
height: module.cache.context.height
});
}
}
},
minimumSize: function() {
var
element = module.cache.element
;
$container
.css('min-height', element.height)
;
},
scroll: function(scroll) {
module.debug('Setting scroll on element', scroll);
if(module.elementScroll == scroll) {
return;
}
if( module.is.top() ) {
$module
.css('bottom', '')
Expand Down Expand Up @@ -414,17 +449,14 @@ module.exports = function(parameters) {
elementVisible = (element.height !== 0)
;

// save current scroll for next run
module.save.lastScroll(scroll.top);

if(elementVisible) {

if( module.is.initialPosition() ) {
if(scroll.top >= context.bottom) {
if(scroll.top > context.bottom) {
module.debug('Element bottom of container');
module.bindBottom();
}
else if(scroll.top >= element.top) {
else if(scroll.top > element.top) {
module.debug('Element passed, fixing element to page');
module.fixTop();
}
Expand Down Expand Up @@ -482,15 +514,21 @@ module.exports = function(parameters) {
}
}
}

// save current scroll for next run
module.save.lastScroll(scroll.top);
module.save.elementScroll(elementScroll);
},

bindTop: function() {
module.debug('Binding element to top of parent container');
module.remove.offset();
$module
.css('left' , '')
.css('top' , '')
.css('margin-bottom' , '')
.css({
left : '',
top : '',
marginBottom : ''
})
.removeClass(className.fixed)
.removeClass(className.bottom)
.addClass(className.bound)
Expand All @@ -503,9 +541,11 @@ module.exports = function(parameters) {
module.debug('Binding element to bottom of parent container');
module.remove.offset();
$module
.css('left' , '')
.css('top' , '')
.css('margin-bottom' , module.cache.context.bottomPadding)
.css({
left : '',
top : '',
marginBottom : module.cache.context.bottomPadding
})
.removeClass(className.fixed)
.removeClass(className.top)
.addClass(className.bound)
Expand All @@ -523,10 +563,14 @@ module.exports = function(parameters) {

fixTop: function() {
module.debug('Fixing element to top of page');
module.set.minimumSize();
module.set.offset();
$module
.css('left', module.cache.element.left)
.css('bottom' , '')
.css({
left : module.cache.element.left,
bottom : '',
marginBottom : ''
})
.removeClass(className.bound)
.removeClass(className.bottom)
.addClass(className.fixed)
Expand All @@ -537,10 +581,14 @@ module.exports = function(parameters) {

fixBottom: function() {
module.debug('Sticking element to bottom of page');
module.set.minimumSize();
module.set.offset();
$module
.css('left', module.cache.element.left)
.css('bottom' , '')
.css({
left : module.cache.element.left,
bottom : '',
marginBottom : ''
})
.removeClass(className.bound)
.removeClass(className.top)
.addClass(className.fixed)
Expand Down Expand Up @@ -576,6 +624,7 @@ module.exports = function(parameters) {
module.unfix();
module.resetCSS();
module.remove.offset();
module.remove.lastScroll();
},

resetCSS: function() {
Expand Down Expand Up @@ -773,23 +822,44 @@ module.exports.settings = {
namespace : 'sticky',

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

// whether to stick in the opposite direction on scroll up
pushing : false,

context : false,

// Context to watch scroll events
scrollContext : window,

// Offset to adjust scroll
offset : 0,

// Offset to adjust scroll when attached to bottom of screen
bottomOffset : 0,

observeChanges : true,
jitter : 5, // will only set container height if difference between context and container is larger than this number

// Whether to automatically observe changes with Mutation Observers
observeChanges : false,

// Called when position is recalculated
onReposition : function(){},

// Called on each scroll
onScroll : function(){},

// Called when element is stuck to viewport
onStick : function(){},

// Called when element is unstuck from viewport
onUnstick : function(){},

// Called when element reaches top of context
onTop : function(){},

// Called when element reaches bottom of context
onBottom : function(){},

error : {
Expand Down
2 changes: 1 addition & 1 deletion package.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Package.describe({
name : 'semantic:ui-sticky',
summary : 'Semantic UI - Sticky: Single component release',
version : '1.12.3',
version : '2.0.0',
git : 'git://github.com/Semantic-Org/UI-Sticky.git',
});

Expand Down
12 changes: 6 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
{
"name": "semantic-ui-sticky",
"version": "1.12.3",
"title": "Semantic UI - Sticky",
"description": "Single component release of sticky",
"name": "semantic",
"version": "1.0.0",
"title": "Semantic UI",
"description": "Semantic empowers designers and developers by creating a shared vocabulary for UI.",
"homepage": "http://www.semantic-ui.com",
"author": "Jack Lukic <[email protected]>",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/Semantic-Org/UI-Sticky.git"
"url": "git://github.com/Semantic-Org/Semantic-UI.git"
},
"bugs": {
"url": "https://github.com/Semantic-Org/Semantic-UI/issues"
},
"devDependencies": {}
}
}
Loading

0 comments on commit 7e2844f

Please sign in to comment.