/[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.6 - (hide annotations) (download) (as text)
Mon Jan 19 05:07:51 2009 UTC (16 years, 7 months ago) by wakaba
Branch: MAIN
Changes since 1.5: +21 -17 lines
File MIME type: text/html
Parameterize values

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

admin@suikawiki.org
ViewVC Help
Powered by ViewVC 1.1.24