-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjquery.pixlayout.min.js
1 lines (1 loc) · 14.2 KB
/
jquery.pixlayout.min.js
1
jQuery&&function(J){J.extend({pixlayout:function(t,i){i=i||J("body");var p={src:"http://pixlayout.polycreative.ru/img/no.gif",opacity:.5,step:1,top:0,center:!1,left:0,right:0,zindex:9999,clip:!1,fixed:!1,mini:!1,show:!1,pervious:!1};"string"==typeof t?p.src=t:J.extend(p,t);var l,e,a,o,r,n,s,x,d,c,A='<div id="pxl_wrap"><div class="pxl_panel_wrap"><div class="pxl_panel"><div class="pxl_hat"><div class="pxl_title">pixLayout</div><div class="pxl_buttons"><div class="pxl_about_button" data="about"></div><div class="pxl_clip_button" data="clip"></div><div class="pxl_cross_button" data="destroy"></div></div></div><div class="pxl_nav"><div class="pxl_tl" data="top left"></div><div class="pxl_t" data="top"></div><div class="pxl_tr" data="top right"></div><div class="pxl_l" data="left"></div><div class="pxl_show" data="show / hide"></div><div class="pxl_r" data="right"></div><div class="pxl_bl" data="bottom left"></div><div class="pxl_b" data="bottom"></div><div class="pxl_br" data="bottom right"></div></div><div class="pxl_clear"></div><div class="pxl_settings"><div class="pxl_src"><input type="text" value="'+p.src+'" title="src" /></div><div class="pxl_opacity"><input type="text" value="'+p.opacity+'" />opacity</div><div class="pxl_step"><input type="text" value="'+p.step+'" />step</div><div class="pxl_zindex"><input type="text" value="'+p.zindex+'" />z-index</div><div class="pxl_top"><input type="text" value="'+p.top+'" />top</div><div class="pxl_left"><input type="text" value="'+p.left+'" />left</div><div class="pxl_right"><input type="text" value="'+p.right+'" />right</div><div class="pxl_switch"><div class="pxl_center pxl_bool"></div><div class="pxl_switch_txt">center</div></div><div class="pxl_switch"><div class="pxl_fixed pxl_bool"></div><div class="pxl_switch_txt">fixed</div></div><div class="pxl_switch"><div class="pxl_pervious pxl_bool"></div><div class="pxl_switch_txt">pervious</div></div></div><div class="pxl_roll pxl_arrow_up"></div></div></div><div class="pxl_about"><div><b>jquery.pixLayout* Version: 0.9.8 (2016-10-18)</b><br />Copyright (c) 2016 Anton Karabut (poly@polycreative.ru) <br />free for editing and distribution<br /></div><div> options:<ol><li>src: [string]"path to image"</li><li>opacity: [float] 0.0 - 1.0</li><li>step, top, left, right, zindex: [integer] 1 - infinity</li><li>clip, center, fixed, mini, show, pervious: [boolean] true or false</li> </ol></div><div>move:<ol><li>"left", "right", "up", "downв" buttons</li><li>w,a,s,d buttons when the picture is visible</li><li>blue rectangles on the sides of the navigation bar</li></ol></div><div>operations:<ol><li>Destroy (deleting all pixLayout blocks on page) - cross in the upper right corner of the panel</li><li>Clip - clip in the upper right corner of the panel</li><li>About - question mark icon in the upper right corner of the panel</li><li>Show / hide - central icon in the navigation bar</li></ol></div><span>learn more: <a href="http://pixlayout.polycreative.ru">pixlayout.polycreative.ru</a></span></div><div class="pxl_pic"><img src="'+p.src+'" alt=""/></div></div>',_=!1,h=!1,g=!1,u=!1,f=!1,v="absolute",b="auto",w="",m=function(){J(".pxl_show").fadeIn(200).on("click",function(){h=h?(J(".pxl_pic").fadeOut(200),!1):(u?c.fadeIn(200):(u=!0,c.fadeIn(200,function(){R(),0===p.left&&0===p.right?(p.left=0,C("right")):0!==p.left&&0===p.right?C("right"):0!==p.right&&0===p.left?C("left"):C("right"),p.center&&(p.left=(J(window).width()-c.width())/2,J(".pxl_center").addClass("true"),C("right"))})),!0)}),p.show&&J(".pxl_show").trigger("click"),p.fixed&&(v="fixed",c.css("position",v),J(".pxl_fixed").addClass("true")),p.pervious&&(b="none",c.css("pointerEvents",b),J(".pxl_pervious").addClass("true")),p.clip&&(J(".pxl_panel").css("right","0px"),J(".pxl_clip_button").fadeTo(200,1),_=!0),p.mini&&(J(".pxl_settings").slideUp(0),J(".pxl_roll").addClass("pxl_arrow_down").removeClass("pxl_arrow_up")),J(".pxl_panel_wrap").on("hover",function(){_||J(".pxl_panel").fadeIn(350).animate({right:"0px"},{queue:!1,duration:200})},function(){_||J(".pxl_panel").fadeOut(150).animate({right:"-134px"},{queue:!1,duration:200})}),J(".pxl_roll").on("click",function(){var t=J(".pxl_settings");p.mini?(t.slideDown(200),J(this).removeClass("pxl_arrow_down").addClass("pxl_arrow_up"),p.mini=!1):(p.clip||E(!0,J(".pxl_clip_button")),t.slideUp(200),J(this).addClass("pxl_arrow_down").removeClass("pxl_arrow_up"),p.mini=!0)})},y=function(){J(".pxl_pic").on("mousedown",function(t){g=!0,x=t.pageX,d=t.pageY,l=c.position(),e=l.left-x,a=p.fixed?l.top-d-J(window).scrollTop():l.top-d,p.center=!1,J(".pxl_center").removeClass("true")}),J(".pxl_pic").on("mouseup",function(){g=!1}),J("body").on("mousemove",function(t){g&&(p.top=t.pageY+a,p.left=t.pageX+e,C("right"),R(),J(".pxl_right input").val(p.right),c.css({top:p.top,left:p.left,right:p.right}))})},k=function(){J(".pxl_about_button").on("click",function(){J(".pxl_about").is(":visible")?(J(this).fadeTo(200,.8),J(".pxl_about").animate({top:"100px"},{queue:!1,duration:200}).fadeOut(200)):(J(this).fadeTo(200,1),J(".pxl_about").fadeIn(200).animate({top:"200px"},{queue:!1,duration:200}))}),J(".pxl_clip_button").on("click",function(){E(!1,J(this))}),J(".pxl_cross_button").on("click",function(){J("#pxl_wrap, .pxl_styles").remove()})},B=function(){J(".pxl_nav div").not(".pxl_show").on("click",function(){if(u&&!f){switch(step=parseInt(p.step),J(this).attr("class")){case"pxl_tl":p.left-=step,p.top-=step;break;case"pxl_t":p.top-=step;break;case"pxl_tr":p.left+=step,p.top-=step;break;case"pxl_l":p.left-=step;break;case"pxl_r":p.left+=step;break;case"pxl_bl":p.top+=step,p.left-=step;break;case"pxl_b":p.top+=step;break;case"pxl_br":p.top+=step,p.left+=step}C("right")}}),J(window).on("keydown",function(t){var i=t.keyCode;f||(u&&!t.shiftKey?(step=parseInt(p.step),37===i||65===i&&h?p.left-=step:38===i||87===i&&h?p.top-=step:39===i||68===i&&h?p.left+=step:40===i||83===i&&h?p.top+=step:48<i&&i<58&&(p.step=String.fromCharCode(t.keyCode),J(".pxl_step").val(p.step)),C("right"),R()):t.shiftKey&&69===i&&J(".pxl_show").trigger("click"))}),J(".pxl_step").on("change",function(){p.step=J(this).val()})},I=function(){var t=p.left;J(".pxl_center").on("click",function(){u&&(p.center?(p.center=!1,p.left=t,C("right"),J(this).removeClass("true")):(p.center=!0,t=p.left,p.left=(J(i).width()-c.width())/2,J(this).addClass("true")),C("right"))}),J(".pxl_fixed").on("click",function(){u&&(p.fixed?(p.fixed=!1,v="absolute",J(this).removeClass("true")):(p.fixed=!0,v="fixed",J(this).addClass("true")),c.css("position",v))}),J(".pxl_pervious").on("click",function(){u&&(p.pervious?(p.pervious=!1,b="auto",J(this).removeClass("true")):(p.pervious=!0,b="none",J(this).addClass("true")),c.css("pointerEvents",b))}),J(".pxl_settings input").on("blur",function(){if(f=!1,u){var t=J(this),i=t.parent().attr("class").split("_")[1];"src"!==i?(p[i]=t.val(),F(i)):(p.src=t.val(),J(".pxl_pic img").attr("src",p.src),c=J(".pxl_pic"),$pxl_img=J(".pxl_pic img")),R()}}).on("focus",function(){f=!0,w=J(this).parent().attr("class")}).on("mousewheel",function(t){if(f&&J(this).parent().attr("class")===w){var i=parseInt(J(this).val()),p=J(this).parent().hasClass("pxl_opacity"),l=0<t.originalEvent.wheelDelta;p?(step=.1,i=parseFloat(J(this).val()),l?J(this).val((i+.1).toFixed(1)):J(this).val((i-.1).toFixed(1))):l?J(this).val(i+1):J(this).val(i-1)}}),J(".pxl_buttons div, .pxl_nav div").on("hover",function(){J(".pxl_title").text(J(this).attr("data"))},function(){J(".pxl_title").text("pixLayout")})},E=function(t,i){_=t||!_?(i.fadeTo(200,1),!0):(i.fadeTo(200,.8),!1)},C=function(t){var i="left";"left"===t&&(i="right"),p[t]=J(window).width()-(p[i]+c.width()),R()},F=function(t){var i=parseFloat(p[t]);isNaN(i)&&(i=p[t]),p[t]=i,J(".pxl_"+t+">input").val(i)},R=function(){return o=$pxl_img.width(),r=$pxl_img.height(),o?(n=o,s=r):(o=n,r=s),p.top=parseInt(p.top),p.left=parseInt(p.left),p.right=parseInt(p.right),p.zindex=parseInt(p.zindex),c.css({opacity:parseFloat(p.opacity),background:"url("+p.src+") no-repeat",width:o,height:r,top:p.top+"px",left:p.left+"px",right:p.right+"px",zIndex:p.zindex,position:v}),J(".pxl_about, .pxl_panel_wrap, .pxl_bool").css("zIndex",p.zindex+1),J(".pxl_left input").val(p.left),J(".pxl_right input").val(p.right),J(".pxl_top input").val(p.top),o},H=function(){J("head").append('<style type="text/css">html, body {*height:100%;}#pxl_wrap, #pxl_wrap div {background:transparent;border:0;color:#9dc8f2;font-size:9px;vertical-align:baseline;padding:0;outline:none;line-height:9px;float:none;font-style:normal;display:block;font-weight:normal;margin:0;position:static;cursor:default;font-variant:normal;visibility:visible;white-space:normal;overflow:hidden;height:auto;bottom:auto;}#pxl_wrap {color:#9dc8f2;font-family:Arial}#pxl_wrap .pxl_clear{clear:both;width:0;height:0;*height:1%;}#pxl_wrap .pxl_arrow_down{background-image:url("data:image/gif;base64,R0lGODlhBQADAIABAJ3I8v///yH5BAEAAAEALAAAAAAFAAMAAAIFhB0XC1sAOw==")!important;}#pxl_wrap .pxl_arrow_up {background-image:url("data:image/gif;base64,R0lGODlhBQADAIABAJ3I8v///yH5BAEAAAEALAAAAAAFAAMAAAIFTGAHuF0AOw==")!important;}#pxl_wrap .pxl_panel_wrap {position:fixed;top:0;right:0;width:104px;height:104px;z-index:10000}#pxl_wrap .pxl_panel{position:fixed;top:0;right:-104px;width:84px;font-size:9px;line-height:1;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBg2AwQYAAAuAC01qHx9QAAAABJRU5ErkJggg==");padding:5px 10px 10px;height:auto;}#pxl_wrap .pxl_hat{height:9px;margin-bottom:6px}#pxl_wrap .pxl_title{float:left;width:56px}#pxl_wrap .pxl_buttons{float:left;width:28px;height:7px;margin-top:1px;cursor:pointer}#pxl_wrap .pxl_buttons div{float:left;width:7px;height:7px;background-repeat:no-repeat;opacity:0.8;filter: alpha(opacity=80);cursor:pointer;}#pxl_wrap .pxl_buttons .pxl_about_button{padding-right:5px;background-image:url("data:image/gif;base64,R0lGODlhBQAHAIABAJ3I8v///yH5BAEAAAEALAAAAAAFAAcAAAIKDG6hoLvsmkyhAAA7");width:5px;}#pxl_wrap .pxl_buttons .pxl_clip_button{padding-right:4px;background-image:url("data:image/gif;base64,R0lGODlhBwAHAIABAJ3I8v///yH5BAEAAAEALAAAAAAHAAcAAAINDH5hoLzdHENUGWtdKAA7")}#pxl_wrap .pxl_buttons .pxl_cross_button{background-image:url("data:image/gif;base64,R0lGODlhBwAHAIABAJ3I8v///yH5BAEAAAEALAAAAAAHAAcAAAIKRH5miYr8HAyyFQA7");}#pxl_wrap .pxl_nav{width:84px;height:84px;margin-bottom:10px}#pxl_wrap .pxl_nav div{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpimHviUwNAgAEABzUC2Aw5loEAAAAASUVORK5CYII=");float:left;cursor:pointer;}#pxl_wrap .pxl_tl{width:20px;height:20px;border-top:3px solid #9dc8f2;border-left:3px solid #9dc8f2;margin:0 7px 7px 0}#pxl_wrap .pxl_t{width:24px;height:20px;border-top:3px solid #9dc8f2;margin:0 7px 7px 0}#pxl_wrap .pxl_tr{width:20px;height:20px;border-top:3px solid #9dc8f2;border-right:3px solid #9dc8f2;margin:0 0 7px}#pxl_wrap .pxl_l{width:20px;height:24px;border-left:3px solid #9dc8f2;margin:0 7px 7px 0}#pxl_wrap .pxl_nav .pxl_show{width:24px;height:24px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEZJREFUeNpinHviUwMDDQETA43B0LeABYtYPYVmNg7/IMLpXTygfmSlImKDoXE0J9M9DhpHg4ikHDqyg6hxNKPR1QKAAAMAbMsHlFVSABkAAAAASUVORK5CYII=");background-repeat:no-repeat;margin:0 7px 7px 0}#pxl_wrap .pxl_r{width:20px;height:24px;border-right:3px solid #9dc8f2;margin:0 0 7px}#pxl_wrap .pxl_bl{width:20px;height:20px;border-bottom:3px solid #9dc8f2;border-left:3px solid #9dc8f2;margin-right:7px}#pxl_wrap .pxl_b{width:24px;height:20px;border-bottom:3px solid #9dc8f2;margin-right:7px}#pxl_wrap .pxl_br{width:20px;height:20px;border-bottom:3px solid #9dc8f2;border-right:3px solid #9dc8f2}#pxl_wrap .pxl_settings{font-size:9px;*margin-top:-10px;height:auto;width:84px;}#pxl_wrap .pxl_settings div {width:84px;height:22px;}#pxl_wrap .pxl_settings input, #pxl_wrap .pxl_switch .pxl_bool{width: 39px;height:8px;background:transparent;border:1px solid #576f87;color:#9dc8f2;font-size:9px;vertical-align:baseline;padding:2px 0px 0px 2px;outline:none;line-height:9px;*position:relative;*bottom:-10px;*left:0;*right:0;*top:0;float:none;font-style:normal;display:inline;font-weight:normal;font-family:Arial;margin:0 5px 10px 0;position:static;cursor:text;font-variant:normal;max-width:44px;visibility:visible;white-space:normal;}#pxl_wrap .pxl_src input {width:80px;max-width:80px;height:10px;}#pxl_wrap .pxl_settings .pxl_switch .pxl_bool{position:static;cursor:pointer;padding-top:1px;padding-bottom:1px;float:left;margin-right:5px;padding: 3px;width: 5px;height: 5px;margin-left: 30px;}#pxl_wrap .pxl_settings .pxl_switch .pxl_bool.true{background-image:url("data:image/gif;base64,R0lGODlhBwAHAIABAJ3I8v///yH5BAEAAAEALAAAAAAHAAcAAAIKRH5miYr8HAyyFQA7");background-repeat:no-repeat;background-position:2px 2px;}#pxl_wrap .pxl_settings .pxl_switch_txt{float:left;margin-top:2px;*margin-top:10px;width: 36px;}#pxl_wrap .pxl_roll{position:absolute;top:auto;bottom:0;left:0;width:104px;background-position:50% 50%;background-repeat:no-repeat;height:9px;cursor:pointer}#pxl_wrap .pxl_roll:hover{background-color:#27323d}#pxl_wrap .pxl_about{position:fixed;width:370px;left:50%;top:100px;margin-left:-185px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBg2AwQYAAAuAC01qHx9QAAAABJRU5ErkJggg==");padding: 10px 10px 15px 10px;font-size: 12px;display:none;}#pxl_wrap .pxl_about ol{padding-left:20px;margin:5px;}#pxl_wrap .pxl_about div{margin:5px;font-size:11px;line-height:13px;}#pxl_wrap .pxl_about span{margin-left:5px}.pxl_about a,.pxl_about a:visited{color:#9dc8f2}#pxl_wrap .pxl_pic {margin:0;padding:0;cursor:move;position:absolute;z-index: 9999;}#pxl_wrap .pxl_pic img {position:relative;display:none;}</style>\x3c!--[if lt IE 9]><style type="text/css" class="pxl_styles">#pxl_wrap .pxl_panel {background: black;} #pxl_wrap .pxl_settings input, #pxl_wrap .pxl_center{padding:1px 0px 2px 2px;} #pxl_wrap .pxl_about {background: black;} #pxl_wrap .pxl_panel {*background: black;} #pxl_wrap .pxl_nav div {background: #4e6479;}</style><![endif]--\x3e')};return function(){for(var t in J(i).append(A),document.onselectstart=function(){return!1},c=J(".pxl_pic"),$pxl_img=J(".pxl_pic img"),p)F(t);H(),$pxl_img.on("load",function(){u||(m(),y(),k(),B(),I())})}(),this}})}(jQuery);