volt-wysiwyg 0.0.1

data/app/wysiwyg/config/dependencies.rb

@@ -0,0 +1 @@
+# Component dependencies

data/app/wysiwyg/config/routes.rb

@@ -0,0 +1 @@
+# Component routes

data/app/wysiwyg/controllers/main_controller.rb

@@ -0,0 +1,49 @@
+module Wysiwyg
+  class MainController < Volt::ModelController
+    attr_reader :quill
+
+    def index_ready
+      @updating_attribute = false
+      %x{
+        var quill = new Quill('.quill-editor', {
+          modules: {
+            'toolbar': {
+              container: '.toolbar-container'
+            },
+            'link-tooltip': true,
+            'image-tooltip': true
+          },
+          styles: false,
+          theme: 'snow'
+        });
+        #{@quill} = quill
+
+        quill.on('text-change', function(){
+          if (!self.updating_editor) {
+            #{@updating_attribute = true }
+            #{new_text = nil ; puts 'updating'}
+            new_text = quill.getHTML();
+            #{ attrs.text = new_text }
+            setImmediate(function(){ #{ @updating_attribute = false } });
+          }
+        });
+      }
+
+      @computation = -> { update_text(attrs.text) }.watch!
+    end
+
+    def before_index_remove
+      @computation.stop
+    end
+
+    def update_text(new_text)
+      unless @updating_attribute
+        @updating_editor = true
+        puts 'updating text'
+         `#{quill}.setHTML(#{new_text || ''})`
+        @updating_editor = false
+      end
+    end
+
+  end
+end

data/app/wysiwyg/views/main/editor.html

@@ -0,0 +1,2 @@
+<:Body>
+  <div class="quill-editor"><div></div></div>

data/app/wysiwyg/views/main/fonts.html

@@ -0,0 +1,9 @@
+<select title="Font" class="ql-font">
+  <option value="Futura" selected>Futura</option>
+  <option value="Impact" selected>Impact</option>
+  <option value="Georgia, serif">Georgia</option>
+  <option value="Copperplate" selected>Copperplate</option>
+  <option value="'Brush Script MT', cursive" selected>Brush Script</option>
+  <option value="sans-serif" selected>Sans Serif</option>
+  <option value="Monaco, 'Courier New', monospace">Courier</option>
+</select>

data/app/wysiwyg/views/main/index.html

@@ -0,0 +1,3 @@
+<:Body>
+  <:toolbar></:toolbar>
+  <:editor/>

data/app/wysiwyg/views/main/toolbar.html

@@ -0,0 +1,96 @@
+<:Body>
+  <div class="toolbar-container"><span class="ql-format-group">
+    <:fonts/>
+    <select title="Size" class="ql-size">
+      <option value="10px">Small</option>
+      <option value="13px" selected>Normal</option>
+      <option value="18px">Large</option>
+      <option value="32px">Huge</option>
+    </select></span><span class="ql-format-group"><span title="Bold" class="ql-format-button ql-bold"></span><span class="ql-format-separator"></span><span title="Italic" class="ql-format-button ql-italic"></span><span class="ql-format-separator"></span><span title="Underline" class="ql-format-button ql-underline"></span></span><span class="ql-format-group">
+    <:textcolors/>
+    <span class="ql-format-separator"></span>
+    <:backgroundcolors/>
+    <span class="ql-format-separator"></span>
+    <select title="Text Alignment" class="ql-align">
+      <option value="left" selected></option>
+      <option value="center"></option>
+      <option value="right"></option>
+      <option value="justify"></option>
+    </select></span><span class="ql-format-group"><span title="Link" class="ql-format-button ql-link"></span><span class="ql-format-separator"></span><span title="Image" class="ql-format-button ql-image"></span><span class="ql-format-separator"></span><span title="List" class="ql-format-button ql-list"></span></span></div>
+
+<:Textcolors>
+  <select title="Text Color" class="ql-color">
+    <option value="rgb(0, 0, 0)" selected></option>
+    <option value="rgb(230, 0, 0)"></option>
+    <option value="rgb(255, 153, 0)"></option>
+    <option value="rgb(255, 255, 0)"></option>
+    <option value="rgb(0, 138, 0)"></option>
+    <option value="rgb(0, 102, 204)"></option>
+    <option value="rgb(153, 51, 255)"></option>
+    <option value="rgb(255, 255, 255)"></option>
+    <option value="rgb(250, 204, 204)"></option>
+    <option value="rgb(255, 235, 204)"></option>
+    <option value="rgb(255, 255, 204)"></option>
+    <option value="rgb(204, 232, 204)"></option>
+    <option value="rgb(204, 224, 245)"></option>
+    <option value="rgb(235, 214, 255)"></option>
+    <option value="rgb(187, 187, 187)"></option>
+    <option value="rgb(240, 102, 102)"></option>
+    <option value="rgb(255, 194, 102)"></option>
+    <option value="rgb(255, 255, 102)"></option>
+    <option value="rgb(102, 185, 102)"></option>
+    <option value="rgb(102, 163, 224)"></option>
+    <option value="rgb(194, 133, 255)"></option>
+    <option value="rgb(136, 136, 136)"></option>
+    <option value="rgb(161, 0, 0)"></option>
+    <option value="rgb(178, 107, 0)"></option>
+    <option value="rgb(178, 178, 0)"></option>
+    <option value="rgb(0, 97, 0)"></option>
+    <option value="rgb(0, 71, 178)"></option>
+    <option value="rgb(107, 36, 178)"></option>
+    <option value="rgb(68, 68, 68)"></option>
+    <option value="rgb(92, 0, 0)"></option>
+    <option value="rgb(102, 61, 0)"></option>
+    <option value="rgb(102, 102, 0)"></option>
+    <option value="rgb(0, 55, 0)"></option>
+    <option value="rgb(0, 41, 102)"></option>
+    <option value="rgb(61, 20, 102)"></option>
+  </select>
+<:Backgroundcolors>
+  <select title="Background Color" class="ql-background">
+    <option value="rgb(0, 0, 0)"></option>
+    <option value="rgb(230, 0, 0)"></option>
+    <option value="rgb(255, 153, 0)"></option>
+    <option value="rgb(255, 255, 0)"></option>
+    <option value="rgb(0, 138, 0)"></option>
+    <option value="rgb(0, 102, 204)"></option>
+    <option value="rgb(153, 51, 255)"></option>
+    <option value="rgb(255, 255, 255)" selected></option>
+    <option value="rgb(250, 204, 204)"></option>
+    <option value="rgb(255, 235, 204)"></option>
+    <option value="rgb(255, 255, 204)"></option>
+    <option value="rgb(204, 232, 204)"></option>
+    <option value="rgb(204, 224, 245)"></option>
+    <option value="rgb(235, 214, 255)"></option>
+    <option value="rgb(187, 187, 187)"></option>
+    <option value="rgb(240, 102, 102)"></option>
+    <option value="rgb(255, 194, 102)"></option>
+    <option value="rgb(255, 255, 102)"></option>
+    <option value="rgb(102, 185, 102)"></option>
+    <option value="rgb(102, 163, 224)"></option>
+    <option value="rgb(194, 133, 255)"></option>
+    <option value="rgb(136, 136, 136)"></option>
+    <option value="rgb(161, 0, 0)"></option>
+    <option value="rgb(178, 107, 0)"></option>
+    <option value="rgb(178, 178, 0)"></option>
+    <option value="rgb(0, 97, 0)"></option>
+    <option value="rgb(0, 71, 178)"></option>
+    <option value="rgb(107, 36, 178)"></option>
+    <option value="rgb(68, 68, 68)"></option>
+    <option value="rgb(92, 0, 0)"></option>
+    <option value="rgb(102, 61, 0)"></option>
+    <option value="rgb(102, 102, 0)"></option>
+    <option value="rgb(0, 55, 0)"></option>
+    <option value="rgb(0, 41, 102)"></option>
+    <option value="rgb(61, 20, 102)"></option>
+  </select>

data/example/.gitignore

@@ -0,0 +1,9 @@
+.bundle
+.config
+.yardoc
+tmp
+.idea
+.yardoc
+.sass-cache
+.DS_Store
+compiled

data/example/Gemfile

@@ -0,0 +1,21 @@
+source 'https://rubygems.org'
+
+gem 'volt', '0.9.0'
+gem 'volt-bootstrap', '~> 0.0.10'
+gem 'volt-bootstrap_jumbotron_theme', '~> 0.1.0'
+gem 'volt-user_templates', '~> 0.1.3'
+gem 'volt-wysiwyg', path: '../'
+
+group :development, :test do
+  gem 'rspec', '~> 3.2.0'
+  gem 'opal-rspec', '~> 0.4.2'
+  gem 'capybara', '~> 2.4.2'
+  gem 'selenium-webdriver', '~> 2.43.0'
+  gem 'chromedriver2-helper', '~> 0.0.8'
+  gem 'poltergeist', '~> 1.5.0'
+end
+
+platform :mri do
+  gem 'thin', '~> 1.6.0'
+  gem 'bson_ext', '~> 1.9.0'
+end

data/example/README.md

@@ -0,0 +1,4 @@
+# Place your app's docs here.
+
+## New to Volt?
+Be sure to read the volt docs at http://docs.voltframework.com

data/example/app/main/assets/css/app.css.scss

@@ -0,0 +1 @@
+// Place your apps css here

data/example/app/main/config/dependencies.rb

@@ -0,0 +1,5 @@
+component 'bootstrap'
+component 'bootstrap_jumbotron_theme'
+component 'user_templates'
+component 'wysiwyg'
+

data/example/app/main/config/routes.rb

@@ -0,0 +1,11 @@
+# See https://github.com/voltrb/volt#routes for more info on routes
+
+client '/about', action: 'about'
+
+# Routes for login and signup, provided by user_templates component gem
+client '/signup', component: 'user_templates', controller: 'signup'
+client '/login', component: 'user_templates', controller: 'login'
+
+# The main route, this should be last. It will match any params not
+# previously matched.
+client '/', {}

data/example/app/main/controllers/main_controller.rb

@@ -0,0 +1,38 @@
+# By default Volt generates this controller for your Main component
+module Main
+  class MainController < Volt::ModelController
+
+    def index
+      # Add code for when the index view is loaded
+      self.model = store._posts.fetch_first do |post|
+        if post
+          next post
+        else
+          store._posts.append({text: ''}).then do |post|
+            next post
+          end
+        end
+      end
+
+    end
+
+    def about
+      # Add code for when the about view is loaded
+    end
+
+    private
+
+    # The main template contains a #template binding that shows another
+    # template.  This is the path to that template.  It may change based
+    # on the params._component, params._controller, and params._action values.
+    def main_path
+      "#{params._component || 'main'}/#{params._controller || 'main'}/#{params._action || 'index'}"
+    end
+
+    # Determine if the current nav component is the active one by looking
+    # at the first part of the url against the href attribute.
+    def active_tab?
+      url.path.split('/')[1] == attrs.href.split('/')[1]
+    end
+  end
+end

data/example/app/main/models/user.rb

@@ -0,0 +1,4 @@
+# By default Volt generates this User model which inherits from Volt::User,
+# you can rename this if you want.
+class User < Volt::User
+end

data/example/app/main/views/main/about.html

@@ -0,0 +1,8 @@
+<:Title>
+  About
+
+<:Body>
+  <h1>About</h1>
+
+  <p>About page...</p>
+  <:wysiwyg text='hi' />

data/example/app/main/views/main/index.html

@@ -0,0 +1,9 @@
+<:Title>
+  Home
+
+<:Body>
+  <h1>Home</h1>
+<:wysiwyg text='{{_text}}' />
+
+<input value='{{_text}}'/>
+

data/example/app/main/views/main/main.html

@@ -0,0 +1,29 @@
+<:Title>
+  {{ view main_path, "title", {controller_group: 'main'} }}
+
+<:Body>
+  <div class="container">
+    <div class="header">
+      <ul class="nav nav-pills pull-right">
+        <:nav href="/">Home</:nav>
+        <:nav href="/about">About</:nav>
+        <:user_templates:menu />
+      </ul>
+      <h3 class="text-muted">example_app</h3>
+    </div>
+    
+    <:volt:notices />
+
+    {{ view main_path, 'body', {controller_group: 'main'} }}
+
+    <div class="footer">
+      <p>&copy; Company {{ Time.now.year }}</p>
+    </div>
+
+  </div>
+
+<:Nav>
+  <li class="{{ if active_tab? }}active{{ end }}">
+    <a href="{{ attrs.href }}">{{ yield }}</a>
+  </li>
+

data/example/app/wysiwyg/views/main/fonts.html

@@ -0,0 +1,8 @@
+ <:Body>
+  <select title="Font" class="ql-font">
+    <option value="Impact" selected>Impact</option>
+    <option value="Georgia, serif">Georgia</option>
+    <option value="Copperplate" selected>Copperplate</option>
+    <option value="Monaco, 'Courier New', monospace">Monaco</option>
+    <option value="Futura" selected>Futura</option>
+  </select>

data/example/config.ru

@@ -0,0 +1,4 @@
+# Run via rack server
+require 'bundler/setup'
+require 'volt/server'
+run Volt::Server.new.app

data/example/config/app.rb

@@ -0,0 +1,41 @@
+Volt.configure do |config|
+  # Setup your global app config here.
+
+  # Your app secret is used for signing things like the user cookie so it can't
+  # be tampered with.  A random value is generated on new projects that will work
+  # without the need to customize.  Make sure this value doesn't leave your server.
+  #
+  # For added security we reccomend moving the app secret into an enviromnet.  You can
+  # setup that like so:
+  #
+  # config.app_secret = ENV['APP_SECRET']
+  #
+  config.app_secret = 'EqMyXlQMFmTqx6EeYKkp5E3xzCu8zzAO3wfnVa-Pm0DvEfk2Bymi_bypIWgXGG3D_a0'
+
+  # Data updates from the client come in via Tasks.  The task dispatcher logs all calls to tasks.
+  # By default hashes in the arguments can be filtered based on keys.  So any hash with a key of
+  # password will be filtered.  You can add more fields to filter below:
+  config.filter_keys = [:password]
+
+  # Database config all start with db_ and can be set either in the config
+  # file or with an environment variable (DB_NAME for example).
+
+  # config.db_driver = 'mongo'
+  # config.db_name = (config.app_name + '_' + Volt.env.to_s)
+  # config.db_host = 'localhost'
+  # config.db_port = 27017
+
+  # Compression options
+
+  # If you are not running behind something like nginx in production, you can
+  # have rack deflate all files.
+  # config.deflate = true
+
+  # Public configurations
+  # Anything under config.public will be sent to the client as well as the server,
+  # so be sure no private data ends up under public
+
+  # Use username instead of email as the login
+  # config.public.auth.use_username = true
+
+end

data/example/config/base/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <% javascript_files.each do |javascript_file| %>
+      <script src="<%= javascript_file %>"></script>
+    <% end %>
+
+    <% css_files.each do |css_file| %>
+      <link href="<%= css_file %>" media="all" rel="stylesheet" type="text/css" />
+    <% end %>
+  </head>
+  <body>
+
+  </body>
+</html>

data/example/quill_examples/examples/advanced.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Quill Pretty Editor Demo</title>
+    <link rel="stylesheet" type="text/css" href="../quill.snow.css">
+    <link rel="stylesheet" type="text/css" href="styles/advanced.css">
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <div id="content-container">
+      <div class="basic-wrapper">
+        <div class="toolbar-container">
+          <select title="Font" class="ql-font">
+            <option value="sans-serif" selected>Sans Serif</option>
+            <option value="Georgia, serif">Serif</option>
+            <option value="Monaco, 'Courier New', monospace">Monospace</option>
+          </select>
+          <select title="Size" class="ql-size">
+            <option value="10px">Small</option>
+            <option value="13px" selected>Normal</option>
+            <option value="18px">Large</option>
+            <option value="32px">Huge</option>
+          </select>
+          <select title="Text Alignment" class="ql-align">
+            <option value="left" selected>Left</option>
+            <option value="center">Center</option>
+            <option value="right">Right</option>
+            <option value="justify">Justify</option>
+          </select>
+          <button title="Bold" class="ql-bold">Bold</button>
+          <button title="Italic" class="ql-italic">Italic</button>
+          <button title="Underline" class="ql-underline">Under</button>
+          <button title="List" class="ql-list">List</button>
+        </div>
+        <div class="editor-container"></div>
+      </div>
+      <div class="advanced-wrapper">
+        <div class="toolbar-container"><span class="ql-format-group">
+            <select title="Font" class="ql-font">
+              <option value="sans-serif" selected>Sans Serif</option>
+              <option value="Georgia, serif">Serif</option>
+              <option value="Monaco, 'Courier New', monospace">Monospace</option>
+            </select>
+            <select title="Size" class="ql-size">
+              <option value="10px">Small</option>
+              <option value="13px" selected>Normal</option>
+              <option value="18px">Large</option>
+              <option value="32px">Huge</option>
+            </select></span><span class="ql-format-group"><span title="Bold" class="ql-format-button ql-bold"></span><span class="ql-format-separator"></span><span title="Italic" class="ql-format-button ql-italic"></span><span class="ql-format-separator"></span><span title="Underline" class="ql-format-button ql-underline"></span></span><span class="ql-format-group">
+            <select title="Text Color" class="ql-color">
+              <option value="rgb(0, 0, 0)" selected></option>
+              <option value="rgb(230, 0, 0)"></option>
+              <option value="rgb(255, 153, 0)"></option>
+              <option value="rgb(255, 255, 0)"></option>
+              <option value="rgb(0, 138, 0)"></option>
+              <option value="rgb(0, 102, 204)"></option>
+              <option value="rgb(153, 51, 255)"></option>
+              <option value="rgb(255, 255, 255)"></option>
+              <option value="rgb(250, 204, 204)"></option>
+              <option value="rgb(255, 235, 204)"></option>
+              <option value="rgb(255, 255, 204)"></option>
+              <option value="rgb(204, 232, 204)"></option>
+              <option value="rgb(204, 224, 245)"></option>
+              <option value="rgb(235, 214, 255)"></option>
+              <option value="rgb(187, 187, 187)"></option>
+              <option value="rgb(240, 102, 102)"></option>
+              <option value="rgb(255, 194, 102)"></option>
+              <option value="rgb(255, 255, 102)"></option>
+              <option value="rgb(102, 185, 102)"></option>
+              <option value="rgb(102, 163, 224)"></option>
+              <option value="rgb(194, 133, 255)"></option>
+              <option value="rgb(136, 136, 136)"></option>
+              <option value="rgb(161, 0, 0)"></option>
+              <option value="rgb(178, 107, 0)"></option>
+              <option value="rgb(178, 178, 0)"></option>
+              <option value="rgb(0, 97, 0)"></option>
+              <option value="rgb(0, 71, 178)"></option>
+              <option value="rgb(107, 36, 178)"></option>
+              <option value="rgb(68, 68, 68)"></option>
+              <option value="rgb(92, 0, 0)"></option>
+              <option value="rgb(102, 61, 0)"></option>
+              <option value="rgb(102, 102, 0)"></option>
+              <option value="rgb(0, 55, 0)"></option>
+              <option value="rgb(0, 41, 102)"></option>
+              <option value="rgb(61, 20, 102)"></option>
+            </select><span class="ql-format-separator"></span>
+            <select title="Background Color" class="ql-background">
+              <option value="rgb(0, 0, 0)"></option>
+              <option value="rgb(230, 0, 0)"></option>
+              <option value="rgb(255, 153, 0)"></option>
+              <option value="rgb(255, 255, 0)"></option>
+              <option value="rgb(0, 138, 0)"></option>
+              <option value="rgb(0, 102, 204)"></option>
+              <option value="rgb(153, 51, 255)"></option>
+              <option value="rgb(255, 255, 255)" selected></option>
+              <option value="rgb(250, 204, 204)"></option>
+              <option value="rgb(255, 235, 204)"></option>
+              <option value="rgb(255, 255, 204)"></option>
+              <option value="rgb(204, 232, 204)"></option>
+              <option value="rgb(204, 224, 245)"></option>
+              <option value="rgb(235, 214, 255)"></option>
+              <option value="rgb(187, 187, 187)"></option>
+              <option value="rgb(240, 102, 102)"></option>
+              <option value="rgb(255, 194, 102)"></option>
+              <option value="rgb(255, 255, 102)"></option>
+              <option value="rgb(102, 185, 102)"></option>
+              <option value="rgb(102, 163, 224)"></option>
+              <option value="rgb(194, 133, 255)"></option>
+              <option value="rgb(136, 136, 136)"></option>
+              <option value="rgb(161, 0, 0)"></option>
+              <option value="rgb(178, 107, 0)"></option>
+              <option value="rgb(178, 178, 0)"></option>
+              <option value="rgb(0, 97, 0)"></option>
+              <option value="rgb(0, 71, 178)"></option>
+              <option value="rgb(107, 36, 178)"></option>
+              <option value="rgb(68, 68, 68)"></option>
+              <option value="rgb(92, 0, 0)"></option>
+              <option value="rgb(102, 61, 0)"></option>
+              <option value="rgb(102, 102, 0)"></option>
+              <option value="rgb(0, 55, 0)"></option>
+              <option value="rgb(0, 41, 102)"></option>
+              <option value="rgb(61, 20, 102)"></option>
+            </select><span class="ql-format-separator"></span>
+            <select title="Text Alignment" class="ql-align">
+              <option value="left" selected></option>
+              <option value="center"></option>
+              <option value="right"></option>
+              <option value="justify"></option>
+            </select></span><span class="ql-format-group"><span title="Link" class="ql-format-button ql-link"></span><span class="ql-format-separator"></span><span title="Image" class="ql-format-button ql-image"></span><span class="ql-format-separator"></span><span title="List" class="ql-format-button ql-list"></span></span></div>
+        <div class="editor-container"></div>
+      </div>
+    </div>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
+    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
+    <script type="text/javascript" src="../quill.js"></script>
+    <script type="text/javascript" src="scripts/advanced.js"></script>
+  </body>
+</html>