dyframe.min.js

/*!
 * Dyframe
 * @version 0.5.1
 * @link https://github.com/htanjo/dyframe
 * @author Hiroyuki Tanjo
 * @license MIT
 */
!function(t,e){"use strict";"function"==typeof define&&define.amd?define(e):"object"==typeof module&&module.exports?module.exports=e():t.Dyframe=e()}(this,function(){"use strict";var t={smartphone:{width:980,deviceWidth:375},tablet:{width:980,deviceWidth:768}},e="df-",i={html:"",width:980,deviceWidth:null,profile:null,interval:0},o=function(t,i){this.element=t,this.wrapper=document.createElement("div"),this.viewport=document.createElement("iframe"),this.width=0,this.height=0,this.queued=!1,this.waiting=!1,s(this.element,e+"element"),r(this.wrapper,{position:"relative",display:"block",height:0,padding:0,overflow:"hidden"}),r(this.viewport,{position:"absolute",top:0,left:0,bottom:0,height:"100%",width:"100%",border:0,webkitTransformOrigin:"0 0",msTransformOrigin:"0 0",transformOrigin:"0 0"}),this.wrapper.appendChild(this.viewport),this.element.appendChild(this.wrapper),this.render(i||{}),this.initialized=!0};o.prototype.render=function(t){return"object"==typeof t&&this.updateOptions(t),this.waiting?void(this.queued=!0):void this.renderDom()},o.prototype.renderDom=function(){var t=this;this.updateClass();var e=d(this.element);this.width=e.width,this.height=e.height,this.wrapper.style.paddingBottom=this.height+"px",this.scale(),this.viewport.contentWindow.document.open(),this.viewport.contentWindow.document.write(this.options.html),this.viewport.contentWindow.document.close(),this.queued=!1,this.options.interval>0&&(this.waiting=!0,setTimeout(function(){t.waiting=!1,t.queued&&t.renderDom()},this.options.interval))},o.prototype.updateOptions=function(t){return this.options?void n(this.options,t):void(this.options=n({},i,t))},o.prototype.hasActiveProfile=function(){return!(!this.options.profile||!t[this.options.profile])},o.prototype.updateClass=function(){a(this.element,e+"profile-"),this.hasActiveProfile()&&s(this.element,e+"profile-"+this.options.profile)},o.prototype.scale=function(){var t=this.width/this.getViewportWidth();r(this.viewport,{width:100/t+"%",height:100/t+"%",webkitTransform:"scale("+t+")",msTransform:"scale("+t+")",transform:"scale("+t+")"})},o.prototype.getViewportWidth=function(){var e=this.hasActiveProfile()?t[this.options.profile]:{width:this.options.width,deviceWidth:this.options.deviceWidth};if(!e.deviceWidth)return e.width;var i=this.getViewportData(),o=i.width,n=i["initial-scale"];return o?"device-width"===o?e.deviceWidth:parseInt(o,10):n&&n>0?Math.floor(e.deviceWidth/parseFloat(n)):e.width},o.prototype.getViewportData=function(){var t,e,i=document.createElement("div"),o={};return i.innerHTML=this.options.html,(t=i.querySelector('meta[name="viewport"]'))&&(e=t.getAttribute("content"))?(e.split(",").forEach(function(t){var e=t.trim().split("=");e[0]&&e[1]&&(o[e[0].trim()]=e[1].trim())}),o):o},o.prototype.destroy=function(){this.initialized&&(h(this.element,"df-element"),a(this.element,"df-profile-"),this.element.removeChild(this.wrapper),this.initialized=!1)},o.addProfile=function(e,o){var r={width:i.width,deviceWidth:i.deviceWidth},s=n({},r,o);t[e]=s};var n=function(){var t,e,i=arguments[0];for(t=1;t<arguments.length;t++)for(e in arguments[t])arguments[t].hasOwnProperty(e)&&(i[e]=arguments[t][e]);return i},r=function(t,e){var i;for(i in e)t.style[i]=e[i]},s=function(t,e){t.classList?t.classList.add(e):t.className+=" "+e},h=function(t,e){if(t.classList)t.classList.remove(e);else{var i=new RegExp("(^|\\s)"+e+"(?!\\S)","g");t.className=t.className.replace(i,"")}},a=function(t,e){var i=new RegExp("(^|\\s)"+e+"\\S+","g");t.className=t.className.replace(i,"")},d=function(t){var e=window.getComputedStyle(t),i=parseInt(e.getPropertyValue("padding-top"),0),o=parseInt(e.getPropertyValue("padding-left"),0),n=parseInt(e.getPropertyValue("padding-right"),0),r=parseInt(e.getPropertyValue("padding-bottom"),0),s={width:t.clientWidth-(o+n),height:t.clientHeight-(i+r)};return s};return o});