root/branches/release-36/tmpl/cms/edit_widget.tmpl @ 2052

Revision 2052, 11.2 kB (checked in by fumiakiy, 19 months ago)

Integrated Widget Manager to the core. BugId:68750

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