Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-03 20:45:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixing regression from 3e2231d2cb

Browse Source 
@BenLubar
This commit is contained in:
Julian Lam
2016-03-27 18:56:21 -04:00
parent 2caae05f4b
commit 28db642050
5 changed files with 83 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -47,7 +47,7 @@
"nodebb-plugin-composer-default": "3.0.18", "nodebb-plugin-composer-default": "3.0.18",
"nodebb-plugin-dbsearch": "1.0.1", "nodebb-plugin-dbsearch": "1.0.1",
"nodebb-plugin-emoji-extended": "1.0.3", "nodebb-plugin-emoji-extended": "1.0.3",
"nodebb-plugin-markdown": "5.0.0", "nodebb-plugin-markdown": "5.0.1",
"nodebb-plugin-mentions": "1.0.21", "nodebb-plugin-mentions": "1.0.21",
"nodebb-plugin-soundpack-default": "0.1.6", "nodebb-plugin-soundpack-default": "0.1.6",
"nodebb-plugin-spam-be-gone": "0.4.6", "nodebb-plugin-spam-be-gone": "0.4.6",

7
public/js-enabled.css Normal file
View File

@@ -0,0 +1,7 @@
/*
The following stylesheet is only included on pages that can execute javascript
*/
[component="post/content"] img:not(.not-responsive):not([data-state]) {
display: none !important;
}

11
public/less/global.less
View File

@@ -7,14 +7,19 @@
*/ */
/* Prevent viewport shuffling on image load by restricting image dimensions until viewed by the browser */ /* Prevent viewport shuffling on image load by restricting image dimensions until viewed by the browser */
[component="post/content"] img:not(.not-responsive) { [component="post/content"] img {
height: 1rem;
opacity: 0;
transition: width 500ms ease; transition: width 500ms ease;
transition: height 500ms ease; transition: height 500ms ease;
transition: opacity 500ms ease; transition: opacity 500ms ease;
&[data-state="unloaded"], &[data-state="loading"] {
display: inherit;
height: 1rem;
opacity: 0;
}
&[data-state="loaded"] { &[data-state="loaded"] {
display: inherit;
height: auto; height: auto;
opacity: 1; opacity: 1;
} }

12
public/src/app.js
View File

@@ -24,7 +24,8 @@ app.cacheBuster = null;
}); });
app.load = function() { app.load = function() {
$('document').ready(function () { app.loadProgressiveStylesheet();
var url = ajaxify.start(window.location.pathname.slice(1) + window.location.search + window.location.hash, true); var url = ajaxify.start(window.location.pathname.slice(1) + window.location.search + window.location.hash, true);
ajaxify.end(url, app.template); ajaxify.end(url, app.template);
@@ -83,7 +84,6 @@ app.cacheBuster = null;
$(window).trigger('action:app.load'); $(window).trigger('action:app.load');
}); });
});
}; };
app.logout = function() { app.logout = function() {
@@ -539,4 +539,12 @@ app.cacheBuster = null;
} }
}); });
}; };
app.loadProgressiveStylesheet = function() {
var linkEl = document.createElement('link');
linkEl.rel = 'stylesheet';
linkEl.href = config.relative_path + '/js-enabled.css';
document.head.appendChild(linkEl);
}
}()); }());

10
public/src/client/topic/posts.js
View File

@@ -218,6 +218,7 @@ define('forum/topic/posts', [
}; };
Posts.processPage = function(posts) { Posts.processPage = function(posts) {
Posts.unloadImages();
Posts.showBottomPostBar(); Posts.showBottomPostBar();
posts.find('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive'); posts.find('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive');
app.createUserTooltips(posts); app.createUserTooltips(posts);
@@ -231,6 +232,15 @@ define('forum/topic/posts', [
hidePostToolsForDeletedPosts(posts); hidePostToolsForDeletedPosts(posts);
}; };
Posts.unloadImages = function() {
var images = components.get('post/content').find('img:not(.not-responsive)');
images.each(function() {
$(this).attr('data-src', $(this).attr('src'));
$(this).attr('data-state', 'unloaded');
$(this).attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
});
};
Posts.loadImages = function(threshold) { Posts.loadImages = function(threshold) {
/* /*
If threshold is defined, images loaded above this threshold will modify If threshold is defined, images loaded above this threshold will modify