Skip to content

Instantly share code, notes, and snippets.

@trashhalo

trashhalo/index.html

Last active December 31, 2015 14:29
Show Gist options
  • Save trashhalo/8000438 to your computer and use it in GitHub Desktop.
Save trashhalo/8000438 to your computer and use it in GitHub Desktop.
Download ZIP
code playground
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/hint/javascript-hint.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/javascript/javascript.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/edit/matchbrackets.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/display/fullscreen.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.2.5/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.2.5/angular-resource.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.5/mousetrap.min.js"></script>
<script src="playground.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/display/fullscreen.css">
<link rel="stylesheet" type="text/css" href="playground.css">
<meta charset="utf8" />
</head>
<body>
<div class="container" ng-app="pg.app" ng-view>
<script type="text/ng-template" id="gist.html">
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="runCode()">Run Script</button>
<button type="button" class="btn btn-default" ng-click="clearOutput()">Clear Output</button>
<button type="button" class="btn btn-default" ng-click="zen()">Zen Mode</button>
</div>
<div id="source" class="row"></div>
<div id="output" class="row well"></div>
</script>
</div>
</body>
</html>
Raw
playground.css
.btn-group{
margin-top: 5px;
margin-bottom: 15px;
}
#source{
border:1px solid #CCC;
margin-bottom: 15px;
}
Raw
playground.js
(function($) {
console.log = function (msg) {
var outputEl = $('#output');
if (typeof msg === "string") {
outputEl.append("<p>" + msg + "</p>");
} else if (typeof msg === "object") {
outputEl.append("<pre>" + JSON.stringify(msg) + "</pre>");
}
};
var gistCtrl = function ($scope, $routeParams, $resource) {
var Gist = $resource('https://api.github.com/gists/:id', {}, {
get: {
method: 'JSONP',
params: {
callback: 'JSON_CALLBACK'
},
isArray: false
}
});
var sourceMirror;
var disableFullScreen = function(){
sourceMirror.setOption('fullScreen', false);
};
sourceMirror = CodeMirror($('#source').get(0), {
'lineNumbers': true,
'fixedGutter': true,
'matchBrackets': true,
'mode': 'javascript',
'readOnly': false,
extraKeys:{
"Esc": disableFullScreen
}
});
var outputEl = $('#output');
sourceMirror.on("change", function () {
localStorage.codeSave = sourceMirror.getDoc().getValue();
});
$scope.runCode = function () {
var script = $("<script type='text/javascript'>");
script.html(sourceMirror.getDoc().getValue());
$('head').append(script);
};
$scope.clearOutput = function () {
outputEl.html("");
};
$scope.zen = function (){
sourceMirror.setOption('fullScreen',true);
};
if ($routeParams.id) {
Gist.get({
id: $routeParams.id
}, function (data) {
$scope.gist = data.data;
var findJsFiles = function (key) {
return (data.data.files[key].type === "application/javascript");
};
var addJsFilesToEditor = function (key, i) {
sourceMirror.getDoc().setValue(sourceMirror.getDoc().getValue()
+ (i>0?"\n":"")
+ "// " + data.data.files[key].filename + "\n"
+ data.data.files[key].content);
};
var jsFiles = jQuery.grep(Object.keys(data.data.files), findJsFiles);
angular.forEach(jsFiles, addJsFilesToEditor);
});
}else if(localStorage.codeSave){
sourceMirror.getDoc().setValue(localStorage.codeSave);
}else{
sourceMirror.getDoc().setValue("console.log('Hello World');");
}
Mousetrap.bind('esc', disableFullScreen);
Mousetrap.bind('command+r', function(e){
$scope.$apply(function(){
e.preventDefault();
$scope.runCode();
});
});
Mousetrap.bind('command+k', function(e){
$scope.$apply(function(){
e.preventDefault();
$scope.clearOutput();
});
});
};
var createCtrlModule = angular.module('pg.gistCtrl', ['ngRoute', 'ngResource']).controller('gistCtrl', gistCtrl);
var appModule = angular.module('pg.app', ['ngRoute', 'pg.gistCtrl']);
appModule.config(function($routeProvider) {
$routeProvider.
when('/gist/:id?', {
templateUrl: 'gist.html',
controller: gistCtrl
}).
otherwise({
redirectTo: '/gist'
});
});
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment