Add message loading. Basic functionality is complete.
authorJan Schneider <jan@horde.org>
Mon, 22 Nov 2010 18:21:25 +0000 (19:21 +0100)
committerJan Schneider <jan@horde.org>
Mon, 22 Nov 2010 18:21:25 +0000 (19:21 +0100)
imp/js/mobile.js
imp/lib/Ajax/Application.php
imp/templates/mobile/head.html.php
imp/templates/mobile/mailbox.html.php
imp/templates/mobile/message.html.php

index e30b8ec..aee415a 100644 (file)
@@ -22,6 +22,37 @@ var ImpMobile = {
         $.post(IMP.conf.URI_AJAX + action, params, callback, 'json');
     },
 
+    // Convert object to an IMP UID Range string. See IMP::toRangeString()
+    // ob = (object) mailbox name as keys, values are array of uids.
+    toRangeString: function(ob)
+    {
+        var str = '';
+
+        $.each(ob, function(key, value) {
+            if (!value.length) {
+                return;
+            }
+
+            var u = (IMP.conf.pop3 ? value : value.numericSort()),
+                first = u.shift(),
+                last = first,
+                out = [];
+
+            $.each(u, function(n, k) {
+                if (!IMP.conf.pop3 && (last + 1 == k)) {
+                    last = k;
+                } else {
+                    out.push(first + (last == first ? '' : (':' + last)));
+                    first = last = k;
+                }
+            });
+            out.push(first + (last == first ? '' : (':' + last)));
+            str += '{' + key.length + '}' + key + out.join(',');
+        });
+
+        return str;
+    },
+
     /**
      * Switches to the mailbox view and loads a mailbox.
      *
@@ -41,8 +72,9 @@ var ImpMobile = {
                 slice: '1:25',
                 requestid: 1,
                 sortby: IMP.conf.sort.date.v,
+                sortdir: 1,
             },
-            ImpMobile.messagesLoaded);
+            ImpMobile.mailboxLoaded);
     },
 
     /**
@@ -50,14 +82,14 @@ var ImpMobile = {
      *
      * @param object r  The Ajax response object.
      */
-    messagesLoaded: function(r)
+    mailboxLoaded: function(r)
     {
         var list = $('#imp-mailbox-list');
         $.mobile.pageLoading(true);
         if (r.response && r.response.ViewPort) {
             $.each(r.response.ViewPort.data, function(key, data) {
                 list.append(
-                    $('<li>').append(
+                    $('<li class="imp-message" data-imp-mailbox="' + data.view + '" data-imp-uid="' + data.imapuid + '">').append(
                         $('<h3>').append(
                             $('<a href="#">').text(data.subject))).append(
                         $('<p class="ui-li-aside">').text(data.date)).append(
@@ -68,6 +100,52 @@ var ImpMobile = {
     },
 
     /**
+     * Switches to the message view and loads a message.
+     *
+     * @param string mailbox  A mailbox name.
+     * @param string uid      A message UID.
+     */
+    toMessage: function(mailbox, uid)
+    {
+        var o = {};
+        o[mailbox] = [ uid ];
+        $.mobile.changePage('#message', 'slide', false, true);
+        $.mobile.pageLoading();
+        ImpMobile.doAction(
+            'showMessage',
+            {
+                uid: ImpMobile.toRangeString(o),
+                view: mailbox,
+            },
+            ImpMobile.messageLoaded);
+    },
+
+    /**
+     * Callback method after the message has been loaded.
+     *
+     * @param object r  The Ajax response object.
+     */
+    messageLoaded: function(r)
+    {
+        $.mobile.pageLoading(true);
+        if (r.response && r.response.message && !r.response.message.error) {
+            var data = r.response.message;
+            $('#imp-message-title').text(data.title);
+            $('#imp-message-subject').text(data.subject);
+            $('#imp-message-from').text(data.from[0].personal);
+            $('#imp-message-body').html(data.msgtext);
+            $.each(data.headers, function(k, header) {
+                if (header.id == 'Date') {
+                    $('#imp-message-date').text(header.value);
+                }
+            });
+            $.each(data.js, function(k, js) {
+                $.globalEval(js);
+            });
+        }
+    },
+
+    /**
      * Catch-all event handler for the click event.
      *
      * @param object e  An event object.
@@ -88,6 +166,10 @@ var ImpMobile = {
                 var link = elt.find('a[mailbox]');
                 ImpMobile.toMailbox(link.attr('mailbox'), link.text());
                 break;
+
+            } else if (elt.hasClass('imp-message')) {
+                ImpMobile.toMessage(elt.attr('data-imp-mailbox'), elt.attr('data-imp-uid'));
+                break;
             }
 
             elt = elt.parent();
@@ -110,6 +192,38 @@ var ImpMobile = {
             }
         });
 
+        IMP.iframeInject = function(id, data)
+        {
+            id = $('#' + id);
+            var d = id.get(0).contentWindow.document;
+
+            d.open();
+            d.write(data);
+            d.close();
+
+            id.show().prev().remove();
+            IMP.iframeResize(id);
+        };
+
+        IMP.iframeResize = function(id)
+        {
+            return;
+            var lc = id.get(0).contentWindow.document.lastChild;
+            id.css('height', lc.scrollHeight + 'px' );
+
+            // For whatever reason, browsers will report different heights
+            // after the initial height setting.
+            // Try expanding IFRAME if we detect a scroll.
+            if (lc.clientHeight != lc.scrollHeight ||
+                id.get(0).clientHeight != lc.clientHeight) {
+                id.css('height', lc.scrollHeight + 'px' );
+                if (lc.clientHeight != lc.scrollHeight) {
+                    // Finally, brute force if it still isn't working.
+                    id.css('height', (lc.scrollHeight + 25) + 'px');
+                }
+            }
+        };
+
         $(document).click(ImpMobile.clickHandler);
     }
 
index bd20d0b..39222d4 100644 (file)
@@ -898,6 +898,58 @@ class IMP_Ajax_Application extends Horde_Core_Ajax_Application
     }
 
     /**
+     * AJAX action: Generate data necessary to display a complete message.
+     *
+     * See the list of variables needed for _changed() and
+     * _checkUidvalidity().  Additional variables used:
+     * <pre>
+     * 'uid' - (string) Index of the messages to preview (IMAP sequence
+     *         string) - must be single index.
+     * </pre>
+     *
+     * @return mixed  False on failure, or an object with the following
+     *                entries:
+     * <pre>
+     * 'message' - (object) Return from IMP_View_ShowMessage::showMessage().
+     * </pre>
+     */
+    public function showMessage()
+    {
+        $indices = new IMP_Indices($this->_vars->uid);
+        list($mbox, $idx) = $indices->getSingle();
+        if (!$idx) {
+            return false;
+        }
+
+        $change = $this->_changed(false);
+        if (is_null($change)) {
+            return false;
+        }
+
+        $args = array(
+            'mailbox' => $mbox,
+            'uid' => $idx
+        );
+        $result = new stdClass;
+        $result->message = new stdClass;
+
+        try {
+            $show_msg = new IMP_Views_ShowMessage();
+            $result->message = (object)$show_msg->showMessage($args);
+            if (isset($result->message->error)) {
+                $result = $this->_checkUidvalidity($result);
+            }
+        } catch (Horde_Imap_Client_Exception $e) {
+            $result->message->error = $e->getMessage();
+            $result->message->errortype = 'horde.error';
+            $result->message->mailbox = $args['mailbox'];
+            $result->message->uid = $args['uid'];
+        }
+
+        return $result;
+    }
+
+    /**
      * AJAX action: Generate data necessary to display preview message.
      *
      * See the list of variables needed for _changed() and
index 1d0cc9c..7e21f89 100644 (file)
@@ -1,4 +1,5 @@
   <link type="text/css" rel="stylesheet" href="<?php echo $GLOBALS['registry']->get('themesuri', 'imp') ?>/mobile.css" />
+  <script type="text/javascript" src="<?php echo $GLOBALS['registry']->get('jsuri', 'horde') ?>/horde-jquery.js"></script>
   <script type="text/javascript" src="<?php echo $GLOBALS['registry']->get('jsuri') ?>/mobile.js"></script>
 </head>
 <body>
index dc4efdf..84e649d 100644 (file)
   </div>
   <div data-role="content">
     <ul id="imp-mailbox-list" data-role="listview">
-      <li>
-         <h3><a href="#message">Subject 1</a></h3>
-         <p class="ui-li-aside">99</p>
-         <p>Sender</p>
-      </li>
-      <li><a href="#message">Another Folder</a></li>
-      <li><a href="#message">Sub folder</a></li>
-      <li><a href="#message">Trash</a></li>
     </ul>
   </div>
 </div>
index 26468eb..cbdeb9b 100644 (file)
@@ -1,19 +1,17 @@
 <div id="message" data-role="page">
   <div data-role="header">
-    <h1>My Subject</h1>
+    <h1 id="imp-message-title"></h1>
     <?php if ($this->logout): ?>
     <a href="<?php echo $this->logout ?>" rel="external" data-theme="e" data-icon="delete" class="ui-btn-right"><?php echo _("Log out") ?></a>
     <?php endif ?>
   </div>
   <div class="ui-body ui-body-c">
-    <strong>My Subject</strong><br>
-    <small>Date, Time</small>
+    <strong id="imp-message-subject"></strong><br>
+    <small id="imp-message-date"></small>
   </div>
   <div class="ui-body ui-body-c">
-    <a href="#" style="float:right;margin:0" data-role="button" data-icon="arrow-d" data-iconpos="notext">Show more</a>
-    From: Myself
-  </div>
-  <div data-role="content">
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    <a href="#" style="float:right;margin:0" data-role="button" data-icon="arrow-d" data-iconpos="notext"><?php echo _("Show more") ?></a>
+    <?php echo _("From:") ?> <span id="imp-message-from"></span>
   </div>
+  <div id="imp-message-body" data-role="content"></div>
 </div>