Permalink
Browse files

Making it reusable

  • Loading branch information...
1 parent adc1a4a commit de774005cbbd604e44d73d8d88ba23aa77043f76 @jakearchibald committed Dec 4, 2011
Showing with 99 additions and 97 deletions.
  1. +2 −2 css/base.css
  2. +11 −3 index.html
  3. +0 −92 js/base.js
  4. +18 −0 js/core.js
  5. +68 −0 js/responsiveGallery.js
View
4 css/base.css
@@ -47,7 +47,7 @@ a {
}
/* Responsive stuff */
.gallery-test {
- width: 10px;
+ width: 1px;
}
@media all and (min-width: 640px) {
[role="main"] {
@@ -61,7 +61,7 @@ a {
}
@media all and (min-width: 926px) {
.gallery-test {
- width: 20px;
+ width: 2px;
}
.gallery a:link,
.gallery a:visited {
View
14 index.html
@@ -256,10 +256,18 @@
</p>
</article>
</aside>
-<script src="js/base.js"></script>
+<script src="js/responsiveGallery.js"></script>
+<script src="js/core.js"></script>
<script>
- iLoveCats.fadeImgsOnLoad();
- iLoveCats.initGalleries();
+ responsiveGallery({
+ scriptClass: 'gallery-hide',
+ testClass: 'gallery-test',
+ initialSuffix: '_m.jpg',
+ suffixes: {
+ '1': '_s.jpg',
+ '2': '_m.jpg'
+ }
+ });
</script>
</body>
</html>
View
92 js/base.js
@@ -1,92 +0,0 @@
-(function() {
- function hasClass(elm, className) {
- return (' ' + elm.className + ' ').indexOf( className ) != -1;
- }
-
- function addListener(elm, type, callback) {
- if (elm.addEventListener) {
- elm.addEventListener( type, callback, false );
- }
- else if (elm.attachEvent) {
- elm.attachEvent( 'on' + type, callback );
- }
- }
-
- window.iLoveCats = {
-
-
- fadeImgsOnLoad: function() {
- // Little trick to fade images in when they load
- var imgs = document.getElementsByTagName( 'img' );
-
- // Catch images that have already loaded
- for (var i = imgs.length; i--;) if (imgs[i].naturalWidth) {
- imgs[i].className += ' loaded';
- }
-
- if (document.addEventListener) {
- document.addEventListener('load', function(event) {
- var target = event.target;
- if ( target.nodeName.toLowerCase() == 'img' ) {
- target.className += ' loaded';
- }
- }, true);
- }
- },
-
-
- initGalleries: function() {
- var testDiv = document.createElement( 'div' ),
- scripts = document.getElementsByTagName( 'script' ),
- lastTinyThumbValue,
- galleries = [];
-
- function FlickrGallery(script) {
- this.htmlStr = script.nextSibling.nodeValue.slice( 10, -15 );
- this.container = document.createElement( 'div' );
- script.parentNode.insertBefore( this.container, script.nextSibling );
- }
-
- FlickrGallery.prototype.changeLayout = function(tinyThumbs) {
- var htmlStr = this.htmlStr;
-
- if (tinyThumbs) {
- htmlStr = htmlStr.replace( /_m\.jpg/g, '_s.jpg' );
- }
-
- this.container.innerHTML = htmlStr;
- };
-
- // Add the test div to the page
- testDiv.className = 'gallery-test';
- document.body.insertBefore( testDiv, document.body.firstChild );
-
- // Init galleries
- for ( var i = scripts.length; i--; ) {
- var script = scripts[i];
-
- if ( hasClass(script, 'gallery-hide') ) {
- galleries.push( new FlickrGallery(script) );
- }
- }
-
- function respond() {
- var tinyThumbs = (testDiv.offsetWidth == 10);
-
- if (tinyThumbs === lastTinyThumbValue) {
- return;
- }
-
- for (var i = galleries.length; i--;) {
- galleries[i].changeLayout(tinyThumbs);
- }
- lastTinyThumbValue = tinyThumbs;
- }
-
- respond();
- addListener(window, 'resize', respond);
- }
-
-
- };
-})();
View
18 js/core.js
@@ -0,0 +1,18 @@
+(function() {
+ // Little trick to fade images in when they load
+ var imgs = document.getElementsByTagName( 'img' );
+
+ // Catch images that have already loaded
+ for (var i = imgs.length; i--;) if (imgs[i].naturalWidth) {
+ imgs[i].className += ' loaded';
+ }
+
+ if (document.addEventListener) {
+ document.addEventListener('load', function(event) {
+ var target = event.target;
+ if ( target.nodeName.toLowerCase() == 'img' ) {
+ target.className += ' loaded';
+ }
+ }, true);
+ }
+})();
View
68 js/responsiveGallery.js
@@ -0,0 +1,68 @@
+(function() {
+ function escapeRegex(text) {
+ return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+ }
+
+ function hasClass(elm, className) {
+ return (' ' + elm.className + ' ').indexOf( className ) != -1;
+ }
+
+ function addListener(elm, type, callback) {
+ if (elm.addEventListener) {
+ elm.addEventListener( type, callback, false );
+ }
+ else if (elm.attachEvent) {
+ elm.attachEvent( 'on' + type, callback );
+ }
+ }
+
+ function Gallery(script) {
+ this.htmlStr = script.nextSibling.nodeValue.slice( 10, -15 );
+ this.container = document.createElement( 'div' );
+ script.parentNode.insertBefore( this.container, script.nextSibling );
+ }
+
+ Gallery.prototype.changeLayout = function(escapedInitialSuffix, newSuffix) {
+ this.container.innerHTML = this.htmlStr.replace(
+ new RegExp('(src="[^"]*)' + escapedInitialSuffix + '"', 'g'),
+ '$1' + newSuffix + '"'
+ );
+ };
+
+ window.responsiveGallery = function(args) {
+ var testDiv = document.createElement( 'div' ),
+ scripts = document.getElementsByTagName( 'script' ),
+ lastSuffix,
+ escapedInitialSuffix = escapeRegex( args.initialSuffix || '' ),
+ galleries = [];
+
+ // Add the test div to the page
+ testDiv.className = args.testClass || 'gallery-test';
+ document.body.insertBefore( testDiv, document.body.firstChild );
+
+ // Init galleries
+ for ( var i = scripts.length; i--; ) {
+ var script = scripts[i];
+
+ if ( hasClass(script, args.scriptClass) ) {
+ galleries.push( new Gallery(script) );
+ }
+ }
+
+ function respond() {
+ var newSuffix = args.suffixes[testDiv.offsetWidth];
+
+ if (newSuffix === lastSuffix) {
+ return;
+ }
+
+ for (var i = galleries.length; i--;) {
+ galleries[i].changeLayout(escapedInitialSuffix, newSuffix);
+ }
+ lastSuffix = newSuffix;
+ }
+
+ respond();
+ addListener(window, 'resize', respond);
+ };
+})();

0 comments on commit de77400

Please sign in to comment.