No more wizard, now only show when advanced settings are off

src/UI/Settings/MediaManagement/Naming/Basic/BasicNamingView.js

@@ -0,0 +1,102 @@
+'use strict';
+define(
+    [
+        'underscore',
+        'vent',
+        'marionette',
+        'Settings/MediaManagement/Naming/NamingSampleModel',
+        'Settings/MediaManagement/Naming/Wizard/NamingWizardModel',
+        'Mixins/AsModelBoundView'
+    ], function (_, vent, Marionette, NamingSampleModel, NamingWizardModel, AsModelBoundView) {
+
+        var view = Marionette.ItemView.extend({
+            template: 'Settings/MediaManagement/Naming/Basic/BasicNamingViewTemplate',
+
+            ui: {
+                namingOptions         : '.x-naming-options',
+                singleEpisodeExample  : '.x-single-episode-example',
+                multiEpisodeExample   : '.x-multi-episode-example',
+                dailyEpisodeExample   : '.x-daily-episode-example'
+            },
+
+            onRender: function () {
+                this.listenTo(this.model, 'change', this._buildFormat);
+                this._buildFormat();
+            },
+
+            _updateSamples: function () {
+                var data = {
+                    renameEpisodes: true,
+                    standardEpisodeFormat: this.standardEpisodeFormat,
+                    dailyEpisodeFormat: this.dailyEpisodeFormat,
+                    multiEpisodeStyle: this.model.get('multiEpisodeStyle')
+                };
+
+                this.namingSampleModel.fetch({data: data});
+            },
+
+            _buildFormat: function () {
+                if (_.has(this.model.changed, 'standardEpisodeFormat') || _.has(this.model.changed, 'dailyEpisodeFormat')) {
+                    return;
+                }
+
+                var standardEpisodeFormat = '';
+                var dailyEpisodeFormat = '';
+
+                if (this.model.get('includeSeriesTitle')) {
+                    if (this.model.get('replaceSpaces')) {
+                        standardEpisodeFormat += '{Series.Title}';
+                        dailyEpisodeFormat += '{Series.Title}';
+                    }
+
+                    else {
+                        standardEpisodeFormat += '{Series Title}';
+                        dailyEpisodeFormat += '{Series Title}';
+                    }
+
+                    standardEpisodeFormat += this.model.get('separator');
+                    dailyEpisodeFormat += this.model.get('separator');
+                }
+
+                standardEpisodeFormat += this.model.get('numberStyle');
+                dailyEpisodeFormat += '{Air-Date}';
+
+                if (this.model.get('includeEpisodeTitle')) {
+                    standardEpisodeFormat += this.model.get('separator');
+                    dailyEpisodeFormat += this.model.get('separator');
+
+                    if (this.model.get('replaceSpaces')) {
+                        standardEpisodeFormat += '{Episode.Title}';
+                        dailyEpisodeFormat += '{Episode.Title}';
+                    }
+
+                    else {
+                        standardEpisodeFormat += '{Episode Title}';
+                        dailyEpisodeFormat += '{Episode Title}';
+                    }
+                }
+
+                if (this.model.get('includeQuality')) {
+                    if (this.model.get('replaceSpaces')) {
+                        standardEpisodeFormat += ' {Quality.Title}';
+                        dailyEpisodeFormat += ' {Quality.Title}';
+                    }
+
+                    else {
+                        standardEpisodeFormat += ' {Quality Title}';
+                        dailyEpisodeFormat += ' {Quality Title}';
+                    }
+                }
+
+                if (this.model.get('replaceSpaces')) {
+                    standardEpisodeFormat = standardEpisodeFormat.replace(/\s/g, '.');
+                    dailyEpisodeFormat = dailyEpisodeFormat.replace(/\s/g, '.');
+                }
+
+                this.model.set('standardEpisodeFormat', standardEpisodeFormat);
+                this.model.set('dailyEpisodeFormat', dailyEpisodeFormat);
+            }
+        });
+
+        return AsModelBoundView.call(view);
+    });

src/UI/Settings/MediaManagement/Naming/Basic/BasicNamingViewTemplate.html

@@ -0,0 +1,92 @@
+<div class="control-group">
+    <label class="control-label">Include Series Title</label>
+
+    <div class="controls">
+        <label class="checkbox toggle well">
+            <input type="checkbox" name="includeSeriesTitle"/>
+
+            <p>
+                <span>Yes</span>
+                <span>No</span>
+            </p>
+
+            <div class="btn btn-primary slide-button"/>
+        </label>
+    </div>
+</div>
+
+<div class="control-group">
+    <label class="control-label">Include Episode Title</label>
+
+    <div class="controls">
+        <label class="checkbox toggle well">
+            <input type="checkbox" name="includeEpisodeTitle"/>
+
+            <p>
+                <span>Yes</span>
+                <span>No</span>
+            </p>
+
+            <div class="btn btn-primary slide-button"/>
+        </label>
+    </div>
+</div>
+
+<div class="control-group">
+    <label class="control-label">Include Quality</label>
+
+    <div class="controls">
+        <label class="checkbox toggle well">
+            <input type="checkbox" name="includeQuality"/>
+
+            <p>
+                <span>Yes</span>
+                <span>No</span>
+            </p>
+
+            <div class="btn btn-primary slide-button"/>
+        </label>
+    </div>
+</div>
+
+<div class="control-group">
+    <label class="control-label">Replace Spaces</label>
+
+    <div class="controls">
+        <label class="checkbox toggle well">
+            <input type="checkbox" name="replaceSpaces"/>
+
+            <p>
+                <span>Yes</span>
+                <span>No</span>
+            </p>
+
+            <div class="btn btn-primary slide-button"/>
+        </label>
+    </div>
+</div>
+
+<div class="control-group">
+    <label class="control-label">Separator</label>
+
+    <div class="controls">
+        <select class="inputClass" name="separator">
+            <option value=" - ">Dash</option>
+            <option value=" ">Space</option>
+            <option value=".">Period</option>
+        </select>
+    </div>
+</div>
+
+<div class="control-group">
+    <label class="control-label">Numbering Style</label>
+
+    <div class="controls">
+        <select class="inputClass" name="numberStyle">
+            <option value="{season}x{episode:00}">1x05</option>
+            <option value="{season:00}x{episode:00}">01x05</option>
+            <option value="S{season:00}E{episode:00}">S01E05</option>
+            <option value="s{season:00}e{episode:00}">s01e05</option>
+        </select>
+    </div>
+</div>

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

@@ -1,15 +1,16 @@
 'use strict';
 define(
     [
-        'vent',
+        'underscore',
         'marionette',
+        'Config',
         'Settings/MediaManagement/Naming/NamingSampleModel',
-        'Settings/MediaManagement/Naming/Wizard/NamingWizardView',
+        'Settings/MediaManagement/Naming/Basic/BasicNamingView',
         'Mixins/AsModelBoundView',
         'Mixins/AsValidatedView'
-    ], function (vent, Marionette, NamingSampleModel, NamingWizardView, AsModelBoundView, AsValidatedView) {
+    ], function (_, Marionette, Config, NamingSampleModel, BasicNamingView, AsModelBoundView, AsValidatedView) {
 
-        var view = Marionette.ItemView.extend({
+        var view = Marionette.Layout.extend({
             template: 'Settings/MediaManagement/Naming/NamingViewTemplate',
 
             ui: {
@@ -27,11 +28,17 @@ define(
                 'click .x-naming-token-helper a' : '_addToken'
             },
 
+            regions: {
+                basicNamingRegion: '.x-basic-naming'
+            },
+
             onRender: function () {
-                if (!this.model.has('renameEpisodes')) {
+                if (!this.model.get('renameEpisodes')) {
                     this.ui.namingOptions.hide();
                 }
 
+                this.basicNamingView = new BasicNamingView({ model: this.model });
+                this.basicNamingRegion.show(this.basicNamingView);
                 this.namingSampleModel = new NamingSampleModel();
 
                 this.listenTo(this.model, 'change', this._updateSamples);
@@ -51,6 +58,10 @@ define(
             },
 
             _updateSamples: function () {
+                if (!_.has(this.model.changed, 'standardEpisodeFormat') && !_.has(this.model.changed, 'dailyEpisodeFormat')) {
+                    return;
+                }
+
                 this.namingSampleModel.fetch({ data: this.model.toJSON() });
             },
 
@@ -60,14 +71,6 @@ define(
                 this.ui.dailyEpisodeExample.html(this.namingSampleModel.get('dailyEpisodeExample'));
             },
 
-            _showWizard: function () {
-                var modalView = new NamingWizardView();
-                vent.trigger(vent.Commands.OpenModalCommand, modalView);
-                this.listenTo(modalView, modalView.formatsUpdated, this._updateFormats);
-
-                vent.trigger(vent.Commands.ShowNamingWizard, { model: this.model });
-            },
-
             _addToken: function (e) {
                 e.preventDefault();
                 e.stopPropagation();
@@ -88,12 +91,6 @@ define(
 
                 this.ui.namingTokenHelper.removeClass('open');
                 input.focus();
-            },
-
-            _updateFormats: function (options) {
-                this.model.set('standardEpisodeFormat', options.standardEpisodeFormat);
-                this.model.set('dailyEpisodeFormat', options.dailyEpisodeFormat);
-                this.model.set('multiEpisodeStyle', options.multiEpisodeStyle);
             }
         });
 

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

@@ -23,17 +23,7 @@
     </div>
 
     <div class="x-naming-options">
-        <div class="control-group">
-            <label class="control-label">Wizard</label>
-
-            <div class="controls">
-                <button class="btn x-show-wizard">Show Wizard</button>
-
-                <span class="help-inline">
-                    <i class="icon-nd-form-info" title="Wizard to setup preferred naming style"/>
-                </span>
-            </div>
-        </div>
+        <div class="basic-setting x-basic-naming"></div>
 
         <div class="control-group advanced-setting">
             <label class="control-label">Standard Episode Format</label>
@@ -90,7 +80,7 @@
             </div>
         </div>
 
-        <div class="control-group advanced-setting">
+        <div class="control-group">
             <label class="control-label">Multi-Episode Style</label>
 
             <div class="controls">
@@ -108,10 +98,19 @@
         <label class="control-label">Season Folder Format</label>
 
         <div class="controls">
-            <input type="text" placeholder="Season {season}" name="seasonFolderFormat"/>
-            <span class="help-inline">
-                <i class="icon-question-sign" title="How should season folders be named? Please see the wiki for customization options"/>
-            </span>
+            <div class="input-append x-helper-input">
+                <input type="text" class="naming-format" name="seasonFolderFormat"/>
+                <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}}
+                        {{> SeparatorNamingPartial}}
+                    </ul>
+                </div>
+            </div>
         </div>
     </div>
 

src/UI/Settings/MediaManagement/Naming/Wizard/NamingWizardModel.js

@@ -1,17 +0,0 @@
-'use strict';
-define(
-    [
-        'backbone'
-    ], function (Backbone) {
-        return  Backbone.Model.extend({
-            defaults: {
-                includeSeriesTitle : true,
-                includeEpisodeTitle: true,
-                includeQuality     : true,
-                replaceSpaces      : false,
-                separator          : ' - ',
-                numberStyle        : 'S{season:00}E{episode:00}',
-                multiEpisodeStyle  : 0
-            }
-        });
-    });

src/UI/Settings/MediaManagement/Naming/Wizard/NamingWizardView.js

@@ -1,127 +0,0 @@
-'use strict';
-define(
-    [
-        'vent',
-        'marionette',
-        'Settings/MediaManagement/Naming/NamingSampleModel',
-        'Settings/MediaManagement/Naming/Wizard/NamingWizardModel',
-        'Mixins/AsModelBoundView'
-    ], function (vent, Marionette, NamingSampleModel, NamingWizardModel, AsModelBoundView) {
-
-        var view = Marionette.ItemView.extend({
-            template: 'Settings/MediaManagement/Naming/Wizard/NamingWizardViewTemplate',
-
-            ui: {
-                namingOptions         : '.x-naming-options',
-                singleEpisodeExample  : '.x-single-episode-example',
-                multiEpisodeExample   : '.x-multi-episode-example',
-                dailyEpisodeExample   : '.x-daily-episode-example'
-            },
-
-            events: {
-                'click .x-apply': '_applyNaming'
-            },
-
-            formatsUpdated: 'formatsUpdated',
-
-            initialize: function () {
-                this.model = new NamingWizardModel();
-                this.namingSampleModel = new NamingSampleModel();
-            },
-
-            onRender: function () {
-                this.listenTo(this.model, 'change', this._buildFormat);
-                this.listenTo(this.namingSampleModel, 'sync', this._showSamples);
-                this._buildFormat();
-            },
-
-            _updateSamples: function () {
-                var data = {
-                    renameEpisodes: true,
-                    standardEpisodeFormat: this.standardEpisodeFormat,
-                    dailyEpisodeFormat: this.dailyEpisodeFormat,
-                    multiEpisodeStyle: this.model.get('multiEpisodeStyle')
-                };
-
-                this.namingSampleModel.fetch({data: data});
-            },
-
-            _showSamples: function () {
-                this.ui.singleEpisodeExample.html(this.namingSampleModel.get('singleEpisodeExample'));
-                this.ui.multiEpisodeExample.html(this.namingSampleModel.get('multiEpisodeExample'));
-                this.ui.dailyEpisodeExample.html(this.namingSampleModel.get('dailyEpisodeExample'));
-            },
-
-            _applyNaming: function () {
-                var options = {
-                    standardEpisodeFormat: this.standardEpisodeFormat,
-                    dailyEpisodeFormat: this.dailyEpisodeFormat,
-                    multiEpisodeStyle: this.model.get('multiEpisodeStyle')
-                };
-
-                this.trigger(this.formatsUpdated, options);
-
-
-                vent.trigger(vent.Commands.CloseModalCommand);
-            },
-
-            _buildFormat: function () {
-                this.standardEpisodeFormat = '';
-                this.dailyEpisodeFormat = '';
-
-                if (this.model.get('includeSeriesTitle')) {
-                    if (this.model.get('replaceSpaces')) {
-                        this.standardEpisodeFormat += '{Series.Title}';
-                        this.dailyEpisodeFormat += '{Series.Title}';
-                    }
-
-                    else {
-                        this.standardEpisodeFormat += '{Series Title}';
-                        this.dailyEpisodeFormat += '{Series Title}';
-                    }
-
-                    this.standardEpisodeFormat += this.model.get('separator');
-                    this.dailyEpisodeFormat += this.model.get('separator');
-                }
-
-                this.standardEpisodeFormat += this.model.get('numberStyle');
-                this.dailyEpisodeFormat += '{Air-Date}';
-
-                if (this.model.get('includeEpisodeTitle')) {
-                    this.standardEpisodeFormat += this.model.get('separator');
-                    this.dailyEpisodeFormat += this.model.get('separator');
-
-                    if (this.model.get('replaceSpaces')) {
-                        this.standardEpisodeFormat += '{Episode.Title}';
-                        this.dailyEpisodeFormat += '{Episode.Title}';
-                    }
-
-                    else {
-                        this.standardEpisodeFormat += '{Episode Title}';
-                        this.dailyEpisodeFormat += '{Episode Title}';
-                    }
-                }
-
-                if (this.model.get('includeQuality')) {
-                    if (this.model.get('replaceSpaces')) {
-                        this.standardEpisodeFormat += ' {Quality.Title}';
-                        this.dailyEpisodeFormat += ' {Quality.Title}';
-                    }
-
-                    else {
-                        this.standardEpisodeFormat += ' {Quality Title}';
-                        this.dailyEpisodeFormat += ' {Quality Title}';
-                    }
-                }
-
-                if (this.model.get('replaceSpaces')) {
-                    this.standardEpisodeFormat = this.standardEpisodeFormat.replace(/\s/g, '.');
-                    this.dailyEpisodeFormat = this.dailyEpisodeFormat.replace(/\s/g, '.');
-                }
-
-                this._updateSamples();
-            }
-        });
-
-        return AsModelBoundView.call(view);
-    });

src/UI/Settings/MediaManagement/Naming/Wizard/NamingWizardViewTemplate.html

@@ -1,141 +0,0 @@
-<div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>Naming Wizard</h3>
-</div>
-<div class="modal-body">
-    <div class="form-horizontal">
-        <div class="control-group">
-            <label class="control-label">Include Series Title</label>
-
-            <div class="controls">
-                <label class="checkbox toggle well">
-                    <input type="checkbox" name="includeSeriesTitle"/>
-
-                    <p>
-                        <span>Yes</span>
-                        <span>No</span>
-                    </p>
-
-                    <div class="btn btn-primary slide-button"/>
-                </label>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Include Episode Title</label>
-
-            <div class="controls">
-                <label class="checkbox toggle well">
-                    <input type="checkbox" name="includeEpisodeTitle"/>
-
-                    <p>
-                        <span>Yes</span>
-                        <span>No</span>
-                    </p>
-
-                    <div class="btn btn-primary slide-button"/>
-                </label>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Include Quality</label>
-
-            <div class="controls">
-                <label class="checkbox toggle well">
-                    <input type="checkbox" name="includeQuality"/>
-
-                    <p>
-                        <span>Yes</span>
-                        <span>No</span>
-                    </p>
-
-                    <div class="btn btn-primary slide-button"/>
-                </label>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Replace Spaces</label>
-
-            <div class="controls">
-                <label class="checkbox toggle well">
-                    <input type="checkbox" name="replaceSpaces"/>
-
-                    <p>
-                        <span>Yes</span>
-                        <span>No</span>
-                    </p>
-
-                    <div class="btn btn-primary slide-button"/>
-                </label>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Separator</label>
-
-            <div class="controls">
-                <select class="inputClass" name="separator">
-                    <option value=" - ">Dash</option>
-                    <option value=" ">Space</option>
-                    <option value=".">Period</option>
-                </select>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Numbering Style</label>
-
-            <div class="controls">
-                <select class="inputClass" name="numberStyle">
-                    <option value="{season}x{episode:00}">1x05</option>
-                    <option value="{season:00}x{episode:00}">01x05</option>
-                    <option value="S{season:00}E{episode:00}">S01E05</option>
-                    <option value="s{season:00}e{episode:00}">s01e05</option>
-                </select>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Multi-Episode Style</label>
-
-            <div class="controls">
-                <select class="inputClass" name="multiEpisodeStyle">
-                    <option value="0">Extend</option>
-                    <option value="1">Duplicate</option>
-                    <option value="2">Repeat</option>
-                    <option value="3">Scene</option>
-                </select>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Single Episode Example</label>
-
-            <div class="controls">
-                <span class="x-single-episode-example naming-example"></span>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Multi-Episode Example</label>
-
-            <div class="controls">
-                <span class="x-multi-episode-example naming-example"></span>
-            </div>
-        </div>
-
-        <div class="control-group">
-            <label class="control-label">Daily-Episode Example</label>
-
-            <div class="controls">
-                <span class="x-daily-episode-example naming-example"></span>
-            </div>
-        </div>
-    </div>
-</div>
-<div class="modal-footer">
-    <button class="btn" data-dismiss="modal">cancel</button>
-    <button class="btn btn-primary x-apply">apply</button>
-</div>

src/UI/Settings/SettingsLayout.js

@@ -6,7 +6,7 @@ define(
         'backbone',
         'Settings/SettingsModel',
         'Settings/General/GeneralSettingsModel',
-        'Settings/MediaManagement/Naming/Model',
+        'Settings/MediaManagement/Naming/NamingModel',
         'Settings/MediaManagement/MediaManagementLayout',
         'Settings/Quality/QualityLayout',
         'Settings/Indexers/IndexerLayout',

src/UI/Settings/settings.less

@@ -77,8 +77,16 @@ li.save-and-add:hover {
   }
 }
 
+.basic-setting {
+  display: block;
+}
+
 .show-advanced-settings {
   .advanced-setting {
     display: block;
   }
+
+  .basic-setting {
+    display: none;
+  }
 }