更新前端文件

public/static/libs/Sortable/st/app.css

@@ -0,0 +1,243 @@
+html {
+	background-image: -webkit-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
+	background-image: -ms-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
+	background-image: linear-gradient(to bottom, #F4E2C9 20%, #F4D7C9 100%);
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+	position: relative;
+	color: #464637;
+	min-height: 100%;
+	font-size: 20px;
+	font-family: 'Roboto', sans-serif;
+	font-weight: 300;
+}
+
+
+h1 {
+	color: #FF3F00;
+	font-size: 20px;
+	font-family: 'Roboto', sans-serif;
+	font-weight: 300;
+	text-align: center;
+}
+
+
+ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.container {
+	width: 80%;
+	margin: auto;
+	min-width: 1100px;
+	max-width: 1300px;
+	position: relative;
+}
+
+@media (min-width: 750px) and (max-width: 970px){
+	.container {
+		width: 100%;
+		min-width: 750px;
+	}
+}
+
+
+.sortable-ghost {
+	opacity: .2;
+}
+
+#foo .sortable-drag {
+	background: #daf4ff;
+}
+
+
+img {
+	border: 0;
+	vertical-align: middle;
+}
+
+
+.logo {
+	top: 55px;
+	left: 30px;
+	position: absolute;
+}
+
+
+.title {
+	color: #fff;
+	padding: 3px 10px;
+	display: inline-block;
+	position: relative;
+	background-color: #FF7373;
+	z-index: 1000;
+}
+	.title_xl {
+		padding: 3px 15px;
+		font-size: 40px;
+	}
+
+
+
+.tile {
+	width: 22%;
+	min-width: 245px;
+	color: #FF7270;
+	padding: 10px 30px;
+	text-align: center;
+	margin-top: 15px;
+	margin-left: 5px;
+	margin-right: 30px;
+	background-color: #fff;
+	display: inline-block;
+	vertical-align: top;
+}
+	.tile__name {
+		cursor: move;
+		padding-bottom: 10px;
+		border-bottom: 1px solid #FF7373;
+	}
+
+	.tile__list {
+		margin-top: 10px;
+	}
+		.tile__list:last-child {
+			margin-right: 0;
+			min-height: 80px;
+		}
+
+		.tile__list img {
+			cursor: move;
+			margin: 10px;
+			border-radius: 100%;
+		}
+
+
+
+.block {
+	opacity: 1;
+	position: absolute;
+}
+	.block__list {
+		padding: 20px 0;
+		max-width: 360px;
+		margin-top: -8px;
+		margin-left: 5px;
+		background-color: #fff;
+	}
+		.block__list-title {
+			margin: -20px 0 0;
+			padding: 10px;
+			text-align: center;
+			background: #5F9EDF;
+		}
+		.block__list li { cursor: move; }
+
+	.block__list_words li {
+		background-color: #fff;
+		padding: 10px 40px;
+	}
+		.block__list_words .sortable-ghost {
+			opacity: 0.4;
+			background-color: #F4E2C9;
+		}
+
+		.block__list_words li:first-letter {
+			text-transform: uppercase;
+		}
+
+	.block__list_tags {
+		padding-left: 30px;
+	}
+
+	.block__list_tags:after {
+		clear: both;
+		content: '';
+		display: block;
+	}
+		.block__list_tags li {
+			color: #fff;
+			float: left;
+			margin: 8px 20px 10px 0;
+			padding: 5px 10px;
+			min-width: 10px;
+			background-color: #5F9EDF;
+			text-align: center;
+		}
+			.block__list_tags li:first-child:first-letter {
+				text-transform: uppercase;
+			}
+
+
+
+#editable {}
+	#editable li {
+		position: relative;
+	}
+
+	#editable i {
+		-webkit-transition: opacity .2s;
+		transition: opacity .2s;
+		opacity: 0;
+		display: block;
+		cursor: pointer;
+		color: #c00;
+		top: 10px;
+		right: 40px;
+		position: absolute;
+		font-style: normal;
+	}
+
+	#editable li:hover i {
+		opacity: 1;
+	}
+
+
+#filter {}
+	#filter button {
+		color: #fff;
+		width: 100%;
+		border: none;
+		outline: 0;
+		opacity: .5;
+		margin: 10px 0 0;
+		transition: opacity .1s ease;
+		cursor: pointer;
+		background: #5F9EDF;
+		padding: 10px 0;
+		font-size: 20px;
+	}
+		#filter button:hover {
+			opacity: 1;
+		}
+
+	#filter .block__list {
+		padding-bottom: 0;
+	}
+
+.drag-handle {
+	margin-right: 10px;
+	font: bold 20px Sans-Serif;
+	color: #5F9EDF;
+	display: inline-block;
+	cursor: move;
+	cursor: -webkit-grabbing;  /* overrides 'move' */
+}
+
+#todos input {
+	padding: 5px;
+	font-size: 14px;
+	font-family: 'Roboto', sans-serif;
+	font-weight: 300;
+}
+
+
+
+#nested ul li {
+	background-color: rgba(0,0,0,.05);
+}

public/static/libs/Sortable/st/app.js

@@ -0,0 +1,226 @@
+(function () {
+	'use strict';
+
+	var byId = function (id) { return document.getElementById(id); },
+
+		loadScripts = function (desc, callback) {
+			var deps = [], key, idx = 0;
+
+			for (key in desc) {
+				deps.push(key);
+			}
+
+			(function _next() {
+				var pid,
+					name = deps[idx],
+					script = document.createElement('script');
+
+				script.type = 'text/javascript';
+				script.src = desc[deps[idx]];
+
+				pid = setInterval(function () {
+					if (window[name]) {
+						clearTimeout(pid);
+
+						deps[idx++] = window[name];
+
+						if (deps[idx]) {
+							_next();
+						} else {
+							callback.apply(null, deps);
+						}
+					}
+				}, 30);
+
+				document.getElementsByTagName('head')[0].appendChild(script);
+			})()
+		},
+
+		console = window.console;
+
+
+	if (!console.log) {
+		console.log = function () {
+			alert([].join.apply(arguments, ' '));
+		};
+	}
+
+
+	Sortable.create(byId('foo'), {
+		group: "words",
+		animation: 150,
+		store: {
+			get: function (sortable) {
+				var order = localStorage.getItem(sortable.options.group);
+				return order ? order.split('|') : [];
+			},
+			set: function (sortable) {
+				var order = sortable.toArray();
+				localStorage.setItem(sortable.options.group, order.join('|'));
+			}
+		},
+		onAdd: function (evt){ console.log('onAdd.foo:', [evt.item, evt.from]); },
+		onUpdate: function (evt){ console.log('onUpdate.foo:', [evt.item, evt.from]); },
+		onRemove: function (evt){ console.log('onRemove.foo:', [evt.item, evt.from]); },
+		onStart:function(evt){ console.log('onStart.foo:', [evt.item, evt.from]);},
+		onSort:function(evt){ console.log('onStart.foo:', [evt.item, evt.from]);},
+		onEnd: function(evt){ console.log('onEnd.foo:', [evt.item, evt.from]);}
+	});
+
+
+	Sortable.create(byId('bar'), {
+		group: "words",
+		animation: 150,
+		onAdd: function (evt){ console.log('onAdd.bar:', evt.item); },
+		onUpdate: function (evt){ console.log('onUpdate.bar:', evt.item); },
+		onRemove: function (evt){ console.log('onRemove.bar:', evt.item); },
+		onStart:function(evt){ console.log('onStart.foo:', evt.item);},
+		onEnd: function(evt){ console.log('onEnd.foo:', evt.item);}
+	});
+
+
+	// Multi groups
+	Sortable.create(byId('multi'), {
+		animation: 150,
+		draggable: '.tile',
+		handle: '.tile__name'
+	});
+
+	[].forEach.call(byId('multi').getElementsByClassName('tile__list'), function (el){
+		Sortable.create(el, {
+			group: 'photo',
+			animation: 150
+		});
+	});
+
+
+	// Editable list
+	var editableList = Sortable.create(byId('editable'), {
+		animation: 150,
+		filter: '.js-remove',
+		onFilter: function (evt) {
+			evt.item.parentNode.removeChild(evt.item);
+		}
+	});
+
+
+	byId('addUser').onclick = function () {
+		Ply.dialog('prompt', {
+			title: 'Add',
+			form: { name: 'name' }
+		}).done(function (ui) {
+			var el = document.createElement('li');
+			el.innerHTML = ui.data.name + '<i class="js-remove">✖</i>';
+			editableList.el.appendChild(el);
+		});
+	};
+
+
+	// Advanced groups
+	[{
+		name: 'advanced',
+		pull: true,
+		put: true
+	},
+	{
+		name: 'advanced',
+		pull: 'clone',
+		put: false
+	}, {
+		name: 'advanced',
+		pull: false,
+		put: true
+	}].forEach(function (groupOpts, i) {
+		Sortable.create(byId('advanced-' + (i + 1)), {
+			sort: (i != 1),
+			group: groupOpts,
+			animation: 150
+		});
+	});
+
+
+	// 'handle' option
+	Sortable.create(byId('handle-1'), {
+		handle: '.drag-handle',
+		animation: 150
+	});
+
+
+	// Angular example
+	angular.module('todoApp', ['ng-sortable'])
+		.constant('ngSortableConfig', {onEnd: function() {
+			console.log('default onEnd()');
+		}})
+		.controller('TodoController', ['$scope', function ($scope) {
+			$scope.todos = [
+				{text: 'learn angular', done: true},
+				{text: 'build an angular app', done: false}
+			];
+
+			$scope.addTodo = function () {
+				$scope.todos.push({text: $scope.todoText, done: false});
+				$scope.todoText = '';
+			};
+
+			$scope.remaining = function () {
+				var count = 0;
+				angular.forEach($scope.todos, function (todo) {
+					count += todo.done ? 0 : 1;
+				});
+				return count;
+			};
+
+			$scope.archive = function () {
+				var oldTodos = $scope.todos;
+				$scope.todos = [];
+				angular.forEach(oldTodos, function (todo) {
+					if (!todo.done) $scope.todos.push(todo);
+				});
+			};
+		}])
+		.controller('TodoControllerNext', ['$scope', function ($scope) {
+			$scope.todos = [
+				{text: 'learn Sortable', done: true},
+				{text: 'use ng-sortable', done: false},
+				{text: 'Enjoy', done: false}
+			];
+
+			$scope.remaining = function () {
+				var count = 0;
+				angular.forEach($scope.todos, function (todo) {
+					count += todo.done ? 0 : 1;
+				});
+				return count;
+			};
+
+			$scope.sortableConfig = { group: 'todo', animation: 150 };
+			'Start End Add Update Remove Sort'.split(' ').forEach(function (name) {
+				$scope.sortableConfig['on' + name] = console.log.bind(console, name);
+			});
+		}]);
+})();
+
+
+
+// Background
+document.addEventListener("DOMContentLoaded", function () {
+	function setNoiseBackground(el, width, height, opacity) {
+		var canvas = document.createElement("canvas");
+		var context = canvas.getContext("2d");
+
+		canvas.width = width;
+		canvas.height = height;
+
+		for (var i = 0; i < width; i++) {
+			for (var j = 0; j < height; j++) {
+				var val = Math.floor(Math.random() * 255);
+				context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")";
+				context.fillRect(i, j, 1, 1);
+			}
+		}
+
+		el.style.background = "url(" + canvas.toDataURL("image/png") + ")";
+	}
+
+	setNoiseBackground(document.getElementsByTagName('body')[0], 50, 50, 0.02);
+}, false);

public/static/libs/Sortable/st/iframe/frame.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+</head>
+<body>
+
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
+
+
+<!-- List with handle -->
+<div id="listWithHandle" class="list-group">
+	<div class="list-group-item">
+		<span class="badge">14</span>
+		<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
+		Drag me by the handle
+	</div>
+	<div class="list-group-item">
+		<span class="badge">2</span>
+		<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
+		You can also select text
+	</div>
+	<div class="list-group-item">
+		<span class="badge">1</span>
+		<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
+		Best of both worlds!
+	</div>
+</div>
+
+</body>
+</html>

public/static/libs/Sortable/st/iframe/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>IFrame playground</title>
+</head>
+<body>
+
+
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
+
+
+<!-- Latest Sortable -->
+<script src="../../Sortable.js"></script>
+
+
+<!-- Simple List -->
+<div id="simpleList" class="list-group">
+	<div class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></div>
+	<div class="list-group-item">It works with Bootstrap...</div>
+	<div class="list-group-item">...out of the box.</div>
+	<div class="list-group-item">It has support for touch devices.</div>
+	<div class="list-group-item">Just drag some elements around.</div>
+</div>
+
+<script>
+	(function () {
+		Sortable.create(simpleList, {group: 'shared'});
+
+
+		var iframe = document.createElement('iframe');
+
+		iframe.src = 'frame.html';
+		iframe.width = '100%';
+		iframe.onload = function () {
+			var doc = iframe.contentDocument,
+					list = doc.getElementById('listWithHandle');
+
+			Sortable.create(list, {group: 'shared'});
+		};
+
+
+		document.body.appendChild(iframe);
+	})();
+</script>
+
+</body>
+</html>