From f5f4aeec82eb6ad355e403b9b16fde7d5a1c617e Mon Sep 17 00:00:00 2001
From: "Michael J. Rubinsky" <mrubinsk@horde.org>
Date: Mon, 8 Nov 2010 09:44:05 -0500
Subject: [PATCH] First, *rough* cut at jquerymobile enabled kronolith.

"Working" day view, shows events from default calendar,
still needs sorting and UI love.

Swipe left and right events move the day being viewed. Still
need traditional links for non-touch devices, and the touch
event seems a bit pokey at the moment.

Touching/clicking on event opens an event view, which for
the moment only shows the event title. The data is there,
the view just needs to be built.

Have some local changes for a "list view" and month view,
but not yet ready for public consumption :)

Squashed commit of the following:

commit 553f6fe916bd0b8a75be2e28f2c69ed70d9618bb
Merge: cef6032 48c768a
Author: Michael J. Rubinsky <mrubinsk@horde.org>
Date:   Mon Nov 8 02:11:06 2010 -0500

    Merge branch 'master' into jquerykrono

    Conflicts:
    	horde/templates/common-header-mobile.inc
    	horde/templates/portal/mobile.inc

commit cef6032c17fbbe519f6d532dd7a301532c5147c1
Author: Michael J. Rubinsky <mrubinsk@horde.org>
Date:   Mon Nov 8 02:05:54 2010 -0500

    First working ajax day view for mobile view

commit 00cc152f109d0d9afe45609ed7d1547ee86a1261
Author: Michael J. Rubinsky <mrubinsk@horde.org>
Date:   Fri Nov 5 00:29:07 2010 -0400

    Display the application icon in the listview

commit fb1ab1ec12ca3f06839051a716aec3194bb97f6a
Author: Michael J. Rubinsky <mrubinsk@horde.org>
Date:   Fri Nov 5 00:11:42 2010 -0400

    Initial stab at a jquery-mobile enabled mobile portal page.

    Also no longer restricts apps to those with a mobile view, as discussed in Boston.
---
 horde/templates/common-header-mobile.inc     |   2 +-
 kronolith/index.php                          |   6 +-
 kronolith/mobile.php                         | 158 +++++++++++++++++++++++++++
 kronolith/templates/common-header-mobile.inc |  16 +++
 4 files changed, 180 insertions(+), 2 deletions(-)
 create mode 100644 kronolith/mobile.php
 create mode 100644 kronolith/templates/common-header-mobile.inc

diff --git a/horde/templates/common-header-mobile.inc b/horde/templates/common-header-mobile.inc
index c618ebb4d..681ffc065 100644
--- a/horde/templates/common-header-mobile.inc
+++ b/horde/templates/common-header-mobile.inc
@@ -10,4 +10,4 @@ if (!empty($title)) {
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
     <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
-</head>
\ No newline at end of file
+</head>
diff --git a/kronolith/index.php b/kronolith/index.php
index 06ae900d1..ebf92813d 100644
--- a/kronolith/index.php
+++ b/kronolith/index.php
@@ -8,7 +8,11 @@
 
 require_once dirname(__FILE__) . '/lib/Application.php';
 Horde_Registry::appInit('kronolith');
-
+/* Load mobile? */
+if ($browser->isMobile()) {
+    include KRONOLITH_BASE . '/mobile.php';
+    exit;
+}
 /* Load traditional interface? */
 if (!Kronolith::showAjaxView()) {
     if ($prefs->getValue('dynamic_view')) {
diff --git a/kronolith/mobile.php b/kronolith/mobile.php
new file mode 100644
index 000000000..b7268feb3
--- /dev/null
+++ b/kronolith/mobile.php
@@ -0,0 +1,158 @@
+<?php
+/**
+ * Kronolith Mobile View
+ *
+ * Copyright 2010 The Horde Project (http://www.horde.org/)
+ *
+ * See the enclosed file COPYING for license information (LGPL). If you
+ * did not receive this file, see http://www.fsf.org/copyleft/lgpl.html.
+ *
+ * @author Michael J. Rubinsky <mrubinsk@horde.org>
+ * @pacakge Kronolith
+ */
+require_once dirname(__FILE__) . '/lib/Application.php';
+Horde_Registry::appInit('kronolith');
+
+//@TODO: Will eventually need a separate Horde::includeScriptFiles for mobile
+//       apps to avoid outputing all the prototype dependant stuff.
+//
+//Horde::addScriptFile('http://code.jquery.com/jquery-1.4.3.min.js', 'horde', array('external' => true));
+//Horde::addScriptFile('http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js', 'horde', array('external' => true));
+
+// Probably want to use a customized Kronolith::header() method as well instead
+// of including a common-header-mobile file.
+
+Horde::addInlineScript(Kronolith::includeJSVars());
+$title = _("My Calendar");
+require KRONOLITH_TEMPLATES . '/common-header-mobile.inc';
+?>
+<!-- Day View -->
+<div data-role="page">
+  <div data-role="header" data-position="fixed">
+   <h1>My Calendar:Day</h1>
+     <h3 id="todayheader"></h3>
+  </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>
+  </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="content" class="ui-body"></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>
+
+<script type="text/javascript">
+    $(function() {
+       $.ajaxSetup({
+           dataFilter: function(data, type)
+           {
+               filter = /^\/\*-secure-([\s\S]*)\*\/s*$/;
+               return data.replace(filter, "$1");
+           }
+       });
+
+       // Initial day view:
+       Kronolith.now = new Date();
+        $('body').bind('swipeleft',
+            function(e) {
+                Kronolith.now.addDays(1);
+               $.post('/horde/services/ajax.php/kronolith/listEvents',
+                      {'start': Kronolith.now.toString("yyyyMMdd"), 'end': Kronolith.now.toString("yyyyMMdd"), 'cal': Kronolith.conf.default_calendar},
+                      function(data) {
+                          Kronolith.updateView(data.response);
+                      },
+                      'json'
+               ); 
+            });
+
+        $('body').bind('swiperight',
+            function(e) {
+               Kronolith.now.addDays(-1);
+               $.post('/horde/services/ajax.php/kronolith/listEvents',
+                      {'start': Kronolith.now.toString("yyyyMMdd"), 'end': Kronolith.now.toString("yyyyMMdd"), 'cal': Kronolith.conf.default_calendar},
+                      function(data)
+                      {
+                          Kronolith.updateView(data.response);
+                      },
+                      'json'
+               );
+            });
+
+       $.post('/horde/services/ajax.php/kronolith/listEvents',
+              {'start': Kronolith.now.toString("yyyyMMdd"), 'end': Kronolith.now.toString("yyyyMMdd"), 'cal': Kronolith.conf.default_calendar},
+              function(data) {
+                  Kronolith.updateView(data.response);
+              },
+              'json'
+       );
+    });
+
+    /**
+     * Updates the day view.
+     * @TODO: LOTS!! (Sort events, multiple calendars etc...)
+     */
+    Kronolith.updateView = function(data)
+    {
+        $("#daycontent ul").detach();
+        $("#todayheader").html(Kronolith.now.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) {
+                        Kronolith.loadEvent(data.cal, index, Date.parse(event.e));
+                    }).append(d);
+                    list.append(item.append(a));
+                });
+            });
+            list.listview();
+            $("#daycontent").append(list);
+        }
+    };
+
+    /**
+     * Requests a single event from the backend, the (will eventually) populate
+     * the event view.
+     */
+    Kronolith.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/templates/common-header-mobile.inc b/kronolith/templates/common-header-mobile.inc
new file mode 100644
index 000000000..fe5b4420b
--- /dev/null
+++ b/kronolith/templates/common-header-mobile.inc
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<?php
+$page_title = $GLOBALS['registry']->get('name');
+if (!empty($title)) {
+    $page_title .= ' :: ' . $title;
+}?>
+    <title><?php echo htmlspecialchars($title) ?></title>
+    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
+    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
+    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
+    <script type="text/javascript" src="/horde/js/date/en-US.js"></script>
+    <script type="text/javascript" src="/horde/js/date/date.js"></script>
+    <?php Horde::outputInlineScript(); ?>
+</head>
\ No newline at end of file
-- 
2.11.0