Skip to content

Instantly share code, notes, and snippets.

@subtleGradient

subtleGradient/dabblet.css

Forked from anonymous/dabblet.css
Last active August 29, 2015 14:08
Show Gist options
  • Save subtleGradient/5da0c1a18cd77c86db11 to your computer and use it in GitHub Desktop.
Save subtleGradient/5da0c1a18cd77c86db11 to your computer and use it in GitHub Desktop.
Download ZIP
SixteenColors Prototype
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
Raw
dabblet.html
<style>
html,body{
background:#000;
color:#AAA;
text-align:center;
}
@font-face {
font-family: '8x16';
src: url('http://sixteencolors.net/static/font/8x16.eot');
src: local('☺'),url('http://sixteencolors.net/static/font/8x16.woff') format('woff'),url('http://sixteencolors.net/static/font/8x16.ttf') format('truetype'),url('http://sixteencolors.net/static/font/8x16.svg#webfontpVS4iJcr') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: '8x16';
}
hr{
height:8px;
background-color:#555;
border:0;
margin: 24px 0px 16px 0px;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.3/es5-shim.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.18.0/es6-shim.min.js"></script>
<script src="http://fb.me/react-0.12.0-rc1.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0-rc1.js"></script>
<div id="SixteenColorsPackRoot"></div>
<script type="text/jsx;harmony=true">
var jsonp = {
UID: 0,
get(url, callback, callbackId){
var sibling = document.getElementsByTagName('script')[0];
var script = document.createElement('script');
if (jsonp.UID == null) jsonp.UID = 0;
if (!callbackId) callbackId = 'jsonp_' + (++ jsonp.UID);
var done = (error, data) => {
if (done == null) return;
script.parentNode.removeChild(script);
script = sibling = null;
done = null;
window[callbackId] = null;
var _callback = callback;
callback = null;
_callback(error, data);
};
window[callbackId] = data => done(null, data);
script.src = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + callbackId;
console.log(script.src);
script.onerror = done;
script.onload = done;
sibling.parentNode.insertBefore(script, sibling);
},
getPromise(url){
return new Promise(function(resolve, reject) {
jsonp.get(url, function(error, data){
if (error) {
reject(error);
return;
}
resolve(data);
});
});
},
};
var SixteenColorsPack = React.createClass({
// mixins: [],
// statics: {},
propTypes: {
base: React.PropTypes.string,
pack: React.PropTypes.string.isRequired,
},
getDefaultProps() {
return {
base: 'http://sixteencolors.net',
};
},
getInitialState() {
return {
pack: null,
};
},
componentWillMount() {
jsonp.getPromise('http://api.sixteencolors.net/v0/pack/' + this.props.pack)
.then(pack => {
pack.files = pack.files.sort((a,b) => {
a = a.filename.toUpperCase();
b = b.filename.toUpperCase();
if (a == 'file_id.diz') return -Infinity;
if (b == 'file_id.diz') return Infinity;
return a>b ? 1 : a==b ? 0 : -1;
});
this.setState({pack});
})
.catch(error => this.setState({error}))
;
},
// componentDidMount() {},
// componentWillUnmount() {},
render() {
return (
<div onClick={toggleFullScreen} onDoubleClick={autoScroll}>
{this.state.pack && this.state.pack.files.map(file => (
<div>
<p>{file.filename}</p>
<img src={this.props.base + file.fullsize}/>
<hr/>
</div>
))}
</div>
);
},
// componentWillReceiveProps(nextProps) {},
// shouldComponentUpdate(nextProps, nextState) {
// return true;
// },
// componentWillUpdate(nextProps, nextState) {},
// componentDidUpdate(prevProps, prevState) {},
});
function autoScroll(){
requestAnimationFrame
}
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
React.render(
<div>
<SixteenColorsPack pack="blocktronics_1010" />
<SixteenColorsPack pack="blocktronics_blockalypse" />
<SixteenColorsPack pack="blocktronics_wtf4" />
<SixteenColorsPack pack="blocktronics_1980" />
</div>,
document.getElementById('SixteenColorsPackRoot')
);
</script>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"result"}
@subtleGradient
Copy link
Author

http://result.dabblet.com/gist/5da0c1a18cd77c86db11/33f6b4c66e7d2db4fad6d5d78b4805154b16aae8

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment