Move JavaScript code out of onclick

The main motivation for this is to provide support
for Content Security Policy, which recommends
disabling all inline scripts in a page.

We took the opportunity to also add support for
data-confirm in `link/2`.

Author: José Valim

.gitignore

@@ -1,5 +1,6 @@
 /_build
 /cover
+/node_modules
 /deps
 /doc
 erl_crash.dump

README.md

@@ -8,6 +8,14 @@ application.
 
 See the [docs](https://hexdocs.pm/phoenix_html/) for more information.
 
+### Building phoenix_html.js
+
+```bash
+$ npm install
+$ npm install -g brunch
+$ brunch watch
+```
+
 ## License
 
 Copyright (c) 2014 Chris McCord

brunch-config.js

@@ -0,0 +1,31 @@
+exports.config = {
+  sourceMaps: false,
+  production: true,
+
+  modules: {
+    wrapper: false,
+    definition: false
+  },
+
+  files: {
+    javascripts: {
+      joinTo: 'phoenix_html.js'
+    },
+  },
+
+  paths: {
+    // Which directories to watch
+    watched: ["web/static", "test/static"],
+
+    // Where to compile files to
+    public: "priv/static"
+  },
+
+  plugins: {
+    babel: {
+      // Do not use ES6 compiler in vendor code
+      ignore: [/^(web\/static\/vendor)/],
+      loose: "all"
+    }
+  }
+};

lib/phoenix_html/link.ex

@@ -37,6 +37,25 @@ defmodule Phoenix.HTML.Link do
       is not `:get`
 
   All other options are forwarded to the underlying `<a>` tag.
+
+  ## Data attributes
+
+  The following data attributes are supported/generated:
+
+    * `data-submit=parent` - used when the `:method` is not
+      `:get`, this module attribute says the underlying link
+      should submit the parent node whenever there is a click
+
+    * `data-confirm` - shows a confirmation prompt before
+      submitting the parent when `:method` is not `:get`
+
+  ## JavaScript dependency
+
+  In order to support the data attributes above, `Phoenix.HTML`
+  relies on JavaScript. You can either load the ES5 version from
+  `priv/static/phoenix_html.js` or depend on the one at
+  `web/static/js/phoenix_html.js` written in ES6 directly from
+  your build tool.
   """
   def link(text, opts)
 
@@ -61,7 +80,7 @@ defmodule Phoenix.HTML.Link do
     else
       {form, opts} = form_options(opts, method, "link")
       form_tag(to, form) do
-        content_tag(:a, text, [href: "#", onclick: "this.parentNode.submit(); return false;"] ++ opts)
+        content_tag(:a, text, [href: "#", data: [submit: "parent"]] ++ opts)
       end
     end
   end

mix.exs

@@ -1,7 +1,7 @@
 defmodule PhoenixHtml.Mixfile do
   use Mix.Project
 
-  @version "1.4.0"
+  @version "2.0.0-dev"
 
   def project do
     [app: :phoenix_html,
@@ -20,7 +20,7 @@ defmodule PhoenixHtml.Mixfile do
   end
 
   defp deps do
-    [{:plug, ">= 0.12.2 and < 2.0.0"},
+    [{:plug, ">= 0.13 and < 2.0.0"},
 
      # Docs dependencies
      {:earmark, "~> 0.1", only: :docs},

package.json

@@ -0,0 +1,10 @@
+{
+  "repository": {
+  },
+  "dependencies": {
+    "brunch": "^1.8.1",
+    "babel-brunch": "^5.1.1",
+    "javascript-brunch": ">= 1.0 < 1.8",
+    "uglify-js-brunch": ">= 1.0 < 1.8"
+  }
+}

priv/static/phoenix_html.js

@@ -0,0 +1,19 @@
+// Although ^=parent is not technically correct,
+// we need to use it in order to get IE8 support.
+'use strict';
+
+var elements = document.querySelectorAll('[data-submit^=parent]');
+var len = elements.length;
+
+for (var i = 0; i < len; ++i) {
+  elements[i].addEventListener('click', function () {
+    var message = this.getAttribute("data-confirm");
+    if (message === null || confirm(message)) {
+      this.parentNode.submit();
+    };
+    event.preventDefault();
+    return false;
+  }, false);
+}
+
+;

web/static/js/phoenix_html.js

@@ -0,0 +1,15 @@
+// Although ^=parent is not technically correct,
+// we need to use it in order to get IE8 support.
+var elements = document.querySelectorAll('[data-submit^=parent]')
+var len = elements.length
+
+for (var i=0; i<len; ++i) {
+  elements[i].addEventListener('click', function(){
+    var message = this.getAttribute("data-confirm")
+    if(message === null || confirm(message)){
+      this.parentNode.submit()
+    };
+    event.preventDefault()
+    return false
+  }, false)
+}