/[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.7 - (hide annotations) (download) (as text)
Mon Jan 19 06:05:53 2009 UTC (16 years, 7 months ago) by wakaba
Branch: MAIN
Changes since 1.6: +30 -5 lines
File MIME type: text/html
border-radius support

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

admin@suikawiki.org
ViewVC Help
Powered by ViewVC 1.1.24