mirror of
https://github.com/flynx/pWiki.git
synced 2025-12-16 08:01:39 +00:00
added sort UI, not yet connected to state...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
447ad8ea0d
commit
df04b4072a
13
ext-lib/jquery-ui.min.js
vendored
Executable file
13
ext-lib/jquery-ui.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
209
ext-lib/jquery.ui.touch.js
vendored
Executable file
209
ext-lib/jquery.ui.touch.js
vendored
Executable file
@ -0,0 +1,209 @@
|
|||||||
|
/**
|
||||||
|
* jQuery.UI.iPad plugin
|
||||||
|
* Copyright (c) 2010 Stephen von Takach
|
||||||
|
* licensed under MIT.
|
||||||
|
* Date: 27/8/2010
|
||||||
|
*
|
||||||
|
* Project Home:
|
||||||
|
* http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
|
||||||
|
*
|
||||||
|
* Modified: 19/01/2012
|
||||||
|
* Organized as a proper plugin and added addTouch()
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function (factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['jquery'], factory);
|
||||||
|
} else if (typeof module === 'object' && module.exports) {
|
||||||
|
// Node/CommonJS
|
||||||
|
module.exports = factory(require('jquery'));
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
factory(jQuery);
|
||||||
|
}
|
||||||
|
}(function ($) {
|
||||||
|
|
||||||
|
var lastTap = null; // Holds last tapped element (so we can compare for double tap)
|
||||||
|
var tapValid = false; // Are we still in the .6 second window where a double tap can occur
|
||||||
|
var tapTimeout = null; // The timeout reference
|
||||||
|
var rightClickPending = false; // Is a right click still feasible
|
||||||
|
var rightClickEvent = null; // the original event
|
||||||
|
var holdTimeout = null; // timeout reference
|
||||||
|
var cancelMouseUp = false; // prevents a click from occuring as we want the context menu
|
||||||
|
|
||||||
|
function cancelTap() {
|
||||||
|
tapValid = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
function cancelHold() {
|
||||||
|
if (rightClickPending) {
|
||||||
|
window.clearTimeout(holdTimeout);
|
||||||
|
rightClickPending = false;
|
||||||
|
rightClickEvent = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function startHold(event) {
|
||||||
|
if (rightClickPending)
|
||||||
|
return;
|
||||||
|
|
||||||
|
rightClickPending = true; // We could be performing a right click
|
||||||
|
rightClickEvent = (event.changedTouches)[0];
|
||||||
|
holdTimeout = window.setTimeout(doRightClick, 800);
|
||||||
|
};
|
||||||
|
|
||||||
|
function doRightClick() {
|
||||||
|
rightClickPending = false;
|
||||||
|
|
||||||
|
// We need to mouse up (as we were down)
|
||||||
|
var first = rightClickEvent,
|
||||||
|
simulatedEvent = document.createEvent("MouseEvent");
|
||||||
|
simulatedEvent.initMouseEvent("mouseup", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
|
||||||
|
false, false, false, false, 0, null);
|
||||||
|
first.target.dispatchEvent(simulatedEvent);
|
||||||
|
|
||||||
|
// Emulate a right click
|
||||||
|
simulatedEvent = document.createEvent("MouseEvent");
|
||||||
|
simulatedEvent.initMouseEvent("mousedown", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
|
||||||
|
false, false, false, false, 2, null);
|
||||||
|
first.target.dispatchEvent(simulatedEvent);
|
||||||
|
|
||||||
|
// Show a context menu
|
||||||
|
simulatedEvent = document.createEvent("MouseEvent");
|
||||||
|
simulatedEvent.initMouseEvent("contextmenu", true, true, window, 1, first.screenX + 50, first.screenY + 5, first.clientX + 50, first.clientY + 5,
|
||||||
|
false, false, false, false, 2, null);
|
||||||
|
first.target.dispatchEvent(simulatedEvent);
|
||||||
|
|
||||||
|
// Note: I don't mouse up the right click here however feel free to add if required
|
||||||
|
cancelMouseUp = true;
|
||||||
|
rightClickEvent = null; // Release memory
|
||||||
|
};
|
||||||
|
|
||||||
|
// mouse over event then mouse down
|
||||||
|
function iPadTouchStart(event) {
|
||||||
|
var touches = event.changedTouches,
|
||||||
|
first = touches[0],
|
||||||
|
type = "mouseover",
|
||||||
|
simulatedEvent = document.createEvent("MouseEvent");
|
||||||
|
|
||||||
|
// Mouse over first - I have live events attached on mouse over
|
||||||
|
simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
|
||||||
|
false, false, false, false, 0, null);
|
||||||
|
first.target.dispatchEvent(simulatedEvent);
|
||||||
|
|
||||||
|
type = "mousedown";
|
||||||
|
simulatedEvent = document.createEvent("MouseEvent");
|
||||||
|
|
||||||
|
simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
|
||||||
|
false, false, false, false, 0, null);
|
||||||
|
first.target.dispatchEvent(simulatedEvent);
|
||||||
|
|
||||||
|
|
||||||
|
if (!tapValid) {
|
||||||
|
lastTap = first.target;
|
||||||
|
tapValid = true;
|
||||||
|
tapTimeout = window.setTimeout(cancelTap, 600);
|
||||||
|
startHold(event);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
window.clearTimeout(tapTimeout);
|
||||||
|
|
||||||
|
// If a double tap is still a possibility and the elements are the same then perform a double click
|
||||||
|
if (first.target == lastTap) {
|
||||||
|
lastTap = null;
|
||||||
|
tapValid = false;
|
||||||
|
|
||||||
|
type = "click";
|
||||||
|
simulatedEvent = document.createEvent("MouseEvent");
|
||||||
|
|
||||||
|
simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
|
||||||
|
false, false, false, false, 0/*left*/, null);
|
||||||
|
first.target.dispatchEvent(simulatedEvent);
|
||||||
|
|
||||||
|
type = "dblclick";
|
||||||
|
simulatedEvent = document.createEvent("MouseEvent");
|
||||||
|
|
||||||
|
simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
|
||||||
|
false, false, false, false, 0/*left*/, null);
|
||||||
|
first.target.dispatchEvent(simulatedEvent);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
lastTap = first.target;
|
||||||
|
tapValid = true;
|
||||||
|
tapTimeout = window.setTimeout(cancelTap, 600);
|
||||||
|
startHold(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function iPadTouchHandler(event) {
|
||||||
|
var type = "",
|
||||||
|
button = 0; /*left*/
|
||||||
|
|
||||||
|
if (event.touches.length > 1)
|
||||||
|
return;
|
||||||
|
|
||||||
|
switch (event.type) {
|
||||||
|
case "touchstart":
|
||||||
|
if ($(event.changedTouches[0].target).is("select")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/
|
||||||
|
event.preventDefault();
|
||||||
|
return false;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "touchmove":
|
||||||
|
cancelHold();
|
||||||
|
type = "mousemove";
|
||||||
|
event.preventDefault();
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "touchend":
|
||||||
|
if (cancelMouseUp) {
|
||||||
|
cancelMouseUp = false;
|
||||||
|
event.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
cancelHold();
|
||||||
|
type = "mouseup";
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var touches = event.changedTouches,
|
||||||
|
first = touches[0],
|
||||||
|
simulatedEvent = document.createEvent("MouseEvent");
|
||||||
|
|
||||||
|
simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
|
||||||
|
false, false, false, false, button, null);
|
||||||
|
|
||||||
|
first.target.dispatchEvent(simulatedEvent);
|
||||||
|
|
||||||
|
if (type == "mouseup" && tapValid && first.target == lastTap) { // This actually emulates the ipads default behaviour (which we prevented)
|
||||||
|
simulatedEvent = document.createEvent("MouseEvent"); // This check avoids click being emulated on a double tap
|
||||||
|
|
||||||
|
simulatedEvent.initMouseEvent("click", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
|
||||||
|
false, false, false, false, button, null);
|
||||||
|
|
||||||
|
first.target.dispatchEvent(simulatedEvent);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var touchAvailable = ("ontouchend" in document);
|
||||||
|
|
||||||
|
$.fn.addTouch = function() {
|
||||||
|
if (touchAvailable) {
|
||||||
|
this.each(function(i,el){
|
||||||
|
el.addEventListener("touchstart", iPadTouchHandler, false);
|
||||||
|
el.addEventListener("touchmove", iPadTouchHandler, false);
|
||||||
|
el.addEventListener("touchend", iPadTouchHandler, false);
|
||||||
|
el.addEventListener("touchcancel", iPadTouchHandler, false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
}));
|
||||||
11
index.html
11
index.html
@ -7,6 +7,8 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script src="ext-lib/jquery.js"></script>
|
<script src="ext-lib/jquery.js"></script>
|
||||||
|
<script src="ext-lib/jquery-ui.min.js"></script>
|
||||||
|
<script src="ext-lib/jquery.ui.touch.js"></script>
|
||||||
<script src="ext-lib/showdown.min.js"></script>
|
<script src="ext-lib/showdown.min.js"></script>
|
||||||
|
|
||||||
<script src="ext-lib/FileSaver.js"></script>
|
<script src="ext-lib/FileSaver.js"></script>
|
||||||
@ -37,6 +39,15 @@ var reload = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
var update_editor = function(){
|
var update_editor = function(){
|
||||||
|
$('.sortable')
|
||||||
|
.sortable({
|
||||||
|
handle: ".sort-handle",
|
||||||
|
placeholder: "sort-placeholder",
|
||||||
|
forcePlaceholderSize: true,
|
||||||
|
axis: 'y',
|
||||||
|
})
|
||||||
|
.addTouch()
|
||||||
|
|
||||||
// XXX make this update on enter...
|
// XXX make this update on enter...
|
||||||
// XXX account for title of edited page...
|
// XXX account for title of edited page...
|
||||||
$('.title')
|
$('.title')
|
||||||
|
|||||||
131
wiki.js
131
wiki.js
@ -717,6 +717,19 @@ var data = {
|
|||||||
+'.item:hover .button {\n'
|
+'.item:hover .button {\n'
|
||||||
+' display: inline-block;\n'
|
+' display: inline-block;\n'
|
||||||
+'}\n'
|
+'}\n'
|
||||||
|
+'\n'
|
||||||
|
+'.sort-handle {\n'
|
||||||
|
+' opacity: 0.1;\n'
|
||||||
|
+' padding-left: 5px;\n'
|
||||||
|
+' padding-right: 5px;\n'
|
||||||
|
+' cursor: pointer;\n'
|
||||||
|
+'}\n'
|
||||||
|
+'.item:hover .sort-handle {\n'
|
||||||
|
+' opacity: 0.3;\n'
|
||||||
|
+'}\n'
|
||||||
|
+'.sort-placeholder {\n'
|
||||||
|
+' display: block;\n'
|
||||||
|
+'}\n'
|
||||||
+'',
|
+'',
|
||||||
},
|
},
|
||||||
'System/settings': {
|
'System/settings': {
|
||||||
@ -782,19 +795,22 @@ var data = {
|
|||||||
'Templates/tree': {
|
'Templates/tree': {
|
||||||
//text: '<macro src="../**"> [@source(./path)]<br> </macro>\n'
|
//text: '<macro src="../**"> [@source(./path)]<br> </macro>\n'
|
||||||
text: ''
|
text: ''
|
||||||
+'<macro src="../*">'
|
+'<div class="sortable">'
|
||||||
+'<div class="item">'
|
+'<macro src="../*">'
|
||||||
+'<a href="#@source(./path)">@source(./title)</a>'
|
+'<div class="item">'
|
||||||
+'<span class="separator"/>\n'
|
+'<span class="sort-handle">☰</span> \n'
|
||||||
+'<a class="button" href="#@source(./path)/delete">×</a>'
|
+'<a href="#@source(./path)">@source(./title)</a>'
|
||||||
+'</div>'
|
+'<span class="separator"/>\n'
|
||||||
+'<div style="padding-left: 30px">'
|
+'<a class="button" href="#@source(./path)/delete">×</a>'
|
||||||
+'<include '
|
+'</div>'
|
||||||
+'style="display:block" '
|
+'<div style="padding-left: 30px">'
|
||||||
+'src="@source(./path)/tree" '
|
+'<include '
|
||||||
+'/>'
|
+'style="display:block" '
|
||||||
+'</div>'
|
+'src="@source(./path)/tree" '
|
||||||
+'</macro>\n'
|
+'/>'
|
||||||
|
+'</div>'
|
||||||
|
+'</macro>\n'
|
||||||
|
+'</div>'
|
||||||
},
|
},
|
||||||
'Templates/_raw': {
|
'Templates/_raw': {
|
||||||
text: '@source(..)',
|
text: '@source(..)',
|
||||||
@ -895,7 +911,6 @@ var data = {
|
|||||||
+'\n',
|
+'\n',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// XXX experimental...
|
// XXX experimental...
|
||||||
// XXX need sorting...
|
// XXX need sorting...
|
||||||
'Templates/todo': {
|
'Templates/todo': {
|
||||||
@ -909,28 +924,31 @@ var data = {
|
|||||||
+'</span>'
|
+'</span>'
|
||||||
+'</div>'
|
+'</div>'
|
||||||
+'<br>'
|
+'<br>'
|
||||||
+'<macro src="../*">'
|
+'<div class="sortable">'
|
||||||
+'<div class="item">'
|
+'<macro src="../*">'
|
||||||
+'<div>'
|
+'<div class="item">'
|
||||||
+'<input type="checkbox"/>'
|
+'<div>'
|
||||||
+'<include '
|
+'<span class="sort-handle">☰</span> \n'
|
||||||
+'class="raw" '
|
+'<input type="checkbox"/>'
|
||||||
+'contenteditable tabindex="0" '
|
+'<include '
|
||||||
+'style="display:inline-block" '
|
+'class="raw" '
|
||||||
+'saveto="@source(./path)" '
|
+'contenteditable tabindex="0" '
|
||||||
+'src="."'
|
+'style="display:inline-block" '
|
||||||
+'/>'
|
+'saveto="@source(./path)" '
|
||||||
+'<span class="separator"/>\n'
|
+'src="."'
|
||||||
+'<a class="button" href="#@source(./path)/delete">×</a>'
|
+'/>'
|
||||||
|
+'<span class="separator"/>\n'
|
||||||
|
+'<a class="button" href="#@source(./path)/delete">×</a>'
|
||||||
|
+'</div>'
|
||||||
|
+'<div style="padding-left: 30px">'
|
||||||
|
+'<include '
|
||||||
|
+'style="display:block" '
|
||||||
|
+'src="@source(./path)/todo" '
|
||||||
|
+'/>'
|
||||||
|
+'</div>'
|
||||||
+'</div>'
|
+'</div>'
|
||||||
+'<div style="padding-left: 30px">'
|
+'</macro>'
|
||||||
+'<include '
|
+'</div>'
|
||||||
+'style="display:block" '
|
|
||||||
+'src="@source(./path)/todo" '
|
|
||||||
+'/>'
|
|
||||||
+'</div>'
|
|
||||||
+'</div>'
|
|
||||||
+'</macro>'
|
|
||||||
+'\n',
|
+'\n',
|
||||||
},
|
},
|
||||||
'Templates/outline': {
|
'Templates/outline': {
|
||||||
@ -945,27 +963,30 @@ var data = {
|
|||||||
+'</div>'
|
+'</div>'
|
||||||
//+'<br>'
|
//+'<br>'
|
||||||
//*/
|
//*/
|
||||||
+'<macro src="../*">'
|
+'<div class="sortable">'
|
||||||
+'<div class="item">'
|
+'<macro src="../*">'
|
||||||
+'<div>'
|
+'<div class="item">'
|
||||||
+'<include '
|
+'<div>'
|
||||||
+'class="raw" '
|
+'<span class="sort-handle">☰</span> \n'
|
||||||
+'contenteditable tabindex="0" '
|
+'<include '
|
||||||
+'style="display:inline-block" '
|
+'class="raw" '
|
||||||
+'saveto="@source(./path)" '
|
+'contenteditable tabindex="0" '
|
||||||
+'src="."'
|
+'style="display:inline-block" '
|
||||||
+'/>'
|
+'saveto="@source(./path)" '
|
||||||
+'<span class="separator"/>'
|
+'src="."'
|
||||||
+'<a class="button" href="#@source(./path)/delete">×</a>'
|
+'/>'
|
||||||
|
+'<span class="separator"/>'
|
||||||
|
+'<a class="button" href="#@source(./path)/delete">×</a>'
|
||||||
|
+'</div>'
|
||||||
|
+'<div style="padding-left: 30px">'
|
||||||
|
+'<include '
|
||||||
|
+'style="display:block" '
|
||||||
|
+'src="@source(./path)/outline" '
|
||||||
|
+'/>'
|
||||||
|
+'</div>'
|
||||||
+'</div>'
|
+'</div>'
|
||||||
+'<div style="padding-left: 30px">'
|
+'</macro>'
|
||||||
+'<include '
|
+'</div>'
|
||||||
+'style="display:block" '
|
|
||||||
+'src="@source(./path)/outline" '
|
|
||||||
+'/>'
|
|
||||||
+'</div>'
|
|
||||||
+'</div>'
|
|
||||||
+'</macro>'
|
|
||||||
+'\n',
|
+'\n',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user