{"authorId":1,"title":{"title":{}},"slug":"dumbwaiter-chrome-extension","postDate":1348847854,"expiryDate":null,"enabled":1,"fields":{"2":"<p>I recently got around to trying out <a href=\"http:\/\/statamic.com\/\">Statamic<\/a> to create a little <a href=\"http:\/\/recipes.trevordavis.net\/\">recipe manager<\/a>. Yes, I know there are tons of apps out there that do this type of stuff, but I wanted to really be able to control everything.<\/p>\n\n<p>I also wanted to figure out some way that my wife could bookmark recipes for us, and I didn&rsquo;t expect her to login to my Statamic install and go through that whole process of adding a new entry. I wanted her to be able to click a button when she was on a site displaying a recipe that she wanted to bookmark, and an entry would then be created. That led me to create my first Chrome Extension, <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/jeeeliidcblacogbcefhcbljkllhpjdd?hl=en&gl=US\">Dumbwaiter<\/a>.<\/p>\n\n<p><img src=\"http:\/\/trevordavis.net\/uploads\/images\/content\/dumbwaiter-options.png\" alt=\"Dumbwaiter Options\"><\/p>\n\n<p>The basic idea is that you provide a URL that will be opened in a popup window when you click the exntension. Then you provide some JavaScript to do something on the current page you are on, and then some more JavaScript to do something with that data. So in my case, I grab the URL of the page where the recipe is coming from, grab the name of the recipe, and then whatever text is highlighted on the page. So, the process to add a recipe is to highlight the actual recipe, then click the Dumbwaiter icon, and all the data will be pre-populated into my Statamic new entry form.<\/p>\n\n<p>Here is some example code that I am using, but the options are limitless: whatever you can do with jQuery, you can do with Dumbwaiter.<\/p>\n\n<h3>Retrieve Data Code<\/h3>\n<pre><code>var title = jQuery('meta[property=\"og:title\"]').attr('content');\nvar source = window.location.href;\nvar img = jQuery('meta[property=\"og:image\"]').attr('content');\nvar content = window.getSelection().toString();\n\nif(!title) {\n\ttitle = jQuery('title').text();\n}\n\nvar data = {\n\ttitle: title,\n\tsource: source,\n\timg: img,\n\tcontent: content\n};<\/code><\/pre>\n\n<h3>Insert Data Code<\/h3>\n<pre><code>function makeSlug(str) { \n\tstr = str.replace(\/^\\s+|\\s+$\/g, ''); \/\/ trim\n\tstr = str.toLowerCase();\n  \n\t\/\/ remove accents, swap \u00f1 for n, etc\n\tvar from = \"\u00e0\u00e1\u00e4\u00e2\u00e8\u00e9\u00eb\u00ea\u00ec\u00ed\u00ef\u00ee\u00f2\u00f3\u00f6\u00f4\u00f9\u00fa\u00fc\u00fb\u00f1\u00e7\u00b7\/_,:;\";\n\tvar to   = \"aaaaeeeeiiiioooouuuunc------\";\n\tfor (var i=0, l=from.length ; i &lt; l ; i++) {\n\t\tstr = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));\n\t}\n  \n\tstr = str.replace(\/[^a-z0-9 -]\/g, '') \/\/ remove invalid chars\n\t.replace(\/\\s+\/g, '-') \/\/ collapse whitespace and replace by -\n\t.replace(\/-+\/g, '-'); \/\/ collapse dashes\n  \n\treturn str;\n};\n\n$('#publish-title').val(data.title).focus();\nvar slug = makeSlug(data.title);\n$('#publish-slug').val(slug);\n$('input[name=\"page[yaml][source]\"]').val(data.source);\n$('textarea.markItUpEditor').val(data.content);<\/code><\/pre>\n\n<p>You can <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/jeeeliidcblacogbcefhcbljkllhpjdd?hl=en&gl=US\">download Dumbwaiter here<\/a>, and let me know if you guys find any creative uses!<\/p>","4":{"website":{}}}}