js/jste/test.html

<!DOCTYPE HTML>
<html lang=en class=account-user-misc>
<meta charset=utf-8>
<title>新しい利用者アカウントの作成</title>
<link rel=stylesheet href="/admin/style/common">
<h1>新しい利用者アカウントの作成</h1>

<form action=new-user accept-charset=utf-8 method=post>

<p><strong>利用者識別子</strong>: <input type=text name=user-id
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
size=10 required pattern=".{4,}"> (最低4文字入力してください。)<p><strong>合言葉</strong> (もう一度): <input type=password
name=user-pass2 size=10 required pattern=".{4,}">

<p><input type=submit value="作成" class=create></form>

<section>
<!DOCTYPE HTML>
<html lang=en class=account-user-info>
<title>さん</title>
<link rel=stylesheet href="/admin/style/common">
<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>

<form action=password method=post accept-charset=utf-8>

<p>合言葉を変更できます。<p><strong>新しい合言葉</strong>: <input type=password name=user-pass
size=10 required pattern=".{4,}"> (最低4文字入力してください。) <p><strong>新しい合言葉</strong> (もう一度): <input type=password
name=user-pass2 size=10 required pattern=".{4,}">

<p><input type=submit value="変更">

</form>
</section>

<section id=disable-account><h2>アカウントの無効化</h2>

<form action=disabled method=post accept-charset=utf-8>

<p><label><input type=checkbox name=action value=enable checked> このアカウントを有効にする</label>

<p><strong>警告!</strong> 自分のアカウントを無効にすると、自分で再度有効にすることはできません。<p><input type=submit value="変更"></form></section></section>

<style>

section, article, menu {
  display: block;
  margin: 0;
  padding: 0;
}

.sbs-container {
  display: block;
  position: absolute;
}

.sbs-container.sbs-without-refelement {
  position: fixed;
  bottom: 1em;
  right: 1em;
}

.container {
  display: block;
  padding-bottom: 2em;
  background-color: white;
  width: 20em;
  min-height: 5em;
}

.container menu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}


xxx.container {
  display: block;
  position: relative;
  left: 49px;
  top: -22px /* -(10px + 34px) / 2 */;
  min-height: 54px /* 10px + 34px + 10px */;
  width: 20em;
  padding: 1em;
  background-color: rgb(128, 255, 255);
  color: black;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
}
xxx.pointer {
  display: block;
  position: absolute;
  left: -49px;
  top: 10px;
  width: 49px;
  height: 34px;
  background-image: url(test.png) /* 49x34 */;
}

.selected {
  outline: 2px blue dotted !important;
}
</style>

<script type="text/javascript" src="uupaa-detect.mini.js"></script>
<script type="text/javascript" src="uupaa-selector.js"></script>
<script type="text/javascript" src="uupaa-selector+.js"></script>

<script src="../../css/noderect/NodeRect.js"></script>

<script id="uupaa.js" type="text/javascript" src="uupaa/uupaa.js"></script>

<script src=tutorial.js></script>

<script>

window.onload = function () {
  window.loaded = true;
};

function showElement (elements) {
  if (!window.loaded) {
    new JSTE.Observer ('load', window, function () {
      showElement (elements);
    });
    return;
  }

  var top = Infinity;
  var left = Infinity;
  var topEl;
  var leftEl;
  elements.forEach (function (el) {
    var rect = uu.element.rect (el);
    if (rect.y < top) {
      top = rect.y;
      topEl = el;
    }
    if (rect.x < left) {
      left = rect.x;
      leftEl = el;
    }
  });
  
  var rect = uu.viewport.rect ();
  if (rect.sh <= top && top <= rect.sh + rect.h) {
    top = rect.sh;
  }
  if (rect.sw <= left && left <= rect.sw + rect.w) {
    left = rect.sw;
  }
  
  if (leftEl || topEl) {
    var od = (leftEl || topEl).ownerDocument;
    var point = od.createElement ('span');
    point.style.display = 'block';
    point.style.position = 'absolute';
    point.style.top = top + 'px';
    point.style.left = left + 'px';
    point.style.width = 0;
    point.style.height = 0;
    od.documentElement.appendChild (point);
    point.scrollIntoView (true);
    point.parentNode.removeChild (point);
  }
}

var SimpleBalloonSVG = new JSTE.Class (function (messageContainer, refElement) {
  this.element = document.createElement ('article');
  this.element.className = 'sbs-container';
  this.element.appendChild (messageContainer);
  document.body.appendChild (this.element);

  this.contentElement = messageContainer;

  var msgRects = NR.Element.getRects (messageContainer, window);
  var msgRect = msgRects.borderBox;

  var SVGNS = 'http://www.w3.org/2000/svg';  
  var box = document.createElementNS (SVGNS, 'svg');

  var bb = this.getComputedStyle (null);

  var bwDelta = bb.marginLeft + bb.borderLeftWidth + bb.paddingLeft;
  var bhDelta = bb.marginTop + bb.borderTopWidth + bb.paddingTop;
  var boxMBWidth = msgRect.width + bwDelta
      + bb.marginRight + bb.borderRightWidth + bb.paddingRight;
  var boxMBHeight = msgRect.height + bhDelta
      + bb.marginBottom + bb.borderBottomWidth + bb.paddingBottom;

  box.style.display = 'block';
  box.style.position = 'absolute';
  box.style.top = -bhDelta + 'px';
  box.style.left = -bwDelta + 'px';

  messageContainer.style.position = 'relative';

  box.setAttribute ('width', boxMBWidth);
  box.setAttribute ('height', boxMBHeight);

  var bbTop = bb.marginTop + bb.borderTopWidth / 2;
  var bbRight = boxMBWidth - bb.marginLeft - bb.borderLeftWidth / 2
      - bb.marginRight - bb.borderRightWidth / 2;
  var bbLeft = bb.marginLeft + bb.borderLeftWidth / 2;
  var bbBottom = boxMBHeight - bb.marginTop - bb.marginBottom
      - bb.borderTopWidth / 2 - bb.borderBottomWidth / 2;

  var boxBorder = document.createElementNS (SVGNS, 'path');
  boxBorder.setAttribute ('d', [
    'M', bbLeft + bb.manakaiBorderTopLeftRadiusHorizontal, bbTop,

    'L', bbRight - bb.manakaiBorderTopRightRadiusHorizontal, bbTop,

    'a',
    bb.manakaiBorderTopRightRadiusHorizontal,
    bb.manakaiBorderTopRightRadiusVertical, 0, 0, 1, 
    bb.manakaiBorderTopRightRadiusHorizontal,
    bb.manakaiBorderTopRightRadiusVertical,

    'L', bbRight, bbBottom - bb.manakaiBorderBottomRightRadiusVertical,

    'a',
    bb.manakaiBorderBottomRightRadiusHorizontal,
    bb.manakaiBorderBottomRightRadiusVertical, 0, 0, 1,
    -bb.manakaiBorderBottomRightRadiusHorizontal,
    bb.manakaiBorderBottomRightRadiusVertical,    

    'L', bbLeft + bb.manakaiBorderBottomLeftRadiusHorizontal, bbBottom,

    'a',
    bb.manakaiBorderBottomLeftRadiusHorizontal,
    bb.manakaiBorderBottomLeftRadiusVertical, 0, 0, 1,
    -bb.manakaiBorderBottomLeftRadiusHorizontal,
    -bb.manakaiBorderBottomLeftRadiusVertical,    

    'L', bbLeft, bbTop + bb.manakaiBorderTopLeftRadiusVertical,

    'a',
    bb.manakaiBorderTopLeftRadiusHorizontal,
    bb.manakaiBorderTopLeftRadiusVertical, 0, 0, 1,
    bb.manakaiBorderTopLeftRadiusHorizontal,
    -bb.manakaiBorderTopLeftRadiusVertical
  ].join (' '));
  boxBorder.setAttribute ('stroke', bb.borderColor);
  boxBorder.setAttribute ('stroke-width', bb.borderWidth);
  boxBorder.setAttribute ('fill', bb.backgroundColor);

  box.appendChild (boxBorder);

  this.element.insertBefore (box, this.element.firstChild);

  if (refElement) {
    var rects = NR.Element.getRects (refElement, window);
    var rbb = rects.borderBox;
    
    var left = rbb.left + rbb.width * 3 / 4 - bb.manakaiPointerSource;
    if (left < 0) left = bb.borderLeftWidth + bb.paddingLeft;
    var top = rbb.bottom + bb.manakaiPointerOffset + bb.manakaiPointerHeight + bb.paddingTop;

    this.element.style.top = top + 'px';
    this.element.style.left = left + 'px';

    var pointerSVGElement = document.createElementNS (SVGNS, 'svg');
    pointerSVGElement.setAttribute ('width', bb.manakaiPointerWidth);
    pointerSVGElement.setAttribute ('height', bb.manakaiPointerHeight);
    pointerSVGElement.style.display = 'block';
    pointerSVGElement.style.position = 'absolute';
    pointerSVGElement.style.top = -(bb.manakaiPointerHeight + bb.paddingTop) + 'px';
    pointerSVGElement.style.left = (bb.manakaiPointerSource - bb.manakaiPointerWidth / 2) + 'px';
  
    var pointerElement = document.createElementNS (SVGNS, 'path');
    pointerElement.setAttribute ('d', [
      'M', bb.manakaiPointerWidth, bb.manakaiPointerHeight,
      'Q', bb.manakaiPointerWidth * 3 / 4, bb.manakaiPointerHeight,
      bb.manakaiPointerWidth / 2, 0,
      'Q', bb.manakaiPointerWidth / 4, bb.manakaiPointerHeight,
      0, bb.manakaiPointerHeight].join (' '));
    pointerElement.setAttribute ('stroke', bb.borderColor);
    pointerElement.setAttribute ('stroke-width', bb.borderWidth);
    pointerElement.setAttribute ('fill', bb.backgroundColor);

    pointerSVGElement.appendChild (pointerElement);

    this.element.appendChild (pointerSVGElement);
 
    this.refElement = refElement;
    JSTE.Element.addClassName (refElement, 'selected');

    JSTE.Element.addClassName (this.element, 'sbs-with-refelement');
  } else {
    JSTE.Element.addClassName (this.element, 'sbs-without-refelement');
  }
  
  var self = this;
  //setTimeout (function () {
    showElement (new JSTE.List ([refElement]).onlyNonNull ());
  //}, 2000);
}, {
  remove: function () {
    if (this.refElement) {
      JSTE.Element.deleteClassName (this.refElement, 'selected');
    }
  }, // remove

  getComputedStyle: function (pseudoEl) {
    if (pseudoEl == null) {
      var boxMargin = 1;
      var boxBorderWidth = 5;
      var boxBorderColor = 'green';
      var boxBorderRadiusHorizontal = 10;
      var boxBorderRadiusVertical = 10;
      var boxPadding = 10;
      var pointerBoxMargin = 5;
      var pointerBoxWidth = 20;
      var pointerBoxHeight = 40;
      var pointerBoxLeft = 20;

      return {
        marginTop: boxMargin, marginRight: boxMargin, marginBottom: boxMargin,
        marginLeft: boxMargin,
        borderColor: boxBorderColor,
        borderTopColor: boxBorderColor, borderRightColor: boxBorderColor,
        borderBottomColor: boxBorderColor, borderLeftColor: boxBorderColor,
        borderWidth: boxBorderWidth,
        borderTopWidth: boxBorderWidth, borderRightWidth: boxBorderWidth,
        borderBottomWidth: boxBorderWidth, borderLeftWidth: boxBorderWidth,
        manakaiBorderTopLeftRadiusHorizontal: boxBorderRadiusHorizontal,
        manakaiBorderTopLeftRadiusVertical: boxBorderRadiusVertical,
        manakaiBorderTopRightRadiusHorizontal: boxBorderRadiusHorizontal,
        manakaiBorderTopRightRadiusVertical: boxBorderRadiusVertical,
        manakaiBorderBottomLeftRadiusHorizontal: boxBorderRadiusHorizontal,
        manakaiBorderBottomLeftRadiusVertical: boxBorderRadiusVertical,
        manakaiBorderBottomRightRadiusHorizontal: boxBorderRadiusHorizontal,
        manakaiBorderBottomRightRadiusVertical: boxBorderRadiusVertical,
        paddingTop: boxPadding, paddingRight: boxPadding,
        paddingBottom: boxPadding, paddingLeft: boxPadding,
        backgroundColor: this.getBackgroundColor (),
        manakaiPointerWidth: pointerBoxWidth,
        manakaiPointerHeight: pointerBoxHeight,
        manakaiPointerOffset: pointerBoxMargin,
        manakaiPointerSource: pointerBoxLeft
      };
    } else {
      return {};
    }
  }, // getComputedStyle

  getBackgroundColor: function () {
    var el = this.contentElement;
    if (window.getComputedStyle) {
      return getComputedStyle (el, null).backgroundColor;
    } else if (el.currentStyle) {
      return el.currentStyle.backgroundColor;
    } else {
      return 'white';
    }
  } // getBackgroundColor
}); // SimpleBalloonSVG

var MyMessage = new JSTE.Subclass (function () {
  return this._super.apply (this, arguments);
}, JSTE.Message, {
  _render: function (msgContainer, buttonContainer) {
    var doc = this._targetDocument;
    
    var container = doc.createElement ('section');
    container.className = 'container';
    var style = doc.createElement ('style');
    style.textContent = this.select + ' { outline: red 2px solid }';
    container.appendChild (style);
    
    container.appendChild (msgContainer);
    container.appendChild (buttonContainer);
    
    var refElement = JSTE.Node.querySelector (document, this.select);
    
    if (refElement) {
      var pointer = doc.createElement ('span');
      pointer.className = 'pointer';
      container.appendChild (pointer);
    }
    
    this._simpleBalloon = new SimpleBalloonSVG (container, refElement);
    
    return this._simpleBalloon.element;
  }, // _render
  _remove: function () {
    this._simpleBalloon.remove ();
  } // _remove
});

  var xhr = new XMLHttpRequest ();
  xhr.open ('GET', 'test.xml', false);
  xhr.send (null);


document.a =
JSTE.Course.createFromDocument (xhr.responseXML, document);

document.b = 
new JSTE.Tutorial (document, document.a, {messageClass: MyMessage});


</script>

<!--
/* ***** BEGIN LICENSE BLOCK *****
 * Copyright 2008-2009 Wakaba <w@suika.fam.cx>.  All rights reserved.
 *
 * This program is free software; you can redistribute it and/or 
 * modify it under the same terms as Perl itself.
 *
 * Alternatively, the contents of this file may be used 
 * under the following terms (the "MPL/GPL/LGPL"), 
 * in which case the provisions of the MPL/GPL/LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of the MPL/GPL/LGPL, and not to allow others to
 * use your version of this file under the terms of the Perl, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the MPL/GPL/LGPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the Perl or the MPL/GPL/LGPL.
 *
 * "MPL/GPL/LGPL":
 *
 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * <http://www.mozilla.org/MPL/>
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * The Original Code is JSTE code.
 *
 * The Initial Developer of the Original Code is Wakaba.
 * Portions created by the Initial Developer are Copyright (C) 2008
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s):
 *   Wakaba <w@suika.fam.cx>
 *
 * Alternatively, the contents of this file may be used under the terms of
 * either the GNU General Public License Version 2 or later (the "GPL"), or
 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 * in which case the provisions of the GPL or the LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of either the GPL or the LGPL, and not to allow others to
 * use your version of this file under the terms of the MPL, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the LGPL or the GPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the MPL, the GPL or the LGPL.
 *
 * ***** END LICENSE BLOCK ***** */
-->
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.9	var bb = this.getComputedStyle (null);
185
186			var bwDelta = bb.marginLeft + bb.borderLeftWidth + bb.paddingLeft;
187			var bhDelta = bb.marginTop + bb.borderTopWidth + bb.paddingTop;
188			var boxMBWidth = msgRect.width + bwDelta
189			+ bb.marginRight + bb.borderRightWidth + bb.paddingRight;
190			var boxMBHeight = msgRect.height + bhDelta
191			+ bb.marginBottom + bb.borderBottomWidth + bb.paddingBottom;
192	wakaba	1.6
193	wakaba	1.4	box.style.display = 'block';
194			box.style.position = 'absolute';
195	wakaba	1.9	box.style.top = -bhDelta + 'px';
196			box.style.left = -bwDelta + '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.9	var bbTop = bb.marginTop + bb.borderTopWidth / 2;
204			var bbRight = boxMBWidth - bb.marginLeft - bb.borderLeftWidth / 2
205			- bb.marginRight - bb.borderRightWidth / 2;
206			var bbLeft = bb.marginLeft + bb.borderLeftWidth / 2;
207			var bbBottom = boxMBHeight - bb.marginTop - bb.marginBottom
208			- bb.borderTopWidth / 2 - bb.borderBottomWidth / 2;
209	wakaba	1.7
210			var boxBorder = document.createElementNS (SVGNS, 'path');
211			boxBorder.setAttribute ('d', [
212	wakaba	1.9	'M', bbLeft + bb.manakaiBorderTopLeftRadiusHorizontal, bbTop,
213	wakaba	1.7
214	wakaba	1.9	'L', bbRight - bb.manakaiBorderTopRightRadiusHorizontal, bbTop,
215	wakaba	1.7
216	wakaba	1.9	'a',
217			bb.manakaiBorderTopRightRadiusHorizontal,
218			bb.manakaiBorderTopRightRadiusVertical, 0, 0, 1,
219			bb.manakaiBorderTopRightRadiusHorizontal,
220			bb.manakaiBorderTopRightRadiusVertical,
221
222			'L', bbRight, bbBottom - bb.manakaiBorderBottomRightRadiusVertical,
223
224			'a',
225			bb.manakaiBorderBottomRightRadiusHorizontal,
226			bb.manakaiBorderBottomRightRadiusVertical, 0, 0, 1,
227			-bb.manakaiBorderBottomRightRadiusHorizontal,
228			bb.manakaiBorderBottomRightRadiusVertical,
229
230			'L', bbLeft + bb.manakaiBorderBottomLeftRadiusHorizontal, bbBottom,
231
232			'a',
233			bb.manakaiBorderBottomLeftRadiusHorizontal,
234			bb.manakaiBorderBottomLeftRadiusVertical, 0, 0, 1,
235			-bb.manakaiBorderBottomLeftRadiusHorizontal,
236			-bb.manakaiBorderBottomLeftRadiusVertical,
237
238			'L', bbLeft, bbTop + bb.manakaiBorderTopLeftRadiusVertical,
239
240			'a',
241			bb.manakaiBorderTopLeftRadiusHorizontal,
242			bb.manakaiBorderTopLeftRadiusVertical, 0, 0, 1,
243			bb.manakaiBorderTopLeftRadiusHorizontal,
244			-bb.manakaiBorderTopLeftRadiusVertical
245	wakaba	1.7	].join (' '));
246	wakaba	1.9	boxBorder.setAttribute ('stroke', bb.borderColor);
247			boxBorder.setAttribute ('stroke-width', bb.borderWidth);
248			boxBorder.setAttribute ('fill', bb.backgroundColor);
249	wakaba	1.4
250			box.appendChild (boxBorder);
251
252			this.element.insertBefore (box, this.element.firstChild);
253	wakaba	1.1
254			if (refElement) {
255	wakaba	1.4	var rects = NR.Element.getRects (refElement, window);
256	wakaba	1.9	var rbb = rects.borderBox;
257	wakaba	1.1
258	wakaba	1.9	var left = rbb.left + rbb.width * 3 / 4 - bb.manakaiPointerSource;
259			if (left < 0) left = bb.borderLeftWidth + bb.paddingLeft;
260			var top = rbb.bottom + bb.manakaiPointerOffset + bb.manakaiPointerHeight + bb.paddingTop;
261	wakaba	1.4
262	wakaba	1.1	this.element.style.top = top + 'px';
263			this.element.style.left = left + 'px';
264	wakaba	1.5
265			var pointerSVGElement = document.createElementNS (SVGNS, 'svg');
266	wakaba	1.9	pointerSVGElement.setAttribute ('width', bb.manakaiPointerWidth);
267			pointerSVGElement.setAttribute ('height', bb.manakaiPointerHeight);
268	wakaba	1.5	pointerSVGElement.style.display = 'block';
269			pointerSVGElement.style.position = 'absolute';
270	wakaba	1.9	pointerSVGElement.style.top = -(bb.manakaiPointerHeight + bb.paddingTop) + 'px';
271			pointerSVGElement.style.left = (bb.manakaiPointerSource - bb.manakaiPointerWidth / 2) + 'px';
272	wakaba	1.5
273			var pointerElement = document.createElementNS (SVGNS, 'path');
274	wakaba	1.9	pointerElement.setAttribute ('d', [
275			'M', bb.manakaiPointerWidth, bb.manakaiPointerHeight,
276			'Q', bb.manakaiPointerWidth * 3 / 4, bb.manakaiPointerHeight,
277			bb.manakaiPointerWidth / 2, 0,
278			'Q', bb.manakaiPointerWidth / 4, bb.manakaiPointerHeight,
279			0, bb.manakaiPointerHeight].join (' '));
280			pointerElement.setAttribute ('stroke', bb.borderColor);
281			pointerElement.setAttribute ('stroke-width', bb.borderWidth);
282			pointerElement.setAttribute ('fill', bb.backgroundColor);
283	wakaba	1.5
284			pointerSVGElement.appendChild (pointerElement);
285
286			this.element.appendChild (pointerSVGElement);
287
288	wakaba	1.1	this.refElement = refElement;
289			JSTE.Element.addClassName (refElement, 'selected');
290	wakaba	1.4
291			JSTE.Element.addClassName (this.element, 'sbs-with-refelement');
292			} else {
293			JSTE.Element.addClassName (this.element, 'sbs-without-refelement');
294	wakaba	1.1	}
295
296			var self = this;
297			//setTimeout (function () {
298			showElement (new JSTE.List ([refElement]).onlyNonNull ());
299			//}, 2000);
300			}, {
301			remove: function () {
302			if (this.refElement) {
303			JSTE.Element.deleteClassName (this.refElement, 'selected');
304			}
305	wakaba	1.4	}, // remove
306	wakaba	1.9
307			getComputedStyle: function (pseudoEl) {
308			if (pseudoEl == null) {
309			var boxMargin = 1;
310			var boxBorderWidth = 5;
311			var boxBorderColor = 'green';
312			var boxBorderRadiusHorizontal = 10;
313			var boxBorderRadiusVertical = 10;
314			var boxPadding = 10;
315			var pointerBoxMargin = 5;
316			var pointerBoxWidth = 20;
317			var pointerBoxHeight = 40;
318			var pointerBoxLeft = 20;
319
320			return {
321			marginTop: boxMargin, marginRight: boxMargin, marginBottom: boxMargin,
322			marginLeft: boxMargin,
323			borderColor: boxBorderColor,
324			borderTopColor: boxBorderColor, borderRightColor: boxBorderColor,
325			borderBottomColor: boxBorderColor, borderLeftColor: boxBorderColor,
326			borderWidth: boxBorderWidth,
327			borderTopWidth: boxBorderWidth, borderRightWidth: boxBorderWidth,
328			borderBottomWidth: boxBorderWidth, borderLeftWidth: boxBorderWidth,
329			manakaiBorderTopLeftRadiusHorizontal: boxBorderRadiusHorizontal,
330			manakaiBorderTopLeftRadiusVertical: boxBorderRadiusVertical,
331			manakaiBorderTopRightRadiusHorizontal: boxBorderRadiusHorizontal,
332			manakaiBorderTopRightRadiusVertical: boxBorderRadiusVertical,
333			manakaiBorderBottomLeftRadiusHorizontal: boxBorderRadiusHorizontal,
334			manakaiBorderBottomLeftRadiusVertical: boxBorderRadiusVertical,
335			manakaiBorderBottomRightRadiusHorizontal: boxBorderRadiusHorizontal,
336			manakaiBorderBottomRightRadiusVertical: boxBorderRadiusVertical,
337			paddingTop: boxPadding, paddingRight: boxPadding,
338			paddingBottom: boxPadding, paddingLeft: boxPadding,
339			backgroundColor: this.getBackgroundColor (),
340			manakaiPointerWidth: pointerBoxWidth,
341			manakaiPointerHeight: pointerBoxHeight,
342			manakaiPointerOffset: pointerBoxMargin,
343			manakaiPointerSource: pointerBoxLeft
344			};
345			} else {
346			return {};
347			}
348			}, // getComputedStyle
349	wakaba	1.4
350			getBackgroundColor: function () {
351			var el = this.contentElement;
352			if (window.getComputedStyle) {
353			return getComputedStyle (el, null).backgroundColor;
354			} else if (el.currentStyle) {
355			return el.currentStyle.backgroundColor;
356			} else {
357			return 'white';
358			}
359			} // getBackgroundColor
360			}); // SimpleBalloonSVG
361	wakaba	1.1
362			var MyMessage = new JSTE.Subclass (function () {
363			return this._super.apply (this, arguments);
364			}, JSTE.Message, {
365			_render: function (msgContainer, buttonContainer) {
366			var doc = this._targetDocument;
367
368			var container = doc.createElement ('section');
369			container.className = 'container';
370			var style = doc.createElement ('style');
371			style.textContent = this.select + ' { outline: red 2px solid }';
372			container.appendChild (style);
373
374			container.appendChild (msgContainer);
375			container.appendChild (buttonContainer);
376
377			var refElement = JSTE.Node.querySelector (document, this.select);
378
379			if (refElement) {
380			var pointer = doc.createElement ('span');
381			pointer.className = 'pointer';
382			container.appendChild (pointer);
383			}
384
385	wakaba	1.4	this._simpleBalloon = new SimpleBalloonSVG (container, refElement);
386	wakaba	1.1
387			return this._simpleBalloon.element;
388			}, // _render
389			_remove: function () {
390			this._simpleBalloon.remove ();
391			} // _remove
392			});
393
394			var xhr = new XMLHttpRequest ();
395			xhr.open ('GET', 'test.xml', false);
396			xhr.send (null);
397
398
399			document.a =
400			JSTE.Course.createFromDocument (xhr.responseXML, document);
401
402			document.b =
403			new JSTE.Tutorial (document, document.a, {messageClass: MyMessage});
404
405
406			</script>
407
408	wakaba	1.3	<!--
409			/* *** BEGIN LICENSE BLOCK ***
410			* Copyright 2008-2009 Wakaba <w@suika.fam.cx>. All rights reserved.
411			*
412			* This program is free software; you can redistribute it and/or
413			* modify it under the same terms as Perl itself.
414			*
415			* Alternatively, the contents of this file may be used
416			* under the following terms (the "MPL/GPL/LGPL"),
417			* in which case the provisions of the MPL/GPL/LGPL are applicable instead
418			* of those above. If you wish to allow use of your version of this file only
419			* under the terms of the MPL/GPL/LGPL, and not to allow others to
420			* use your version of this file under the terms of the Perl, indicate your
421			* decision by deleting the provisions above and replace them with the notice
422			* and other provisions required by the MPL/GPL/LGPL. If you do not delete
423			* the provisions above, a recipient may use your version of this file under
424			* the terms of any one of the Perl or the MPL/GPL/LGPL.
425			*
426			* "MPL/GPL/LGPL":
427			*
428			* Version: MPL 1.1/GPL 2.0/LGPL 2.1
429			*
430			* The contents of this file are subject to the Mozilla Public License Version
431			* 1.1 (the "License"); you may not use this file except in compliance with
432			* the License. You may obtain a copy of the License at
433			* <http://www.mozilla.org/MPL/>
434			*
435			* Software distributed under the License is distributed on an "AS IS" basis,
436			* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
437			* for the specific language governing rights and limitations under the
438			* License.
439			*
440			* The Original Code is JSTE code.
441			*
442			* The Initial Developer of the Original Code is Wakaba.
443			* Portions created by the Initial Developer are Copyright (C) 2008
444			* the Initial Developer. All Rights Reserved.
445			*
446			* Contributor(s):
447			* Wakaba <w@suika.fam.cx>
448			*
449			* Alternatively, the contents of this file may be used under the terms of
450			* either the GNU General Public License Version 2 or later (the "GPL"), or
451			* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
452			* in which case the provisions of the GPL or the LGPL are applicable instead
453			* of those above. If you wish to allow use of your version of this file only
454			* under the terms of either the GPL or the LGPL, and not to allow others to
455			* use your version of this file under the terms of the MPL, indicate your
456			* decision by deleting the provisions above and replace them with the notice
457			* and other provisions required by the LGPL or the GPL. If you do not delete
458			* the provisions above, a recipient may use your version of this file under
459			* the terms of any one of the MPL, the GPL or the LGPL.
460			*
461			* *** END LICENSE BLOCK *** */
462			-->