root/trunk/plugins/WidgetManager/tmpl/edit.tmpl @ 438

Revision 438, 9.1 kB (checked in by jallen, 3 years ago)

r1888@mt-master (orig r32441): sekine | 2006-06-27 00:50:35 -0700
BugzID:31219

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