-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
39 lines (36 loc) · 12.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stylist - Live CSS editor bookmarklet</title>
<link rel="stylesheet" href="index.css" />
</head>
<body id="stylist">
<header>
<img src="logo-inv-2-plain.svg" alt="Stylist logo" class="header-logo" />
<p>Live CSS editor bookmarklet for<br/> IE 9-11, Firefox, Safari, Chrome, Opera, Vivaldi and Brave</p>
<p><a href='javascript:(function(a,b,c){function d(a,b){return function d(){if(!d.timer){var e=arguments,f=this;d.timer=setTimeout(function(){a.apply(f,e),d.timer=c},b)}}}function e(a,b,c){for(var d,e=b.split(";"),f=0,g=e.length;f<g;f++)""!=e[f]&&(d=e[f].split(":"),c?a.style.removeProperty(d[0]):a.style.setProperty(d[0],d[1],"important"))}function f(a,c){var d=b.createElement("li");e(d,"color:#555;display:block"),d.appendChild(b.createTextNode(c)),a.appendChild(d)}function g(){function c(){switch(E){case"B":e(x,"top:0;right:0;height:100%;width:300px",!0),e(x,"bottom:0;left:0;height:300px;width:98%",!1),E="L";break;case"L":e(x,"bottom:0;left:0;height:300px;width:98%",!0),e(x,"top:0;left:0;height:100%;width:300px",!1),E="T";break;case"T":e(x,"top:0;left:0;height:100%;width:300px",!0),e(x,"top:0;left:0;height:300px;width:98%",!1),E="R";break;case"R":e(x,"top:0;left:0;height:300px;width:98%",!0),e(x,"top:0;right:0;height:100%;width:300px",!1),E="B";break;default:alert("Unrecognized position")}}function g(){v.innerHTML=G.checked?w.value:"",H()}function q(){var b=new Blob([w.value],{type:"text/plain;charset=UTF-8"});t=a.URL.createObjectURL(b,{oneTimeOnly:!0}),console.log(B),B.href=t,B.download="stylist_"+r()+".css",B.click(),a.URL.revokeObjectURL(t)}function r(){var a=new Date,b=a.getFullYear(),c=a.getMonth()+1,d=a.getDate(),e=a.getHours(),f=a.getMinutes(),g=a.getSeconds(),h="_";return c<10&&(c="0"+c),d<10&&(d="0"+d),e<10&&(e="0"+e),f<10&&(f="0"+f),g<10&&(g="0"+g),b+h+c+d+e+f+g}function s(a){var c=x||b.getElementById("__panel");c&&(c.style.display=a?"block":"none")}if(b.getElementById("stylist:panel"))return void s(!0);var t,u=(b.getElementsByTagName("head")[0],b.body),v=b.createElement("style"),w=b.createElement("textarea"),x=b.createElement("div"),y=b.createElement("h1"),z=b.createElement("ul"),A=b.createElement("label"),B=b.createElement("a"),C=b.createElement("version"),D=b.createElement("button"),E=(b.createElement("button"),"B"),F=!!a.chrome;x.style.display="block",w.spellcheck=!1,w.id="__input",x.id="__panel";var G=b.createElement("input");G.setAttribute("type","checkbox"),A.appendChild(G),A.appendChild(b.createTextNode("Apply CSS")),e(A,"font:12px monospace;vertical-align:middle;text-align:left"),e(G,"vertical-align:middle"),e(x,"position:fixed;top:0;right:0;width:300px;height:100%;z-index:2147483647;overflow:auto;outline:solid 1px #333;padding:0 20px;borderTop:0;borderBottom:0;borderRight:0;borderLeft:1px solid #ccc;color:#222;background:#fcfcfc"),e(w,"font:13px Inconsolata, Consolas, Menlo, Monaco, Lucida Console, Courier New, Courier, monospace;width:100%;height:calc(100% - 140px);direction:ltr;textAlign:left;background:#fcfcfc"),e(B,"display:none"),e(C,"font:9px monospace;color:#aaa;position:absolute;top:10px;right:40px"),C.innerHTML="v"+p,D.id="__close",D.setAttribute("title","Close this panel"),D.appendChild(b.createTextNode("X")),e(D,"position:absolute;top:10px;right:10px;cursor:pointer;transform:scale(0.8)"),v.setAttribute("type","text/css"),y.innerHTML="Stylist",e(y,"color:#555;background-color:#fcfcfc;width:150px;height:1.5em;margin:4px 0 4px 0;font-family:serif;font-size:20px;font-style:oblique;line-height:1.5em;box-shadow:none;text-shadow:none;text-align:left"),e(z,"font:12px monospace;list-style:none;margin-top:0px"),f(z,"CTRL+M: toggle this panel"),f(z,"CTRL+Y: change dock position"),f(z,"ALT+click: target element"),x.appendChild(y),x.appendChild(z),x.appendChild(A),x.appendChild(w),x.appendChild(C),x.appendChild(D),u.appendChild(x),u.appendChild(v),F&&(f(z,"CTRL+S: save CSS to file"),x.appendChild(B)),G.checked="true"===(localStorage.applyStyles||"true"),w.value=localStorage.siteStyle||"",w.placeholder="/* Enter your styles here. */",v.innerHTML=G.checked?w.value:"",u.addEventListener("click",function(a){if(-1===w.style.display.indexOf("none")&&a.target.id!==w.id&&a.altKey){var b,c,d=0,e=a.target,f=e.className.split(" ")||"",g=[],h="",i="";for(i+=e.tagName.toLowerCase(),e.id&&(i+="#"+e.id),d=0;d<f.length;d++)n.test(f[d])||(i+="."+f[d]);if(e.getAttribute("style"))for(g=e.getAttribute("style").split(";"),d=0;d<g.length;d++)b=g[d].split(o).join(" ").trim(),n.test(b)||(h+=l+b.toLowerCase()+";\n");i&&(h=h?"{\n"+h+"}":"{\n\n}",c="\n"+i+" "+h,w.value+=c,w.focus(),w.setSelectionRange(w.value.length-c.length,w.value.length)),a.preventDefault()}});var H=d(function(){localStorage.siteStyle=w.value,localStorage.applyStyles=G.checked?"true":"false",console.log("applyStyles :"+localStorage.applyStyles)},500);G.addEventListener("click",function(a){g()}),D.addEventListener("click",function(a){s(!1)}),w.addEventListener("keyup",g),w.addEventListener("change",g),w.addEventListener("keydown",function(a){var b=w.value,c=w.selectionStart;a.keyCode===h&&(w.value=b.substring(0,c)+l+b.substring(c),w.setSelectionRange(c+m,c+m),a.preventDefault())}),a.addEventListener("keydown",function(a){if(a.ctrlKey)switch(console.log(a.keyCode),a.keyCode){case j:s("none"===x.style.display);break;case i:c();break;case k:if(F)try{a.preventDefault(),q()}catch(a){console.log(a),alert("Unable to save your file.")}}})}var h=9,i=89,j=77,k=83,l=" ",m=l.length,n=/^\s*$/,o=/\s+$/g,p="1.7";String.prototype.trim=function(){return this.replace(/(^\s+|\s+$)/g,"")},g()})(this,this.document);' title="Drag me to the bookmark bar">Stylist</a></p>
<p><a href='javascript:(function(a,b,c){function d(a,b){return function d(){if(!d.timer){var e=arguments,f=this;d.timer=setTimeout(function(){a.apply(f,e),d.timer=c},b)}}}function e(a,b,c){for(var d,e=b.split(";"),f=0,g=e.length;f<g;f++)""!=e[f]&&(d=e[f].split(":"),c?a.style.removeProperty(d[0]):a.style.setProperty(d[0],d[1],"important"))}function f(a,c){var d=b.createElement("li");e(d,"color:#555;display:block"),d.appendChild(b.createTextNode(c)),a.appendChild(d)}function g(){function c(){switch(A){case"B":e(t,"top:0;right:0;height:100%;width:300px",!0),e(t,"bottom:0;left:0;height:300px;width:98%",!1),A="L";break;case"L":e(t,"bottom:0;left:0;height:300px;width:98%",!0),e(t,"top:0;left:0;height:100%;width:300px",!1),A="T";break;case"T":e(t,"top:0;left:0;height:100%;width:300px",!0),e(t,"top:0;left:0;height:300px;width:98%",!1),A="R";break;case"R":e(t,"top:0;left:0;height:300px;width:98%",!0),e(t,"top:0;right:0;height:100%;width:300px",!1),A="B";break;default:alert("Unrecognized position")}}function g(){r.innerHTML=B.checked?s.value:"",C()}function p(a){var c=t||b.getElementById("__panel");c&&(c.style.display=a?"block":"none")}if(b.getElementById("stylist:panel"))return void p(!0);var q=(b.getElementsByTagName("head")[0],b.body),r=b.createElement("style"),s=b.createElement("textarea"),t=b.createElement("div"),u=b.createElement("h1"),v=b.createElement("ul"),w=b.createElement("label"),x=b.createElement("a"),y=b.createElement("version"),z=b.createElement("button"),A=(b.createElement("button"),"B");a.chrome;t.style.display="block",s.spellcheck=!1,s.id="__input",t.id="__panel";var B=b.createElement("input");B.setAttribute("type","checkbox"),w.appendChild(B),w.appendChild(b.createTextNode("Apply CSS")),e(w,"font:12px monospace;vertical-align:middle;text-align:left"),e(B,"vertical-align:middle"),e(t,"position:fixed;top:0;right:0;width:300px;height:100%;z-index:2147483647;overflow:auto;outline:solid 1px #333;padding:0 20px;borderTop:0;borderBottom:0;borderRight:0;borderLeft:1px solid #ccc;color:#222;background:#fcfcfc"),e(s,"font:13px Inconsolata, Consolas, Menlo, Monaco, Lucida Console, Courier New, Courier, monospace;width:100%;height:calc(100% - 140px);direction:ltr;textAlign:left;background:#fcfcfc"),e(x,"display:none"),e(y,"font:9px monospace;color:#aaa;position:absolute;top:10px;right:40px"),y.innerHTML="v"+o,z.id="__close",z.setAttribute("title","Close this panel"),z.appendChild(b.createTextNode("X")),e(z,"position:absolute;top:10px;right:10px;cursor:pointer;transform:scale(0.8)"),r.setAttribute("type","text/css"),u.innerHTML="Stylist",e(u,"color:#555;background-color:#fcfcfc;width:150px;height:1.5em;margin:4px 0 4px 0;font-family:serif;font-size:20px;font-style:oblique;line-height:1.5em;box-shadow:none;text-shadow:none;text-align:left"),e(v,"font:12px monospace;list-style:none;margin-top:0px"),f(v,"CTRL+M: toggle this panel"),f(v,"CTRL+Y: change dock position"),f(v,"ALT+click: target element"),t.appendChild(u),t.appendChild(v),t.appendChild(w),t.appendChild(s),t.appendChild(y),t.appendChild(z),q.appendChild(t),q.appendChild(r),B.checked="true"===(localStorage.applyStyles||"true"),s.value=localStorage.siteStyle||"",s.placeholder="/* Enter your styles here. */",r.innerHTML=B.checked?s.value:"",q.addEventListener("click",function(a){if(-1===s.style.display.indexOf("none")&&a.target.id!==s.id&&a.altKey){var b,c,d=0,e=a.target,f=e.className.split(" ")||"",g=[],h="",i="";for(i+=e.tagName.toLowerCase(),e.id&&(i+="#"+e.id),d=0;d<f.length;d++)m.test(f[d])||(i+="."+f[d]);if(e.getAttribute("style"))for(g=e.getAttribute("style").split(";"),d=0;d<g.length;d++)b=g[d].split(n).join(" ").trim(),m.test(b)||(h+=k+b.toLowerCase()+";\n");i&&(h=h?"{\n"+h+"}":"{\n\n}",c="\n"+i+" "+h,s.value+=c,s.focus(),s.setSelectionRange(s.value.length-c.length,s.value.length)),a.preventDefault()}});var C=d(function(){localStorage.siteStyle=s.value,localStorage.applyStyles=B.checked?"true":"false",console.log("applyStyles :"+localStorage.applyStyles)},500);B.addEventListener("click",function(a){g()}),z.addEventListener("click",function(a){p(!1)}),s.addEventListener("keyup",g),s.addEventListener("change",g),s.addEventListener("keydown",function(a){var b=s.value,c=s.selectionStart;a.keyCode===h&&(s.value=b.substring(0,c)+k+b.substring(c),s.setSelectionRange(c+l,c+l),a.preventDefault())}),a.addEventListener("keydown",function(a){if(a.ctrlKey)switch(console.log(a.keyCode),a.keyCode){case j:p("none"===t.style.display);break;case i:c()}})}var h=9,i=89,j=77,k=" ",l=k.length,m=/^\s*$/,n=/\s+$/g,o="1.7";String.prototype.trim=function(){return this.replace(/(^\s+|\s+$)/g,"")},g()})(this,this.document);' title="Drag me to the bookmark bar if you're using IE 9-11">Stylist (IE9-11)</a></p>
</header>
<section>
<h1>Stylist</h1>
<p>Add and edit live CSS on any page in any modern browser.. and have the changes persist everytime you run the bookmarklet on the page.</p>
<p>You may want a different look to a page that you regularly visit or help you style a page that you are developing.</p>
<p>Simply copy the link above as a bookmark - click the bookmark on the page you wish to change...</p>
<p>Once you have clicked the bookmarklet - the panel should open and you're good to go..</p>
</section>
<section>
<h1>Rationale</h1>
<p>I wasn't aware of any live CSS editors at the time. However upon finding them, they seem to live as extensions for those browsers. You'd need to download and install the extension on each browser. </p>
<p>Styling on Internet Explorer is a pain and quite unfairly it does not have the extension ecosystem enjoyed in the other 'modern' browsers. This editor is to accommodate those developers that need to use IE and make their lives a little easier.</p>
<p>It also allows styles to be moved from browser to browser to ensure the CSS is valid on all browsers. Potentially saving you heaps of time!</p>
</section>
<section>
<h1>Inspiration</h1>
<p>This work has been inspired by <a href="http://github.com/karthikv/my-style">github.com/karthikv/my-style</a></p>
<p>MIT Licenced</p>
</section>
<footer>Made with ♥ by anami</footer>
<a href="https://github.com/anami/stylist"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
</body>
</html>