puffer_pages 0.1.0 → 0.1.1

data/app/assets/javascripts/puffer/codemirror/htmlmixed.js

@@ -1,8 +1,3 @@
-//= require ./xml
-//= require ./css
-//= require ./javascript
-//= require_self
-
 CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
   var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
   var jsMode = CodeMirror.getMode(config, "javascript");
@@ -77,6 +72,10 @@ CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
         return cssMode.indent(state.localState, textAfter);
     },
 
+    compareStates: function(a, b) {
+      return htmlMode.compareStates(a.htmlState, b.htmlState);
+    },
+
     electricChars: "/{}:"
   }
 });

data/app/assets/javascripts/puffer/codemirror/javascript.js

@@ -11,7 +11,8 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     return {
       "if": A, "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
       "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C,
-      "var": kw("var"), "function": kw("function"), "catch": kw("catch"),
+      "var": kw("var"), "const": kw("var"), "let": kw("var"),
+      "function": kw("function"), "catch": kw("catch"),
       "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
       "in": operator, "typeof": operator, "instanceof": operator,
       "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom
@@ -54,7 +55,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       return ret("number", "number");
     }      
     else if (/\d/.test(ch)) {
-      stream.match(/^\d*(?:\.\d*)?(?:e[+\-]?\d+)?/);
+      stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
       return ret("number", "number");
     }
     else if (ch == "/") {
@@ -86,7 +87,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     else {
       stream.eatWhile(/[\w\$_]/);
       var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
-      return known ? ret(known.type, known.style, word) :
+      return (known && state.kwAllowed) ? ret(known.type, known.style, word) :
                      ret("variable", "variable", word);
     }
   }
@@ -228,13 +229,18 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   function expression(type) {
     if (atomicTypes.hasOwnProperty(type)) return cont(maybeoperator);
     if (type == "function") return cont(functiondef);
-    if (type == "keyword c") return cont(expression);
+    if (type == "keyword c") return cont(maybeexpression);
     if (type == "(") return cont(pushlex(")"), expression, expect(")"), poplex, maybeoperator);
     if (type == "operator") return cont(expression);
     if (type == "[") return cont(pushlex("]"), commasep(expression, "]"), poplex, maybeoperator);
     if (type == "{") return cont(pushlex("}"), commasep(objprop, "}"), poplex, maybeoperator);
     return cont();
   }
+  function maybeexpression(type) {
+    if (type.match(/[;\}\)\],]/)) return pass();
+    return pass(expression);
+  }
+    
   function maybeoperator(type, value) {
     if (type == "operator" && /\+\+|--/.test(value)) return cont(maybeoperator);
     if (type == "operator") return cont(expression);
@@ -310,6 +316,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       return {
         tokenize: jsTokenBase,
         reAllowed: true,
+        kwAllowed: true,
         cc: [],
         lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
         localVars: null,
@@ -328,6 +335,7 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       var style = state.tokenize(stream, state);
       if (type == "comment") return style;
       state.reAllowed = type == "operator" || type == "keyword c" || type.match(/^[\[{}\(,;:]$/);
+      state.kwAllowed = type != '.';
       return parseJS(state, style, type, content, stream);
     },
 

data/app/assets/javascripts/puffer/codemirror/xml.js

@@ -3,9 +3,9 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
   var Kludges = parserConfig.htmlMode ? {
     autoSelfClosers: {"br": true, "img": true, "hr": true, "link": true, "input": true,
                       "meta": true, "col": true, "frame": true, "base": true, "area": true},
-    doNotIndent: {"pre": true, "!cdata": true},
+    doNotIndent: {"pre": true},
     allowUnquoted: true
-  } : {autoSelfClosers: {}, doNotIndent: {"!cdata": true}, allowUnquoted: false};
+  } : {autoSelfClosers: {}, doNotIndent: {}, allowUnquoted: false};
   var alignCDATA = parserConfig.alignCDATA;
 
   // Return variables for tokenizers
@@ -27,7 +27,7 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
         else if (stream.match("--")) return chain(inBlock("comment", "-->"));
         else if (stream.match("DOCTYPE", true, true)) {
           stream.eatWhile(/[\w\._\-]/);
-          return chain(inBlock("meta", ">"));
+          return chain(doctype(1));
         }
         else return null;
       }
@@ -102,6 +102,26 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
       return style;
     };
   }
+  function doctype(depth) {
+    return function(stream, state) {
+      var ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == "<") {
+          state.tokenize = doctype(depth + 1);
+          return state.tokenize(stream, state);
+        } else if (ch == ">") {
+          if (depth == 1) {
+            state.tokenize = inText;
+            break;
+          } else {
+            state.tokenize = doctype(depth - 1);
+            return state.tokenize(stream, state);
+          }
+        }
+      }
+      return "meta";
+    };
+  }
 
   var curState, setStyle;
   function pass() {
@@ -127,8 +147,10 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
   }
 
   function element(type) {
-    if (type == "openTag") {curState.tagName = tagName; return cont(attributes, endtag(curState.startOfLine));}
-    else if (type == "closeTag") {
+    if (type == "openTag") {
+      curState.tagName = tagName;
+      return cont(attributes, endtag(curState.startOfLine));
+    } else if (type == "closeTag") {
       var err = false;
       if (curState.context) {
         err = curState.context.tagName != tagName;
@@ -138,12 +160,7 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
       if (err) setStyle = "error";
       return cont(endclosetag(err));
     }
-    else if (type == "string") {
-      if (!curState.context || curState.context.name != "!cdata") pushContext("!cdata");
-      if (curState.tokenize == inText) popContext();
-      return cont();
-    }
-    else return cont();
+    return cont();
   }
   function endtag(startOfLine) {
     return function(type) {
@@ -166,6 +183,7 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
   function attributes(type) {
     if (type == "word") {setStyle = "attribute"; return cont(attributes);}
     if (type == "equals") return cont(attvalue, attributes);
+    if (type == "string") {setStyle = "error"; return cont(attributes);}
     return pass();
   }
   function attvalue(type) {
@@ -192,6 +210,7 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
 
       setStyle = type = tagName = null;
       var style = state.tokenize(stream, state);
+      state.type = type;
       if ((style || type) && style != "comment") {
         curState = state;
         while (true) {
@@ -203,9 +222,11 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
       return setStyle || style;
     },
 
-    indent: function(state, textAfter) {
+    indent: function(state, textAfter, fullLine) {
       var context = state.context;
-      if (context && context.noIndent) return 0;
+      if ((state.tokenize != inTag && state.tokenize != inText) ||
+          context && context.noIndent)
+        return fullLine ? fullLine.match(/^(\s*)/)[0].length : 0;
       if (alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
       if (context && /^<\//.test(textAfter))
         context = context.prev;
@@ -216,7 +237,7 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
     },
 
     compareStates: function(a, b) {
-      if (a.indented != b.indented) return false;
+      if (a.indented != b.indented || a.tokenize != b.tokenize) return false;
       for (var ca = a.context, cb = b.context; ; ca = ca.prev, cb = cb.prev) {
         if (!ca || !cb) return ca == cb;
         if (ca.tagName != cb.tagName) return false;

data/app/assets/javascripts/puffer/liquid.js

@@ -0,0 +1,15 @@
+CodeMirror.defineMode("liquid", function(config, parserConfig) {
+  var liquidOverlay = {
+    token: function(stream, state) {
+      if (stream.match("{{") || stream.match("{%")) {
+        while ((ch = stream.next()) != null)
+          if ((ch == "}" || ch == "%") && stream.next() == "}") break;
+        return "liquid";
+      }
+      while (stream.next() != null && !(stream.match("{{", false) || !stream.match("{%", false))) {}
+      return null;
+    }
+  };
+
+  return CodeMirror.overlayParser(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), liquidOverlay);
+});

data/app/assets/javascripts/puffer/puffer_pages.js

@@ -1,7 +1,11 @@
 //= require puffer/right-tabs-src
 //= require puffer/codemirror
 //= require puffer/overlay
+//= require puffer/codemirror/xml
+//= require puffer/codemirror/javascript
+//= require puffer/codemirror/css
 //= require_tree ./codemirror
+//= require puffer/liquid
 
 Tabs.include({
   initialize: function(options) {
@@ -17,6 +21,13 @@ Tabs.include({
   }
 });
 
+var page_part_tab_select = function(event) {
+  var textarea = event.target.panel.first('textarea[data-codemirror]');
+  if (textarea.codemirror) {
+    textarea.codemirror.refresh();
+  }
+}
+
 var page_part_tab_remove = function(event) {
   var destroy_mark = event.target.panel.first('.destroy_mark');
   var page_part_param = destroy_mark.next();
@@ -37,7 +48,7 @@ var page_part_tab_add = function(event) {
       _this.tabs.last().panel.first('input[type=hidden]').value(value);
       _this.tabs.last().select();
       _this.addButton.insertTo(_this.tabsList);
-      $$('textarea[codemirror]').each(init_codemirror);
+      $$('textarea[data-codemirror]').each(init_codemirror);
       this.hide();
     }
   }).show();
@@ -45,14 +56,53 @@ var page_part_tab_add = function(event) {
 
 var init_codemirror = function(textarea) {
   if (!textarea.codemirror) {
-    CodeMirror.fromTextArea(textarea._, {
-      mode: 'text/html',
-      lineNumbers: true
+    var codemirror = CodeMirror.fromTextArea(textarea._, {
+      mode: 'liquid',
+      lineNumbers: true,
+      lineWrapping: true,
+      onCursorActivity: function(editor) {
+        if (editor.last_active_line != undefined) {
+          editor.setLineClass(editor.last_active_line, null);
+        }
+        editor.last_active_line = editor.getCursor().line;
+        editor.setLineClass(editor.last_active_line, "active_line");
+      },
+      extraKeys: {
+        "Esc": codemirror_fullscreen
+      }
     });
-    textarea.codemirror = true
+
+    textarea.codemirror = codemirror;
+    codemirror.buttons = textarea.prev('.codemirror_buttons');
   }
 }
 
 $(document).onReady(function() {
-  $$('textarea[codemirror]').each(init_codemirror);
+  $$('textarea[data-codemirror]').each(init_codemirror);
+});
+
+"*[data-codemirror-button]".onClick(function(event) {
+  if (event.which != 1) return;
+  window['codemirror_' + this.data('codemirror-button')](this.parent('ul').next('textarea').codemirror);
 });
+
+".codemirror_buttons_fulscreen".onMouseenter('morph', {'top': '0px'});
+".codemirror_buttons_fulscreen".onMouseleave('morph', {'top': '-20px'});
+  
+var codemirror_fullscreen = function(editor) {
+  var scroll = $(editor.getWrapperElement()).children('.CodeMirror-scroll').first();
+  var body = $$('body').first();
+
+  if (scroll.hasClass('fullscreen')) {
+    scroll.removeClass('fullscreen');
+    editor.buttons.removeClass('codemirror_buttons_fulscreen');
+    body.setStyle('overflow', 'auto');
+  } else {
+    scroll.addClass('fullscreen');
+    editor.buttons.addClass('codemirror_buttons_fulscreen');
+    body.setStyle('overflow', 'hidden');
+  }
+
+  editor.refresh();
+  editor.focus();
+}

data/app/assets/stylesheets/puffer/codemirror.css

@@ -23,6 +23,7 @@
   color: #aaa;
   text-align: right;
   padding: .4em .2em .4em .4em;
+  white-space: pre !important;
 }
 .CodeMirror-lines {
   padding: .4em;
@@ -41,28 +42,63 @@
   word-wrap: normal;
 }
 
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+.CodeMirror-wrap .CodeMirror-scroll {
+  overflow-x: hidden;
+}
+
 .CodeMirror textarea {
-  font-family: inherit !important;
-  font-size: inherit !important;
+  outline: none !important;
 }
 
-.CodeMirror-cursor {
+.CodeMirror pre.CodeMirror-cursor {
   z-index: 10;
   position: absolute;
   visibility: hidden;
-  border-left: 1px solid black !important;
+  border-left: 1px solid black;
 }
-.CodeMirror-focused .CodeMirror-cursor {
+.CodeMirror-focused pre.CodeMirror-cursor {
   visibility: visible;
 }
 
-span.CodeMirror-selected {
-  background: #ccc !important;
-  color: HighlightText !important;
-}
-.CodeMirror-focused span.CodeMirror-selected {
-  background: Highlight !important;
-}
+span.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused span.CodeMirror-selected { background: #d2dcf8; }
+
+.CodeMirror-searching {background: #ffa;}
+
+/* Default theme */
+
+.cm-s-default span.cm-keyword {color: #708;}
+.cm-s-default span.cm-atom {color: #219;}
+.cm-s-default span.cm-number {color: #164;}
+.cm-s-default span.cm-def {color: #00f;}
+.cm-s-default span.cm-variable {color: black;}
+.cm-s-default span.cm-variable-2 {color: #05a;}
+.cm-s-default span.cm-variable-3 {color: #085;}
+.cm-s-default span.cm-property {color: black;}
+.cm-s-default span.cm-operator {color: black;}
+.cm-s-default span.cm-comment {color: #a50;}
+.cm-s-default span.cm-string {color: #a11;}
+.cm-s-default span.cm-string-2 {color: #f50;}
+.cm-s-default span.cm-meta {color: #555;}
+.cm-s-default span.cm-error {color: #f00;}
+.cm-s-default span.cm-qualifier {color: #555;}
+.cm-s-default span.cm-builtin {color: #30a;}
+.cm-s-default span.cm-bracket {color: #cc7;}
+.cm-s-default span.cm-tag {color: #170;}
+.cm-s-default span.cm-attribute {color: #00c;}
+.cm-s-default span.cm-header {color: #a0a;}
+.cm-s-default span.cm-quote {color: #090;}
+.cm-s-default span.cm-hr {color: #999;}
+.cm-s-default span.cm-link {color: #00c;}
+
+span.cm-header, span.cm-strong {font-weight: bold;}
+span.cm-em {font-style: italic;}
+span.cm-emstrong {font-style: italic; font-weight: bold;}
+span.cm-link {text-decoration: underline;}
 
-.CodeMirror-matchingbracket {color: #0f0 !important;}
-.CodeMirror-nonmatchingbracket {color: #f22 !important;}
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}

data/app/assets/stylesheets/puffer/codemirror/cobalt.css

@@ -15,3 +15,4 @@
 .cm-s-cobalt span.cm-error { color: #9d1e15; }
 .cm-s-cobalt span.cm-bracket { color: #d8d8d8; }
 .cm-s-cobalt span.cm-builtin, .cm-s-cobalt span.cm-special { color: #ff9e59; }
+.cm-s-cobalt span.cm-link { color: #845dc4; }

data/app/assets/stylesheets/puffer/codemirror/eclipse.css

@@ -17,8 +17,9 @@
 .cm-s-eclipse span.cm-bracket {color: #cc7;}
 .cm-s-eclipse span.cm-tag {color: #170;}
 .cm-s-eclipse span.cm-attribute {color: #00c;}
+.cm-s-eclipse span.cm-link {color: #219;}
 
-.CodeMirror-matchingbracket{
+.cm-s-eclipse .CodeMirror-matchingbracket {
 	border:1px solid grey;
 	color:black !important;;
-}
+}

data/app/assets/stylesheets/puffer/codemirror/elegant.css

@@ -7,3 +7,4 @@
 .cm-s-elegant span.cm-keyword {color: #730;}
 .cm-s-elegant span.cm-builtin {color: #30a;}
 .cm-s-elegant span.cm-error {background-color: #fdd;}
+.cm-s-elegant span.cm-link {color: #762;}

data/app/assets/stylesheets/puffer/codemirror/monokai.css

@@ -0,0 +1,28 @@
+/* Based on Sublime Text's Monokai theme */
+
+.cm-s-monokai {background: #272822; color: #f8f8f2;}
+.cm-s-monokai span.CodeMirror-selected {background: #ffe792 !important;}
+.cm-s-monokai .CodeMirror-gutter {background: #272822; border-right: 0px;}
+.cm-s-monokai .CodeMirror-gutter-text {color: #d0d0d0;}
+.cm-s-monokai .CodeMirror-cursor {border-left: 1px solid #f8f8f0 !important;}
+
+.cm-s-monokai span.cm-comment {color: #75715e;}
+.cm-s-monokai span.cm-atom {color: #ae81ff;}
+.cm-s-monokai span.cm-number {color: #ae81ff;}
+
+.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {color: #a6e22e;}
+.cm-s-monokai span.cm-keyword {color: #f92672;}
+.cm-s-monokai span.cm-string {color: #e6db74;}
+
+.cm-s-monokai span.cm-variable {color: #a6e22e;}
+.cm-s-monokai span.cm-variable-2 {color: #9effff;}
+.cm-s-monokai span.cm-def {color: #fd971f;}
+.cm-s-monokai span.cm-error {background: #f92672; color: #f8f8f0;}
+.cm-s-monokai span.cm-bracket {color: #f8f8f2;}
+.cm-s-monokai span.cm-tag {color: #f92672;}
+.cm-s-monokai span.cm-link {color: #ae81ff;}
+
+.cm-s-monokai .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}

data/app/assets/stylesheets/puffer/codemirror/neat.css

@@ -6,3 +6,4 @@
 .cm-s-neat span.cm-variable { color: black; }
 .cm-s-neat span.cm-number, .cm-s-neat span.cm-atom { color: #3a3; }
 .cm-s-neat span.cm-meta {color: #555;}
+.cm-s-neat span.cm-link { color: #3a3; }