Skip to content
Browse files

Fixed hovermenu for firefox. Added demo for it. Added homepage.

  • Loading branch information...
1 parent d124963 commit b052eb84f0ac9029d1cd76b38ac82356d5fad1d0 @jacwright committed Jul 21, 2010
Showing with 192 additions and 6 deletions.
  1. +2 −3 components/HoverMenu.js
  2. +95 −0 demos/hover-menu.html
  3. +83 −0 index.html
  4. +12 −3 simpli5.js
View
5 components/HoverMenu.js
@@ -36,11 +36,10 @@ var HoverMenu = new Component({
extend: Component,
template: new Template('<hover-menu></hover-menu>'),
properties: ['click-only', 'auto-close', 'menu-delay', 'open-below'],
- events: ['select'],
register: 'hover-menu',
constructor: function() {
- this.submenu = this.find(simpli5.selector('menu'));
+ this.submenu = this.find(simpli5.selector('menu')) || this.append(new HoverMenuSubmenu());
this._openBelow = false;
this.submenu.hide();
this.submenu.addClass('hover-menu-root');
@@ -228,7 +227,7 @@ var HoverMenu = new Component({
* The onselect attribute will add a listener to any select events dispatched by the submenu's children.
*/
var HoverMenuSubmenu = new Component({
- extend: Component,
+ extend: window.HTMLMenuElement || Component,
template: new Template('<menu></menu>'),
register: 'hover-menu menu',
events: ['select'],
View
95 demos/hover-menu.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
+<title>Glass Pane</title>
+<link rel="stylesheet" href="../css/HoverMenu.css" />
+<script type="text/javascript" src="../simpli5.js"></script>
+<script type="text/javascript" src="../components/HoverMenu.js"></script>
+<style type="text/css">
+ html, body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ }
+ body {
+ font: 12px sans-serif;
+ }
+ div {
+ padding: 4px 20px;
+ }
+ hover-menu {
+ display: inline-block;
+ }
+</style>
+</head>
+<body>
+
+ <div>
+ onSelect Event:
+ <hover-menu>
+ <menu onselect="alert('selected \'' + event.target.text() + '\'')">
+ <menu-item>Item One</menu-item>
+ <menu-item>Item Two <menu>
+ <menu-item>Item Two-One</menu-item>
+ <menu-item>Item Two-Two</menu-item>
+ <menu-item>Item Two-Three</menu-item>
+ </menu></menu-item>
+ <menu-separator></menu-separator>
+ <menu-item>Item Three</menu-item>
+ </menu>
+ </hover-menu>
+ </div>
+
+ <div>
+ Click Only:
+ <hover-menu click-only="true">
+ <menu>
+ <menu-item>Item One</menu-item>
+ <menu-item>Item Two <menu>
+ <menu-item>Item Two-One</menu-item>
+ <menu-item>Item Two-Two</menu-item>
+ <menu-item>Item Two-Three</menu-item>
+ </menu></menu-item>
+ <menu-separator></menu-separator>
+ <menu-item>Item Three</menu-item>
+ </menu>
+ </hover-menu>
+ </div>
+
+ <div>
+ No Auto-close:
+ <hover-menu auto-close="false">
+ <menu>
+ <menu-item>Item One</menu-item>
+ <menu-item>Item Two <menu>
+ <menu-item>Item Two-One</menu-item>
+ <menu-item>Item Two-Two</menu-item>
+ <menu-item>Item Two-Three</menu-item>
+ </menu></menu-item>
+ <menu-separator></menu-separator>
+ <menu-item>Item Three</menu-item>
+ </menu>
+ </hover-menu>
+ </div>
+
+ <div style="position: absolute; bottom: 10px; right: 10px">
+ Menu Position
+ <hover-menu auto-close="false">
+ <menu>
+ <menu-item>Item One</menu-item>
+ <menu-item>Item Two <menu>
+ <menu-item>Item Two-One</menu-item>
+ <menu-item>Item Two-Two</menu-item>
+ <menu-item>Item Two-Three</menu-item>
+ <menu-item>Item Two-Four</menu-item>
+ <menu-item>Item Two-Five</menu-item>
+ </menu></menu-item>
+ <menu-separator></menu-separator>
+ <menu-item>Item Three</menu-item>
+ </menu>
+ </hover-menu>
+ </div>
+
+</body>
+</html>
View
83 index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
+ <title>jacwright/simpli5 @ GitHub</title>
+
+ <style type="text/css">
+ body {
+ margin-top: 1.0em;
+ background-color: #fff;
+ font-family: "Helvetica,Arial,FreeSans";
+ color: #444;
+ }
+ #container {
+ margin: 0 auto;
+ width: 700px;
+ }
+ h1 { font-size: 3.8em; color: #444; margin-bottom: 3px; }
+ h1 .small { font-size: 0.4em; }
+ h1 a { text-decoration: none }
+ h2 { font-size: 1.5em; color: #444; }
+ h3 { text-align: center; color: #444; }
+ a { color: #0066ff; }
+ .description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
+ .download { float: right; }
+ pre { background: #000; color: #fff; padding: 15px;}
+ hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
+ .footer { text-align:center; padding-top:30px; font-style: italic; }
+ </style>
+
+</head>
+
+<body>
+ <a href="http://github.com/jacwright/simpli5"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+
+ <div id="container">
+
+ <div class="download">
+ <a href="http://github.com/jacwright/simpli5/zipball/master">
+ <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
+ <a href="http://github.com/jacwright/simpli5/tarball/master">
+ <img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
+ </div>
+
+ <h1><a href="http://github.com/jacwright/simpli5">simpli5</a>
+ <span class="small">by <a href="http://github.com/jacwright">jacwright</a></span></h1>
+
+ <div class="description">
+ A simplified HTML5 Javascript library
+ </div>
+
+ <h2>Authors</h2>
+<p>Jacob Wright (jacwright@gmail.com)
+<br/>
+<br/> </p>
+<h2>Contact</h2>
+<p>Jacob Wright (jacwright@gmail.com)
+<br/> </p>
+
+
+ <h2>Download</h2>
+ <p>
+ You can download this project in either
+ <a href="http://github.com/jacwright/simpli5/zipball/master">zip</a> or
+ <a href="http://github.com/jacwright/simpli5/tarball/master">tar</a> formats.
+ </p>
+ <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
+ by running:
+ <pre>$ git clone git://github.com/jacwright/simpli5</pre>
+ </p>
+
+ <div class="footer">
+ get the source code on GitHub : <a href="http://github.com/jacwright/simpli5">jacwright/simpli5</a>
+ </div>
+
+ </div>
+
+
+</body>
+</html>
View
15 simpli5.js
@@ -500,7 +500,7 @@ var EventDispatcher = new Class({
}
},
hasEventListener: function(type) {
- return (this.__events && type in this.__events && this.__events[type].length);
+ return (this.__events != null && type in this.__events && this.__events[type].length > 0);
},
on: function(type, listener) {
var types = type.split(/\s*,\s*/);
@@ -746,8 +746,8 @@ extend(Element.prototype, {
matches: (Element.prototype.matchesSelector || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || function(selector) {
return (document.find(selector).indexOf(this) != -1);
}),
- getChildren: function(selector) {
- var children = new ElementArray(this.children);
+ getChildren: function(selector) {try {
+ var children = new ElementArray(this.children);} catch(e) {console.log(this, this.constructor, this.__proto__);}
if (selector) return children.filterBy(selector);
return children;
},
@@ -1511,6 +1511,8 @@ var Template = new Class({
set: function (html) {
delete this.apply; // delete cached version if exists
delete this.createBound; // delete cached version if exists
+ delete this.compiled;
+ delete this.compiledBound;
var lines = [], compile;
for (var i = 0, l = arguments.length; i < l; i++) {
var param = arguments[i];
@@ -1543,6 +1545,7 @@ var Template = new Class({
},
compile: function() {
+ if (this.compiled) this;
try {
var func = "(function(data) { return '" +
this.html.replace(this.slashesExp, '\\\\')
@@ -1551,6 +1554,7 @@ var Template = new Class({
.replace(this.placeholdersExp, this.compileReplace.boundTo(this)) +
"'; })";
this.apply = eval(func);
+ this.compiled = true;
} catch(e) {
throw 'Error creating template "' + e + '" for template:\n' + this.html;
}
@@ -1678,6 +1682,8 @@ var Template = new Class({
},
compileBound: function() {
+ if (this.compiledBound) return this;
+
if (!this.html.match(this.placeholdersExp)) {
this.createBound = this.createMolded;
return;
@@ -1788,6 +1794,9 @@ var Template = new Class({
"})";
this.createBound = eval(func);
+ this.compiledBound = true;
+
+ return this;
}
});
var Component, Configuration;

0 comments on commit b052eb8

Please sign in to comment.
Something went wrong with that request. Please try again.