RubyGems - grandejs_rails - Versions diffs - 0.0.1 - Mend

grandejs_rails 0.0.1

Files changed (10) hide show

data/.gitignore +17 -0
data/Gemfile +4 -0
data/LICENSE.txt +22 -0
data/README.md +44 -0
data/Rakefile +1 -0
data/app/assets/javascripts/grande.js +445 -0
data/grandejs_rails.gemspec +23 -0
data/lib/grandejs_rails.rb +8 -0
data/lib/grandejs_rails/version.rb +3 -0
metadata +103 -0

data/.gitignore ADDED Viewed

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile ADDED Viewed

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+# Specify your gem's dependencies in grandejs_rails.gemspec
+gemspec

data/LICENSE.txt ADDED Viewed

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Guy Israeli
+MIT License
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md ADDED Viewed

@@ -0,0 +1,44 @@
+# GrandejsRails
+Javascript library that implements features from Medium's editing experience.
+see demo here http://mattduvall.com/grande.js/
+## Installation
+Add this line to your application's Gemfile:
+    gem 'grandejs_rails'
+add to js manifest
+    //= require grande
+And then execute:
+    $ bundle
+Or install it yourself as:
+    $ gem install grandejs_rails
+## Usage
+as said in the source - https://github.com/mduvall/grande.js
+    To get up and running simply...
+    Include an <article> with contenteditable
+    Include the grande.js file at the bottom of your <body>
+    Bind the events on the document with grande.init()
+    You are set!
+## Contributing
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile ADDED Viewed

	@@ -0,0 +1 @@
1	+ require "bundler/gem_tasks"

data/app/assets/javascripts/grande.js ADDED Viewed

@@ -0,0 +1,445 @@
+// grande.js
+// version: 0.0.1
+// Matt DuVall <matt@mattduvall.com>
+// Open source implementation of Medium's UI features
+//     "url": "https://github.com/mduvall/grande.js"
+//
+(function() {
+  var root = this,   // Root object, this is going to be the window for now
+      document = this.document, // Safely store a document here for us to use
+      editableNodes = document.querySelectorAll(".g-body article"),
+      isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1,
+      textMenu,
+      optionsNode,
+      urlInput,
+      previouslySelectedText,
+      grande = {
+        bind: function(bindableNodes) {
+          if (bindableNodes) {
+            editableNodes = bindableNodes;
+          }
+          attachToolbarTemplate();
+          bindTextSelectionEvents();
+          bindTextStylingEvents();
+        },
+        select: function() {
+          triggerTextSelection();
+        }
+      },
+      tagClassMap = {
+        "b": "bold",
+        "i": "italic",
+        "h1": "header1",
+        "h2": "header2",
+        "a": "url",
+        "blockquote": "quote"
+      };
+  function attachToolbarTemplate() {
+    var div = document.createElement("div"),
+        toolbarTemplate = "<div class='options'> \
+          <span class='no-overflow'> \
+            <span class='ui-inputs'> \
+              <button class='bold'>B</button> \
+              <button class='italic'>i</button> \
+              <button class='header1'>h1</button> \
+              <button class='header2'>h2</button> \
+              <button class='quote'>&rdquo;</button> \
+              <button class='url useicons'>&#xe001;</button> \
+              <input class='url-input' type='text' placeholder='Paste or type a link'/> \
+            </span> \
+          </span> \
+        </div>";
+    div.className = "text-menu hide";
+    div.innerHTML = toolbarTemplate;
+    if (document.querySelectorAll(".text-menu").length === 0) {
+      document.body.appendChild(div);
+    }
+    textMenu = document.querySelectorAll(".text-menu")[0];
+    optionsNode = document.querySelectorAll(".text-menu .options")[0];
+    urlInput = document.querySelectorAll(".text-menu .url-input")[0];
+  }
+  function bindTextSelectionEvents() {
+    var i,
+        len,
+        node;
+    // Trigger on both mousedown and mouseup so that the click on the menu
+    // feels more instantaneously active
+    document.onmousedown = triggerTextSelection;
+    document.onmouseup = function(event) {
+      setTimeout(function() {
+        triggerTextSelection(event);
+      }, 1);
+    };
+    document.onkeydown = preprocessKeyDown;
+    document.onkeyup = function(event){
+      var sel = window.getSelection();
+      // FF will return sel.anchorNode to be the parentNode when the triggered keyCode is 13
+      if (sel.anchorNode && sel.anchorNode.nodeName !== "ARTICLE") {
+        triggerNodeAnalysis(event);
+        if (sel.isCollapsed) {
+          triggerTextParse(event);
+        }
+      }
+    };
+    // Handle window resize events
+    root.onresize = triggerTextSelection;
+    urlInput.onblur = triggerUrlBlur;
+    urlInput.onkeydown = triggerUrlSet;
+    for (i = 0, len = editableNodes.length; i < len; i++) {
+      node = editableNodes[i];
+      node.contentEditable = true;
+      node.onmousedown = node.onkeyup = node.onmouseup = triggerTextSelection;
+    }
+  }
+  function iterateTextMenuButtons(callback) {
+    var textMenuButtons = document.querySelectorAll(".text-menu button"),
+        i,
+        len,
+        node;
+    for (i = 0, len = textMenuButtons.length; i < len; i++) {
+      node = textMenuButtons[i];
+      (function(n) {
+        callback(n);
+      })(node);
+    }
+  }
+  function bindTextStylingEvents() {
+    iterateTextMenuButtons(function(node) {
+      node.onmousedown = function(event) {
+        triggerTextStyling(node);
+      };
+    });
+  }
+  function getFocusNode() {
+    return root.getSelection().focusNode;
+  }
+  function reloadMenuState() {
+    var className,
+        focusNode = getFocusNode(),
+        tagClass,
+        reTag;
+    iterateTextMenuButtons(function(node) {
+      className = node.className;
+      for (var tag in tagClassMap) {
+        tagClass = tagClassMap[tag];
+        reTag = new RegExp(tagClass);
+        if (reTag.test(className)) {
+          if (hasParentWithTag(focusNode, tag)) {
+            node.className = tagClass + " active";
+          } else {
+            node.className = tagClass;
+          }
+          break;
+        }
+      }
+    });
+  }
+  function preprocessKeyDown(event) {
+    var sel = window.getSelection(),
+        parentParagraph = getParentWithTag(sel.anchorNode, "p"),
+        p,
+        isHr;
+    if (event.keyCode === 13 && parentParagraph) {
+      prevSibling = parentParagraph.previousSibling;
+      isHr = prevSibling && prevSibling.nodeName === "HR" &&
+        !parentParagraph.textContent.length;
+      // Stop enters from creating another <p> after a <hr> on enter
+      if (isHr) {
+        event.preventDefault();
+      }
+    }
+  }
+  function triggerNodeAnalysis(event) {
+    var sel = window.getSelection(),
+        anchorNode,
+        parentParagraph;
+    if (event.keyCode === 13) {
+      // Enters should replace it's parent <div> with a <p>
+      if (sel.anchorNode.nodeName === "DIV") {
+        toggleFormatBlock("p");
+      }
+      parentParagraph = getParentWithTag(sel.anchorNode, "p");
+      if (parentParagraph) {
+        insertHorizontalRule(parentParagraph);
+      }
+    }
+  }
+  function insertHorizontalRule(parentParagraph) {
+    var prevSibling,
+        prevPrevSibling,
+        hr;
+    prevSibling = parentParagraph.previousSibling;
+    prevPrevSibling = prevSibling;
+    while(prevPrevSibling = prevPrevSibling.previousSibling){
+    	if (prevPrevSibling.nodeType != Node.TEXT_NODE) break;
+    }
+    if (prevSibling.nodeName === "P" && !prevSibling.textContent.length && prevPrevSibling.nodeName !== "HR") {
+      hr = document.createElement("hr");
+      hr.contentEditable = false;
+      parentParagraph.parentNode.replaceChild(hr, prevSibling);
+    }
+  }
+  function getTextProp(el) {
+    var textProp;
+    if (el.nodeType === Node.TEXT_NODE) {
+      textProp = "data";
+    } else if (isFirefox) {
+      textProp = "textContent";
+    } else {
+      textProp = "innerText";
+    }
+    return textProp;
+  }
+  function insertListOnSelection(sel, textProp, listType) {
+    var execListCommand = listType === "ol" ? "insertOrderedList" : "insertUnorderedList",
+        nodeOffset = listType === "ol" ? 3 : 2;
+    document.execCommand(execListCommand);
+    sel.anchorNode[textProp] = sel.anchorNode[textProp].substring(nodeOffset);
+    return getParentWithTag(sel.anchorNode, listType);
+  }
+  function triggerTextParse(event) {
+    var sel = window.getSelection(),
+        textProp,
+        subject,
+        insertedNode,
+        unwrap,
+        node,
+        parent,
+        range;
+    // FF will return sel.anchorNode to be the parentNode when the triggered keyCode is 13
+    if (!sel.isCollapsed || !sel.anchorNode || sel.anchorNode.nodeName === "ARTICLE") {
+      return;
+    }
+    textProp = getTextProp(sel.anchorNode);
+    subject = sel.anchorNode[textProp];
+    if (subject.match(/^-\s/) && sel.anchorNode.parentNode.nodeName !== "LI") {
+      insertedNode = insertListOnSelection(sel, textProp, "ul");
+    }
+    if (subject.match(/^1\.\s/) && sel.anchorNode.parentNode.nodeName !== "LI") {
+      insertedNode = insertListOnSelection(sel, textProp, "ol");
+    }
+    unwrap = insertedNode &&
+            ["ul", "ol"].indexOf(insertedNode.nodeName.toLocaleLowerCase()) >= 0 &&
+            ["p", "div"].indexOf(insertedNode.parentNode.nodeName.toLocaleLowerCase()) >= 0;
+    if (unwrap) {
+      node = sel.anchorNode;
+      parent = insertedNode.parentNode;
+      parent.parentNode.insertBefore(insertedNode, parent);
+      parent.parentNode.removeChild(parent);
+      moveCursorToBeginningOfSelection(sel, node);
+    }
+  }
+  function moveCursorToBeginningOfSelection(selection, node) {
+    range = document.createRange();
+    range.setStart(node, 0);
+    range.setEnd(node, 0);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+  function triggerTextStyling(node) {
+    var className = node.className,
+        sel = window.getSelection(),
+        selNode = sel.anchorNode,
+        tagClass,
+        reTag;
+    for (var tag in tagClassMap) {
+      tagClass = tagClassMap[tag];
+      reTag = new RegExp(tagClass);
+      if (reTag.test(className)) {
+        switch(tag) {
+          case "b":
+            if (selNode && !hasParentWithTag(selNode, "h1") && !hasParentWithTag(selNode, "h2")) {
+              document.execCommand(tagClass, false);
+            }
+            return;
+          case "i":
+            document.execCommand(tagClass, false);
+            return;
+          case "h1":
+          case "h2":
+          case "h3":
+          case "blockquote":
+            toggleFormatBlock(tag);
+            return;
+          case "a":
+            toggleUrlInput();
+            optionsNode.className = "options url-mode";
+            return;
+        }
+      }
+    }
+    triggerTextSelection();
+  }
+  function triggerUrlBlur(event) {
+    var url = urlInput.value;
+    optionsNode.className = "options";
+    window.getSelection().addRange(previouslySelectedText);
+    document.execCommand("unlink", false);
+    if (url === "") {
+      return false;
+    }
+    if (!url.match("^(http://|https://|mailto:)")) {
+      url = "http://" + url;
+    }
+    document.execCommand("createLink", false, url);
+    urlInput.value = "";
+  }
+  function triggerUrlSet(event) {
+    if (event.keyCode === 13) {
+      event.preventDefault();
+      event.stopPropagation();
+      urlInput.blur();
+    }
+  }
+  function toggleFormatBlock(tag) {
+    if (hasParentWithTag(getFocusNode(), tag)) {
+      document.execCommand("formatBlock", false, "p");
+      document.execCommand("outdent");
+    } else {
+      document.execCommand("formatBlock", false, tag);
+    }
+  }
+  function toggleUrlInput() {
+    setTimeout(function() {
+      var url = getParentHref(getFocusNode());
+      if (typeof url !== "undefined") {
+        urlInput.value = url;
+      } else {
+        document.execCommand("createLink", false, "/");
+      }
+      previouslySelectedText = window.getSelection().getRangeAt(0);
+      urlInput.focus();
+    }, 150);
+  }
+  function getParent(node, condition, returnCallback) {
+    while (node.parentNode) {
+      if (condition(node)) {
+        return returnCallback(node);
+      }
+      node = node.parentNode;
+    }
+  }
+  function getParentWithTag(node, nodeType) {
+    var checkNodeType = function(node) { return node.nodeName.toLowerCase() === nodeType; },
+        returnNode = function(node) { return node; };
+    return getParent(node, checkNodeType, returnNode);
+  }
+  function hasParentWithTag(node, nodeType) {
+    return !!getParentWithTag(node, nodeType);
+  }
+  function getParentHref(node) {
+    var checkHref = function(node) { return typeof node.href !== "undefined"; },
+        returnHref = function(node) { return node.href; };
+    return getParent(node, checkHref, returnHref);
+  }
+  function triggerTextSelection() {
+      var selectedText = root.getSelection(),
+          range,
+          clientRectBounds;
+      // The selected text is collapsed, push the menu out of the way
+      if (selectedText.isCollapsed) {
+        setTextMenuPosition(-999, -999);
+      } else {
+        range = selectedText.getRangeAt(0);
+        clientRectBounds = range.getBoundingClientRect();
+        // Every time we show the menu, reload the state
+        reloadMenuState();
+        setTextMenuPosition(
+          clientRectBounds.top - 5 + root.pageYOffset,
+          (clientRectBounds.left + clientRectBounds.right) / 2
+        );
+      }
+  }
+  function setTextMenuPosition(top, left) {
+    textMenu.style.top = top + "px";
+    textMenu.style.left = left + "px";
+  }
+  root.grande = grande;
+}).call(this);

data/grandejs_rails.gemspec ADDED Viewed

@@ -0,0 +1,23 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'grandejs_rails/version'
+Gem::Specification.new do |spec|
+  spec.name          = "grandejs_rails"
+  spec.version       = GrandejsRails::VERSION
+  spec.authors       = ["Guy Israeli"]
+  spec.description   = %q{Grande.js For Rails 3.1+ }
+  spec.summary       = %q{Grande.js is a great javascript library that implements features from Medium's editing experience.}
+  spec.homepage      = ""
+  spec.license       = "MIT"
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+  spec.add_dependency "railties", ">=3.1"
+end

data/lib/grandejs_rails.rb ADDED Viewed

@@ -0,0 +1,8 @@
+require "grandejs_rails/version"
+module GrandejsRails
+   module Rails
+  class Engine < ::Rails::Engine
+  end
+ end
+end

data/lib/grandejs_rails/version.rb ADDED Viewed

@@ -0,0 +1,3 @@
+module GrandejsRails
+  VERSION = "0.0.1"
+end

metadata ADDED Viewed

@@ -0,0 +1,103 @@
+--- !ruby/object:Gem::Specification
+name: grandejs_rails
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease:
+platform: ruby
+authors:
+- Guy Israeli
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2013-09-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '3.1'
+description: ! 'Grande.js For Rails 3.1+ '
+email:
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascripts/grande.js
+- grandejs_rails.gemspec
+- lib/grandejs_rails.rb
+- lib/grandejs_rails/version.rb
+homepage: ''
+licenses:
+- MIT
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project:
+rubygems_version: 1.8.24
+signing_key:
+specification_version: 3
+summary: Grande.js is a great javascript library that implements features from Medium's
+  editing experience.
+test_files: []