ported plugin drag&drop to jquery
This commit is contained in:
onli
parent
5aebdf4119
commit
6b49f49ba0
@ -313,46 +313,25 @@ if (isset($_GET['serendipity']['plugin_to_conf'])) {
|
||||
$col_assoc[$sidebar . '_col'] = $sidebar;
|
||||
}
|
||||
|
||||
/* preparse Javascript-generated input */
|
||||
if (isset($_POST['SAVE']) && !empty($_POST['serendipity']['pluginorder'])) {
|
||||
$parts = explode(':', $_POST['serendipity']['pluginorder']);
|
||||
|
||||
foreach($parts AS $sidepart) {
|
||||
preg_match('@^(.+)\((.*)\)$@imsU', $sidepart, $matches);
|
||||
if (!isset($col_assoc[$matches[1]])) {
|
||||
continue;
|
||||
}
|
||||
$pluginsidelist = explode(',', $matches[2]);
|
||||
foreach($pluginsidelist AS $pluginname) {
|
||||
$pluginname = trim(urldecode(str_replace(array('s9ycid', '-'), array('', '%'), $pluginname)));
|
||||
|
||||
if (empty($pluginname)) {
|
||||
continue;
|
||||
}
|
||||
$serendipity['POST']['placement'][$pluginname] = $col_assoc[$matches[1]];
|
||||
$new_order[] = $pluginname;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if (is_array($new_order)) {
|
||||
foreach($new_order AS $new_order_pos => $order_plugin) {
|
||||
serendipity_db_query("UPDATE {$serendipity['dbPrefix']}plugins SET sort_order = ". (int)$new_order_pos . " WHERE name='" . serendipity_db_escape_string($order_plugin) . "'");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isset($_POST['SAVE']) && isset($_POST['serendipity']['placement']) && serendipity_checkFormToken()) {
|
||||
foreach ($_POST['serendipity']['placement'] as $plugin_name => $placement) {
|
||||
if (isset($_POST['SAVE']) && serendipity_checkFormToken()) {
|
||||
$pos=0;
|
||||
foreach($_POST['serendipity']['plugin'] as $plugin) {
|
||||
serendipity_db_query("UPDATE {$serendipity['dbPrefix']}plugins
|
||||
SET
|
||||
sort_order = ". $pos . "
|
||||
WHERE
|
||||
name='" . serendipity_db_escape_string($plugin['id']) . "'");
|
||||
|
||||
serendipity_plugin_api::update_plugin_placement(
|
||||
addslashes($plugin_name),
|
||||
addslashes($placement)
|
||||
addslashes($plugin['id']),
|
||||
addslashes($plugin['placement'])
|
||||
);
|
||||
|
||||
serendipity_plugin_api::update_plugin_owner(
|
||||
addslashes($plugin_name),
|
||||
addslashes($_POST['serendipity']['ownership'][$plugin_name])
|
||||
addslashes($plugin['id']),
|
||||
addslashes($_POST['serendipity']['ownership'][$plugin['name']])
|
||||
);
|
||||
$pos++;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -119,10 +119,39 @@
|
||||
<span class="msg_success"><span class="icon-ok-circle"></span> {$CONST.DONE}:{$CONST.SETTINGS_SAVED_AT|sprintf:"$timestamp"}</span>
|
||||
{/if}
|
||||
<h2>{$CONST.BELOW_IS_A_LIST_OF_INSTALLED_PLUGINS}</h2>
|
||||
{if $eyecandy}
|
||||
<script src="{serendipity_getFile file="dragdrop.js"}"></script>
|
||||
{if $eyecandy}
|
||||
<script src="{serendipity_getFile file="admin/jquery.sortable.js"}"></script>
|
||||
<script src="{serendipity_getFile file="admin/dragdrop.js"}"></script>
|
||||
<style>
|
||||
body.dragging, body.dragging * {
|
||||
cursor: move !important;
|
||||
}
|
||||
|
||||
.dragged {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.pluginmanager_container li.placeholder {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.pluginmanager_container li.placeholder:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: -5px;
|
||||
left: -5px;
|
||||
top: -4px;
|
||||
border: 5px solid transparent;
|
||||
border-left-color: red;
|
||||
border-right: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<span class="msg_notice"><span class="icon-info-circle"></span> {$CONST.PREFERENCE_USE_JS_WARNING}</span>
|
||||
{/if}
|
||||
<section id="pluginlist_sidebar">
|
||||
<h3>{$CONST.SIDEBAR_PLUGINS}</h3>
|
||||
|
||||
@ -6,30 +6,11 @@
|
||||
{if !$eyecandy}
|
||||
<form action="?serendipity[adminModule]=plugins" method="post">
|
||||
{elseif !$event_only}
|
||||
{* Smarty 3 has a new auto literal option which is enabled by default.
|
||||
When the { is followed by a space it's not interpreted as smarty delimiter but literal. *}
|
||||
<script>
|
||||
function templatePluginMoverInit() {
|
||||
|
||||
{foreach $plugin_placements AS $sidebar}
|
||||
|
||||
{($is_first) ? 'var ' : ''}list = document.getElementById("{$sidebar}_col");
|
||||
DragDrop.makeListContainer(list, 'g1');
|
||||
list.onDragOver = function() { this.style["border"] = "1px solid #4d759b"; };
|
||||
list.onDragOut = function() { this.style["border"] = "none"; };
|
||||
{assign var="is_first" value=false}
|
||||
|
||||
{/foreach}
|
||||
|
||||
}
|
||||
addLoadEvent(templatePluginMoverInit);
|
||||
</script>
|
||||
|
||||
<form action="?serendipity[adminModule]=plugins" method="post" onsubmit="pluginMovergetSort(); return true">
|
||||
<form action="?serendipity[adminModule]=plugins" method="post">
|
||||
<input id="order" name="serendipity[pluginorder]" type="hidden" value="">
|
||||
{else}
|
||||
<script>addLoadEvent(pluginMoverInitEvent);</script>
|
||||
<form action="?serendipity[adminModule]=plugins" method="post" onsubmit="pluginMovergetSortEvent(); return true">
|
||||
<form action="?serendipity[adminModule]=plugins" method="post">
|
||||
<input id="eventorder" name="serendipity[pluginorder]" type="hidden" value="">
|
||||
{/if}
|
||||
{$serendipity_setFormToken}
|
||||
@ -38,9 +19,12 @@
|
||||
<div class="pluginmanager_side pluginmanager_{($event_only) ? 'event' : 'sidebar'}">
|
||||
<h4>{$plugin_placement['ptitle']}</h4>
|
||||
|
||||
<ol id="{$plugin_placement['pid']}_col" class="pluginmanager_container plainList">
|
||||
<ol id="{$plugin_placement['pid']}_col" data-placement="{$plugin_placement['pid']}" class="pluginmanager_container plainList">
|
||||
{foreach $plugin_placement['plugin_data'] as $plugin_data}
|
||||
<li id="{$plugin_data['css_key']}" class="pluginmanager_plugin pluginmanager_item_{cycle values="odd,even"}">
|
||||
<li id="{$plugin_data['css_key']}" class="pluginmanager_plugin pluginmanager_item_{cycle values="odd,even"}"=>
|
||||
<input type="hidden" name="serendipity[plugin][{$plugin_data['name']}][id]" value="{$plugin_data['name']}" />
|
||||
<input type="hidden" name="serendipity[plugin][{$plugin_data['name']}][position]" value="{$plugin_data@index}" />
|
||||
<input type="hidden" name="serendipity[plugin][{$plugin_data['name']}][placement]" value="{$plugin_placement['pid']}" />
|
||||
{if $plugin_data['is_plugin_editable']}
|
||||
<div class="form_check">
|
||||
<input id="remove_{$plugin_data['name']}" name="serendipity[plugin_to_remove][]" type="checkbox" value="{$plugin_data['name']}">
|
||||
@ -79,7 +63,7 @@
|
||||
<span class="plugin_count block_level">{$CONST.PLUGIN_AVAILABLE_COUNT|sprintf:$total}</span>
|
||||
</div>
|
||||
<div class="form_buttons">
|
||||
<input class="state_cancel" name="REMOVE" type="submit" title="{$CONST.DELETE}" value="{$CONST.REMOVE_TICKED_PLUGINS}">
|
||||
<input class="state_cancel" name="REMOVE" type="submit" title="{$CONST.REMOVE_TICKED_PLUGINS}" value="{$CONST.DELETE}">
|
||||
<input name="SAVE" type="submit" title="{$CONST.SAVE_CHANGES_TO_LAYOUT}" value="{$CONST.SAVE}">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
16
templates/2k11/admin/dragdrop.js
vendored
Normal file
16
templates/2k11/admin/dragdrop.js
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
jQuery("document").ready(function() {
|
||||
// TODO: Add autoscrolling
|
||||
jQuery('.pluginmanager_container').sortable(
|
||||
{
|
||||
containerSelector: '.pluginmanager_container',
|
||||
group: 'plugins', // TODO: Distinguish between sidebar and event-plugin-container
|
||||
handle: '.pluginmanager_grablet',
|
||||
onDrop: function ($item, container, _super) {
|
||||
var placement = $item.parents('.pluginmanager_container').data("placement");
|
||||
$item.find('input[name$="placement]"]').val(placement);
|
||||
$item.removeClass("dragged").removeAttr("style")
|
||||
jQuery("body").removeClass("dragging")
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
606
templates/2k11/admin/jquery.sortable.js
Normal file
606
templates/2k11/admin/jquery.sortable.js
Normal file
@ -0,0 +1,606 @@
|
||||
/* ===================================================
|
||||
* jquery-sortable.js v0.9.10
|
||||
* http://johnny.github.com/jquery-sortable/
|
||||
* ===================================================
|
||||
* Copyright (c) 2012 Jonas von Andrian
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions are met:
|
||||
* * Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* * Redistributions in binary form must reproduce the above copyright
|
||||
* notice, this list of conditions and the following disclaimer in the
|
||||
* documentation and/or other materials provided with the distribution.
|
||||
* * The name of the author may not be used to endorse or promote products
|
||||
* derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
* DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
|
||||
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
* ========================================================== */
|
||||
|
||||
|
||||
!function ( $, window, undefined){
|
||||
var eventNames,
|
||||
pluginName = 'sortable',
|
||||
containerDefaults = {
|
||||
// If true, items can be dragged from this container
|
||||
drag: true,
|
||||
// If true, items can be droped onto this container
|
||||
drop: true,
|
||||
// Exclude items from being draggable, if the
|
||||
// selector matches the item
|
||||
exclude: "",
|
||||
// If true, search for nested containers within an item
|
||||
nested: true,
|
||||
// If true, the items are assumed to be arranged vertically
|
||||
vertical: true
|
||||
}, // end container defaults
|
||||
groupDefaults = {
|
||||
// This is executed after the placeholder has been moved.
|
||||
afterMove: function ($placeholder, container) {
|
||||
},
|
||||
// The css selector of the containers
|
||||
containerSelector: "ol, ul",
|
||||
// Distance the mouse has to travel to start dragging
|
||||
distance: 0,
|
||||
// The css selector of the drag handle
|
||||
handle: "",
|
||||
// The css selector of the items
|
||||
itemSelector: "li",
|
||||
// Check if the dragged item may be inside the container.
|
||||
// Use with care, since the search for a valid container entails a depth first search
|
||||
// and may be quite expensive.
|
||||
isValidTarget: function ($item, container) {
|
||||
return true
|
||||
},
|
||||
// Executed before onDrop if placeholder is detached.
|
||||
// This happens if pullPlaceholder is set to false and the drop occurs outside a container.
|
||||
onCancel: function ($item, container, _super) {
|
||||
},
|
||||
// Executed at the beginning of a mouse move event.
|
||||
// The Placeholder has not been moved yet.
|
||||
onDrag: function ($item, position, _super) {
|
||||
$item.css(position)
|
||||
},
|
||||
// Called after the drag has been started,
|
||||
// that is the mouse button is beeing held down and
|
||||
// the mouse is moving.
|
||||
// The container is the closest initialized container.
|
||||
// Therefore it might not be the container, that actually contains the item.
|
||||
onDragStart: function ($item, container, _super) {
|
||||
$item.css({
|
||||
height: $item.height(),
|
||||
width: $item.width()
|
||||
})
|
||||
$item.addClass("dragged")
|
||||
$("body").addClass("dragging")
|
||||
},
|
||||
// Called when the mouse button is beeing released
|
||||
onDrop: function ($item, container, _super) {
|
||||
$item.removeClass("dragged").removeAttr("style")
|
||||
$("body").removeClass("dragging")
|
||||
},
|
||||
// Called on mousedown.
|
||||
onMousedown: function($item, event, _super) {
|
||||
event.preventDefault()
|
||||
},
|
||||
// Template for the placeholder. Can be any valid jQuery input
|
||||
// e.g. a string, a DOM element
|
||||
placeholder: '<li class="placeholder"/>',
|
||||
// If true, the position of the placeholder is calculated on every mousemove.
|
||||
// If false, it is only calculated when the mouse is above a container.
|
||||
pullPlaceholder: true,
|
||||
// Specifies serialization of the container group.
|
||||
// The pair $parent/$children is either container/items or item/subcontainers.
|
||||
// Note that this default method only works, if every item only has one subcontainer
|
||||
serialize: function ($parent, $children, parentIsContainer) {
|
||||
var result = $.extend({}, $parent.data())
|
||||
|
||||
if(parentIsContainer)
|
||||
return $children
|
||||
else if ($children[0]){
|
||||
result.children = $children
|
||||
delete result.subContainer
|
||||
}
|
||||
|
||||
delete result.sortable
|
||||
|
||||
return result
|
||||
},
|
||||
// Set tolerance while dragging. Positive values will decrease sensitivity.
|
||||
tolerance: 0
|
||||
}, // end group defaults
|
||||
containerGroups = {},
|
||||
groupCounter = 0
|
||||
|
||||
if('ontouchstart' in window){
|
||||
eventNames = {
|
||||
start: "touchstart.sortable",
|
||||
end: "touchend.sortable touchcancel.sortable",
|
||||
move: "touchmove.sortable"
|
||||
}
|
||||
} else {
|
||||
eventNames = {
|
||||
start: "mousedown.sortable",
|
||||
end: "mouseup.sortable",
|
||||
move: "mousemove.sortable"
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* a is Array [left, right, top, bottom]
|
||||
* b is array [left, top]
|
||||
*/
|
||||
function d(a,b) {
|
||||
var x = Math.max(0, a[0] - b[0], b[0] - a[1]),
|
||||
y = Math.max(0, a[2] - b[1], b[1] - a[3])
|
||||
return x+y;
|
||||
}
|
||||
|
||||
function remove(array, from, to) {
|
||||
var rest = array.slice((to || from) + 1 || array.length);
|
||||
array.length = from < 0 ? array.length + from : from;
|
||||
return array.push.apply(array, rest);
|
||||
}
|
||||
|
||||
function setDimensions(array, dimensions, useOffset) {
|
||||
var i = array.length,
|
||||
offsetMethod = useOffset ? "offset" : "position"
|
||||
while(i--){
|
||||
var el = array[i].el ? array[i].el : $(array[i]),
|
||||
// use fitting method
|
||||
pos = el[offsetMethod]()
|
||||
dimensions[i] = [
|
||||
pos.left,
|
||||
pos.left + el.outerWidth(true),
|
||||
pos.top,
|
||||
pos.top + el.outerHeight(true)
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
function getRelativePosition(pointer, element) {
|
||||
var offset = element.offset()
|
||||
return {
|
||||
left: pointer.left - offset.left,
|
||||
top: pointer.top - offset.top
|
||||
}
|
||||
}
|
||||
|
||||
function sortByDistanceDesc(dimensions, pointer, lastPointer) {
|
||||
pointer = [pointer.left, pointer.top]
|
||||
lastPointer = lastPointer && [lastPointer.left, lastPointer.top]
|
||||
|
||||
var dim,
|
||||
i = dimensions.length,
|
||||
distances = []
|
||||
|
||||
while(i--){
|
||||
dim = dimensions[i]
|
||||
distances[i] = [i,d(dim,pointer), lastPointer && d(dim, lastPointer)]
|
||||
}
|
||||
distances = distances.sort(function (a,b) {
|
||||
return b[1] - a[1] || b[2] - a[2] || b[0] - a[0]
|
||||
})
|
||||
|
||||
// last entry is the closest
|
||||
return distances
|
||||
}
|
||||
|
||||
function processChildContainers(item, containerSelector, method, ignoreChildren) {
|
||||
var childContainers = item.find(containerSelector),
|
||||
i = childContainers.length
|
||||
|
||||
while(i--){
|
||||
var container = childContainers.eq(i).data(pluginName)
|
||||
if(container)
|
||||
container[method](ignoreChildren)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function ContainerGroup(options) {
|
||||
this.options = $.extend({}, groupDefaults, options)
|
||||
this.containers = []
|
||||
this.childGroups = []
|
||||
this.scrolledProxy = $.proxy(this.scrolled, this)
|
||||
this.dragProxy = $.proxy(this.drag, this)
|
||||
this.dropProxy = $.proxy(this.drop, this)
|
||||
|
||||
if(this.options.parentGroup)
|
||||
this.options.parentGroup.childGroups.push(this)
|
||||
else {
|
||||
this.placeholder = $(this.options.placeholder)
|
||||
if(!options.isValidTarget)
|
||||
this.options.isValidTarget = undefined
|
||||
}
|
||||
}
|
||||
|
||||
ContainerGroup.get = function (options) {
|
||||
if( !containerGroups[options.group]) {
|
||||
if(!options.group)
|
||||
options.group = groupCounter ++
|
||||
containerGroups[options.group] = new ContainerGroup(options)
|
||||
}
|
||||
return containerGroups[options.group]
|
||||
}
|
||||
|
||||
ContainerGroup.prototype = {
|
||||
dragInit: function (e, itemContainer) {
|
||||
this.$document = $(itemContainer.el[0].ownerDocument)
|
||||
|
||||
this.toggleListeners('on')
|
||||
|
||||
// get item to drag
|
||||
this.item = $(e.target).closest(this.options.itemSelector)
|
||||
this.itemContainer = itemContainer
|
||||
|
||||
this.setPointer(e)
|
||||
|
||||
this.options.onMousedown(this.item, e, groupDefaults.onMousedown)
|
||||
},
|
||||
drag: function (e) {
|
||||
if(!this.dragging){
|
||||
if(!this.distanceMet(e))
|
||||
return
|
||||
|
||||
processChildContainers(this.item, this.options.containerSelector, "disable", true)
|
||||
|
||||
this.options.onDragStart(this.item, this.itemContainer, groupDefaults.onDragStart)
|
||||
this.item.before(this.placeholder)
|
||||
this.dragging = true
|
||||
}
|
||||
|
||||
this.setPointer(e)
|
||||
// place item under the cursor
|
||||
this.options.onDrag(this.item,
|
||||
getRelativePosition(this.pointer, this.item.offsetParent()),
|
||||
groupDefaults.onDrag)
|
||||
|
||||
var x = e.pageX,
|
||||
y = e.pageY,
|
||||
box = this.sameResultBox,
|
||||
t = this.options.tolerance
|
||||
|
||||
if(!box || box.top - t > y || box.bottom + t < y || box.left - t > x || box.right + t < x)
|
||||
if(!this.searchValidTarget())
|
||||
this.placeholder.detach()
|
||||
},
|
||||
drop: function (e) {
|
||||
this.toggleListeners('off')
|
||||
|
||||
if(this.dragging){
|
||||
// processing Drop, check if placeholder is detached
|
||||
if(this.placeholder.closest("html")[0])
|
||||
this.placeholder.before(this.item).detach()
|
||||
else
|
||||
this.options.onCancel(this.item, this.itemContainer, groupDefaults.onCancel)
|
||||
|
||||
this.options.onDrop(this.item, this.getContainer(this.item), groupDefaults.onDrop)
|
||||
processChildContainers(this.item, this.options.containerSelector, "enable", true)
|
||||
|
||||
// cleanup
|
||||
this.clearDimensions()
|
||||
this.clearOffsetParent()
|
||||
this.lastAppendedItem = this.sameResultBox = undefined
|
||||
this.dragging = false
|
||||
}
|
||||
|
||||
this.item = undefined
|
||||
},
|
||||
searchValidTarget: function (pointer, lastPointer) {
|
||||
if(!pointer){
|
||||
pointer = this.relativePointer || this.pointer
|
||||
lastPointer = this.lastRelativePointer || this.lastPointer
|
||||
}
|
||||
|
||||
var distances = sortByDistanceDesc(this.getContainerDimensions(),
|
||||
pointer,
|
||||
lastPointer),
|
||||
i = distances.length
|
||||
|
||||
while(i--){
|
||||
var index = distances[i][0],
|
||||
distance = distances[i][1]
|
||||
|
||||
if(!distance || this.options.pullPlaceholder){
|
||||
var container = this.containers[index]
|
||||
if(!this.$getOffsetParent()){
|
||||
var offsetParent = container.getItemOffsetParent()
|
||||
pointer = getRelativePosition(pointer, offsetParent)
|
||||
lastPointer = getRelativePosition(lastPointer, offsetParent)
|
||||
}
|
||||
if(container.searchValidTarget(pointer, lastPointer))
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
movePlaceholder: function (container, item, method, sameResultBox) {
|
||||
var lastAppendedItem = this.lastAppendedItem
|
||||
if(!sameResultBox && lastAppendedItem && lastAppendedItem[0] === item[0])
|
||||
return;
|
||||
|
||||
item[method](this.placeholder)
|
||||
this.lastAppendedItem = item
|
||||
this.sameResultBox = sameResultBox
|
||||
this.options.afterMove(this.placeholder, container)
|
||||
},
|
||||
getContainerDimensions: function () {
|
||||
if(!this.containerDimensions)
|
||||
setDimensions(this.containers, this.containerDimensions = [], !this.$getOffsetParent())
|
||||
return this.containerDimensions
|
||||
},
|
||||
getContainer: function (element) {
|
||||
return element.closest(this.options.containerSelector).data(pluginName)
|
||||
},
|
||||
$getOffsetParent: function () {
|
||||
if(this.offsetParent === undefined){
|
||||
var i = this.containers.length - 1,
|
||||
offsetParent = this.containers[i].getItemOffsetParent()
|
||||
|
||||
if(!this.options.parentGroup){
|
||||
while(i--){
|
||||
if(offsetParent[0] != this.containers[i].getItemOffsetParent()[0]){
|
||||
// If every container has the same offset parent,
|
||||
// use position() which is relative to this parent,
|
||||
// otherwise use offset()
|
||||
// compare #setDimensions
|
||||
offsetParent = false
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.offsetParent = offsetParent
|
||||
}
|
||||
return this.offsetParent
|
||||
},
|
||||
clearOffsetParent: function () {
|
||||
this.offsetParent = undefined
|
||||
},
|
||||
setPointer: function (e) {
|
||||
var pointer = {
|
||||
left: e.pageX,
|
||||
top: e.pageY
|
||||
}
|
||||
|
||||
if(this.$getOffsetParent()){
|
||||
var relativePointer = getRelativePosition(pointer, this.$getOffsetParent())
|
||||
this.lastRelativePointer = this.relativePointer
|
||||
this.relativePointer = relativePointer
|
||||
}
|
||||
|
||||
this.lastPointer = this.pointer
|
||||
this.pointer = pointer
|
||||
},
|
||||
distanceMet: function (e) {
|
||||
return (Math.max(
|
||||
Math.abs(this.pointer.left - e.pageX),
|
||||
Math.abs(this.pointer.top - e.pageY)
|
||||
) >= this.options.distance)
|
||||
},
|
||||
addContainer: function (container) {
|
||||
this.containers.push(container);
|
||||
},
|
||||
removeContainer: function (container) {
|
||||
var i = $.inArray(container,this.containers);
|
||||
i!==-1 && remove(this.containers, i);
|
||||
},
|
||||
scrolled: function (e) {
|
||||
this.clearDimensions()
|
||||
this.clearOffsetParent()
|
||||
},
|
||||
toggleListeners: function (method) {
|
||||
this.$document[method](eventNames.move, this.dragProxy)
|
||||
[method](eventNames.end, this.dropProxy)
|
||||
[method]("scroll.sortable", this.scrolledProxy)
|
||||
},
|
||||
// Recursively clear container and item dimensions
|
||||
clearDimensions: function () {
|
||||
this.containerDimensions = undefined
|
||||
var i = this.containers.length
|
||||
while(i--){
|
||||
this.containers[i].itemDimensions = undefined
|
||||
}
|
||||
i = this.childGroups.length
|
||||
while(i--){
|
||||
this.childGroups[i].clearDimensions()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function Container(element, options) {
|
||||
this.el = element
|
||||
this.childGroups = []
|
||||
this.floatRight = false
|
||||
this.dragInitProxy = $.proxy(this.dragInit, this)
|
||||
this.options = $.extend( {}, containerDefaults, options)
|
||||
|
||||
this.group = ContainerGroup.get(this.options)
|
||||
this.rootGroup = this.options.rootGroup = this.options.rootGroup || this.group
|
||||
this.parentGroup = this.options.parentGroup = this.options.parentGroup || this.group
|
||||
this.handle = this.rootGroup.options.handle || this.rootGroup.options.itemSelector
|
||||
|
||||
this.enable(true)
|
||||
}
|
||||
|
||||
Container.prototype = {
|
||||
dragInit: function (e) {
|
||||
var rootGroup = this.rootGroup
|
||||
|
||||
if( !rootGroup.item &&
|
||||
e.which === 1 &&
|
||||
this.options.drag &&
|
||||
!$(e.target).is(this.options.exclude))
|
||||
rootGroup.dragInit(e, this)
|
||||
},
|
||||
searchValidTarget: function (pointer, lastPointer) {
|
||||
var distances = sortByDistanceDesc(this.getItemDimensions(),
|
||||
pointer,
|
||||
lastPointer),
|
||||
i = distances.length,
|
||||
rootGroup = this.rootGroup,
|
||||
validTarget = !rootGroup.options.isValidTarget ||
|
||||
rootGroup.options.isValidTarget(rootGroup.item, this)
|
||||
|
||||
if(!i && validTarget){
|
||||
rootGroup.movePlaceholder(this, this.el, "append")
|
||||
return true
|
||||
} else
|
||||
while(i--){
|
||||
var index = distances[i][0],
|
||||
distance = distances[i][1]
|
||||
if(!distance && this.options.nested && this.getContainerGroup(index)){
|
||||
var found = this.getContainerGroup(index).searchValidTarget(pointer, lastPointer)
|
||||
if(found)
|
||||
return true
|
||||
}
|
||||
else if(validTarget){
|
||||
this.movePlaceholder(index, pointer)
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
movePlaceholder: function (index, pointer) {
|
||||
var item = $(this.items[index]),
|
||||
dim = this.itemDimensions[index],
|
||||
method = "after",
|
||||
width = item.outerWidth(),
|
||||
height = item.outerHeight(),
|
||||
offset = item.offset(),
|
||||
sameResultBox = {
|
||||
left: offset.left,
|
||||
right: offset.left + width,
|
||||
top: offset.top,
|
||||
bottom: offset.top + height
|
||||
}
|
||||
if(this.options.vertical){
|
||||
var yCenter = (dim[2] + dim[3]) / 2,
|
||||
inUpperHalf = pointer.top <= yCenter
|
||||
if(inUpperHalf){
|
||||
method = "before"
|
||||
sameResultBox.bottom -= height / 2
|
||||
} else
|
||||
sameResultBox.top += height / 2
|
||||
} else {
|
||||
var xCenter = (dim[0] + dim[1]) / 2,
|
||||
inLeftHalf = pointer.left <= xCenter
|
||||
if(inLeftHalf != this.floatRight){
|
||||
method = "before"
|
||||
sameResultBox.right -= width / 2
|
||||
} else
|
||||
sameResultBox.left += width / 2
|
||||
}
|
||||
this.rootGroup.movePlaceholder(this, item, method, sameResultBox)
|
||||
},
|
||||
getItemDimensions: function () {
|
||||
if(!this.itemDimensions){
|
||||
this.items = this.$getChildren(this.el, "item").filter(":not(.dragged)").get()
|
||||
setDimensions(this.items, this.itemDimensions = [])
|
||||
}
|
||||
return this.itemDimensions
|
||||
},
|
||||
getItemOffsetParent: function () {
|
||||
var offsetParent,
|
||||
el = this.el
|
||||
// Since el might be empty we have to check el itself and
|
||||
// can not do something like el.children().first().offsetParent()
|
||||
if(el.css("position") === "relative" || el.css("position") === "absolute" || el.css("position") === "fixed")
|
||||
offsetParent = el
|
||||
else
|
||||
offsetParent = el.offsetParent()
|
||||
return offsetParent
|
||||
},
|
||||
getContainerGroup: function (index) {
|
||||
var childGroup = $.data(this.items[index], "subContainer")
|
||||
if( childGroup === undefined){
|
||||
var childContainers = this.$getChildren(this.items[index], "container")
|
||||
childGroup = false
|
||||
|
||||
if(childContainers[0]){
|
||||
var options = $.extend({}, this.options, {
|
||||
parentGroup: this.group,
|
||||
group: groupCounter ++
|
||||
})
|
||||
childGroup = childContainers[pluginName](options).data(pluginName).group
|
||||
}
|
||||
$.data(this.items[index], "subContainer", childGroup)
|
||||
}
|
||||
return childGroup
|
||||
},
|
||||
$getChildren: function (parent, type) {
|
||||
return $(parent).children(this.rootGroup.options[type + "Selector"])
|
||||
},
|
||||
_serialize: function (parent, isContainer) {
|
||||
var that = this,
|
||||
childType = isContainer ? "item" : "container",
|
||||
|
||||
children = this.$getChildren(parent, childType).not(this.options.exclude).map(function () {
|
||||
return that._serialize($(this), !isContainer)
|
||||
}).get()
|
||||
|
||||
return this.rootGroup.options.serialize(parent, children, isContainer)
|
||||
}
|
||||
}
|
||||
|
||||
var API = {
|
||||
enable: function (ignoreChildren) {
|
||||
if(this.options.drop)
|
||||
this.group.addContainer(this)
|
||||
if(!ignoreChildren)
|
||||
processChildContainers(this.el, this.options.containerSelector, "enable", true)
|
||||
|
||||
this.el.on(eventNames.start, this.handle, this.dragInitProxy)
|
||||
},
|
||||
disable: function (ignoreChildren) {
|
||||
if(this.options.drop)
|
||||
this.group.removeContainer(this)
|
||||
if(!ignoreChildren)
|
||||
processChildContainers(this.el, this.options.containerSelector, "disable", true)
|
||||
|
||||
this.el.off(eventNames.start)
|
||||
},
|
||||
serialize: function () {
|
||||
return this._serialize(this.el, true)
|
||||
}
|
||||
}
|
||||
|
||||
$.extend(Container.prototype, API)
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
*
|
||||
* Parameters are
|
||||
* either options on init
|
||||
* or a method name followed by arguments to pass to the method
|
||||
*/
|
||||
$.fn[pluginName] = function(methodOrOptions) {
|
||||
var args = Array.prototype.slice.call(arguments, 1)
|
||||
|
||||
return this.map(function(){
|
||||
var $t = $(this),
|
||||
object = $t.data(pluginName)
|
||||
|
||||
if(object && API[methodOrOptions])
|
||||
return API[methodOrOptions].apply(object, args) || this
|
||||
else if(!object && (methodOrOptions === undefined ||
|
||||
typeof methodOrOptions === "object"))
|
||||
$t.data(pluginName, new Container($t, methodOrOptions))
|
||||
|
||||
return this
|
||||
});
|
||||
};
|
||||
|
||||
}(jQuery, window)
|
||||
;
|
||||
Loading…
x
Reference in New Issue
Block a user