sassqwatch - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

blog-post.md

@@ -17,6 +17,5 @@ # SassQwatch
 
-However, you may not be using Browserify, and that's cool, too. We've got you covered. **If you're not using Browserify** head on over to the [GitHub repo](https://github.com/40Digits/sassqwatch), [get the file](https://github.com/40Digits/sassqwatch/blob/master/sassqwatch.min.js), and include it in your project after jQuery.
+However, you may not be using Browserify, and that's cool, too. We've got you covered. **If you're not using Browserify** head on over to the [GitHub repo](https://github.com/40Digits/sassqwatch), [get the file](https://github.com/40Digits/sassqwatch/blob/master/sassqwatch.min.js), and include it in your project.
 
 ```html
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="sassqwatch.min.js"></script>
@@ -101,23 +100,23 @@ <script src="my-app.js"></script>
 
-// Media Query - min-width
-$mq-min-mini:       em($mq-mini);
-$mq-min-small:      em($mq-small);
-$mq-min-medium:     em($mq-medium);
-$mq-min-large:      em($mq-large);
-$mq-min-xlarge:     em($mq-xlarge);
-$mq-min-xxlarge:    em($mq-xxlarge);
-$mq-min-xxxlarge:   em($mq-xxxlarge);
-
 // Media Query List Map
 $mq: (
-  'mini'          : ( min-width: $mq-min-mini ),
-  'small'         : ( min-width: $mq-min-small ),
-  'medium'        : ( min-width: $mq-min-medium ),
-  'large'         : ( min-width: $mq-min-large ),
-  'xlarge'        : ( min-width: $mq-min-xlarge ),
-  'xxlarge'       : ( min-width: $mq-min-xxlarge ),
-  'xxxlarge'      : ( min-width: $mq-min-xxxlarge )
+  'max-tiny'      : ( max-width: $mq-mini - 1 ),
+  'mini'          : ( min-width: $mq-mini ),
+  'small'         : ( min-width: $mq-small ),
+  'medium'        : ( min-width: $mq-medium ),
+  'large'         : ( min-width: $mq-large ),
+  'xlarge'        : ( min-width: $mq-xlarge ),
+  'xxlarge'       : ( min-width: $mq-xxlarge ),
+  'xxxlarge'      : ( min-width: $mq-xxxlarge )
 );
 
 //---------------------------------
+// Set the Breakpoint Order
+//---------------------------------
+title {
+  font-family: $bp_string;
+}
+```
+
+//---------------------------------
 // Define the JS Breakpoints
@@ -142,8 +141,1 @@ //---------------------------------
 
-//---------------------------------
-// Set the Breakpoint Order
-//---------------------------------
-title {
-  font-family: $bp_string;
-}
-```

lib/responsiveImages.js

@@ -20,2 +20,3 @@ /**
     knownSizes = [],
+    retina = (window.devicePixelRatio >= 1.5) ? true : false,
     i = 0;
@@ -82,2 +83,17 @@
   /**
+   * Checks to see if there is a retina src provided on an image
+   * @param  {object} imageObject An object in the array of known image sizes
+   * @param  {string} mediaQuery  The name of the media query to check against
+   * @return {string}             The image src
+   */
+  var checkForRetinaSrc = function(imageObject, mediaQuery) {
+    // if this is a retina screen and there is a retina src
+    if (retina && imageObject[mediaQuery + '-2x']) {
+      return imageObject[mediaQuery + '-2x'];
+    } else {
+      return imageObject[mediaQuery];
+    }
+  };
+
+  /**
    * Run through each responsive image and see if an image exists at that media query
@@ -101,6 +117,8 @@ * @param newMediaQuery [current] The new media query to load
       thisImage = knownSizes[i];
-      newSource = thisImage[newMediaQuery];
+      // checks if we're on a retina screen and if there is a 2x src defined
+      newSource = checkForRetinaSrc(thisImage, newMediaQuery);
 
       // if a new source isn't set
       if (!newSource) {
+        // get the index of the current media query to start from
         ii = sassqwatch.fetchMqIndex(newMediaQuery);
@@ -111,8 +129,6 @@
           thisMQ = sassqwatch.fetchMqName(ii);
+          newSource = checkForRetinaSrc(thisImage, thisMQ);
 
-          // if a matched mq is found on the image
-          if (thisImage[thisMQ]) {
-            newSource = thisImage[thisMQ];
-            break;
-          }
+          // break the loop if a source is found
+          if (newSource) break;
         }
@@ -119,0 +135,0 @@ // if after all that no source was found

package.json

 {
   "name": "sassqwatch",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "The Sass Query Watcher.",
@@ -5,0 +5,0 @@ "repository": "https://github.com/40Digits/sassqwatch/",

README.md

@@ -236,2 +236,8 @@ # SassQwatch - The Sass Query Watcher.
 
+SassQwatch can even handle "retina" images on every media query for screens with a high pixel density. Just add a new media query data attribute with "2x" at the end and SassQwatch will do the rest.
+
+```html
+<img class="sassqwatch" src="default-image.jpg" data-mq-mini="mini-image-src.jpg" data-mq-mini-2x="[e-mail]" />
+```
+
 ### Options
@@ -238,0 +244,0 @@ * `selector`: A custom selector for `responsiveImages` to bind to instead of the default `.sassqwatch`.

sassqwatch.js

@@ -152,2 +152,3 @@ require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
     knownSizes = [],
+    retina = (window.devicePixelRatio >= 1.5) ? true : false,
     i = 0;
@@ -213,2 +214,11 @@
 
+  var checkForRetinaSrc = function(imageObject, mediaQuery) {
+    // if this is a retina screen and there is a retina src
+    if (retina && imageObject[mediaQuery + '-2x']) {
+      return imageObject[mediaQuery + '-2x'];
+    } else {
+      return imageObject[mediaQuery];
+    }
+  };
+
   /**
@@ -233,6 +243,8 @@ * Run through each responsive image and see if an image exists at that media query
       thisImage = knownSizes[i];
-      newSource = thisImage[newMediaQuery];
+      // checks if we're on a retina screen and if there is a 2x src defined
+      newSource = checkForRetinaSrc(thisImage, newMediaQuery);
 
       // if a new source isn't set
       if (!newSource) {
+        // get the index of the current media query to start from
         ii = sassqwatch.fetchMqIndex(newMediaQuery);
@@ -243,8 +255,6 @@
           thisMQ = sassqwatch.fetchMqName(ii);
+          newSource = checkForRetinaSrc(thisImage, thisMQ);
 
-          // if a matched mq is found on the image
-          if (thisImage[thisMQ]) {
-            newSource = thisImage[thisMQ];
-            break;
-          }
+          // break the loop if a source is found
+          if (newSource) break;
         }
@@ -251,0 +261,0 @@ // if after all that no source was found

sassqwatch.min.js

@@ -1,1 +0,1 @@
-require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=function(el){if("string"!=typeof el)return el;var identifier=el.slice(0,1),string=el.slice(1,el.length);return"."==identifier?document.getElementsByClassName(string):"#"==identifier?document.getElementsById(string):void 0}},{}],2:[function(require,module,exports){module.exports=function(obj1,obj2){for(key in obj2)obj2.hasOwnProperty(key)&&(obj1[key]=obj2[key]);return obj1}},{}],3:[function(require,module,exports){Array.prototype.forEach||(Array.prototype.forEach=function(callback,thisArg){var T,k;if(null==this)throw new TypeError(" this is null or not defined");var O=Object(this),len=O.length>>>0;if("function"!=typeof callback)throw new TypeError(callback+" is not a function");for(arguments.length>1&&(T=thisArg),k=0;len>k;){var kValue;k in O&&(kValue=O[k],callback.call(T,kValue,k,O)),k++}})},{}],4:[function(require,module,exports){module.exports=function($el){if($el.hasAttributes()){var attr,i=0,data={},mqName="";for(i;i<$el.attributes.length;i++)attr=$el.attributes[i],-1!=attr.name.indexOf("data-")&&(mqName=attr.name.slice(5),data[mqName]=attr.value);return data}}},{}],5:[function(require,module,exports){var preloader=function(src,callback){var loaded=!1,img=new Image,loadHandler=function(){loaded||(loaded=!0,callback(src),img=null)};img.addEventListener("load",loadHandler),img.src=src,img.complete&&loadHandler()};module.exports=preloader},{}],6:[function(require,module,exports){module.exports=function(options){var sassqwatch=require("./sassqwatch"),elementify=(require("./toDashed"),require("./elementify")),preloader=require("./preloader"),extend=require("./extend"),getData=require("./getData"),defaultSelector=elementify(".sassqwatch"),settings=extend({selector:defaultSelector},options),knownSizes=[],i=0,storeSizes=function($image){var src=getSource($image),sizes={$image:$image,loaded:[],originalSrc:src,activeSrc:src};extend(sizes,getData($image)),sizes.loaded.push(sizes.originalSrc),knownSizes.push(sizes)},getSource=function($image){var src="";return"IMG"==$image.tagName?src=$image.getAttribute("src"):(src=getComputedStyle($image).getPropertyValue("background-image"),src=src?src:$image.style.backgroundImage,src=src.replace(/^url\(['"]?/,"").replace(/['"]?\)$/,"")),src},swapImage=function($target,newImageSrc){"IMG"===$target.tagName?$target.setAttribute("src",newImageSrc):$target.style.backgroundImage="url("+newImageSrc+")"},updateImages=function(){var newMediaQuery=sassqwatch.fetchMediaQuery(),isLoaded=!1,thisMQ=void 0,thisImage=void 0,newSource=void 0,waiting=[],i=0,ii=0;for(i;i<knownSizes.length;i++){if(thisImage=knownSizes[i],newSource=thisImage[newMediaQuery],!newSource){for(ii=sassqwatch.fetchMqIndex(newMediaQuery);ii>0;ii--)if(thisMQ=sassqwatch.fetchMqName(ii),thisImage[thisMQ]){newSource=thisImage[thisMQ];break}newSource=newSource?newSource:thisImage.originalSrc}if(-1===newSource.indexOf(thisImage.activeSrc)){for(ii=0;ii<thisImage.loaded.length;ii++)if(-1!=thisImage.loaded[ii].indexOf(newSource)){isLoaded=!0;break}isLoaded?swapImage(thisImage.$image,newSource):(waiting[i]=thisImage.$image,preloader(newSource,function(src){swapImage(waiting[0],src),thisImage.loaded.push(src),waiting.shift()})),thisImage.activeSrc=newSource}}};for(settings.selector!==defaultSelector&&(settings.selector=elementify(settings.selector)),i;i<settings.selector.length;i++)storeSizes(settings.selector[i]);return updateImages(),sassqwatch.onChange(updateImages),sassqwatch}},{"./elementify":1,"./extend":2,"./getData":4,"./preloader":5,"./sassqwatch":"sassqwatch","./toDashed":7}],7:[function(require,module,exports){module.exports=function(string){var words=[],currentChar="",currentWord="",i=0;for(i;string.length>=i;i++)currentChar=string.charAt(i),currentChar===currentChar.toUpperCase()?(words.push(currentWord),currentWord=currentChar.toLowerCase()):currentWord+=currentChar;return words.join("-")}},{}],sassqwatch:[function(require,module,exports){require("./forEach");var $orderElement=(document.getElementsByTagName("body")[0],document.getElementsByTagName("title")[0]),$listenElement=document.getElementsByTagName("head")[0],currentMediaQuery="",lastMediaQuery="",mqOrderNamed={},mqOrderNumbered=[],callbackQueue=[],hasChanged=function(currentMediaQuery,lastMediaQuery){var i=0;for(i;i<callbackQueue.length;i++)callbackQueue[i].call(this,currentMediaQuery,lastMediaQuery)},onResize=function(){lastMediaQuery=currentMediaQuery,currentMediaQuery=fetchMediaQuery(),currentMediaQuery!=lastMediaQuery&&hasChanged(currentMediaQuery,lastMediaQuery)},setOrder=function(){var mediaQueries=getComputedStyle($orderElement).getPropertyValue("font-family");mqOrderNumbered=mediaQueries.replace(/['"\s]/g,"").split(","),mqOrderNumbered.forEach(function(value,index){mqOrderNamed[value]=index})},onChange=function(callback){return callbackQueue.push(callback),this},query=function(type,which,callback){var check;switch(type.toLowerCase()){case"min":check=function(newMediaQuery){isAbove(which)&&callback(newMediaQuery)};break;case"max":check=function(newMediaQuery){isBelow(which)&&callback(newMediaQuery)};break;case"only":check=function(newMediaQuery,oldMediaQuery){matches(which)&&callback(oldMediaQuery)}}return"function"==typeof check&&(check(currentMediaQuery),onChange(check)),this},min=function(which,callback){return query("min",which,callback),this},max=function(which,callback){return query("max",which,callback),this},only=function(which,callback){return query("only",which,callback),this},isAbove=function(which){var currentMq=mqOrderNamed[fetchMediaQuery()],whichMq=mqOrderNamed[which];return currentMq>=whichMq},isBelow=function(which){var currentMq=mqOrderNamed[fetchMediaQuery()],whichMq=mqOrderNamed[which];return whichMq>currentMq},matches=function(which){return fetchMediaQuery()==which},fetchMediaQuery=function(){var mq=getComputedStyle($listenElement).getPropertyValue("font-family");return mq=mq.replace(/['",]/g,"")},fetchMqIndex=function(mediaQuery){return mqOrderNamed[mediaQuery]},fetchMqName=function(index){return mqOrderNumbered[index]},responsiveImages=require("./responsiveImages"),constructor=function(){return setOrder(),currentMediaQuery=fetchMediaQuery(),window.onresize=onResize,{responsiveImages:responsiveImages,fetchMediaQuery:fetchMediaQuery,fetchMqIndex:fetchMqIndex,fetchMqName:fetchMqName,onChange:onChange,isAbove:isAbove,isBelow:isBelow,matches:matches,query:query,only:only,min:min,max:max}}.call();module.exports=constructor},{"./forEach":3,"./responsiveImages":6}]},{},[]);
+require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=function(el){if("string"!=typeof el)return el;var identifier=el.slice(0,1),string=el.slice(1,el.length);return"."==identifier?document.getElementsByClassName(string):"#"==identifier?document.getElementsById(string):void 0}},{}],2:[function(require,module,exports){module.exports=function(obj1,obj2){for(key in obj2)obj2.hasOwnProperty(key)&&(obj1[key]=obj2[key]);return obj1}},{}],3:[function(require,module,exports){Array.prototype.forEach||(Array.prototype.forEach=function(callback,thisArg){var T,k;if(null==this)throw new TypeError(" this is null or not defined");var O=Object(this),len=O.length>>>0;if("function"!=typeof callback)throw new TypeError(callback+" is not a function");for(arguments.length>1&&(T=thisArg),k=0;len>k;){var kValue;k in O&&(kValue=O[k],callback.call(T,kValue,k,O)),k++}})},{}],4:[function(require,module,exports){module.exports=function($el){if($el.hasAttributes()){var attr,i=0,data={},mqName="";for(i;i<$el.attributes.length;i++)attr=$el.attributes[i],-1!=attr.name.indexOf("data-")&&(mqName=attr.name.slice(5),data[mqName]=attr.value);return data}}},{}],5:[function(require,module,exports){var preloader=function(src,callback){var loaded=!1,img=new Image,loadHandler=function(){loaded||(loaded=!0,callback(src),img=null)};img.addEventListener("load",loadHandler),img.src=src,img.complete&&loadHandler()};module.exports=preloader},{}],6:[function(require,module,exports){module.exports=function(options){var sassqwatch=require("./sassqwatch"),elementify=(require("./toDashed"),require("./elementify")),preloader=require("./preloader"),extend=require("./extend"),getData=require("./getData"),defaultSelector=elementify(".sassqwatch"),settings=extend({selector:defaultSelector},options),knownSizes=[],retina=window.devicePixelRatio>=1.5?!0:!1,i=0,storeSizes=function($image){var src=getSource($image),sizes={$image:$image,loaded:[],originalSrc:src,activeSrc:src};extend(sizes,getData($image)),sizes.loaded.push(sizes.originalSrc),knownSizes.push(sizes)},getSource=function($image){var src="";return"IMG"==$image.tagName?src=$image.getAttribute("src"):(src=getComputedStyle($image).getPropertyValue("background-image"),src=src?src:$image.style.backgroundImage,src=src.replace(/^url\(['"]?/,"").replace(/['"]?\)$/,"")),src},swapImage=function($target,newImageSrc){"IMG"===$target.tagName?$target.setAttribute("src",newImageSrc):$target.style.backgroundImage="url("+newImageSrc+")"},checkForRetinaSrc=function(imageObject,mediaQuery){return retina&&imageObject[mediaQuery+"-2x"]?imageObject[mediaQuery+"-2x"]:imageObject[mediaQuery]},updateImages=function(){var newMediaQuery=sassqwatch.fetchMediaQuery(),isLoaded=!1,thisMQ=void 0,thisImage=void 0,newSource=void 0,waiting=[],i=0,ii=0;for(i;i<knownSizes.length;i++){if(thisImage=knownSizes[i],newSource=checkForRetinaSrc(thisImage,newMediaQuery),!newSource){for(ii=sassqwatch.fetchMqIndex(newMediaQuery);ii>0&&(thisMQ=sassqwatch.fetchMqName(ii),!(newSource=checkForRetinaSrc(thisImage,thisMQ)));ii--);newSource=newSource?newSource:thisImage.originalSrc}if(-1===newSource.indexOf(thisImage.activeSrc)){for(ii=0;ii<thisImage.loaded.length;ii++)if(-1!=thisImage.loaded[ii].indexOf(newSource)){isLoaded=!0;break}isLoaded?swapImage(thisImage.$image,newSource):(waiting[i]=thisImage.$image,preloader(newSource,function(src){swapImage(waiting[0],src),thisImage.loaded.push(src),waiting.shift()})),thisImage.activeSrc=newSource}}};for(settings.selector!==defaultSelector&&(settings.selector=elementify(settings.selector)),i;i<settings.selector.length;i++)storeSizes(settings.selector[i]);return updateImages(),sassqwatch.onChange(updateImages),sassqwatch}},{"./elementify":1,"./extend":2,"./getData":4,"./preloader":5,"./sassqwatch":"sassqwatch","./toDashed":7}],7:[function(require,module,exports){module.exports=function(string){var words=[],currentChar="",currentWord="",i=0;for(i;string.length>=i;i++)currentChar=string.charAt(i),currentChar===currentChar.toUpperCase()?(words.push(currentWord),currentWord=currentChar.toLowerCase()):currentWord+=currentChar;return words.join("-")}},{}],sassqwatch:[function(require,module,exports){require("./forEach");var $orderElement=(document.getElementsByTagName("body")[0],document.getElementsByTagName("title")[0]),$listenElement=document.getElementsByTagName("head")[0],currentMediaQuery="",lastMediaQuery="",mqOrderNamed={},mqOrderNumbered=[],callbackQueue=[],hasChanged=function(currentMediaQuery,lastMediaQuery){var i=0;for(i;i<callbackQueue.length;i++)callbackQueue[i].call(this,currentMediaQuery,lastMediaQuery)},onResize=function(){lastMediaQuery=currentMediaQuery,currentMediaQuery=fetchMediaQuery(),currentMediaQuery!=lastMediaQuery&&hasChanged(currentMediaQuery,lastMediaQuery)},setOrder=function(){var mediaQueries=getComputedStyle($orderElement).getPropertyValue("font-family");mqOrderNumbered=mediaQueries.replace(/['"\s]/g,"").split(","),mqOrderNumbered.forEach(function(value,index){mqOrderNamed[value]=index})},onChange=function(callback){return callbackQueue.push(callback),this},query=function(type,which,callback){var check;switch(type.toLowerCase()){case"min":check=function(newMediaQuery){isAbove(which)&&callback(newMediaQuery)};break;case"max":check=function(newMediaQuery){isBelow(which)&&callback(newMediaQuery)};break;case"only":check=function(newMediaQuery,oldMediaQuery){matches(which)&&callback(oldMediaQuery)}}return"function"==typeof check&&(check(currentMediaQuery),onChange(check)),this},min=function(which,callback){return query("min",which,callback),this},max=function(which,callback){return query("max",which,callback),this},only=function(which,callback){return query("only",which,callback),this},isAbove=function(which){var currentMq=mqOrderNamed[fetchMediaQuery()],whichMq=mqOrderNamed[which];return currentMq>=whichMq},isBelow=function(which){var currentMq=mqOrderNamed[fetchMediaQuery()],whichMq=mqOrderNamed[which];return whichMq>currentMq},matches=function(which){return fetchMediaQuery()==which},fetchMediaQuery=function(){var mq=getComputedStyle($listenElement).getPropertyValue("font-family");return mq=mq.replace(/['",]/g,"")},fetchMqIndex=function(mediaQuery){return mqOrderNamed[mediaQuery]},fetchMqName=function(index){return mqOrderNumbered[index]},responsiveImages=require("./responsiveImages"),constructor=function(){return setOrder(),currentMediaQuery=fetchMediaQuery(),window.onresize=onResize,{responsiveImages:responsiveImages,fetchMediaQuery:fetchMediaQuery,fetchMqIndex:fetchMqIndex,fetchMqName:fetchMqName,onChange:onChange,isAbove:isAbove,isBelow:isBelow,matches:matches,query:query,only:only,min:min,max:max}}.call();module.exports=constructor},{"./forEach":3,"./responsiveImages":6}]},{},[]);

No alert changes

Improved metrics

Total package byte prevSize

1368798

increased by0.11%

Lines of code

1488

increased by1.64%

Number of lines in readme file

255

increased by2.41%

No dependency changes