puffer_pages 0.1.1 → 0.5.0

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

@@ -0,0 +1,95 @@
+CodeMirror.defineMode("yaml", function() {
+	
+	var cons = ['true', 'false', 'on', 'off', 'yes', 'no'];
+	var keywordRegex = new RegExp("\\b(("+cons.join(")|(")+"))$", 'i');
+	
+	return {
+		token: function(stream, state) {
+			var ch = stream.peek();
+			var esc = state.escaped;
+			state.escaped = false;
+			/* comments */
+			if (ch == "#") { stream.skipToEnd(); return "comment"; }
+			if (state.literal && stream.indentation() > state.keyCol) {
+				stream.skipToEnd(); return "string";
+			} else if (state.literal) { state.literal = false; }
+			if (stream.sol()) {
+				state.keyCol = 0;
+				state.pair = false;
+				state.pairStart = false;
+				/* document start */
+				if(stream.match(/---/)) { return "def"; }
+				/* document end */
+				if (stream.match(/\.\.\./)) { return "def"; }
+				/* array list item */
+				if (stream.match(/\s*-\s+/)) { return 'meta'; }
+			}
+			/* pairs (associative arrays) -> key */
+			if (!state.pair && stream.match(/^\s*([a-z0-9\._-])+(?=\s*:)/i)) {
+				state.pair = true;
+				state.keyCol = stream.indentation();
+				return "atom";
+			}
+			if (state.pair && stream.match(/^:\s*/)) { state.pairStart = true; return 'meta'; }
+			
+			/* inline pairs/lists */
+			if (stream.match(/^(\{|\}|\[|\])/)) {
+				if (ch == '{')
+					state.inlinePairs++;
+				else if (ch == '}')
+					state.inlinePairs--;
+				else if (ch == '[')
+					state.inlineList++;
+				else
+					state.inlineList--;
+				return 'meta';
+			}
+			
+			/* list seperator */
+			if (state.inlineList > 0 && !esc && ch == ',') {
+				stream.next();
+				return 'meta';
+			}
+			/* pairs seperator */
+			if (state.inlinePairs > 0 && !esc && ch == ',') {
+				state.keyCol = 0;
+				state.pair = false;
+				state.pairStart = false;
+				stream.next();
+				return 'meta';
+			}
+			
+			/* start of value of a pair */
+			if (state.pairStart) {
+				/* block literals */
+				if (stream.match(/^\s*(\||\>)\s*/)) { state.literal = true; return 'meta'; };
+				/* references */
+				if (stream.match(/^\s*(\&|\*)[a-z0-9\._-]+\b/i)) { return 'variable-2'; }
+				/* numbers */
+				if (state.inlinePairs == 0 && stream.match(/^\s*-?[0-9\.\,]+\s?$/)) { return 'number'; }
+				if (state.inlinePairs > 0 && stream.match(/^\s*-?[0-9\.\,]+\s?(?=(,|}))/)) { return 'number'; }
+				/* keywords */
+				if (stream.match(keywordRegex)) { return 'keyword'; }
+			}
+
+			/* nothing found, continue */
+			state.pairStart = false;
+			state.escaped = (ch == '\\');
+			stream.next();
+			return null;
+		},
+		startState: function() {
+			return {
+				pair: false,
+				pairStart: false,
+				keyCol: 0,
+				inlinePairs: 0,
+				inlineList: 0,
+				literal: false,
+				escaped: false
+			};
+		}
+	};
+});
+
+CodeMirror.defineMIME("text/x-yaml", "yaml");

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

@@ -1,15 +1,31 @@
-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;
+CodeMirror.defineMode("text/x-liquid-html", function(config) {
+  return CodeMirror.multiplexingMode(
+    CodeMirror.getMode(config, "text/html"),
+    {
+      open: "{{", close: "}}",
+      mode: CodeMirror.getMode(config, "text/x-liquid-variable"),
+      delimStyle: "tag"
+    },
+    {
+      open: "{%", close: "%}",
+      mode: CodeMirror.getMode(config, "text/x-liquid-tag"),
+      delimStyle: "tag"
     }
-  };
+  );
+});
 
-  return CodeMirror.overlayParser(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), liquidOverlay);
+CodeMirror.defineMode("text/x-liquid-yaml", function(config) {
+  return CodeMirror.multiplexingMode(
+    CodeMirror.getMode(config, "text/x-yaml"),
+    {
+      open: "{{", close: "}}",
+      mode: CodeMirror.getMode(config, "text/x-liquid-variable"),
+      delimStyle: "tag"
+    },
+    {
+      open: "{%", close: "%}",
+      mode: CodeMirror.getMode(config, "text/x-liquid-tag"),
+      delimStyle: "tag"
+    }
+  );
 });

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

@@ -0,0 +1,63 @@
+(function() {
+  var matching = {"(": ")>", ")": "(<", "[": "]>", "]": "[<", "{": "}>", "}": "{<"};
+  function findMatchingBracket(cm) {
+    var cur = cm.getCursor(), line = cm.getLineHandle(cur.line), pos = cur.ch - 1;
+    var match = (pos >= 0 && matching[line.text.charAt(pos)]) || matching[line.text.charAt(++pos)];
+    if (!match) return null;
+    var forward = match.charAt(1) == ">", d = forward ? 1 : -1;
+    var style = cm.getTokenAt({line: cur.line, ch: pos + 1}).type;
+
+    var stack = [line.text.charAt(pos)], re = /[(){}[\]]/;
+    function scan(line, lineNo, start) {
+      if (!line.text) return;
+      var pos = forward ? 0 : line.text.length - 1, end = forward ? line.text.length : -1;
+      if (start != null) pos = start + d;
+      for (; pos != end; pos += d) {
+        var ch = line.text.charAt(pos);
+        if (re.test(ch) && cm.getTokenAt({line: lineNo, ch: pos + 1}).type == style) {
+          var match = matching[ch];
+          if (match.charAt(1) == ">" == forward) stack.push(ch);
+          else if (stack.pop() != match.charAt(0)) return {pos: pos, match: false};
+          else if (!stack.length) return {pos: pos, match: true};
+        }
+      }
+    }
+    for (var i = cur.line, found, e = forward ? Math.min(i + 100, cm.lineCount()) : Math.max(-1, i - 100); i != e; i+=d) {
+      if (i == cur.line) found = scan(line, i, pos);
+      else found = scan(cm.getLineHandle(i), i);
+      if (found) break;
+    }
+    return {from: {line: cur.line, ch: pos}, to: found && {line: i, ch: found.pos}, match: found && found.match};
+  }
+
+  function matchBrackets(cm, autoclear) {
+    var found = findMatchingBracket(cm);
+    if (!found) return;
+    var style = found.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket";
+    var one = cm.markText(found.from, {line: found.from.line, ch: found.from.ch + 1},
+                          {className: style});
+    var two = found.to && cm.markText(found.to, {line: found.to.line, ch: found.to.ch + 1},
+                                      {className: style});
+    var clear = function() {
+      cm.operation(function() { one.clear(); two && two.clear(); });
+    };
+    if (autoclear) setTimeout(clear, 800);
+    else return clear;
+  }
+
+  var currentlyHighlighted = null;
+  function doMatchBrackets(cm) {
+    cm.operation(function() {
+      if (currentlyHighlighted) {currentlyHighlighted(); currentlyHighlighted = null;}
+      if (!cm.somethingSelected()) currentlyHighlighted = matchBrackets(cm, false);
+    });
+  }
+
+  CodeMirror.defineOption("matchBrackets", false, function(cm, val) {
+    if (val) cm.on("cursorActivity", doMatchBrackets);
+    else cm.off("cursorActivity", doMatchBrackets);
+  });
+
+  CodeMirror.defineExtension("matchBrackets", function() {matchBrackets(this, true);});
+  CodeMirror.defineExtension("findMatchingBracket", function(){return findMatchingBracket(this);});
+})();

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

@@ -0,0 +1,95 @@
+CodeMirror.multiplexingMode = function(outer /*, others */) {
+  // Others should be {open, close, mode [, delimStyle]} objects
+  var others = Array.prototype.slice.call(arguments, 1);
+  var n_others = others.length;
+
+  function indexOf(string, pattern, from) {
+    if (typeof pattern == "string") return string.indexOf(pattern, from);
+    var m = pattern.exec(from ? string.slice(from) : string);
+    return m ? m.index + from : -1;
+  }
+
+  return {
+    startState: function() {
+      return {
+        outer: CodeMirror.startState(outer),
+        innerActive: null,
+        inner: null
+      };
+    },
+
+    copyState: function(state) {
+      return {
+        outer: CodeMirror.copyState(outer, state.outer),
+        innerActive: state.innerActive,
+        inner: state.innerActive && CodeMirror.copyState(state.innerActive.mode, state.inner)
+      };
+    },
+
+    token: function(stream, state) {
+      if (!state.innerActive) {
+        var cutOff = Infinity, oldContent = stream.string;
+        for (var i = 0; i < n_others; ++i) {
+          var other = others[i];
+          var found = indexOf(oldContent, other.open, stream.pos);
+          if (found == stream.pos) {
+            stream.match(other.open);
+            state.innerActive = other;
+            state.inner = CodeMirror.startState(other.mode, outer.indent ? outer.indent(state.outer, "") : 0);
+            return other.delimStyle;
+          } else if (found != -1 && found < cutOff) {
+            cutOff = found;
+          }
+        }
+        if (cutOff != Infinity) stream.string = oldContent.slice(0, cutOff);
+        var outerToken = outer.token(stream, state.outer);
+        if (cutOff != Infinity) stream.string = oldContent;
+        return outerToken;
+      } else {
+        var curInner = state.innerActive, oldContent = stream.string;
+        var found = indexOf(oldContent, curInner.close, stream.pos);
+        if (found == stream.pos) {
+          stream.match(curInner.close);
+          state.innerActive = state.inner = null;
+          return curInner.delimStyle;
+        }
+        if (found > -1) stream.string = oldContent.slice(0, found);
+        var innerToken = curInner.mode.token(stream, state.inner);
+        if (found > -1) stream.string = oldContent;
+        var cur = stream.current(), found = cur.indexOf(curInner.close);
+        if (found > -1) stream.backUp(cur.length - found);
+        return innerToken;
+      }
+    },
+    
+    indent: function(state, textAfter) {
+      var mode = state.innerActive ? state.innerActive.mode : outer;
+      if (!mode.indent) return CodeMirror.Pass;
+      return mode.indent(state.innerActive ? state.inner : state.outer, textAfter);
+    },
+
+    blankLine: function(state) {
+      var mode = state.innerActive ? state.innerActive.mode : outer;
+      if (mode.blankLine) {
+        mode.blankLine(state.innerActive ? state.inner : state.outer);
+      }
+      if (!state.innerActive) {
+        for (var i = 0; i < n_others; ++i) {
+          var other = others[i];
+          if (other.open === "\n") {
+            state.innerActive = other;
+            state.inner = CodeMirror.startState(other.mode, mode.indent ? mode.indent(state.outer, "") : 0);
+          }
+        }
+      } else if (mode.close === "\n") {
+        state.innerActive = state.inner = null;
+      }
+    },
+
+    electricChars: outer.electricChars,
+
+    innerMode: function(state) {
+      return state.inner ? {state: state.inner, mode: state.innerActive.mode} : {state: state.outer, mode: outer};
+    }
+  };
+};

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

@@ -1,15 +1,15 @@
 //= require puffer/right-tabs-src
 //= require puffer/codemirror
-//= require puffer/overlay
+//= require puffer/multiplex
+//= require puffer/matchbrackets
 //= require puffer/codemirror/xml
 //= require puffer/codemirror/javascript
 //= require puffer/codemirror/css
 //= require_tree ./codemirror
-//= require puffer/liquid
 
 Tabs.include({
-  initialize: function(options) {
-    this.$super(options);
+  initialize: function(element, options) {
+    this.$super(element, options);
     this.buildAddButton();
   },
 
@@ -17,89 +17,185 @@ Tabs.include({
     if (isFunction(this.options.addButton)) {
       this.addButton = $E('a', {'class': 'rui-tabs-tab rui-tabs-add', 'html': '<a href="#">+</a>'}).insertTo(this.tabsList);
       this.addButton.onClick(this.options.addButton.bind(this));
+      this.onAdd(function(event) {
+        this.addButton.insertTo(this.tabsList);
+      });
+    }
+  },
+
+  scrollTo: function(scroll) {
+    // checking the constraints
+    var available_width = this.scroller.size().x;
+    if (this.addButton) {
+      var addButtonWidth = this.addButton.dimensions().width;
+    } else {
+      var addButtonWidth = 0;
+    }
+    var overall_width   = this.tabs.map('width').sum() + addButtonWidth;
+
+    if (scroll < (available_width - overall_width)) {
+      scroll = available_width - overall_width;
+    }
+    if (scroll > 0) { scroll = 0; }
+
+    // applying the scroll
+    this.tabsList.morph({left: scroll+'px'}, {duration: this.options.scrollDuration});
+
+    this.checkScrollButtons(overall_width, available_width, scroll);
+  }
+});
+
+Tabs.Tab.include({
+  initialize: function(element, main) {
+    this.$super(element, main);
+    if (main.options.disablable) {
+      this.link.insert($E('div', {
+        'class': 'rui-tabs-tab-close-icon', 'html': '&times;'
+      }).onClick(function(event) {
+        if (this.main.enabled().length > 1) {
+          if (this.current()) {
+            var enabled = this.main.enabled();
+            var sibling = enabled[enabled.indexOf(this) + 1] || enabled[enabled.indexOf(this)-1];
+
+            if (sibling) {
+              sibling.select();
+            }
+          }
+          this.disable();
+        }
+        event.stop();
+      }.bind(this)));
     }
   }
 });
 
 var page_part_tab_select = function(event) {
+  var inner_tabs = event.target.panel.find('.rui-tabs,*[data-tabs]').first();
+  if (inner_tabs instanceof Tabs)
+    inner_tabs.current().select();
+
   var textarea = event.target.panel.first('textarea[data-codemirror]');
-  if (textarea.codemirror) {
+  if (textarea && 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();
-  $('page_parts_marked_for_destroy').append(destroy_mark.value('1'))
-  if (page_part_param) {
-    $('page_parts_marked_for_destroy').append(page_part_param);
-  }
-}
-
 var page_part_tab_add = function(event) {
-  event.stop();
-  var new_id = new Date().getTime();
   var _this = this;
+
   new Dialog.Prompt({label: 'Enter new page part name'}).onOk(function() {
     var value = this.input.value();
     if (!value.blank()) {
-      _this.add(value, new_page_part_tab_panel.replace(/new_page_part_tab_panel_index/g, new_id), {id: new_id});
-      _this.tabs.last().panel.first('input[type=hidden]').value(value);
-      _this.tabs.last().select();
-      _this.addButton.insertTo(_this.tabsList);
-      $$('textarea[data-codemirror]').each(init_codemirror);
+      _this.add(value);
+      var tab = _this.tabs.last();
+      tab.panel.data('name', value);
+      fill_new_tab(tab);
+      tab.select();
+
+      Tabs.rescan();
+      init_codemirrors();
       this.hide();
     }
   }).show();
+  event.stop();
+}
+
+var page_part_tab_remove = function(event) {
+  save_destroy_marks(event.target.panel);
+}
+
+
+var fill_new_tab = function(tab) {
+  var new_id = new Date().getTime();
+  if (tab.main.data('new-panel'))
+    tab.panel.update(tab.main.data('new-panel').replace(new RegExp(tab.main.data('new-panel-variable'), 'g'), new_id));
+
+  var name_input = tab.panel.first('[data-acts="name"]');
+  var name_panel = tab.panel.first().parent('[data-name]');
+  if (name_input && name_panel) {
+    name_input.value(name_panel.data('name'));
+  }
+
+  init_codemirrors();
+}
+
+var save_destroy_marks = function(scope) {
+  var form = scope.tab.main.parent('form');
+  scope.find('[data-acts="destroy"]').each(function(destroy_mark) {
+    var page_part_param = destroy_mark.siblings('[data-acts="id"]').first();
+    if (page_part_param) {
+      form.insert(destroy_mark.value('true'), 'top');
+      form.insert(page_part_param, 'top');
+    }
+  });
 }
 
 var init_codemirror = function(textarea) {
   if (!textarea.codemirror) {
     var codemirror = CodeMirror.fromTextArea(textarea._, {
-      mode: 'liquid',
+      mode: textarea.data('codemirror').mode || 'text/html',
       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");
-      },
+      tabSize: 2,
       extraKeys: {
-        "Esc": codemirror_fullscreen
+        "Tab": "indentMore",
+        "Shift-Tab": "indentLess",
+        "Esc": codemirror_fullscreen,
+        "Alt-Enter": codemirror_fullscreen
       }
     });
 
     textarea.codemirror = codemirror;
-    codemirror.buttons = textarea.prev('.codemirror_buttons');
   }
 }
 
-$(document).onReady(function() {
+var init_codemirrors = function() {
   $$('textarea[data-codemirror]').each(init_codemirror);
+}
+
+var set_codemirror_mode = function(select) {
+  var editors = select.parent('.rui-tabs-panel').find('textarea[data-codemirror]');
+  var selected = $(select._.selectedOptions[0]);
+  var mode = selected.data('codemirror-mode');
+  if (!mode.blank()) {
+    editors.each(function(editor) {
+      editor.codemirror.setOption("mode", mode);
+    });
+  }
+}
+
+var set_codemirrors_modes = function() {
+  $$("select[data-codemirror-mode-select]").each(set_codemirror_mode);
+}
+
+"select[data-codemirror-mode-select]".on('change', function() { set_codemirror_mode(this) });
+
+$(document).onReady(function() {
+  init_codemirrors();
+  set_codemirrors_modes();
+});
+
+$(document).on('data:sending', function() {
+  $$('textarea[data-codemirror]').each(function(element) {
+    element.codemirror.save();
+  });
 });
 
-"*[data-codemirror-button]".onClick(function(event) {
-  if (event.which != 1) return;
-  window['codemirror_' + this.data('codemirror-button')](this.parent('ul').next('textarea').codemirror);
+$(document).on('ajax:complete', function() {
+  Tabs.rescan();
+  init_codemirrors();
+  set_codemirrors_modes();
 });
 
-".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 scroll = $(editor.getTextArea()).parents('*[data-fullscreen]').last();
   var body = $$('body').first();
 
-  if (scroll.hasClass('fullscreen')) {
-    scroll.removeClass('fullscreen');
-    editor.buttons.removeClass('codemirror_buttons_fulscreen');
+  if (scroll.data('fullscreen')) {
+    scroll.data('fullscreen', false)
     body.setStyle('overflow', 'auto');
   } else {
-    scroll.addClass('fullscreen');
-    editor.buttons.addClass('codemirror_buttons_fulscreen');
+    scroll.data('fullscreen', true)
     body.setStyle('overflow', 'hidden');
   }