<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Ace Editor</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
transition: color 0.15s, background 0.15s;
}
body, html {
height: 20%;
overflow: hidden;
}
nav {
position: fixed;
background: black;
color: white;
height: 50px;
width: 100%;
}
.editor {
height: 100%;
width: 100%;
position: fixed;
z-index: 0;
}
.editor iframe {
position: fixed;
z-index: 0;
width: 100%;
height: 100%;
border: none;
}
.editor .ace_editor {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
}
.editor .ace_editor .ace_scrollbar-v {
display: none;
}
.dg.ac {
position: fixed;
z-index: 5;
}
.dg .c select {
color: #000;
}
.split .editor iframe {
width: 50%;
right: 0;
}
.split .editor .ace_editor {
left: 0;
width: 50%;
opacity: 1 !important;
}
.split .editor .dg.ac {
left: 50%;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<body ng-app="app" ng-controller="ctrl" ng-class="{'split':editor.splitMode}">
<div class="editor">
<iframe src="https://rawgit.com/mrdoob/three.js/master/examples/webgl_lines_dashed.html"></iframe>
<div ng-style="{opacity:editor.opacity*.01}" ui-ace="{
useWrapMode : editor.useWrapMode,
showGutter: editor.gutter,
theme:editor.theme,
mode: editor.mode,
onLoad: aceLoaded,
onChange: aceChanged
}" ng-model='value'>
</div>
</div>
</body>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
<script src='https://ace.c9.io/build/src-min-noconflict/ace.js'></script>
<script src='https://angular-ui.github.io/ui-ace/dist/ui-ace.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script>
<script id="rendered-js" >
angular.module('app', ['ui.ace']).
controller('ctrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
var themes = [
"chrome",
"clouds",
"crimson_editor",
"dawn",
"dreamweaver",
"eclipse",
"github",
"solarized_light",
"textmate",
"tomorrow",
"xcode",
"kuroir",
"katzenmilch",
"ambiance",
"chaos",
"clouds_midnight",
"cobalt",
"idle_fingers",
"kr_theme",
"merbivore",
"merbivore_soft",
"mono_industrial",
"monokai",
"pastel_on_dark",
"solarized_dark",
"terminal",
"tomorrow_night",
"tomorrow_night_blue",
"tomorrow_night_bright",
"tomorrow_night_eighties",
"twilight",
"vibrant_ink"];
$scope.currentTheme = 14;
var modes = [
'abap',
'actionscript',
'ada',
'apache_conf',
'asciidoc',
'assembly_x86',
'autohotkey',
'batchfile',
'c9search',
'c_cpp',
'cirru',
'clojure',
'cobol',
'coffee',
'coldfusion',
'csharp',
'css',
'curly',
'd',
'dart',
'diff',
'dockerfile',
'dot',
'dummy',
'dummysyntax',
'eiffel',
'ejs',
'elixir',
'elm',
'erlang',
'forth',
'ftl',
'gcode',
'gherkin',
'gitignore',
'glsl',
'golang',
'groovy',
'haml',
'handlebars',
'haskell',
'haxe',
'html',
'html_ruby',
'ini',
'io',
'jack',
'jade',
'java',
'javascript',
'json',
'jsoniq',
'jsp',
'jsx',
'julia',
'latex',
'less',
'liquid',
'lisp',
'livescript',
'logiql',
'lsl',
'lua',
'luapage',
'lucene',
'makefile',
'markdown',
'matlab',
'mel',
'mushcode',
'mysql',
'nix',
'objectivec',
'ocaml',
'pascal',
'perl',
'pgsql',
'php',
'powershell',
'praat',
'prolog',
'properties',
'protobuf',
'python',
'r',
'rdoc',
'rhtml',
'ruby',
'rust',
'sass',
'scad',
'scala',
'scheme',
'scss',
'sh',
'sjs',
'smarty',
'snippets',
'soy_template',
'space',
'sql',
'stylus',
'svg',
'tcl',
'tex',
'text',
'textile',
'toml',
'twig',
'typescript',
'vala',
'vbscript',
'velocity',
'verilog',
'vhdl',
'xml',
'xquery',
'yaml'];
$scope.value = '<html>';
$http.get('https://rawgit.com/mrdoob/three.js/master/examples/webgl_lines_dashed.html').
success(function (data, status, headers, config) {
$scope.value = data;
}).
error(function (data, status, headers, config) {
$scope.value = data;
});
$scope.aceLoaded = function (_editor) {
_editor.setFontSize(14);
};
$scope.aceChanged = function (_editor) {
};
var editor = function () {
this.theme = themes[$scope.currentTheme];
this.mode = 'html';
this.opacity = 65;
this.useWrapMode = true;
this.gutter = true;
this.splitMode = false;
this.themeCycle = true;
};
$scope.editor = new editor();
var gui = new dat.GUI();
var opacityCtrl = gui.add($scope.editor, 'opacity', 0, 100);
opacityCtrl.onChange(function (value) {
$scope.$apply();
});
var themeCycle = gui.add($scope.editor, 'themeCycle', true);
themeCycle.onChange(function (value) {
$scope.$apply();
});
var themeController = gui.add($scope.editor, 'theme', themes).listen();
themeController.onChange(function (value) {
$scope.$apply();
});
var modeController = gui.add($scope.editor, 'mode', modes);
modeController.onChange(function (value) {
$scope.$apply();
});
var useWrapModeCtrl = gui.add($scope.editor, 'useWrapMode', true);
useWrapModeCtrl.onChange(function (value) {
$scope.$apply();
});
var gutterCtrl = gui.add($scope.editor, 'gutter', false);
gutterCtrl.onChange(function (value) {
$scope.$apply();
});
var splitMode = gui.add($scope.editor, 'splitMode', false);
splitMode.onChange(function (value) {
$scope.$apply();
});
var themeCycle = function () {
$timeout(function () {
if ($scope.editor.themeCycle) {
$scope.currentTheme = $scope.currentTheme + 1;
if ($scope.currentTheme < themes.length) {
$scope.editor.theme = themes[$scope.currentTheme];
} else {
$scope.currentTheme = 0;
$scope.editor.theme = themes[$scope.currentTheme];
}
}
themeCycle();
}, 500);
};
}]);
</script>
</body>
</html>
Comments
Post a Comment