ace

ace (Alterable Classified Elements)
version 1.0a Copyright (C) 2006 Tagata Akira

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.

Summary

About ace

ace alters the element style of HTML document classified by class names.

Description (check boxes available for supplement)

Note that the description here, by the ace itself, is corresponded with the following keywords.
Keywords: source element, target element, toggle, style
The way to use ace here:
- Every keywords is the source element.
- A check box is for the toggle.
- The style of the target element is altered by the operation to the check box by which the toggle is alternated.

The basic idea基本となるアイディア
- We suppose to make an element correspond with other elements on the HTML document making use of class name.
- We call here the source element[s] for the one element and the target elements[t_i,_i=1-n] for the others.
- We assume that the source element[s] has two states (toggle) and the target elements[t_i] have two styles[t_i-styleOn/t_i-sytleOff] corresponding with the toggle (on/off).
- When a visitor of this page operates the toggle on the source element[s] the each style [t_i-styleOn/t_i-sytleOff] of the target elements[t₁-t_n] is altered.
- HTML文書上の各要素を、クラス名を用いて1対nで対応付ける事を考える
- ここではそのひとつの要素をソース要素(s)、n個の要素をターゲット要素(t_i,_i=1-n)と呼ぶ
- ソース要素(s)では２状態を保持するもの（トグル）と考え、ターゲット要素(t_i)はトグル(on/off)に対応するふたつのスタイル(t_i-styleOn/t_i-sytleOff)を保持するものと考える
- ページ来訪者がソース要素(s)上でトグル操作をすると、ターゲット要素(t₁-t_n)のそれぞれのスタイル(t_i-styleOn/t_i-sytleOff)が切り替わるものと考える
Rule to specify the element要素を特定するための規則
- The source element and the target elements are specified within the arbitrary range of the HTML document tree.
- Collecting n+1 elements which have the same class name within a range for the source element and a range for the target elements, we call source element to an element[1] and target elements [n] to the others.
  
  Note that the correspondence between elements is only shown for the in-site class name in the following example.
- ace gets the first class name from the element which have a class attribute in the range for the source element and the element is specified as the sorce element. The class name must be unique in therange for the source element.
- And ace searches by the class name which has been specified as source element within the range for the target elements to get the target elements.
- ace uses a
  style class object
  for the style definition of the target element which is to be alternated with the toggle of the source element.
- ソース要素、ターゲット要素は、それぞれ全HTML要素の内、範囲指定した要素グループ内から特定される。
- ソース要素の特定指定範囲内と、ターゲット要素の特定指定範囲内で、同一のクラス名を持つ要素(n+1個)を選び出し、それらのひとつをソース要素(1個)と呼び、他をターゲット要素(n個)と呼ぶ
  
  註：ここでは、具体例でのクラス名 in-site で特定される要素間の対応関係のみ示している。
- aceはソース要素の特定指定範囲内で、class属性を持つ要素から先頭のクラス名を取り出し、その要素をソース要素として特定する。そのクラス名はソース要素の特定指定範囲内でユニークでなければならない。
- 次いでaceはターゲット要素の特定指定範囲内を、ソース要素として特定したクラス名で順次検索し、対応する要素を特定しターゲット要素を得る。
- （ソース要素のトグルに応じ切り替わる）ターゲット要素のスタイル定義に、
  スタイル・クラス・オブジェクト
  を用いる

Example.

 HTML 
	:
  <p id="in-ex-legend">								
	:									
    <span class="ext ">external page</a>					
	:									
    <span class="in-site ">in-site Page</a>					
	:									
  </p>										

  <p id="link-list">								
	:									
    <a href="linkA.html" class="in-site toggleInSite">link A</a>		
	:									
    <a href="http://ext.do.main/" class="ext toggleExSite">Site X</a>		
	:									
    <a href="linkB.html" class="in-site toggleInSite">link B</a>		
	:									
  </p>										

 JavaScript 

    oAce = new _ace({ treeId: 'in-ex-legend', type: 'checkbox' },
		{									
			toggleInSite: {							
				styleOn:  { backgroundColor: '#ffcccc' },		
				styleOff: { backgroundColor: 'transparent' }		
			},								
			toggleExSite: {							
				styleOn:  { backgroundColor: '#ccccff' },		
				styleOff: { backgroundColor: 'transparent' }		
			}								
		},									
		'link-list');

The style class objectスタイル・クラス・オブジェクト
- The style class object is a JavaScript object which has properties named with the class name to be specified for the target elements and the values of the properties for the style definitions, alternating the styles with the toggle.
- The style definition is an object which has properties named styleOn and styleOff and their value as an object which describes the style directly here, or properties named classOn and classOff and their value as a string of a class list which describes the style indirectly referring the style sheet classes.
- スタイル・クラス・オブジェクトは、ターゲット要素に指定され得るクラス名をプロパティとし、トグルに応じるスタイル定義を値とする、JavaScriptオブジェクトである。
- スタイル定義もオブジェクトで、ここで直接定義する為のプロパティ（styleOn, styleOff）とその定義を表す値（オブジェクト）、および別にスタイルシートで宣言されたクラスの参照で間接定義する為のプロパティ（classOn, classOff）とそのクラスを表す値（文字列）で構成される
```
style class object
  {
	class name₁: style definition₁,
	class name₂: style definition₂,
		:
  }

style definition
  {
	styleOn:  style description object // style for toggle on
	styleOff: style description object // style for toggle off
	classOn:  class name list string   // class for toggle on
	classOff: class name list string   // class for toggle off
  }

style description object
  {
	property₁: vlaue₁,
	property₂: vlaue₂,
		:
  }
```
Note that the style description object causes settings in element.style.property = value form as a result; for example it must be fontWidth: 'larger' not font-width: larger since it is not a style sheet and is a JavaScript text.

註：スタイル記述オブジェクトは結果として、element.style.property = value 形式の設定になる為、例えば fontWidth: 'larger' でなければならず、font-width: larger であってはならない（スタイルシートではなく、あくまでもJavaScriptである点に留意が必要）。

Source

_ace.js

Prerequisite

fss installed
jlog recommended

Install

How to install / Your choice, Recommendation

Extract the distribution archive in your working directory

Insert a few lines into your web page (foobar.html)

	<html>
	<head>
	    :
|	<script src="_fss.js" type="text/javascript"></script>
|	<script src="_jlog.js" type="text/javascript"></script>
|	<script src="_ace.js" type="text/javascript"></script>
|	<script src="foobar.js" type="text/javascript"></script>
	    :
	</head>
	<body>
	    :
	</body></html>

Insert several lines into your JavaScript file (foobar.js)

	function foobar() {
|		this._log('foobar(): entered',0);
		:
		this.oAce = new _ace(srcArg,	// cf. source code	
			styleClassObjects,	// 			
			tgtTreeId,		//			
			collectSrcElt,		//			
			tgtSearchTagName,	//			
			tgtEltFound);		//			
		:
	}

	function foobarInit() {
		:
		ofb = new foobar();
		:
	}

	window.onload = function () {
|	//	_fss.prototype._jlOffStartup = true; // to inactivate
|	//	_fss.prototype._jlHideJlogButtonOnStartup = true; // to hide
|		foobar.prototype._jlogSetUp(foobarInit);  // log for only foobar 
|	//	_fss.prototype._jlogSetUp(foobarInit);  // log for all
		foobarInit();
	}

put the following files to the appropriate directory of your web site以下ファイルをサイトの該当ディレクトリに転送
- _fss.js, _fss.html
- _jlog.js
- _ace.js
- gpl.txt, dlgpl.php
- foobar.js
- foobar.html

Sample

sample.ace.html

Download

ace is one of Use? components.

GNU GENERAL PUBLIC LICENSE

ace(Alterable Classified Elements)1.0a