From bd2588a534be635bdbb96e32a925dec32905c682 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Mon, 14 Nov 2016 16:49:38 +0530
Subject: [PATCH] add inlet + some ui changes.
---
src/index.html | 50 ++++++++----
src/lib/inlet.css | 176 +++++++++++++++++++++++++++++++++++++++++++
src/lib/inlet.min.js | 2 +
src/script.js | 12 ++-
4 files changed, 223 insertions(+), 17 deletions(-)
create mode 100644 src/lib/inlet.css
create mode 100644 src/lib/inlet.min.js
diff --git a/src/index.html b/src/index.html
index d3b1ee4..3aac316 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,6 +5,7 @@
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">
<link rel="stylesheet" href="lib/hint.min.css">
+ <link rel="stylesheet" href="lib/inlet.css">
<style>
@font-face {
font-family: 'Inconsolata';
@@ -76,6 +77,12 @@
top: 0; bottom: 0;
display: flex;
flex-direction: column;
+ will-change: -webkit-filter;
+ transition: 0.15s ease 0.4s;
+ }
+ .overlay-visible .main-container {
+ transition-duration: 0.3s;
+ -webkit-filter: blur(3px);
}
.code-side,
.demo-side {
@@ -239,6 +246,7 @@
}
.modal__content {
background: #fdfdfd;
+ color: #444;
position: relative;
border-radius: 3px;
margin: 0 auto;
@@ -262,25 +270,21 @@
visibility: hidden;
top: 0;
left: 0;
- z-index: 1000;
+ z-index: 5;
opacity: 0;
+ will-change: opacity;
background: rgba(0,0,0,0.6);
transition: all 0.3s;
}
-
- .is-modal-visible ~ .modal-overlay {
- opacity: 1;
- visibility: visible;
- }
.saved-items-pane {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 400px;
- padding: 20px;
- z-index: 4;
- background-color: #111;
+ padding: 20px 30px;
+ z-index: 6;
+ background-color: #272822;
transition: 0.3s ease;
will-change: transform;
transform: translateX(100%);
@@ -288,10 +292,19 @@
.saved-items-pane.is-open {
transform: translateX(0);
}
+ .is-modal-visible ~ .modal-overlay,
+ .saved-items-pane.is-open ~ .modal-overlay {
+ opacity: 1;
+ visibility: visible;
+ }
.saved-items-pane__close-btn {
position: absolute;
- left: -32px;
+ left: -18px;
+ top: 24px;
opacity: 0;
+ border-radius: 50%;
+ padding: 10px 14px;
+ background: crimson;
transition: 0.25s ease;
}
.saved-items-pane.is-open .saved-items-pane__close-btn {
@@ -299,14 +312,20 @@
}
.saved-item-tile {
padding: 20px;
- border: 1px solid rgba(255,255,255,0.1);
- margin: 10px 0;
+ background-color: #2f302b;
+ /*border: 1px solid rgba(255,255,255,0.1);*/
+ margin: 20px 0;
display: block;
- border-radius: 2px;
+ border-radius: 4px;
+ box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}
.saved-item-tile:hover {
background: rgba(255,255,255,0.1);
}
+ .saved-items-pane__container {
+ overflow-y: scroll;
+ max-height: calc(100vh - 90px);
+ }
.notifications-btn {
position: relative;
}
@@ -635,8 +654,8 @@
<div id="js-saved-items-pane" class="saved-items-pane">
<button class="btn saved-items-pane__close-btn" id="js-saved-items-pane-close-btn">X</button>
- <h3>My Items</h3>
- <div id="js-saved-items-wrap">
+ <h3>My Library</h3>
+ <div id="js-saved-items-wrap" class="saved-items-pane__container">
</div>
</div>
@@ -675,6 +694,7 @@
<script src="lib/emmet.js"></script>
<script src="lib/split.js"></script>
+ <script src="lib/inlet.min.js"></script>
<script src="lib/esprima.js"></script>
<script src="lib/escodegen.browser.min.js"></script>
diff --git a/src/lib/inlet.css b/src/lib/inlet.css
new file mode 100644
index 0000000..5ffdca1
--- /dev/null
+++ b/src/lib/inlet.css
@@ -0,0 +1,176 @@
+/*
+ * =========================================================
+ * =========================================================
+ * ColorPicker
+ * =========================================================
+ * =========================================================
+ *
+ */
+.inlet_clicker {
+ z-index: 10;
+}
+.inlet_slider {
+ opacity: 0.85;
+ z-index: 10;
+ width: 24%;
+ display: block;
+ border-radius: 3px;
+ height: 14px;
+ -webkit-box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
+ box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
+ background-color: #d6d6d6;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#ebebeb));
+ background-image: -webkit-linear-gradient(top, #d6d6d6, #ebebeb);
+ background-image: -moz-linear-gradient(top, #d6d6d6, #ebebeb);
+ background-image: -o-linear-gradient(top, #d6d6d6, #ebebeb);
+ background-image: -ms-linear-gradient(top, #d6d6d6, #ebebeb);
+ background-image: linear-gradient(top, #d6d6d6, #ebebeb);
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#d6d6d6', EndColorStr='#ebebeb');
+}
+.inlet_slider:hover {
+ opacity: 0.98;
+}
+.inlet_slider .range {
+ width: 100%;
+ height: 100%;
+ outline: none;
+ margin-top: 0px;
+ margin-left: 0px;
+ border-radius: 3px;
+}
+.inlet_slider input[type="range"] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+}
+@-moz-document url-prefix() {
+ .inlet_slider input[type="range"] {
+ position: absolute;
+ }
+}
+.inlet_slider input::-moz-range-track {
+ background: none;
+ border: none;
+ outline: none;
+}
+.inlet_slider input::-webkit-slider-thumb {
+ cursor: col-resize;
+ -webkit-appearance: none;
+ -moz-apperance: none;
+ width: 12px;
+ height: 12px;
+ border-radius: 6px;
+ border: 1px solid black;
+ background-color: red;
+ -webkit-box-shadow: 0px 0px 3px 0px rgba(4, 4, 4, 0.4);
+ box-shadow: 0px 0px 3px 0px rgba(4, 4, 4, 0.4);
+ background-color: #424242;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#212121));
+ background-image: -webkit-linear-gradient(top, #424242, #212121);
+ background-image: -moz-linear-gradient(top, #424242, #212121);
+ background-image: -o-linear-gradient(top, #424242, #212121);
+ background-image: -ms-linear-gradient(top, #424242, #212121);
+ background-image: linear-gradient(top, #424242, #212121);
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#424242', EndColorStr='#212121');
+}
+/*
+ * =========================================================
+ * =========================================================
+ * ColorPicker
+ * =========================================================
+ * =========================================================
+ *
+ */
+.ColorPicker {
+ /*
+ border: 1px solid rgba(0,0,0,0.5);
+ border-radius: 6px;
+ background: #0d0d0d;
+ background: -webkit-gradient(linear, left top, left bottom, from(#333), color-stop(0.1, #111), to(#000000));
+ box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.35);
+ color:#AAA;
+ */
+ text-shadow: 1px 1px 1px #000;
+ color: #050505;
+ cursor: default;
+ display: block;
+ font-family: 'arial', helvetica, sans-serif;
+ font-size: 20px;
+ padding: 7px 8px 20px;
+ position: absolute;
+ top: 100px;
+ left: 700px;
+ width: 229px;
+ z-index: 100;
+ border-radius: 3px;
+ -webkit-box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
+ box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
+ background-color: rgba(214, 214, 215, 0.85);
+ /*
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(214, 214, 214)), to(rgb(235, 235, 235)));
+ background-image: -webkit-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
+ background-image: -moz-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
+ background-image: -o-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
+ background-image: -ms-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
+ background-image: linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#d6d6d6', EndColorStr='#ebebeb');
+ */
+}
+.ColorPicker br {
+ clear: both;
+ margin: 0;
+ padding: 0;
+}
+.ColorPicker input.hexInput:hover,
+.ColorPicker input.hexInput:focus {
+ color: #aa1212;
+}
+.ColorPicker input.hexInput {
+ -webkit-transition-property: color;
+ -webkit-transition-duration: .5s;
+ background: none;
+ border: 0;
+ margin: 0;
+ font-family: courier,monospace;
+ font-size: 20px;
+ position: relative;
+ top: -2px;
+ float: left;
+ color: #050505;
+ cursor: text;
+}
+.ColorPicker div.hexBox {
+ border: 1px solid rgba(255, 255, 255, 0.5);
+ border-radius: 2px;
+ background: #FFF;
+ float: left;
+ font-size: 1px;
+ height: 20px;
+ margin: 0 5px 0 2px;
+ width: 20px;
+ cursor: pointer;
+}
+.ColorPicker div.hexBox div {
+ width: inherit;
+ height: inherit;
+}
+.ColorPicker div.hexClose {
+ display: none;
+ /*
+ -webkit-transition-property: color, text-shadow;
+ -webkit-transition-duration: .5s;
+ position: relative;
+ top: -1px;
+ left: -1px;
+ color:#FFF;
+ cursor:pointer;
+ float:right;
+ padding: 0 5px;
+ margin:0 4px 3px;
+ user-select:none;
+ -webkit-user-select: none;
+ */
+}
+.ColorPicker div.hexClose:hover {
+ text-shadow: 0 0 20px #fff;
+ color: #FF1100;
+}
diff --git a/src/lib/inlet.min.js b/src/lib/inlet.min.js
new file mode 100644
index 0000000..32d184d
--- /dev/null
+++ b/src/lib/inlet.min.js
@@ -0,0 +1,2 @@
+// Generated by CoffeeScript 1.10.0
+((function(){var a,b,c,d,e,f,g,h,i,j,k,l,m=[].slice;g=function(a,b,c){return c=c<0?c+1:c>1?c-1:c,c*6<1?a+(b-a)*c*6:c*2<1?b:c*3<2?a+(b-a)*(.66666-c)*6:a},f=function(a,b,c){var d,e;return e=c<=.5?c*(b+1):c+b-c*b,d=c*2-e,{r:g(d,e,a+.33333),g:g(d,e,a),b:g(d,e,a-.33333)}},k=function(a,b,c){var d,e,f,g,h,i,j;return g=Math.max(a,b,c),h=Math.min(a,b,c),d=g-h,j=g+h,e=h===g?0:a===g?(60*(b-c)/d+360)%360:b===g?60*(c-a)/d+120:60*(a-b)/d+240,f=j/2,i=f===0?0:f===1?1:f<=.5?d/j:d/(2-j),{h:e,s:i,l:f}},e=function(a,b,c,e){return e!=null?"hsla("+d(Math.round(a*180/Math.PI),360)+","+Math.round(b*100)+"%,"+Math.round(c*100)+"%,"+e+")":"hsl("+d(Math.round(a*180/Math.PI),360)+","+Math.round(b*100)+"%,"+Math.round(c*100)+"%)"},c=function(a){var b,c,d,e,f,g;return g=document.createElement("span"),document.body.appendChild(g),g.style.backgroundColor=a,f=getComputedStyle(g).backgroundColor,document.body.removeChild(g),d=/^rgb\((\d+), (\d+), (\d+)\)$/.exec(f),d||(d=/^rgba\((\d+), (\d+), (\d+), ([\d.]+)\)$/.exec(f)),e=parseInt(d[1]),c=parseInt(d[2]),b=parseInt(d[3]),d[4]?{r:e/255,g:c/255,b:b/255,a:parseFloat(d[4])}:{r:e/255,g:c/255,b:b/255}},h=function(a){var b,c;return c=document.createElement("span"),document.body.appendChild(c),c.style.backgroundColor=a,b=c.style.backgroundColor.length>0,c.remove(),b},l=function(a,b){var c,d;for(c in b)d=b[c],a.style[c]=d;return a},d=function(a,b){return a%=b,a<0&&(a+=b),a},i=function(a,b,c){return b+(c-b)*Math.min(1,Math.max(0,a))},a=function(){function a(a,b,c){var d,e,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y;this.radius=a,this.width=b,this.lightness=c,r=this.radius,w=this.width,e=this.canvas=document.createElement("canvas"),e.width=e.height=r*2,g=e.getContext("2d"),o=g.createImageData(e.width,e.height),i=o.data;for(y=n=0,s=e.height;0<=s?n<s:n>s;y=0<=s?++n:--n)for(x=p=0,t=e.width;0<=t?p<t:p>t;x=0<=t?++p:--p){k=y-r,j=x-r,h=Math.sqrt(k*k+j*j);if(h>r+1.5)continue;h-=10,v=Math.max(0,Math.min(1,h/(r-w/2-10))),m=Math.atan2(k,j)/(Math.PI*2),u=f(m,v,this.lightness),q=u.r,l=u.g,d=u.b,i[(y*e.width+x)*4+0]=q*255,i[(y*e.width+x)*4+1]=l*255,i[(y*e.width+x)*4+2]=d*255,i[(y*e.width+x)*4+3]=255}g.putImageData(o,0,0)}return a.prototype.drawHSLCircle=function(a,b){var c,d,e,f;return a.width=a.height=2*this.radius,c=a.getContext("2d"),f=this.width,e=this.radius,d=i(b,f,e),c.save(),c.fillStyle="rgba(0,0,0,0.3)",c.beginPath(),c.arc(e,e,e,0,Math.PI*2),c.fill(),c.fillStyle="black",c.beginPath(),c.arc(e,e,d,0,Math.PI*2),c.arc(e,e,d-f,0,Math.PI*2,!0),c.fill(),c.globalCompositeOperation="source-in",c.drawImage(this.canvas,0,0),c.restore()},a}(),j=function(a){return typeof a=="string"&&(a=c(a)),a.r!=null&&a.g!=null&&a.b!=null?(a=k(a.r,a.g,a.b),a.h=a.h*Math.PI/180):a.h!=null&&a.s!=null&&a.l!=null&&(a.h=a.h*Math.PI/180),a},b=function(){function s(a){this.color=j(a),this.refColor=this.color,this.el=p(),this.circleContainer=this.el.appendChild(g.call(this)),this.lSlider=this.el.appendChild(o.call(this)),this.colorPreview=this.el.appendChild(h.call(this)),b.call(this),this.setLightness(this.color.l)}var b,g,h,n,o,p,q,r;return q=80,r=25,s.prototype.setHue=function(a){var b,c,d;return this.color.h=a,d=i(this.color.s,r,q)-r/2,c=q-r/2,l(this.hueKnob,{left:Math.round(c+Math.cos(a)*d+6-1)+"px",top:Math.round(c+Math.sin(a)*d+6-1)+"px"}),this.colorPreview.style.backgroundColor=this.lKnob.style.backgroundColor=this.hueKnob.style.backgroundColor=e(this.color.h,this.color.s,this.color.l),b=e(this.color.h,this.color.s,.5),this.lSlider.style.backgroundImage="-webkit-linear-gradient(bottom, black, "+b+" 50%, white)",this.lSlider.style.backgroundImage="-moz-linear-gradient(bottom, black, "+b+" 50%, white)",this.emit("changed")},s.prototype.setSaturation=function(a){return this.color.s=a,this.circle.drawHSLCircle(this.circleCanvas,a),this.setHue(this.color.h)},s.prototype.setLightness=function(b){return this.color.l=b,this.circle=new a(q,r,b),this.lKnob.style.top=(1-b)*this.lSlider._height-11+"px",this.setSaturation(this.color.s)},s.prototype.setHSL=function(a,b,c){return this.color.h=d(a,360)*Math.PI/180,this.color.s=Math.max(0,Math.min(1,b)),c=Math.max(0,Math.min(1,c)),this.setLightness(c)},s.prototype.getHSL=function(){return{h:d(this.color.h*180/Math.PI,360),s:this.color.s,l:this.color.l}},s.prototype.setRGB=function(a,b,c){var d,e,f,g;return f=k(a,b,c),d=f.h,g=f.s,e=f.l,this.setHSL(d,g,e)},s.prototype.getRGB=function(){return f(this.color.h/(Math.PI*2),this.color.s,this.color.l)},s.prototype.getCSS=function(){return e(this.color.h,this.color.s,this.color.l)},s.prototype.setCSS=function(a){var b,d,e,f;return f=c(a),e=f.r,d=f.g,b=f.b,this.setRGB(e,d,b)},s.prototype.on=function(a,b){var c;return this._listeners==null&&(this._listeners={}),((c=this._listeners)[a]!=null?c[a]:c[a]=[]).push(b)},s.prototype.emit=function(){var a,b,c,d,e,f,g,h;b=arguments[0],a=2<=arguments.length?m.call(arguments,1):[];if(this._listeners){g=(f=this._listeners[b])!=null?f:[],h=[];for(c=0,e=g.length;c<e;c++)d=g[c],h.push(d.call.apply(d,[this].concat(m.call(a))));return h}},s.prototype.removeListener=function(a,b){var c;if(this._listeners[a])return this._listeners[a]=function(){var d,e,f,g;f=this._listeners[a],g=[];for(d=0,e=f.length;d<e;d++)c=f[d],c!==b&&g.push(c);return g}.call(this)},b=function(){var a,b;return this.lKnob.onmousedown=function(a){return function(b){var c,d;return document.documentElement.style.cursor="pointer",window.addEventListener("mousemove",c=function(b){var c,d;return c=a.lSlider.getBoundingClientRect(),d=b.clientY-c.top,a.setLightness(Math.max(0,Math.min(1,1-d/a.lSlider._height)))}),window.addEventListener("mouseup",d=function(a){return window.removeEventListener("mousemove",c),window.removeEventListener("mouseup",d),window.removeEventListener("blur",d),document.documentElement.style.cursor=""}),window.addEventListener("blur",d),b.preventDefault(),b.stopPropagation()}}(this),a=this.circleContainer,b=function(b){return function(c){var d,e,f,g,h,j,k;j=c.layerX,k=c.layerY,e=j-q,f=k-q,d=Math.sqrt(e*e+f*f),h=Math.atan2(f,e),g=i(b.color.s,r,q);if(!(g-r<d&&d<g))return a.style.cursor="";if(-Math.PI/8<h&&h<Math.PI/8||h>=7*Math.PI/8||h<=-7*Math.PI/8)return a.style.cursor="ew-resize";if(Math.PI/8<=h&&h<3*Math.PI/8||-7*Math.PI/8<h&&h<=-5*Math.PI/8)return a.style.cursor="nwse-resize";if(3*Math.PI/8<=h&&h<5*Math.PI/8||-5*Math.PI/8<h&&h<=-3*Math.PI/8)return a.style.cursor="ns-resize";if(5*Math.PI/8<=h&&h<7*Math.PI/8||-3*Math.PI/8<h&&h<=-Math.PI/8)return a.style.cursor="nesw-resize"}}(this),a.addEventListener("mouseover",function(c){var d,e;return b(c),a.addEventListener("mousemove",d=function(a){return b(a)}),a.addEventListener("mouseout",e=function(b){return a.style.cursor="",a.removeEventListener("mousemove",d),a.removeEventListener("mouseout",e),window.removeEventListener("blur",e)}),window.addEventListener("blur",e)}),a.addEventListener("mousedown",function(b){return function(c){var d,e,f,g,h,j,k,l,m;c.preventDefault(),l=c.layerX,m=c.layerY,e=l-q,f=m-q,d=Math.sqrt(e*e+f*f),j=Math.atan2(f,e),h=i(b.color.s,r,q);if(h-r<d&&d<h)return document.documentElement.style.cursor=a.style.cursor,window.addEventListener("mousemove",g=function(a){var c,g,i;return h=b.circleCanvas.getBoundingClientRect(),c=h.left+h.width/2,g=h.top+h.height/2,e=a.clientX-c,f=a.clientY-g,d=Math.sqrt(e*e+f*f),d-=10,i=Math.max(0,Math.min(1,d/(q-r/2-10))),b.setSaturation(i)}),window.addEventListener("mouseup",k=function(a){return window.removeEventListener("mousemove",g),window.removeEventListener("mouseup",k),window.removeEventListener("blur",k),document.documentElement.style.cursor=""}),window.addEventListener("blur",k);return}}(this)),this.hueKnob.onmousedown=function(a){return function(b){var c,d;return document.documentElement.style.cursor="pointer",window.addEventListener("mousemove",c=function(b){var c,d,e;return e=a.circleCanvas.getBoundingClientRect(),c=e.left+e.width/2,d=e.top+e.height/2,a.setHue(Math.atan2(b.clientY-d,b.clientX-c))}),window.addEventListener("mouseup",d=function(a){return window.removeEventListener("mousemove",c),window.removeEventListener("mouseup",d),window.removeEventListener("blur",d),document.documentElement.style.cursor=""}),window.addEventListener("blur",d),b.preventDefault(),b.stopPropagation()}}(this)},p=function(){var a;return a=document.createElement("div"),a.className="picker",l(a,{display:"inline-block",background:"hsl(0, 0%, 97%)",padding:"6px",borderRadius:"6px",boxShadow:"1px 1px 5px hsla(0, 0%, 39%, 0.2), hsla(0, 0%, 100%, 0.9) 0px 0px 1em 0.3em inset",border:"1px solid hsla(0, 0%, 59%, 0.2)",position:"absolute",backgroundImage:"-webkit-linear-gradient(left top, hsla(0, 0%, 0%, 0.05) 25%, transparent 25%, transparent 50%, hsla(0, 0%, 0%, 0.05) 50%, hsla(0, 0%, 0%, 0.05) 75%, transparent 75%, transparent)",backgroundSize:"40px 40px"}),l(a,{backgroundImage:"-moz-linear-gradient(left top, hsla(0, 0%, 0%, 0.05) 25%, transparent 25%, transparent 50%, hsla(0, 0%, 0%, 0.05) 50%, hsla(0, 0%, 0%, 0.05) 75%, transparent 75%, transparent)",zIndex:"1000"}),a},g=function(){var a,b;return a=document.createElement("div"),l(a,{display:"inline-block",width:q*2+"px",height:q*2+"px",borderRadius:q+"px",boxShadow:"0px 0px 7px rgba(0,0,0,0.3)"}),a.appendChild(this.circleCanvas=document.createElement("canvas")),this.hueKnob=b=n(27),a.appendChild(b),a},o=function(){var a,b;return b=document.createElement("div"),l(b,{display:"inline-block",width:"20px",height:q*2-22+"px",marginLeft:"6px",borderRadius:"10px",boxShadow:"hsla(0, 100%, 100%, 0.1) 0 1px 2px 1px inset, hsla(0, 100%, 100%, 0.2) 0 1px inset, hsla(0, 0%, 0%, 0.4) 0 -1px 1px inset, hsla(0, 0%, 0%, 0.4) 0 1px 1px",position:"relative",top:"-11px"}),b._height=q*2-22,this.lKnob=a=n(22),l(a,{left:"-1px"}),b.appendChild(a),b},h=function(){var a,b,c;return a=document.createElement("div"),b=e(this.refColor.h,this.refColor.s,this.refColor.l),c=e(this.refColor.h,this.refColor.s,this.refColor.l,0),l(a,{boxShadow:"hsla(0, 0%, 0%, 0.5) 0 1px 5px, hsla(0, 100%, 100%, 0.4) 0 1px 1px inset, hsla(0, 0%, 0%, 0.3) 0 -1px 1px inset",height:"25px",marginTop:"6px",borderRadius:"3px",backgroundImage:"-webkit-linear-gradient(-20deg, "+c+", "+c+" 69%, "+b+" 70%, "+b+")"}),l(a,{backgroundImage:"-moz-linear-gradient(-20deg, "+c+", "+c+" 69%, "+b+" 70%, "+b+")"}),a},n=function(a){var b;return b=document.createElement("div"),b.className="knob",l(b,{position:"absolute",width:a+"px",height:a+"px",backgroundColor:"red",borderRadius:Math.floor(a/2)+"px",cursor:"pointer",backgroundImage:"-webkit-gradient(radial, 50% 0%, 0, 50% 0%, 15, color-stop(0%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(255, 255, 255, 0.2)))",boxShadow:"white 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px -1px 1px inset, rgba(0, 0, 0, 0.4) 0px 1px 4px 0px, rgba(0, 0, 0, 0.6) 0 0 2px"}),l(b,{backgroundImage:"radial-gradient(circle at center top, rgba(255,255,255,0.8), rgba(255, 255, 255, 0.2) 15px"}),b},s.prototype.presentModal=function(a,b){var c;return l(this.el,{left:a+"px",top:b-10+"px",opacity:"0",webkitTransition:"0.15s",MozTransition:"0.15s"}),c=document.createElement("div"),c.style.position="fixed",c.style.top=c.style.left=c.style.bottom=c.style.right="0",c.style.zIndex="999",c.onclick=function(a){return function(){var d;return document.body.removeChild(c),a.el.style.top=b+10+"px",a.el.style.opacity=0,d=function(){return document.body.removeChild(a.el),a.el.removeEventListener("webkitTransitionEnd",d),a.el.removeEventListener("transitionend",d)},a.el.addEventListener("webkitTransitionEnd",d),a.el.addEventListener("transitionend",d),a.emit("closed")}}(this),document.body.appendChild(c),document.body.appendChild(this.el),this.el.offsetHeight,this.el.style.opacity="1",this.el.style.top=b+"px",this},s.prototype.presentModalBeneath=function(a){var b,c,d;return b=a.getBoundingClientRect(),c=b.left+window.scrollX,d=b.bottom+window.scrollY+4,this.presentModal(c,d)},s}(),window.thistle={Picker:b,isValidCSSColor:h}})).call(this);if(typeof Color=="undefined")var Color={};typeof Color.Space=="undefined"&&(Color.Space={}),function(){"use strict";var useEval=!1,functions={},shortcuts={"HEX24>HSL":"HEX24>RGB>HSL","HEX32>HSLA":"HEX32>RGBA>HSLA","HEX24>CMYK":"HEX24>RGB>CMY>CMYK","RGB>CMYK":"RGB>CMY>CMYK"},root=Color.Space=function(color,route){shortcuts[route]&&(route=shortcuts[route]);var r=route.split(">");if(typeof color=="object"&&color[0]>=0){var type=r[0],tmp={};for(var i=0;i<type.length;i++){var str=type.substr(i,1);tmp[str]=color[i]}color=tmp}if(functions[route])return functions[route](color);var f="color";for(var pos=1,key=r[0];pos<r.length;pos++)pos>1&&(key=key.substr(key.indexOf("_")+1)),key+=(pos===0?"":"_")+r[pos],color=root[key](color),useEval&&(f="Color.Space."+key+"("+f+")");return useEval&&(functions[route]=eval("(function(color) { return "+f+" })")),color};root.RGB_W3=function(a){return"rgb("+(a.R>>0)+","+(a.G>>0)+","+(a.B>>0)+")"},root.RGBA_W3=function(a){var b=typeof a.A=="number"?a.A/255:1;return"rgba("+(a.R>>0)+","+(a.G>>0)+","+(a.B>>0)+","+b+")"},root.W3_RGB=function(a){return a=a.substr(4,a.length-5).split(","),{R:parseInt(a[0],10),G:parseInt(a[1],10),B:parseInt(a[2],10)}},root.W3_RGBA=function(a){return a=a.substr(5,a.length-6).split(","),{R:parseInt(a[0],10),G:parseInt(a[1],10),B:parseInt(a[2],10),A:parseFloat(a[3])*255}},root.HSL_W3=function(a){return"hsl("+(a.H+.5>>0)+","+(a.S+.5>>0)+"%,"+(a.L+.5>>0)+"%)"},root.HSLA_W3=function(a){var b=typeof a.A=="number"?a.A/255:1;return"hsla("+(a.H+.5>>0)+","+(a.S+.5>>0)+"%,"+(a.L+.5>>0)+"%,"+b+")"},root.W3_HSL=function(a){var b=a.indexOf("(")+1,c=a.indexOf(")");return a=a.substr(b,c-b).split(","),{H:parseInt(a[0],10),S:parseInt(a[1],10),L:parseInt(a[2],10)}},root.W3_HSLA=function(a){var b=a.indexOf("(")+1,c=a.indexOf(")");return a=a.substr(b,c-b).split(","),{H:parseInt(a[0],10),S:parseInt(a[1],10),L:parseInt(a[2],10),A:parseFloat(a[3],10)*255}},root.W3_HEX=root.W3_HEX24=function(a){return a.substr(0,1)==="#"&&(a=a.substr(1)),a.length===3&&(a=a[0]+a[0]+a[1]+a[1]+a[2]+a[2]),parseInt("0x"+a,16)},root.W3_HEX32=function(a){return a.substr(0,1)==="#"&&(a=a.substr(1)),a.length===6?parseInt("0xFF"+a,10):parseInt("0x"+a,16)},root.HEX_W3=root.HEX24_W3=function(a,b){b||(b=6),a||(a=0);var c,d=a.toString(16);c=d.length;while(c<b)d="0"+d,c++;c=d.length;while(c>b)d=d.substr(1),c--;return"#"+d},root.HEX32_W3=function(a){return root.HEX_W3(a,8)},root.HEX_RGB=root.HEX24_RGB=function(a){return{R:a>>16,G:a>>8&255,B:a&255}},root.HEX32_RGBA=function(a){return{R:a>>>16&255,G:a>>>8&255,B:a&255,A:a>>>24}},root.RGBA_HEX32=function(a){return(a.A<<24|a.R<<16|a.G<<8|a.B)>>>0},root.RGB_HEX24=root.RGB_HEX=function(a){return a.R<0&&(a.R=0),a.G<0&&(a.G=0),a.B<0&&(a.B=0),a.R>255&&(a.R=255),a.G>255&&(a.G=255),a.B>255&&(a.B=255),a.R<<16|a.G<<8|a.B},root.RGB_CMY=function(a){return{C:1-a.R/255,M:1-a.G/255,Y:1-a.B/255}},root.RGBA_HSLA=root.RGB_HSL=function(a){var b=a.R/255,c=a.G/255,d=a.B/255,e=Math.min(b,c,d),f=Math.max(b,c,d),g=f-e,h,i,j=(f+e)/2;if(g===0)h=0,i=0;else{j<.5?i=g/(f+e):i=g/(2-f-e);var k=((f-b)/6+g/2)/g,l=((f-c)/6+g/2)/g,m=((f-d)/6+g/2)/g;b===f?h=m-l:c===f?h=1/3+k-m:d===f&&(h=2/3+l-k),h<0&&(h+=1),h>1&&(h-=1)}return{H:h*360,S:i*100,L:j*100,A:a.A}},root.RGBA_HSVA=root.RGB_HSV=function(a){var b=a.R/255,c=a.G/255,d=a.B/255,e=Math.min(b,c,d),f=Math.max(b,c,d),g=f-e,h,i,j=f;if(g===0)h=0,i=0;else{i=g/f;var k=((f-b)/6+g/2)/g,l=((f-c)/6+g/2)/g,m=((f-d)/6+g/2)/g;b===f?h=m-l:c===f?h=1/3+k-m:d===f&&(h=2/3+l-k),h<0&&(h+=1),h>1&&(h-=1)}return{H:h*360,S:i*100,V:j*100,A:a.A}},root.CMY_RGB=function(a){return{R:Math.max(0,(1-a.C)*255),G:Math.max(0,(1-a.M)*255),B:Math.max(0,(1-a.Y)*255)}},root.CMY_CMYK=function(a){var b=a.C,c=a.M,d=a.Y,e=Math.min(d,Math.min(c,Math.min(b,1)));return b=Math.round((b-e)/(1-e)*100),c=Math.round((c-e)/(1-e)*100),d=Math.round((d-e)/(1-e)*100),e=Math.round(e*100),{C:b,M:c,Y:d,K:e}},root.CMYK_CMY=function(a){return{C:a.C*(1-a.K)+a.K,M:a.M*(1-a.K)+a.K,Y:a.Y*(1-a.K)+a.K}},root.HSLA_RGBA=root.HSL_RGB=function(a){var b=a.H/360,c=a.S/100,d=a.L/100,e,f,g,h,i,j;return c===0?e=f=g=d:(d<.5?i=d*(1+c):i=d+c-c*d,h=2*d-i,j=b+1/3,j<0&&(j+=1),j>1&&(j-=1),6*j<1?e=h+(i-h)*6*j:2*j<1?e=i:3*j<2?e=h+(i-h)*(2/3-j)*6:e=h,j=b,j<0&&(j+=1),j>1&&(j-=1),6*j<1?f=h+(i-h)*6*j:2*j<1?f=i:3*j<2?f=h+(i-h)*(2/3-j)*6:f=h,j=b-1/3,j<0&&(j+=1),j>1&&(j-=1),6*j<1?g=h+(i-h)*6*j:2*j<1?g=i:3*j<2?g=h+(i-h)*(2/3-j)*6:g=h),{R:e*255,G:f*255,B:g*255,A:a.A}},root.HSVA_RGBA=root.HSV_RGB=function(a){var b=a.H/360,c=a.S/100,d=a.V/100,e,f,g,h,i,j;if(c===0)e=f=g=Math.round(d*255);else{b>=1&&(b=0),b=6*b,h=b-Math.floor(b),i=Math.round(255*d*(1-c)),g=Math.round(255*d*(1-c*h)),j=Math.round(255*d*(1-c*(1-h))),d=Math.round(255*d);switch(Math.floor(b)){case 0:e=d,f=j,g=i;break;case 1:e=g,f=d,g=i;break;case 2:e=i,f=d,g=j;break;case 3:e=i,f=g,g=d;break;case 4:e=j,f=i,g=d;break;case 5:e=d,f=i,g=g}}return{R:e,G:f,B:g,A:a.A}}}(),Inlet=function(){function a(a,c){function w(a){var b=String(g.checked),c=d.getCursor(!0),e=L(c,"boolean");if(!e)return;var f={line:c.line,ch:e.start},h={line:c.line,ch:e.end};d.replaceRange(b,f,h)}function z(a){var b=String(e.value),c=d.getCursor(!0),f=L(c,"number");if(!f)return;var g={line:c.line,ch:f.start},h={line:c.line,ch:f.end};d.dragging=!0,d.replaceRange(b,g,h)}function A(a){e.value=0;var b=d.getCursor(!0),c=L(b,"number");if(!c)return;var f=parseFloat(c.string),g=K(f);e.setAttribute("value",f),e.setAttribute("step",g.step),e.setAttribute("min",g.min),e.setAttribute("max",g.max),e.value=f,d.dragging=!1}function C(a){if(a.target===B||a.target===x||a.target===e||a.target===v||a.target===g)return;x.style.visibility="hidden",v.style.visibility="hidden"}function H(){arguments.length==1?event=arguments[0]:event=arguments[1];if(event.keyCode==D||event.keyCode==G){if(x.style.visibility==="visible")return e.stepDown(1),z(),!0;event.altKey&&J()}else if(event.keyCode==F||event.keyCode==E){if(x.style.visibility==="visible")return e.stepUp(1),z(),!0;event.altKey&&J()}else x.style.visibility="hidden"}function J(a){if(d.somethingSelected())return;B=a.target;var c=d.getCursor(!0),h=d.getTokenAt(c);cursorOffset=d.cursorCoords(!0,"page");var o=d.cursorCoords(!0,p).left,q=L(c,"number"),r=L(c,"hsl"),s=L(c,"hex"),t=L(c,"rgb"),u=L(c,"boolean"),y=cursorOffset.top-i;cursorOffset.top<k&&(y=cursorOffset.top+j);var z=o-l;x.style.visibility="hidden",v.style.visibility="hidden";if(s){var A=s.string;f=new thistle.Picker(A),f.setCSS(A),f.presentModal(z,y),f.on("changed",function(){picked=f.getCSS(),picked=Color.Space(picked,"W3>HSL>RGB>HEX24>W3"),I(picked,"hex")})}else if(r){var A=r.string;f=new thistle.Picker(A),f.setCSS(A),f.presentModal(z,y),f.on("changed",function(){picked=f.getCSS(),I(picked,"hsl")})}else if(t){var A=t.string;f=new thistle.Picker(A),f.setCSS(A),f.presentModal(z,y),f.on("changed",function(){picked=f.getCSS(),picked=Color.Space(picked,"W3>HSL>RGB>W3"),I(picked,"rgb")})}else if(q){e.value=0;var C=parseFloat(q.string),D=K(C);e.setAttribute("value",C),e.setAttribute("step",D.step),e.setAttribute("min",D.min),e.setAttribute("max",D.max),e.value=C;var E=cursorOffset.top-m,F=window.getComputedStyle(x),G=b(F.width),H=o-G/2+n;x.style.top=E-10+"px",x.style.left=H+"px",x.style.visibility="visible"}else if(u){var J=cursorOffset.top-m,M=window.getComputedStyle(v),N=b(M.width),O=o-N/2+n,C=JSON.parse(u.string);C?(v.removeChild(g),g=document.createElement("input"),g.className="checkbox",g.setAttribute("type","checkbox"),g.setAttribute("checked","checked"),g.addEventListener("change",w),v.appendChild(g)):(v.removeChild(g),g=document.createElement("input"),g.className="checkbox",g.setAttribute("type","checkbox"),g.addEventListener("change",w),v.appendChild(g)),v.style.top=J-3+"px",v.style.left=O+"px",v.style.visibility="visible"}}function K(a){var b,c,d,e;return a===0?b=[-100,100]:b=[-a*3,a*5],b[0]<b[1]?(min=b[0],max=b[1]):(min=b[1],max=b[0]),max-min>20?c=1:c=(max-min)/200,{min:min,max:max,step:c}}function L(a,b){if(!b)return;var c;switch(b.toLowerCase()){case"boolean":c=/true|false/g;break;case"hsl":c=/hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)/g;break;case"rgb":c=/rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)/g;break;case"hex":c=/#[a-fA-F0-9]{3,6}/g;break;case"number":c=/[-]?\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g;break;default:throw new Error("invalid match selection")}var e=d.getLine(a.line),f=c.exec(e);while(f){var g=f[0],h=g.length,i=f.index,j=f.index+h;if(a.ch>=i&&a.ch<=j)return f=null,{start:i,end:j,string:g};f=c.exec(e)}return}var d=a,e,f,g;c||(c={}),c.picker||(c.picker={}),c.slider||(c.slider={}),c.clicker||(c.clicker={});var h=c.container||document.body,i=c.picker.topOffset||220,j=c.picker.bottomOffset||16,k=c.picker.topBoundary||250,l=c.picker.leftOffset||75,m=c.slider.yOffset||15,n=c.slider.xOffset||0,o=c.slider.width,p=c.horizontalMode||"page",q=c.fixedContainer,r=c.slider.callback||function(a){},s=c.picker.callback||function(a){},t=c.clicker.callback||function(a){},u=d.getWrapperElement();u.addEventListener("mouseup",J),document.body.addEventListener("mouseup",C),d.setOption("onKeyEvent",H);var v=document.createElement("div");v.className="inlet_clicker",v.style.visibility="hidden",v.style.position="absolute",h.appendChild(v);var g=document.createElement("input");g.className="checkbox",g.setAttribute("type","checkbox"),g.addEventListener("change",w),v.appendChild(g);var x=document.createElement("div");x.className="inlet_slider",x.style.visibility="hidden",o&&(x.style.width=o),q?x.style.position="fixed":x.style.position="absolute",x.style.top=0,h.appendChild(x);var e=document.createElement("input");e.className="range",e.setAttribute("type","range"),e.addEventListener("input",z),e.addEventListener("change",z);var y=navigator.userAgent.toLowerCase().indexOf("firefox")>-1;y||e.addEventListener("mouseup",A),x.appendChild(e);var B,D=37,E=38,F=39,G=40,I=function(a,b){var c=d.getCursor();if(!b)return;var e=L(c,b),f={line:c.line,ch:e.start},g={line:c.line,ch:e.end};d.picking=!0,d.replaceRange(a,f,g),setTimeout(function(){d.picking=!1},100)};f=new thistle.Picker("#ffffff")}function b(a){var b=0;return a.length>2&&(b=parseFloat(a.slice(0,a.length-2))),b||(b=0),b}function c(a){var b=0,c=0;while(a&&!isNaN(a.offsetLeft)&&!isNaN(a.offsetTop))b+=a.offsetLeft-a.scrollLeft,c+=a.offsetTop-a.scrollTop,a=a.offsetParent;return{top:c,left:b}}return a}();
\ No newline at end of file
diff --git a/src/script.js b/src/script.js
index 01f0171..fed9b23 100644
--- a/src/script.js
+++ b/src/script.js
@@ -173,8 +173,13 @@
toggleSavedItemsPane();
}
- function toggleSavedItemsPane() {
- savedItemsPane.classList.toggle('is-open');
+ function toggleSavedItemsPane(shouldOpen) {
+ if (shouldOpen === false) {
+ savedItemsPane.classList.remove('is-open');
+ } else {
+ savedItemsPane.classList.toggle('is-open');
+ }
+ document.body.classList[savedItemsPane.classList.contains('is-open') ? 'add' : 'remove']('overlay-visible');
}
function openSavedItemsPane() {
chrome.storage.local.get('items', function (result) {
@@ -501,10 +506,12 @@
mode: 'css',
gutters: [ 'error-gutter' ]
});
+ Inlet(editur.cm.css);
editur.cm.js = initEditor(jsCode, {
mode: 'javascript',
gutters: [ 'error-gutter' ]
});
+ Inlet(editur.cm.js);
function init () {
var lastCode;
@@ -601,6 +608,7 @@
if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) {
helpModal.classList.remove('is-modal-visible');
notificationsModal.classList.remove('is-modal-visible');
+ toggleSavedItemsPane(false);
}
});