PageRenderTime 38ms CodeModel.GetById 18ms app.highlight 16ms RepoModel.GetById 1ms app.codeStats 0ms

/BlogEngine/BlogEngine.NET/admin/widget.js

#
JavaScript | 339 lines | 262 code | 54 blank | 23 comment | 64 complexity | 2938d8622d133bf25c270338e226e3db MD5 | raw file
  1/*-----------------------------------------------------------------------------
  2                              WIDGET FRAMEWORK
  3-----------------------------------------------------------------------------*/
  4
  5BlogEngine.widgetAdmin = {
  6    zoneNames: [],
  7    moveContainer: null,
  8    moveDropdown: null,
  9    moveContainerCurrentLocationWidgetId: null,
 10    moveContainerCurrentLocationWidgetZone: null
 11    ,
 12    positionMoveDropdown: function() {
 13
 14        // Make sure the following conditions are met.
 15        if (!BlogEngine.widgetAdmin.moveContainer ||
 16            !BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetId ||
 17            !BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetZone)
 18            return;
 19
 20        var oWidget = BlogEngine.$("widget" + BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetId);
 21        if (oWidget) {
 22            oWidget.insertBefore(BlogEngine.widgetAdmin.moveContainer, oWidget.firstChild);
 23            BlogEngine.widgetAdmin.moveContainer.style.display = '';  // unhide if hidden.
 24        }
 25    }
 26    ,
 27    moveComplete: function(response) {
 28
 29        if (response) {
 30
 31            var data = response.split(',');
 32            if (data.length == 4) {
 33
 34                var oldZone = data[0];
 35                var widgetToMove = data[1];
 36                var newZone = data[2];
 37                var moveBeforeWidget = data[3];
 38
 39                var divOldZone = BlogEngine.$("widgetzone_" + oldZone);
 40                var divWidgetToMove = BlogEngine.$("widget" + widgetToMove);
 41                var divNewZone = BlogEngine.$("widgetzone_" + newZone);
 42                var divMoveBeforeWidget = moveBeforeWidget && moveBeforeWidget.length > 0 ? BlogEngine.$("widget" + moveBeforeWidget) : null;
 43
 44                // note: not actually using divOldZone.
 45                if (divOldZone && divWidgetToMove && divNewZone) {
 46
 47                    // Move widget in DOM.
 48                    if (divMoveBeforeWidget)
 49                        divNewZone.insertBefore(divWidgetToMove, divMoveBeforeWidget);
 50                    else
 51                        divNewZone.appendChild(divWidgetToMove);
 52
 53                    BlogEngine.widgetAdmin.clearWidgetList();
 54                }
 55            }
 56        }
 57    }
 58    ,
 59    processMoveWidget: function() {
 60
 61        var selectedValue = BlogEngine.widgetAdmin.moveDropdown.value;
 62        if (selectedValue && selectedValue.length > 0) {
 63
 64            // The selected value might either be a ZoneName or a Widget.  If it is a ZoneName,
 65            // the widget will be placed at the bottom of that Zone.  If it is a Widget, the widget
 66            // will be moved in front of the selected Widget.
 67
 68            if (selectedValue != BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetId) {
 69
 70                var sZoneNamePrefix = "zone_";
 71                var sNewZoneName = null;
 72                var iIndex = BlogEngine.widgetAdmin.moveDropdown.selectedIndex;
 73
 74                // Find the zone of the selected item by going up the list.  If the selected item
 75                // is a zone, then sNewZoneName will be the selected zone.
 76                while (!sNewZoneName && iIndex >= 0) {
 77
 78                    if (BlogEngine.widgetAdmin.moveDropdown[iIndex].value &&
 79                        BlogEngine.widgetAdmin.moveDropdown[iIndex].value.indexOf(sZoneNamePrefix) == 0) {
 80
 81                        sNewZoneName = BlogEngine.widgetAdmin.moveDropdown[iIndex].value.substr(sZoneNamePrefix.length);
 82                    }
 83                    iIndex--;
 84                }
 85
 86                if (sNewZoneName) {
 87
 88                    // If a Zone was selected from the dropdown list, then set moveBeforeWidgetId to an empty string.
 89                    var moveBeforeWidgetId = selectedValue.indexOf(sZoneNamePrefix) == 0 ? "" : selectedValue;
 90
 91                    // Pass 4 pieces of data back to the server.
 92                    // (1) Old Zone, (2) Widget Id to move, (3) New Zone, (4) Move Before Widget Id.
 93                    var sData =
 94                        BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetZone + "," +
 95                        BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetId + "," +
 96                        sNewZoneName + "," + moveBeforeWidgetId;
 97
 98                    BlogEngine.createCallback(BlogEngine.webRoot + "admin/WidgetEditor.aspx?move=" + sData + "&rnd=" + Math.random(), BlogEngine.widgetAdmin.moveComplete);
 99                }
100            }
101        }
102    }
103    ,
104    hideMoveToList: function() {
105        if (BlogEngine.widgetAdmin.moveContainer) {
106            BlogEngine.widgetAdmin.moveContainer.style.display = 'none';  // hide dropdown container.
107        }
108
109        BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetId = null;
110        BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetZone = null;
111    }
112    ,
113    clearWidgetList: function() {
114        // After a widget is added, edited, moved, or removed, the moveDropdown list is cleared so
115        // it can be reloaded with updated data the next time it is needed.  Also hide dropdown container.
116
117        BlogEngine.widgetAdmin.hideMoveToList();
118
119        if (BlogEngine.widgetAdmin.moveDropdown && BlogEngine.widgetAdmin.moveDropdown.firstChild) {
120            while (BlogEngine.widgetAdmin.moveDropdown.firstChild) {
121                BlogEngine.widgetAdmin.moveDropdown.removeChild(BlogEngine.widgetAdmin.moveDropdown.firstChild);
122            }
123        }
124    }
125    ,
126    createDropdownOption: function(text, value) {
127        var oOption = document.createElement('option');
128        oOption.value = value;
129        oOption.appendChild(document.createTextNode(text));
130        return oOption;
131    }
132    ,
133    loadMoveDropdownItems: function(response) {
134
135        if (!response || response.length == 0) {
136            alert('Failed to retrieve list of zones and widgets.');
137            return;
138        }
139
140        var oResponse = eval("(" + response + ")");
141
142        if (!oResponse || typeof oResponse.zones == 'undefined') {
143            alert('Failed to retrieve list of zones and widgets.');
144            return;
145        }
146
147        var zoneAndChildWidgets = oResponse.zones;
148
149        if (!BlogEngine.widgetAdmin.moveContainer) {
150            BlogEngine.widgetAdmin.moveContainer = document.createElement('div');
151            BlogEngine.widgetAdmin.moveContainer.id = 'moveWidgetToContainer';
152        }
153
154        if (!BlogEngine.widgetAdmin.moveDropdown) {
155
156            BlogEngine.widgetAdmin.moveDropdown = document.createElement('select');
157            BlogEngine.widgetAdmin.moveDropdown.id = 'moveWidgetTo';
158
159            var oMoveBtn = document.createElement('input');
160            oMoveBtn.id = 'moveWidgetToBtn';
161            oMoveBtn.type = 'button';
162            oMoveBtn.value = 'Move';
163            oMoveBtn.onclick = BlogEngine.widgetAdmin.processMoveWidget;
164
165            BlogEngine.widgetAdmin.moveContainer.appendChild(BlogEngine.widgetAdmin.moveDropdown);
166            BlogEngine.widgetAdmin.moveContainer.appendChild(oMoveBtn);
167        }
168
169        BlogEngine.widgetAdmin.moveDropdown.appendChild(BlogEngine.widgetAdmin.createDropdownOption(oResponse.moveWidgetTo, ''));
170
171        for (var z = 0; z < zoneAndChildWidgets.length; z++) {
172
173            var zone = zoneAndChildWidgets[z];
174            BlogEngine.widgetAdmin.moveDropdown.appendChild(BlogEngine.widgetAdmin.createDropdownOption("[" + zone.zoneName + "]", 'zone_' + zone.zoneName));
175
176            for (var w = 0; w < zone.widgets.length; w++) {
177                BlogEngine.widgetAdmin.moveDropdown.appendChild(BlogEngine.widgetAdmin.createDropdownOption(String.fromCharCode(160) + String.fromCharCode(160) + '-' + String.fromCharCode(160) + zone.widgets[w].desc, zone.widgets[w].id));
178            }
179        }
180
181        BlogEngine.widgetAdmin.positionMoveDropdown();
182    }
183    ,
184    getWidgetZoneNameFromElement: function(el) {
185        // If the element passed in is a widgetzone, the zone name is extracted from the element's id and returned.
186        var sIdPrefix = "widgetzone_";
187        if (el.id && el.id.indexOf(sIdPrefix) == 0 && el.className && el.className == "widgetzone") {
188            return el.id.substr(sIdPrefix.length);
189        }
190        return null;
191    }
192    ,
193    sendRequestForMoveItems: function() {
194
195        // The zoneNames need to be loaded only one time since new zones can't be added while
196        // the document is loaded.
197        if (BlogEngine.widgetAdmin.zoneNames.length == 0) {
198            var oDivs = document.getElementsByTagName('div');
199            for (var i = 0; i < oDivs.length; i++) {
200
201                if (BlogEngine.widgetAdmin.getWidgetZoneNameFromElement(oDivs[i]))
202                    BlogEngine.widgetAdmin.zoneNames[BlogEngine.widgetAdmin.zoneNames.length] = BlogEngine.widgetAdmin.getWidgetZoneNameFromElement(oDivs[i]);
203
204            }
205        }
206
207        BlogEngine.createCallback(BlogEngine.webRoot + "admin/WidgetEditor.aspx?getmoveitems=" + BlogEngine.widgetAdmin.zoneNames.join(",") + "&rnd=" + Math.random(), BlogEngine.widgetAdmin.loadMoveDropdownItems);
208    }
209    ,
210    getWidgetsZoneName: function(id) {
211        var oWidget = BlogEngine.$("widget" + id);
212        var zoneName = null;
213        if (oWidget) {
214            while (!zoneName && oWidget.parentNode) {
215                zoneName = BlogEngine.widgetAdmin.getWidgetZoneNameFromElement(oWidget.parentNode);
216                oWidget = oWidget.parentNode;
217            }
218        }
219        return zoneName;
220    }
221    ,
222    initiateMoveWidget: function(id) {
223
224        var sWidgetZoneName = BlogEngine.widgetAdmin.getWidgetsZoneName(id);
225
226        if (BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetId &&
227            BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetZone &&
228            id == BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetId &&
229            sWidgetZoneName == BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetZone) {
230
231            // Move link was clicked on the same widget the moveContainer is already at.  Just hide.
232            BlogEngine.widgetAdmin.hideMoveToList();
233            return;
234        }
235
236        BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetId = id;
237        BlogEngine.widgetAdmin.moveContainerCurrentLocationWidgetZone = sWidgetZoneName;
238
239        if (!BlogEngine.widgetAdmin.moveDropdown || BlogEngine.widgetAdmin.moveDropdown.childNodes.length == 0)
240            BlogEngine.widgetAdmin.sendRequestForMoveItems();
241        else
242            BlogEngine.widgetAdmin.positionMoveDropdown();
243    }
244    ,
245    editWidget: function(name, id) {
246        window.scrollTo(0, 0);
247        var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;
248        var height = document.documentElement.clientHeight + document.documentElement.scrollTop;
249
250        var zone = BlogEngine.widgetAdmin.getWidgetsZoneName(id);
251
252        var layer = document.createElement('div');
253        layer.style.zIndex = 1002;
254        layer.id = 'layer';
255        layer.style.position = 'absolute';
256        layer.style.top = '0px';
257        layer.style.left = '0px';
258        layer.style.height = document.documentElement.scrollHeight + 'px';
259        layer.style.width = width + 'px';
260        layer.style.backgroundColor = 'black';
261        layer.style.opacity = '.6';
262        layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=60)");
263        document.body.style.position = 'static';
264        document.body.appendChild(layer);
265
266        var size = { 'height': 500, 'width': 750 };
267        var iframe = document.createElement('iframe');
268        iframe.name = 'Widget Editor';
269        iframe.id = 'WidgetEditor';
270        iframe.src = BlogEngine.webRoot + 'admin/WidgetEditor.aspx?widget=' + name + '&id=' + id + "&zone=" + zone;
271        iframe.style.height = size.height + 'px';
272        iframe.style.width = size.width + 'px';
273        iframe.style.position = 'fixed';
274        iframe.style.zIndex = 1003;
275        iframe.style.backgroundColor = 'white';
276        iframe.style.border = '4px solid silver';
277        iframe.frameborder = '0';
278
279        iframe.style.top = ((height + document.documentElement.scrollTop) / 2) - (size.height / 2) + 'px';
280        iframe.style.left = (width / 2) - (size.width / 2) + 'px';
281
282        document.body.appendChild(iframe);
283    }
284    ,
285    addWidget: function(type, zone) {
286        BlogEngine.createCallback(BlogEngine.webRoot + "admin/WidgetEditor.aspx?add=" + type + "&zone=" + zone + "&rnd=" + Math.random(), BlogEngine.widgetAdmin.appendWidget);
287    }
288    ,
289    appendWidget: function(response) {
290        if (response == "reload") {
291            location.reload();
292        }
293        else {
294            var delimiterPos = response.indexOf('?');
295            if (delimiterPos != -1) {
296                var zoneId = response.substr(0, delimiterPos);
297                response = response.substr(delimiterPos + 1);
298                var zone = BlogEngine.$('widgetzone_' + zoneId);
299                if (zone) {
300                    // clearWidgetList() BEFORE using innerHTML.  If done after,
301                    // causes problems with losing a handle to the moveContainer
302                    // if the moveContainer is currently visible.
303                    BlogEngine.widgetAdmin.clearWidgetList();
304                    zone.innerHTML += response;
305                }
306            }
307        }
308    }
309    ,
310    widgetRemoved: function(response) {
311        if (!response || response.length < 36) {
312            alert('Failed to remove the widget.');
313            return;
314        }
315
316        var widgetId = response.substr(0, 36);
317        var zoneName = response.substr(36);
318        var zone = BlogEngine.$("widgetzone_" + zoneName);
319        var widget = BlogEngine.$("widget" + widgetId);
320
321        if (zone && widget) {
322            BlogEngine.widgetAdmin.clearWidgetList();
323            zone.removeChild(widget);
324        }
325    }
326    ,
327    removeWidget: function(id) {
328        if (confirm('Are you sure you want to remove the widget?')) {
329            var zone = BlogEngine.widgetAdmin.getWidgetsZoneName(id);
330            BlogEngine.createCallback(BlogEngine.webRoot + "admin/WidgetEditor.aspx?remove=" + id + "&zone=" + zone + "&rnd=" + Math.random(), BlogEngine.widgetAdmin.widgetRemoved);
331        }
332    }
333    ,
334    closeEditor: function() {
335        document.body.removeChild(BlogEngine.$('WidgetEditor'));
336        document.body.removeChild(BlogEngine.$('layer'));
337        document.body.style.position = '';
338    }
339};