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

Fix image visibility to only occur when on screen

pull/2300/head
jlukic 9 years ago
parent
17ef6ba203
commit
c72f790bb4
1 changed files with 69 additions and 67 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 136
      src/definitions/behaviors/visibility.js

136
src/definitions/behaviors/visibility.js
View File

@ -159,38 +159,6 @@ $.fn.visibility = function(parameters) {
.on('scroll' + eventNamespace, module.event.scroll) .on('scroll' + eventNamespace, module.event.scroll)
.on('scrollchange' + eventNamespace, module.event.scrollchange) .on('scrollchange' + eventNamespace, module.event.scrollchange)
; ;
},
imageLoad: function() {
var
$images = $module.find('img'),
imageCount = $images.length,
index = imageCount,
loadedCount = 0,
images = [],
cache = [],
cacheImage = document.createElement('img'),
handleLoad = function() {
loadedCount++;
if(loadedCount >= imageCount) {
module.debug('Images finished loading inside element, refreshing position');
module.refresh();
}
}
;
if(imageCount > 0) {
$images
.each(function() {
images.push( $(this).attr('src') );
})
;
while(index--) {
cacheImage = document.createElement('img');
cacheImage.onload = handleLoad;
cacheImage.onerror = handleLoad;
cacheImage.src = images[index];
cache.push(cacheImage);
}
}
} }
}, },
@ -279,8 +247,8 @@ $.fn.visibility = function(parameters) {
settings.observeChanges = false; settings.observeChanges = false;
// show when top visible // show when top visible
settings.onTopVisible = function() {
module.debug('Image top visible', element);
settings.onOnScreen = function() {
module.debug('Image on screen', element);
module.precache(src, function() { module.precache(src, function() {
module.set.image(src); module.set.image(src);
}); });
@ -291,32 +259,17 @@ $.fn.visibility = function(parameters) {
module.debug('Setting up fixed'); module.debug('Setting up fixed');
settings.once = false; settings.once = false;
settings.observeChanges = false; settings.observeChanges = false;
settings.refreshOnLoad = false;
settings.initialCheck = true;
settings.refreshOnLoad = true;
if(!parameters.transition) { if(!parameters.transition) {
settings.transition = false; settings.transition = false;
} }
$placeholder = $module
.clone(false)
.css('display', 'none')
.addClass(className.placeholder)
.insertAfter($module)
;
module.create.placeholder();
module.debug('Added placeholder', $placeholder); module.debug('Added placeholder', $placeholder);
settings.onTopPassed = function() { settings.onTopPassed = function() {
module.debug('Element passed, adding fixed position', $module); module.debug('Element passed, adding fixed position', $module);
$placeholder
.css('display', 'block')
.css('visibility', 'hidden')
;
$module
.addClass(className.fixed)
.css({
position : 'fixed',
top : settings.offset + 'px',
left : 'auto',
zIndex : '1'
})
;
module.show.placeholder();
module.set.fixed();
if(settings.transition) { if(settings.transition) {
if($.fn.transition !== undefined) { if($.fn.transition !== undefined) {
$module.transition(settings.transition, settings.duration); $module.transition(settings.transition, settings.duration);
@ -325,24 +278,56 @@ $.fn.visibility = function(parameters) {
}; };
settings.onTopPassedReverse = function() { settings.onTopPassedReverse = function() {
module.debug('Element returned to position, removing fixed', $module); module.debug('Element returned to position, removing fixed', $module);
$placeholder
.css('display', 'none')
.css('visibility', '')
;
$module
.removeClass(className.fixed)
.css({
position : '',
top : '',
left : '',
zIndex : ''
})
;
module.hide.placeholder();
module.remove.fixed();
}; };
} }
}, },
create: {
placeholder: function() {
module.verbose('Creating fixed position placeholder');
$placeholder = $module
.clone(false)
.css('display', 'none')
.addClass(className.placeholder)
.insertAfter($module)
;
}
},
show: {
placeholder: function() {
module.verbose('Showing placeholder');
$placeholder
.css('display', 'block')
.css('visibility', 'hidden')
;
}
},
hide: {
placeholder: function() {
module.verbose('Hiding placeholder');
$placeholder
.css('display', 'none')
.css('visibility', '')
;
}
},
set: { set: {
fixed: function() {
module.verbose('Setting element to fixed position');
$module
.addClass(className.fixed)
.css({
position : 'fixed',
top : settings.offset + 'px',
left : 'auto',
zIndex : '1'
})
;
},
image: function(src) { image: function(src) {
$module $module
.attr('src', src) .attr('src', src)
@ -384,6 +369,10 @@ $.fn.visibility = function(parameters) {
refresh: function() { refresh: function() {
module.debug('Refreshing constants (width/height)'); module.debug('Refreshing constants (width/height)');
if(settings.type == 'fixed') {
module.remove.fixed();
module.remove.occurred();
}
module.reset(); module.reset();
module.save.position(); module.save.position();
module.checkVisibility(); module.checkVisibility();
@ -743,6 +732,18 @@ $.fn.visibility = function(parameters) {
}, },
remove: { remove: {
fixed: function() {
module.debug('Removing fixed position');
$module
.removeClass(className.fixed)
.css({
position : '',
top : '',
left : '',
zIndex : ''
})
;
},
occurred: function(callback) { occurred: function(callback) {
if(callback) { if(callback) {
var var
@ -809,6 +810,7 @@ $.fn.visibility = function(parameters) {
element.height = $module.outerHeight(); element.height = $module.outerHeight();
// store // store
module.cache.element = element; module.cache.element = element;
console.log(element.offset, $module);
return element; return element;
}, },
elementCalculations: function() { elementCalculations: function() {

Write Preview
Loading…
Cancel
Save