slide areas with jquery and slide click directive

6 files changed, 112 insertions, 84 deletions

diff --git a/coffee/directives/clickslidetoggle.coffee b/coffee/directives/clickslidetoggle.coffee
new file mode 100644
index 000000000..cea8560c0
--- /dev/null
+++ b/coffee/directives/clickslidetoggle.coffee
@@ -0,0 +1,46 @@
+###
+# ownCloud news app
+#
+# @author Alessandro Cosentino
+# @author Bernhard Posselt
+# Copyright (c) 2012 - Alessandro Cosentino <cosenal@gmail.com>
+# Copyright (c) 2012 - Bernhard Posselt <nukeawhale@gmail.com>
+#
+# This file is licensed under the Affero General Public License version 3 or
+# later.
+#
+# See the COPYING-README file
+#
+###
+
+###
+Used to slide up an area and can be customized by passing an expression.
+If selector is defined, a different area is slid up on click
+If hideOnFocusLost is defined, the slid up area will hide when the focus is lost
+###
+angular.module('News').directive 'clickSlideToggle', ->
+
+        return (scope, elm, attr) ->
+                options = scope.$eval(attr.clickSlideToggle)
+
+                if angular.isDefined(options.selector)
+                        slideArea = $(options.selector)
+                else
+                        slideArea = elm
+
+                elm.click ->
+                        if slideArea.is(':visible') and not slideArea.is(':animated')
+                                slideArea.slideUp()
+                        else
+                                slideArea.slideDown()
+
+                if angular.isDefined(options.hideOnFocusLost) and options.hideOnFocusLost
+                        $(document.body).click ->
+                                if slideArea.is(':visible') and not slideArea.is(':animated')
+                                        slideArea.slideUp()
+
+                        slideArea.click (e) ->
+                                e.stopPropagation()
+
+                        elm.click (e) ->
+                                e.stopPropagation()
diff --git a/coffee/directives/hidesettingswhenfocuslost.coffee b/coffee/directives/hidesettingswhenfocuslost.coffee
deleted file mode 100644
index 0a1f92fdf..000000000
--- a/coffee/directives/hidesettingswhenfocuslost.coffee
+++ /dev/null
@@ -1,30 +0,0 @@
-###
-# ownCloud news app
-#
-# @author Alessandro Cosentino
-# @author Bernhard Posselt
-# Copyright (c) 2012 - Alessandro Cosentino <cosenal@gmail.com>
-# Copyright (c) 2012 - Bernhard Posselt <nukeawhale@gmail.com>
-#
-# This file is licensed under the Affero General Public License version 3 or
-# later.
-#
-# See the COPYING-README file
-#
-###
-
-###
-# This is used to signal the settings bar that the app has been focused and that
-# it should hide
-###
-angular.module('News').directive 'hideSettingsWhenFocusLost', ['$rootScope', 
-($rootScope) ->
-
-	return (scope, elm, attr) ->
-		$(document.body).click ->
-			$rootScope.$broadcast('hidesettings')
-			scope.$apply attr.hideSettingsWhenFocusLost
-
-		$(elm).click (e) ->
-			e.stopPropagation()
-]
diff --git a/css/addnew.css b/css/addnew.css
index 3374aa04e..0630b0704 100644
--- a/css/addnew.css
+++ b/css/addnew.css
@@ -1,25 +1,12 @@
-.add-new {
-	overflow: hidden;
-}
-
 .add-new > a {
 	background-image: url('%appswebroot%/news/img/add.svg');
 }
 
 .add-new-popup {
-	-moz-transition: height 500ms ease 0s;
-	-o-transition: height 500ms ease 0s;
-	-webkit-transition: height 500ms ease 0s;
-	-ms-transition: height 500ms ease 0s;
-	transition: height 500ms ease 0s;
-	height: 0;
+        display: none;
 	padding: 0 15px;
 }
 
-.add-new-popup.open {
-	height: 170px;
-}
-
 .add-new-popup .personalblock:first-child legend {
 	padding-top: 15px;
 }
diff --git a/js/app.js b/js/app.js
index ce8f161c7..7f5108375 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2242,6 +2242,61 @@
   */
 
 
+  /*
+  Used to slide up an area and can be customized by passing an expression.
+  If selector is defined, a different area is slid up on click
+  If hideOnFocusLost is defined, the slid up area will hide when the focus is lost
+  */
+
+
+  angular.module('News').directive('clickSlideToggle', function() {
+    return function(scope, elm, attr) {
+      var options, slideArea;
+      options = scope.$eval(attr.clickSlideToggle);
+      if (angular.isDefined(options.selector)) {
+        slideArea = $(options.selector);
+      } else {
+        slideArea = elm;
+      }
+      elm.click(function() {
+        if (slideArea.is(':visible') && !slideArea.is(':animated')) {
+          return slideArea.slideUp();
+        } else {
+          return slideArea.slideDown();
+        }
+      });
+      if (angular.isDefined(options.hideOnFocusLost) && options.hideOnFocusLost) {
+        $(document.body).click(function() {
+          if (slideArea.is(':visible') && !slideArea.is(':animated')) {
+            return slideArea.slideUp();
+          }
+        });
+        slideArea.click(function(e) {
+          return e.stopPropagation();
+        });
+        return elm.click(function(e) {
+          return e.stopPropagation();
+        });
+      }
+    };
+  });
+
+  /*
+  # ownCloud news app
+  #
+  # @author Alessandro Cosentino
+  # @author Bernhard Posselt
+  # Copyright (c) 2012 - Alessandro Cosentino <cosenal@gmail.com>
+  # Copyright (c) 2012 - Bernhard Posselt <nukeawhale@gmail.com>
+  #
+  # This file is licensed under the Affero General Public License version 3 or
+  # later.
+  #
+  # See the COPYING-README file
+  #
+  */
+
+
   angular.module('News').directive('draggable', function() {
     return function(scope, elm, attr) {
       var details;
@@ -2425,42 +2480,6 @@
   */
 
 
-  /*
-  # This is used to signal the settings bar that the app has been focused and that
-  # it should hide
-  */
-
-
-  angular.module('News').directive('hideSettingsWhenFocusLost', [
-    '$rootScope', function($rootScope) {
-      return function(scope, elm, attr) {
-        $(document.body).click(function() {
-          $rootScope.$broadcast('hidesettings');
-          return scope.$apply(attr.hideSettingsWhenFocusLost);
-        });
-        return $(elm).click(function(e) {
-          return e.stopPropagation();
-        });
-      };
-    }
-  ]);
-
-  /*
-  # ownCloud news app
-  #
-  # @author Alessandro Cosentino
-  # @author Bernhard Posselt
-  # Copyright (c) 2012 - Alessandro Cosentino <cosenal@gmail.com>
-  # Copyright (c) 2012 - Bernhard Posselt <nukeawhale@gmail.com>
-  #
-  # This file is licensed under the Affero General Public License version 3 or
-  # later.
-  #
-  # See the COPYING-README file
-  #
-  */
-
-
   angular.module('News').directive('onEnter', function() {
     return function(scope, elm, attr) {
       return elm.bind('keyup', function(e) {
diff --git a/templates/main.php b/templates/main.php
index 5e3fec9b1..2b8cc1188 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -10,12 +10,14 @@
 			<?php print_unescaped($this->inc('part.showall')); ?>
 		</ul>
 
-		<div id="app-settings" ng-class="{open: showSettings==true}"
-			 ng-controller="SettingsController" hide-settings-when-focus-lost>
+                <div id="app-settings" ng-controller="SettingsController">
 			<div id="app-settings-header">
 				<button name="app settings" 
 						class="settings-button"
-						ng-click="showSettings=!showSettings"></button>
+                                                click-slide-toggle="{
+                                                        selector: '#app-settings-content',
+                                                        hideOnFocusLost: true
+                                                }"></button>
 			</div>
 			<div id="app-settings-content">
 				<?php print_unescaped($this->inc('part.settings')) ?>
diff --git a/templates/part.addnew.php b/templates/part.addnew.php
index 59dc00380..c791b86d6 100644
--- a/templates/part.addnew.php
+++ b/templates/part.addnew.php
@@ -1,5 +1,9 @@
 <li class="add-new" ng-controller="AddNewController">
-	<a class="list-title list-title-with-icon" ng-click="showAdd=!showAdd" href="#">
+        <a class="list-title list-title-with-icon" ng-click="showAdd=!showAdd"
+                        click-slide-toggle="{
+                                selector: '.add-new-popup',
+                                hideOnFocusLost: true
+                        }" href="#">
 		<?php p($l->t('New'))?>
 	</a>