diff options
-rw-r--r-- | js/controller/ContentController.js | 14 | ||||
-rw-r--r-- | js/controller/ShareController.js | 6 | ||||
-rw-r--r-- | js/directive/ClickOutside.js | 31 | ||||
-rw-r--r-- | templates/part.content.php | 129 |
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')) ?>&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')) ?>&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"> |