Welcome to TiddlyWiki created by Jeremy Ruston, Copyright © 2007 UnaMesa Association
<html>
<h1>jQuery List DragSort Example</h1>
<a href="http://dragsort.codeplex.com/">Homepage</a><br/>
<br/>
<h2>HTML list:</h2>
<ul>
<li>bread</li>
<li>vegetables</li>
<li>meat</li>
<li>milk</li>
<li>butter</li>
<li>ice cream</li>
</ul>
</html>
!!!TW List
*bread
*vegetables
*meat
*milk
*butter
*ice cream
<<tiddler dsScript>>
<html>
<h2>HTML list with drag and drop between lists:</h2>
<ul id="list2">
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
</ul>
<ul id="list1">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
</ul>
</html>
!!!TW Lists
*001
*002
*003
*004
*005
*006
*007
*008
*009
*010
*011
*012
*013
*014
*015
*016
*017
*018
<<tiddler dsScript>>
!HTML Blocks
<html>
<head>
<style type="text/css">
ul { margin:0px; padding:0px; margin-left:20px; }
#list1, #list2 { width:330px; list-style-type:none; margin:0px; }
#list1 li, #list2 li { float:left; padding:5px; width:100px; height:100px; }
#list1 div, #list2 div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }
#list2 { float:right; }
.placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
</style>
</head>
<body>
<h2>Html 2D list with drag and drop between lists:</h2>
<ul id="list2">
<li><div>10</div></li>
<li><div>11</div></li>
<li><div>12</div></li>
<li><div>13</div></li>
<li><div>14</div></li>
<li><div>15</div></li>
<li><div>16</div></li>
<li><div>17</div></li>
<li><div>18</div></li>
</ul>
<!-- save sort order here which can be retrieved on server on postback -->
<input name="list2SortOrder" type="hidden" />
<ul id="list1">
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>
<li><div>8</div></li>
<li><div>9</div></li>
</ul>
<!-- save sort order here which can be retrieved on server on postback -->
<input name="list1SortOrder" type="hidden" />
<div style="clear:both;"></div>
</body>
</html>
[[dsScript2]] Sort Order saving function, not working docs:<<tag 'jquery.dragsort-0.310.js'>>
<<tiddler dsScript2>>
!!!Un Ordered Lists <ul> element
*List Item 01
*List Item 02
*List Item 03
*List Item 04
*List Item 05
!!!enable or disable dsScript to see results
{{{<<tiddler 'Toggle dsScript'>>}}}
<<tiddler 'Toggle dsScript'>>
!!!Ordered Lists <ol> element
#List Item 01
#List Item 02
#List Item 03
#List Item 04
#List Item 05
{{{<<tiddler dsScript>>}}}
<<tiddler dsScript>>
test section text1
test section text 2
<<tiddler QuickTask>>
!!!Open Items/%MARKER%/
*QuickTask form, prevent user from using / saving this tiddler via onsubmit
*TaskManager - if escape or cancel during prompt for title, null tiddler is created preventing saving
*save dragsort order to field?
*fix dragsort from bleeding from one tiddler to another (script problem?)
*add deleting of todo items - (x) delete li
*add {{{ [edit] }}} todo items - (e) edit inline li
*Create a plugin and eliminate inline scripts / transclusion
*Create a stylesheet within the macro/plugin (do not define style inline, use CSS classes)
<script>
var text=store.getTiddlerText(tiddler.title+'##Open Items/%MARKER%/');
match = text.match(/^[*|#]/im);
if (match != null) {
//return ('*found list items');
} else {
// Match attempt failed
return ('*No Items')
}
</script>
!!!Closed Items/%EMARKER%/
*Sections Template
*find a way to handle dragging item to an empty section - IE no items in closed or open
*Open: add {{{ [[ ] all] }}} todo items (Close All) (still needed?)
*Closed: add {{{ [x all] }}} todo items (Delete All) (still needed?)
*Transclusion of the form works within the same tiddler via hidden section
*Create a basic form macro that stores data (inline)
*add sorting of todo items - (↕) dragsort
*linking capabilities from project items via CamelCase, [[Camel Case]], and http://camelcase.com
<script>
var text=store.getTiddlerText(tiddler.title+'##Closed Items/%EMARKER%/');
match = text.match(/^[*|#]/im);
if (match != null) {
//return ('*found list items');
} else {
// Match attempt failed
return ('*No Items')
}
</script><<tiddler dsScript>>
On Wednesday, April 28, 2010 10:11:31 PM, YourName imported 25 tiddlers from
[[K:\Documents\tw\dragsort editinline project\dragsort-0.3.10\ds2.6.0.html|K:\Documents\tw\dragsort editinline project\dragsort-0.3.10\ds2.6.0.html]]:
<<<
#[[16 April 2010]] - added
#[[17 April 2010]] - added
#[[22 April 2010]] - added
#[[23 April 2010]] - added
#[[24 April 2010]] - added
#[[27 April 2010]] - added
#[[DefaultTiddlers]] - added
#[[InlineJavascriptPlugin]] - added
#[[MainMenu]] - added
#[[Possbile save sort help?]] - added
#[[QuickTask]] - added
#[[QuickTaskStable]] - added
#[[StyleSheet]] - added
#[[ThePlan]] - added
#[[Toggle dsScript]] - added
#[[ToolbarCommands]] - added
#[[Usage]] - added
#[[ViewTemplate]] - added
#[[dragEnd function]] - added
#[[dsScript]] - added
#[[dsScript2]] - added
#[[example.php]] - added
#[[jquery.dragsort-0.310.js]] - added
#[[save sort with a cookie]] - added
#[[zConfig]] - added
<<<
/***
|Name|InlineJavascriptPlugin|
|Source|http://www.TiddlyTools.com/#InlineJavascriptPlugin|
|Documentation|http://www.TiddlyTools.com/#InlineJavascriptPluginInfo|
|Version|1.9.5|
|Author|Eric Shulman|
|License|http://www.TiddlyTools.com/#LegalStatements <br>and [[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]]|
|~CoreVersion|2.1|
|Type|plugin|
|Requires||
|Overrides||
|Description|Insert Javascript executable code directly into your tiddler content.|
''Call directly into TW core utility routines, define new functions, calculate values, add dynamically-generated TiddlyWiki-formatted output'' into tiddler content, or perform any other programmatic actions each time the tiddler is rendered.
!!!!!Documentation
>see [[InlineJavascriptPluginInfo]]
!!!!!Revisions
<<<
2009.04.11 [1.9.5] pass current tiddler object into wrapper code so it can be referenced from within 'onclick' scripts
2009.02.26 [1.9.4] in $(), handle leading '#' on ID for compatibility with JQuery syntax
|please see [[InlineJavascriptPluginInfo]] for additional revision details|
2005.11.08 [1.0.0] initial release
<<<
!!!!!Code
***/
//{{{
version.extensions.InlineJavascriptPlugin= {major: 1, minor: 9, revision: 5, date: new Date(2009,4,11)};
config.formatters.push( {
name: "inlineJavascript",
match: "\\<script",
lookahead: "\\<script(?: src=\\\"((?:.|\\n)*?)\\\")?(?: label=\\\"((?:.|\\n)*?)\\\")?(?: title=\\\"((?:.|\\n)*?)\\\")?(?: key=\\\"((?:.|\\n)*?)\\\")?( show)?\\>((?:.|\\n)*?)\\</script\\>",
handler: function(w) {
var lookaheadRegExp = new RegExp(this.lookahead,"mg");
lookaheadRegExp.lastIndex = w.matchStart;
var lookaheadMatch = lookaheadRegExp.exec(w.source)
if(lookaheadMatch && lookaheadMatch.index == w.matchStart) {
var src=lookaheadMatch[1];
var label=lookaheadMatch[2];
var tip=lookaheadMatch[3];
var key=lookaheadMatch[4];
var show=lookaheadMatch[5];
var code=lookaheadMatch[6];
if (src) { // external script library
var script = document.createElement("script"); script.src = src;
document.body.appendChild(script); document.body.removeChild(script);
}
if (code) { // inline code
if (show) // display source in tiddler
wikify("{{{\n"+lookaheadMatch[0]+"\n}}}\n",w.output);
if (label) { // create 'onclick' command link
var link=createTiddlyElement(w.output,"a",null,"tiddlyLinkExisting",wikifyPlainText(label));
var fixup=code.replace(/document.write\s*\(/gi,'place.bufferedHTML+=(');
link.code="function _out(place,tiddler){"+fixup+"\n};_out(this,this.tiddler);"
link.tiddler=w.tiddler;
link.onclick=function(){
this.bufferedHTML="";
try{ var r=eval(this.code);
if(this.bufferedHTML.length || (typeof(r)==="string")&&r.length)
var s=this.parentNode.insertBefore(document.createElement("span"),this.nextSibling);
if(this.bufferedHTML.length)
s.innerHTML=this.bufferedHTML;
if((typeof(r)==="string")&&r.length) {
wikify(r,s,null,this.tiddler);
return false;
} else return r!==undefined?r:false;
} catch(e){alert(e.description||e.toString());return false;}
};
link.setAttribute("title",tip||"");
var URIcode='javascript:void(eval(decodeURIComponent(%22(function(){try{';
URIcode+=encodeURIComponent(encodeURIComponent(code.replace(/\n/g,' ')));
URIcode+='}catch(e){alert(e.description||e.toString())}})()%22)))';
link.setAttribute("href",URIcode);
link.style.cursor="pointer";
if (key) link.accessKey=key.substr(0,1); // single character only
}
else { // run script immediately
var fixup=code.replace(/document.write\s*\(/gi,'place.innerHTML+=(');
var c="function _out(place,tiddler){"+fixup+"\n};_out(w.output,w.tiddler);";
try { var out=eval(c); }
catch(e) { out=e.description?e.description:e.toString(); }
if (out && out.length) wikify(out,w.output,w.highlightRegExp,w.tiddler);
}
}
w.nextMatch = lookaheadMatch.index + lookaheadMatch[0].length;
}
}
} )
//}}}
// // Backward-compatibility for TW2.1.x and earlier
//{{{
if (typeof(wikifyPlainText)=="undefined") window.wikifyPlainText=function(text,limit,tiddler) {
if(limit > 0) text = text.substr(0,limit);
var wikifier = new Wikifier(text,formatter,null,tiddler);
return wikifier.wikifyPlain();
}
//}}}
// // GLOBAL FUNCTION: $(...) -- 'shorthand' convenience syntax for document.getElementById()
//{{{
if (typeof($)=='undefined') { function $(id) { return document.getElementById(id.replace(/^#/,'')); } }
//}}}
/***
|''Name:''|LoadRemoteFileThroughProxy (previous LoadRemoteFileHijack)|
|''Description:''|When the TiddlyWiki file is located on the web (view over http) the content of [[SiteProxy]] tiddler is added in front of the file url. If [[SiteProxy]] does not exist "/proxy/" is added. |
|''Version:''|1.1.0|
|''Date:''|mar 17, 2007|
|''Source:''|http://tiddlywiki.bidix.info/#LoadRemoteFileHijack|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D ]]|
|''~CoreVersion:''|2.2.0|
***/
//{{{
version.extensions.LoadRemoteFileThroughProxy = {
major: 1, minor: 1, revision: 0,
date: new Date("mar 17, 2007"),
source: "http://tiddlywiki.bidix.info/#LoadRemoteFileThroughProxy"};
if (!window.bidix) window.bidix = {}; // bidix namespace
if (!bidix.core) bidix.core = {};
bidix.core.loadRemoteFile = loadRemoteFile;
loadRemoteFile = function(url,callback,params)
{
if ((document.location.toString().substr(0,4) == "http") && (url.substr(0,4) == "http")){
url = store.getTiddlerText("SiteProxy", "/proxy/") + url;
}
return bidix.core.loadRemoteFile(url,callback,params);
}
//}}}
[[Demo]]
ThePlan
[[jquery.dragsort-0.310.js]]
[[QuickTask]]
[[dsScript]]
----
[[GettingStarted]]
WelcomeToTiddlyspot
/***
|''Name:''|PasswordOptionPlugin|
|''Description:''|Extends TiddlyWiki options with non encrypted password option.|
|''Version:''|1.0.2|
|''Date:''|Apr 19, 2007|
|''Source:''|http://tiddlywiki.bidix.info/#PasswordOptionPlugin|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D ]]|
|''~CoreVersion:''|2.2.0 (Beta 5)|
***/
//{{{
version.extensions.PasswordOptionPlugin = {
major: 1, minor: 0, revision: 2,
date: new Date("Apr 19, 2007"),
source: 'http://tiddlywiki.bidix.info/#PasswordOptionPlugin',
author: 'BidiX (BidiX (at) bidix (dot) info',
license: '[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D]]',
coreVersion: '2.2.0 (Beta 5)'
};
config.macros.option.passwordCheckboxLabel = "Save this password on this computer";
config.macros.option.passwordInputType = "password"; // password | text
setStylesheet(".pasOptionInput {width: 11em;}\n","passwordInputTypeStyle");
merge(config.macros.option.types, {
'pas': {
elementType: "input",
valueField: "value",
eventName: "onkeyup",
className: "pasOptionInput",
typeValue: config.macros.option.passwordInputType,
create: function(place,type,opt,className,desc) {
// password field
config.macros.option.genericCreate(place,'pas',opt,className,desc);
// checkbox linked with this password "save this password on this computer"
config.macros.option.genericCreate(place,'chk','chk'+opt,className,desc);
// text savePasswordCheckboxLabel
place.appendChild(document.createTextNode(config.macros.option.passwordCheckboxLabel));
},
onChange: config.macros.option.genericOnChange
}
});
merge(config.optionHandlers['chk'], {
get: function(name) {
// is there an option linked with this chk ?
var opt = name.substr(3);
if (config.options[opt])
saveOptionCookie(opt);
return config.options[name] ? "true" : "false";
}
});
merge(config.optionHandlers, {
'pas': {
get: function(name) {
if (config.options["chk"+name]) {
return encodeCookie(config.options[name].toString());
} else {
return "";
}
},
set: function(name,value) {config.options[name] = decodeCookie(value);}
}
});
// need to reload options to load passwordOptions
loadOptionsCookie();
/*
if (!config.options['pasPassword'])
config.options['pasPassword'] = '';
merge(config.optionsDesc,{
pasPassword: "Test password"
});
*/
//}}}
!!!How do i get a string value of the new sorted list?
kiwi_fella
Sep 29 2009 at 9:41 PM
Firstly... Great script, thanks for sharing :-)
My Question:
How do i get a string value of the new sorted list?
My Objective:
I want to be able to sort a gallery of thumbnail images, then submit a form and update my database with the new order of the sorted list.
Example:
if i start with a simple ordered list like (1,2,3,4,5,6)
... then i sort them into a new order like (5,2,4,1,3,6)
... How do i get a string of the new order? - Ideally the string would be the 'id' of each <li> or <div> tag.
Cheers :)
Reply
Reply with quote
mcm_ham
Coordinator
Sep 30 2009 at 2:44 AM
My pleasure. In the download there is a file called example.aspx that provides an example of what you are talking about. Although this makes an ajax request to the server immediately without waiting for the form to be submitted. If you didn't want to save the order until the user clicks the submit button then save the serialStr to a hidden input field and on postback read it's value. The example file [[example.php]]
http://www.talkphp.com/vbarticles.php?do=article&articleid=58&title=simple-ajax-with-jquery
Reply
Reply with quote
kiwi_fella
Oct 5 2009 at 5:28 PM
AWESOME!
Thanks for your help... a clear & precise solution to my question :D
For anyone who finds this thread and wants to acheive a similar thing... i use javascript to populate a hidden form field and then submit form to update database.
Also note - i have moved the id="gallery" into a containing <div> (the original script used <ul id="gallery">) - i found the div works better in FireFox browser when images wrap onto new line!
----------------------------------------------------------
<div id="gallery">
<ul >
<li id="1"><div ><img border="1" src="i/thumbs/pic01.jpg" width="120" height="90"></div></li>
<li id="2"><div ><img border="1" src="i/thumbs/pic02.jpg" width="120" height="90"></div></li>
<li id="3"><div ><img border="1" src="i/thumbs/pic03.jpg" width="120" height="90"></div></li>
<li id="4"><div ><img border="1" src="i/thumbs/pic04.jpg" width="120" height="90"></div></li>
</ul>
</div>
<form name="sortForm" action="sortPics_submit.php" method="post">
<input type="hidden" id="sortOrder" name="sortOrder">
<button type="submit" class="submit3" name="submit"><span>Save & Continue...</span></button>
</form>
<script type="text/javascript">
// this tells the sort script to do its thing
$("#gallery").dragsort({ dragSelector: "li div", dragEnd: saveOrder });
// this is the function that puts the new sort order into a string
function saveOrder() {
var serialStr = "";
$("#gallery li").each(function(i, elm) { serialStr += (i > 0 ? "," : "") + $(elm).attr("id"); });
// this dynamically updates string to hidden form field
document.getElementById('sortOrder').value = serialStr;
};
</script>
----------------------------------------------------------
Cheers,
Brendon
Reply
Reply with quote
centrex
Dec 26 2009 at 5:53 PM
<html><hide linebreaks><!-- see HTMLFormattingPlugin --><form
action="javascript:;"
onsubmit="
/* get current tiddler (if any) */
var t=story.findContainingTiddler(this).getAttribute('tiddler');
var tid=store.getTiddler(t);
var who=tid?tid.modifier:config.options.txtUserName;
var when=tid?tid.modified:new Date();0
var txt=tid?tid.text:'';
var tags=tid?tid.tags:[];
var fields=tid?tid.fields:{};
/* get form values and construct new tiddler text */
var fmt='\n*%0';
var newtxt=fmt.format([this.field1.value]);
/* insert new text at marker (or end, if no marker) */
var marker='/%MARKER%/';
if (txt.indexOf(marker)==-1) txt=txt+newtxt;
else txt=txt.replace(new RegExp(marker.escapeRegExp()),marker+newtxt);
/* write and show tiddler */
store.saveTiddler(t,t,txt, who, when, tags, fields);
story.displayTiddler(story.findContainingTiddler(this),t);
return false;">
<input name="field1" value="QuickTask Here" onfocus="this.select()"
style="width:50%">
<input type="submit" value="+">
</form></html>
<html><hide linebreaks><!-- see HTMLFormattingPlugin --><form
action="javascript:;"
onsubmit="
/* get current tiddler (if any) */
var t=story.findContainingTiddler(this).getAttribute('tiddler');
var tid=store.getTiddler(t);
var who=tid?tid.modifier:config.options.txtUserName;
var when=tid?tid.modified:new Date();0
var txt=tid?tid.text:'';
var tags=tid?tid.tags:[];
var fields=tid?tid.fields:{};
/* get form values and construct new tiddler text */
var fmt='\n*%0';
var newtxt=fmt.format([this.field1.value]);
/* insert new text at marker (or end, if no marker) */
var marker='/%MARKER%/';
if (txt.indexOf(marker)==-1) txt=txt+newtxt;
else txt=txt.replace(new RegExp(marker.escapeRegExp()),marker+newtxt);
/* write and show tiddler */
store.saveTiddler(t,t,txt, who, when, tags, fields);
story.displayTiddler(story.findContainingTiddler(this),t);
return false;">
<input name="field1" value="QuickTask Here" onfocus="this.select()"
style="width:50%">
<input type="submit" value="+">
</form></html>
/*{{{*/
.custom ul {
list-style: none;
}
.custom ul li:before {
content: "↕ \0020";
}
.custom ol li:before {
content: "↕ \0020";
}
/*}}}*/
{{button{<script label="TaskManager">
var title= prompt('Enter a new QuickTask manager title','New TaskManager');
var txt = store.getTiddlerText("TaskManagerTemplate", "");
var who=config.options.txtUserName;
var when=new Date();
var tags='tasks';
var fields={};
if(store.tiddlerExists(title)){
/* displayMessage(title +' has already been created');*/
} else {
store.saveTiddler(title,title,txt,who,when,tags,fields);
story.refreshTiddler(story.findContainingTiddler(place).getAttribute("tiddler"),null,true);
displayMessage(title +' has been created');
}
story.displayTiddler(null, title);
story.focusTiddler(null, title);
</script>}}}
@@display:none;
!!!Test1
test section text1
!!!Test2
test section text 2
!!!End
@@
<<tiddler QuickTask>>
!!!Open Items/%MARKER%/
<script>
var text=store.getTiddlerText(tiddler.title+'##Open Items/%MARKER%/');
match = text.match(/^[*|#]/im);
if (match != null) {
//return ('*found list items');
} else {
// Match attempt failed
return ('*No Items')
}
</script>
!!!Closed Items/%EMARKER%/
<script>
var text=store.getTiddlerText(tiddler.title+'##Closed Items/%EMARKER%/');
match = text.match(/^[*|#]/im);
if (match != null) {
//return ('*found list items');
} else {
// Match attempt failed
return ('*No Items')
}
</script><<tiddler dsScript>>
<<tiddler QuickTask>>
!!!Open Items/%MARKER%/
<script>
var text=store.getTiddlerText(tiddler.title+'##Open Items/%MARKER%/');
match = text.match(/^[*|#]/im);
if (match != null) {
//return ('*found list items');
} else {
// Match attempt failed
return ('*No Items')
}
</script>
!!!Closed Items/%EMARKER%/
<script>
var text=store.getTiddlerText(tiddler.title+'##Closed Items/%EMARKER%/');
match = text.match(/^[*|#]/im);
if (match != null) {
//return ('*found list items');
} else {
// Match attempt failed
return ('*No Items')
}
</script><<tiddler dsScript>>
!!!Concept
#Create a new ~JQuery based Task Manager styled after DataListPlugin (with out DataTiddlerPlugin dependencies)
#Have transclusion capabilities via {{{<<tiddler, <<tabs, <<slider }}} ect.
#Have linking capabilities from project items via {{{ CamelCase, [[Camel Case]], and http://camelcase.com }}}
# http://dragsort.tiddlyspot.com/ password = dragsort
!!!Macros (not functional yet)
(e) edit inline li
(x) delete li
(↕) dragsort
!!!Design (not functional yet)
''Open:''
e x ↕ List Item
e x ↕ List Item
e x ↕ List Item
e x ↕ List Item
''Closed:''
e x ↕ List Item
e x ↕ List Item
e x ↕ List Item
e x ↕ List Item
!!!Reference
http://tool-man.org/examples/edit-in-place.html
http://tool-man.org/examples/sorting.html
http://burikmodeldesign.com/search/To_Do_List/Great_Kid_Sites_w_TO-DO-LIST_703_JZ_.htm
http://javascript.internet.com/cookies/to-do-list.html
http://groups.google.com/group/tiddlywikidev/browse_thread/thread/355fada9149f6920
<script label="click here">
/* toggle "txtSomething" value */
var on=(config.txtSomething=="ON");
place.innerHTML=on?"enable":"disable";
config.txtSomething=on?"OFF":"ON";
// return "\nThe current value is: "+config.txtSomething;
if (config.txtSomething=="ON") {
return ('<<tiddler dsScript>>');
} else {
story.refreshTiddler(story.findContainingTiddler(place).getAttribute("tiddler"),null,true);
}
</script><script>
/* initialize onclick link text based on current "txtSomething" value */
var on=(config.txtSomething=="ON");
place.lastChild.innerHTML=on?"disable":"enable";
</script>
|~ViewToolbar|closeTiddler closeOthers editTiddler > fields syncing permalink references jump|
|~EditToolbar|+saveTiddler -cancelTiddler fields deleteTiddler|
/***
Description: Contains the stuff you need to use Tiddlyspot
Note, you also need UploadPlugin, PasswordOptionPlugin and LoadRemoteFileThroughProxy
from http://tiddlywiki.bidix.info for a complete working Tiddlyspot site.
***/
//{{{
// edit this if you are migrating sites or retrofitting an existing TW
config.tiddlyspotSiteId = 'dragsort';
// make it so you can by default see edit controls via http
config.options.chkHttpReadOnly = false;
window.readOnly = false; // make sure of it (for tw 2.2)
window.showBackstage = true; // show backstage too
// disable autosave in d3
if (window.location.protocol != "file:")
config.options.chkGTDLazyAutoSave = false;
// tweak shadow tiddlers to add upload button, password entry box etc
with (config.shadowTiddlers) {
SiteUrl = 'http://'+config.tiddlyspotSiteId+'.tiddlyspot.com';
SideBarOptions = SideBarOptions.replace(/(<<saveChanges>>)/,"$1<<tiddler TspotSidebar>>");
OptionsPanel = OptionsPanel.replace(/^/,"<<tiddler TspotOptions>>");
DefaultTiddlers = DefaultTiddlers.replace(/^/,"[[WelcomeToTiddlyspot]] ");
MainMenu = MainMenu.replace(/^/,"[[WelcomeToTiddlyspot]] ");
}
// create some shadow tiddler content
merge(config.shadowTiddlers,{
'TspotOptions':[
"tiddlyspot password:",
"<<option pasUploadPassword>>",
""
].join("\n"),
'TspotControls':[
"| tiddlyspot password:|<<option pasUploadPassword>>|",
"| site management:|<<upload http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/store.cgi index.html . . " + config.tiddlyspotSiteId + ">>//(requires tiddlyspot password)//<br>[[control panel|http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/controlpanel]], [[download (go offline)|http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/download]]|",
"| links:|[[tiddlyspot.com|http://tiddlyspot.com/]], [[FAQs|http://faq.tiddlyspot.com/]], [[blog|http://tiddlyspot.blogspot.com/]], email [[support|mailto:support@tiddlyspot.com]] & [[feedback|mailto:feedback@tiddlyspot.com]], [[donate|http://tiddlyspot.com/?page=donate]]|"
].join("\n"),
'WelcomeToTiddlyspot':[
"This document is a ~TiddlyWiki from tiddlyspot.com. A ~TiddlyWiki is an electronic notebook that is great for managing todo lists, personal information, and all sorts of things.",
"",
"@@font-weight:bold;font-size:1.3em;color:#444; //What now?// @@ Before you can save any changes, you need to enter your password in the form below. Then configure privacy and other site settings at your [[control panel|http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/controlpanel]] (your control panel username is //" + config.tiddlyspotSiteId + "//).",
"<<tiddler TspotControls>>",
"See also GettingStarted.",
"",
"@@font-weight:bold;font-size:1.3em;color:#444; //Working online// @@ You can edit this ~TiddlyWiki right now, and save your changes using the \"save to web\" button in the column on the right.",
"",
"@@font-weight:bold;font-size:1.3em;color:#444; //Working offline// @@ A fully functioning copy of this ~TiddlyWiki can be saved onto your hard drive or USB stick. You can make changes and save them locally without being connected to the Internet. When you're ready to sync up again, just click \"upload\" and your ~TiddlyWiki will be saved back to tiddlyspot.com.",
"",
"@@font-weight:bold;font-size:1.3em;color:#444; //Help!// @@ Find out more about ~TiddlyWiki at [[TiddlyWiki.com|http://tiddlywiki.com]]. Also visit [[TiddlyWiki.org|http://tiddlywiki.org]] for documentation on learning and using ~TiddlyWiki. New users are especially welcome on the [[TiddlyWiki mailing list|http://groups.google.com/group/TiddlyWiki]], which is an excellent place to ask questions and get help. If you have a tiddlyspot related problem email [[tiddlyspot support|mailto:support@tiddlyspot.com]].",
"",
"@@font-weight:bold;font-size:1.3em;color:#444; //Enjoy :)// @@ We hope you like using your tiddlyspot.com site. Please email [[feedback@tiddlyspot.com|mailto:feedback@tiddlyspot.com]] with any comments or suggestions."
].join("\n"),
'TspotSidebar':[
"<<upload http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/store.cgi index.html . . " + config.tiddlyspotSiteId + ">><html><a href='http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/download' class='button'>download</a></html>"
].join("\n")
});
//}}}
| !date | !user | !location | !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |
| 28/04/2010 22:25:08 | Mike P. | [[dragsort.html|file:///K:/Documents/tw/dragsort%20editinline%20project/dragsort-0.3.10/dragsort.html]] | [[store.cgi|http://dragsort.tiddlyspot.com/store.cgi]] | . | [[index.html | http://dragsort.tiddlyspot.com/index.html]] | . | ok |
| 28/04/2010 22:26:32 | Mike P. | [[dragsort.html|file:///K:/Documents/tw/dragsort%20editinline%20project/dragsort-0.3.10/dragsort.html]] | [[store.cgi|http://dragsort.tiddlyspot.com/store.cgi]] | . | [[index.html | http://dragsort.tiddlyspot.com/index.html]] | . | ok |
| 28/04/2010 22:28:38 | Mike P. | [[dragsort.html|file:///K:/Documents/tw/dragsort%20editinline%20project/dragsort-0.3.10/dragsort.html]] | [[store.cgi|http://dragsort.tiddlyspot.com/store.cgi]] | . | [[index.html | http://dragsort.tiddlyspot.com/index.html]] | . |
| 30/04/2010 13:19:29 | Mike P. | [[/|http://dragsort.tiddlyspot.com/]] | [[store.cgi|http://dragsort.tiddlyspot.com/store.cgi]] | . | [[index.html | http://dragsort.tiddlyspot.com/index.html]] | . | failed |
| 30/04/2010 13:19:52 | Mike P. | [[/|http://dragsort.tiddlyspot.com/]] | [[store.cgi|http://dragsort.tiddlyspot.com/store.cgi]] | . | [[index.html | http://dragsort.tiddlyspot.com/index.html]] | . |
| 30/04/2010 13:21:24 | Mike P. | [[dragsort.html|file:///K:/Documents/tw/dragsort%20editinline%20project/dragsort-0.3.10/dragsort.html]] | [[store.cgi|http://dragsort.tiddlyspot.com/store.cgi]] | . | [[index.html | http://dragsort.tiddlyspot.com/index.html]] | . |
| 30/04/2010 19:47:19 | Mike P. | [[/|http://dragsort.tiddlyspot.com/]] | [[store.cgi|http://dragsort.tiddlyspot.com/store.cgi]] | . | [[index.html | http://dragsort.tiddlyspot.com/index.html]] | . | ok |
| 30/04/2010 19:51:50 | Mike P. | [[/|http://dragsort.tiddlyspot.com/]] | [[store.cgi|http://dragsort.tiddlyspot.com/store.cgi]] | . | [[index.html | http://dragsort.tiddlyspot.com/index.html]] | . |
| 30/04/2010 19:53:29 | Mike P. | [[/|http://dragsort.tiddlyspot.com/]] | [[store.cgi|http://dragsort.tiddlyspot.com/store.cgi]] | . | [[index.html | http://dragsort.tiddlyspot.com/index.html]] | . |
| 13/05/2010 14:03:28 | Mike P. | [[dragsort.html|file:///K:/Documents/tw/dragsort%20editinline%20project/dragsort-0.3.10/dragsort.html]] | [[store.cgi|http://dragsort.tiddlyspot.com/store.cgi]] | . | [[index.html | http://dragsort.tiddlyspot.com/index.html]] | . |
/***
|''Name:''|UploadPlugin|
|''Description:''|Save to web a TiddlyWiki|
|''Version:''|4.1.3|
|''Date:''|Feb 24, 2008|
|''Source:''|http://tiddlywiki.bidix.info/#UploadPlugin|
|''Documentation:''|http://tiddlywiki.bidix.info/#UploadPluginDoc|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D ]]|
|''~CoreVersion:''|2.2.0|
|''Requires:''|PasswordOptionPlugin|
***/
//{{{
version.extensions.UploadPlugin = {
major: 4, minor: 1, revision: 3,
date: new Date("Feb 24, 2008"),
source: 'http://tiddlywiki.bidix.info/#UploadPlugin',
author: 'BidiX (BidiX (at) bidix (dot) info',
coreVersion: '2.2.0'
};
//
// Environment
//
if (!window.bidix) window.bidix = {}; // bidix namespace
bidix.debugMode = false; // true to activate both in Plugin and UploadService
//
// Upload Macro
//
config.macros.upload = {
// default values
defaultBackupDir: '', //no backup
defaultStoreScript: "store.php",
defaultToFilename: "index.html",
defaultUploadDir: ".",
authenticateUser: true // UploadService Authenticate User
};
config.macros.upload.label = {
promptOption: "Save and Upload this TiddlyWiki with UploadOptions",
promptParamMacro: "Save and Upload this TiddlyWiki in %0",
saveLabel: "save to web",
saveToDisk: "save to disk",
uploadLabel: "upload"
};
config.macros.upload.messages = {
noStoreUrl: "No store URL in parmeters or options",
usernameOrPasswordMissing: "Username or password missing"
};
config.macros.upload.handler = function(place,macroName,params) {
if (readOnly)
return;
var label;
if (document.location.toString().substr(0,4) == "http")
label = this.label.saveLabel;
else
label = this.label.uploadLabel;
var prompt;
if (params[0]) {
prompt = this.label.promptParamMacro.toString().format([this.destFile(params[0],
(params[1] ? params[1]:bidix.basename(window.location.toString())), params[3])]);
} else {
prompt = this.label.promptOption;
}
createTiddlyButton(place, label, prompt, function() {config.macros.upload.action(params);}, null, null, this.accessKey);
};
config.macros.upload.action = function(params)
{
// for missing macro parameter set value from options
if (!params) params = {};
var storeUrl = params[0] ? params[0] : config.options.txtUploadStoreUrl;
var toFilename = params[1] ? params[1] : config.options.txtUploadFilename;
var backupDir = params[2] ? params[2] : config.options.txtUploadBackupDir;
var uploadDir = params[3] ? params[3] : config.options.txtUploadDir;
var username = params[4] ? params[4] : config.options.txtUploadUserName;
var password = config.options.pasUploadPassword; // for security reason no password as macro parameter
// for still missing parameter set default value
if ((!storeUrl) && (document.location.toString().substr(0,4) == "http"))
storeUrl = bidix.dirname(document.location.toString())+'/'+config.macros.upload.defaultStoreScript;
if (storeUrl.substr(0,4) != "http")
storeUrl = bidix.dirname(document.location.toString()) +'/'+ storeUrl;
if (!toFilename)
toFilename = bidix.basename(window.location.toString());
if (!toFilename)
toFilename = config.macros.upload.defaultToFilename;
if (!uploadDir)
uploadDir = config.macros.upload.defaultUploadDir;
if (!backupDir)
backupDir = config.macros.upload.defaultBackupDir;
// report error if still missing
if (!storeUrl) {
alert(config.macros.upload.messages.noStoreUrl);
clearMessage();
return false;
}
if (config.macros.upload.authenticateUser && (!username || !password)) {
alert(config.macros.upload.messages.usernameOrPasswordMissing);
clearMessage();
return false;
}
bidix.upload.uploadChanges(false,null,storeUrl, toFilename, uploadDir, backupDir, username, password);
return false;
};
config.macros.upload.destFile = function(storeUrl, toFilename, uploadDir)
{
if (!storeUrl)
return null;
var dest = bidix.dirname(storeUrl);
if (uploadDir && uploadDir != '.')
dest = dest + '/' + uploadDir;
dest = dest + '/' + toFilename;
return dest;
};
//
// uploadOptions Macro
//
config.macros.uploadOptions = {
handler: function(place,macroName,params) {
var wizard = new Wizard();
wizard.createWizard(place,this.wizardTitle);
wizard.addStep(this.step1Title,this.step1Html);
var markList = wizard.getElement("markList");
var listWrapper = document.createElement("div");
markList.parentNode.insertBefore(listWrapper,markList);
wizard.setValue("listWrapper",listWrapper);
this.refreshOptions(listWrapper,false);
var uploadCaption;
if (document.location.toString().substr(0,4) == "http")
uploadCaption = config.macros.upload.label.saveLabel;
else
uploadCaption = config.macros.upload.label.uploadLabel;
wizard.setButtons([
{caption: uploadCaption, tooltip: config.macros.upload.label.promptOption,
onClick: config.macros.upload.action},
{caption: this.cancelButton, tooltip: this.cancelButtonPrompt, onClick: this.onCancel}
]);
},
options: [
"txtUploadUserName",
"pasUploadPassword",
"txtUploadStoreUrl",
"txtUploadDir",
"txtUploadFilename",
"txtUploadBackupDir",
"chkUploadLog",
"txtUploadLogMaxLine"
],
refreshOptions: function(listWrapper) {
var opts = [];
for(i=0; i<this.options.length; i++) {
var opt = {};
opts.push();
opt.option = "";
n = this.options[i];
opt.name = n;
opt.lowlight = !config.optionsDesc[n];
opt.description = opt.lowlight ? this.unknownDescription : config.optionsDesc[n];
opts.push(opt);
}
var listview = ListView.create(listWrapper,opts,this.listViewTemplate);
for(n=0; n<opts.length; n++) {
var type = opts[n].name.substr(0,3);
var h = config.macros.option.types[type];
if (h && h.create) {
h.create(opts[n].colElements['option'],type,opts[n].name,opts[n].name,"no");
}
}
},
onCancel: function(e)
{
backstage.switchTab(null);
return false;
},
wizardTitle: "Upload with options",
step1Title: "These options are saved in cookies in your browser",
step1Html: "<input type='hidden' name='markList'></input><br>",
cancelButton: "Cancel",
cancelButtonPrompt: "Cancel prompt",
listViewTemplate: {
columns: [
{name: 'Description', field: 'description', title: "Description", type: 'WikiText'},
{name: 'Option', field: 'option', title: "Option", type: 'String'},
{name: 'Name', field: 'name', title: "Name", type: 'String'}
],
rowClasses: [
{className: 'lowlight', field: 'lowlight'}
]}
};
//
// upload functions
//
if (!bidix.upload) bidix.upload = {};
if (!bidix.upload.messages) bidix.upload.messages = {
//from saving
invalidFileError: "The original file '%0' does not appear to be a valid TiddlyWiki",
backupSaved: "Backup saved",
backupFailed: "Failed to upload backup file",
rssSaved: "RSS feed uploaded",
rssFailed: "Failed to upload RSS feed file",
emptySaved: "Empty template uploaded",
emptyFailed: "Failed to upload empty template file",
mainSaved: "Main TiddlyWiki file uploaded",
mainFailed: "Failed to upload main TiddlyWiki file. Your changes have not been saved",
//specific upload
loadOriginalHttpPostError: "Can't get original file",
aboutToSaveOnHttpPost: 'About to upload on %0 ...',
storePhpNotFound: "The store script '%0' was not found."
};
bidix.upload.uploadChanges = function(onlyIfDirty,tiddlers,storeUrl,toFilename,uploadDir,backupDir,username,password)
{
var callback = function(status,uploadParams,original,url,xhr) {
if (!status) {
displayMessage(bidix.upload.messages.loadOriginalHttpPostError);
return;
}
if (bidix.debugMode)
alert(original.substr(0,500)+"\n...");
// Locate the storeArea div's
var posDiv = locateStoreArea(original);
if((posDiv[0] == -1) || (posDiv[1] == -1)) {
alert(config.messages.invalidFileError.format([localPath]));
return;
}
bidix.upload.uploadRss(uploadParams,original,posDiv);
};
if(onlyIfDirty && !store.isDirty())
return;
clearMessage();
// save on localdisk ?
if (document.location.toString().substr(0,4) == "file") {
var path = document.location.toString();
var localPath = getLocalPath(path);
saveChanges();
}
// get original
var uploadParams = new Array(storeUrl,toFilename,uploadDir,backupDir,username,password);
var originalPath = document.location.toString();
// If url is a directory : add index.html
if (originalPath.charAt(originalPath.length-1) == "/")
originalPath = originalPath + "index.html";
var dest = config.macros.upload.destFile(storeUrl,toFilename,uploadDir);
var log = new bidix.UploadLog();
log.startUpload(storeUrl, dest, uploadDir, backupDir);
displayMessage(bidix.upload.messages.aboutToSaveOnHttpPost.format([dest]));
if (bidix.debugMode)
alert("about to execute Http - GET on "+originalPath);
var r = doHttp("GET",originalPath,null,null,username,password,callback,uploadParams,null);
if (typeof r == "string")
displayMessage(r);
return r;
};
bidix.upload.uploadRss = function(uploadParams,original,posDiv)
{
var callback = function(status,params,responseText,url,xhr) {
if(status) {
var destfile = responseText.substring(responseText.indexOf("destfile:")+9,responseText.indexOf("\n", responseText.indexOf("destfile:")));
displayMessage(bidix.upload.messages.rssSaved,bidix.dirname(url)+'/'+destfile);
bidix.upload.uploadMain(params[0],params[1],params[2]);
} else {
displayMessage(bidix.upload.messages.rssFailed);
}
};
// do uploadRss
if(config.options.chkGenerateAnRssFeed) {
var rssPath = uploadParams[1].substr(0,uploadParams[1].lastIndexOf(".")) + ".xml";
var rssUploadParams = new Array(uploadParams[0],rssPath,uploadParams[2],'',uploadParams[4],uploadParams[5]);
var rssString = generateRss();
// no UnicodeToUTF8 conversion needed when location is "file" !!!
if (document.location.toString().substr(0,4) != "file")
rssString = convertUnicodeToUTF8(rssString);
bidix.upload.httpUpload(rssUploadParams,rssString,callback,Array(uploadParams,original,posDiv));
} else {
bidix.upload.uploadMain(uploadParams,original,posDiv);
}
};
bidix.upload.uploadMain = function(uploadParams,original,posDiv)
{
var callback = function(status,params,responseText,url,xhr) {
var log = new bidix.UploadLog();
if(status) {
// if backupDir specified
if ((params[3]) && (responseText.indexOf("backupfile:") > -1)) {
var backupfile = responseText.substring(responseText.indexOf("backupfile:")+11,responseText.indexOf("\n", responseText.indexOf("backupfile:")));
displayMessage(bidix.upload.messages.backupSaved,bidix.dirname(url)+'/'+backupfile);
}
var destfile = responseText.substring(responseText.indexOf("destfile:")+9,responseText.indexOf("\n", responseText.indexOf("destfile:")));
displayMessage(bidix.upload.messages.mainSaved,bidix.dirname(url)+'/'+destfile);
store.setDirty(false);
log.endUpload("ok");
} else {
alert(bidix.upload.messages.mainFailed);
displayMessage(bidix.upload.messages.mainFailed);
log.endUpload("failed");
}
};
// do uploadMain
var revised = bidix.upload.updateOriginal(original,posDiv);
bidix.upload.httpUpload(uploadParams,revised,callback,uploadParams);
};
bidix.upload.httpUpload = function(uploadParams,data,callback,params)
{
var localCallback = function(status,params,responseText,url,xhr) {
url = (url.indexOf("nocache=") < 0 ? url : url.substring(0,url.indexOf("nocache=")-1));
if (xhr.status == 404)
alert(bidix.upload.messages.storePhpNotFound.format([url]));
if ((bidix.debugMode) || (responseText.indexOf("Debug mode") >= 0 )) {
alert(responseText);
if (responseText.indexOf("Debug mode") >= 0 )
responseText = responseText.substring(responseText.indexOf("\n\n")+2);
} else if (responseText.charAt(0) != '0')
alert(responseText);
if (responseText.charAt(0) != '0')
status = null;
callback(status,params,responseText,url,xhr);
};
// do httpUpload
var boundary = "---------------------------"+"AaB03x";
var uploadFormName = "UploadPlugin";
// compose headers data
var sheader = "";
sheader += "--" + boundary + "\r\nContent-disposition: form-data; name=\"";
sheader += uploadFormName +"\"\r\n\r\n";
sheader += "backupDir="+uploadParams[3] +
";user=" + uploadParams[4] +
";password=" + uploadParams[5] +
";uploaddir=" + uploadParams[2];
if (bidix.debugMode)
sheader += ";debug=1";
sheader += ";;\r\n";
sheader += "\r\n" + "--" + boundary + "\r\n";
sheader += "Content-disposition: form-data; name=\"userfile\"; filename=\""+uploadParams[1]+"\"\r\n";
sheader += "Content-Type: text/html;charset=UTF-8" + "\r\n";
sheader += "Content-Length: " + data.length + "\r\n\r\n";
// compose trailer data
var strailer = new String();
strailer = "\r\n--" + boundary + "--\r\n";
data = sheader + data + strailer;
if (bidix.debugMode) alert("about to execute Http - POST on "+uploadParams[0]+"\n with \n"+data.substr(0,500)+ " ... ");
var r = doHttp("POST",uploadParams[0],data,"multipart/form-data; ;charset=UTF-8; boundary="+boundary,uploadParams[4],uploadParams[5],localCallback,params,null);
if (typeof r == "string")
displayMessage(r);
return r;
};
// same as Saving's updateOriginal but without convertUnicodeToUTF8 calls
bidix.upload.updateOriginal = function(original, posDiv)
{
if (!posDiv)
posDiv = locateStoreArea(original);
if((posDiv[0] == -1) || (posDiv[1] == -1)) {
alert(config.messages.invalidFileError.format([localPath]));
return;
}
var revised = original.substr(0,posDiv[0] + startSaveArea.length) + "\n" +
store.allTiddlersAsHtml() + "\n" +
original.substr(posDiv[1]);
var newSiteTitle = getPageTitle().htmlEncode();
revised = revised.replaceChunk("<title"+">","</title"+">"," " + newSiteTitle + " ");
revised = updateMarkupBlock(revised,"PRE-HEAD","MarkupPreHead");
revised = updateMarkupBlock(revised,"POST-HEAD","MarkupPostHead");
revised = updateMarkupBlock(revised,"PRE-BODY","MarkupPreBody");
revised = updateMarkupBlock(revised,"POST-SCRIPT","MarkupPostBody");
return revised;
};
//
// UploadLog
//
// config.options.chkUploadLog :
// false : no logging
// true : logging
// config.options.txtUploadLogMaxLine :
// -1 : no limit
// 0 : no Log lines but UploadLog is still in place
// n : the last n lines are only kept
// NaN : no limit (-1)
bidix.UploadLog = function() {
if (!config.options.chkUploadLog)
return; // this.tiddler = null
this.tiddler = store.getTiddler("UploadLog");
if (!this.tiddler) {
this.tiddler = new Tiddler();
this.tiddler.title = "UploadLog";
this.tiddler.text = "| !date | !user | !location | !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |";
this.tiddler.created = new Date();
this.tiddler.modifier = config.options.txtUserName;
this.tiddler.modified = new Date();
store.addTiddler(this.tiddler);
}
return this;
};
bidix.UploadLog.prototype.addText = function(text) {
if (!this.tiddler)
return;
// retrieve maxLine when we need it
var maxLine = parseInt(config.options.txtUploadLogMaxLine,10);
if (isNaN(maxLine))
maxLine = -1;
// add text
if (maxLine != 0)
this.tiddler.text = this.tiddler.text + text;
// Trunck to maxLine
if (maxLine >= 0) {
var textArray = this.tiddler.text.split('\n');
if (textArray.length > maxLine + 1)
textArray.splice(1,textArray.length-1-maxLine);
this.tiddler.text = textArray.join('\n');
}
// update tiddler fields
this.tiddler.modifier = config.options.txtUserName;
this.tiddler.modified = new Date();
store.addTiddler(this.tiddler);
// refresh and notifiy for immediate update
story.refreshTiddler(this.tiddler.title);
store.notify(this.tiddler.title, true);
};
bidix.UploadLog.prototype.startUpload = function(storeUrl, toFilename, uploadDir, backupDir) {
if (!this.tiddler)
return;
var now = new Date();
var text = "\n| ";
var filename = bidix.basename(document.location.toString());
if (!filename) filename = '/';
text += now.formatString("0DD/0MM/YYYY 0hh:0mm:0ss") +" | ";
text += config.options.txtUserName + " | ";
text += "[["+filename+"|"+location + "]] |";
text += " [[" + bidix.basename(storeUrl) + "|" + storeUrl + "]] | ";
text += uploadDir + " | ";
text += "[[" + bidix.basename(toFilename) + " | " +toFilename + "]] | ";
text += backupDir + " |";
this.addText(text);
};
bidix.UploadLog.prototype.endUpload = function(status) {
if (!this.tiddler)
return;
this.addText(" "+status+" |");
};
//
// Utilities
//
bidix.checkPlugin = function(plugin, major, minor, revision) {
var ext = version.extensions[plugin];
if (!
(ext &&
((ext.major > major) ||
((ext.major == major) && (ext.minor > minor)) ||
((ext.major == major) && (ext.minor == minor) && (ext.revision >= revision))))) {
// write error in PluginManager
if (pluginInfo)
pluginInfo.log.push("Requires " + plugin + " " + major + "." + minor + "." + revision);
eval(plugin); // generate an error : "Error: ReferenceError: xxxx is not defined"
}
};
bidix.dirname = function(filePath) {
if (!filePath)
return;
var lastpos;
if ((lastpos = filePath.lastIndexOf("/")) != -1) {
return filePath.substring(0, lastpos);
} else {
return filePath.substring(0, filePath.lastIndexOf("\\"));
}
};
bidix.basename = function(filePath) {
if (!filePath)
return;
var lastpos;
if ((lastpos = filePath.lastIndexOf("#")) != -1)
filePath = filePath.substring(0, lastpos);
if ((lastpos = filePath.lastIndexOf("/")) != -1) {
return filePath.substring(lastpos + 1);
} else
return filePath.substring(filePath.lastIndexOf("\\")+1);
};
bidix.initOption = function(name,value) {
if (!config.options[name])
config.options[name] = value;
};
//
// Initializations
//
// require PasswordOptionPlugin 1.0.1 or better
bidix.checkPlugin("PasswordOptionPlugin", 1, 0, 1);
// styleSheet
setStylesheet('.txtUploadStoreUrl, .txtUploadBackupDir, .txtUploadDir {width: 22em;}',"uploadPluginStyles");
//optionsDesc
merge(config.optionsDesc,{
txtUploadStoreUrl: "Url of the UploadService script (default: store.php)",
txtUploadFilename: "Filename of the uploaded file (default: in index.html)",
txtUploadDir: "Relative Directory where to store the file (default: . (downloadService directory))",
txtUploadBackupDir: "Relative Directory where to backup the file. If empty no backup. (default: ''(empty))",
txtUploadUserName: "Upload Username",
pasUploadPassword: "Upload Password",
chkUploadLog: "do Logging in UploadLog (default: true)",
txtUploadLogMaxLine: "Maximum of lines in UploadLog (default: 10)"
});
// Options Initializations
bidix.initOption('txtUploadStoreUrl','');
bidix.initOption('txtUploadFilename','');
bidix.initOption('txtUploadDir','');
bidix.initOption('txtUploadBackupDir','');
bidix.initOption('txtUploadUserName','');
bidix.initOption('pasUploadPassword','');
bidix.initOption('chkUploadLog',true);
bidix.initOption('txtUploadLogMaxLine','10');
// Backstage
merge(config.tasks,{
uploadOptions: {text: "upload", tooltip: "Change UploadOptions and Upload", content: '<<uploadOptions>>'}
});
config.backstageTasks.push("uploadOptions");
//}}}
<html>
<h2>Usage</h2>
$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "<li></li>" });<br/>
<br/>
<dl>
<dt>dragSelector</dt>
<dd>The <a href="http://docs.jquery.com/Selectors">CSS selector</a> of the element inside the list to act as the drag handle. The default is LI.</dd>
<dt>dragEnd</dt>
<dd>The callback function that will be called after the dragging has ended.</dd>
<dt>dragBetween</dt>
<dd>Set to "true" if you want to enable the ability to drag between selected lists. The default is false.</dd>
<dt>placeHolderTemplate</dt>
<dd>The html of the place holder for the dragged item. The default is "<li></li>".</dd>
</dl>
</body>
</html>
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'><span macro='tiddler ViewTemplate##Refresh'></span></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagged' macro='tagging'><span macro='tags'></span></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<div style=display:none;>
!!!!!Refresh
{{button{<script label="refresh" title="redisplay the contents of this tiddler">
story.refreshTiddler(story.findContainingTiddler(place).getAttribute("tiddler"),null,true);</script>}}}
!!!!!End</div>
<!--}}}-->
MagnusTorpedo
May 22 2009 at 2:01 PM
I was curious if you had any documentation on the dragEnd function - do you know what sort of object is being passed after it is done? Are you able to get the object type of what you dropped? Or perhaps can you find what list the object came from?
I put this in my code:
dragEnd: function() { alert( this.name);
and all that seemed to happen was it alerted the containing ASP panel that holds ALL the ULs.
Any thoughts? Thanks.
Reply
Reply with quote
mcm_ham
Coordinator
Jun 25 2009 at 3:43 PM
Edited Jun 25 2009 at 3:45 PM
Sure, I actually got contacted by someome with this suggestion, so will look at releasing a version with this change implemented. Basically in the dropItem function make these changes:
list.draggedItem.css({ position: "", top: "", left: "", opacity: "" });
list.draggedItem = null;
list.placeHolderItem.remove();
$("*[emptyPlaceHolder]").remove();
opts.dragEnd.apply(list.draggedItem);
list.draggedItem = null;
Now the this keyword in you dragEnd handler will refer to the listitem that is being dragged.
Reply
Reply with quote
christianhaller
Jun 25 2009 at 6:49 PM
thx for the fast reply. helped a lot!
Reply
Reply with quote
MagnusTorpedo
Sep 8 2009 at 2:51 PM
mcm_ham,
I just wanted to say thanks for the update and the reply - I was looking for an email and never got one saying it updated....glad I checked again and got the code.
Great plugin!!
<script>
jQuery("ol").dragsort({ dragSelector: "li", dragBetween: true }); //unordered lists
jQuery("ul").dragsort({ dragSelector: "li", dragBetween: true }); //ordered lists
jQuery("div.viewer").addClass("custom"); //change bullet style
</script>
<script show>
jQuery("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
function saveOrder() {
var data = new Array();
$("#list1 li").each(function(i, elm) { data[i] = $(elm).children().html(); });
createCookie("saveOrder", data.join(","), 30);
};
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
</script>
//{{{
<?php
if ($_POST) {
$ids = $_POST["ids"];
for ($idx = 0; $idx < count($ids); $idx+=1) {
$id = $ids[$idx];
$ordinal = $idx;
//...
}
return;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<style type="text/css">
body { font-family:Arial; font-size:12pt; padding:20px; width: 800px; margin:20px auto; border:solid 1px black; }
h1 { font-size:16pt; }
h2 { font-size:13pt; }
ul { width:350px; list-style-type: none; margin:0px; padding:0px; }
li { float:left; padding:5px; width:100px; height:100px; }
li div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }
.placeHolder div { background-color:white!important; border:dashed 1px gray !important; }
</style>
</head>
<body>
<div>
<h1>jQuery List DragSort PHP Example</h1>
<a href="http://dragsort.codeplex.com/">Homepage</a><br/>
<br/>
<h2>Save list order with ajax:</h2>
<ul id="gallery">
<?php
$list = array("blue", "orange", "brown", "red", "yellow", "green", "black", "white", "purple");
for ($idx = 0; $idx < count($list); $idx+=1) {
echo "<li itemID='" . $idx . "'>";
echo "<div>" . $list[$idx] . "</div>";
echo "</li>";
}
?>
</ul>
<script type="text/javascript" src="jquery.dragsort-0.3.10.min.js"></script>
<script type="text/javascript">
$("#gallery").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
function saveOrder() {
var data = new Array();
$("#gallery li").each(function(i, elm) { data[i] = $(elm).attr("itemID"); });
$.post("example.php", { "ids[]": data });
};
</script>
<div style="clear:both;"></div>
</div>
</body>
</html>
//}}}
/***
jQuery List DragSort v0.3.10 dev
Website: http://dragsort.codeplex.com/
License: http://dragsort.codeplex.com/license
***/
//{{{
(function($) {
$.fn.dragsort = function(options) {
var opts = $.extend({}, $.fn.dragsort.defaults, options);
var lists = new Array();
var list = null, lastPos = null;
if (this.selector)
$("head").append("<style type='text/css'>" + (this.selector.split(",").join(" " + opts.dragSelector + ",") + " " + opts.dragSelector) + " { cursor: pointer; }</style>");
this.each(function(i, cont) {
if ($(cont).is("table") && $(cont).children().size() == 1 && $(cont).children().is("tbody"))
cont = $(cont).children().get(0);
var newList = {
draggedItem: null,
placeHolderItem: null,
pos: null,
offset: null,
offsetLimit: null,
container: cont,
init: function() {
$(this.container).attr("listIdx", i).mousedown(this.grabItem).find(opts.dragSelector).css("cursor", "pointer");
},
grabItem: function(e) {
if (e.button == 2 || $(e.target).is(opts.dragSelectorExclude))
return;
var elm = e.target;
while (!$(elm).is("[listIdx=" + $(this).attr("listIdx") + "] " + opts.dragSelector)) {
if (elm == this) return;
elm = elm.parentNode;
}
if (list != null && list.draggedItem != null)
list.dropItem();
$(e.target).css("cursor", "move");
list = lists[$(this).attr("listIdx")];
list.draggedItem = $(elm).closest(opts.itemSelector);
var mt = parseInt(list.draggedItem.css("marginTop"));
var ml = parseInt(list.draggedItem.css("marginLeft"));
list.offset = list.draggedItem.offset();
list.offset.top = e.pageY - list.offset.top + (isNaN(mt) ? 0 : mt) - 1;
list.offset.left = e.pageX - list.offset.left + (isNaN(ml) ? 0 : ml) - 1;
if (!opts.dragBetween) {
var containerHeight = $(list.container).outerHeight() == 0 ? Math.max(1, Math.round(0.5 + $(list.container).children(opts.itemSelector).size() * list.draggedItem.outerWidth() / $(list.container).outerWidth())) * list.draggedItem.outerHeight() : $(list.container).outerHeight();
list.offsetLimit = $(list.container).offset();
list.offsetLimit.right = list.offsetLimit.left + $(list.container).outerWidth() - list.draggedItem.outerWidth();
list.offsetLimit.bottom = list.offsetLimit.top + containerHeight - list.draggedItem.outerHeight();
}
list.draggedItem.css({ position: "absolute", opacity: 0.8, "z-index": 999 }).after(opts.placeHolderTemplate);
list.placeHolderItem = list.draggedItem.next().css("height", list.draggedItem.height()).attr("placeHolder", true);
$(lists).each(function(i, l) { l.ensureNotEmpty(); l.buildPositionTable(); });
list.setPos(e.pageX, e.pageY);
$(document).bind("selectstart", list.stopBubble); //stop ie text selection
$(document).bind("mousemove", list.swapItems);
$(document).bind("mouseup", list.dropItem);
return false; //stop moz text selection
},
setPos: function(x, y) {
var top = y - this.offset.top;
var left = x - this.offset.left;
if (!opts.dragBetween) {
top = Math.min(this.offsetLimit.bottom, Math.max(top, this.offsetLimit.top));
left = Math.min(this.offsetLimit.right, Math.max(left, this.offsetLimit.left));
}
this.draggedItem.parents().each(function() {
if ($(this).css("position") != "static" && (!$.browser.mozilla || $(this).css("display") != "table")) {
var offset = $(this).offset();
top -= offset.top;
left -= offset.left;
return false;
}
});
this.draggedItem.css({ top: top, left: left });
},
buildPositionTable: function() {
var item = this.draggedItem == null ? null : this.draggedItem.get(0);
var pos = new Array();
$(this.container).children(opts.itemSelector).each(function(i, elm) {
if (elm != item) {
var loc = $(elm).offset();
loc.right = loc.left + $(elm).width();
loc.bottom = loc.top + $(elm).height();
loc.elm = elm;
pos.push(loc);
}
});
this.pos = pos;
},
dropItem: function() {
if (list.draggedItem == null)
return;
$(list.container).find(opts.dragSelector).css("cursor", "pointer");
list.placeHolderItem.before(list.draggedItem);
list.draggedItem.css({ position: "", top: "", left: "", opacity: "", "z-index": "" });
list.placeHolderItem.remove();
$("*[emptyPlaceHolder]").remove();
opts.dragEnd.apply(list.draggedItem);
list.draggedItem = null;
$(document).unbind("selectstart", list.stopBubble);
$(document).unbind("mousemove", list.swapItems);
$(document).unbind("mouseup", list.dropItem);
return false;
},
stopBubble: function() { return false; },
swapItems: function(e) {
if (list.draggedItem == null)
return false;
list.setPos(e.pageX, e.pageY);
var ei = list.findPos(e.pageX, e.pageY);
var nlist = list;
for (var i = 0; ei == -1 && opts.dragBetween && i < lists.length; i++) {
ei = lists[i].findPos(e.pageX, e.pageY);
nlist = lists[i];
}
if (ei == -1 || $(nlist.pos[ei].elm).attr("placeHolder"))
return false;
if (lastPos == null || lastPos.top > list.draggedItem.offset().top || lastPos.left > list.draggedItem.offset().left)
$(nlist.pos[ei].elm).before(list.placeHolderItem);
else
$(nlist.pos[ei].elm).after(list.placeHolderItem);
$(lists).each(function(i, l) { l.ensureNotEmpty(); l.buildPositionTable(); });
lastPos = list.draggedItem.offset();
return false;
},
findPos: function(x, y) {
for (var i = 0; i < this.pos.length; i++) {
if (this.pos[i].left < x && this.pos[i].right > x && this.pos[i].top < y && this.pos[i].bottom > y)
return i;
}
return -1;
},
ensureNotEmpty: function() {
if (!opts.dragBetween)
return;
var item = this.draggedItem == null ? null : this.draggedItem.get(0);
var emptyPH = null, empty = true;
$(this.container).children(opts.itemSelector).each(function(i, elm) {
if ($(elm).attr("emptyPlaceHolder"))
emptyPH = elm;
else if (elm != item)
empty = false;
});
if (empty && emptyPH == null)
$(this.container).append(opts.placeHolderTemplate).children(":last").attr("emptyPlaceHolder", true);
else if (!empty && emptyPH != null)
$(emptyPH).remove();
}
};
newList.init();
lists.push(newList);
});
return this;
};
$.fn.dragsort.defaults = {
itemSelector: "li",
dragSelector: "li",
dragSelectorExclude: "input, a[href]",
dragEnd: function() { },
dragBetween: false,
placeHolderTemplate: "<li> </li>"
};
})(jQuery);
//}}}
Something like this should help with javascript and cookies:
http://www.quirksmode.org/js/cookies.html
So the saveOrder method in the example.html file can be modified like:
function saveOrder() {
var data = new Array();
$("#list1 li").each(function(i, elm) { data[i] = $(elm).children().html(); });
createCookie("saveOrder", data.join(","), 30);
};
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
Regards,
Michael
PMario
> I currently have no dragSort save capability.
> I am hoping to use the dragEnd: function() to save the sort order to a
> field or array, but I am thinking I need to figure out a way to id the
> <li> elements. . .
I think, that's not needed. Had a look at example.html: rightClick:
view sourceCode. There is a script near the end of the file. This is
the callback function assigned to dragEnd for id list1 ..
{{{
function saveOrder() {
var serialStr = "";
$("#list1 li").each(function(i, elm) {
serialStr += (i > 0 ? "|" : "") + $(elm).children().html(); });
// your save to tiddler here
// $("input[name=list1SortOrder]").val(serialStr);
};
}}}
You could define the serialStr according to your needs. eg:
serialStr += "*" + $(elm).children().html() + "\n";});
if you use firebug you can write console.log(serialStr); to see what
it does (didn't test it)
It should produce a TW unordered list, which can be directly written
to a tiddler.
*test 1
*test 2 .... this is what I intended :)
> Right now I have: html input > unordered list > script activating
> dragSort
> Debating on starting over and going with a macro: html input > array
> item > modified array item > dragSort function > output to tiddler
> Originally I was hoping to have the unordered list inlineEdit + delete
> and dragSort as a Plugin
> and then have the form as a transclusion so that they could be used
> together or separate
An idea:
tiddler [[List Container]]
*test 1
*test 2
*test 3
{{{
tiddler [[test macro]]
<<tiddler "List Container" "makeSortable">>
<<dragsort>>
or
<<dragSort makeSortable>>
or
<<tiddler dragSort with: makeSortable>> depending on how you did your
plugin.
tiddler dragSort / DragSortPlugin
...... some code ........
}}}
{{{
function saveOrder() {
var serialStr = "";
// vvvvv
$(".makeSortable li").each(function(i, elm) {
serialStr += (i > 0 ? "|" : "") + $(elm).children().html(); });
// your save to tiddler [[List Container]]
// console.log(serialStr);
};
}}}
=====
This way only the class='makeSortable' will be sortable.
> Since the prototype took me a little over a week (in my spare time) -
> I may be in over my head, but I am enjoying the attempt
> Mike
hope this helps.
have fun!
Mario
----
PMario
uups
If you want to see something inside the callback function, it should
look like this.
{{{
$(".makeSortable li").each(
function(i, elm) {
serialStr += (i > 0 ? "|" : "") + $(elm).children().html();
console.log(xxx);
});
}}}
-m
config.options.txtUserName="Mike P.";
config.options.txtBackupFolder="Backup";
config.options.chkAnimate=false;
config.options.chkSaveBackups=true;
config.options.chkAutoSave=false;
config.macros.search.label="";
config.options.chkInsertTabs = true; // tab inserts a tab when editing a tiddler
config.views.wikified.defaultText = ""; // don't need message when creating a new tiddler
config.views.editor.defaultText = ""; // don't need message when a tiddler doesn't exist
config.options.chkGenerateAnRssFeed = false; // default false