implementing HTML+CSS sharing interface: time for JS; done: 1. adding and removing share-withs; 2. reacting to permission updates (for the time being without POSTing them)
Michał 'rysiek' Woźniak
parent
dcc7c7e962
commit
cc69ca476b
|
|
@ -89,6 +89,10 @@
|
|||
.shared-with-list > li {
|
||||
text-align:right;
|
||||
}
|
||||
/* that's just a stub to be used by JS later, hid it! */
|
||||
.shared-with-list > li.stub {
|
||||
display:none;
|
||||
}
|
||||
.shared-with-list > li img {
|
||||
vertical-align:-20%;
|
||||
opacity:0.5;
|
||||
|
|
|
|||
143
js/calendar.js
143
js/calendar.js
|
|
@ -591,68 +591,113 @@ Calendar={
|
|||
event.preventDefault();
|
||||
},
|
||||
select: function(event, selected) {
|
||||
var itemType = 'event';
|
||||
var itemSource = $('#sharewith').data('item-source');
|
||||
var itemType = $(this).data('item-type');
|
||||
var itemSource = $(this).data('item-source');
|
||||
var shareType = selected.item.value.shareType;
|
||||
var shareWith = selected.item.value.shareWith;
|
||||
$(this).val(shareWith);
|
||||
var shareWithInput = $(this)
|
||||
// Default permissions are Read and Share
|
||||
var permissions = OC.PERMISSION_READ | OC.PERMISSION_SHARE;
|
||||
OC.Share.share(itemType, itemSource, shareType, shareWith, permissions, function(data) {
|
||||
var newitem = '<li data-item-type="event"'
|
||||
+ 'data-share-with="'+shareWith+'" '
|
||||
+ 'data-permissions="'+permissions+'" '
|
||||
+ 'data-share-type="'+shareType+'" data-link="true">'
|
||||
+ shareWith
|
||||
+ (shareType === OC.Share.SHARE_TYPE_GROUP ? ' ('+t('core', 'group')+')' : '')
|
||||
+ '<span class="shareactions">'
|
||||
+ '<label><input class="update" type="checkbox" checked="checked">'+t('core', 'can edit')+'</label>'
|
||||
+ '<label><input class="share" type="checkbox" checked="checked">'+t('core', 'can share')+'</label>'
|
||||
+ '<img class="svg action delete" title="Unshare"src="'+ OC.imagePath('core', 'actions/delete.svg') +'"></span></li>';
|
||||
$('.sharedby.eventlist').append(newitem);
|
||||
$('#sharedWithNobody').remove();
|
||||
$('#sharewith').val('');
|
||||
// we need to "fix" the share-can-edit-ITEMPTYPE-ITEMSOURCE-0 checkbox and label
|
||||
var editCheckboxIdStub = 'share-can-edit-' + itemType + '-' + itemSource + '-'
|
||||
var curEditCheckboxId = $(shareWithInput).parents('.share-interface-container.internal-share').find('.shared-with-entry-container').length
|
||||
// find the stub
|
||||
var newitem = $(shareWithInput)
|
||||
.parents('.share-interface-container.internal-share')
|
||||
.find('.shared-with-entry-container.stub')
|
||||
// clone it
|
||||
.clone()
|
||||
// populate the stub with data
|
||||
.attr('data-item-type', itemType)
|
||||
.attr('data-share-with', shareWith)
|
||||
.attr('data-permissions', permissions)
|
||||
.attr('data-share-type', shareType)
|
||||
.attr('data-item-soutce', itemSource)
|
||||
.attr('title', shareWith)
|
||||
// populate stub's elements
|
||||
.find('.username')
|
||||
.html(shareWith + (shareType === OC.Share.SHARE_TYPE_GROUP ? ' ('+t('core', 'group')+')' : ''))
|
||||
.end()
|
||||
.find('.share-options input[name="create"]')
|
||||
.prop('checked', true) // TODO base that on what we get in response?
|
||||
.end()
|
||||
.find('.share-options input[name="update"]')
|
||||
.prop('checked', true) // TODO base that on what we get in response?
|
||||
.end()
|
||||
.find('.share-options input[name="delete"]')
|
||||
.prop('checked', true) // TODO base that on what we get in response?
|
||||
.end()
|
||||
.find('.share-options input[name="share"]')
|
||||
.prop('checked', true) // TODO base that on what we get in response?
|
||||
.end()
|
||||
// handle the share-can-edit-ITEMPTYPE-ITEMSOURCE-0 checkbox and label
|
||||
.find('#' + editCheckboxIdStub + '0')
|
||||
.prop('id', editCheckboxIdStub + curEditCheckboxId)
|
||||
.end()
|
||||
.find('label[for=' + editCheckboxIdStub + '0]')
|
||||
.prop('for', editCheckboxIdStub + curEditCheckboxId)
|
||||
.end()
|
||||
// remove the "stub" class
|
||||
.removeClass('stub')
|
||||
// append it where it's needed most
|
||||
$(shareWithInput)
|
||||
.parents('.share-interface-container.internal-share')
|
||||
.children('.shared-with-list')
|
||||
.append(newitem)
|
||||
// clear
|
||||
$(shareWithInput).val('');
|
||||
});
|
||||
return false;
|
||||
}
|
||||
});});
|
||||
|
||||
$('.shareactions > input:checkbox').change(function() {
|
||||
var container = $(this).parents('li').first();
|
||||
var permissions = parseInt(container.data('permissions'));
|
||||
var itemType = container.data('item-type');
|
||||
var shareType = container.data('share-type');
|
||||
var itemSource = container.data('item');
|
||||
var shareWith = container.data('share-with');
|
||||
var permission = null;
|
||||
if($(this).hasClass('update')) {
|
||||
permission = OC.PERMISSION_UPDATE;
|
||||
permission = OC.PERMISSION_DELETE;
|
||||
} else if($(this).hasClass('share')) {
|
||||
permission = OC.PERMISSION_SHARE;
|
||||
}
|
||||
// This is probably not the right way, but it works :-P
|
||||
if($(this).is(':checked')) {
|
||||
permissions += permission;
|
||||
} else {
|
||||
permissions -= permission;
|
||||
}
|
||||
// using .off() to make sure the event is only attached once
|
||||
$(document)
|
||||
.off('change', '.shared-with-entry-container input:checkbox[data-permissions]')
|
||||
.on('change', '.shared-with-entry-container input:checkbox[data-permissions]', function(){
|
||||
|
||||
container.data('permissions',permissions);
|
||||
|
||||
OC.Share.setPermissions(itemType, itemSource, shareType, shareWith, permissions);
|
||||
});
|
||||
console.log('PERMISSIONS!')
|
||||
var container = $(this).parents('li').first();
|
||||
var permissions = parseInt(container.data('permissions'));
|
||||
var itemType = container.data('item-type');
|
||||
var shareType = container.data('share-type');
|
||||
var itemSource = container.data('item');
|
||||
var shareWith = container.data('share-with');
|
||||
var permission = null;
|
||||
if($(this).hasClass('update')) {
|
||||
permission = OC.PERMISSION_UPDATE;
|
||||
permission = OC.PERMISSION_DELETE;
|
||||
} else if($(this).hasClass('share')) {
|
||||
permission = OC.PERMISSION_SHARE;
|
||||
}
|
||||
// This is probably not the right way, but it works :-P
|
||||
if($(this).is(':checked')) {
|
||||
permissions += permission;
|
||||
} else {
|
||||
permissions -= permission;
|
||||
}
|
||||
|
||||
container.data('permissions',permissions);
|
||||
console.log('setting permissions to: ' + permissions)
|
||||
|
||||
//OC.Share.setPermissions(itemType, itemSource, shareType, shareWith, permissions);
|
||||
});
|
||||
|
||||
$('.shareactions > .delete').click(function() {
|
||||
var container = $(this).parents('li').first();
|
||||
var itemType = container.data('item-type');
|
||||
var shareType = container.data('share-type');
|
||||
var itemSource = container.data('item');
|
||||
var shareWith = container.data('share-with');
|
||||
OC.Share.unshare(itemType, itemSource, shareType, shareWith, function() {
|
||||
container.remove();
|
||||
});
|
||||
});
|
||||
// using .off() to make sure the event is only attached once
|
||||
$(document)
|
||||
.off('click', '.shared-with-entry-container .unshare')
|
||||
.on('click', '.shared-with-entry-container .unshare', function(e) {
|
||||
var container = $(this).parents('li').first();
|
||||
var itemType = container.data('item-type');
|
||||
var shareType = container.data('share-type');
|
||||
var itemSource = container.data('item');
|
||||
var shareWith = container.data('share-with');
|
||||
OC.Share.unshare(itemType, itemSource, shareType, shareWith, function() {
|
||||
container.remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,19 +1,41 @@
|
|||
<div class="share-interface-container internal-share">
|
||||
<input type="text" class="share-with ui-autocomplete-input"
|
||||
placeholder="<?php p($l->t('Share with user or group')); ?>"
|
||||
data-item-source="<?php p($_['item_id']); ?>" data-item-type="<?php p($_['item_type']); ?>" autocomplete="off" />
|
||||
data-item-source="<?php p($_['item_id']); ?>"
|
||||
data-item-type="<?php p($_['item_type']); ?>"
|
||||
data-permissions="<?php p($_['permissions']) ?>"
|
||||
autocomplete="off" />
|
||||
|
||||
<ul class="shared-with-list">
|
||||
<?php foreach($_['shared_with'] as $i => $sharee): ?>
|
||||
<?php
|
||||
/*
|
||||
* iterating through shared-with array
|
||||
* we also need a single stub to be used with JS when adding new share-withs
|
||||
* let's add that as index 0
|
||||
*/
|
||||
array_unshift(
|
||||
$_['shared_with'],
|
||||
// all the data will be filled-in by PHP below or by JS upon creating an entry from the stub
|
||||
array (
|
||||
'share_type' => '',
|
||||
'share_with' => '',
|
||||
'permissions' => ''
|
||||
)
|
||||
);
|
||||
/*
|
||||
* iterate!
|
||||
*/
|
||||
foreach($_['shared_with'] as $i => $sharee): ?>
|
||||
<li
|
||||
data-share-type="1"
|
||||
data-share-type="<?php p($sharee['share_type']); ?>"
|
||||
data-share-with="<?php p($sharee['share_with']); ?>"
|
||||
data-item="<?php p($_['item_id']); ?>"
|
||||
data-item-source="<?php p($_['item_id']); ?>"
|
||||
data-item-type="<?php p($_['item_type']); ?>"
|
||||
data-link="true"
|
||||
data-permissions="<?php p($_['permissions']) ?>"
|
||||
title="<?php p($sharee['share_with']); ?>"
|
||||
class="shared-with-entry-container">
|
||||
class="shared-with-entry-container <?php if($i === 0): ?>stub<?php endif; ?>">
|
||||
<!-- the username -->
|
||||
<span class="username"><?php p($sharee['share_with'] . ($sharee['share_type'] == OCP\Share::SHARE_TYPE_GROUP ? ' (group)' : '')); ?></span>
|
||||
<!-- unshare link -->
|
||||
|
|
@ -31,7 +53,7 @@
|
|||
<?php if(empty($_['basic_edit_options'])): ?>
|
||||
name="edit" checked="checked" disabled="disabled"
|
||||
<?php else: ?>
|
||||
name="update" <?php p(($sharee['permissions'] & OCP\PERMISSION_UPDATE?'checked="checked"':''))?> id="share-can-edit-<?php p($_['item_type']); ?>-<?php p($_['item_id']); ?>-<?php p($i); ?>"
|
||||
name="update" data-permissions="2" <?php p(($sharee['permissions'] & OCP\PERMISSION_UPDATE?'checked="checked"':''))?> id="share-can-edit-<?php p($_['item_type']); ?>-<?php p($_['item_id']); ?>-<?php p($i); ?>"
|
||||
<?php endif; ?>
|
||||
/>
|
||||
<!-- "can edit" displayable-control label -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue