diff options
author | Bernhard Posselt <nukeawhale@gmail.com> | 2013-02-12 11:22:18 +0100 |
---|---|---|
committer | Bernhard Posselt <nukeawhale@gmail.com> | 2013-02-12 11:22:40 +0100 |
commit | a75e37f56963bc55faf182811237cee8a4172fb7 (patch) | |
tree | 2c4048d9ffc6188d6886cafa4f4c4c38b089a1a8 | |
parent | a1e85b1e4cc145e65575c08702f2e72f5ced1235 (diff) |
slide areas with jquery and slide click directive
-rw-r--r-- | coffee/directives/clickslidetoggle.coffee | 46 | ||||
-rw-r--r-- | coffee/directives/hidesettingswhenfocuslost.coffee | 30 | ||||
-rw-r--r-- | css/addnew.css | 15 | ||||
-rw-r--r-- | js/app.js | 91 | ||||
-rw-r--r-- | templates/main.php | 8 | ||||
-rw-r--r-- | templates/part.addnew.php | 6 |
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; } @@ -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> |