written 0.0.5 → 0.1.1

data/lib/written/app/assets/javascripts/written/polyfills/WeakMap/WeakMap.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+if (typeof WeakMap === 'undefined') {
+  (function() {
+    var defineProperty = Object.defineProperty;
+    var counter = Date.now() % 1e9;
+
+    var WeakMap = function() {
+      this.name = '__st' + (Math.random() * 1e9 >>> 0) + (counter++ + '__');
+    };
+
+    WeakMap.prototype = {
+      set: function(key, value) {
+        var entry = key[this.name];
+        if (entry && entry[0] === key)
+          entry[1] = value;
+        else
+          defineProperty(key, this.name, {value: [key, value], writable: true});
+        return this;
+      },
+      get: function(key) {
+        var entry;
+        return (entry = key[this.name]) && entry[0] === key ?
+            entry[1] : undefined;
+      },
+      delete: function(key) {
+        var entry = key[this.name];
+        if (!entry || entry[0] !== key) return false;
+        entry[0] = entry[1] = undefined;
+        return true;
+      },
+      has: function(key) {
+        var entry = key[this.name];
+        if (!entry) return false;
+        return entry[0] === key;
+      }
+    };
+
+    window.WeakMap = WeakMap;
+  })();
+}

data/lib/written/app/assets/javascripts/written/polyfills/base.coffee

@@ -0,0 +1,10 @@
+#= require './WeakMap/WeakMap'
+#= require './MutationObserver/MutationObserver'
+#= require './dom'
+#= require './CustomElements/CustomElements'
+#= require './CustomElements/base'
+#= require './CustomElements/traverse'
+#= require './CustomElements/observe'
+#= require './CustomElements/upgrade'
+#= require './CustomElements/register'
+#= require './CustomElements/boot'

data/lib/written/app/assets/javascripts/written/polyfills/dom.js

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+(function(scope) {
+
+  'use strict';
+
+  // polyfill performance.now
+
+  if (!window.performance) {
+    var start = Date.now();
+    // only at millisecond precision
+    window.performance = {now: function(){ return Date.now() - start; }};
+  }
+
+  // polyfill for requestAnimationFrame
+
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = (function() {
+      var nativeRaf = window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame;
+
+      return nativeRaf ?
+        function(callback) {
+          return nativeRaf(function() {
+            callback(performance.now());
+          });
+        } :
+        function( callback ){
+          return window.setTimeout(callback, 1000 / 60);
+        };
+    })();
+  }
+
+  if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = (function() {
+      return  window.webkitCancelAnimationFrame ||
+        window.mozCancelAnimationFrame ||
+        function(id) {
+          clearTimeout(id);
+        };
+    })();
+  }
+
+  // defaultPrevented is broken in IE.
+  // https://connect.microsoft.com/IE/feedback/details/790389/event-defaultprevented-returns-false-after-preventdefault-was-called
+  var workingDefaultPrevented = (function() {
+    var e = document.createEvent('Event');
+    e.initEvent('foo', true, true);
+    e.preventDefault();
+    return e.defaultPrevented;
+  })();
+
+  if (!workingDefaultPrevented) {
+    var origPreventDefault = Event.prototype.preventDefault;
+    Event.prototype.preventDefault = function() {
+      if (!this.cancelable) {
+        return;
+      }
+
+      origPreventDefault.call(this);
+
+      Object.defineProperty(this, 'defaultPrevented', {
+        get: function() {
+          return true;
+        },
+        configurable: true
+      });
+    };
+  }
+
+  var isIE = /Trident/.test(navigator.userAgent);
+
+  // CustomEvent constructor shim
+  if (!window.CustomEvent || isIE && (typeof window.CustomEvent !== 'function')) {
+    window.CustomEvent = function(inType, params) {
+      params = params || {};
+      var e = document.createEvent('CustomEvent');
+      e.initCustomEvent(inType, Boolean(params.bubbles), Boolean(params.cancelable), params.detail);
+      return e;
+    };
+    window.CustomEvent.prototype = window.Event.prototype;
+  }
+
+  // Event constructor shim
+  if (!window.Event || isIE && (typeof window.Event !== 'function')) {
+    var origEvent = window.Event;
+    window.Event = function(inType, params) {
+      params = params || {};
+      var e = document.createEvent('Event');
+      e.initEvent(inType, Boolean(params.bubbles), Boolean(params.cancelable));
+      return e;
+    };
+    window.Event.prototype = origEvent.prototype;
+  }
+
+})(window.WebComponents);

data/lib/written/app/assets/javascripts/written/uploaders/aws.coffee

@@ -0,0 +1,125 @@
+class Written.Uploaders.AWS
+  constructor: (settings) ->
+    Images.settings = settings
+
+  initialize: (node, observer) =>
+    img = node.querySelector('img')
+    container = node.querySelector('div')
+
+    node.dataset.uploadable = true
+    node.addEventListener 'written:uploader:error', @error, true
+    node.addEventListener 'written:uploader:uploading', @progress, true
+    node.addEventListener 'written:uploader:completed', @uploaded, true
+    node.addEventListener 'change', @input.bind(this, node, observer), true
+
+    container.addEventListener 'click', @open.bind(this, node), true
+    image = Images.get(img.dataset.image)
+    if image
+      image.node = node
+
+  open: (node, e) =>
+    node.querySelector('input')?.click()
+
+  uploaded: (e) =>
+    caption = e.target.querySelector('figcaption')
+    img = e.target.querySelector('img')
+
+    text = caption.childNodes[caption.childNodes.length - 1]
+    text.textContent = "(#{e.image.url})"
+    img.src = e.image.url
+    selection = window.getSelection()
+    selection.removeAllRanges()
+    range = document.createRange()
+    range.setEnd(text, text.textContent.length - 1)
+    selection.addRange(range)
+
+  error: (e) =>
+    console.log(e)
+
+  input: (node, history, e) =>
+    file = e.target.files[0]
+    @process(file, node, history)
+
+  process: (file, node) =>
+    caption = node.querySelector('figcaption')
+    progress = node.querySelector('div.progress')
+    filename = [Images.settings.namespace, @hash(file.name)].join('/')
+
+    image = Images.get(filename)
+    if !image
+      image = Images.upload(filename, file)
+
+    image.node = node
+    progress.style.width = image.progress
+    node.dataset.status = image.status
+
+    text = caption.childNodes[caption.childNodes.length - 1]
+    text.textContent = "(#{filename})"
+    selection = window.getSelection()
+    selection.removeAllRanges()
+    range = document.createRange()
+    range.setEnd(text, text.textContent.length - 1)
+    selection.addRange(range)
+
+  hash: (filename) ->
+    hash = 0
+    for i in [0..filename.length - 1]
+      hash += filename.charCodeAt(i) ^ hash
+
+    hash.toString('16')
+
+Images = new class
+  constructor: ->
+    @cache = {}
+
+  failed: (image, event) ->
+    image.status = 'failed'
+    
+    if image.node?
+      event = new CustomEvent('written:uploader:error', {bubbles: true})
+      event.image = image
+      image.node.dispatchEvent(event)
+
+  update: (image, event) ->
+    image.status = 'completed'
+
+    if image.node?
+      event = new CustomEvent('written:uploader:completed', {bubbles: true})
+      event.image = image
+      image.node.dispatchEvent(event)
+
+  upload: (name, file) =>
+    image = {
+      url: "#{@settings.url}/#{name}"
+      name: name
+      status: 'uploading'
+      progress: 0
+    }
+
+    form = new FormData()
+    form.append('key', name)
+    form.append('acl', 'private')
+    form.append("AWSAccessKeyId", @settings.accessKey)
+    form.append('policy', @settings.policy)
+    form.append('signature', @settings.signature)
+    form.append('Content-Type', file.type)
+    form.append('file', file, name)
+
+
+    image.xhr = @send(form, @settings.url)
+    image.xhr.addEventListener('load', @update.bind(this, image))
+    image.xhr.addEventListener('error', @failed.bind(this, image))
+
+    @cache[image.name] = image
+
+
+  get: (name) ->
+    @cache[name]
+
+  send: (form, url) =>
+    xhr = new XMLHttpRequest()
+    xhr.open('POST', url)
+    xhr.send(form)
+    xhr
+
+

data/lib/written/app/assets/stylesheets/written.scss

@@ -1,5 +1,6 @@
 [data-editor="written"] {
   white-space: pre-wrap;
+  padding: 1em;
 
   p {
     min-height: 1.2em;
@@ -13,20 +14,88 @@
     list-style-type: none;
   }
 
-  figure {
-    background: rgba(230,230,230,1);
+  blockquote {
+    background: #eee;
+    border-radius: 2px;
+    padding: 0.5em 1em;
 
-    & > div {
-      display: flex;
-      min-height: 200px;
+    p {
+      margin: 0;
+      font-style: italic;
     }
+  }
+}
 
-    img {
-      margin: auto;
-    }
+[data-editor="written"] figure > div {
+  position: relative;
+  display: flex;
+  padding: 4px;
 
-    figcaption {
-      padding: 4px;
-    }
+  &[data-uploadable] {
+    cursor: pointer;
+  }
+}
+
+[data-editor="written"] figure > div > div.progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: width 0.24s ease;
+}
+
+[data-editor="written"] figure[data-status='uploading'] div.progress {
+  background-color: green;
+  height: 1px;
+}
+
+[data-editor="written"] figure img {
+  border: 2px solid #eee;
+  min-height: 100px;
+  min-width: 100px;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
+
+  &.error {
+    border-color: #F32626
   }
 }
+
+[data-editor="written"] figure figcaption {
+  text-align: center;
+  font-size: 0.8em;
+  padding: 4px;
+}
+
+[data-editor="written"] figure input[type='file'] {
+  display: none;
+}
+
+[data-editor="written"] written-pre {
+  background: #f5f2f0;
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+[data-editor="written"] written-pre > code {
+  display: block;
+  white-space: pre-line;
+}

data/lib/written/version.rb

@@ -1,3 +1,3 @@
 module Written
-  VERSION = '0.0.5'
+  VERSION = '0.1.1'
 end

data/test/server/app/assets/javascripts/application.coffee

@@ -1,7 +1,25 @@
 #= require 'written'
 #= require 'prism'
 
-Written.Parsers.Block.get('Code').parseSyntax = (element) ->
+code = Written.Parsers.Block.get('Code').prototype
+code.highlight = (element) ->
   Prism.highlightElement(element, false)
 
-new Written(document.getElementById('Editor'))
+code = Written.Parsers.Inline.get('Code').prototype
+code.highlight = (element) ->
+  Prism.highlightElement(element, false)
+
+
+if window.AWS?
+  uploader = new Written.Uploaders.AWS({
+    bucket: AWS.bucket,
+    accessKey: AWS.accessKey,
+    policy: AWS.policy,
+    signature: AWS.signature
+  })
+
+  Written.Parsers.Block.get('Image').uploader(uploader)
+
+editor = new Written(document.getElementById('Editor'))
+editor.initialize()
+

data/test/server/app/assets/stylesheets/application.scss

@@ -6,6 +6,6 @@
   min-height: 450px;
   border: 1px solid gray;
   outline: none;
-
-  padding: 1em;
+  
+  padding: 1em 1em 30vh 1em;
 }

data/test/server/app/assets/stylesheets/prism.css

@@ -106,7 +106,6 @@ pre[class*="language-"] {
 .language-css .token.string,
 .style .token.string {
 	color: #a67f59;
-	background: hsla(0, 0%, 100%, .5);
 }
 
 .token.atrule,