summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAurélien <dav.aurelien@gmail.com>2021-03-14 22:11:24 +0100
committerSean Molenaar <SMillerDev@users.noreply.github.com>2021-04-08 23:17:31 +0200
commit2e316f8f641f2cd48511ee57ffa9d031db34af39 (patch)
tree6d3b14a1a8cb12aa5c562ed6a25cb7d9e05646e8
parent792082e2e0fcca32fffc7693a210ae2fa64d4c06 (diff)
Add directive ClickOutside for hide dropdown
Signed-off-by: Aurélien <dav.aurelien@gmail.com>
-rw-r--r--js/controller/ContentController.js14
-rw-r--r--js/controller/ShareController.js6
-rw-r--r--js/directive/ClickOutside.js31
-rw-r--r--templates/part.content.php129
4 files changed, 109 insertions, 71 deletions
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">