okos
/
rpg-cards
보기 1
좋아요 0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 Activity
소스 검색

Default values

Robert Carnecky 10 년 전
부모
0c6648edfe
커밋
8a2ad2b016
2개의 변경된 파일과 77개의 추가작업 그리고 52개의 파일을 삭제
분할 보기 변경상태 보기
  1. 38
    30
      generator/generate.html
  2. 39
    22
      generator/js/ui.js

+ 38
- 30
generator/generate.html 파일 보기 

@@ -31,13 +31,8 @@
31 31 
 </head>
32 32 
 <body>
33 33 
     <div class="container-fluid">
34 
-        <h1 class="page-header">RPG card generator</h1>
34 
+        <!--<h1 class="page-header">RPG card generator</h1>-->
35 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 36 
             <div class="alert alert-warning alert-dismissible" role="alert">
42 37 
                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
43 38 
                 <strong>Warning!</strong>
 
@@ -53,43 +48,56 @@
53 48 
                     <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
54 49 
                     <a href="" id="file-save-link" style="display:none">Hidden download link</a>
55 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 52 
                     <button type="button" class="btn btn-primary btn-block" id="button-load">Load cards from file</button>
57 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 54 
                     <button type="button" class="btn btn-success btn-block" id="button-generate">Generate cards</button>
60 55 
                     <span class="help-block">Note: generated cards open in a new tab or window.</span>
61 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 68 
                     </div>
69 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 76 
                         </div>
75 77 
                     </div>
76 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 87 
                         </div>
84 88 
                     </div>
85 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 101 
                     </div>
94 102 
                 </form>
95 103 
             </div>

+ 39
- 22
generator/js/ui.js 파일 보기 

@@ -120,8 +120,7 @@ function ui_update_selected_card() {
120 120 
         $("#card-icon").val(card.icon);
121 121 
         $("#card-icon-back").val(card.icon_back);
122 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 126 
     ui_render_selected_card();
 
@@ -158,7 +157,7 @@ function ui_setup_color_selector() {
158 157 
     // Callbacks for when the user picks a color
159 158 
     $('#default_color_selector').colorselector({
160 159 
         callback: function (value, color, title) {
161 
-            $("#default_color").val(title);
160 
+            $("#default-color").val(title);
162 161 
             ui_set_default_color(title);
163 162 
         }
164 163 
     });
 
@@ -169,24 +168,13 @@ function ui_setup_color_selector() {
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 171 
     // Styling
185 172 
     $(".dropdown-colorselector").addClass("input-group-addon color-input-addon");
186 173 
 }
187 174
188 175 
 function ui_set_default_color(color) {
189 176 
     card_options.default_color = color;
177 
+    ui_render_selected_card();
190 178 
 }
191 179
192 180 
 function ui_change_card_title() {
 
@@ -217,24 +205,39 @@ function ui_set_card_color(value) {
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 210 
         // Update the color selector to the entered value
223 
-        $("#card_color_selector").colorselector("setValue", color);
211 
+        $(selector).colorselector("setValue", color);
224 212 
     } else {
225 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 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 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 241 
 function ui_change_card_contents() {
239 242 
     var value = $(this).val();
240 243 
 
@@ -245,6 +248,15 @@ function ui_change_card_contents() {
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 261 
 $(document).ready(function () {
250 262 
     ui_setup_color_selector();
 
@@ -268,6 +280,11 @@ $(document).ready(function () {
268 280 
     $("#card-color").change(ui_change_card_color);
269 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 288 
     $(".icon-select-button").click(ui_select_icon);
272 289
273 290 
     ui_update_card_list();

Write Preview
Loading…
취소
저장