├── favicon.ico ├── favicon.png ├── img ├── noise.png ├── dabblet.ttf ├── loader.png └── loader-animated.gif ├── keys.template.php ├── user ├── .htaccess ├── index.html ├── style.css └── user-profile.js ├── preview ├── index.html ├── .htaccess └── render.js ├── result.html ├── result ├── .htaccess └── index.php ├── post-test.html ├── .eslintrc.json ├── .htaccess ├── oauth.php ├── code ├── classList.min.js ├── util.js ├── selection.js ├── incrementable.js ├── code-highlight.js ├── prefixfree.min.js ├── previewers.js ├── user-profile.js ├── global.js ├── utopia.js ├── dabblet.js ├── editor.js └── prism.js ├── help ├── style.css └── index.html ├── index-php.php ├── index.html └── style ├── global.css └── style.css /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeaVerou/dabblet/HEAD/favicon.ico -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeaVerou/dabblet/HEAD/favicon.png -------------------------------------------------------------------------------- /img/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeaVerou/dabblet/HEAD/img/noise.png -------------------------------------------------------------------------------- /img/dabblet.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeaVerou/dabblet/HEAD/img/dabblet.ttf -------------------------------------------------------------------------------- /img/loader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeaVerou/dabblet/HEAD/img/loader.png -------------------------------------------------------------------------------- /img/loader-animated.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeaVerou/dabblet/HEAD/img/loader-animated.gif -------------------------------------------------------------------------------- /keys.template.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /user/.htaccess: -------------------------------------------------------------------------------- 1 | RewriteEngine On 2 | 3 | RewriteBase / 4 | RewriteCond %{REQUEST_FILENAME} !-f 5 | RewriteCond %{REQUEST_FILENAME} !-d 6 | RewriteRule . /user/index.html [L] -------------------------------------------------------------------------------- /preview/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dabblet result 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dabblet result 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /result/.htaccess: -------------------------------------------------------------------------------- 1 | RewriteEngine On 2 | 3 | RewriteBase / 4 | RewriteCond %{HTTP_HOST} ^result\.dabblet\.com 5 | RewriteCond %{REQUEST_FILENAME} !-f 6 | RewriteCond %{REQUEST_FILENAME} !-d 7 | RewriteRule . /index.php [L] 8 | 9 | 10 | RewriteBase / 11 | RewriteCond %{REQUEST_FILENAME} !-f 12 | RewriteCond %{REQUEST_FILENAME} !-d 13 | RewriteRule ^(.*)$ http://result.dabblet.com/$1 [R=301,L] -------------------------------------------------------------------------------- /preview/.htaccess: -------------------------------------------------------------------------------- 1 | RewriteEngine On 2 | 3 | RewriteBase / 4 | RewriteCond %{HTTP_HOST} ^preview\.dabblet\.com 5 | RewriteCond %{REQUEST_FILENAME} !-f 6 | RewriteCond %{REQUEST_FILENAME} !-d 7 | RewriteRule . /index.html [L] 8 | 9 | 10 | RewriteBase / 11 | RewriteCond %{REQUEST_FILENAME} !-f 12 | RewriteCond %{REQUEST_FILENAME} !-d 13 | RewriteRule ^(.*)$ http://preview.dabblet.com/$1 [R=301,L] -------------------------------------------------------------------------------- /post-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 | 14 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "ecmaVersion": 6, 4 | "sourceType": "module", 5 | "ecmaFeatures": { 6 | "impliedStrict": true 7 | } 8 | }, 9 | "env": { 10 | "browser": true, 11 | "node": true 12 | }, 13 | "rules": { 14 | "semi": 1, 15 | "no-dupe-args": 1, 16 | "no-dupe-keys": 1, 17 | "no-unreachable": 1, 18 | "valid-typeof": 1, 19 | "curly": 1, 20 | "no-useless-call": 1, 21 | "brace-style": [1, "stroustrup"], 22 | "no-mixed-spaces-and-tabs": [1, "smart-tabs"], 23 | "quotes": [1, "single", "avoid-escape"], 24 | "spaced-comment": [1, "always", { 25 | "block": { 26 | "exceptions": ["*"] 27 | } 28 | }], 29 | "arrow-spacing": 1, 30 | "comma-spacing": 1, 31 | "keyword-spacing": 1 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | RewriteEngine On 2 | 3 | RewriteCond %{HTTP_HOST} !^dabblet\.com 4 | RewriteCond %{HTTP_HOST} !^labs\.dabblet\.com 5 | RewriteCond %{HTTP_HOST} !^result\.dabblet\.com 6 | RewriteCond %{HTTP_HOST} !^localhost 7 | RewriteRule ^(.*)$ https://dabblet.com/$1 [R=301,L] 8 | 9 | RewriteBase / 10 | RewriteCond %{REQUEST_METHOD} POST 11 | RewriteCond %{REQUEST_FILENAME} !-f 12 | RewriteRule ^.*$ /index-php.php [L] 13 | 14 | RewriteBase / 15 | RewriteCond %{REQUEST_FILENAME} !-f 16 | RewriteCond %{REQUEST_FILENAME} !-d 17 | RewriteRule ^.*$ /index.html [L] 18 | 19 | # Compress code 20 | AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css text/javascript image/svg+xml application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript 21 | -------------------------------------------------------------------------------- /oauth.php: -------------------------------------------------------------------------------- 1 | 28 | 29 | -------------------------------------------------------------------------------- /preview/render.js: -------------------------------------------------------------------------------- 1 | var style = document.querySelector('style'); 2 | 3 | var domLoaded = false; 4 | 5 | document.addEventListener('DOMContentLoaded', function() { 6 | domLoaded = true; 7 | }); 8 | 9 | onmessage = function(evt) { 10 | if (evt.origin === 'http://localhost' || evt.origin === 'https://dabblet.com' || evt.origin === 'http://dabblet.com') { 11 | var info = JSON.parse(evt.data), 12 | data = info.data; 13 | 14 | switch (info.action) { 15 | case 'title': 16 | document.title = data; 17 | break; 18 | 19 | case 'css': 20 | style.textContent = data; 21 | break; 22 | 23 | case 'html': 24 | document.body.innerHTML = data; 25 | break; 26 | 27 | case 'javascript': 28 | if (domLoaded) { 29 | try { 30 | document.body.innerHTML = document.body.innerHTML; 31 | eval(data); 32 | } 33 | catch (e) { 34 | var lineNumber = e.lineNumber - 30 + 1 || (e.stack.match(/:(\d+):\d+/) || [,])[1]; 35 | 36 | parent.postMessage(JSON.stringify({ 37 | action: 'jserror', 38 | data: { 39 | name: e.name, 40 | message: e.message, 41 | lineNumber: lineNumber 42 | } 43 | }), '*'); 44 | } 45 | } 46 | else { 47 | document.addEventListener('DOMContentLoaded', function() { 48 | onmessage(evt); 49 | }); 50 | } 51 | } 52 | } 53 | }; -------------------------------------------------------------------------------- /code/classList.min.js: -------------------------------------------------------------------------------- 1 | /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ 2 | if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p 2 | 3 | 4 | 5 | 6 | User profile ✿ dabblet.com 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 |

21 |

dabblet

22 | 23 | 30 | 31 |

32 | ? 33 | 34 |

35 | 36 | Dabblets 37 | 38 | 39 | 40 | Following 41 | 0 42 | 43 | 44 | 45 | Followers 46 | 0 47 | 48 |

49 |

50 | 51 |

52 | 53 |

54 |

55 | 56 |

57 | 58 | 59 | 60 | 61 | Edit your profile 62 |

63 |

64 |

65 | 66 | ● 67 | 68 |

69 |

70 |

71 | 72 |

73 | 74 |

75 | 76 |

77 | 78 |

79 | 80 |

81 | 82 |

83 |

84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /result/index.php: -------------------------------------------------------------------------------- 1 | 1, 31 | CURLOPT_URL => $uri, 32 | CURLOPT_SSL_VERIFYPEER => 0, 33 | CURLOPT_SSL_VERIFYHOST => 0, 34 | CURLOPT_VERBOSE => 0, 35 | CURLOPT_USERAGENT => $agent 36 | )); 37 | 38 | $raw = curl_exec($curl); 39 | curl_close($curl); 40 | } 41 | catch(Exception $e) { 42 | echo $e; 43 | } 44 | 45 | //echo $uri; 46 | 47 | if($raw) { 48 | if(function_exists('json_decode')) { 49 | $data = json_decode($raw, true); 50 | } 51 | } 52 | } 53 | 54 | if(!$data || !$data['files'] || isset($data['message'])) { 55 | die($data? $data['message'] : 'Not found, sorry! :('); 56 | } 57 | 58 | $css = $data['files']['dabblet.css']['content']; 59 | $html = $data['files']['dabblet.html']['content']; 60 | $js = $data['files']['dabblet.js']['content']; 61 | $settings = json_decode($data['files']['settings.json']['content'], true); 62 | 63 | if (!$css) { 64 | foreach ($data['files'] as $filename => $content) { 65 | if (strpos($filename, '.css') > 0) { 66 | $css = $content['content']; 67 | break; 68 | } 69 | } 70 | } 71 | 72 | 73 | if (!$html) { 74 | foreach ($data['files'] as $filename => $content) { 75 | if (strpos($filename, '.html') > 0) { 76 | $html = $content['content']; 77 | break; 78 | } 79 | } 80 | } 81 | 82 | if (!$js) { 83 | foreach ($data['files'] as $filename => $content) { 84 | if (strpos($filename, '.js') > 0) { 85 | $js = $content['content']; 86 | break; 87 | } 88 | } 89 | } 90 | 91 | ?> 92 | 93 | 94 | 95 | 96 | <?= $data['description'] ?> 97 | 100 | 105 | 106 | 107 | 108 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /code/selection.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | Object.defineProperty(HTMLPreElement.prototype, 'selectionStart', { 4 | get: function() { 5 | var selection = getSelection(); 6 | 7 | if (selection.rangeCount) { 8 | var range = selection.getRangeAt(0), 9 | element = range.startContainer, 10 | container = element, 11 | offset = range.startOffset; 12 | 13 | if (!(this.compareDocumentPosition(element) & 0x10)) { 14 | return 0; 15 | } 16 | 17 | do { 18 | while (element = element.previousSibling) { 19 | if (element.textContent) { 20 | offset += element.textContent.length; 21 | } 22 | } 23 | 24 | element = container = container.parentNode; 25 | } while (element && element != this); 26 | 27 | return offset; 28 | } 29 | else { 30 | return 0; 31 | } 32 | }, 33 | 34 | enumerable: true, 35 | configurable: true 36 | }); 37 | 38 | Object.defineProperty(HTMLPreElement.prototype, 'selectionEnd', { 39 | get: function() { 40 | var selection = getSelection(); 41 | 42 | if (selection.rangeCount) { 43 | return this.selectionStart + (selection.getRangeAt(0) + '').length; 44 | } 45 | else { 46 | return 0; 47 | } 48 | }, 49 | 50 | enumerable: true, 51 | configurable: true 52 | }); 53 | 54 | HTMLPreElement.prototype.setSelectionRange = function(ss, se) { 55 | var range = document.createRange(), 56 | offset = findOffset(this, ss); 57 | 58 | range.setStart(offset.element, offset.offset); 59 | 60 | if (se && se != ss) { 61 | offset = findOffset(this, se); 62 | } 63 | 64 | range.setEnd(offset.element, offset.offset); 65 | 66 | var selection = window.getSelection(); 67 | selection.removeAllRanges(); 68 | selection.addRange(range); 69 | }; 70 | 71 | function findOffset(root, ss) { 72 | if (!root) { 73 | return null; 74 | } 75 | 76 | var offset = 0, 77 | element = root; 78 | 79 | do { 80 | var container = element; 81 | element = element.firstChild; 82 | 83 | if (element) { 84 | do { 85 | var len = element.textContent.length; 86 | 87 | if (offset <= ss && offset + len > ss) { 88 | break; 89 | } 90 | 91 | offset += len; 92 | } while (element = element.nextSibling); 93 | } 94 | 95 | if (!element) { 96 | // It's the container's lastChild 97 | break; 98 | } 99 | } while (element && element.hasChildNodes() && element.nodeType != 3); 100 | 101 | if (element) { 102 | return { 103 | element: element, 104 | offset: ss - offset 105 | }; 106 | } 107 | else if (container) { 108 | element = container; 109 | 110 | while (element && element.lastChild) { 111 | element = element.lastChild; 112 | } 113 | 114 | if (element.nodeType === 3) { 115 | return { 116 | element: element, 117 | offset: element.textContent.length 118 | }; 119 | } 120 | else { 121 | return { 122 | element: element, 123 | offset: 0 124 | }; 125 | } 126 | } 127 | 128 | return { 129 | element: root, 130 | offset: 0, 131 | error: true 132 | }; 133 | } 134 | 135 | })(); -------------------------------------------------------------------------------- /help/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Variables 3 | */ 4 | 5 | @font-face { 6 | font-family: 'Dabblet'; 7 | src: url(../img/dabblet.ttf); 8 | } 9 | 10 | @font-face { 11 | font-family: Primary; 12 | src: local('Baskerville'); 13 | } 14 | 15 | 16 | /** 17 | * Styles 18 | */ 19 | * { 20 | margin: 0; 21 | } 22 | 23 | html { 24 | background: url(../img/noise.png) hsl(24, 20%, 95%); 25 | max-width: 40em; 26 | padding-left: 12em; 27 | margin: auto; 28 | } 29 | 30 | body { 31 | padding: 1em; 32 | border-left: 1px solid hsla(200,10%,20%,.4); 33 | margin: 2em auto; 34 | font: 110%/1.5 Primary; 35 | hyphens: auto; 36 | text-shadow: 0 0.0847em white; /* See issue #134 */ 37 | text-rendering: optimizelegibility; 38 | -webkit-font-smoothing: subpixel-antialiased; /* fix any issues caused by translateZ fix */ 39 | } 40 | 41 | h1, h2 { 42 | font: bold 200%/1 sans-serif; 43 | } 44 | 45 | body > hgroup { 46 | padding: .5em 0; 47 | color: black; 48 | text-align: center; 49 | font-size: 400%; 50 | line-height: .4; 51 | -webkit-transform: translateZ(0); /* fix for chopped letters */ 52 | } 53 | 54 | body > hgroup > h1 { 55 | font-family: Dabblet, sans-serif; 56 | font-size: 100%; 57 | } 58 | 59 | body > hgroup > h1 > a { 60 | text-decoration: none; 61 | } 62 | 63 | body > hgroup > h2 { 64 | margin-top: -.7em; 65 | font: italic 80%/1 Primary; 66 | text-indent: 4em; 67 | color: #a34; 68 | cursor: help; 69 | } 70 | 71 | p { 72 | margin: 1em 0; 73 | } 74 | 75 | a { 76 | color: hsl(200, 10%, 20%); 77 | } 78 | 79 | kbd { 80 | display: inline-block; 81 | min-width: 1em; 82 | padding: .2em; 83 | border: 1px solid #ddd; 84 | border-radius: .3em; 85 | background: white; 86 | text-align: center; 87 | line-height: 1; 88 | } 89 | 90 | kbd[title] { 91 | cursor: help; 92 | } 93 | 94 | section:first-of-type, 95 | section#toc { 96 | font-size: 120%; 97 | } 98 | 99 | section h1, 100 | section h2 { 101 | margin: 1.5em 0 .5em; 102 | line-height: 1; 103 | letter-spacing: -.05em; 104 | } 105 | 106 | section h1 { 107 | font-size: 350%; 108 | } 109 | 110 | section h2 { 111 | font-size: 200%; 112 | color: hsl(200, 10%, 20%); 113 | } 114 | 115 | nav { 116 | position: fixed; 117 | top: 13em; 118 | width: 12em; 119 | padding-right: 1em; 120 | margin-left: -14em; 121 | text-align: right; 122 | } 123 | 124 | nav:not(:hover) { 125 | color: hsla(200,10%,20%,.4); 126 | } 127 | 128 | nav > ol { 129 | list-style-position: inside; 130 | } 131 | 132 | nav a { 133 | padding: .25em 0; 134 | text-decoration: none; 135 | color: inherit; 136 | } 137 | 138 | nav a:hover { 139 | color: #a34; 140 | } 141 | 142 | table { 143 | border-spacing: 0; 144 | } 145 | 146 | thead { 147 | background: rgba(0,0,0,.1); 148 | } 149 | 150 | td { 151 | border-bottom: 1px solid rgba(0,0,0,.3); 152 | padding: .3em .5em; 153 | vertical-align: top; 154 | } 155 | 156 | tbody td:first-child { 157 | width: 10em; 158 | } 159 | 160 | tbody td:first-child > kbd { 161 | font-size: 120%; 162 | } 163 | 164 | tbody td:first-child > .note { 165 | font-size: 65%; 166 | } 167 | 168 | footer { 169 | border-top: 1px solid rgba(0,0,0,.2); 170 | padding: .5em; 171 | text-align: center; 172 | } 173 | 174 | #quick-links { 175 | font-style: italic; 176 | } 177 | 178 | #quick-links > a { 179 | padding: .4em .8em; 180 | background: url('../img/noise.png') hsla(200, 10%, 20%,.6); 181 | color: white; 182 | font-weight: bold; 183 | border-radius: 999px; 184 | text-decoration: none; 185 | text-shadow: 0 -1px 1px black; 186 | box-shadow: 0 .1em white; 187 | } 188 | 189 | #quick-links > a:hover { 190 | background-color: hsl(200, 10%, 20%); 191 | } 192 | 193 | ::selection { 194 | background-color: initial; /* See issue #140 */ 195 | color: white; 196 | text-shadow: none; /* See issue #135 */ 197 | } 198 | -------------------------------------------------------------------------------- /code/incrementable.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Script for making multiple numbers in a textfield incrementable/decrementable (like Firebug's CSS values) 3 | * @author Lea Verou 4 | * @version 1.1 5 | */ 6 | 7 | (function(){ 8 | 9 | /** 10 | * Constructor 11 | * @param textField {HTMLElement} An input or textarea element 12 | * @param multiplier {Function} A function that accepts the event object and returns the multiplier or 0 for nothing to happen. 13 | */ 14 | var _ = window.Incrementable = function(textField, multiplier, units) { 15 | var me = this; 16 | 17 | this.textField = textField; 18 | 19 | this.step = +textField.getAttribute('step') || 20 | +textField.getAttribute('data-step') || 1; 21 | 22 | this.multiplier = multiplier || function(evt) { 23 | if (evt.shiftKey) { return 10; } 24 | 25 | if (evt.ctrlKey) { return .1; } 26 | 27 | return 1; 28 | } 29 | 30 | if (units) { 31 | this.units = units; 32 | } 33 | 34 | this.changed = false; 35 | 36 | this.textField.addEventListener('keydown', function(evt) { 37 | var multiplier = me.multiplier(evt); 38 | 39 | if (multiplier && (evt.keyCode == 38 || evt.keyCode == 40)) { 40 | me.changed = false; 41 | 42 | // Up or down arrow pressed, check if there's something 43 | // increment/decrement-able where the caret is 44 | var caret = this.selectionStart, 45 | text = this.value, 46 | regex = new RegExp('^([\\s\\S]{0,' + caret + '}[^-0-9\\.])?(-?[0-9]*(?:\\.?[0-9]+)(?:' + me.units + '))\\b', 'i'), 47 | property = 'value' in this? 'value' : 'textContent'; 48 | 49 | this[property] = this[property].replace(regex, function($0, $1, $2) { 50 | $1 = $1 || ''; 51 | if ($1.length <= caret && $1.length + $2.length >= caret) { 52 | 53 | var stepValue = me.stepValue($2, evt.keyCode == 40, multiplier); 54 | caret = caret + (stepValue.length - $2.length); 55 | 56 | me.changed = { 57 | add: stepValue, 58 | del: $2, 59 | start: $1.length 60 | }; 61 | 62 | return $1 + stepValue; 63 | } 64 | else { 65 | return $1 + $2; 66 | } 67 | }); 68 | 69 | if (me.changed) { 70 | this.setSelectionRange(caret, caret); 71 | 72 | evt.preventDefault(); 73 | evt.stopPropagation(); 74 | 75 | // Fire input event 76 | var evt = document.createEvent("HTMLEvents"); 77 | 78 | evt.initEvent('input', true, true ); 79 | 80 | evt.add = me.changed.add; 81 | evt.del = me.changed.del; 82 | evt.start = me.changed.start; 83 | evt.incrementable = true; 84 | 85 | this.dispatchEvent(evt); 86 | } 87 | } 88 | }, false); 89 | 90 | this.textField.addEventListener('keypress', function(evt) { 91 | if (me.changed && (evt.keyCode == 38 || evt.keyCode == 40)) 92 | evt.preventDefault(); 93 | evt.stopPropagation(); 94 | me.changed = false; 95 | }, false); 96 | } 97 | 98 | _.prototype = { 99 | /** 100 | * Gets a and increments or decrements it 101 | */ 102 | stepValue: function(length, decrement, multiplier) { 103 | var val = parseFloat(length), 104 | offset = (decrement? -1 : 1) * (multiplier || 1) * this.step, 105 | valPrecision = precision(val), 106 | offsetPrecision = precision(offset); 107 | 108 | // Prevent rounding errors 109 | var newVal = (parseFloat((val + offset).toPrecision( 110 | Math.max(valPrecision.integer, offsetPrecision.integer) + 111 | Math.max(valPrecision.decimals, offsetPrecision.decimals) 112 | ))); 113 | 114 | return newVal + length.replace(/^-|[0-9]+|\./g, ''); 115 | }, 116 | 117 | units: '|%|deg|px|r?em|ex|ch|in|cm|mm|pt|pc|vmin|vmax|vw|vh|gd|m?s' 118 | }; 119 | 120 | function precision(number) { 121 | number = (number + '').replace(/^0+/, ''); 122 | 123 | var dot = number.indexOf('.'); 124 | 125 | if (dot === -1) { 126 | return { 127 | integer: number.length, 128 | decimals: 0 129 | }; 130 | } 131 | 132 | return { 133 | integer: dot, 134 | decimals: number.length - 1 - dot 135 | }; 136 | } 137 | 138 | })(); -------------------------------------------------------------------------------- /code/code-highlight.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Super simple syntax highlighting 3 | * @author Lea Verou 4 | */ 5 | 6 | RegExp.create = function(str, replacements, flags) { 7 | for(var id in replacements) { 8 | var replacement = replacements[id], 9 | idRegExp = RegExp('{{' + id + '}}', 'gi'); 10 | 11 | if(replacement.source) { 12 | replacement = replacement.source.replace(/^\^|\$$/g, ''); 13 | } 14 | 15 | // Don't add extra parentheses if they already exist 16 | str = str.replace(RegExp('\$' + idRegExp.source + '\$', 'gi'), '(' + replacement + ')'); 17 | 18 | str = str.replace(idRegExp, '(?:' + replacement + ')'); 19 | } 20 | 21 | return RegExp(str, flags); 22 | }; 23 | 24 | (function(){ 25 | 26 | var number = /-?\d*\.?\d+/; 27 | 28 | // CSS colors 29 | var colors = [ 30 | // 'aliceblue', 31 | // 'antiquewhite', 32 | 'aqua', 33 | // 'aquamarine', 34 | // 'azure', 35 | // 'beige', 36 | // 'bisque', 37 | 'black', 38 | // 'blanchedalmond', 39 | 'blue', 40 | // 'blueviolet', 41 | 'brown', 42 | // 'burlywood', 43 | // 'cadetblue', 44 | // 'chartreuse', 45 | // 'chocolate', 46 | // 'coral', 47 | // 'cornflowerblue', 48 | // 'cornsilk', 49 | // 'crimson', 50 | 'cyan', 51 | // 'darkblue', 52 | // 'darkcyan', 53 | // 'darkgoldenrod', 54 | 'darkgray', 55 | // 'darkgreen', 56 | 'darkgrey', 57 | // 'darkkhaki', 58 | // 'darkmagenta', 59 | // 'darkolivegreen', 60 | // 'darkorange', 61 | // 'darkorchid', 62 | // 'darkred', 63 | // 'darksalmon', 64 | // 'darkseagreen', 65 | // 'darkslateblue', 66 | // 'darkslategray', 67 | // 'darkslategrey', 68 | // 'darkturquoise', 69 | // 'darkviolet', 70 | 'deeppink', 71 | // 'deepskyblue', 72 | 'dimgray', 73 | 'dimgrey', 74 | // 'dodgerblue', 75 | // 'firebrick', 76 | // 'floralwhite', 77 | // 'forestgreen', 78 | 'fuchsia', 79 | // 'gainsboro', 80 | // 'ghostwhite', 81 | 'gold', 82 | // 'goldenrod', 83 | 'gray', 84 | 'green', 85 | // 'greenyellow', 86 | 'grey', 87 | // 'honeydew', 88 | // 'hotpink', 89 | 'indianred', 90 | // 'indigo', 91 | // 'ivory', 92 | // 'khaki', 93 | // 'lavender', 94 | // 'lavenderblush', 95 | // 'lawngreen', 96 | // 'lemonchiffon', 97 | // 'lightblue', 98 | // 'lightcoral', 99 | // 'lightcyan', 100 | // 'lightgoldenrodyellow', 101 | 'lightgray', 102 | // 'lightgreen', 103 | 'lightgrey', 104 | // 'lightpink', 105 | // 'lightsalmon', 106 | // 'lightseagreen', 107 | // 'lightskyblue', 108 | // 'lightslategray', 109 | // 'lightslategrey', 110 | // 'lightsteelblue', 111 | // 'lightyellow', 112 | 'lime', 113 | 'limegreen', 114 | // 'linen', 115 | 'magenta', 116 | 'maroon', 117 | // 'mediumaquamarine', 118 | // 'mediumblue', 119 | // 'mediumorchid', 120 | // 'mediumpurple', 121 | // 'mediumseagreen', 122 | // 'mediumslateblue', 123 | // 'mediumspringgreen', 124 | // 'mediumturquoise', 125 | // 'mediumvioletred', 126 | // 'midnightblue', 127 | // 'mintcream', 128 | // 'mistyrose', 129 | // 'moccasin', 130 | // 'navajowhite', 131 | 'navy', 132 | // 'oldlace', 133 | 'olive', 134 | // 'olivedrab', 135 | 'orange', 136 | 'orangered', 137 | 'orchid', 138 | // 'palegoldenrod', 139 | // 'palegreen', 140 | // 'paleturquoise', 141 | // 'palevioletred', 142 | 'papayawhip', 143 | 'peachpuff', 144 | 'peru', 145 | 'pink', 146 | 'plum', 147 | // 'powderblue', 148 | 'purple', 149 | 'red', 150 | // 'rosybrown', 151 | // 'royalblue', 152 | // 'saddlebrown', 153 | 'salmon', 154 | // 'sandybrown', 155 | // 'seagreen', 156 | // 'seashell', 157 | // 'sienna', 158 | 'silver', 159 | // 'skyblue', 160 | // 'slateblue', 161 | 'slategray', 162 | 'slategrey', 163 | 'snow', 164 | // 'springgreen', 165 | // 'steelblue', 166 | 'tan', 167 | 'teal', 168 | 'thistle', 169 | 'tomato', 170 | 'transparent', 171 | 'turquoise', 172 | 'violet', 173 | 'wheat', 174 | 'white', 175 | 'whitesmoke', 176 | 'yellow', 177 | 'yellowgreen' 178 | ]; 179 | 180 | Prism.languages.insertBefore('css', 'important', { 181 | 'gradient': /(\b|\B-[a-z]{1,10}-)(repeating-)?(linear|radial)-gradient$((rgb|hsl)a?\(.+?$|[^\)])+\)/gi, 182 | 'color': RegExp.create('\\b{{keyword}}\\b|\\b{{func}}\\B|\\B{{hex}}\\b', { 183 | keyword: RegExp('^' + colors.join('|') + '$'), 184 | func: RegExp.create('^(?:rgb|hsl)a?\$(?:\\s*{{number}}%?\\s*,?\\s*){3,4}\$$', { 185 | number: number 186 | }), 187 | hex: /^#(?:[0-9a-f]{3}){1,2}$/i 188 | }, 'ig') 189 | }); 190 | 191 | Prism.languages.insertBefore('css', { 192 | 'important': /\B!important\b/gi, 193 | 'abslength': RegExp.create('(\\b|\\B){{number}}{{unit}}\\b', { 194 | number: number, 195 | unit: /(cm|mm|in|pt|pc|px)/ 196 | }, 'gi'), 197 | 'easing': RegExp.create('\\b{{bezier}}\\B|\\b{{keyword}}(?=\\s|;|\\}|$)', { 198 | bezier: RegExp.create('cubic-bezier\$({{number}},\\s*){3}{{number}}\$', { 199 | number: number 200 | }), 201 | keyword: /linear|ease(-in)?(-out)?/ 202 | }, 'gi'), 203 | 'time': RegExp.create('(\\b|\\B){{number}}m?s\\b', { 204 | number: number 205 | }, 'gi'), 206 | 'angle': RegExp.create('(\\b|\\B){{number}}(deg|g?rad|turn)\\b', { 207 | number: number 208 | }, 'gi'), 209 | 'fontfamily': /(("|')[\w\s]+\2,\s*|\w+,\s*)*(sans-serif|serif|monospace|cursive|fantasy)\b/gi, 210 | 'entity': /\\[\da-f]{1,8}/gi 211 | }); 212 | 213 | Prism.languages.html = Prism.languages.markup; 214 | 215 | })(); -------------------------------------------------------------------------------- /user/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Styles specific to user profiles 3 | */ 4 | 5 | html { 6 | background: url(../img/noise.png) hsl(24, 20%, 95%); 7 | } 8 | 9 | body { 10 | padding: 0 1em; 11 | hyphens: auto; 12 | text-shadow: 0 0.0847em white; /* See issue #134 */ 13 | text-rendering: optimizelegibility; 14 | -webkit-font-smoothing: subpixel-antialiased; /* fix any issues caused by translateZ fix */ 15 | } 16 | 17 | .count { 18 | display: inline-block; 19 | padding: 0 .5em; 20 | border-radius: 999px; 21 | margin-left: .3em; 22 | background: hsla(0,0%,100%,.4); 23 | box-shadow: 0 -1px 1px black, 0 -1px 2px black; 24 | color: black; 25 | text-shadow: 0 1px 1px hsla(0,0%,100%,.8); 26 | font-size: 85%; 27 | } 28 | 29 | div[role=main] { 30 | padding-top: 1em; 31 | } 32 | 33 | #profile { 34 | margin: 1em 0; 35 | overflow: hidden; 36 | } 37 | 38 | #profile .photo { 39 | float: left; 40 | max-width: 80px; 41 | border-radius: 5px; 42 | } 43 | 44 | #profile > p, 45 | #profile > h2, 46 | #profile > h3 { 47 | margin-left: 90px; 48 | } 49 | 50 | #profile > h2, 51 | #profile > h3 { 52 | margin-bottom: .3em; 53 | line-height: 1; 54 | } 55 | 56 | #profile .nickname { 57 | opacity: .5; 58 | } 59 | 60 | #profile .online { 61 | font-size: 80%; 62 | } 63 | 64 | #profile .online > a { 65 | text-decoration: underline; 66 | text-decoration-color: rgba(0,0,0,.3) 67 | } 68 | 69 | #profile .online > .separator { 70 | opacity: .3; 71 | } 72 | 73 | #profile .note { 74 | max-width: 35%; 75 | padding: .1em 0 .1em .6em; 76 | border-left: .4em solid rgba(0,0,0,.2); 77 | margin: -4.3em 0 0 27em; 78 | font: italic 100% 'Baskerville', 'Palatino Linotype', Palatino, serif; 79 | hyphens: auto; 80 | } 81 | 82 | #profile .note:empty, 83 | #profile .online a:empty + .separator { 84 | display: none; 85 | } 86 | 87 | @media (max-width: 930px) { 88 | #profile .note { 89 | max-width: none; 90 | margin: 1em 0 0 0; 91 | } 92 | } 93 | 94 | #profile .button, 95 | #profile button { 96 | float: right; 97 | font-size: 70%; 98 | } 99 | 100 | html.own .follow, 101 | html:not(.logged-in) .follow, 102 | html.own .unfollow, 103 | html:not(.logged-in) .unfollow, 104 | html.following .follow, 105 | html:not(.following) .unfollow, 106 | html:not(.own) .edit-profile { 107 | display: none; 108 | } 109 | 110 | .unfollow:hover { 111 | background-color: #b00; 112 | } 113 | 114 | .page { 115 | position: relative; 116 | display: none; 117 | padding: 1em 0 3em; 118 | } 119 | 120 | .page:target, 121 | .page.active { 122 | display: block; 123 | } 124 | 125 | .more { 126 | position: absolute; 127 | bottom: .5em; 128 | left: 50%; 129 | width: 40em; 130 | margin-left: -20em; 131 | } 132 | 133 | #dabblets { 134 | text-align: center; 135 | } 136 | 137 | .dabblet { 138 | position: relative; 139 | display: inline-block; 140 | border: 10px solid white; 141 | margin: 0 2em 1.5em 0; 142 | overflow: hidden; 143 | box-shadow: 1px 2px 8px rgba(0,0,0,.5); 144 | } 145 | 146 | .dabblet > a { 147 | display: block; 148 | width: 400px; 149 | height: 300px; 150 | } 151 | 152 | .dabblet iframe { 153 | position: absolute; 154 | top: 0; 155 | left: 0; 156 | width: 800px; 157 | height: 600px; 158 | border: 0; 159 | transform: scale(.5); 160 | transform-origin: top left; 161 | pointer-events: none; 162 | } 163 | 164 | .dabblet iframe[data-src], 165 | .dabblet iframe.loading { 166 | background: url(/img/loader-animated.gif) no-repeat center; 167 | } 168 | 169 | .dabblet > .info { 170 | position: absolute; 171 | bottom: 0; right: 0; left: 0; 172 | padding: .5em 1em; 173 | max-height: 1.4em; 174 | background: rgba(0,0,0,.6); 175 | color: white; 176 | text-shadow: 0 -1px 1px black; 177 | transition: .5s max-height; 178 | } 179 | 180 | .dabblet:hover > .info { 181 | max-height: 200px; 182 | } 183 | 184 | .dabblet > .info h1 { 185 | margin-bottom: .3em; 186 | font-size: 100%; 187 | line-height: 1.4; 188 | } 189 | 190 | .dabblet > .info p { 191 | font-size: 80%; 192 | } 193 | 194 | .dabblet > .info .comments { 195 | position: absolute; 196 | right: 1em; 197 | top: .7em; 198 | min-width: 1em; 199 | padding: 0 .4em; 200 | margin: -1.4em -.4em 0 0; 201 | border-radius: .3em; 202 | background: black; 203 | text-align: center; 204 | font-weight: bold; 205 | font-size: 90%; 206 | } 207 | 208 | .dabblet > .info .comments:after { 209 | content: ''; 210 | position: absolute; 211 | bottom: -5px; 212 | left: 50%; 213 | margin-left: -2px; 214 | border: 5px solid transparent; 215 | border-left-color: black; 216 | } 217 | 218 | article.user { 219 | position: relative; 220 | display: inline-block; 221 | max-width: 80px; 222 | max-height: 80px; 223 | margin: 0 .5em 1em; 224 | font-size: 60%; 225 | line-height: 1; 226 | text-align: center; 227 | } 228 | 229 | article.user a { 230 | font-weight: normal; 231 | } 232 | 233 | article.user h1 { 234 | position: absolute; 235 | right: 0; 236 | bottom: 0; 237 | left: 0; 238 | padding: .3em; 239 | margin: 0; 240 | background: rgba(0,0,0,.5); 241 | color: white; 242 | font-weight: normal; 243 | white-space: nowrap; 244 | overflow: hidden; 245 | text-overflow: ellipsis; 246 | text-shadow: 0 -1px 2px black; 247 | } 248 | 249 | article.user img { 250 | max-width: 100%; 251 | max-height: 100%; 252 | } 253 | -------------------------------------------------------------------------------- /code/prefixfree.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * StyleFix 1.0.3 & PrefixFree 1.0.7 3 | * @author Lea Verou 4 | * MIT license 5 | */ 6 | (function(){function m(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var e=window.StyleFix={link:function(a){var b=a.href||a.getAttribute("data-href");try{if(!b||"stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(p){return}var d=b.replace(/[^\/]+$/,""),f=(/^[a-z]{3,10}:/.exec(d)||[""])[0],h=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(d)||[""])[0],k=/^([^?]*)\??/.exec(b)[1],g=a.parentNode,c=new XMLHttpRequest,l;c.onreadystatechange=function(){4===c.readyState&& 7 | l()};l=function(){var b=c.responseText;if(b&&a.parentNode&&(!c.status||400>c.status||600 0) { 43 | property = 'bottom'; 44 | previewer.classList.remove('flipped'); 45 | } 46 | else { 47 | property = 'top'; 48 | previewer.classList.add('flipped'); 49 | } 50 | 51 | style.bottom = style.top = ''; 52 | style[property] = offsets[property] + token.offsetHeight + 'px'; 53 | style.left = offsets.left + Math.min(200, token.offsetWidth/2) + 'px'; 54 | } 55 | } 56 | } 57 | 58 | if (!token || !valid && oldToken) { 59 | previewer.classList.remove('active'); 60 | } 61 | } 62 | }); 63 | }; 64 | 65 | _.prototype = { 66 | 67 | }; 68 | 69 | _.s = {}; 70 | 71 | _.hideAll = function(except) { 72 | var all = _.s; 73 | 74 | for (var id in all) { 75 | if (!except || except !== id) { 76 | all[id].token = null; 77 | } 78 | } 79 | }; 80 | 81 | _.get = function(token) { 82 | var type = (token && token.className.match(/^token ([\w-]+)/) || [])[1]; 83 | 84 | return type in _.s? type : null; 85 | }; 86 | 87 | _._active = null; 88 | Object.defineProperty(_, 'active', { 89 | get: function() { 90 | return this._active; 91 | }, 92 | set: function(token) { 93 | var oldToken = this._active; 94 | 95 | this._active = token; 96 | 97 | if (oldToken) { 98 | oldToken.removeAttribute('data-active'); 99 | } 100 | 101 | if (token) { 102 | token.setAttribute('data-active', ''); 103 | } 104 | } 105 | }); 106 | 107 | })(); 108 | 109 | /** 110 | * Define previewers 111 | */ 112 | new Previewer('color', function(code) { 113 | var style = this.style; 114 | 115 | style.backgroundColor = ''; 116 | style.backgroundColor = code; 117 | 118 | return !!style.backgroundColor; 119 | }); 120 | 121 | new Previewer('abslength', function(code) { 122 | var style = this.style, 123 | abs = code.replace(/^-/, ''); 124 | 125 | style.width = ''; 126 | style.width = abs; 127 | 128 | var valid = !!style.width; 129 | 130 | if (valid) { 131 | var num = parseFloat(abs), 132 | unit = (code.match(/[a-z]+$/i) || [])[0]; 133 | 134 | style.marginLeft = -num/2 + unit; 135 | 136 | style.display = 'block'; 137 | var width = this.offsetWidth; 138 | style.display = ''; 139 | 140 | if (width > innerWidth || width < 9) { 141 | valid = false; 142 | } 143 | else { 144 | var size = width < 20? 'small' : 'normal'; 145 | this.setAttribute('data-size', size); 146 | } 147 | } 148 | 149 | return valid; 150 | }); 151 | 152 | new Previewer('time', function(code) { 153 | if (code === '0s') { 154 | return false; 155 | } 156 | 157 | var num = parseFloat(code), 158 | unit = (code.match(/[a-z]+$/i) || [])[0]; 159 | 160 | $$('animate', this).forEach(function(animation) { 161 | animation.setAttribute('dur', 2*num + unit); 162 | }); 163 | 164 | return true; 165 | }); 166 | 167 | new Previewer('angle', function(code) { 168 | var num = parseFloat(code), 169 | unit = (code.match(/[a-z]+$/i) || [])[0], 170 | max, percentage; 171 | 172 | switch (unit) { 173 | case 'deg': 174 | max = 360; 175 | break; 176 | case 'grad': 177 | max = 400; 178 | break; 179 | case 'rad': 180 | max = 2 * Math.PI; 181 | break; 182 | case 'turn': 183 | max = 1; 184 | } 185 | 186 | percentage = 100 * num/max; 187 | percentage %= 100; 188 | 189 | this[(num < 0? 'set' : 'remove') + 'Attribute']('data-negative', ''); 190 | 191 | $('circle', this).setAttribute('stroke-dasharray', Math.abs(percentage) + ',500'); 192 | 193 | return true; 194 | }); 195 | 196 | new Previewer('fontfamily', function(code) { 197 | var style = this.style; 198 | 199 | style.fontFamily = ''; 200 | style.fontFamily = code; 201 | 202 | return !!style.fontFamily; 203 | }); 204 | 205 | new Previewer('gradient', function(code) { 206 | var inner = this.firstChild, 207 | style = inner.style; 208 | 209 | style.cssText = StyleFix.fix('background-image: ' + code); 210 | 211 | return !!style.backgroundImage; 212 | }); 213 | 214 | new Previewer('easing', function(code) { 215 | code = ({ 216 | 'linear': '0,0,1,1', 217 | 'ease': '.25,.1,.25,1', 218 | 'ease-in': '.42,0,1,1', 219 | 'ease-out': '0,0,.58,1', 220 | 'ease-in-out':'.42,0,.58,1' 221 | })[code] || code; 222 | 223 | var p = code.match(/-?\d*\.?\d+/g); 224 | 225 | if (p.length === 4) { 226 | p = p.map(function(p, i) { 227 | return (i % 2? 1 - p : p) * 100; 228 | }); 229 | 230 | $('path', this).setAttribute('d', 'M0,100 C' + p[0] + ',' + p[1] + ', ' + p[2] + ',' + p[3] + ', 100,0'); 231 | 232 | var lines = $$('line', this); 233 | 234 | lines[0].setAttribute('x2', p[0]); 235 | lines[0].setAttribute('y2', p[1]); 236 | lines[1].setAttribute('x2', p[2]); 237 | lines[1].setAttribute('y2', p[3]); 238 | 239 | return true; 240 | } 241 | 242 | return false; 243 | }); 244 | 245 | new Previewer('url', function(code) { 246 | var href = code.replace(/^url$('|")?|('|")?$$/g, ''), 247 | img = $('img', this), 248 | that = this; 249 | 250 | img.src = href; 251 | 252 | img.onload = function() { 253 | this.className = ''; 254 | that.style.marginLeft = '-' + this.offsetWidth/2 + 'px'; 255 | }; 256 | 257 | img.onerror = function() { 258 | this.onload(); 259 | this.className = 'error'; 260 | }; 261 | 262 | return true; 263 | }); 264 | 265 | new Previewer('entity', function(code) { 266 | if (code.charAt(0) === '\\') { 267 | this.textContent = String.fromCharCode(parseInt(code.slice(1), 16)); 268 | } 269 | else { 270 | this.innerHTML = code; 271 | } 272 | 273 | return this.textContent.length === 1; 274 | }); -------------------------------------------------------------------------------- /index-php.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | dabblet.com 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

21 |

dabblet

22 | 23 | 30 | 31 | 69 | 70 | 88 | 89 |

90 | ? 91 |

92 | 93 | 94 | CSS 95 | & Result 96 | 97 | 98 | 99 | 100 | 101 | HTML 102 | & Result 103 | 104 | 105 | 106 | 107 | 108 | All 109 | 110 | 111 | 112 | 113 | JS_alpha 114 | 115 | 116 | 117 | 118 | Result 119 | 120 |

121 |

122 |

123 | 124 | 125 |

126 | 127 |

128 | 129 |

130 | 131 | 132 |

133 |

134 |

135 | 141 |

142 |

143 | 146 |

147 |

(ABCabc123&@%) 148 | (ABCabc123&@%)

149 |

150 |

151 | 161 |

162 |

163 |

164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /help/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Help ✿ dabblet.com 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

dabblet

17 |

help

18 | 19 | 20 |

21 |

dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. 22 | It uses -prefix-free, 23 | so that you won't have to add any prefixes in your CSS code. You can save your work in 24 | Github gists, embed it in other websites and share it 25 | with others.

26 | 27 |

It currently only supports modern versions of Chrome, Safari and Firefox but I'm hoping 28 | to expand browser support soon.

29 | 30 |

It’s handcoded by Lea Verou with care 31 | but some other nice folks helped too. 32 | Special thanks go to Roman Komarov who helped tremendously 33 | with his tips & thorough QA and to David Storey that came up with the name “dabblet”.

34 | 35 |

42 |

43 | 44 | 54 | 55 |

56 |

F.A.Q.

57 | 58 |

Where can I report bugs?

59 |

Please report any bugs and suggest features in dabblet’s bug tracker. 60 | An extensive description and (for bugs) a reduced testcase are appreciated. Thanks for your effort towards making dabblet better!

61 | 62 |

What about JavaScript?

63 |

JavaScript in <script> tags is not executed at the moment. This might change in the future. 64 | Currently, the only way to add JavaScript to a 65 | dabblet is through inline event handlers. Dabblet is CSS-focused. If your demo needs a lot of JavaScript, you might 66 | find something like jsFiddle 67 | or JSBin more helpful. 68 |

69 | 70 |

71 |

Keyboard shortcuts

72 | 73 |

I’m a heavy keyboard user myself, so lots of effort has been put into making dabblet 74 | a breeze to use with the keyboard:

75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 147 | 148 | 149 |

Action	Result
`⌘S`	Save if not saved, update if saved, fork if not own
`⌘1`-`8`	Go to first, second, third etc tab, provided they exist.
`⌘9`	Go to the last tab
`⌘⇧[`	Go to previous tab
`⌘⇧]`	Go to next tab
`⌘-` in editing mode	Decrease font size
`⌘+` in editing mode	Increase font size
`⌘0` in editing mode	Reset font size to 100%
`⇥` in editing mode	Enters a Tab (`\t`) character
`⇥` after selecting text	Indents the selected lines (including partially selected lines)
`⇧⇥` after selecting text	Removes one indent (Tab or space) from the beginning of each (partially) selected line.
`⌘/` in editing mode	Comments the current selection (or line if there is none) or uncomments if within a comment
`⌥↑` / `⌥↓`	Increment/decrement value by 1
`⇧⌥↑` / `⇧⌥↓`	Increment/decrement value by 10
`⌃⌥↑` / `⌃⌥↓`	Increment/decrement value by 0.1
`⎋` in editing mode	The editing area loses focus, so after pressing `⇥` you can use 146 \| the navigation bar through the keyboard

150 |

Note: Wherever ⌘ is used, it means either ⌘ or ⌃, in both platforms. 151 | This wasn’t only done for cross-platform compatibility, but also because some browsers don’t allow overriding their default shortcuts.

152 |

In any case, if a keyboard shortcut doesn’t make sense, it’s deferred to the browser (for example ⌘9 when you’re already on the last tab). 153 |

154 | 155 |

156 |

License

157 |

All posted code belongs to the poster and no license is enforced.

158 |

I am not responsible or liable for any loss or damage of any kind during the usage of dabblet or provided code.

159 |

dabblet itself is open source software and is distributed under a 160 | NPOSL-3.0 license. 161 | Fork dabblet on github, we’re waiting for your pull requests!

162 |

163 | 164 |

165 |

Press

166 |

The letters for the dabblet logo and all the icons that dabblet uses can be found in this font. For example usage, refer to the following dabblets: 167 |

Dabblet logo
Dabblet avatar

171 |

172 | 173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | dabblet.com 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

22 |

dabblet

23 | 24 | 31 | 32 | 70 | 71 | 89 | 90 |

91 | ? 92 |

93 | 94 | 95 | CSS 96 | & Result 97 | 98 | 99 | 100 | 101 | 102 | HTML 103 | & Result 104 | 105 | 106 | 107 | 108 | 109 | All 110 | 111 | 112 | 113 | 114 | JS_alpha 115 | 116 | 117 | 118 | 119 | Result 120 | 121 |

122 |

123 |

124 | 125 | 126 |

/**
127 |  * The first commented line is your dabblet’s title
128 |  */
129 | 
130 | background: #f06;
131 | background: linear-gradient(45deg, #f06, yellow);
132 | min-height: 100%;

133 | 134 | 135 |

<!-- content to be placed inside <body>…</body> -->

136 | 137 | 138 |

// alert('Hello world!');

139 | 140 | 141 |

142 |

143 |

144 | 150 |

151 |

152 | 155 |

156 |

(ABCabc123&@%) 157 | (ABCabc123&@%)

158 |

159 |

160 | 170 |

171 |

172 |

173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /code/user-profile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Code only used in user profiles (e.g dabblet.com/user/leaverou) 3 | * TODO reduce globals 4 | */ 5 | 6 | (function (html) { 7 | 8 | var username = (location.pathname.match(/\/user\/(\w+)/i) || [, ''])[1].trim(); 9 | 10 | if (username) { 11 | document.title = username + '’s profile'; 12 | 13 | $('.nickname', profile).textContent = username; 14 | 15 | addEventListener('gotUserInfo', function() { 16 | if (window.user && username.toLowerCase() === window.user.login.toLowerCase()) { 17 | // Viewing own profile 18 | html.classList.add('own'); 19 | } 20 | else { 21 | // Viewing somebody else’s profile. Do we follow them? 22 | gist.request({ 23 | path: 'user/following/' + username, 24 | accepted: [404], 25 | callback: function(data, xhr) { 26 | var following = xhr.status == 204; 27 | 28 | if (following) { 29 | html.classList.add('following'); 30 | } 31 | } 32 | }); 33 | } 34 | }); 35 | 36 | gist.request({ 37 | path: 'users/' + username, 38 | callback: function(user, xhr) { 39 | UserProfile.user = user; 40 | 41 | $u.event.fire(window, 'hashchange'); 42 | 43 | $('.tab[href="#following"] .count').textContent = user.following; 44 | $('.tab[href="#followers"] .count').textContent = user.followers; 45 | 46 | $('img', profile).src = user.avatar_url; 47 | 48 | 49 | if (user.name) { 50 | $('.fn', profile).textContent = user.name || ''; 51 | } 52 | 53 | $('.nickname', profile).textContent = user.login; 54 | 55 | $('.note', profile).textContent = user.bio || ''; 56 | $('.adr', profile).textContent = user.location || 'Earth'; 57 | 58 | $u.element.prop($('.url', profile), { 59 | textContent: prettyUrl(user.blog || ''), 60 | href: user.blog || '' 61 | }); 62 | 63 | $u.element.prop($('.github', profile), { 64 | textContent: user.login, 65 | href: user.html_url || '' 66 | }); 67 | } 68 | }); 69 | } 70 | 71 | var Templates = { 72 | user: function(user) { 73 | return $u.element.create('article', { 74 | properties: { 75 | className: 'user vcard' 76 | }, 77 | contents: { 78 | tag: 'a', 79 | properties: { 80 | href: location.protocol + '//' + location.host + '/user/' + user.login 81 | }, 82 | contents: [{ 83 | tag: 'img', 84 | properties: { 85 | className: 'photo', 86 | src: user.avatar_url 87 | } 88 | }, { 89 | tag: 'h1', 90 | className: 'nickname', 91 | contents: user.login 92 | }], 93 | } 94 | }); 95 | }, 96 | 97 | dabblet: function(gist) { 98 | var createdAt = prettyDate(gist.created_at), 99 | updatedAt = prettyDate(gist.updated_at); 100 | 101 | return $u.element.create('article', { 102 | properties: { 103 | className: 'dabblet', 104 | }, 105 | contents: [{ 106 | tag: 'a', 107 | properties: { 108 | href: 'https://dabblet.com/gist/' + gist.id, 109 | target: '_blank' 110 | } 111 | }, { 112 | tag: 'iframe', 113 | attributes: { 114 | 'data-src': 'https://result.dabblet.com/gist/' + gist.id, 115 | 'scrolling': 'no' 116 | } 117 | }, { 118 | tag: 'div', 119 | properties: { 120 | className: 'info' 121 | }, 122 | contents: [ 123 | gist.comments > 0? { 124 | tag: 'a', 125 | properties: { 126 | className: 'comments', 127 | href: 'https://gist.github.com/' + gist.id + '#comments', 128 | title: 'Comments', 129 | target: '_blank' 130 | }, 131 | contents: gist.comments 132 | } : '', 133 | { 134 | tag: 'h1', 135 | contents: gist.description 136 | }, 137 | { 138 | tag: 'p', 139 | properties: { 140 | className: 'date' 141 | }, 142 | contents: (createdAt !== updatedAt? [ 143 | 'Created ', { 144 | tag: 'time', 145 | attributes: { 146 | datetime: gist.created_at, 147 | title: gist.created_at 148 | }, 149 | contents: createdAt 150 | }, 151 | ', last updated ' 152 | ] : []).concat([{ 153 | tag: 'time', 154 | attributes: { 155 | datetime: gist.updated_at, 156 | title: gist.updated_at 157 | }, 158 | contents: updatedAt 159 | }]) 160 | } 161 | ] 162 | } 163 | ], 164 | inside: '#dabblets' 165 | }); 166 | } 167 | }; 168 | 169 | addEventListener('hashchange', function() { 170 | $$('.tab').forEach(function(tab) { 171 | tab.classList[tab.hash === location.hash? 'add' : 'remove']('active'); 172 | }); 173 | 174 | $('#dabblets').classList[location.hash? 'remove' : 'add']('active'); 175 | 176 | switch (location.hash) { 177 | case '#dabblets': 178 | case '': 179 | UserProfile.loadDabblets(); 180 | break; 181 | case '#following': 182 | UserProfile.loadFollowing(); 183 | break; 184 | case '#followers': 185 | UserProfile.loadFollowers(); 186 | } 187 | }); 188 | 189 | window.UserProfile = { 190 | loadDabblets: function() { 191 | UserProfile.loadBits({ 192 | section: dabblets, 193 | url: 'users/' + username + '/gists', 194 | render: function (gist, section) { 195 | var files = gist.files; 196 | 197 | if ('dabblet.css' in files && 'dabblet.html' in files) { 198 | Templates.dabblet(gist); 199 | } 200 | }, 201 | afterRender: function(page) { 202 | UserProfile.loadPreviews(); 203 | 204 | if (page == 1) { 205 | $u.event.bind(window, ['scroll', 'resize'], function (e) { 206 | $$('iframe[data-src].scrolled-off').forEach(function(iframe) { 207 | iframe.classList.remove('scrolled-off'); 208 | }); 209 | 210 | UserProfile.loadPreviews(); 211 | }); 212 | } 213 | } 214 | }); 215 | }, 216 | 217 | loadFollowing: function() { 218 | UserProfile.loadBits({ 219 | section: following, 220 | url: 'users/' + username + '/following', 221 | render: function (user, section) { 222 | section.appendChild(Templates.user(user)); 223 | } 224 | }); 225 | }, 226 | 227 | loadFollowers: function() { 228 | UserProfile.loadBits({ 229 | section: followers, 230 | url: 'users/' + username + '/followers', 231 | render: function (user, section) { 232 | section.appendChild(Templates.user(user)); 233 | } 234 | }); 235 | }, 236 | 237 | loadBits: function (config) { 238 | var section = config.section; 239 | 240 | var page = +section.getAttribute('data-next'); 241 | 242 | if (page < 1) { 243 | return; 244 | } 245 | 246 | gist.request({ 247 | path: config.url + '?page=' + page, 248 | callback: function(bits, xhr) { 249 | section.style.display = 'none'; 250 | 251 | var nextPage = ((xhr.getResponseHeader('Link') + '').match(/(\d+)>; rel="next"/) || [, 0])[1]; 252 | 253 | section.setAttribute('data-next', nextPage); 254 | 255 | if (!nextPage) { 256 | $('.more', section).style.display = 'none'; 257 | } 258 | 259 | for (var i=0, bit; bit = bits[i++];) { 260 | config.render(bit, section); 261 | } 262 | 263 | section.style.display = ''; 264 | 265 | config.afterRender && config.afterRender(page); 266 | } 267 | }); 268 | }, 269 | 270 | loadPreviews: function() { 271 | var iframe = $('iframe[data-src]:not(.scrolled-off)'); 272 | 273 | // Does it exist? 274 | if (!iframe) { 275 | return; 276 | } 277 | 278 | var offset = $u.offset(iframe); 279 | 280 | // Is it visible? 281 | var visible = offset.top < innerHeight + pageYOffset && offset.top + 250 > pageYOffset; 282 | 283 | if (!visible) { 284 | // Mark it and move on 285 | iframe.classList.add('scrolled-off'); 286 | UserProfile.loadPreviews(); 287 | return; 288 | } 289 | 290 | iframe.src = iframe.getAttribute('data-src'); 291 | iframe.removeAttribute('data-src'); 292 | iframe.classList.add('loading'); 293 | 294 | iframe.onload = function () { 295 | iframe.classList.remove('loading'); 296 | UserProfile.loadPreviews(); 297 | }; 298 | }, 299 | 300 | setFollow: function(following) { 301 | if (!window.user || !UserProfile.user) { 302 | return; 303 | } 304 | 305 | gist.request({ 306 | method: following? 'PUT' : 'DELETE', 307 | path: 'user/following/' + username, 308 | callback: function(data, xhr) { 309 | if (xhr.status == 204) { 310 | html.classList[following? 'add' : 'remove']('following'); 311 | } 312 | } 313 | }); 314 | } 315 | }; 316 | 317 | // Load iframes asynchronously, one at a time 318 | 319 | 320 | function prettyUrl(url) { 321 | return url && url.replace(/^http:\/\/|\/$/g, '') 322 | .replace(/^www\./, ''); 323 | } 324 | 325 | // Takes an ISO time and returns a string representing how 326 | // long ago the date represents. 327 | // Inspired by John Resig's Pretty Date function 328 | function prettyDate(time){ 329 | var date = new Date((time || '').replace(/-/g, '/').replace(/[TZ]/g, ' ')), 330 | now = new Date(), 331 | diff = ((now.getTime() + now.getTimezoneOffset()*60000 - date.getTime()) / 1000), 332 | day_diff = Math.floor(diff / 86400); 333 | 334 | if ( isNaN(day_diff) || day_diff < 0 ) { 335 | return time; 336 | } 337 | 338 | var number, unit; 339 | 340 | if (diff < 60) { 341 | return 'just now'; 342 | } 343 | 344 | if (diff < 3600) { 345 | number = Math.round(diff / 60); 346 | unit = 'minute'; 347 | } 348 | else if (diff < 86400) { 349 | number = Math.round(diff / 3600); 350 | unit = 'hour'; 351 | } 352 | else if (day_diff == 1) { 353 | return 'yesterday'; 354 | } 355 | else if (day_diff < 7) { 356 | number = day_diff; 357 | unit = 'day'; 358 | } 359 | else if (day_diff < 31) { 360 | number = Math.ceil( day_diff / 7 ); 361 | unit = 'week'; 362 | } 363 | else { 364 | number = Math.round(day_diff/30); 365 | unit = 'month'; 366 | } 367 | 368 | return (number === 1? 'a' : number) + ' ' + unit + (number === 1? '' : 's') + ' ago'; 369 | } 370 | 371 | })(document.documentElement); -------------------------------------------------------------------------------- /user/user-profile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Code only used in user profiles (e.g dabblet.com/user/leaverou) 3 | * TODO reduce globals 4 | */ 5 | 6 | (function (html) { 7 | 8 | var username = (location.pathname.match(/\/user\/([\w-]+)/i) || [,''])[1].trim(); 9 | 10 | if(username) { 11 | document.title = username + '’s profile'; 12 | 13 | $('.nickname', profile).textContent = username; 14 | 15 | addEventListener('gotUserInfo', function() { 16 | if(window.user && username.toLowerCase() === window.user.login.toLowerCase()) { 17 | // Viewing own profile 18 | html.classList.add('own'); 19 | } 20 | else { 21 | // Viewing somebody else’s profile. Do we follow them? 22 | gist.request({ 23 | path: 'user/following/' + username, 24 | accepted: [404], 25 | callback: function(data, xhr) { 26 | var following = xhr.status == 204; 27 | 28 | if (following) { 29 | html.classList.add('following'); 30 | } 31 | } 32 | }); 33 | } 34 | }); 35 | 36 | gist.request({ 37 | path: 'users/' + username, 38 | callback: function(user, xhr) { 39 | UserProfile.user = user; 40 | 41 | $u.event.fire(window, 'hashchange'); 42 | 43 | $('.tab[href="#following"] .count').textContent = user.following; 44 | $('.tab[href="#followers"] .count').textContent = user.followers; 45 | 46 | $('img', profile).src = user.avatar_url; 47 | 48 | 49 | if (user.name) { 50 | $('.fn', profile).textContent = user.name || ''; 51 | } 52 | 53 | $('.nickname', profile).textContent = user.login 54 | 55 | $('.note', profile).textContent = user.bio || ''; 56 | $('.adr', profile).textContent = user.location || 'Earth'; 57 | 58 | $u.element.prop($('.url', profile), { 59 | textContent: prettyUrl(user.blog || ''), 60 | href: user.blog || '' 61 | }); 62 | 63 | $u.element.prop($('.github', profile), { 64 | textContent: user.login, 65 | href: user.html_url || '' 66 | }); 67 | } 68 | }); 69 | } 70 | 71 | var Templates = { 72 | user: function(user) { 73 | return $u.element.create('article', { 74 | properties: { 75 | className: 'user vcard' 76 | }, 77 | contents: { 78 | tag: 'a', 79 | properties: { 80 | href: location.protocol + '//' + location.host + '/user/' + user.login 81 | }, 82 | contents: [{ 83 | tag: 'img', 84 | properties: { 85 | className: 'photo', 86 | src: user.avatar_url 87 | } 88 | }, { 89 | tag: 'h1', 90 | className: 'nickname', 91 | contents: user.login 92 | }], 93 | } 94 | }); 95 | }, 96 | 97 | dabblet: function(gist) { 98 | var createdAt = prettyDate(gist.created_at), 99 | updatedAt = prettyDate(gist.updated_at); 100 | 101 | return $u.element.create('article', { 102 | properties: { 103 | className: 'dabblet', 104 | }, 105 | contents: [{ 106 | tag: 'a', 107 | properties: { 108 | href: 'https://dabblet.com/gist/' + gist.id, 109 | target: '_blank' 110 | } 111 | }, { 112 | tag: 'iframe', 113 | attributes: { 114 | 'data-src': 'http://result.dabblet.com/gist/' + gist.id, 115 | 'scrolling': 'no' 116 | } 117 | }, { 118 | tag: 'div', 119 | properties: { 120 | className: 'info' 121 | }, 122 | contents: [ 123 | gist.comments > 0? { 124 | tag: 'a', 125 | properties: { 126 | className: 'comments', 127 | href: 'https://gist.github.com/' + gist.id + '#comments', 128 | title: 'Comments', 129 | target: '_blank' 130 | }, 131 | contents: gist.comments 132 | } : '', 133 | { 134 | tag: 'h1', 135 | contents: gist.description 136 | }, 137 | { 138 | tag: 'p', 139 | properties: { 140 | className: 'date' 141 | }, 142 | contents: (createdAt !== updatedAt? [ 143 | 'Created ', { 144 | tag: 'time', 145 | attributes: { 146 | datetime: gist.created_at, 147 | title: gist.created_at 148 | }, 149 | contents: createdAt 150 | }, 151 | ', last updated ' 152 | ] : []).concat([{ 153 | tag: 'time', 154 | attributes: { 155 | datetime: gist.updated_at, 156 | title: gist.updated_at 157 | }, 158 | contents: updatedAt 159 | }]) 160 | } 161 | ] 162 | } 163 | ], 164 | inside: '#dabblets' 165 | }); 166 | } 167 | } 168 | 169 | addEventListener('hashchange', function() { 170 | $$('.tab').forEach(function(tab) { 171 | tab.classList[tab.hash === location.hash? 'add' : 'remove']('active'); 172 | }); 173 | 174 | $('#dabblets').classList[location.hash? 'remove' : 'add']('active'); 175 | 176 | switch (location.hash) { 177 | case '#dabblets': 178 | case '': 179 | UserProfile.loadDabblets(); 180 | break; 181 | case '#following': 182 | UserProfile.loadFollowing(); 183 | break; 184 | case '#followers': 185 | UserProfile.loadFollowers(); 186 | } 187 | }); 188 | 189 | window.UserProfile = { 190 | loadDabblets: function() { 191 | UserProfile.loadBits({ 192 | section: dabblets, 193 | url: 'users/' + username + '/gists', 194 | render: function (gist, section) { 195 | var files = gist.files; 196 | 197 | if('dabblet.css' in files && 'dabblet.html' in files) { 198 | Templates.dabblet(gist); 199 | } 200 | }, 201 | afterRender: function(page) { 202 | UserProfile.loadPreviews(); 203 | 204 | if(page == 1) { 205 | $u.event.bind(window, ['scroll', 'resize'], function (e) { 206 | $$('iframe[data-src].scrolled-off').forEach(function(iframe) { 207 | iframe.classList.remove('scrolled-off'); 208 | }); 209 | 210 | UserProfile.loadPreviews(); 211 | }); 212 | } 213 | } 214 | }); 215 | }, 216 | 217 | loadFollowing: function() { 218 | UserProfile.loadBits({ 219 | section: following, 220 | url: 'users/' + username + '/following', 221 | render: function (user, section) { 222 | section.appendChild(Templates.user(user)); 223 | } 224 | }); 225 | }, 226 | 227 | loadFollowers: function() { 228 | UserProfile.loadBits({ 229 | section: followers, 230 | url: 'users/' + username + '/followers', 231 | render: function (user, section) { 232 | section.appendChild(Templates.user(user)); 233 | } 234 | }); 235 | }, 236 | 237 | loadBits: function (config) { 238 | var section = config.section; 239 | 240 | var page = +section.getAttribute('data-next'); 241 | 242 | if(page < 1) { 243 | return; 244 | } 245 | 246 | gist.request({ 247 | path: config.url + '?page=' + page, 248 | callback: function(bits, xhr) { 249 | section.style.display = 'none'; 250 | 251 | var nextPage = ((xhr.getResponseHeader('Link') + '').match(/(\d+)>; rel="next"/) || [,0])[1]; 252 | 253 | section.setAttribute('data-next', nextPage); 254 | 255 | if(!nextPage) { 256 | $('.more', section).style.display = 'none'; 257 | } 258 | 259 | for(var i=0, bit; bit = bits[i++];) { 260 | config.render(bit, section); 261 | } 262 | 263 | section.style.display = ''; 264 | 265 | config.afterRender && config.afterRender(page); 266 | } 267 | }); 268 | }, 269 | 270 | loadPreviews: function() { 271 | var iframe = $('iframe[data-src]:not(.scrolled-off)'); 272 | 273 | // Does it exist? 274 | if(!iframe) { 275 | return; 276 | } 277 | 278 | var offset = $u.offset(iframe); 279 | 280 | // Is it visible? 281 | var visible = offset.top < innerHeight + pageYOffset && offset.top + 250 > pageYOffset; 282 | 283 | if(!visible) { 284 | // Mark it and move on 285 | iframe.classList.add('scrolled-off'); 286 | UserProfile.loadPreviews(); 287 | return; 288 | } 289 | 290 | iframe.src = iframe.getAttribute('data-src'); 291 | iframe.removeAttribute('data-src'); 292 | iframe.classList.add('loading'); 293 | 294 | iframe.onload = function () { 295 | iframe.classList.remove('loading'); 296 | UserProfile.loadPreviews(); 297 | }; 298 | }, 299 | 300 | setFollow: function(following) { 301 | if (!window.user || !UserProfile.user) { 302 | return; 303 | } 304 | 305 | gist.request({ 306 | method: following? 'PUT' : 'DELETE', 307 | path: 'user/following/' + username, 308 | callback: function(data, xhr) { 309 | if (xhr.status == 204) { 310 | html.classList[following? 'add' : 'remove']('following'); 311 | } 312 | } 313 | }); 314 | } 315 | } 316 | 317 | // Load iframes asynchronously, one at a time 318 | 319 | 320 | function prettyUrl(url) { 321 | return url && url.replace(/^http:\/\/|\/$/g, '') 322 | .replace(/^www\./, ''); 323 | } 324 | 325 | // Takes an ISO time and returns a string representing how 326 | // long ago the date represents. 327 | // Inspired by John Resig's Pretty Date function 328 | function prettyDate(time){ 329 | var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")), 330 | now = new Date(), 331 | diff = ((now.getTime() + now.getTimezoneOffset()*60000 - date.getTime()) / 1000), 332 | day_diff = Math.floor(diff / 86400); 333 | 334 | if ( isNaN(day_diff) || day_diff < 0 ) { 335 | return time; 336 | } 337 | 338 | var number, unit; 339 | 340 | if(diff < 60) { 341 | return 'just now'; 342 | } 343 | 344 | if(diff < 3600) { 345 | number = Math.round(diff / 60); 346 | unit = 'minute'; 347 | } 348 | else if(diff < 86400) { 349 | number = Math.round(diff / 3600); 350 | unit = 'hour'; 351 | } 352 | else if (day_diff == 1) { 353 | return 'yesterday'; 354 | } 355 | else if (day_diff < 7) { 356 | number = day_diff; 357 | unit = 'day'; 358 | } 359 | else if (day_diff < 31) { 360 | number = Math.ceil( day_diff / 7 ); 361 | unit = 'week' 362 | } 363 | else { 364 | number = Math.round(day_diff/30); 365 | unit = 'month'; 366 | } 367 | 368 | return (number === 1? 'a' : number) + ' ' + unit + (number === 1? '' : 's') + ' ago'; 369 | } 370 | 371 | })(document.documentElement); -------------------------------------------------------------------------------- /code/global.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Stuff that runs on every page, not just the dabblet app 3 | */ 4 | 5 | var gist = { 6 | clientId: 'da931d37076424f332ef', 7 | 8 | oauth: [ 9 | // Step 1: Ask permission 10 | function(callback){ 11 | gist.oauth.callback = callback; 12 | 13 | var popup = open('https://github.com/login/oauth/authorize' + 14 | '?client_id=' + gist.clientId + 15 | '&scope=gist,user', 'popup', 'width=1015,height=500'); 16 | }, 17 | // Step 2: Get access token and store it 18 | function(token){ 19 | if (token) { 20 | window.ACCESS_TOKEN = localStorage['access_token'] = token; 21 | 22 | gist.getUser(gist.oauth.callback); 23 | 24 | } 25 | else { 26 | alert('Authentication error'); 27 | } 28 | 29 | gist.oauth.callback = null; 30 | } 31 | ], 32 | 33 | request: function(o) { 34 | o.method = o.method || 'GET'; 35 | o.id = o.id || ''; 36 | o.rev = o.rev || ''; 37 | o.accepted = o.accepted || []; 38 | 39 | var anon = o.anon || o.method === 'GET'; 40 | 41 | if (!anon && !window.ACCESS_TOKEN) { 42 | gist.oauth[0](function(){ 43 | gist.request(o); 44 | }); 45 | return; 46 | } 47 | 48 | var path = o.path || 'gists' + 49 | (o.id? '/' + o.id : '') + 50 | (o.rev? '/' + o.rev : '') + 51 | (o.gpath || ''); 52 | 53 | let headers = o.headers || {}; 54 | 55 | if (window.ACCESS_TOKEN) { 56 | headers['Authorization'] = 'token ' + window.ACCESS_TOKEN; 57 | } 58 | 59 | $u.xhr({ 60 | method: o.method, 61 | url: 'https://api.github.com/' + path + (!o.anon && window.ACCESS_TOKEN? '?access_token=' + ACCESS_TOKEN : ''), 62 | headers, 63 | callback: function(xhr) { 64 | var data = xhr.responseText? JSON.parse(xhr.responseText) : null; 65 | 66 | if (data && data.message && o.accepted.indexOf(xhr.status) === -1) { 67 | alert('Sorry, I got a ' + xhr.status + ' (' + data.message + ')'); 68 | } 69 | else { 70 | o.callback && o.callback(data, xhr); 71 | } 72 | }, 73 | data: o.data? JSON.stringify(o.data) : null 74 | }); 75 | }, 76 | 77 | getUser: function(callback) { 78 | gist.request({ 79 | path: 'user', 80 | callback: function(data) { 81 | window.user = data; 82 | 83 | document.documentElement.classList.add('logged-in'); 84 | 85 | $u.event.fire(window, 'gotUserInfo'); 86 | 87 | callback && callback(data); 88 | } 89 | }); 90 | }, 91 | 92 | getUserHTML: function(user) { 93 | return '

' + (user.name || user.login); 94 | }, 95 | 96 | getUserURL: function(user) { 97 | return '/user/' + user.login; 98 | }, 99 | 100 | save: function(options){ 101 | options = options || {}; 102 | 103 | var anonymous = options.anon || !window.user, 104 | creatingNew = anonymous || options.forceNew; 105 | 106 | if (gist.id 107 | && (!gist.user || !window.user || gist.user.id != user.id) 108 | && !anonymous 109 | ) { 110 | // If it doesn't belong to current user, fork first 111 | gist.fork(gist.id, gist.save, options.anon); 112 | return; 113 | } 114 | 115 | var id = gist.id || '', 116 | cssCode = css.textContent.trim(), 117 | htmlMarkup = html.textContent.trim(), 118 | jsCode = javascript.textContent.trim(), 119 | title = Dabblet.title(cssCode).trim(); 120 | 121 | 122 | var files = {}; 123 | 124 | if (cssCode || (!creatingNew && gist.files && gist.files['dabblet.css'])) { 125 | files['dabblet.css'] = cssCode? { content: cssCode } : null; 126 | } 127 | 128 | if (htmlMarkup || (!creatingNew && gist.files && gist.files['dabblet.html'])) { 129 | files['dabblet.html'] = htmlMarkup? { content: htmlMarkup } : null; 130 | } 131 | 132 | if (jsCode || (!creatingNew && gist.files && gist.files['dabblet.js'])) { 133 | files['dabblet.js'] = jsCode? { content: jsCode } : null; 134 | } 135 | 136 | files['settings.json'] = { 'content': JSON.stringify(Dabblet.settings.current(null, 'file')) }; 137 | 138 | gist.request({ 139 | anon: options.anon, 140 | id: creatingNew? null : id, 141 | method: 'POST', 142 | headers: { 143 | 'Content-Type': 'application/json; charset=UTF-8' 144 | }, 145 | callback: function(data, xhr) { 146 | if (data.id) { 147 | gist.update(data); 148 | } 149 | }, 150 | data: { 151 | 'description': title, 152 | 'public': true, 153 | 'files': files 154 | } 155 | }); 156 | }, 157 | 158 | fork: function(id, callback, anon) { 159 | gist.request({ 160 | method: 'POST', 161 | gpath: '/fork', 162 | id: id || gist.id || null, 163 | headers: { 164 | 'Content-Type': 'text/plain; charset=UTF-8' 165 | }, 166 | callback: function(data, xhr) { 167 | if (data.id) { 168 | gist.update(data); 169 | 170 | callback && callback(); 171 | } 172 | }, 173 | data: {} 174 | }); 175 | }, 176 | 177 | load: function(id, rev){ 178 | gist.request({ 179 | id: id || gist.id, 180 | rev: rev || gist.rev, 181 | callback: function(data){ 182 | gist.update(data); 183 | 184 | var files = gist.files = data.files; 185 | 186 | var cssFile = files['dabblet.css'], 187 | htmlFile = files['dabblet.html'], 188 | jsFile = files['dabblet.js'], 189 | settings = files['settings.json']; 190 | 191 | if (!cssFile || !htmlFile || !jsFile) { 192 | for (var filename in files) { 193 | var ext = filename.slice(filename.lastIndexOf('.')); 194 | 195 | if (!cssFile && ext == '.css') { 196 | cssFile = files[filename]; 197 | } 198 | 199 | if (!htmlFile && ext == '.html') { 200 | htmlFile = files[filename]; 201 | } 202 | 203 | if (!jsFile && ext == '.js') { 204 | jsFile = files[filename]; 205 | } 206 | 207 | if (cssFile && htmlFile && jsFile) { 208 | break; 209 | } 210 | } 211 | } 212 | 213 | if (htmlFile) { 214 | html.textContent = htmlFile.content; 215 | html.onkeyup(); 216 | } 217 | 218 | if (cssFile) { 219 | css.textContent = cssFile.content; 220 | css.onkeyup(); 221 | } 222 | 223 | if (jsFile) { 224 | javascript.textContent = jsFile.content; 225 | javascript.onkeyup(); 226 | 227 | // if (!Dabblet.embedded) { 228 | Dabblet.update.JavaScript(); 229 | // } 230 | } 231 | 232 | var defaultSettings = Dabblet.settings.current(); 233 | 234 | if (typeof localStorage.settings === 'string') { 235 | defaultSettings = $u.merge(defaultSettings, JSON.parse(localStorage.settings)); 236 | } 237 | 238 | if (settings) { 239 | try { 240 | settings = JSON.parse(settings.content); 241 | } 242 | catch (e) { 243 | settings = {}; 244 | } 245 | } 246 | else { 247 | settings = {}; 248 | } 249 | 250 | Dabblet.settings.apply($u.merge(defaultSettings, settings)); 251 | } 252 | }); 253 | }, 254 | 255 | // Update UI with fetched gist info 256 | // Does NOT update an existing gist. This is done by gist.save() 257 | update: function(data) { 258 | var id = data.id, 259 | rev = data.history && data.history[0] && data.history[0].version || ''; 260 | 261 | if (gist.id != id) { 262 | gist.id = id; 263 | gist.rev = undefined; 264 | 265 | history.pushState(null, '', '/gist/' + id + location.search + location.hash); 266 | } 267 | else if (gist.rev && gist.rev !== rev) { 268 | gist.rev = rev; 269 | 270 | history.pushState(null, '', '/gist/' + id + '/' + rev + location.search + location.hash); 271 | } 272 | 273 | if (data.user || data.owner) { 274 | gist.user = data.user || data.owner; 275 | } 276 | 277 | var gistUser = window['gist-user']; 278 | if (gist.user && gist.user != window.user) { 279 | gistUser.innerHTML = gist.getUserHTML(gist.user); 280 | gistUser.href = gist.getUserURL(gist.user); 281 | gistUser.removeAttribute('aria-hidden'); 282 | } 283 | else { 284 | gistUser.setAttribute('aria-hidden', 'true'); 285 | } 286 | 287 | $$('a[data-href*="{gist-id}"]').forEach(function(a) { 288 | a.href = a.getAttribute('data-href') 289 | .replace(/\{gist-id\}/gi, id) 290 | .replace(/\{gist-rev\}/gi, rev); 291 | a.removeAttribute('data-disabled'); 292 | a.removeAttribute('aria-hidden'); 293 | }); 294 | 295 | gist.saved = true; 296 | }, 297 | 298 | _saved: true 299 | }; 300 | 301 | Object.defineProperty(gist, 'saved', { 302 | get: function() { 303 | return this._saved; 304 | }, 305 | 306 | set: function(saved) { 307 | saved = !!saved; 308 | 309 | if (saved === this._saved) { 310 | return; 311 | } 312 | 313 | this._saved = saved; 314 | 315 | if (saved) { 316 | document.body.removeAttribute('data-unsaved'); 317 | window['save-cmd'].setAttribute('data-disabled', ''); 318 | } 319 | else { 320 | document.body.setAttribute('data-unsaved', ''); 321 | 322 | if (window.user) { 323 | window['save-cmd'].removeAttribute('data-disabled'); 324 | } 325 | } 326 | } 327 | }); 328 | 329 | var Dabblet = { 330 | version: '1.0.7', 331 | 332 | user: { 333 | login: function() { 334 | gist.oauth[0](function(user){ 335 | Dabblet.user.afterLogin(user); 336 | }); 337 | }, 338 | 339 | afterLogin: function(user){ 340 | var login = user.login; 341 | 342 | if (window.currentuser) { 343 | currentuser.innerHTML = gist.getUserHTML(user); 344 | currentuser.href = gist.getUserURL(user); 345 | currentuser.parentNode.className = currentuser.parentNode.className.replace('-inactive-', '-'); 346 | $('.my-profile').href = '/user/' + user.login; 347 | } 348 | 349 | if (window['save-button']) { 350 | window['save-button'].onclick = window['save-cmd'].onclick = gist.save; 351 | window['save-cmd'].removeAttribute('data-disabled'); 352 | window['save-new-cmd'].removeAttribute('data-disabled'); 353 | } 354 | }, 355 | 356 | logout: function() { 357 | if (confirm('Are you sure you want to log out?')) { 358 | localStorage.removeItem('access_token'); 359 | } 360 | } 361 | } 362 | }; 363 | 364 | window.ACCESS_TOKEN = localStorage['access_token']; 365 | 366 | currentuser.onclick = function(){ 367 | if (!this.hasAttribute('href')) { 368 | Dabblet.user.login(); 369 | } 370 | }; 371 | 372 | // Add loader to the page 373 | if (!$('#loader')) { 374 | $u.element.create('div', { 375 | properties: { id: 'loader' }, 376 | inside: 'body' 377 | }); 378 | } 379 | 380 | document.addEventListener('DOMContentLoaded', function() { 381 | if (ACCESS_TOKEN) { 382 | gist.getUser(function(user){ 383 | Dabblet.user.afterLogin(user); 384 | }); 385 | } 386 | }); 387 | 388 | (function() { 389 | 390 | // If only :focus and :checked bubbled... 391 | function ancestorClass(action, className, element) { 392 | var ancestor = element; 393 | 394 | do { 395 | ancestor = ancestor.parentNode; 396 | ancestor.classList[action](className); 397 | } while (ancestor && ancestor != document.body); 398 | } 399 | 400 | $u.event.bind('header a, header input, header button, header [tabindex="0"], pre', { 401 | focus: function(){ 402 | ancestorClass('add', 'focus', this); 403 | }, 404 | 405 | blur: function() { 406 | ancestorClass('remove', 'focus', this); 407 | } 408 | }); 409 | 410 | // Supports CORS? 411 | if (!('withCredentials' in new XMLHttpRequest)) { 412 | document.documentElement.classList.add('no-cors'); 413 | } 414 | 415 | })(); -------------------------------------------------------------------------------- /code/utopia.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Utopia: A JavaScript util library that assumes modern standards support and doesn't fix any browser bugs 3 | * @author Lea Verou (http://lea.verou.me) 4 | * MIT license (http://www.opensource.org/licenses/mit-license.php) 5 | * Last update: 2012-4-29 6 | */ 7 | 8 | function $(expr, con) { 9 | return typeof expr === 'string'? (con || document).querySelector(expr) : expr; 10 | } 11 | 12 | function $$(expr, con) { 13 | return Array.prototype.slice.call((con || document).querySelectorAll(expr)); 14 | } 15 | 16 | // Make each ID a global variable 17 | // Many browsers do this anyway (it’s in the HTML5 spec), so it ensures consistency 18 | $$('[id]').forEach(function(element) { window[element.id] = element; }); 19 | 20 | // Array#splice but for strings 21 | String.prototype.splice = function(i, remove, add) { 22 | remove = +remove || 0; 23 | add = add || ''; 24 | 25 | return this.slice(0,i) + add + this.slice(i + remove); 26 | }; 27 | 28 | (function(){ 29 | 30 | var _ = window.Utopia = { 31 | /** 32 | * Returns the [[Class]] of an object in lowercase (eg. array, date, regexp, string etc) 33 | * Caution: Results for DOM elements and collections aren't reliable. 34 | * @param {Object} obj 35 | * 36 | * @return {String} 37 | */ 38 | type: function(obj) { 39 | if(obj === null) { return 'null'; } 40 | 41 | if(obj === undefined) { return 'undefined'; } 42 | 43 | var ret = Object.prototype.toString.call(obj).match(/^\[object\s+(.*?)\]$/)[1]; 44 | 45 | ret = ret? ret.toLowerCase() : ''; 46 | 47 | if(ret == 'number' && isNaN(obj)) { 48 | return 'NaN'; 49 | } 50 | 51 | return ret; 52 | }, 53 | 54 | /** 55 | * Iterate over the properties of an object. Checks whether the properties actually belong to it. 56 | * Can be stopped if the function explicitly returns a value that isn't null, undefined or NaN. 57 | * 58 | * @param obj {Object} The object to iterate over 59 | * @param func {Function} The function used in the iteration. Can accept 2 parameters: one of the 60 | * value of the object and one for its name. 61 | * @param context {Object} Context for the above function. Default is the object being iterated. 62 | * 63 | * @return {Object} Null or the return value of func, if it broke the loop at some point. 64 | */ 65 | each: function(obj, func, context) { 66 | if(!_.type(func) == 'function') { 67 | throw Error('The second argument in Utopia.each() must be a function'); 68 | }; 69 | 70 | context = context || obj; 71 | 72 | for (var i in obj) { 73 | if(obj.hasOwnProperty && obj.hasOwnProperty(i)) { 74 | var ret = func.call(context, obj[i], i); 75 | 76 | if(!!ret || ret === 0 || ret === '') { 77 | return ret; 78 | } 79 | } 80 | } 81 | 82 | return null; 83 | }, 84 | 85 | /** 86 | * Copies the properties of one object onto another. 87 | * When there is a collision, the later one wins 88 | * 89 | * @return {Object} destination object 90 | */ 91 | merge: function(objects) { 92 | var ret = {}; 93 | 94 | for(var i=0; i .content { 21 | background: hsl(24, 20%, 95%) url(/img/noise.png); 22 | color: black; 23 | text-shadow: 0 1px white; 24 | box-shadow: 0 .1em .5em rgba(0,0,0,.8) inset; 25 | } 26 | 27 | .popup > .close, 28 | menu > .command:not([data-disabled]) { 29 | transition: .5s box-shadow; 30 | } 31 | 32 | .popup > .close:hover, 33 | menu > .command:not([data-disabled]):hover { 34 | background: rgba(0,0,0,.3); 35 | box-shadow: .05em .05em .25em black inset; 36 | } 37 | 38 | .popup > .close:active, 39 | menu > .command:not([data-disabled]):active { 40 | background: rgba(0,0,0,.4); 41 | box-shadow: .15em .15em .15em black inset; 42 | } 43 | 44 | /** 45 | * CSS rules that apply to both the dabblet app and subpages 46 | */ 47 | 48 | @font-face { 49 | font-family: 'Dabblet'; 50 | src: url(/img/dabblet.ttf); 51 | } 52 | 53 | @font-face { 54 | font-family: Primary; 55 | src: local('Baskerville'); 56 | } 57 | 58 | @keyframes bugfix { from { padding: 0; } to { padding: 0; } } 59 | 60 | * { 61 | margin: 0; 62 | padding: 0; 63 | } 64 | 65 | html { 66 | height: 100%; 67 | font: 100%/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 68 | } 69 | 70 | body { 71 | position: relative; 72 | height: 100%; 73 | border-top: 10px solid transparent; 74 | box-sizing: border-box; 75 | } 76 | 77 | a { 78 | color: inherit; 79 | text-decoration: none; 80 | } 81 | 82 | .button, 83 | button, 84 | .tab { 85 | padding: .45em .6em; 86 | border: 0; 87 | border-radius: .3em; 88 | color: inherit; 89 | font: inherit; 90 | text-align: center; 91 | text-decoration: none; 92 | cursor: pointer; 93 | text-shadow: inherit; 94 | } 95 | 96 | .button, 97 | button { 98 | float: left; 99 | border: 1px solid rgba(0,0,0,.4); 100 | margin: 0 .2em; 101 | background: url(/img/noise.png); 102 | white-space: nowrap; 103 | box-shadow: rgba(255, 255, 255, .4) 0 1px 0 inset, 104 | rgba(255, 255, 255, .3) 0 25px 30px -12px inset, 105 | rgba(0, 0, 0, .6) 0 1px 2px; 106 | } 107 | 108 | button.with-symbol, 109 | .button.with-symbol { 110 | font-family: Dabblet, sans-serif; 111 | font-weight: normal; 112 | } 113 | 114 | .button:hover, 115 | .button:active, 116 | button:hover, 117 | button:active, 118 | .tab:hover, 119 | .tab:active { 120 | background-color: black; 121 | } 122 | 123 | header ~ * button, 124 | header ~ * .button, 125 | header ~ button, 126 | header ~ .button { 127 | color: black; 128 | text-shadow: 0 1px 1px white; 129 | } 130 | 131 | header ~ * button:hover, 132 | header ~ * .button:hover, 133 | header ~ button:hover, 134 | header ~ .button:hover, 135 | header ~ * button:active, 136 | header ~ * .button:active, 137 | header ~ button:active, 138 | header ~ .button:active { 139 | color: white; 140 | text-shadow: 0 -1px 1px black, 0 -1px 2px black; 141 | } 142 | 143 | body > header { 144 | position: absolute; 145 | bottom: 100%; 146 | right: 0; 147 | left: 0; 148 | z-index: 10; 149 | padding: .4em .5em 0; 150 | border-bottom: 10px solid black; 151 | background: url(/img/noise.png), linear-gradient(hsl(200, 10%, 20%), hsla(200, 10%, 20%, .9)); 152 | color: white; 153 | line-height: 1.1; 154 | font-weight: bold; 155 | text-shadow: 0 -1px 1px black, 0 -1px 2px black; 156 | transition: .5s 1s transform; 157 | } 158 | 159 | body > header:hover, 160 | body > header:active, 161 | body > header.focus { 162 | transform: translateY(-10px) translateY(100%); 163 | transition-delay: 0s; 164 | } 165 | 166 | body > header > h1 { 167 | float: left; 168 | height: 1.3em; 169 | margin-right: .1em; 170 | font: 190%/1.6 Dabblet, sans-serif; 171 | text-shadow: .05em .05em .1em black; 172 | -webkit-transform: translateZ(0); /* fix for chopped letters */ 173 | } 174 | 175 | body > header > .with-dropdown { 176 | float: left; 177 | } 178 | 179 | .tabs input { 180 | position: absolute; 181 | z-index: 1; 182 | opacity: 0; 183 | } 184 | 185 | .tabs { 186 | display: inline-block; 187 | height: .75em; 188 | margin: 0 33px 0 -.5em; 189 | white-space: nowrap; 190 | font-size: 110%; 191 | line-height: 1.4; 192 | -webkit-font-smoothing: antialiased; /* fix for WebKit inconsistency */ 193 | -webkit-transform: translateZ(0); /* fix for unhoverable tabs */ 194 | } 195 | 196 | .controls-group { 197 | float: right; 198 | min-width: 15em; 199 | white-space: nowrap; 200 | } 201 | 202 | 203 | body[data-unsaved] button[title="Save"] { 204 | text-shadow: 0 0 .2em #6cf, 0 0 .4em #6cf; 205 | } 206 | 207 | header > .with-dropdown > button:after, 208 | header > .with-dropdown > .button:after { 209 | content: ' ▾'; 210 | } 211 | 212 | .button:active, 213 | button:active, 214 | input:checked + label.button { 215 | box-shadow: 0 2px 6px black inset; 216 | } 217 | 218 | input:checked + label.button { 219 | background-color: rgba(0,0,0,.3); 220 | } 221 | 222 | #currentuser { 223 | max-width: 12em; 224 | overflow: hidden; 225 | text-overflow: ellipsis; 226 | } 227 | 228 | .no-cors #currentuser { 229 | display: none; 230 | } 231 | 232 | @media (max-width: 1000px) { 233 | #currentuser { 234 | max-width: 8em; 235 | } 236 | } 237 | 238 | @media (max-width: 800px) { 239 | #currentuser { 240 | max-width: 3em; 241 | } 242 | } 243 | 244 | @media (max-width: 800px) and (min-width: 400px) { 245 | #currentuser { 246 | max-width: none; 247 | } 248 | } 249 | 250 | #currentuser:not(:hover) { 251 | background-color: transparent; 252 | } 253 | 254 | header .user > img { 255 | max-height: 1.4em; 256 | margin: -.2em .3em -.2em -1.6em; 257 | vertical-align:bottom; 258 | border-radius: 1px; 259 | box-shadow: 0 0 0 1px rgba(0,0,0,.2); 260 | } 261 | 262 | #currentuser > img { 263 | margin-left: -.3em; 264 | } 265 | 266 | a.button[href^="/help/"] { 267 | position: absolute; 268 | right: 3px; 269 | bottom: 5px; 270 | background-color: transparent; 271 | } 272 | 273 | @keyframes flip { 274 | from { transform: perspective(600px) rotate3d(1,0,0,180deg); } 275 | to { transform: perspective(600px) rotate3d(1,0,0, 0deg); } 276 | } 277 | 278 | .tab { 279 | position: relative; 280 | top: 0; 281 | display: inline-block; 282 | padding: .5em .6em; 283 | border: 0; 284 | margin: 0 0 -5px; 285 | background: rgba(0,0,0,.2); 286 | cursor: pointer; 287 | transform-origin: bottom; 288 | border-radius: 5px; 289 | box-shadow: .05em .1em .2em rgba(0,0,0,.7) inset; 290 | text-shadow: inherit; 291 | animation: flip .5s; 292 | } 293 | 294 | .tabs > input:checked + .tab, 295 | .tab.active { 296 | background: black; 297 | top: 2.5em; 298 | animation: flip .6s; 299 | transform-origin: top; 300 | } 301 | 302 | body[data-view="separate"] .tab .if-not-separate { 303 | display: none; 304 | } 305 | 306 | .tabs > label > .title { 307 | overflow: hidden; 308 | transition: 1s max-width; 309 | } 310 | 311 | .dropdown { 312 | display: none; 313 | position: absolute; 314 | z-index: 2; 315 | min-width: 12em; 316 | max-width: 400px; 317 | padding: .3em; 318 | margin: 2.2em 0 0 -1em; 319 | font-family: sans-serif; 320 | text-align: left; 321 | -webkit-transform: translateZ(0); /* fix for unhoverable dropdowns */ 322 | } 323 | 324 | /* pointer */ 325 | .dropdown:before { 326 | content: ''; 327 | position: absolute; 328 | z-index: -1; 329 | top: -6px; 330 | left: 2.5em; 331 | width: 12px; 332 | height: 12px; 333 | border: inherit; 334 | border-bottom-width:0; 335 | border-right-width:0; 336 | margin-left: -9px; 337 | background: url(/img/noise.png), linear-gradient(-45deg, hsl(200, 10%, 20%) 52%, hsla(200, 10%, 20%, 0) 55%); 338 | background-origin: border-box; 339 | transform: rotate(45deg); 340 | box-shadow: 1px 0 rgba(255,255,255,.3) inset; 341 | } 342 | 343 | .with-dropdown { 344 | padding-bottom: 3px; 345 | } 346 | 347 | .with-dropdown:hover > .dropdown, 348 | .with-dropdown.focus > .dropdown, 349 | .with-dropdown:active > .dropdown, 350 | .dropdown:hover, 351 | .dropdown:active, 352 | .dropdown.focus { 353 | display: block; 354 | } 355 | 356 | header fieldset { 357 | font-size: 90%; 358 | } 359 | 360 | header fieldset > legend { 361 | font-size: 110%; 362 | } 363 | 364 | #view > .segmented-control { 365 | margin: .1em 0 .8em; 366 | } 367 | 368 | #view label.font-size { 369 | margin: .5em; 370 | } 371 | 372 | #view label.font-size span { 373 | display: inline-block; 374 | vertical-align: middle; 375 | font: 100% 'Baskerville', 'Palatino Linotype', Palatino, serif; 376 | } 377 | 378 | #view label.font-size span:first-child { 379 | font-size: 50%; 380 | } 381 | 382 | #view label.font-size span:last-child { 383 | font-size: 200%; 384 | } 385 | 386 | #view label.font-size input { 387 | width: 220px; 388 | vertical-align: middle; 389 | } 390 | 391 | fieldset > label.checkbox { 392 | display: block; 393 | margin: .2em 0; 394 | font-weight: normal; 395 | } 396 | 397 | menu > .command { 398 | display: block; 399 | padding: .4em; 400 | border-radius: .3em; 401 | cursor: pointer; 402 | } 403 | 404 | menu > .command[data-disabled] { 405 | opacity: .5; 406 | cursor: not-allowed; 407 | } 408 | 409 | menu > .command:before { 410 | content: ''; 411 | display: inline-block; 412 | width: 1.4em; 413 | } 414 | 415 | menu > .command[data-keyboard]:after { 416 | content: attr(data-keyboard); 417 | float: right; 418 | opacity: .6; 419 | } 420 | 421 | menu > input:checked + label.command:before { 422 | content: '✔'; 423 | color: hsla(0,0%,100%,.5); 424 | } 425 | 426 | menu > hr { 427 | height: 2px; 428 | border: 0; 429 | margin: .1em 0; 430 | background: rgba(255,255,255,.5); 431 | background: linear-gradient(90deg, transparent, black 50%, transparent) top, 432 | linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5) 50%, rgba(255,255,255,0)) bottom; 433 | background-repeat: repeat-x; 434 | background-size: 100% 1px; 435 | } 436 | 437 | @keyframes loader { 438 | from { 439 | background-position: 0 0; 440 | } 441 | 442 | to { 443 | background-position: -700px 0; 444 | } 445 | } 446 | 447 | #loader { 448 | display: none; 449 | position: fixed; 450 | z-index: 100; 451 | top: 50%; 452 | left: 50%; 453 | width: 100px; 454 | padding-top: 100px; 455 | margin-top: -50px; 456 | margin-left: -50px; 457 | background: url(/img/loader.png) no-repeat left top; 458 | color: rgba(0,0,0,.5); 459 | font-weight: bold; 460 | text-align: center; 461 | text-shadow: 0 1px white; 462 | 463 | animation: loader 1s infinite steps(7); 464 | } 465 | 466 | body[data-loading] > #loader { 467 | display: block; 468 | } 469 | 470 | /** 471 | * Responsive shit 472 | */ 473 | @media (max-width: 400px) { 474 | html { 475 | font-size: 90%; 476 | } 477 | } 478 | 479 | @media (max-width: 620px) { 480 | header > .with-dropdown button:after { 481 | content: ''; 482 | content: none; 483 | } 484 | 485 | .dropdown { 486 | max-width: 200px; 487 | margin-left: -9em; 488 | } 489 | 490 | .dropdown:before { 491 | left: 10.5em; 492 | } 493 | 494 | .segmented-control > input[type="radio"] + label { 495 | padding: .1em .5em; 496 | font-size: .8em; 497 | } 498 | } 499 | 500 | @media (max-width: 800px) { 501 | html { 502 | font-size: 95%; 503 | } 504 | 505 | .controls-group { 506 | margin-top: .2em; 507 | } 508 | 509 | .tabs { 510 | height: 2.2em; 511 | } 512 | 513 | .popup { 514 | width: 290px; 515 | padding: .5em .5em 5em; 516 | margin-left: -145px; 517 | top: 2%; 518 | bottom: 2%; 519 | } 520 | } 521 | 522 | @media (min-width: 1000px) { 523 | .popup { 524 | width: 800px; 525 | margin-left: -400px; 526 | } 527 | 528 | .popup > .content > div { 529 | column-count: 2; 530 | column-gap: 2em; 531 | column-rule: 3px dotted slategray; 532 | column-fill: balance; 533 | } 534 | } 535 | 536 | /* Auto-hiding top bar */ 537 | @media (min-height: 600px) { 538 | body { 539 | border-top-width: 3.4em; 540 | } 541 | 542 | body > header, 543 | body > header:hover, 544 | body > header:active, 545 | body > header.focus { 546 | transform: none; 547 | } 548 | 549 | .tabs > input + label, 550 | .tabs > input:checked + .tab, 551 | .tab.active { 552 | animation: none; 553 | } 554 | 555 | .tabs > input:checked + .tab, 556 | .tab.active { 557 | top: 0; 558 | } 559 | } 560 | 561 | html.document > body { 562 | border-top-width: 3.4em; 563 | } 564 | 565 | html.document > body > header, 566 | html.document > body > header:hover, 567 | html.document > body > header:active, 568 | html.document > body > header.focus { 569 | position: fixed; 570 | transform: translateY(100%); 571 | } 572 | 573 | html.document .tabs > input + label, 574 | html.document .tabs > input:checked + .tab, 575 | html.document .tab.active { 576 | animation: none; 577 | } 578 | 579 | html.document .tabs > input:checked + .tab, 580 | html.document .tab.active { 581 | top: 0; 582 | } 583 | 584 | ::selection { 585 | background-color: hsla(24, 20%, 50%,.5); 586 | color: white; 587 | text-shadow: 0 -1px 1px hsl(24, 20%, 50%); 588 | } 589 | 590 | /** 591 | * Style scrollbars in Webkit 592 | * Warning: nonstandard CSS ahead 593 | */ 594 | ::-webkit-scrollbar { 595 | width: 20px; 596 | height: 20px; 597 | } 598 | 599 | section.page:not(.focus):not(:hover)::-webkit-scrollbar { 600 | display: none; 601 | } 602 | 603 | ::-webkit-scrollbar-track, 604 | ::-webkit-scrollbar-thumb { 605 | border-radius: 999px; 606 | border: 5px solid transparent; 607 | } 608 | 609 | ::-webkit-scrollbar-track { 610 | box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; 611 | } 612 | 613 | ::-webkit-scrollbar-thumb { 614 | min-height: 20px; 615 | background: url(/img/noise.png); 616 | background-clip: content-box; 617 | box-shadow: 0 0 0 5px hsla(24, 20%, 50%,.4) inset; 618 | } 619 | 620 | ::-webkit-scrollbar-corner { 621 | background: transparent; 622 | } -------------------------------------------------------------------------------- /code/dabblet.js: -------------------------------------------------------------------------------- 1 | window.Dabblet = $u.attach({ 2 | pages: { 3 | css: window['css-page'], 4 | html: window['html-page'], 5 | javascript: window['javascript-page'], 6 | result: result 7 | }, 8 | 9 | title: function(code) { 10 | return (code && code.match(/^\/\*[\s\*\r\n]+(.+?)($|\*\/)/m) || [, 'Untitled'])[1]; 11 | }, 12 | 13 | wipe: function() { 14 | var question = 'Are you sure? You will lose ' + 15 | (gist.saved? '' : 'unsaved changes and ') + 16 | 'your local draft.'; 17 | 18 | if (confirm(question)) { 19 | localStorage.removeItem('dabblet.css'); 20 | localStorage.removeItem('dabblet.html'); 21 | localStorage.removeItem('dabblet.js'); 22 | window.onbeforeunload = null; 23 | return true; 24 | } 25 | 26 | return false; 27 | }, 28 | 29 | get popup() { 30 | return popup.src; 31 | }, 32 | 33 | set popup(url) { 34 | if (url) { 35 | popup.src = url; 36 | popup.parentNode.style.display = 'block'; 37 | } 38 | else { 39 | popup.src = ''; 40 | popup.parentNode.style.display = ''; 41 | } 42 | }, 43 | 44 | validate: { 45 | HTML: function () { 46 | var code = '\n\n\n' + 47 | '\n' + 48 | '' + Dabblet.title(css.textContent) + '\n\n\n' + 49 | html.textContent + '\n\n'; 50 | 51 | var form = $u.element.create('form', { 52 | properties: { 53 | action: 'http://validator.w3.org/check', 54 | enctype: 'multipart/form-data', 55 | method: 'POST', 56 | target: '_blank' 57 | }, 58 | contents: { 59 | tag: 'textarea', 60 | properties: { 61 | name: 'fragment', 62 | value: code 63 | } 64 | } 65 | }); 66 | 67 | document.body.appendChild(form); 68 | form.submit(); 69 | document.body.removeChild(form); 70 | 71 | form = null; 72 | }, 73 | 74 | CSS: function () { 75 | var form = $u.element.create('form', { 76 | properties: { 77 | action: 'http://jigsaw.w3.org/css-validator/validator', 78 | method: 'POST', 79 | target: '_blank', 80 | enctype: 'multipart/form-data' 81 | }, 82 | contents: { 83 | tag: 'textarea', 84 | properties: { 85 | name: 'text', 86 | value: css.textContent 87 | } 88 | } 89 | }); 90 | 91 | document.body.appendChild(form); 92 | form.submit(); 93 | document.body.removeChild(form); 94 | 95 | form = null; 96 | } 97 | }, 98 | 99 | update: { 100 | CSS: function(code) { 101 | code = code || css.textContent; 102 | 103 | var title = Dabblet.title(code), 104 | raw = code.indexOf('{') > -1; 105 | 106 | result.contentWindow.postMessage(JSON.stringify({ 107 | action: 'title', 108 | data: title + ' ✿ Dabblet result' 109 | }), '*'); 110 | 111 | if (!raw) { 112 | code = 'html{' + code + '}'; 113 | } 114 | 115 | var prefixfree = !!Dabblet.settings.cached.prefixfree; 116 | 117 | result.contentWindow.postMessage(JSON.stringify({ 118 | action: 'css', 119 | data: prefixfree? StyleFix.fix(code, raw) : code 120 | }), '*'); 121 | }, 122 | 123 | HTML: function(code) { 124 | code = code || html.textContent; 125 | 126 | result.contentWindow.postMessage(JSON.stringify({ 127 | action: 'html', 128 | data: code 129 | }), '*'); 130 | 131 | Dabblet.update.JavaScript(); 132 | }, 133 | 134 | JavaScript: function(code) { 135 | code = code || javascript.textContent; 136 | 137 | result.contentWindow.postMessage(JSON.stringify({ 138 | action: 'javascript', 139 | data: code 140 | }), '*'); 141 | } 142 | }, 143 | 144 | settings: { 145 | cached: {}, 146 | 147 | handlers: { 148 | page: function(page) { 149 | var currentid = document.body.getAttribute('data-page'), 150 | current = window[currentid], 151 | input = window['page-' + page], 152 | pre = window[page] || css; 153 | 154 | if (currentid == page) { 155 | return; 156 | } 157 | 158 | if (current) { 159 | var ss = current.selectionStart, 160 | se = current.selectionEnd; 161 | 162 | ss && current.setAttribute('data-ss', ss); 163 | se && current.setAttribute('data-se', se); 164 | } 165 | 166 | if (input && input.value != page || input.checked === false) { 167 | input.click(); 168 | } 169 | 170 | document.body.setAttribute('data-page', page); 171 | 172 | self.Previewer && Previewer.hideAll(); 173 | 174 | if (!Dabblet.embedded) { 175 | pre.focus && pre.focus(); 176 | } 177 | 178 | var ss = pre.getAttribute('data-ss'), 179 | se = pre.getAttribute('data-se'); 180 | 181 | if ((ss || se) && pre.setSelectionRange) { 182 | setTimeout(function(){ 183 | pre.setSelectionRange(ss, se); 184 | }, 2); 185 | } 186 | }, 187 | 188 | fontsize: function(size) { 189 | size = size || 100; 190 | 191 | $$('.editor.page').forEach(function(editor) { 192 | editor.style.fontSize = size + '%'; 193 | }); 194 | }, 195 | 196 | prefixfree: function(enabled) { 197 | Dabblet.settings.cached.prefixfree = enabled; 198 | 199 | Dabblet.update.CSS(); 200 | } 201 | }, 202 | 203 | current: function(name, scope) { 204 | var settings = {}; 205 | 206 | var selector = 'input[data-scope' + 207 | (scope? '="' + scope + '"' : '') + ']' + 208 | (name? '[name="' + name + '"]' : ''); 209 | 210 | $$(selector).forEach(function(input){ 211 | var name = input.name, 212 | isToggle = input.type === 'radio' || input.type === 'checkbox'; 213 | 214 | if (!(name in settings)) { 215 | // Assign default value 216 | settings[name] = input.hasAttribute('checked') || !isToggle? input.value : ''; 217 | } 218 | 219 | if (isToggle) { 220 | if (input.checked) { 221 | settings[name] = input.value; 222 | } 223 | else if (input.type === 'checkbox') { 224 | settings[name] = ''; 225 | } 226 | } 227 | else { 228 | settings[name] = input.value; 229 | } 230 | }); 231 | 232 | return name? settings[name] : settings; 233 | }, 234 | 235 | apply: function() { 236 | var settings; 237 | 238 | if (arguments.length === 0) { 239 | settings = this.current(); 240 | } 241 | else if (arguments.length === 1) { 242 | settings = arguments[0]; 243 | } 244 | else { 245 | settings = {}; 246 | settings[arguments[0]] = arguments[1]; 247 | } 248 | 249 | for (var name in settings) { 250 | this.applyOne(name, settings[name]); 251 | } 252 | 253 | // Set body classes for each setting 254 | $$('input[data-scope]').forEach(function(input){ 255 | var name = input.name; 256 | 257 | if (input.type === 'radio') { 258 | (input.onclick = function(evt){ 259 | if (this.checked) { 260 | Dabblet.settings.applyOne(name, this.value); 261 | } 262 | }).call(input); 263 | } 264 | else if (input.type === 'checkbox') { 265 | (input.onclick = function(evt){ 266 | Dabblet.settings.applyOne(name, this.checked? this.value : ''); 267 | }).call(input); 268 | } 269 | else { 270 | (input['oninput' in input? 'oninput' : 'onclick'] = function(evt){ 271 | Dabblet.settings.applyOne(name, this.value); 272 | }).call(input); 273 | } 274 | }); 275 | 276 | // Update cached settings 277 | this.cached = this.current(); 278 | }, 279 | 280 | applyOne: function(name, value) { 281 | var current = this.current(name), 282 | controls = document.getElementsByName(name); 283 | 284 | for (var i=0; i a'); 363 | 364 | if (parent !== window) { 365 | Dabblet.embedded = true; 366 | document.body.setAttribute('data-embedded', ''); 367 | 368 | a.href = ''; 369 | a.target = '_blank'; 370 | a.title = 'Go to full page dabblet'; 371 | } 372 | else { 373 | a.onclick = Dabblet.wipe; 374 | a.title = 'New dabblet'; 375 | } 376 | 377 | var path = location.pathname.slice(1); 378 | 379 | if (path) { 380 | // Viewing a gist? 381 | var parts = path.match(/\bgist\/([\da-f]+)(?:\/([\da-f]+))?/i); 382 | if (parts) { 383 | if ('withCredentials' in new XMLHttpRequest) { 384 | gist.id = parts[1]; 385 | gist.rev = parts[2]; 386 | css.textContent = html.textContent = javascript.textContent = ''; 387 | gist.load(); 388 | } 389 | else { 390 | // CORS not supported, redirect to full page result (see #162) 391 | location.href = location.href.replace('://', '://result.'); 392 | } 393 | } 394 | } 395 | 396 | if (!gist.id) { 397 | if (!/\bpost\b/.test(document.body.className)) { 398 | if (typeof localStorage['dabblet.css'] === 'string') { 399 | css.textContent = localStorage['dabblet.css']; 400 | } 401 | 402 | if (typeof localStorage['dabblet.html'] === 'string') { 403 | html.textContent = localStorage['dabblet.html']; 404 | } 405 | 406 | if (typeof localStorage['dabblet.js'] === 'string') { 407 | javascript.textContent = localStorage['dabblet.js']; 408 | 409 | } 410 | } 411 | 412 | Dabblet.update.JavaScript(); 413 | 414 | if (typeof localStorage.settings === 'string') { 415 | Dabblet.settings.apply(JSON.parse(localStorage.settings)); 416 | } 417 | else { 418 | Dabblet.settings.apply(); 419 | } 420 | } 421 | }); 422 | 423 | $$('.editor.page > pre').forEach(function(editor){ 424 | new Editor(editor); 425 | 426 | $u.event.bind(editor, 'contentchange', function(evt) { 427 | var keyCode = evt.keyCode, 428 | id = this.id, 429 | code = this.textContent; 430 | 431 | if (id === 'css') { 432 | document.title = Dabblet.title(code) + ' ✿ dabblet.com'; 433 | 434 | Dabblet.update.CSS(code); 435 | } 436 | else if (id === 'html') { 437 | Dabblet.update.HTML(code); 438 | } 439 | 440 | if (keyCode) { 441 | gist.saved = false; 442 | 443 | if (id === 'javascript') { 444 | if (Dabblet.jserror) { 445 | Dabblet.jserror.className = ''; 446 | } 447 | } 448 | } 449 | }); 450 | 451 | $u.event.bind(editor.parentNode, 'click', function(evt) { 452 | $('pre', this).focus(); 453 | 454 | evt.stopPropagation(); 455 | }); 456 | 457 | $u.event.bind(editor, 'blur', function (evt) { 458 | if (!gist.saved) { 459 | // Save draft 460 | localStorage['dabblet.css'] = css.textContent; 461 | localStorage['dabblet.html'] = html.textContent; 462 | localStorage['dabblet.js'] = javascript.textContent; 463 | } 464 | }); 465 | }); 466 | 467 | // Note: Has to be keydown to be able to cancel the event 468 | document.addEventListener('keydown', function(evt) { 469 | var code = evt.keyCode, 470 | character = String.fromCharCode(code), 471 | cmdOrCtrl = evt.metaKey || evt.ctrlKey; 472 | 473 | if (cmdOrCtrl && !evt.altKey) { 474 | switch (character) { 475 | case 'S': 476 | gist.save(); 477 | evt.preventDefault(); 478 | return false; 479 | case 'N': 480 | if (Dabblet.wipe()) { 481 | location.pathname = '/'; 482 | } 483 | evt.preventDefault(); 484 | return false; 485 | case '1': 486 | var page = 'css'; 487 | break; 488 | case '2': 489 | var page = 'html'; 490 | break; 491 | case '3': 492 | var page = 'all'; 493 | break; 494 | case '4': 495 | var page = 'javascript'; 496 | break; 497 | case '5': 498 | var page = 'result'; 499 | break; 500 | } 501 | 502 | if (code == 13) { 503 | Dabblet.update.JavaScript(); 504 | evt.stopPropagation(); 505 | evt.preventDefault(); 506 | return false; 507 | } 508 | 509 | var currentPage = Dabblet.settings.current('page'); 510 | 511 | if (evt.shiftKey) { 512 | if (code === 219) { 513 | // Go to previous tab 514 | var page = ({ 515 | 'html': 'css', 516 | 'all': 'html', 517 | 'result': 'all' 518 | })[currentPage]; 519 | } 520 | else if (character === ']' || code === 221) { 521 | // Go to next tab 522 | var page = ({ 523 | 'css': 'html', 524 | 'html': 'all', 525 | 'all': 'result' 526 | })[currentPage]; 527 | } 528 | } 529 | 530 | if (page) { 531 | if (currentPage !== page) { 532 | Dabblet.settings.applyOne('page', page); 533 | 534 | evt.stopPropagation(); 535 | evt.preventDefault(); 536 | 537 | // Blur the focus so it doesn't end up on the result

57 | 58 | 59 | Follow 60 | Unfollow 61 | Edit your profile 62 |

dabblet

help

F.A.Q.

Where can I report bugs?

What about JavaScript?

Keyboard shortcuts

License

Press

57 | 58 | 59 | 60 | 61 | Edit your profile 62 |