[
{
"path": "LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2016 Tommy Hodgins\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# Dragon.js 🐉\n\n`dragon.js` is a bookmarklet that lets you drag any element on a website using a mouse or touchscreen. The goal is to speed up in-browser design critiques and brainstorming new layout ideas.\n\n[](https://www.youtube.com/embed/ytIZbXnNOMM)\n\n## How to use\n\nYou can test the functionality with demo content on `index.html`, where you will also find the ‘pretty’ source code for the bookmarklet.\n\nDemo at http://staticresource.com/dragon\n\nTo use this on other websites you have two options: run it as JavaScript on the page, or create a bookmarklet.\n\n### How to create a bookmarklet\n\n- Create a bookmark\n- Edit the URL\n- replace the URL with `javascript:` followed by the contents of `dragon.js`\n\nNow you can load load any page, then tap the bookmarklet to enter 'dragon' mode \n\n### How to run as JavaScript\n\nYou have two options here as well. All browsers except mobile safari (iPad and iPhone) will allow you to simply replace the URL in the address bar of a loaded website with `javascript:` and then write whatever JavaScript you want. I find this easier than a bookmarklet on desktop.\n\nThe other way is by opening your Developer Tools in the browser you can paste the contents of `dragon.js` into the JavaScript Console and enter it and it will run on the page as well.\n\n# 🐲 —happy hacking!\n"
},
{
"path": "code_of_conduct.md",
"content": "# The Hacker Code of Conduct\n\nThis project abides by the following code of conduct:\n\nBoth this project and its maintainers are inclusive to all people, and welcome all ideas. True diversity of thought builds perspective and benefits all of us. Diversity depends on the presence of differing opinions, this code of conduct establishes acceptable professional behaviour and does not police speech or opinions.\n\n- No ad-hominem attacks will be tolerated against any project maintainer, contributor, or user\n- No prolonged disturbance of shared collaborative space will be tolerated\n- The values we uphold are: excellence, innovation, fairness, and freedom\n\nViolations of the above rules will be handled on a case-by-case basis, in a direct and reasonable way.\n"
},
{
"path": "css/basic.css",
"content": "/*\n\n# The Mad CSScientist's Basic CSS Stylesheet\nwritten by Tommy Hodgins: https://gist.github.com/tomhodgins/e330ec1826d1cde2b8b0\n\n## Usage\nAdd this stylesheet to barebones HTML documents to instantly add some sensible defaults for text or documentation\n\n \n\nThis stylesheet contains multiple themes. To apply a theme add the attribute `data-theme` with the value `book`, `dark`, or `code` to the HTML tag.\n\n \n\n*/\n\n*,\n*:before,\n*:after {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-kerning: auto;\n outline: none;\n}\n::-moz-selection {\n color: #fff;\n text-shadow: #007931 1px 1px 1px;\n background-color: #26ba62 !important;\n}\n::-webkit-selection {\n color: #fff;\n text-shadow: #007931 1px 1px 1px;\n background-color: #26ba62 !important;\n}\n::selection {\n color: #fff;\n text-shadow: #007931 1px 1px 1px;\n background-color: #26ba62 !important;\n}\n::-webkit-input-placeholder {\n color: rgba(0,0,0,.5);\n}\n:-moz-placeholder {\n color: rgba(0,0,0,.5);\n}\n::-moz-placeholder {\n color: rgba(0,0,0,.5);\n}\n:-ms-input-placeholder {\n color: rgba(0,0,0,.5);\n}\n::-ms-input-placeholder {\n color: rgba(0,0,0,.5);\n}\n:placeholder-shown {\n color: rgba(0,0,0,.5);\n}\nhtml {\n color: #333;\n font-size: 10pt;\n line-height: 1.4;\n font-weight: 400;\n min-height: 100%;\n -webkit-text-size-adjust: 100%;\n background: rgba(0,0,0,.1);\n background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,.1) 100vh);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100vh,rgba(0,0,0,.1)));\n background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,.1) 100vh);\n background: -o-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,.1) 100vh);\n background: -ms-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,.1) 100vh);\n background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,.1) 100vh);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb00', endColorstr='#dddddd00',GradientType=0 );\n font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', 'Fira Sans', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;\n}\nbody {\n margin: 0 auto;\n max-width: 850px;\n min-height: 100%;\n padding: 2em;\n}\nq:before {content: '\\201c'}\nq:after {content: '\\201d'}\nq q:before {content: '\\2018'}\nq q:after {content: '\\2019'}\nh1, h2, h3, h4, h5, h6 {\n color: #555;\n margin: .5em 0;\n font-weight: 600;\n letter-spacing: -.03em;\n line-height: 1.2;\n font-family: 'Fira Sans', 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;\n word-break: break-word;\n}\nh1 {\n color: #333;\n text-align: center;\n font-size: 480%;\n font-weight: 700;\n line-height: 1;\n text-shadow: white 0 -1px 0;\n}\nh1 + h2 {\n color: #777;\n margin-top: -1em;\n margin-bottom: 1.5em;\n font-size: 200%;\n line-height: 1.4;\n font-weight: 300;\n text-align: center;\n}\nh2 {\n font-size: 300%;\n}\nh3 {\n font-size: 220%;\n}\nh4 {\n font-size: 180%;\n}\nh5 {\n font-size: 140%;\n}\nh6 {\n font-size: 120%;\n}\na {\n color: slateblue;\n text-decoration: none;\n outline: none !important;\n}\na:hover,\na:focus {\n color: darkslateblue;\n}\nhr {\n border: none;\n height: 1px;\n background: #ccc;\n}\n:not(pre) > code {\n color: #333;\n background: #def;\n display: inline-block;\n line-height: 1.3;\n padding: 0 .3em;\n margin: 0 .15em;\n border-radius: 3px;\n box-shadow: rgba(0,0,0,.1) 0 1px 0;\n font-family: 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;\n max-width: 100%;\n word-break: break-word;\n}\n:not(pre) > code a {\n color: indigo;\n}\npre {\n color: #839496;\n display: block;\n width: 100%;\n padding: 1em;\n margin: 1em 0 2em 0;\n border-radius: 3px;\n font-size: 12pt;\n font-family: 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;\n word-break: break-word;\n white-space: pre-wrap;\n font-kerning: auto;\n background: #002b36;\n border: 1px solid rgba(0,0,0,.05);\n box-shadow: inset rgba(0,0,0,.075) 0 -3px 10px,\n inset rgba(255,255,255,.15) 0 1px 0,\n rgba(0,0,0,.3) 0 1px .5px,\n rgba(0,0,0,.15) 0 3px 5px;\n}\npre > code {\n box-shadow: none !important;\n}\nli {\n font-size: 12pt;\n padding: .25em 0;\n}\np {\n margin: 0;\n font-weight: 400;\n font-size: 12pt;\n}\n* + p {\n margin-top: .5em;\n}\ninput:not([type=checkbox]):not([type=radio]),\ntextarea {\n width: 100%;\n font-size: 12pt;\n margin-bottom: 1em;\n padding: 10px 8px;\n}\nblockquote {\n color: #777;\n margin: 1em auto 0 auto;\n padding: 1em 2em;\n position: relative;\n font-family: 'Fira Sans', 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;\n}\nblockquote:before {\n content: '';\n display: block;\n width: 5px;\n height: 100%;\n background: currentColor;\n position: absolute;\n top: 0;\n left: 0;\n opacity: .5;\n}\nblockquote p {\n color: #333;\n font-size: 250%;\n font-weight: 500;\n font-style: italic;\n}\nblockquote li {\n color: #333;\n font-size: 160%;\n font-style: italic;\n}\nblockquote footer,\nblockquote cite {\n display: block;\n font-style: normal;\n margin-top: .5em;\n padding: 0;\n color: currentColor;\n font-size: 125%;\n text-align: left;\n}\nblockquote footer:before,\nblockquote cite:before {\n content: '— ';\n}\nfooter {\n color: #777;\n font-size: 11pt;\n text-align: center;\n padding: 2em .5em;\n}\na,\ninput,\ntextarea,\nbutton,\nlabel,\niframe,\naudio,\nvideo {\n touch-action: manipulation;\n}\n[class*=\"float-\"] {\n display: block;\n width: auto;\n max-width: 100%;\n margin: 0 auto;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n user-select: none;\n cursor: default;\n pointer-events: none;\n}\n[data-tooltip][class*=\"float-\"]{\n pointer-events: all;\n}\n@media (min-width: 500px) {\n .float-left {\n float: left;\n margin: 0 .5em .5em 0;\n max-width: 50%;\n }\n .float-right {\n float: right;\n margin: 0 0 .5em .5em;\n max-width: 50%;\n }\n}\n@media (max-width: 500px) {\n html {\n font-size: 7.5pt;\n }\n}\n/* Book Theme */\n[data-theme=book] {\n color: #632;\n background: tan;\n box-shadow: inset burlywood 0 0 50vmin;\n font-family: 'PT Serif', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;\n}\n[data-theme=book] h1,\n[data-theme=book] h2,\n[data-theme=book] h3,\n[data-theme=book] h4,\n[data-theme=book] h5,\n[data-theme=book] h6 {\n color: #742;\n text-shadow: none;\n font-family: 'Playfair Display', 'PT Serif', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;\n letter-spacing: 0;\n font-weight: 700;\n}\n[data-theme=book] h1 {\n color: #632;\n}\n[data-theme=book] h1 + h2 {\n font-weight: 400;\n}\n[data-theme=book] code,\n[data-theme=book] pre {\n color: currentColor;\n background: transparent;\n border: 1px solid currentColor;\n box-shadow: none;\n}\n[data-theme=book] blockquote {\n color: #632;\n font-family: 'Playfair Display', 'PT Serif', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;\n}\n[data-theme=book] blockquote p {\n color: #632;\n}\n[data-theme=book] blockquote li {\n color: #632;\n font-size: 160%;\n}\n[data-theme=book] a {\n color: maroon;\n}\n[data-theme=book] a:focus,\n[data-theme=book] a:hover {\n color: #c00;\n}\n[data-theme=book] hr {\n background: #742;\n}\n[data-theme=book] footer {\n color: #742;\n}\n[data-theme=book] footer a {\n color: #632;\n}\n/* Code Theme */\n[data-theme=code] {\n color: #839496;\n background: #073642;\n}\n[data-theme=code] ::-moz-selection {\n color: #002b36;\n text-shadow: none !important;\n background-color: #eee8d5 !important;\n}\n[data-theme=code] ::-webkit-selection {\n color: #002b36;\n text-shadow: none !important;\n background-color: #eee8d5 !important;\n}\n[data-theme=code] ::selection {\n color: #002b36;\n text-shadow: none !important;\n background-color: #eee8d5 !important;\n}\n[data-theme=code] ::-webkit-input-placeholder {\n color: rgba(255,255,255,.3);\n}\n[data-theme=code] :-moz-placeholder {\n color: rgba(255,255,255,.3);\n}\n[data-theme=code] ::-moz-placeholder {\n color: rgba(255,255,255,.3);\n}\n[data-theme=code] :-ms-input-placeholder {\n color: rgba(255,255,255,.3);\n}\n[data-theme=code] ::-ms-input-placeholder {\n color: rgba(255,255,255,.3);\n}\n[data-theme=code] :placeholder-shown {\n color: rgba(255,255,255,.3);\n}\n[data-theme=code] select {\n color: rgba(255,255,255,.3);\n}\n[data-theme=code] h1,\n[data-theme=code] h2,\n[data-theme=code] h3,\n[data-theme=code] h4,\n[data-theme=code] h5,\n[data-theme=code] h6 {\n color: #839496;\n}\n[data-theme=code] h1 {\n color: #eee8d5;\n text-shadow: #002b36 0 2px 0;\n}\n[data-theme=code] code,\n[data-theme=code] pre {\n color: #839496;\n background: #002b36;\n font-weight: 400;\n border: none;\n box-shadow: rgba(0,0,0,.15) 0 1px 0;\n}\n[data-theme=code] a {\n color: #eee8d5;\n}\n[data-theme=code] a:focus,\n[data-theme=code] a:hover {\n color: white;\n}\n[data-theme=code] blockquote {\n color: #839496;\n}\n[data-theme=code] blockquote p {\n color: #eee8d5;\n}\n[data-theme=code] blockquote li {\n color: #eee8d5;\n font-size: 160%;\n}\n[data-theme=code] hr {\n background: #839496;\n}\n[data-theme=code] footer {\n color: #839496;\n}\n[data-theme=code] footer a {\n color: #eee8d5;\n}\n/* Dark Theme */\n[data-theme=dark] {\n color: #ccc;\n background: #333;\n background: -moz-linear-gradient(top, #222 0%, #333 75vh);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(75vh,#333));\n background: -webkit-linear-gradient(top, #222 0%,#333 75vh);\n background: -o-linear-gradient(top, #222 0%,#333 75vh);\n background: -ms-linear-gradient(top, #222 0%,#333 75vh);\n background: linear-gradient(to bottom, #222 0%,#333 75vh);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22222200', endColorstr='#33333300',GradientType=0 );\n}\n[data-theme=dark] ::-moz-selection {\n color: #fff;\n text-shadow: #205 1px 1px 1px !important;\n background-color: royalblue !important;\n}\n[data-theme=dark] ::-webkit-selection {\n color: #fff;\n text-shadow: #205 1px 1px 1px !important;\n background-color: royalblue !important;\n}\n[data-theme=dark] ::selection {\n color: #fff;\n text-shadow: #205 1px 1px 1px !important;\n background-color: royalblue !important;\n}\n[data-theme=dark] ::-webkit-input-placeholder {\n color: rgba(255,255,255,.3);\n}\n[data-theme=dark] :-moz-placeholder {\n color: rgba(255,255,255,.3);\n}\n[data-theme=dark] ::-moz-placeholder {\n color: rgba(255,255,255,.3);\n}\n[data-theme=dark] :-ms-input-placeholder {\n color: rgba(255,255,255,.3);\n}\n[data-theme=dark] ::-ms-input-placeholder {\n color: rgba(255,255,255,.3);\n}\n[data-theme=dark] :placeholder-shown {\n color: rgba(255,255,255,.3);\n}\n[data-theme=dark] select {\n color: rgba(255,255,255,.3);\n}\n[data-theme=dark] h1,\n[data-theme=dark] h2,\n[data-theme=dark] h3,\n[data-theme=dark] h4,\n[data-theme=dark] h5,\n[data-theme=dark] h6 {\n color: #aaa;\n}\n[data-theme=dark] h1 {\n color: #eee;\n text-shadow: #222 0 2px 0;\n}\n[data-theme=dark] code {\n color: #333;\n background: royalblue;\n font-weight: 400;\n border: none;\n box-shadow: #222 0 1px 0;\n}\n[data-theme=dark] pre {\n color: #333;\n background: royalblue;\n font-weight: 400;\n border: 1px solid rgba(0,0,0,.05);\n box-shadow: inset rgba(0,0,0,.075) 0 -3px 10px,\n inset rgba(255,255,255,.15) 0 1px 0,\n rgba(0,0,0,.3) 0 1px .5px,\n rgba(0,0,0,.15) 0 3px 5px;\n}\n[data-theme=dark] blockquote p {\n color: #eee;\n}\n[data-theme=dark] blockquote li {\n color: #eee;\n font-size: 160%;\n}\n[data-theme=dark] a {\n color: royalblue;\n}\n[data-theme=dark] a:focus,\n[data-theme=dark] a:hover {\n color: cornflowerblue;\n}\n[data-theme=dark] hr {\n background: #555;\n}\n"
},
{
"path": "css/data-buttons.css",
"content": "/*\n\n# The Mad CSScientist's Buttons\nwritten by Tommy Hodgins: https://gist.github.com/tomhodgins/16786c10f4b37d122d16\n\n## Usage\nInclude a `` to this file in your HTML.\n\n \n\nTo apply button styles to an element, add the `data-button` attribute.\nAdd `green`, `red`, `blue`, `grey` and `outline` values to the `data-button` attribute for different color themes.\nAdd a class of `disabled`, or add a `disabled` or `hidden` attribute to an element to display a disabled button.\n\n link\n \n \n disabled\n\n*/\n\n[data-button] {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-appearance: none;\n appearance: none;\n display: inline-block;\n width: auto;\n margin: .5em auto;\n padding: .5em .6em !important;\n text-decoration: none !important;\n outline: none;\n background: #ff8900 !important;\n background: -moz-linear-gradient(top, #ff8900 0%, #ff3d00 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8900), color-stop(100%,#ff3d00)) !important;\n background: -webkit-linear-gradient(top, #ff8900 0%,#ff3d00 100%) !important;\n background: -o-linear-gradient(top, #ff8900 0%,#ff3d00 100%) !important;\n background: -ms-linear-gradient(top, #ff8900 0%,#ff3d00 100%) !important;\n background: linear-gradient(to bottom, #ff8900 0%,#ff3d00 100%) !important;\n font-family: 'Source Sans Pro', 'Myriad Pro', 'Open Sans', Roboto, Myriad, 'Segoe UI', Helvetica, Arial, sans-serif;\n font-weight: 600;\n font-kerning: auto;\n text-decoration: none;\n text-align: center;\n font-size: 14pt;\n line-height: 1.2 !important;\n color: white !important;\n text-shadow: #e20 1px 1px 0;\n border-radius: 3px;\n border: 1px solid #f60;\n border-bottom-color: #e20;\n box-shadow: inset #f20 0 -5px 15px, inset #fc6 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n user-select: none;\n cursor: pointer;\n vertical-align: baseline;\n}\n[data-button]:hover,\n[data-button]:focus {\n color: white !important;\n background: #fa3 !important;\n background: -moz-linear-gradient(top, #fa3 0%, #f30 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa3), color-stop(100%,#f30)) !important;\n background: -webkit-linear-gradient(top, #fa3 0%,#f30 100%) !important;\n background: -o-linear-gradient(top, #fa3 0%,#f30 100%) !important;\n background: -ms-linear-gradient(top, #fa3 0%,#f30 100%) !important;\n background: linear-gradient(to bottom, #fa3 0%,#f30 100%) !important;\n box-shadow: inset #f40 0 -5px 15px, inset #ffd28a 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px, rgba(255,200,0,.5) 0 0 10px;\n}\n[data-button]:active {\n color: rgba(255,255,255,.9) !important;\n background: #f50 !important;\n border: 1px solid #f00;\n border-bottom-color: #d10;\n box-shadow: inset #f40 0 -5px 15px, inset #ffd28a 0 1px 1px;\n}\n/* Disabled & Hidden */\n[data-button].disabled,\n[data-button][hidden],\n[data-button][disabled] {\n opacity: .5;\n pointer-events: none;\n}\n/* Blue Theme */\n[data-button*=blue] {\n background: #0cf !important;\n background: -moz-linear-gradient(top, #0cf 0%, #0080ff 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0cf), color-stop(100%,#0080ff)) !important;\n background: -webkit-linear-gradient(top, #0cf 0%,#0080ff 100%) !important;\n background: -o-linear-gradient(top, #0cf 0%,#0080ff 100%) !important;\n background: -ms-linear-gradient(top, #0cf 0%,#0080ff 100%) !important;\n background: linear-gradient(to bottom, #0cf 0%,#0080ff 100%) !important;\n text-shadow: #06e 1px 1px 0;\n border: 1px solid #07f;\n border-bottom-color: #02e;\n box-shadow: inset #0065ff 0 -5px 15px, inset #99ffff 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;\n}\n[data-button*=blue]:hover,\n[data-button*=blue]:focus {\n background: #7df !important;\n background: -moz-linear-gradient(top, #7df 0%, #07f 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7df), color-stop(100%,#07f)) !important;\n background: -webkit-linear-gradient(top, #7df 0%,#07f 100%) !important;\n background: -o-linear-gradient(top, #7df 0%,#07f 100%) !important;\n background: -ms-linear-gradient(top, #7df 0%,#07f 100%) !important;\n background: linear-gradient(to bottom, #7df 0%,#07f 100%) !important;\n box-shadow: inset #08f 0 -5px 15px, inset #cef 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px, rgba(0,200,255,.5) 0 0 10px;\n}\n[data-button*=blue]:active {\n background: #05f !important;\n border: 1px solid #00f;\n border-bottom-color: #01d;\n box-shadow: inset #04f 0 -5px 15px, inset #8ad2ff 0 1px 1px;\n}\n/* Green Theme */\n[data-button*=green] {\n background: #6a1 !important;\n background: -moz-linear-gradient(top, #6a1 0%, #360 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6a1), color-stop(100%,#360)) !important;\n background: -webkit-linear-gradient(top, #6a1 0%,#360 100%) !important;\n background: -o-linear-gradient(top, #6a1 0%,#360 100%) !important;\n background: -ms-linear-gradient(top, #6a1 0%,#360 100%) !important;\n background: linear-gradient(to bottom, #6a1 0%,#360 100%) !important;\n text-shadow: #062 1px 1px 0;\n border: 1px solid #480;\n border-bottom-color: #005822;\n box-shadow: inset #072 0 -5px 15px, inset #8e8 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;\n}\n[data-button*=green]:hover,\n[data-button*=green]:focus {\n background: #6d4 !important;\n background: -moz-linear-gradient(top, #6d4 0%, #360 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d4), color-stop(100%,#360)) !important;\n background: -webkit-linear-gradient(top, #6d4 0%,#360 100%) !important;\n background: -o-linear-gradient(top, #6d4 0%,#360 100%) !important;\n background: -ms-linear-gradient(top, #6d4 0%,#360 100%) !important;\n background: linear-gradient(to bottom, #6d4 0%,#360 100%) !important;\n box-shadow: inset #064 0 -5px 15px, inset #8e8 0 1px 1px, rgba(0, 255, 75, 0.5) 0 0 10px, rgba(0,0,0,.15) 0px 1px 1px;\n}\n[data-button*=green]:active {\n background: #340 !important;\n border: 1px solid #005822;\n border-bottom-color: #052;\n box-shadow: inset #040 0 -5px 15px, inset #8e8 0 1px 1px;\n}\n/* Red Theme */\n[data-button*=red] {\n background: #a11 !important;\n background: -moz-linear-gradient(top, #a11 0%, #800 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a11), color-stop(100%,#800)) !important;\n background: -webkit-linear-gradient(top, #a11 0%,#800 100%) !important;\n background: -o-linear-gradient(top, #a11 0%,#800 100%) !important;\n background: -ms-linear-gradient(top, #a11 0%,#800 100%) !important;\n background: linear-gradient(to bottom, #a11 0%,#800 100%) !important;\n text-shadow: #600 1px 1px 0;\n border: 1px solid #800;\n border-bottom-color: #500;\n box-shadow: inset #700 0 -5px 15px, inset #e88 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;\n}\n[data-button*=red]:hover,\n[data-button*=red]:focus {\n background: #d44 !important;\n background: -moz-linear-gradient(top, #d44 0%, #800 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d44), color-stop(100%,#800)) !important;\n background: -webkit-linear-gradient(top, #d44 0%,#800 100%) !important;\n background: -o-linear-gradient(top, #d44 0%,#800 100%) !important;\n background: -ms-linear-gradient(top, #d44 0%,#800 100%) !important;\n background: linear-gradient(to bottom, #d44 0%,#800 100%) !important;\n box-shadow: inset #600 0 -5px 15px, inset #e88 0 1px 1px, rgba(255, 0, 0, 0.5) 0 0 10px, rgba(0,0,0,.15) 0px 1px 1px;\n}\n[data-button*=red]:active {\n background: #600 !important;\n border: 1px solid #500;\n border-bottom-color: #400;\n box-shadow: inset #400 0 -5px 15px, inset #e88 0 1px 1px;\n}\n/* Grey Theme */\n[data-button*=grey] {\n background: #475875 !important;\n background: -moz-linear-gradient(top, #475875 0%, #36455d 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#475875), color-stop(100%,#36455d)) !important;\n background: -webkit-linear-gradient(top, #475875 0%,#36455d 100%) !important;\n background: -o-linear-gradient(top, #475875 0%,#36455d 100%) !important;\n background: -ms-linear-gradient(top, #475875 0%,#36455d 100%) !important;\n background: linear-gradient(to bottom, #475875 0%,#36455d 100%) !important;\n text-shadow: #151d31 1px 1px 0;\n border: 1px solid #36455d;\n border-bottom-color: #151d31;\n box-shadow: inset #151d31 0 -5px 15px, inset #ccf 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;\n}\n[data-button*=grey]:hover,\n[data-button*=grey]:focus {\n background: #617699 !important;\n background: -moz-linear-gradient(top, #617699 0%, #475875 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#617699), color-stop(100%,#475875)) !important;\n background: -webkit-linear-gradient(top, #617699 0%,#475875 100%) !important;\n background: -o-linear-gradient(top, #617699 0%,#475875 100%) !important;\n background: -ms-linear-gradient(top, #617699 0%,#475875 100%) !important;\n background: linear-gradient(to bottom, #617699 0%,#475875 100%) !important;\n box-shadow: inset #2d3950 0 -5px 15px, inset #ccf 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px, rgba(200,200,255,.5) 0 0 10px;\n}\n[data-button*=grey]:active {\n background: #151d31 !important;\n border: 1px solid #151d31;\n border-bottom-color: #0a0f22;\n box-shadow: inset #2d3950 0 -5px 15px, inset #ccf 0 1px 1px;\n}\n/* Outline Theme */\n[data-button*=outline] {\n color: inherit !important;\n background: transparent !important;\n text-shadow: none;\n border: 1px solid currentColor;\n border-bottom-color: currentColor;\n box-shadow: none;\n font-weight: 400 !important;\n opacity: .75 !important;\n}\n[data-button*=outline].disabled,\n[data-button*=outline][hidden],\n[data-button*=outline][disabled] {\n opacity: .25 !important;\n}\n[data-button*=outline]:hover,\n[data-button*=outline]:focus {\n color: inherit !important;\n background: transparent !important;\n border: 1px solid currentColor;\n border-bottom-color: currentColor;\n box-shadow: none;\n opacity: 1 !important;\n}\n[data-button*=outline]:active {\n color: inherit !important;\n background: transparent !important;\n border: 1px solid currentColor;\n border-bottom-color: currentColor;\n box-shadow: inset rgba(0,0,0,.1) 0 0 .3em;\n}\n/* Semi-Flat Buttons */\n[data-button*=\"semiflat\"]:not([data-button=outline]),\n[data-theme=book] [data-button]:not([data-button=outline]),\n[data-theme=rfi] [data-button]:not([data-button=outline]),\n[data-button*=\"semiflat\"]:not([data-button=outline]):hover,\n[data-theme=book] [data-button]:not([data-button=outline]):hover,\n[data-theme=rfi] [data-button]:not([data-button=outline]):hover,\n[data-button*=\"semiflat\"]:not([data-button=outline]):focus,\n[data-theme=book] [data-button]:not([data-button=outline]):focus,\n[data-theme=rfi] [data-button]:not([data-button=outline]):focus {\n font-weight: 600;\n text-shadow: rgba(0,0,0,.2) 1px 1px 0;\n box-shadow: inset rgba(255,255,255,.3) 0 1px 0;\n font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;\n}\n[data-theme=rfi] [data-button] {\n font-size: 12pt !important;\n}\n[data-theme=rfi] [data-button*=blue] {\n text-shadow: #0c65b3 1px 1px 0 !important;\n border: 1px solid #06f !important;\n border-bottom-color: #02e !important;\n background: #2d9eff !important;\n background: -moz-linear-gradient(top, #2d9eff 0%, #1b88e6 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d9eff), color-stop(100%,#1b88e6)) !important;\n background: -webkit-linear-gradient(top, #2d9eff 0%,#1b88e6 100%) !important;\n background: -o-linear-gradient(top, #2d9eff 0%,#1b88e6 100%) !important;\n background: -ms-linear-gradient(top, #2d9eff 0%,#1b88e6 100%) !important;\n background: linear-gradient(to bottom, #2d9eff 0%,#1b88e6 100%) !important;\n}\n[data-theme=rfi] [data-button*=blue]:hover,\n[data-theme=rfi] [data-button*=blue]:focus {\n background: #3af !important;\n background: -moz-linear-gradient(top, #3af 0%, #1b88e6 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3af), color-stop(100%,#1b88e6)) !important;\n background: -webkit-linear-gradient(top, #3af 0%,#1b88e6 100%) !important;\n background: -o-linear-gradient(top, #3af 0%,#1b88e6 100%) !important;\n background: -ms-linear-gradient(top, #3af 0%,#1b88e6 100%) !important;\n background: linear-gradient(to bottom, #3af 0%,#1b88e6 100%) !important;\n}\n[data-theme=rfi] [data-button*=blue]:active {\n background: #05f !important;\n border: 1px solid #00f !important;\n border-bottom-color: #01d !important;\n}\n[data-theme=rfi] [data-button*=grey] {\n text-shadow: #555 1px 1px 0 !important;\n border: 1px solid #7a7a7a !important;\n border-bottom-color: #555 !important;\n background: #999 !important;\n background: -moz-linear-gradient(top, #999 0%, #7a7a7a 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#7a7a7a)) !important;\n background: -webkit-linear-gradient(top, #999 0%,#7a7a7a 100%) !important;\n background: -o-linear-gradient(top, #999 0%,#7a7a7a 100%) !important;\n background: -ms-linear-gradient(top, #999 0%,#7a7a7a 100%) !important;\n background: linear-gradient(to bottom, #999 0%,#7a7a7a 100%) !important;\n}\n[data-theme=rfi] [data-button*=grey]:hover,\n[data-theme=rfi] [data-button*=grey]:focus {\n background: #bababa !important;\n background: -moz-linear-gradient(top, #bababa 0%, #7a7a7a 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#7a7a7a)) !important;\n background: -webkit-linear-gradient(top, #bababa 0%,#7a7a7a 100%) !important;\n background: -o-linear-gradient(top, #bababa 0%,#7a7a7a 100%) !important;\n background: -ms-linear-gradient(top, #bababa 0%,#7a7a7a 100%) !important;\n background: linear-gradient(to bottom, #bababa 0%,#7a7a7a 100%) !important;\n}\n[data-theme=rfi] [data-button*=grey]:active {\n background: #7a7a7a !important;\n border: 1px solid #555 !important;\n border-bottom-color: #555 !important;\n}\n/* Light Grey Theme */\n[data-theme=rfi] [data-button*=lightgrey] {\n color: #888 !important;\n text-shadow: rgba(0,0,0,.1) 1px 1px 0 !important;\n border: 1px solid #bbb !important;\n border-bottom-color: #aaa !important;\n background: #eee !important;\n background: -moz-linear-gradient(top, #efefef 0%, #eee 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#eee)) !important;\n background: -webkit-linear-gradient(top, #efefef 0%,#eee 100%) !important;\n background: -o-linear-gradient(top, #efefef 0%,#eee 100%) !important;\n background: -ms-linear-gradient(top, #efefef 0%,#eee 100%) !important;\n background: linear-gradient(to bottom, #efefef 0%,#eee 100%) !important;\n}\n[data-theme=rfi] [data-button*=lightgrey]:hover,\n[data-theme=rfi] [data-button*=lightgrey]:focus {\n background: #efefef !important;\n background: -moz-linear-gradient(top, #efefef 0%, #bababa 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#bababa)) !important;\n background: -webkit-linear-gradient(top, #efefef 0%,#bababa 100%) !important;\n background: -o-linear-gradient(top, #efefef 0%,#bababa 100%) !important;\n background: -ms-linear-gradient(top, #efefef 0%,#bababa 100%) !important;\n background: linear-gradient(to bottom, #efefef 0%,#bababa 100%) !important;\n}\n[data-theme=rfi] [data-button*=grey]:active {\n background: #eee !important;\n background: -moz-linear-gradient(top, #bababa 0%, #efefef 100%) !important;\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#efefef)) !important;\n background: -webkit-linear-gradient(top, #bababa 0%,#efefef 100%) !important;\n background: -o-linear-gradient(top, #bababa 0%,#efefef 100%) !important;\n background: -ms-linear-gradient(top, #bababa 0%,#efefef 100%) !important;\n background: linear-gradient(to bottom, #bababa 0%,#efefef 100%) !important;\n border: 1px solid #aaa !important;\n border-bottom-color: #999 !important;\n}"
},
{
"path": "dragon-annotated.js",
"content": "// Let's create some variables we can use later. Since they will all equal nothing right now, we can say they are all equal to zero in one shot.\nvar grab=startX=startY=oldTop=oldLeft=0;\n\n// When you click, prevent the default behaviour for that event\ndocument.addEventListener('click',function(e){e.preventDefault()},true);\n\n// On mousedown or touchstart, run the pick() function\ndocument.addEventListener('mousedown',pick);\ndocument.addEventListener('touchstart',pick);\n\n// This is the pick function\nfunction pick(e){\n\n// Prevent the default action\n e.preventDefault();\n\n// If the element being clicked/tapped isn't the body or HTML element, do the following\n if (e.target!==document.documentElement && e.target!==document.body){\n\n// Set 'grab' to the time right now\n grab=Date.now();\n\n// Add a 'data-drag' attribute to the picked element and assign the time they started grabbing it\n e.target.setAttribute('data-drag',grab);\n\n// Add `position: relative;` to the picked element\n e.target.style.position='relative';\n\n// Remember the original `top: ;` and `left: ;` values, or if they aren't set yet go with 0 instead\n oldTop=e.target.style.top.split('px')[0]||0;\n oldLeft=e.target.style.left.split('px')[0]||0;\n\n// That's all we do for the element when we start clicking or tapping\n }\n\n// Let's remember the start x and y coordinates of the cursor when starting a click or tap\n startX=e.clientX||e.touches[0].clientX;\n startY=e.clientY||e.touches[0].clientY;\n}\n\n// All the time you move the mouse or drag your finger, run the function drag()\ndocument.addEventListener('mousemove',drag);\ndocument.addEventListener('touchmove',drag);\n\n// This is the drag function\nfunction drag(e){\n\n// If grab isn't empty, there's currently an object being dragged, do this\n if (grab!==''){\n\n// Let's find the element on the page whose data-drag=\"\" value matches the value of grab right now\n var element=document.querySelector('[data-drag=\"'+grab+'\"]');\n\n// And to that element, let the new value of `top: ;` be equal to the old top position, plus the difference between the original top position and the current cursor position\n element.style.top=parseInt(oldTop)+parseInt((e.clientY||e.touches[0].clientY)-startY)+'px';\n\n// And let the new value of `left: ;` be equal to the old left position, plus the difference between the original left position and the current cursor position\n element.style.left=parseInt(oldLeft)+parseInt((e.clientX||e.touches[0].clientX)-startX)+'px';\n\n// That's all we do for dragging elements\n }\n}\n\n// On mouseup or touchend, run the release() function\ndocument.addEventListener('mouseup',release);\ndocument.addEventListener('touchend',release);\n\n// The release function empties grab, forgetting which element has been picked.\nfunction release(e){\n grab='';\n}\n\n// On mouseover, run the over() function\ndocument.addEventListener('mouseover',over);\n\n// This is the over() function\nfunction over(e){\n\n// Set the cursor to 'move' wihle hovering an element you can reposition\n e.target.style.cursor='move'\n\n// Add a green box-shadow to show what container your hovering on\n e.target.style.boxShadow='inset lime 0 0 1px, lime 0 0 1px'\n}\n\n// On mouseover, run the out() function\ndocument.addEventListener('mouseout',out);\n\n// This is the out() function\nfunction out(e){\n\n // Remove the move cursor and green box-shadow\n e.target.style.cursor=e.target.style.boxShadow=''\n}"
},
{
"path": "dragon.js",
"content": "/*dragon*/var b=X=Y=T=L=0;document.addEventListener(\"click\",function(a){a.preventDefault()},!0);document.addEventListener(\"mousedown\",c);document.addEventListener(\"touchstart\",c);function c(a){a.preventDefault();a.target!==document.documentElement&&a.target!==document.body&&(b=Date.now(),a.target.setAttribute(\"data-drag\",b),a.target.style.position=\"relative\",T=a.target.style.top.split(\"px\")[0]||0,L=a.target.style.left.split(\"px\")[0]||0);X=a.clientX||a.touches[0].clientX;Y=a.clientY||a.touches[0].clientY}document.addEventListener(\"mousemove\",d);document.addEventListener(\"touchmove\",d);function d(a){if(\"\"!==b){var e=document.querySelector('[data-drag=\"'+b+'\"]');e.style.top=parseInt(T)+parseInt((a.clientY||a.touches[0].clientY)-Y)+\"px\";e.style.left=parseInt(L)+parseInt((a.clientX||a.touches[0].clientX)-X)+\"px\"}}document.addEventListener(\"mouseup\",f);document.addEventListener(\"touchend\",f);function f(){b=\"\"}document.addEventListener(\"mouseover\",g);function g(a){a.target.style.cursor=\"move\";a.target.style.boxShadow=\"inset lime 0 0 1px,lime 0 0 1px\"}document.addEventListener(\"mouseout\",h);function h(a){a.target.style.cursor=a.target.style.boxShadow=\"\"};"
},
{
"path": "index.html",
"content": "\n\n\n \n \n Dragon.js\n \n \n \n \n \n \n\n\n
Click to Drag
\n
dragging elements using mouse & touchscreen
\n
This is an experiment to see if dragging items on the page could be helpful for in-browser design. Simply click or tap on any element to move it and its children.
\n
If you'd like to test this on mobile, simple create a new bookmark for any page and replace the URL with 'javascript:' followed by the JavaScript in the following file: http://staticresource.com/dragon.js
\n
Your Bookmark should look like this:
\n
Name: Dragon URL:javascript:var grab=startX=startY=\"\",oldT… (the rest of dragon.js here)
\n
Now load any site you want to rearrange, then tap on your bookmark and you should be able to tap and drag the elements around!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n
\n
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum sunt in culpa qui officia deserunt mollit anim id est laborum.