From 2da07127e45312ce22d894aa771b8797e9a301a1 Mon Sep 17 00:00:00 2001 From: Vojta Jina Date: Tue, 24 May 2011 00:49:33 +0200 Subject: Add doc:tutorial-instructions widget --- docs/src/ngdoc.js | 27 +++++++++---- docs/src/templates/doc_widgets.css | 51 ++++++++++++++++++++++++ docs/src/templates/doc_widgets.js | 82 ++++++++++++++++++++++++++++++++++++++ docs/src/templates/docs.js | 18 +++++++++ 4 files changed, 170 insertions(+), 8 deletions(-) (limited to 'docs/src') diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js index fa3fbdac..61ac6f78 100644 --- a/docs/src/ngdoc.js +++ b/docs/src/ngdoc.js @@ -78,16 +78,27 @@ Doc.prototype = { }, markdown: function (text) { - var self = this; - var IS_URL = /^(https?:\/\/|ftps?:\/\/|mailto:|\.|\/)/; - var IS_ANGULAR = /^angular\./; if (!text) return text; - text = trim(text); + var self = this, + IS_URL = /^(https?:\/\/|ftps?:\/\/|mailto:|\.|\/)/, + IS_ANGULAR = /^angular\./, + parts = trim(text).split(/(
[\s\S]*?<\/pre>|[\s\S]*?<\/doc:\2>)/);
+
+    parts.forEach(function(text, i) {
+
+      function isDocWidget(name) {
+        if ((i + 1) % 3 != 2) return false;
+        if (name) return parts[i+1] == name;
+        return !!parts[i+1];
+      }
 
-    var parts = text.split(/(
[\s\S]*?<\/pre>|[\s\S]*?<\/doc:example>)/);
+      // ignore each third item which is doc widget tag
+      if (!((i + 1) % 3)) {
+        parts[i] = '';
+        return;
+      }
 
-    parts.forEach(function(text, i){
       if (text.match(/^
/)) {
         text = text.replace(/^
([\s\S]*)<\/pre>/mi, function(_, content){
           var clazz = 'brush: js;';
@@ -99,7 +110,7 @@ Doc.prototype = {
                   content.replace(//g, '>') +
                  '
';
         });
-      } else if (text.match(/^/)) {
+      } else if (isDocWidget('example')) {
         text = text.replace(/()([\s\S]*)(<\/doc:source>)/mi,
           function(_, before, content, after){
             return '
' + htmlEscape(content) + '
';
@@ -109,7 +120,7 @@ Doc.prototype = {
             self.scenarios.push(content);
             return '
' + htmlEscape(content) + '
';
           });
-      } else {
+      } else if (!isDocWidget()) {
         text = text.replace(//gm, '<angular/>');
         text = text.replace(/{@link\s+([^\s}]+)\s*([^}]*?)\s*}/g,
           function(_all, url, title){
diff --git a/docs/src/templates/doc_widgets.css b/docs/src/templates/doc_widgets.css
index 9f007f0e..4f759a8b 100644
--- a/docs/src/templates/doc_widgets.css
+++ b/docs/src/templates/doc_widgets.css
@@ -33,3 +33,54 @@ li.doc-example-live {
 div.syntaxhighlighter {
   padding-bottom: 1px !important; /* fix to remove unnecessary scrollbars http://is.gd/gSMgC */
 }
+
+/* TABS - tutorial environment navigation */
+
+div.tabs-nav {
+  height: 25px;
+  position: relative;
+}
+
+div.tabs-nav ul li {
+  list-style: none;
+  display: inline-block;
+  padding: 5px 10px;
+}
+
+div.tabs-nav ul li.current a {
+  color: white;
+  text-decoration: none;
+}
+
+div.tabs-nav ul li.current {
+  background: #7989D6;
+  -moz-box-shadow: 4px 4px 6px #48577D;
+  -moz-border-radius-topright: 8px;
+  -moz-border-radius-topleft: 8px;
+  box-shadow: 4px 4px 6px #48577D;
+  border-radius-topright: 8px;
+  border-radius-topleft: 8px;
+  -webkit-box-shadow: 4px 4px 6px #48577D;
+  -webkit-border-top-right-radius: 8px;
+  -webkit-border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+}
+
+div.tabs-content {
+  padding: 4px;
+  position: relative;
+  background: #7989D6;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  -webkit-border-radius: 8px;
+}
+
+div.tabs-content-inner {
+  margin: 1px;
+  padding: 10px;
+  background: white;
+  border-radius: 6px;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+}
diff --git a/docs/src/templates/doc_widgets.js b/docs/src/templates/doc_widgets.js
index 6275012c..a3527c52 100644
--- a/docs/src/templates/doc_widgets.js
+++ b/docs/src/templates/doc_widgets.js
@@ -85,4 +85,86 @@
     return {html: lines.join('\n'), hilite: lineNo.join(',') };
   };
 
+  var HTML_TPL =
+      'Show Instructions' +
+      '
' +
+        '
' +
+          '
    ' +
+          '
' +
+        '
' +
+        '
' +
+
+        '
' +
+      '
';
+
+  var HTML_NAV = '
  • {title}
    • ';
+  var HTML_CONTENT = '
    {content}
    ';
+
+  var DEFAULT_NAV =
+    '
  • Git on Mac/Linux
    • ' +
+    '
  • Git on Windows
    • ' +
+    '
  • Snapshots on Mac/Linux
    • ' +
+    '
  • Snapshots on Windows
    • ';
+
+  var DEFAULT_CONTENT =
+    '
    ' +
+      '
      ' +
+      '
    1. Reset the workspace to step {step}.
      ' +
+      '
       git checkout -f step-{step}
      2. ' +
+      '
    2. Refresh your browser or check the app out on anglar\'s server.
      3. ' +
+      '
    ' +
+    '
    ' +
+
+    '
    ' +
+      '
      ' +
+      '
    1. Reset the workspace to step {step}.
      ' +
+      '
       git checkout -f step-{step}
      2. ' +
+      '
    2. Refresh your browser or check the app out on anglar\'s server.
      3. ' +
+      '
    ' +
+    '
    ' +
+
+    '
    ' +
+      '
      ' +
+      '
    1. Reset the workspace to step {step}.
      ' +
+      '
       ./goto_step.sh {step}
      2. ' +
+      '
    2. Refresh your browser or check the app out on anglar\'s server.
      3. ' +
+      '
    ' +
+    '
    ' +
+
+    '
    ' +
+      '
      ' +
+      '
    1. Reset the workspace to step {step}.
      ' +
+      '
       ./goto_step.bat {step}
      2. ' +
+      '
    2. Refresh your browser or check the app out on anglar\'s server.
      3. ' +
+      '
    ' +
+    '
    ';
+
+  angular.widget('doc:tutorial-instructions', function(element) {
+    element.hide();
+    this.descend(true);
+
+    var tabs = angular.element(HTML_TPL.replace('{show}', element.attr('show') || 'false')),
+        nav = tabs.find('.tabs-nav ul'),
+        content = tabs.find('.tabs-content-inner'),
+        children = element.children();
+
+    if (children.length) {
+      // load custom content
+      angular.forEach(element.children(), function(elm) {
+        var elm = angular.element(elm),
+            id = elm.attr('id');
+
+        nav.append(HTML_NAV.replace('{title}', elm.attr('title')).replace(/\{id\}/g, id));
+        content.append(HTML_CONTENT.replace('{id}', id).replace('{content}', elm.html()));
+      });
+    } else {
+      // default
+      nav.append(DEFAULT_NAV);
+      content.append(DEFAULT_CONTENT.replace(/\{step\}/g, element.attr('step')));
+    }
+
+    element.html('');
+    element.append(tabs);
+    element.show();
+  });
 })();
diff --git a/docs/src/templates/docs.js b/docs/src/templates/docs.js
index e05f0ec1..47d294c3 100644
--- a/docs/src/templates/docs.js
+++ b/docs/src/templates/docs.js
@@ -65,3 +65,21 @@ angular.widget('code', function(element){
 
 SyntaxHighlighter['defaults'].toolbar = false;
 SyntaxHighlighter['defaults'].gutter = false;
+
+/**
+ * Controller for tutorial instructions
+ * @param $cookieStore
+ * @constructor
+ */
+function TutorialInstructionsCtrl($cookieStore) {
+  this.selected = $cookieStore.get('selEnv') || 'git-mac';
+
+  this.currentCls = function(id, cls) {
+    return this.selected == id  ? cls || 'current' : '';
+  };
+
+  this.select = function(id) {
+    this.selected = id;
+    $cookieStore.put('selEnv', id);
+  };
+}
-- 
cgit v1.2.3