/[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.5 - (hide annotations) (download) (as text)
Mon Jan 19 04:38:33 2009 UTC (16 years, 7 months ago) by wakaba
Branch: MAIN
Changes since 1.4: +37 -2 lines
File MIME type: text/html
Added pointer

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     box.style.display = 'block';
185     box.style.position = 'absolute';
186     box.style.top = '-10px';
187     box.style.left = '-10px';
188    
189     var boxWidth = msgRect.width + 10 * 2;
190     var boxHeight = msgRect.height + 10 * 2;
191    
192     messageContainer.style.position = 'relative';
193    
194     box.setAttribute ('width', boxWidth);
195     box.setAttribute ('height', boxHeight);
196    
197     var boxBorder = document.createElementNS (SVGNS, 'rect');
198     boxBorder.setAttribute ('x', 4);
199     boxBorder.setAttribute ('y', 4);
200     boxBorder.setAttribute ('width', boxWidth - 4 * 2);
201     boxBorder.setAttribute ('height', boxHeight - 4 * 2);
202     boxBorder.setAttribute ('stroke', 'red');
203     boxBorder.setAttribute ('stroke-width', 2);
204     boxBorder.setAttribute ('fill', this.getBackgroundColor ());
205    
206     box.appendChild (boxBorder);
207    
208     this.element.insertBefore (box, this.element.firstChild);
209 wakaba 1.1
210     if (refElement) {
211 wakaba 1.4 var rects = NR.Element.getRects (refElement, window);
212     var bb = rects.borderBox;
213 wakaba 1.1
214 wakaba 1.4 var left = bb.right;
215     var top = bb.top + bb.height / 2;
216    
217 wakaba 1.1 this.element.style.top = top + 'px';
218     this.element.style.left = left + 'px';
219 wakaba 1.5
220     var pointerBoxWidth = 20;
221     var pointerBoxHeight = 30;
222     var pointerBoxLeft = 20;
223    
224     var pointerSVGElement = document.createElementNS (SVGNS, 'svg');
225     pointerSVGElement.setAttribute ('width', pointerBoxWidth);
226     pointerSVGElement.setAttribute ('height', pointerBoxHeight);
227     pointerSVGElement.style.display = 'block';
228     pointerSVGElement.style.position = 'absolute';
229     pointerSVGElement.style.top = -pointerBoxHeight + 'px';
230     pointerSVGElement.style.left = pointerBoxLeft + 'px';
231    
232     var pointerElement = document.createElementNS (SVGNS, 'path');
233     pointerElement.setAttribute ('d', ['M', pointerBoxWidth, pointerBoxHeight, 'L', pointerBoxWidth / 2, 0, 'L', 0, pointerBoxHeight].join (' '));
234     pointerElement.setAttribute ('stroke', 'red');
235     pointerElement.setAttribute ('stroke-width', '1');
236     pointerElement.setAttribute ('fill', this.getBackgroundColor ());
237    
238     pointerSVGElement.appendChild (pointerElement);
239    
240     this.element.appendChild (pointerSVGElement);
241    
242 wakaba 1.1 this.refElement = refElement;
243     JSTE.Element.addClassName (refElement, 'selected');
244 wakaba 1.4
245     JSTE.Element.addClassName (this.element, 'sbs-with-refelement');
246     } else {
247     JSTE.Element.addClassName (this.element, 'sbs-without-refelement');
248 wakaba 1.1 }
249    
250     var self = this;
251     //setTimeout (function () {
252     showElement (new JSTE.List ([refElement]).onlyNonNull ());
253     //}, 2000);
254     }, {
255     remove: function () {
256     if (this.refElement) {
257     JSTE.Element.deleteClassName (this.refElement, 'selected');
258     }
259 wakaba 1.4 }, // remove
260    
261     getBackgroundColor: function () {
262     var el = this.contentElement;
263     if (window.getComputedStyle) {
264     return getComputedStyle (el, null).backgroundColor;
265     } else if (el.currentStyle) {
266     return el.currentStyle.backgroundColor;
267     } else {
268     return 'white';
269     }
270     } // getBackgroundColor
271     }); // SimpleBalloonSVG
272 wakaba 1.1
273     var MyMessage = new JSTE.Subclass (function () {
274     return this._super.apply (this, arguments);
275     }, JSTE.Message, {
276     _render: function (msgContainer, buttonContainer) {
277     var doc = this._targetDocument;
278    
279     var container = doc.createElement ('section');
280     container.className = 'container';
281     var style = doc.createElement ('style');
282     style.textContent = this.select + ' { outline: red 2px solid }';
283     container.appendChild (style);
284    
285     container.appendChild (msgContainer);
286     container.appendChild (buttonContainer);
287    
288     var refElement = JSTE.Node.querySelector (document, this.select);
289    
290     if (refElement) {
291     var pointer = doc.createElement ('span');
292     pointer.className = 'pointer';
293     container.appendChild (pointer);
294     }
295    
296 wakaba 1.4 this._simpleBalloon = new SimpleBalloonSVG (container, refElement);
297 wakaba 1.1
298     return this._simpleBalloon.element;
299     }, // _render
300     _remove: function () {
301     this._simpleBalloon.remove ();
302     } // _remove
303     });
304    
305     var xhr = new XMLHttpRequest ();
306     xhr.open ('GET', 'test.xml', false);
307     xhr.send (null);
308    
309    
310     document.a =
311     JSTE.Course.createFromDocument (xhr.responseXML, document);
312    
313     document.b =
314     new JSTE.Tutorial (document, document.a, {messageClass: MyMessage});
315    
316    
317     </script>
318    
319 wakaba 1.3 <!--
320     /* ***** BEGIN LICENSE BLOCK *****
321     * Copyright 2008-2009 Wakaba <w@suika.fam.cx>. All rights reserved.
322     *
323     * This program is free software; you can redistribute it and/or
324     * modify it under the same terms as Perl itself.
325     *
326     * Alternatively, the contents of this file may be used
327     * under the following terms (the "MPL/GPL/LGPL"),
328     * in which case the provisions of the MPL/GPL/LGPL are applicable instead
329     * of those above. If you wish to allow use of your version of this file only
330     * under the terms of the MPL/GPL/LGPL, and not to allow others to
331     * use your version of this file under the terms of the Perl, indicate your
332     * decision by deleting the provisions above and replace them with the notice
333     * and other provisions required by the MPL/GPL/LGPL. If you do not delete
334     * the provisions above, a recipient may use your version of this file under
335     * the terms of any one of the Perl or the MPL/GPL/LGPL.
336     *
337     * "MPL/GPL/LGPL":
338     *
339     * Version: MPL 1.1/GPL 2.0/LGPL 2.1
340     *
341     * The contents of this file are subject to the Mozilla Public License Version
342     * 1.1 (the "License"); you may not use this file except in compliance with
343     * the License. You may obtain a copy of the License at
344     * <http://www.mozilla.org/MPL/>
345     *
346     * Software distributed under the License is distributed on an "AS IS" basis,
347     * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
348     * for the specific language governing rights and limitations under the
349     * License.
350     *
351     * The Original Code is JSTE code.
352     *
353     * The Initial Developer of the Original Code is Wakaba.
354     * Portions created by the Initial Developer are Copyright (C) 2008
355     * the Initial Developer. All Rights Reserved.
356     *
357     * Contributor(s):
358     * Wakaba <w@suika.fam.cx>
359     *
360     * Alternatively, the contents of this file may be used under the terms of
361     * either the GNU General Public License Version 2 or later (the "GPL"), or
362     * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
363     * in which case the provisions of the GPL or the LGPL are applicable instead
364     * of those above. If you wish to allow use of your version of this file only
365     * under the terms of either the GPL or the LGPL, and not to allow others to
366     * use your version of this file under the terms of the MPL, indicate your
367     * decision by deleting the provisions above and replace them with the notice
368     * and other provisions required by the LGPL or the GPL. If you do not delete
369     * the provisions above, a recipient may use your version of this file under
370     * the terms of any one of the MPL, the GPL or the LGPL.
371     *
372     * ***** END LICENSE BLOCK ***** */
373     -->

admin@suikawiki.org
ViewVC Help
Powered by ViewVC 1.1.24