fix slideup

7 files changed, 176 insertions, 50 deletions

diff --git a/css/settings.css b/css/settings.css
index 74ada7c62..2f56f5ef1 100644
--- a/css/settings.css
+++ b/css/settings.css
@@ -1,25 +1,13 @@
 /**
  * ownCloud - News
  *
- * @author Bernhard Posselt
- * @copyright 2012 Bernhard Posselt dev@bernhard-posselt.com
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or any later version.
- *
- * This library is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
- *
- * You should have received a copy of the GNU Affero General Public
- * License along with this library.  If not, see <http://www.gnu.org/licenses/>.
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
  *
+ * @author Bernhard Posselt <dev@bernhard-posselt.com>
+ * @copyright Bernhard Posselt 2014
  */
 
-
 #app-settings input[type=file] {
 	opacity:0;
 	z-index:1001;
@@ -31,11 +19,15 @@
 	background-color: transparent !important;
 }
 
-
 #app-settings-content {
 	padding-bottom: 25px;
 }
 
+#app-settings-content h3 {
+	padding: 5px 0;
+	font-weight: bold;
+}
+
 #app-settings-content p {
 	padding-left: 10px;
 }
@@ -56,7 +48,7 @@
 }
 
 #app-settings .importing {
-	background-image: url('../img/loading.gif'); 
+	background-image: url('../img/loading.gif');
 	background-repeat: no-repeat;
 	background-position: 5px center;
 	background-size: 16px;
diff --git a/js/build/app.js b/js/build/app.js
index 743d10fba..1743a20a7 100644
--- a/js/build/app.js
+++ b/js/build/app.js
@@ -986,25 +986,19 @@ var $__build_47_app__ = function () {
           writable: true
         }), $__2;
       };
-      app.directive('newsTriggerClick', function () {
-        'use strict';
-        return function (scope, elm, attr) {
-          elm.click(function () {
-            $(attr.newsTriggerClick).trigger('click');
-          });
-        };
-      });
       app.directive('newsReadFile', function () {
         'use strict';
-        return function (scope, elm, attr) {
-          var file = elm[0].files[0];
-          var reader = new FileReader();
-          reader.onload = function (event) {
-            elm[0].value = 0;
-            scope.$fileContent = event.target.result;
-            scope.$apply(attr.newsReadFile);
-          };
-          reader.reasAsText(file);
+        return function (scope, elem, attr) {
+          elem.change(function () {
+            var file = elem[0].files[0];
+            var reader = new FileReader();
+            reader.onload = function (event) {
+              elem[0].value = 0;
+              scope.$fileContent = event.target.result;
+              scope.$apply(attr.newsReadFile);
+            };
+            reader.readAsText(file);
+          });
         };
       });
       app.directive('newsScroll', [
@@ -1099,12 +1093,74 @@ var $__build_47_app__ = function () {
           };
         }
       ]);
+      app.directive('newsSlideUp', [
+        '$rootScope',
+        '$document',
+        function ($rootScope, $document) {
+          'use strict';
+          return function (scope, elem, attr) {
+            var slideArea = elem;
+            var cssClass = false;
+            var options = scope.$eval(attr.newsSlideUp);
+            if (options) {
+              if (options.selector) {
+                slideArea = $(options.selector);
+              }
+              if (options.cssClass) {
+                cssClass = options.cssClass;
+              }
+              if (options.hideOnFocusLost) {
+                $($document[0].body).click(function () {
+                  $rootScope.$broadcast('newsSlideUp');
+                });
+                $rootScope.$on('newsSlideUp', function (scope, params) {
+                  if (params !== slideArea && slideArea.is(':visible') && !slideArea.is(':animated')) {
+                    slideArea.slideUp();
+                    if (cssClass) {
+                      elem.removeClass(cssClass);
+                    }
+                  }
+                });
+                slideArea.click(function (event) {
+                  $rootScope.$broadcast('newsSlideUp', slideArea);
+                  event.stopPropagation();
+                });
+                elem.click(function (event) {
+                  $rootScope.$broadcast('newsSlideUp', slideArea);
+                  event.stopPropagation();
+                });
+              }
+            }
+            elem.click(function () {
+              if (slideArea.is(':visible') && !slideArea.is(':animated')) {
+                slideArea.slideUp();
+                if (cssClass) {
+                  elem.removeClass(cssClass);
+                }
+              } else {
+                slideArea.slideDown();
+                if (cssClass) {
+                  elem.addClass(cssClass);
+                }
+              }
+            });
+          };
+        }
+      ]);
       app.directive('newsTooltip', function () {
         'use strict';
         return function (scope, elem) {
           elem.tooltip();
         };
       });
+      app.directive('newsTriggerClick', function () {
+        'use strict';
+        return function (scope, elm, attr) {
+          elm.click(function () {
+            $(attr.newsTriggerClick).trigger('click');
+          });
+        };
+      });
     }(window, document, angular, jQuery, OC, oc_requesttoken));
     return {};
   }();
\ No newline at end of file
diff --git a/js/directive/NewsReadFile.js b/js/directive/NewsReadFile.js
index d3ed5b80e..89ed0adfc 100644
--- a/js/directive/NewsReadFile.js
+++ b/js/directive/NewsReadFile.js
@@ -10,19 +10,22 @@
 app.directive('newsReadFile', () => {
     'use strict';
 
-    return (scope, elm, attr) => {
+    return (scope, elem, attr) => {
 
-        let file = elm[0].files[0];
-        let reader = new FileReader();
+        elem.change(() => {
 
-        reader.onload = (event) => {
-            elm[0].value = 0;
-            scope.$fileContent = event.target.result;
-            scope.$apply(attr.newsReadFile);  // FIXME: is there a more flexible
-                                              // solution where we dont have to
-                                              // bind the file to scope?
-        };
+            let file = elem[0].files[0];
+            let reader = new FileReader();
 
-        reader.reasAsText(file);
+            reader.onload = (event) => {
+                elem[0].value = 0;
+                // FIXME: is there a more flexible solution where we dont have
+                // to bind the file to scope?
+                scope.$fileContent = event.target.result;
+                scope.$apply(attr.newsReadFile);
+            };
+
+            reader.readAsText(file);
+        });
     };
 });
\ No newline at end of file
diff --git a/js/directive/NewsSlideUp.js b/js/directive/NewsSlideUp.js
new file mode 100644
index 000000000..437a119e7
--- /dev/null
+++ b/js/directive/NewsSlideUp.js
@@ -0,0 +1,75 @@
+/**
+ * ownCloud - News
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Bernhard Posselt <dev@bernhard-posselt.com>
+ * @copyright Bernhard Posselt 2014
+ */
+app.directive('newsSlideUp', ($rootScope, $document) => {
+    'use strict';
+
+    return (scope, elem, attr) => {
+        // defaults
+        let slideArea = elem;
+        let cssClass = false;
+
+        let options = scope.$eval(attr.newsSlideUp);
+
+        if (options) {
+            if (options.selector) {
+                slideArea = $(options.selector);
+            }
+
+            if (options.cssClass) {
+                cssClass = options.cssClass;
+            }
+
+
+            if (options.hideOnFocusLost) {
+                $($document[0].body).click(() => {
+                    $rootScope.$broadcast('newsSlideUp');
+                });
+
+                $rootScope.$on('newsSlideUp', (scope, params) => {
+                    if (params !== slideArea &&
+                        slideArea.is(':visible') &&
+                        !slideArea.is(':animated')) {
+
+                        slideArea.slideUp();
+
+                        if (cssClass) {
+                            elem.removeClass(cssClass);
+                        }
+                    }
+                });
+
+                slideArea.click((event) => {
+                    $rootScope.$broadcast('newsSlideUp', slideArea);
+                    event.stopPropagation();
+                });
+
+                elem.click((event) => {
+                    $rootScope.$broadcast('newsSlideUp', slideArea);
+                    event.stopPropagation();
+                });
+            }
+        }
+
+        elem.click(() => {
+            if (slideArea.is(':visible') && !slideArea.is(':animated')) {
+                slideArea.slideUp();
+                if (cssClass) {
+                    elem.removeClass(cssClass);
+                }
+            } else {
+                slideArea.slideDown();
+                if (cssClass) {
+                    elem.addClass(cssClass);
+                }
+            }
+        });
+
+    };
+});
\ No newline at end of file
diff --git a/js/directive/NewsForwardClick.js b/js/directive/NewsTriggerClick.js
index d5c43e442..d5c43e442 100644
--- a/js/directive/NewsForwardClick.js
+++ b/js/directive/NewsTriggerClick.js
diff --git a/templates/main.php b/templates/main.php
index f4a4263d6..aedf0bc36 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -42,8 +42,8 @@
 			<?php //print_unescaped($this->inc('part.showall')); ?>
 		</ul>
 
-		<div id="app-settings" ng-controller="SettingsController">
-			<!--<?php print_unescaped($this->inc('part.settings')) ?>-->
+		<div id="app-settings" ng-controller="SettingsController as Settings">
+			<?php print_unescaped($this->inc('part.settings')) ?>
 		</div>
 
 	</div>
diff --git a/templates/part.settings.php b/templates/part.settings.php
index b8f22cda2..81c3550d5 100644
--- a/templates/part.settings.php
+++ b/templates/part.settings.php
@@ -1,14 +1,14 @@
 <div id="app-settings-header">
 <button name="app settings"
   class="settings-button"
-  oc-click-slide-toggle="{
+  news-slide-up="{
     selector: '#app-settings-content',
     hideOnFocusLost: true,
     cssClass: 'opened'
   }"></button>
 </div>
 
-<div id="app-settings-content" ng-controller="SettingsController as Settings">
+<div id="app-settings-content">
   <h3><?php p($l->t('Settings')); ?></h3>
 
   <p ng-click="Settings.toggleSetting('compact')">