[#2375] Re-factor the slug preview to use the module system

ckan/public/base/javascript/modules/slug-preview.js

@@ -1,39 +1,58 @@
-(function ($, __, window) {
-  var target = $('#field-title');
-  var slug = $('#field-name').slug();
-  var override = false;
+this.ckan.module('slug-preview-target', function (mod) {
+  mod.subscribe('slug-preview-created', function (preview) {
+    // Append the preview string after the target input.
+    mod.el.after(preview);
+  });
+
+  // Once the preview box is modified stop watching it.
+  mod.subscribe('slug-preview-modified', function () {
+    mod.el.off('.slug-preview');
+  });
+
+  // Watch for updates to the target field and update the hidden slug field
+  // triggering the "change" event manually.
+  mod.el.on('keyup.slug-preview', function (event) {
+    mod.publish('slug-target-changed', this.value);
+    //slug.val(this.value).trigger('change');
+  });
+});
+
+this.ckan.module('slug-preview-slug', function (mod, options, __) {
+  var slug = mod.el.slug();
   var parent = slug.parents('.control-group');
   var preview;
 
-  if (!(target.length && parent.length)) {
+  if (!(parent.length)) {
     return;
   }
 
   // Leave the slug field visible
   if (!parent.hasClass('error')) {
     preview = parent.slugPreview({
-      prefix: 'demo.datahub.io/dataset/',
-      placeholder: '<dataset>',
+      prefix: options.prefix,
+      placeholder: options.placeholder,
       trans: {
         edit: __('Edit')
       }
     });
 
-    // Append the preview string after the target input.
-    target.after(preview);
+    mod.publish('slug-preview-created', preview[0]);
   }
 
   // Watch for updates to the target field and update the hidden slug field
   // triggering the "change" event manually.
-  target.keyup(function (event) {
-    slug.val(this.value).trigger('change');
+  mod.subscribe('slug-target-changed', function (value) {
+    slug.val(value).trigger('change');
   });
 
   // If the user manually enters text into the input we cancel the slug
   // listeners so that we don't clobber the slug when the title next changes.
   slug.keypress(function () {
     if (event.charCode) {
-      target.off('keyup');
+      mod.publish('slug-preview-modified', preview[0]);
     }
   });
-})(this.jQuery, this.ckan.trans, this);
+}, {
+  prefix: '',
+  placeholder: '<slug>'
+});

ckan/templates/macros/form.html

@@ -70,12 +70,12 @@
   {{ form.select('year', label=_('Year'), options={2010: 2010, 2011: 2011}, selected=2011, error=errors.year) }}
 
 #}
-{% macro select(name, id='', label='', options='', selected='', error='', classes=[]) %}
+{% macro select(name, id='', label='', options='', selected='', error='', classes=[], attrs={}) %}
   {% set classes = (classes|list) %}
   {% do classes.append('control-select') %}
 
   {% call block(id or name, label or name, error, classes) %}
-    <select id="{{ id or name }}" name="{{ name }}">
+    <select id="{{ id or name }}" name="{{ name }}"{{ attributes(attrs) }}>
       {% for value, text in options.items() %}
         <option value="{{ value }}"{% if value == selected %} selected{% endif %}>{{ text }}</option>
       {% endfor %}
@@ -101,12 +101,12 @@
   {{ form.markdown('desc', id='field-description', label=_('Description'), value=data.desc, error=errors.desc) }}
 
 #}
-{% macro markdown(name, id='', label='', value='', placeholder='', error="", classes=[]) %}
+{% macro markdown(name, id='', label='', value='', placeholder='', error="", classes=[], attrs={}) %}
   {% set classes = (classes|list) %}
   {% do classes.append('control-full') %}
 
   {% call block(id or name, label or name, error, classes, control_classes=["editor"]) %}
-    <textarea id="{{ id or name }}" name="{{ name }}" cols="20" rows="5" placeholder="{{ placeholder }}">{{ value | e }}</textarea>
+    <textarea id="{{ id or name }}" name="{{ name }}" cols="20" rows="5" placeholder="{{ placeholder }}"{{ attributes(attrs) }}>{{ value | e }}</textarea>
     <span class="info-block">{% trans %}You can use <a href="http://daringfireball.net/projects/markdown/syntax">Markdown formatting</a> here{% endtrans %}</span>
   {% endcall %}
 {% endmacro %}
@@ -132,14 +132,14 @@
   {{ form.prepend('slug', id='field-slug', prepend='/dataset/', label=_('Slug'), value=data.slug, error=errors.slug) }}
 
 #}
-{% macro prepend(name, id='', label='', prepend='', value='', placeholder='', type='text', error="", classes=[]) %}
+{% macro prepend(name, id='', label='', prepend='', value='', placeholder='', type='text', error="", classes=[], attrs={}) %}
   {# We manually append the error here as it needs to be inside the .input-prepend block #}
   {% set classes = (classes|list) %}
   {% do classes.append('error') if error %}
   {% call block(id or name, label or name, error='', classes=classes) %}
     <div class="input-prepend">
       {% if prepend %}<span class="add-on">{{ prepend }}</span>{%- endif -%}
-      <input id="{{ id or name }}" type="{{ type }}" name="{{ name }}" value="{{ value | e }}" placeholder="{{ placeholder }}" />
+      <input id="{{ id or name }}" type="{{ type }}" name="{{ name }}" value="{{ value | e }}" placeholder="{{ placeholder }}"{{ attributes(attrs) }} />
       {% if error %}<span class="error-block">{{ error|join(', ') }}</span>{% endif %}
     </div>
   {% endcall %}
@@ -172,13 +172,13 @@
     error=''
   ) }}
 #}
-{% macro custom(names=(), id="", label="", values=(), placeholders=(), error="", classes=[]) %}
+{% macro custom(names=(), id="", label="", values=(), placeholders=(), error="", classes=[], attrs={}) %}
   {% set classes = (classes|list) %}
   {% set label_id = (id or names[0]) ~ "-key" %}
   {% do classes.append('control-custom') %}
 
   {% call block(label_id, label or name, error, classes, control_classes=["editor"]) %}
-    <div class="input-prepend">
+    <div class="input-prepend" {{ attributes(attrs) }}>
       <label for="{{ label_id }}" class="add-on">Key</label><input id="{{ id or names[0] }}-key" name="{{ names[0] }}" value="{{ values[0] | e }}" placeholder="{{ placeholders[0] }}" />
       <label for="{{ id or names[1] }}-value" class="add-on">Value</label><input id="{{ id or names[1] }}-value" name="{{ names[1] }}" value="{{ values[1] | e }}" placeholder="{{ placeholders[1] }}" />
       {% if values[0] or values[1] or error %}

ckan/templates/package/pages/form_page.html

@@ -39,7 +39,6 @@ <h2 class="module-heading"><i class="icon-large icon-info-sign"></i> {{ _('What
 
 {% block scripts %}
   {{ super() }}
-  <script src="{% url_for_static "/base/javascript/vendor/jquery.js" %}"></script>
   <script src="{% url_for_static "/base/javascript/plugins/jquery.url-helpers.js" %}"></script>
   <script src="{% url_for_static "/base/javascript/plugins/jquery.slug.js" %}"></script>
   <script src="{% url_for_static "/base/javascript/plugins/jquery.slug-preview.js" %}"></script>

ckan/templates/package/snippets/package_basic_fields.html

@@ -1,8 +1,12 @@
 {% import 'macros/form.html' as form %}
 
-{{ form.input('title', id='field-title', label=_('Title'), placeholder=_('eg. A descriptive title'), value=data.title, error=errors.title, classes=['control-full', 'control-large']) }}
+{{ form.input('title', id='field-title', label=_('Title'), placeholder=_('eg. A descriptive title'), value=data.title, error=errors.title, classes=['control-full', 'control-large'], attrs={'data-module': 'slug-preview-target'}) }}
 
-{{ form.prepend('name', id='field-name', label=_('URL'), prepend=h.url_for(controller='package', action='read', id=''), placeholder=_('eg. my-dataset'), value=data.name, error=errors.name) }}
+{% set prefix = h.url_for(controller='package', action='read', id='') %}
+{% set domain = 'demo.ckan.org' ~ prefix %}
+{% set attrs = {'data-module': 'slug-preview-slug', 'data-module-prefix': domain, 'data-module-placeholder': '<dataset>'} %}
+
+{{ form.prepend('name', id='field-name', label=_('URL'), prepend=prefix, placeholder=_('eg. my-dataset'), value=data.name, error=errors.name, attrs=attrs) }}
 
 {{ form.markdown('notes', id='field-notes', label=_('Description'), placeholder=_('eg. Some useful notes about the data'), value=data.notes, error=errors.notes) }}