feat(demo): Add more demos !

angular-ui · Dec 14, 2013 · 5a2be00 · 5a2be00
1 parent 28a4369
commit 5a2be00
Show file tree

Hide file tree

Showing 4 changed files with 203 additions and 6 deletions.
diff --git a/demo/demo.css b/demo/demo.css
@@ -1,3 +1,11 @@
 .ace_editor {
- min-height: 200px;
-}
+ height: 180px;
+}
+
+#demo-general .ace_editor {
+ height: 250px;
+}
+
+#demo-mode-changing .ace_editor {
+ height: 300px;
+}
diff --git a/demo/demo.html b/demo/demo.html
@@ -1,6 +1,8 @@
 <section id="aces" ng-app="doc.ui-ace">
 
- <div class="row">
+<!-- =Minimal code
+----------------------------------------------------------------------------->
+<div class="row">
  <div class="span12">
  <div class="page-header">
  <h1>Minimal code</h1>
@@ -36,7 +38,7 @@ <h1>Minimal code</h1>
  <tab heading="CSS">
  <div plunker-content="css">
 <pre class="prettyprint">.ace_editor {
- min-height : 200px;
+ height : 200px;
 }
 </pre>
  </div>
@@ -48,4 +50,160 @@ <h1>Minimal code</h1>
  </div>
 
 
+<!-- =General options demo
+----------------------------------------------------------------------------->
+<div id="demo-general" class="row">
+ <div class="span12">
+ <div class="page-header">
+ <h1>General options</h1>
+ </div>
+ <div class="row">
+ <div class="span6">
+ <div>
+ <div ui-ace="{
+ useWrapMode : true,
+ showGutter: false,
+ theme:'twilight',
+ mode: 'markdown'
+ }"># Theme and mode
+
+ *Lorem ipsum* dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </div>
+ </div>
+ </div>
+
+ <div class="span6" ng-controller="PlunkerCtrl"
+ ng-init="
+vendor_js=['https://rawgithub.com/ajaxorg/ace-builds/v1.1.1/src-min-noconflict/ace.js'];
+ "
+ >
+ <div class="pull-right">
+ <button class="btn btn-info" ng-click="edit('1.0.7', 'UI.Ace', 'ui-ace')"><i
+ class="icon-edit icon-white"></i> Edit in plunker
+ </button>
+ </div>
+
+ <tabset>
+ <tab heading="Markup">
+ <div plunker-content="markup">
+<pre class="prettyprint">&lt;section&gt;
+ &lt;div ui-ace=&quot;{
+ useWrapMode : true,
+ showGutter: false,
+ theme:'twilight',
+ mode: 'markdown'
+ }&quot; &gt;# Theme and mode
+
+*Lorem ipsum* dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/div&gt;
+
+&lt;/section&gt;</pre>
+ </div>
+ </tab>
+ <tab heading="CSS">
+ <div plunker-content="css">
+<pre class="prettyprint">.ace_editor {
+ height : 200px;
+}
+</pre>
+ </div>
+ </tab>
+ </tabset>
+ </div>
+ </div>
+ </div>
+</div>
+
+<!-- =Mode-Changing demo
+----------------------------------------------------------------------------->
+<div id="demo-mode-changing" class="row">
+ <div class="span12" ng-controller="AceCtrl">
+ <div class="page-header">
+ <h1>Mode-Changing demo</h1>
+ </div>
+ <div>
+ <div ui-ace="aceOption" ng-model="aceModel">Ace here</div>
+ </div>
+ Mode : <select ng-model="mode" ng-options="m for m in modes" ng-change="modeChanged()">
+ </select>
+ </div>
+
+
+ <div class="span12" ng-controller="PlunkerCtrl"
+ ng-init="
+vendor_js=['https://rawgithub.com/ajaxorg/ace-builds/v1.1.1/src-min-noconflict/ace.js'];
+ "
+ >
+ <div class="pull-right">
+ <button class="btn btn-info" ng-click="edit('1.0.7', 'UI.Ace', 'ui-ace')"><i
+ class="icon-edit icon-white"></i> Edit in plunker
+ </button>
+ </div>
+
+ <tabset>
+ <tab heading="Markup">
+ <div plunker-content="markup">
+<pre class="prettyprint">&lt;section ng-controller=&quot;AceCtrl&quot;&gt;
+
+ &lt;div ui-ace=&quot;aceOption&quot; ng-model=&quot;aceModel&quot;&gt;&lt;/div&gt;
+
+ &lt;select ng-model=&quot;mode&quot; ng-options=&quot;m for m in modes&quot; ng-change=&quot;modeChanged()&quot;&gt;&lt;/select&gt;
+
+&lt;/section&gt;</pre>
+ </div>
+ </tab>
+ <tab heading="JavaScript">
+ <div plunker-content="javascript">
+<pre class="prettyprint">function AceCtrl($scope) {
+// The modes
+ $scope.modes = [&#39;Scheme&#39;, &#39;XML&#39;, &#39;Javascript&#39;];
+ $scope.mode = $scope.modes[0];
+
+
+ // The ui-ace option
+ $scope.aceOption = {
+ mode: $scope.mode.toLowerCase(),
+ onLoad: function (_ace) {
+
+ // HACK to have the ace instance in the scope...
+ $scope.modeChanged = function () {
+ _ace.getSession().setMode(&quot;ace/mode/&quot; + $scope.mode.toLowerCase());
+ };
+
+ }
+ };
+
+ // Initial code content...
+ $scope.aceModel = &#39;;; Scheme code in here.\n&#39; +
+ &#39;(define (double x)\n\t(* x x))\n\n\n&#39; +
+ &#39;&lt;!-- XML code in here. --&gt;\n&#39; +
+ &#39;&lt;root&gt;\n\t&lt;foo&gt;\n\t&lt;/foo&gt;\n\t&lt;bar/&gt;\n&lt;/root&gt;\n\n\n&#39; +
+ &#39;// Javascript code in here.\n&#39; +
+ &#39;function foo(msg) {\n\tvar r = Math.random();\n\treturn &quot;&quot; + r + &quot; : &quot; + msg;\n}&#39;;
+
+}</pre>
+ </div>
+ </tab>
+ <tab heading="CSS">
+ <div plunker-content="css">
+<pre class="prettyprint">.ace_editor {
+ height : 300px;
+}
+</pre>
+ </div>
+ </tab>
+ </tabset>
+ </div>
+</div>
+
+
 </section>
diff --git a/demo/demo.js b/demo/demo.js
@@ -1,5 +1,31 @@
 angular.module('doc.ui-ace', ['ui.ace', 'prettifyDirective', 'ui.bootstrap', 'plunker'])
  .controller('AceCtrl', ['$scope', function ($scope) {
- $scope.aceModel = "Ace Hello World";
+
+ // The modes
+ $scope.modes = ['Scheme', 'XML', 'Javascript'];
+ $scope.mode = $scope.modes[0];
+
+
+ // The ui-ace option
+ $scope.aceOption = {
+ mode: $scope.mode.toLowerCase(),
+ onLoad: function (_ace) {
+
+ // HACK to have the ace instance in the scope...
+ $scope.modeChanged = function () {
+ _ace.getSession().setMode("ace/mode/" + $scope.mode.toLowerCase());
+ };
+
+ }
+ };
+
+ // Initial code content...
+ $scope.aceModel = ';; Scheme code in here.\n' +
+ '(define (double x)\n\t(* x x))\n\n\n' +
+ '<!-- XML code in here. -->\n' +
+ '<root>\n\t<foo>\n\t</foo>\n\t<bar/>\n</root>\n\n\n' +
+ '// Javascript code in here.\n' +
+ 'function foo(msg) {\n\tvar r = Math.random();\n\treturn "" + r + " : " + msg;\n}';
+
  }])
 ;
diff --git a/gruntFile.js b/gruntFile.js
@@ -97,7 +97,12 @@ module.exports = function (grunt) {
  {src: ['demo/demo.css'], dest: '<%= dist %>/assets/css/demo.css'}
  ]
  .concat(
- _.map(js_dependencies, function (f) {
+ _.map(js_dependencies.concat([
+ '<%= bower %>/ace-builds/src-min-noconflict/theme-twilight.js',
+ '<%= bower %>/ace-builds/src-min-noconflict/mode-markdown.js',
+ '<%= bower %>/ace-builds/src-min-noconflict/mode-scheme.js',
+ '<%= bower %>/ace-builds/src-min-noconflict/worker-javascript.js'
+ ]), function (f) {
  return {src: [f], dest: '<%= dist %>/' + f, filter: 'isFile'};
  }))
  }