Treat additional include symbols as parameterized option

app/scripts/comp/app/generator-presets.js

@@ -45,6 +45,11 @@ const GeneratorPresets = {
                 title: Locale.genPsAmbiguous,
                 label: '0Oo',
                 type: 'checkbox'
+            },
+            {
+                name: 'include',
+                title: Locale.genPsInclude,
+                type: 'text'
             }
         ];
     },
@@ -117,7 +122,13 @@ const GeneratorPresets = {
                 name: 'Mac',
                 title: Locale.genPresetMac,
                 length: 17,
-                options: [],
+                options: [
+                    {
+                        name: 'include',
+                        title: Locale.genPsInclude,
+                        type: 'text'
+                    }
+                ],
                 include: '0123456789ABCDEF',
                 pattern: 'XX-'
             },
@@ -125,14 +136,26 @@ const GeneratorPresets = {
                 name: 'Hash128',
                 title: Locale.genPresetHash128,
                 length: 32,
-                options: [],
+                options: [
+                    {
+                        name: 'include',
+                        title: Locale.genPsInclude,
+                        type: 'text'
+                    }
+                ],
                 include: '0123456789abcdef'
             },
             {
                 name: 'Hash256',
                 title: Locale.genPresetHash256,
                 length: 64,
-                options: [],
+                options: [
+                    {
+                        name: 'include',
+                        title: Locale.genPsInclude,
+                        type: 'text'
+                    }
+                ],
                 include: '0123456789abcdef'
             }
         ];

app/scripts/views/generator-presets-view.js

@@ -21,8 +21,8 @@ class GeneratorPresetsView extends View {
         'change #gen-ps__check-enabled': 'changeEnabled',
         'change #gen-ps__check-default': 'changeDefault',
         'input #gen-ps__field-length': 'changeLength',
-        'change .gen-ps__check-range': 'changeRange',
-        'input #gen-ps__field-include': 'changeInclude',
+        'change .gen-ps__checkbox-option': 'changeCheckboxOption',
+        'input .gen-ps__text-option': 'changeTextOption',
         'input #gen-ps__field-pattern': 'changePattern'
     };
 
@@ -38,7 +38,7 @@ class GeneratorPresetsView extends View {
         super.render({
             presets: this.presets,
             selected: this.getPreset(this.selected),
-            ranges: this.getSelectedRanges()
+            options: this.getSelectedOptions()
         });
         this.createScroll({
             root: this.$el.find('.gen-ps')[0],
@@ -55,18 +55,15 @@ class GeneratorPresetsView extends View {
         this.pageResized();
     }
 
-    getSelectedRanges() {
+    getSelectedOptions() {
         const sel = this.getPreset(this.selected);
         const rangeOverride = {
             high: '¡¢£¤¥¦§©ª«¬®¯°±¹²´µ¶»¼÷¿ÀÖîü...'
         };
         return sel.options.map((option) => {
-            const nameLower = option.name.toLowerCase();
             return {
-                name: nameLower,
-                title: option.title,
-                enabled: sel[nameLower],
-                sample: rangeOverride[nameLower] || CharRanges[nameLower]
+                sample: rangeOverride[option.name] || CharRanges[option.name],
+                ...option
             };
         });
     }
@@ -157,18 +154,19 @@ class GeneratorPresetsView extends View {
         this.renderExample();
     }
 
-    changeRange(e) {
+    changeCheckboxOption(e) {
         const enabled = e.target.checked;
-        const range = e.target.dataset.range;
-        GeneratorPresets.setPreset(this.selected, { [range]: enabled });
+        const option = e.target.dataset.option;
+        GeneratorPresets.setPreset(this.selected, { [option]: enabled });
         this.presets = GeneratorPresets.all;
         this.renderExample();
     }
 
-    changeInclude(e) {
-        const include = e.target.value;
-        if (include !== this.getPreset(this.selected).include) {
-            GeneratorPresets.setPreset(this.selected, { include });
+    changeTextOption(e) {
+        const value = e.target.value;
+        const option = e.target.dataset.option;
+        if (value !== this.getPreset(this.selected)[option]) {
+            GeneratorPresets.setPreset(this.selected, { [option]: value });
         }
         this.presets = GeneratorPresets.all;
         this.renderExample();

app/templates/generator-presets.hbs

@@ -28,19 +28,21 @@
                 <input type="text" class="input-base" id="gen-ps__field-length" value="{{selected.length}}"
                        size="50" maxlength="3" required pattern="\d+" {{#if selected.builtIn}}readonly{{/if}} />
             </div>
-            {{#each ranges as |range|}}
-            <div class="gen-ps__field">
-                <input type="checkbox" class="input-base gen-ps__check-range" id="gen-ps__check-{{range.name}}"
-                       data-range="{{range.name}}"
-                    {{#if range.enabled}}checked{{/if}} {{#if ../selected.builtIn}}disabled{{/if}} />
-                <label for="gen-ps__check-{{range.name}}">{{range.title}}<span class="gen-ps__sample"> {{range.sample}}</span></label>
-            </div>
+            {{#each options as |option|}}
+                <div class="gen-ps__field">
+	                {{#ifeq option.type "checkbox"}}
+                        <input type="checkbox" class="input-base gen-ps__checkbox-option" id="gen-ps__check-{{option.name}}"
+                               data-option="{{option.name}}"
+                            {{#if (lookup ../selected option.name)}}checked{{/if}} {{#if ../selected.builtIn}}disabled{{/if}} />
+                        <label for="gen-ps__check-{{option.name}}">{{option.title}}<span class="gen-ps__sample"> {{option.sample}}</span></label>
+	                {{/ifeq}}
+	                {{#ifeq option.type "text"}}
+                        <label for="gen-ps__field-{{option.name}}">{{option.title}}:</label>
+                        <input type="text" class="input-base gen-ps__text-option" id="gen-ps__field-{{option.name}}" value="{{lookup ../selected option.name}}" data-option="{{option.name}}"
+                               {{#if selected.builtIn}}readonly{{/if}} />
+	                {{/ifeq}}
+                </div>
             {{/each}}
-            <div class="gen-ps__field">
-                <label for="gen-ps__field-include">{{res 'genPsInclude'}}:</label>
-                <input type="text" class="input-base" id="gen-ps__field-include" value="{{selected.include}}"
-                       {{#if selected.builtIn}}readonly{{/if}} />
-            </div>
             <div class="gen-ps__field">
                 <label for="gen-ps__field-pattern">{{res 'genPsPattern'}}: <i class="fa fa-info-circle info-btn info-btn--pattern"></i></label>
                 <div class="gen-ps__pattern-help hide">

app/templates/generator.hbs

@@ -24,8 +24,10 @@
     <div>
         {{#with (lookupfield presets "name" preset)}}
             {{#each options as |optn|}}
-                <div class="gen__check"><input type="{{optn.type}}" id="gen__check-{{optn.name}}"
-                    data-id="{{optn.name}}" {{#if (lookup ../../opt optn.name)}}checked{{/if}}><label for="gen__check-{{optn.name}}">{{optn.label}}</label></div>
+                {{#ifeq optn.type "checkbox"}}
+                    <div class="gen__check"><input type="checkbox" id="gen__check-{{optn.name}}"
+                        data-id="{{optn.name}}" {{#if (lookup ../../opt optn.name)}}checked{{/if}}><label for="gen__check-{{optn.name}}">{{optn.label}}</label></div>
+                {{/ifeq}}
             {{/each}}
         {{/with}}
     </div>