Skip to content
Browse files

latest

  • Loading branch information...
1 parent 2e49dd5 commit 290a593767b82f19a6bbf78f957b5828cd89fb8d @adamsilver committed Apr 9, 2012
Showing with 302 additions and 25 deletions.
  1. +18 −15 catalogue.html
  2. +2 −2 css/desktop.css
  3. +19 −2 css/global.css
  4. +33 −1 css/mobile.css
  5. +147 −0 js/jessie/jessie.js
  6. +72 −5 js/mould/mould.Navigation.js
  7. +11 −0 js/mould/pages/mould.pages.catalogue.js
View
33 catalogue.html
@@ -7,9 +7,10 @@
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Adam Silver">
- <title>Mould - Catalogue</title>
+ <title>Mould - Home</title>
<link rel="stylesheet" type="text/css" href="css/global.css" media="all">
- <link rel='stylesheet' type="text/css" href='css/mobile.css' media='screen and (max-width: 320px)' />
+ <link rel='stylesheet' type="text/css" href='css/desktop.css' media='screen and (min-width: 960px)' >
+ <link rel='stylesheet' type="text/css" href='css/mobile.css' media='screen and (max-width: 320px)' >
<link rel="stylesheet" type="text/css" href="css/handheld.css" media="handheld">
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">
</head>
@@ -18,7 +19,7 @@
<div id="header">
<div id="headerInner">
<div id="logo">
- <img src="../img/logo.gif" alt="T-Mobile" />
+ <img src="../img/logo.gif" alt="T-Mobile" >
</div>
</div>
</div>
@@ -27,32 +28,34 @@
Icons go here
</div>
</div>
- <div id="search">
+ <div id="searchForm">
<form action="" method="get">
- Form here
+ <div class="field">
+ <input type="text" name="search" id="searchTerms" >
+ </div>
+ <div class="actions">
+ <input type="submit" name="searchSubmit" value="Search" >
+ </div>
</form>
</div>
<div id="main">
- <div id="menu">
+ <div id="navigation">
<ul>
- <li><a href="#">Menu item 1</a></li>
- <li><a href="#">Menu item 2</a></li>
- <li><a href="#">Menu item 3</a></li>
+ <li><a href="#">Item 1</a></li>
+ <li><a href="#">Item 2</a></li>
+ <li><a href="#">Item 3</a></li>
</ul>
</div>
- <div id="primary">
- <div id="appList">
-
- </div>
- </div>
</div>
<div id="footer">
<p>Copyright T-Mobile 2012</p>
</div>
</div>
+ <script type="text/javascript" src="js/jessie/jessie.js"></script>
<script type="text/javascript" src="js/mould/mould.js"></script>
<script type="text/javascript" src="js/mould/mould.Ribbon.js"></script>
+ <script type="text/javascript" src="js/mould/mould.Navigation.js"></script>
<script type="text/javascript" src="js/mould/pages/mould.pages.js"></script>
- <script type="text/javascript" src="js/mould/pages/mould.pages.home.js"></script>
+ <script type="text/javascript" src="js/mould/pages/mould.pages.catalogue.js"></script>
</body>
</html>
View
4 css/desktop.css
@@ -1,5 +1,4 @@
body {
- background-color: blue;
}
#searchForm {
@@ -12,4 +11,5 @@ body {
#footer p {
width: 960px;
-}
+}
+
View
21 css/global.css
@@ -5,6 +5,10 @@ body {
font-size: 62.5%;
}
+.hide {
+ display: none;
+}
+
#container {
}
@@ -47,8 +51,17 @@ body {
width: 66px;
text-align: center;
display:block;
- position: relative;
- top: -37px;
+}
+
+#header .navigationButton {
+ float: right;
+ font-size: 1.1em;
+ border: 1px solid #ddd;
+ border-radius: 7px;
+ background-color: #444;
+ color: #fff;
+ padding: 8px;
+ display: none;
}
#ribbon {
@@ -72,6 +85,10 @@ body {
margin: 0 auto;
}
+#navigation {
+
+}
+
#footer {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
View
34 css/mobile.css
@@ -1,5 +1,4 @@
body {
- background: red;
}
#ribbonInner,
@@ -8,4 +7,37 @@ body {
#searchForm,
#footer p {
width: auto;
+}
+
+#headerInner .navigationButton {
+ display: block;
+}
+
+#headerInner .navigationButton.activated {
+ background-color: #666;
+ border-bottom-right-radius: 0px;
+ border-bottom-left-radius: 0px;
+}
+
+#navigation {
+ position: absolute;
+ right: 21px;
+ top: 55px;
+ padding: 10px;
+ background-color: #666;
+ width: 70px;
+}
+
+#navigation ul {
+ margin: 0;
+ padding: 0;
+}
+
+#navigation ul li {
+ font-size: 1.1em;
+ list-style: none;
+}
+
+#navigation ul li a {
+ color: #fff;
}
View
147 js/jessie/jessie.js
@@ -20,6 +20,19 @@
html = globalDocument.documentElement;
}
+ var attachWindowListener;
+
+ if(global && isHostMethod(global, 'addEventListener')) {
+ attachWindowListener = function(eventType, fn) {
+ // Remove this line on deployment -- for debugging only
+ if (!(/^(load|scroll|resize|orientationchange)$/.test(eventType))) {
+ throw new Error('Use attachListener with an element.');
+ }
+
+ global.addEventListener(eventType, fn, false);
+ };
+ };
+
var bind;
if(Function.prototype.bind){
@@ -72,9 +85,143 @@
};
};
+
+ var getElement;
+
+ if (isHostMethod(document, 'getElementById')) {
+ getElement = function(id) {
+ return document.getElementById(id);
+ };
+ };
+
+ var getElementPositionStyles;
+
+ if( html
+ && getElement
+ && isHostObjectProperty(html, 'style')
+ && 'number' == typeof html.offsetLeft
+ && 'string' == typeof html.style.left ) {
+
+ getElementPositionStyles = getElementPositionStyles = (function() {
+ var result,
+ sides = ['left', 'top', 'right', 'bottom'],
+ inlineStyles = {},
+ findPosition;
+
+ findPosition = function(el, sides) {
+ var i,
+ offsetLeft,
+ offsetTop;
+
+ offsetLeft = el.offsetLeft;
+ offsetTop = el.offsetTop;
+ el.style[sides[2]] = 'auto';
+ el.style[sides[3]] = 'auto';
+
+ if (offsetLeft != el.offsetLeft) {
+ result[sides[0]] = null;
+ }
+
+ if (offsetTop != el.offsetTop) {
+ result[sides[1]] = null;
+ }
+
+ offsetLeft = el.offsetLeft;
+ offsetTop = el.offsetTop;
+
+ el.style[sides[0]] = offsetLeft + 'px';
+ el.style[sides[1]] = offsetTop + 'px';
+
+ if (result[sides[0]] !== null && el.offsetLeft != offsetLeft) {
+ if (sides[0] == 'left') {
+ result[sides[0]] = offsetLeft - el.offsetLeft + offsetLeft;
+ }
+ else {
+ result[sides[0]] = el.offsetLeft;
+ }
+ }
+
+ if (result[sides[1]] !== null && el.offsetTop != offsetTop) {
+ if (sides[1] == 'top') {
+ result[sides[1]] = offsetTop - el.offsetTop + offsetTop;
+ }
+ else {
+ result[sides[1]] = el.offsetTop;
+ }
+ }
+
+ for (i = 4; i--;) {
+ el.style[sides[i]] = inlineStyles[sides[i]];
+ }
+ };
+
+ return function(el) {
+ var i,
+ side,
+ otherSide;
+
+ result = {};
+
+ for (i = 2; i--;) {
+ side = sides[i];
+ otherSide = sides[i + 2];
+ result[side] = result[otherSide] = el['offset' + side.charAt(0).toUpperCase() + side.substring(1)];
+ }
+
+ for (i = 4; i--;) {
+ side = sides[i];
+ inlineStyles[side] = el.style[side];
+ }
+
+ findPosition(el, sides);
+ findPosition(el, sides.slice(2).concat(sides.slice(0, 2)));
+
+ return result;
+ };
+
+ })();
+ };
+
+ var addClass;
+
+ if (html && "string" == typeof html.className ) {
+ addClass = function(el, className) {
+ var re;
+ if (!el.className) {
+ el.className = className;
+ }
+ else {
+ re = new RegExp('(^|\\s)' + className + '(\\s|$)');
+ if (!re.test(el.className)) { el.className += ' ' + className; }
+ }
+ };
+ };
+
+ var removeClass;
+ if(html && "string" == typeof html.className) {
+ removeClass = function(el, className) {
+ var re, m;
+ if (el.className) {
+ if (el.className == className) {
+ el.className = '';
+ }
+ else {
+ re = new RegExp('(^|\\s)' + className + '(\\s|$)');
+ m = el.className.match(re);
+ if (m && m.length == 3) { el.className = el.className.replace(re, (m[1] && m[2])?' ':''); }
+ }
+ }
+ };
+ };
+
globalDocument = html = null;
global.jessie = {};
global.jessie.attachBoundListener = attachBoundListener;
+ global.jessie.attachWindowListener = attachWindowListener;
+ global.jessie.bind = bind;
+ global.jessie.getElementPositionStyles = getElementPositionStyles;
+ global.jessie.addClass = addClass;
+ global.jessie.removeClass = removeClass;
})(this);
View
77 js/mould/mould.Navigation.js
@@ -1,9 +1,76 @@
-mould.Navigation = function(menuContainer) {
+if(jessie.attachWindowListener &&
+ jessie.attachBoundListener &&
+ jessie.getElementPositionStyles &&
+ jessie.addClass &&
+ jessie.removeClass) {
-};
-mould.Navigation.prototype.convertToMinimalVersion = function() {
+ mould.Navigation = function(menuContainer, headerContainer) {
+ this.showingMenu = true;
+ this.menuContainer = menuContainer;
+ this.headerContainer = headerContainer;
+ this.windowResizeListener = jessie.bind(this.handleWindow_onResize, this);
+ jessie.attachWindowListener("resize", this.windowResizeListener);
+ this.createButton();
+ this.check();
+ };
+ mould.Navigation.prototype.createButton = function() {
+ this.button = document.createElement("a");
+ this.button.className = "navigationButton";
+ this.button.innerHTML = "Navigation";
+ this.button.href = "#";
+ //this.headerContainer.appendChild(this.button);
+ this.headerContainer.insertBefore(this.button, this.headerContainer.childNodes[0]);
+ jessie.attachBoundListener(this.button, "click", this.handleButton_onClick, this);
+ };
+ mould.Navigation.prototype.enableCompactMode = function() {
+ //this.showButton();
+ this.hideMenu();
+ this.showingMenu = false;
+ };
+ mould.Navigation.prototype.handleButton_onClick = function(e) {
+ e.preventDefault();
-};
-mould.Navigation.prototype.convertToPersistentVersion = function() {
+ // if this button has been clicked we can definitely assume that we are in compact mode
+ var buttonPosition = jessie.getElementPositionStyles(e.target);
+ //jessie.setPositionStyles();
+ if(this.showingMenu) {
+ this.hideMenu();
+ }
+ else {
+ this.showMenu();
+ }
+ };
+ mould.Navigation.prototype.showButton = function() {
+
+ };
+ mould.Navigation.prototype.hideButton = function() {
+
+ };
+ mould.Navigation.prototype.showMenu = function() {
+ jessie.removeClass(this.menuContainer, "hide");
+ jessie.addClass(this.button, "activated");
+ this.showingMenu = true;
+ };
+ mould.Navigation.prototype.hideMenu = function() {
+ jessie.addClass(this.menuContainer, "hide");
+ jessie.removeClass(this.button, "activated");
+ this.showingMenu = false;
+ };
+ mould.Navigation.prototype.disableCompactMode = function() {
+ this.hideButton();
+ this.showMenu();
+ };
+ mould.Navigation.prototype.handleWindow_onResize = function(e) {
+ this.check();
+ };
+ mould.Navigation.prototype.check = function() {
+ var width = document.documentElement.clientWidth;
+ if(width < 320) {
+ this.enableCompactMode();
+ }
+ else {
+ this.disableCompactMode();
+ }
+ };
};
View
11 js/mould/pages/mould.pages.catalogue.js
@@ -0,0 +1,11 @@
+mould.pages.catalogue = (function() {
+
+ if(mould.Ribbon) {
+ this.ribbon = new mould.Ribbon(document.getElementById("ribbon"), document.getElementById("headerInner"));
+ }
+
+ if(mould.Navigation) {
+ this.navigation = new mould.Navigation(document.getElementById("navigation"), document.getElementById("headerInner"));
+ }
+
+})();

0 comments on commit 290a593

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