sketchily 0.0.2

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2013 Rice University
+
+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

@@ -0,0 +1,39 @@
+# Sketchily
+
+Sketchily allows the easy integration of svg-edit with any rails application.
+Currently supports and provides svg-edit-2.6.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'sketchily'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install sketchily
+
+## Usage
+
+Sketchily adds new form elements which can be accessed by calling f.sketchily or simply sketchily from inside a form_for |f| or sketchily_tag from inside a form_tag.
+Both of these functions work exactly like the equivalent hidden_field functions, except that svg-edit is displayed instead.
+The f.sketchily format accepts a method name and an options hash.
+The sketchily format accepts an object name, a method name and an options hash.
+The sketchily_tag format accepts a tag name, the svg string to be edited and an options hash.
+Currently available options are width, height, show_menu (true if you want svg-edit's menu to be displayed), hide_image_tool (true if you want to hide the image tool button), canvas_width (number specifying initial canvas width), canvas_height (number specifying initial canvas height), canvas_expansion (0 if you want to disable scrolling), hide_rulers (true if you want to hide the canvas rulers) and other standard html attributes for the input tag.
+It is recommended that the database entries associated with sketchily form elements be of type 'text'.
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Create specs for your feature
+4. Ensure that all specs pass
+5. Commit your changes (`git commit -am 'Add some feature'`)
+6. Push to the branch (`git push origin my-new-feature`)
+7. Create new pull request
+

data/Rakefile

@@ -0,0 +1,40 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Sketchily'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+
+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/helpers/sketchily.rb~

@@ -0,0 +1,10 @@
+module Sketchily
+  def sketchily_show(uri, options = {})
+    "<img src='data:image/svg+xml;base64,#{uri}' #{"width='#{options[:width]}'" if options[:width]} #{"height='#{options[:height]}'" if options[:height]}/>".html_safe
+  end
+
+  def svg_show(uri, options = {})
+    sketchily_show(uri, options)
+  end
+end
+

data/app/helpers/sketchily_helper.rb

@@ -0,0 +1,10 @@
+module SketchilyHelper
+  def sketchily_show(uri, options = {})
+    "<img src='data:image/svg+xml;base64,#{uri}' #{"width='#{options[:width]}'" if options[:width]} #{"height='#{options[:height]}'" if options[:height]}/>".html_safe
+  end
+
+  def svg_show(uri, options = {})
+    sketchily_show(uri, options)
+  end
+end
+

data/app/views/sketchily/_embed.html.erb

@@ -0,0 +1,28 @@
+<% # Clients of this partial must supply the following variables:
+   # id
+   # value
+   #
+   # Additionally, they may override the following variables:
+   show_menu ||= false
+   hide_image_tool ||= false
+   canvas_width ||= 640
+   canvas_height ||= 480
+   canvas_expansion ||= 3
+   hide_rulers ||= false
+   width ||= "750px"
+   height ||= "650px" %>
+
+<%= javascript_include_tag "embedapi" %>
+<%= javascript_include_tag "svgutils" %>
+
+<script type="text/javascript">
+  <%= render :partial => "sketchily/embed",
+             :formats => :js,
+             :locals => {:id => id,
+                         :value => value,
+                         :show_menu => show_menu,
+                         :hide_image_tool => hide_image_tool} %>
+</script>
+
+<iframe src="/assets/svg-editor.html?source=&dimensions=<%= "#{canvas_width},#{canvas_height}" %>&canvas_expansion=<%= canvas_expansion %>&showRulers=<%= !hide_rulers %>"
+  width="<%= width %>" height="<%= height %>" id="svgedit_<%= id %>" onload="initEmbed_<%= id %>();"></iframe>

data/app/views/sketchily/_embed.html.erb~

@@ -0,0 +1,28 @@
+<% # Clients of this partial must supply the following variables:
+   # id
+   # value
+   #
+   # Additionally, they may override the following variables:
+   show_menu ||= false
+   hide_image_tool ||= false
+   canvas_width ||= 640,
+   canvas_height ||= 480,
+   canvas_expansion ||= 3
+   hide_rulers ||= false
+   width ||= "750px"
+   height ||= "650px" %>
+
+<%= javascript_include_tag "embedapi" %>
+<%= javascript_include_tag "svgutils" %>
+
+<script type="text/javascript">
+  <%= render :partial => "sketchily/embed",
+             :formats => :js,
+             :locals => {:id => id,
+                         :value => value,
+                         :show_menu => show_menu,
+                         :hide_image_tool => hide_image_tool} %>
+</script>
+
+<iframe src="/assets/svg-editor.html?source=&dimensions=<%= "#{canvas_width},#{canvas_height}" %>&canvas_expansion=<%= canvas_expansion %>&showRulers=<%= !hide_rulers %>"
+  width="<%= width %>" height="<%= height %>" id="svgedit_<%= id %>" onload="initEmbed_<%= id %>();"></iframe>

data/app/views/sketchily/_embed.js.erb

@@ -0,0 +1,50 @@
+<% # This partial requires svgutils.js
+   #
+   # Clients of this partial must supply the following variables:
+   # id
+   # value
+   # show_menu
+   # hide_image_tool %>
+
+var svgCanvas_<%= id %> = null;
+
+function handleSvgData_<%= id %>(data, error) {
+  if (error) {
+    alert('Error: ' + error);
+  }
+  else {
+    $("input#<%= id %>").attr("value", svgedit.utilities.encode64("<?xml version=\"1.0\"?>\n" + data));
+    $("input#<%= id %>").closest("form").submit();
+  }
+}
+
+function initEmbed_<%= id %>() {
+  var frame = document.getElementById('svgedit_<%= id %>');
+  svgCanvas_<%= id %> = new embedded_svg_edit(frame);
+  
+  var doc;
+  doc = frame.contentDocument;
+  if (!doc) {
+    doc = frame.contentWindow.document;
+  }
+
+  <% if show_menu %>
+    var mainButton = doc.getElementById('main_button');
+    mainButton.style.display = 'block';
+    var toolsTop = doc.getElementById('tools_top');
+    toolsTop.style.left = '120px';
+    toolsTop.style.right = '2px';
+  <% end %>
+  
+  <% if hide_image_tool %>
+    var imageTool = doc.getElementById('tool_image');
+    imageTool.style.display = 'none';
+  <% end %>
+  
+  $("input#<%= id %>").closest("form").one("submit", function(event) {
+    svgCanvas_<%= id %>.getSvgString()(handleSvgData_<%= id %>);
+    event.preventDefault();
+  });
+
+  svgCanvas_<%= id %>.setSvgString(svgedit.utilities.decode64("<%= value.try(:squish) %>"));
+}

data/app/views/sketchily/_embed.js.erb~

@@ -0,0 +1,50 @@
+<% # This partial requires svgutils.js
+   #
+   # Clients of this partial must supply the following variables:
+   # id
+   # value
+   # show_menu
+   # hide_image_tool %>
+
+var svgCanvas_<%= id %> = null;
+
+function handleSvgData_<%= id %>(data, error) {
+  if (error) {
+    alert('Error: ' + error);
+  }
+  else {
+    $("input#<%= id %>").attr("value", svgedit.utilities.encode64("<?xml version=\"1.0\"?>\n" + data));
+    $("input#<%= id %>").closest("form").submit();
+  }
+}
+
+function initEmbed_<%= id %>() {
+  var frame = document.getElementById('svgedit_<%= id %>');
+  svgCanvas_<%= id %> = new embedded_svg_edit(frame);
+  
+  var doc;
+  doc = frame.contentDocument;
+  if (!doc) {
+    doc = frame.contentWindow.document;
+  }
+
+  <% if show_menu %>
+    var mainButton = doc.getElementById('main_button');
+    mainButton.style.display = 'block';
+    var toolsTop = doc.getElementById('tools_top');
+    toolsTop.style.left = '120px';
+    toolsTop.style.right = '2px';
+  <% end %>
+  
+  <% if hide_image %>
+    var imageTool = doc.getElementById('tool_image');
+    imageTool.style.display = 'none';
+  <% end %>
+  
+  $("input#<%= id %>").closest("form").one("submit", function(event) {
+    svgCanvas_<%= id %>.getSvgString()(handleSvgData_<%= id %>);
+    event.preventDefault();
+  });
+
+  svgCanvas_<%= id %>.setSvgString(svgedit.utilities.decode64("<%= value.try(:squish) %>"));
+}

data/app/views/sketchily/_sketchily.html.erb

@@ -0,0 +1,23 @@
+<% # Clients of this partial must supply the following variables:
+   # template
+   # object_name
+   # method
+   # options %>
+
+<% sketchily_tag = ActionView::Helpers::InstanceTag.new(object_name, method, template, options.delete(:object)) %>
+
+<%= render :partial => "sketchily/embed",
+           :formats => :html,
+           :locals => {:id => sketchily_tag.send(:tag_id),
+                       :value => sketchily_tag.value(sketchily_tag.object),
+                       :show_menu => options[:show_menu],
+                       :hide_image_tool => options[:hide_image_tool],
+                       :canvas_width => options[:canvas_width],
+                       :canvas_height => options[:canvas_height],
+                       :canvas_expansion => options[:canvas_expansion],
+                       :hide_rulers => options[:hide_rulers],
+                       :width => options[:width],
+                       :height => options[:height]} %>
+
+<%= sketchily_tag.to_input_field_tag("hidden", options.except(:show_menu, :hide_image_tool, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :width, :height)) %>
+

data/app/views/sketchily/_sketchily.html.erb~

@@ -0,0 +1,23 @@
+<% # Clients of this partial must supply the following variables:
+   # template
+   # object_name
+   # method
+   # options %>
+
+<% sketchily_tag = ActionView::Helpers::InstanceTag.new(object_name, method, template, options.delete(:object)) %>
+
+<%= render :partial => "sketchily/embed",
+           :formats => :html,
+           :locals => {:id => sketchily_tag.send(:tag_id),
+                       :value => sketchily_tag.value(sketchily_tag.object),
+                       :show_menu => options[:show_menu],
+                       :hide_image_tool => options[:hide_image_tool],
+                       :canvas_width => options[:canvas_width],
+                       :canvas_height => options[:canvas_height],
+                       :canvas_expansion => options[:canvas_expansion],
+                       :hide_rulers => options[:hide_rulers],
+                       :width => options[:width],
+                       :height => options[:height]} %>
+
+<%= sketchily_tag.to_input_field_tag("hidden", options.except(:show_menu, :hide_image_tool, :canvas_dimensions, :canvas_expansion, :hide_rulers, :width, :height)) %>
+

data/app/views/sketchily/_sketchily_tag.html.erb

@@ -0,0 +1,21 @@
+<% # Clients of this partial must supply the following variables:
+   # name
+   # id
+   # value
+   # options %>
+
+<%= render :partial => "sketchily/embed",
+           :formats => :html,
+           :locals => {:id => id,
+                       :value => value,
+                       :show_menu => options[:show_menu],
+                       :hide_image_tool => options[:hide_image_tool],
+                       :canvas_width => options[:canvas_width],
+                       :canvas_height => options[:canvas_height],
+                       :canvas_expansion => options[:canvas_expansion],
+                       :hide_rulers => options[:hide_rulers],
+                       :width => options[:width],
+                       :height => options[:height]} %>
+
+<%= tag :input, { "type" => "hidden", "name" => name, "id" => id, "value" => value }.update(options.except(:show_menu, :hide_image_tool, :canvas_width, :canvas_height, :canvas_expansion, :hide_rulers, :width, :height).stringify_keys) %>
+

data/app/views/sketchily/_sketchily_tag.html.erb~

@@ -0,0 +1,21 @@
+<% # Clients of this partial must supply the following variables:
+   # name
+   # id
+   # value
+   # options %>
+
+<%= render :partial => "sketchily/embed",
+           :formats => :html,
+           :locals => {:id => id,
+                       :value => value,
+                       :show_menu => options[:show_menu],
+                       :hide_image_tool => options[:hide_image_tool],
+                       :canvas_width => options[:canvas_width],
+                       :canvas_height => options[:canvas_height],
+                       :canvas_expansion => options[:canvas_expansion],
+                       :hide_rulers => options[:hide_rulers],
+                       :width => options[:width],
+                       :height => options[:height]} %>
+
+<%= tag :input, { "type" => "hidden", "name" => name, "id" => id, "value" => value }.update(options.except(:show_menu, :hide_image_tool, :canvas_dimensions, :canvas_expansion, :hide_rulers, :width, :height).stringify_keys) %>
+

data/app/views/sketchily/_svg_edit_tag.html.erb~

@@ -0,0 +1,51 @@
+<% # Clients of this partial may override the following variables:
+   show_menu ||= false
+   name ||= svgedit
+   value ||= nil
+   options ||= {}
+%>
+
+<script type="text/javascript" src="/assets/embedapi.js"></script>
+<script type="text/javascript">
+  var svgCanvas = null;
+  
+  function init_embed() {
+    var frame = document.getElementById('svgedit');
+    svgCanvas = new embedded_svg_edit(frame);
+    svgCanvas.setSvgString("<%= value %>");
+
+    <% unless show_menu %>
+      // Hide main button, as we will be controlling new/load/save etc from the host document
+      var doc;
+      doc = frame.contentDocument;
+      if (!doc) {
+        doc = frame.contentWindow.document;
+      }
+
+      var mainButton = doc.getElementById('main_button');
+      mainButton.style.display = 'none';            
+    <% end %>
+    
+    $("form").attr("onSubmit", "return saveSvg()");
+  }
+  
+  function handleSvgData(data, error) {
+    if (error) {
+      alert('Error: ' + error);
+      return false;
+    }
+    else {
+      $("#<%= sanitize_to_id(name) %>").attr("value", data);
+      return true;
+    }
+  }
+  
+  function saveSvg() {			
+    return svgCanvas.getSvgString()(handleSvgData);
+  }
+</script>
+
+<iframe src="/assets/svg-editor" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>
+
+<%= tag :input, { "type" => "hidden", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys) %>
+

data/app/views/sketchily/svg_edit_tag_.html~

@@ -0,0 +1,35 @@
+<% # Clients of this partial may override the following variable:
+   svgstring ||= nil
+%>
+<script type="text/javascript" src="/assets/embedapi.js"></script>
+<script type="text/javascript">
+  var svgCanvas = null;
+
+  function init_embed() {
+    var frame = document.getElementById('svgedit');
+    svgCanvas = new embedded_svg_edit(frame);
+    svgCanvas.setSvgString(svgstring);
+
+    if () {
+      // Hide main button, as we will be controlling new/load/save etc from the host document
+      var doc;
+      doc = frame.contentDocument;
+      if (!doc) {
+        doc = frame.contentWindow.document;
+      }
+
+      var mainButton = doc.getElementById('main_button');
+        mainButton.style.display = 'none';            
+      }
+
+      function handleSvgData(data, error) {
+        alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
+      }
+    }
+
+function saveSvg() {			
+  svgCanvas.getSvgString()(handleSvgData);
+}
+</script>
+
+<iframe src="/assets/svg-editor" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>