sketchily 1.4.1 → 1.5.0

data/app/assets/javascripts/sketchily_embed.js

@@ -1,2 +1,81 @@
 //= require embedapi
 //= require base64
+
+var svgCanvas = svgCanvas || {};
+
+function submitHandler(event) {
+  var id = event.data;
+  svgCanvas[id].getSvgString()(function (data, error) {
+    handleSvgData(data, error, id);
+  });
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+
+function attachSubmitHandler(event) {
+  var id = event.data;
+  $("input#" + id).closest("form").on("submit.svgedit_" + id, null, id, submitHandler);
+}
+
+function handleSvgData(data, error, id) {
+  if (error) {
+    alert('Error: ' + error);
+  }
+  else {
+    var input = $("input#" + id);
+    var form = input.closest("form");
+    input.attr("value", sketchily_encode64("<?xml version=\"1.0\"?>\n" + data));
+    form.off("submit.svgedit_" + id);
+    form.one("submit.svgedit_" + id, null, id, attachSubmitHandler);
+    form.submit();
+  }
+}
+
+function initEmbed(id, value, hide_menu, hide_image_tool, show_hyperlink_tool, url) {
+  var frame = document.getElementById("svgedit_" + id);
+  svgCanvas[id] = new embedded_svg_edit(frame);
+  
+  var doc = frame.contentDocument;
+  if (!doc) {
+    doc = frame.contentWindow.document;
+  }
+
+  if (hide_menu) {
+    var mainButton = doc.getElementById('main_button');
+    mainButton.parentNode.removeChild(mainButton);
+    var toolsTop = doc.getElementById('tools_top');
+    toolsTop.style.left = '5px';
+  }
+
+  if (hide_image_tool) {
+    var imageTool = doc.getElementById('tool_image');
+    imageTool.parentNode.removeChild(imageTool);
+  }
+
+  if (!show_hyperlink_tool) {
+    var hyperlinkTool = doc.getElementById('tool_make_link');
+    hyperlinkTool.parentNode.removeChild(hyperlinkTool);
+  }
+
+  if (!url) {
+    svgCanvas[id].setSvgString(sketchily_decode64(value));
+  }
+
+  $("input#" + id).closest("form").on("submit.svgedit_" + id, null, id, submitHandler);
+
+  $("#svgedit_" + id).css('visibility', '');
+}
+
+function attachLoadHandler(id, value, hide_menu, hide_image_tool, show_hyperlink_tool, url) {
+  var frame = $("#svgedit_" + id);
+  if (frame.attr('src')) {
+    frame.load(function () {
+      initEmbed(id, value, hide_menu, hide_image_tool, show_hyperlink_tool, url);
+    });
+  }
+  else {
+    setTimeout(function () {
+      attachLoadHandler(id, value, hide_menu, hide_image_tool, show_hyperlink_tool, url);
+    }, 0);
+  }
+}

data/app/assets/javascripts/sketchily_embed.js~

@@ -1 +1,84 @@
 //= require embedapi
+//= require base64
+
+var svgCanvas = svgCanvas || {};
+
+function submitHandler(event) {
+  var id = event.data;
+alert('sub' + id);
+  svgCanvas[id].getSvgString()(function (data, error) {
+    handleSvgData(data, error, id);
+  });
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+
+function attachSubmitHandler(event) {
+  var id = event.data;
+alert('attach' + id);
+  $("input#" + id).closest("form").on("submit.svgedit_" + id, null, id, submitHandler);
+}
+
+function handleSvgData(data, error, id) {
+  if (error) {
+    alert('Error: ' + error);
+  }
+  else {
+alert('handle' + id);
+    var input = $("input#" + id);
+    var form = input.closest("form");
+    input.attr("value", sketchily_encode64("<?xml version=\"1.0\"?>\n" + data));
+    form.off("submit.svgedit_" + id);
+    form.one("submit.svgedit_" + id, null, id, attachSubmitHandler);
+    form.submit();
+  }
+}
+
+function initEmbed(id, value, hide_menu, hide_image_tool, show_hyperlink_tool, url) {
+  var frame = document.getElementById("svgedit_" + id);
+  svgCanvas[id] = new embedded_svg_edit(frame);
+  
+  var doc = frame.contentDocument;
+  if (!doc) {
+    doc = frame.contentWindow.document;
+  }
+
+  if (hide_menu) {
+    var mainButton = doc.getElementById('main_button');
+    mainButton.parentNode.removeChild(mainButton);
+    var toolsTop = doc.getElementById('tools_top');
+    toolsTop.style.left = '5px';
+  }
+
+  if (hide_image_tool) {
+    var imageTool = doc.getElementById('tool_image');
+    imageTool.parentNode.removeChild(imageTool);
+  }
+
+  if (!show_hyperlink_tool) {
+    var hyperlinkTool = doc.getElementById('tool_make_link');
+    hyperlinkTool.parentNode.removeChild(hyperlinkTool);
+  }
+
+  if (!url) {
+    svgCanvas[id].setSvgString(sketchily_decode64(value));
+  }
+
+  $("input#" + id).closest("form").on("submit.svgedit_" + id, null, id, submitHandler);
+
+  $("#svgedit_" + id).css('visibility', '');
+}
+
+function attachLoadHandler(id, value, hide_menu, hide_image_tool, show_hyperlink_tool, url) {
+  var frame = $("#svgedit_" + id);
+  if (frame.attr('src')) {
+    frame.load(function () {
+      initEmbed(id, value, hide_menu, hide_image_tool, show_hyperlink_tool, url);
+    });
+  }
+  else {
+    setTimeout(function () {
+      attachLoadHandler(id, value, hide_menu, hide_image_tool, show_hyperlink_tool, url);
+    }, 0);
+  }
+}

data/app/helpers/sketchily_helper.rb

@@ -11,6 +11,7 @@ module SketchilyHelper
           xml.title 'Background Image Layer'
           xml.image :id => 'background_image', :width => '100%', :height => '100%', :preserveAspectRatio => 'xMinYMin', 'xlink:href' => data_uri
         end
+        doc.root.add_namespace "xlink", "http://www.w3.org/1999/xlink"
         doc.at('g').before(bkgd_file_node)
       end
 

data/app/helpers/sketchily_helper.rb~

@@ -11,6 +11,7 @@ module SketchilyHelper
           xml.title 'Background Image Layer'
           xml.image :id => 'background_image', :width => '100%', :height => '100%', :preserveAspectRatio => 'xMinYMin', 'xlink:href' => data_uri
         end
+        doc.root.add_namespace "xmlns:xlink", "http://www.w3.org/1999/xlink"
         doc.at('g').before(bkgd_file_node)
       end
 
@@ -22,7 +23,7 @@ module SketchilyHelper
         end
         doc.at('g').before(bkgd_color_node)
       end
-print doc.to_xml
+
       uri = Base64.strict_encode64(doc.to_xml)
     end
 

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

@@ -38,16 +38,15 @@
                 :src => iframe_src.to_s.html_safe,
                 :width => width,
                 :height => height,
-                :id => "svgedit_#{id}") %>
+                :id => "svgedit_#{id}",
+                :style => "visibility: hidden") %>
 
 <script type="text/javascript">
-  <%= render :partial => "sketchily/embed",
-             :formats => :js,
-             :locals => {:id => id,
-                         :value => value,
-                         :hide_menu => hide_menu,
-                         :hide_image_tool => hide_image_tool,
-                         :show_hyperlink_tool => show_hyperlink_tool,
-                         :url => url} %>
+  attachLoadHandler("<%= id %>",
+                    "<%= value.try(:squish) %>",
+                    <%= hide_menu %>,
+                    <%= hide_image_tool %>,
+                    <%= show_hyperlink_tool %>,
+                    "<%= url %>");
 </script>
 

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

@@ -38,16 +38,15 @@
                 :src => iframe_src.to_s.html_safe,
                 :width => width,
                 :height => height,
-                :id => "svgedit_#{id}") %>
+                :id => "svgedit_#{id}",
+                :style => "visibility: hidden") %>
 
 <script type="text/javascript">
-  <%= render :partial => "sketchily/embed",
-             :formats => :js,
-             :locals => {:id => id,
-                         :value => value,
-                         :hide_menu => hide_menu,
-                         :show_hyperlink_tool => show_hyperlink_tool,
-                         :hide_image_tool => hide_image_tool,
-                         :url => url} %>
+  attachLoadHandler("<%= id %>",
+                    "<%= value.try(:squish) %>",
+                    <%= hide_menu %>,
+                    <%= hide_image_tool %>,
+                    <%= show_hyperlink_tool %>,
+                    <%= url %>);
 </script>
 

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

@@ -49,21 +49,36 @@ function initEmbed_<%= id %>() {
     toolsTop.style.left = '5px';
   <% end %>
 
-  <% unless show_hyperlink_tool %>
-    var hyperlinkTool = doc.getElementById('tool_make_link');
-    hyperlinkTool.parentNode.removeChild(hyperlinkTool);
-  <% end %>
-  
   <% if hide_image_tool %>
     var imageTool = doc.getElementById('tool_image');
     imageTool.parentNode.removeChild(imageTool);
   <% end %>
 
+  <% unless show_hyperlink_tool %>
+    var hyperlinkTool = doc.getElementById('tool_make_link');
+    hyperlinkTool.parentNode.removeChild(hyperlinkTool);
+  <% end %>
+
   <% unless url %>
     svgCanvas_<%= id %>.setSvgString(sketchily_decode64("<%= value.try(:squish) %>"));
   <% end %>
 
   attachSubmitHandler_<%= id %>();
+
+  $("#svgedit_<%= id %>").css('visibility', '');
+}
+
+function attachLoadHandler_<%= id %>() {
+  if ($("#svgedit_<%= id %>").attr('src')) {
+    $("#svgedit_<%= id %>").load(initEmbed_<%= id %>);
+  }
+  else {
+    $("#svgedit_<%= id %>").css('visibility', 'hidden');
+    setTimeout(function () {
+      attachLoadHandler_<%= id %>();
+    }, 0);
+  }
 }
 
-$("#svgedit_<%= id %>").load(initEmbed_<%= id %>);
+attachLoadHandler_<%= id %>();
+

data/lib/sketchily/version.rb

@@ -1,3 +1,3 @@
 module Sketchily
-  VERSION = "1.4.1"
+  VERSION = "1.5.0"
 end

data/lib/sketchily/version.rb~

@@ -1,3 +1,3 @@
 module Sketchily
-  VERSION = "1.4.0"
+  VERSION = "1.4.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sketchily
 version: !ruby/object:Gem::Version
-  version: 1.4.1
+  version: 1.5.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-03-05 00:00:00.000000000 Z
+date: 2013-03-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -125,7 +125,6 @@ files:
 - app/helpers/sketchily_helper.rb~
 - app/helpers/sketchily_helper.rb
 - app/views/sketchily/_sketchily.html.erb
-- app/views/sketchily/_embed.js.erb
 - app/views/sketchily/_sketchily_tag.html.erb
 - app/views/sketchily/_sketchily.html.erb~
 - app/views/sketchily/_sketchily_tag.html.erb~

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

@@ -1,69 +0,0 @@
-<% # This partial requires svgutils.js
-   #
-   # Clients of this partial must supply the following variables:
-   # id
-   # value
-   # hide_menu
-   # hide_image_tool
-   # show_hyperlink_tool
-   # url %>
-
-var svgCanvas_<%= id %> = null;
-
-function submitHandler_<%= id %>(e) {
-  svgCanvas_<%= id %>.getSvgString()(handleSvgData_<%= id %>);
-  e.preventDefault();
-  e.stopImmediatePropagation();
-}
-
-function attachSubmitHandler_<%= id %>() {
-  $("input#<%= id %>").closest("form").on("submit", submitHandler_<%= id %>);
-}
-
-function handleSvgData_<%= id %>(data, error) {
-  if (error) {
-    alert('Error: ' + error);
-  }
-  else {
-    $("input#<%= id %>").attr("value", sketchily_encode64("<?xml version=\"1.0\"?>\n" + data));
-    $("input#<%= id %>").closest("form").off("submit", submitHandler_<%= id %>);
-    $("input#<%= id %>").closest("form").one("submit", attachSubmitHandler_<%= id %>);
-    $("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 hide_menu %>
-    var mainButton = doc.getElementById('main_button');
-    mainButton.parentNode.removeChild(mainButton);
-    var toolsTop = doc.getElementById('tools_top');
-    toolsTop.style.left = '5px';
-  <% end %>
-
-  <% if hide_image_tool %>
-    var imageTool = doc.getElementById('tool_image');
-    imageTool.parentNode.removeChild(imageTool);
-  <% end %>
-
-  <% unless show_hyperlink_tool %>
-    var hyperlinkTool = doc.getElementById('tool_make_link');
-    hyperlinkTool.parentNode.removeChild(hyperlinkTool);
-  <% end %>
-
-  <% unless url %>
-    svgCanvas_<%= id %>.setSvgString(sketchily_decode64("<%= value.try(:squish) %>"));
-  <% end %>
-
-  attachSubmitHandler_<%= id %>();
-}
-
-$("#svgedit_<%= id %>").load(initEmbed_<%= id %>);