/[suikacvs]/webroot/www/js/jste/test.html
Suika

Contents of /webroot/www/js/jste/test.html

Parent Directory Parent Directory | Revision Log Revision Log


Revision 1.8 - (hide annotations) (download) (as text)
Tue Jan 20 06:08:46 2009 UTC (16 years, 7 months ago) by wakaba
Branch: MAIN
Changes since 1.7: +8 -6 lines
File MIME type: text/html
adjust box position so that the pointer really point the refelement

1 wakaba 1.1 <!DOCTYPE HTML>
2     <html lang=en class=account-user-misc>
3     <meta charset=utf-8>
4     <title>新しい利用者アカウントの作成</title>
5     <link rel=stylesheet href="/admin/style/common">
6     <h1>新しい利用者アカウントの作成</h1>
7    
8     <form action=new-user accept-charset=utf-8 method=post>
9    
10     <p><strong>利用者識別子</strong>: <input type=text name=user-id
11     maxlength=20 size=10 required pattern="[0-9a-z-]{4,20}"> (文字「a」〜「z」、「0」〜「9」、「-」を使って 4〜10 文字の文字列を指定してください。)<p><strong>合言葉</strong>: <input type=password name=user-pass
12     size=10 required pattern=".{4,}"> (最低4文字入力してください。)<p><strong>合言葉</strong> (もう一度): <input type=password
13     name=user-pass2 size=10 required pattern=".{4,}">
14    
15     <p><input type=submit value="作成" class=create></form>
16    
17     <section>
18     <!DOCTYPE HTML>
19     <html lang=en class=account-user-info>
20     <title>さん</title>
21     <link rel=stylesheet href="/admin/style/common">
22     <h1>さん</h1><section id=groups><h2>グループ</h2><section id="groups-joined"><h3>参加中のグループ</h3><ul><li><form action="group.admin-groups" accept-charset=utf-8 method=post><a href="../../groups/admin-groups/">admin-groups</a> <input type=hidden name=action value=leave><input type=submit value="このグループから抜ける"></form><li><form action="group.admin-users" accept-charset=utf-8 method=post><a href="../../groups/admin-users/">admin-users</a> <input type=hidden name=action value=leave><input type=submit value="このグループから抜ける"></form><li><form action="group.helo" accept-charset=utf-8 method=post><a href="../../groups/helo/">helo</a> <input type=hidden name=action value=leave><input type=submit value="このグループから抜ける"></form><li><form action="group.helo-admin" accept-charset=utf-8 method=post><a href="../../groups/helo-admin/">helo-admin</a> <input type=hidden name=action value=leave><input type=submit value="このグループから抜ける"></form><li><form action="group.schema-db" accept-charset=utf-8 method=post><a href="../../groups/schema-db/">schema-db</a> <input type=hidden name=action value=leave><input type=submit value="このグループから抜ける"></form><li><form action="group.spec-ja" accept-charset=utf-8 method=post><a href="../../groups/spec-ja/">spec-ja</a> <input type=hidden name=action value=leave><input type=submit value="このグループから抜ける"></form><li><form action="group.spec-ja-admin" accept-charset=utf-8 method=post><a href="../../groups/spec-ja-admin/">spec-ja-admin</a> <input type=hidden name=action value=leave><input type=submit value="このグループから抜ける"></form><li><form action="group.suikawiki" accept-charset=utf-8 method=post><a href="../../groups/suikawiki/">suikawiki</a> <input type=hidden name=action value=leave><input type=submit value="このグループから抜ける"></form><li><form action="group.test-results" accept-charset=utf-8 method=post><a href="../../groups/test-results/">test-results</a> <input type=hidden name=action value=leave><input type=submit value="このグループから抜ける"></form></ul></section><section id="groups-requested"><h3>参加申請中 (未許可) のグループ</h3><ul><li><form action="" accept-charset=utf-8 method=post><a href="../../groups//"></a> <input type=hidden name=action value=leave><input type=submit value="申請取消"></form></ul></section></section><section id=props><h2>特性</h2><p><em>これらの特性は管理者のみが見ることができますが、秘密の情報は記述しないことをお勧めします。</em><form action="prop" accept-charset=utf-8 method=post><input type=hidden name=name value="full_name"><p><label><strong>名前</strong>: <input type="text" name="value" value=""></label> <input type=submit value="保存"></form><form action="prop" accept-charset=utf-8 method=post><input type=hidden name=name value="mail_addr"><p><label><strong>メイル・アドレス</strong>: <input type="email" name="value" value=""></label> <input type=submit value="保存"></form><form action="prop" accept-charset=utf-8 method=post><input type=hidden name=name value="home_url"><p><label><strong>Web サイト URL</strong>: <input type="url" name="value" value=""></label> <input type=submit value="保存"></form></section><section id=password><h2>合言葉</h2>
23    
24     <form action=password method=post accept-charset=utf-8>
25    
26     <p>合言葉を変更できます。<p><strong>新しい合言葉</strong>: <input type=password name=user-pass
27     size=10 required pattern=".{4,}"> (最低4文字入力してください。) <p><strong>新しい合言葉</strong> (もう一度): <input type=password
28     name=user-pass2 size=10 required pattern=".{4,}">
29    
30     <p><input type=submit value="変更">
31    
32     </form>
33     </section>
34    
35     <section id=disable-account><h2>アカウントの無効化</h2>
36    
37     <form action=disabled method=post accept-charset=utf-8>
38    
39     <p><label><input type=checkbox name=action value=enable checked> このアカウントを有効にする</label>
40    
41     <p><strong>警告!</strong> 自分のアカウントを無効にすると、自分で再度有効にすることはできません。<p><input type=submit value="変更"></form></section></section>
42    
43     <style>
44    
45 wakaba 1.4 section, article, menu {
46     display: block;
47 wakaba 1.5 margin: 0;
48     padding: 0;
49 wakaba 1.4 }
50    
51     .sbs-container {
52 wakaba 1.1 display: block;
53     position: absolute;
54     }
55 wakaba 1.4
56     .sbs-container.sbs-without-refelement {
57     position: fixed;
58     bottom: 1em;
59     right: 1em;
60     }
61    
62 wakaba 1.1 .container {
63     display: block;
64 wakaba 1.5 padding-bottom: 2em;
65 wakaba 1.4 background-color: white;
66 wakaba 1.5 width: 20em;
67     min-height: 5em;
68     }
69    
70     .container menu {
71     position: absolute;
72     bottom: 0;
73     left: 0;
74     right: 0;
75     text-align: center;
76 wakaba 1.4 }
77    
78    
79     xxx.container {
80     display: block;
81 wakaba 1.1 position: relative;
82     left: 49px;
83     top: -22px /* -(10px + 34px) / 2 */;
84     min-height: 54px /* 10px + 34px + 10px */;
85     width: 20em;
86     padding: 1em;
87     background-color: rgb(128, 255, 255);
88     color: black;
89     -moz-border-radius: 16px;
90     -webkit-border-radius: 16px;
91     }
92 wakaba 1.4 xxx.pointer {
93 wakaba 1.1 display: block;
94     position: absolute;
95     left: -49px;
96     top: 10px;
97     width: 49px;
98     height: 34px;
99     background-image: url(test.png) /* 49x34 */;
100     }
101    
102     .selected {
103     outline: 2px blue dotted !important;
104     }
105     </style>
106    
107     <script type="text/javascript" src="uupaa-detect.mini.js"></script>
108     <script type="text/javascript" src="uupaa-selector.js"></script>
109     <script type="text/javascript" src="uupaa-selector+.js"></script>
110    
111 wakaba 1.4 <script src="../../css/noderect/NodeRect.js"></script>
112    
113 wakaba 1.1 <script id="uupaa.js" type="text/javascript" src="uupaa/uupaa.js"></script>
114    
115     <script src=tutorial.js></script>
116    
117     <script>
118    
119     window.onload = function () {
120     window.loaded = true;
121     };
122    
123     function showElement (elements) {
124     if (!window.loaded) {
125     new JSTE.Observer ('load', window, function () {
126     showElement (elements);
127     });
128     return;
129     }
130    
131     var top = Infinity;
132     var left = Infinity;
133     var topEl;
134     var leftEl;
135     elements.forEach (function (el) {
136     var rect = uu.element.rect (el);
137     if (rect.y < top) {
138     top = rect.y;
139     topEl = el;
140     }
141     if (rect.x < left) {
142     left = rect.x;
143     leftEl = el;
144     }
145     });
146    
147     var rect = uu.viewport.rect ();
148     if (rect.sh <= top && top <= rect.sh + rect.h) {
149     top = rect.sh;
150     }
151     if (rect.sw <= left && left <= rect.sw + rect.w) {
152     left = rect.sw;
153     }
154    
155     if (leftEl || topEl) {
156     var od = (leftEl || topEl).ownerDocument;
157     var point = od.createElement ('span');
158     point.style.display = 'block';
159     point.style.position = 'absolute';
160     point.style.top = top + 'px';
161     point.style.left = left + 'px';
162     point.style.width = 0;
163     point.style.height = 0;
164     od.documentElement.appendChild (point);
165     point.scrollIntoView (true);
166     point.parentNode.removeChild (point);
167     }
168     }
169    
170 wakaba 1.4 var SimpleBalloonSVG = new JSTE.Class (function (messageContainer, refElement) {
171 wakaba 1.5 this.element = document.createElement ('article');
172 wakaba 1.4 this.element.className = 'sbs-container';
173 wakaba 1.1 this.element.appendChild (messageContainer);
174 wakaba 1.4 document.body.appendChild (this.element);
175    
176     this.contentElement = messageContainer;
177    
178     var msgRects = NR.Element.getRects (messageContainer, window);
179     var msgRect = msgRects.borderBox;
180    
181     var SVGNS = 'http://www.w3.org/2000/svg';
182     var box = document.createElementNS (SVGNS, 'svg');
183    
184 wakaba 1.6 var boxMargin = 1;
185     var boxBorderWidth = 5;
186     var boxBorderColor = 'green';
187 wakaba 1.7 var boxBorderRadiusHorizontal = 10;
188     var boxBorderRadiusVertical = 10;
189 wakaba 1.6 var boxPadding = 10;
190     var boxMBWidth = msgRect.width + (boxMargin + boxBorderWidth + boxPadding) * 2;
191     var boxMBHeight = msgRect.height + (boxMargin + boxBorderWidth + boxPadding) * 2;
192    
193 wakaba 1.4 box.style.display = 'block';
194     box.style.position = 'absolute';
195 wakaba 1.6 box.style.top = -(boxMargin + boxBorderWidth + boxPadding) + 'px';
196     box.style.left = -(boxMargin + boxBorderWidth + boxPadding) + 'px';
197 wakaba 1.4
198     messageContainer.style.position = 'relative';
199    
200 wakaba 1.6 box.setAttribute ('width', boxMBWidth);
201     box.setAttribute ('height', boxMBHeight);
202 wakaba 1.4
203 wakaba 1.7 var bbTop = boxMargin + boxBorderWidth / 2;
204     var bbRight = boxMBWidth - boxMargin * 2 - boxBorderWidth;
205     var bbLeft = boxMargin + boxBorderWidth / 2;
206     var bbBottom = boxMBHeight - boxMargin * 2 - boxBorderWidth;
207    
208     var boxBorder = document.createElementNS (SVGNS, 'path');
209     boxBorder.setAttribute ('d', [
210     'M', bbLeft + boxBorderRadiusHorizontal, bbTop,
211     'L', bbRight - boxBorderRadiusHorizontal, bbTop,
212    
213     'a', boxBorderRadiusHorizontal, boxBorderRadiusVertical, 0, 0, 1,
214     boxBorderRadiusHorizontal, boxBorderRadiusVertical,
215    
216     'L', bbRight, bbBottom - boxBorderRadiusVertical,
217    
218     'a', boxBorderRadiusHorizontal, boxBorderRadiusVertical, 0, 0, 1,
219     -boxBorderRadiusHorizontal, boxBorderRadiusVertical,
220    
221     'L', bbLeft + boxBorderRadiusHorizontal, bbBottom,
222    
223     'a', boxBorderRadiusHorizontal, boxBorderRadiusVertical, 0, 0, 1,
224     -boxBorderRadiusHorizontal, -boxBorderRadiusVertical,
225    
226     'L', bbLeft, bbTop + boxBorderRadiusVertical,
227    
228     'a', boxBorderRadiusHorizontal, boxBorderRadiusVertical, 0, 0, 1,
229     boxBorderRadiusHorizontal, -boxBorderRadiusVertical
230     ].join (' '));
231 wakaba 1.6 boxBorder.setAttribute ('stroke', boxBorderColor);
232     boxBorder.setAttribute ('stroke-width', boxBorderWidth);
233 wakaba 1.4 boxBorder.setAttribute ('fill', this.getBackgroundColor ());
234    
235     box.appendChild (boxBorder);
236    
237     this.element.insertBefore (box, this.element.firstChild);
238 wakaba 1.1
239     if (refElement) {
240 wakaba 1.4 var rects = NR.Element.getRects (refElement, window);
241     var bb = rects.borderBox;
242 wakaba 1.8
243     var pointerBoxMargin = 5;
244     var pointerBoxWidth = 20;
245     var pointerBoxHeight = 40;
246     var pointerBoxLeft = 20;
247 wakaba 1.1
248 wakaba 1.8 var left = bb.left + bb.width * 3 / 4 - (pointerBoxLeft + pointerBoxWidth / 2);
249     if (left < 0) left = boxBorderWidth + boxPadding;
250     var top = bb.bottom + pointerBoxMargin + pointerBoxHeight + boxPadding;
251 wakaba 1.4
252 wakaba 1.1 this.element.style.top = top + 'px';
253     this.element.style.left = left + 'px';
254 wakaba 1.5
255     var pointerSVGElement = document.createElementNS (SVGNS, 'svg');
256     pointerSVGElement.setAttribute ('width', pointerBoxWidth);
257     pointerSVGElement.setAttribute ('height', pointerBoxHeight);
258     pointerSVGElement.style.display = 'block';
259     pointerSVGElement.style.position = 'absolute';
260 wakaba 1.6 pointerSVGElement.style.top = -(pointerBoxHeight + boxPadding) + 'px';
261 wakaba 1.5 pointerSVGElement.style.left = pointerBoxLeft + 'px';
262    
263     var pointerElement = document.createElementNS (SVGNS, 'path');
264 wakaba 1.6 pointerElement.setAttribute ('d', ['M', pointerBoxWidth, pointerBoxHeight, 'Q', pointerBoxWidth * 3 / 4, pointerBoxHeight, pointerBoxWidth / 2, 0, 'Q', pointerBoxWidth / 4, pointerBoxHeight, 0, pointerBoxHeight].join (' '));
265     pointerElement.setAttribute ('stroke', boxBorderColor);
266     pointerElement.setAttribute ('stroke-width', boxBorderWidth);
267 wakaba 1.5 pointerElement.setAttribute ('fill', this.getBackgroundColor ());
268    
269     pointerSVGElement.appendChild (pointerElement);
270    
271     this.element.appendChild (pointerSVGElement);
272    
273 wakaba 1.1 this.refElement = refElement;
274     JSTE.Element.addClassName (refElement, 'selected');
275 wakaba 1.4
276     JSTE.Element.addClassName (this.element, 'sbs-with-refelement');
277     } else {
278     JSTE.Element.addClassName (this.element, 'sbs-without-refelement');
279 wakaba 1.1 }
280    
281     var self = this;
282     //setTimeout (function () {
283     showElement (new JSTE.List ([refElement]).onlyNonNull ());
284     //}, 2000);
285     }, {
286     remove: function () {
287     if (this.refElement) {
288     JSTE.Element.deleteClassName (this.refElement, 'selected');
289     }
290 wakaba 1.4 }, // remove
291    
292     getBackgroundColor: function () {
293     var el = this.contentElement;
294     if (window.getComputedStyle) {
295     return getComputedStyle (el, null).backgroundColor;
296     } else if (el.currentStyle) {
297     return el.currentStyle.backgroundColor;
298     } else {
299     return 'white';
300     }
301     } // getBackgroundColor
302     }); // SimpleBalloonSVG
303 wakaba 1.1
304     var MyMessage = new JSTE.Subclass (function () {
305     return this._super.apply (this, arguments);
306     }, JSTE.Message, {
307     _render: function (msgContainer, buttonContainer) {
308     var doc = this._targetDocument;
309    
310     var container = doc.createElement ('section');
311     container.className = 'container';
312     var style = doc.createElement ('style');
313     style.textContent = this.select + ' { outline: red 2px solid }';
314     container.appendChild (style);
315    
316     container.appendChild (msgContainer);
317     container.appendChild (buttonContainer);
318    
319     var refElement = JSTE.Node.querySelector (document, this.select);
320    
321     if (refElement) {
322     var pointer = doc.createElement ('span');
323     pointer.className = 'pointer';
324     container.appendChild (pointer);
325     }
326    
327 wakaba 1.4 this._simpleBalloon = new SimpleBalloonSVG (container, refElement);
328 wakaba 1.1
329     return this._simpleBalloon.element;
330     }, // _render
331     _remove: function () {
332     this._simpleBalloon.remove ();
333     } // _remove
334     });
335    
336     var xhr = new XMLHttpRequest ();
337     xhr.open ('GET', 'test.xml', false);
338     xhr.send (null);
339    
340    
341     document.a =
342     JSTE.Course.createFromDocument (xhr.responseXML, document);
343    
344     document.b =
345     new JSTE.Tutorial (document, document.a, {messageClass: MyMessage});
346    
347    
348     </script>
349    
350 wakaba 1.3 <!--
351     /* ***** BEGIN LICENSE BLOCK *****
352     * Copyright 2008-2009 Wakaba <w@suika.fam.cx>. All rights reserved.
353     *
354     * This program is free software; you can redistribute it and/or
355     * modify it under the same terms as Perl itself.
356     *
357     * Alternatively, the contents of this file may be used
358     * under the following terms (the "MPL/GPL/LGPL"),
359     * in which case the provisions of the MPL/GPL/LGPL are applicable instead
360     * of those above. If you wish to allow use of your version of this file only
361     * under the terms of the MPL/GPL/LGPL, and not to allow others to
362     * use your version of this file under the terms of the Perl, indicate your
363     * decision by deleting the provisions above and replace them with the notice
364     * and other provisions required by the MPL/GPL/LGPL. If you do not delete
365     * the provisions above, a recipient may use your version of this file under
366     * the terms of any one of the Perl or the MPL/GPL/LGPL.
367     *
368     * "MPL/GPL/LGPL":
369     *
370     * Version: MPL 1.1/GPL 2.0/LGPL 2.1
371     *
372     * The contents of this file are subject to the Mozilla Public License Version
373     * 1.1 (the "License"); you may not use this file except in compliance with
374     * the License. You may obtain a copy of the License at
375     * <http://www.mozilla.org/MPL/>
376     *
377     * Software distributed under the License is distributed on an "AS IS" basis,
378     * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
379     * for the specific language governing rights and limitations under the
380     * License.
381     *
382     * The Original Code is JSTE code.
383     *
384     * The Initial Developer of the Original Code is Wakaba.
385     * Portions created by the Initial Developer are Copyright (C) 2008
386     * the Initial Developer. All Rights Reserved.
387     *
388     * Contributor(s):
389     * Wakaba <w@suika.fam.cx>
390     *
391     * Alternatively, the contents of this file may be used under the terms of
392     * either the GNU General Public License Version 2 or later (the "GPL"), or
393     * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
394     * in which case the provisions of the GPL or the LGPL are applicable instead
395     * of those above. If you wish to allow use of your version of this file only
396     * under the terms of either the GPL or the LGPL, and not to allow others to
397     * use your version of this file under the terms of the MPL, indicate your
398     * decision by deleting the provisions above and replace them with the notice
399     * and other provisions required by the LGPL or the GPL. If you do not delete
400     * the provisions above, a recipient may use your version of this file under
401     * the terms of any one of the MPL, the GPL or the LGPL.
402     *
403     * ***** END LICENSE BLOCK ***** */
404     -->

admin@suikawiki.org
ViewVC Help
Powered by ViewVC 1.1.24