diff --git a/README.md b/README.md index 656eb9b..009289e 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,9 @@ Forum: ## CHANGELOG +1.74.2016.2 +- New canvas: ability to apply custom CSS, experimental + 1.73.2016.1 - New canvas: make Time+ button always visible - New canvas: add pathseg polyfill for Chrome 48. No thanks to Google! diff --git a/drawception-anbt.user.js b/drawception-anbt.user.js index fcab214..a9b8c81 100644 --- a/drawception-anbt.user.js +++ b/drawception-anbt.user.js @@ -2,7 +2,7 @@ // @name Drawception ANBT // @author Grom PE // @namespace http://grompe.org.ru/ -// @version 1.73.2016.1 +// @version 1.74.2016.2 // @description Enhancement script for Drawception.com - Artists Need Better Tools // @downloadURL https://raw.github.com/grompe/Drawception-ANBT/master/drawception-anbt.user.js // @match http://drawception.com/* @@ -14,7 +14,7 @@ function wrapped() { -var SCRIPT_VERSION = "1.73.2016.1"; +var SCRIPT_VERSION = "1.74.2016.2"; var NEWCANVAS_VERSION = 24; // Increase to update the cached canvas // == DEFAULT OPTIONS == @@ -50,6 +50,7 @@ var options = bookmarkOwnCaptions: 0, colorDoublePress: 0, markStalePosts: 1, + newCanvasCSS: "", }; /* @@ -960,6 +961,17 @@ function deeper_main() alert(e); }; + if (options.newCanvasCSS) + { + var parent = document.getElementsByTagName("head")[0]; + if (!parent) parent = document.documentElement; + var style = document.createElement("style"); + style.type = "text/css"; + var textNode = document.createTextNode(options.newCanvasCSS); + style.appendChild(textNode); + parent.appendChild(style); + } + if (options.enableWacom) { var stupidPlugin = document.createElement("object"); @@ -3140,7 +3152,7 @@ window.updateScriptSettings = updateScriptSettings; function updateScriptSettings(theForm) { var result = {}; - $(theForm).find("input").each(function() + $(theForm).find("input,textarea").each(function() { if (this.type == "checkbox") { @@ -3162,6 +3174,15 @@ function updateScriptSettings(theForm) return false; } +function escapeHTML(t) +{ + return t.toString().replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); +} + function addScriptSettings() { var theForm = $('
'); @@ -3182,11 +3203,15 @@ function addScriptSettings() } else if (t == "number") { - c.append('' + desc + ':'); + c.append('' + desc + ':'); + } + else if (t == "longstr") + { + c.append('' + desc + ':'); } else { - c.append('' + desc + ':'); + c.append('' + desc + ':'); } div.append(c); } @@ -3237,7 +3262,12 @@ function addScriptSettings() ["markStalePosts", "boolean", "Mark stale forum posts"], ] ); - theForm.append('
'); + addGroup("Advanced", + [ + ["newCanvasCSS", "longstr", 'Custom CSS for new canvas (experimental, get styles here)'], + ] + ); + theForm.append('
'); $("#main").prepend(theForm); // Extend "location" input to max server-accepted 65 characters diff --git a/newcanvas_styles/compact.css b/newcanvas_styles/compact.css new file mode 100644 index 0000000..8c9d9ca --- /dev/null +++ b/newcanvas_styles/compact.css @@ -0,0 +1,73 @@ +/* "Compact" style, Warning: ugly hack */ + +@media screen and (max-width: 999px) and (min-width: 800px) { + body { + overflow-x: hidden; + } + #bl { + width: 410px; + } + #toolpane { + width: 180px; + height: 500px; + position: absolute; + margin-left: -200px; + } + #toolpane:after { + display: none; + } + #infopane { + width: 1px; + height: 500px; + position: absolute; + margin: 0 0 0 600px; + top: 0; + } + .submit { + position: absolute; + top: 500px; + left: -776px; + width: 156px; + height: 50px; + } + #timer { + width: 176px; + float: left; + -margin-top: 50px; + } + #colors { + width: 100px; + margin-left: 0px; + float: left; + } + #primary, #secondary { + width: 50px; + } + #tools { + width: 68px; + } + #tools button { + margin: 3px 0; + } + #gamemode { + position: absolute; + left: -790px; + top: -100px; + } + #gamebuttons { + width: 300px; + position: absolute; + margin-left: 0; + left: -600px; + top: -100px; + padding: 2px; + } + .sandbox #gamebuttons { + width: 350px; + left: -660px; + top: -62px; + } + .guidelines, #options { + display: none; + } +} diff --git a/newcanvas_styles/retro.css b/newcanvas_styles/retro.css new file mode 100644 index 0000000..35cdd77 --- /dev/null +++ b/newcanvas_styles/retro.css @@ -0,0 +1,53 @@ +/* "Retro" style */ +#colors { + padding: 10px; + float: right; +} +.panel { + background: #666; +} +#colors b { + line-height: 30px; + margin: 4px 7px; + width: 32px; + height: 32px; + border: 2px solid #333; + border-radius: 100px; +} +#colors #eraser:before { + content: ''; +} +#colors b:before { + opacity: 0; +} +#colors #eraser { + background: #fff url(http://drawception.com/img/draw_eraser.png) center no-repeat; + background-size: 50%; +} +#timer { + font-size: 26pt; + color: #aaa; + width: 120px; + float: right; +} +#tools { + width: 500px; + position: absolute; + left: 300px; + bottom: -70px; +} +#tools hr { + display: inline; + border: none; + margin: 5px; +} +#seekbar { + position: absolute; + bottom: -110px; +} +button, #play { + background-color: #FFFB8D; +} +button:hover, #play:hover { + background-color: #F6F166; +} diff --git a/newcanvas_styles/retrowhite.css b/newcanvas_styles/retrowhite.css new file mode 100644 index 0000000..14d7b42 --- /dev/null +++ b/newcanvas_styles/retrowhite.css @@ -0,0 +1,108 @@ +/* "Retro White" style */ +body { + background: #FFF; +} +#myheader { + background: #6EE36E; + color: #FFF; + border-bottom: 1px solid #999; +} +a { + color: #AFE; +} +a.prominent { + color: #FFF; +} +a.prominent:hover { + color: #AFE; +} +#openmenu { + background-color: #6AD16A; +} +#openmenu:hover { + background-color: #6BCB6B; +} +#newcanvasyo { + background: #FFF; +} +.panel { + -background: #eee; + -border-color: #ddd; + background: transparent; + border: 1px solid #e3e3e3; +} +#colors b { + line-height: 30px; + margin: 4px 7px; + width: 32px; + height: 32px; + border: 2px solid #333; + border-radius: 100px; +} +#colors #eraser:before { + content: ''; +} +#colors b:before { + opacity: 0; +} +#colors #eraser { + background: #fff url(http://drawception.com/img/draw_eraser.png) center no-repeat; + background-size: 50%; +} +#timer, #drawthis { + color: #333; +} +button, #play { + background-color: #FFFB8D; +} +button:hover, #play:hover { + background-color: #F6F166; +} +#palettename { + color: #eee; + background: #888; + border-radius: 5px; +} +#svgContainer { + border: 1px solid #c0c0c0; +} +#seekbar { + background: #DDD; + border: 10px solid #DDD; +} +.headerbutton { + background: #6ad16a; + color: #ded; +} +.headerbutton.active { + background: #337ab7; + color: #fff; +} +.headerbutton.active:hover { + background: #286090; +} +@media screen and (min-width: 1000px) { + #colors { + padding: 10px; + float: right; + } + #timer { + width: 120px; + float: right; + } + #tools { + width: 500px; + position: absolute; + left: 300px; + bottom: -70px; + } + #tools hr { + display: inline; + border: none; + margin: 5px; + } + #seekbar { + position: absolute; + bottom: -110px; + } +} diff --git a/newcanvas_styles/white.css b/newcanvas_styles/white.css new file mode 100644 index 0000000..59f0fa6 --- /dev/null +++ b/newcanvas_styles/white.css @@ -0,0 +1,63 @@ +/* "White" style */ +body { + background: #FFF; +} +#myheader { + background: #6EE36E; + color: #FFF; + border-bottom: 1px solid #999; +} +a { + color: #AFE; +} +a.prominent { + color: #FFF; +} +a.prominent:hover { + color: #AFE; +} +#openmenu { + background-color: #6AD16A; +} +#openmenu:hover { + background-color: #6BCB6B; +} +#newcanvasyo { + background: #FFF; +} +.panel { + background: transparent; + border: 1px solid #e3e3e3; +} +#timer, #drawthis { + color: #333; +} +button, #play { + background-color: #FFFB8D; +} +button:hover, #play:hover { + background-color: #F6F166; +} +#palettename { + color: #eee; + background: #888; + border-radius: 5px; +} +#svgContainer { + border: 1px solid #c0c0c0; +} +#seekbar { + background: #DDD; + border: 10px solid #DDD; +} +.headerbutton { + background: #6ad16a; + color: #ded; +} +.headerbutton.active { + background: #337ab7; + color: #fff; +} +.headerbutton.active:hover { + background: #286090; +}