ledge 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: be0aecb9d2290337c03bf425ae884b658502e971
+  data.tar.gz: 359ed51aa76479a9560cf13562673d507dcdbb49
+SHA512:
+  metadata.gz: 3d7054de79abf5916c979b0135866fc14f9c4690662b665f693f52acc331761ae3d7102f22a953f3fc8dd9e86cda6e968ae165a2d636b4ba487a4d73c7c09931
+  data.tar.gz: 6e656391bd4b58cf64b75b662d4c92b8af5e5ef59a2a3f5987037048422ff6d08522d9d9fa08b6334b4d69d0ad4b4507baa7dca901c21e816ea1feef0c94f5ec

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2015 YOURNAME
+
+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.rdoc

@@ -0,0 +1,3 @@
+= Ledge
+
+A wysiwyg page editor allowing advanced layouts of pages, with a simple interface

data/Rakefile

@@ -0,0 +1,32 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Ledge'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/ledge/index.coffee

@@ -0,0 +1,138 @@
+#= require ./rows/row
+#= require_tree ./rows
+
+String.prototype.capitalize = ->
+    @charAt(0).toUpperCase() + @slice(1)
+
+class Ledge
+  ROW_TYPES: [ Heading, Text ]
+  ROW_TYPE_PAIR: {}
+  ROW_ADD_HTML: ""
+
+  html_for: (type, content) ->
+    if type == "heading"
+      data = JSON.parse content
+      "<#{data["type"]}>#{data["text"]}</#{data["type"]}>"
+    else
+      content
+
+  object_for: (type, div) ->
+    if type == "heading"
+      type: type,
+      content: JSON.stringify
+        type: div.children().get(0).tagName.toLowerCase(),
+        text: $(div.children()[0]).text()
+    else
+      type: type,
+      content: div.html()
+
+  jsonify: (div) ->
+    json =
+      columns: []
+    div.children("div.__ledge_column").each (i) ->
+      json.columns.push {rows: []}
+      $(this).children("div.__ledge_row").each ->
+        json.columns[i].rows.push Ledge::object_for($(this).data("ledge-type"), $(this).children(".__ledge_row_content")) unless $(this).hasClass("__ledge_row_new")
+    JSON.stringify(json)
+
+  setup: ->
+
+    $("textarea#ledge").hide()
+    $("textarea#ledge").before("<div class='__ledge_edit'></div>")
+
+    data = JSON.parse($("textarea#ledge").text())
+    for column in data["columns"]
+      column_div = Ledge::create_column (col) ->
+        $("div.__ledge_edit").append(col)
+      Ledge::click_delete_column(column_div.find(".__ledge_delete"))
+      for row in column["rows"]
+        Ledge::create_row(row["type"], Ledge::html_for(row["type"], row["content"])).appendTo(column_div)
+
+    Ledge::refresh_row_adders()
+    Ledge::refresh_column_adders()
+    Ledge::update_textarea()
+
+  update_textarea: ->
+    $("textarea#ledge").text(Ledge::jsonify($("div.__ledge_edit")))
+
+  create_row: (type, content) ->
+    row = $("<div class='__ledge_row __ledge_row_#{type}' data-ledge-type='#{type}' contenteditable><div class='__ledge_options'></div><div class='__ledge_row_content'>#{content}</div></div>")
+    row.on "input", ->
+      Ledge::update_textarea()
+    if (Ledge::ROW_TYPE_PAIR[type] != undefined)
+      Ledge::add_options(Ledge::ROW_TYPE_PAIR[type], row.find(".__ledge_options"))
+    return row
+
+  create_column: (cb = ->) ->
+    column = $("<div class='__ledge_column'><div class='__ledge_options'><div class='__ledge_delete'>Delete</div></div><div class='__ledge_add'>+</div></div>")
+    cb(column)
+    Ledge::refresh_column_adders()
+    Ledge::refresh_row_adders()
+    Ledge::click_delete_column(column.find(".__ledge_delete"))
+    Ledge::update_textarea()
+    return column
+
+  refresh_column_adders: ->
+    $(".__ledge_add.__ledge_add_left").remove()
+    $(".__ledge_column").after("<div class='__ledge_add __ledge_add_left'><span>+</span></div>")
+    $(".__ledge_edit").prepend("<div class='__ledge_add __ledge_add_left'><span>+</span></div>")
+    $(".__ledge_add.__ledge_add_left").click ->
+      Ledge::create_column (col) =>
+        $(this).after(col)
+
+  refresh_row_adders: ->
+    $(".__ledge_column .__ledge_add").remove()
+    $(".__ledge_row").after("<div class='__ledge_add'>+</div>")
+    $(".__ledge_column").prepend("<div class='__ledge_add'>+</div>")
+    $(".__ledge_column .__ledge_add").click ->
+      row = Ledge::create_row "new", Ledge::ROW_ADD_HTML
+      row.attr("contenteditable", false)
+      $(this).after(row)
+      Ledge::refresh_row_adders()
+      row.find(".__ledge_add_item").click ->
+        type = $(this).attr("data-ledge-type")
+        index = $(this).attr("data-ledge-type-index")
+        Ledge::add_options(index, $(this).parent().parent().find(".__ledge_options"))
+        $(this).parent().parent()
+          .removeClass("__ledge_row_new")
+          .attr("contenteditable", true)
+          .addClass("__ledge_row_#{type}")
+          .attr("data-ledge-type", type)
+          .find(".__ledge_row_content")
+          .html(Ledge::ROW_TYPES[index]::initial_content)
+        Ledge::update_textarea()
+  click_delete_column: (del) ->
+    del.click ->
+      $(this).parent().parent().remove()
+      Ledge::update_textarea()
+      Ledge::refresh_column_adders()
+
+  click_delete_row: (del) ->
+    del.click ->
+      $(this).parent().parent().remove()
+      Ledge::update_textarea()
+      Ledge::refresh_row_adders()
+
+  add_options: (index, options) ->
+    options.html("");
+    for option in Ledge::ROW_TYPES[index]::options
+      $("<div>#{option}</div>")
+        .attr("data-ledge-option", option)
+        .attr("data-ledge-type-index", index)
+        .css("background-image", "url(#{Ledge::ROW_TYPES[index]::icons[option]})")
+        .click(->
+          cindex = $(this).attr("data-ledge-type-index")
+          Ledge::ROW_TYPES[index]::on_option($(this).parent().parent(), $(this).attr("data-ledge-option"))
+        ).appendTo(options)
+    options.append("<div class='__ledge_delete'>Delete</div>")
+    Ledge::click_delete_row(options.find(".__ledge_delete"))
+
+$(document).ready ->
+  for type, index in Ledge::ROW_TYPES
+    Ledge::ROW_ADD_HTML += "<div class='__ledge_add_item' data-ledge-type='#{type::type}' data-ledge-type-index='#{index}'>#{type::name}</div>"
+    Ledge::ROW_TYPE_PAIR[type::type] = index
+  Ledge::setup()
+$(document).on 'page:load', ->
+  Ledge::setup()
+
+window.Ledge = Ledge

data/app/assets/javascripts/ledge/rows/heading.coffee

@@ -0,0 +1,20 @@
+class Heading extends Row
+  type: "heading"
+  name: "Heading"
+  initial_content: "<h1>Heading</h1>"
+  options: ["H1", "H2", "H3", "H4", "H5", "H6"]
+  icons:
+    "H1": "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_1.png"
+    "H2": "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_2.png"
+    "H3": "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_3.png"
+    "H4": "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_4.png"
+    "H5": "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_5.png"
+    "H6": "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_6.png"
+
+  on_option: (row, option) ->
+    text = $(row).find(".__ledge_row_content").children().text()
+    text = "Heading" if text == ""
+    $(row).find(".__ledge_row_content").html("<#{option}>#{text}</#{option}>")
+    Ledge::update_textarea()
+
+window.Heading = Heading

data/app/assets/javascripts/ledge/rows/heading.rb

@@ -0,0 +1,19 @@
+class Heading < Row
+  @@type = "heading"
+  @@name = "Heading"
+  @@initial_content = "<h1>Heading</h1>"
+  @@options = ["H1", "H2", "H3", "H4", "H5", "H6"]
+  @@icons = {
+    h1: "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_1.png",
+    h2: "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_2.png",
+    h3: "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_3.png",
+    h4: "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_4.png",
+    h5: "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_5.png",
+    h6: "https://cdn1.iconfinder.com/data/icons/silk2/text_heading_6.png"
+  }
+
+  def on_option row, option
+    text = jQuery(row).find("__ledge_row_content").children.text
+    jQuery(row).find("__ledge_row_content").html("<#{option}>#{text}</#{option}>")
+  end
+end

data/app/assets/javascripts/ledge/rows/row.coffee

@@ -0,0 +1,9 @@
+class Row
+  type: "row"
+  name: "Row"
+  initial_content: ""
+  options: []
+  icons: {}
+  on_option: (row, option) ->
+
+window.Row = Row

data/app/assets/javascripts/ledge/rows/row.rb

@@ -0,0 +1,9 @@
+class Row
+  @@type = ""
+  @@name = ""
+  @@initial_content = ""
+  @@options = []
+  @@icons = {}
+
+  def on_option row, option; end
+end

data/app/assets/javascripts/ledge/rows/text.coffee

@@ -0,0 +1,6 @@
+class Text extends Row
+  type: "text"
+  name: "Text"
+  initial_content: "<p>Your text here..</p>"
+
+window.Text = Text

data/app/assets/javascripts/ledge/rows/text.rb

@@ -0,0 +1,5 @@
+class Text < Row
+  @@type = "text"
+  @@name = "Text"
+  @@initial_content = "<p>Your text here..</p>"
+end

data/app/assets/stylesheets/ledge/index.scss

@@ -0,0 +1,165 @@
+.__ledge_edit {
+  display: table;
+
+  .__ledge_column{
+    position: relative;
+    min-width: 200px;
+    box-sizing: border-box;
+    display: table-cell;
+    border: 1px dashed gray;
+    padding: 10px;
+    border-radius: 5px;
+  }
+
+  .__ledge_row {
+    position: relative;
+    min-height: 36px;
+    line-height: 36px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    transition: 0.15s all;
+
+    .__ledge_options {
+      visibility: hidden;
+      transition: 0.2s all;
+      opacity: 0;
+    }
+
+    &:hover {
+      background: #ECEFF1;
+
+      .__ledge_options {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    &.__ledge_row_new {
+      background: #ECEFF1;
+      margin: 10px 0;
+      text-align: center;
+      padding: 10px 20px;
+
+      // .__ledge_delete {
+      //   border-top-left-radius: 0;
+      //   border-bottom-right-radius: 0;
+      // }
+
+      .__ledge_row_content {
+        margin: auto;
+        display: inline-block;
+
+        .__ledge_add_item {
+          background-color: #607D8B;
+          color: white;
+          cursor: pointer;
+          margin: 0 5px;
+          display: inline-block;
+          line-height: 30px;
+          padding: 0 8px;
+          border-radius: 5px;
+        }
+
+        &:after {
+          content: "";
+          display: table;
+          clear: both;
+        }
+      }
+
+      &:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+    }
+  }
+
+  .__ledge_add {
+    text-align: center;
+    color: #444;
+    border-radius: 5px;
+    transition: 0.15s all;
+    padding: 10px 0;
+    font-size: 20pt;
+    height: 20px;
+    overflow: hidden;
+    cursor: pointer;
+
+    &.__ledge_add_left {
+      position: relative;
+      min-width: 30px;
+      text-align: center;
+      display: table-cell;
+
+      span {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 50%;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 30px;
+        text-align: center;
+      }
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, .05);
+    }
+  }
+
+  .__ledge_options {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: rgba(255, 255, 255, .8);
+    border-bottom-left-radius: 5px;
+    border-top-right-radius: 5px;
+
+    > div {
+      transition: 0.15s all;
+      text-indent: -100000px;
+      width: 32px;
+      height: 32px;
+      background-position: center;
+      background-repeat: no-repeat;
+      cursor: pointer;
+      float:left;
+
+      &:hover {
+        background-color: rgba(255, 0, 0, .4);
+      }
+    }
+
+    .__ledge_delete {
+      background-image: url(https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519583-080_Trash-16.png);
+    }
+
+    .__ledge_settings {
+      background-image: url(https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/settings-16.png);
+    }
+
+    :last-child {
+      border-top-right-radius: 5px;
+    }
+
+    :first-child {
+      border-bottom-left-radius: 5px;
+    }
+  }
+}
+
+.__ledge_content {
+  display: table;
+  .__ledge_column {
+    padding-right: 20px;
+    display: table-cell;
+    min-width: 200px;
+    box-sizing: border-box;
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+}

data/lib/ledge/column.rb

@@ -0,0 +1,20 @@
+require "ledge/row"
+
+module Ledge
+  class Column
+    def initialize data
+      @rows = []
+      data["rows"].each do |row|
+        @rows << Ledge::Row.row_from(row)
+      end
+    end
+
+    def render
+      r = ""
+      @rows.each do |row|
+        r << "<div class='__ledge_row'>#{row.render}</div>"
+      end
+      r
+    end
+  end
+end

data/lib/ledge/columns.rb

@@ -0,0 +1,21 @@
+require "ledge/column"
+
+module Ledge
+  class Columns
+    def initialize data
+      @columns = []
+      data["columns"].each do |column|
+        @columns << Ledge::Column.new(column)
+      end
+    end
+
+    def render
+      r = "<div class='__ledge_content'>"
+      @columns.each do |column|
+        r << "<div class='__ledge_column'>#{column.render}</div>"
+      end
+      r << "</div>"
+      r.html_safe
+    end
+  end
+end

data/lib/ledge/row.rb

@@ -0,0 +1,25 @@
+require "ledge/row_heading"
+
+module Ledge
+  class Row
+    ROW_TYPES = {
+      "heading" => Ledge::RowHeading
+    }
+
+    def self.row_from data
+      unless ROW_TYPES[data["type"]].nil?
+        ROW_TYPES[data["type"]].new data["content"]
+      else
+        Ledge::Row.new data["content"]
+      end
+    end
+
+    def initialize content
+      @content = content
+    end
+
+    def render
+      @content
+    end
+  end
+end

data/lib/ledge/row_heading.rb

@@ -0,0 +1,13 @@
+module Ledge
+  class RowHeading
+    def initialize data
+      content = JSON.parse data
+      @heading_type = content["type"]
+      @text = content["text"]
+    end
+
+    def render
+      "<#{@heading_type}>#{@text}</#{@heading_type}>"
+    end
+  end
+end

data/lib/ledge/uses_ledge.rb

@@ -0,0 +1,50 @@
+require "ledge/columns"
+
+module Ledge
+  module UsesLedge
+    extend ActiveSupport::Concern
+
+    included do
+    end
+
+    module ClassMethods
+      def uses_ledge options = {}
+        cattr_accessor :field
+        self.field = (options[:field] || :content).to_s
+
+        include Ledge::UsesLedge::LocalInstanceMethods
+      end
+    end
+
+    module LocalInstanceMethods
+
+      def method_missing method, *args, &block
+        if method.to_s == "#{self.field}_ledge"
+          content = JSON.parse read_attribute(self.class.field)
+          return Ledge::Columns.new content
+        else
+          super
+        end
+      end
+
+      def respond_to? method
+        if method.to_s == "#{self.field}_ledge"
+          true
+        else
+          super
+        end
+      end
+
+      def ledge_init
+        self.content ||= '{"columns": [{"rows":[]}]}'
+      end
+
+      def initialize hash = {}
+        super
+        ledge_init
+      end
+    end
+  end
+end
+
+ActiveRecord::Base.send :include, Ledge::UsesLedge

data/lib/ledge/version.rb

@@ -0,0 +1,3 @@
+module Ledge
+  VERSION = "0.1.0"
+end

data/lib/ledge.rb

@@ -0,0 +1,6 @@
+require "ledge/uses_ledge"
+
+module Ledge
+  class Engine < Rails::Engine
+  end
+end

data/lib/tasks/ledge_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :ledge do
+#   # Task goes here
+# end

data/test/dummy/README.rdoc

@@ -0,0 +1,28 @@
+== README
+
+This README would normally document whatever steps are necessary to get the
+application up and running.
+
+Things you may want to cover:
+
+* Ruby version
+
+* System dependencies
+
+* Configuration
+
+* Database creation
+
+* Database initialization
+
+* How to run the test suite
+
+* Services (job queues, cache servers, search engines, etc.)
+
+* Deployment instructions
+
+* ...
+
+
+Please feel free to use a different markup language if you do not plan to run
+<tt>rake doc:app</tt>.

data/test/dummy/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+Rails.application.load_tasks

data/test/dummy/app/assets/javascripts/application.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_tree .
+//= require ledge