Permalink
Browse files

Added full page result (server-side generated), added preference for …

…-prefix-free, converted favicon to ico
  • Loading branch information...
1 parent 1b54a9a commit dc9d3d0c1f9fe9eccb7b279b99642123dc4a4bd7 @LeaVerou committed Dec 20, 2011
Showing with 196 additions and 96 deletions.
  1. +108 −70 code/dabblet.js
  2. BIN favicon.ico
  3. +9 −1 index.html
  4. +0 −1 result.html
  5. +6 −0 result/.htaccess
  6. +41 −0 result/index.php
  7. +32 −24 style.css
View
178 code/dabblet.js
@@ -137,10 +137,7 @@ var gist = {
"content": htmlMarkup
} : null,
"settings.json": {
- "content": JSON.stringify({
- "page": document.body.getAttribute('data-page'),
- "view": document.body.getAttribute('data-view')
- })
+ "content": JSON.stringify(Dabblet.settings.current(null, 'file'))
}
}
}
@@ -241,6 +238,7 @@ var gist = {
$$('a[data-href*="{gist-id}"]').forEach(function(a) {
a.href = a.getAttribute('data-href').replace(/\{gist-id\}/gi, id);
a.removeAttribute('data-disabled');
+ a.removeAttribute('aria-hidden');
});
gist.saved = true;
@@ -415,45 +413,7 @@ UndoManager.prototype = {
var Dabblet = {
title: function(code) {
- return (code.match(/^\/\*[\s\*\r\n]+(.+?)($|\*\/)/m) || [,'Untitled'])[1];
- },
-
- goto: function(page) {
- var currentid = document.body.getAttribute('data-page'),
- current = window[currentid],
- input = window['page-' + page],
- pre = window[page];
-
- if(current == pre) {
- return;
- }
-
- if(current) {
- var ss = current.selectionStart,
- se = current.selectionEnd;
-
- ss && current.setAttribute('data-ss', ss);
- se && current.setAttribute('data-se', se);
- }
-
- if(input.value != page || input.checked === false) {
- input.click();
- }
-
- document.body.setAttribute('data-page', page);
-
- self.Previewer && Previewer.hideAll();
-
- pre.focus && pre.focus();
-
- var ss = pre.getAttribute('data-ss'),
- se = pre.getAttribute('data-se');
-
- if((ss || se) && pre.setSelectionRange) {
- setTimeout(function(){
- pre.setSelectionRange(ss, se);
- }, 2);
- }
+ return (code && code.match(/^\/\*[\s\*\r\n]+(.+?)($|\*\/)/m) || [,'Untitled'])[1];
},
wipe: function() {
@@ -480,6 +440,8 @@ var Dabblet = {
var style = result.contentWindow.style;
if(style) {
+ code = code || css.textContent;
+
var title = Dabblet.title(code),
raw = code.indexOf('{') > -1;
@@ -489,7 +451,9 @@ var Dabblet = {
code = 'html{' + code + '}';
}
- style.textContent = StyleFix.fix(code, raw);
+ var prefixfree = !!Dabblet.settings.cached.prefixfree;
+
+ style.textContent = prefixfree? StyleFix.fix(code, raw) : code;
}
},
@@ -674,13 +638,76 @@ var Dabblet = {
},
settings: {
- current: function(name) {
+ cached: {},
+
+ handlers: {
+ page: function(page) {
+ var currentid = document.body.getAttribute('data-page'),
+ current = window[currentid],
+ input = window['page-' + page],
+ pre = window[page];
+
+ if(current == pre) {
+ return;
+ }
+
+ if(current) {
+ var ss = current.selectionStart,
+ se = current.selectionEnd;
+
+ ss && current.setAttribute('data-ss', ss);
+ se && current.setAttribute('data-se', se);
+ }
+
+ if(input.value != page || input.checked === false) {
+ input.click();
+ }
+
+ document.body.setAttribute('data-page', page);
+
+ self.Previewer && Previewer.hideAll();
+
+ pre.focus && pre.focus();
+
+ var ss = pre.getAttribute('data-ss'),
+ se = pre.getAttribute('data-se');
+
+ if((ss || se) && pre.setSelectionRange) {
+ setTimeout(function(){
+ pre.setSelectionRange(ss, se);
+ }, 2);
+ }
+ },
+
+ prefixfree: function(enabled) {
+ Dabblet.settings.cached.prefixfree = enabled;
+
+ if(result.contentWindow.style) {
+ Dabblet.update.CSS();
+ }
+ }
+ },
+
+ current: function(name, scope) {
var settings = {};
- $$('input[data-scope]' + (name? '[name="' + name + '"]' : '')).forEach(function(input){
+ var selector = 'input[data-scope' +
+ (scope? '="' + scope + '"' : '') + ']' +
+ (name? '[name="' + name + '"]' : '');
+ $$(selector).forEach(function(input){
+ if(!(input.name in settings)) {
+ // Assign default value
+ if('checked' in input) {
+ settings[input.name] = input.hasAttribute('checked')? input.value : '';
+ }
+ }
+
if(!('checked' in input) || input.checked) {
- settings[input.name] = input.value;
+ settings[input.name] = input.value;
+ }
+ else if(input.type === 'checkbox') {
+ settings[input.name] = '';
}
});
@@ -710,16 +737,24 @@ var Dabblet = {
var name = input.name;
(input.onclick = function(evt){
- if(this.checked) {
- Dabblet.settings.applyOne(name, this.value);
-
- /*if(evt && this.getAttribute('data-scope')) {
- gist.saved = false;
- }*/
+ switch(this.type) {
+ case 'radio':
+ if(this.checked) {
+ Dabblet.settings.applyOne(name, this.value);
+ }
+ return;
+ case 'checkbox':
+ Dabblet.settings.applyOne(name, this.checked? this.value : '');
+ return;
+ default:
+ Dabblet.settings.applyOne(name, this.value);
+ return;
}
}).call(input);
});
+ // Update cached settings
+ this.cached = this.current();
},
applyOne: function(name, value) {
@@ -732,17 +767,8 @@ var Dabblet = {
control.checked = control.value == value;
}
- if(!gist.id) {
- var stored = localStorage.settings? JSON.parse(localStorage.settings) : {};
-
- if(!(name in stored) || stored[name] != value) {
- stored[name] = value;
- localStorage.settings = JSON.stringify(stored);
- }
- }
-
- if(name === 'page') {
- Dabblet.goto(value);
+ if(name in this.handlers) {
+ this.handlers[name](value);
}
else {
document.body.setAttribute('data-' + name, value);
@@ -755,6 +781,19 @@ var Dabblet = {
document.body.style.WebkitAnimation = '';
},1);
}
+
+ // Update localStorage if not in gist
+ if(!gist.id) {
+ var stored = localStorage.settings? JSON.parse(localStorage.settings) : {};
+
+ if(!(name in stored) || stored[name] != value) {
+ stored[name] = value;
+ localStorage.settings = JSON.stringify(stored);
+ }
+ }
+
+ // Update cached settings
+ this.cached[name] = value;
}
}
};
@@ -826,12 +865,7 @@ document.addEventListener('DOMContentLoaded', function() {
a.title = 'New dabblet';
}
- if(localStorage.settings) {
- Dabblet.settings.apply(JSON.parse(localStorage.settings));
- }
- else {
- Dabblet.settings.apply();
- }
+ Dabblet.settings.apply();
var path = location.pathname.slice(1);
@@ -851,6 +885,10 @@ document.addEventListener('DOMContentLoaded', function() {
if('dabblet.html' in localStorage) {
html.textContent = localStorage['dabblet.html'];
}
+
+ if(localStorage.settings) {
+ Dabblet.settings.apply(JSON.parse(localStorage.settings));
+ }
}
});
View
BIN favicon.ico
Binary file not shown.
View
10 index.html
@@ -8,7 +8,6 @@
<meta name="description" content="An interactive CSS playground and code sharing tool. Dabblet saves to Github gists and offers many conveniences for CSS editing." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
-<link rel="shortcut icon" href="/favicon.png" />
<link rel="stylesheet" href="/style.css" />
<script src="/code/prefixfree.min.js"></script>
@@ -41,6 +40,14 @@
<input type="radio" name="view" value="separate" id="view-separate" data-scope="file" />
<label for="view-separate" class="button" title="Separate">Separate</label>
</fieldset>
+
+ <fieldset>
+ <legend>Libraries</legend>
+ <label>
+ <input type="checkbox" name="prefixfree" value="1" data-scope="file" checked />
+ Use -prefix-free
+ </label>
+ </fieldset>
</form>
</div>
@@ -58,6 +65,7 @@
<hr />
<a data-href="https://gist.github.com/{gist-id}" target="_blank" class="command" data-disabled>View gist</a>
+ <a data-href="/result/gist/{gist-id}" class="command" target="_blank" aria-hidden="true">View full page result</a>
<a class="user command" target="_blank" aria-hidden="true" id="gist-user"></a>
</menu>
</div>
View
1 result.html
@@ -3,7 +3,6 @@
<head>
<title>Dabblet result</title>
<style></style>
-<script src="/code/prefixfree.min.js"></script>
</head>
<body>
</body>
View
6 result/.htaccess
@@ -0,0 +1,6 @@
+RewriteEngine On
+
+RewriteBase /
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . /result/index.php [L]
View
41 result/index.php
@@ -0,0 +1,41 @@
+<?php
+
+error_reporting(E_ALL);
+ini_set('display_errors', 1);
+
+$gist_id = $_SERVER['REQUEST_URI'];
+
+$gist_id = substr($gist_id, strrpos($gist_id, '/') + 1);
+
+if($gist_id) {
+ $raw = file_get_contents("https://api.github.com/gists/$gist_id");
+
+ if($raw) {
+ if(function_exists('json_decode')) {
@codler
codler added a line comment Dec 21, 2011

is it necessary to do that check?

@LeaVerou
Owner
LeaVerou added a line comment Dec 22, 2011

Not really, leftover from debugging when I wasn't sure PECL json was compiled with PHP in my server. But it doesn't really hurt anything, does it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ $data = json_decode($raw, true);
+ }
+ }
+}
+
+if(!$data || isset($data['message'])) {
+ die($data? $data['message'] : 'Not found, sorry! :(');
+}
+
+$settings = json_decode($data['files']['settings.json']['content'], true)
+
+//print_r($data)
+?><!DOCTYPE html>
+<html>
+<head>
+
+<meta charset="utf-8" />
+<title><?= $data['description'] ?></title>
+<style>
+<?= $data['files']['dabblet.css']['content'] ?>
+</style>
+<? if (!isset($settings['prefixfree']) || $settings['prefixfree']): ?>
+<script src="/code/prefixfree.min.js"></script>
+<? endif; ?>
+</head>
+<body><?= $data['files']['dabblet.html']['content'] ?></body>
+</html>
View
56 style.css
@@ -93,6 +93,10 @@ kbd[title] {
display: none !important;
}
+input:focus + label[for] {
+ outline: auto;
+}
+
@keyframes loader {
from {
background-position: 0 0;
@@ -301,11 +305,6 @@ header.focus {
background-color: rgba(0,0,0,.3);
}
- header input {
- position: absolute;
- clip: rect(0,0,0,0);
- }
-
#currentuser {
max-width: 8em;
overflow: hidden;
@@ -318,8 +317,10 @@ header.focus {
.user > img {
max-height: 1.4em;
- margin: -.2em .3em -.2em 0;
+ margin: -.2em .3em -.2em -1.6em;
vertical-align:bottom;
+ border-radius: 1px;
+ box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
#currentuser > img {
@@ -331,14 +332,10 @@ header.focus {
background-color: transparent;
}
- @keyframes flip {
- from {
- transform: perspective(600px) rotate3d(1,0,0,180deg);
- }
-
- to {
- transform: perspective(600px) rotate3d(1,0,0,0deg);
- }
+ #view > input,
+ .tabs > input {
+ position: absolute;
+ clip: rect(0,0,0,0);
}
.tabs > label {
@@ -352,17 +349,23 @@ header.focus {
box-shadow: .05em .1em .25em rgba(0,0,0,.7) inset;
}
+ @keyframes flip {
+ from {
+ transform: perspective(600px) rotate3d(1,0,0,180deg);
+ }
+
+ to {
+ transform: perspective(600px) rotate3d(1,0,0,0deg);
+ }
+ }
+
.tabs > input:checked + label {
background: black;
top: 2.5em;
border-radius: 0 0 .3em .3em;
animation: 1s flip;
}
- input:focus + label[for] {
- outline: auto;
- }
-
header .button:hover,
header .button:active,
header button:hover,
@@ -397,15 +400,15 @@ header.focus {
display: block;
}
- #view label {
+ #view > label {
width: 10em;
margin: .15em;
overflow: hidden;
text-align: left;
line-height: 25px;
}
- #view label:before {
+ #view > label:before {
content: '';
float: left;
width: 25px;
@@ -414,17 +417,22 @@ header.focus {
background: url(img/settings.png);
}
- #view label[for="view-split"]:before {
+ #view > label[for="view-split"]:before {
background-position: 0 -25px;
}
- #view label[for="view-split-vertical"]:before {
+ #view > label[for="view-split-vertical"]:before {
background-position: 0 -50px;
}
- #view label[for="view-separate"]:before {
+ #view > label[for="view-separate"]:before {
background-position: 0 -75px;
}
+
+ fieldset:not([id]) > label {
+ font-weight: normal;
+ font-size: 90%;
+ }
menu > .command {
display: block;
@@ -441,7 +449,7 @@ header.focus {
menu > .command:before {
content: '';
display: inline-block;
- width: 1.2em;
+ width: 1.4em;
}
menu > .command[data-keyboard]:after {

0 comments on commit dc9d3d0

Please sign in to comment.