okos
/
rpg-cards
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Default values

Robert Carnecky 11 years ago
parent
0c6648edfe
commit
8a2ad2b016
2 changed files with 77 additions and 52 deletions
Unified View Show Diff Stats
  1. 38
    30
      generator/generate.html
  2. 39
    22
      generator/js/ui.js

+ 38
- 30
generator/generate.html View File

31 
 </head>
 31 
 </head>
32 
 <body>
 32 
 <body>
33 
     <div class="container-fluid">
 33 
     <div class="container-fluid">
34 
-        <h1 class="page-header">RPG card generator</h1>
34 
+        <!--<h1 class="page-header">RPG card generator</h1>-->
35 
         <div class="row">
 35 
         <div class="row">
36 
-            <div class="alert alert-danger alert-dismissible" role="alert">
37 
-                <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
38 
-                <strong>Experimental user interface!</strong>
39 
-                This user interface is experimental and some UI elements are non-functional.
40 
-            </div>
41 
             <div class="alert alert-warning alert-dismissible" role="alert">
 36 
             <div class="alert alert-warning alert-dismissible" role="alert">
42 
                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 37 
                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
43 
                 <strong>Warning!</strong>
 38 
                 <strong>Warning!</strong>
53 
                     <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
 48 
                     <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
54 
                     <a href="" id="file-save-link" style="display:none">Hidden download link</a>
 49 
                     <a href="" id="file-save-link" style="display:none">Hidden download link</a>
55 
                     <button type="button" class="btn btn-info btn-block" id="button-help">Open Help</button>
 50 
                     <button type="button" class="btn btn-info btn-block" id="button-help">Open Help</button>
51 
+                    <button type="button" class="btn btn-primary btn-block" id="button-load-sample">Load sample cards (discards current data)</button>
56 
                     <button type="button" class="btn btn-primary btn-block" id="button-load">Load cards from file</button>
 52 
                     <button type="button" class="btn btn-primary btn-block" id="button-load">Load cards from file</button>
57 
                     <button type="button" class="btn btn-primary btn-block" id="button-save">Save cards to file</button>
 53 
                     <button type="button" class="btn btn-primary btn-block" id="button-save">Save cards to file</button>
58 
-                    <button type="button" class="btn btn-primary btn-block" id="button-load-sample">Load sample cards</button>
59 
                     <button type="button" class="btn btn-success btn-block" id="button-generate">Generate cards</button>
 54 
                     <button type="button" class="btn btn-success btn-block" id="button-generate">Generate cards</button>
60 
                     <span class="help-block">Note: generated cards open in a new tab or window.</span>
 55 
                     <span class="help-block">Note: generated cards open in a new tab or window.</span>
61 
                 </form>
 56 
                 </form>
62 
-                <h3>Global options</h3>
63 
-                <form role="form">
64 
-                    <div class="checkbox">
65 
-                        <label>
66 
-                            <input type="checkbox" checked disabled> Small front icons
67 
-                        </label>
57 
+                <h3>Default values</h3>
58 
+                <form role="form" class="form-horizontal">
59 
+                    <div class="form-group">
60 
+                        <label for="small-icons" class="col-sm-3 control-label">Small icon</label>
61 
+                        <div class="col-sm-9">
62 
+                            <div class="checkbox">
63 
+                                <label>
64 
+                                    <input type="checkbox" checked id="small-icons"> Use small icons on the front
65 
+                                </label>
66 
+                            </div>
67 
+                        </div>
68 
                     </div>
 68 
                     </div>
69 
                     <div class="form-group">
 69 
                     <div class="form-group">
70 
-                        <label for="default_color" class="color-label">Default color</label>
71 
-                        <div class="input-group color-input-group">
72 
-                            <select id="default_color_selector" class="colorselector-data"></select>
73 
-                            <input type="text" id="default_color" class="form-control" placeholder="Default card color">
70 
+                        <label for="default-color" class="col-sm-3 control-label">Color</label>
71 
+                        <div class="col-sm-9">
72 
+                            <div class="input-group">
73 
+                                <select id="default_color_selector" class="colorselector-data"></select>
74 
+                                <input type="text" id="default-color" class="form-control" placeholder="Card color" data-property="color">
75 
+                            </div>
74 
                         </div>
 76 
                         </div>
75 
                     </div>
 77 
                     </div>
76 
                     <div class="form-group">
 78 
                     <div class="form-group">
77 
-                        <label for="default_icon">Default Icon</label>
78 
-                        <div class="input-group">
79 
-                            <span class="input-group-btn">
80 
-                                <button class="btn btn-default icon-select-button" type="button">Search</button>
81 
-                            </span>
82 
-                            <input type="text" id="default_icon" class="form-control icon-list" placeholder="Icon name" readonly>
79 
+                        <label for="default-icon" class="col-sm-3 control-label">Icon</label>
80 
+                        <div class="col-sm-9">
81 
+                            <div class="input-group">
82 
+                                <span class="input-group-btn">
83 
+                                    <button class="btn btn-default icon-select-button" type="button">Search</button>
84 
+                                </span>
85 
+                                <input type="text" id="default-icon" class="form-control icon-list" placeholder="Icon name">
86 
+                            </div>
83 
                         </div>
 87 
                         </div>
84 
                     </div>
 88 
                     </div>
85 
                     <div class="form-group">
 89 
                     <div class="form-group">
86 
-                        <label for="default_title_size">Default title size</label>
87 
-                        <select class="form-control" id="default_title_size" disabled>
88 
-                            <option value="big">big</option>
89 
-                            <option value="normal" selected>normal</option>
90 
-                            <option value="small">small</option>
91 
-                            <option value="tiny">tiny</option>
92 
-                        </select>
90 
+                        <label for="default-title-size" class="col-sm-3 control-label">Title size</label>
91 
+                        <div class="col-sm-9">
92 
+                            <div class="input-group">
93 
+                                <select class="form-control" id="default-title-size">
94 
+                                    <option value="big">big</option>
95 
+                                    <option value="normal" selected>normal</option>
96 
+                                    <option value="small">small</option>
97 
+                                    <option value="tiny">tiny</option>
98 
+                                </select>
99 
+                            </div>
100 
+                        </div>
93 
                     </div>
 101 
                     </div>
94 
                 </form>
 102 
                 </form>
95 
             </div>
 103 
             </div>

+ 39
- 22
generator/js/ui.js View File

120 
         $("#card-icon").val(card.icon);
 120 
         $("#card-icon").val(card.icon);
121 
         $("#card-icon-back").val(card.icon_back);
 121 
         $("#card-icon-back").val(card.icon_back);
122 
         $("#card-contents").val(card.contents.join("\n"));
 122 
         $("#card-contents").val(card.contents.join("\n"));
123 
-        $("#card-color").val(card.color);
124 
-        ui_update_card_color_selector(card.color);
123 
+        $("#card-color").val(card.color).change();
125 
     }
 124 
     }
126
125
127 
     ui_render_selected_card();
 126 
     ui_render_selected_card();
158 
     // Callbacks for when the user picks a color
 157 
     // Callbacks for when the user picks a color
159 
     $('#default_color_selector').colorselector({
 158 
     $('#default_color_selector').colorselector({
160 
         callback: function (value, color, title) {
 159 
         callback: function (value, color, title) {
161 
-            $("#default_color").val(title);
160 
+            $("#default-color").val(title);
162 
             ui_set_default_color(title);
 161 
             ui_set_default_color(title);
163 
         }
 162 
         }
164 
     });
 163 
     });
169 
         }
 168 
         }
170 
     });
 169 
     });
171
170
172 
-    // Callbacks for when the user enters a color as a text
173 
-    $("#default_color").change(function (e) {
174 
-        var color = $("#default_color").val();
175 
-        if ($("#default_color_selector option[value='" + color + "']").length > 0) {
176 
-            $("#default_color_selector").colorselector("setValue", color);
177 
-        } else {
178 
-            $("#default_color_selector").colorselector("setValue", "");
179 
-            $("#default_color").val(color);
180 
-        }
181 
-        ui_set_default_color(color);
182 
-    });
183 
-
184 
     // Styling
 171 
     // Styling
185 
     $(".dropdown-colorselector").addClass("input-group-addon color-input-addon");
 172 
     $(".dropdown-colorselector").addClass("input-group-addon color-input-addon");
186 
 }
 173 
 }
187
174
188 
 function ui_set_default_color(color) {
 175 
 function ui_set_default_color(color) {
189 
     card_options.default_color = color;
 176 
     card_options.default_color = color;
177 
+    ui_render_selected_card();
190 
 }
 178 
 }
191
179
192 
 function ui_change_card_title() {
 180 
 function ui_change_card_title() {
217 
     }
 205 
     }
218 
 }
 206 
 }
219
207
220 
-function ui_update_card_color_selector(color) {
221 
-    if ($("#card_color_selector option[value='" + color + "']").length > 0) {
208 
+function ui_update_card_color_selector(color, input, selector) {
209 
+    if ($(selector + " option[value='" + color + "']").length > 0) {
222 
         // Update the color selector to the entered value
 210 
         // Update the color selector to the entered value
223 
-        $("#card_color_selector").colorselector("setValue", color);
211 
+        $(selector).colorselector("setValue", color);
224 
     } else {
 212 
     } else {
225 
         // Unknown color - select a neutral color and reset the text value
 213 
         // Unknown color - select a neutral color and reset the text value
226 
-        $("#card_color_selector").colorselector("setValue", "");
227 
-        $("#card-color").val(color);
214 
+        $(selector).colorselector("setValue", "");
215 
+        input.val(color);
228 
     }
 216 
     }
229 
 }
 217 
 }
230
218
231 
 function ui_change_card_color() {
 219 
 function ui_change_card_color() {
232 
-    var color = $(this).val();
220 
+    var input = $(this);
221 
+    var color = input.val();
233
222
234 
-    ui_update_card_color_selector(color);
223 
+    ui_update_card_color_selector(color, input, "#card_color_selector");
235 
     ui_set_card_color(color);
 224 
     ui_set_card_color(color);
236 
 }
 225 
 }
237
226
227 
+function ui_change_default_color() {
228 
+    var input = $(this);
229 
+    var color = input.val();
230 
+
231 
+    ui_update_card_color_selector(color, input, "#default_color_selector");
232 
+    ui_set_default_color(color);
233 
+}
234 
+
235 
+function ui_change_default_icon() {
236 
+    var value = $(this).val();
237 
+    card_options.default_icon = value;
238 
+    ui_render_selected_card();
239 
+}
240 
+
238 
 function ui_change_card_contents() {
 241 
 function ui_change_card_contents() {
239 
     var value = $(this).val();
 242 
     var value = $(this).val();
240
243
245 
     }
 248 
     }
246 
 }
 249 
 }
247
250
251 
+function ui_change_default_title_size() {
252 
+    card_options.default_title_size = $(this).val();
253 
+    ui_render_selected_card();
254 
+}
255 
+
256 
+function ui_change_default_icon_size() {
257 
+    card_options.icon_inline = $(this).is(':checked');
258 
+    ui_render_selected_card();
259 
+}
248
260
249 
 $(document).ready(function () {
 261 
 $(document).ready(function () {
250 
     ui_setup_color_selector();
 262 
     ui_setup_color_selector();
268 
     $("#card-color").change(ui_change_card_color);
 280 
     $("#card-color").change(ui_change_card_color);
269 
     $("#card-contents").change(ui_change_card_contents);
 281 
     $("#card-contents").change(ui_change_card_contents);
270
282
283 
+    $("#default-color").change(ui_change_default_color);
284 
+    $("#default-icon").change(ui_change_default_icon);
285 
+    $("#default-title-size").change(ui_change_default_title_size);
286 
+    $("#small-icons").change(ui_change_default_icon_size);
287 
+
271 
     $(".icon-select-button").click(ui_select_icon);
 288 
     $(".icon-select-button").click(ui_select_icon);
272
289
273 
     ui_update_card_list();
 290 
     ui_update_card_list();

Write Preview
Loading…
Cancel
Save