archive
/
dundef-viewer
Прати 1
Волим 0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики Activity
Преглед изворни кода

Front-end saving support

master
Chris Smith пре 12 година
родитељ
7986e49555
комит
a9d077a0bf
4 измењених фајлова са 81 додато и 10 уклоњено
Подељен поглед Покажи статистику Diff
  1. 24
    3
      index.html
  2. BIN
      res/images/loading.gif
  3. 24
    0
      res/js/viewer.js
  4. 33
    7
      res/style.css

+ 24
- 3
index.html Прегледај датотеку 

@@ -13,7 +13,10 @@
13 13 
  <body>
14 14 
   <div id="header">
15 15 
    <h1><img src="res/images/dd-logo.png" alt="Dungeon Defenders"><span>Layout Editor</span></h1>
16 
-   <button id="createlayout">Create new layout</button>
16 
+   <div id="buttons">
17 
+    <button id="savelayout">Save this layout</button>
18 
+    <button id="createlayout">Create new layout</button>
19 
+   </div>
17 20 
   </div>
18 21 
   <div id="sidebar">
19 22 
    <div id="palette">
 
@@ -32,10 +35,28 @@
32 35 
   </div>
33 36 
   <div id="mapcontainer"></div>
34 37 
   <div id="layoutcontainer" class="initiallyhidden">
35 
-   <div id="layoutmask"></div>
36 
-   <div id="layoutpicker">
38 
+   <div id="layoutmask" class="mask"></div>
39 
+   <div id="layoutpicker" class="dialog">
37 40 
     <h2>Select a level</h2>
38 41 
    </div>
39 42 
   </div>
43 
+  <div id="savecontainer" class="initiallyhidden">
44 
+   <div id="savemask" class="mask"></div>
45 
+   <div id="savedialog" class="dialog">
46 
+    <div id="save_inprogress">
47 
+     <h2 style="margin-bottom: 50px;">Saving...</h2>
48 
+     <p style="margin-bottom: 50px;"><img src="res/images/loading.gif" alt="Loading indicator"></p>
49 
+     <p id="save_error" class="initiallyhidden error"></p>
50 
+    </div>
51 
+    <div id="save_done" class="initiallyhidden">
52 
+     <h2>Saved</h2>
53 
+     <p>
54 
+      Your layout has been saved.
55 
+      Share this link:
56 
+     </p>
57 
+     <p id="link"></p>
58 
+    </div>
59 
+   </div>
60 
+  </div>
40 61 
  </body>
41 62 
 </html>

BIN
res/images/loading.gif Прегледај датотеку


+ 24
- 0
res/js/viewer.js Прегледај датотеку 

@@ -161,8 +161,32 @@ $(function() {
161 161 
   $('#layoutcontainer').hide();
162 162 
  }
163 163
164 
+ function saveLayout() {
165 
+  $('#save_inprogress').show();
166 
+  $('#save_done').hide();
167 
+  $('#savecontainer').show();
168 
+  $('#save_error').hide();
169 
+
170 
+  $.ajax({
171 
+   type: 'POST',
172 
+   url: 'data/layouts/new',
173 
+   data: JSON.stringify(layout),
174 
+   success: function(res) {
175 
+    var url = window.location.href + "?id=" + res;
176 
+    $('#link').children().remove();
177 
+    $('<a>').attr('href', url).text(url).appendTo($('#link'));
178 
+    $('#save_inprogress').hide();
179 
+    $('#save_done').show();
180 
+   },
181 
+   error: function(xhr, status, error) {
182 
+    $('#save_error').text('Save failed! Server said: ' + error).show();
183 
+   }
184 
+  });
185 
+ }
186 
+
164 187 
  $('#createlayout').click(showPicker);
165 188 
  $('#layoutmask').click(closePicker);
189 
+ $('#savelayout').click(saveLayout);
166 190
167 191 
  function updateLayout(data) {
168 192 
   clearLayout();

+ 33
- 7
res/style.css Прегледај датотеку 

@@ -25,11 +25,21 @@ body {
25 25 
  float: left;
26 26 
 }
27 27
28 
-#header button {
28 
+#header #buttons {
29 29 
  float: right;
30 30 
  height: 40px;
31 31 
  margin: 15px;
32 
+}
33 
+
34 
+#header #createlayout {
32 35 
  color: #300;
36 
+}
37 
+
38 
+#header #savelayout {
39 
+ color: #030;
40 
+}
41 
+
42 
+#header button {
33 43 
  font-variant: small-caps;
34 44 
  font-weight: bold;
35 45 
  text-transform: lowercase;
 
@@ -101,7 +111,7 @@ h2 {
101 111 
 .tower.apprentice { z-index: 100; }
102 112 
 body .tower.ui-draggable-dragging { z-index: 101; }
103 113
104 
-#layoutmask {
114 
+.mask {
105 115 
  position: fixed;
106 116 
  top: 0;
107 117 
  left: 0;
 
@@ -112,12 +122,8 @@ body .tower.ui-draggable-dragging { z-index: 101; }
112 122 
  opacity: 0.8;
113 123 
 }
114 124
115 
-#layoutpicker {
125 
+.dialog {
116 126 
  position: fixed;
117 
- top: 150px;
118 
- left: 200px;
119 
- right: 200px;
120 
- bottom: 100px;
121 127 
  background-color: white;
122 128 
  border: 2px solid rgb(244, 245, 242);
123 129 
  z-index: 201;
 
@@ -126,6 +132,21 @@ body .tower.ui-draggable-dragging { z-index: 101; }
126 132 
  padding: 50px;
127 133 
 }
128 134
135 
+#layoutpicker {
136 
+ top: 150px;
137 
+ left: 200px;
138 
+ right: 200px;
139 
+ bottom: 100px;
140 
+}
141 
+
142 
+#savedialog {
143 
+ top: 200px;
144 
+ left: 50%;
145 
+ height: 300px;
146 
+ width: 500px;
147 
+ margin-left: -250px;
148 
+}
149 
+
129 150 
 #layoutpicker button {
130 151 
  margin: 30px;
131 152 
 }
 
@@ -143,3 +164,8 @@ body .tower.ui-draggable-dragging { z-index: 101; }
143 164 
 .initiallyhidden {
144 165 
  display: none;
145 166 
 }
167 
+
168 
+.error {
169 
+ color: red;
170 
+ font-weight: bold;
171 
+}

Write Preview
Loading…
Откажи
Сачувај