This commit is contained in:
joyqi 2013-10-09 11:47:36 +08:00
parent 37e76372c5
commit d25dcf3669
5 changed files with 440 additions and 81 deletions

View File

@ -357,6 +357,10 @@ button.primary:active, button.primary.active {
white-space: nowrap;
}
.dropdown-menu li p {
padding: 5px 13px;
}
.dropdown-menu li a {
display: block;
padding: 3px 15px;
@ -2389,7 +2393,6 @@ ul.autocompleter-choices span.autocompleter-queried {
.typecho-page-main ul.tag-list li.checked, .typecho-page-main ul.tag-list li.even.checked {
background: none;
font-weight: bold;
text-decoration: underline;
}

View File

@ -76,6 +76,324 @@
})($);
/**
* TableDnD plug-in for JQuery, allows you to drag and drop table rows
* You can set up various options to control how the system will work
* Copyright © Denis Howlett <denish@isocra.com>
* Licensed like jQuery, see http://docs.jquery.com/License.
*
* Configuration options:
*
* onDragStyle
* This is the style that is assigned to the row during drag. There are limitations to the styles that can be
* associated with a row (such as you can't assign a border—well you can, but it won't be
* displayed). (So instead consider using onDragClass.) The CSS style to apply is specified as
* a map (as used in the jQuery css(...) function).
* onDropStyle
* This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations
* to what you can do. Also this replaces the original style, so again consider using onDragClass which
* is simply added and then removed on drop.
* onDragClass
* This class is added for the duration of the drag and then removed when the row is dropped. It is more
* flexible than using onDragStyle since it can be inherited by the row cells and other content. The default
* is class is tDnD_whileDrag. So to use the default, simply customise this CSS class in your
* stylesheet.
* onDrop
* Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
* and the row that was dropped. You can work out the new order of the rows by using
* table.rows.
* onDragStart
* Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the
* table and the row which the user has started to drag.
* onAllowDrop
* Pass a function that will be called as a row is over another row. If the function returns true, allow
* dropping on that row, otherwise not. The function takes 2 parameters: the dragged row and the row under
* the cursor. It returns a boolean: true allows the drop, false doesn't allow it.
* scrollAmount
* This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the
* window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2,
* FF3 beta)
*
* Other ways to control behaviour:
*
* Add class="nodrop" to any rows for which you don't want to allow dropping, and class="nodrag" to any rows
* that you don't want to be draggable.
*
* Inside the onDrop method you can also call $.tableDnD.serialize() this returns a string of the form
* <tableID>[]=<rowID1>&<tableID>[]=<rowID2> so that you can send this back to the server. The table must have
* an ID as must all the rows.
*
* Known problems:
* - Auto-scoll has some problems with IE7 (it scrolls even when it shouldn't), work-around: set scrollAmount to 0
*
* Version 0.2: 2008-02-20 First public version
* Version 0.3: 2008-02-07 Added onDragStart option
* Made the scroll amount configurable (default is 5 as before)
* Version 0.4: 2008-03-15 Changed the noDrag/noDrop attributes to nodrag/nodrop classes
* Added onAllowDrop to control dropping
* Fixed a bug which meant that you couldn't set the scroll amount in both directions
* Added serialise method
*/
(function (jQuery) {
jQuery.tableDnD = {
/** Keep hold of the current table being dragged */
currentTable : null,
/** Keep hold of the current drag object if any */
dragObject: null,
/** The current mouse offset */
mouseOffset: null,
/** Remember the old value of Y so that we don't do too much processing */
oldY: 0,
/** Actually build the structure */
build: function(options) {
// Make sure options exists
options = options || {};
// Set up the defaults if any
this.each(function() {
// Remember the options
this.tableDnDConfig = {
onDragStyle: options.onDragStyle,
onDropStyle: options.onDropStyle,
// Add in the default class for whileDragging
onDragClass: options.onDragClass ? options.onDragClass : "tDnD_whileDrag",
onDrop: options.onDrop,
onDragStart: options.onDragStart,
scrollAmount: options.scrollAmount ? options.scrollAmount : 5
};
// Now make the rows draggable
jQuery.tableDnD.makeDraggable(this);
});
// Now we need to capture the mouse up and mouse move event
// We can use bind so that we don't interfere with other event handlers
jQuery(document)
.bind('mousemove', jQuery.tableDnD.mousemove)
.bind('mouseup', jQuery.tableDnD.mouseup);
// Don't break the chain
return this;
},
/** This function makes all the rows on the table draggable apart from those marked as "NoDrag" */
makeDraggable: function(table) {
// Now initialise the rows
var rows = table.rows; //getElementsByTagName("tr")
var config = table.tableDnDConfig;
for (var i=0; i<rows.length; i++) {
// To make non-draggable rows, add the nodrag class (eg for Category and Header rows)
// inspired by John Tarr and Famic
var nodrag = $(rows[i]).hasClass("nodrag");
if (! nodrag) { //There is no NoDnD attribute on rows I want to drag
jQuery(rows[i]).mousedown(function(ev) {
if (ev.target.tagName == "TD") {
jQuery.tableDnD.dragObject = this;
jQuery.tableDnD.currentTable = table;
jQuery.tableDnD.mouseOffset = jQuery.tableDnD.getMouseOffset(this, ev);
if (config.onDragStart) {
// Call the onDrop method if there is one
config.onDragStart(table, this);
}
return false;
}
}).css("cursor", "move"); // Store the tableDnD object
}
}
},
/** Get the mouse coordinates from the event (allowing for browser differences) */
mouseCoords: function(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
},
/** Given a target element and a mouse event, get the mouse offset from that element.
To do this we need the element's position and the mouse position */
getMouseOffset: function(target, ev) {
ev = ev || window.event;
var docPos = this.getPosition(target);
var mousePos = this.mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
},
/** Get the position of an element by going up the DOM tree and adding up all the offsets */
getPosition: function(e){
var left = 0;
var top = 0;
/** Safari fix -- thanks to Luis Chato for this! */
if (e.offsetHeight == 0) {
/** Safari 2 doesn't correctly grab the offsetTop of a table row
this is detailed here:
http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari/
the solution is likewise noted there, grab the offset of a table cell in the row - the firstChild.
note that firefox will return a text node as a first child, so designing a more thorough
solution may need to take that into account, for now this seems to work in firefox, safari, ie */
e = e.firstChild; // a table cell
}
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top};
},
mousemove: function(ev) {
if (jQuery.tableDnD.dragObject == null) {
return;
}
var dragObj = jQuery(jQuery.tableDnD.dragObject);
var config = jQuery.tableDnD.currentTable.tableDnDConfig;
var mousePos = jQuery.tableDnD.mouseCoords(ev);
var y = mousePos.y - jQuery.tableDnD.mouseOffset.y;
//auto scroll the window
var yOffset = window.pageYOffset;
if (document.all) {
// Windows version
//yOffset=document.body.scrollTop;
if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
yOffset = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
yOffset=document.body.scrollTop;
}
}
if (mousePos.y-yOffset < config.scrollAmount) {
window.scrollBy(0, -config.scrollAmount);
} else {
var windowHeight = window.innerHeight ? window.innerHeight
: document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
if (windowHeight-(mousePos.y-yOffset) < config.scrollAmount) {
window.scrollBy(0, config.scrollAmount);
}
}
if (y != jQuery.tableDnD.oldY) {
// work out if we're going up or down...
var movingDown = y > jQuery.tableDnD.oldY;
// update the old value
jQuery.tableDnD.oldY = y;
// update the style to show we're dragging
if (config.onDragClass) {
dragObj.addClass(config.onDragClass);
} else {
dragObj.css(config.onDragStyle);
}
// If we're over a row then move the dragged row to there so that the user sees the
// effect dynamically
var currentRow = jQuery.tableDnD.findDropTargetRow(dragObj, y);
if (currentRow) {
// TODO worry about what happens when there are multiple TBODIES
if (movingDown && jQuery.tableDnD.dragObject != currentRow) {
jQuery.tableDnD.dragObject.parentNode.insertBefore(jQuery.tableDnD.dragObject, currentRow.nextSibling);
} else if (! movingDown && jQuery.tableDnD.dragObject != currentRow) {
jQuery.tableDnD.dragObject.parentNode.insertBefore(jQuery.tableDnD.dragObject, currentRow);
}
}
}
return false;
},
/** We're only worried about the y position really, because we can only move rows up and down */
findDropTargetRow: function(draggedRow, y) {
var rows = jQuery.tableDnD.currentTable.rows;
for (var i=0; i<rows.length; i++) {
var row = rows[i];
var rowY = this.getPosition(row).y;
var rowHeight = parseInt(row.offsetHeight)/2;
if (row.offsetHeight == 0) {
rowY = this.getPosition(row.firstChild).y;
rowHeight = parseInt(row.firstChild.offsetHeight)/2;
}
// Because we always have to insert before, we need to offset the height a bit
if ((y > rowY - rowHeight) && (y < (rowY + rowHeight))) {
// that's the row we're over
// If it's the same as the current row, ignore it
if (row == draggedRow) {return null;}
var config = jQuery.tableDnD.currentTable.tableDnDConfig;
if (config.onAllowDrop) {
if (config.onAllowDrop(draggedRow, row)) {
return row;
} else {
return null;
}
} else {
// If a row has nodrop class, then don't allow dropping (inspired by John Tarr and Famic)
var nodrop = $(row).hasClass("nodrop");
if (! nodrop) {
return row;
} else {
return null;
}
}
return row;
}
}
return null;
},
mouseup: function(e) {
if (jQuery.tableDnD.currentTable && jQuery.tableDnD.dragObject) {
var droppedRow = jQuery.tableDnD.dragObject;
var config = jQuery.tableDnD.currentTable.tableDnDConfig;
// If we have a dragObject, then we need to release it,
// The row will already have been moved to the right place so we just reset stuff
if (config.onDragClass) {
jQuery(droppedRow).removeClass(config.onDragClass);
} else {
jQuery(droppedRow).css(config.onDropStyle);
}
jQuery.tableDnD.dragObject = null;
if (config.onDrop) {
// Call the onDrop method if there is one
config.onDrop(jQuery.tableDnD.currentTable, droppedRow);
}
jQuery.tableDnD.currentTable = null; // let go of the table too
}
},
serialize: function() {
if (jQuery.tableDnD.currentTable) {
var result = "";
var tableId = jQuery.tableDnD.currentTable.id;
var rows = jQuery.tableDnD.currentTable.rows;
for (var i=0; i<rows.length; i++) {
if (result.length > 0) result += "&";
result += tableId + '[]=' + rows[i].id;
}
return result;
} else {
return "Error: No Table id set, you need to set an id on your table and every row";
}
}
}
jQuery.fn.extend(
{
tableDnD : jQuery.tableDnD.build
}
);
})($);
/** 初始化全局对象 */
var Typecho = {};

View File

@ -16,22 +16,25 @@ include 'menu.php';
<?php if(!isset($request->type) || 'category' == $request->get('type')): ?>
<?php Typecho_Widget::widget('Widget_Metas_Category_List')->to($categories); ?>
<form method="post" name="manage_categories" class="operate-form" action="<?php $options->index('/action/metas-category-edit'); ?>">
<form method="post" name="manage_categories" class="operate-form">
<div class="typecho-list-operate">
<p class="operate"><?php _e('操作'); ?>:
<span class="operate-button typecho-table-select-all"><?php _e('全选'); ?></span>,
<span class="operate-button typecho-table-select-none"><?php _e('不选'); ?></span>&nbsp;&nbsp;&nbsp;
<?php _e('选中项'); ?>:
<span rel="delete" lang="<?php _e('此分类下的所有内容将被删除, 你确认要删除这些分类吗?'); ?>" class="operate-button operate-delete typecho-table-select-submit"><?php _e('删除'); ?></span>,
<span rel="refresh" lang="<?php _e('刷新分类可能需要等待较长时间, 你确认要刷新这些分类吗?'); ?>" class="operate-button typecho-table-select-submit"><?php _e('刷新'); ?></span>,
<span rel="merge" class="operate-button typecho-table-select-submit"><?php _e('合并到'); ?></span>
<div class="operate">
<input type="checkbox" class="typecho-table-select-all" />
<div class="btn-group btn-drop">
<button class="dropdown-toggle" type="button" href="">选中项 &nbsp;<i class="icon-caret-down"></i></button>
<ul class="dropdown-menu">
<li><a lang="<?php _e('此分类下的所有内容将被删除, 你确认要删除这些分类吗?'); ?>" href="<?php $options->index('/action/metas-category-edit?do=delete'); ?>"><?php _e('删除'); ?></a></li>
<li><a lang="<?php _e('刷新分类可能需要等待较长时间, 你确认要刷新这些分类吗?'); ?>" href="<?php $options->index('/action/metas-category-edit?do=refresh'); ?>"><?php _e('刷新'); ?></a></li>
<li><p><button type="button" class="merge" rel="<?php $options->index('/action/metas-category-edit?do=merge'); ?>"><?php _e('合并到'); ?></button>
<select name="merge">
<?php $categories->parse('<option value="{mid}">{name}</option>'); ?>
</select>
</p>
</select></p></li>
</ul>
</div>
</div>
</div>
<table class="typecho-list-table draggable">
<table class="typecho-list-table">
<colgroup>
<col width="25"/>
<col width="230"/>
@ -53,7 +56,7 @@ include 'menu.php';
<tbody>
<?php if($categories->have()): ?>
<?php while ($categories->next()): ?>
<tr<?php $categories->alt(' class="even"', ''); ?> id="<?php $categories->theId(); ?>">
<tr<?php $categories->alt(' class="even"', ''); ?> id="mid-<?php $categories->theId(); ?>">
<td><input type="checkbox" value="<?php $categories->mid(); ?>" name="mid[]"/></td>
<td><a href="<?php echo $request->makeUriByRequest('mid=' . $categories->mid); ?>"><?php $categories->name(); ?></a></td>
<td>
@ -77,24 +80,26 @@ include 'menu.php';
<?php endif; ?>
</tbody>
</table>
<input type="hidden" name="do" value="delete" />
</form>
<?php else: ?>
<?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud', 'sort=mid&desc=0')->to($tags); ?>
<form method="post" name="manage_tags" class="operate-form" action="<?php $options->index('/action/metas-tag-edit'); ?>">
<form method="post" name="manage_tags" class="operate-form">
<div class="typecho-list-operate">
<p class="operate"><?php _e('操作'); ?>:
<span class="operate-button typecho-table-select-all"><?php _e('全选'); ?></span>,
<span class="operate-button typecho-table-select-none"><?php _e('不选'); ?></span>&nbsp;&nbsp;&nbsp;
<?php _e('选中项'); ?>:
<span rel="delete" lang="<?php _e('此标签下的所有内容将被删除, 你确认要删除这些标签吗?'); ?>" class="operate-button operate-delete typecho-table-select-submit"><?php _e('删除'); ?></span>,
<span rel="refresh" lang="<?php _e('刷新标签可能需要等待较长时间, 你确认要刷新这些分类吗?'); ?>" class="operate-button typecho-table-select-submit"><?php _e('刷新'); ?></span>,
<span rel="merge" class="operate-button typecho-table-select-submit"><?php _e('合并到'); ?></span>
<input type="text" name="merge" />
</p>
<div class="operate">
<input type="checkbox" class="typecho-table-select-all" />
<div class="btn-group btn-drop">
<button class="dropdown-toggle" type="button" href="">选中项 &nbsp;<i class="icon-caret-down"></i></button>
<ul class="dropdown-menu">
<li><a lang="<?php _e('此标签下的所有内容将被删除, 你确认要删除这些标签吗?'); ?>" href="<?php $options->index('/action/metas-tag-edit?do=delete'); ?>"><?php _e('删除'); ?></a></li>
<li><a lang="<?php _e('刷新标签可能需要等待较长时间, 你确认要刷新这些标签吗?'); ?>" href="<?php $options->index('/action/metas-tag-edit?do=refresh'); ?>"><?php _e('刷新'); ?></a></li>
<li><p><button type="button" class="merge" rel="<?php $options->index('/action/metas-tag-edit?do=merge'); ?>"><?php _e('合并到'); ?></button>
<input type="text" name="merge" /></p></li>
</ul>
</div>
</div>
</div>
<ul class="typecho-list-notable tag-list clearfix typecho-radius-topleft typecho-radius-topright typecho-radius-bottomleft typecho-radius-bottomright">
<ul class="typecho-list-notable tag-list clearfix">
<?php if($tags->have()): ?>
<?php while ($tags->next()): ?>
<li class="size-<?php $tags->split(5, 10, 20, 30); ?>" id="<?php $tags->theId(); ?>">
@ -125,66 +130,99 @@ include 'menu.php';
<?php
include 'copyright.php';
include 'common-js.php';
include 'table-js.php';
?>
<script type="text/javascript">
(function () {
window.addEvent('domready', function() {
var _selection;
<?php if (isset($request->mid)): ?>
var _hl = $(document).getElement('.typecho-mini-panel');
if (_hl) {
_hl.set('tween', {duration: 1500});
var _bg = _hl.getStyle('background-color');
if (!_bg || 'transparent' == _bg) {
_bg = '#F7FBE9';
}
(function () {
$(document).ready(function () {
var table = $('.typecho-list-table').tableDnD({
onDrop : function () {
var ids = [];
_hl.tween('background-color', '#AACB36', _bg);
}
<?php endif; ?>
if ('tr' == Typecho.Table.table._childTag) {
Typecho.Table.dragStop = function (obj, result) {
var _r = new Request.JSON({
url: '<?php $options->index('/action/metas-category-edit'); ?>'
}).send(result + '&do=sort');
};
} else {
Typecho.Table.checked = function (input, item) {
if (!_selection) {
_selection = document.createElement('div');
$(_selection).addClass('tag-selection');
$(_selection).addClass('clearfix');
$(document).getElement('.typecho-mini-panel form')
.insertBefore(_selection, $(document).getElement('.typecho-mini-panel form #typecho-option-item-name-0'));
$('input[type=checkbox]', table).each(function () {
ids.push($(this).val());
});
$.post('<?php $options->index('/action/metas-category-edit?do=sort'); ?>',
$.param({mid : ids}));
$('tr', table).each(function (i) {
if (i % 2) {
$(this).addClass('even');
} else {
$(this).removeClass('even');
}
var _href = item.getElement('span').getProperty('rel');
var _text = item.getElement('span').get('text');
var _a = document.createElement('a');
$(_a).addClass('button');
$(_a).setProperty('href', _href);
$(_a).set('text', _text);
_selection.appendChild(_a);
item.checkedElement = _a;
};
Typecho.Table.unchecked = function (input, item) {
if (item.checkedElement) {
$(item.checkedElement).destroy();
}
if (!$(_selection).getElement('a')) {
_selection.destroy();
_selection = null;
}
};
});
}
});
})();
if (table.length > 0) {
table.tableSelectable({
checkEl : 'input[type=checkbox]',
rowEl : 'tr',
selectAllEl : '.typecho-table-select-all',
actionEl : '.dropdown-menu a'
});
} else {
$('.typecho-list-notable').tableSelectable({
checkEl : 'input[type=checkbox]',
rowEl : 'li',
selectAllEl : '.typecho-table-select-all',
actionEl : '.dropdown-menu a'
});
$('.typecho-table-select-all').click(function () {
var selection = $('.tag-selection');
if (0 == selection.length) {
selection = $('<div class="tag-selection clearfix" />').prependTo('.typecho-mini-panel');
}
selection.html('');
if ($(this).prop('checked')) {
$('.typecho-list-notable li').each(function () {
var span = $('span', this),
a = $('<a class="button" href="' + span.attr('rel') + '">' + span.text() + '</a>');
this.aHref = a;
selection.append(a);
});
}
});
}
$('.btn-drop').dropdownMenu({
btnEl : '.dropdown-toggle',
menuEl : '.dropdown-menu'
});
$('.dropdown-menu button.merge').click(function () {
var btn = $(this);
btn.parents('form').attr('action', btn.attr('rel')).submit();
});
$('.typecho-list-notable li').click(function () {
var selection = $('.tag-selection'), span = $('span', this),
a = $('<a class="button" href="' + span.attr('rel') + '">' + span.text() + '</a>'),
li = $(this);
if (0 == selection.length) {
selection = $('<div class="tag-selection clearfix" />').prependTo('.typecho-mini-panel');
}
if (li.hasClass('checked')) {
this.aHref = a;
a.appendTo(selection);
} else {
this.aHref.remove();
}
});
<?php if (isset($request->mid)): ?>
$('.typecho-mini-panel').effect('highlight', '#AACB36');
<?php endif; ?>
});
})();
</script>
<?php include 'footer.php'; ?>

View File

@ -32,7 +32,7 @@ $stat = Typecho_Widget::widget('Widget_Stat');
</div>
<form method="post" name="manage_pages" class="operate-form">
<table class="typecho-list-table draggable">
<table class="typecho-list-table">
<colgroup>
<col width="25"/>
<col width="50"/>

View File

@ -462,7 +462,7 @@ class Widget_Abstract_Contents extends Widget_Abstract
/** 处理附件 */
if ('attachment' == $type) {
$content = unserialize($value['text']);
$content = @unserialize($value['text']);
//增加数据信息
$value['attachment'] = new Typecho_Config($content);