root/branches/release-29/plugins/WidgetManager/tmpl/edit.tmpl @ 1309

Revision 1309, 11.0 kB (checked in by ddavis, 22 months ago)

standarize js comment tag escape. BugzID:58265
  • Property svn:keywords set to Id Revision
Line 
1<mt:setvarblock name="page_title"><__trans phrase="Edit Widget Set"></mt:setvarblock>
2<$mt:setvar name="position_actions_bottom" value="1"$>
3<mt:setvarblock name="html_head" append="1">
4<link rel="stylesheet" href="<mt:var name="static_uri">plugins/WidgetManager/styles/app.css" type="text/css" />
5<script type="text/javascript" src="<mt:var name="static_uri">plugins/WidgetManager/js/app.js"></script>
6<script type="text/javascript">
7/* <![CDATA[ */
8var colWidth = 350;
9var modWidth = 275;
10var modHeight = 30;
11var gCols;
12
13var isIE = navigator.userAgent.indexOf('MSIE') >= 0;
14var isOpera = navigator.userAgent.indexOf('Opera') >= 0;
15var isSafari = navigator.userAgent.indexOf('Safari') >= 0;
16var curMod, curCol;
17var dragStartX, dragStartY;
18var topZIndex = 10;
19
20function checkName() {
21        widgetname = getByID('name').value;
22        if (!widgetname) {
23            alert('<__trans phrase="Please use a unique name for this widget set." escape="js">');
24            return false;
25        }
26
27        oldname = getByID('old_name').value;
28
29        var1 = "<mt:loop name="widgetmanagers"><mt:var name="widgetmanager">,</mt:loop>";
30        var2 = var1.split(",");
31
32        for (var i=0; i < var2.length; i++) {
33            if (var2[i] == widgetname && (widgetname != oldname)) {
34                alert('<__trans phrase="You already have a widget set named '[_1].' Please use a unique name for this widget set." params="$name" escape="js">'.replace(/\$name/, widgetname));
35                return false;
36            }
37        }
38}
39
40
41var gDropIndex, gDrop;
42var gCanDrop = 0;
43
44function init () {
45    gDrop = new Object();
46    gDrop.node = getByID('stage-drop');
47
48    gCols = new Array();
49
50    gCols[0] = new Column('installed-column', 0, 0);
51
52<mt:loop name="installed">
53    gCols[0].addModule('<mt:var name="id">');
54</mt:loop>
55
56    gCols[1] = new Column('available-column', 1, 322);
57
58<mt:loop name="available">
59    gCols[1].addModule('<mt:var name="id">');
60</mt:loop>
61
62    calculateHeight();
63}
64
65function Column (label, index, left) {
66    this.label = label;
67    this.node = getByID(label);
68    this.node.style.height = '110px';
69    this.x = left;
70    this.y = 0;
71    this.offsetX = offsetX(this.node) - this.x;
72    this.offsetY = offsetY(this.node) - this.y;
73    this.startX = this.x + 5;
74    this.startY = this.y + 35;
75    this.index = index;
76    this.width = colWidth;
77    this.height = 100;
78    this.modules = new Array();
79    return this;
80}
81
82Column.prototype.addModule = function (key, label) {
83    var row = this.modules.length;
84    this.modules[row] = new Module(key, label, row, this.index, this);
85}
86
87Column.prototype.moveModule = function (module, index) {
88    var inCol = (curCol.index == module.col);
89    if (inCol && (module.row == index)) {
90        module.move(module.x, module.y);
91        return;
92    }
93    if (inCol && module.row < index) index--;
94   
95    // Remove the module from the old column...
96    var i;
97    var oldMods = gCols[module.col].modules;
98    for (i = module.row + 1; i < oldMods.length; i++) {
99        oldMods[i].y -= modHeight;
100        oldMods[i].row--;
101        oldMods[i].move(oldMods[i].x, oldMods[i].y);
102        oldMods[i-1] = oldMods[i];
103    }
104    oldMods.length--;
105    if (inCol && index > oldMods.length) index--;
106   
107    // ... and insert it into the new column.
108    var newMods = curCol.modules;
109    for (i = newMods.length-1; i >= index; i--) {
110        newMods[i].y += modHeight;
111        newMods[i].row++;
112        newMods[i].move(newMods[i].x, newMods[i].y);
113        newMods[i+1] = newMods[i];
114    }
115    module.colObj = curCol;
116    module.row = index;
117    module.col = curCol.index;
118    module.x = curCol.startX;
119    module.y = curCol.startY + index * modHeight;
120    module.move(module.x, module.y);
121    newMods[index] = module;
122   
123    calculateHeight();
124}
125
126function Module (key, label, row, col, colObj) {
127        this.key = key;
128        this.label = label;
129        this.row = row;
130        this.col = col;
131        this.colObj = colObj;
132        this.node = getByID('module-' + key);
133        this.node.onmousedown = this.dragStart;
134        this.node.module = this;
135        this.x = colObj.startX;
136        this.y = colObj.startY + modHeight * row;
137        this.move(this.x, this.y);
138        this.node.style.width = modWidth + 'px';
139        this.node.style.display = 'block';
140        return this;
141}
142
143Module.prototype.move = function (x, y) {
144    move(this.node, x, y);
145}
146
147Module.prototype.dragStart = function (event) {
148    document.onmousemove = dragMove;
149    document.onmouseup = dragStop;
150    gCanDrop = 0;
151    var module = this.module;
152    dragStartX = cursorX(event);
153    dragStartY = cursorY(event);
154    module.node.style.zIndex = topZIndex;
155    curMod = module;
156    return false;
157}
158
159function dragMove (event) {
160    if (!curMod) return true;
161    var x = cursorX(event);
162    var y = cursorY(event);
163    curMod.move(curMod.x + x - dragStartX, curMod.y + y - dragStartY);
164    var i;
165    curCol = null;
166    for (i = 0; i< gCols.length; i++) {
167        var adjX = gCols[i].x + gCols[i].offsetX;
168        var adjY = gCols[i].y + gCols[i].offsetY;
169        if ((x > adjX) &&
170            (x < adjX + gCols[i].width) &&
171            (y > adjY) &&
172            (y < adjY + gCols[i].height)) {
173            curCol = gCols[i];
174            break;
175        }
176    }
177    if (curCol == null) {
178        gDrop.node.style.display = 'none';
179        gCanDrop = 0;
180        return false;
181    }
182    gDropIndex = Math.floor((y - curCol.y - curCol.offsetY) / modHeight + 0.0);
183    if (gDropIndex < 0)
184        gDropIndex = 0;
185    if (gDropIndex > curCol.modules.length)
186        gDropIndex = curCol.modules.length;
187    if (!gCanDrop) {
188        gCanDrop = 1;
189        gDrop.node.style.display = 'block';
190    }
191    move(gDrop.node, curCol.startX, curCol.startY + gDropIndex * modHeight - 8);
192    return false;
193}
194
195function dragStop (event) {
196    if (!curMod) return true;
197    gDrop.node.style.display = 'none';
198    if (!curCol || !gCanDrop)
199        curMod.move(curMod.x, curMod.y);
200    else
201        curCol.moveModule(curMod, gDropIndex);
202    curMod = null;
203    return false;
204}
205
206function moduleListStr () {
207    var s = '';
208    var i, j;
209    for (i = 0; i < gCols.length; i++)
210        for (j = 0; j < gCols[i].modules.length; j++)
211            s += gCols[i].modules[j].key + '=' + (i+1) + '.' + (j+1) + ';';
212    return s;
213}
214
215function move (node, x, y) {
216    node.style.left = x + 'px';
217    node.style.top = y + 'px';
218}
219
220function offsetX (node) {
221    var o = node.offsetLeft;
222    while((node = node.offsetParent) != null)
223        o += node.offsetLeft;
224    return o;
225}
226
227function offsetY (node) {
228    var o = node.offsetTop;
229    while((node = node.offsetParent) != null)
230        o += node.offsetTop;
231    return o;
232}
233
234function cursorX (event) {
235    var x;
236    if (isIE || isOpera) {
237        x = window.event.clientX;
238        if (document.documentElement.scrollLeft)
239            x += document.documentElement.scrollLeft;
240        if(!isOpera) x += document.body.scrollLeft;
241    } else {
242        x = event.clientX;
243        if (!isSafari)
244            x += window.scrollX;
245    }
246    return x;
247}
248
249function cursorY (event) {
250    var y;
251    if (isIE || isOpera) {
252        y = window.event.clientY;
253        if (document.documentElement.scrollTop)
254            y += document.documentElement.scrollTop;
255        if(!isOpera) y += document.body.scrollTop;
256    } else {
257        y = event.clientY;
258        if (!isSafari)
259            y += window.scrollY;
260    }
261    return y;
262}
263
264function calculateHeight () {
265    var i, newHeight;
266    var maxMods = 0;
267    for (i = 0; i < gCols.length; i++) {
268        if (gCols[i].modules.length > maxMods) {
269            maxMods = gCols[i].modules.length;
270        }
271    }
272    if ((maxMods * modHeight) < 100) {
273        newHeight = 100;
274    } else {
275        newHeight = (maxMods + 1) * modHeight;
276    }
277    for (i = 0; i < gCols.length; i++) {
278        gCols[i].height = newHeight;
279        gCols[i].node.style.height = (newHeight + 10) + 'px';
280    }
281    getByID('center-column').style.height = (newHeight + 10) + 'px';
282    getByID('stage').style.height = (newHeight + 10) + 'px';
283    return true;
284}
285
286TC.attachLoadEvent( init );
287/* ]]> */
288</script>
289</mt:setvarblock>
290
291<mt:include name="include/header.tmpl">
292
293<div id="msg-block">
294<mt:if name="rebuild">
295<mtapp:statusmsg id="saved-msg" class="success" rebuild="all">
296    <__trans phrase="Your changes to the Widget Set have been saved.">
297</mtapp:statusmsg>
298</mt:if>
299</div>
300
301<div id="edit-form">
302
303    <form onsubmit="this.modules.value = moduleListStr(); return checkName();" id="manager" name="manager" method="post" action="<mt:var name="script_url">">
304      <input type="hidden" name="__mode" value="save_widget" />
305      <input type="hidden" name="blog_id" value="<mt:var name="blog_id">" />
306      <input type="hidden" name="old_name" id="old_name" value="<mt:var name="name">" />
307      <input type="hidden" name="modules" value="" />
308
309      <fieldset>
310      <mtapp:setting
311          id="name"
312          label="<__trans phrase="Set Name">">
313          <div class="textarea-wrapper">
314              <input name="name" id="name" class="full-width" value="<mt:var name="name">" />
315          </div>
316      </mtapp:setting>
317
318      <mtapp:setting
319          id="widgets"
320          label="<__trans phrase="Drag and drop the widgets you want into the Installed column.">">
321          <div id="stage" class="pkg">
322              <div id="installed-column" class="pkg">
323                  <p><__trans phrase="Installed Widgets"></p>
324              <mt:loop name="installed">
325                  <div id="module-<mt:var name="id">" class="module pkg">
326                    <div class="module-name"><a href="javascript:void(0)"><mt:var name="name"></a></div>
327                    <div class="module-edit"><a href="<mt:var name="script_url">?__mode=view&amp;_type=template&amp;id=<mt:var name="id">&amp;blog_id=<mt:var name="blog_id">" target="_new"><__trans phrase="edit"></a></div>
328                  </div>
329              </mt:loop>
330              </div>
331              <div id="center-column" class="pkg">&nbsp;</div>
332              <div id="available-column" class="pkg">
333                  <p><__trans phrase="Available Widgets"></p>
334              <mt:loop name="available">
335                  <div id="module-<mt:var name="id">" class="module pkg">
336                    <div class="module-name"><a href="javascript:void(0)"><mt:var name="name"></a></div>
337                    <div class="module-edit"><a href="<mt:var name="script_url">?__mode=view&amp;_type=template&amp;id=<mt:var name="id">&amp;blog_id=<mt:var name="blog_id">" target="_new"><__trans phrase="edit"></a></div>
338                  </div>
339              </mt:loop>
340              </div>
341              <div id="stage-drop">&nbsp;</div>
342          </div>
343      </mtapp:setting>
344      </fieldset>
345
346    <mt:setvarblock name="action_buttons">
347        <button
348            type="submit"
349            accesskey="s"
350            title="<__trans phrase="Save changes to this widget set (s)">"
351            class="primary-button"
352            ><__trans phrase="Save Changes"></button>
353    </mt:setvarblock>
354    <mt:include name="include/actions_bar.tmpl" bar_position="bottom" hide_pager="1" settings_bar="1">
355    </form>
356</div>
357
358<mt:include name="include/footer.tmpl">
Note: See TracBrowser for help on using the browser.