Skip to content

Instantly share code, notes, and snippets.

@AndrewStaroscik

AndrewStaroscik/.block

Last active February 23, 2016 17:21
Show Gist options
  • Save AndrewStaroscik/fd920812330db427f0b1 to your computer and use it in GitHub Desktop.
Save AndrewStaroscik/fd920812330db427f0b1 to your computer and use it in GitHub Desktop.
Download ZIP
element resize functions
Raw
.block
license: gpl-3.0
Raw
readme.md

Demonstration of resize functions used with pymjs

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#mainFrame
{
position: relative;
width: 550px;
height: 550px;
margin: 0 auto;
}
#testdiv {
width: 200px;
height:100px;
border: 1px solid #4682b4;
}
#setbig {
width: 50px;
height:100px;
border: 1px solid #ff0000;
}
#shrnkfont {
font-size: 25px;
}
</style>
<body>
<div id='mainFrame'>
one div will resize after 2 second delay. The other will change at 3 seconds.
<div id = "testdiv"></div>
<div id = 'setbig'>Div set to large, will not scale to target size of 200px wide</div>
test scale font size: <span id="shrnkfont">Will shrink from 25px to 5px</span><br />
</div>
<script type="text/javascript">
// AMS sciPri Library as of 2/23/2016:
var sP=function(){var t={};return t.niceExp=function(t,e){var n={},e=e||3;return n.raw=1*t,n.rawShort=parseFloat(n.raw.toFixed(e)),n.exp=Math.floor(Math.log(t)/Math.log(10)),n.nForExp=t/Math.pow(10,n.exp),n.nForExpShort=parseFloat(n.nForExp.toFixed(e)),n.nNice=n.nForExpShort+"&#215;10<sup>"+n.exp+"</sup>",n},t.pF={},t.pF.setFrame=function(t,e,n,o,r){var a=e[0],s=e[1];n=o>n?n:o,n=n>r?n:r;var l=a*n/o+"px",i=s*n/o+"px",p=document.getElementById(t);p.style.width=l,p.style.height=i},t.pF.scEl=function(t,e,n,o){return o=o||1,t*e/n*o},t.rndToX=function(t,e){return Math.round(t*Math.pow(10,e))/Math.pow(10,e)},t.swtch={renderSwtch:function(t,e){var n,o,r,a=t.append("g").attr("id",e.id).attr("class",e["class"]).attr("swpos",e.swpos).attr("transform","translate("+e.gtX+","+e.gtY+")");for(o=e.elements.length,n=0;o>n;n+=1)r=e.elements[n],"text"===r.type?a.append(r.type).attr(r.attr).style(r.style).text(r.text):a.append(r.type).attr(r.attr).style(r.style)},newSwtch:function(t,e){var e=e||{oW:1,aR:1,oH:1,nW:1,nH:1},n="left"===t.swpos?0:45*e.nW/e.oW,o={"class":"noselect",elements:[{name:"bkgrnd",type:"rect",id:t.id+"bkgrnd",attr:{x:0,y:0,ry:6*e.nH/e.oH,height:30*e.nH/e.oH,width:90*e.nW/e.oW},style:{fill:"#ffffff",stroke:"#232323","stroke-width":1.5*e.nW/e.oW}},{name:"txtleft",type:"text",id:t.id+"txtleft",attr:{x:80*e.nW/e.oW,y:17.5*e.nH/e.oH,"text-anchor":"end","alignment-baseline":"middle","font-size":20*e.nW/e.oW+"px"},style:{},text:t.rightTxt},{name:"txtRight",type:"text",id:t.id+"txtRight",attr:{x:10*e.nW/e.oW,y:17.5*e.nH/e.oH,"text-anchor":"start","alignment-baseline":"middle","font-size":20*e.nW/e.oW+"px"},style:{},text:t.leftTxt},{name:"tglswtch",type:"rect",id:t.id+"tglswtch",attr:{id:t.id+"swtgl",x:n,y:0,ry:6*e.nH/e.oH,height:30*e.nH/e.oH,width:45*e.nW/e.oW},style:{fill:"#3bb084",stroke:"#232323","stroke-width":1.5*e.nW/e.oW}},{name:"label",type:"text",id:t.id+"label",attr:{x:0,y:-7*e.nH/e.oH,"text-anchor":"start","alignment-baseline":"middle","font-size":14*e.nW/e.oW+"px"},style:{},text:t.label}],gtX:e.nW*t.gtX/e.oW,gtY:e.nH*t.gtY/e.oH,id:t.id,swpos:"left"};return o},toggleSwitch:function(t,e,n){var o=0,n=n||{oW:1,aR:1,oH:1,nW:1,nH:1};"left"===e.swpos?(e.swpos="right",o=45):(e.swpos="left",o=0);t.select("#"+e.id+"swtgl").attr("x",n.nW*o/n.oW)}},t}();
setTimeout(function() {
sP.pF.setFrame("testdiv", [200,100], 75, 200, 10);
},2000);
setTimeout(function() {
sP.pF.setFrame("setbig", [100,200], 200, 100, 10);
},3000);
setTimeout(function() {
var el = document.getElementById("shrnkfont");
var newVal = sP.pF.scEl(25,5,25, 1) + "px";
el.style.fontSize = newVal;
},4000);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment