oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upgraded to yui 0.12.0

Browse source 
upgraded to yui-ext 0.33 rc2
This commit is contained in:
JT Smith 2006-11-28 02:23:34 +00:00
parent 62b3d90db7
commit cfd09a5cb6
1271 changed files with 539033 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

186
www/extras/yui/examples/logger/autocomplete.html Normal file
View file

@ -0,0 +1,186 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: Logger - YUI Integration (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/grids/grids.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../../docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
#statesmod {position:relative;}
#statesautocomplete{position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
#statesinput {_position:absolute;width:100%;height:1.4em;} /* abs for ie quirks */
#statescontainer {position:absolute;top:1.7em;width:100%}
#statescontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul {padding:5px 0;width:100%;}
#statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight {background:#ff0;}
#statescontainer li.yui-ac-prehighlight {background:#FFFFCC;}
</style>
</head>
<body>
<div id="doc" class="yui-t7">
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: YUI Integration</h1>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first">
<!-- Content begins -->
<h3>Using Logger to Debug YUI Library Components</h3>
<p>In this example, we have set up an instance of the YUI
AutoComplete widget. By using the debug build of the
AutoComplete source code, we can read logging messages generated
from the component in a LogReader. By passing in custom
configuration values into its constructor, we are able
to set custom style attributes on the LogReader.</p>
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return validateForm();">
<h3>Find a state:</h3>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</div>
<!-- Content ends -->
</div>
</div>
<div class="yui-g">
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<textarea name="code" class="HTML" cols="60" rows="1">
<script type="text/javascript">
///No custom CSS styles were defined.
// No custom markup was defined.
// We have first included the debug builds of YUI components
// event-debug.js and autocomplete-debug.js
// Then we can see log messages being output to our LogReader
var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});
</script>
</textarea>
</div>
<!-- Code sample ends -->
</div>
</div>
</div>
</div>
<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event-debug.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<!-- In-memory JS array begins-->
<script type="text/javascript">
var statesArray = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Dakota",
"North Carolina",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
];
</script>
<!-- In-memory JS array ends-->
<script type="text/javascript">
YAHOO.example.AutoCompleteLogger = function() {
return {
validateForm: function() {
// Validate form inputs here
return false;
},
init: function() {
// Instatiate LogReader
var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});
// Instantiate DataSource
var oACDS = new YAHOO.widget.DS_JSArray(statesArray);
// Instantiate AutoComplete
var oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
oAutoComp.queryDelay = 0;
oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.AutoCompleteLogger.init);
</script>
<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

19
www/extras/yui/examples/logger/css/examples.css Normal file
View file

@ -0,0 +1,19 @@
h1 {font-size:144%;}
h2 {font-size:129%;}
h3 {font-size:114%;}
h4 {font-size:100%;}
h1,h2,h3,h4 {font-weight:bold;}
body {margin:1em;font-family:verdana,arial,sans-serif;}
ul {width:80%;}
dl {padding:1em;}
#hd {position:relative;}
#hd .logo {width:65px;height:38px;vertical-align:middle;padding-right:10px;}
#bd h1,h2,h3,p{margin:1em;}
#content .yui-log-input {width:40%;}
#code {clear:both;}
#code .code {padding:1em;background:#DEDEDE;border:1px solid black;font-size:92%;}

BIN
www/extras/yui/examples/logger/img/logo.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 705 B

29
www/extras/yui/examples/logger/index.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Examples: Logger (YUI Library)</title>
<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./css/examples.css" />
<style type="text/css">
ul {margin:1em;}
li {margin:1em;list-style-type:none;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/>Logger Widget Implementation Examples</h1>
</div>
<div id="bd">
<ul>
<li><a href="./readlogs.html">Reading Logs On Your Page</a></li>
<li><a href="./readlogscustom.html">Customizing LogReader For Your Page</a></li>
<li><a href="./writelogs.html">Writing Logs From Your Code</a></li>
<li><a href="./autocomplete.html">Integration with YUI</a></li>
</ul>
</div>
</body>
</html>

972
www/extras/yui/examples/logger/js/animation-debug.js vendored Normal file
View file

@ -0,0 +1,972 @@
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.10.0
*/
/**
*
* Base class for animated DOM objects.
* @class Base animation class that provides the interface for building animated effects.
* <p>Usage: var myAnim = new YAHOO.util.Anim(el, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut);</p>
* @requires YAHOO.util.AnimMgr
* @requires YAHOO.util.Easing
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @requires YAHOO.util.CustomEvent
* @constructor
* @param {String or HTMLElement} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
YAHOO.util.Anim = function(el, attributes, duration, method)
{
if (el) {
this.init(el, attributes, duration, method);
}
};
YAHOO.util.Anim.prototype = {
toString: function() {
return "some animation";
},
/**
* Returns the value computed by the animation's "method".
* @param {String} attribute The name of the attribute.
* @param {Number} start The value this attribute should start from for this animation.
* @param {Number} end The value this attribute should end at for this animation.
* @return {Number} The Value to be applied to the attribute.
*/
doMethod: function(attribute, start, end) {
return this.method(this.currentFrame, start, end - start, this.totalFrames);
},
/**
* Applies a value to an attribute
* @param {String} attribute The name of the attribute.
* @param {Number} val The value to be applied to the attribute.
* @param {String} unit The unit ('px', '%', etc.) of the value.
*/
setAttribute: function(attribute, val, unit) {
YAHOO.util.Dom.setStyle(this.getEl(), attribute, val + unit);
},
/**
* Returns current value of the attribute.
* @param {String} attribute The name of the attribute.
* @return {Number} val The current value of the attribute.
*/
getAttribute: function(attribute) {
return parseFloat( YAHOO.util.Dom.getStyle(this.getEl(), attribute));
},
/**
* The default unit to use for all attributes if not defined per attribute.
* @type String
*/
defaultUnit: 'px',
/**
* Per attribute units that should be used by default.
* @type Object
*/
defaultUnits: { opacity: ' ' },
/**
* @param {String or HTMLElement} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
init: function(el, attributes, duration, method) {
/**
* Whether or not the animation is running.
* @private
* @type Boolean
*/
var isAnimated = false;
/**
* A Date object that is created when the animation begins.
* @private
* @type Date
*/
var startTime = null;
/**
* A Date object that is created when the animation ends.
* @private
* @type Date
*/
var endTime = null;
/**
* The number of frames this animation was able to execute.
* @private
* @type Int
*/
var actualFrames = 0;
/**
* The attribute values that will be used if no "from" is supplied.
* @private
* @type Object
*/
var defaultValues = {};
/**
* The element to be animated.
* @private
* @type HTMLElement
*/
el = YAHOO.util.Dom.get(el);
/**
* The collection of attributes to be animated.
* Each attribute must have at least a "to" or "by" defined in order to animate.
* If "to" is supplied, the animation will end with the attribute at that value.
* If "by" is supplied, the animation will end at that value plus its starting value.
* If both are supplied, "to" is used, and "by" is ignored.
* @member YAHOO#util#Anim
* Optional additional member include "from" (the value the attribute should start animating from, defaults to current value), and "unit" (the units to apply to the values).
* @type Object
*/
this.attributes = attributes || {};
/**
* The length of the animation. Defaults to "1" (second).
* @type Number
*/
this.duration = duration || 1;
/**
* The method that will provide values to the attribute(s) during the animation.
* Defaults to "YAHOO.util.Easing.easeNone".
* @type Function
*/
this.method = method || YAHOO.util.Easing.easeNone;
/**
* Whether or not the duration should be treated as seconds.
* Defaults to true.
* @type Boolean
*/
this.useSeconds = true; // default to seconds
/**
* The location of the current animation on the timeline.
* In time-based animations, this is used by AnimMgr to ensure the animation finishes on time.
* @type Int
*/
this.currentFrame = 0;
/**
* The total number of frames to be executed.
* In time-based animations, this is used by AnimMgr to ensure the animation finishes on time.
* @type Int
*/
this.totalFrames = YAHOO.util.AnimMgr.fps;
/**
* Returns a reference to the animated element.
* @return {HTMLElement}
*/
this.getEl = function() { return el; };
/**
* Sets the default value to be used when "from" is not supplied.
* @param {String} attribute The attribute being set.
* @param {Number} val The default value to be applied to the attribute.
*/
this.setDefault = function(attribute, val) {
if ( val.constructor != Array && (val == 'auto' || isNaN(val)) ) { // if 'auto' or NaN, set defaults for well known attributes, zero for others
switch(attribute) {
case'width':
val = el.clientWidth || el.offsetWidth; // computed width
break;
case 'height':
val = el.clientHeight || el.offsetHeight; // computed height
break;
case 'left':
if (YAHOO.util.Dom.getStyle(el, 'position') == 'absolute') {
val = el.offsetLeft; // computed left
} else {
val = 0;
}
break;
case 'top':
if (YAHOO.util.Dom.getStyle(el, 'position') == 'absolute') {
val = el.offsetTop; // computed top
} else {
val = 0;
}
break;
default:
val = 0;
}
}
defaultValues[attribute] = val;
};
/**
* Returns the default value for the given attribute.
* @param {String} attribute The attribute whose value will be returned.
*/
this.getDefault = function(attribute) {
return defaultValues[attribute];
};
/**
* Checks whether the element is currently animated.
* @return {Boolean} current value of isAnimated.
*/
this.isAnimated = function() {
return isAnimated;
};
/**
* Returns the animation start time.
* @return {Date} current value of startTime.
*/
this.getStartTime = function() {
return startTime;
};
/**
* Starts the animation by registering it with the animation manager.
*/
this.animate = function() {
if ( this.isAnimated() ) { return false; }
this.onStart.fire();
this._onStart.fire();
this.totalFrames = ( this.useSeconds ) ? Math.ceil(YAHOO.util.AnimMgr.fps * this.duration) : this.duration;
YAHOO.util.AnimMgr.registerElement(this);
// get starting values or use defaults
var attributes = this.attributes;
var el = this.getEl();
var val;
for (var attribute in attributes) {
val = this.getAttribute(attribute);
this.setDefault(attribute, val);
}
isAnimated = true;
actualFrames = 0;
startTime = new Date();
};
/**
* Stops the animation. Normally called by AnimMgr when animation completes.
*/
this.stop = function() {
if ( !this.isAnimated() ) { return false; }
this.currentFrame = 0;
endTime = new Date();
var data = {
time: endTime,
duration: endTime - startTime,
frames: actualFrames,
fps: actualFrames / this.duration,
toString: function() {
return "time: " + this.time + ", " +
"duration: " + this.duration + ", " +
"frames: " + this.frames + ", " +
"fps: " + this.fps;
}
};
isAnimated = false;
actualFrames = 0;
this.onComplete.fire(data);
};
/**
* Feeds the starting and ending values for each animated attribute to doMethod once per frame, then applies the resulting value to the attribute(s).
* @private
*/
var onTween = function() {
var start;
var end = null;
var val;
var unit;
var attributes = this['attributes'];
for (var attribute in attributes) {
unit = attributes[attribute]['unit'] || this.defaultUnits[attribute] || this.defaultUnit;
if (typeof attributes[attribute]['from'] != 'undefined') {
start = attributes[attribute]['from'];
} else {
start = this.getDefault(attribute);
}
// To beats by, per SMIL 2.1 spec
if (typeof attributes[attribute]['to'] != 'undefined') {
end = attributes[attribute]['to'];
}
else if (typeof attributes[attribute]['by'] != 'undefined')
{
if (start.constructor == Array) {
end = [];
for (var i = 0, len = start.length; i < len; ++i)
{
end[i] = start[i] + attributes[attribute]['by'][i];
}
}
else
{
end = start + attributes[attribute]['by'];
}
}
// if end is null, dont change value
if (end !== null && typeof end != 'undefined') {
val = this.doMethod(attribute, start, end);
// negative not allowed for these (others too, but these are most common)
if ( (attribute == 'width' || attribute == 'height' || attribute == 'opacity') && val < 0 ) {
val = 0;
}
this.setAttribute(attribute, val, unit);
}
}
actualFrames += 1;
};
/**
* Custom event that fires after onStart, useful in subclassing
* @private
*/
this._onStart = new YAHOO.util.CustomEvent('_onStart', this, true);
/**
* Custom event that fires when animation begins
* Listen via subscribe method (e.g. myAnim.onStart.subscribe(someFunction)
*/
this.onStart = new YAHOO.util.CustomEvent('start', this);
/**
* Custom event that fires between each frame
* Listen via subscribe method (e.g. myAnim.onTween.subscribe(someFunction)
*/
this.onTween = new YAHOO.util.CustomEvent('tween', this);
/**
* Custom event that fires after onTween
* @private
*/
this._onTween = new YAHOO.util.CustomEvent('_tween', this, true);
/**
* Custom event that fires when animation ends
* Listen via subscribe method (e.g. myAnim.onComplete.subscribe(someFunction)
*/
this.onComplete = new YAHOO.util.CustomEvent('complete', this);
this._onTween.subscribe(onTween);
}
};
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.10.0
*/
/**
* @class Handles animation queueing and threading.
* Used by Anim and subclasses.
*/
YAHOO.util.AnimMgr = new function() {
/**
* Reference to the animation Interval
* @private
* @type Int
*/
var thread = null;
/**
* The current queue of registered animation objects.
* @private
* @type Array
*/
var queue = [];
/**
* The number of active animations.
* @private
* @type Int
*/
var tweenCount = 0;
/**
* Base frame rate (frames per second).
* Arbitrarily high for better x-browser calibration (slower browsers drop more frames).
* @type Int
*
*/
this.fps = 200;
/**
* Interval delay in milliseconds, defaults to fastest possible.
* @type Int
*
*/
this.delay = 1;
/**
* Adds an animation instance to the animation queue.
* All animation instances must be registered in order to animate.
* @param {object} tween The Anim instance to be be registered
*/
this.registerElement = function(tween) {
if ( tween.isAnimated() ) { return false; }// but not if already animating
queue[queue.length] = tween;
tweenCount += 1;
this.start();
};
/**
* Starts the animation thread.
* Only one thread can run at a time.
*/
this.start = function() {
if (thread === null) { thread = setInterval(this.run, this.delay); }
};
/**
* Stops the animation thread or a specific animation instance.
* @param {object} tween A specific Anim instance to stop (optional)
* If no instance given, Manager stops thread and all animations.
*/
this.stop = function(tween) {
if (!tween)
{
clearInterval(thread);
for (var i = 0, len = queue.length; i < len; ++i) {
if (queue[i].isAnimated()) {
queue[i].stop();
}
}
queue = [];
thread = null;
tweenCount = 0;
}
else {
tween.stop();
tweenCount -= 1;
if (tweenCount <= 0) { this.stop(); }
}
};
/**
* Called per Interval to handle each animation frame.
*/
this.run = function() {
for (var i = 0, len = queue.length; i < len; ++i) {
var tween = queue[i];
if ( !tween || !tween.isAnimated() ) { continue; }
if (tween.currentFrame < tween.totalFrames || tween.totalFrames === null)
{
tween.currentFrame += 1;
if (tween.useSeconds) {
correctFrame(tween);
}
tween.onTween.fire();
tween._onTween.fire();
}
else { YAHOO.util.AnimMgr.stop(tween); }
}
};
/**
* On the fly frame correction to keep animation on time.
* @private
* @param {Object} tween The Anim instance being corrected.
*/
var correctFrame = function(tween) {
var frames = tween.totalFrames;
var frame = tween.currentFrame;
var expected = (tween.currentFrame * tween.duration * 1000 / tween.totalFrames);
var elapsed = (new Date() - tween.getStartTime());
var tweak = 0;
if (elapsed < tween.duration * 1000) { // check if falling behind
tweak = Math.round((elapsed / expected - 1) * tween.currentFrame);
} else { // went over duration, so jump to end
tweak = frames - (frame + 1);
}
if (tweak > 0 && isFinite(tweak)) { // adjust if needed
if (tween.currentFrame + tweak >= frames) {// dont go past last frame
tweak = frames - (frame + 1);
}
tween.currentFrame += tweak;
}
};
};
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.10.0
*/
/**
*
* @class Used to calculate Bezier splines for any number of control points.
*
*/
YAHOO.util.Bezier = new function()
{
/**
* Get the current position of the animated element based on t.
* Each point is an array of "x" and "y" values (0 = x, 1 = y)
* At least 2 points are required (start and end).
* First point is start. Last point is end.
* Additional control points are optional.
* @param {Array} points An array containing Bezier points
* @param {Number} t A number between 0 and 1 which is the basis for determining current position
* @return {Array} An array containing int x and y member data
*/
this.getPosition = function(points, t)
{
var n = points.length;
var tmp = [];
for (var i = 0; i < n; ++i){
tmp[i] = [points[i][0], points[i][1]]; // save input
}
for (var j = 1; j < n; ++j) {
for (i = 0; i < n - j; ++i) {
tmp[i][0] = (1 - t) * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
tmp[i][1] = (1 - t) * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
}
}
return [ tmp[0][0], tmp[0][1] ];
};
};
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.10.0
*/
/**
* @class Class for defining the acceleration rate and path of animations.
*/
YAHOO.util.Easing = new function() {
/**
* Uniform speed between points.
* @param {Number} t Time value used to compute current value.
* @param {Number} b Starting value.
* @param {Number} c Delta between start and end values.
* @param {Number} d Total length of animation.
* @return {Number} The computed value for the current animation frame.
*/
this.easeNone = function(t, b, c, d) {
return b+c*(t/=d);
};
/**
* Begins slowly and accelerates towards end.
* @param {Number} t Time value used to compute current value.
* @param {Number} b Starting value.
* @param {Number} c Delta between start and end values.
* @param {Number} d Total length of animation.
* @return {Number} The computed value for the current animation frame.
*/
this.easeIn = function(t, b, c, d) {
return b+c*((t/=d)*t*t);
};
/**
* Begins quickly and decelerates towards end.
* @param {Number} t Time value used to compute current value.
* @param {Number} b Starting value.
* @param {Number} c Delta between start and end values.
* @param {Number} d Total length of animation.
* @return {Number} The computed value for the current animation frame.
*/
this.easeOut = function(t, b, c, d) {
var ts=(t/=d)*t;
var tc=ts*t;
return b+c*(tc + -3*ts + 3*t);
};
/**
* Begins slowly and decelerates towards end.
* @param {Number} t Time value used to compute current value.
* @param {Number} b Starting value.
* @param {Number} c Delta between start and end values.
* @param {Number} d Total length of animation.
* @return {Number} The computed value for the current animation frame.
*/
this.easeBoth = function(t, b, c, d) {
var ts=(t/=d)*t;
var tc=ts*t;
return b+c*(-2*tc + 3*ts);
};
/**
* Begins by going below staring value.
* @param {Number} t Time value used to compute current value.
* @param {Number} b Starting value.
* @param {Number} c Delta between start and end values.
* @param {Number} d Total length of animation.
* @return {Number} The computed value for the current animation frame.
*/
this.backIn = function(t, b, c, d) {
var ts=(t/=d)*t;
var tc=ts*t;
return b+c*(-3.4005*tc*ts + 10.2*ts*ts + -6.2*tc + 0.4*ts);
};
/**
* End by going beyond ending value.
* @param {Number} t Time value used to compute current value.
* @param {Number} b Starting value.
* @param {Number} c Delta between start and end values.
* @param {Number} d Total length of animation.
* @return {Number} The computed value for the current animation frame.
*/
this.backOut = function(t, b, c, d) {
var ts=(t/=d)*t;
var tc=ts*t;
return b+c*(8.292*tc*ts + -21.88*ts*ts + 22.08*tc + -12.69*ts + 5.1975*t);
};
/**
* Starts by going below staring value, and ends by going beyond ending value.
* @param {Number} t Time value used to compute current value.
* @param {Number} b Starting value.
* @param {Number} c Delta between start and end values.
* @param {Number} d Total length of animation.
* @return {Number} The computed value for the current animation frame.
*/
this.backBoth = function(t, b, c, d) {
var ts=(t/=d)*t;
var tc=ts*t;
return b+c*(0.402*tc*ts + -2.1525*ts*ts + -3.2*tc + 8*ts + -2.05*t);
};
};
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.10.0
*/
/**
* @class Anim subclass for moving elements along a path defined by the "points" member of "attributes". All "points" are arrays with x, y coordinates.
* <p>Usage: <code>var myAnim = new YAHOO.util.Motion(el, { points: { to: [800, 800] } }, 1, YAHOO.util.Easing.easeOut);</code></p>
* @requires YAHOO.util.Anim
* @requires YAHOO.util.AnimMgr
* @requires YAHOO.util.Easing
* @requires YAHOO.util.Bezier
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @requires YAHOO.util.CustomEvent
* @constructor
* @param {String or HTMLElement} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
YAHOO.util.Motion = function(el, attributes, duration, method) {
if (el) {
this.initMotion(el, attributes, duration, method);
}
};
YAHOO.util.Motion.prototype = new YAHOO.util.Anim();
/**
* Per attribute units that should be used by default.
* Motion points default to 'px' units.
* @type Object
*/
YAHOO.util.Motion.prototype.defaultUnits.points = 'px';
/**
* Returns the value computed by the animation's "method".
* @param {String} attribute The name of the attribute.
* @param {Number} start The value this attribute should start from for this animation.
* @param {Number} end The value this attribute should end at for this animation.
* @return {Number} The Value to be applied to the attribute.
*/
YAHOO.util.Motion.prototype.doMethod = function(attribute, start, end) {
var val = null;
if (attribute == 'points') {
var translatedPoints = this.getTranslatedPoints();
var t = this.method(this.currentFrame, 0, 100, this.totalFrames) / 100;
if (translatedPoints) {
val = YAHOO.util.Bezier.getPosition(translatedPoints, t);
}
} else {
val = this.method(this.currentFrame, start, end - start, this.totalFrames);
}
return val;
};
/**
* Returns current value of the attribute.
* @param {String} attribute The name of the attribute.
* @return {Number} val The current value of the attribute.
*/
YAHOO.util.Motion.prototype.getAttribute = function(attribute) {
var val = null;
if (attribute == 'points') {
val = [ this.getAttribute('left'), this.getAttribute('top') ];
if ( isNaN(val[0]) ) { val[0] = 0; }
if ( isNaN(val[1]) ) { val[1] = 0; }
} else {
val = parseFloat( YAHOO.util.Dom.getStyle(this.getEl(), attribute) );
}
return val;
};
/**
* Applies a value to an attribute
* @param {String} attribute The name of the attribute.
* @param {Number} val The value to be applied to the attribute.
* @param {String} unit The unit ('px', '%', etc.) of the value.
*/
YAHOO.util.Motion.prototype.setAttribute = function(attribute, val, unit) {
if (attribute == 'points') {
YAHOO.util.Dom.setStyle(this.getEl(), 'left', val[0] + unit);
YAHOO.util.Dom.setStyle(this.getEl(), 'top', val[1] + unit);
} else {
YAHOO.util.Dom.setStyle(this.getEl(), attribute, val + unit);
}
};
/**
* @param {String or HTMLElement} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
YAHOO.util.Motion.prototype.initMotion = function(el, attributes, duration, method) {
YAHOO.util.Anim.call(this, el, attributes, duration, method);
attributes = attributes || {};
attributes.points = attributes.points || {};
attributes.points.control = attributes.points.control || [];
this.attributes = attributes;
var start;
var end = null;
var translatedPoints = null;
this.getTranslatedPoints = function() { return translatedPoints; };
var translateValues = function(val, self) {
var pageXY = YAHOO.util.Dom.getXY(self.getEl());
val = [ val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1] ];
return val;
};
var onStart = function() {
start = this.getAttribute('points');
var attributes = this.attributes;
var control = attributes['points']['control'] || [];
if (control.length > 0 && control[0].constructor != Array) { // could be single point or array of points
control = [control];
}
if (YAHOO.util.Dom.getStyle(this.getEl(), 'position') == 'static') { // default to relative
YAHOO.util.Dom.setStyle(this.getEl(), 'position', 'relative');
}
if (typeof attributes['points']['from'] != 'undefined') {
YAHOO.util.Dom.setXY(this.getEl(), attributes['points']['from']); // set to from point
start = this.getAttribute('points'); // get actual offset values
}
else if ((start[0] === 0 || start[1] === 0)) { // these sometimes up when auto
YAHOO.util.Dom.setXY(this.getEl(), YAHOO.util.Dom.getXY(this.getEl())); // set it to current position, giving offsets
start = this.getAttribute('points'); // get actual offset values
}
var i, len;
// TO beats BY, per SMIL 2.1 spec
if (typeof attributes['points']['to'] != 'undefined') {
end = translateValues(attributes['points']['to'], this);
for (i = 0, len = control.length; i < len; ++i) {
control[i] = translateValues(control[i], this);
}
} else if (typeof attributes['points']['by'] != 'undefined') {
end = [ start[0] + attributes['points']['by'][0], start[1] + attributes['points']['by'][1]];
for (i = 0, len = control.length; i < len; ++i) {
control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
}
}
if (end) {
translatedPoints = [start];
if (control.length > 0) { translatedPoints = translatedPoints.concat(control); }
translatedPoints[translatedPoints.length] = end;
}
};
this._onStart.subscribe(onStart);
};
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.10.0
*/
/**
* @class Anim subclass for scrolling elements to a position defined by the "scroll" member of "attributes". All "scroll" members are arrays with x, y scroll positions.
* <p>Usage: <code>var myAnim = new YAHOO.util.Scroll(el, { scroll: { to: [0, 800] } }, 1, YAHOO.util.Easing.easeOut);</code></p>
* @requires YAHOO.util.Anim
* @requires YAHOO.util.AnimMgr
* @requires YAHOO.util.Easing
* @requires YAHOO.util.Bezier
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @requires YAHOO.util.CustomEvent
* @constructor
* @param {String or HTMLElement} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
YAHOO.util.Scroll = function(el, attributes, duration, method) {
if (el) {
YAHOO.util.Anim.call(this, el, attributes, duration, method);
}
};
YAHOO.util.Scroll.prototype = new YAHOO.util.Anim();
/**
* Per attribute units that should be used by default.
* Scroll positions default to no units.
* @type Object
*/
YAHOO.util.Scroll.prototype.defaultUnits.scroll = ' ';
/**
* Returns the value computed by the animation's "method".
* @param {String} attribute The name of the attribute.
* @param {Number} start The value this attribute should start from for this animation.
* @param {Number} end The value this attribute should end at for this animation.
* @return {Number} The Value to be applied to the attribute.
*/
YAHOO.util.Scroll.prototype.doMethod = function(attribute, start, end) {
var val = null;
if (attribute == 'scroll') {
val = [
this.method(this.currentFrame, start[0], end[0] - start[0], this.totalFrames),
this.method(this.currentFrame, start[1], end[1] - start[1], this.totalFrames)
];
} else {
val = this.method(this.currentFrame, start, end - start, this.totalFrames);
}
return val;
};
/**
* Returns current value of the attribute.
* @param {String} attribute The name of the attribute.
* @return {Number} val The current value of the attribute.
*/
YAHOO.util.Scroll.prototype.getAttribute = function(attribute) {
var val = null;
var el = this.getEl();
if (attribute == 'scroll') {
val = [ el.scrollLeft, el.scrollTop ];
} else {
val = parseFloat( YAHOO.util.Dom.getStyle(el, attribute) );
}
return val;
};
/**
* Applies a value to an attribute
* @param {String} attribute The name of the attribute.
* @param {Number} val The value to be applied to the attribute.
* @param {String} unit The unit ('px', '%', etc.) of the value.
*/
YAHOO.util.Scroll.prototype.setAttribute = function(attribute, val, unit) {
var el = this.getEl();
if (attribute == 'scroll') {
el.scrollLeft = val[0];
el.scrollTop = val[1];
} else {
YAHOO.util.Dom.setStyle(el, attribute, val + unit);
}
};

2738
www/extras/yui/examples/logger/js/autocomplete-debug.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

1180
www/extras/yui/examples/logger/js/event-debug.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

142
www/extras/yui/examples/logger/readlogs.html Normal file
View file

@ -0,0 +1,142 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: Logger - Reading Logs (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/grids/grids.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../../docs/assets/dpSyntaxHighlighter.css" />
<style type="text/css">
.yui-log .mytype {background-color:#FF99CC;}
</style>
</head>
<body>
<div id="doc" class="yui-t7">
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Reading Logs</h1>
</div>
<div id="bd">
<!-- Content begins -->
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first">
<h3>Default LogReader Example</h3>
<p>With just a few lines of code, you can put a LogReader on any web
page to display log messages built into the YUI Library or custom
log messages that you write into your own code. The LogReader
will look for the YUI Library's Drag and Drop
utility to make the LogReader automatically draggable.</p>
<p><input id="yui-log-inputinfo" class="yui-log-input" type="text" value="Log an info message.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputinfo').value,'info')">Log</button></p>
<p><input id="yui-log-inputwarn" class="yui-log-input" type="text" value="Log a warning.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputwarn').value,'warn')">Log</button></p>
<p><input id="yui-log-inputerror" class="yui-log-input" type="text" value="Log an error.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputerror').value,'error')">Log</button></p>
<p><input id="yui-log-inputtime" class="yui-log-input" type="text" value="Log a timing message.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputtime').value,'time')">Log</button></p>
<p><input id="yui-log-inputwindow" class="yui-log-input" type="text" value="Log a window error.">
<button onclick="someUndefinedFunction();">Log</button> (not supported in Opera, Safari)</p>
<p><input id="yui-log-inputcustommsg" class="yui-log-input" type="text" value="Log a custom type message.">
<input id="yui-log-inputcustomtype" type="text" value="mytype">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputcustommsg').value,document.getElementById('yui-log-inputcustomtype').value)">Log</button></p>
<p><a href="javascript:YAHOO.example.LogReader.hideAllReaders();">Hide All LogReaders</a> ||
<a href="javascript:YAHOO.example.LogReader.showAllReaders();">Show All LogReaders</a></p>
<p><a href="javascript:YAHOO.widget.Logger.enableBrowserConsole();">Enable Output to console.log()</a> ||
<a href="javascript:YAHOO.widget.Logger.disableBrowserConsole();">Disable Output to console.log()</a></p>
<p><a href="javascript:YAHOO.widget.Logger.reset();">Reset Logger stack</a></p>
</div>
</div>
<div class="yui-g">
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<textarea name="code" class="HTML" cols="60" rows="1">
<head>
<style type="text/css">
/* A style was defined for a custom category.
By convention, it is defined with narrow-scope
selectors to achieve namespacing*/
.yui-log .mytype {background-color:#FF99CC;}
</style>
</head>
<body>
<!-- No custom markup was defined -->
<script type="text/javascript">
// A single line of JavaScript can get you up and logging
myLogReader1 = new YAHOO.widget.LogReader();
// A couple configurations make for quick customization
myLogReader2 = new YAHOO.widget.LogReader();
myLogReader2.compactOutput = true;
myLogReader2.newestOnTop = false;
myLogReader2.setTitle("Logger Console: Oldest > on > Top!");
</script>
</body>
</textarea>
</div>
<!-- Code sample ends -->
</div>
</div>
</div>
<!-- Content ends -->
</div>
</div>
<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
YAHOO.example.LogReader = function() {
var myLogReader1;
var myLogReader2;
return {
init: function() {
// A single line of JavaScript can get you up and logging
myLogReader1 = new YAHOO.widget.LogReader(null, {verboseOutput:false});
// A couple configurations make for quick customization
myLogReader2 = new YAHOO.widget.LogReader(null, {newestOnTop:false});
myLogReader2.setTitle("Logger Console: Oldest > on > Top!");
myLogReader2.compactOutput = true;
},
hideAllReaders: function() {
myLogReader1.hide();
myLogReader2.hide();
},
showAllReaders: function() {
myLogReader1.show();
myLogReader2.show();
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.LogReader.init);
</script>
<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

190
www/extras/yui/examples/logger/readlogscustom.html Normal file
View file

@ -0,0 +1,190 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: Logger - Customizing LogReader (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/grids/grids.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../../docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
/* customized ylogger styles - logger.css is NOT called above */
/* font size is controlled here: default 77% */
#yui-log {position:relative;font-size:85%;}
/* width is controlled here: default 31em */
.yui-log {padding:1em;width:31em;background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid gray;overflow:auto;width:100%;height:10em;}
.yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
.yui-log .mytype {background-color:#FF99CC;} /* FF99CC pink */
</style>
</head>
<body>
<div id="doc" class="yui-t7">
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Customizing LogReader</h1>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g first">
<div class="yui-u first">
<!-- Content begins -->
<div id="content">
<h3>Customized LogReader Example</h3>
<p>These LogReaders have been customized, not only by modifying
the default CSS, but also, the <code>verboseOutput</code>
properties have been disabled, and the log messages of the first
LogReader have been formatted with a custom <code>formatMsg</code>
method.</p>
<p><input id="yui-log-inputinfo" class="yui-log-input" type="text" value="Log an info message.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputinfo').value,'info')">Log</button></p>
<p><input id="yui-log-inputwarn" class="yui-log-input" type="text" value="Log a warning.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputwarn').value,'warn')">Log</button></p>
<p><input id="yui-log-inputerror" class="yui-log-input" type="text" value="Log an error.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputerror').value,'error')">Log</button></p>
<p><input id="yui-log-inputtime" class="yui-log-input" type="text" value="Log a timing message.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputtime').value,'time')">Log</button></p>
<p><input id="yui-log-inputwindow" class="yui-log-input" type="text" value="Log a window error.">
<button onclick="someUndefinedFunction();">Log</button> (not supported in Opera, Safari)</p>
<p><input id="yui-log-inputcustommsg" class="yui-log-input" type="text" value="Log a custom type message.">
<input id="yui-log-inputcustomtype" type="text" value="mytype">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputcustommsg').value,document.getElementById('yui-log-inputcustomtype').value)">Log</button></p>
<p><a href="javascript:YAHOO.example.LogReader.hideAllReaders();">Hide All LogReaders</a> ||
<a href="javascript:YAHOO.example.LogReader.showAllReaders();">Show All LogReaders</a></p>
<p><a href="javascript:YAHOO.widget.Logger.enableBrowserConsole();">Enable Output to console.log()</a> || <a href="javascript:YAHOO.widget.Logger.disableBrowserConsole();">Disable Output to console.log()</a>
</p>
<p><a href="javascript:YAHOO.widget.Logger.reset();">Reset Logger stack</a></p>
</div>
<!-- Content ends -->
</div>
<div class="yui-u">
<!-- Logger begins -->
<div id="yui-log" class="yui-log"></div>
<!-- Logger ends -->
</div>
</div>
<div class="yui-g">
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<textarea name="code" class="HTML" cols="60" rows="1">
<head>
<style type="text/css">
/* container is relatively positioned and
font size is adjusted here (default is 77%) */
#yui-log {position:relative;font-size:85%;}
/* width is controlled here: default 31em */
.yui-log {padding:1em;width:31em;background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid gray;overflow:auto;width:100%;height:10em;}
.yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
/* a style for a custom category */
.yui-log .mytype {background-color:#FF99CC;} /* FF99CC pink */
</style>
</head>
<body>
<!-- Logger begins -->
<div id="yui-log" class="yui-log"></div>
<!-- Logger ends -->
<script type="text/javascript">
myLogReader1 = new YAHOO.widget.LogReader("yui-log",{verboseOutput: false});
myLogReader1.formatMsg = function(oLogMsg) {
var category = oLogMsg.category;
return "<p><span class='"+category+"'>"+category+"</span> "+
this.html2Text(oLogMsg.msg)+"</p>";
};
myLogReader2 = new YAHOO.widget.LogReader("yui-log",{verboseOutput: false});
</script>
</body>
</textarea>
</div>
<!-- Code sample ends -->
</div>
</div>
</div>
</div>
</div>
<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
YAHOO.example.LogReader = function() {
var myLogReader1;
var myLogReader2;
return {
init: function() {
myLogReader1 = new YAHOO.widget.LogReader("yui-log",{verboseOutput: false});
myLogReader1.formatMsg = function(oLogMsg) {
var category = oLogMsg.category;
return "<p><span class='"+category+"'>"+category+"</span> "+
this.html2Text(oLogMsg.msg)+"</p>";
};
myLogReader2 = new YAHOO.widget.LogReader("yui-log",{verboseOutput: false});
},
hideAllReaders: function() {
myLogReader1.hide();
myLogReader2.hide();
},
showAllReaders: function() {
myLogReader1.show();
myLogReader2.show();
}
};
}();
YAHOO.util.Event.onAvailable("yui-log",YAHOO.example.LogReader.init);
</script>
<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

175
www/extras/yui/examples/logger/writelogs.html Normal file
View file

@ -0,0 +1,175 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: Logger - Writing Logs (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/grids/grids.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../../docs/assets/dpSyntaxHighlighter.css">
</head>
<body>
<div id="doc" class="yui-t7">
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Writing Logs</h1>
</div>
<div id="bd">
<!-- Content begins -->
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first">
<div id="content">
<h3>Writing Log Messages From Your Code</h3>
<p>In this example, we instanatiate a simple LogReader to display log
messages. We use the global method YAHOO.log() to write simple messages,
and we also instantiate a LogWriter instance to write messages from a
custom-named source.</p>
<p><input id="yui-log-inputinfo" class="yui-log-input" type="text" value="Log an info message.">
<button id="btn_loginfo">Log this message</button></p>
<p><input id="yui-log-inputwarn" class="yui-log-input" type="text" value="Log a warning.">
<button id="btn_logwarn">Log this message</button></p>
<p><input id="yui-log-inputerror" class="yui-log-input" type="text" value="Log an error.">
<button id="btn_logerror">Log this message</button></p>
<p><input id="yui-log-inputtime" class="yui-log-input" type="text" value="Log a timing message.">
<button id="btn_logtime">Log this message</button></p>
<p><input id="yui-log-inputwindow" class="yui-log-input" type="text" value="Log a window error.">
<button onclick="someUndefinedFunction();">Log this message</button> (not supported in Opera, Safari)</p>
<p><input id="yui-log-inputcustommsg" class="yui-log-input" type="text" value="Log a custom type message.">
<input id="yui-log-inputcustomtype" type="text" value="myCategory">
<button id="btn_logcustom">Log this message with this category</button></p>
<p><input id="yui-log-inputsource" class="yui-log-input" type="text" value="SomeClass instance1">
<button id="btn_logsource">Generate some messages from a named source</button></p>
</div>
<!-- Content ends -->
</div>
</div>
<div class="yui-g">
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<textarea name="code" class="HTML" cols="60" rows="1">
<script type="text/javascript">
//No custom CSS styles were defined
//No custom markup was defined
// Instantiate a logreader and a logwriter
myLogReader = new YAHOO.widget.LogReader(null,{top:"10%",right:"10px"});
myLogWriter = new YAHOO.widget.LogWriter("myWriter");
// You can call the global function YAHOO.log() anytime, anywhere
YAHOO.log("Yahoo! is great"); // defaults to type "info"
YAHOO.log("Here is a warning", "warn");
YAHOO.log("Some error has occurred", "error");
YAHOO.log("Use timers to profile your code", "time");
myLogWriter.log("something","info");
myLogWriter.log("something","warn");
myLogWriter.log("something","error");
myLogWriter.log("something","time");
myLogWriter.log("something","custom");
</script>
</textarea>
</div>
<!-- Code sample ends -->
</div>
</div>
</div>
</div>
</div>
<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
YAHOO.example.LogWriter = function() {
var myLogReader;
var myLogWriter;
return {
init: function() {
// Instantiate a logreader and a logwriter
myLogReader = new YAHOO.widget.LogReader(null,{top:"10%",right:"10px"});
myLogWriter = new YAHOO.widget.LogWriter("myWriter");
// You can call the global function YAHOO.log() anytime, anywhere
YAHOO.log("Yahoo! is great"); // defaults to type "info"
YAHOO.log("Here is a warning", "warn");
YAHOO.log("Some error has occurred", "error");
YAHOO.log("Use timers to profile your code", "time");
// Define interesting moments that cause log messages to be written
var oSelf = YAHOO.example.LogWriter;
YAHOO.util.Event.addListener(document.getElementById('btn_loginfo'),'click',oSelf.onLogInfoClick);
YAHOO.util.Event.addListener(document.getElementById('btn_logwarn'),'click',oSelf.onLogWarnClick);
YAHOO.util.Event.addListener(document.getElementById('btn_logerror'),'click',oSelf.onLogErrorClick);
YAHOO.util.Event.addListener(document.getElementById('btn_logtime'),'click',oSelf.onLogTimeClick);
YAHOO.util.Event.addListener(document.getElementById('btn_logcustom'),'click',oSelf.onLogCustomClick);
YAHOO.util.Event.addListener(document.getElementById('btn_logsource'),'click',oSelf.onSourceWriterClick);
},
hideAllReaders: function() {
myLogReader.hide();
},
showAllReaders: function() {
myLogReader.show();
},
createNewLogWriter: function(source) {
// You can instantiate your own named logwriter and use it to write log messages
var newWriter = new YAHOO.widget.LogWriter(source);
newWriter.log("Doing great!"); // defaults to type "info"
newWriter.log("Giving a warning", "warn");
newWriter.log("Throwing an error", "error");
newWriter.log("Timing some code", "time");
},
onSourceWriterClick: function() {
YAHOO.example.LogWriter.createNewLogWriter(document.getElementById('yui-log-inputsource').value);
},
onLogInfoClick: function() {
myLogWriter.log(document.getElementById('yui-log-inputinfo').value,'info');
},
onLogWarnClick: function() {
myLogWriter.log(document.getElementById('yui-log-inputwarn').value,'warn');
},
onLogErrorClick: function() {
myLogWriter.log(document.getElementById('yui-log-inputerror').value,'error');
},
onLogTimeClick: function() {
myLogWriter.log(document.getElementById('yui-log-inputtime').value,'time');
},
onLogCustomClick: function() {
myLogWriter.log(document.getElementById('yui-log-inputcustommsg').value,document.getElementById('yui-log-inputcustomtype').value);
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.LogWriter.init);
</script>
<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>