angular-cloudtasks
Version:
Allows you to serve highly optimized images to your client apps.
1 lines • 3.3 kB
JavaScript
!function(factory){"use strict";"function"==typeof define&&define.amd?define(["angular"],factory):factory("object"==typeof exports?require("angular"):angular)}(function(angular){"use strict";function canUseWebP(){var elem=document.createElement("canvas");return!(!elem.getContext||!elem.getContext("2d"))&&0===elem.toDataURL("image/webp").indexOf("data:image/webp")}var module=angular.module("cloudtasks",[]);return module.provider("$cloudtasks",[function(){var settings={clientId:!1,dev:!1,options:{},photoWidths:[7680,4096,3840,3600,3072,2560,2500,2048,2e3,1920,1856,1824,1792,1600,1536,1520,1440,1400,1366,1365,1360,1280,1152,1080,1024,960,896,856,832,800,768,729,720,704,640,544,512,480,468,460,400,392,384,352,320,256,234,192,180,176,160,128,88,64,32,16,8],photoHeights:[4320,4096,3600,3072,2613,2400,2252,2048,1600,1536,1440,1392,1368,1344,1340,1280,1200,1152,1128,1120,1080,1050,1024,992,960,900,870,864,856,854,800,788,768,766,720,624,600,576,540,486,484,483,480,400,384,372,350,348,342,320,300,288,256,240,200,192,144,135,132,120,96,72,64,60,55,32,31,16,8]};return canUseWebP()&&(settings.options.convert="webp"),{$get:function(){return settings},settings:settings}}]),module.directive("ctSrc",["$cloudtasks","$location","$timeout",function($cloudtasks,$location,$timeout){return{restrict:"A",scope:{},link:function(scope,element,attrs){if(!$cloudtasks.clientId)return void console.log("You need to configure your clientId");$timeout(function(){-1===attrs.ctSrc.indexOf("http")&&(attrs.ctSrc=$location.protocol()+":"+attrs.ctSrc);var optionsString="/",options=angular.copy($cloudtasks.options);attrs.ctOptions&&(options=angular.extend(options,scope.$eval(attrs.ctOptions))),angular.forEach(options,function(value,key){value&&(optionsString="string"==typeof value?optionsString+key+":"+value+"/":optionsString+key+"/")});var calc="",width=element.clientWidth,height=element.clientHeight;if(width||height||(width=element.parent().clientWidth,height=element.parent().clientHeight),attrs.ctSize)calc=attrs.ctSize;else{if(attrs.ctForceSize)width&&(calc=width),height&&(calc=calc+"x"+height);else{if(width)for(var x=0;x<$cloudtasks.photoWidths.length;x++)if($cloudtasks.photoWidths[x]<width){calc+=$cloudtasks.photoWidths[x-1]?$cloudtasks.photoWidths[x-1]:$cloudtasks.photoWidths[x];break}if(height&&(!width||width/height<=4))for(var y=0;y<$cloudtasks.photoHeights.length;y++)if($cloudtasks.photoHeights[y]<height){calc+="x"+($cloudtasks.photoHeights[y-1]?$cloudtasks.photoHeights[y-1]:$cloudtasks.photoHeights[y]);break}}calc?-1===calc.toString().indexOf("x")&&(calc+="x"):calc="origxorig"}(attrs.ctDefault||$cloudtasks.defaultImage)&&(element.css("background-image","url(//"+($cloudtasks.dev?"dev-":"")+"images.cloudtasks.io/"+$cloudtasks.clientId+"/"+calc+"/"+encodeURIComponent(decodeURIComponent(attrs.ctDefault||$cloudtasks.defaultImage))+")"),element.bind("error",function(){element.unbind("error"),element.attr("src","//"+($cloudtasks.dev?"dev-":"")+"images.cloudtasks.io/"+$cloudtasks.clientId+"/"+calc+"/"+encodeURIComponent(decodeURIComponent(attrs.ctDefault||$cloudtasks.defaultImage)))})),element.attr("src","//"+($cloudtasks.dev?"dev-":"")+"images.cloudtasks.io/"+$cloudtasks.clientId+optionsString+calc+"/"+encodeURIComponent(decodeURIComponent(attrs.ctSrc)))},0)}}}]),module});