clone new items in menu from mock objects

5 files changed, 91 insertions, 24 deletions

diff --git a/js/main.js b/js/main.js
index 6d5bf4864..5ca0af58e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -19,14 +19,12 @@ $(document).ready(function(){
     News.Objects.Menu = new News.Menu($('#view').hasClass('show_all'));
     News.Objects.Items = new News.Items();
 
-    News.Objects.Menu.bindOn('#feeds ul');
+    News.Objects.Menu.bindOn('#feeds > ul');
 
     // basic setup
     News.Feed.updateAll();
     var updateInterval = 200000; //how often the feeds should update (in msec)
     setInterval('News.Feed.updateAll()', updateInterval);
-
-    // bind listeners on the menu
     
 
 
diff --git a/js/menu.js b/js/menu.js
index 6689f30ea..fc3a34f36 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -46,7 +46,11 @@ Creating nodes:
     var parentId = 0;
     var nodeType = News.MenuNodeType.Feed;
     var nodeId = 6;
-    var nodeData = "<some>html</some>";
+    var nodeData = {
+        title: 'hi',
+        icon: 'some/icon.png',
+        unreadCount: 3
+    };
     menu.addNode(parentId, nodeType, nodeId, nodeData);
 
 
@@ -123,33 +127,58 @@ var t = t || function(app, string){ return string; }; // mock translation for lo
      * @param parentId the id of the parent folder, 0 for root
      * @param type the type (MenuNodeType)
      * @param id the id
-     * @param data the html of the node
+     * @param data a json array with the data for the element:
+     *   {title: '', icon: 'img/png.png', 'unreadCount': 3}
      */
     Menu.prototype.addNode = function(parentId, type, id, data){
         var $parentNode;
-        if(id === 0){
+        if(parseInt(parentId) === 0){
             $parentNode = this._$root;
         } else {
-            $parentNode = $('.' + this._menuNodeTypeToClass(MenuNodeType.Folder) + '[data-id="' + parentId + '"]');
+            $parentNode = $('.' + this._menuNodeTypeToClass(MenuNodeType.Folder) + '[data-id="' + parentId + '"] ul');
+            // every folder we add to should be opened again
+            $parentNode.parent().addClass('open');
+            $parentNode.show();
         }
 
-        $parentNode.append(data);
-
+        var $html;
+        var icon = 'url("' + data.icon + '")';
         switch(type){
             case MenuNodeType.Feed:
-                this._bindFeed(data);
+                $html = this._$mockFeed.clone();
                 break;
             case MenuNodeType.Folder:
-                this._bindFolder(data);
+                $html = this._$mockFolder.clone();
+                break;
+            default:
+                console.log('Can only create folders or feeds');
                 break;
         }   
+
+        $html.children('.title').html(data.title);
+        $html.children('.title').css('background-image', icon);
+        $html.children('.unread_items_counter').html(data.unreadCount);
+        $html.attr('data-id', id);
+        $html.children('ul').attr('data-id', id);
+
+        switch(type){
+            case MenuNodeType.Feed:
+                this._bindFeed($html);
+                break;
+            case MenuNodeType.Folder:
+                this._bindFolder($html);
+                break;
+        }
+
+        $parentNode.append($html);
+        this._resetOpenFolders();
     };
 
     /**
      * Updates the title and/or unread count of a node
      * @param type the type (MenuNodeType)
      * @param id the id
-     * @param data a json array with the data for the node
+     * @param data a json array with the data for the node {title: '', 'unreadCount': 3}
      */
     Menu.prototype.updateNode = function(type, id, data){
         var $node = $('.' + this._menuNodeTypeToClass(type) + '[data-id="' + id + '"]');
@@ -223,6 +252,13 @@ var t = t || function(app, string){ return string; }; // mock translation for lo
      */
     Menu.prototype.bindOn = function(cssSelector){
         var self = this;
+        // remove mock elements
+        this._$mockFolder = $('.mock.folder').detach();
+        this._$mockFolder.removeClass('mock open');
+        this._$mockFeed = $('.mock.feed').detach();
+        this._$mockFeed.removeClass('mock');
+
+        // bind menu
         this._$root = $(cssSelector);
         this._id = this._$root.data('id');
         this._$root.children('li').each(function(){
@@ -232,6 +268,7 @@ var t = t || function(app, string){ return string; }; // mock translation for lo
         this._$activeFeed = $('#feeds .active');
         this._activeFeedId = this._$activeFeed.data('id');
         this._activeFeedType = this._listItemToMenuNodeType(this._$activeFeed);
+        
     };
 
     /**
diff --git a/templates/part.feeds.php b/templates/part.feeds.php
index b3dc598fa..b06488e26 100644
--- a/templates/part.feeds.php
+++ b/templates/part.feeds.php
@@ -56,4 +56,13 @@ $starredCount = $itemMapper->countEveryItemByStatus(OCA\News\StatusFlag::IMPORTA
 </li>
 
 <?php
+	// provide mock feed and folder elements for js menu
+	$mockFolder = new OCP\Template("news", "part.listfolder");
+	$mockFolder->assign('mock', true);
+	$mockFolder->printpage();
+
+	$mockFolder = new OCP\Template("news", "part.listfeed");
+	$mockFolder->assign('mock', true);
+	$mockFolder->printpage();
+
 	print_collection_list($allfeeds);
diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php
index c8d468675..b20cc52b9 100644
--- a/templates/part.listfeed.php
+++ b/templates/part.listfeed.php
@@ -2,16 +2,26 @@
 
 $l = new OC_l10n('news');
 
-$feed = isset($_['feed']) ? $_['feed'] : null;
-$unreadItemsCount = isset($_['unreadItemsCount']) ? $_['unreadItemsCount'] : null;
-
-$favicon = $feed->getFavicon();
-if ($favicon == null) {
+if(isset($_['mock'])){
+    $feedTitle = '';
+    $feedId = -1;
+    $unreadItemsCount = -1;
     $favicon = OCP\Util::imagePath('core', 'actions/public.svg');
+} else {
+    $feed = isset($_['feed']) ? $_['feed'] : null;
+    $feedTitle = htmlspecialchars_decode($feed->getTitle());
+    $feedId =  $feed->getId();
+    $unreadItemsCount = isset($_['unreadItemsCount']) ? $_['unreadItemsCount'] : null;
+    $favicon = $feed->getFavicon();
+    if ($favicon == null) {
+        $favicon = OCP\Util::imagePath('core', 'actions/public.svg');
+    }
 }
 
-echo '<li class="feed" data-id="' . $feed->getId() . '">';
-    echo '<a style="background-image: url(' . $favicon . ');" href="#" class="title">' . htmlspecialchars_decode($feed->getTitle()) .'</a>';
+$mockClass = isset($_['mock']) ? 'mock' : '';
+
+echo '<li class="feed ' . $mockClass . '" data-id="' . $feedId . '">';
+    echo '<a style="background-image: url(' . $favicon . ');" href="#" class="title">' . $feedTitle .'</a>';
 	echo '<span class="unread_items_counter">' . $unreadItemsCount . '</span>';
     echo '<span class="buttons">';
         echo '<button class="svg action feeds_delete" title="' . $l->t('Delete feed') . '"></button>';
diff --git a/templates/part.listfolder.php b/templates/part.listfolder.php
index 0f02198f1..cf6a1c5e1 100644
--- a/templates/part.listfolder.php
+++ b/templates/part.listfolder.php
@@ -1,15 +1,28 @@
 <?php
 
-$folder = isset($_['folder']) ? $_['folder'] : null;
-
 $l = new OC_l10n('news');
 
-echo '<li class="folder open" data-id="' . $folder->getId() . '">';
+if(isset($_['mock'])){
+	$folderId = -1;
+	$folderName = '';
+} else {
+	$folder = isset($_['folder']) ? $_['folder'] : null;	
+	$folderId = $folder->getId();
+	$folderName = $folder->getName();
+}
+
+$mockClass = isset($_['mock']) ? 'mock' : '';
+
+echo '<li class="folder open ' . $mockClass . '" data-id="' . $folderId . '">';
 	echo '<button class="collapsable_trigger" title="' . $l->t('Collapse') . '"></button>';
-	echo '<a href="#" class="title">' . $folder->getName() .	'</a>';
+	echo '<a href="#" class="title">' . $folderName .	'</a>';
 	echo '<span class="buttons">';
 		echo '<button class="svg action feeds_delete" title="' . $l->t('Delete folder') . '"></button>';
 		echo '<button class="svg action feeds_edit" title="' . $l->t('Rename folder') . '"></button>';
 		echo '<button class="svg action feeds_markread" title="' . $l->t('Mark all read') . '"></button>';
 	echo '</span>';
-	echo '<ul data-id="' . $folder->getId() . '">';
\ No newline at end of file
+	echo '<ul data-id="' . $folderId . '">';
+
+if(isset($_['mock'])){
+	echo '</ul>';
+}
\ No newline at end of file