mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-15 05:53:13 +00:00
1230 lines
69 KiB
HTML
1230 lines
69 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>YUI Library Examples: Layout Manager: Complex Application</title>
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
|
|
|
|
<style>
|
|
/*Supplemental CSS for the YUI distribution*/
|
|
#custom-doc { width: 95%; min-width: 950px; }
|
|
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
|
|
<!--Script and CSS includes for YUI dependencies on this page-->
|
|
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
|
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
|
|
<script type="text/javascript" src="../../build/event/event-min.js"></script>
|
|
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
|
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
|
|
|
<!--there is no custom header content for this example-->
|
|
|
|
|
|
<script type="text/javascript">
|
|
//enable passthrough of errors from YUI Event:
|
|
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
|
|
YAHOO.util.Event.throwErrors = true;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body id="yahoo-com" class="yui-skin-sam">
|
|
<div id="custom-doc" class="yui-t2">
|
|
<div id="hd">
|
|
<div id="ygunav">
|
|
<p><em><a href="http://developer.yahoo.com/yui/">YUI Library Home</a></em></p>
|
|
<form action="http://search.yahoo.com/search" id="sitesearchform">
|
|
<input name="vs" type="hidden" value="developer.yahoo.com">
|
|
<input name="vs" type="hidden" value="yuiblog.com">
|
|
<div id="sitesearch">
|
|
<label for="searchinput">Site Search (YDN & YUIBlog): </label>
|
|
<input type="text" id="searchinput" name="p">
|
|
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
|
|
</div>
|
|
</form> </div>
|
|
<div id="ygma"><a href="../../"><img src="../../assets/yui.gif" border="0" height="38"></a></div>
|
|
<div id="pagetitle"><h1>YUI Library Examples: Layout Manager: Complex Application</h1></div>
|
|
</div>
|
|
<div id="bd">
|
|
|
|
<div id="yui-main">
|
|
<div class="yui-b">
|
|
<div class="yui-ge">
|
|
<div class="yui-u first example">
|
|
|
|
|
|
<div class="promo">
|
|
<h1>Layout Manager: Complex Application</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>An advanced application using several YUI Utilities and Controls. This example shows a layout similar to the new Yahoo! Mail look and feel. <strong>This is not a new product from Yahoo! or YUI, just a demonstration of how YUI components can work in concert in the context of a more complex application.</strong></p>
|
|
|
|
</div>
|
|
|
|
<div class="example-container module newWindow">
|
|
<div id="example-canvas" class="bd">
|
|
|
|
<p class="newWindowButton yui-skin-sam"><span id="newWindowLink"><span class="first-child"><a href="adv_layout_source.html" target="_blank">View example in new window.</a></span></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<p><strong>Note:</strong> There is a unresolved performance issue with this example on pre-Intel Macs running the latest Opera browser.</p>
|
|
|
|
<h2 class="first">Getting Started</h2>
|
|
|
|
<p>This example contains a few YUI Utilities and Controls as well as the use of a few Yahoo! Services. Here is the complete list of items used:</p>
|
|
<p>YUI Utilities:
|
|
<ul>
|
|
<li><a href="http://developer.yahoo.com/yui/yahoo">YAHOO</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/dom">Dom</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/event">Event</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/animation">Animation</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/selector">Selector</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/get">Get</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/yuiloader">YUI Loader</a></li>
|
|
</ul>
|
|
</p>
|
|
<p>YUI Controls:
|
|
<ul>
|
|
<li><a href="http://developer.yahoo.com/yui/autocomplete">AutoComplete</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/button">Button</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/calendar">Calendar</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/datatable">DataTable</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/editor">Editor</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/layout">Layout Manager</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/logger">Logger</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/menu">Menu</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/container/simpledialog">SimpleDialog</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/slider">Slider</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/tabview">TabView</a></li>
|
|
<li><a href="http://developer.yahoo.com/yui/container/tooltip">Tooltip</a></li>
|
|
</ul>
|
|
</p>
|
|
<p>Yahoo! Tools/Services:
|
|
<ul>
|
|
<li><a href="http://pipes.yahoo.com/pipes/person.info?display=pipes&eyuid=HlKenYc.qXFqx.HasMLFF4hABlre">Yahoo! Pipes</a></li>
|
|
<li><a href="http://weather.yahoo.com/">Yahoo! Weather Feed</a></li>
|
|
<li><a href="http://news.yahoo.com">Yahoo! News RSS Feeds</a></li>
|
|
<li><a href="http://tech.groups.yahoo.com/group/ydn-javascript/">RSS Feed from YDN-Javascript Group</a></li>
|
|
<li><a href="http://tech.groups.yahoo.com/group/ydn-patterns/">RSS Feed from YDN-Patterns Group</a></li>
|
|
<li><a href="http://tech.groups.yahoo.com/group/ydn-delicious/">RSS Feed from YDN-Delicious Group</a></li>
|
|
<li><a href="http://tech.groups.yahoo.com/group/ydn-mail/">RSS Feed from YDN-Mail Group</a></li>
|
|
<li><a href="http://tech.groups.yahoo.com/group/yws-maps/">RSS Feed from YWS-Maps Group</a></li>
|
|
<li><a href="http://tech.groups.yahoo.com/group/yws-flickr/">RSS Feed from YWS-Flickr Group</a></li>
|
|
<li><a href="http://tech.groups.yahoo.com/group/yws-events/">RSS Feed from YWS-Events Group</a></li>
|
|
</ul>
|
|
</p>
|
|
|
|
<h2>Design</h2>
|
|
|
|
<p>This example was designed to be used with the YUILoader and Get Utilities. Each important piece of the puzzle is created and stored in a separate Javasript file. Here are the links to the actual source files (listed in order of operation):
|
|
<ul>
|
|
<li><a href="#main_js">main.js</a> - Main app logic</li>
|
|
<li><a href="#tabview_js">tabview.js</a> - Creates the main tabview instance.
|
|
<ul>
|
|
<li><a href="#news_js">news.js</a> - Fetchs the news feeds</li>
|
|
<li><a href="#inbox_js">inbox.js</a> - Contains the DataTable's logic</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#buttons_js">buttons.js</a> - Contains the button logic
|
|
<ul>
|
|
<li><a href="#editor_js">editor.js</a> - Contains the Editor's logic</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#calendar_js">calendar.js</a> - Contains the Calendar logic</li>
|
|
<li><a href="#logger_js">logger.js</a> - Contains the Logger logic</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<h2 id="main_js">main.js</h2>
|
|
<p>This file uses YUILoader to load: reset-fonts-grids, utilities, tabview, selector, resize and layout. Once they have loaded, it creates the main page layout. In it's render listener it loads <code>tabview.js</code> and <code>button.js</code></p>
|
|
<textarea name="code" class="JScript">
|
|
(function() {
|
|
YAHOO.example.app = {
|
|
inboxLoaded: false,
|
|
inboxLoading: false,
|
|
feedURL: 'http:/'+'/rss.groups.yahoo.com/group/ydn-javascript/rss?count=50',
|
|
getFeed: function(u) {
|
|
if (!YAHOO.example.app.inboxLoading) {
|
|
var reload = true;
|
|
YAHOO.example.app.inboxLoading = true;
|
|
if (u) {
|
|
if (YAHOO.example.app.feedURL === (u + '?count=50')) {
|
|
reload = false;
|
|
}
|
|
YAHOO.example.app.feedURL = u + '?count=50';
|
|
}
|
|
YAHOO.util.Dom.addClass(YAHOO.example.app.tabView._tabParent, 'loading');
|
|
if (!YAHOO.example.app.inboxLoaded) {
|
|
var transactionObj = YAHOO.util.Get.script('assets/js/inbox.js', { autopurge: true });
|
|
} else {
|
|
if (reload) {
|
|
YAHOO.example.app.reloadData(u);
|
|
} else {
|
|
YAHOO.util.Dom.removeClass(YAHOO.example.app.tabView._tabParent, 'loading');
|
|
YAHOO.example.app.inboxLoading = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
//Call loader the first time
|
|
var loader = new YAHOO.util.YUILoader({
|
|
base: '../../build/',
|
|
//Get these modules
|
|
require: ['reset-fonts-grids', 'utilities', 'logger', 'button', 'container', 'tabview', 'selector', 'resize', 'layout'],
|
|
rollup: true,
|
|
onSuccess: function() {
|
|
//Use the DD shim on all DD objects
|
|
YAHOO.util.DDM.useShim = true;
|
|
//Load the global CSS file.
|
|
YAHOO.log('Main files loaded..', 'info', 'main.js');
|
|
YAHOO.util.Get.css('assets/css/example1.css');
|
|
|
|
YAHOO.log('Create the first layout on the page', 'info', 'main.js');
|
|
YAHOO.example.app.layout = new YAHOO.widget.Layout({
|
|
minWidth: 1000,
|
|
units: [
|
|
{ position: 'top', height: 45, resize: false, body: 'top1' },
|
|
{ position: 'right', width: 300, body: '', header: 'Logger Console', collapse: true },
|
|
{ position: 'left', width: 190, resize: true, body: 'left1', gutter: '0 5 0 5px', minWidth: 190 },
|
|
{ position: 'center', gutter: '0 5px 0 2' }
|
|
]
|
|
});
|
|
//On resize, resize the left and right column content
|
|
YAHOO.example.app.layout.on('resize', function() {
|
|
var l = this.getUnitByPosition('left');
|
|
var th = l.get('height') - YAHOO.util.Dom.get('folder_top').offsetHeight;
|
|
var h = th - 4; //Borders around the 2 areas
|
|
h = h - 9; //Padding between the 2 parts
|
|
YAHOO.util.Dom.setStyle('folder_list', 'height', h + 'px');
|
|
}, YAHOO.example.app.layout, true);
|
|
//On render, load tabview.js and button.js
|
|
YAHOO.example.app.layout.on('render', function() {
|
|
window.setTimeout(function() {
|
|
YAHOO.util.Get.script('assets/js/logger.js');
|
|
YAHOO.util.Get.script('assets/js/tabview.js');
|
|
YAHOO.util.Get.script('assets/js/buttons.js');
|
|
YAHOO.util.Get.script('assets/js/calendar.js');
|
|
}, 0);
|
|
YAHOO.example.app.layout.getUnitByPosition('right').collapse();
|
|
setTimeout(function() {
|
|
YAHOO.util.Dom.setStyle(document.body, 'visibility', 'visible');
|
|
YAHOO.example.app.layout.resize();
|
|
}, 1000);
|
|
});
|
|
//Render the layout
|
|
YAHOO.example.app.layout.render();
|
|
//Setup the click listeners on the folder list
|
|
YAHOO.util.Event.on('folder_list', 'click', function(ev) {
|
|
var tar = YAHOO.util.Event.getTarget(ev);
|
|
if (tar.tagName.toLowerCase() != 'a') {
|
|
tar = null;
|
|
}
|
|
//Make sure we are a link in the list's
|
|
if (tar && YAHOO.util.Selector.test(tar, '#folder_list ul li a')) {
|
|
//if the href is a '#' then select the proper tab and change it's label
|
|
if (tar && tar.getAttribute('href', 2) == '#') {
|
|
YAHOO.util.Dom.removeClass(YAHOO.util.Selector.query('#folder_list li'), 'selected');
|
|
var feedName = tar.parentNode.className;
|
|
YAHOO.util.Dom.addClass(tar.parentNode, 'selected');
|
|
YAHOO.util.Event.stopEvent(ev);
|
|
var title = tar.innerHTML;
|
|
var t = YAHOO.example.app.tabView.get('tabs');
|
|
for (var i = 0; i < t.length; i++) {
|
|
if (t[i].get('id') == 'inboxView') {
|
|
t[i].set('label', title);
|
|
var u = false;
|
|
if (feedName.indexOf('-') != -1) {
|
|
u = 'http:/'+'/rss.groups.yahoo.com/group/' + feedName + '/rss';
|
|
}
|
|
if (feedName.indexOf('inbox') != -1) {
|
|
u = 'http:/'+'/rss.groups.yahoo.com/group/ydn-javascript/rss';
|
|
}
|
|
YAHOO.example.app.getFeed(u);
|
|
YAHOO.example.app.tabView.set('activeTab', t[i]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
//Create a SimpleDialog used to mimic an OS dialog
|
|
var panel = new YAHOO.widget.SimpleDialog('alert', {
|
|
fixedcenter: true,
|
|
visible: false,
|
|
modal: true,
|
|
width: '300px',
|
|
constraintoviewport: true,
|
|
icon: YAHOO.widget.SimpleDialog.ICON_WARN,
|
|
buttons: [
|
|
{ text: 'OK', handler: function() {
|
|
panel.hide();
|
|
}, isDefault: true }
|
|
]
|
|
});
|
|
//Set the header
|
|
panel.setHeader('Alert');
|
|
//Give the body something to render with
|
|
panel.setBody('Notta');
|
|
//Render the Dialog to the body
|
|
panel.render(document.body);
|
|
|
|
//Create a namepaced alert method
|
|
YAHOO.example.app.alert = function(str) {
|
|
YAHOO.log('Firing panel setBody with string: ' + str, 'info', 'main.js');
|
|
//Set the body to the string passed
|
|
panel.setBody(str);
|
|
//Set an icon
|
|
panel.cfg.setProperty('icon', YAHOO.widget.SimpleDialog.ICON_WARN);
|
|
//Bring the dialog to the top
|
|
panel.bringToTop();
|
|
//Show it
|
|
panel.show();
|
|
};
|
|
|
|
YAHOO.example.app.alert('This is not a new product from Yahoo! or YUI, just a demonstration of how YUI components can work in concert in the context of a more complex application.');
|
|
}
|
|
});
|
|
loader.insert();
|
|
})();
|
|
</textarea>
|
|
|
|
<h2 id="tabview_js">tabview.js</h2>
|
|
<p>This file creates the main TabView used for the center unit. It also creates the welcome screen and uses <code>Get</code> to load the <code>news.js</code> file. If the Inbox tab is selected, it will use <code>Get</code> to load the <code>inbox.js</code>.</p>
|
|
<textarea name="code" class="JScript">
|
|
(function() {
|
|
var Dom = YAHOO.util.Dom,
|
|
Event = YAHOO.util.Event,
|
|
Sel = YAHOO.util.Selector;
|
|
YAHOO.log('tabview.js loaded', 'info', 'tabview.js');
|
|
//Set the time on the home screen
|
|
YAHOO.example.app.setTime = function() {
|
|
var d = new Date();
|
|
var weekday = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
|
|
var h = d.getHours(), a = 'am';
|
|
if (h >= 12) {
|
|
a = 'pm';
|
|
if (h > 12) {
|
|
h = (h - 12);
|
|
}
|
|
}
|
|
|
|
var dy = d.getDate();
|
|
if (dy < 10) {
|
|
dy = '0' + dy;
|
|
}
|
|
|
|
var m = (d.getMonth() + 1);
|
|
if (m < 10) {
|
|
m = '0' + m;
|
|
}
|
|
|
|
var dt = weekday[d.getDay()] + ' ' + m + '/' + dy + '/' + d.getFullYear() + ' ' + h + ':' + d.getMinutes() + ' ' + a;
|
|
YAHOO.util.Dom.get('datetime').innerHTML = dt;
|
|
YAHOO.util.Dom.get('calDateStr').innerHTML = m + '/' + dy + '/' + d.getFullYear();
|
|
YAHOO.log('Setting the time/date string to: ' + dt, 'info', 'tabview.js');
|
|
};
|
|
|
|
//Method to Resize the tabview
|
|
YAHOO.example.app.resizeTabView = function() {
|
|
var ul = YAHOO.example.app.tabView._tabParent.offsetHeight;
|
|
Dom.setStyle(YAHOO.example.app.tabView._contentParent, 'height', ((YAHOO.example.app.layout.getSizes().center.h - ul) - 2) + 'px');
|
|
};
|
|
|
|
//Listen for the layout resize and call the method
|
|
YAHOO.example.app.layout.on('resize', YAHOO.example.app.resizeTabView);
|
|
//Create the tabView
|
|
YAHOO.log('Creating the main TabView instance', 'info', 'tabview.js');
|
|
YAHOO.example.app.tabView = new YAHOO.widget.TabView();
|
|
//Create the Home tab
|
|
YAHOO.example.app.tabView.addTab( new YAHOO.widget.Tab({
|
|
//Inject a span for the icon
|
|
label: '<span></span>Home',
|
|
id: 'homeView',
|
|
content: '<div id="welcomeWrapper"><h2>Welcome to the home screen</h2><span id="datetime"></span><div id="weather"><span><em></em><strong>Sunnyvale, CA</strong></span></div></div><div id="news" class="yui-navset"><ul class="yui-nav"><li class="selected" id="newsTop"><a href="#tab1"><em>Top Stories</em></a></li><li id="newsWorld"><a href="#tab2"><em>World</em></a></li><li id="newsEnt"><a href="#tab3"><em>Entertainment</em></a></li><li id="newsSports"><a href="#tab4"><em>Sports</em></a></li></ul><div class="yui-content"><div></div><div></div><div></div><div></div></div></div>',
|
|
active: true
|
|
}));
|
|
//Create the Inbox tab
|
|
YAHOO.example.app.tabView.addTab( new YAHOO.widget.Tab({
|
|
//Inject a span for the icon
|
|
label: '<span></span>Inbox',
|
|
id: 'inboxView',
|
|
content: ''
|
|
|
|
}));
|
|
YAHOO.example.app.tabView.on('activeTabChange', function(ev) {
|
|
//Tabs have changed
|
|
if (ev.newValue.get('id') == 'inboxView') {
|
|
//inbox tab was selected
|
|
if (!YAHOO.example.app.inboxLoaded && !YAHOO.example.app.inboxLoading) {
|
|
YAHOO.log('Fetching the inbox.js file..', 'info', 'tabview.js');
|
|
YAHOO.log('Inbox is not loaded yet, use Get to fetch it', 'info', 'tabview.js');
|
|
YAHOO.log('Adding loading class to tabview', 'info', 'tabview.js');
|
|
YAHOO.example.app.getFeed();
|
|
}
|
|
}
|
|
//Is an editor present?
|
|
if (YAHOO.example.app.editor) {
|
|
if (ev.newValue.get('id') == 'composeView') {
|
|
YAHOO.log('Showing the ediitor', 'info', 'tabview.js');
|
|
YAHOO.example.app.editor.show();
|
|
YAHOO.example.app.editor.set('disabled', false);
|
|
} else {
|
|
YAHOO.log('Hiding the editor', 'info', 'tabview.js');
|
|
YAHOO.example.app.editor.hide();
|
|
YAHOO.example.app.editor.set('disabled', true);
|
|
}
|
|
}
|
|
//Resize to fit the new content
|
|
YAHOO.example.app.layout.resize();
|
|
});
|
|
//Add the tabview to the center unit of the main layout
|
|
var el = YAHOO.example.app.layout.getUnitByPosition('center').get('wrap');
|
|
YAHOO.example.app.tabView.appendTo(el);
|
|
|
|
//resize the TabView
|
|
YAHOO.example.app.resizeTabView();
|
|
//Set the time on the home screen
|
|
YAHOO.example.app.setTime();
|
|
//Setup the interval to update the time
|
|
setInterval(YAHOO.example.app.setTime, 60000);
|
|
|
|
|
|
YAHOO.log('Fetch the news feed', 'info', 'tabview.js');
|
|
YAHOO.util.Get.script('assets/js/news.js');
|
|
|
|
|
|
//When inboxView is available, update the height..
|
|
Event.onAvailable('inboxView', function() {
|
|
var t = YAHOO.example.app.tabView.get('tabs');
|
|
for (var i = 0; i < t.length; i++) {
|
|
if (t[i].get('id') == 'inboxView') {
|
|
var el = t[i].get('contentEl');
|
|
el.id = 'inboxHolder';
|
|
YAHOO.log('Setting the height of the TabViews content parent', 'info', 'tabview.js');
|
|
Dom.setStyle(el, 'height', Dom.getStyle(YAHOO.example.app.tabView._contentParent, 'height'));
|
|
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
})();
|
|
</textarea>
|
|
|
|
<h2 id="news_js">news.js</h2>
|
|
<p>This file makes several calls to Yahoo! Pipes with the <code>Get</code> utility in order to fetch the 4 news feeds for the home screen.</p>
|
|
<textarea name="code" class="JScript">
|
|
(function() {
|
|
var Dom = YAHOO.util.Dom,
|
|
Event = YAHOO.util.Event,
|
|
Sel = YAHOO.util.Selector,
|
|
tt = null,
|
|
pdata = {};
|
|
YAHOO.log('news.js file loaded..', 'info', 'news.js');
|
|
//Callback from the Pipes data call
|
|
YAHOO.example.app.getWeather = function(r) {
|
|
//Sometimes pipes fails..
|
|
if (r && r.value && r.value.items && r.value.items.length) {
|
|
YAHOO.log('Inside weather callback from Pipes data', 'info', 'news.js');
|
|
var data = r.value.items[1].content;
|
|
var img = data[0].content.substring(10);
|
|
img = img.substring(0, (img.length - 3));
|
|
Sel.query('#weather em', '', true).innerHTML = data[2].content; //Tempurature
|
|
Dom.setStyle('weather', 'background-image', 'url( ' + img + ' )');
|
|
var url = data[8].content;
|
|
url = url.substring(url.indexOf('http'));
|
|
url = url.substring(0, url.indexOf('">'));
|
|
YAHOO.log('Creating the Weather tooltip', 'info', 'news.js');
|
|
var tt = new YAHOO.widget.Tooltip('weatherTooltip', {
|
|
context: 'weather',
|
|
text: r.value.items[0].content + '<br><strong>Forecast:</strong><br>' + data[5].content + '<br>' + data[6].content
|
|
});
|
|
|
|
Event.on('weather', 'click', function() {
|
|
window.open(url);
|
|
});
|
|
} else {
|
|
//Attempt to fetch it again
|
|
window.setTimeout(function() {
|
|
YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=cnZFI_rR3BGvnn8h8ivLAg&_render=json&_callback=YAHOO.example.app.getWeather');
|
|
}, 5000);
|
|
}
|
|
};
|
|
YAHOO.log('Get the weather data from Pipes..', 'info', 'news.js');
|
|
YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=cnZFI_rR3BGvnn8h8ivLAg&_render=json&_callback=YAHOO.example.app.getWeather');
|
|
//Generic Filter Method
|
|
var _filter = function(r, type) {
|
|
pdata[type] = [];
|
|
var data = r.value.items,
|
|
str = '';
|
|
pdata[type][0] = data[0];
|
|
for (var i = 1; i < data.length; i++) {
|
|
pdata[type][i] = data[i];
|
|
if (i <= 8) {
|
|
str += '<li><a href="' + data[i].link + '" target="_blank" class="' + type + '_' + i + '">' + data[i].title + '</a></li>';
|
|
}
|
|
}
|
|
str = '<ul>' + str + '</ul>';
|
|
var d = data[0].description.replace('</a>', '<h3><a href="' + data[0].link + '">' + data[0].title + '</a></h3>');
|
|
str = d + str;
|
|
str += '<p><a href="#' + type + '" class="moreNews">Click here for more news...</a></p>';
|
|
return str;
|
|
};
|
|
YAHOO.example.app.getWorldNews = function(r) {
|
|
YAHOO.log('Fetch the World News', 'info', 'news.js');
|
|
var str = _filter(r, 'world');
|
|
YAHOO.example.app.homeTabView.get('tabs')[1].set('content', str);
|
|
};
|
|
YAHOO.example.app.getEntNews = function(r) {
|
|
YAHOO.log('Fetch the Entertainment News', 'info', 'news.js');
|
|
var str = _filter(r, 'ent');
|
|
YAHOO.example.app.homeTabView.get('tabs')[2].set('content', str);
|
|
};
|
|
YAHOO.example.app.getSportsNews = function(r) {
|
|
YAHOO.log('Fetch the Sports News', 'info', 'news.js');
|
|
var str = _filter(r, 'sports');
|
|
YAHOO.example.app.homeTabView.get('tabs')[3].set('content', str);
|
|
};
|
|
YAHOO.example.app.getTopNews = function(r) {
|
|
YAHOO.log('Fetch the Top News', 'info', 'news.js');
|
|
var str = _filter(r, 'top');
|
|
YAHOO.example.app.homeTabView.get('tabs')[0].set('content', str);
|
|
//Now that the Top news is loaded, load the other news in a timeout..
|
|
window.setTimeout(function() {
|
|
YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=VE3fZVjT3BG0lA1gjtzu1g&newsfeed=world&_render=json&_callback=YAHOO.example.app.getWorldNews');
|
|
YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=VE3fZVjT3BG0lA1gjtzu1g&newsfeed=entertainment&_render=json&_callback=YAHOO.example.app.getEntNews');
|
|
YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=VE3fZVjT3BG0lA1gjtzu1g&newsfeed=sports&_render=json&_callback=YAHOO.example.app.getSportsNews');
|
|
}, 0);
|
|
YAHOO.log('Create a dynamic tooltip on the news articles', 'info', 'news.js');
|
|
tt = new YAHOO.widget.Tooltip('newsTip', {
|
|
context: Sel.query('#news .yui-content'),
|
|
text: 'Test',
|
|
width: '300px',
|
|
showDelay: 500,
|
|
hideDelay: 500
|
|
});
|
|
//Listen for the contextMouseOverEvent
|
|
tt.contextMouseOverEvent.subscribe(function(cev, ev) {
|
|
//Get the target of the mouseover event
|
|
var tar = Event.getTarget(ev[1]);
|
|
//It needs to be an A tag
|
|
if (tar && tar.tagName && (tar.tagName.toLowerCase() == 'a')) {
|
|
//Does it have a className
|
|
if (tar.className) {
|
|
//Split the className on the _ (data placed above)
|
|
var tmp = tar.className.split('_');
|
|
//Get the data from the pdata object
|
|
if (tmp.length != 2) {
|
|
return false;
|
|
}
|
|
var d = pdata[tmp[0]][tmp[1]];
|
|
if (d) {
|
|
//It exists, parse it and set the Tooltip's text property with the descrition of the news article
|
|
var data = d.description.replace('</a>', '</a><h3>' + d.title + '</h3>');
|
|
tt.cfg.setProperty('text', data);
|
|
} else {
|
|
//Failed don't show the TT
|
|
return false;
|
|
}
|
|
} else {
|
|
//Failed don't show the TT
|
|
return false;
|
|
}
|
|
} else {
|
|
//Failed don't show the TT
|
|
return false;
|
|
}
|
|
});
|
|
Event.on('news', 'click', function(ev) {
|
|
var tar = Event.getTarget(ev);
|
|
//Did we click on an a inside #news with the className of moreNews
|
|
if (Sel.test(tar, '#news a.moreNews')) {
|
|
YAHOO.log('You clicked on a More News link', 'info', 'news.js');
|
|
Event.stopEvent(ev);
|
|
//Get the news type
|
|
var type = tar.getAttribute('href', 2).split('#')[1];
|
|
//get all of the tabs
|
|
var t = YAHOO.example.app.tabView.get('tabs');
|
|
var tab = null;
|
|
for (var i = 0; i < t.length; i++) {
|
|
if (t[i].get('id') == 'newsView') {
|
|
YAHOO.log('We found an existing newsView tab', 'info', 'news.js');
|
|
//setup a reference and change it to the active tab
|
|
tab = t[i];
|
|
YAHOO.example.app.tabView.set('activeTab', tab);
|
|
}
|
|
}
|
|
//get the data from the pdata array (above)
|
|
var data = pdata[type], news = '';
|
|
//Loop through it and create the news string
|
|
for (var n = 0; n < data.length; n++) {
|
|
news += '<div class="feedData">' + data[n].description.replace('</a>', '<h3><a href="' + data[n].link + '">' + data[n].title + '</a></h3>') + '</div>';
|
|
}
|
|
if (!tab) {
|
|
YAHOO.log('News Tab doesn\'t exist, create it', 'info', 'news.js');
|
|
var nt = document.createElement('div');
|
|
nt.id = 'newsEl';
|
|
YAHOO.example.app.tabView._contentParent.appendChild(nt);
|
|
tab = new YAHOO.widget.Tab({
|
|
label: '<span class="close"></span>News Reader',
|
|
id: 'newsView',
|
|
content: '',
|
|
contentEl: nt,
|
|
active: true
|
|
});
|
|
Dom.setStyle(nt, 'height', Dom.getStyle(YAHOO.example.app.tabView._contentParent, 'height'));
|
|
YAHOO.example.app.layout.on('resize', function() {
|
|
Dom.setStyle(nt, 'height', Dom.getStyle(YAHOO.example.app.tabView._contentParent, 'height'));
|
|
});
|
|
YAHOO.log('Use YUILoader to fetch slider', 'info', 'news.js');
|
|
var loader = new YAHOO.util.YUILoader({
|
|
base: '../../build/',
|
|
require: ['slider'],
|
|
onSuccess: function() {
|
|
//Setup our default article size and font size
|
|
var s = 500, f = 93;
|
|
//Create the slider wrapper
|
|
var d = document.createElement('div');
|
|
d.id = 'newsSlider';
|
|
//Inject the Slider HTML
|
|
d.innerHTML = '<h3>Adjust font and article size</h3><div id="slider-bg" tabindex="-1" title="Adjust font and article size"><div id="slider-thumb"><img src="assets/css/thumb-n.gif"></div></div>';
|
|
//Give the Slider a little UI update when mousing over it..
|
|
Event.on(d, 'mouseover', function() {
|
|
Dom.addClass(this, 'over');
|
|
});
|
|
Event.on(d, 'mouseout', function() {
|
|
Dom.removeClass(this, 'over');
|
|
});
|
|
//Append the wrapper to the TabView's content parent
|
|
YAHOO.example.app.tabView._contentParent.appendChild(d);
|
|
YAHOO.log('Create the slider', 'info', 'news.js');
|
|
var slider = YAHOO.widget.Slider.getHorizSlider('slider-bg', 'slider-thumb', 0, 200);
|
|
slider.subscribe('change', function(o) {
|
|
//On change we will change the width and the font-size of the newsFeed div
|
|
Dom.setStyle(Sel.query('.newsFeeds'), 'font-size', (f + (o / 3)) + '%');
|
|
Dom.setStyle(Sel.query('.newsFeeds'), 'width', (s + (o * 2)) + 'px');
|
|
});
|
|
//Hook into the tabView activeTabChange event to hide the slider when it is not being used.
|
|
YAHOO.example.app.tabView.on('activeTabChange', function(ev) {
|
|
//Tabs have changed
|
|
if (ev.newValue.get('id') == 'newsView') {
|
|
YAHOO.log('Show slider', 'info', 'news.js');
|
|
Dom.setStyle(d, 'display', 'block');
|
|
} else {
|
|
YAHOO.log('Hide Slider', 'info', 'news.js');
|
|
Dom.setStyle(d, 'display', 'none');
|
|
}
|
|
});
|
|
|
|
}
|
|
});
|
|
//Inject the scripts
|
|
loader.insert({}, 'js');
|
|
|
|
|
|
YAHOO.log('Add the close button to the tab', 'info', 'news.js');
|
|
Event.on(tab.get('labelEl').getElementsByTagName('span')[0], 'click', function(ev) {
|
|
Event.stopEvent(ev);
|
|
YAHOO.log('Close the news tab', 'info', 'news.js');
|
|
YAHOO.example.app.tabView.set('activeTab', YAHOO.example.app.tabView.get('tabs')[0]);
|
|
YAHOO.example.app.tabView.removeTab(tab);
|
|
Dom.get('newsSlider').parentNode.removeChild(Dom.get('newsSlider'));
|
|
});
|
|
YAHOO.log('Add the tab to the tabView', 'info', 'news.js');
|
|
YAHOO.example.app.tabView.addTab(tab);
|
|
}
|
|
YAHOO.log('Set the content of the tab to the string news', 'info', 'news.js');
|
|
tab.set('content', '<div class="newsFeeds">' + news + '</div>');
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
YAHOO.log('Create the tabview for the home screen', 'info', 'news.js');
|
|
YAHOO.example.app.homeTabView = new YAHOO.widget.TabView('news');
|
|
window.setTimeout(function() {
|
|
YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=VE3fZVjT3BG0lA1gjtzu1g&newsfeed=topstories&_render=json&_callback=YAHOO.example.app.getTopNews');
|
|
}, 0);
|
|
|
|
})();
|
|
</textarea>
|
|
|
|
<h2 id="inbox_js">inbox.js</h2>
|
|
<p>This file uses <code>YUILoader</code> to fetch the DataTable and SimpleEditor (for the toolbar) modules to display the inbox. It also makes a call to a Yahoo! Pipe to gather the data to be populated by the DataTable.</p>
|
|
<textarea name="code" class="JScript">
|
|
(function() {
|
|
var Dom = YAHOO.util.Dom,
|
|
Event = YAHOO.util.Event,
|
|
layout2 = null,
|
|
dataTable = null,
|
|
emails = {
|
|
account:"jenny@yahoo.com",
|
|
currStorage: 10,
|
|
maxStorage: 200,
|
|
messages: []
|
|
},
|
|
magicNum = 345;
|
|
|
|
|
|
YAHOO.log('inbox.js file is loaded..', 'info', 'inbox.js');
|
|
var prettySize = function(size) {
|
|
var gb = 1024 * 1024 * 1024, mb = 1024 * 1024, mysize;
|
|
if (size > gb) {
|
|
mysize = Math.round(size / gb) + " GB";
|
|
} else if (size > mb) {
|
|
mysize = Math.round(size / mb) + " MB";
|
|
} else if ( size >= 1024 ) {
|
|
mysize = Math.round(size / 1024) + " Kb";
|
|
} else {
|
|
mysize = size + " b";
|
|
}
|
|
return mysize;
|
|
};
|
|
|
|
|
|
var initDataTable = function(h, w) {
|
|
YAHOO.log('Creating the DataTable', 'info', 'inbox.js');
|
|
//Create the Column Definitions
|
|
var myColumnDefs = [
|
|
{key:'', formatter:YAHOO.widget.DataTable.formatCheckbox, width: 10 }, // use the built-in checkbox formatter
|
|
{key:"From", sortable:true, width: 125 },
|
|
{key:"Subject", sortable:true, width: (w - magicNum) },
|
|
{key:"Date",formatter:YAHOO.widget.DataTable.formatDate, sortable:true, width: 50 },
|
|
{key:"Size", sortable: false, width: 35 }
|
|
];
|
|
//Create the datasource
|
|
|
|
var myDataSource = new YAHOO.util.DataSource(emails);
|
|
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
|
myDataSource.responseSchema = {
|
|
resultsList: 'messages',
|
|
fields: ["Date","To","From","Subject",'Size', 'Link', 'Body']
|
|
};
|
|
//Give the DT a custom Height
|
|
var dtH = (h - 27 - YAHOO.example.app.inboxToolbarHeight);
|
|
|
|
//Create the DT, setting scrollable to true and setting the height
|
|
YAHOO.widget.DataTable.MSG_EMPTY = 'This folder contains no messages';
|
|
|
|
dataTable = new YAHOO.widget.DataTable("standard",
|
|
myColumnDefs, myDataSource, { scrollable: true, height: dtH + 'px', width: w + 'px' });
|
|
|
|
|
|
// Subscribe to events for row selection
|
|
dataTable.subscribe("rowMouseoverEvent", dataTable.onEventHighlightRow);
|
|
dataTable.subscribe("rowMouseoutEvent", dataTable.onEventUnhighlightRow);
|
|
dataTable.subscribe("rowClickEvent", dataTable.onEventSelectRow);
|
|
dataTable.subscribe("rowSelectEvent", function() {
|
|
YAHOO.log('A row is selected, lets update the preview pane below the the data from the recordset', 'info', 'inbox.js');
|
|
var data = this.getRecordSet().getRecord(this.getSelectedRows()[0])._oData;
|
|
var unit = YAHOO.widget.LayoutUnit.getLayoutUnitById('center2');
|
|
unit.set('header', 'Subject: ' + data.Subject + '<br>From: ' + data.From + '<br>To: ' + data.To);
|
|
unit.set('body', '<p>' + data.Body + '<p><p><a href="' + data.Link + '" target="_blank">See the full thread here.</a></p>');
|
|
}, dataTable, true);
|
|
|
|
YAHOO.example.app.dt = dataTable;
|
|
YAHOO.example.app.inboxLoaded = true;
|
|
};
|
|
|
|
YAHOO.example.app.reloadData = function(empty) {
|
|
if (empty === false) {
|
|
var d = {
|
|
value: {
|
|
items: []
|
|
}
|
|
};
|
|
YAHOO.example.app.inboxDataReady(d);
|
|
} else {
|
|
YAHOO.log('Getting data from: ' + YAHOO.example.app.feedURL, 'info', 'inbox.js');
|
|
YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=kFM9h0vT3BGxGXVs8ivLAg&_render=json&_callback=YAHOO.example.app.inboxDataReady&feed=' + YAHOO.example.app.feedURL);
|
|
}
|
|
};
|
|
|
|
//Pipes callback
|
|
YAHOO.example.app.inboxDataReady = function(d) {
|
|
YAHOO.log('Data returned from the Yahoo! Pipes callback', 'info', 'inbox.js');
|
|
var items = d.value.items;
|
|
emails.messages = [];
|
|
//Create the JS Array that we will feed to the DT
|
|
for (var i = 0; i < items.length; i++) {
|
|
emails.messages[emails.messages.length] = {
|
|
To: 'YUI User',
|
|
From: items[i]['dc:creator'],
|
|
Subject: items[i]['y:title'],
|
|
Date: new Date(items[i]['y:published'].year, (parseInt(items[i]['y:published'].month, 10) - 1),items[i]['y:published'].day),
|
|
Body: items[i].description,
|
|
Link: items[i].link,
|
|
Size: prettySize((items[i].description.length * 1024))
|
|
};
|
|
}
|
|
setTimeout(function() {
|
|
//init the datatable
|
|
if (!YAHOO.example.app.inboxLoaded) {
|
|
initDataTable(layout2.getSizes().top.h, layout2.getSizes().top.w);
|
|
} else {
|
|
dataTable.getRecordSet().replaceRecords(emails.messages);
|
|
dataTable.render();
|
|
}
|
|
//Setup some sizes
|
|
layout2.getUnitByPosition('top')._setWidth(Dom.get('standard'), layout2.getSizes().top.w);
|
|
layout2.getUnitByPosition('top')._setHeight(Dom.get('standard'), layout2.getSizes().top.h);
|
|
YAHOO.log('Remove the loading class (icon) from the tabview..', 'info', 'inbox.js');
|
|
YAHOO.util.Dom.removeClass(YAHOO.example.app.tabView._tabParent, 'loading');
|
|
YAHOO.example.app.inboxLoading = false;
|
|
}, 1000);
|
|
};
|
|
|
|
YAHOO.log('Using loader to fetch datatable and editor (for the toolbar)', 'info', 'inbox.js');
|
|
var loader = new YAHOO.util.YUILoader({
|
|
base: '../../build/',
|
|
require: ['datatable', 'editor'],
|
|
ignore: ['containercore'],
|
|
onSuccess: function() {
|
|
YAHOO.log('Inject some HTML for the content of this layout.', 'info', 'inbox.js');
|
|
var d = document.createElement('div');
|
|
d.innerHTML = '<div id="top2"><div id="inboxToolbar"></div><div id="standard"></div></div><div id="center2"><div class="yui-layout-bd"><div id="preview"><p><strong>Got your eye on one of those messages up there?</strong></p><p>To view your message down here in this handy Reading pane, just click on it.</p></div></div></div>';
|
|
document.body.appendChild(d);
|
|
YAHOO.log('Creating a second Layout for the inbox and preview pane', 'info', 'inbox.js');
|
|
layout2 = new YAHOO.widget.Layout('inboxHolder', {
|
|
parent: YAHOO.example.app.layout,
|
|
units: [
|
|
{ position: 'top', height: '300px', maxHeight: 700, resize: true, id: 'top2', gutter: '0 0 15 0' },
|
|
{ position: 'center', id: 'center2', gutter: '0 0 1 0', scroll: true }
|
|
]
|
|
});
|
|
//before the resize, update the parent with the proper height
|
|
layout2.on('beforeResize', function() {
|
|
Dom.setStyle('inboxHolder', 'height', Dom.getStyle(YAHOO.example.app.tabView._contentParent, 'height'));
|
|
});
|
|
//On resize, resize the table and set the custom width on the Subject Column
|
|
layout2.on('resize', function() {
|
|
if (dataTable) {
|
|
this.getUnitByPosition('top')._setWidth(Dom.get('standard'), this.getSizes().top.w);
|
|
this.getUnitByPosition('top')._setWidth(Dom.get('yui-dt0-table'), this.getSizes().top.w);
|
|
dataTable.set('height', (this.getSizes().top.h - 27 - YAHOO.example.app.inboxToolbarHeight) + 'px');
|
|
dataTable.set('width', (this.getSizes().top.w) + 'px');
|
|
dataTable.setColumnWidth(dataTable.getColumn('Subject'), (this.getSizes().top.w - magicNum));
|
|
dataTable._syncColWidths();
|
|
}
|
|
}, layout2, true);
|
|
layout2.on('render', function() {
|
|
YAHOO.log('On render create the inbox Toolbar', 'info', 'inbox.js');
|
|
YAHOO.example.app.inboxToolbar = new YAHOO.widget.Toolbar('inboxToolbar', {
|
|
buttons: [
|
|
{ id: 'tb_delete', type: 'push', label: 'Delete', value: 'delete'},
|
|
{ type: 'separator' },
|
|
{ id: 'tb_reply', type: 'push', label: 'Reply', value: 'reply' },
|
|
{ id: 'tb_forward', type: 'push', label: 'Forward', value: 'forward' },
|
|
{ type: 'separator' },
|
|
{ id: 'tb_spam', type: 'push', label: 'Spam', value: 'spam' },
|
|
{ type: 'separator' },
|
|
{ id: 'tb_move', type: 'push', label: 'Move', value: 'move' },
|
|
{ id: 'tb_print', type: 'push', label: 'Print', value: 'print' }
|
|
]
|
|
});
|
|
//Show an alert message with the button they clicked
|
|
YAHOO.example.app.inboxToolbar.on('buttonClick', function(ev) {
|
|
var data = dataTable.getRecordSet().getRecord(dataTable.getSelectedRows()[0])._oData;
|
|
YAHOO.example.app.alert(ev.button.label + ': ' + data.Subject);
|
|
});
|
|
//Grab it's height for later use
|
|
YAHOO.example.app.inboxToolbarHeight = Dom.get('inboxToolbar').clientHeight + 3;
|
|
|
|
window.setTimeout(function() {
|
|
YAHOO.log('Using get to call the Yahoo! Pipe for the inbox feed', 'info', 'inbox.js');
|
|
YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=kFM9h0vT3BGxGXVs8ivLAg&_render=json&_callback=YAHOO.example.app.inboxDataReady&feed=' + YAHOO.example.app.feedURL);
|
|
}, 0);
|
|
}, layout2, true);
|
|
layout2.render();
|
|
YAHOO.example.app.layout2 = layout2;
|
|
}
|
|
});
|
|
//Have loader insert only the JS files.
|
|
loader.insert({}, 'js');
|
|
})();
|
|
</textarea>
|
|
|
|
<h2 id="buttons_js">buttons.js</h2>
|
|
<p>This file handles the 3 main buttons on the screen: Check Mail, New Message and Search Web. It also handles the click for the New Message button which calls <code>Get</code> to load the <code>editor.js</code> file.</p>
|
|
<textarea name="code" class="JScript">
|
|
(function() {
|
|
var Dom = YAHOO.util.Dom,
|
|
Event = YAHOO.util.Event;
|
|
|
|
YAHOO.log('buttons.js loaded', 'info', 'button.js');
|
|
//Create this loader instance and ask for the Button module
|
|
var loader = new YAHOO.util.YUILoader({
|
|
base: '../../build/',
|
|
require: ['button'],
|
|
ignore: ['containercore'],
|
|
onSuccess: function() {
|
|
YAHOO.log('Create the search button', 'info', 'button.js');
|
|
var searchButton = new YAHOO.widget.Button('search');
|
|
searchButton.on('click', function() {
|
|
var q = Dom.get('query').value;
|
|
if (q !== 'Search the Web..') {
|
|
window.open('http:/'+'/search.yahoo.com/search?p=' + q);
|
|
}
|
|
});
|
|
YAHOO.log('Create the Check Mail button', 'info', 'button.js');
|
|
var b1 = new YAHOO.widget.Button({
|
|
label: 'Check Mail',
|
|
id: 'checkButton',
|
|
container: Dom.get('check_buttons')
|
|
});
|
|
//inject a span for the icon
|
|
var icon = document.createElement('span');
|
|
icon.className = 'icon';
|
|
b1.appendChild(icon);
|
|
b1.on('click', function() {
|
|
var t = YAHOO.example.app.tabView.get('tabs');
|
|
for (var i = 0; i < t.length; i++) {
|
|
if (t[i].get('id') == 'inboxView') {
|
|
YAHOO.example.app.tabView.set('activeTab', t[i]);
|
|
}
|
|
}
|
|
});
|
|
YAHOO.log('Create the New Message button', 'info', 'button.js');
|
|
var b2 = new YAHOO.widget.Button({
|
|
label: 'New',
|
|
id: 'newButton',
|
|
title: 'New Message',
|
|
container: Dom.get('check_buttons')
|
|
});
|
|
//inject a span for the icon
|
|
var icon2 = document.createElement('span');
|
|
icon2.className = 'icon';
|
|
b2.appendChild(icon2);
|
|
//Setup the click listener for the new message button
|
|
b2.on('click', function() {
|
|
if (!YAHOO.example.app.editor) {
|
|
YAHOO.log('No editor present, add the tab', 'info', 'button.js');
|
|
var cTab = new YAHOO.widget.Tab({
|
|
label: '<span class="close"></span><span class="icon"></span>New Message',
|
|
id: 'composeView',
|
|
active: true,
|
|
contentEl: Dom.get('composeViewEl')
|
|
});
|
|
//Add the close button to the tab
|
|
Event.on(cTab.get('labelEl').getElementsByTagName('span')[0], 'click', function(ev) {
|
|
YAHOO.log('Closing the Editor tab and destroying the Editor instance', 'info', 'button.js');
|
|
Event.stopEvent(ev);
|
|
YAHOO.example.app.tabView.set('activeTab', YAHOO.example.app.tabView.get('tabs')[0]);
|
|
var cel = Dom.get('composeViewEl');
|
|
YAHOO.example.app.destroyEditor();
|
|
YAHOO.example.app.tabView.removeTab(cTab);
|
|
document.body.appendChild(cel);
|
|
|
|
});
|
|
YAHOO.example.app.tabView.addTab(cTab);
|
|
YAHOO.log('Load the Editor', 'info', 'button.js');
|
|
window.setTimeout(function() {
|
|
var transactionObj = YAHOO.util.Get.script('assets/js/editor.js', { autopurge: true });
|
|
}, 0);
|
|
} else {
|
|
YAHOO.log('If there is an editor, then activate the proper tab', 'info', 'button.js');
|
|
var t = YAHOO.example.app.tabView.get('tabs');
|
|
for (var i = 0; i < t.length; i++) {
|
|
if (t[i].get('id') == 'composeView') {
|
|
YAHOO.example.app.tabView.set('activeTab', t[i]);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
YAHOO.log('Add some functionality to the search box', 'info', 'button.js');
|
|
Event.on('query', 'click', function() {
|
|
this.value = '';
|
|
});
|
|
Event.on('query', 'blur', function() {
|
|
if (this.value === '') {
|
|
this.value = 'Search the Web..';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
//Call insert, only choosing the JS files, so the skin doesn't over write my custom css
|
|
loader.insert({}, 'js');
|
|
})();
|
|
</textarea>
|
|
|
|
<h2 id="editor_js">editor.js</h2>
|
|
<p>This file loads an Editor instance for use in the New Message tab.</p>
|
|
<textarea name="code" class="JScript">
|
|
(function() {
|
|
YAHOO.log('editor.js file loaded', 'info', 'editor.js');
|
|
YAHOO.log('Inject some HTML for the Compose Window', 'info', 'editor.js');
|
|
YAHOO.util.Dom.get('composeViewEl').innerHTML = '<div id="composeBarWrap"><div id="composeBar"></div><div id="composeAddr"><span><label>To:</label><input type="text" id="composeTo"></span><span><label>Subject:</label><input type="text"></span></div></div><text'+'area id="compose"></text'+'area><div id="autoTo"></div>';
|
|
//Use loader to load the Editor
|
|
var loader = new YAHOO.util.YUILoader({
|
|
base: '../../build/',
|
|
require: ['autocomplete', 'editor'],
|
|
ignore: ['containercore'],
|
|
onSuccess: function() {
|
|
YAHOO.log('Create a Toolbar above the To/From Fields', 'info', 'editor.js');
|
|
YAHOO.example.app.composeToolbar = new YAHOO.widget.Toolbar('composeBar', {
|
|
buttons: [
|
|
{ id: 'tb_delete', type: 'push', label: 'Send', value: 'send'},
|
|
{ id: 'tb_reply', type: 'push', label: 'Attach', value: 'attach' },
|
|
{ id: 'tb_forward', type: 'push', label: 'Save Draft', value: 'savedraft' },
|
|
{ id: 'tb_forward', type: 'push', label: 'Spelling', value: 'spelling' },
|
|
{ id: 'tb_forward', type: 'push', label: 'Cancel', value: 'cancel' }
|
|
]
|
|
});
|
|
//Show an alert message with the button they clicked
|
|
YAHOO.example.app.composeToolbar.on('buttonClick', function(ev) {
|
|
YAHOO.example.app.alert('You clicked: ' + ev.button.label);
|
|
});
|
|
|
|
//Custom editor resize method
|
|
var editorResize = function() {
|
|
var h = YAHOO.util.Dom.get('composeViewEl').parentNode.clientHeight - (YAHOO.util.Dom.get('composeBarWrap').clientHeight);
|
|
var th = YAHOO.example.app.editor.toolbar.get('element').clientHeight;
|
|
var newH = (h - th);
|
|
YAHOO.example.app.editor.set('height', newH + 'px');
|
|
YAHOO.example.app.editor.set('width', YAHOO.example.app.layout.getSizes().center.w + 'px');
|
|
};
|
|
YAHOO.log('Create the Editor', 'info', 'editor.js');
|
|
var editor = new YAHOO.widget.Editor('compose', {
|
|
width: (YAHOO.example.app.layout.getUnitByPosition('center').getSizes().body.w - 2) + 'px'
|
|
});
|
|
editor.on('afterRender', function() {
|
|
YAHOO.log('The editor is loaded, resize the editor to fit the layout', 'info', 'editor.js');
|
|
var h = YAHOO.util.Dom.get('composeViewEl').parentNode.clientHeight - (YAHOO.util.Dom.get('composeBarWrap').clientHeight);
|
|
var th = this.toolbar.get('element').clientHeight;
|
|
var newH = (h - th);
|
|
this.set('height', newH + 'px');
|
|
}, editor, true);
|
|
//Turn off the titlebar
|
|
editor._defaultToolbar.titlebar = false;
|
|
YAHOO.log('Render the editor', 'info', 'editor.js');
|
|
editor.render();
|
|
YAHOO.example.app.editor = editor;
|
|
|
|
//On resize and start resize handlers
|
|
YAHOO.example.app.layout.on('resize', editorResize);
|
|
//Method to destroy the editor.
|
|
YAHOO.example.app.destroyEditor = function() {
|
|
YAHOO.log('Destroying the Editor instance and HTML', 'info', 'editor.js');
|
|
YAHOO.example.app.layout.unsubscribe('resize', editorResize);
|
|
YAHOO.example.app.editor = null;
|
|
};
|
|
|
|
YAHOO.log('Setup the AutoComplete for the To Field', 'info', 'editor.js');
|
|
//Build some fake data..
|
|
var team = [
|
|
'Dav',
|
|
'Thomas',
|
|
'Eric',
|
|
'Matt',
|
|
'Adam',
|
|
'Lucas',
|
|
'Nate',
|
|
'Jenny',
|
|
'Satyen',
|
|
'Todd',
|
|
'George'
|
|
], data = [];
|
|
|
|
for (var i = 0; i < team.length; i++) {
|
|
for (var s = 0; s < 5; s++) {
|
|
data[data.length] = team[i] + ' (' + s + ') [' + team[i].toLowerCase() + '@yui.com]';
|
|
}
|
|
}
|
|
// Instantiate JS Array DataSource
|
|
var oACDS2 = new YAHOO.widget.DS_JSArray(data);
|
|
YAHOO.log('Instantiate AutoComplete', 'info', 'editor.js');
|
|
var oAutoComp = new YAHOO.widget.AutoComplete('composeTo','autoTo', oACDS2);
|
|
oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
|
|
oAutoComp.typeAhead = true;
|
|
oAutoComp.useIFrame = true;
|
|
}
|
|
});
|
|
//Have loader only insert the js files..
|
|
loader.insert({}, 'js');
|
|
})();
|
|
</textarea>
|
|
|
|
<h2 id="calendar_js">calendar.js</h2>
|
|
<p>This file loads a Calendar instance and sets up the animation for showing and hiding via the calendar box in the lower left corner.</p>
|
|
<textarea name="code" class="JScript">
|
|
(function() {
|
|
var Dom = YAHOO.util.Dom,
|
|
Event = YAHOO.util.Event;
|
|
|
|
YAHOO.log('calendar.js file loaded..', 'info', 'calendar.js');
|
|
//Create this loader instance and ask for the Calendar module
|
|
var loader = new YAHOO.util.YUILoader({
|
|
base: '../../build/',
|
|
require: ['calendar'],
|
|
onSuccess: function() {
|
|
//Set a flag to show if the calendar is open or not
|
|
YAHOO.example.app.calOpen = false;
|
|
YAHOO.log('Create the new calendar', 'info', 'calendar.js');
|
|
YAHOO.example.app.calendar = new YAHOO.widget.Calendar('cal');
|
|
YAHOO.example.app.calendar.selectEvent.subscribe(function(ev, args) {
|
|
var d = args[0][0];
|
|
YAHOO.example.app.alert('You selected this date: ' + d[1] + '/' + d[2] + '/' + d[0]);
|
|
});
|
|
|
|
YAHOO.example.app.calendar.render();
|
|
|
|
//Method to toggle the animation of the calendar on and off
|
|
YAHOO.example.app.toggleCal = function() {
|
|
YAHOO.log('Toggle the calendar popup window', 'info', 'calendar.js');
|
|
//set the initial height to the offsetHeight of the calendar element
|
|
var attr = {
|
|
height: {
|
|
to: Dom.get('cal').offsetHeight
|
|
}
|
|
};
|
|
//If it's open, set the height to 0
|
|
if (YAHOO.example.app.calOpen) {
|
|
attr.height.to = 0;
|
|
}
|
|
//setup the animation instance
|
|
var anim = new YAHOO.util.Anim('calContainer', attr);
|
|
anim.animate();
|
|
//Toggle the flag
|
|
YAHOO.example.app.calOpen = !YAHOO.example.app.calOpen;
|
|
};
|
|
//Handle the click event on the cal box at the bottom
|
|
Event.on('calBox', 'click', function(ev) {
|
|
Event.stopEvent(ev);
|
|
YAHOO.example.app.toggleCal();
|
|
});
|
|
YAHOO.log('Hijack the calendar link and make it toggle the calendar', 'info', 'calendar.js');
|
|
var c = YAHOO.util.Selector.query('#folder_list li.calendar a')[0];
|
|
if (c) {
|
|
Event.on(c, 'click', function(ev) {
|
|
Event.stopEvent(ev);
|
|
YAHOO.example.app.toggleCal();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
//Call insert, only choosing the JS files, so the skin doesn't over write my custom css
|
|
loader.insert({}, 'js');
|
|
})();
|
|
</textarea>
|
|
|
|
<h2 id="logger_js">logger.js</h2>
|
|
<p>This file loads a Logger instance and places it in the right unit.</p>
|
|
<textarea name="code" class="JScript">
|
|
(function() {
|
|
var Dom = YAHOO.util.Dom,
|
|
Event = YAHOO.util.Event;
|
|
|
|
//Create this loader instance and ask for the Button module
|
|
var loader = new YAHOO.util.YUILoader({
|
|
base: '../../build/',
|
|
require: ['logger'],
|
|
onSuccess: function() {
|
|
var r = YAHOO.example.app.layout.getUnitByPosition('right'),
|
|
w = r.getSizes().body.w,
|
|
h = r.getSizes().body.h;
|
|
|
|
var logger = new YAHOO.widget.LogReader(r.body, {
|
|
logReaderEnabled: true,
|
|
draggable: false,
|
|
newestOnTop: true,
|
|
height: h + 'px',
|
|
width: w + 'px'
|
|
});
|
|
|
|
|
|
r.on('collapse', function() {
|
|
logger.pause();
|
|
});
|
|
r.on('expand', function() {
|
|
logger.resume();
|
|
});
|
|
|
|
YAHOO.example.app.layout.on('resize', function() {
|
|
var r = YAHOO.example.app.layout.getUnitByPosition('right'),
|
|
w = r.getSizes().body.w,
|
|
h = r.getSizes().body.h;
|
|
Dom.setStyle(YAHOO.util.Selector.query('div.yui-log-bd', r.body), 'height', h + 'px');
|
|
});
|
|
}
|
|
});
|
|
//Call insert, only choosing the JS files, so the skin doesn't over write my custom css
|
|
loader.insert({}, 'js');
|
|
})();
|
|
</textarea>
|
|
|
|
|
|
<h2>Configuration for This Example</h2>
|
|
|
|
<p>You can load the necessary JavaScript and CSS for this example from Yahoo's servers. <a href="http://developer.yahoo.com/yui/articles/hosting/?yuiloader&MIN#configure">Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured</a>.</p>
|
|
|
|
</div>
|
|
<div class="yui-u">
|
|
|
|
|
|
<div id="examples">
|
|
<h3 class='firstContent'>Layout Manager Examples:</h3>
|
|
|
|
<div id="exampleToc">
|
|
<ul>
|
|
<li><a href='../layout/page_layout.html'>Full Page Layout</a></li><li><a href='../layout/panel_layout.html'>Layout inside a resizable Panel</a></li><li><a href='../layout/grids_layout.html'>Using a Layout with Grids CSS</a></li><li><a href='../layout/nested_layout.html'>Nesting a layout</a></li><li><a href='../layout/menu_layout.html'>Layout with Menu Controls</a></li><li><a href='../layout/calrte_layout.html'>Simple Application</a></li><li class='selected'><a href='../layout/adv_layout.html'>Complex Application</a></li><li><a href='../layout/skinning_layout.html'>Skinning a Layout</a></li> </ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="module">
|
|
<h3>More Layout Manager Resources:</h3>
|
|
<ul>
|
|
<li><a href="http://developer.yahoo.com/yui/layout/">User's Guide</a> (external)</li>
|
|
<li><a href="../../docs/module_layout.html">API Documentation</a></li>
|
|
|
|
|
|
<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/layout.pdf">Cheat Sheet PDF</a> (external)</li></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="yui-b" id="tocWrapper">
|
|
<!-- TABLE OF CONTENTS -->
|
|
<div id="toc">
|
|
|
|
<ul>
|
|
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="YUILibrary.com hosts the YUI community forums" href="http://yuilibrary.com/forum/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library source can be checked out from GitHub" href="http://github.com/yui/">YUI on GitHub</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag & Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag & Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="selected "><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI ProgressBar Control - Functional Examples" href="../../examples/progressbar/index.html">ProgressBar</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI Storage Utility - Functional Examples" href="../../examples/storage/index.html">Storage</a></li><li class="item"><a title="The YUI SWF Utility - Functional Examples" href="../../examples/swf/index.html">SWF</a></li><li class="item"><a title="The YUI SWFStore Utility - Functional Examples" href="../../examples/swfstore/index.html">SWFStore</a></li><li class="item"><a title="The YUI Stylesheet Utility - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
|
|
</div>
|
|
</div>
|
|
</div><!--closes bd-->
|
|
|
|
<div id="ft">
|
|
<p class="first">Copyright © 2010 Yahoo! Inc. All rights reserved.</p>
|
|
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
|
|
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
|
|
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
|
|
<a href="http://careers.yahoo.com/">Job Openings</a></p>
|
|
</div>
|
|
</div>
|
|
<script src="../../assets/syntax.js"></script>
|
|
<script src="../../assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
<script src='../../assets/YUIexamples.js'></script>
|
|
|
|
|
|
</body>
|
|
</html>
|