Contacts UI now fills the browser area no matter what size/device orientation.
authorJames Burke <jrburke@mozillamessaging.com>
Wed, 09 Jun 2010 16:17:25 -0700
changeset 1773 8514627ef0f2391560fb09081eb460b51109f638
parent 1772 b4e9653b132c15aa0ccd3d1e01ba867ae623b888
child 1774 e3f8049f4fc9d6078d89ae6157adb92d745d6785
push id976
push userjrburke@gmail.com
push dateWed, 09 Jun 2010 23:17:29 +0000
Contacts UI now fills the browser area no matter what size/device orientation.
client/api/contacts.css
client/api/contacts.html
client/api/scripts/blade/jig.js
--- a/client/api/contacts.css
+++ b/client/api/contacts.css
@@ -95,36 +95,34 @@ body,ul,li {
 .mblArrowButtonSelected .mblArrowButtonHead {
     background: -webkit-gradient(linear, left top, right bottom, from(#7C87A4), to(#263E6C), color-stop(0.5, #394D77), color-stop(0.5, #243B69));
 }
 .mblArrowButtonSelected .mblArrowButtonBody, .mblArrowButtonSelected .mblArrowButtonNeck {
     background: -webkit-gradient(linear, left top, left bottom, from(#7C87A4), to(#263E6C), color-stop(0.5, #394D77), color-stop(0.5, #243B69));
 }
 
 
-
-
-
 #display {
     position: relative;
-    width: 320px;
-    height: 310px;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
 }
 
 #cards {
     position: absolute;
     left: 0;
-    width: 640px;
+    width: 100%;
+    height: 100%;
     -webkit-transition: left 0.3s ease-out;
 }
 
 .card {
     float: left;
-    width: 320px;
+    width: 100%;
     height: 310px;
 }
 
 .card.card2 {
     z-index: 1;
 }
 
 #contactsCard {
@@ -137,28 +135,31 @@ body,ul,li {
     width: 100%;
     list-style: none;
     padding: 0;
     margin: 0;
     background-color: white;
 }
 
 #contactList li {
-    list-style-type: none;
+    position: relative;
     width: 100%;
     height: 43px;
+    padding-left: 8px;
+    list-style-type: none;
     border-bottom: 1px solid #ADAAAD;
     line-height: 43px;
     font-weight: bold;
-    position: relative;
     color: black;
 }
 
 #contactList li a {
+    display: block;
     width: 100%;
+    height: 100%;
     text-decoration: none;
     color: black;
 }
 
 #identityDisplay ul {
     list-style: none;
 }
 
--- a/client/api/contacts.html
+++ b/client/api/contacts.html
@@ -6,28 +6,78 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <title>Contact Listing</title>
     <link type="text/css" rel="stylesheet" href="contacts.css">
 
     <script src="scripts/requireplugins-jquery-1.4.2.js" charset="utf-8"></script>
     <script>
         "use strict";
         /*global require: false, console: false */
+
+        /*
+         To detect orientation changes in Android:
+         http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript
+        */
+
         require(["jquery", "rdapi", "blade/jig", "json2", "iscroll-min"], function ($, rdapi, jig) {
-            var scroller;
+            var scroller, display, cards, cardList, back, header;
+
+            function adjustCardSizes() {
+                var cardWidth = display.outerWidth(),
+                    cardList = $('.card'),
+                    totalWidth = cardWidth * cardList.length,
+                    height = window.innerHeight - header.outerHeight();
+
+                //Set height
+                display.css('height', height + 'px');
+
+                //Set widths and heights of cards. Need to set the heights
+                //explicitly so any card using iscroll will get updated correctly.
+                cards.css({
+                    width: totalWidth + 'px',
+                    height: height + 'px'
+                });
+
+                cardList.css({
+                    width: cardWidth + 'px',
+                    height: height + 'px'
+                });
+            }
+
             $(function () {
                 //setup for the iscroll thing
-                document.addEventListener('touchmove', function(e){ e.preventDefault(); });
-                scroller = new iScroll('contactList');
+                if ('ontouchmove' in document) {
+                    document.addEventListener('touchmove', function(e){ e.preventDefault(); }, false);
+                    scroller = new iScroll('contactList');
+                }
+                display = $('#display');
+                cards = $('#cards');
+                back = $('#back');
+                header = $('#header');
+
+                adjustCardSizes();
 
                 //Set the title based on the first card.
                 var title = $('.card')[0].getAttribute('title');
                 $('#headerText').html(title);
+
+                back.click(function (evt) {
+                    cards.css({
+                        left: '0px'
+                    });
+                    back.css('display', 'none');
+                });
             });
 
+            //Detect orientation changes and size the card container size accordingly.
+            if ('onorientationchange' in window) {
+                window.addEventListener('orientationchange', adjustCardSizes, false);
+            }
+            window.addEventListener('resize', adjustCardSizes, false);
+
             $('body').delegate('a.person', 'click', function (evt) {
                 evt.preventDefault();
                 var contact = rdapi.data(evt.target.parentNode.getAttribute('data-blade-jig'));
                 rdapi('_design/raindrop!content!all/_view/identities_by_contact', {
                     data: {
                         startkey: JSON.stringify([contact.id[1]]),
                         endkey: JSON.stringify([contact.id[1], {}])
                     },
@@ -59,32 +109,25 @@
                                 if (identities.length) {
                                     contact.identities = identities;
                                 }
                                 html = jig(options.template, contact, options);
 
                                 $('#identityDisplay').html(html);
 
                                 //Scroll the cards.
-                                $('#cards').css({
-                                    left: '-320px'
+                                cards.css({
+                                    left: '-' + display.outerWidth() + 'px'
                                 });
-                                $('#back').css('display', 'block');
+                                back.css('display', 'block');
                             }
                         });
                     }
                 });
             });
-            
-            $('#back').click(function (evt) {
-                $('#cards').css({
-                    left: '0px'
-                });
-                $('#back').css('display', 'none');
-            });
         });
     </script>
 </head>
 <body>
     <div id="header">
         <div id="back">
             <div class="mblArrowButtonHead"></div>
             <div class="mblArrowButtonBody mblArrowButtonText">Back</div>
--- a/client/api/scripts/blade/jig.js
+++ b/client/api/scripts/blade/jig.js
@@ -11,16 +11,18 @@
 if (!String.prototype.trim) {
     String.prototype.trim = function () {
         return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
     };
 }
 
 require.def("blade/jig", ["blade/object"], function (object) {
 
+    //Use _ to indicate current data value.
+    //Need to allow scope lookup for vars
     //Add comment command
     //Fix unit test: something is wrong with it, says it passes, but
     //with attachData change, the string is actually different now.
     //TODO: for attachData, only generate a new ID when the data value changes,
     //and similarly, only attach the data one time per data value.
     //TODO: ALLOW && AND || in the getobject values?
 
     var jig, commands,