This repository has been archived by the owner on Jul 17, 2023. It is now read-only.
forked from bennettfeely/clippy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
clip.min.js
1 lines (1 loc) · 20.1 KB
/
clip.min.js
1
function setCustomBackground(a){var b=".shadowboard, .clipboard { background-image: url("+a+"); }";$("#custom_background").html(b),scrollTop()}function scrollTop(){$(window).width()<mobile_px_breakpoint&&$(window).scrollTop(0)}function init(){type=start_type,$.each(shape_array.polygon,function(a,b){paths="",$.each(b.coords,function(a,c){type="polygon";var d=c[0]+"%",e=c[1]+"%",c="";if(a==b.coords.length-1){paths+=d+" "+e;var f="polygon("+paths+")";appendFigure(f,b)}else paths+=d+" "+e+", "})}),$.each(shape_array.inset,function(a,b){type="inset";var c=b.coords[0]+"%",d=b.coords[1]+"%",e=b.coords[2]+"%",f=b.coords[3]+"%",g="inset("+c+" "+d+" "+e+" "+f+")";appendFigure(g,b)}),$.each(shape_array.custom,function(a,b){paths="",$.each(b.coords,function(a,c){type="custom";var d=c[0]+"%",e=c[1]+"%",c="";if(a==b.coords.length-1){paths+=d+" "+e;var f="polygon("+paths+")";appendFigure(f,b)}else paths+=d+" "+e+", "})}),$.each(shape_array.circle,function(a,b){type="circle";var c=b.radius+"%",d=b.position[0]+"%",e=b.position[1]+"%",f="circle("+c+" at "+d+" "+e+")";appendFigure(f,b)}),$.each(shape_array.ellipse,function(a,b){type="ellipse";var c=b.radius[0]+"%",d=b.radius[1]+"%",e=b.position[0]+"%",f=b.position[1]+"%",g="ellipse("+c+" "+d+" at "+e+" "+f+")";appendFigure(g,b)}),type=start_type,setupDemo(start_coords)}function appendFigure(a,b){var c="",d="clip-path: "+a;if(1==b.disabled)var e='class="disabled" ';else var e="";if($(".webkit.block").hasClass("show"))var c="-webkit-clip-path: "+a+";";if("polygon"==type)var f='<figure class="gallery-cell" '+e+'data-name="'+b.name+'" data-type="polygon" data-coords="'+b.coords.join(" ")+'"><div style="'+c+" "+d+'" class="shape '+b.name+'"></div><figcaption>'+b.name+"</figcaption></figure>";if("custom"==type)var f='<figure class="gallery-cell" '+e+'data-name="'+b.name+'" data-type="custom" data-coords="'+b.coords.join(" ")+'"><div style="'+c+" "+d+'" class="shape '+b.name+'"></div><figcaption>'+b.name+"</figcaption></figure>";if("inset"==type)var f='<figure class="gallery-cell" '+e+'data-name="'+b.name+'" data-type="inset" data-coords="'+b.coords.join(" ")+'"><div style="'+c+" "+d+'" class="shape '+b.name+'"></div><figcaption>'+b.name+"</figcaption></figure>";if("circle"==type)var f='<figure class="gallery-cell" '+e+'data-name="Circle" data-type="circle"><div style="'+c+" "+d+'" class="shape '+b.name+'"></div><figcaption>'+b.name+"</figcaption></figure>";if("ellipse"==type)var f='<figure class="gallery-cell" '+e+'data-name="Ellipse" data-type="ellipse"><div style="'+c+" "+d+'" class="shape '+b.name+'"></div><figcaption>'+b.name+"</figcaption></figure>";$shapes.append(f),$('[data-name="'+start.name+'"]').addClass("on"),$("figure:not(.disabled)").unbind().click(function(){if($("figure").removeClass("on"),$(this).addClass("on"),type=$(this).attr("data-type"),"inset"==type){var a=shape_array.inset[0];start_coords=a.coords,setupDemo(a.coords)}if("custom"==type&&setupDemo(),"circle"==type){var a=shape_array.circle[0];setupDemo(a.coords)}if("ellipse"==type){var a=shape_array.ellipse[0];setupDemo(a.coords)}if("polygon"==type){new_shape=[];var b=$(this).attr("data-coords").split(" "),b=$.each(b,function(a,c){var c=c.split(",");new_shape.push(c),a==b.length-1&&(start_coords=new_shape,setupDemo(start_coords))})}})}function setupDemo(a){if(clearDemo(),start_flickity(),"custom"==type){$html.addClass("customizing start-customizing customizing-no-poly"),$handles.empty(),$functions.html('polygon(<span class="function"></span>)'),$(".finish").click(function(){finishCustomizing(),readyDrag()}),clipIt();var b=0;$demo.click(function(a){b++;var c=$(this).offset(),d=a.pageX-c.left-10,e=a.pageY-c.top-10;if(0>d)var d=0;if(d>width)var d=width;if(0>e)var e=0;if(e>height)var e=height;var f=Math.round(d/width*100)+"%",g=Math.round(e/height*100)+"%";$handles.append('<div class="handle" data-handle="'+b+'" style="top: '+e+"px; left: "+d+'px;"></div>');var h=$(".function",h);if(b>1?h.append(', <code class="point" data-point="'+b+'">'+f+" "+g+"</code>"):(h.append('<code class="point" data-point="'+b+'">'+f+" "+g+"</code>"),$html.removeClass("start-customizing")),b>2){var i=["triangle","quadrilateral","pentagon","hexagon","heptagon","octagon","nonagon","decagon","hendecagon","dodecagon","tridecagon","tetradecagon","pentadecagon","hexadecagon","heptadecagon","octadecagon","nonadecagon","icosagon","icosagon","icosikaihenagon","icosikaidigon","icosikaitrigon","icosikaitetragon","icosikaipentagon","icosikaihexagon","icosikaiheptagon","icosikaioctagon","icosikaienneagon","triacontagon","triacontakaihenagon","triacontakaidigon","triacontakaitrigon","triacontakaitetragon","triacontakaipentagon","triacontakaihexagon","triacontakaiheptagon","triacontakaioctagon","triacontakaienneagon","tetracontagon","tetracontakaihenagon","tetracontakaidigon","tetracontakaitrigon","tetracontakaitetragon","tetracontakaipentagon","tetracontakaihexagon","tetracontakaiheptagon","tetracontakaioctagon","tetracontakaienneagon","pentacontagon","pentacontakaihenagon","pentacontakaidigon","pentacontakaitrigon","pentacontakaitetragon","pentacontakaipentagon","pentacontakaihexagon","pentacontakaiheptagon","pentacontakaioctagon","pentacontakaienneagon","hexacontagon","hexacontakaihenagon","hexacontakaidigon","hexacontakaitrigon","hexacontakaitetragon","hexacontakaipentagon","hexacontakaihexagon","hexacontakaiheptagon","hexacontakaioctagon","hexacontakaienneagon","heptacontagon","heptacontakaihenagon","heptacontakaidigon","heptacontakaitrigon","heptacontakaitetragon","heptacontakaipentagon","heptacontakaihexagon","heptacontakaiheptagon","heptacontakaioctagon","heptacontakaienneagon","octacontagon","octacontakaihenagon","octacontakaidigon","octacontakaitrigon","octacontakaitetragon","octacontakaipentagon","octacontakaihexagon","octacontakaiheptagon","octacontakaioctagon","octacontakaienneagon","enneacontagon","enneacontakaihenagon","enneacontakaidigon","enneacontakaitrigon","enneacontakaitetragon","enneacontakaipentagon","enneacontakaihexagon","enneacontakaiheptagon","enneacontakaioctagon","enneacontakaienneagon","hectogon"];$(".finish").attr("data-shape",i[b-3]),$html.removeClass("customizing-no-poly"),clipIt(),$('[data-handle="1"]').click(function(){finishCustomizing(),readyDrag()})}})}else finishCustomizing(),$.each(a,function(b,c){var d=c[0],e=c[1],f=d+"%",g=e+"%",h=Math.round(d/100*width),i=Math.round(e/100*height);if("circle"==type){var j=shape_array.circle[0],k=j.radius;if(width!==height)var l=width*getRadiusModifier();else var l=width;0==b&&$handles.append('<div class="radius handle" data-handle="'+b+'" style="top: '+i+"px; left: "+l+'px;"></div>'),1==b&&$handles.append('<div class="position handle" data-handle="'+b+'" style="top: '+i+"px; left: "+h+'px;"></div>');var m=j.position[0],n=j.position[1],k=k+"%",m=m+"%",n=n+"%";if(b==a.length-1){var k='<code class="point radius" data-point="0">'+k+"</code>",o='<code class="point position" data-point="1">'+m+" "+n+"</code>",p="circle("+k+" at "+o+")";$functions.append(p),clipIt(),readyDrag()}}if("ellipse"==type){var j=shape_array.ellipse[0],o=j.position,q=o[0]/100*width,r=o[1]/100*height,k=j.radius,l=(1-k[0]/100)*width,s=k[1]/2/100*height/2;0==b&&$handles.append('<div class="radius_x handle" data-handle="'+b+'" style="top: '+i+"px; left: "+l+'px;"></div>'),1==b&&$handles.append('<div class="radius_y handle" data-handle="'+b+'" style="top: '+s+"px; left: "+q+'px;"></div>'),2==b&&$handles.append('<div class="position handle" data-handle="'+b+'" style="top: '+r+"px; left: "+q+'px;"></div>');var t=k[0]+"%",u=k[1]+"%",m=j.position[0]+"%",n=j.position[1]+"%";if(b==a.length-1){var t='<code class="point radius" data-point="0">'+t+"</code>",u='<code class="point radius" data-point="1">'+u+"</code>",o='<code class="point position" data-point="2">'+m+" "+n+"</code>",p="ellipse("+t+" "+u+" at "+o+")";$functions.append(p),clipIt(),readyDrag()}}if("polygon"==type&&($handles.append('<div class="handle" data-handle="'+b+'" style="top: '+i+"px; left: "+h+'px;"></div>'),b==a.length-1?($functions.append('<code class="point" data-point="'+b+'">'+f+" "+g+"</code>"),$functions.prepend("polygon(").append(")"),clipIt(),readyDrag()):$functions.append('<code class="point" data-point="'+b+'">'+f+" "+g+"</code>, ")),"inset"==type&&($html.addClass("insetting"),b==a.length-1)){$handles.append('<div class="handle top horizontal bar" data-handle="0"></div>'),$handles.append('<div class="handle right vertical bar" data-handle="1"></div>'),$handles.append('<div class="handle bottom horizontal bar" data-handle="2"></div>'),$handles.append('<div class="handle left vertical bar" data-handle="3"></div>'),$unprefixed.attr("data-coords",a[0]+" "+a[1]+" "+a[2]+" "+a[3]),setHandleBars();var v='<code class="point" data-point="0">'+a[0]+"%</code> ",w='<code class="point" data-point="1">'+a[1]+"%</code> ",x='<code class="point" data-point="2">'+a[2]+"%</code> ",y='<code class="point" data-point="3">'+a[3]+"%</code>",p="inset("+v+w+x+y+'<span class="round-value"></span>)';$functions.append(p),clipIt(),readyDrag()}})}function start_flickity(){0==flickity&&$(".shapes.horizontal").flickity({cellAlign:"left",freeScroll:!0,prevNextButtons:!1,percentPosition:!1,pageDots:!1,contain:!0})}function finishCustomizing(){$html.removeClass("customizing start-customizing customizing-no-poly"),$(".finish").removeAttr("data-shape"),$demo.unbind("click")}function getRadiusModifier(){var a=(width/2+Math.sqrt(Math.pow(width,2)+Math.pow(height,2))/Math.sqrt(2)/2)/width;return a}function setHandleBars(a){var b=$unprefixed.attr("data-coords").split(" "),c=b[0],d=b[1],e=b[2],f=b[3],g=Math.round(c/100*height),h=Math.round((1-d/100)*width),i=Math.round((1-e/100)*height),j=Math.round(f/100*width),k=(h+j)/2,l=(g+i)/2;"top"!==a&&$(".top.bar").css("top",g).css("left",k),"right"!==a&&$(".right.bar").css("top",l).css("left",h),"bottom"!==a&&$(".bottom.bar").css("top",i).css("left",k),"left"!==a&&$(".left.bar").css("top",l).css("left",j)}function readyDrag(){{var a=document.querySelector("#box"),b=a.querySelectorAll(".handle");$(".functions")}if(("polygon"==type||"custom"==type)&&($(".handle").html('<div class="delete-point"></div>'),$(".handle").mousedown(function(){var a=$(".handle").length;if(a>3){var b=$(this),c=$(this).attr("data-handle");$(".handle").removeClass("show-delete"),b.addClass("show-delete"),$(".delete-point",b).mousedown(function(){b.remove(),$('[data-point="'+c+'"]').remove();var a=$(".functions").html(),d=a.replace("(, ","(").replace(", , ",", ").replace(", )",")");$(".functions").html(d),clipIt()}),b.mouseup(function(){setTimeout(function(){b.removeClass("show-delete")},3e3)})}})),"circle"==type||"polygon"==type||"custom"==type)for(var c=0,d=b.length;d>c;c++){var e=b[c];new Draggabilly(e,{containment:!0,grid:grid}).on("dragStart",function(a){if(c=a.element.dataset.handle,$point=$('[data-point="'+c+'"]'),$point.addClass("changing"),"circle"==type){special=a.element.classList[0],modifier=getRadiusModifier(),$position=$(".position.handle"),position_pos_x=$position.position().left,position_pos_y=$position.position().top,$radius=$(".radius.handle"),radius_pos_x=$radius.position().left,radius_pos_y=$radius.position().top;{var b=Math.max(width,height);Math.min(width,height)}b=Math.max(width,height),startRadius=getRadius(radius_pos_x,position_pos_x,radius_pos_y,position_pos_y)/100}}).on("dragMove",function(a){var b=a.position.x,c=a.position.y;if("circle"==type){if("position"==special){var d=width/2-b,e=height/2-c,f=Math.max(width,height),g=Math.atan2(e,d),h=Math.cos(g)*startRadius*f+b;if(0>h)var h=0;if(h>width)var h=width;var i=Math.sin(g)*startRadius*f+c;if(0>i)var i=0;if(i>height)var i=height;var j="left:"+h+"px; top:"+i+"px";$radius.attr("style",j),setPoint(b,c)}if("radius"==special){var k=getRadius(b,position_pos_x,c,position_pos_y),k=k+"%";$point.text(k)}}("polygon"==type||"custom"==type)&&setPoint(b,c),clipIt()}).on("dragEnd",function(){$(".point").removeClass("changing")})}if("ellipse"==type)for(var c=0,d=b.length;d>c;c++){var e=b[c],f=e.classList[0];if("radius_x"==f)var g="x";if("radius_y"==f)var g="y";if("position"==f)var g="";{new Draggabilly(e,{containment:!0,grid:grid,axis:g}).on("dragStart",function(a){if(c=a.element.dataset.handle,f=a.element.classList[0],$point=$('[data-point="'+c+'"]'),$point.addClass("changing"),$position=$(".position"),$radius_x=$(".radius_x"),$radius_y=$(".radius_y"),start_x_px=a.position.x,start_y_px=a.position.y,start_pos_x=$position.position().left,start_pos_x_pct=100*start_pos_x/width,start_pos_y=$position.position().top,start_pos_y_pct=100*start_pos_y/height,"position"==f){start_radius_x_px=[$radius_x.position().left,$radius_x.position().top],start_radius_y_px=[$radius_y.position().left,$radius_y.position().top];var b=$('.unprefixed [data-point="0"]').text();radius_x_pct=parseInt(b.replace("%",""));var d=$('.unprefixed [data-point="1"]').text();radius_y_pct=parseInt(d.replace("%",""));{var e=$('.unprefixed [data-point="2"]').text(),g=e.replace("%","").split(" ");parseInt(g[0]),parseInt(g[1])}}}).on("dragMove",function(a){var b=a.position.x,c=a.position.y;if("radius_x"==f){var d=Math.floor(Math.abs(start_pos_x-b)/width*100),d=d+"%";$point.text(d)}if("radius_y"==f){var e=Math.floor(Math.abs(start_pos_y-c)/height*100),e=e+"%";$point.text(e)}if("position"==f){var g=start_x_px-b,h=start_y_px-c,i=start_radius_x_px[0]-g,j=start_radius_x_px[1]-h,k=start_radius_y_px[0]-g,l=start_radius_y_px[1]-h,m=b-radius_x_pct/100*width;if(i>width&&m>0)var i=m;if(i>width)var i=width;$radius_x.css({left:i+"px",top:j+"px"}),$radius_y.css({left:k+"px",top:l+"px"});var d=Math.floor(b/width*100)+"%",e=Math.floor(c/height*100)+"%";$point.text(d+" "+e)}clipIt()}).on("dragEnd",function(){$(".point").removeClass("changing")})}}if("inset"==type)for(var c=0,d=b.length;d>c;c++){var e=b[c],f=e.classList[1];("left"==f||"right"==f)&&(g="x"),("top"==f||"bottom"==f)&&(g="y");{new Draggabilly(e,{containment:!0,grid:grid,axis:g}).on("dragStart",function(a){c=a.element.dataset.handle,f=a.element.classList[1],("left"==f||"right"==f)&&(g="x"),("top"==f||"bottom"==f)&&(g="y"),$point=$('[data-point="'+c+'"]'),$point.addClass("changing")}).on("dragMove",function(a){var b=a.position.x,c=a.position.y,d=1,b=(b/width*100).toFixed(0);if(d>b)var b=0;if(b>100-d)var b=100;var c=(c/height*100).toFixed(0);if(d>c)var c=0;if(c>100-d)var c=100;if("right"==f)var b=Math.abs(100-b);if("bottom"==f)var c=Math.abs(100-c);var e=$unprefixed.text().match(/inset(.*?)\)/g).toString(),e=e.replace("inset(","").replace(")","").replace(/%/g,"");if($unprefixed.attr("data-coords",e),0!==b)var b=b+"%";if(0!==c)var c=c+"%";"x"==g&&$point.text(b),"y"==g&&$point.text(c),setHandleBars(f),clipIt()}).on("dragEnd",function(){$(".point").removeClass("changing")})}}}function getRadius(a,b,c,d){var e=Math.sqrt(Math.pow(a-b,2)+Math.pow(c-d,2)),f=(e/width*100).toFixed(1);return f}function setPoint(a,b){var c=1,a=(a/width*100).toFixed(0);if(c>a)var a=0;if(a>100-c)var a=100;var b=(b/height*100).toFixed(0);if(c>b)var b=0;if(b>100-c)var b=100;if(0!==a)var a=a+"%";if(0!==b)var b=b+"%";$point.text(a+" "+b)}function clearDemo(){$html.removeClass("insetting"),$(".inset-round").val("5% 20% 0 10%"),$handles.empty(),$functions.empty()}function clipIt(){var a=$(".show.block").text();$clipboard.attr("style",a)}function handleReposition(a,b){$(".handle").each(function(){var c=parseInt($(this).css("left"))/a,d=parseInt($(this).css("top"))/b,e=c*width+"px",f=d*height+"px";$(this).css({left:e,top:f})})}function sizes(){var a=parseInt(width)+20,b=parseInt(height)+20;$demo_width.val(width),$demo_height.val(height),$box.css({width:a,height:b})}function codePen(){var a=$(".clip-path .show").text(),a=a.split(";").join(";\n"),b=$demo_width=$("#demo_width").val(),c=$demo_height=$("#demo_height").val(),d="div {\n width: "+b+"px;\n height: "+c+"px;\n background: #1e90ff;\n "+a+"}\n\n/* Center the demo */\nhtml, body { height: 100%; }\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n}",e={html:"<div></div>",css:d,css_pre_processor:"none",css_prefix:"autoprefixer",css_starter:"reset"},f=JSON.stringify(e).replace(/"/g,""").replace(/'/g,"'"),g=$('<form action="http://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data" value=\''+f+"'></form>");g.submit()}shape_array={polygon:[{name:"Triangle",coords:[[50,0],[0,100],[100,100]]},{name:"Trapezoid",coords:[[20,0],[80,0],[100,100],[0,100]]},{name:"Parallelogram",coords:[[25,0],[100,0],[75,100],[0,100]]},{name:"Rhombus",coords:[[50,0],[100,50],[50,100],[0,50]]},{name:"Pentagon",coords:[[50,0],[100,38],[82,100],[18,100],[0,38]]},{name:"Hexagon",coords:[[50,0],[100,25],[100,75],[50,100],[0,75],[0,25]]},{name:"Heptagon",coords:[[50,0],[90,20],[100,60],[75,100],[25,100],[0,60],[10,20]]},{name:"Octagon",coords:[[30,0],[70,0],[100,30],[100,70],[70,100],[30,100],[0,70],[0,30]]},{name:"Nonagon",coords:[[50,0],[83,12],[100,43],[94,78],[68,100],[32,100],[6,78],[0,43],[17,12]]},{name:"Decagon",coords:[[50,0],[80,10],[100,35],[100,70],[80,90],[50,100],[20,90],[0,70],[0,35],[20,10]]},{name:"Bevel",coords:[[20,0],[80,0],[100,20],[100,80],[80,100],[20,100],[0,80],[0,20]]},{name:"Rabbet",coords:[[0,15],[15,15],[15,0],[85,0],[85,15],[100,15],[100,85],[85,85],[85,100],[15,100],[15,85],[0,85]]},{name:"Left arrow",coords:[[40,0],[40,20],[100,20],[100,80],[40,80],[40,100],[0,50]]},{name:"Right arrow",coords:[[0,20],[60,20],[60,0],[100,50],[60,100],[60,80],[0,80]]},{name:"Left Point",coords:[[25,0],[100,1],[100,100],[25,100],[0,50]]},{name:"Right Point",coords:[[0,0],[75,0],[100,50],[75,100],[0,100]]},{name:"Left Chevron",coords:[[100,0],[75,50],[100,100],[25,100],[0,50],[25,0]]},{name:"Right Chevron",coords:[[75,0],[100,50],[75,100],[0,100],[25,50],[0,0]]},{name:"Star",coords:[[50,0],[61,35],[98,35],[68,57],[79,91],[50,70],[21,91],[32,57],[2,35],[39,35]]},{name:"Cross",coords:[[10,25],[35,25],[35,0],[65,0],[65,25],[90,25],[90,50],[65,50],[65,100],[35,100],[35,50],[10,50]]},{name:"Message",coords:[[0,0],[100,0],[100,75],[75,75],[75,100],[50,75],[0,75]]},{name:"Close",coords:[[20,0],[0,20],[30,50],[0,80],[20,100],[50,70],[80,100],[100,80],[70,50],[100,20],[80,0],[50,30]]},{name:"Frame",coords:[[0,0],[0,100],[25,100],[25,25],[75,25],[75,75],[25,75],[25,100],[100,100],[100,0]]}],circle:[{name:"Circle",radius:50,position:[50,50],coords:[[100,50],[50,50]],disabled:!0}],ellipse:[{name:"Ellipse",radius:[25,40],position:[50,50],coords:[[50,50],[0,50],[0,50]],disabled:!1}],inset:[{name:"Inset",coords:[5,20,15,10],disabled:!1}],custom:[{name:"Custom Polygon",coords:[[10,75],[10,25],[35,0],[100,10],[90,30],[50,30],[40,40],[40,60],[50,70],[90,70],[100,90],[35,100]],disabled:!1}]},$html=$("html"),$body=$("body"),$box=$("#box"),$side=$(".side"),$clipboard=$(".clipboard"),$handles=$(".handles"),$shapes=$(".shapes ul"),$functions=$(".functions"),$clip_path=$(".clip-path"),$unprefixed=$(".unprefixed"),$demo=$(".demo"),$codepen=$(".edit-in-codepen"),$inset_round=$("#inset_round"),$demo_width=$("#demo_width"),$demo_height=$("#demo_height");var start=shape_array.polygon[0];start_type="polygon",start_coords=start.coords,start_name=start.name,mobile_px_breakpoint=800,width=280,height=280,flickity=!1,grid=[0,0],$(function(){sizes(),init(),$(window).resize(function(){var a=width,b=height;handleReposition(a,b),sizes()}),$("#webkit").change(function(){$(this).is(":checked")?$(".webkit").addClass("show"):$(".webkit").removeClass("show"),finishCustomizing(),clipIt(),scrollTop()}),$("#shadowboard-toggle").change(function(){$(this).is(":checked")?$(".shadowboard").css("opacity",".25"):$(".shadowboard").css("opacity","0"),scrollTop()}),$('input[type="number"]').change(function(){var a=width,b=height;if(width=$demo_width.val(),$(window).width()<800)var c=$(window).width()-42;else var c=$(".demo-container").width()-42;var d=100;if(width>c&&(width=c),d>width&&(width=d),height=$demo_height.val(),$(window).width()<800)var e=$(window).height()-$("header").outerHeight()-42;else var e=$(".demo-container").height()-42;var f=100;height>e&&(height=e),f>height&&(height=f),handleReposition(a,b),$demo_width.val(width),$demo_height.val(height),sizes(),scrollTop()}),$(".inset-round").focus(function(){var a=$(this).val();"5% 20% 0 10%"==a&&$(this).val(""),$(this).blur(function(){var a=$(this).val();""!==a?$(".round-value").text(" round "+a):($(".round-value").text(""),$(this).val("5% 20% 0 10%")),clipIt()})}),$(".backgrounds img").mousedown(function(){var a=$(this).attr("src");setCustomBackground(a)}),$("#custom_url").blur(function(){var a=$(this).val();""!==a&&setCustomBackground(a)}),$codepen.click(codePen)});