mobile tweaks, break out kronolithMobile into it's own js file

diff --git a/kronolith/js/kronolithmobile.js b/kronolith/js/kronolithmobile.js
new file mode 100644 (file)
index 0000000..9ee16fc
--- /dev/null
+++ b/kronolith/js/kronolithmobile.js
@@ -0,0 +1,95 @@
+/**
+ * kronolithmobile.js - Base mobile application logic.
+ *
+ * Copyright 2010 The Horde Project (http://www.horde.org/)
+ *
+ * See the enclosed file COPYING for license information (GPL). If you
+ * did not receive this file, see http://www.fsf.org/copyleft/gpl.html.
+ *
+ * @author Michael J. Rubinsky <mrubinsk@horde.org>
+ */
+ KronolithMobile = {
+
+    doAction: function(action, params, callback)
+    {
+        $.post(Kronolith.conf.URI_AJAX + action, params, callback, 'json');
+    },
+
+    listEventsCallback: function(data)
+    {
+        data = data.response;
+        $("#daycontent ul").detach();
+        $("#todayheader").html(KronolithMobile.currentDate.toString(Kronolith.conf.date_format));
+        var list = $('<ul>').attr({'data-role': 'listview'});
+        var type = data.cal.split('|')[0], cal = data.cal.split('|')[1];
+        if (data.events) {
+            $.each(data.events, function(datestring, events) {
+                $.each(events, function(index, event) {
+                    // set .text() first, then .html() to escape
+                    var d = $('<div style="color:' + Kronolith.conf.calendars[type][cal].bg + '">');
+                    var item = $('<li>').append();
+                    d.text(Date.parse(event.s).toString(Kronolith.conf.time_format)
+                        + ' - '
+                        + Date.parse(event.e).toString(Kronolith.conf.time_format)
+                        + ' '
+                        + event.t).html();
+                    var a = $('<a>').attr({'href': '#eventview'}).click(function(e) {
+                        KronolithMobile.loadEvent(data.cal, index, Date.parse(event.e));
+                    }).append(d);
+                    list.append(item.append(a));
+                });
+            });
+            list.listview();
+            $("#daycontent").append(list);
+        }
+    },
+
+    loadEvent: function(cal, idy, d)
+    {
+        $.post(Kronolith.conf.URI_AJAX + 'getEvent',
+               {'cal': cal, 'id': idy, 'date': d.toString('yyyyMMdd')},
+               function(data)
+               {
+                   $("#eventcontent").text(data.response.event.t);
+               },
+               'json');
+    }
+};
+
+// JQuery Mobile setup
+$(function() {
+    // Global ajax options.
+    $.ajaxSetup({
+        dataFilter: function(data, type)
+        {
+            // Remove json security token
+            filter = /^\/\*-secure-([\s\S]*)\*\/s*$/;
+            return data.replace(filter, "$1");
+        }
+    });
+
+    // For now, start at today's day view
+    KronolithMobile.currentDate = new Date();
+
+    $('body').bind('swipeleft', function(e) {
+        KronolithMobile.currentDate.addDays(1);
+        KronolithMobile.doAction('listEvents',
+                                 {'start': KronolithMobile.currentDate.toString("yyyyMMdd"), 'end': KronolithMobile.currentDate.toString("yyyyMMdd"), 'cal': Kronolith.conf.default_calendar},
+                                 KronolithMobile.listEventsCallback
+        );
+    });
+
+    $('body').bind('swiperight', function(e) {
+            KronolithMobile.currentDate.addDays(-1);
+            KronolithMobile.doAction('listEvents',
+                                     {'start': KronolithMobile.currentDate.toString("yyyyMMdd"), 'end': KronolithMobile.currentDate.toString("yyyyMMdd"), 'cal': Kronolith.conf.default_calendar},
+                                     KronolithMobile.listEventsCallback
+            );
+    });
+
+    // Load today
+    KronolithMobile.doAction('listEvents',
+                             {'start': KronolithMobile.currentDate.toString("yyyyMMdd"), 'end': KronolithMobile.currentDate.toString("yyyyMMdd"), 'cal': Kronolith.conf.default_calendar},
+                             KronolithMobile.listEventsCallback
+    );
+});
\ No newline at end of file

diff --git a/kronolith/lib/Application.php b/kronolith/lib/Application.php
index a26fc35..0b79e94 100644 (file)
--- a/kronolith/lib/Application.php
+++ b/kronolith/lib/Application.php
@@ -42,6 +42,13 @@ class Kronolith_Application extends Horde_Registry_Application
     public $ajaxView = true;
 
     /**
+     * Does this application support a mobile view?
+     *
+     * @var boolean
+     */
+    public $mobileView = true;
+
+    /**
      * The application's version.
      *
      * @var string

diff --git a/kronolith/mobile.php b/kronolith/mobile.php
index cffae26..e798551 100644 (file)
--- a/kronolith/mobile.php
+++ b/kronolith/mobile.php
@@ -24,134 +24,48 @@ Horde_Registry::appInit('kronolith');
 
 $title = _("My Calendar");
 require $registry->get('templates', 'horde') . '/common-header-mobile.inc';
-Horde::addInlineScript(Kronolith::includeJSVars());
 ?>
+  <?php Horde::addInlineScript(Kronolith::includeJSVars());?>
   <script type="text/javascript" src="<?php echo $registry->get('jsuri', 'horde') ?>/date/en-US.js"></script>
   <script type="text/javascript" src="<?php echo $registry->get('jsuri', 'horde') ?>/date/date.js"></script>
+  <script type="text/javascript" src="<?php echo $registry->get('jsuri', 'kronolith') ?>/kronolithmobile.js"></script>
 </head>
 <body>
-<!-- Day View -->
-<div data-role="page">
+
+<!-- Initial, Day view -->
+<div data-role="page" id="dayview">
   <div data-role="header" data-position="fixed">
    <h1>My Calendar:Day</h1>
    <a class="ui-btn-left" href="<?php echo Horde::getServiceLink('portal', 'horde')?>"><?php echo _("Home")?></a>
    <a rel="external" class="ui-btn-right" href="<?php echo Horde::getServiceLink('logout', 'horde')?>"><?php echo _("Logout")?></a>
-     <h3 id="todayheader"></h3>
+   <h4 id="todayheader"></h4>
   </div>
   <div data-role="content" class="ui-body" id="daycontent"></div>
   <div data-role="footer">
-    <a href="mobile.php?test=1">Summary</a>
-    <a href="mobile.php?test=2">Month</a>
-    <a href="mobile.php?view=day" data-role="button">Day</a>
+    <a href="#">Summary</a>
+    <a href="#">Month</a>
+    <a href="#" data-role="button">Day</a>
   </div>
 </div>
 
+<!-- Single Event -->
+<div data-role="page" id="eventview">
+  <div data-role="header" data-position="fixed"><h1>Event Title Here?</h1></div>
+  <div data-role="content" class="ui-body" id="eventcontent"></div>
+  <div data-role="footer"></div>
+</div>
+
 <!-- Overview Page -->
 <div data-role="page" id="overview">
-  <div data-role="header" data-position="fixed">
-   <h1>My Calendar:List</h1>
-  </div>
+  <div data-role="header" data-position="fixed"><h1>My Calendar: Overview</h1></div>
   <div data-role="content" class="ui-body"></div>
+  <div data-role="footer"></div>
 </div>
 
-<!-- Singe Event View -->
-<div data-role="page" id="eventview">
-    <div data-role="header" data-position="fixed"><h1>Event</h1></div>
-    <div data-role="content" class="ui-body" id="eventcontent"></div>
-    <div data-role="footer"></div>
-</div>
-
-<!-- Month View -->
 <div data-role="page" id="monthview">
-    <div data-role="header" data-position="fixed"><h1>Event</h1></div>
-    <div data-role="content" class="ui-body" id="monthcontent"></div>
-    <div data-role="footer"></div>
+ <div data-role="header" data-position="fixed"><h1>Month</h1></div>
+ <div data-role="content" class="ui-body" id="monthcontent"></div>
+ <div data-role="footer"></div>
 </div>
 
-<script type="text/javascript">
-    $(function() {
-        // Global ajax options.
-        $.ajaxSetup({
-            dataFilter: function(data, type)
-            {
-                // Remove json security token
-                filter = /^\/\*-secure-([\s\S]*)\*\/s*$/;
-                return data.replace(filter, "$1");
-            }
-        });
-
-        // For now, start at today's day view
-        Kronolith.currentDate = new Date();
-        $('body').bind('swipeleft', function(e) {
-            Kronolith.currentDate.addDays(1);
-            KronolithMobile.doAction('listEvents',
-                                     {'start': Kronolith.currentDate.toString("yyyyMMdd"), 'end': Kronolith.currentDate.toString("yyyyMMdd"), 'cal': Kronolith.conf.default_calendar},
-                                     KronolithMobile.listEventsCallback
-            );
-        });
-
-        $('body').bind('swiperight', function(e) {
-                Kronolith.currentDate.addDays(-1);
-                KronolithMobile.doAction('listEvents',
-                                         {'start': Kronolith.currentDate.toString("yyyyMMdd"), 'end': Kronolith.currentDate.toString("yyyyMMdd"), 'cal': Kronolith.conf.default_calendar},
-                                         KronolithMobile.listEventsCallback
-                );
-        });
-
-        // Load today
-        KronolithMobile.doAction('listEvents',
-                                 {'start': Kronolith.currentDate.toString("yyyyMMdd"), 'end': Kronolith.currentDate.toString("yyyyMMdd"), 'cal': Kronolith.conf.default_calendar},
-                                 KronolithMobile.listEventsCallback
-        );
-    });
-
-    KronolithMobile = {
-
-        doAction: function(action, params, callback)
-        {
-            $.post(Kronolith.conf.URI_AJAX + action, params, callback, 'json');
-        },
-
-        listEventsCallback: function(data)
-        {
-            data = data.response;
-            $("#daycontent ul").detach();
-            $("#todayheader").html(Kronolith.currentDate.toString(Kronolith.conf.date_format));
-            var list = $('<ul>').attr({'data-role': 'listview'});
-            var type = data.cal.split('|')[0], cal = data.cal.split('|')[1];
-            if (data.events) {
-                $.each(data.events, function(datestring, events) {
-                    $.each(events, function(index, event) {
-                        // set .text() first, then .html() to escape
-                        var d = $('<div style="color:' + Kronolith.conf.calendars[type][cal].bg + '">');
-                        var item = $('<li>').append();
-                        d.text(Date.parse(event.s).toString(Kronolith.conf.time_format)
-                            + ' - '
-                            + Date.parse(event.e).toString(Kronolith.conf.time_format)
-                            + ' '
-                            + event.t).html();
-                        var a = $('<a>').attr({'href': '#eventview'}).click(function(e) {
-                            KronolithMobile.loadEvent(data.cal, index, Date.parse(event.e));
-                        }).append(d);
-                        list.append(item.append(a));
-                    });
-                });
-                list.listview();
-                $("#daycontent").append(list);
-            }
-        },
-
-        loadEvent: function(cal, idy, d)
-        {
-            $.post(Kronolith.conf.URI_AJAX + 'getEvent',
-                   {'cal': cal, 'id': idy, 'date': d.toString('yyyyMMdd')},
-                   function(data)
-                   {
-                       $("#eventcontent").text(data.response.event.t);
-                   },
-                   'json');
-        }
-}
-</script>
-
 <?php $registry->get('templates', 'horde') . '/common-footer-mobile.inc';

diff --git a/kronolith/mobilepage.html b/kronolith/mobilepage.html
new file mode 100644 (file)
index 0000000..f366176
--- /dev/null
+++ b/kronolith/mobilepage.html
@@ -0,0 +1,9 @@
+<div data-role="page" id="overview">
+  <div data-role="header" data-position="fixed">
+   <h1>My Calendar:Day</h1>
+  </div>
+  <div data-role="content" class="ui-body">foob ar
+  </div>
+  <div data-role="footer">
+  </div>
+</div>
\ No newline at end of file