From 2e316f8f641f2cd48511ee57ffa9d031db34af39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien?= <dav.aurelien@gmail.com>
Date: Sun, 14 Mar 2021 22:11:24 +0100
Subject: Add directive ClickOutside for hide dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Aurélien <dav.aurelien@gmail.com>
---
 js/controller/ContentController.js |  14 +++-
 js/controller/ShareController.js   |   6 --
 js/directive/ClickOutside.js       |  31 +++++++++
 templates/part.content.php         | 129 +++++++++++++++++++------------------
 4 files changed, 109 insertions(+), 71 deletions(-)
 create mode 100644 js/directive/ClickOutside.js

diff --git a/js/controller/ContentController.js b/js/controller/ContentController.js
index 15459c01b..ab01bf0cd 100644
--- a/js/controller/ContentController.js
+++ b/js/controller/ContentController.js
@@ -12,6 +12,7 @@ app.controller('ContentController', function (Publisher, FeedResource, ItemResou
                                               $filter) {
     'use strict';
 
+    this.showDropdown = [];
     var self = this;
     ItemResource.clear();
 
@@ -222,4 +223,15 @@ app.controller('ContentController', function (Publisher, FeedResource, ItemResou
     };
 
     this.activeItem = this.getFirstItem();
-});
\ No newline at end of file
+
+    this.openDropdown = function(itemId){
+        let actualItem = this.showDropdown[itemId];
+        this.showDropdown = [];
+        this.showDropdown[itemId] = !actualItem;
+    };
+
+    this.hide = function(){
+        this.showDropdown = [];
+    };
+
+});
diff --git a/js/controller/ShareController.js b/js/controller/ShareController.js
index 8d7235d89..eb056ce19 100644
--- a/js/controller/ShareController.js
+++ b/js/controller/ShareController.js
@@ -12,12 +12,6 @@
 app.controller('ShareController', function (ShareResource, Loading) {
     'use strict';
 
-    this.showDropDown = false;
-
-    this.toggleDropdown = function() {
-        this.showDropDown = !this.showDropDown;
-    };
-
     /** Array containing users to share an item with */
     this.userList = [];
 
diff --git a/js/directive/ClickOutside.js b/js/directive/ClickOutside.js
new file mode 100644
index 000000000..7021a6330
--- /dev/null
+++ b/js/directive/ClickOutside.js
@@ -0,0 +1,31 @@
+/**
+* Nextcloud - News
+*
+* This file is licensed under the Affero General Public License version 3 or
+* later. See the COPYING file.
+*
+* @author Marco Nassabain <marco.nassabain@hotmail.com>
+* @author Nicolas Wendling <nicolas.wendling1011@gmail.com>
+* @author Jimmy Huynh <natorisaki@gmail.com>
+* @author Aurélien David <dav.aurelien@gmail.com>
+*/
+app.directive('clickOutside', function ($document) {
+    'use strict';
+
+    return {
+        restrict: 'A',
+        scope: {
+            clickOutside: '&'
+        },
+        link: function (scope, el) {
+
+            $document.on('click', function (e) {
+                if (el !== e.target && !el[0].contains(e.target)) {
+                    scope.$apply(function () {
+                        scope.$eval(scope.clickOutside);
+                    });
+                }
+            });
+        }
+    };
+});
diff --git a/templates/part.content.php b/templates/part.content.php
index e02713bee..e8c909bfc 100644
--- a/templates/part.content.php
+++ b/templates/part.content.php
@@ -88,74 +88,75 @@
                             ?>">
                         </button>
                     </li>
+
                     <!-- DROPDOWN SHARE -->
-                    <li ng-controller="ShareController as Share"
-                        class="util dropdown"
-                        news-stop-propagation>
-                        <button class="icon-share share dropbtn"
-                            title="<?php p($l->t('Share')) ?>"
-                            ng-click="Share.toggleDropdown()">
-                        </button>
+                        <li ng-controller="ShareController as Share"
+                            class="util dropdown"
+                            news-stop-propagation>
+                            <button class="icon-share share dropbtn"
+                                title="<?php p($l->t('Share')) ?>"
+                                ng-click="Content.openDropdown(item.id)">
+                            </button>
+                            <ng-container click-outside="Content.hide()">
+                                <div
+                                    ng-if="Content.showDropdown[item.id]"
+                                    style="margin-top: 2.8em;"
+                                    class="dropdown-content">
+                                    <!-- Share with users -->
+                                    <p class="label-group"><?php p($l->t('Share with users')) ?></p>
+                                    <form ng-submit=""
+                                        name="contactForm"
+                                        autocomplete="off">
+                                        <fieldset class="contact-input">
+                                            <input
+                                                ng-model="nameQuery"
+                                                ng-model-options="{debounce: 400}"
+                                                ng-change="Share.searchUsers(nameQuery)"
+                                                type="text"
+                                                placeholder="<?php p($l->t('Username')) ?>"
+                                                title="<?php p($l->t('Username')) ?>"
+                                                name="contactName"
+                                                required
+                                                style="width: 200px">
+                                                <div ng-if="App.loading.isLoading('user')"
+                                                    ng-class="{'icon-loading-small': App.loading.isLoading('user') }">
+                                                </div>
+                                        </fieldset>
+                                    </form>
+                                    <div style="margin-left: 2em; font-size: 0.85em;"
+                                        ng-if="!(Share.userList.length > 0) && nameQuery && !App.loading.isLoading('user')">
+                                        <?php p($l->t('No users found')) ?>
+                                    </div>
+                                    <a
+                                        ng-repeat="user in Share.userList"
+                                        class="icon-category-installed pr-3"
+                                        ng-click="Share.shareItem(item.id, user.value.shareWith)">
+                                        {{ user.label }}
+                                        <span class="right" style="margin-top: 0.9em; margin-right: 1em"
+                                            ng-class="{'icon-loading-small': Share.isLoading(user.value.shareWith), 'icon-checkmark': Share.isStatus(item.id, user.value.shareWith, true), 'icon-close': Share.isStatus(item.id, user.value.shareWith, false)}">
+                                        </span>
+                                    </a>
 
-                        <div
-                            ng-if="Share.showDropDown"
-                            style="margin-top: 2.8em;"
-                            class="dropdown-content">
-                            <!-- Share with users -->
-                            <p class="label-group"><?php p($l->t('Share with users')) ?></p>
-                            <form ng-submit=""
-                                name="contactForm"
-                                autocomplete="off">
-                                <fieldset class="contact-input">
-                                    <input
-                                        ng-model="nameQuery"
-                                        ng-model-options="{debounce: 400}"
-                                        ng-change="Share.searchUsers(nameQuery)"
-                                        type="text"
-                                        placeholder="<?php p($l->t('Username')) ?>"
-                                        title="<?php p($l->t('Username')) ?>"
-                                        name="contactName"
-                                        required
-                                        style="width: 200px">
-                                        <div ng-if="App.loading.isLoading('user')"
-                                            ng-class="{'icon-loading-small': App.loading.isLoading('user') }">
+                                    <p class="label-group"> <?php p($l->t('Share on social media')) ?> </p>
+                                    <div class="row">
+                                        <div ng-if="Share.isSocialAppEnabled('facebook')" class="col-4">
+                                            <a target="_blank"
+                                                class="icon-dropdown icon-facebook pr-5"
+                                                ng-href="{{Share.getFacebookUrl(item.url)}}"></a>
                                         </div>
-                                </fieldset>
-                            </form>
-
-                            <div style="margin-left: 2em; font-size: 0.85em;"
-                                ng-if="!(Share.userList.length > 0) && nameQuery && !App.loading.isLoading('user')">
-                                <?php p($l->t('No users found')) ?>
-                            </div>
-                            <a
-                                ng-repeat="user in Share.userList"
-                                class="icon-category-installed pr-3"
-                                ng-click="Share.shareItem(item.id, user.value.shareWith)">
-                                {{ user.label }}
-                                <span class="right" style="margin-top: 0.9em; margin-right: 1em"
-                                    ng-class="{'icon-loading-small': Share.isLoading(user.value.shareWith), 'icon-checkmark': Share.isStatus(item.id, user.value.shareWith, true), 'icon-close': Share.isStatus(item.id, user.value.shareWith, false)}">
-                                </span>
-                            </a>
-
-                            <p class="label-group"> <?php p($l->t('Share on social media')) ?> </p>
-                            <div class="row">
-                                <div ng-if="Share.isSocialAppEnabled('facebook')" class="col-4">
-                                    <a target="_blank"
-                                        class="icon-dropdown icon-facebook pr-5"
-                                        ng-href="{{Share.getFacebookUrl(item.url)}}"></a>
-                                </div>
-                                <div ng-if="Share.isSocialAppEnabled('twitter')" class="col-4">
-                                    <a target="_blank"
-                                        class="icon-dropdown icon-twitter pr-5"
-                                        ng-href="{{Share.getTwitterUrl(item.url)}}"></a>
-                                </div>
-                                <div ng-if="Share.isSocialAppEnabled('email')" class="col-4">
-                                    <a class="icon-dropdown icon-mail pr-5"
-                                        ng-href="mailto:?subject=<?php p($l->t('I wanted you to see this article')) ?>&amp;body=<?php p($l->t('Check out this article')) ?>{{ ::item.url }}"></a>
+                                        <div ng-if="Share.isSocialAppEnabled('twitter')" class="col-4">
+                                            <a target="_blank"
+                                                class="icon-dropdown icon-twitter pr-5"
+                                                ng-href="{{Share.getTwitterUrl(item.url)}}"></a>
+                                        </div>
+                                        <div ng-if="Share.isSocialAppEnabled('email')" class="col-4">
+                                            <a class="icon-dropdown icon-mail pr-5"
+                                                ng-href="mailto:?subject=<?php p($l->t('I wanted you to see this article')) ?>&amp;body=<?php p($l->t('Check out this article')) ?>{{ ::item.url }}"></a>
+                                        </div>
+                                    </div>
                                 </div>
-                            </div>
-                        </div>
-                    </li>
+                            </ng-container>
+                        </li>
                     <!-- END DROPDOWN -->
 
                     <li class="util more" news-stop-propagation ng-hide="noPlugins">
-- 
cgit v1.2.3