archive
/
dundef-viewer
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Front-end saving support

master
Chris Smith 12 years ago
parent
7986e49555
commit
a9d077a0bf
4 changed files with 81 additions and 10 deletions
Unified View Show Diff Stats
  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 View File

13 
  <body>
 13 
  <body>
14 
   <div id="header">
 14 
   <div id="header">
15 
    <h1><img src="res/images/dd-logo.png" alt="Dungeon Defenders"><span>Layout Editor</span></h1>
 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 
   </div>
 20 
   </div>
18 
   <div id="sidebar">
 21 
   <div id="sidebar">
19 
    <div id="palette">
 22 
    <div id="palette">
32 
   </div>
 35 
   </div>
33 
   <div id="mapcontainer"></div>
 36 
   <div id="mapcontainer"></div>
34 
   <div id="layoutcontainer" class="initiallyhidden">
 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 
     <h2>Select a level</h2>
 40 
     <h2>Select a level</h2>
38 
    </div>
 41 
    </div>
39 
   </div>
 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 
  </body>
 61 
  </body>
41 
 </html>
 62 
 </html>

BIN
res/images/loading.gif View File


+ 24
- 0
res/js/viewer.js View File

161 
   $('#layoutcontainer').hide();
 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 
  $('#createlayout').click(showPicker);
 187 
  $('#createlayout').click(showPicker);
165 
  $('#layoutmask').click(closePicker);
 188 
  $('#layoutmask').click(closePicker);
189 
+ $('#savelayout').click(saveLayout);
166
190
167 
  function updateLayout(data) {
 191 
  function updateLayout(data) {
168 
   clearLayout();
 192 
   clearLayout();

+ 33
- 7
res/style.css View File

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

Write Preview
Loading…
Cancel
Save