Helper for configuring naming

src/UI/Content/icons.less

@@ -87,6 +87,11 @@
   color: #b94a48;
 }
 
+.icon-nd-form-info-link:before {
+  .clickable;
+  .icon(@question-sign);
+}
+
 .icon-nd-donate:before {
   .icon(@heart);
   color: @nzbdroneRed;

src/UI/Settings/MediaManagement/Naming/NamingView.js

@@ -1,11 +1,12 @@
 'use strict';
 define(
     [
+        'jquery',
         'vent',
         'marionette',
         'Settings/MediaManagement/Naming/NamingSampleModel',
         'Mixins/AsModelBoundView'
-    ], function (vent, Marionette, NamingSampleModel, AsModelBoundView) {
+    ], function ($, vent, Marionette, NamingSampleModel, AsModelBoundView) {
 
         var view = Marionette.ItemView.extend({
             template: 'Settings/MediaManagement/Naming/NamingViewTemplate',
@@ -15,12 +16,14 @@ define(
                 renameEpisodesCheckbox: '.x-rename-episodes',
                 singleEpisodeExample  : '.x-single-episode-example',
                 multiEpisodeExample   : '.x-multi-episode-example',
-                dailyEpisodeExample   : '.x-daily-episode-example'
+                dailyEpisodeExample   : '.x-daily-episode-example',
+                namingTokenHelper     : '.x-naming-token-helper'
             },
 
             events: {
-                'change .x-rename-episodes': '_setFailedDownloadOptionsVisibility',
+                'change .x-rename-episodes'      : '_setFailedDownloadOptionsVisibility',
-                'click .x-show-wizard'     : '_showWizard'
+                'click .x-show-wizard'           : '_showWizard',
+                'click .x-naming-token-helper a' : '_addToken'
             },
 
             onRender: function () {
@@ -58,6 +61,28 @@ define(
 
             _showWizard: function () {
                 vent.trigger(vent.Commands.ShowNamingWizard, { model: this.model });
+            },
+
+            _addToken: function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                var target = e.target;
+                var token = '';
+                var input = $(target).closest('.x-helper-input').children('input');
+
+                if ($(target).attr('data-token')) {
+                    token = '{{0}}'.format($(target).attr('data-token'));
+                }
+
+                else {
+                    token = $(target).attr('data-separator');
+                }
+
+                input.val(input.val() + token);
+
+                this.ui.namingTokenHelper.removeClass('open');
+                input.focus();
             }
         });
 

src/UI/Settings/MediaManagement/Naming/NamingViewTemplate.html

@@ -39,7 +39,25 @@
             <label class="control-label">Standard Episode Format</label>
 
             <div class="controls">
+                <div class="input-append x-helper-input">
                     <input type="text" class="naming-format" name="standardEpisodeFormat" data-onkeyup="true" />
+                    <div class="btn-group x-naming-token-helper">
+                        <button class="btn btn-icon-only dropdown-toggle" data-toggle="dropdown">
+                            <i class="icon-plus"></i>
+                        </button>
+                        <ul class="dropdown-menu">
+                            {{> SeriesTitleNamingPartial}}
+                            {{> SeasonNamingPartial}}
+                            {{> EpisodeNamingPartial}}
+                            {{> EpisodeTitleNamingPartial}}
+                            {{> QualityTitleNamingPartial}}
+                            {{> SeparatorNamingPartial}}
+                        </ul>
+                    </div>
+                </div>
+                <span class="help-inline">
+                    <a href="https://github.com/NzbDrone/NzbDrone/wiki/Sorting-and-Renaming" class="help-link" title="More information"><i class="icon-nd-form-info-link"/></a>
+                </span>
             </div>
         </div>
 
@@ -47,7 +65,26 @@
             <label class="control-label">Daily Episode Format</label>
 
             <div class="controls">
+                <div class="input-append x-helper-input">
                     <input type="text" class="naming-format" name="dailyEpisodeFormat" data-onkeyup="true" />
+                    <div class="btn-group x-naming-token-helper">
+                        <button class="btn btn-icon-only dropdown-toggle" data-toggle="dropdown">
+                            <i class="icon-plus"></i>
+                        </button>
+                        <ul class="dropdown-menu">
+                            {{> SeriesTitleNamingPartial}}
+                            {{> AirDateNamingPartial}}
+                            {{> SeasonNamingPartial}}
+                            {{> EpisodeNamingPartial}}
+                            {{> EpisodeTitleNamingPartial}}
+                            {{> QualityTitleNamingPartial}}
+                            {{> SeparatorNamingPartial}}
+                        </ul>
+                    </div>
+                </div>
+                <span class="help-inline">
+                    <a href="https://github.com/NzbDrone/NzbDrone/wiki/Sorting-and-Renaming" class="help-link" title="More information"><i class="icon-nd-form-info-link"/></a>
+                </span>
             </div>
         </div>
     </div>

src/UI/Settings/MediaManagement/Naming/Partials/AirDateNamingPartial.html

@@ -0,0 +1,9 @@
+<li class="dropdown-submenu">
+    <a href="#" tabindex="-1" data-token="Air-Date">Air-Date</a>
+    <ul class="dropdown-menu">
+        <li><a href="#" data-token="Air-Date">Air-Date</a></li>
+        <li><a href="#" data-token="Air Date">Air Date</a></li>
+        <li><a href="#" data-token="Air.Date">Air.Date</a></li>
+        <li><a href="#" data-token="Air_Date">Air_Date</a></li>
+    </ul>
+</li>

src/UI/Settings/MediaManagement/Naming/Partials/EpisodeNamingPartial.html

@@ -0,0 +1,7 @@
+<li class="dropdown-submenu">
+    <a href="#" tabindex="-1" data-token="episode">Episode</a>
+    <ul class="dropdown-menu">
+        <li><a href="#" data-token="episode">1</a></li>
+        <li><a href="#" data-token="0episode">01</a></li>
+    </ul>
+</li>

src/UI/Settings/MediaManagement/Naming/Partials/EpisodeTitleNamingPartial.html

@@ -0,0 +1,8 @@
+<li class="dropdown-submenu">
+    <a href="#" tabindex="-1" data-token="Episode Title">Episode Title</a>
+    <ul class="dropdown-menu">
+        <li><a href="#" data-token="Episode Title">Episode Title</a></li>
+        <li><a href="#" data-token="Episode.Title">Episode.Title</a></li>
+        <li><a href="#" data-token="Episode_Title">Episode_Title</a></li>
+    </ul>
+</li>

src/UI/Settings/MediaManagement/Naming/Partials/QualityTitleNamingPartial.html

@@ -0,0 +1,8 @@
+<li class="dropdown-submenu">
+    <a href="#" tabindex="-1" data-token="Quality Title">Quality Title</a>
+    <ul class="dropdown-menu">
+        <li><a href="#" data-token="Quality Title">Quality Title</a></li>
+        <li><a href="#" data-token="Quality.Title">Quality.Title</a></li>
+        <li><a href="#" data-token="Quality_Title">Quality_Title</a></li>
+    </ul>
+</li>

src/UI/Settings/MediaManagement/Naming/Partials/SeasonNamingPartial.html

@@ -0,0 +1,7 @@
+<li class="dropdown-submenu">
+    <a href="#" tabindex="-1" data-token="season">Season</a>
+    <ul class="dropdown-menu">
+        <li><a href="#" data-token="season">1</a></li>
+        <li><a href="#" data-token="0season">01</a></li>
+    </ul>
+</li>

src/UI/Settings/MediaManagement/Naming/Partials/SeparatorNamingPartial.html

@@ -0,0 +1,10 @@
+<li class="dropdown-submenu">
+    <a href="#" tabindex="-1">Separator</a>
+    <ul class="dropdown-menu">
+        <li><a href="#" data-separator=" - ">Space-Dash-Space</a></li>
+        <li><a href="#" data-separator="-">Dash</a></li>
+        <li><a href="#" data-separator=" ">Space</a></li>
+        <li><a href="#" data-separator=".">Period</a></li>
+        <li><a href="#" data-separator="_">Underscore</a></li>
+    </ul>
+</li>

src/UI/Settings/MediaManagement/Naming/Partials/SeriesTitleNamingPartial.html

@@ -0,0 +1,8 @@
+<li class="dropdown-submenu">
+    <a href="#" tabindex="-1" data-token="Series Title">Series Title</a>
+    <ul class="dropdown-menu">
+        <li><a href="#" data-token="Series Title">Series Title</a></li>
+        <li><a href="#" data-token="Series.Title">Series.Title</a></li>
+        <li><a href="#" data-token="Series_Title">Series_Title</a></li>
+    </ul>
+</li>