Skip to content
Browse files

added stream demo

  • Loading branch information...
1 parent ac94a2d commit 7f2aa6446948f5e3d515a8c2edd7555dee4c0973 @adamsilver committed Apr 17, 2012
View
2 catalogue.html
@@ -16,7 +16,7 @@
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">
<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" /><![endif]-->
</head>
- <body>
+ <body id="pageCatalogue">
<div id="container">
<div id="header">
<div id="headerInner">
View
70 css/global.css
@@ -301,5 +301,75 @@ h1 {
}
#primary .inner {
+
+}
+
+#placeHolder {
+ border: 1px solid #d0d0d0;
+ background: #f5f5f5;
+ margin-bottom: 20px;
+ padding: 20px;
+}
+
+#placeHolder p {
+ text-align: center;
+ font-size: 17px;
+}
+
+#streamNavigation {
+ border: 1px solid #D0D0D0;
+ border-right: none;
+}
+
+#streamNavigation ul {
+ padding: 0;
+ margin: 0;
+}
+
+#streamNavigation .stream {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ border-bottom: 1px solid #D0D0D0
+}
+
+#streamNavigation .stream:last-child {
+ border-bottom: none;
+}
+
+#streamNavigation .stream a {
+ padding: 6px;
+ display: block;
+ color: #444;
+ text-decoration: none;
+ position: relative;
+}
+
+#streamNavigation .stream a.selected {
+ background-color: #eee;
+}
+
+#streamNavigation .stream p.header {
+ font-size: 15px;
+ margin: 0;
+ padding: 0;
+}
+
+#streamNavigation .stream p.name {
+ font-size: 11px;
+}
+
+#streamNavigation .stream p.updateTime {
+ position: absolute;
+ bottom: 7px;
+ right: 7px;
+}
+
+#streamDisplay {
+ height: 500px;
+ border: 1px solid #d0d0d0;
+}
+
+#pageCatalogue #primary .inner {
padding-left: 20px;
}
View
12 css/mobile.css
@@ -102,4 +102,16 @@ body {
#primary .inner {
padding-left: 0px;
+}
+
+#streamNavigation {
+
+}
+
+#placeHolder {
+ display: none;
+}
+
+#main {
+ padding: 3px;
}
View
2 index.html
@@ -21,7 +21,7 @@
<div id="header">
<div id="headerInner">
<div id="logo">
- <a href="index.html"><img src="img/logo.png" alt="T-Mobile" ></a>
+ <a href="stream.html"><img src="img/logo.png" alt="T-Mobile" ></a>
</div>
</div>
</div>
View
90 js/jessie/jessie.js
@@ -29,7 +29,13 @@
throw new Error('Use attachListener with an element.');
}
- global.addEventListener(eventType, fn, false);
+ var listener = function(e) {
+ fn.call(e, e);
+ };
+
+ global.addEventListener(eventType, listener, false);
+
+ return listener;
};
};
@@ -213,6 +219,81 @@
}
};
};
+
+ var attachBoundWindowListener;
+
+ if(attachWindowListener && bind) {
+ attachBoundWindowListener = function(eventType, fn, thisObject) {
+ var listener = bind(fn, thisObject);
+ return attachWindowListener(eventType, listener);
+ };
+ };
+
+ var attachListener;
+
+ if(html && isHostMethod(html, 'addEventListener')) {
+ attachListener = function(el, eventType, fn) {
+
+ var listener = function(e) {
+ fn.call(e, e);
+ };
+
+ el.addEventListener(eventType, listener, false);
+
+ return listener;
+ };
+ };
+
+ var getEventTarget;
+
+ if(html && isHostMethod(html, 'addEventListener')) {
+ getEventTarget = function(e) {
+ var target = e.target;
+ // Check if not an element (e.g. a text node)
+ if (1 != target.nodeType) {
+ // Set reference to parent node (which must be an element)
+ target = target.parentNode;
+ }
+ return target;
+ };
+ }
+
+ var delegateListener;
+
+ if(attachListener && getEventTarget) {
+ delegateListener = function(el, eventType, fn, fnDelegate) {
+
+ var listener = function(e) {
+ if(fnDelegate(getEventTarget(e))) {
+ fn.call(e, e);
+ }
+ };
+
+ return attachListener(el, eventType, listener);
+
+ };
+ };
+
+ var delegateBoundListener;
+
+ if(delegateListener && bind) {
+ delegateBoundListener = function(el, eventType, fn, fnDelegate, thisObject) {
+ var listener = bind(function(e) {
+ if(fnDelegate(getEventTarget(e))) {
+ fn.call(thisObject, e);
+ }
+ }, thisObject);
+
+ attachListener(el, eventType, listener);
+ return listener;
+ };
+ };
+
+ if(html && isHostMethod(html, 'addEventListener')) {
+ var cancelDefault = function(e) {
+ e.preventDefault();
+ };
+ }
globalDocument = html = null;
@@ -223,5 +304,10 @@
global.jessie.getElementPositionStyles = getElementPositionStyles;
global.jessie.addClass = addClass;
global.jessie.removeClass = removeClass;
-
+ global.jessie.attachBoundWindowListener = attachBoundWindowListener;
+ global.jessie.attachListener = attachListener;
+ global.jessie.delegateListener = delegateListener;
+ global.jessie.delegateBoundListener = delegateBoundListener;
+ global.jessie.getEventTarget = getEventTarget;
+ global.jessie.cancelDefault = cancelDefault;
})(this);
View
22 js/mould/mould.ModeChanger.js
@@ -0,0 +1,22 @@
+mould.ModeChanger;
+
+if(jessie.attachBoundWindowListener) {
+ mould.ModeChanger = function() {
+ jessie.attachBoundWindowListener("resize", this.window_onResize, this);
+ this.checkMode();
+ };
+
+ mould.ModeChanger.prototype.window_onResize = function(e){
+ this.checkMode();
+ };
+
+ mould.ModeChanger.prototype.checkMode = function() {
+ var width = document.documentElement.clientWidth;
+ if(width <= 320) {
+ this.enableCompactMode();
+ }
+ else {
+ this.disableCompactMode();
+ }
+ };
+};
View
105 js/mould/mould.StreamEnhancer.js
@@ -0,0 +1,105 @@
+mould.StreamEnhancer;
+
+if( mould.ModeChanger &&
+ jessie.delegateBoundListener &&
+ jessie.attachBoundListener &&
+ jessie.cancelDefault) {
+
+ mould.StreamEnhancer = function(navigation, display) {
+ this.navigation = navigation;
+ this.display = display;
+ mould.ModeChanger.apply(this, arguments);
+ jessie.delegateBoundListener(navigation, "click", this.handleNavigation_onClick, function(target) {
+ if(target.tagName.toLowerCase() == "a") {
+ return true;
+ }
+ if(target.parentNode.tagName.toLowerCase() == "a") {
+ return true;
+ }
+ if(target.parentNode.parentNode.tagName.toLowerCase() == "a") {
+ return true;
+ }
+ }, this);
+
+ this.createBackButton();
+ };
+
+ mould.StreamEnhancer.prototype = mould.ModeChanger.prototype;
+
+ mould.StreamEnhancer.prototype.handleNavigation_onClick = function(e) {
+ jessie.cancelDefault(e);
+ this.display.innerHTML = "";
+ if(this.compactMode) {
+ this.showDisplay();
+ this.hideNavigation();
+ this.showBackButton();
+ }
+ this.requestStream();
+ };
+
+ mould.StreamEnhancer.prototype.createBackButton = function() {
+ this.backButton = document.createElement("a");
+ this.backButton.innerHTML = "Back to streams";
+ this.backButton.href = "#";
+ jessie.attachBoundListener(this.backButton, "click", this.handleBackButton_onClick, this);
+ };
+
+ mould.StreamEnhancer.prototype.handleBackButton_onClick = function(e) {
+ jessie.cancelDefault(e);
+ this.hideDisplay();
+ this.showNavigation();
+ };
+
+ mould.StreamEnhancer.prototype.showBackButton = function() {
+ this.display.appendChild(this.backButton);
+ };
+
+ mould.StreamEnhancer.prototype.hideBackButton = function() {
+ if(this.backButton && this.backButton.parentNode) {
+ this.display.removeChild(this.backButton);
+ }
+ };
+
+ mould.StreamEnhancer.prototype.hideNavigation = function() {
+ this.navigation.style.display = "none";
+ };
+
+ mould.StreamEnhancer.prototype.showNavigation = function() {
+ this.navigation.style.display = "block";
+ };
+
+ mould.StreamEnhancer.prototype.requestStream = function() {
+ //alert("request stream");
+ this.requestStream_onSuccess();
+ };
+
+ mould.StreamEnhancer.prototype.requestStream_onSuccess = function(response) {
+ //alert("show stream in display area");
+ var p = document.createElement("p");
+ p.innerHTML = "i have been updated";
+ this.display.appendChild(p);
+ };
+
+ mould.StreamEnhancer.prototype.enableCompactMode = function() {
+ if(this.compactMode) {
+ return;
+ }
+ this.hideDisplay();
+ this.compactMode = true;
+ };
+
+ mould.StreamEnhancer.prototype.hideDisplay = function() {
+ this.display.style.display = "none";
+ };
+
+ mould.StreamEnhancer.prototype.showDisplay = function() {
+ this.display.style.display = "block";
+ };
+
+ mould.StreamEnhancer.prototype.disableCompactMode = function() {
+ this.showDisplay();
+ this.hideBackButton();
+ this.showNavigation();
+ this.compactMode = false;
+ };
+}
View
11 js/mould/pages/mould.pages.stream.js
@@ -0,0 +1,11 @@
+mould.pages.streams = (function() {
+
+ if(mould.Ribbon) {
+ this.ribbon = new mould.Ribbon(document.getElementById("ribbon"), document.getElementById("headerInner"));
+ }
+
+ //if(mould.StreamEnhancer) {
+ // this.streamEnhancer = new mould.StreamEnhancer(document.getElementById("streamNavigation"), document.getElementById("streamDisplay"));
+ //}
+
+})();
View
11 js/mould/pages/mould.pages.streams.js
@@ -0,0 +1,11 @@
+mould.pages.streams = (function() {
+
+ if(mould.Ribbon) {
+ this.ribbon = new mould.Ribbon(document.getElementById("ribbon"), document.getElementById("headerInner"));
+ }
+
+ if(mould.StreamEnhancer) {
+ this.streamEnhancer = new mould.StreamEnhancer(document.getElementById("streamNavigation"), document.getElementById("streamDisplay"));
+ }
+
+})();
View
100 stream-topapps.html
@@ -0,0 +1,100 @@
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-GB">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta http-equiv="Content-Language" content="en-gb">
+ <meta name="description" content="">
+ <meta name="keywords" content="">
+ <meta name="author" content="Adam Silver">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" >
+ <title>Mould - Stream - TopApps</title>
+ <link rel="stylesheet" type="text/css" href="css/global.css" media="all">
+ <link rel='stylesheet' type="text/css" href='css/desktop.css' media='screen and (min-width: 321px)' >
+ <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">
+ <!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" /><![endif]-->
+ </head>
+ <body>
+ <div id="container">
+ <div id="header">
+ <div id="headerInner">
+ <div id="logo">
+ <a href="index.html"><img src="img/logo.png" alt="T-Mobile" ></a>
+ </div>
+ </div>
+ </div>
+ <div id="ribbon">
+ <div id="ribbonInner">
+ <div class="icon"><img src="img/icons/tmp_service_kundencenter.png" alt=""></div>
+ <div class="icon"><img src="img/icons/tmp_service_mediencenter.png" alt=""></div>
+ <div class="icon"><img src="img/icons/tmp_service_programmmanager.png" alt=""></div>
+ <div class="icon"><img src="img/icons/tmp_service_topapps.png" alt=""></div>
+ </div>
+ </div>
+ <div class="heading">
+ <h1>Dashboard</h1>
+ </div>
+ <div id="main">
+
+ <div id="placeHolder">
+ <p>Place holder</p>
+ </div>
+
+ <div id="secondary">
+ <div id="streamNavigation">
+ <ul>
+ <li class="stream">
+ <a class="selected" href="stream-topapps.html" class="selected">
+ <div class="container">
+ <p class="header">TopApps of the week</p>
+ <p class="name">TopApps</p>
+ <p class="updateTime">17:40</p>
+ </div>
+ </a>
+ </li>
+ <li class="stream">
+ <a href="#">
+ <div class="container">
+ <p class="header">stream header blah</p>
+ <p class="name">Stream name</p>
+ <p class="updateTime">17:40</p>
+ </div>
+ </a>
+ </li>
+ <li class="stream">
+ <a href="#">
+ <div class="container">
+ <p class="header">stream header blah</p>
+ <p class="name">Stream name</p>
+ <p class="updateTime">17:40</p>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div id="primary">
+ <div class="inner">
+ <a href="stream.html">Back to streams</a>
+ <div id="streamDisplay">
+ The stream for topapps is right here
+ </div>
+
+ </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.ModeChanger.js"></script>
+ <script type="text/javascript" src="js/mould/mould.StreamEnhancer.js"></script>
+ <script type="text/javascript" src="js/mould/pages/mould.pages.js"></script>
+ <script type="text/javascript" src="js/mould/pages/mould.pages.stream.js"></script>
+ </body>
+</html>
View
100 stream.html
@@ -0,0 +1,100 @@
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-GB">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta http-equiv="Content-Language" content="en-gb">
+ <meta name="description" content="">
+ <meta name="keywords" content="">
+ <meta name="author" content="Adam Silver">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" >
+ <title>Mould - Stream</title>
+ <link rel="stylesheet" type="text/css" href="css/global.css" media="all">
+ <link rel='stylesheet' type="text/css" href='css/desktop.css' media='screen and (min-width: 321px)' >
+ <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">
+ <!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" /><![endif]-->
+ </head>
+ <body>
+ <div id="container">
+ <div id="header">
+ <div id="headerInner">
+ <div id="logo">
+ <a href="index.html"><img src="img/logo.png" alt="T-Mobile" ></a>
+ </div>
+ </div>
+ </div>
+ <div id="ribbon">
+ <div id="ribbonInner">
+ <div class="icon"><img src="img/icons/tmp_service_kundencenter.png" alt=""></div>
+ <div class="icon"><img src="img/icons/tmp_service_mediencenter.png" alt=""></div>
+ <div class="icon"><img src="img/icons/tmp_service_programmmanager.png" alt=""></div>
+ <div class="icon"><img src="img/icons/tmp_service_topapps.png" alt=""></div>
+ </div>
+ </div>
+ <div class="heading">
+ <h1>Dashboard</h1>
+ </div>
+ <div id="main">
+
+ <div id="placeHolder">
+ <p>Place holder</p>
+ </div>
+
+ <div id="secondary">
+ <div id="streamNavigation">
+ <ul>
+ <li class="stream">
+ <a href="stream-topapps.html">
+ <div class="container">
+ <p class="header">TopApps of the week</p>
+ <p class="name">TopApps</p>
+ <p class="updateTime">17:40</p>
+ </div>
+ </a>
+ </li>
+ <li class="stream">
+ <a href="#">
+ <div class="container">
+ <p class="header">stream header blah</p>
+ <p class="name">Stream name</p>
+ <p class="updateTime">17:40</p>
+ </div>
+ </a>
+ </li>
+ <li class="stream">
+ <a href="#">
+ <div class="container">
+ <p class="header">stream header blah</p>
+ <p class="name">Stream name</p>
+ <p class="updateTime">17:40</p>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div id="primary">
+ <div class="inner">
+
+ <div id="streamDisplay">
+ The stream goes here
+ </div>
+
+ </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.ModeChanger.js"></script>
+ <script type="text/javascript" src="js/mould/mould.StreamEnhancer.js"></script>
+ <script type="text/javascript" src="js/mould/pages/mould.pages.js"></script>
+ <script type="text/javascript" src="js/mould/pages/mould.pages.streams.js"></script>
+ </body>
+</html>

0 comments on commit 7f2aa64

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