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

Revision 428, 9.0 kB (checked in by jallen, 3 years ago)

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