moockup.min.js

!function($){$.Moockup=function(e,t){var h,o,n,i,p=this;p.el=e,p.$el=$(e),p.$el.data("Moockup",p),p.init=function(){p.options=h=$.extend({},$.Moockup.defaults,p.$el.data(),t),$(p.el).addClass("moockup"),h.isFullScreen&&$(p.el).addClass("fullScreen"),h.setup?p.setSetup(h.setup):p.loadSetup(h.setupFileName),$(window).resize(function(){p.fitAllMockups(),p.showScreen(currentScreenIdx,!1)})},p.isAttr=function(e){return void 0!==$(p.el).attr(e)},p.loadSetup=function(n){$.ajax({cache:h.isCacheJson,url:n,dataType:"json",success:function(e){p.setSetup(e)},error:function(e,t,o){p.error("Error loading setup file '"+n+"' ("+t+": "+o+")")}})},p.reset=function(){$("> div",p.el).remove()},p.setSetup=function(e){e.screens?(p.reset(),e.backgroundColor&&$(p.el).css("background-color",e.backgroundColor),(e.headerTitle||1<e.screens.length)&&($(p.el).addClass("withHeader"),o=$("<div></div>").addClass("header").appendTo(p.el),e.headerTitle&&$("<div></div>").addClass("title").appendTo(o).html(e.headerTitle),1<e.screens.length&&(n=$("<div></div>").addClass("menu").appendTo(o))),e.footer&&($(p.el).addClass("withFooter"),$("<div></div>").addClass("footer").appendTo(p.el).html(e.footer)),i=$("<div></div>").addClass("screens").appendTo(p.el),e.pageTitle&&(document.title=e.pageTitle),p.addScreens(e.screens),p.showScreen(0,!1)):p.error("No screens specified")},p.addHeaderMenuItem=function(e,t,o){n&&$("<div></div>").addClass("item").addClass("id"+e).appendTo(n).html(t).on("click",o)},p.setHeaderMenuSelectedItem=function(e){n&&($("> .item",n).removeClass("selected"),$("> .item.id"+e,n).addClass("selected"))},p.message=function(e,t){$(p.el).append('<div class="message '+e+'">'+t+"</div>")},p.error=function(e){p.message("error",e)},p.addScreens=function(e){$(e).each(function(e,t){p.addScreen(e,t)}),p.fitAllMockups()},p.addScreen=function(o,e){var t=$("<div></div>",{id:"screen"+o}).addClass("screen").appendTo(i);$(t).css("background-color",e.backgroundColor?e.backgroundColor:$(p.el).css("background-color")),p.setLightOrDarkBackgroundClass(t,t),e.mockups?(p.addHeaderMenuItem(o,e.title,function(){p.showScreen(o,!0)}),$(e.mockups).each(function(e,t){p.addMockup(o,t)})):p.error("No mockups on screen "+(o+1))},p.addMockup=function(e,t){var o=p.getScreen(e);if(p.getType(t.type)){var n=p.getType(t.type),i=$("<div></div>",{id:"mockup"+$(o).attr("id")+"_"+e}).addClass("mockup").addClass(t.type).data("type",t.type).appendTo(o),s=$("<div></div>").addClass("container").appendTo(i);n.containerPosition&&$(s).css("top",n.containerPosition.top+"%").css("bottom",n.containerPosition.bottom+"%").css("left",n.containerPosition.left+"%").css("right",n.containerPosition.right+"%"),t.maxHeightVMin?$(i).css("max-height",t.maxHeightVMin+"vmin"):n.maxHeightVMin&&$(i).css("max-height",n.maxHeightVMin+"vmin"),t.notchBackgroundColor&&n.notch&&(n.notch.top?$(s).css("padding-top",n.notch.top.height+"%").css("background-color",t.notchBackgroundColor):n.notch.bottom&&$(s).css("padding-bottom",n.notch.bottom.height+"%").css("background-color",t.notchBackgroundColor)),t.title&&($("<div></div>").addClass("title").appendTo(i).html(t.title),$(o).addClass("withTitles")),t.image&&($(i).addClass("image"),$("<img>",{src:t.image}).addClass("frame").appendTo(s)),$("<img>",{src:h.resBaseDir+n.frameSrc}).addClass("frame").appendTo(i)}else p.error('Wrong type "'+t.type+'"')},p.fitAllMockups=function(){$("> .screen",i).each(function(e,t){p.fitMockups(e)})},p.fitMockups=function(e){var o,n,i,s,a,t=p.getScreen(e),r=p.getMockups(e),c=r.length,d=$(t).width(),l=$(t).height(),u=Math.floor(d/c);$(r).each(function(e,t){o=p.getType($(t).data("type")),n=o.width/o.height,i=u,height=p.getAspectRatioHeightForGivenWidth(n,i),height>=l&&(height=l,i=p.getAspectRatioWidthForGivenHeight(n,height)),a=h.gapPercentage*d/100,i-=a,height=p.getAspectRatioHeightForGivenWidth(n,i),s=l/2-height/2,$(t).css("width",i).css("height",height).css("margin-top",s).css("margin-right",a).css("display","inline-block")})},p.getAspectRatioWidthForGivenHeight=function(e,t){return t*e},p.getAspectRatioHeightForGivenWidth=function(e,t){return t/e},p.getType=function(e){return h.types[e]},p.getScreen=function(e){return $("#screen"+e,p.el)},p.getMockup=function(e,t){return $("#mockup"+e+"_"+t,p.el)},p.getMockups=function(e){return $("> .mockup",p.getScreen(e))},p.showScreen=function(e,t){var o=p.getScreen(e),n=p.getScreen(e).position().top+$(i).scrollTop();$(i).stop().animate({scrollTop:n},t?500:0,"swing",function(){p.setLightOrDarkBackgroundClass(o,p.el)}),p.setHeaderMenuSelectedItem(e),currentScreenIdx=e},p.isLightBackgroundColor=function(e){var t,o,n,i=$(e).css("background-color");return i.match(/^rgb/)?(t=(i=i.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/))[1],n=i[2],o=i[3]):(t=(i=+("0x"+i.slice(1).replace(i.length<5&&/./g,"$&$&")))>>16,o=i>>8&255,n=255&i),127.5<Math.sqrt(t*t*.299+n*n*.587+o*o*.114)},p.setLightOrDarkBackgroundClass=function(e,t){$(t).removeClass("lightBackground").removeClass("darkBackground"),"rgba(0, 0, 0, 0)"!=$(e).css("background-color")&&$(t).addClass(p.isLightBackgroundColor(e)?"lightBackground":"darkBackground")},p.init()},$.Moockup.defaults={isFullScreen:!1,setup:!1,setupFileName:"setup.json",resBaseDir:"res/",gapPercentage:5,isCacheJson:!1,types:{MacDesktop:{frameSrc:"frames/imac.svg",width:4901,height:3980.6,containerPosition:{left:4,top:4,right:4.2,bottom:34.5}},iPhoneXPortrait:{frameSrc:"frames/iphone_x.svg",width:2328.8,height:4651.9,containerPosition:{left:6.3,top:2.9,right:6.3,bottom:3},notch:{top:{height:7}}},Tablet:{frameSrc:"frames/tablet.svg",width:2617,height:3605.81,containerPosition:{left:3.5,top:6.6,right:3.5,bottom:8.6}},MacBook:{frameSrc:"frames/macbook.svg",width:2429.5,height:1438.5,containerPosition:{left:11.3,top:5.4,right:11.3,bottom:13.3}}}},$.fn.Moockup=function(options,params){return this.each(function(){var me=$(this).data("Moockup");(typeof options).match("object|undefined")?new $.Moockup(this,options):eval("me."+options)(params)})}}(jQuery);