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;
}

.sbs-selected {
  outline: 2px blue dotted !important;
}

.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;
}
</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.contentElement = messageContainer;
  this.element.appendChild (messageContainer);

  this.element = document.createElement ('article');
  this.element.className = 'sbs-container';
  document.body.appendChild (this.element);

  this._renderBorder ();

  this.refElement = refElement;
  if (refElement) {
    JSTE.Element.addClassName (refElement, 'sbs-selected');
    this._renderPointer ();

    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);
}, {
  SVGNS: 'http://www.w3.org/2000/svg',

  remove: function () {
    if (this.refElement) {
      JSTE.Element.deleteClassName (this.refElement, 'sbs-selected');
    }
  }, // remove

  _renderBorder: function () {
    var msgRects = NR.Element.getRects (this.contentElement, window);
    var msgRect = msgRects.borderBox;

    var bb = this.getComputedStyle ();

    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;

    var box = document.createElementNS (this.SVGNS, 'svg');
    box.style.display = 'block';
    box.style.position = 'absolute';
    box.style.top = -bhDelta + 'px';
    box.style.left = -bwDelta + 'px';

    /* This is necessary to render the content element over the border SVG
       element. */
    this.contentElement.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 (this.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);
  }, // _renderBorder
  _renderPointer: function () {
    var rects = NR.Element.getRects (this.refElement, window);
    var rbb = rects.borderBox;

    var bb = this.getComputedStyle ();
    
    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 (this.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 (this.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);
  }, // _renderPointer

  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.10	.sbs-selected {
63			outline: 2px blue dotted !important;
64			}
65
66	wakaba	1.1	.container {
67			display: block;
68	wakaba	1.5	padding-bottom: 2em;
69	wakaba	1.4	background-color: white;
70	wakaba	1.5	width: 20em;
71			min-height: 5em;
72			}
73
74			.container menu {
75			position: absolute;
76			bottom: 0;
77			left: 0;
78			right: 0;
79			text-align: center;
80	wakaba	1.4	}
81	wakaba	1.1	</style>
82
83			<script type="text/javascript" src="uupaa-detect.mini.js"></script>
84			<script type="text/javascript" src="uupaa-selector.js"></script>
85			<script type="text/javascript" src="uupaa-selector+.js"></script>
86
87	wakaba	1.4	<script src="../../css/noderect/NodeRect.js"></script>
88
89	wakaba	1.1	<script id="uupaa.js" type="text/javascript" src="uupaa/uupaa.js"></script>
90
91			<script src=tutorial.js></script>
92
93			<script>
94
95			window.onload = function () {
96			window.loaded = true;
97			};
98
99			function showElement (elements) {
100			if (!window.loaded) {
101			new JSTE.Observer ('load', window, function () {
102			showElement (elements);
103			});
104			return;
105			}
106
107			var top = Infinity;
108			var left = Infinity;
109			var topEl;
110			var leftEl;
111			elements.forEach (function (el) {
112			var rect = uu.element.rect (el);
113			if (rect.y < top) {
114			top = rect.y;
115			topEl = el;
116			}
117			if (rect.x < left) {
118			left = rect.x;
119			leftEl = el;
120			}
121			});
122
123			var rect = uu.viewport.rect ();
124			if (rect.sh <= top && top <= rect.sh + rect.h) {
125			top = rect.sh;
126			}
127			if (rect.sw <= left && left <= rect.sw + rect.w) {
128			left = rect.sw;
129			}
130
131			if (leftEl \|\| topEl) {
132			var od = (leftEl \|\| topEl).ownerDocument;
133			var point = od.createElement ('span');
134			point.style.display = 'block';
135			point.style.position = 'absolute';
136			point.style.top = top + 'px';
137			point.style.left = left + 'px';
138			point.style.width = 0;
139			point.style.height = 0;
140			od.documentElement.appendChild (point);
141			point.scrollIntoView (true);
142			point.parentNode.removeChild (point);
143			}
144			}
145
146	wakaba	1.4	var SimpleBalloonSVG = new JSTE.Class (function (messageContainer, refElement) {
147	wakaba	1.10	this.contentElement = messageContainer;
148			this.element.appendChild (messageContainer);
149
150	wakaba	1.5	this.element = document.createElement ('article');
151	wakaba	1.4	this.element.className = 'sbs-container';
152			document.body.appendChild (this.element);
153
154	wakaba	1.10	this._renderBorder ();
155	wakaba	1.4
156	wakaba	1.10	this.refElement = refElement;
157			if (refElement) {
158			JSTE.Element.addClassName (refElement, 'sbs-selected');
159			this._renderPointer ();
160	wakaba	1.4
161	wakaba	1.10	JSTE.Element.addClassName (this.element, 'sbs-with-refelement');
162			} else {
163			JSTE.Element.addClassName (this.element, 'sbs-without-refelement');
164			}
165
166			var self = this;
167			//setTimeout (function () {
168			showElement (new JSTE.List ([refElement]).onlyNonNull ());
169			//}, 2000);
170			}, {
171			SVGNS: 'http://www.w3.org/2000/svg',
172	wakaba	1.4
173	wakaba	1.10	remove: function () {
174			if (this.refElement) {
175			JSTE.Element.deleteClassName (this.refElement, 'sbs-selected');
176			}
177			}, // remove
178	wakaba	1.9
179	wakaba	1.10	_renderBorder: function () {
180			var msgRects = NR.Element.getRects (this.contentElement, window);
181			var msgRect = msgRects.borderBox;
182
183			var bb = this.getComputedStyle ();
184
185			var bwDelta = bb.marginLeft + bb.borderLeftWidth + bb.paddingLeft;
186			var bhDelta = bb.marginTop + bb.borderTopWidth + bb.paddingTop;
187			var boxMBWidth = msgRect.width + bwDelta
188			+ bb.marginRight + bb.borderRightWidth + bb.paddingRight;
189			var boxMBHeight = msgRect.height + bhDelta
190			+ bb.marginBottom + bb.borderBottomWidth + bb.paddingBottom;
191
192			var box = document.createElementNS (this.SVGNS, 'svg');
193			box.style.display = 'block';
194			box.style.position = 'absolute';
195			box.style.top = -bhDelta + 'px';
196			box.style.left = -bwDelta + 'px';
197
198			/* This is necessary to render the content element over the border SVG
199			element. */
200			this.contentElement.style.position = 'relative';
201
202			box.setAttribute ('width', boxMBWidth);
203			box.setAttribute ('height', boxMBHeight);
204
205			var bbTop = bb.marginTop + bb.borderTopWidth / 2;
206			var bbRight = boxMBWidth - bb.marginLeft - bb.borderLeftWidth / 2
207			- bb.marginRight - bb.borderRightWidth / 2;
208			var bbLeft = bb.marginLeft + bb.borderLeftWidth / 2;
209			var bbBottom = boxMBHeight - bb.marginTop - bb.marginBottom
210			- bb.borderTopWidth / 2 - bb.borderBottomWidth / 2;
211
212			var boxBorder = document.createElementNS (this.SVGNS, 'path');
213			boxBorder.setAttribute ('d', [
214			'M', bbLeft + bb.manakaiBorderTopLeftRadiusHorizontal, bbTop,
215
216			'L', bbRight - bb.manakaiBorderTopRightRadiusHorizontal, bbTop,
217
218			'a',
219			bb.manakaiBorderTopRightRadiusHorizontal,
220			bb.manakaiBorderTopRightRadiusVertical, 0, 0, 1,
221			bb.manakaiBorderTopRightRadiusHorizontal,
222			bb.manakaiBorderTopRightRadiusVertical,
223	wakaba	1.4
224	wakaba	1.10	'L', bbRight, bbBottom - bb.manakaiBorderBottomRightRadiusVertical,
225
226			'a',
227			bb.manakaiBorderBottomRightRadiusHorizontal,
228			bb.manakaiBorderBottomRightRadiusVertical, 0, 0, 1,
229			-bb.manakaiBorderBottomRightRadiusHorizontal,
230			bb.manakaiBorderBottomRightRadiusVertical,
231
232			'L', bbLeft + bb.manakaiBorderBottomLeftRadiusHorizontal, bbBottom,
233
234			'a',
235			bb.manakaiBorderBottomLeftRadiusHorizontal,
236			bb.manakaiBorderBottomLeftRadiusVertical, 0, 0, 1,
237			-bb.manakaiBorderBottomLeftRadiusHorizontal,
238			-bb.manakaiBorderBottomLeftRadiusVertical,
239
240			'L', bbLeft, bbTop + bb.manakaiBorderTopLeftRadiusVertical,
241
242			'a',
243			bb.manakaiBorderTopLeftRadiusHorizontal,
244			bb.manakaiBorderTopLeftRadiusVertical, 0, 0, 1,
245			bb.manakaiBorderTopLeftRadiusHorizontal,
246			-bb.manakaiBorderTopLeftRadiusVertical
247			].join (' '));
248			boxBorder.setAttribute ('stroke', bb.borderColor);
249			boxBorder.setAttribute ('stroke-width', bb.borderWidth);
250			boxBorder.setAttribute ('fill', bb.backgroundColor);
251
252			box.appendChild (boxBorder);
253
254			this.element.insertBefore (box, this.element.firstChild);
255			}, // _renderBorder
256			_renderPointer: function () {
257			var rects = NR.Element.getRects (this.refElement, window);
258			var rbb = rects.borderBox;
259	wakaba	1.4
260	wakaba	1.10	var bb = this.getComputedStyle ();
261	wakaba	1.1
262	wakaba	1.9	var left = rbb.left + rbb.width * 3 / 4 - bb.manakaiPointerSource;
263			if (left < 0) left = bb.borderLeftWidth + bb.paddingLeft;
264			var top = rbb.bottom + bb.manakaiPointerOffset + bb.manakaiPointerHeight + bb.paddingTop;
265	wakaba	1.4
266	wakaba	1.1	this.element.style.top = top + 'px';
267			this.element.style.left = left + 'px';
268	wakaba	1.5
269	wakaba	1.10	var pointerSVGElement = document.createElementNS (this.SVGNS, 'svg');
270	wakaba	1.9	pointerSVGElement.setAttribute ('width', bb.manakaiPointerWidth);
271			pointerSVGElement.setAttribute ('height', bb.manakaiPointerHeight);
272	wakaba	1.5	pointerSVGElement.style.display = 'block';
273			pointerSVGElement.style.position = 'absolute';
274	wakaba	1.9	pointerSVGElement.style.top = -(bb.manakaiPointerHeight + bb.paddingTop) + 'px';
275			pointerSVGElement.style.left = (bb.manakaiPointerSource - bb.manakaiPointerWidth / 2) + 'px';
276	wakaba	1.5
277	wakaba	1.10	var pointerElement = document.createElementNS (this.SVGNS, 'path');
278	wakaba	1.9	pointerElement.setAttribute ('d', [
279			'M', bb.manakaiPointerWidth, bb.manakaiPointerHeight,
280			'Q', bb.manakaiPointerWidth * 3 / 4, bb.manakaiPointerHeight,
281			bb.manakaiPointerWidth / 2, 0,
282			'Q', bb.manakaiPointerWidth / 4, bb.manakaiPointerHeight,
283			0, bb.manakaiPointerHeight].join (' '));
284			pointerElement.setAttribute ('stroke', bb.borderColor);
285			pointerElement.setAttribute ('stroke-width', bb.borderWidth);
286			pointerElement.setAttribute ('fill', bb.backgroundColor);
287	wakaba	1.5
288			pointerSVGElement.appendChild (pointerElement);
289
290			this.element.appendChild (pointerSVGElement);
291	wakaba	1.10	}, // _renderPointer
292	wakaba	1.9
293			getComputedStyle: function (pseudoEl) {
294			if (pseudoEl == null) {
295			var boxMargin = 1;
296			var boxBorderWidth = 5;
297			var boxBorderColor = 'green';
298			var boxBorderRadiusHorizontal = 10;
299			var boxBorderRadiusVertical = 10;
300			var boxPadding = 10;
301			var pointerBoxMargin = 5;
302			var pointerBoxWidth = 20;
303			var pointerBoxHeight = 40;
304			var pointerBoxLeft = 20;
305
306			return {
307			marginTop: boxMargin, marginRight: boxMargin, marginBottom: boxMargin,
308			marginLeft: boxMargin,
309			borderColor: boxBorderColor,
310			borderTopColor: boxBorderColor, borderRightColor: boxBorderColor,
311			borderBottomColor: boxBorderColor, borderLeftColor: boxBorderColor,
312			borderWidth: boxBorderWidth,
313			borderTopWidth: boxBorderWidth, borderRightWidth: boxBorderWidth,
314			borderBottomWidth: boxBorderWidth, borderLeftWidth: boxBorderWidth,
315			manakaiBorderTopLeftRadiusHorizontal: boxBorderRadiusHorizontal,
316			manakaiBorderTopLeftRadiusVertical: boxBorderRadiusVertical,
317			manakaiBorderTopRightRadiusHorizontal: boxBorderRadiusHorizontal,
318			manakaiBorderTopRightRadiusVertical: boxBorderRadiusVertical,
319			manakaiBorderBottomLeftRadiusHorizontal: boxBorderRadiusHorizontal,
320			manakaiBorderBottomLeftRadiusVertical: boxBorderRadiusVertical,
321			manakaiBorderBottomRightRadiusHorizontal: boxBorderRadiusHorizontal,
322			manakaiBorderBottomRightRadiusVertical: boxBorderRadiusVertical,
323			paddingTop: boxPadding, paddingRight: boxPadding,
324			paddingBottom: boxPadding, paddingLeft: boxPadding,
325			backgroundColor: this.getBackgroundColor (),
326			manakaiPointerWidth: pointerBoxWidth,
327			manakaiPointerHeight: pointerBoxHeight,
328			manakaiPointerOffset: pointerBoxMargin,
329			manakaiPointerSource: pointerBoxLeft
330			};
331			} else {
332			return {};
333			}
334			}, // getComputedStyle
335	wakaba	1.4
336			getBackgroundColor: function () {
337			var el = this.contentElement;
338			if (window.getComputedStyle) {
339			return getComputedStyle (el, null).backgroundColor;
340			} else if (el.currentStyle) {
341			return el.currentStyle.backgroundColor;
342			} else {
343			return 'white';
344			}
345			} // getBackgroundColor
346			}); // SimpleBalloonSVG
347	wakaba	1.1
348			var MyMessage = new JSTE.Subclass (function () {
349			return this._super.apply (this, arguments);
350			}, JSTE.Message, {
351			_render: function (msgContainer, buttonContainer) {
352			var doc = this._targetDocument;
353
354			var container = doc.createElement ('section');
355			container.className = 'container';
356			var style = doc.createElement ('style');
357			style.textContent = this.select + ' { outline: red 2px solid }';
358			container.appendChild (style);
359
360			container.appendChild (msgContainer);
361			container.appendChild (buttonContainer);
362
363			var refElement = JSTE.Node.querySelector (document, this.select);
364
365			if (refElement) {
366			var pointer = doc.createElement ('span');
367			pointer.className = 'pointer';
368			container.appendChild (pointer);
369			}
370
371	wakaba	1.4	this._simpleBalloon = new SimpleBalloonSVG (container, refElement);
372	wakaba	1.1
373			return this._simpleBalloon.element;
374			}, // _render
375			_remove: function () {
376			this._simpleBalloon.remove ();
377			} // _remove
378			});
379
380			var xhr = new XMLHttpRequest ();
381			xhr.open ('GET', 'test.xml', false);
382			xhr.send (null);
383
384
385			document.a =
386			JSTE.Course.createFromDocument (xhr.responseXML, document);
387
388			document.b =
389			new JSTE.Tutorial (document, document.a, {messageClass: MyMessage});
390
391
392			</script>
393
394	wakaba	1.3	<!--
395			/* *** BEGIN LICENSE BLOCK ***
396			* Copyright 2008-2009 Wakaba <w@suika.fam.cx>. All rights reserved.
397			*
398			* This program is free software; you can redistribute it and/or
399			* modify it under the same terms as Perl itself.
400			*
401			* Alternatively, the contents of this file may be used
402			* under the following terms (the "MPL/GPL/LGPL"),
403			* in which case the provisions of the MPL/GPL/LGPL are applicable instead
404			* of those above. If you wish to allow use of your version of this file only
405			* under the terms of the MPL/GPL/LGPL, and not to allow others to
406			* use your version of this file under the terms of the Perl, indicate your
407			* decision by deleting the provisions above and replace them with the notice
408			* and other provisions required by the MPL/GPL/LGPL. If you do not delete
409			* the provisions above, a recipient may use your version of this file under
410			* the terms of any one of the Perl or the MPL/GPL/LGPL.
411			*
412			* "MPL/GPL/LGPL":
413			*
414			* Version: MPL 1.1/GPL 2.0/LGPL 2.1
415			*
416			* The contents of this file are subject to the Mozilla Public License Version
417			* 1.1 (the "License"); you may not use this file except in compliance with
418			* the License. You may obtain a copy of the License at
419			* <http://www.mozilla.org/MPL/>
420			*
421			* Software distributed under the License is distributed on an "AS IS" basis,
422			* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
423			* for the specific language governing rights and limitations under the
424			* License.
425			*
426			* The Original Code is JSTE code.
427			*
428			* The Initial Developer of the Original Code is Wakaba.
429			* Portions created by the Initial Developer are Copyright (C) 2008
430			* the Initial Developer. All Rights Reserved.
431			*
432			* Contributor(s):
433			* Wakaba <w@suika.fam.cx>
434			*
435			* Alternatively, the contents of this file may be used under the terms of
436			* either the GNU General Public License Version 2 or later (the "GPL"), or
437			* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
438			* in which case the provisions of the GPL or the LGPL are applicable instead
439			* of those above. If you wish to allow use of your version of this file only
440			* under the terms of either the GPL or the LGPL, and not to allow others to
441			* use your version of this file under the terms of the MPL, indicate your
442			* decision by deleting the provisions above and replace them with the notice
443			* and other provisions required by the LGPL or the GPL. If you do not delete
444			* the provisions above, a recipient may use your version of this file under
445			* the terms of any one of the MPL, the GPL or the LGPL.
446			*
447			* *** END LICENSE BLOCK *** */
448			-->