server/core/js/sharedialoglinkshareview.js
John Molakvoæ (skjnldsv) 106ed07d6a Copy link outside menu
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
2018-11-01 21:30:45 +01:00

807 lines
23 KiB
JavaScript

/*
* Copyright (c) 2015
*
* This file is licensed under the Affero General Public License version 3
* or later.
*
* See the COPYING-README file.
*
*/
/* globals Clipboard, Handlebars */
(function() {
if (!OC.Share) {
OC.Share = {};
}
var PASSWORD_PLACEHOLDER = '**********';
var PASSWORD_PLACEHOLDER_MESSAGE = t('core', 'Choose a password for the public link');
var PASSWORD_PLACEHOLDER_MESSAGE_OPTIONAL = t('core', 'Choose a password for the public link or press the "Enter" key');
/**
* @class OCA.Share.ShareDialogLinkShareView
* @member {OC.Share.ShareItemModel} model
* @member {jQuery} $el
* @memberof OCA.Sharing
* @classdesc
*
* Represents the GUI of the share dialogue
*
*/
var ShareDialogLinkShareView = OC.Backbone.View.extend({
/** @type {string} **/
id: 'shareDialogLinkShare',
/** @type {OC.Share.ShareConfigModel} **/
configModel: undefined,
/** @type {boolean} **/
showLink: true,
/** @type {boolean} **/
showPending: false,
events: {
// open menu
'click .share-menu .icon-more': 'onToggleMenu',
// hide download
'change .hideDownloadCheckbox': 'onHideDownloadChange',
// password
'focusout input.linkPassText': 'onPasswordEntered',
'keyup input.linkPassText': 'onPasswordKeyUp',
'change .showPasswordCheckbox': 'onShowPasswordClick',
'change .publicEditingCheckbox': 'onAllowPublicEditingChange',
// copy link url
'click .linkText': 'onLinkTextClick',
// social
'click .pop-up': 'onPopUpClick',
// permission change
'change .publicUploadRadio': 'onPublicUploadChange',
// expire date
'click .expireDate' : 'onExpireDateChange',
'change .datepicker': 'onChangeExpirationDate',
'click .datepicker' : 'showDatePicker',
// note
'click .share-add': 'showNoteForm',
'click .share-note-delete': 'deleteNote',
'click .share-note-submit': 'updateNote',
// remove
'click .unshare': 'onUnshare',
// new share
'click .new-share': 'newShare',
},
initialize: function(options) {
var view = this;
this.model.on('change:permissions', function() {
view.render();
});
this.model.on('change:itemType', function() {
view.render();
});
this.model.on('change:allowPublicUploadStatus', function() {
view.render();
});
this.model.on('change:hideFileListStatus', function() {
view.render();
});
if(!_.isUndefined(options.configModel)) {
this.configModel = options.configModel;
} else {
throw 'missing OC.Share.ShareConfigModel';
}
var clipboard = new Clipboard('.clipboard-button');
clipboard.on('success', function(e) {
var $trigger = $(e.trigger);
$trigger.tooltip('hide')
.attr('data-original-title', t('core', 'Copied!'))
.tooltip('fixTitle')
.tooltip({placement: 'bottom', trigger: 'manual'})
.tooltip('show');
_.delay(function() {
$trigger.tooltip('hide')
.attr('data-original-title', t('core', 'Copy link'))
.tooltip('fixTitle')
}, 3000);
});
clipboard.on('error', function (e) {
var $trigger = $(e.trigger);
var $menu = $trigger.next('.share-menu').find('.popovermenu');
var $linkTextMenu = $menu.find('li.linkTextMenu');
var $input = $linkTextMenu.find('.linkText');
var $li = $trigger.closest('li[data-share-id]');
var shareId = $li.data('share-id');
// show menu
OC.showMenu(null, $menu);
this._menuOpen = shareId;
var actionMsg = '';
if (/iPhone|iPad/i.test(navigator.userAgent)) {
actionMsg = t('core', 'Not supported!');
} else if (/Mac/i.test(navigator.userAgent)) {
actionMsg = t('core', 'Press ⌘-C to copy.');
} else {
actionMsg = t('core', 'Press Ctrl-C to copy.');
}
$linkTextMenu.removeClass('hidden');
$input.select();
$input.tooltip('hide')
.attr('data-original-title', actionMsg)
.tooltip('fixTitle')
.tooltip({placement: 'bottom', trigger: 'manual'})
.tooltip('show');
_.delay(function () {
$input.tooltip('hide');
$input.attr('data-original-title', t('core', 'Copy'))
.tooltip('fixTitle');
}, 3000);
});
},
newShare: function() {
var self = this;
var $loading = this.$el.find('.icon-loading-small').eq(0);
if(!$loading.hasClass('hidden')) {
// in process
return false;
}
// hide all icons and show loading
this.$el.find('.icon').addClass('hidden');
$loading.removeClass('hidden');
this.model.saveLinkShare({}, {
success: function() {
$loading.addClass('hidden');
self.$el.find('.icon').removeClass('hidden');
self.render();
},
error: function(obj, msg) {
OC.Notification.showTemporary(t('core', 'Unable to create a link share'));
$loading.addClass('hidden');
self.$el.find('.icon').removeClass('hidden');
}
})
},
onLinkTextClick: function(event) {
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var $el = $li.find('.linkText');
$el.focus();
$el.select();
},
onHideDownloadChange: function(event) {
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var shareId = $li.data('share-id');
var $checkbox = $li.find('.hideDownloadCheckbox');
$checkbox.siblings('.icon-loading-small').removeClass('hidden').addClass('inlineblock');
var hideDownload = false;
if($checkbox.is(':checked')) {
hideDownload = true;
}
this.model.saveLinkShare({
hideDownload: hideDownload,
cid: shareId
}, {
success: function() {
$checkbox.siblings('.icon-loading-small').addClass('hidden').removeClass('inlineblock');
},
error: function(obj, msg) {
OC.Notification.showTemporary(t('core', 'Unable to toggle this option'));
$checkbox.siblings('.icon-loading-small').addClass('hidden').removeClass('inlineblock');
}
});
},
onShowPasswordClick: function(event) {
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var shareId = $li.data('share-id');
$li.find('.linkPass').slideToggle(OC.menuSpeed);
$li.find('.linkPassMenu').toggleClass('hidden');
if(!$li.find('.showPasswordCheckbox').is(':checked')) {
this.model.saveLinkShare({
password: '',
cid: shareId
});
} else {
if (!OC.Util.isIE()) {
$li.find('.linkPassText').focus();
}
}
},
onPasswordKeyUp: function(event) {
if(event.keyCode === 13) {
this.onPasswordEntered(event);
}
},
onPasswordEntered: function(event) {
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var shareId = $li.data('share-id');
var $loading = $li.find('.linkPassMenu .icon-loading-small');
if (!$loading.hasClass('hidden')) {
// still in process
return;
}
var $input = $li.find('.linkPassText');
$input.removeClass('error');
var password = $input.val();
if ($li.find('.linkPassText').attr('placeholder') === PASSWORD_PLACEHOLDER_MESSAGE_OPTIONAL) {
// in IE9 the password might be the placeholder due to bugs in the placeholders polyfill
if(password === PASSWORD_PLACEHOLDER_MESSAGE_OPTIONAL) {
password = '';
}
} else {
// in IE9 the password might be the placeholder due to bugs in the placeholders polyfill
if(password === '' || password === PASSWORD_PLACEHOLDER || password === PASSWORD_PLACEHOLDER_MESSAGE) {
return;
}
}
$loading
.removeClass('hidden')
.addClass('inlineblock');
this.model.saveLinkShare({
password: password,
cid: shareId
}, {
complete: function(model) {
$loading.removeClass('inlineblock').addClass('hidden');
},
error: function(model, msg) {
// destroy old tooltips
$input.tooltip('destroy');
$input.addClass('error');
$input.attr('title', msg);
$input.tooltip({placement: 'bottom', trigger: 'manual'});
$input.tooltip('show');
}
});
},
onAllowPublicEditingChange: function(event) {
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var shareId = $li.data('share-id');
var $checkbox = $li.find('.publicEditingCheckbox');
$checkbox.siblings('.icon-loading-small').removeClass('hidden').addClass('inlineblock');
var permissions = OC.PERMISSION_READ;
if($checkbox.is(':checked')) {
permissions = OC.PERMISSION_UPDATE | OC.PERMISSION_READ;
}
this.model.saveLinkShare({
permissions: permissions,
cid: shareId
}, {
success: function() {
$checkbox.siblings('.icon-loading-small').addClass('hidden').removeClass('inlineblock');
},
error: function(obj, msg) {
OC.Notification.showTemporary(t('core', 'Unable to toggle this option'));
$checkbox.siblings('.icon-loading-small').addClass('hidden').removeClass('inlineblock');
}
});
},
onPublicUploadChange: function(event) {
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var shareId = $li.data('share-id');
var permissions = event.currentTarget.value;
this.model.saveLinkShare({
permissions: permissions,
cid: shareId
});
},
showNoteForm: function(event) {
event.preventDefault();
event.stopPropagation();
var self = this;
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var $menu = $element.closest('li');
var $form = $menu.next('li.share-note-form');
// show elements
$menu.find('.share-note-delete').toggle();
$form.toggleClass('hidden');
$form.find('textarea').focus();
},
deleteNote: function(event) {
event.preventDefault();
event.stopPropagation();
var self = this;
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var shareId = $li.data('share-id');
var $menu = $element.closest('li');
var $form = $menu.next('li.share-note-form');
$form.find('.share-note').val('');
$form.addClass('hidden');
$menu.find('.share-note-delete').hide();
self.sendNote('', shareId, $menu);
},
updateNote: function(event) {
event.preventDefault();
event.stopPropagation();
var self = this;
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var shareId = $li.data('share-id');
var $form = $element.closest('li.share-note-form');
var $menu = $form.prev('li');
var message = $form.find('.share-note').val().trim();
if (message.length < 1) {
return;
}
self.sendNote(message, shareId, $menu);
},
sendNote: function(note, shareId, $menu) {
var $form = $menu.next('li.share-note-form');
var $submit = $form.find('input.share-note-submit');
var $error = $form.find('input.share-note-error');
$submit.prop('disabled', true);
$menu.find('.icon-loading-small').removeClass('hidden');
$menu.find('.icon-edit').hide();
var complete = function() {
$submit.prop('disabled', false);
$menu.find('.icon-loading-small').addClass('hidden');
$menu.find('.icon-edit').show();
};
var error = function() {
$error.show();
setTimeout(function() {
$error.hide();
}, 3000);
};
// send data
$.ajax({
method: 'PUT',
url: OC.linkToOCS('apps/files_sharing/api/v1/shares',2) + shareId + '?' + OC.buildQueryString({format: 'json'}),
data: { note: note },
complete : complete,
error: error
});
},
render: function() {
this.$el.find('.has-tooltip').tooltip();
var linkShareTemplate = this.template();
var resharingAllowed = this.model.sharePermissionPossible();
if(!resharingAllowed
|| !this.showLink
|| !this.configModel.isShareWithLinkAllowed())
{
var templateData = {shareAllowed: false};
if (!resharingAllowed) {
// add message
templateData.noSharingPlaceholder = t('core', 'Resharing is not allowed');
}
this.$el.html(linkShareTemplate(templateData));
return this;
}
var publicUpload =
this.model.isFolder()
&& this.model.createPermissionPossible()
&& this.configModel.isPublicUploadEnabled();
var publicEditingChecked = '';
if(this.model.isPublicEditingAllowed()) {
publicEditingChecked = 'checked="checked"';
}
var isPasswordEnforced = this.configModel.get('enforcePasswordForPublicLink');
var isPasswordEnabledByDefault = this.configModel.get('enableLinkPasswordByDefault') === true;
var passwordPlaceholderInitial = this.configModel.get('enforcePasswordForPublicLink')
? PASSWORD_PLACEHOLDER_MESSAGE : PASSWORD_PLACEHOLDER_MESSAGE_OPTIONAL;
var publicEditable =
!this.model.isFolder()
&& this.model.updatePermissionPossible();
var social = [];
OC.Share.Social.Collection.each(function(model) {
var url = model.get('url');
url = url.replace('{{reference}}', link);
social.push({
url: url,
label: t('core', 'Share to {name}', {name: model.get('name')}),
name: model.get('name'),
iconClass: model.get('iconClass'),
newWindow: model.get('newWindow')
});
});
var isExpirationEnforced = this.configModel.get('isDefaultExpireDateEnforced');
// what if there is another date picker on that page?
var minDate = new Date();
// min date should always be the next day
minDate.setDate(minDate.getDate()+1);
$.datepicker.setDefaults({
minDate: minDate
});
this.$el.find('.datepicker').datepicker({dateFormat : 'dd-mm-yy'});
var popoverBase = {
social: social,
urlLabel: t('core', 'Link'),
hideDownloadLabel: t('core', 'Hide download'),
enablePasswordLabel: t('core', 'Password protect'),
passwordLabel: t('core', 'Password'),
passwordPlaceholderInitial: passwordPlaceholderInitial,
publicUpload: publicUpload,
publicEditing: publicEditable,
publicEditingChecked: publicEditingChecked,
publicEditingLabel: t('core', 'Allow editing'),
mailPrivatePlaceholder: t('core', 'Email link to person'),
mailButtonText: t('core', 'Send'),
publicUploadRWLabel: t('core', 'Allow upload and editing'),
publicUploadRLabel: t('core', 'Read only'),
publicUploadWLabel: t('core', 'File drop (upload only)'),
publicUploadRWValue: OC.PERMISSION_UPDATE | OC.PERMISSION_CREATE | OC.PERMISSION_READ | OC.PERMISSION_DELETE,
publicUploadRValue: OC.PERMISSION_READ,
publicUploadWValue: OC.PERMISSION_CREATE,
expireDateLabel: t('core', 'Set expiration date'),
expirationLabel: t('core', 'Expiration'),
expirationDatePlaceholder: t('core', 'Expiration date'),
isExpirationEnforced: isExpirationEnforced,
isPasswordEnforced: isPasswordEnforced,
defaultExpireDate: moment().add(1, 'day').format('DD-MM-YYYY'), // Can't expire today
addNoteLabel: t('core', 'Note to recipient'),
unshareLabel: t('core', 'Unshare'),
newShareLabel: t('core', 'New share link'),
};
var pendingPopoverBase = {
enablePasswordLabel: t('core', 'Password protect'),
passwordLabel: t('core', 'Password'),
passwordPlaceholderInitial: passwordPlaceholderInitial,
isPasswordEnforced: isPasswordEnforced,
};
var linkShares = this.getShareeList();
if(_.isArray(linkShares)) {
for (var i = 0; i < linkShares.length; i++) {
var popover = this.getPopoverObject(linkShares[i])
var pendingPopover = this.getPendingPopoverObject(linkShares[i])
linkShares[i].popoverMenu = this.popoverMenuTemplate(_.extend({}, popoverBase, popover));
linkShares[i].pendingPopoverMenu = this.pendingPopoverMenuTemplate(_.extend({}, pendingPopoverBase, pendingPopover));
}
}
this.$el.html(linkShareTemplate({
linkShares: linkShares,
shareAllowed: true,
nolinkShares: linkShares.length === 0,
newShareLabel: t('core', 'Share link'),
newShareTitle: t('core', 'New share link')
}));
this.delegateEvents();
// new note autosize
autosize(this.$el.find('.share-note-form .share-note'));
return this;
},
onToggleMenu: function(event) {
event.preventDefault();
event.stopPropagation();
var $element = $(event.target);
var $li = $element.closest('li[data-share-id]');
var $menu = $li.find('.sharingOptionsGroup .popovermenu');
var shareId = $li.data('share-id');
OC.showMenu(null, $menu);
this._menuOpen = shareId;
},
/**
* @returns {Function} from Handlebars
* @private
*/
template: function () {
return OC.Share.Templates['sharedialoglinkshareview'];
},
/**
* renders the popover template and returns the resulting HTML
*
* @param {Object} data
* @returns {string}
*/
popoverMenuTemplate: function(data) {
return OC.Share.Templates['sharedialoglinkshareview_popover_menu'](data);
},
/**
* renders the pending popover template and returns the resulting HTML
*
* @param {Object} data
* @returns {string}
*/
pendingPopoverMenuTemplate: function(data) {
return OC.Share.Templates['sharedialoglinkshareview_popover_menu_pending'](data);
},
onPopUpClick: function(event) {
event.preventDefault();
event.stopPropagation();
var url = $(event.currentTarget).data('url');
var newWindow = $(event.currentTarget).data('window');
$(event.currentTarget).tooltip('hide');
if (url) {
if (newWindow === true) {
var width = 600;
var height = 400;
var left = (screen.width / 2) - (width / 2);
var top = (screen.height / 2) - (height / 2);
window.open(url, 'name', 'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);
} else {
window.location.href = url;
}
}
},
onExpireDateChange: function(event) {
var $element = $(event.target);
var li = $element.closest('li[data-share-id]');
var shareId = li.data('share-id');
var expirationDatePicker = '#expirationDateContainer-' + shareId;
var datePicker = $(expirationDatePicker);
var state = $element.prop('checked');
datePicker.toggleClass('hidden', !state);
if (!state) {
// disabled, let's hide the input and
// set the expireDate to nothing
$element.closest('li').next('li').addClass('hidden');
this.setExpirationDate('');
} else {
// enabled, show the input and the datepicker
$element.closest('li').next('li').removeClass('hidden');
this.showDatePicker(event);
}
},
showDatePicker: function(event) {
var $element = $(event.target);
var li = $element.closest('li[data-share-id]');
var shareId = li.data('share-id');
var maxDate = $element.data('max-date');
var expirationDatePicker = '#expirationDatePicker-' + shareId;
var self = this;
$(expirationDatePicker).datepicker({
dateFormat : 'dd-mm-yy',
onSelect: function (expireDate) {
self.setExpirationDate(expireDate, shareId);
},
maxDate: maxDate
});
$(expirationDatePicker).datepicker('show');
$(expirationDatePicker).focus();
},
setExpirationDate: function(expireDate, shareId) {
this.model.saveLinkShare({expireDate: expireDate, cid: shareId});
},
/**
* get an array of sharees' share properties
*
* @returns {Array}
*/
getShareeList: function() {
var shares = this.model.get('linkShares');
if(!this.model.hasLinkShares()) {
return [];
}
var list = [];
for(var index = 0; index < shares.length; index++) {
var share = this.getShareeObject(index);
// first empty {} is necessary, otherwise we get in trouble
// with references
list.push(_.extend({}, share));
}
return list;
},
/**
*
* @param {OC.Share.Types.ShareInfo} shareInfo
* @returns {object}
*/
getShareeObject: function(shareIndex) {
var share = this.model.get('linkShares')[shareIndex];
return _.extend({}, share, {
cid: share.id,
shareAllowed: true,
linkShareLabel: share.label !== '' ? share.label : t('core', 'Share link'),
popoverMenu: {},
pendingPopoverMenu: {},
showPending: this.showPending,
shareLinkURL: share.url,
newShareTitle: t('core', 'New share link'),
copyLabel: t('core', 'Copy link'),
})
},
getPopoverObject: function(share) {
var publicUploadRWChecked = '';
var publicUploadRChecked = '';
var publicUploadWChecked = '';
switch (this.model.linkSharePermissions(share.id)) {
case OC.PERMISSION_READ:
publicUploadRChecked = 'checked';
break;
case OC.PERMISSION_CREATE:
publicUploadWChecked = 'checked';
break;
case OC.PERMISSION_UPDATE | OC.PERMISSION_CREATE | OC.PERMISSION_READ | OC.PERMISSION_DELETE:
publicUploadRWChecked = 'checked';
break;
}
var isPasswordSet = !!share.password;
var isPasswordEnabledByDefault = this.configModel.get('enableLinkPasswordByDefault') === true;
var isPasswordEnforced = this.configModel.get('enforcePasswordForPublicLink');
var showPasswordCheckBox = !this.configModel.get('enforcePasswordForPublicLink') || !share.password;
var isExpirationEnforced = this.configModel.get('isDefaultExpireDateEnforced');
var defaultExpireDays = this.configModel.get('defaultExpireDate');
var hasExpireDate = !!share.expiration || isExpirationEnforced;
var hasExpireDate = false;
var expireDate;
if (hasExpireDate) {
expireDate = moment(share.expiration, 'YYYY-MM-DD').format('DD-MM-YYYY');
}
var showHideDownloadCheckbox = !this.model.isFolder();
var hideDownload = share.hideDownload;
var maxDate = null;
if(hasExpireDate) {
if(isExpirationEnforced) {
// TODO: hack: backend returns string instead of integer
var shareTime = share.stime;
if (_.isNumber(shareTime)) {
shareTime = new Date(shareTime * 1000);
}
if (!shareTime) {
shareTime = new Date(); // now
}
shareTime = OC.Util.stripTime(shareTime).getTime();
maxDate = new Date(shareTime + defaultExpireDays * 24 * 3600 * 1000);
}
}
return {
cid: share.id,
shareLinkURL: share.url,
passwordPlaceholder: isPasswordSet ? PASSWORD_PLACEHOLDER : PASSWORD_PLACEHOLDER_MESSAGE,
isPasswordSet: isPasswordSet || isPasswordEnabledByDefault || isPasswordEnforced,
showPasswordCheckBox: showPasswordCheckBox,
publicUploadRWChecked: publicUploadRWChecked,
publicUploadRChecked: publicUploadRChecked,
publicUploadWChecked: publicUploadWChecked,
hasExpireDate: hasExpireDate,
expireDate: expireDate,
shareNote: share.note,
hasNote: share.note !== '',
maxDate: maxDate,
showHideDownloadCheckbox: showHideDownloadCheckbox,
hideDownload: hideDownload,
}
},
getPendingPopoverObject: function(share) {
var isPasswordSet = !!share.password;
var showPasswordCheckBox = !this.configModel.get('enforcePasswordForPublicLink') || !share.password;
var isPasswordEnforced = this.configModel.get('enforcePasswordForPublicLink');
return {
cid: share.id,
enablePasswordLabel: t('core', 'Password protect'),
passwordLabel: t('core', 'Password'),
passwordPlaceholder: isPasswordSet ? PASSWORD_PLACEHOLDER : PASSWORD_PLACEHOLDER_MESSAGE,
showPasswordCheckBox: showPasswordCheckBox,
isPasswordEnforced: isPasswordEnforced,
}
},
onUnshare: function(event) {
event.preventDefault();
event.stopPropagation();
var self = this;
var $element = $(event.target);
if (!$element.is('a')) {
$element = $element.closest('a');
}
var $loading = $element.find('.icon-loading-small').eq(0);
if(!$loading.hasClass('hidden')) {
// in process
return false;
}
$loading.removeClass('hidden');
var $li = $element.closest('li[data-share-id]');
var shareId = $li.data('share-id');
self.model.removeShare(shareId, {
success: function() {
$li.remove();
self.render()
},
error: function() {
$loading.addClass('hidden');
OC.Notification.showTemporary(t('core', 'Could not unshare'));
}
});
return false;
},
});
OC.Share.ShareDialogLinkShareView = ShareDialogLinkShareView;
})();