update YUI to 2.8.0r4
This commit is contained in:
Graham Knop
parent
27f474ec64
commit
2d28e0c0ba
2007 changed files with 344487 additions and 210070 deletions
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,204 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Extracting data from an HTML table</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css" class="highlight-ignore">
|
||||
#demo table {
|
||||
border: 1px solid #aaa;
|
||||
border-collapse: collapse;
|
||||
font-size: 80%;
|
||||
}
|
||||
#demo caption {
|
||||
margin-top: 1em;
|
||||
padding: .5ex 0;
|
||||
font-size: 130%;
|
||||
color: #369;
|
||||
}
|
||||
#demo td {
|
||||
border: 1px solid #aaa;
|
||||
padding: .5ex 1ex;
|
||||
}
|
||||
#demo th {
|
||||
background: #ccc;
|
||||
border: 1px solid #aaa;
|
||||
padding: .5ex 1ex;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Extracting data from an HTML table</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>DataSource supports using a table in markup as its source of truth.</p>
|
||||
<p>This example illustrates how to create a "pass-thru" DataSource instance to leverage the DOM walking and parsing routines inside in order to extract the table's data into a JavaScript array structure.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">
|
||||
<button type="button" id="demo_load">Extract the table data</button>
|
||||
<button type="button" id="demo_go" disabled="disabled">Get Total Amount Due</button>
|
||||
<p>Total Amount Due: <em id="report">(click the Extract button)</em></p>
|
||||
|
||||
<table id="accounts">
|
||||
<caption>Table in markup with data in it</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Due Date</th>
|
||||
<th>Account Number</th>
|
||||
<th>Quantity</th>
|
||||
<th>Amount Due</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1/23/1999</td>
|
||||
<td>29e8548592d8c82</td>
|
||||
<td>12</td>
|
||||
<td>$150.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5/19/1999</td>
|
||||
<td>83849</td>
|
||||
<td>8</td>
|
||||
<td>$60.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8/9/1999</td>
|
||||
<td>11348</td>
|
||||
<td>1</td>
|
||||
<td>-$34.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1/23/2000</td>
|
||||
<td>29e8548592d8c82</td>
|
||||
<td>10</td>
|
||||
<td>-$1.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4/28/2000</td>
|
||||
<td>37892857482836437378273</td>
|
||||
<td>123</td>
|
||||
<td>$33.32</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1/23/2001</td>
|
||||
<td>83849</td>
|
||||
<td>5</td>
|
||||
<td>-$15.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9/30/2001</td>
|
||||
<td>224747</td>
|
||||
<td>14</td>
|
||||
<td>$56.78</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.util.Event.onDOMReady(function () {
|
||||
|
||||
// Shortcuts
|
||||
var DataSource = YAHOO.util.DataSource,
|
||||
Event = YAHOO.util.Event,
|
||||
Dom = YAHOO.util.Dom;
|
||||
|
||||
YAHOO.example.data = null; // this is where the data will go
|
||||
|
||||
// Add a new parser to DataSource to parse numbers that are prefixed with
|
||||
// currency symbols (or any other non-numeric characters)
|
||||
DataSource.Parser.currency = function (cur) {
|
||||
if (YAHOO.lang.isString(cur)) {
|
||||
var neg = !cur.indexOf('-');
|
||||
cur = (neg?-1:1) * cur.slice(neg).replace(/^[^0-9.]+|,/g,'');
|
||||
} else if (!YAHOO.lang.isNumber(cur)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return cur;
|
||||
};
|
||||
|
||||
Event.on('demo_load','click',function (e) {
|
||||
|
||||
// Here's the pass-thru DataSource. Instantiate and immediately call
|
||||
// sendRequest, passing a simple assignment function as the callback's
|
||||
// success handler
|
||||
new DataSource(Dom.get('accounts'), {
|
||||
responseType : DataSource.TYPE_HTMLTABLE,
|
||||
responseSchema : {
|
||||
// Describe the object keys each record will have and what type
|
||||
// of data to parse into the respective values
|
||||
fields : [
|
||||
{ key: 'due', parser: 'date' },
|
||||
{ key: 'account' },
|
||||
{ key: 'quantity', parser: 'number' },
|
||||
{ key: 'amount', parser: 'currency' } // use our new parser
|
||||
]
|
||||
}
|
||||
}).sendRequest(null,{
|
||||
success : function (req,res) {
|
||||
YAHOO.example.data = res.results;
|
||||
}
|
||||
});
|
||||
|
||||
YAHOO.log(YAHOO.lang.dump(YAHOO.example.data), "info", "example");
|
||||
|
||||
// The work is done and data is populated. Update the UI to allow for
|
||||
// referencing the data structure.
|
||||
Dom.get('demo_load').disabled = true;
|
||||
Dom.get('demo_go').disabled = false;
|
||||
|
||||
Dom.get('report').innerHTML = "Table data loaded. Click <em>Get Total Amount Due</em>.";
|
||||
});
|
||||
|
||||
Event.on('demo_go','click', function (e) {
|
||||
var data = YAHOO.example.data || [],
|
||||
total = 0,
|
||||
i;
|
||||
|
||||
// Proof that we have a populated data object
|
||||
for (i = data.length - 1; i >= 0; --i) {
|
||||
total += data[i].amount;
|
||||
}
|
||||
|
||||
Dom.get('report').innerHTML = '$' + total.toFixed(2);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
352
www/extras/yui/examples/datasource/datasource_yql.html
Normal file
352
www/extras/yui/examples/datasource/datasource_yql.html
Normal file
File diff suppressed because one or more lines are too long
149
www/extras/yui/examples/datasource/datasource_yql_clean.html
Normal file
149
www/extras/yui/examples/datasource/datasource_yql_clean.html
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>YQLDataSource</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/get/get-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css" class="highlight-ignore">
|
||||
#demo table {
|
||||
border: 1px solid #aaa;
|
||||
border-collapse: collapse;
|
||||
font-size: 80%;
|
||||
}
|
||||
#demo caption {
|
||||
margin-top: 1em;
|
||||
padding: .5ex 0;
|
||||
font-size: 130%;
|
||||
color: #369;
|
||||
}
|
||||
#demo td {
|
||||
border: 1px solid #aaa;
|
||||
padding: .5ex 1ex;
|
||||
}
|
||||
#demo th {
|
||||
background: #ccc;
|
||||
border: 1px solid #aaa;
|
||||
padding: .5ex 1ex;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>YQLDataSource</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>Inspired by Jonathan LeBlanc's <a href="http://www.yuiblog.com/blog/2009/06/17/yui-and-yql/">article on the YUI Blog</a>, the YQLDataSource class makes it easier to use YQL data in <a href="http://developer.yahoo.com/yui/datatable/">DataTable</a>, <a href="http://developer.yahoo.com/yui/charts/">Charts</a>, or <a href="http://developer.yahoo.com/yui/autocomplete/">AutoComplete</a>. The DataTable below is built using the YQLDataSource class.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="Container"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.util.YQLDataSource = function (oLiveData, oConfigs) {
|
||||
oLiveData = oLiveData || 'http://query.yahooapis.com/v1/public/yql?format=json&q=';
|
||||
YAHOO.util.YQLDataSource.superclass.constructor.call(this, oLiveData, oConfigs);
|
||||
};
|
||||
|
||||
YAHOO.lang.extend(YAHOO.util.YQLDataSource, YAHOO.util.ScriptNodeDataSource, {
|
||||
responseType:YAHOO.util.DataSource.TYPE_JSON,
|
||||
parseJSONData: function ( oRequest , oFullResponse ) {
|
||||
var i,q = oFullResponse.query.results,
|
||||
rSch = this.responseSchema,
|
||||
fs = {};
|
||||
|
||||
if ('fields' in rSch && rSch.fields.length) {
|
||||
for (i = 0;i < rSch.fields.length;i++) {
|
||||
fs[rSch.fields[i].key || rSch.fields[i]] = i;
|
||||
}
|
||||
} else {
|
||||
rSch.fields = [];
|
||||
}
|
||||
var pushFields = function(node,prefix) {
|
||||
if (prefix) {
|
||||
prefix += '.';
|
||||
} else {
|
||||
prefix = '';
|
||||
}
|
||||
for (var field in node) {
|
||||
if (node.hasOwnProperty(field) && !(field in fs)) {
|
||||
if (YAHOO.lang.isObject(node[field])) {
|
||||
pushFields(node[field],prefix + field);
|
||||
} else {
|
||||
rSch.fields.push(prefix + field);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
for (var list in q) {
|
||||
if (q.hasOwnProperty(list)) {
|
||||
rSch.resultsList = rSch.resultsList || 'query.results.' + list;
|
||||
pushFields(q[list][0]);
|
||||
return YAHOO.util.YQLDataSource.superclass.parseJSONData.apply(this,arguments);
|
||||
}
|
||||
}
|
||||
},
|
||||
makeConnection : function(oRequest, oCallback, oCaller) {
|
||||
YAHOO.util.YQLDataSource.superclass.makeConnection.call(this,encodeURIComponent(oRequest),oCallback,oCaller);
|
||||
}
|
||||
});
|
||||
|
||||
YAHOO.lang.augmentObject(YAHOO.util.YQLDataSource, YAHOO.util.DataSourceBase);
|
||||
|
||||
YAHOO.util.Event.onDOMReady(function () {
|
||||
(new YAHOO.widget.DataTable(
|
||||
'Container',
|
||||
[
|
||||
{key:"id",label:"ID",resizeable:true},
|
||||
{key:"owner",label:"Owner",resizeable:true},
|
||||
{key:"title",label:"Title",resizeable:true},
|
||||
{key:"img",label:"Photo", formatter: function(elCell, oRecord, oColumn, oData) {
|
||||
elCell.innerHTML = YAHOO.lang.substitute(
|
||||
'<img src="http://farm3.static.flickr.com/{server}/{id}_{secret}.jpg?v=0" width="80" height="80" />',
|
||||
oRecord.getData()
|
||||
);
|
||||
}}
|
||||
],
|
||||
new YAHOO.util.YQLDataSource(),
|
||||
{
|
||||
initialRequest:'select * from flickr.photos.search where text = "YDN"'
|
||||
}
|
||||
));
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
356
www/extras/yui/examples/datasource/datasource_yql_log.html
Normal file
356
www/extras/yui/examples/datasource/datasource_yql_log.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue