sketchily 0.0.2 → 0.1.0

data/README.md

@@ -1,7 +1,8 @@
 # Sketchily
 
 Sketchily allows the easy integration of svg-edit with any rails application.
-Currently supports and provides svg-edit-2.6.
+
+Currently supports and provides `svg-edit-2.6`.
 
 ## Installation
 
@@ -19,13 +20,68 @@ Or install it yourself as:
 
 ## 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'.
+Sketchily adds new form elements which can be accessed by calling:
+
+- `f.sketchily` or simply `sketchily` from inside a `form_for @my_object |f|`
+- `sketchily_tag` from inside a `form_tag`
+
+This gem also adds a helper method that can be called to display the resulting SVG images (without an editor):
+
+- `sketchily_show` from any view template
+
+### `sketchily` and `sketchily_tag` functions
+
+- 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)
+- other standard html attributes for the input tag
+
+It is recommended that the database entries associated with sketchily form elements be of type `text`.
+
+Example usage (haml):
+
+    = form_for @shirt do |f|
+      f.text_field :title
+      f.sketchily :svg
+
+### `sketchily_show` helper
+
+- This function takes the base64-encoded SVG string as an argument and an options hash.
+- The SVG string can be directly read from the field used by the previous functions.
+
+Currently available options are:
+
+- `width`
+- `height`
+
+Passing only one of those options should keep the aspect ratio constant in most browsers.
+
+Example usage (haml):
+
+    = sketchily_show @shirt.svg, :width => "500"
+
+## Browser Support
+
+Although more testing is needed, we currently believe sketchily supports any browsers that svg-edit 2.6 supports, namely:
+
+- Firefox 1.5+
+- Opera 9.50+
+- Safari 4+
+- Chrome 1+
+- IE 9+
+- IE 6+ (with the Chrome Frame plugin) 
 
 ## Contributing
 
@@ -36,4 +92,3 @@ It is recommended that the database entries associated with sketchily form eleme
 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/app/views/sketchily/_embed.html.erb~

@@ -4,25 +4,18 @@
    #
    # 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} %>
+                         :show_menu => show_menu} %>
 </script>
 
-<iframe src="/assets/svg-editor.html?source=&dimensions=<%= "#{canvas_width},#{canvas_height}" %>&canvas_expansion=<%= canvas_expansion %>&showRulers=<%= !hide_rulers %>"
+<iframe src="/assets/svg-editor.html?source="
   width="<%= width %>" height="<%= height %>" id="svgedit_<%= id %>" onload="initEmbed_<%= id %>();"></iframe>

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

@@ -8,6 +8,13 @@
 
 var svgCanvas_<%= id %> = null;
 
+function attachSubmitHandler_<%= id %>() {
+  $("input#<%= id %>").closest("form").one("submit", function(event) {
+    svgCanvas_<%= id %>.getSvgString()(handleSvgData_<%= id %>);
+    return false;
+  });
+}
+
 function handleSvgData_<%= id %>(data, error) {
   if (error) {
     alert('Error: ' + error);
@@ -15,6 +22,7 @@ function handleSvgData_<%= id %>(data, error) {
   else {
     $("input#<%= id %>").attr("value", svgedit.utilities.encode64("<?xml version=\"1.0\"?>\n" + data));
     $("input#<%= id %>").closest("form").submit();
+    attachSubmitHandler_<%= id %>();
   }
 }
 
@@ -41,10 +49,7 @@ function initEmbed_<%= id %>() {
     imageTool.style.display = 'none';
   <% end %>
   
-  $("input#<%= id %>").closest("form").one("submit", function(event) {
-    svgCanvas_<%= id %>.getSvgString()(handleSvgData_<%= id %>);
-    event.preventDefault();
-  });
+  attachSubmitHandler_<%= id %>();
 
   svgCanvas_<%= id %>.setSvgString(svgedit.utilities.decode64("<%= value.try(:squish) %>"));
 }

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

@@ -8,6 +8,13 @@
 
 var svgCanvas_<%= id %> = null;
 
+function attachSubmitHandler_<%= id %>() {
+  $("input#<%= id %>").closest("form").one("submit", function(event) {
+    svgCanvas_<%= id %>.getSvgString()(handleSvgData_<%= id %>);
+    event.preventDefault();
+  });
+}
+
 function handleSvgData_<%= id %>(data, error) {
   if (error) {
     alert('Error: ' + error);
@@ -15,6 +22,7 @@ function handleSvgData_<%= id %>(data, error) {
   else {
     $("input#<%= id %>").attr("value", svgedit.utilities.encode64("<?xml version=\"1.0\"?>\n" + data));
     $("input#<%= id %>").closest("form").submit();
+    attachSubmitHandler_<%= id %>();
   }
 }
 
@@ -36,15 +44,12 @@ function initEmbed_<%= id %>() {
     toolsTop.style.right = '2px';
   <% end %>
   
-  <% if hide_image %>
+  <% 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();
-  });
+  attachSubmitHandler_<%= id %>();
 
   svgCanvas_<%= id %>.setSvgString(svgedit.utilities.decode64("<%= value.try(:squish) %>"));
 }

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

@@ -4,20 +4,16 @@
    # method
    # options %>
 
-<% sketchily_tag = ActionView::Helpers::InstanceTag.new(object_name, method, template, options.delete(:object)) %>
+<% sketchily_tag = ActionView::Helpers::InstanceTag.new(object_name, method, template, options.delete(:object))
+   sketchily_tag.value = sketchily_tag.value(sketchily_tag.object).try(:squish).try(:html_safe) %>
 
 <%= 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)) %>
+<%= sketchily_tag.to_input_field_tag("hidden", options.except(:show_menu, :width, :height)) %>
 

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

@@ -9,13 +9,8 @@
            :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) %>
+<%= tag :input, { "type" => "hidden", "name" => name, "id" => id, "value" => value.try(:squish).try(:html_safe) }.update(options.except(:show_menu, :width, :height).stringify_keys) %>
 

data/lib/sketchily.rb~

@@ -3,6 +3,7 @@ module Sketchily
 
   VIEW = ActionView::Base.new
   VIEW.view_paths << "#{ROOT}/app/views"
+  VIEW.view_paths << "#{ROOT}/app/views/sketchily"
 
   def self.render(options = {}, local_assigns = {}, &block)
     VIEW.render(options, local_assigns, &block)
@@ -12,5 +13,4 @@ end
 require "sketchily/engine"
 require "sketchily/sketchily"
 require "sketchily/sketchily_tag"
-require "sketchily/sketchily_show"
 

data/lib/sketchily/sketchily.rb~

@@ -0,0 +1,28 @@
+module Sketchily
+  module FormBuilderInstanceMethods
+    def sketchily(method, options = {})
+      Sketchily.render(:partial => "sketchily/sketchily",
+        :locals => {:template => @template, :object_name => @object_name,
+                    :method => method, :options => objectify_options(options)}).html_safe
+    end
+
+    def svg_edit(method, options = {})
+      sketchily(method, options)
+    end
+  end
+
+  module ActionViewBaseInstanceMethods
+    def sketchily(object_name, method, options = {})
+      Sketchily.render(:partial => "sketchily/sketchily",
+        :locals => {:template => self, :object_name => object_name,
+                    :method => method, :options => objectify_options(options)}).html_safe
+    end
+
+    def svg_edit(object_name, method, options = {})
+      sketchily(object_name, method, options)
+    end
+  end
+end
+
+ActionView::Helpers::FormBuilder.send :include, Sketchily::FormBuilderInstanceMethods
+ActionView::Base.send :include, Sketchily::ActionViewBaseInstanceMethods

data/lib/sketchily/sketchily_tag.rb~

@@ -0,0 +1,15 @@
+module SketchilyTag
+  module ActionViewBaseInstanceMethods
+    def sketchily_tag(name, value = nil, options = {})
+      Sketchily.render(:partial => "sketchily/sketchily_tag",
+        :locals => {:name => name, :id => sanitize_to_id(name),
+                    :value => value, :options => options}).html_safe
+    end
+
+    def svg_edit_tag(name, value = nil, options = {})
+      sketchily_tag(name, value, options)
+    end
+  end
+end
+
+ActionView::Base.send :include, SketchilyTag::ActionViewBaseInstanceMethods

data/lib/sketchily/svg_edit.rb~

@@ -0,0 +1,15 @@
+module Sketchily
+  module FormHelperInstanceMethods
+    def sketchily(object_name, method, options = {})
+      ActionView::Helpers::InstanceTag.new(object_name, method, self, options.delete(:object)).to_input_field_tag("hidden", options)
+    end
+  end
+
+  module FormBuilderInstanceMethods
+    def sketchily(method, options = {})
+      @template.hidden_field(@object_name, method, objectify_options(options))
+    end
+  end
+end
+
+ActionView::Helpers::FormBuilder.send :include, Sketchily::InstanceMethods

data/lib/sketchily/svg_edit_tag.rb~

@@ -1,7 +1,7 @@
 module SvgEditTag
   module InstanceMethods
     def svg_edit_tag(name, value = nil, options = {})
-      render :partial => "svg/svg_edit_tag", :locals => {:name => name, :value => value, :options => options}
+      tag :input, { "type" => "text", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys)
     end
   end
 end

data/lib/sketchily/version.rb

@@ -1,3 +1,3 @@
 module Sketchily
-  VERSION = "0.0.2"
+  VERSION = "0.1.0"
 end

data/lib/sketchily/version.rb~

@@ -1,3 +1,3 @@
 module Sketchily
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

data/spec/dummy/log/development.log

@@ -0,0 +1,9 @@
+Connecting to database specified by database.yml
+  Rendered /home/dantemss/Desktop/sketchily/app/views/sketchily/_sketchily.html.erb (24.5ms)
+  Rendered /home/dantemss/Desktop/sketchily/app/views/sketchily/_sketchily.html.erb (4.7ms)
+  Rendered /home/dantemss/Desktop/sketchily/app/views/sketchily/_sketchily.html.erb (4.6ms)
+Connecting to database specified by database.yml
+  Rendered /home/dantemss/Desktop/sketchily/app/views/sketchily/_sketchily.html.erb (6.7ms)
+Connecting to database specified by database.yml
+  Rendered /home/dantemss/Desktop/sketchily/app/views/sketchily/_sketchily.html.erb (17.6ms)
+Connecting to database specified by database.yml

data/spec/spec_helper.rb~

@@ -0,0 +1,18 @@
+# Configure Rails Environment
+ENV["RAILS_ENV"] = "test"
+
+require File.expand_path("../dummy/config/environment.rb",  __FILE__)
+require "rails/test_help"
+
+require "minitest/autorun"
+require "minitest/rails"
+
+Rails.backtrace_cleaner.remove_silencers!
+
+# Load support files
+Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each { |f| require f }
+
+# Load fixtures from the engine
+if ActiveSupport::TestCase.method_defined?(:fixture_path=)
+  ActiveSupport::TestCase.fixture_path = File.expand_path("../fixtures", __FILE__)
+end

data/vendor/assets/svg-edit-2.6/extensions/ext-imagelib.js~

@@ -0,0 +1,453 @@
+/*
+ * ext-imagelib.js
+ *
+ * Licensed under the MIT License
+ *
+ * Copyright(c) 2010 Alexis Deveria
+ *
+ */
+
+svgEditor.addExtension("imagelib", function() {
+
+	var uiStrings = svgEditor.uiStrings;
+	
+	$.extend(uiStrings, {
+		imagelib: {
+			select_lib: 'Select an image library',
+			show_list: 'Show library list',
+			import_single: 'Import single',
+			import_multi: 'Import multiple',
+			open: 'Open as new document'
+		}
+	});
+
+	var img_libs = [/*{
+			name: 'Demo library (local)',
+			url: '/assets/extensions/imagelib/index.html',
+			description: 'Demonstration library for SVG-edit on this server'
+		}, */
+		{
+			name: 'IAN Symbol Libraries',
+			url: 'http://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php',
+			description: 'Free library of illustrations'
+		}
+	];
+	
+	var xlinkns = "http://www.w3.org/1999/xlink";
+
+	function closeBrowser() {
+		$('#imgbrowse_holder').hide();
+	}
+	
+	function importImage(url) {
+		var newImage = svgCanvas.addSvgElementFromJson({
+			"element": "image",
+			"attr": {
+				"x": 0,
+				"y": 0,
+				"width": 0,
+				"height": 0,
+				"id": svgCanvas.getNextId(),
+				"style": "pointer-events:inherit"
+			}
+		});
+		svgCanvas.clearSelection();
+		svgCanvas.addToSelection([newImage]);
+		svgCanvas.setImageURL(url);
+	}
+
+	var mode = 's';
+	var multi_arr = [];
+	var cur_meta;
+	var tranfer_stopped = false;
+	var pending = {};
+	
+	 window.addEventListener("message", function(evt) {
+		// Receive postMessage data
+		var response = evt.data;
+		
+		if(!response) {
+			// Do nothing
+			return;
+		}
+		
+		var char1 = response.charAt(0);
+		
+		var svg_str;
+		var img_str;
+		
+		if(char1 != "{" && tranfer_stopped) {
+			tranfer_stopped = false;
+			return;
+		}
+		
+		if(char1 == '|') {
+			var secondpos = response.indexOf('|', 1);
+			var id = response.substr(1, secondpos-1);
+			response = response.substr(secondpos+1);
+			char1 = response.charAt(0);
+
+		}
+		
+		
+		// Hide possible transfer dialog box
+		$('#dialog_box').hide();
+		
+		switch (char1) {
+			case '{':
+				// Metadata
+				tranfer_stopped = false;
+				var cur_meta = JSON.parse(response);
+				
+				pending[cur_meta.id] = cur_meta;
+				
+				var name = (cur_meta.name || 'file');
+				
+				var message = uiStrings.notification.retrieving.replace('%s', name);
+				
+				if(mode != 'm') {
+					$.process_cancel(message, function() {
+						tranfer_stopped = true;
+						// Should a message be sent back to the frame?
+						
+						$('#dialog_box').hide();
+					});
+				} else {
+					var entry = $('<div>' + message + '</div>').data('id', cur_meta.id);
+					preview.append(entry);
+					cur_meta.entry = entry;
+				}
+				
+				return;
+			case '<':
+				svg_str = true;
+				break;
+			case 'd':
+				if(response.indexOf('data:image/svg+xml') === 0) {
+					var pre = 'data:image/svg+xml;base64,';
+					var src = response.substring(pre.length);
+					response = svgCanvas.Utils.decode64(src);
+					svg_str = true;
+					break;
+				} else if(response.indexOf('data:image/') === 0) {
+					img_str = true;
+					break;
+				}
+				// Else fall through
+			default:
+				// TODO: See if there's a way to base64 encode the binary data stream
+// 				var str = 'data:;base64,' + svgCanvas.Utils.encode64(response, true);
+			
+				// Assume it's raw image data
+// 				importImage(str);
+			
+				// Don't give warning as postMessage may have been used by something else
+				if(mode !== 'm') {
+					closeBrowser();
+				} else {
+					pending[id].entry.remove();
+				}
+// 				$.alert('Unexpected data was returned: ' + response, function() {
+// 					if(mode !== 'm') {
+// 						closeBrowser();
+// 					} else {
+// 						pending[id].entry.remove();
+// 					}
+// 				});
+				return;
+		}
+		
+		switch (mode) {
+			case 's':
+				// Import one
+				if(svg_str) {
+					svgCanvas.importSvgString(response);
+				} else if(img_str) {
+					importImage(response);
+				}
+				closeBrowser();
+				break;
+			case 'm':
+				// Import multiple
+				multi_arr.push([(svg_str ? 'svg' : 'img'), response]);
+				var cur_meta = pending[id];
+				if(svg_str) {
+					if(cur_meta && cur_meta.name) {
+						var title = cur_meta.name;
+					}  else {
+						// Try to find a title
+						var xml = new DOMParser().parseFromString(response, 'text/xml').documentElement;
+						var title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')';
+					}
+					if(cur_meta) {
+						preview.children().each(function() {
+							if($(this).data('id') == id) {
+								if(cur_meta.preview_url) {
+									$(this).html('<img src="' + cur_meta.preview_url + '">' + title);
+								} else {
+									$(this).text(title);
+								}
+								submit.removeAttr('disabled');
+							}
+						});
+					} else {
+						preview.append('<div>'+title+'</div>');
+						submit.removeAttr('disabled');
+					}
+				} else {
+					if(cur_meta && cur_meta.preview_url) {
+						var title = cur_meta.name || '';
+					}
+					if(cur_meta && cur_meta.preview_url) {
+						var entry = '<img src="' + cur_meta.preview_url + '">' + title;
+					} else {
+						var entry = '<img src="' + response + '">';
+					}
+				
+					if(cur_meta) {
+						preview.children().each(function() {
+							if($(this).data('id') == id) {
+								$(this).html(entry);
+								submit.removeAttr('disabled');
+							}
+						});
+					} else {
+						preview.append($('<div>').append(entry));
+						submit.removeAttr('disabled');
+					}
+
+				}
+				break;
+			case 'o':
+				// Open
+				if(!svg_str) break;
+				svgEditor.openPrep(function(ok) {
+					if(!ok) return;
+					svgCanvas.clear();
+					svgCanvas.setSvgString(response);
+					// updateCanvas();
+				});
+				closeBrowser();
+				break;
+		}
+	}, true);
+	
+	var preview, submit;
+
+	function toggleMulti(show) {
+	
+		$('#lib_framewrap, #imglib_opts').css({right: (show ? 200 : 10)});
+		if(!preview) {
+			preview = $('<div id=imglib_preview>').css({
+				position: 'absolute',
+				top: 45,
+				right: 10,
+				width: 180,
+				bottom: 45,
+				background: '#fff',
+				overflow: 'auto'
+			}).insertAfter('#lib_framewrap');
+			
+			submit = $('<button disabled>Import selected</button>')
+				.appendTo('#imgbrowse')
+				.on("click touchend", function() {
+				$.each(multi_arr, function(i) {
+					var type = this[0];
+					var data = this[1];
+					if(type == 'svg') {
+						svgCanvas.importSvgString(data);
+					} else {
+						importImage(data);
+					}
+					svgCanvas.moveSelectedElements(i*20, i*20, false);
+				});
+				preview.empty();
+				multi_arr = [];
+				$('#imgbrowse_holder').hide();
+			}).css({
+				position: 'absolute',
+				bottom: 10,
+				right: -10
+			});
+
+		}
+		
+		preview.toggle(show);
+		submit.toggle(show);
+	}
+
+	function showBrowser() {
+
+		var browser = $('#imgbrowse');
+		if(!browser.length) {
+			$('<div id=imgbrowse_holder><div id=imgbrowse class=toolbar_button>\
+			</div></div>').insertAfter('#svg_docprops');
+			browser = $('#imgbrowse');
+
+			var all_libs = uiStrings.imagelib.select_lib;
+
+			var lib_opts = $('<ul id=imglib_opts>').appendTo(browser);
+			var frame = $('<iframe/>').prependTo(browser).hide().wrap('<div id=lib_framewrap>');
+			
+			var header = $('<h1>').prependTo(browser).text(all_libs).css({
+				position: 'absolute',
+				top: 0,
+				left: 0,
+				width: '100%'
+			});
+			
+			var cancel = $('<button>' + uiStrings.common.cancel + '</button>')
+				.appendTo(browser)
+				.on("click touchend", function() {
+				$('#imgbrowse_holder').hide();
+			}).css({
+				position: 'absolute',
+				top: 5,
+				right: -10
+			});
+			
+			var leftBlock = $('<span>').css({position:'absolute',top:5,left:10}).appendTo(browser);
+			
+			var back = $('<button hidden>' + uiStrings.imagelib.show_list + '</button>')
+				.appendTo(leftBlock)
+				.on("click touchend", function() {
+				frame.attr('src', 'about:blank').hide();
+				lib_opts.show();
+				header.text(all_libs);
+				back.hide();
+			}).css({
+				'margin-right': 5
+			}).hide();
+			
+			var type = $('<select><option value=s>' + 
+			uiStrings.imagelib.import_single + '</option><option value=m>' +
+			uiStrings.imagelib.import_multi + '</option><option value=o>' +
+			uiStrings.imagelib.open + '</option></select>').appendTo(leftBlock).change(function() {
+				mode = $(this).val();
+				switch (mode) {
+					case 's':
+					case 'o':
+						toggleMulti(false);
+						break;
+					
+					case 'm':
+						// Import multiple
+						toggleMulti(true);
+				}
+			}).css({
+				'margin-top': 10
+			});
+			
+			cancel.prepend($.getSvgIcon('cancel', true));
+			back.prepend($.getSvgIcon('tool_imagelib', true));
+			
+			$.each(img_libs, function(i, opts) {
+				$('<li>')
+					.appendTo(lib_opts)
+					.text(opts.name)
+					.on("click touchend", function() {
+					frame.attr('src', opts.url).show();
+					header.text(opts.name);
+					lib_opts.hide();
+					back.show();
+				}).append('<span>' + opts.description + '</span>');
+			});
+			
+		} else {
+			$('#imgbrowse_holder').show();
+		}
+	}
+	
+	return {
+		svgicons: "/assets/extensions/ext-imagelib.xml",
+		buttons: [{
+			id: "tool_imagelib",
+			type: "app_menu", // _flyout
+			position: 4,
+			title: "Image library",
+			events: {
+				"mouseup": showBrowser
+			}
+		}],
+		callback: function() {
+		
+			$('<style>').text('\
+				#imgbrowse_holder {\
+					position: absolute;\
+					top: 0;\
+					left: 0;\
+					width: 100%;\
+					height: 100%;\
+					background-color: rgba(0, 0, 0, .5);\
+					z-index: 5;\
+				}\
+				\
+				#imgbrowse {\
+					position: absolute;\
+					top: 25px;\
+					left: 25px;\
+					right: 25px;\
+					bottom: 25px;\
+					min-width: 300px;\
+					min-height: 200px;\
+					background: #B0B0B0;\
+					border: 1px outset #777;\
+				}\
+				#imgbrowse h1 {\
+					font-size: 20px;\
+					margin: .4em;\
+					text-align: center;\
+				}\
+				#lib_framewrap,\
+				#imgbrowse > ul {\
+					position: absolute;\
+					top: 45px;\
+					left: 10px;\
+					right: 10px;\
+					bottom: 10px;\
+					background: white;\
+					margin: 0;\
+					padding: 0;\
+				}\
+				#imgbrowse > ul {\
+					overflow: auto;\
+				}\
+				#imgbrowse > div {\
+					border: 1px solid #666;\
+				}\
+				#imglib_preview > div {\
+					padding: 5px;\
+					font-size: 12px;\
+				}\
+				#imglib_preview img {\
+					display: block;\
+					margin: 0 auto;\
+					max-height: 100px;\
+				}\
+				#imgbrowse li {\
+					list-style: none;\
+					padding: .5em;\
+					background: #E8E8E8;\
+					border-bottom: 1px solid #B0B0B0;\
+					line-height: 1.2em;\
+					font-style: sans-serif;\
+					}\
+				#imgbrowse li > span {\
+					color: #666;\
+					font-size: 15px;\
+					display: block;\
+					}\
+				#imgbrowse li:hover {\
+					background: #FFC;\
+					cursor: pointer;\
+					}\
+				#imgbrowse iframe {\
+					width: 100%;\
+					height: 100%;\
+					border: 0;\
+				}\
+			').appendTo('head');
+		}
+	}
+});
+