allura git commit: [#7817] Replace "mount point" field with URL field, on tool creation forms

[he...@apache.org]

Repository: allura
Updated Branches:
  refs/heads/hs/7817 [created] fef712056


[#7817] Replace "mount point" field with URL field, on tool creation forms


Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/fef71205
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/fef71205
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/fef71205

Branch: refs/heads/hs/7817
Commit: fef71205696dcd185d0f1d143639b1e983c552fe
Parents: 53b5577
Author: Heith Seewald <hs...@slashdotmedia.com>
Authored: Mon Mar 23 16:50:51 2015 -0400
Committer: Heith Seewald <hs...@slashdotmedia.com>
Committed: Mon Mar 23 16:51:37 2015 -0400

----------------------------------------------------------------------
 .../ext/admin/templates/project_tools.html      | 38 +++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/allura/blob/fef71205/Allura/allura/ext/admin/templates/project_tools.html
----------------------------------------------------------------------
diff --git a/Allura/allura/ext/admin/templates/project_tools.html b/Allura/allura/ext/admin/templates/project_tools.html
index a51f750..32df804 100644
--- a/Allura/allura/ext/admin/templates/project_tools.html
+++ b/Allura/allura/ext/admin/templates/project_tools.html
@@ -26,6 +26,7 @@
 {% block header %}Tools{% endblock %}
 
 {% block content %}
+{% set full_url = h.absurl(c.project.url()) %}
   <h3>Click to install</h3>
   <div class="nested-grid-container">
     {% for tool in installable_tools %}
@@ -46,10 +47,14 @@
   <form method="post" action="update_mounts?limit={{limit}}&page={{page}}" id="install_form" style="display:none">
     <input type="hidden" name="new.ordinal" value="{{total_mounts}}"/>
     <input type="hidden" name="new.ep_name" class="new_ep_name">
-    <label class="grid-13">Label</label>
-    <div class="grid-13"><input type="text" name="new.mount_label" class="new_mount_label"></div>
-    <label class="grid-13">Mount Point</label>
-    <div class="grid-13"><input type="text" name="new.mount_point" class="new_mount_point"></div>
+    <label class="grid-13" for="new.mount_label">Label</label>
+    <div class="grid-13"><input type="text" name="new.mount_label" class="new_mount_label" placeholder="codez" title="This will be the name displayed in your project toolbar.">
+    </div>
+      <label class="grid-13" for="new.mount_point">Url Path</label>
+      <div class="grid-13">
+        <input id="id_url_input" type="text" name="new.mount_point" pattern="^[a-z][a-z0-9-_\.\+\-]{1,63}$" title="The url for this tool relative to {{ full_url }} " class="new_mount_point">
+       <p><span id="full-url-preview" data-url="{{full_url}}"></span></p>
+    </div>
     <div class="grid-13">
       <small>
         * The mount point is the name of the tool as it will appear in a URL.
@@ -172,13 +177,29 @@
 {% endblock %}
 
 {% block extra_js %}
-<script type="text/javascript">
+<script>
     var defaults = {
         {% for tool in installable_tools %}
         '{{tool.name}}':{'default_label':'{{tool.app.default_mount_label}}','default_mount':'{{tool.app.default_mount_point}}'}{% if not loop.last %},{% endif %}
         {% endfor %}
     };
 </script>
+<script>
+/* Real-time preview of a Url Path (aka mount point). */
+
+    var url_preview = $('#full-url-preview'); // "Preview Url Path" displayed on when creating a new tool.
+    var full_url = $(url_preview).data().url; // Full url path of current project.
+
+    // Update the url path preview as they type.
+    $('#id_url_input').keyup(function(){
+        url_preview.html(full_url + '<strong class="url-keyword">' + $(this).val() + "</strong>");
+    });
+
+    // Ensure old values are cleared when creating a new tool.
+    $('.installable_tool').find('a').on('click', function(){
+            url_preview.html("");
+    });
+</script>
 {% endblock %}
 
 {% block extra_css %}
@@ -195,5 +216,12 @@ div.isnt_sorted > ul.deck {
 #configure_grouping_form input[name=grouping_threshold] {
     width: 1.5em;
 }
+#full-url-preview{
+  color: white;
+  font-size: small;
+}
+#full-url-preview .url-keyword{
+  color: orange;
+}
 </style>
 {% endblock %}