Skip to content

Instantly share code, notes, and snippets.

@ericf
Created August 2, 2010 18:52
Show Gist options
  • Select an option

  • Save ericf/505110 to your computer and use it in GitHub Desktop.

Select an option

Save ericf/505110 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<head>
<body>
<script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<script>
// page class
YUI.add('Page', function(Y) {
Y.namespace("Project").Page = Y.Base.create('myPage', Y.Base, [Y.BaseComponentMgr], {
initializer: function() {
},
loadPageContent: function() {
this.useComponent('PageContentInfo', function(PageContentInfo){
PageContentInfo.loadPage('info');
});
},
_initPageContentInfo : function () {
return (new Y.PageContentInfo({
}));
}
}, {
COMPONENTS : {
PageContentInfo : {
requires : ['PageContentInfo'],
initializer : '_initPageContentInfo'
}
}
});
}, '0.0.1', { requires: ['node','io', 'overlay', 'Navi', 'base', 'gallery-base-componentmgr'], optional: ['PageContentInfo'] });
// navi class
YUI.add('Navi', function(Y) {
Y.namespace("Project").Navi = {
marker : null,
m1_op : null,
m2_op : null,
load: function() {
Y.on("mouseover", Y.bind(this.hover, this), "#navi_top #links a");
Y.on("mouseover", Y.bind(this.hover, this), "#navi_bottom #links a");
Y.on("mouseout", Y.bind(this.drop, this), "#navi_top #links a");
Y.on("mouseout", Y.bind(this.drop, this), "#navi_bottom #links a");
Y.on("click", Y.bind(this.click, this), "#navi_top #links a");
Y.on("click", Y.bind(this.click, this), "#navi_bottom #links a");
this.moveMarker();
},
hover: function(e) {
if (e.currentTarget.ancestor("#navi_top")) {
this.moveMarker('#arrow_top', (e.currentTarget.get('offsetLeft') + e.currentTarget.get('offsetWidth')/2), false);
}
if (e.currentTarget.ancestor("#navi_bottom")) {
this.moveMarker('#arrow_bottom', (e.currentTarget.get('offsetLeft') + e.currentTarget.get('offsetWidth')/2), false);
}
},
drop: function(e) {
if (e && e != null) {
if (e.currentTarget.ancestor("#navi_top"))
this.marker.setStyle('left', this.m1_op);
if (e.currentTarget.ancestor("#navi_bottom"))
this.marker.setStyle('left', this.m2_op);
}
},
click: function(e) {
if (e.currentTarget.get('id') && e.currentTarget.get('id') != '') {
Y.Project.PageObject.loadPageContent(); // <-- here i call it
}
if (e.currentTarget.ancestor("#navi_top")) {
this.moveMarker('#arrow_top', (e.currentTarget.get('offsetLeft') + e.currentTarget.get('offsetWidth')/2), true);
}
if (e.currentTarget.ancestor("#navi_bottom")) {
this.moveMarker('#arrow_bottom', (e.currentTarget.get('offsetLeft') + e.currentTarget.get('offsetWidth')/2), true);
}
},
moveMarker: function(marker, new_pos, save_old_pos) {
if (marker && marker != '' && new_pos) {
this.marker = Y.one(marker);
if (save_old_pos) {
if (marker == '#arrow_top')
this.m1_op = new_pos+'px';
if (marker == '#arrow_bottom')
this.m2_op = new_pos+'px';
} else if(this.m_op == null) {
if (marker == '#arrow_top')
this.m1_op = this.m1_op = this.marker.getStyle('left');
if (marker == '#arrow_bottom')
this.m2_op = this.m2_op = this.marker.getStyle('left');
}
this.marker.setStyle('left', new_pos);
}
}
};
}, '0.0.1', { requires: ['node', 'Page'] });
YUI({
combine : false,
filter : 'RAW',
gallery : 'gallery-2010.07.28-20-07'
}).use('Page', function(Y){
Y.Project.PageObject = new Y.Project.Page();
Y.Project.Navi.load();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment