Welcome to TiddlyWiki created by Jeremy Ruston, Copyright © 2007 UnaMesa Association
|''Type:''|file|
|''URL:''|file://H:\www\ITI_wiki\index.html|
|''Workspace:''|(default)|
This tiddler was automatically created to record the details of this server
When navigating the digital seas educators are often faced with steering their ship of youthful minds towards the goal of academic attainment between the Scylla of boring word processor assignments which devour enthusiasm and the Charybdis of media projects, which can get sucked into a whirlpool of technical issues. Online social networking is a concept which the millenial generation seem to intuit unconsciously. The social networking paradigm can be seen as a catalyst to engage students in academic interchange outside the formal classroom setting. So how can we use the social networking tools familiar to the millenial generation to engage them in deep, meaningful academic intercourse that goes beyond the banter and bagatelle exemplified by the popular social networking sites such as Facebook, ~MySpace, Orkut and their ilk? I will set out to address this question with reference to the [[elgg|http://elgg.org]] open source social networking platform. Using my implementation at [[Earlham Learning Spaces|https://els.earlham.edu]] as an example I will show how this unique system can provide the platform for personal and social learning spaces beyond the confines of the classroom.
For more details of the proposal see [[this blog post|https://els.earlham.edu/markpea/weblog/717.html]]
What makes Elgg unique is it's access control system. All elgg content items such as blog posting, uploaded file, folder, etc, have access restrictions associated with them.
+++!!![General controls]
* Public -- open access to anyone on the web. Typically, this is what most blogging systems default to. It's desirable that most blog posts and folio pages have public access. RSS feeds only contain content made public.
* Logged in users -- only viewable by users logged in to the system. This is often set to be the default permission for blog postings.
* Private -- only the owner can view. Private postings or todo lists are possible.
===
+++!!![Customisable controls]
* friends -- makes content visible only to people on your 'friends' list (also 'block this person' link)
* community -- each elgg community has it's own access control right (see [[Connections/community]]). Thus setting a blog entry or file to //Community : Future of News// for example, will allow only members of that community to view the posting.
* ''Access control group'' -- here you can create arbitrary groups and add the names of friends to them. For each content item you can then set visibility (access) to the group you specify. (In Connections/Network : Access controls) [[screenshot|graphics\access_control_group.png]]<<imagebox>>
===
/***
|''Name:''|AccordionMenuPlugin|
|''Description:''|Turn an unordered list into an accordion style menu|
|''Author:''|Saq Imtiaz ( lewcid@gmail.com )|
|''Source:''|http://tw.lewcid.org/#AccordionMenuPlugin|
|''Code Repository:''|http://tw.lewcid.org/svn/plugins|
|''Version:''|2.0|
|''Date:''|03/11/2007|
|''License:''|[[Creative Commons Attribution-ShareAlike 3.0 License|http://creativecommons.org/licenses/by-sa/3.0/]]|
|''~CoreVersion:''|2.2.5|
!!Usage:
* put {{{<<accordion>>}}} on the line after your unordered list
!!Customizing:
* customize the css via the shadow tiddler StyleSheetAccordionMenuPlugin
* or give the list a custom class by passing the classes as parameters to the macro.
** Eg: {{{<<accordion ClassName1 ClassName2>>}}}
!!Examples:
*[[AccordionMenuPluginDemo]]
***/
// /%
//!BEGIN-PLUGIN-CODE
config.macros.accordion={
dropchar : " \u00BB",
handler : function(place,macroName,params,wikifier,paramString,tiddler){
list = findRelated(place.lastChild,"UL","tagName","previousSibling");
if (!list)
return;
addClass(list,"accordion");
if (params.length){
addClass(list,paramString);
}
this.fixLinks(list.childNodes);
},
fixLinks : function(els){
for (var i=0; i<els.length; i++){
if(els[i].tagName.toLowerCase()=="li"){
var link = findRelated(els[i].firstChild,"A","tagName","nextSibling");
if(!link){
var ih = els[i].firstChild.data;
els[i].removeChild(els[i].firstChild);
link = createTiddlyElement(null,"a",null,null,ih+this.dropchar,{href:"javascript:;"});
els[i].insertBefore(link,els[i].firstChild);
}
else{
link.firstChild.data = link.firstChild.data + this.dropchar;
removeClass(link,"tiddlyLinkNonExisting");
}
link.onclick = this.show;
}
}
},
show : function(e){
var list = this.parentNode.parentNode;
var els = list.childNodes;
for (var i=0; i<els.length; i++){
removeClass(els[i],"accordion-active");
}
addClass(this.parentNode,"accordion-active");
}
};
config.shadowTiddlers["StyleSheetAccordionMenuPlugin"] = "/*{{{*/\n"+
"ul.accordion, ul.accordion li, ul.accordion li ul {margin:0; padding:0; list-style-type:none;text-align:left;}\n"+
"ul.accordion li ul {display:none;}\n"+
"ul.accordion li.accordion-active ul {display:block;}\n"+
"\n"+
"ul.accordion li.accordion-active a {cursor:default;}\n"+
"ul.accordion li.accordion-active ul li a{cursor:pointer;}\n"+
"\n"+
"ul.accordion a {display:block; padding:0.5em;}\n"+
"ul.accordion li a.tiddlyLink, ul.accordion li a.tiddlyLinkNonExisting, ul.accordion li a {font-weight:bold;}\n"+
"ul.accordion li a {background:#0066aa; color:#FFF; border-bottom:1px solid #fff;}\n"+
"ul.accordion li.accordion-active a, ul.accordion li a:hover {background:#00558F;color:#FFF;}\n"+
"\n"+
"ul.accordion li ul li{display:inline-block;overflow:hidden;}\n"+
"ul.accordion li.accordion-active ul li {background:#eff3fa; color:#000; padding:0em;}\n"+
"ul.accordion li.accordion-active ul li div {padding:1em 1.5em; background:#eff3fa;}\n"+
"ul.accordion li.accordion-active ul a{background:#eff3fa; color:#000; padding:0.5em 0.5em 0.5em 1.0em;border:none;}\n"+
"ul.accordion li.accordion-active ul a:hover {background:#e0e8f5; color:#000;}\n" +
"/*}}}*/";
store.addNotification("StyleSheetAccordionMenuPlugin",refreshStyles);
//!END-PLUGIN-CODE
// %/
@@display:none;clear:both;@@
''Creating a navigation menu using the AccordionMenuPlugin is as simple as:''
# writing a two level unordered list using ~TiddlyWiki syntax
# and placing {{{<<accordion>>}}} on the line after it.
Example:
{{{
* Section 1
** [[Link1]]
** [[Link2]]
** [[Link3]]
*Section 2
** [[Link4]]
** [[Link5]]
** [[Link6]]
*Section 3
**[[Link7]]
**[[Link8]]
**[[Link9]]
<<accordion>>
}}}
gives:
* Section 1
** [[Link1]]
** [[Link2]]
** [[Link3]]
*Section 2
** [[Link4]]
** [[Link5]]
** [[Link6]]
*Section 3
**[[Link7]]
**[[Link8]]
**[[Link9]]
<<accordion>>
''The AccordionMenuPlugin was written with navigation menu's in mind but can be put to other uses as well. ''
By wrapping the content in a DIV, you can have multi-line content as well. Example:
{{{
* [[section1]]
**{{myclass{
Praesent posuere sodales tortor. Mauris ut erat non lacus semper porta. Mauris enim.
Phasellus tempor, metus ut dapibus lobortis, leo magna ornare metus, et pellentesque neque massa eget turpis.
Proin nec tellus. Donec aliquet.
Nullam sed leo bibendum justo rutrum rhoncus.}}}
* section2
**{{myclass{
Donec rhoncus sem eget urna.
Aenean tempor dolor vitae nisi.
Donec leo urna, placerat porttitor, auctor ut, volutpat a, purus,
Etiam eu sapien id nulla malesuada scelerisque.
Maecenas rhoncus, nibh ut aliquam consequat, mi odio luctus sem, eu lobortis dolor neque nec lectus. }}}
* section3
**{{myclass{
Donec rhoncus sem eget urna.
Aenean tempor dolor vitae nisi.
Donec leo urna, placerat porttitor, auctor ut, volutpat a, purus,
Etiam eu sapien id nulla malesuada scelerisque.
Maecenas rhoncus, nibh ut aliquam consequat, mi odio luctus sem, eu lobortis dolor neque nec lectus. }}}
}}}
gives you:
* [[section1]]
**{{myclass{
Praesent posuere sodales tortor. Mauris ut erat non lacus semper porta. Mauris enim.
Phasellus tempor, metus ut dapibus lobortis, leo magna ornare metus, et pellentesque neque massa eget turpis.
Proin nec tellus. Donec aliquet.
Nullam sed leo bibendum justo rutrum rhoncus.}}}
* section2
**{{myclass{
Donec rhoncus sem eget urna.
Aenean tempor dolor vitae nisi.
Donec leo urna, placerat porttitor, auctor ut, volutpat a, purus,
Etiam eu sapien id nulla malesuada scelerisque.
Maecenas rhoncus, nibh ut aliquam consequat, mi odio luctus sem, eu lobortis dolor neque nec lectus. }}}
* section3
**{{myclass{
Donec rhoncus sem eget urna.
Aenean tempor dolor vitae nisi.
Donec leo urna, placerat porttitor, auctor ut, volutpat a, purus,
Etiam eu sapien id nulla malesuada scelerisque.
Maecenas rhoncus, nibh ut aliquam consequat, mi odio luctus sem, eu lobortis dolor neque nec lectus. }}}
<<accordion>>
!!Finding and adding a friend
# Use +++[Search ]>
* type name (first or last name) into Search box
* choose People / Communities or all
* Go
=== or click click @@Browse@@ to get a list of all the Users and Communities on the system
# click on the link to open that person's Profile page
# click the obvious link
# ''If'' the person has set Friendship moderation in their [[account settings|Setting up an account]] she will get a message to the effect that you have added a friend request
# Currently there is no way to directly reciprocate friendship requests but this will come.
!!Add a photo to blog posting
!!! Add/upload graphic file
* The easy way : +++[Add a file]>
* Click @@Add File@@
** If you have already uploaded your picture(s) in a [[Photo gallery]] open the folder and you'll see the files
** If not, Browse and upload taking care to check the box ([[screenshot|graphics/Add_file.png]]<<imagebox>>
* Click on the file
===
* You'll notice something like {{file:89}} -- this will display the graphic as a thumbnail
* You can easily move these around
The organised way : [[Photo gallery]]
!!!Link to graphic URL
* Find the graphic (maybe go to Your Files and open a folder)
* right-click and Copy link location
* Click the Insert/edit image button and paste in the location/URL to the graphic
** add a description of the image (this will become a 'tooltip')
** Align to left or right as desired
** add vertical or horizontal space (in pixels) as desired
** Save/update
* [[what the posting looks like|graphics/blog_post_graphics.png]]<<imagebox>>
* [[graphic display in blog|graphics/blog_display_graphics.png]]<<imagebox>>
/***
|''Name:''|AnnotationsPlugin|
|''Description:''|Inline annotations for tiddler text.|
|''Author:''|Saq Imtiaz ( lewcid@gmail.com )|
|''Source:''|http://tw.lewcid.org/#AnnotationsPlugin|
|''Code Repository:''|http://tw.lewcid.org/svn/plugins|
|''Version:''|2.0|
|''Date:''||
|''License:''|[[Creative Commons Attribution-ShareAlike 3.0 License|http://creativecommons.org/licenses/by-sa/3.0/]]|
|''~CoreVersion:''|2.2.3|
!!Usage:
*{{{((text to annotate(annotation goes here)}}}
* To include the text being annotated, in the popup as a title, put {{{^}}} as the first letter of the annotation text.
** {{{((text to annotate(^annotation goes here)}}}
!!Examples:
Mouse over, the text below:
* ((banana(the best fruit in the world)))
* ((banana(^ the best fruit in the world)))
***/
// /%
config.formatters.unshift({name:"annotations",match:"\\(\\(",lookaheadRegExp:/\(\((.*?)\((\^?)((?:.|\n)*?)\)\)\)/g,handler:function(w){
this.lookaheadRegExp.lastIndex=w.matchStart;
var _2=this.lookaheadRegExp.exec(w.source);
if(_2&&_2.index==w.matchStart){
var _3=createTiddlyElement(w.output,"span",null,"annosub",_2[1]);
_3.anno=_2[3];
if(_2[2]){
_3.subject=_2[1];
}
_3.onmouseover=this.onmouseover;
_3.onmouseout=this.onmouseout;
_3.ondblclick=this.onmouseout;
w.nextMatch=_2.index+_2[0].length;
}
},onmouseover:function(e){
popup=createTiddlyElement(document.body,"div",null,"anno");
this.popup=popup;
if(this.subject){
wikify("!"+this.subject+"\n",popup);
}
wikify(this.anno,popup);
addClass(this,"annosubover");
Popup.place(this,popup,{x:25,y:7});
},onmouseout:function(e){
removeNode(this.popup);
this.popup=null;
removeClass(this,"annosubover");
}});
setStylesheet(".anno{position:absolute;border:2px solid #000;background-color:#DFDFFF; color:#000;padding:0.5em;max-width:15em;width:expression(document.body.clientWidth > (255/12) *parseInt(document.body.currentStyle.fontSize)?'15em':'auto' );}\n"+".anno h1, .anno h2{margin-top:0;color:#000;}\n"+".annosub{background:#ccc;}\n"+".annosubover{z-index:25; background-color:#DFDFFF;cursor:help;}\n","AnnotationStyles");
// %/
/***
|Name|BetterTimelineMacro|
|Created by|SaqImtiaz|
|Location|http://tw.lewcid.org/#BetterTimelineMacro|
|Version|0.5 beta|
|Requires|~TW2.x|
!!!Description:
A replacement for the core timeline macro that offers more features:
*list tiddlers with only specfic tag
*exclude tiddlers with a particular tag
*limit entries to any number of days, for example one week
*specify a start date for the timeline, only tiddlers after that date will be listed.
!!!Installation:
Copy the contents of this tiddler to your TW, tag with systemConfig, save and reload your TW.
Edit the ViewTemplate to add the fullscreen command to the toolbar.
!!!Syntax:
{{{<<timeline better:true>>}}}
''the param better:true enables the advanced features, without it you will get the old timeline behaviour.''
additonal params:
(use only the ones you want)
{{{<<timeline better:true onlyTag:Tag1 excludeTag:Tag2 sortBy:modified/created firstDay:YYYYMMDD maxDays:7 maxEntries:30>>}}}
''explanation of syntax:''
onlyTag: only tiddlers with this tag will be listed. Default is to list all tiddlers.
excludeTag: tiddlers with this tag will not be listed.
sortBy: sort tiddlers by date modified or date created. Possible values are modified or created.
firstDay: useful for starting timeline from a specific date. Example: 20060701 for 1st of July, 2006
maxDays: limits timeline to include only tiddlers from the specified number of days. If you use a value of 7 for example, only tiddlers from the last 7 days will be listed.
maxEntries: limit the total number of entries in the timeline.
!!!History:
*28-07-06: ver 0.5 beta, first release
!!!Code
***/
//{{{
// Return the tiddlers as a sorted array
TiddlyWiki.prototype.getTiddlers = function(field,excludeTag,includeTag)
{
var results = [];
this.forEachTiddler(function(title,tiddler)
{
if(excludeTag == undefined || tiddler.tags.find(excludeTag) == null)
if(includeTag == undefined || tiddler.tags.find(includeTag)!=null)
results.push(tiddler);
});
if(field)
results.sort(function (a,b) {if(a[field] == b[field]) return(0); else return (a[field] < b[field]) ? -1 : +1; });
return results;
}
//this function by Udo
function getParam(params, name, defaultValue)
{
if (!params)
return defaultValue;
var p = params[0][name];
return p ? p[0] : defaultValue;
}
window.old_timeline_handler= config.macros.timeline.handler;
config.macros.timeline.handler = function(place,macroName,params,wikifier,paramString,tiddler)
{
var args = paramString.parseParams("list",null,true);
var betterMode = getParam(args, "better", "false");
if (betterMode == 'true')
{
var sortBy = getParam(args,"sortBy","modified");
var excludeTag = getParam(args,"excludeTag",undefined);
var includeTag = getParam(args,"onlyTag",undefined);
var tiddlers = store.getTiddlers(sortBy,excludeTag,includeTag);
var firstDayParam = getParam(args,"firstDay",undefined);
var firstDay = (firstDayParam!=undefined)? firstDayParam: "00010101";
var lastDay = "";
var field= sortBy;
var maxDaysParam = getParam(args,"maxDays",undefined);
var maxDays = (maxDaysParam!=undefined)? maxDaysParam*24*60*60*1000: (new Date()).getTime() ;
var maxEntries = getParam(args,"maxEntries",undefined);
var last = (maxEntries!=undefined) ? tiddlers.length-Math.min(tiddlers.length,parseInt(maxEntries)) : 0;
for(var t=tiddlers.length-1; t>=last; t--)
{
var tiddler = tiddlers[t];
var theDay = tiddler[field].convertToLocalYYYYMMDDHHMM().substr(0,8);
if ((theDay>=firstDay)&& (tiddler[field].getTime()> (new Date()).getTime() - maxDays))
{
if(theDay != lastDay)
{
var theDateList = document.createElement("ul");
place.appendChild(theDateList);
createTiddlyElement(theDateList,"li",null,"listTitle",tiddler[field].formatString(this.dateFormat));
lastDay = theDay;
}
var theDateListItem = createTiddlyElement(theDateList,"li",null,"listLink",null);
theDateListItem.appendChild(createTiddlyLink(place,tiddler.title,true));
}
}
}
else
{
window.old_timeline_handler.apply(this,arguments);
}
}
//}}}
!!Making a blog posting
# Go to @@Your blog@@
# Post new entry
# give it a title
# type in or paste in [[unformatted text]]
# format with button bar
# [[Add links]]
# [[Add pictures]]
# [[Embed YouTube video]]
# type in keyword/tag eg ''name of film''
# set [[access|ELS : Access/Sharing]]
You can create multiple blogs within Mahara. It's easy to upload graphics and to attach and use them in a blog posting. But in order to expose your blog to anyone else you need to create a //View// to it. Here's an example:
+++[View Blog]
Public view of blog at : http://demo.mahara.org/view/artefact.php?artefact=3260&view=525. Note impersonal URL:
<<miniBrowser http://demo.mahara.org/view/artefact.php?artefact=3260&view=525>>
===
!Building blocks for Social Learning Spaces
The first thing that you need is an easy way to create a web 'presence', that is, creating [[content|SLS : Content]] in your web space. This might include uploaded photos, files , or media. You might want to have a way of making [[connections|SLS : Connections]] with other people and groups of people. Within the milieu of the Social Learning Space you'd want a way of controlling [[access|ELS : Access/Sharing]] to what you write or your other content. Finally, you'd want to [[repurpose|SLS: Information flow]] what you've created to make use of in other web contexts.
!Communities on Elgg
A unique feature of [[Elgg|Elgg : introduction]] is the Community. This has most of the attributes of a full user, that is, the community has a blog, and separate file store and access can be limited to community members only.
!!Creating a community
* community and friend [[connections|SLS : Connections]] are accessed through [[Your Network]].
* to create, click the ((Owned Communities(^communities that you have created))) link. Type in a name for your community and a moniker or username that you want to employ. Clicking the Create button creates the community. You'll note that you can also delete a community you own. Make sure that there is no content in the community before deleting because deletion is immediate and there's no way of backing out once delete is clicked!
!!Joining / getting members
A community or group has no life until it has membership. Unlike a Moodle 'class' you cannot "join" another user to your community. All users are peers in Elgg; think what it would be like if you could add arbitrary users to your community without their permission or knowledge! Thus other people have to visit your community and request to join to it.
The easiest way to get membership is to invite your Friends to visit and join the community via the [[Messaging|SLS: actions]] system.
But how can I restrict membership to the people I want?
!!Membership control
In the Profile of your community (the place you get to by default when you go there) you'll see Edit community details. This allows you to change the community name and even the owner, and under ''Membership restriction'' allows you to set who can join. There are three options:
# No moderation : anyone can join (the default)
# Moderation : membership must be approved by you
# Private : nobody can join
You will be sent a ((message(in Your Messages))) whenever someone has requested to join.
!!Suggested procedure
# create new community (Your Network : Owned Communities)
# Set Membership restriction to Moderation (Community Profile : Edit community details : Membership restriction)
# invite Friends to join via messaging system (you may need to make these friends first)
# as Friends or others request to join go to Profile : View membership requests to accept or deny their request
# when all have joined simply reset Membership restriction to Private
!!Accessing communities
!!!From within Elgg:
[[Community links|graphics/community_display.png]]<<imagebox>> can be accessed via the ((sidebar(the right hand column))):
* All the communities you own are listed under Owned communities
* All the communities that you are a member of are listed under Community memberships
!!!From the web:
The username that you give your community is the way that it's accessed from the web in the form <site name>/<community name>. Thus a community called 'green_research' for example might be accessed via ''((els.earlham.edu/green_research (Earlham Learning Spaces on it's way)))'' .
Note:
* the default destination is the community profile: thus [[http://blogs.barnabas.earlham.edu/mstats/|http://blogs.barnabas.earlham.edu/mstats/]] will show the Profile for Moodle Stats community. This is not generally so useful, so
* the direct link to the community blog is <site name>/<community name>/weblog. [[http://eduspaces.net/moodlevan/weblog|http://eduspaces.net/moodlevan/weblog]] is my Eduspaces Moodle Vanguard blog
!!RSS feeds
You can reuse or redisplay 'content' from your community with RSS feeds. There are feeds available from :
* the whole community
* just the blog
* from the file storage
[[Here's a screenshot|graphics/community_rss_feeds.png]]<<imagebox>>
[>img[graphics/bryan_alexander.jpg]]
* Is ePortfolio the next ''Web 2.0'' ?
* Different approaches, different requirements
* Unlike Moodle CMS, one size does not fit all
* Theme for a summit rather like LAMS@LAC Summit at Reed 2006 ?
* Formulate a set of coherent functional requirements +++[list]>
* Flexibility -- move from one eportfolio type to another
* Access -- easy to use way of regulating permissions.
* User interface -- AJAX.
* Stuff -- drag and drop interface to upload.
* Media
** Lightbox graphics display
** Audio upload to podcast / flash player
** Video upload -- > convert to flash
* Community / groups -- ways to aggregate user access
** Assessment / feedback
* Integration with LMS (Moodle, Sakai)
** Single sign on
** File sharing on upload
** Shared tags
* Metadata -- tags
* Export content -- save a local copy of View.
===
+++!!![Friend]
You make connections within the system by //friending// someone. Friends form the basis of all the specific connections that you make, eg messaging, access groups, etc. Friending merely involves going to a person's profile and clicking on 'add this user as a friend'. You can set friendship moderation so that all friend requests have to be approved by you. Friending will be reciprocal so that if someone 'friends' you, you will automatically 'friend' them back.
===
+++!!![Community]
A community is basically a collection of Elgg users who share a blog, folio and file space. Anyone can create a community and joining a community is moderated in the same way as making a friend. Once a community has it's desired members it can be set to private. Access to content can be set to community members. The community has it's own name and a unique URL allowing direct access. Great potential for group work.
<<miniBrowser http://eduspaces.net/moodlevan/weblog>>
===
+++!!![Active Communication]
; Messaging
: An internal message system allows you to send short messages to your Friends or community. An account setting will enable these to be transmitted to your email address. Notification of friend requests is done via the messge system.
; Comment wall
: one of the widgets in the extended profile is the comment wall which is open to all.
; Shouts
: Want to tell the world how you're feeling? Shout it out!
; Status
: Announce what you're currently up to. Reading a book? Studying for exam? People want to know.
===
# +++!![Dynamic content|blogging system]
Featuring:
* Easy to write and format (WYSWG interface). Spell checker.
* Easy to embed media from within or outside of system, eg own photos, Youtube clips
* System wide tags (keywords)
* ''control access to individual blog entries'' -- see [[Access / sharing]]
* Commenting can be restricted to within the site. Protects against spam.
** WordPress akismet spam protection can also be used if open comments are desirable.
* Blog categories can be listed in sidebar
* RSS feeds for blog entries and comments (see Information Flow)
<<miniBrowser http://blogs.frumentius.earlham.edu/ieseidm06/weblog/>>
===
# +++!![Static pages|Folio wiki system]
* 'Personal wiki' with WYSYG interface.
* Add references to blog entries and uploaded files, including graphics
* can 'reflect' on referenced links -- ideal for portfolio purposes.
* control access to individual pages
* move pages around easily
* extremely [[cool sidebar display|graphics/folio_sidebar_display.png]]<<imagebox>> makes it easy to explore
<<miniBrowser http://barnabas.lly.earlham.edu/elgg_9/markpea/page/Home>>
===
# +++!![File Store|personal files and folders]
-- As with blogs and folio pages, files uploaded are stored in a //personal// space (in contrast to Moodle's course file storage).
* Can create folders and nest folders
* upload and storage limits
* types of folder indicate media content (eg photo gallery)
* access restrictions and keywords/tags on fodlers as well as files
* description and titles constitute crude metadata. Possible to formalise this.
* users have to assert ownership or legal right to share uploaded files.
===
[[New Horizons in Social Networking : Earlham Learning Spaces]]
!!Suggestions for development : Profile -- > Home
Currently the default URL to a community lands the browser at the Profile page. By tackling what we do with the 'Profile' page we set the tone for the whole of the Elgg system.
My suggestion is that the Profile page be considered as 'Home'. (And that Communities be treated as first class Elgg entitities).
The Profile itself should be relegated to an ancillary link and perhaps treated like a CV/resume generator. After all, who really changes or updates their profile unless applying for a job? A Profile which could generate a CV (and I have seen them out there - see [[Mahara eportfolio|http://www.mahara.org/features]] +++[Résumé Builder]>
Mahara includes a résumé builder which allows users to create digital CV’s by entering information into a variety of optional fields including:
* Contact and personal information
* Employment and education history
* Certifications, accreditations and awards
* Books and publications, professional memberships
* Personal, academic and work skills and
* Personal, academic and career goals
=== )
So if we think of a 'Home' page why not make it the default web 'home' that students and teachers want? Advantages:
* build a home page without needing ~DreamWeaver
* customize
* add Elgg profile widgets (call these a new name -- 'home page widgets') -- powerful plugins
* the widgets would enable dynamic content which makes the system very attractive. Display to your friend's thoughts and inner feelings without leaving your own home page.
* Why just a single page -- create a tabbed display system that allows up to //n// pages/tabs. Users label each one and they sit right at the top. Users can now organise their stuff in whatever way they want.
!!!Details
# remove Extended profile and tuck it away somewhere less prominent.
# A link called Create page/tab:
** name of tab
** title of page
** background image(s) -- rearrange using AJAX interface
** Photos or any graphic image can be placed on this background, moved around and re-orientated at different angles. Flatten with background to create new image?
# Within each page you can have a number (upper limit) of widget boxes
** create widget box -- give name of box (can be blank) / size (fixed or elastic to content) / borders / background colours / transparency settings/ text font - colour - size
** drag proto-box to desired position. Could make box take complete width.
# Available Widgets (superset of current list)
** Blog, Comment Wall, Video, Files, Friends , Community feed, RSS feeds, Profile
** new widgets : The River, Comment, Photo gallery (static / dynamic -- picks random image from given directory), Frame (display contents of a remote site)
''horizontal:''
{{{
* menu #1
** [[item #1-1]]
** [[item #1-2]]
** [[item #1-3]]
* menu #2
** [[item #2-1]]
** [[item #2-2]]
** [[menu #2-3]]
* menu #3
** [[item #2-1]]
** [[item #2-2]]
** [[menu #2-3]]
<<dropMenu>>
}}}
* menu #1
** [[item #1-1]]
** [[item #1-2]]
** [[item #1-3]]
* menu #2
** [[item #2-1]]
** [[item #2-2]]
** [[menu #2-3]]
* menu #3
** [[item #2-1]]
** [[item #2-2]]
** [[menu #2-3]]
<<dropMenu>>
''vertical:''
{{{
* menu #1
** [[item #1-1]]
** [[item #1-2]]
** [[item #1-3]]
* menu #2
** [[item #2-1]]
** [[item #2-2]]
** [[menu #2-3]]
<<dropMenu vertical>>
}}}
* menu #1
** [[item #1-1]]
** [[item #1-2]]
** [[item #1-3]]
* menu #2
** [[item #2-1]]
** [[item #2-2]]
** [[menu #2-3]]
<<dropMenu vertical>>
/% %/
/***
|''Name:''|DropDownMenuPlugin|
|''Description:''|Create dropdown menus from unordered lists|
|''Author:''|Saq Imtiaz ( lewcid@gmail.com )|
|''Source:''|http://tw.lewcid.org/#DropDownMenuPlugin|
|''Code Repository:''|http://tw.lewcid.org/svn/plugins|
|''Version:''|2.1|
|''Date:''|11/04/2007|
|''License:''|[[Creative Commons Attribution-ShareAlike 3.0 License|http://creativecommons.org/licenses/by-sa/3.0/]]|
|''~CoreVersion:''|2.2.5|
!!Usage:
* create a two-level unordered list using wiki syntax, and place {{{<<dropMenu>>}}} on the line after it.
* to create a vertical menu use {{{<<dropMenu vertical>>}}} instead.
* to assign custom classes to the list, just pass them as parameters to the macro {{{<<dropMenu className1 className2 className3>>}}}
!!Features:
*Supports just a single level of drop-downs, as anything more usually provides a poor experience for the user.
* Very light weight, about 1.5kb of JavaScript and 4kb of CSS.
* Comes with two built in css 'themes', the default horizontal and vertical.
!!Customizing:
* to customize the appearance of the menu's, you can either add a custom class as described above or, you can edit the CSS via the StyleSheetDropDownMenu shadow tiddler.
!!Examples:
* [[DropDownMenuDemo]]
***/
// /%
//!BEGIN-PLUGIN-CODE
config.macros.dropMenu={
dropdownchar: "\u25bc",
handler : function(place,macroName,params,wikifier,paramString,tiddler){
list = findRelated(place.lastChild,"UL","tagName","previousSibling");
if (!list)
return;
addClass(list,"suckerfish");
if (params.length){
addClass(list,paramString);
}
this.fixLinks(list);
},
fixLinks : function(el){
var els = el.getElementsByTagName("li");
for(var i = 0; i < els.length; i++) {
if(els[i].getElementsByTagName("ul").length>0){
var link = findRelated(els[i].firstChild,"A","tagName","nextSibling");
if(!link){
var ih = els[i].firstChild.data;
els[i].removeChild(els[i].firstChild);
var d = createTiddlyElement(null,"a",null,null,ih+this.dropdownchar,{href:"javascript:;"});
els[i].insertBefore(d,els[i].firstChild);
}
else{
link.firstChild.data = link.firstChild.data + this.dropdownchar;
removeClass(link,"tiddlyLinkNonExisting");
}
}
els[i].onmouseover = function() {
addClass(this, "sfhover");
};
els[i].onmouseout = function() {
removeClass(this, "sfhover");
};
}
}
};
config.shadowTiddlers["StyleSheetDropDownMenuPlugin"] =
"/*{{{*/\n"+
"/***** LAYOUT STYLES - DO NOT EDIT! *****/\n"+
"ul.suckerfish, ul.suckerfish ul {\n"+
" margin: 0;\n"+
" padding: 0;\n"+
" list-style: none;\n"+
" line-height:1.4em;\n"+
"}\n\n"+
"ul.suckerfish li {\n"+
" display: inline-block; \n"+
" display: block;\n"+
" float: left; \n"+
"}\n\n"+
"ul.suckerfish li ul {\n"+
" position: absolute;\n"+
" left: -999em;\n"+
"}\n\n"+
"ul.suckerfish li:hover ul, ul.suckerfish li.sfhover ul {\n"+
" left: auto;\n"+
"}\n\n"+
"ul.suckerfish ul li {\n"+
" float: none;\n"+
" border-right: 0;\n"+
" border-left:0;\n"+
"}\n\n"+
"ul.suckerfish a, ul.suckerfish a:hover {\n"+
" display: block;\n"+
"}\n\n"+
"ul.suckerfish li a.tiddlyLink, ul.suckerfish li a, #mainMenu ul.suckerfish li a {font-weight:bold;}\n"+
"/**** END LAYOUT STYLES *****/\n"+
"\n\n"+
"/**** COLORS AND APPEARANCE - DEFAULT *****/\n"+
"ul.suckerfish li a {\n"+
" padding: 0.5em 1.5em;\n"+
" color: #FFF;\n"+
" background: #0066aa;\n"+
" border-bottom: 0;\n"+
" font-weight:bold;\n"+
"}\n\n"+
"ul.suckerfish li:hover a, ul.suckerfish li.sfhover a{\n"+
" background: #00558F;\n"+
"}\n\n"+
"ul.suckerfish li:hover ul a, ul.suckerfish li.sfhover ul a{\n"+
" color: #000;\n"+
" background: #eff3fa;\n"+
" border-top:1px solid #FFF;\n"+
"}\n\n"+
"ul.suckerfish ul li a:hover {\n"+
" background: #e0e8f5;\n"+
"}\n\n"+
"ul.suckerfish li a{\n"+
" width:9em;\n"+
"}\n\n"+
"ul.suckerfish ul li a, ul.suckerfish ul li a:hover{\n"+
" display:inline-block;\n"+
" width:9em;\n"+
"}\n\n"+
"ul.suckerfish li {\n"+
" border-left: 1px solid #00558F;\n"+
"}\n"+
"/***** END COLORS AND APPEARANCE - DEFAULT *****/\n"+
"\n\n"+
"/***** LAYOUT AND APPEARANCE: VERTICAL *****/\n"+
"ul.suckerfish.vertical li{\n"+
" width:10em;\n"+
" border-left: 0px solid #00558f;\n"+
"}\n\n"+
"ul.suckerfish.vertical ul li, ul.suckerfish.vertical li a, ul.suckerfish.vertical li:hover a, ul.suckerfish.vertical li.sfhover a {\n"+
" border-left: 0.8em solid #00558f;\n"+
"}\n\n"+
"ul.suckerfish.vertical li a, ul.suckerfish.vertical li:hover a, ul.suckerfish.vertical li.sfhover a, ul.suckerfish.vertical li.sfhover a:hover{\n"+
" width:8em;\n"+
"}\n\n"+
"ul.suckerfish.vertical {\n"+
" width:10em; text-align:left;\n"+
" float:left;\n"+
"}\n\n"+
"ul.suckerfish.vertical li a {\n"+
" padding: 0.5em 1em 0.5em 1em;\n"+
" border-top:1px solid #fff;\n"+
"}\n\n"+
"ul.suckerfish.vertical, ul.suckerfish.vertical ul {\n"+
" line-height:1.4em;\n"+
"}\n\n"+
"ul.suckerfish.vertical li:hover ul, ul.suckerfish.vertical li.sfhover ul { \n"+
" margin: -2.4em 0 0 10.9em;\n"+
"}\n\n"+
"ul.suckerfish.vertical li:hover ul li a, ul.suckerfish.vertical li.sfhover ul li a {\n"+
" border: 0px solid #FFF;\n"+
"}\n\n"+
"ul.suckerfish.vertical li:hover a, ul.suckerfish.vertical li.sfhover a{\n"+
" padding-right:1.1em;\n"+
"}\n\n"+
"ul.suckerfish.vertical li:hover ul li, ul.suckerfish.vertical li.sfhover ul li {\n"+
" border-bottom:1px solid #fff;\n"+
"}\n\n"+
"/***** END LAYOUT AND APPEARANCE: VERTICAL *****/\n"+
"/*}}}*/";
store.addNotification("StyleSheetDropDownMenuPlugin",refreshStyles);
//!END-PLUGIN-CODE
// %/
"Objects" in the Elgg space have a sophisticated but simple system of access control:
!!!General
* Public
* Any logged in user
* Private
A blog entry made public is accessible to the whole web in the same way that all other blogs work. But one can make an uploaded file private and thus visible only to the owner or a photo gallery can be made open to any logged in user of the system, ie anyone at Earlham. This powerful access control system addresses a lot of visibility issues. Making blog comments open only to logged in users effectively eliminates spam. But if you do want to make commenting completely open, then there's a WordPress plugin available called Akismet which is quite an effective anti-spam tool.
!!!Specific
* community
* custom access group
The
!Earlham Learning Spaces : Social Learning for the Digital Native generation
!!ICI Leader's Summit
For the past two decades educators have been attempting to use Instructional Technology with computers and other electronic devices to enhance pedagogy. We have been trying to harness technology to move beyond the orthodox notion that teaching just involves "talk'n'chalk" or "sage on the stage" to a more collaborative style of learning. Certainly, the meteoric rise of social networks such as Facebook shows that today's generation is closely attuned to interacting online when presented with an empowering Web 2.0 environment. But how can institutions construct a [[framework|Learning Framework]] to effectively implement this mode of learning in their own managed computing facilities? [[Elgg|http://elgg.org]] offers an Open Source approach to social networking systems which, if used in a creative way, could herald a paradigm shift in pedagogy of tectonic proportions. I will demonstrate Earlham's pilot implementation of Elgg as [[Earlham Learning Spaces|http://blogs.frumentius.earlham.edu/]], show how it has been used thus far, and talk about some innovative ways that it may be used in the coming year.
----
Mark Pearson 27/03/08
<!--{{{-->
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler wikibar'></div>
<div macro='showWhen !config.macros.tiddlersBar.isShown()'><div class='title' macro='view title'></div></div>
<div class='editor' macro='edit title'></div>
<div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<div class='editor' macro='edit tags'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<!--}}}-->
!!Desirable features for Elgg 1.0
Especially for academia
* easier uploading of files and especially photos
* Integration with Moodle (what would that look like)
* Voice input -- Speex / Nano-gong
* Maginalia blog/wiki commenting system
* Folio /wiki as a core plugin
* intentional eportfolio (with access controls)
* system forum
* better / more explicit podcasting support
* better themeing without having to hack
* multimedia handling -- photo gallery, flash player for audio / video
* use profile for default web presence
From [[Yoddle|http://yoddle.net/index.php?option=com_content&view=frontpage&Itemid=35]]
Features:
* Blogging tick icon
* Social networking tick icon
* File repositories for individuals and communities tick icon
* Podcast support tick icon
* Full access controls tick icon
* Supports tagging tick icon
* User profiles tick icon
* Full RSS support tick icon
* RSS aggregator tick icon
* Create communities tick icon
* Collaborative community blogs tick icon
* Create 'friends' networks tick icon
* Import content tick icon
* Publish to blog tick icon
* Multilingual tick icon
!!Suggestions for changes in ELS
From discussion with Sara Penhale on 25-Jan especially with regard to the Wiki.
* Move pages around in Folio. Can you move a page to a different parent to change the nesting?
* Your Resources -> Your RSS Feeds
* Your pages -> Your Wiki
* she wanted 'Communities' to go to 'Groups' but I disagree.
* In [[this conversation|http://moodle.org/mod/forum/discuss.php?d=83866]] on moodle.org Sean Keogh has got Elgg 0.8 working with Moodle 1.9! Geoffrey Rowland provided some useful answers too.
In my interview with Ana Cornide she refers to ELS as a 'learning community'. Here are some of the features that help make this happen:
!!Where Elgg helps:
* Easy to make connections with the teacher and the rest of the class using the familiar concept of 'friending'.
* Tagging blog postings makes it easy to find all the movie reviews together.
* All the blogs are under a single URL and not independent ~URLs.
* The Folio wiki system makes it easy to construct a personal web site
* Group work is empowered by Elgg community feature:
** can be created by any user
** community blog and folio allow dynamic & static content and work in the same way as personal. But content posted to community is still marked with creator's name -- ownership.
** access control allows great control over open or closed nature of community
** all community members are peers; this fosters a sense of ownership by the group
** each community has a unique name which comprises it's URL, eg [[http://eduspaces.net/moodlevan/weblog|http://eduspaces.net/moodlevan/weblog]]
<<miniBrowser http://eduspaces.net/moodlevan/weblog>>
!!Using Elgg as an ePortfolio solution
Chris Cardew at Coleg Y Prifysgol Abertawe (aka Swansea University) has done some interesting exploratory work using Elgg in different ways to accomplish eportfolio type applications:
* His [[virtual careers|graphics/elgg_portfolio_cardew_careers.png]]<<imagebox>> is a clever use of the HTML text box widget in the Elgg profile to create a career based interactive C.V.
* The CV Workshop uses the //presentation plugin// to demonstrate the components of a CV. +++[CV/Portfolio Workshop]
<<miniBrowser https://oremi.swan.ac.uk/lscardcj/presentations/7>>
===
* Chris has also come up with a clever way of using the [['community' feature of Elgg|graphics/elgg_portfolio_cardew_community.png]]<<imagebox>> as the basis for an [[eportfolio suite|stuff/E-portfolio+in+Elgg+080411_chris_cardew_swansea.pdf]].
* +++[The Folio plugin]
This is an extremely flexible plugin that supplies wiki like features but with an easy to use front end and dynamic navigation links.
* example of a [[CV using Folio|graphics/elgg_portfolio_cv.png]]<<imagebox>> -- [[link|http://conversation.cgu.edu/thomsb/page/My+Curriculum+Vitae]]. Adding content is just a matter of adding another 'child' page.
* [[Nathan Garrett's portfolio|graphics/elgg_portfolio_garrett.png]]<<imagebox>> shows the inclusion of files and his own reflective commentary on them. [[Link|http://conversation.cgu.edu/garrettn/page/Publications]]
The Folio system also allows the use of an HTML template so that students can have a structure on which to base their CV.
===
* Sébastien Ducoulombier has also ported an [[implementation of the Europass-CV|http://www.kite-eu.org/en/about]] as the [[KITE plugin|http://classic.elgg.org/mod/plugins/plugin.php?id=45]] for Elgg.
* Mandy Honeyman has used Elgg for her own ePortfolio [[eportfolio forum on eduspaces|http://eduspaces.net/mod/forum/131200.html]]
!!Content for Web presence
For more details, see [[Content|SLS : Content]]
# +++!!![Dynamic content|blogging system]>
Featuring:
* Easy to write and format (WYSWG interface). Spell checker.
* Easy to embed media from within or outside of system, eg own photos, Youtube clips
* System wide tags (keywords)
* ''control access to individual blog entries'' -- see [[Access / sharing]]
* Commenting can be restricted to within the site. Protects against spam.
** WordPress akismet spam protection can also be used if open comments are desirable.
* Blog categories can be listed in sidebar
* RSS feeds for blog entries and comments (see Information Flow)
===
# +++!!![Static pages|Folio wiki system]>
(open [[markpea's Folio home|http://barnabas.lly.earlham.edu/elgg_9/markpea/page/Home]])
* 'Personal wiki' with WYSYG interface.
* Add references to blog entries and uploaded files, including graphics
* can 'reflect' on referenced links -- ideal for portfolio purposes.
* control access to individual pages
* move pages around easily
* extremely [[cool sidebar display|graphics/folio_sidebar_display.png]]<<imagebox>> makes it easy to explore
===
# +++!!![File Store|personal files and folders]>
-- As with blogs and folio pages, files uploaded are stored in a //personal// space (in contrast to Moodle's course file storage).
* Can create folders and nest folders
* upload and storage limits
* types of folder indicate media content (eg photo gallery)
* access restrictions and keywords/tags on fodlers as well as files
* description and titles constitute crude metadata. Possible to formalise this.
* users have to assert ownership or legal right to share uploaded files.
===
On the UK Elgg User Group Stan stanier posed this question: [[Institutional hosting or using external networks?|http://community.brighton.ac.uk/elgguser/weblog/25349.html]]
<<<
considering the question of whether an institution should host its own social network or make use of the various external ones as the key theme to the presentation.
So, in the spiirit of true social networking I thought I'd ask the rest of the group what you think? We've had a lot of comments recently along the lines of "why bother - just use Facbook" or "Ning's much better why use anything else?" etc etc etc. I still firmly believe there are many good reasons why we need to host our own system but what does everyone else think? Is it worth it?
<<<
!!Mockup of Earlham Learning Spaces theme
[img[graphics/els_theme_mockup.png][http://www.earlham.edu/markp/LSW/stuff/pageshell.html]]
!!Display video from ~YouTube
Go to you blog and click @@Post a new entry@@
# In a separate tab, find the video clip on ~YouTube. Note the @@About this video@@ box.
# Highlight the embed code and copy ([[screenshot|graphics/you_tube_embed_code.png]]<<imagebox>>). Note the width and height parameters
# Switch tabs to your blog. Click @@Add External video@@
# Paste video URL into box.
# Make sure the dimensions in the Video size boxes correspond to the width and height in the embed code: +++[example]>
240 -> 425 (width)
200 -> 355 (height)
=== [[screenshot|graphics/you_tube_insert.png]]<<imagebox>>
# Click @@Insert video@@
There are a number of different approaches. I will look at purely Open Source solutions.
[[This document|stuff/ePortfolio Project Research Report.pdf]] from the [[Mahara site|http://marhara.org]] is a really useful REVIEW OF THE LITERATURE ON PORTFOLIOS AND ELECTRONIC PORTFOLIOS
!! 1. Desirable features
!!2. components within Moodle
* [[Exabis ePortfolio]]
* [[SPDC Portfolio]]
* [[MyStuff : Open University]]
!!3. standalone systems with Moodle integration
* [[Elgg as an ePortfolio]]
* [[Mahara]]
!!4. Others
* [[FreeFolio - WordPress based]]
I obtained an account on [[Epsilen environment|http://epsilen.com]] an online centralised eportfolio system.
Some big players have signed up to this including Purdue.
The whole system screams ''CORPORATE'' and tightly limits what you can do. It does not seem to be open and certainly does not encourage the free and open interchange and community that Elgg does.
My account is : http://markp.earlham.epsilen.com
!Exabis ePortfolio
!! Features
* an individual starting page which may contain one’s curriculum vitae or similar
* a manageable category-system on two levels (main category and sub category)
* file-management within the category-system (i.e. for publication of one’s best work-efforts)
* publication of interesting links within moodle or into the web via weblink
* self-reflection and documentation of one’s personal learning-style by using private notes (with the option for publication within moodle or into the web via weblink)
* commenting-functionality for published links, files and notes
* @@export-functionality into a ~SCORM-zip-format@@ [Unique]
* cross-course usage of eportfolio-module
* import of assignments from within all moodle-courses into an individual portfolio
* import of previously from eportfolio-module exported SCORM-packages
!!Links
* [[main site (Germany)|http://moodlekurse.org/moodle_18/course/view.php?id=13]] login as Guest (I now have a user account)
* [[documentation on Moodle docs|http://docs.moodle.org/en/Exabis_e-portfolio_block]]
* [[discussion on moodle.org|http://moodle.org/mod/forum/discuss.php?d=77046]] last posting 21-Feb-08
!!Approval for Moodle
[[This discussion posting|http://moodlekurse.org/moodle_18/mod/forum/discuss.php?d=23]] announced:
<<<
We have finally made it! After a very detailed review of our module by Petr Skoda with an emphasis on security and integration into future Moodle versions, we have just received the ok for our block-module.
We are happy to inform the community about that and have made the module available for download.
<<<
And [[this certificate|http://moodlekurse.org/moodle_18/file.php/13/fregabe_small.jpg]]<<imagebox>> confirmed approval by Moodle developer Petr Skoda for use with production systems 1.8 & 1.9.
[[Exabis ePortfolio comments]]
!!ToDo
* Install this on a Moodle 1.9 test on Barnabas
!!Comments
* Teachers have to activate the Exabis block within their course for it to be used. Implications for teachers who are non-cooperative. Could make it a site-wide 'sticky' block.
!!!Personal Information / Curriculum Vitae
This is the main 'landing page' for outside visitors wanting to view the user's eportfolio. This would naturally be the page to put your CV information on.
# Unlike Folio in Elgg there's no template for a CV. Thus students will be left to their own devices and the natural mayhem that will result.
# The external URL is ''ugly'', taking the screenshot example form the docs : http://moodlekurse.org/moodle_18/portfolio/extern.php?id=9b97068c. This does not naturally connect with a user at all.
!!!Categories
Different types of portfolio can be presented by creating categories. Within these, subcategories can be created to further subdivide sections.
/***
|Name|FontSizePlugin|
|Created by|SaqImtiaz|
|Location|http://tw.lewcid.org/#FontSizePlugin|
|Version|1.0|
|Requires|~TW2.x|
!Description:
Resize tiddler text on the fly. The text size is remembered between sessions by use of a cookie.
You can customize the maximum and minimum allowed sizes.
(only affects tiddler content text, not any other text)
Also, you can load a TW file with a font-size specified in the url.
Eg: http://tw.lewcid.org/#font:110
!Demo:
Try using the font-size buttons in the sidebar, or in the MainMenu above.
!Installation:
Copy the contents of this tiddler to your TW, tag with systemConfig, save and reload your TW.
Then put {{{<<fontSize "font-size:">>}}} in your SideBarOptions tiddler, or anywhere else that you might like.
!Usage
{{{<<fontSize>>}}} results in <<fontSize>>
{{{<<fontSize font-size: >>}}} results in <<fontSize font-size:>>
!Customizing:
The buttons and prefix text are wrapped in a span with class fontResizer, for easy css styling.
To change the default font-size, and the maximum and minimum font-size allowed, edit the config.fontSize.settings section of the code below.
!Notes:
This plugin assumes that the initial font-size is 100% and then increases or decreases the size by 10%. This stepsize of 10% can also be customized.
!History:
*27-07-06, version 1.0 : prevented double clicks from triggering editing of containing tiddler.
*25-07-06, version 0.9
!Code
***/
//{{{
config.fontSize={};
//configuration settings
config.fontSize.settings =
{
defaultSize : 100, // all sizes in %
maxSize : 200,
minSize : 40,
stepSize : 10
};
//startup code
var fontSettings = config.fontSize.settings;
if (!config.options.txtFontSize)
{config.options.txtFontSize = fontSettings.defaultSize;
saveOptionCookie("txtFontSize");}
setStylesheet(".tiddler .viewer {font-size:"+config.options.txtFontSize+"%;}\n","fontResizerStyles");
setStylesheet("#contentWrapper .fontResizer .button {display:inline;font-size:105%; font-weight:bold; margin:0 1px; padding: 0 3px; text-align:center !important;}\n .fontResizer {margin:0 0.5em;}","fontResizerButtonStyles");
//macro
config.macros.fontSize={};
config.macros.fontSize.handler = function (place,macroName,params,wikifier,paramString,tiddler)
{
var sp = createTiddlyElement(place,"span",null,"fontResizer");
sp.ondblclick=this.onDblClick;
if (params[0])
createTiddlyText(sp,params[0]);
createTiddlyButton(sp,"+","increase font-size",this.incFont);
createTiddlyButton(sp,"=","reset font-size",this.resetFont);
createTiddlyButton(sp,"–","decrease font-size",this.decFont);
}
config.macros.fontSize.onDblClick = function (e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
return false;
}
config.macros.fontSize.setFont = function ()
{
saveOptionCookie("txtFontSize");
setStylesheet(".tiddler .viewer {font-size:"+config.options.txtFontSize+"%;}\n","fontResizerStyles");
}
config.macros.fontSize.incFont=function()
{
if (config.options.txtFontSize < fontSettings.maxSize)
config.options.txtFontSize = (config.options.txtFontSize*1)+fontSettings.stepSize;
config.macros.fontSize.setFont();
}
config.macros.fontSize.decFont=function()
{
if (config.options.txtFontSize > fontSettings.minSize)
config.options.txtFontSize = (config.options.txtFontSize*1) - fontSettings.stepSize;
config.macros.fontSize.setFont();
}
config.macros.fontSize.resetFont=function()
{
config.options.txtFontSize=fontSettings.defaultSize;
config.macros.fontSize.setFont();
}
config.paramifiers.font =
{
onstart: function(v)
{
config.options.txtFontSize = v;
config.macros.fontSize.setFont();
}
};
//}}}
''Creating a footnote is very easy. Just put the text of the footnote inside triple backticks.''
{{{``` text of footnote ```}}}
''Try clicking on the red numbers, in the paragraphs below, to see the footnotes.
Edit this tiddler, to see how easy it is, to create footnotes.''
Lorem ipsum dolor sit amet, consectetuer adipiscing elit```This is my first footnote```. Duis eleifend. Phasellus id orci. Suspendisse quis elit pharetra arcu fringilla vulputate. Nullam et orci. In vel dolor quis eros euismod vehicula. Mauris eros lectus, imperdiet id, aliquet quis, mollis bibendum, libero. Suspendisse turpis diam, lobortis id, consectetuer a, porta a, nisl. Morbi tristique, tellus ac mollis suscipit, dolor dui convallis massa, a tristique ligula nisl ac turpis. Pellentesque in elit sit amet urna mattis vulputate. Cras convallis gravida nulla. Integer luctus ante et velit. In vel urna. Donec in sapien.
Ut elementum egestas nibh. Sed at urna non lectus```You can have as many footnotes as you like``` accumsan lobortis. Ut risus nibh, commodo non, blandit sit amet, consequat id, nisl. Nulla facilisi. Curabitur massa magna, vulputate sed, porttitor accumsan, eleifend sit amet, dui. Curabitur risus. Integer id enim vel ligula porttitor laoreet. Vivamus congue lorem id urna. Donec viverra. Donec et massa non arcu sollicitudin bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque velit mauris, lacinia eget, lobortis vitae, aliquam a, lectus. Donec pulvinar, libero sit amet auctor volutpat, mauris est posuere nisi, vel aliquet enim nisi in ipsum. Nullam at eros ac leo convallis blandit```Clicking on a footnote link, takes you to the footnote```.
Aliquam erat volutpat. Nam congue. Maecenas vitae tortor. In enim leo, rutrum non, tincidunt at, adipiscing in, lectus. Donec bibendum, lacus a ultricies ultricies, lacus erat rhoncus augue, sit amet vehicula libero massa eget sem. Donec quis felis. Nullam auctor interdum purus. Mauris mauris. Integer interdum blandit erat. Nulla facilisi. Integer fermentum gravida nunc. Maecenas vitae justo ut tortor ultrices dictum. Maecenas purus magna, pellentesque vel, luctus vel, commodo a, enim. Ut convallis, metus in consectetuer dapibus, nisi mi malesuada justo, nec feugiat leo magna et orci. In hendrerit enim eget sem sollicitudin auctor```Footnotes are numbered automatically```. Donec hendrerit, lorem id tincidunt bibendum, dolor dui dignissim velit, eu aliquet dolor sapien tincidunt nunc. Duis condimentum leo laoreet nibh. Proin in lacus quis ante lacinia vestibulum.
Donec pharetra diam at massa. Aliquam ut eros in odio malesuada euismod. Nam interdum. Sed quis quam sed justo hendrerit facilisis. Morbi euismod. Fusce urna lacus, lobortis vitae, feugiat quis, commodo eu, dui. Nunc dui lacus, ultricies sed, pharetra ac, feugiat id, velit. Sed accumsan, metus at pharetra accumsan, nisl ante vulputate lectus, in pretium dui sem nec dui. Quisque mattis arcu eget nulla. Mauris turpis. Donec elementum lacinia turpis. Donec enim diam, feugiat id, feugiat gravida, mollis non, magna```Each footnote, has a back button, to take you to where you came from```.
/***
|''Name:''|FootnotesPlugin|
|''Description:''|Create automated tiddler footnotes.|
|''Author:''|Saq Imtiaz ( lewcid@gmail.com )|
|''Source:''|http://tw.lewcid.org/#FootnotesPlugin|
|''Code Repository:''|http://tw.lewcid.org/svn/plugins|
|''Version:''|2.01|
|''Date:''|10/25/07|
|''License:''|[[Creative Commons Attribution-ShareAlike 3.0 License|http://creativecommons.org/licenses/by-sa/3.0/]]|
|''~CoreVersion:''|2.2.2|
!!Usage:
*To create a footnote, just put the footnote text inside triple backticks.
*Footnotes are numbered automatically, and listed at the bottom of the tiddler.
*{{{Creating a footnote is easy. ```This is the text for my footnote```}}}
*[[Example|FootnotesDemo]]
***/
// /%
//!BEGIN-PLUGIN-CODE
config.footnotesPlugin = {
backLabel: "back",
prompt:"show footnote"
};
config.formatters.unshift( {
name: "footnotes",
match: "```",
lookaheadRegExp: /```((?:.|\n)*?)```/g,
handler: function(w)
{
this.lookaheadRegExp.lastIndex = w.matchStart;
var lookaheadMatch = this.lookaheadRegExp.exec(w.source);
if(lookaheadMatch && lookaheadMatch.index == w.matchStart )
{
var tiddler = story.findContainingTiddler(w.output);
if (!tiddler.notes)
tiddler.notes = [];
var title = tiddler.getAttribute("tiddler");
tiddler.notes.pushUnique(lookaheadMatch[1]);
var pos = tiddler.notes.indexOf(lookaheadMatch[1]) + 1;
createTiddlyButton(w.output,pos,config.footnotesPlugin.prompt,function(){var x = document.getElementById(title+"ftn"+pos);window.scrollTo(0,ensureVisible(x)+(ensureVisible(x)<findScrollY()?(findWindowHeight()-x.offsetHeight):0));return false;},"ftnlink",title+"ftnlink"+pos);
w.nextMatch = lookaheadMatch.index + lookaheadMatch[0].length;
}
}
});
old_footnotes_refreshTiddler = Story.prototype.refreshTiddler;
Story.prototype.refreshTiddler = function(title,template,force)
{
var tiddler = old_footnotes_refreshTiddler.apply(this,arguments);
if (tiddler.notes && tiddler.notes.length)
{
var holder = createTiddlyElement(null,"div",null,"footnoteholder");
var list = createTiddlyElement(holder,"ol",title+"footnoteholder");
for (var i=0; i<tiddler.notes.length; i++)
{
var ftn = createTiddlyElement(list,"li",title+"ftn"+(i+1),"footnote");
wikify(tiddler.notes[i]+" ",ftn);
createTiddlyButton(ftn,"["+config.footnotesPlugin.backLabel+"]",config.footnotesPlugin.backLabel,function(){window.scrollTo(0,ensureVisible(document.getElementById(this.parentNode.id.replace("ftn","ftnlink"))));return false;},"ftnbklink");
}
var count = tiddler.childNodes.length;
for (var j=0; j<count; j++){
if(hasClass(tiddler.childNodes[j],"viewer")){
var viewer = tiddler.childNodes[j];
}
}
viewer.appendChild(holder);
tiddler.notes = [];
}
return tiddler;
};
setStylesheet(
".tiddler a.ftnlink {vertical-align: super; font-size: 0.8em; color:red;}\n"+
".tiddler a.ftnlink:hover, .tiddler .footnoteholder a.ftnbklink:hover{color:#fff;background:red;}\n"+
".tiddler div.footnoteholder{margin:1.8em 1.0em; padding:0.1em 1.0em 0.1em 1.0em ;border-left: 1px solid #ccc;}"+
".tiddler footnoteholder ol {font-size: 0.9em; line-height: 1.2em;}\n"+
".tiddler .footnoteholder li.footnote {margin: 0 0 5px 0;}\n"+
".tiddler .footnoteholder a.ftnbklink{color:red;}\n","FootNotesStyles");
//!END-PLUGIN-CODE
// %/
/***
|''Name:''|ForEachTiddlerPlugin|
|''Version:''|1.0.5 (2006-02-05)|
|''Source:''|http://tiddlywiki.abego-software.de/#ForEachTiddlerPlugin|
|''Author:''|UdoBorkowski (ub [at] abego-software [dot] de)|
|''Licence:''|[[BSD open source license]]|
|''Macros:''|[[ForEachTiddlerMacro]] v1.0.5|
|''TiddlyWiki:''|1.2.38+, 2.0|
|''Browser:''|Firefox 1.0.4+; Firefox 1.5; InternetExplorer 6.0|
!Description
Create customizable lists, tables etc. for your selections of tiddlers. Specify the tiddlers to include and their order through a powerful language.
''Syntax:''
|>|{{{<<}}}''forEachTiddler'' [''in'' //tiddlyWikiPath//] [''where'' //whereCondition//] [''sortBy'' //sortExpression// [''ascending'' //or// ''descending'']] [''script'' //scriptText//] [//action// [//actionParameters//]]{{{>>}}}|
|//tiddlyWikiPath//|The filepath to the TiddlyWiki the macro should work on. When missing the current TiddlyWiki is used.|
|//whereCondition//|(quoted) JavaScript boolean expression. May refer to the build-in variables {{{tiddler}}} and {{{context}}}.|
|//sortExpression//|(quoted) JavaScript expression returning "comparable" objects (using '{{{<}}}','{{{>}}}','{{{==}}}'. May refer to the build-in variables {{{tiddler}}} and {{{context}}}.|
|//scriptText//|(quoted) JavaScript text. Typically defines JavaScript functions that are called by the various JavaScript expressions (whereClause, sortClause, action arguments,...)|
|//action//|The action that should be performed on every selected tiddler, in the given order. By default the actions [[addToList|AddToListAction]] and [[write|WriteAction]] are supported. When no action is specified [[addToList|AddToListAction]] is used.|
|//actionParameters//|(action specific) parameters the action may refer while processing the tiddlers (see action descriptions for details). <<tiddler [[JavaScript in actionParameters]]>>|
|>|~~Syntax formatting: Keywords in ''bold'', optional parts in [...]. 'or' means that exactly one of the two alternatives must exist.~~|
See details see [[ForEachTiddlerMacro]] and [[ForEachTiddlerExamples]].
!Revision history
* v1.0.5
** Pass tiddler containing the macro with wikify, context object also holds reference to tiddler containing the macro ("inTiddler"). Thanks to SimonBaird.
** Support Firefox 1.5.0.1
** Internal
*** Make "JSLint" conform
*** "Only install once"
* v1.0.4 (2006-01-06)
** Support TiddlyWiki 2.0
* v1.0.3 (2005-12-22)
** Features:
*** Write output to a file supports multi-byte environments (Thanks to Bram Chen)
*** Provide API to access the forEachTiddler functionality directly through JavaScript (see getTiddlers and performMacro)
** Enhancements:
*** Improved error messages on InternetExplorer.
* v1.0.2 (2005-12-10)
** Features:
*** context object also holds reference to store (TiddlyWiki)
** Fixed Bugs:
*** ForEachTiddler 1.0.1 has broken support on win32 Opera 8.51 (Thanks to BrunoSabin for reporting)
* v1.0.1 (2005-12-08)
** Features:
*** Access tiddlers stored in separated TiddlyWikis through the "in" option. I.e. you are no longer limited to only work on the "current TiddlyWiki".
*** Write output to an external file using the "toFile" option of the "write" action. With this option you may write your customized tiddler exports.
*** Use the "script" section to define "helper" JavaScript functions etc. to be used in the various JavaScript expressions (whereClause, sortClause, action arguments,...).
*** Access and store context information for the current forEachTiddler invocation (through the build-in "context" object) .
*** Improved script evaluation (for where/sort clause and write scripts).
* v1.0.0 (2005-11-20)
** initial version
!Code
***/
//{{{
//============================================================================
//============================================================================
// ForEachTiddlerPlugin
//============================================================================
//============================================================================
// Only install once
if (!version.extensions.ForEachTiddlerPlugin) {
version.extensions.ForEachTiddlerPlugin = {major: 1, minor: 0, revision: 5, date: new Date(2006,2,5), source: "http://tiddlywiki.abego-software.de/#ForEachTiddlergPlugin"};
// For backward compatibility with TW 1.2.x
//
if (!TiddlyWiki.prototype.forEachTiddler) {
TiddlyWiki.prototype.forEachTiddler = function(callback) {
for(var t in this.tiddlers) {
callback.call(this,t,this.tiddlers[t]);
}
};
}
//============================================================================
// forEachTiddler Macro
//============================================================================
version.extensions.forEachTiddler = {major: 1, minor: 0, revision: 5, date: new Date(2006,2,5), provider: "http://tiddlywiki.abego-software.de"};
// ---------------------------------------------------------------------------
// Configurations and constants
// ---------------------------------------------------------------------------
config.macros.forEachTiddler = {
// Standard Properties
label: "forEachTiddler",
prompt: "Perform actions on a (sorted) selection of tiddlers",
// actions
actions: {
addToList: {},
write: {}
}
};
// ---------------------------------------------------------------------------
// The forEachTiddler Macro Handler
// ---------------------------------------------------------------------------
config.macros.forEachTiddler.getContainingTiddler = function(e) {
while(e && !hasClass(e,"tiddler"))
e = e.parentNode;
var title = e ? e.getAttribute("tiddler") : null;
return title ? store.getTiddler(title) : null;
};
config.macros.forEachTiddler.handler = function(place,macroName,params,wikifier,paramString,tiddler) {
// config.macros.forEachTiddler.traceMacroCall(place,macroName,params,wikifier,paramString,tiddler);
if (!tiddler) tiddler = config.macros.forEachTiddler.getContainingTiddler(place);
// --- Parsing ------------------------------------------
var i = 0; // index running over the params
// Parse the "in" clause
var tiddlyWikiPath = undefined;
if ((i < params.length) && params[i] == "in") {
i++;
if (i >= params.length) {
this.handleError(place, "TiddlyWiki path expected behind 'in'.");
return;
}
tiddlyWikiPath = this.paramEncode((i < params.length) ? params[i] : "");
i++;
}
// Parse the where clause
var whereClause ="true";
if ((i < params.length) && params[i] == "where") {
i++;
whereClause = this.paramEncode((i < params.length) ? params[i] : "");
i++;
}
// Parse the sort stuff
var sortClause = null;
var sortAscending = true;
if ((i < params.length) && params[i] == "sortBy") {
i++;
if (i >= params.length) {
this.handleError(place, "sortClause missing behind 'sortBy'.");
return;
}
sortClause = this.paramEncode(params[i]);
i++;
if ((i < params.length) && (params[i] == "ascending" || params[i] == "descending")) {
sortAscending = params[i] == "ascending";
i++;
}
}
// Parse the script
var scriptText = null;
if ((i < params.length) && params[i] == "script") {
i++;
scriptText = this.paramEncode((i < params.length) ? params[i] : "");
i++;
}
// Parse the action.
// When we are already at the end use the default action
var actionName = "addToList";
if (i < params.length) {
if (!config.macros.forEachTiddler.actions[params[i]]) {
this.handleError(place, "Unknown action '"+params[i]+"'.");
return;
} else {
actionName = params[i];
i++;
}
}
// Get the action parameter
// (the parsing is done inside the individual action implementation.)
var actionParameter = params.slice(i);
// --- Processing ------------------------------------------
try {
this.performMacro({
place: place,
inTiddler: tiddler,
whereClause: whereClause,
sortClause: sortClause,
sortAscending: sortAscending,
actionName: actionName,
actionParameter: actionParameter,
scriptText: scriptText,
tiddlyWikiPath: tiddlyWikiPath});
} catch (e) {
this.handleError(place, e);
}
};
// Returns an object with properties "tiddlers" and "context".
// tiddlers holds the (sorted) tiddlers selected by the parameter,
// context the context of the execution of the macro.
//
// The action is not yet performed.
//
// @parameter see performMacro
//
config.macros.forEachTiddler.getTiddlersAndContext = function(parameter) {
var context = config.macros.forEachTiddler.createContext(parameter.place, parameter.whereClause, parameter.sortClause, parameter.sortAscending, parameter.actionName, parameter.actionParameter, parameter.scriptText, parameter.tiddlyWikiPath, parameter.inTiddler);
var tiddlyWiki = parameter.tiddlyWikiPath ? this.loadTiddlyWiki(parameter.tiddlyWikiPath) : store;
context["tiddlyWiki"] = tiddlyWiki;
// Get the tiddlers, as defined by the whereClause
var tiddlers = this.findTiddlers(parameter.whereClause, context, tiddlyWiki);
context["tiddlers"] = tiddlers;
// Sort the tiddlers, when sorting is required.
if (parameter.sortClause) {
this.sortTiddlers(tiddlers, parameter.sortClause, parameter.sortAscending, context);
}
return {tiddlers: tiddlers, context: context};
};
// Returns the (sorted) tiddlers selected by the parameter.
//
// The action is not yet performed.
//
// @parameter see performMacro
//
config.macros.forEachTiddler.getTiddlers = function(parameter) {
return this.getTiddlersAndContext(parameter).tiddlers;
};
// Performs the macros with the given parameter.
//
// @param parameter holds the parameter of the macro as separate properties.
// The following properties are supported:
//
// place
// whereClause
// sortClause
// sortAscending
// actionName
// actionParameter
// scriptText
// tiddlyWikiPath
//
// All properties are optional.
// For most actions the place property must be defined.
//
config.macros.forEachTiddler.performMacro = function(parameter) {
var tiddlersAndContext = this.getTiddlersAndContext(parameter);
// Perform the action
var actionName = parameter.actionName ? parameter.actionName : "addToList";
var action = config.macros.forEachTiddler.actions[actionName];
if (!action) {
this.handleError(parameter.place, "Unknown action '"+actionName+"'.");
return;
}
var actionHandler = action.handler;
actionHandler(parameter.place, tiddlersAndContext.tiddlers, parameter.actionParameter, tiddlersAndContext.context);
};
// ---------------------------------------------------------------------------
// The actions
// ---------------------------------------------------------------------------
// Internal.
//
// --- The addToList Action -----------------------------------------------
//
config.macros.forEachTiddler.actions.addToList.handler = function(place, tiddlers, parameter, context) {
// Parse the parameter
var p = 0;
// Check for extra parameters
if (parameter.length > p) {
config.macros.forEachTiddler.createExtraParameterErrorElement(place, "addToList", parameter, p);
return;
}
// Perform the action.
var list = document.createElement("ul");
place.appendChild(list);
for (var i = 0; i < tiddlers.length; i++) {
var tiddler = tiddlers[i];
var listItem = document.createElement("li");
list.appendChild(listItem);
createTiddlyLink(listItem, tiddler.title, true);
}
};
// Internal.
//
// --- The write Action ---------------------------------------------------
//
config.macros.forEachTiddler.actions.write.handler = function(place, tiddlers, parameter, context) {
// Parse the parameter
var p = 0;
if (p >= parameter.length) {
this.handleError(place, "Missing expression behind 'write'.");
return;
}
var textExpression = config.macros.forEachTiddler.paramEncode(parameter[p]);
p++;
// Parse the "toFile" option
var filename = null;
var lineSeparator = undefined;
if ((p < parameter.length) && parameter[p] == "toFile") {
p++;
if (p >= parameter.length) {
this.handleError(place, "Filename expected behind 'toFile' of 'write' action.");
return;
}
filename = config.macros.forEachTiddler.getLocalPath(config.macros.forEachTiddler.paramEncode(parameter[p]));
p++;
if ((p < parameter.length) && parameter[p] == "withLineSeparator") {
p++;
if (p >= parameter.length) {
this.handleError(place, "Line separator text expected behind 'withLineSeparator' of 'write' action.");
return;
}
lineSeparator = config.macros.forEachTiddler.paramEncode(parameter[p]);
p++;
}
}
// Check for extra parameters
if (parameter.length > p) {
config.macros.forEachTiddler.createExtraParameterErrorElement(place, "write", parameter, p);
return;
}
// Perform the action.
var func = config.macros.forEachTiddler.getEvalTiddlerFunction(textExpression, context);
var count = tiddlers.length;
var text = "";
for (var i = 0; i < count; i++) {
var tiddler = tiddlers[i];
text += func(tiddler, context, count, i);
}
if (filename) {
if (lineSeparator !== undefined) {
lineSeparator = lineSeparator.replace(/\\n/mg, "\n").replace(/\\r/mg, "\r");
text = text.replace(/\n/mg,lineSeparator);
}
saveFile(filename, convertUnicodeToUTF8(text));
} else {
var wrapper = createTiddlyElement(place, "span");
wikify(text, wrapper, null/* highlightRegExp */, context.inTiddler);
}
};
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
// Internal.
//
config.macros.forEachTiddler.createContext = function(placeParam, whereClauseParam, sortClauseParam, sortAscendingParam, actionNameParam, actionParameterParam, scriptText, tiddlyWikiPathParam, inTiddlerParam) {
return {
place : placeParam,
whereClause : whereClauseParam,
sortClause : sortClauseParam,
sortAscending : sortAscendingParam,
script : scriptText,
actionName : actionNameParam,
actionParameter : actionParameterParam,
tiddlyWikiPath : tiddlyWikiPathParam,
inTiddler : inTiddlerParam
};
};
// Internal.
//
// Returns a TiddlyWiki with the tiddlers loaded from the TiddlyWiki of
// the given path.
//
config.macros.forEachTiddler.loadTiddlyWiki = function(path, idPrefix) {
if (!idPrefix) {
idPrefix = "store";
}
var lenPrefix = idPrefix.length;
// Read the content of the given file
var content = loadFile(this.getLocalPath(path));
if(content === null) {
throw "TiddlyWiki '"+path+"' not found.";
}
// Locate the storeArea div's
var posOpeningDiv = content.indexOf(startSaveArea);
var posClosingDiv = content.lastIndexOf(endSaveArea);
if((posOpeningDiv == -1) || (posClosingDiv == -1)) {
throw "File '"+path+"' is not a TiddlyWiki.";
}
var storageText = content.substr(posOpeningDiv + startSaveArea.length, posClosingDiv);
// Create a "div" element that contains the storage text
var myStorageDiv = document.createElement("div");
myStorageDiv.innerHTML = storageText;
myStorageDiv.normalize();
// Create all tiddlers in a new TiddlyWiki
// (following code is modified copy of TiddlyWiki.prototype.loadFromDiv)
var tiddlyWiki = new TiddlyWiki();
var store = myStorageDiv.childNodes;
for(var t = 0; t < store.length; t++) {
var e = store[t];
var title = null;
if(e.getAttribute)
title = e.getAttribute("tiddler");
if(!title && e.id && e.id.substr(0,lenPrefix) == idPrefix)
title = e.id.substr(lenPrefix);
if(title && title !== "") {
var tiddler = tiddlyWiki.createTiddler(title);
tiddler.loadFromDiv(e,title);
}
}
tiddlyWiki.dirty = false;
return tiddlyWiki;
};
// Internal.
//
// Returns a function that has a function body returning the given javaScriptExpression.
// The function has the parameters:
//
// (tiddler, context, count, index)
//
config.macros.forEachTiddler.getEvalTiddlerFunction = function (javaScriptExpression, context) {
var script = context["script"];
var functionText = "var theFunction = function(tiddler, context, count, index) { return "+javaScriptExpression+"}";
var fullText = (script ? script+";" : "")+functionText+";theFunction;";
return eval(fullText);
};
// Internal.
//
config.macros.forEachTiddler.findTiddlers = function(whereClause, context, tiddlyWiki) {
var result = [];
var func = config.macros.forEachTiddler.getEvalTiddlerFunction(whereClause, context);
tiddlyWiki.forEachTiddler(function(title,tiddler) {
if (func(tiddler, context, undefined, undefined)) {
result.push(tiddler);
}
});
return result;
};
// Internal.
//
config.macros.forEachTiddler.createExtraParameterErrorElement = function(place, actionName, parameter, firstUnusedIndex) {
var message = "Extra parameter behind '"+actionName+"':";
for (var i = firstUnusedIndex; i < parameter.length; i++) {
message += " "+parameter[i];
}
this.handleError(place, message);
};
// Internal.
//
config.macros.forEachTiddler.sortAscending = function(tiddlerA, tiddlerB) {
var result =
(tiddlerA.forEachTiddlerSortValue == tiddlerB.forEachTiddlerSortValue)
? 0
: (tiddlerA.forEachTiddlerSortValue < tiddlerB.forEachTiddlerSortValue)
? -1
: +1;
return result;
};
// Internal.
//
config.macros.forEachTiddler.sortDescending = function(tiddlerA, tiddlerB) {
var result =
(tiddlerA.forEachTiddlerSortValue == tiddlerB.forEachTiddlerSortValue)
? 0
: (tiddlerA.forEachTiddlerSortValue < tiddlerB.forEachTiddlerSortValue)
? +1
: -1;
return result;
};
// Internal.
//
config.macros.forEachTiddler.sortTiddlers = function(tiddlers, sortClause, ascending, context) {
// To avoid evaluating the sortClause whenever two items are compared
// we pre-calculate the sortValue for every item in the array and store it in a
// temporary property ("forEachTiddlerSortValue") of the tiddlers.
var func = config.macros.forEachTiddler.getEvalTiddlerFunction(sortClause, context);
var count = tiddlers.length;
var i;
for (i = 0; i < count; i++) {
var tiddler = tiddlers[i];
tiddler.forEachTiddlerSortValue = func(tiddler,context, undefined, undefined);
}
// Do the sorting
tiddlers.sort(ascending ? this.sortAscending : this.sortDescending);
// Delete the temporary property that holds the sortValue.
for (i = 0; i < tiddlers.length; i++) {
delete tiddlers[i].forEachTiddlerSortValue;
}
};
// Internal.
//
config.macros.forEachTiddler.trace = function(message) {
displayMessage(message);
};
// Internal.
//
config.macros.forEachTiddler.traceMacroCall = function(place,macroName,params) {
var message ="<<"+macroName;
for (var i = 0; i < params.length; i++) {
message += " "+params[i];
}
message += ">>";
displayMessage(message);
};
// Internal.
//
// Creates an element that holds an error message
//
config.macros.forEachTiddler.createErrorElement = function(place, exception) {
var message = (exception.description) ? exception.description : exception.toString();
return createTiddlyElement(place,"span",null,"forEachTiddlerError","<<forEachTiddler ...>>: "+message);
};
// Internal.
//
// @param place [may be null]
//
config.macros.forEachTiddler.handleError = function(place, exception) {
if (place) {
this.createErrorElement(place, exception);
} else {
throw exception;
}
};
// Internal.
//
// Encodes the given string.
//
// Replaces
// "$))" to ">>"
// "$)" to ">"
//
config.macros.forEachTiddler.paramEncode = function(s) {
var reGTGT = new RegExp("\\$\\)\\)","mg");
var reGT = new RegExp("\\$\\)","mg");
return s.replace(reGTGT, ">>").replace(reGT, ">");
};
// Internal.
//
// Returns the given original path (that is a file path, starting with "file:")
// as a path to a local file, in the systems native file format.
//
// Location information in the originalPath (i.e. the "#" and stuff following)
// is stripped.
//
config.macros.forEachTiddler.getLocalPath = function(originalPath) {
// Remove any location part of the URL
var hashPos = originalPath.indexOf("#");
if(hashPos != -1)
originalPath = originalPath.substr(0,hashPos);
// Convert to a native file format assuming
// "file:///x:/path/path/path..." - pc local file --> "x:\path\path\path..."
// "file://///server/share/path/path/path..." - FireFox pc network file --> "\\server\share\path\path\path..."
// "file:///path/path/path..." - mac/unix local file --> "/path/path/path..."
// "file://server/share/path/path/path..." - pc network file --> "\\server\share\path\path\path..."
var localPath;
if(originalPath.charAt(9) == ":") // pc local file
localPath = unescape(originalPath.substr(8)).replace(new RegExp("/","g"),"\\");
else if(originalPath.indexOf("file://///") === 0) // FireFox pc network file
localPath = "\\\\" + unescape(originalPath.substr(10)).replace(new RegExp("/","g"),"\\");
else if(originalPath.indexOf("file:///") === 0) // mac/unix local file
localPath = unescape(originalPath.substr(7));
else if(originalPath.indexOf("file:/") === 0) // mac/unix local file
localPath = unescape(originalPath.substr(5));
else // pc network file
localPath = "\\\\" + unescape(originalPath.substr(7)).replace(new RegExp("/","g"),"\\");
return localPath;
};
// ---------------------------------------------------------------------------
// Stylesheet Extensions (may be overridden by local StyleSheet)
// ---------------------------------------------------------------------------
//
setStylesheet(
".forEachTiddlerError{color: #ffffff;background-color: #880000;}",
"forEachTiddler");
//============================================================================
// End of forEachTiddler Macro
//============================================================================
//============================================================================
// String.startsWith Function
//============================================================================
//
// Returns true if the string starts with the given prefix, false otherwise.
//
version.extensions["String.startsWith"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
String.prototype.startsWith = function(prefix) {
var n = prefix.length;
return (this.length >= n) && (this.slice(0, n) == prefix);
};
//============================================================================
// String.endsWith Function
//============================================================================
//
// Returns true if the string ends with the given suffix, false otherwise.
//
version.extensions["String.endsWith"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
String.prototype.endsWith = function(suffix) {
var n = suffix.length;
return (this.length >= n) && (this.right(n) == suffix);
};
//============================================================================
// String.contains Function
//============================================================================
//
// Returns true when the string contains the given substring, false otherwise.
//
version.extensions["String.contains"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
String.prototype.contains = function(substring) {
return this.indexOf(substring) >= 0;
};
//============================================================================
// Array.indexOf Function
//============================================================================
//
// Returns the index of the first occurance of the given item in the array or
// -1 when no such item exists.
//
// @param item [may be null]
//
version.extensions["Array.indexOf"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
Array.prototype.indexOf = function(item) {
for (var i = 0; i < this.length; i++) {
if (this[i] == item) {
return i;
}
}
return -1;
};
//============================================================================
// Array.contains Function
//============================================================================
//
// Returns true when the array contains the given item, otherwise false.
//
// @param item [may be null]
//
version.extensions["Array.contains"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
Array.prototype.contains = function(item) {
return (this.indexOf(item) >= 0);
};
//============================================================================
// Array.containsAny Function
//============================================================================
//
// Returns true when the array contains at least one of the elements
// of the item. Otherwise (or when items contains no elements) false is returned.
//
version.extensions["Array.containsAny"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
Array.prototype.containsAny = function(items) {
for(var i = 0; i < items.length; i++) {
if (this.contains(items[i])) {
return true;
}
}
return false;
};
//============================================================================
// Array.containsAll Function
//============================================================================
//
// Returns true when the array contains all the items, otherwise false.
//
// When items is null false is returned (even if the array contains a null).
//
// @param items [may be null]
//
version.extensions["Array.containsAll"] = {major: 1, minor: 0, revision: 0, date: new Date(2005,11,20), provider: "http://tiddlywiki.abego-software.de"};
//
Array.prototype.containsAll = function(items) {
for(var i = 0; i < items.length; i++) {
if (!this.contains(items[i])) {
return false;
}
}
return true;
};
} // of "install only once"
// Used Globals (for JSLint) ==============
// ... DOM
/*global document */
// ... TiddlyWiki Core
/*global convertUnicodeToUTF8, createTiddlyElement, createTiddlyLink,
displayMessage, endSaveArea, hasClass, loadFile, saveFile,
startSaveArea, store, wikify */
//}}}
/***
!Licence and Copyright
Copyright (c) abego Software ~GmbH, 2005 ([[www.abego-software.de|http://www.abego-software.de]])
Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:
Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
Redistributions in binary form must reproduce the above copyright notice, this
list of conditions and the following disclaimer in the documentation and/or other
materials provided with the distribution.
Neither the name of abego Software nor the names of its contributors may be
used to endorse or promote products derived from this software without specific
prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
DAMAGE.
***/
From [[Meeting the Informal Learning Challenges of the Free Agent Learner: Drawing Insights from Research-Based Lessons Learned|http://eric.ed.gov/ERICWebPortal/recordDetail?accno=ED441092]]
<<<
Self-directed learning occurs on a just-in-time basis in response to strongly felt challenges situated within highly relevant contexts. At least theoretically, free agent learners are highly self-directed in their learning.
Organizations that want to keep free agent learners motivated and engaged must take the following steps: make time and space for learning; provide mechanisms for continual scanning of the environment; stimulate heightened awareness around learning; build programs around goals and turning points; provide //opportunities for reflection in action//;
<<<
From [[Rules be dammed|http://www.cpasuccess.com/2008/04/rules-be-damned.html]]
<<<
your future employees (a) want to learn at their own pace, in their own space; (b) want to help develop the online content they use; and (c) want control over their own learning environments.
<<<
From Graham Atwell's [[Pontydysgu|http://www.pontydysgu.org/]]
* From the [[FreeFolio roadmap|http://www.pontydysgu.org/2008/02/freefolio-roadmap/]] page:
<<<
;1. Developing a repository
: Integrate a proper (standards based) lightweight document repository for uploading, storing and accessing different digital artefacts (e.g. documents, etc.). The repository will allow users to store different objects, including text, audio, photographs and video, to access and annotate those objects and to report on their wok in different presentation formats. Users will be able to share access to their work with those they choose. The repository will conform to technical standards and will allow users to copy their work to portable media, if they wish. This will facilitate interoperability with other portfolios and learning applications.For instance if a leaner progresses to university they will be able to transfer their work including multimedia objects.
; 2. Reporting views, building blocks
: Develop a system module for allowing users to present achievements - should be flexible and allow multiple ‘views’. The module will provide templates to allow users to easily present different views of their work for different purposes, for instance for supporting job applications, for applications for further courses or as part of their curriculum activities. The templates will provide structures to assist learners in developing their presentations. Users will be able to choose different objects form the portfolio to form part of the presentations. Different presentations can be stored within the portfolio or exported to portable media. Once more users will be able to control with whom they share their presentations.
; 3. Improvements to profile
: Develop system to allow administrator control of profile template. Also examine feasibility of making links between different people with same interests/goals in the user profile. The development of the profile template will make it easy for administrators to customise the template for different installations of the portfolio. The ab9lity to automatically link people with similar interests of similar learning goals will facilitate peer group learning and the development of groupwork. The system will allow learners to find materials and posts relevant to their personal and learning interests of their learning.
; 4. Improvements to the Personal Development Profile (PDP)
: Develop reusable template for PDP process. Allow reviewing and reporting on progress towards goals. Allow view of goals and progress over time. The further development of the Personal Development Profile will allow users to easily view their progress over time, to reflect on that progress and to develop a record. This will assist in developing learners’ abilities for planning and evaluation.
; 5. Improve groups functionality
: Make it easier to form on the fly groups for sharing and collective activities. his will make it possible to develop working areas for different groups of learners, for instance for undertaking shared projects. Work undertaken in groups may be used as part of the presentations as in 2 above.
; 5. Styling, choice of styles.
: Allow users choice of style/design. Research has shown the importance to learners of being able to give their portfolios their own look and feel. We will develop a number of different styles for users to choose from and will facilitate those who are able in developing their own styles.
; 6. Scaling
: Further develop administrative systems to allow easier install and scaling for multiple group use. Develop an installable version of Freefolio which may in future be installed on clients systems if they wish.
<<<
/***
|Name|FullScreenPlugin|
|Created by|SaqImtiaz|
|Location|http://tw.lewcid.org/#FullScreenPlugin|
|Version|1.1|
|Requires|~TW2.x|
!Description:
Toggle between viewing tiddlers fullscreen and normally. Very handy for when you need more viewing space.
!Demo:
Click the ↕ button in the toolbar for this tiddler. Click it again to turn off fullscreen.
!Installation:
Copy the contents of this tiddler to your TW, tag with systemConfig, save and reload your TW.
Edit the ViewTemplate to add the fullscreen command to the toolbar.
!History:
*25-07-06: ver 1.1
*20-07-06: ver 1.0
!Code
***/
//{{{
var lewcidFullScreen = false;
config.commands.fullscreen =
{
text:" ↕ ",
tooltip:"Fullscreen mode"
};
config.commands.fullscreen.handler = function (event,src,title)
{
if (lewcidFullScreen == false)
{
lewcidFullScreen = true;
setStylesheet('#sidebar, .header, #mainMenu{display:none;} #displayArea{margin:0em 0 0 0 !important;}',"lewcidFullScreenStyle");
}
else
{
lewcidFullScreen = false;
setStylesheet(' ',"lewcidFullScreenStyle");
}
}
config.macros.fullscreen={};
config.macros.fullscreen.handler = function(place,macroName,params,wikifier,paramString,tiddler)
{
var label = params[0]||" ↕ ";
var tooltip = params[1]||"Fullscreen mode";
createTiddlyButton(place,label,tooltip,config.commands.fullscreen.handler);
}
var lewcid_fullscreen_closeTiddler = Story.prototype.closeTiddler;
Story.prototype.closeTiddler =function(title,animate,slowly)
{
lewcid_fullscreen_closeTiddler.apply(this,arguments);
if (story.isEmpty() && lewcidFullScreen == true)
config.commands.fullscreen.handler();
}
Slider.prototype.lewcidStop = Slider.prototype.stop;
Slider.prototype.stop = function()
{
this.lewcidStop();
if (story.isEmpty() && lewcidFullScreen == true)
config.commands.fullscreen.handler();
}
//}}}
* Add keywords/tags to everything you create or upload. Helps to organise stuff by RSS feed on the tag
* Make as much as possible public access so that everyone can see what you've been doing.
!!Problems with using Elgg for a group web site
This semester (Fall 07) Judi Hetrick's Journalism 310 class has been using Elgg v0.8 for class blogging ([[EC Blogs|http://blogs.barnabas.earlham.edu]]. She wanted to aggregate student research written up as web pages into a web site rather like last year's [[Intersections: where Earlham meets Richmond|http://www.earlham.edu/~hetriju/jrn/]]. This year however she wants students to create their own web pages and then she will link to them. So, learn ~DreamWeaver, HTML etc in 30 minutes. ARGGG!
I thought that perhaps since they were already using Elgg I could find a way to accomplish the same end but without students having to faff around with HTML and ~DreamWeaver.
!!!My original idea was :
* create a community called Journalism 07 and have that aggregate the student's pages.
* Have the header graphic display across or near the top of the page.
* Have the students write their content as a blog entry and tag it with a known tag, say @@journ07@@
* Open the feed for this tag as a Community RSS feed.
* Insert RSS feed widgets in the Profile, one on the left and the other on the right, which would display the student's pages.
* Viola, neat class site; students don't have to learn ~DreamWeaver and it's all nicely accessible with <web site>/journ07
!!!Problems / Issues
* There was no way of getting the banner graphic to display across the whole page. The nearest I could get was a Profile photo which [[looked naff|graphics/community_profile.png]]<<imagebox>>
* Although there's a link to Manage widgets in the community, try as I might, I could get none of the widgets I wanted to add to 'stick' into the Profile. @@[fall at Hurdle #1]@@
** I found that these widget settings were actually appearing in the ''community owner's'' Profile.
* Displaying a feed using the Feed widget box was a pain. First you have to go to where? Where are the RSS feeds configured. I always forget. Ah yes, "Your Resources". How is that related to RSS feeds?
** assuming that all the students have tagged their blog posting with exactly the same tag (and that's a big 'if') you have to roam around until you discover the correct RSS feed link to copy. Then go back to Your Resources and subscribe.
** nothing appears when you click View content. I think that this is because only new(ish) content is displayed. @@[Fall at Hurdle #2]@@
* You ''can'' use the Text box widget to display a list of links and graphic. But this does ''not'' have the ~TinyMCE WYSWG editor and so you have to enter raw HTML. @@[Suboptimal]@@
* You can also using the blog widget to display a user's blog postings but all the posts get displayed which is not what we want in this case.
>Here's what a mixed up Profile [[looks like|graphics/profile_widget_layout.png]]<<imagebox>>
!!SOLUTION
# Make all students in the class your 'Friends'. You'd want this anyway.
# The students type or copy their content into a blog post. Format it there. Add links, graphics, etc. At the bottom of the posting create a link to the Teacher's Profile page.
# Visit the blog posting and copy the URL to that blog posting (it's permanent).
# In the Text box widget make an HTML link to that blog posting.
# repeat with half of the class's blog entries.
# start a new Text box on the other side of the page.
# repeat with the rest of the class.
!!!!SUSSED
<!--{{{-->
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='editHtml text 600'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<!--}}}-->
/***
| Name|HideWhenPlugin|
| Description|Allows conditional inclusion/exclusion in templates|
| Version|3.0 ($Rev: 1845 $)|
| Date|$Date: 2007-03-16 15:19:22 +1000 (Fri, 16 Mar 2007) $|
| Source|http://mptw.tiddlyspot.com/#HideWhenPlugin|
| Author|Simon Baird <simon.baird@gmail.com>|
| License|http://mptw.tiddlyspot.com/#TheBSDLicense|
For use in ViewTemplate and EditTemplate. Example usage:
{{{<div macro="showWhenTagged Task">[[TaskToolbar]]</div>}}}
{{{<div macro="showWhen tiddler.modifier == 'BartSimpson'"><img src="bart.gif"/></div>}}}
***/
//{{{
window.removeElementWhen = function(test,place) {
if (test) {
removeChildren(place);
place.parentNode.removeChild(place);
}
};
merge(config.macros,{
hideWhen: { handler: function(place,macroName,params,wikifier,paramString,tiddler) {
removeElementWhen( eval(paramString), place);
}},
showWhen: { handler: function(place,macroName,params,wikifier,paramString,tiddler) {
removeElementWhen( !eval(paramString), place);
}},
hideWhenTagged: { handler: function (place,macroName,params,wikifier,paramString,tiddler) {
removeElementWhen( tiddler.tags.containsAll(params), place);
}},
showWhenTagged: { handler: function (place,macroName,params,wikifier,paramString,tiddler) {
removeElementWhen( !tiddler.tags.containsAll(params), place);
}},
hideWhenTaggedAny: { handler: function (place,macroName,params,wikifier,paramString,tiddler) {
removeElementWhen( tiddler.tags.containsAny(params), place);
}},
showWhenTaggedAny: { handler: function (place,macroName,params,wikifier,paramString,tiddler) {
removeElementWhen( !tiddler.tags.containsAny(params), place);
}},
hideWhenTaggedAll: { handler: function (place,macroName,params,wikifier,paramString,tiddler) {
removeElementWhen( tiddler.tags.containsAll(params), place);
}},
showWhenTaggedAll: { handler: function (place,macroName,params,wikifier,paramString,tiddler) {
removeElementWhen( !tiddler.tags.containsAll(params), place);
}},
hideWhenExists: { handler: function(place,macroName,params,wikifier,paramString,tiddler) {
removeElementWhen( store.tiddlerExists(params[0]) || store.isShadowTiddler(params[0]), place);
}},
showWhenExists: { handler: function(place,macroName,params,wikifier,paramString,tiddler) {
removeElementWhen( !(store.tiddlerExists(params[0]) || store.isShadowTiddler(params[0])), place);
}}
});
//}}}
<<top>><<icon up_mocha.png 16 16>>
<<toggleSideBar " " hide>><<icon toggle_mocha.png 16 16>>
<<jump j '' top>><<icon jump_mocha.png 16 16>>
<<saveChanges>><<icon save_mocha.png 16 16>>
<<newTiddler>><<icon new_mocha.png 16 16>>
<<fullscreen f>><<icon full_mocha.png 16 16>>
/***
|Name|HoverMenuPlugin|
|Created by|SaqImtiaz|
|Location|http://tw.lewcid.org/#HoverMenuPlugin|
|Version|1.11|
|Requires|~TW2.x|
!Description:
Provides a hovering menu on the edge of the screen for commonly used commands, that scrolls with the page.
!Demo:
Observe the hovering menu on the right edge of the screen.
!Installation:
Copy the contents of this tiddler to your TW, tag with systemConfig, save and reload your TW.
To customize your HoverMenu, edit the HoverMenu shadow tiddler.
To customize whether the menu sticks to the right or left edge of the screen, and its start position, edit the HoverMenu configuration settings part of the code below. It's well documented, so don't be scared!
The menu has an id of hoverMenu, in case you want to style the buttons in it using css.
!Notes:
Since the default HoverMenu contains buttons for toggling the side bar and jumping to the top of the screen and to open tiddlers, the ToggleSideBarMacro, JumpMacro and the JumpToTopMacro are included in this tiddler, so you dont need to install them separately. Having them installed separately as well could lead to complications.
If you dont intend to use these three macros at all, feel free to remove those sections of code in this tiddler.
!To Do:
* rework code to allow multiple hovering menus in different positions, horizontal etc.
* incorporate code for keyboard shortcuts that correspond to the buttons in the hovermenu
!History:
*03-08-06, ver 1.1.2: compatibility fix with SelectThemePlugin
*03-08-06, ver 1.11: fixed error with button tooltips
*27-07-06, ver 1.1 : added JumpMacro to hoverMenu
*23-07-06
!Code
***/
/***
start HoverMenu plugin code
***/
//{{{
config.hoverMenu={};
//}}}
/***
HoverMenu configuration settings
***/
//{{{
config.hoverMenu.settings={
align: 'right', //align menu to right or left side of screen, possible values are 'right' and 'left'
x: 1, // horizontal distance of menu from side of screen, increase to your liking.
y: 158 //vertical distance of menu from top of screen at start, increase or decrease to your liking
};
//}}}
//{{{
//continue HoverMenu plugin code
config.hoverMenu.handler=function()
{
if (!document.getElementById("hoverMenu"))
{
var theMenu = createTiddlyElement(document.getElementById("contentWrapper"), "div","hoverMenu");
theMenu.setAttribute("refresh","content");
theMenu.setAttribute("tiddler","HoverMenu");
var menuContent = store.getTiddlerText("HoverMenu");
wikify(menuContent,theMenu);
}
var Xloc = this.settings.x;
Yloc =this.settings.y;
var ns = (navigator.appName.indexOf("Netscape") != -1);
function SetMenu(id)
{
var GetElements=document.getElementById?document.getElementById(id):document.all?document.all[id]:document.layers[id];
if(document.layers)GetElements.style=GetElements;
GetElements.sP=function(x,y){this.style[config.hoverMenu.settings.align]=x +"px";this.style.top=y +"px";};
GetElements.x = Xloc;
GetElements.y = findScrollY();
GetElements.y += Yloc;
return GetElements;
}
window.LoCate_XY=function()
{
var pY = findScrollY();
ftlObj.y += (pY + Yloc - ftlObj.y)/15;
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("LoCate_XY()", 10);
}
ftlObj = SetMenu("hoverMenu");
LoCate_XY();
};
window.old_lewcid_hovermenu_restart = restart;
restart = function()
{
window.old_lewcid_hovermenu_restart();
config.hoverMenu.handler();
};
setStylesheet(
"#hoverMenu .imgLink, #hoverMenu .imgLink:hover {border:none; padding:0px; float:right; margin-bottom:2px; margin-top:0px;}\n"+
"#hoverMenu .button, #hoverMenu .tiddlyLink {border:none; font-weight:bold; background:#18f; color:#FFF; padding:0 5px; float:right; margin-bottom:4px;}\n"+
"#hoverMenu .button:hover, #hoverMenu .tiddlyLink:hover {font-weight:bold; border:none; color:#fff; background:#000; padding:0 5px; float:right; margin-bottom:4px;}\n"+
"#hoverMenu .button {width:100%; text-align:center}"+
"#hoverMenu { position:absolute; width:7px;}\n"+
"\n","hoverMenuStyles");
config.macros.renameButton={};
config.macros.renameButton.handler = function(place,macroName,params,wikifier,paramString,tiddler)
{
if (place.lastChild.tagName!="BR")
{
place.lastChild.firstChild.data = params[0];
if (params[1]) {place.lastChild.title = params[1];}
}
};
config.shadowTiddlers["HoverMenu"]="<<top>>\n<<toggleSideBar>><<renameButton '>' >>\n<<jump j '' top>>\n<<saveChanges>><<renameButton s 'Save TiddlyWiki'>>\n<<newTiddler>><<renameButton n>>\n";
//}}}
//end HoverMenu plugin code
//Start ToggleSideBarMacro code
//{{{
config.macros.toggleSideBar={};
config.macros.toggleSideBar.settings={
styleHide : "#sidebar { display: none;}\n"+"#contentWrapper #displayArea { margin-right: 1em;}\n"+"",
styleShow : " ",
arrow1: "«",
arrow2: "»"
};
config.macros.toggleSideBar.handler=function (place,macroName,params,wikifier,paramString,tiddler)
{
var tooltip= params[1]||'toggle sidebar';
var mode = (params[2] && params[2]=="hide")? "hide":"show";
var arrow = (mode == "hide")? this.settings.arrow1:this.settings.arrow2;
var label= (params[0]&¶ms[0]!='.')?params[0]+" "+arrow:arrow;
var theBtn = createTiddlyButton(place,label,tooltip,this.onToggleSideBar,"button HideSideBarButton");
if (mode == "hide")
{
(document.getElementById("sidebar")).setAttribute("toggle","hide");
setStylesheet(this.settings.styleHide,"ToggleSideBarStyles");
}
};
config.macros.toggleSideBar.onToggleSideBar = function(){
var sidebar = document.getElementById("sidebar");
var settings = config.macros.toggleSideBar.settings;
if (sidebar.getAttribute("toggle")=='hide')
{
setStylesheet(settings.styleShow,"ToggleSideBarStyles");
sidebar.setAttribute("toggle","show");
this.firstChild.data= (this.firstChild.data).replace(settings.arrow1,settings.arrow2);
}
else
{
setStylesheet(settings.styleHide,"ToggleSideBarStyles");
sidebar.setAttribute("toggle","hide");
this.firstChild.data= (this.firstChild.data).replace(settings.arrow2,settings.arrow1);
}
return false;
}
setStylesheet(".HideSideBarButton .button {font-weight:bold; padding: 0 5px;}\n","ToggleSideBarButtonStyles");
//}}}
//end ToggleSideBarMacro code
//start JumpToTopMacro code
//{{{
config.macros.top={};
config.macros.top.handler=function(place,macroName)
{
createTiddlyButton(place,"^","jump to top",this.onclick);
}
config.macros.top.onclick=function()
{
window.scrollTo(0,0);
};
config.commands.top =
{
text:" ^ ",
tooltip:"jump to top"
};
config.commands.top.handler = function(event,src,title)
{
window.scrollTo(0,0);
}
//}}}
//end JumpToStartMacro code
//start JumpMacro code
//{{{
config.macros.jump= {};
config.macros.jump.handler = function (place,macroName,params,wikifier,paramString,tiddler)
{
var label = (params[0] && params[0]!=".")? params[0]: 'jump';
var tooltip = (params[1] && params[1]!=".")? params[1]: 'jump to an open tiddler';
var top = (params[2] && params[2]=='top') ? true: false;
var btn =createTiddlyButton(place,label,tooltip,this.onclick);
if (top==true)
btn.setAttribute("top","true")
}
config.macros.jump.onclick = function(e)
{
if (!e) var e = window.event;
var theTarget = resolveTarget(e);
var top = theTarget.getAttribute("top");
var popup = Popup.create(this);
if(popup)
{
if(top=="true")
{createTiddlyButton(createTiddlyElement(popup,"li"),'Top ↑','Top of TW',config.macros.jump.top);
createTiddlyElement(popup,"hr");}
story.forEachTiddler(function(title,element) {
createTiddlyLink(createTiddlyElement(popup,"li"),title,true);
});
}
Popup.show(popup,false);
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
return false;
}
config.macros.jump.top = function()
{
window.scrollTo(0,0);
}
//}}}
//end JumpMacro code
//utility functions
//{{{
Popup.show = function(unused,slowly)
{
var curr = Popup.stack[Popup.stack.length-1];
var rootLeft = findPosX(curr.root);
var rootTop = findPosY(curr.root);
var rootHeight = curr.root.offsetHeight;
var popupLeft = rootLeft;
var popupTop = rootTop + rootHeight;
var popupWidth = curr.popup.offsetWidth;
var winWidth = findWindowWidth();
if (isChild(curr.root,'hoverMenu'))
var x = config.hoverMenu.settings.x;
else
var x = 0;
if(popupLeft + popupWidth+x > winWidth)
popupLeft = winWidth - popupWidth -x;
if (isChild(curr.root,'hoverMenu'))
{curr.popup.style.right = x + "px";}
else
curr.popup.style.left = popupLeft + "px";
curr.popup.style.top = popupTop + "px";
curr.popup.style.display = "block";
addClass(curr.root,"highlight");
if(config.options.chkAnimate)
anim.startAnimating(new Scroller(curr.popup,slowly));
else
window.scrollTo(0,ensureVisible(curr.popup));
}
window.isChild = function(e,parentId) {
while (e != null) {
var parent = document.getElementById(parentId);
if (parent == e) return true;
e = e.parentNode;
}
return false;
};
//}}}
<<slideShow noClicks forceRefresh clock:'+' style:'SlideShowStyleSheet' noOverlays>>
-s-
!Social Learning for the Digital Native Generation
;by:
: Mark H Pearson ~BSc (Zoology), ~PhD (Entomology), ~MSc (Computer Science) & CDM (Cadbury's Dairy Milk) Earlham College Instructional Technologist
<<tiddlerbox "Control slideshow" "SlideshowOperation" "How to use the slideshow controls" 420 240>>
-s-
!Disclaimer
* This slideshow has a ''zero Microsoft footprint''.
* no Powerpoint was harmed in the production of these slides
-s-
<<tiddler Abstract>>
-s-
<<tiddler [[ICI Summit keynote notes]]>>
-s-
<<tiddler [[Why and wherefore]]>>
-s-
<<tiddler [[The works]]>>
-s-
!!Content for Web presence
+++!!![Dynamic content|blogging system]
Featuring:
* Easy to write and format (WYSWG interface). Spell checker.
* Easy to embed media from within or outside of system, eg own photos, Youtube clips
* System wide tags (keywords)
* ''control access to individual blog entries'' -- see [[Access / sharing]]
* Commenting can be restricted to within the site. Protects against spam.
** Akismet spam protection can also be used if open comments are desirable.
* Blog categories can be listed in sidebar
* RSS feeds for blog entries and comments (see Information Flow)
<<miniBrowser http://blogs.frumentius.earlham.edu/ieseidm06/weblog/>>
===
+++!!![Static pages|Folio wiki system]
* 'Personal wiki' with WYSWYG interface.
* Add references to blog entries and uploaded files, including graphics
* can 'reflect' on referenced links -- ideal for portfolio purposes.
* control access to individual pages
* move pages around easily
* extremely [[cool sidebar display|graphics/folio_sidebar_display.png]]<<imagebox>> makes it easy to explore
<<miniBrowser http://blogs.frumentius.earlham.edu/gpe/page/Home+Page>>
===
+++!!![File Store|personal files and folders]
-- As with blogs and folio pages, files uploaded are stored in a //personal// space (in contrast to Moodle's course file storage).
* Can create folders and nest folders
* upload and storage limits
* types of folder indicate media content (eg photo gallery)
* access restrictions and keywords/tags on folders as well as files
* description and titles constitute crude metadata. Possible to formalise this.
* users have to assert ownership or legal right to share uploaded files.
===
-s-
!!Access / Sharing
What makes Elgg unique is it's access control system. All elgg content items such as blog posting, uploaded file, folder, etc, have access restrictions associated with them.
+++!!![General controls]
* Public -- open access to anyone on the web. Typically, this is what most blogging systems default to. It's desirable that most blog posts and folio pages have public access. RSS feeds only contain content made public.
* Logged in users -- only viewable by users logged in to the system. This is often set to be the default permission for blog postings.
* Private -- only the owner can view. Private postings or todo lists are possible.
===
+++!!![Customisable controls]
;friends :
: makes content visible only to people on your 'friends' list (also 'block this person' link)
; community :
: each elgg community has it's own access control right (see [[Connections / communication]]). Thus setting a blog entry or file to //Community : Future of News// for example, will allow only members of that community to view the posting.
; Access control group :
: here you can create arbitrary groups and add the names of friends to them. For each content item you can then set visibility (access) to the group you specify. (In Connections/Network : Access controls). [[screenshot|graphics/access_control_group.png]]<<imagebox>>
===
-s-
!!Connections / communication
+++!!![Friend]
You make connections within the system by //friending// someone. Friends form the basis of all the specific connections that you make, eg messaging, access groups, etc. Friending merely involves going to a person's profile and clicking on 'add this user as a friend'. You can set friendship moderation so that all friend requests have to be approved by you. Friending will be reciprocal so that if someone 'friends' you, you will automatically 'friend' them back.
===
+++!!![Community]
A community is basically a collection of Elgg users who share a blog, folio and file space. Anyone can create a community and joining a community is moderated in the same way as making a friend. Once a community has it's desired members it can be set to private. Access to content can be set to community members. The community has it's own name and a unique URL allowing direct access. Great potential for group work.
<<miniBrowser http://eduspaces.net/moodlevan/weblog>>
===
+++!!![Active Communication]
; Messaging
: An internal message system allows you to send short messages to your Friends or community. An account setting will enable these to be transmitted to your email address. Notification of friend requests is done via the messge system.
; Comment wall
: one of the widgets in the extended profile is the comment wall which is open to all.
; Shouts
: Want to tell the world how you're feeling? Shout it out!
; Status
; Announce what you're currently up to. Reading a book? Studying for exam? People want to know.
===
-s-
<<tiddler Profile>>
-s-
!! Information flow/ RSS feeds
; Producing RSS:
: RSS feeds are produced by almost every source and are indicated by [img[graphics/rss_feed_icon.png]]. Note that only public access items such as blog posts can go into an RSS feed -- everything else requires authentication on the feed.
; Recycling /aggregating RSS:
: Using Feeds/Your resources you can subscribe to external RSS feeds (when it works!). You can also take an RSS feed from a source you own and pipe it into your blog (Publish to blog). You can maintain a Tiddlywiki and pipe the output into your blog. [[screenshot|graphics/feeds_display.png]]<<imagebox>>
-s-
<<tiddler [[Optional plugins]]>>
-s-
!!Using Earlham Learning Spaces with a class
I interviewed Ana Cornide, a new Spanish teacher at Earlham, to ask her about her experiences using the Earlham Learning Spaces (Elgg).
+++!!![1. Why did you want to use a blog with your class?]
Basically, Ana said that she was not clear about blogging until I showed her the Earlham Learning Spaces system.
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/1.why_blog.mp3" width="100" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/1.why_blog.mp3"/>
</object> <span>0:29</span>
</html>
===
+++!!![2. How did you use Earlham Learning Spaces?]
* the students had to watch a movie every week and write a review which they posted to their blog.
** [they were also ask to tag the blog entry with a keyword for the film so that all the posting for that tag could be seen]
* they were able to see blog entries and develop ideas and be aware of each other's writing
* improvements in grammatical expression and ideas
* students found one major review per week plus comments was exhausting
* marked and visible improvement in writing over the semester.
* especially good for 2^^nd^^ language acquisition.
* when making comments on each other's work students can easily see quality writing. Of great benefit pedgogically.
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/2.how_used.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/2.how_used.mp3"/>
</object><span>2:59</span>
</html>
===
+++!!![3. Commenting]
* students wrote comments on each other's blog postings.
* they were required to write three per week but they often wrote more. They did feel valued with these.
* Ana read all the comments and fed her remarks back to the students. Good pedagogy.
===
+++!!![4. Friends]
* Earlham learning spaces seemed to be 'friendly'
* Similar in feel to Facebook -- comfortable space
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/3.friends.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/3.friends.mp3"/>
</object><span>0:35</span>
</html>
===
+++!!![5. A social learning community]
* environment that's comfortable, safe and friendly
* students are vulnerable -- become a community
* exposing their creations to others -- trust others
* develop a ''learning community'' inside and outside the class
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/4.facebook_comparison.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/4.facebook_comparison.mp3"/>
</object><span>2:51</span>
</html>
===
+++!!![6. Use it again?]
* ''yes''
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/5.use_again.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/5.use_again.mp3"/>
</object><span>0:11</span>
</html>
===
+++!!![7. Postscript -- personal pictures]
* value of personal pictures (avatars)
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/6.personal_pictures.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/6.personal_pictures.mp3"/>
</object><span>0:53</span>
</html>
===
+++!!![8. Tagging]
Tagging was useful to aggregate all the blog postings for a particular film:
<<miniBrowser http://blogs.frumentius.earlham.edu/search/index.php?weblog=danzon>>
===
-s-
!!Pedagogical uses of Els
+++!!![Summary of advantages]
* shallow learning curve. Easy to get started.
* personal space -- files are stored in your own domain
* Familiar concepts such as 'friending'
* easy to explore (and get lost!)
* system-wide tagging/keywords helps make connections
* no need for expensive and difficult to use client software (eg Dreamweaver) to get going on the web.
* access controls add to the level of trustiness
===
+++!!![General areas]
; group research :
: the community feature makes genuine group research possible. Group wiki pages are easy with Folio. File space is owned by the community and can be controlled to community access only (unlike other wikis and blogs). Community blog records individual contributors. Profile area can be used to describe the aims or goals of the group.
; reflective commentary
: this is expanded further in my [[Interview with Ana Cornide]]
; eportfolio of academic development.
: this is a major area of interest. See MUG(Moodle Users Group) presentation.
===
+++!!![Formal uses]
* Class blogging. Value not to be underestimated.
* eportfolio -- integration with Moodle
* Student clubs (Earlham Volunteer Exchange)
* Shared documentation space (ECS)
* Community wiki -- Graduate programs in Education. Open access content:
<<miniBrowser http://blogs.frumentius.earlham.edu/gpe/page/Home+Page>>
===
-s-
!!Trying out Elgg
* There is a vibrant Elgg developer community based at [[http://classic.elgg.org]]
* [[Eduspaces|http://eduspaces.net/]] is a free to join elgg system which attracts activity from all over the world. My [[Moodle Vanguard|http://eduspaces.net/moodlevan/weblog]] community runs from here.
* If you want to run your own Elgg service without having to host it yourself, try [[GlieseConnect.com's Elgg promotion|http://glieseconnect.com/elgg.aspx]]. For $60 a year (a bargain!) they provide an Elgg install which you can customize or not and you don't have to worry about backups!
* Elgg is quite big in the UK. I am a member of the [[UK Elgg user group|http://community.brighton.ac.uk/elgguser/weblog/]] hosted at Sussex University, Brighton
-s-
!!Free Agent Learner
+++!!![Content]
** blog
** wiki
** aggregation : RSS
** social bookmarks
** media sharing
** photo gallery
===
+++!!![Culture]
* Liberal Arts culture -- //within// the Learning Space
===
+++!!![Competition]
Branding -- ''Earlham'' Learning Spaces
===
+++!!![Control]
** control learning process
** access controls
===
//{{{
// version: beta 1.1
//replace macro buttons with icons
// params[0] = image location
//params[1] = image width
//params[2] = image height
//params[3] = image title (optional)
config.macros.icon={};
config.macros.icon.handler = function(place,macroName,params,wikifier,paramString,tiddler)
{
if (place.lastChild.tagName!="BR")
{
var tempTitle = place.lastChild.firstChild.title;
removeChildren(place.lastChild);
place.lastChild.className = "imgLink";
var img = createTiddlyElement(place.lastChild,"img");
img.src = params[0];
if (params[3])
img.title = params[3];
img.width= params[1];
img.height =params[2];
}
};
//use icons for toolbar commands.
// used in view template like:
// <span macro='commandIcon jump jump.bmp'></span>
//params[0] = command name
//params[1] = image location
config.macros.commandIcon={};
config.macros.commandIcon.handler = function(place,macroName,params,wikifier,paramString,tiddler)
{if(!e) var e = window.event;
var img = createTiddlyElement(place,"img",null,"toolbarImg");
img.src = params[1];
img.onclick = function(){config.commands[params[0]].handler(e,place,story.findContainingTiddler(place).getAttribute("tiddler"));};
img.title = config.commands[params[0]].tooltip;
}
setStylesheet(".toolbarImg {vertical-align: middle; cursor:pointer;}\n","commandIconStyles");
//}}}
!! Information flow/ RSS feeds
; Producing RSS:
: RSS feeds are produced by almost every source and are indicated by [img[graphics/rss_feed_icon.png]]. Note that only public access items such as blog posts can go into an RSS feed -- everything else requires authentication on the feed.
; Recycling /aggregating RSS:
: Using Feeds/Your resources you can subscribe to external RSS feeds (when it works!). You can also take an RSS feed from a source you own and pipe it into your blog (Publish to blog). You can maintain a Tiddlywiki and pipe the output into your blog. [[screenshot|graphics/feeds_display.png]]<<imagebox>>
/***
| Name:|InstantTimestamp|
| Created by:|SimonBaird|
| Location:|http://simonbaird.com/mptw/#InstantTimestamp|
| Version:|1.0.4 (06-Apr-2006)|
| Requires:|~TW2.x|
!Description
If you enter {ts} in your tiddler content (without the spaces) it will be replaced with a timestamp when you save the tiddler. Full list:
* {ts} or {t} -> timestamp
* {ds} or {d} -> datestamp
* !ts or !t at start of line -> !!timestamp
* !ds or !d at start of line -> !!datestamp
(I added the extra ! since that's how I like it. Remove it from translations below if required)
!Notes
* Change the timeFormat and dateFormat below to suit your preference.
* See also AutoCorrectPlugin
!History
* 06-Apr-06, version 1.0.4
** removed the AutoCorrect stuff and put it in AutoCorrectPlugin
* 05-Apr-06, version 1.0.3
** now have exclusion by tag and tiddler name, probably less important here than in AutoCorrectPlugin
* 05-Apr-06, version 1.0.2
** put matches into array to and eval them to allow generic substitutions
* 05-Apr-06, version 1.0.1
** added ds for datestamp as suggested by DanielBaird
** made case insensitive
** Added translation for !t at start of line
* 05-Apr-06, version 1.0.0
** written after suggestion by Achim Wessling
!Code
***/
//{{{
version.extensions.InstantTimestamp = { major: 1, minor: 0, revision: 4, date: new Date(2006,4,6),
source: "http://simonbaird.com/mptw/#InstantTimestamp"
};
config.InstantTimestamp = {
timeFormat: 'DD/0MM/YY 0hh:0mm',
dateFormat: 'DD/0MM/YY',
translations: [
[/^!ts?$/img, "'!!'+now.formatString(config.InstantTimestamp.timeFormat)"],
[/^!ds?$/img, "'!!'+now.formatString(config.InstantTimestamp.dateFormat)"],
[/\{ts?\}/ig, "now.formatString(config.InstantTimestamp.timeFormat)"],
[/\{ds?\}/ig, "now.formatString(config.InstantTimestamp.dateFormat)"]
],
excludeTags: [
"noAutoCorrect",
"CSS",
"css",
"systemConfig",
"zsystemConfig",
"Plugins",
"Plugin",
"plugins",
"plugin",
"javascript",
"code"
],
excludeTiddlers: [
"StyleSheet",
"StyleSheetLayout",
"StyleSheetColors",
"StyleSheetPrint"
]
};
if (!Array.prototype.contains)
Array.prototype.contains = function(item) {
return (this.find(item) != null);
};
if (!Array.prototype.containsAny)
Array.prototype.containsAny = function(items) {
for (var i=0;i<items.length;i++)
if (this.contains(items[i]))
return true;
return false;
};
TiddlyWiki.prototype.saveTiddler_mptw_instanttimestamp = TiddlyWiki.prototype.saveTiddler;
TiddlyWiki.prototype.saveTiddler = function(title,newTitle,newBody,modifier,modified,tags) {
tags = (typeof(tags) == "string") ? tags.readBracketedList() : tags;
var conf = config.InstantTimestamp;
if ( !tags.containsAny(conf.excludeTags)
&& !conf.excludeTiddlers.contains(newTitle) ) {
var now = new Date();
var trans = config.InstantTimestamp.translations;
for (var i=0;i<trans.length;i++) {
newBody = newBody.replace(trans[i][0], eval(trans[i][1]));
}
}
return this.saveTiddler_mptw_instanttimestamp(title,newTitle,newBody,modifier,modified,tags);
}
//}}}
I interviewed Ana Cornide, a new Spanish teacher at Earlham, to ask her about her experiences using the Earlham Learning Spaces (Elgg).
+++!!![1. Why did you want to use a blog with your class?]
Basically, Ana said that she was not clear about blogging until I showed her the Earlham Learning Spaces system.
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/1.why_blog.mp3" width="100" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/1.why_blog.mp3"/>
</object> <span>0:29</span>
</html>
===
+++!!![2. How did you use Earlham Learning Spaces?]
* the students had to watch a movie every week and write a review which they posted to their blog.
** [they were also ask to tag the blog entry with a keyword for the film so that all the posting for that tag could be seen]
* they were able to see blog entries and develop ideas and be aware of each other's writing
* improvements in grammatical expression and ideas
* students found one major review per week plus comments was exhausting
* marked and visible improvement in writing over the semester.
* especially good for 2^^nd^^ language acquisition.
* when making comments on each other's work students can easily see quality writing. Of great benefit pedgogically.
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/2.how_used.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/2.how_used.mp3"/>
</object><span>2:59</span>
</html>
<<miniBrowser http://blogs.frumentius.earlham.edu/jawhite06/weblog/604.html>>
===
+++!!![3. Commenting]
* students wrote comments on each other's blog postings.
* they were required to write three per week but they often wrote more. They did feel valued with these.
* Ana read all the comments and fed her remarks back to the students. Good pedagogy.
===
+++!!![4. Friends]
* Earlham learning spaces seemed to be 'friendly'
* Similar in feel to Facebook -- comfortable space
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/3.friends.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/3.friends.mp3"/>
</object><span>0:35</span>
</html>
===
+++!!![5. A social learning community]
* environment that's comfortable, safe and friendly
* students are vulnerable -- become a community
* exposing their creations to others -- trust others
* develop a ''learning community'' inside and outside the class
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/4.facebook_comparison.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/4.facebook_comparison.mp3"/>
</object><span>2:51</span>
</html>
===
+++!!![6. Use it again?]
* ''yes''
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/5.use_again.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/5.use_again.mp3"/>
</object><span>0:11</span>
</html>
===
+++!!![7. Postscript -- personal pictures]
* value of personal pictures (avatars)
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/6.personal_pictures.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/6.personal_pictures.mp3"/>
</object><span>0:53</span>
</html>
===
+++!!![8. Tagging]
Tagging was useful to aggregate all the blog postings for a particular film:
<<miniBrowser http://blogs.frumentius.earlham.edu/search/index.php?weblog=danzon>>
===
/***
|Name|JumpMacro|
|Created by|SaqImtiaz|
|Location|http://tw.lewcid.org/#JumpMacro|
|Version|1.0|
|Requires|~TW2.x|
!Description:
Macro version of the core jump command, that also provides an optional 'jump to top' button.
!Demo:
click the 'j' button in the hoverMenu on the right.
!Installation:
Copy the contents of this tiddler to your TW, tag with systemConfig, save and reload your TW.
!Usage
{{{<<jump>>}}}<<jump>>
{{{<<jump customlabel customtooltip top>>}}} <<jump customlabel customtooltip top>>
Note: passing the third parameter as top, enables the 'top' button in the dropdown.
!History:
27-07-06, ver1.0
!Code
***/
//{{{
config.macros.jump= {};
config.macros.jump.handler = function (place,macroName,params,wikifier,paramString,tiddler)
{
var label = (params[0] && params[0]!=".")? params[0]: 'jump';
var tooltip = (params[1] && params[1]!=".")? params[1]: 'jump to an open tiddler';
var top = (params[2] && params[2]=='top') ? true: false;
var btn =createTiddlyButton(place,label,tooltip,this.onclick);
if (top==true)
btn.setAttribute("top","true")
}
config.macros.jump.onclick = function(e)
{
if (!e) var e = window.event;
var theTarget = resolveTarget(e);
var top = theTarget.getAttribute("top");
var popup = Popup.create(this);
if(popup)
{
if(top=="true")
{createTiddlyButton(createTiddlyElement(popup,"li"),'Top ↑','Top of TW',config.macros.jump.top);
createTiddlyElement(popup,"hr");}
story.forEachTiddler(function(title,element) {
createTiddlyLink(createTiddlyElement(popup,"li"),title,true);
});
}
Popup.show(popup,false);
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
return false;
}
config.macros.jump.top = function()
{
window.scrollTo(0,0);
}
//}}}
/***
|Name|JumpToTopMacro|
|Created by|SaqImtiaz|
|Location|http://tw.lewcid.org/#JumpToTopMacro|
|Version|1.0|
|Requires|~TW2.x|
!Description:
Provides a toolbar command and a macro, that create a button for quickly jumping to the top of your TW.
Handy to place in the tiddler toolbar (edit the ViewTemplate)
Note: You can add an extra toolbar to the bottom of tiddlers as well with buttons of your choice, to allow easy access to the buttons/commands in it.
!Demo:
{{{<<top>>}}}<<top>>
!Installation:
Copy the contents of this tiddler to your TW, tag with systemConfig, save and reload your TW.
!History:
*23-07-06: ver 1.0
!Code
***/
//{{{
config.macros.top={};
config.macros.top.handler=function(place,macroName)
{
createTiddlyButton(place,"^","jump to top",this.onclick);
}
config.macros.top.onclick=function()
{
window.scrollTo(0,0);
};
config.commands.top =
{
text:" ^ ",
tooltip:"jump to top"
};
config.commands.top.handler = function(event,src,title)
{
window.scrollTo(0,0);
}
//}}}
!Online Learning Framework for Digital Natives
!!Components
* students as learning peers
** faculty as learning mentors (as opposed to "sage on the stage")
* empowering true collaboration
* audience [[why this matters]]:
** primary : within institution
** secondary : complete web
* sense of identity. Comfort level within institution.
** //Earlham// space
* familiar concepts / processes from social networking sites (eg Facebook) established in an intentional learning environment.
* transformation of digital consumer to digital creator
''Open Source Licence''
VisualTW and TiddlyWiki are published under a BSD [[open source license|http://en.wikipedia.org/wiki/Open_source_license]]. This gives you the freedom to use it pretty much however you want, including for commercial purposes, as long as you keep the copyright notice. If you do use stuff from this page a link back to http://visualtw.ouvaton.org/VisualTW.html and to http://www.tiddlywiki.com/ is appreciated.
+++!!![What is Mahara|Introductory spiel about Mahara]
<<<
Established in 2006, [[Mahara|http://www.mahara.org/]] is the result of a collaborative venture funded by New Zealand's Tertiary Education Commission's e-learning Collaborative Development Fund (eCDF), involving Massey University, Auckland University of Technology, The Open Polytechnic of New Zealand and Victoria University of Wellington.
Mahara is a fully featured open source electronic portfolio, weblog, resume builder and social networking system, connecting users and creating online communities. Mahara is designed to provide users with the tools to demonstrate their life-long learning, skills and development over time to selected audiences.
Meaning 'think' or 'thought' in Te Reo Māori, the name reflects the project's dedication to creating a user-centred life-long learning and development application as well as the belief that technology solutions cannot be developed outside the considerations of pedagogy and policy.
<<<
* [[Introduction|http://www.mahara.org/wiki/En/Introduction]] to Mahara explains what 'Views' are and how Mahara fits into the e-learning landscape.
===
+++!!![Quick Tour]
[img[graphics/mahara_my_profile.png][graphics/mahara_Profile.png]]<<imagebox>>
[img[graphics/mahara_my_portfolio.png]] +++[ ]
!!!Blogs
<<tiddler [[Blogging with Mahara]]>>
!!!Views
<<tiddler [[Mahara Views]]>>
===
[img[graphics/mahara_my_groups.png]]
[img[graphics/mahara_my_settings.png]]
===
+++!!![Features]
[[Features|http://www.mahara.org/features]]
* +++[Views]>
What makes Mahara different from other ePortfolio systems is that you control which items and what information (Artefacts) within your portfolio other users see.
In order to facilitate this access control, all Artefacts you wish to show to other users need to be bundled up and placed into one area. Within Mahara this compilation of selected Artefacts is called a View.
You can have as many Views as you like, each with a different collection of Artefacts, and intended purpose and audience. Your audience, or the people you wish to give access to your View, can be added as individuals or as a member of a Group or Community.
===
* +++[File repository]>
Mahara includes a file repository which allows users to:
* Create folder and sub folders structures
* Upload multiple files quickly and efficiently
* Give each file a Name and Description
* Manage their file allocation Quota
* When uploading a file users must agree to a configurable Copyright disclaimer.
===
* +++[Blogs]>
A comprehensive blogging tool is provided in Mahara, where blogs and blog postings are considered Artefacts and may be added to a View.
The blogging tool allows users to:
* Create blog posts using a WYSIWYG editor
* Attach files to posts
* Embed images into postings
* Configure whether or not Comments may be received on their blog
* Create draft postings for later publishing
===
* +++[Social Networking]>
Mahara provides a social networking facility where users can create and maintain a list of Friends within the system. ePortfolio owners choose whether other users can add them to their Friends list automatically or by request and approval.
An ePortfolio owner's Friends lists shows those Views to which they have been assigned access.
===
* +++[Résumé Builder]>
Mahara includes a résumé builder which allows users to create digital CV’s by entering information into a variety of optional fields including:
* Contact and personal information
* Employment and education history
* Certifications, accreditations and awards
* Books and publications, professional memberships
* Personal, academic and work skills and
* Personal, academic and career goals
===
* +++[Profile Information]>
Within Mahara users are able to share details through a variety of optional profile information fields including:
* Preferred Name
* Student ID
* Postal address and contact phone numbers
* Skype, MSN, Yahoo & Yabber name
* Introduction
* Profile Icons images
===
* +++[Metadata]>
All Artefacts have metadata which includes:
* Title
* Artefact Type
* Owner
* (Optional) Description
* Date of creation
* Date of last modification
* File size or number of posts (blogs)
Mahara also provides user defined, searchable tags on all Artefacts.
===
===
+++!!![Comments]
* [[Development Roadmap|https://eduforge.org/wiki/wiki/mahara/wiki?pagename=Mahara%20Development%20Roadmap]] and [[here|http://www.mahara.org/roadmap]]. Version 1.0 beta was released on 14-Feb-08 [[Release notes|http://www.mahara.org/wiki/En/Release_Notes]] and can be downloaded from [[this page|http://www.mahara.org/wiki/En/Get_Mahara]]
* [[Documentation|http://www.mahara.org/wiki/En]] is spartan, especially the install documentation - not to be tackled unless you have installed other Open Source apps on Linux.
* The [[Support forums|http://www.mahara.org/forum]] show that the Mahara user community is still quite small.
===
+++!!![Other documents]
* [[Introduction to Mahara (pdf)|modules/Introduction to Mahara_doc.pdf]]
* [[Introduction to Mahara -- Powerpoint pdf|modules/Introduction to Mahara PPT.pdf]]
* [[Mahara manual (pdf)|mahara_manual.pdf]]
===
''//Views//'' in Mahara are roughly equivalent to //access controls// in Elgg. The difference is that whereas in Elgg each "object" (eg blog posting, file, etc) has an access control assigned to it, a Mahara 'View' exists at a higher level.
Thus a View //groups together// an arbitrary collection of "artifacts" and assigns to this collection an access control which can have time limits as well (!). Here's how it works:
# select [[My Portfolios --> Views : Create|graphics/mahara_create_view_1.png]]<<imagebox>> Note slick tagging help.
# add [[artifacts|graphics/mahara_view.png]]<<imagebox>>
# impress [[access permissions|graphics/mahara_view_access_dates.png]]<<imagebox>> including date window for access
# change [[your View|graphics/mahara_My_views.png]]<<imagebox "spot the URL. Can you figure out how to get the URL for your View?">> at any point
You can create an unlimited number of Views and they are extremely flexible. It remains to be seen whether users take to this approach.
[[AECT: Social Networking presentation|New Horizons in Social Networking : Earlham Learning Spaces]]
+++!!![ICI presentation|Independent Colleges Indiana]
May 22 : Earlham College
Aug 8 : ~DePauw Uni
[[Earlham Learning Spaces|ICI : Earlham Learning Spaces]]
presentation content: <<tag ICI>>
===
+++!!![NITLE presentations]
2-3 June : Instructional Technologists Conference
[[Flying under the Radar|NITLE: Instructional Technologists Conference]]
11-13 June : Moodle User's Conference
[[ePortfolios|NITLE Moodle Users Group conference]]
===
<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml'/>
<!--}}}-->
<style type="text/css">#contentWrapper {display:none;}</style><div id="SplashScreen" style="border: 3px solid #ccc; display: block; text-align: center; width: 320px; margin: 100px auto; padding: 50px; color:#000; font-size: 28px; font-family:Tahoma; background-color:#eee;"><b>Learning Spaces Wiki</b> is loading<blink> ...</blink><br><br><span style="font-size: 14px; color:red;">Requires Javascript.</span></div>
Ilana Seidman blog
http://els.earlham.edu/ieseidm06/weblog/
----
Example of graphic & Youtube player
http://els.earlham.edu/jawhite06/weblog/604.html
----
All blog posts with tag 'Danzon'
http://els.earlham.edu/search/index.php?weblog=danzon
----
Instructional Tech Collaborative @ Earlham Learning Spaces
https://els.earlham.edu/itc/weblog/
----
Wall to wall
https://els.earlham.edu/mod/commentwall/walltowall.php?owner=143&other=189&return_url=%2Fmmrice06%2F
----
Juxtaposition of posts
https://els.earlham.edu/mmrice06/weblog/
----
Moodle Vanguard community @ Eduspaces
http://eduspaces.net/moodlevan/weblog
----
New version Elgg 1.1
http://barnabas.lly.earlham.edu/elgg11/
----
MAT: Graduate Programs in Education
http://els.earlham.edu/gpe/page/Home+Page
----
Community@Brighton
http://community.brighton.ac.uk/elgguser/weblog/
----
/***
|Name|MiniBrowserPlugin|
|Source|http://www.TiddlyTools.com/#MiniBrowserPlugin|
|Version|1.2.1|
|Author|Eric Shulman - ELS Design Studios|
|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|PlayerPlugin (optional, recommended)|
|Overrides||
|Options|##Configuration|
|Description|embedded browser-in-browser with favorites lists and media support|
!!!!!Usage
<<<
{{{<<miniBrowser noplayer hidecontrols URL TiddlerName TiddlerName TiddlerName...>>}}}
* ''noplayer'' (optional)<br>disables support for embedded media player (using [[PlayerPlugin]], if installed)
* ''hidecontrols'' (optional)<br>hide initial display of minibrowser controls (except for 'show controls' checkbox)<br>//note: if no initial URL is specified, controls will be shown anyway//
* ''URL'' (optional)<br>specifies an initial URL to open when the mini browser is rendered
* ''TiddlerName'', ''TiddlerName''... (optional)<br>indicates one or more tiddlers containing "HR-separated" lists of favorites.<br>//notes: if no tiddler is specified, [[MiniBrowserList]] is used by default. In addition, when adding/deleting favorites, the plugin automatically updates [[MiniBrowserList]], regardless of any alternative lists of favorites stored in separate tiddlers. After changes to [[MiniBrowserList]] are made, you can then use cut/paste to manually move entries from that tiddler into other tiddlers.//
<<<
!!!!!Configuration
<<<
Default mini browser size:
width: <<option txtMiniBrowserWidth>> height: <<option txtMiniBrowserHeight>>
<<<
!!!!!Example
>{{{<<miniBrowser>>}}}<br>{{smallform small{<<miniBrowser>>}}}
>{{{<<miniBrowser hidecontrols http://www.TiddlyWiki.com>>}}}<br>{{smallform small{<<miniBrowser hidecontrols http://www.TiddlyWiki.com>>}}}
!!!!!Revisions
<<<
2008.04.07 [1.2.1] added txtMiniBrowserWidth and txtMiniBrowserHeight. cleanup init handling (somewhat)
2008.04.06 [1.2.0] added support for specifying initial URL to view (suggested by Richard Berg). When opening a URL, select matching entry (if any) in bookmarks droplist. Added support for hiding minibrowser controls.
2008.01.19 [1.1.0] added support for optional extra favorites lists stored in separate tiddlers
2007.10.15 [1.0.0] combined MiniBrowser and MediaCenter inline scripts and converted to true plugin
2006.03.01 [0.0.0] inline script
<<<
!!!!!Code
***/
//{{{
version.extensions.MiniBrowser={major: 1, minor: 2, revision: 1, date: new Date(2008,4,6)};
//}}}
//{{{
config.shadowTiddlers.MiniBrowser="<<miniBrowser>>";
//}}}
//{{{
if (config.options.txtMiniBrowserWidth==undefined) config.options.txtMiniBrowserWidth="100%";
if (config.options.txtMiniBrowserHeight==undefined) config.options.txtMiniBrowserHeight="480";
//}}}
//{{{
config.macros.miniBrowser= {
favoritesList:
"MiniBrowserList",
handler: function(place,macroName,params,wikifier,paramString,tiddler) {
var noPlayer=params[0]&¶ms[0].toLowerCase()=="noplayer"; if (noPlayer) params.shift();
if (!config.macros.player) noPlayer=true; // if PlayerPlugin not installed
var hideControls=params[0]&¶ms[0].toLowerCase()=="hidecontrols"; if (hideControls) params.shift();
var url=(params[0]&&!store.tiddlerExists(params[0]))?params.shift():"";
hideControls=hideControls&&url.length; // if no initial URL, then show controls anyway
var w=config.options.txtMiniBrowserWidth;
var h=config.options.txtMiniBrowserHeight;
// create form
var guid=new Date().getTime()+Math.random().toString(); // globally unique ID
var html=this.html;
html=html.replace(/%id%/g,guid);
html=html.replace(/%noplayer%/g,noPlayer?"true":"");
html=html.replace(/%hidecontrols%/g,hideControls?"none":"block");
html=html.replace(/%favorites%/g,params[0]||config.macros.miniBrowser.favoritesList);
createTiddlyElement(place,"span").innerHTML=html;
// init form
document.getElementById("minibrowser_controls_"+guid).style.display=hideControls?"none":"block";
document.getElementById("minibrowser_resize_"+guid).style.display=hideControls?"none":"block";
document.getElementById("minibrowser_togglecontrols_"+guid).checked=!hideControls;
document.getElementById("minibrowser_form_"+guid).url.value=url;
document.getElementById("minibrowser_form_"+guid).w.value=w;
document.getElementById("minibrowser_form_"+guid).h.value=h;
if (noPlayer) { // hide "type" list no PlayerPlugin
document.getElementById("minibrowser_type_"+guid).style.display="none";
document.getElementById("minibrowser_url_"+guid).style.width="36%";
}
// load bookmarks droplist from HR-separated tiddler contents
var b=document.getElementById("minibrowser_bookmarks_"+guid);
while (b.options[1]) b.options[1]=null; // clear list but leave 'prompt' item
var p; while (p=params.shift()) this.getFavorites(b,p); // load custom bookmarks
if (b.length<2) this.getFavorites(b,config.macros.miniBrowser.favoritesList); // default list
// load initial URL (if any)
var place=document.getElementById("minibrowser_player_"+guid);
this.load(place,guid,"","",w,h,true,noPlayer);
this.go(document.getElementById("minibrowser_form_"+guid));
},
getFavorites: function(list,tid) {
var txt=store.getTiddlerText(tid); if (!txt||!txt.trim().length) return;
var parts=txt.split("\n----\n");
for (var p=0; p<parts.length; p++) {
var lines=parts[p].split("\n");
var label=lines.shift()||""; // 1st line=display text
var value=lines.shift()||""; // 2nd line=item value
var indent=value&&value.length?"\xa0\xa0":"";
list.options[list.length]=new Option(indent+label,value,false,false);
}
},
load: function(place,id,type,url,w,h,showcontrols,noPlayer) {
if (noPlayer) {
if (!place) place=document.getElementById(id).parentNode;
place.innerHTML="<iframe name='"+id+"' id='"+id+"' \
src='"+url+"' width='"+w+"' height='"+h+"' \
style='background:#fff;border:1px solid'></iframe>"
} else
config.macros.player.loadURL(place,id,type,url,w,h,showcontrols);
},
go: function(f) {
var url=f.url.value.trim();
if (!url.length) url=f.url.value=f.bookmarks.value.trim();
if (!url.length) { this.done(f); return false; }
var id=f.playerID.value;
document.getElementById("minibrowser_player_"+id).style.display="block";
document.getElementById("minibrowser_controls2_"+id).style.display="block";
this.load(null,id,f.type.value,f.url.value,f.w.value,f.h.value,f.ctrls.checked,f.noPlayer.value=="true");
var matched=false; for (var i=0; i<f.bookmarks.options.length; i++) // select matching bookmark
if (f.bookmarks.options[i].value==url) { f.bookmarks.selectedIndex=i; matched=true; break; }
if (!matched) f.bookmarks.selectedIndex=0;
f.done.disabled=false;
return false;
},
done: function(f) {
var id=f.playerID.value;
this.load(null,id,null,null,f.w.value,0,f.ctrls.checked,f.noPlayer.value=="true");
document.getElementById("minibrowser_player_"+id).style.display="none";
document.getElementById("minibrowser_controls2_"+id).style.display="none";
f.done.disabled=true;
return false;
},
fit: function(place) {
var trim=89; // fudge factor to account for the other controls + padding + borders. ADJUST THIS VALUE TO FIT LAYOUT
var t=story.findContainingTiddler(place);
if (!t) { t=place; while (t && t.className!='floatingPanel') t=t.parentNode; } if (!t) return;
var w="100%"; // horizontal stretching via CSS works, but vertical stretching doesn't... so:
var h=t.offsetHeight-trim; // workaround: get containing panel/tiddler height and subtract "trim" height
var f=place.form;
this.load(null,f.playerID.value,f.type.value,f.url.value,w,h,f.ctrls.checked,f.noPlayer.value=="true"); // reload player with new size
place.form.w.value=w; place.form.h.value=h; // update width/height input fields
},
add: function(place,title) {
var v=place.value; if (!v.length) return;
var d=prompt("Please enter a description for\n"+place.value); if (!d || !d.length) return;
var who=config.options.txtUserName;
var when=new Date();
var tid=store.getTiddler(title);
var txt="%0\n%1\n----\n%2".format([d,v,tid?tid.text:""]);
store.saveTiddler(title,title,txt,who,when,tid?tid.tags:[],tid?tid.fields:{});
if (!tid) story.displayTiddler(story.findContainingTiddler(place),title);
else story.refreshTiddler(title,1,true);
var here=story.findContainingTiddler(place);
if (here) story.refreshTiddler(here.getAttribute("tiddler"),1,true);
},
del: function(place,title) {
var v=place.value; if (!v.length) return;
var d=place.options[place.selectedIndex].text; if (!d.length) return;
if (!confirm("Are you sure you want to remove this favorite?\n\n"+d+"\n"+v)) return;
var tid=store.getTiddler(title); if (!tid) return;
var who=config.options.txtUserName;
var when=new Date();
var pat='%0\n%1\n----\n'.format([d.replace(/\xa0/g,''),v]); var re=new RegExp(pat,"i");
var txt=tid.text.replace(re,"");
store.saveTiddler(title,title,txt,who,when,tid?tid.tags:[],tid?tid.fields:{});
story.refreshTiddler(title,1,true);
var here=story.findContainingTiddler(place);
if (here) story.refreshTiddler(here.getAttribute("tiddler"),1,true);
},
html: "<form id='minibrowser_form_%id%' style='display:block;margin:0;padding:0' onsubmit='return config.macros.miniBrowser.go(this);'><!-- \
--><nobr><input type='hidden' name='playerID' value='%id%'><input type='hidden' name='noPlayer' value='%noplayer%'><!-- \
--><div id='minibrowser_controls_%id%' style='display:%hidecontrols%'><!-- \
--><input type='button' value='<' title='back' style='font-size:8pt;width:3%' \
onclick='try{window.frames[\"player_%id%\"].history.go(-1)}catch(e){window.history.go(-1)}' ><!-- \
--><input type='button' value='>' title='forward' style='font-size:8pt;width:3%' \
onclick='try{window.frames[\"player_%id%\"].history.go(+1)}catch(e){window.history.go(+1)}'><!-- \
--><input type='button' value='+' title='refresh'style='font-size:8pt;width:3%' \
onclick='try{window.frames[\"player_%id%\"].location.reload()}catch(e){;}'><!-- \
--><input type='button' value='x' title='stop'style='font-size:8pt;width:3%' \
onclick='window.stop()'><!-- \
--><select name='bookmarks' id='minibrowser_bookmarks_%id%' size='1' style='font-size:8pt;width:20%' \
onchange='this.form.url.value=this.value; return config.macros.miniBrowser.go(this.form);'><!-- \
--><option value=''>bookmarks...</option><!-- \
--></select><!-- \
--><input type='button' value='add' title='add URL to the bookmarks' style='font-size:8pt;width:5%' \
favorites=\"%favorites%\" \
onclick='config.macros.miniBrowser.add(this.form.url,this.getAttribute(\"favorites\"));'><!-- \
--><input type='button' value='del' title='remove URL from the bookmarks' style='font-size:8pt;width:5%' \
favorites=\"%favorites%\" \
onclick='config.macros.miniBrowser.del(this.form.bookmarks,this.getAttribute(\"favorites\"));'><!-- \
--><input type='button' value='edit' title='edit the bookmarks list' style='font-size:8pt;width:5%' \
favorites=\"%favorites%\" \
onclick='story.displayTiddler(null,this.getAttribute(\"favorites\"),2)'><!-- \
--><input type='text' name='url' id='minibrowser_url_%id%' size='60' value='' style='font-size:8pt;width:23%' \
onfocus='this.select()'><!-- \
--><select name='type' id='minibrowser_type_%id%' size='1' style='font-size:8pt;width:13%'><!-- \
--><option value=''>media type...</option><!-- \
--><option value=''>auto-detect</option><!-- \
--><option value='iframe'>web page</option><!-- \
--><option value='windows'>windows media</option><!-- \
--><option value='realone'>real one</option><!-- \
--><option value='quicktime'>quicktime</option><!-- \
--><option value='flash'>flash</option><!-- \
--><option value='image'>jpg/gif/png</option><!-- \
--></select><!-- \
--><input type='submit' value='go' title='view URL in embedded player' style='font-size:8pt;width:4%'><!-- \
--><input type='button' value='open' title='view URL in a separate player' style='font-size:8pt;width:6%' \
onclick='if (this.form.url.value.length) window.open(this.form.url.value)'><!-- \
--><input type='button' value='done' name='done' disabled title='disconnect from URL' style='font-size:8pt;width:6%' \
onclick='return config.macros.miniBrowser.done(this.form);'><!-- \
--></div><!-- \
--><div id='minibrowser_player_%id%' style='display:none;text-align:center'></div><!-- \
--><span id='minibrowser_controls2_%id%' style='margin-top:2px;display:none;font-size:8pt;'><!-- \
--><div id='minibrowser_resize_%id%' style='display:%hidecontrols%;float:right;font-size:8pt'><!-- \
--> size: <input type='text' name='w' size='3' value='' style='font-size:8pt;' \
onfocus='this.select()'><!-- \
-->x<input type='text' name='h' size='3' value='' style='font-size:8pt;' \
onfocus='this.select()'><!-- \
--> <input type='submit' value='set' style='font-size:8pt;width:5%' \
onclick='var f=this.form; \
if(!f.w.value.trim().length) f.w.value=config.options.txtMiniBrowserWidth; \
if(!f.h.value.trim().length) f.h.value=config.options.txtMiniBrowserHeight; \
config.options.txtMiniBrowserWidth=f.w.value; config.options.txtMiniBrowserHeight=f.h.value; \
saveOptionCookie(\"txtMiniBrowserWidth\"); saveOptionCookie(\"txtMiniBrowserHeight\");'><!-- \
--><input type='submit' value='reset' style='font-size:8pt;width:5%' \
onclick='var f=this.form; f.ctrls.checked=true; f.w.value=\"100%\"; f.h.value=\"480\"; \
config.options.txtMiniBrowserWidth=f.w.value; config.options.txtMiniBrowserHeight=f.h.value; \
saveOptionCookie(\"txtMiniBrowserWidth\"); saveOptionCookie(\"txtMiniBrowserHeight\");'><!-- \
--><input type='button' value='fit' title='resize player to fit containing window' style='font-size:8pt;width:5%' \
onclick='config.macros.miniBrowser.fit(this)'><!-- \
--></div><!-- \
--> <input type='checkbox' name='ctrls' id='minibrowser_togglecontrols_%id%' title='toggle minibrowser controls' CHECKED \
onclick='document.getElementById(\"minibrowser_controls_%id%\").style.display=this.checked?\"block\":\"none\"; \
document.getElementById(\"minibrowser_resize_%id%\").style.display=this.checked?\"block\":\"none\";' \
><a href='' title='toggle minibrowser controls' \
onclick='this.previousSibling.click();return false;'>show controls</a><!-- \
--></span><!-- \
--></nobr></form> \
"
}
//}}}
<<miniBrowser http://blogs.frumentius.earlham.edu/ieseidm06/weblog/>>
TiddlyWiki.com - official release
http://www.TiddlyWiki.com
----
TiddlyWiki.org - wiki, tickets, source control
http://www.TiddlyWiki.org
----
GoogleGroup: TiddlyWiki - user/author discussion
http://groups.google.com/group/TiddlyWiki/
----
GoogleGroup: TiddlyWikiDev - core/plugin discussion
http://groups.google.com/group/TiddlyWikiDev/
----
TiddlyVault - index of add-ons from many sources
http://TiddlyVault.TiddlySpot.com
----
TiddlySpot - instant TiddlyWiki hosting!!
http://www.TiddlySpot.com
----
TiddlyTools - plugins, scripts, templates, etc.
http://www.TiddlyTools.com
----
del.icio.us - find popular TiddlyWiki sites
http://del.icio.us/tag/tiddlywiki
/*{{{*/
/*Mocha TiddlyWiki Theme*/
/*Version 1.0*/
/*Design and CSS originally by Anthonyy, ported to TiddlyWiki by Saq Imtiaz.*/
/*}}}*/
/*{{{*/
#contentWrapper{
margin: 0 3.4em;
font-family: Verdana,Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
font-size: 11.5px;
line-height: 1.6em;
color: #000;
}
.header {
background: #fff;
padding-top: 10px;
clear: both;
border-bottom: 4px solid #948979;
}
.headerShadow { padding: 2.6em 0em 0.5em 0em; }
.siteTitle {
font-family: 'Trebuchet MS' sans-serif;
font-weight: bold;
font-size: 32px;
color: #CC6633;
margin-bottom: 30px;
background-color: #FFF;
}
.siteTitle a{color:#CC6633; border-bottom:1px dotted #cc6633;}
.siteSubtitle {
font-size: 1.0em;
display: block;
margin: .5em 3em; color: #999999;
}
#mainMenu {
position:relative;
float:left;
margin-bottom:1em;
display:inline;
text-align:left;
padding: 2em 0.5em 0.5em 0em;
width:13em;
font-size:1em;
}
#sidebar{
position:relative;
float:right;
margin-bottom:1em;
padding-top:2em;
display:inline;
}
#displayArea {
margin: 0em 17em 0em 15em;
}
.tagClear {clear:none;}
#contentFooter {background:#575352; color:#BFB6B3; clear: both; padding: 0.5em 1em;}
#contentFooter a {
color: #BFB6B3;
border-bottom: 1px dotted #BFB6B3;
}
#contentFooter a:hover {
color: #FFFFFF;
background-color:#575352;
}
a,#sidebarOptions .sliderPanel a{
color:#CC6714;
text-decoration: none;
}
a:hover,#sidebarOptions .sliderPanel a:hover {
color:#CC6714;
background-color: #F5F5F5;
}
.viewer .button, .editorFooter .button{
color: #666;
border: 1px solid #CC6714;
}
.viewer .button:hover,
.editorFooter .button:hover{
color: #fff;
background: #CC6714;
border-color: #CC6714;
}
.viewer .button:active, .viewer .highlight,.editorFooter .button:active, .editorFooter .highlight{color:#fff; background:#575352;border-color:#575352;}
#mainMenu a {
display: block;
padding: 5px;
border-bottom: 1px solid #CCC;
}
#mainMenu a:link, #navlist a:visited {
color:#CC6714;
text-decoration: none;
}
#mainMenu a:hover {
background: #000000 url(arrow.gif) 96% 50% no-repeat;
background-color: #F5F5F5;
color:#CC6714;
}
#mainMenu br {display:none;}
#sidebarOptions a {
color:#999;
text-decoration: none;
}
#sidebarOptions a:hover {
color:#4F4B45;
background-color: #F5F5F5;border:1px solid #fff;
}
#sidebarOptions {line-height:1.4em;}
.tiddler {
padding-bottom: 40px;
border-bottom: 1px solid #DDDDDD;
}
.title {
font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif;
color:#CC6633;
}
.subtitle, .subtitle a { color: #999999; font-size: 1.0em;margin:0.2em;}
.shadow .title{color:#948979;}
.selected .toolbar a {color:#999999;}
.selected .toolbar a:hover {color:#4F4B45; background:transparent;border:1px solid #fff;}
.toolbar .button:hover, .toolbar .highlight, .toolbar .marked, .toolbar a.button:active{color:#4F4B45; background:transparent;border:1px solid #fff;}
.listLink,#sidebarTabs .tabContents {line-height:1.5em;}
.listTitle {color:#888;}
#sidebarTabs .tabContents {background:#fff;}
#sidebarTabs .tabContents .tiddlyLink, #sidebarTabs .tabContents .button{color:#999;}
#sidebarTabs .tabContents .tiddlyLink:hover,#sidebarTabs .tabContents .button:hover{color:#4F4B45;background:#fff}
#sidebarTabs .tabContents .button:hover, #sidebarTabs .tabContents .highlight, #sidebarTabs .tabContents .marked, #sidebarTabs .tabContents a.button:active{color:#4F4B45;background:#fff}
.tabSelected{color:#fff; background:#948979;}
.tabUnselected {
background: #ccc;
}
.tabSelected, .tabSelected:hover {
color: #fff;
background: #948979;
border: solid 1px #948979;
padding-bottom:1px;
}
.tabUnselected {
color: #999;
background: #eee;
border: solid 1px #ccc;
padding-bottom:1px;
}
#sidebarTabs .tabUnselected { border-bottom: none;padding-bottom:3px;}
#sidebarTabs .tabSelected{padding-bottom:3px;}
#sidebarTabs .tabUnselected:hover { border-bottom: none;padding-bottom:3px;color:#4F4B45}
#sidebarOptions .sliderPanel {
background: #fff; border:none;
font-size: .9em;
}
#sidebarOptions .sliderPanel a {font-weight:normal;}
#sidebarOptions .sliderPanel input {border:1px solid #999;}
.viewer blockquote {
border-left: 3px solid #948979;
}
.viewer table {
border: 2px solid [[ColorPalette::TertiaryDark]];
}
.viewer th, thead td {
background: #948979;
border: 1px solid #948979;
color: #fff;
}
.viewer pre {
border: 1px solid #948979;
background: #f5f5f5;
}
.viewer code {
color: #2F2A29;
}
.viewer hr {
border-top: dashed 1px #948979;
}
.editor input {
border: 1px solid #948979;
}
.editor textarea {
border: 1px solid #948979;
}
.popup {
background: #948979;
border: 1px solid #948979;
}
.popup li.disabled {
color: #000;
}
.popup li a, .popup li a:visited {
color: #eee;
border: none;
}
.popup li a:hover {
background: #575352;
color: #fff;
border: none;
}
.tagging, .tagged {
border: 1px solid #eee;
background-color: #F7F7F7;
}
.selected .tagging, .selected .tagged {
background-color: #eee;
border: 1px solid #BFBAB3;
}
.tagging .listTitle, .tagged .listTitle {
color: #bbb;
}
.selected .tagging .listTitle, .selected .tagged .listTitle {
color: #666;
}
.tagging .button, .tagged .button {
color:#aaa;
}
.selected .tagging .button, .selected .tagged .button {
color:#4F4B45;
}
.highlight, .marked {background:transparent; color:#111; border:none; text-decoration:underline;}
.tagging .button:hover, .tagged .button:hover, .tagging .button:active, .tagged .button:active {
border: none; background:transparent; text-decoration:underline; color:#000;
}
h1,h2,h3,h4,h5 { color: #666; background: transparent; padding-bottom:2px; font-family: Arial, Helvetica, sans-serif; }
h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size: 14px;}
#messageArea {
border: 4px solid #948979;
background: #f5f5f5;
color: #999;
font-size:90%;
}
#messageArea a:hover { background:#f5f5f5;}
#messageArea .button{
color: #666;
border: 1px solid #CC6714;
}
#messageArea .button:hover {
color: #fff;
background: #948979;
border-color: #948979;
}
* html .viewer pre {
margin-left: 0em;
}
* html .editor textarea, * html .editor input {
width: 98%;
}
.searchBar {float:right;font-size: 1.0em;}
.searchBar .button {color:#999;display:block;}
.searchBar .button:hover {border:1px solid #fff;color:#4F4B45;}
.searchBar input {
background-color: #FFF;
color: #999999;
border: 1px solid #CCC; margin-right:3px;
}
#sidebarOptions .button:active, #sidebarOptions .highlight {background:#F5F5F5;}
*html #contentFooter { padding:0.25em 1em 0.5em 1em;}
#noticeBoard {font-size: 0.9em; color:#999; position:relative;display:block;background:#fff; clear: both; margin-right:0.5em; margin-top:60px; padding:5px; border-bottom: 1px dotted #CCC; border-top: 1px dotted #CCC;}
#mainMenu #noticeBoard a,#mainMenu #noticeBoard .tiddlyLink {display:inline;border:none;padding:5px 2px;color:#DF9153 }
#noticeBoard a:hover {border:none;}
#noticeBoard br {display:inline;}
#mainMenu #noticeBoard .button{
color: #666;
border: 1px solid #DF9153;padding:2px;
}
#mainMenu #noticeBoard .button:hover{
color: #fff;
background: #DF9153;
border-color: #DF9153;
}
/*}}}*/
<<closeAll>><<permaview>><<newTiddler>><<saveChanges>><<fontSize "font-size: ">><<slider chkSliderOptionsPanel OptionsPanel 'options »' 'Change TiddlyWiki advanced options'>>
!!Learning Models for 21st Century
From [[21st Century Learners - and their approaches to learning|http://ultibase.rmit.edu.au/Articles/sept02/lambert1.htm]]
+++!!![The Collaborator]
For this learner networks of people, knowledge, skills and ideas are the sources of learning. For this learner new brain research which stresses the importance of social interaction is a significant rationale.
The Collaborator-learner:
* //seeks out and maintains links and networks//
* //negotiates and exchanges ideas//
* //uses new technology to support collaborative work//
* contributes and adds value to cooperative learning processes
* also exploits and derives value from them
* is a team player, able to reach ‘win-win’ agreements
What sort of learning environment does the Collaborator require? This learner needs access to knowledge and ideas, especially those of practitioners. This learner needs partnerships and networks from which to profit. This learner needs support for development of people skills and a sense of personal value within collaborative ventures with others.
===
+++!!![The Free Agent]
This learner makes full use of continuous, open-ended and life-long styles and systems of learning. This is a learner who is:
* flexible, able to keep pace with change, to take advantage of it
* able too to cope with changing requirements of an unstable job market and of employers who ‘are by no means certain and often ambiguous about the necessary qualifications of graduates’ (de Weert, 1998, p.27)
* more concerned with personal transferable skills than with those relating to particular occupations - this learner is not bound to an occupation
* //conversant with new technology// and therefore not constrained by place and the accessibility of instructors
* independent, self-reliant, using new combined courses of study, rather than those which are profession-related
* able to take advantage of modularity, credit transfer, and arrangements for accumulated learning.
This Free-Agent learner requires opportunity to engage in practical work, to //integrate performance and learning//. This learner needs opportunity to plan flexibly, to seek out a wide range of sources and use these creatively and effectively.
===
+++!!![The Wise Analyser]
This learner gathers evidence of effective activity, scrutinises it and applies its conclusions to new problems and new contexts.
The Wise Analyser is:
* //reflective and critical//
* skilled at the processes of research, testing of validity and the application of findings
* close to the world of work and opportunities for action research
* able to argue judgments securely
* able to apply and adapt arguments to new contexts and to use them in the management of change.
This learner requires opportunity to analyse and manage processes and to apply analysis to new situations. This learner seeks to pursue initiatives through circular processes of identification, analysis, result, impact and evaluation.
===
+++!!![The Creative Synthesiser]
This learner //connects across themes and disciplines, cross-fertilises ideas, integrates separate concepts and creates new vision and new practice//.
For this learner knowledge does not rest on particular ways of seeing the world. This learner:
* has ‘new ways of seeing’ (Bowden & Marton, 1998, p.278)
* puts aside ideas that learning is linear and confirms to us that everything is inter-related and complex
* is able to create, investigate and to seize opportunities for development and change.
The Creative Synthesiser requires complex and stimulating learning environments, with access to disparate disciplines. This learner needs opportunities to negotiate across boundaries, together with the framework for creating radical visions and seeing them become real.
===
The problems that I see with current Moodle based e-portfolios are :
# You'd need to retain the Moodle database and data directory indefinitely. Currently at Earlham we start each year with a fresh database and data directory and import courses where necessary to avoid issues with upgrading. We would not be able to do this and we would have to also change the way we use MyMoodle as a result.
# The moodle data storage scheme is designed around courses. Adapting it to user centric portfolio collections is a kludge.
# The [[Moodle 2.0 roadmap|http://docs.moodle.org/en/Roadmap#Version_2.0_-_Expected_Late_2008]] points to definite support of [[external repositories|http://docs.moodle.org/en/Development:Repository_API]] and also a [[portfolio API|http://docs.moodle.org/en/Development:Portfolio_API]] which all e-portfolios will be expected to use. The roadmap explicitly says "The first Portfolio plugin implemented will be Mahara." Moreover, if your institution decides to adopt an external repository this will probably break any built-in e-portfolio. [Note: Elgg would need a new plugin to use Moodle's portfolio API rather than the current integration module]
# An e-portfolio system runs over a series of years and therefore needs long term developer commitment. A major question to ask of any system internal or external to Moodle is what is the likely long term future of the code.
* [[MyStuff site|http://www.open.ac.uk/mystuff]]
* [[Install & download|http://www.open.ac.uk/mystuff/?page_id=4]]
* +++[Common problems]>
A common installation question that arises relates to permissions.
MyStuff uses Moodle global roles to control permissions as we took the view that MyStuff is a universal tool within Moodle and not tied to a specific course. As such you should use Moodle’s global Teacher or Student roles to govern permissions, or define for yourself a new global role (e.g. MyStuff User) to assign users to and control permissions.
A second common issue is MyStuff does require PHP 5 and requires the XSLT library extension to be enabled as MyStuff is completely driven by XML/XSLT.
===
* The MyStuff download is currently (Feb 08) well behind the development build. +++[comments on source update]>
I am not planning to release the new build of MyStuff till March 2008 at the earliest. The reason is because:
# Documentation is incomplete;
# My lack of time to support issues as people try out MyStuff.
For these two reasons, I have found people’s experience of deploying MyStuff havent been easy.
I am keen to make suire MyStuff is usable outside of the Open University so play with the code as provided but please understand that I cant support it till the full documented release version is made available.===. Thus new version not expected until April 08.
* Problems with learning action plans, study spaces & documentation +++[answer]>
# The spaces are empty because in this build I did not supply any specific spaces; many of them have licensed content from the OU so as part of he build distribution, the spaces were removed; In theory you can write your own spaces; which documentation would of course help.
# the learning action plan has a bug where it runs of javascript memory because of the number of HTML editor component it generates. I recomment not using this form as the form is too long to be practically useful and internaly we are considering separating the form into a nuber of smaller forms.
===
<<slideShow noClicks forceRefresh clock:'+' style:'SlideShowStyleSheet' noOverlays>>
-s-
!Quest for the Holy Grail of an Open Source ePortfolio system
<html><div align='center'>
<img width="320" height="240" alt="Quest for the E-Portfolio!" title="Quest for the E-Portfolio!" src="graphics/holy_grail.jpg">
</div></html>
: "Supreme executive power comes from a mandate from the masses not some farcical aquatic ceremony ..."
;by:
: Mark H Pearson ~BSc (Zoology), ~PhD (Entomology), ~MSc (Computer Science) & CDM (Cadbury's Dairy Milk) Earlham College Instructional Technologist
<<tiddlerbox "Control slideshow" "SlideshowOperation" "How to use the slideshow controls" 420 240>>
-s-
!Disclaimer
* This slideshow has a ''zero Microsoft footprint''.
* no Powerpoint was harmed in the production of these slides
!!Summary
* What do we mean by ePortfolio?
* Classification of types
* Open Sauce options
* Eportfolio the new black?
-s-
!Point of a Portfolio
Important to recognise that there are different //kinds// of portfolio :
# ''learning portfolio'' which documents a student's learning over time. The purpose of this is pedagogical.
# ''credential portfolio'' which is used for certification purposes. Education programmes are often mandated to produced portfolios for trainee teachers.
# ''showcase portfolio'' often allied with online CV, which students can use when applying for employment positions.
These have very different flavours.
* For a learning portfolio, reflection from the student and feedback from faculty is paramount; you might not want this kind of portfolio to be exposed to the Internet.
* For a credential portfolio the goal is to make sure that it meets the programme criteria; here clear guidlines and structure are important so that the correct material is included. You might want to limit access to this to known evaluators.
* A showcase portfolio on the other hand will be designed to show off the best of your work. Here the emphasis will be on a slick user interface and quality content. Exposure to the Internet is essential.
-s-
!Institutional questions to pose
* Should an e-portfolio be an official record of a student’s work?
* How long should an e-portfolio remain at an institution after the student graduates?
* Who owns the e-portfolio? (the institution? the student?)
* How should an institution promote and support the use of e-portfolios?
* How are e-portfolios evaluated in a manner that is both valid and reliable?
* How can institutions encourage reflection in the design and use of e-portfolios?
* How will it be portable if the institution lets the student take it with them?
;Lorenzo, G., & Ittleson, J. (2005).
:An overview of e-portfolios. Retrieved July 14, 2006, from http://www.educause.edu/LibraryDetailPage/666?ID=ELI3001
-s-
!Desirable Features of an eportfolio system
The following desireable capabilities of a web based eportfolio system were articulated by the [[New Zealand e-Learning Collaboration project|http://eduforge.org/wiki/wiki/nzeportfolio/wiki?pagename=Develop%20an%20open%20source%20ePortfolio%20application%20made%20available%20over%20the%20Internet]] which eventually went on to sponsor the development of the Mahara eportfolio system by Catalyst.
----
eportfolio architecture revolves around the elements of @@Artefacts -- Views -- Communities@@
----
+++!!![Features]
* Peer and instructor feedback on student work
* Able to provide accessible evidence of students' progress towards graduate outcomes
* Able to capture digital artefacts and student reflection (wikis and blogs)
* Able to generate multiple presentations by students for various publics (digital CVS)
* Students may take ownership of their ePortfolio.
* Ability to set permissions of access or authentication to various nominated groups.
* Ability to add metadata to all entries and artefacts, which could be customised by lecturers or programme teams.
* An aggregating function that would permit users with various permissions to access only what students permit them to access.
* The flexibility for formal or informal / social and personal or course-related areas.
* Students may be allocated their own password-protected server space for storing their artefacts
* Artefacts-views-communities being the three main elements of the application.
* The application will be LMS compatible and browser neutral.
* It will have context-sensitive help.
* It will keep a viewer log.
===
-s-
!Mark's ePortfolio classification
;ePortfolio //lite//
: This is where an OS system with a different basic design imperative is co-opted into eportfolio space by the addition of plugin modules or other modifications. Examples are Elgg, ~WordPress with ~FreeFolio or Moodle
; ePortfolio //integrated//
: Here we have an ePortfolio module integrated into a Course Management System such as Moodle or Sakai
; ePortfolio //heavyweight//
: The last category is for OS ePortfolio systems designed from scratch for this purpose. Example is Mahara.
-s-
!!ePortfolio //lite//
If you are already committed to a certain platform it may make sense to adapt / configure it to perform the eportfolio functions desired. Remember, we're talking about @@Artefacts -- Views -- Communities@@
+++!!![Elgg]
<<tiddler [[Elgg as an ePortfolio]]>>
===
+++!!![Moodle]
<<tiddler [[Using Moodle as an ePortfolio]]>>
===
-s-
! ePortfolio //integrated//
Here we'll talk about eportfolio modules for Moodle. Sakai does have a single option, but they're in the other room ...
+++!!![Exabis|from Austria]
<<tiddler [[Exabis ePortfolio]]>>
===
+++!!![SPDC portfolio|Matt Oquist]
<<tiddler [[SPDC Portfolio]]>>
===
+++!!![MyStuff|Open University (UK)]
<<tiddler [[MyStuff : Open University]]>>
===
+++!!![Moodle based eportfolio : problems]
<<tiddler [[Moodle based eportfolio : problems]]>>
===
-s-
! ePortfolio //heavyweight//
Mahara is the only full featured Open Source ePortfolio solution that I know of.
+++!!![What is Mahara|Introductory spiel about Mahara]
<<<
Established in 2006, [[Mahara|http://www.mahara.org/]] is the result of a collaborative venture funded by New Zealand's Tertiary Education Commission's e-learning Collaborative Development Fund (eCDF), involving Massey University, Auckland University of Technology, The Open Polytechnic of New Zealand and Victoria University of Wellington.
Mahara is a fully featured open source electronic portfolio, weblog, resume builder and social networking system, connecting users and creating online communities. Mahara is designed to provide users with the tools to demonstrate their life-long learning, skills and development over time to selected audiences.
Meaning 'think' or 'thought' in Te Reo Māori, the name reflects the project's dedication to creating a user-centred life-long learning and development application as well as the belief that technology solutions cannot be developed outside the considerations of pedagogy and policy.
<<<
* [[Introduction|http://www.mahara.org/wiki/En/Introduction]] to Mahara explains what 'Views' are and how Mahara fits into the e-learning landscape.
===
+++!!![Quick Tour]
[img[graphics/mahara_my_profile.png][graphics/mahara_Profile.png]]<<imagebox>>
[img[graphics/mahara_my_portfolio.png]]
+++[ ]
!!!Blogs
<<tiddler [[Blogging with Mahara]]>>
!!!Views
<<tiddler [[Mahara Views]]>>
===
[img[graphics/mahara_my_groups.png]]
[img[graphics/mahara_my_settings.png]]
===
+++!!![Features]
[[Features|http://www.mahara.org/features]]
* +++[Views]>
What makes Mahara different from other ePortfolio systems is that you control which items and what information (Artefacts) within your portfolio other users see.
In order to facilitate this access control, all Artefacts you wish to show to other users need to be bundled up and placed into one area. Within Mahara this compilation of selected Artefacts is called a View.
You can have as many Views as you like, each with a different collection of Artefacts, and intended purpose and audience. Your audience, or the people you wish to give access to your View, can be added as individuals or as a member of a Group or Community.
===
* +++[File repository]>
Mahara includes a file repository which allows users to:
* Create folder and sub folders structures
* Upload multiple files quickly and efficiently
* Give each file a Name and Description
* Manage their file allocation Quota
* When uploading a file users must agree to a configurable Copyright disclaimer.
===
* +++[Blogs]>
A comprehensive blogging tool is provided in Mahara, where blogs and blog postings are considered Artefacts and may be added to a View.
The blogging tool allows users to:
* Create blog posts using a WYSIWYG editor
* Attach files to posts
* Embed images into postings
* Configure whether or not Comments may be received on their blog
* Create draft postings for later publishing
===
* +++[Social Networking]>
Mahara provides a social networking facility where users can create and maintain a list of Friends within the system. ePortfolio owners choose whether other users can add them to their Friends list automatically or by request and approval.
An ePortfolio owner's Friends lists shows those Views to which they have been assigned access.
===
* +++[Résumé Builder]>
Mahara includes a résumé builder which allows users to create digital CV’s by entering information into a variety of optional fields including:
* Contact and personal information
* Employment and education history
* Certifications, accreditations and awards
* Books and publications, professional memberships
* Personal, academic and work skills and
* Personal, academic and career goals
===
* +++[Profile Information]>
Within Mahara users are able to share details through a variety of optional profile information fields including:
* Preferred Name
* Student ID
* Postal address and contact phone numbers
* Skype, MSN, Yahoo & Yabber name
* Introduction
* Profile Icons images
===
* +++[Metadata]>
All Artefacts have metadata which includes:
* Title
* Artefact Type
* Owner
* (Optional) Description
* Date of creation
* Date of last modification
* File size or number of posts (blogs)
Mahara also provides user defined, searchable tags on all Artefacts.
===
===
-s-
[>img[graphics/bryan_alexander.jpg]]
* Is ePortfolio the next ''Web 2.0'' ?
* Different approaches, different requirements
* Unlike Moodle CMS, one size does not fit all
* Theme for a summit rather like LAMS@LAC Summit at Reed 2006 ?
* Formulate a set of coherent functional requirements +++[list]>
* Flexibility -- move from one eportfolio type to another
* ''Simple workflow''
* Access -- easy to use way of regulating permissions.
* User interface -- AJAX.
* Stuff -- drag and drop interface to upload.
* Media
** Lightbox graphics display
** Audio upload to podcast / flash player
** Video upload -- > convert to flash
* Community / groups -- ways to aggregate user access
** Assessment / feedback (what and how are students learning)
* Integration with LMS (Moodle, Sakai)
** Single sign on
** File sharing on upload
** Shared tags
* Metadata -- tags
* Export content -- save a local copy of View.
===
-s-
!THE END
<<slideShow noClicks forceRefresh clock:'+' style:'SlideShowStyleSheet' noOverlays>>
-s-
!Introducing the Campus to New Software & Systems
or
!!Flying under the radar
<html><div align='center'>
<img width="217" height="350" alt="Biggles pursues the foe!" title="Biggles pursues the foe!" src="graphics/biggles_small.jpg">
</div></html>
;by:
: Mark H Pearson ~BSc (Zoology), ~PhD (Entomology), ~MSc (Computer Science) & CDM (Cadbury's Dairy Milk) Earlham College Instructional Technologist
<<tiddlerbox "Control slideshow" "SlideshowOperation" "How to use the slideshow controls" 420 240>>
-s-
!Disclaimer
* This slideshow has a ''zero Microsoft footprint''.
* no Powerpoint was harmed in the production of these slides
-s-
!Abstract:
;
: How can an Instructional Technologist introduce new software systems to faculty without hassling computing central? I'll talk about a number of approaches to 'flying under the radar', one of which I have used successfully, and how to transmigrate from pilot to production. If you want to try out Moodle or a new blogging system and want some help starting out, or perhaps you have a contribution to make, why not join this roundtable discussion.
{{Comment{This is partially a plug for Open Source solutions and how you, as Instructional Technologists, can bootstrap a new OS system into production.}}}
+++!!![Jargon]
* liberating tools for change agents
* learning enabler for teaching solutions
* Just in Time integration for information brokers
* core value of digital native 2.0
===
-s-
!Innovate with Open Source
Partial list of OS solutions of interest to Instructional Technologists:
* Course Management : [[Moodle|http://moodle.org]], [[Sakai|http://sakaiproject.org/]]
* Content Management : [[Drupal|http://drupal.org]], [[Alfresco|http://www.alfresco.com/]], [[Joomla|http://www.joomla.org/]]
* Blog : [[Wordpress MU|http://mu.wordpress.org/]], [[Lyceum|http://lyceum.ibiblio.org/]]
* Social Networking / blogging : [[Elgg|http://classic.elgg.org]]
* Eportfolio : [[Mahara|http://www.mahara.org/]]
* Digital repository : [[Dspace|http://www.dspace.org/]]
* Digital Image database [[MDID|http://mdid.org/mdidwiki]]
* Photo album organizer : [[Gallery|http://gallery.menalto.com/]]
* email / calendar : [[Zimbra|http://www.zimbra.com]]
+++!!![Why Open Sauce]
: ''C''ommunity -- Community support, help for getting started, and //esprit de corps// is legendary
: ''C''ontrol -- With the source code you are in control of your own destiny.
: ''T''ractability -- Because you have the whole system at your disposal you don't have to reverse engineer to solve problems and customization and modification is more straightforward.
: ''P''hilosophy -- Open Source Creed. Philosophy of sharing and feeding back efforts to the community.
===
-s-
!Choices, choices, choices. : how to choose the right Open Source s/w
# Take a look at the [[Open Source Maturity Model|http://www.navicasoft.com/pages/osmm.htm]] and the [[example assessment|http://www.navicasoft.com/pages/OSMM_CMS_DRUPAL_EN.pdf]] that has been done for Drupal. This is well worth looking at and may be very useful in getting the system accepted.
# [[Common characteristics of failed open-sourced projects|http://ariya.blogspot.com/2008/03/common-characteristics-of-failed-open.html]] is a useful piece to work backwards from.
+++!!![Factors that I looked at]
* ongoing active development. When was the last major update released? Find the developers mailing list or discussion group and get a sense of level of activity.
* user support. What's the state of support for installing, managing, adding plugins, and tweaking? What proportion of queries go unanswered?
* Care for code. Try to get a sense of coding standard from developers. Is the core being developed by professionals or 'n00bs' ?
* commercial foundations. Do the core developer(s) have some financial backing or is this a part-time hobby?
* Longevity. How long has th e project been going? Assess whether you think it'll last. For example, Wordpress won't disappear overnight.
===
-s-
!Take a quick looks
There are multitudes of freeware services which allow you to create an account and get a feel for the system as a user.
* Julian Ridden's [[Moodle playpen|http://playpen.riverview.nsw.edu.au/]] lets you play with the latest release of Moodle (currently 1.9) and a host of interesting modules.
* [[Edublogs|http://edublogs.org/]] is a good place to host a public blog. This is based on ~WordPress.
* similarly [[Eduspaces|http://eduspaces.net]] will both help you get a feel for Elgg and also make some useful contacts and communities.
+++!![But beware]
* These systems are often highly customized so that the user interface is usually a lot slicker than the default provided when you install it yourself
* The cost may not be free -- edublogs does charge for disk space over a certain level.
* Who owns the content? Pay particular attention to their terms of service.
* Can you export your content if you want to move somewhere else?
* not suitable for class use -- too public.
* Terms of service may include termination of service at short notice. Eduspaces did this over Christmas to a great outcry.
===
-s-
!Install locally
Not surprisingly, none of the free services allow you to get a feel for administering, configuring or customizing a system. To do this, you'll need to install the software somewhere. Often the most convenient place is on your own machine.
Generally, OS systems require three components :
# Web Server. Apache (Unix) or IIS (Win)
# Scripting language. ~PhP, Perl, Python, Ruby, .NET, Java
# Database. ~MySQL, Postgres, ~MS-SQL
# +++[Other :]
** Image management : GD, ImageMagick, NetBPM
** Multimedia conversion : ffmpeg
** Apache plugins : mod-rewrite, GD
** Support environment : Rails for Ruby
===
+++!![System configuration issues:]
Generally, many OS systems claim to operate on a variety of platforms. For example, Moodle claims to run on Oracle and IIS server, but most people including the developers use ~MySQL and Apache.. You should ''always'' take the path of fewest problems when trying out OS systems, which means using the 'recommended' system configuration (usually that which the developers are using). So to test Mahara for example you'd need to install Postgres database rather than ~MySQL.
===
-s-
!Local install options
If you already using a Linux desktop such as Ubuntu or maybe even Mac ~OS-X it's trivial to get the basics working. But you might want to consider the XAMPP package described below:
+++!!![Windows 2000, XP, Vista]
[[XAMPP|http://www.apachefriends.org/en/xampp.html]] from Apache friends comes with Apache, ~MySQL, PHP + PEAR, Perl, mod_php, mod_perl, mod_ssl, ~OpenSSL, phpMyAdmin etc with the latest versions of each.
;''Beware :''
: "To make it convenient for developers XAMPP is configured with all features turned on. The default configuration is not good from a security point of view and it's not secure enough for a production environment - please don't use XAMPP in such environment."
===
+++!!![Mac OS X]
* From the same [[XAMPP|http://www.apachefriends.org/en/xampp.html]] site you can download a Mac version with more or less the same stuff. Or,
* go to Marc Liyanage's [[Mac OS X Packages|http://www.entropy.ch/software/macosx/]] to get php 5 and Postgres working.
===
+++!!![Virtual Appliance]
* Some systems like Gallery come prepackaged in a complete [[VMware appliance|http://codex.gallery2.org/Gallery:Appliance]]. You install the VMware player, download the appliance and the whole thing runs in a Linux Virtual Machine on your PC. The advantage of this approach is that you cannot foul up your main machine by accident.
* [[Jumpbox|http://www.jumpbox.com/]] provides a host of preconfigured Open Source virtual appliances. Cost is $50 each or $200 for an open subscription. They have 20+ apps including Moodle 1.9, Joomla, a number of wikis, Worpress & Drupal. You will VMWare Player or Parallels to run the JumpBox -- see [[virtualization software|http://www.jumpbox.com/supported-virtualization-software]] for list. The [[tour|http://www.jumpbox.com/tour]] shows that it's easy to get up and running.
* you can also find and download appliances from VMWare's [[Virtual Appliance Marketplace|http://www.vmware.com/appliances/marketplace.html]]
!!!Advantages
These 'appliances' are preconfigured by professionals who (presumably) know what they're doing. One can then duplicate the configuration on your own system (to the point of tarring the source and dumping the database) to run as a pilot. Make sure that you have SSH access to the appliance though.
* or use [[Virtualbox|http://www.virtualbox.org/wiki/VirtualBox]] to make your own :-)
===
-s-
!Pilot systems
Using any of the options above will give you a feel for how the systems are configured and managed. But you won't want to support live users on your local machine. To take it further you need to run a pilot and have faculty experiment with a class. If you teach your own class, that can be you :-)
For this you'll need a small server. I have employed +++[the following:]
* Mac Mini PPC G4 1.4GHz and 1Gb RAM with ~OS-X 10.4 server. Shipped with broken php & ~MySQL which did not talk with each other. Used for about a year but lots of problems with Moodle. Moved to:
* Dell Poweredge 2400 800MHz, 756 Mb RAM and 2x18Gb ~SCSI-3 drives. Installed Ubuntu 7.04 server. Rock solid. Supported over 50 student users on Elgg in Fall semester 07.
* Swapped Mac mini for Intel S5000 2u server with Two Xeon dual core 3.2Ghz CPU, 2Gb RAM and 20 Gb hard drive. Installed Ubuntu 7.10 (Gutsy Gibbon)
===
+++!!![Linux for Instructional Techies]
There are many varieties of Linux out there and many sys admins who prefer Free BSD. I used [[Ubuntu server|http://www.ubuntu.com/products/whatisubuntu/serveredition]] because:
* Extensive detailed support from :
** documentation pages. eg [[servers|https://help.ubuntu.com/community/Servers]] show you how to install Moodle, ~WordPress & Drupal with detailed command lines. The [[MySQL Moodle|https://help.ubuntu.com/community/MySQLMoodle]] instructions take you through everything you need including adding GD & CURL to PHP 5! Brilliant!
** the Forums -- you can usually find solutions to any issue in the [[Ubuntu Forum Community|http://ubuntuforums.org/index.php]]
* Google turns up lots of links to blog entries that cover Ubuntu configuration -- for example [[Activating mod_rewrite on Apache @ Ubuntu|http://blog.estebanglas.com.ar/2007/06/activating-mod_rewrite-on-apache-ubuntu/]]
===
+++!!![Keeping track of solutions]
I keep track of all my solutions and command line snippets in tiddlywikis
* [[Instructional Technology Innovations|http://www.earlham.edu./markp/ITI_wiki]] for all Ubuntu & ~MySQL stuff,
* [[Moodle Issues|http://barnabas.lly.earlham.edu/tw/miss/]] for all patches, plugins and permutations pertaining to Moodle, and
* [[Elgg occurrences|http://www.earlham.edu/markp/legg_tw]] for all my Elgg undertakings.
===
-s-
![img[graphics/alternative_image_30.png]]Alternatives
* Commercial hosting services for OS apps:
** [[Moodle Rooms|http://www.moodlerooms.com/]]. Brad Weaver has been using this for a Moodle pilot at Wabash
** GlieseConnect [[Elgg promotion|http://glieseconnect.com/elgg.aspx]] $60 for first year, $40 renewal.
* Web hosting service. Many of these offer automatic installs of popular OS s/w. Pomona used a web host to do a pilot of Drupal for Kathleen Fitzpatrick called 'Writing Machines'. For example [[A-Plus|http://hosting.aplus.net/compare_unix.html]]
-s-
!From Pilot to Production
When you run the pilot you really have to start talking to your Computing Centre techie folks, if you have not already done so. Even if, or especially if, you're running this on your own mini server. You'll want their backing also to set things up with an external host.
If the pilot is successful, then start talking about migrating to a CC supported system.
Here's how it worked for me (still in progress) +++[Elgg timeline]
# Spring 07 [[comparison of blogging systems|http://www.earlham.edu/markp/ITI_wiki/index.html#%5B%5BComparison%20Blogging%20Systems%5D%5D]]
# Spring 07. Installed both [[Lyceum|lyceum.ibiblio.org/]] and [[Elgg|http://classic.elgg.org]] on a test server and invited colleagues to try them both out. Decided that Elgg was a better long term bet.
# Summer 07. Moved from Mac ~OS-X server to Ubuntu server (Dell 2400 Poweredge). Elgg 0.8 functional with a few plugins.
# August 07. Interest from two faculty to use Elgg for classes. Hosted 3 classes on Ubuntu server.
# Spring 08. Moved working pilot to new powerful Intel server. Development still on Dell. Discussions with ECS about [[new Moodle and Elgg server|http://barnabas.lly.earlham.edu/tw/miss/#%5B%5BECS%20-%20ITAM%20meeting%20re%20services%5D%5D]]
# Summer 08. Move pilot 0.9 Elgg to ECS server.
# [[Earlham Learning Spaces 08|http://blogs.frumentius.earlham.edu]]
# [[mockup of new ELS theme|stuff/pageshell.html]]
===
+++!!![Marketing Social Networking]
* ''blog'' -- known and respectable
* ''wiki'' -- new and strange
* ''social network'' -- for digital natives only?
* ''Learning Space'' -- social networking for learners
===
[[Features of Elgg|http://eduforge.org/wiki/wiki/nzeportfolio/wiki?pagename=Features%20of%20Elgg]] congruent with eportfolio desirable features:
* Login - Letter only Usernames and Passwords
* Access - User, Administrator, Community Owner, Friend, Friend Of
* Profile - Customisable details including picture repository, FOAF file
* Authentication - Two step registration with confirmation email
* Security - Site security dependant on hosting arrangement, access to Files, Blog and Community may be moderated by user profile options
* Student driven - Student/User centred system
* Template driven, personalisable - User may select from available templates
* File format free - Repository allows upload of all file types although there is a size restriction
* Searchable - Search functionality exists although it requires work
* Interface/link/compatible to LMS and SMS - API to Moodle
* RSS feeds - Feeds in/out for Blogs, Activity, Files and Tags
* Blog/Journal - May define access (Public, Private, Logged in User, Community etc), can define own tags and embed files from personal repository
* Access lists, assigning access interface, aggregated access - Friend, Friend Of, Community, Groups (sub Community)
* Browser neutral (no Java)
* WYSIWYG editor - very limited
* FOAF, social networking - based on social constructivist pedagogy
* File repository - Folder, Sub folder and file (all movabale)
* User training and support - page specific help
* Terms and Conditions (ethics, plagarism) - Copyright tickbox, customisable
* File limit - display of used/available, Admin may increased or decrease
* Graphics/Photo repository - part of file repository
* Screen reader compatibility
* Theme/Branding organisationally specific
* Recent Activity notification - RSS feed (assumes user has aggregated)
* Users can create folders to organize their artifacts - 2 folder levels
* Artifacts can be moved from folder to folder - Via Edit items
* Email alerts to student owner as feedback, comments etc is received - User Configuration option
* Assessment submission - via file upload and access permissions
* Robust, clean code - still some work to do
* Podcasting (coming soon)
* Scalable (individual - instituition) - ?
* Artefacts-views-communities - pending set up
Feature list from [[Develop Open Source ePortfolio app|http://eduforge.org/wiki/wiki/nzeportfolio/wiki?pagename=ePortfolio%20features]]
* Login
* Access
* Profile
* Authentication (via enrolment?)
* Security
* Student driven
* Template driven, personalisable
* Scalable (individual - instituition)
* File format free
* Searchable
* URLs and mailtos- multi linkable, auto linking
* Interface/link/compatible to LMS and SMS
* RSS feeds
* Journal - Public/Private
* Blog - Public/Private, define own tags, embed files
* File Management, version control
* Access lists, assigning access interface, aggregated access, access start and end dates
* Artefact manager, add Metadata to every artefact, own taxonmy
* Browser neutral
* File repository - virus check on submission
* User training and support - contextual help
* Resume builder
* Print view
* Downloadable, extractable - IMS ePortfolio 1.0 compliance, HTML, Zip file, Save to Disk Option
* Logs - visitor logs, extractable to excel, csv
* Wiki
* WYSIWYG editor
* FOAF, social networking
* Rubrics for formative assessment
* Language packs
* Spell checker
* Terms and Conditions - ethics, plagarism,
* Interoperability
* Robust, clean code
* Support assessment feedback
* Artefacts-views-communities
* Planning and achievement tools (academic, personal, professional etc)
* Graphics/Photo repository
* File limit - display of used/available
* Theme/Branding organisationally specific
* IM chat
* 'Magic' key controlled access to specific areas
* Recent Activity notification
* Auto-save
* Draft copies (like blogger.com)
* Royalty free image gallery
* Assessment submission and feedback forms
* Address book - all contact pointes
* Each page automatically shows the “last revised date”.
* Users can create folders to organize their artifacts.
* Artifacts can be moved from folder to folder
* Email alerts to student owner as feedback, comments etc is received
* Podcasting
* Single screen (graphical) interface
* Screen reader compatibility
/***
|Name|NestedSlidersPlugin|
|Source|http://www.TiddlyTools.com/#NestedSlidersPlugin|
|Version|2.3.1|
|Author|Eric Shulman - ELS Design Studios|
|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|Slider.prototype.stop|
|Description|show content in nest-able 'slider' or 'floating' panels, without needing to create separate tiddlers for each panel|
!!!!!Configuration
<<<
Enable animation for slider panels
<<option chkFloatingSlidersAnimate>> allow sliders to animate when opening/closing
>(note: This setting is in //addition// to the general option for enabling/disabling animation effects:
><<option chkAnimate>> enable animations (entire document)
>For slider animation to occur, you must also allow animation in general.
Debugging messages for 'lazy sliders' deferred rendering:
<<option chkDebugLazySliderDefer>> show debugging alert when deferring slider rendering
<<option chkDebugLazySliderRender>> show debugging alert when deferred slider is actually rendered
<<<
!!!!!Usage
<<<
When installed, this plugin adds new wiki syntax for embedding 'slider' panels directly into tiddler content. Use {{{+++}}} and {{{===}}} to delimit the slider content. You can also 'nest' these sliders as deep as you like (see complex nesting example below), so that expandable 'tree-like' hierarchical displays can be created. This is most useful when converting existing in-line text content to create in-line annotations, footnotes, context-sensitive help, or other subordinate information displays.
Additional optional syntax elements let you specify
*default to open
*cookiename
*heading level
*floater (with optional CSS width value)
*transient display (clicking elsewhere closes panel)
*custom class/label/tooltip/accesskey
*alternate label/tooltip (displayed when panel is open)
*panelID (for later use with {{{<<DOM>>}}} macro. See [[DOMTweaksPlugin]])
*automatic blockquote style on panel
*deferred rendering of panel content
The complete syntax, using all options, is:
//{{{
++++(cookiename)!!!!!^width^*{{class{[label=key|tooltip][altlabel|alttooltip]}}}#panelID:>...
content goes here
===
//}}}
where:
* {{{+++}}} (or {{{++++}}}) and {{{===}}}<br>marks the start and end of the slider definition, respectively. When the extra {{{+}}} is used, the slider will be open when initially displayed.
* {{{(cookiename)}}}<br>saves the slider opened/closed state, and restores this state whenever the slider is re-rendered.
* {{{!}}} through {{{!!!!!}}}<br>displays the slider label using a formatted headline (Hn) style instead of a button/link style
* {{{^width^}}} (or just {{{^}}})<br>makes the slider 'float' on top of other content rather than shifting that content downward. 'width' must be a valid CSS value (e.g., "30em", "180px", "50%", etc.). If omitted, the default width is "auto" (i.e., fit to content)
* {{{"*"}}} //(without the quotes)//<br>denotes "transient display": when a click occurs elsewhere in the document, the slider/floating panel will be automatically closed. This is useful for creating 'pulldown menus' that automatically go away after they are used.
* """{{class{[label=key|tooltip][altlabel|alttooltip]}}}"""<br>uses label/tooltip/accesskey. """{{class{...}}}""", """=key""", """|tooltip""" and """[altlabel|alttooltip]""" are optional. 'class' is any valid CSS class name, used to style the slider label text. 'key' must be a ''single letter only''. altlabel/alttooltip specifiy alternative label/tooltip for use when slider/floating panel is displayed.
* {{{#panelID:}}}<br>defines a unique DOM element ID that is assigned to the panel element used to display the slider content. This ID can then be used later to reposition the panel using the {{{<<DOM move id>>}}} macro (see [[DOMTweaksPlugin]]), or to access/modify the panel element through use of {{{document.getElementById(...)}}}) javascript code in a plugin or inline script.
* {{{">"}}} //(without the quotes)//<br>automatically adds blockquote formatting to slider content
* {{{"..."}}} //(without the quotes)//<br>defers rendering of closed sliders until the first time they are opened. //Note: deferred rendering may produce unexpected results in some cases. Use with care.//
//Note: to make slider definitions easier to read and recognize when editing a tiddler, newlines immediately following the {{{+++}}} 'start slider' or preceding the {{{===}}} 'end slider' sequence are automatically supressed so that excess whitespace is eliminated from the output.//
<<<
!!!!!Examples
<<<
simple in-line slider:
{{{
+++
content
===
}}}
+++
content
===
----
use a custom label and tooltip:
{{{
+++[label|tooltip]
content
===
}}}
+++[label|tooltip]
content
===
----
content automatically blockquoted:
{{{
+++>
content
===
}}}
+++>
content
===
----
all options combined //(default open, cookie, heading, sized floater, transient, class, label/tooltip/key, blockquoted, deferred)//
{{{
++++(testcookie)!!!^30em^*{{big{[label=Z|click or press Alt-Z to open]}}}>...
content
===
}}}
++++(testcookie)!!!^30em^*{{big{[label=Z|click or press Alt-Z to open]}}}>...
content
===
----
complex nesting example:
{{{
+++[get info...=I|click for information or press Alt-I]
put some general information here,
plus a floating panel with more specific info:
+++^10em^[view details...|click for details]
put some detail here, which could in turn contain a transient panel,
perhaps with a +++^25em^*[glossary definition]explaining technical terms===
===
===
}}}
+++[get info...=I|click for information or press Alt-I]
put some general information here,
plus a floating panel with more specific info:
+++^10em^[view details...|click for details]
put some detail here, which could in turn contain a transient panel,
perhaps with a +++^25em^*[glossary definition]explaining technical terms===
===
===
<<<
!!!!!Installation
<<<
import (or copy/paste) the following tiddlers into your document:
''NestedSlidersPlugin'' (tagged with <<tag systemConfig>>)
<<<
!!!!!Revision History
<<<
''2007.07.26 - 2.3.1'' in document.onclick(), propagate return value from hijacked core click handler to consume OR bubble up click as needed. Fixes "IE click disease", whereby nearly every mouse click causes a page transition.
''2007.07.20 - 2.3.0'' added syntax for setting panel ID (#panelID:). This allows individual slider panels to be repositioned within tiddler content simply by giving them a unique ID and then moving them to the desired location using the {{{<<DOM move id>>}}} macro.
''2007.07.19 - 2.2.0'' added syntax for alttext and alttip (button label and tooltip to be displayed when panel is open)
''2007.07.14 - 2.1.2'' corrected use of 'transient' attribute in IE to prevent (non-recursive) infinite loop
''2007.07.12 - 2.1.0'' replaced use of "*" for 'open/close on rollover' (which didn't work too well). "*" now indicates 'transient' panels that are automatically closed if a click occurs somewhere else in the document. This permits use of nested sliders to create nested "pulldown menus" that automatically disappear after interaction with them has been completed. Also, in onClickNestedSlider(), use "theTarget.sliderCookie", instead of "this.sliderCookie" to correct cookie state tracking when automatically dismissing transient panels.
''2007.06.10 - 2.0.5'' add check to ensure that window.adjustSliderPanel() is defined before calling it (prevents error on shutdown when mouse event handlers are still defined)
''2007.05.31 - 2.0.4'' add handling to invoke adjustSliderPanel() for onmouseover events on slider button and panel. This allows the panel position to be re-synced when the button position shifts due to changes in unrelated content above it on the page. (thanks to Harsha for bug report)
''2007.03.30 - 2.0.3'' added chkFloatingSlidersAnimate (default to FALSE), so that slider animation can be disabled independent of the overall document animation setting (avoids strange rendering and focus problems in floating panels)
''2007.03.01 - 2.0.2'' for TW2.2+, hijack Morpher.prototype.stop so that "overflow:hidden" can be reset to "overflow:visible" after animation ends
''2007.03.01 - 2.0.1'' in hijack for Slider.prototype.stop, use apply() to pass params to core function
|please see [[NestedSlidersPluginHistory]] for additional revision details|
''2005.11.03 - 1.0.0'' initial public release
<<<
!!!!!Credits
<<<
This feature was implemented by EricShulman from [[ELS Design Studios|http:/www.elsdesign.com]] with initial research and suggestions from RodneyGomes, GeoffSlocock, and PaulPetterson.
<<<
!!!!!Code
***/
//{{{
version.extensions.nestedSliders = {major: 2, minor: 3, revision: 1, date: new Date(2007,7,26)};
//}}}
//{{{
// options for deferred rendering of sliders that are not initially displayed
if (config.options.chkDebugLazySliderDefer==undefined) config.options.chkDebugLazySliderDefer=false;
if (config.options.chkDebugLazySliderRender==undefined) config.options.chkDebugLazySliderRender=false;
if (config.options.chkFloatingSlidersAnimate==undefined) config.options.chkFloatingSlidersAnimate=false;
// default styles for 'floating' class
setStylesheet(".floatingPanel { position:absolute; z-index:10; padding:0.5em; margin:0em; \
background-color:#eee; color:#000; border:1px solid #000; text-align:left; }","floatingPanelStylesheet");
//}}}
//{{{
config.formatters.push( {
name: "nestedSliders",
match: "\\n?\\+{3}",
terminator: "\\s*\\={3}\\n?",
lookahead: "\\n?\\+{3}(\\+)?(\\([^\\)]*\\))?(\\!*)?(\\^(?:[^\\^\\*\\[\\>]*\\^)?)?(\\*)?(?:\\{\\{([\\w]+[\\s\\w]*)\\{)?(\\[[^\\]]*\\])?(\\[[^\\]]*\\])?(?:\\}{3})?(\\#[^:]*\\:)?(\\>)?(\\.\\.\\.)?\\s*",
handler: function(w)
{
lookaheadRegExp = new RegExp(this.lookahead,"mg");
lookaheadRegExp.lastIndex = w.matchStart;
var lookaheadMatch = lookaheadRegExp.exec(w.source)
if(lookaheadMatch && lookaheadMatch.index == w.matchStart)
{
// var defopen=lookaheadMatch[1]
// var cookiename=lookaheadMatch[2]
// var header=lookaheadMatch[3]
// var panelwidth=lookaheadMatch[4]
// var transient=lookaheadMatch[5]
// var class=lookaheadMatch[6]
// var label=lookaheadMatch[7]
// var openlabel=lookaheadMatch[8]
// var panelID=lookaheadMatch[9]
// var blockquote=lookaheadMatch[10]
// var deferred=lookaheadMatch[11]
// location for rendering button and panel
var place=w.output;
// default to closed, no cookie, no accesskey, no alternate text/tip
var show="none"; var cookie=""; var key="";
var closedtext=">"; var closedtip="";
var openedtext="<"; var openedtip="";
// extra "+", default to open
if (lookaheadMatch[1]) show="block";
// cookie, use saved open/closed state
if (lookaheadMatch[2]) {
cookie=lookaheadMatch[2].trim().slice(1,-1);
cookie="chkSlider"+cookie;
if (config.options[cookie]==undefined)
{ config.options[cookie] = (show=="block") }
show=config.options[cookie]?"block":"none";
}
// parse label/tooltip/accesskey: [label=X|tooltip]
if (lookaheadMatch[7]) {
var parts=lookaheadMatch[7].trim().slice(1,-1).split("|");
closedtext=parts.shift();
if (closedtext.substr(closedtext.length-2,1)=="=")
{ key=closedtext.substr(closedtext.length-1,1); closedtext=closedtext.slice(0,-2); }
openedtext=closedtext;
if (parts.length) closedtip=openedtip=parts.join("|");
else { closedtip="show "+closedtext; openedtip="hide "+closedtext; }
}
// parse alternate label/tooltip: [label|tooltip]
if (lookaheadMatch[8]) {
var parts=lookaheadMatch[8].trim().slice(1,-1).split("|");
openedtext=parts.shift();
if (parts.length) openedtip=parts.join("|");
else openedtip="hide "+openedtext;
}
var title=show=='block'?openedtext:closedtext;
var tooltip=show=='block'?openedtip:closedtip;
// create the button
if (lookaheadMatch[3]) { // use "Hn" header format instead of button/link
var lvl=(lookaheadMatch[3].length>6)?6:lookaheadMatch[3].length;
var btn = createTiddlyElement(createTiddlyElement(place,"h"+lvl,null,null,null),"a",null,lookaheadMatch[6],title);
btn.onclick=onClickNestedSlider;
btn.setAttribute("href","javascript:;");
btn.setAttribute("title",tooltip);
}
else
var btn = createTiddlyButton(place,title,tooltip,onClickNestedSlider,lookaheadMatch[6]);
btn.innerHTML=title; // enables use of HTML entities in label
// set extra button attributes
btn.setAttribute("closedtext",closedtext);
btn.setAttribute("closedtip",closedtip);
btn.setAttribute("openedtext",openedtext);
btn.setAttribute("openedtip",openedtip);
btn.sliderCookie = cookie; // save the cookiename (if any) in the button object
btn.defOpen=lookaheadMatch[1]!=null; // save default open/closed state (boolean)
btn.keyparam=key; // save the access key letter ("" if none)
if (key.length) {
btn.setAttribute("accessKey",key); // init access key
btn.onfocus=function(){this.setAttribute("accessKey",this.keyparam);}; // **reclaim** access key on focus
}
btn.onmouseover=function(event) // mouseover on button aligns floater position with button
{ if (window.adjustSliderPos) window.adjustSliderPos(this.parentNode,this,this.sliderPanel,this.sliderPanel.className); }
// create slider panel
var panelClass=lookaheadMatch[4]?"floatingPanel":"sliderPanel";
var panelID=lookaheadMatch[9]; if (panelID) panelID=panelID.slice(1,-1); // trim off delimiters
var panel=createTiddlyElement(place,"div",panelID,panelClass,null);
panel.button = btn; // so the slider panel know which button it belongs to
btn.sliderPanel=panel; // so the button knows which slider panel it belongs to
panel.defaultPanelWidth=(lookaheadMatch[4] && lookaheadMatch[4].length>2)?lookaheadMatch[4].slice(1,-1):"";
panel.setAttribute("transient",lookaheadMatch[5]=="*"?"true":"false");
panel.style.display = show;
panel.style.width=panel.defaultPanelWidth;
panel.onmouseover=function(event) // mouseover on panel aligns floater position with button
{ if (window.adjustSliderPos) window.adjustSliderPos(this.parentNode,this.button,this,this.className); }
// render slider (or defer until shown)
w.nextMatch = lookaheadMatch.index + lookaheadMatch[0].length;
if ((show=="block")||!lookaheadMatch[11]) {
// render now if panel is supposed to be shown or NOT deferred rendering
w.subWikify(lookaheadMatch[10]?createTiddlyElement(panel,"blockquote"):panel,this.terminator);
// align floater position with button
if (window.adjustSliderPos) window.adjustSliderPos(place,btn,panel,panelClass);
}
else {
var src = w.source.substr(w.nextMatch);
var endpos=findMatchingDelimiter(src,"+++","===");
panel.setAttribute("raw",src.substr(0,endpos));
panel.setAttribute("blockquote",lookaheadMatch[10]?"true":"false");
panel.setAttribute("rendered","false");
w.nextMatch += endpos+3;
if (w.source.substr(w.nextMatch,1)=="\n") w.nextMatch++;
if (config.options.chkDebugLazySliderDefer) alert("deferred '"+title+"':\n\n"+panel.getAttribute("raw"));
}
}
}
}
)
// TBD: ignore 'quoted' delimiters (e.g., "{{{+++foo===}}}" isn't really a slider)
function findMatchingDelimiter(src,starttext,endtext) {
var startpos = 0;
var endpos = src.indexOf(endtext);
// check for nested delimiters
while (src.substring(startpos,endpos-1).indexOf(starttext)!=-1) {
// count number of nested 'starts'
var startcount=0;
var temp = src.substring(startpos,endpos-1);
var pos=temp.indexOf(starttext);
while (pos!=-1) { startcount++; pos=temp.indexOf(starttext,pos+starttext.length); }
// set up to check for additional 'starts' after adjusting endpos
startpos=endpos+endtext.length;
// find endpos for corresponding number of matching 'ends'
while (startcount && endpos!=-1) {
endpos = src.indexOf(endtext,endpos+endtext.length);
startcount--;
}
}
return (endpos==-1)?src.length:endpos;
}
//}}}
//{{{
window.onClickNestedSlider=function(e)
{
if (!e) var e = window.event;
var theTarget = resolveTarget(e);
var theLabel = theTarget.firstChild.data;
var theSlider = theTarget.sliderPanel
var isOpen = theSlider.style.display!="none";
// toggle label
theTarget.innerHTML=isOpen?theTarget.getAttribute("closedText"):theTarget.getAttribute("openedText");
// toggle tooltip
theTarget.setAttribute("title",isOpen?theTarget.getAttribute("closedTip"):theTarget.getAttribute("openedTip"));
// deferred rendering (if needed)
if (theSlider.getAttribute("rendered")=="false") {
if (config.options.chkDebugLazySliderRender)
alert("rendering '"+theLabel+"':\n\n"+theSlider.getAttribute("raw"));
var place=theSlider;
if (theSlider.getAttribute("blockquote")=="true")
place=createTiddlyElement(place,"blockquote");
wikify(theSlider.getAttribute("raw"),place);
theSlider.setAttribute("rendered","true");
}
// show/hide the slider
if(config.options.chkAnimate && (theSlider.className!='floatingPanel' || config.options.chkFloatingSlidersAnimate))
anim.startAnimating(new Slider(theSlider,!isOpen,e.shiftKey || e.altKey,"none"));
else
theSlider.style.display = isOpen ? "none" : "block";
// reset to default width (might have been changed via plugin code)
theSlider.style.width=theSlider.defaultPanelWidth;
// align floater panel position with target button
if (!isOpen && window.adjustSliderPos) window.adjustSliderPos(theSlider.parentNode,theTarget,theSlider,theSlider.className);
// if showing panel, set focus to first 'focus-able' element in panel
if (theSlider.style.display!="none") {
var ctrls=theSlider.getElementsByTagName("*");
for (var c=0; c<ctrls.length; c++) {
var t=ctrls[c].tagName.toLowerCase();
if ((t=="input" && ctrls[c].type!="hidden") || t=="textarea" || t=="select")
{ ctrls[c].focus(); break; }
}
}
var cookie=theTarget.sliderCookie;
if (cookie && cookie.length) {
config.options[cookie]=!isOpen;
if (config.options[cookie]!=theTarget.defOpen)
saveOptionCookie(cookie);
else { // remove cookie if slider is in default display state
var ex=new Date(); ex.setTime(ex.getTime()-1000);
document.cookie = cookie+"=novalue; path=/; expires="+ex.toGMTString();
}
}
return false;
}
//}}}
//{{{
// click in document background closes transient panels
document.nestedSliders_savedOnClick=document.onclick;
document.onclick=function(ev) { if (!ev) var ev=window.event; var target=resolveTarget(ev);
// call original click handler
if (document.nestedSliders_savedOnClick)
var retval=document.nestedSliders_savedOnClick.apply(this,arguments);
// if click was inside transient panel (or something contained by a transient panel)... leave it alone
var p=target;
while (p)
if ((p.className=="floatingPanel"||p.className=="sliderPanel")&&p.getAttribute("transient")=="true") break;
else p=p.parentNode;
if (p) return retval;
// otherwise, find and close all transient panels...
var all=document.all?document.all:document.getElementsByTagName("DIV");
for (var i=0; i<all.length; i++) {
// if it is not a transient panel, or the click was on the button that opened this panel, don't close it.
if (all[i].getAttribute("transient")!="true" || all[i].button==target) continue;
// otherwise, if the panel is currently visible, close it by clicking it's button
if (all[i].style.display!="none") window.onClickNestedSlider({target:all[i].button})
}
return retval;
};
//}}}
//{{{
// adjust floating panel position based on button position
if (window.adjustSliderPos==undefined) window.adjustSliderPos=function(place,btn,panel,panelClass) {
if (panelClass=="floatingPanel") {
var left=0;
var top=btn.offsetHeight;
if (place.style.position!="relative") {
var left=findPosX(btn);
var top=findPosY(btn)+btn.offsetHeight;
var p=place; while (p && p.className!='floatingPanel') p=p.parentNode;
if (p) { left-=findPosX(p); top-=findPosY(p); }
}
if (findPosX(btn)+panel.offsetWidth > getWindowWidth()) // adjust position to stay inside right window edge
left-=findPosX(btn)+panel.offsetWidth-getWindowWidth()+15; // add extra 15px 'fudge factor'
panel.style.left=left+"px"; panel.style.top=top+"px";
}
}
function getWindowWidth() {
if(document.width!=undefined)
return document.width; // moz (FF)
if(document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
return document.documentElement.clientWidth; // IE6
if(document.body && ( document.body.clientWidth || document.body.clientHeight ) )
return document.body.clientWidth; // IE4
if(window.innerWidth!=undefined)
return window.innerWidth; // IE - general
return 0; // unknown
}
//}}}
//{{{
// TW2.1 and earlier:
// hijack Slider animation handler 'stop' handler so overflow is visible after animation has completed
Slider.prototype.coreStop = Slider.prototype.stop;
Slider.prototype.stop = function()
{ this.coreStop.apply(this,arguments); this.element.style.overflow = "visible"; }
// TW2.2+
// hijack Morpher animation handler 'stop' handler so overflow is visible after animation has completed
if (version.major+.1*version.minor+.01*version.revision>=2.2) {
Morpher.prototype.coreStop = Morpher.prototype.stop;
Morpher.prototype.stop = function()
{ this.coreStop.apply(this,arguments); this.element.style.overflow = "visible"; }
}
//}}}
<<slideShow noClicks forceRefresh clock:'+' style:'SlideShowStyleSheet' noOverlays>>
-s-
!!New horizons in Social Networking:
!Educational social spaces for Digital Natives
[img[graphics/digtial_native_banner.jpg]]
;by:
: Mark H Pearson ~BSc (Zoology), ~PhD (Entomology), ~MSc (Computer Science) Earlham College Instructional Technologist
<<tiddlerbox "Control slideshow" "SlideshowOperation" "How to use the slideshow controls" 420 240>>
-s-
!Disclaimer
* This slideshow has a ''zero Microsoft footprint''.
* no Powerpoint was harmed in the production of these slides
-s-
!Introduction
<<tiddler Abstract>>
-s-
!!The Why's and Wherefore's
In prosletysing this approach of 'social learning', where am I coming from?
In order to situate the thrust behind Earlham Learning Spaces we need to quickly look at some fundamental questions.
# Why bother with "social software" in the realm of teaching? See [[Models of Learning]]
# Why not use free online systems such as Facebook, Ning, etc, rather than go to the trouble of hosting your own? [[Project Tomorrow|http://www.facebook.com/pages/Project-Tomorrow/5701748075]] ((on Facebook(this Facebook site is why educational orientation and Facebook are immiscible)))
# Why not go with a (("safe" commercial alternative(because there isn't one)))?
# We've already got a Course Management system (eg Moodle), ((why can't that do the job(Moodle is a Course Management System oriented towards courses rather than learners)))?
# Why Elgg and not ((WordPress(~WordPress is not a system designed for Social Networking, Elgg is))) or other blogging system?
-s-
!!Content for Web presence
+++!!![Dynamic content|blogging system]
Featuring:
* Easy to write and format (WYSWG interface). Spell checker.
* Easy to embed media from within or outside of system, eg own photos, Youtube clips
* System wide tags (keywords)
* ''control access to individual blog entries'' -- see [[Access / sharing]]
* Commenting can be restricted to within the site. Protects against spam.
** Akismet spam protection can also be used if open comments are desirable.
* Blog categories can be listed in sidebar
* RSS feeds for blog entries and comments (see Information Flow)
<<miniBrowser http://els.earlham.edu/ieseidm06/weblog/>>
===
+++!!![Static pages|Folio wiki system]
* 'Personal wiki' with WYSWYG interface.
* Add references to blog entries and uploaded files, including graphics
* can 'reflect' on referenced links -- ideal for portfolio purposes.
* control access to individual pages
* move pages around easily
* extremely [[cool sidebar display|graphics/folio_sidebar_display.png]]<<imagebox>> makes it easy to explore
<<miniBrowser http://els.earlham.edu/gpe/page/Home+Page>>
===
+++!!![File Store|personal files and folders]
-- As with blogs and folio pages, files uploaded are stored in a //personal// space (in contrast to Moodle's course file storage).
* Can create folders and nest folders
* upload and storage limits
* types of folder indicate media content (eg photo gallery)
* access restrictions and keywords/tags on folders as well as files
* description and titles constitute crude metadata. Possible to formalise this.
* users have to assert ownership or legal right to share uploaded files.
===
-s-
!!Access / Sharing
What makes Elgg unique is it's access control system. All elgg content items such as blog posting, uploaded file, folder, etc, have access restrictions associated with them.
+++!!![General controls]
* Public -- open access to anyone on the web. Typically, this is what most blogging systems default to. It's desirable that most blog posts and folio pages have public access. RSS feeds only contain content made public.
* Logged in users -- only viewable by users logged in to the system. This is often set to be the default permission for blog postings.
* Private -- only the owner can view. Private postings or todo lists are possible.
===
+++!!![Customisable controls]
;friends :
: makes content visible only to people on your 'friends' list (also 'block this person' link)
; community :
: each elgg community has it's own access control right (see [[Connections / communication]]). Thus setting a blog entry or file to //Community : Future of News// for example, will allow only members of that community to view the posting.
; Access control group :
: here you can create arbitrary groups and add the names of friends to them. For each content item you can then set visibility (access) to the group you specify. (In Connections/Network : Access controls). [[screenshot|graphics/access_control_group.png]]<<imagebox>>
===
-s-
!!Connections / communication
+++!!![Friend]
You make connections within the system by //friending// someone. Friends form the basis of all the specific connections that you make, eg messaging, access groups, etc. Friending merely involves going to a person's profile and clicking on 'add this user as a friend'. You can set friendship moderation so that all friend requests have to be approved by you. Friending will be reciprocal so that if someone 'friends' you, you will automatically 'friend' them back.
===
+++!!![Community]
A community is basically a collection of Elgg users who share a blog, folio and file space. Anyone can create a community and joining a community is moderated in the same way as making a friend. Once a community has it's desired members it can be set to private. Access to content can be set to community members. The community has it's own name and a unique URL allowing direct access. Great potential for group work.
<<miniBrowser http://eduspaces.net/moodlevan/weblog>>
===
+++!!![Active Communication]
; Messaging
: An internal message system allows you to send short messages to your Friends or community. An account setting will enable these to be transmitted to your email address. Notification of friend requests is done via the message system.
; Comment walls
: one of the widgets in the extended profile is the comment wall which is open to all.
<<miniBrowser https://els.earlham.edu/mod/commentwall/walltowall.php?owner=143&other=189&return_url=%2Fmmrice06%2F>>
; Shouts
: Want to tell the world how you're feeling? Shout it out!
; Status
:Announce what you're currently up to. Reading a book? Studying for exam? People want to know.
===
-s-
<<tiddler Profile>>
-s-
!! Information flow/ RSS feeds
; Producing RSS:
: RSS feeds are produced by almost every source and are indicated by [img[graphics/rss_feed_icon.png]]. Note that only public access items such as blog posts can go into an RSS feed -- everything else requires authentication on the feed.
; Recycling /aggregating RSS:
: Using Feeds/Your resources you can subscribe to external RSS feeds (when it works!). You can also take an RSS feed from a source you own and pipe it into your blog (Publish to blog). You can maintain a Tiddlywiki and pipe the output into your blog. [[screenshot|graphics/feeds_display.png]]<<imagebox>>
-s-
<<tiddler [[Optional plugins]]>>
-s-
!!Earlham Learning Spaces: making first steps with Elgg
Two teachers at Earlham used the blogging feature of Elgg with their classes in the Fall of 07 and three classes used it in Spring of 08. I will briefly discuss the classes that used ELS, the pedagogical plusses, and some of the drawbacks together with solutions.
* Hispanic Short Story. Use as straight blogging system to make commentary about films watched. Have students tag posts and comment on each other's work eg Holly Storck-Post :: Blog :: Sleepy Hollow
* Journalism 1. This class had to make several blog postings throughout the semester. At the end of the semester the prof created a web page which linked to the student's final magnum opus.
* Latin American Narrative. Here students make blog postings for each film that they watch. They tag each entry and make comments on each other's work.
* Advanced Spanish Conversation and composition. Here the semi-public nature of the blogs allows students to see the quality of their peer's writing and enables the teacher to encourage and enage students to improve their fluency in Spanish.
* Holocaust and Film. A lot of the material shown is profoundly disturbing. How can students write about this and yet share their feelings in a secure environment? The community feature of Elgg empowers this.
-s-
!!Using Earlham Learning Spaces with a class
I interviewed Ana Cornide, a new Spanish teacher at Earlham, to ask her about her experiences using the Earlham Learning Spaces (Elgg).
+++!!![1. Why did you want to use a blog with your class?]
Basically, Ana said that she was not clear about blogging until I showed her the Earlham Learning Spaces system.
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/1.why_blog.mp3" width="100" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/1.why_blog.mp3"/>
</object> <span>0:29</span>
</html>
===
+++!!![2. How did you use Earlham Learning Spaces?]
* the students had to watch a movie every week and write a review which they posted to their blog.
** [they were also ask to tag the blog entry with a keyword for the film so that all the posting for that tag could be seen]
* they were able to see blog entries and develop ideas and be aware of each other's writing
* improvements in grammatical expression and ideas
* students found one major review per week plus comments was exhausting
* marked and visible improvement in writing over the semester.
* especially good for 2^^nd^^ language acquisition.
* when making comments on each other's work students can easily see quality writing. Of great benefit pedgogically.
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/2.how_used.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/2.how_used.mp3"/>
</object><span>2:59</span>
</html>
===
+++!!![3. Commenting]
* students wrote comments on each other's blog postings.
* they were required to write three per week but they often wrote more. They did feel valued with these.
* Ana read all the comments and fed her remarks back to the students. Good pedagogy.
===
+++!!![4. Friends]
* Earlham learning spaces seemed to be 'friendly'
* Similar in feel to Facebook -- comfortable space
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/3.friends.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/3.friends.mp3"/>
</object><span>0:35</span>
</html>
===
+++!!![5. A social learning community]
* environment that's comfortable, safe and friendly
* students are vulnerable -- become a community
* exposing their creations to others -- trust others
* develop a ''learning community'' inside and outside the class
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/4.facebook_comparison.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/4.facebook_comparison.mp3"/>
</object><span>2:51</span>
</html>
===
+++!!![6. Use it again?]
* ''yes''
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/5.use_again.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/5.use_again.mp3"/>
</object><span>0:11</span>
</html>
===
+++!!![7. Postscript -- personal pictures]
* value of personal pictures (avatars)
<html>
<object type="application/x-shockwave-flash" data="audio/emff_comments.swf?src=audio/6.personal_pictures.mp3" width="120" height="18" align="center">
<param name="movie" value="audio/emff_comments.swf?src=audio/6.personal_pictures.mp3"/>
</object><span>0:53</span>
</html>
===
+++!!![8. Tagging]
Tagging was useful to aggregate all the blog postings for a particular film:
<<miniBrowser http://els.earlham.edu/search/index.php?weblog=danzon>>
===
-s-
!!Pedagogical uses of Els
+++!!![Summary of advantages]
* shallow learning curve. Easy to get started.
* personal space -- files are stored in your own domain
* Familiar concepts such as 'friending'
* easy to explore (and get lost!)
* system-wide tagging/keywords helps make connections
* no need for expensive and difficult to use client software (eg Dreamweaver) to get going on the web.
* access controls add to the level of trustiness
===
+++!!![General areas]
; group research :
: the community feature makes genuine group research possible. Group wiki pages are easy with Folio. File space is owned by the community and can be controlled to community access only (unlike other wikis and blogs). Community blog records individual contributors. Profile area can be used to describe the aims or goals of the group.
; reflective commentary
: this is expanded further in my [[Interview with Ana Cornide]]
; eportfolio of academic development.
: this is a major area of interest. See [[MUG(Moodle Users Group) presentation|NITLE Moodle Users Group conference]].
===
+++!!![Formal uses]
* Class blogging. Value not to be underestimated.
* eportfolio -- integration with Moodle
* Student clubs (Earlham Volunteer Exchange)
* Shared documentation space (ECS)
* Community wiki -- Graduate programs in Education. Open access content:
<<miniBrowser http://els.earlham.edu/gpe/page/Home+Page>>
===
-s-
!!Drawbacks
A major drawback for teaching faculty is the issue of grading. How does one grade blog posts or other content?
While it's advantageous to have posts visible to the class teachers want their response comments and grades to be kept private. This of course is where Moodle excels and a Moodle "blogging Activity" which would import class blog posts which could then be graded within the Moodle system would be ideal.
-s-
Having glimpsed the capabilities of the Elgg social networking platform, we can now see how it can be used as an ideal tool to address different models of learning:
!!Learning Models for 21st Century
From [[21st Century Learners - and their approaches to learning|http://ultibase.rmit.edu.au/Articles/sept02/lambert1.htm]]
+++!!![The Collaborator]
For this learner networks of people, knowledge, skills and ideas are the sources of learning. For this learner new brain research which stresses the importance of social interaction is a significant rationale.
The Collaborator-learner:
* //seeks out and maintains links and networks//
* //negotiates and exchanges ideas//
* //uses new technology to support collaborative work//
* contributes and adds value to cooperative learning processes
* also exploits and derives value from them
* is a team player, able to reach ‘win-win’ agreements
What sort of learning environment does the Collaborator require? This learner needs access to knowledge and ideas, especially those of practitioners. This learner needs partnerships and networks from which to profit. This learner needs support for development of people skills and a sense of personal value within collaborative ventures with others.
===
+++!!![The Free Agent]
This learner makes full use of continuous, open-ended and life-long styles and systems of learning. This is a learner who is:
* flexible, able to keep pace with change, to take advantage of it
* able too to cope with changing requirements of an unstable job market and of employers who ‘are by no means certain and often ambiguous about the necessary qualifications of graduates’ (de Weert, 1998, p.27)
* more concerned with personal transferable skills than with those relating to particular occupations - this learner is not bound to an occupation
* //conversant with new technology// and therefore not constrained by place and the accessibility of instructors
* independent, self-reliant, using new combined courses of study, rather than those which are profession-related
* able to take advantage of modularity, credit transfer, and arrangements for accumulated learning.
This Free-Agent learner requires opportunity to engage in practical work, to //integrate performance and learning//. This learner needs opportunity to plan flexibly, to seek out a wide range of sources and use these creatively and effectively.
===
+++!!![The Wise Analyser]
This learner gathers evidence of effective activity, scrutinises it and applies its conclusions to new problems and new contexts.
The Wise Analyser is:
* //reflective and critical//
* skilled at the processes of research, testing of validity and the application of findings
* close to the world of work and opportunities for action research
* able to argue judgments securely
* able to apply and adapt arguments to new contexts and to use them in the management of change.
This learner requires opportunity to analyse and manage processes and to apply analysis to new situations. This learner seeks to pursue initiatives through circular processes of identification, analysis, result, impact and evaluation.
===
+++!!![The Creative Synthesiser]
This learner //connects across themes and disciplines, cross-fertilises ideas, integrates separate concepts and creates new vision and new practice//.
For this learner knowledge does not rest on particular ways of seeing the world. This learner:
* has ‘new ways of seeing’ (Bowden & Marton, 1998, p.278)
* puts aside ideas that learning is linear and confirms to us that everything is inter-related and complex
* is able to create, investigate and to seize opportunities for development and change.
The Creative Synthesiser requires complex and stimulating learning environments, with access to disparate disciplines. This learner needs opportunities to negotiate across boundaries, together with the framework for creating radical visions and seeing them become real.
===
-s-
!!Trying out Elgg
* [[Eduspaces|http://eduspaces.net/]] is a free to join elgg system which attracts activity from all over the world. My [[Moodle Vanguard|http://eduspaces.net/moodlevan/weblog]] community runs from here.
* If you want to run your own Elgg service without having to host it yourself, try [[GlieseConnect.com's Elgg promotion|http://glieseconnect.com/elgg.aspx]]. For $60 a year (a bargain!) they provide an Elgg install which you can customize or not and you don't have to worry about backups!
* Elgg is rather popular in the UK. I am a member of the [[UK Elgg user group|http://community.brighton.ac.uk/elgguser/weblog/]] hosted at Sussex University, Brighton
* The [[new version of Elgg|http://barnabas.lly.earlham.edu/elgg11]] is radically different and does present some challenges, but is emerging as a [[vibrant community|http://community.elgg.org]]
!!Getting started on Earlham Learning Spaces
ELS uses a system called [[Elgg|http://www.elgg.org]]. We are currently using version 0.82 but I will be rolling out v0.9 soon.
# Get a user account from MarkP
# [[Starting up]]
# [[Blog post]]
# [[Add friend]]
# [[Send a message]]
[[General principles]]
Author : Mark Pearson
Last Updated: 14-June-2008
----
Powered By: [[TiddlyWiki|http://www.tiddlywiki.com]]
Copyright content:
<html>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/" title="Creative Commons Attribution-Share Alike 3.0 United States License">
<img alt="Creative Commons License" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png" />
</a></html>
!!Cutting edge plugin features
* Image gallery. Upload images and display in cool 'lightbox' fashion. Implemented as 'Gallery' folder type.
* Multimedia. Upload mp4 or other movie -- convert to flash based presentation similar to ~YouTube. Huge advantages for non-copyablity.
* Integration with cell phone -- send SMS messages to 'Shout' system. Send photos / movie clips to display in own area. Huge potential for integration with cell phone technology.
* Rate blog postings.
* integration with Moodle
* sitewide discussion forum
* eportfolio plugin
* administrative and user enhancement features. Who's online? Tag cloud, send message from admin to all users, take system offline for maintenance
<!--{{{-->
<div id='header' class='header'>
<div class='headerShadow'>
<span class='searchBar' macro='search'></span>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu'>
<span refresh='content' tiddler='MainMenu'></span>
<span id='noticeBoard' refresh='content' tiddler='NoticeBoard'></span>
</div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='MochaSideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlersBar' ondblclick="config.macros.tiddlersBar.onTiddlersBarAction(event)"></div>
<div id='tiddlerDisplay'></div>
</div>
<div id='contentFooter' refresh='content' tiddler='contentFooter'></div>
<!--}}}-->
* [[group research]]
* [[reflective commentary]]
* portfolio of academic development
!!Pedagogical uses of Els
+++!!![Summary of advantages]
* shallow learning curve. Easy to get started.
* personal space -- files are stored in your own domain
* Familiar concepts such as 'friending'
* easy to explore (and get lost!)
* system-wide tagging/keywords helps make connections
* no need for expensive and difficult to use client software (eg Dreamweaver) to get going on the web.
* access controls add to the level of trustiness
===
+++!!![General areas]
; group research :
: the community feature makes genuine group research possible. Group wiki pages are easy with Folio. File space is owned by the community and can be controlled to community access only (unlike other wikis and blogs). Community blog records individual contributors. Profile area can be used to describe the aims or goals of the group.
; reflective commentary
: this is expanded further in my [[Interview with Ana Cornide]]
; eportfolio of academic development.
: this is a major area of interest. See MUG(Moodle Users Group) presentation.
===
+++!!![Formal uses]
* Class blogging. Value not to be underestimated.
* eportfolio -- integration with Moodle
* Student clubs (Earlham Volunteer Exchange)
* Shared documentation space (ECS)
* Community wiki -- Graduate programs in Education. Open access content:
<<miniBrowser http://blogs.frumentius.earlham.edu/gpe/page/Home+Page>>
===
Create a folder of type Photo gallery and upload files
!!Adding photos to Photo gallery
# go to @@Your Files@@
# +++[Create a new folder]>
* Folder Type : Photo gallery
* Access restrictions : logged in users
* Keywords : add a tag
* @@Create@@
===
# Open folder
# scroll down and +++[Upload a file]>
* Browse for the graphic
* Type in File title:
* add a Description
* Think about access : making this public exposes it to the web
* add a keyword/tag. Get into the habit of tagging your stuff
* ''Check the 'sharing file' box''. Nothing will happen unless you do this.
* Upload
===
* [[Nathan Garrett portfolio|http://conversation.cgu.edu/garrettn/page/Nathan+Garrett+Portfolio]] at Claremont
* [[Brian Thoms CV|http://conversation.cgu.edu/thomsb/page/My+Curriculum+Vitae]] at Claremont
* [[Using Elgg as an eportfolio|http://community.brighton.ac.uk/cc217/weblog/24974.html]] conversation in UK Elgg User Group at Community@Brighton
* Chris Cardew (Swansea) [[virtual careers|https://oremi.swan.ac.uk/vcareers/]] community CV! Using the Elgg Profile and text widget to construct a C.V. Interesting.
* Chris Cardew's [[portfolio workshop|https://oremi.swan.ac.uk/lscardcj/presentations/7]]
* [[Lolipop ELP - Online Language Portfolio|http://lolipop-portfolio.eu/index.html]] -- this is a Moodle plugin.
* [[portfolio forum on Moodle.org|http://moodle.org/mod/forum/view.php?id=6847]]
* [[epsilen corporate eportfolio|http://personal.markp.earlham.epsilen.com]]
* [[mahara support forum|http://www.mahara.org/forum/3]]
* [[mahara documents|https://eduforge.org/docman/?group_id=176]] including research report.
* [[Dr. Helen Barrett's Bookmarks|http://helenbarrett.com/portfolios/bookmarks.html]]
* [[eportfolios community on Edusapces|http://eduspaces.net/mod/forum/forum.php?weblog=eportfolio]]
!!Personal profile
* default 'landing page'
* extended profile allows you to enter a slew of personal details and control access to each.
* add a large site picture
* customizable using widgets including arbitrary HTML, comment wall, RSS feeds, friend blog display, etc
!!Questions relating to the use of e-portfolio
From [[The Open Polytechnic of New Zealand ePortfolio Implementation Case Study|http://eduforge.org/docman/view.php/176/1522/TOPNZ%20ePortfolio%20Implementation%20Case%20Study.pdf]]
* understanding how to use ePortfolios not only from both a tutor and student perspective,
* reviewing current documentation and research on ePortfolios,
* testing and learning about the Mahara ePortfolio environment and its functionalities,
* learning how to set up an environment for student feedback,
* determining which portions of a course and associated assessments could be used in relation to ePortfolios
* how to best promote ePortfolio use to students.
Some conclusions:
<<<
Mahara ePortfolio was used to (i) showcase students’ work, (ii) reflect their learning process,
(iii) help them create blogs and create an online version of their curriculum, and (iv) help
them practice at editing on the Internet. Students who used Mahara ePortfolio enjoyed to
be able to showcase their work and to create a sense of online community
<<<
Overall, 'satisfactory'.
Other case studies and eportfolio material related to Mahara [[here|http://eduforge.org/docman/?group_id=176]]
From [[Auckland University case study|http://eduforge.org/docman/view.php/176/1516/AUT%20ePortfolio%20Implementation%20Case%20Study.pdf]] Technical issues were seen as demoralising; "The main consequence of these technical issues was that significant amounts of time were needed to develop competence and confidence for both staff and students." +++[Other comments :]>
Students quickly understood the conceptual basis of the application but it took a much longer
time from them to be able to use the application proficiently. While the project was initially
received with interest from students, it took some time for teachers to get student buy-in. This
became more difficult as bugs etc occurred. Currently, there is uncertainty about access after
graduation. //For our students, use to date has involved a lot of time and energy for a
(currently) uncertain return on investment//. ''In order to achieve student support for the future,
the application must be available for at least the next two years i.e. until our students have
completed their teachers’ registration requirements''.
AND
Students did not think the software was user friendly and viewed it as additional to their
current workloads. Student participation was tied to assessment and if the use of ePortfolio
was assessed they were more willing to participate.
===
Conclusions from Auckland:
* Collaborative approach between Teachers and Tech support was essential. +++[Details]>
The collaborative approach has been a key facet of this project at AUT and it has been a
great learning experience for all involved. A team approach enabled us to exchange different
ideas and perspectives about the technology and its use within the programme and to build
our understanding collaboratively through regular discussion and interaction. We were also
able to present differing perspectives to students within our papers, but a united front on the
introduction of e-portfolios and issues like “why are we doing this?”. In this way, as a team,
we were able to overcome the problem that many innovations have of a “lone ranger”
operating on her own. ''We would recommend that collaborative approaches be used with the
introduction of ePortfolio technology in future.''
===
!!!Messaging
!!!Comment Wall
My Profile
!!!'Friends'
* individual connections
!!!'Community'
* group connections
!!Content for web presence
!!!1. Dynamic content.
The backbone for a Social Learning Space is a powerful blogging system. Blog entries should be easy to write (spell checker please!) , easy to format (WYSWG editor), easy to manage and taggable with keyword/tags. Comments and trackbacks are //de rigeur//. But how to prevent spam? See [[SLS : Access/Sharing]] for how Elgg handles this problem.
!!!2. Static pages/wiki
It would be nice if one could add content in the form of static web pages to my site. I don't want to have to learn Dreamweaver to create a web site. Even nicer if some of these could have joint editorship with friends. This is accomplished on the Elgg system by a plugin called [[Folio]]. This implements a small scale wiki which is closely bound to the [[access control|SLS : Access/Sharing]] system of Elgg.
!!!3. File store
It would be great to have a space for files that I own, my photos, music that I have created with Garageband, video clips etc. And even better to be able to control access to that space to share with friends / groups etc.
!!RSS feeds
* from blog entries
* Tagged items
* folio entries
* community blogs
!! RSS feed reader
* aggregate your friend's blogs
* incorporate content from your other sources eg Tiddlywiki sites into your blog
!!!Web site bookmark storage / sharing.
Share web sites with others
This is Matt Oquist's personal effort; he's been working on this for some time.
SPDC stands for Seacoast Professional Development Center.
!!Moofolio
<<<
Moofolio is a Moodle block that provides a platform for students and teachers to collect and reflect on portfolio artifacts. It is available as a solution for schools to implement the NH ICT Literacy standards. SPDC provides training on installing and configuring Moodle, adding the Portfolio module, administration, and teacher use of Moodle for online classrooms and the Portfolio.
<<<
* [[Home site|http://www.k12opensource.org/spdc/moofolio/moofolio.html]]
* download from [[Modules & plugins: SPDC Portfolio|http://moodle.org/mod/data/view.php?d=13&rid=686]]
* possible problems with getting to work on version 1.9 [[moodle.org discussion|http://moodle.org/mod/forum/discuss.php?d=85675]]
* +++!!![Features:]
* Provides support for making portfolio artifacts out of :
** submitted course assignments,
** arbitrary WYSIWYG online text entries, and
** arbitrary uploaded files.
* Users are given a "Portfolio Keeper" block and a "File Keeper" block to manage their portfolios and their Moodle Home Folders.
* Separate student and teacher "reflections" can be added to each portfolio artifact.
* Rich publication/sharing controls,
* rich artifact/file searching,
* smooth usability with basic portfolio presentation customizability.
===
!!Issues
Even though this may have a smooth user interface I'd be concerned about pinning a whole e-portfolio system on the efforts and support of a single, lone developer. While the upgrade to 1.9 may work out, there's no telling whether version 2.0 won't break it so badly that he decides not to support Moodle 2.0 at all. Certainly the [[Moodle 2.0 roadmap|http://docs.moodle.org/en/Roadmap#Version_2.0_-_Expected_Late_2008]] promises an explicit [[portfolio API|http://docs.moodle.org/en/Development:Portfolio_API]] which all e-portfolios will be expected to use.
/***
|Name|SearchOptionsPlugin|
|Source|http://www.TiddlyTools.com/#SearchOptionsPlugin|
|Version|2.6.1|
|Author|Eric Shulman - ELS Design Studios|
|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|Story.prototype.search, TiddlyWiki.prototype.search, config.macros.search.onKeyPress|
|Description|extend core search function with additional user-configurable options|
The TiddlyWiki search function normally looks in both tiddler titles and tiddler body content ('text'). However, narrowing the search so that it examines only titles or only text, or expanding the search to include text contained in tiddler tags can be very helpful, especially when searching on common words or phrases. In addition, it is often useful for the search results to show tiddlers with matching titles before tiddlers that contain matching text or tags.
!!!!!Usage
<<<
This plugin adds checkboxes (see below and in AdvancedOptions) to let you selectively configure the TiddlyWiki search function to just examine any combination of tiddler titles, text, or tags. It also provides an option to switch the search results order between 'titles mixed in' (default) and 'titles shown first', as well as an option display the search results as a list of links (in an auto-generated "SearchResults" tiddler), rather than actually displaying all matching tiddlers. You can also enable/disable the "incremental search" (key-by-key searching), so that a search is only initiated when you press the ENTER key or click on the "search:" prompt text.
<<<
!!!!!Configuration
<<<
In additional to the checkboxes in AdvancedOptions, a self-contained control panel is included here for your convenience:
<<option chkSearchTitles>> Search in titles
<<option chkSearchText>> Search in tiddler text
<<option chkSearchTags>> Search in tags
<<option chkSearchFields>> Search in data fields
<<option chkSearchShadows>> Search shadow tiddlers
<<option chkSearchTitlesFirst>> Show title matches first
<<option chkSearchByDate>> Sort matching tiddlers by date
<<option chkSearchList>> Show list of matches in [[SearchResults]]
<<option chkSearchIncremental>> Incremental searching
<<<
!!!!!Installation
<<<
import (or copy/paste) the following tiddlers into your document:
''SearchOptionsPlugin'' (tagged with <<tag systemConfig>>)
^^documentation and javascript for SearchOptionsPlugin handling^^
When installed, this plugin automatically adds checkboxes in the AdvancedOptions shadow tiddler so you can enable/disable the extended search behavior. However, if you have customized your AdvancedOptions, you will need to manually add {{{<<option chkSearchTitles>>}}}, {{{<<option chkSearchText>>}}} and {{{<<option chkSearchTitlesFirst>>}}} (with suitable prompt text) to your customized tiddler.
<<<
!!!!!Revision History
<<<
''2007.02.17 [2.6.1]'' added redefinition of config.macros.search.onKeyPress() to restore check to bypass key-by-key searching (i.e., when chkSearchIncremental==false), which had been unintentionally removed with v2.6.0
''2007.02.13 [2.6.0]'' remove redefinition of config.macros.search.handler since core now includes handling for ENTER key.
''2007.02.08 [2.5.1]'' include 'temporary' tag when creating SearchResults (for use with TemporaryTiddlersPlugin)
''2007.01.29 [2.5.0]'' added support for "sort results by date". Default is to sort alphabetically (standard). When sorted by dates, most recent changes are shown first
''2006.10.10 [2.4.0]'' added support for "search in tiddler data" (tiddler.fields) Default is to search extended data.
''2006.04.06 [2.3.0]'' added support for "search in shadow tiddlers". Default is *not* to search in the shadows (i.e. standard TW behavior). Note: if a shadow tiddler has a 'real' counterpart, only the real tiddler is searched, since the shadow is inaccessible for viewing/editing.
''2006.02.03 [2.2.1]'' rewrite timeout clearing code and blank search text handling to match 2.0.4 core release changes. note that core no longer permits "blank=all" searches, so neither does this plugin. To search for all, use "." with text patterns enabled.
''2006.02.02 [2.2.0]'' in search.handler(), KeyHandler() function clears 'left over' timeout when search input is < 3 chars. Prevents searching on shorter text when shortened by rapid backspaces (<500msec)
''2006.02.01 [2.1.9]'' in Story.prototype.search(), correct inverted logic for using/not using regular expressions when searching
also, blank search text now presents "No search text. Continue anyway?" confirm() message box, so search on blank can still be processed if desired by user.
''2006.02.01 [2.1.8]'' in doSearch(), added alert/return if search text is blank
''2006.01.20 [2.1.7]'' fixed setting of config.macros.search.reportTitle so that Tweaks can override it.
''2006.01.19 [2.1.6]'' improved SearchResults formatting, added a "search again" form to the report (based on a suggestion from MorrisGray)
define results report title using config.macros.search.reportTitle instead of hard-coding the tiddler title
''2006.01.18 [2.1.5]'' Created separate functions for reportSearchResults(text,matches) and discardSearchResults(), so that other developers can create alternative report generators.
''2006.01.17 [2.1.4]'' Use regExp.search() instead of regExp.test() to scan for matches. Correctd the problem where only half the matching tiddlers (the odd-numbered ones) were being reported.
''2006.01.15 [2.1.3]'' Added information (date/time, username, search options used) to SearchResults output
''2006.01.10 [2.1.2]'' use displayTiddlers() to render matched tiddlers. This lets you display multiple matching tiddlers, even if SinglePageModePlugin is enabled.
''2006.01.08 [2.1.1]'' corrected invalid variable reference, "txt.value" to "text" in story.search()
''2006.01.08 [2.1.0]'' re-write to match new store.search(), store.search.handler() and story.search() functions.
''2005.12.30 [2.0.0]'' Upgraded to TW2.0
when rendering SearchResults tiddler, closeTiddler() first to ensure display is refreshed.
''2005.12.26 [1.4.0]'' added option to search for matching text in tiddler tags
''2005.12.21 [1.3.7]'' use \\ to 'escape' single quotes in tiddler titles when generating "Open all matching tiddlers" link. Also, added access key: "O", to trigger "open all" link.
Based on a suggestion by UdoBorkowski.
''2005.12.18 [1.3.6]'' call displayMessage() AFTER showing matching tiddlers so message is not cleared too soon
''2005.12.17 [1.3.5]'' if no matches found, just display message and delete any existing SearchResults tiddler.
''2005.12.17 [1.3.4]'' use {/%%/{/%%/{ and }/%%/}/%%/} to 'escape' display text in SearchResults tiddler to ensure that formatting contained in search string is not rendered
Based on a suggestion by UdoBorkowski.
''2005.12.14 [1.3.3]'' tag SearchResults tiddler with 'excludeSearch' so it won't list itself in subsequent searches
Based on a suggestion by UdoBorkowski.
''2005.12.14 [1.3.2]'' added "open all matching tiddlers..." link to search results output.
Based on a suggestion by UdoBorkowski.
''2005.12.10 [1.3.1]'' added "discard search results" link to end of search list tiddler output for quick self-removal of 'SearchResults' tiddler.
''2005.12.01 [1.3.0]'' added chkSearchIncremental to enable/disable 'incremental' searching (i.e., search after each keystroke) (default is ENABLED).
added handling for Enter key so it can be used to start a search.
Based on a suggestion by LyallPearce
''2005.11.25 [1.2.1]'' renamed from SearchTitleOrTextPlugin to SearchOptionsPlugin
''2005.11.25 [1.2.0]'' added chkSearchList option
Based on a suggestion by RodneyGomes
''2005.10.19 [1.1.0]'' added chkSearchTitlesFirst option.
Based on a suggestion by ChristianHauck
''2005.10.18 [1.0.0]'' Initial Release
Based on a suggestion by LyallPearce.
<<<
!!!!!Credits
<<<
This feature was developed by EricShulman from [[ELS Design Studios|http:/www.elsdesign.com]].
<<<
!!!!!Code
***/
//{{{
version.extensions.searchOptions = {major: 2, minor: 6, revision: 1, date: new Date(2007,2,17)};
//}}}
//{{{
if (config.options.chkSearchTitles==undefined) config.options.chkSearchTitles=true;
if (config.options.chkSearchText==undefined) config.options.chkSearchText=true;
if (config.options.chkSearchTags==undefined) config.options.chkSearchTags=true;
if (config.options.chkSearchFields==undefined) config.options.chkSearchFields=true;
if (config.options.chkSearchTitlesFirst==undefined) config.options.chkSearchTitlesFirst=false;
if (config.options.chkSearchList==undefined) config.options.chkSearchList=false;
if (config.options.chkSearchByDate==undefined) config.options.chkSearchByDate=false;
if (config.options.chkSearchIncremental==undefined) config.options.chkSearchIncremental=true;
if (config.options.chkSearchShadows==undefined) config.options.chkSearchShadows=false;
if (config.optionsDesc) {
config.optionsDesc.chkSearchTitles="Search in tiddler titles";
config.optionsDesc.chkSearchText="Search in tiddler text";
config.optionsDesc.chkSearchTags="Search in tiddler tags";
config.optionsDesc.chkSearchFields="Search in tiddler data fields";
config.optionsDesc.chkSearchShadows="Search in shadow tiddlers";
config.optionsDesc.chkSearchTitlesFirst="Search results show title matches first";
config.optionsDesc.chkSearchList="Search results show list of matching tiddlers";
config.optionsDesc.chkSearchByDate="Search results sorted by modification date ";
config.optionsDesc.chkSearchIncremental="Incremental searching";
} else {
config.shadowTiddlers.AdvancedOptions += "\n<<option chkSearchTitles>> Search in tiddler titles";
config.shadowTiddlers.AdvancedOptions += "\n<<option chkSearchText>> Search in tiddler text";
config.shadowTiddlers.AdvancedOptions += "\n<<option chkSearchTags>> Search in tiddler tags";
config.shadowTiddlers.AdvancedOptions += "\n<<option chkSearchFields>> Search in tiddler data fields";
config.shadowTiddlers.AdvancedOptions += "\n<<option chkSearchShadows>> Search in shadow tiddlers";
config.shadowTiddlers.AdvancedOptions += "\n<<option chkSearchTitlesFirst>> Search results show title matches first";
config.shadowTiddlers.AdvancedOptions += "\n<<option chkSearchList>> Search results show list of matching tiddlers";
config.shadowTiddlers.AdvancedOptions += "\n<<option chkSearchByDate>> Search results sorted by modification date ";
config.shadowTiddlers.AdvancedOptions += "\n<<option chkSearchIncremental>> Incremental searching";
}
if (config.macros.search.reportTitle==undefined) config.macros.search.reportTitle="SearchResults";
//}}}
//{{{
config.macros.search.onKeyPress = function(e)
{
if(!e) var e = window.event;
switch(e.keyCode)
{
case 13: // Ctrl-Enter
case 10: // Ctrl-Enter on IE PC
config.macros.search.doSearch(this);
break;
case 27: // Escape
this.value = "";
clearMessage();
break;
}
if (config.options.chkSearchIncremental) {
if(this.value.length > 2)
{
if(this.value != this.getAttribute("lastSearchText"))
{
if(config.macros.search.timeout)
clearTimeout(config.macros.search.timeout);
var txt = this;
config.macros.search.timeout = setTimeout(function() {config.macros.search.doSearch(txt);},500);
}
}
else
{
if(config.macros.search.timeout)
clearTimeout(config.macros.search.timeout);
}
}
}
//}}}
//{{{
Story.prototype.search = function(text,useCaseSensitive,useRegExp)
{
highlightHack = new RegExp(useRegExp ? text : text.escapeRegExp(),useCaseSensitive ? "mg" : "img");
var matches = store.search(highlightHack,config.options.chkSearchByDate?"modified":"title","excludeSearch");
if (config.options.chkSearchByDate) matches=matches.reverse(); // most recent changes first
var q = useRegExp ? "/" : "'";
clearMessage();
if (!matches.length) {
if (config.options.chkSearchList) discardSearchResults();
displayMessage(config.macros.search.failureMsg.format([q+text+q]));
} else {
if (config.options.chkSearchList)
reportSearchResults(text,matches);
else {
var titles = []; for(var t=0; t<matches.length; t++) titles.push(matches[t].title);
this.closeAllTiddlers(); story.displayTiddlers(null,titles);
displayMessage(config.macros.search.successMsg.format([matches.length, q+text+q]));
}
}
highlightHack = null;
}
//}}}
//{{{
TiddlyWiki.prototype.search = function(searchRegExp,sortField,excludeTag)
{
var candidates = this.reverseLookup("tags",excludeTag,false,sortField);
// scan for matching titles first...
var results = [];
if (config.options.chkSearchTitles) {
for(var t=0; t<candidates.length; t++)
if(candidates[t].title.search(searchRegExp)!=-1)
results.push(candidates[t]);
if (config.options.chkSearchShadows)
for (var t in config.shadowTiddlers)
if ((t.search(searchRegExp)!=-1) && !store.tiddlerExists(t))
results.push((new Tiddler()).assign(t,config.shadowTiddlers[t]));
}
// then scan for matching text, tags, or field data
for(var t=0; t<candidates.length; t++) {
if (config.options.chkSearchText && candidates[t].text.search(searchRegExp)!=-1)
results.pushUnique(candidates[t]);
if (config.options.chkSearchTags && candidates[t].tags.join(" ").search(searchRegExp)!=-1)
results.pushUnique(candidates[t]);
if (config.options.chkSearchFields && store.forEachField!=undefined) // requires TW2.1 or above
store.forEachField(candidates[t],
function(tid,field,val) { if (val.search(searchRegExp)!=-1) results.pushUnique(candidates[t]); },
true); // extended fields only
}
// then check for matching text in shadows
if (config.options.chkSearchShadows)
for (var t in config.shadowTiddlers)
if ((config.shadowTiddlers[t].search(searchRegExp)!=-1) && !store.tiddlerExists(t))
results.pushUnique((new Tiddler()).assign(t,config.shadowTiddlers[t]));
// if not 'titles first', or sorting by modification date, re-sort results to so titles, text, tag and field matches are mixed together
if(!sortField) sortField = "title";
var bySortField=function (a,b) {if(a[sortField] == b[sortField]) return(0); else return (a[sortField] < b[sortField]) ? -1 : +1; }
if (!config.options.chkSearchTitlesFirst || config.options.chkSearchByDate) results.sort(bySortField);
return results;
}
//}}}
// // ''REPORT GENERATOR''
//{{{
if (!window.reportSearchResults) window.reportSearchResults=function(text,matches)
{
var title=config.macros.search.reportTitle
var q = config.options.chkRegExpSearch ? "/" : "'";
var body="\n";
// summary: nn tiddlers found matching '...', options used
body+="''"+config.macros.search.successMsg.format([matches.length,q+"{{{"+text+"}}}"+q])+"''\n";
body+="^^//searched in:// ";
body+=(config.options.chkSearchTitles?"''titles'' ":"");
body+=(config.options.chkSearchText?"''text'' ":"");
body+=(config.options.chkSearchTags?"''tags'' ":"");
body+=(config.options.chkSearchFields?"''fields'' ":"");
body+=(config.options.chkSearchShadows?"''shadows'' ":"");
if (config.options.chkCaseSensitiveSearch||config.options.chkRegExpSearch) {
body+=" //with options:// ";
body+=(config.options.chkCaseSensitiveSearch?"''case sensitive'' ":"");
body+=(config.options.chkRegExpSearch?"''text patterns'' ":"");
}
body+="^^";
// numbered list of links to matching tiddlers
body+="\n<<<";
for(var t=0;t<matches.length;t++) {
var date=config.options.chkSearchByDate?(matches[t].modified.formatString('YYYY.0MM.0DD 0hh:0mm')+" "):"";
body+="\n# "+date+"[["+matches[t].title+"]]";
}
body+="\n<<<\n";
// open all matches button
body+="<html><input type=\"button\" href=\"javascript:;\" ";
body+="onclick=\"story.displayTiddlers(null,["
for(var t=0;t<matches.length;t++)
body+="'"+matches[t].title.replace(/\'/mg,"\\'")+"'"+((t<matches.length-1)?", ":"");
body+="],1);\" ";
body+="accesskey=\"O\" ";
body+="value=\"open all matching tiddlers\"></html> ";
// discard search results button
body+="<html><input type=\"button\" href=\"javascript:;\" ";
body+="onclick=\"story.closeTiddler('"+title+"'); store.deleteTiddler('"+title+"'); store.notify('"+title+"',true);\" ";
body+="value=\"discard "+title+"\"></html>";
// search again
body+="\n\n----\n";
body+="<<search \""+text+"\">>\n";
body+="<<option chkSearchTitles>>titles ";
body+="<<option chkSearchText>>text ";
body+="<<option chkSearchTags>>tags";
body+="<<option chkSearchFields>>fields";
body+="<<option chkSearchShadows>>shadows";
body+="<<option chkCaseSensitiveSearch>>case-sensitive ";
body+="<<option chkRegExpSearch>>text patterns";
body+="<<option chkSearchByDate>>sort by date";
// create/update the tiddler
var tiddler=store.getTiddler(title); if (!tiddler) tiddler=new Tiddler();
tiddler.set(title,body,config.options.txtUserName,(new Date()),"excludeLists excludeSearch temporary");
store.addTiddler(tiddler); story.closeTiddler(title);
// use alternate "search again" label in <<search>> macro
var oldprompt=config.macros.search.label;
config.macros.search.label="search again";
// render/refresh tiddler
story.displayTiddler(null,title,1);
store.notify(title,true);
// restore standard search label
config.macros.search.label=oldprompt;
}
if (!window.discardSearchResults) window.discardSearchResults=function()
{
// remove the tiddler
story.closeTiddler(config.macros.search.reportTitle);
store.deleteTiddler(config.macros.search.reportTitle);
}
//}}}
''18 tiddlers found matching '{{{links}}}'''
^^//searched in:// ''titles'' ''text'' ''tags'' ''fields'' ^^
<<<
# 2008.05.30 17:53 [[ICI : Earlham learning spaces presentation]]
# 2008.05.30 17:52 [[Elgg as an ePortfolio]]
# 2008.05.30 14:29 [[NITLE: Instructional Technologists Conference]]
# 2008.05.16 15:38 [[Content for Web presence]]
# 2008.05.14 22:31 [[Elgg features : Content]]
# 2008.05.14 14:35 [[StyleSheet]]
# 2008.05.14 10:50 [[Exabis ePortfolio]]
# 2008.04.23 10:42 [[Portfolio links]]
# 2008.04.02 15:17 [[ePortfolio links]]
# 2008.02.26 17:53 [[FreeFolio - WordPress based]]
# 2008.01.17 14:10 [[Blog post]]
# 2007.12.10 10:50 [[Community]]
# 2007.12.07 13:01 [[Group/Class web site]]
# 2007.11.05 17:25 [[TiddlyLightBoxDocs]]
# 2007.11.05 12:18 [[DropDownMenuPlugin]]
# 2007.11.05 12:15 [[AccordionMenuPlugin]]
# 2007.02.17 10:26 [[SearchOptionsPlugin]]
# 2007.01.01 07:06 [[TiddlyLightBoxExamples]]
<<<
<html><input type="button" href="javascript:;" onclick="story.displayTiddlers(null,['ICI : Earlham learning spaces presentation', 'Elgg as an ePortfolio', 'NITLE: Instructional Technologists Conference', 'Content for Web presence', 'Elgg features : Content', 'StyleSheet', 'Exabis ePortfolio', 'Portfolio links', 'ePortfolio links', 'FreeFolio - WordPress based', 'Blog post', 'Community', 'Group/Class web site', 'TiddlyLightBoxDocs', 'DropDownMenuPlugin', 'AccordionMenuPlugin', 'SearchOptionsPlugin', 'TiddlyLightBoxExamples'],1);" accesskey="O" value="open all matching tiddlers"></html> <html><input type="button" href="javascript:;" onclick="story.closeTiddler('SearchResults'); store.deleteTiddler('SearchResults'); store.notify('SearchResults',true);" value="discard SearchResults"></html>
----
<<search "links">>
<<option chkSearchTitles>>titles <<option chkSearchText>>text <<option chkSearchTags>>tags<<option chkSearchFields>>fields<<option chkSearchShadows>>shadows<<option chkCaseSensitiveSearch>>case-sensitive <<option chkRegExpSearch>>text patterns<<option chkSearchByDate>>sort by date
/***
''This plugin was previously called StyleChooser.''
|Name|SelectThemePlugin|
|Created by|SimonBaird and SaqImtiaz|
|Location|http://tw.lewcid.org/#SelectThemePlugin|
|Version|1.2.5|
|Requires|~TW2.x|
!Description
*An alternative style switcher, can be used to switch just stylesheets and/or pagetemplates, or a combination of both (a theme)
*you can add your own stylesheets and pagetemplates, or use a ThemePack, like BigThemePack.
!Usage
* You have to have fetch or create some styleSheets and pageTemplates to use this plugin.
**You can either get a ThemePack like BigThemePack which automatically adds themes to ThemeSelect.
**or create tiddlers with styleSheets and pageTemplates and tag them styleSheets and pageTemplates respectively.
* Put {{{<<themeSelect style 'Select theme'>>}}} in your SideBarOptions.
!Creating Theme Packs
*You can create your own theme pack if you like. Instructions can be found [[here.|CreateThemePack]]
!History
*20-Dec-06, v 1.2.5, fixed horizontal rules for IE (thanks Clint), compatibility fix with HoverMenuPlugin
* 08-Sept-06, v1.2.4, fixed bug with TW2.1
* 15-May-06, v1.2.3, added paramifier so you can put theme on url, eg http://www.somewhere.com/twfile.html#theme:Berry2, thanks Clint (Simon).
* 28-Apr-o6, v1.2.2, fixed bug with opening TW after deleting themepacks. (Saq)
* 26-Apr-06, v1.2.1, more code optimization, dropdowns now updated on the fly. (Saq)
* 25-Apr-06, v1.2.0, added 3rd party ThemePack support, and made various other improvements.(Simon & Saq)
* 24-Apr-06, v1.1.0, added: no styles and default styles options,<<br>>support for ThemePack, support for tag variations(Saq)
* 21-Apr-06, v1.0.0, Reworked dropdowns to include option for pagetemplates (Saq)
* 21-Apr-06, v0.9.0, Rewrote and added Saq's lovely dropdown select (Simon)
* 20-Apr-06, v0.0.1, Basic switcher working (Simon)
!Examples
|!Source|!Output|h
|{{{<<themeSelect style>>}}} for a dropdown with StyleSheets|<<themeSelect style>>|
|{{{<<themeSelect pagetemplate>>}}} for a dropdown with PageTemplates|<<themeSelect pagetemplate>>|
|{{{<<themeSelect style customlabel>>}}} to use a customlabel|<<themeSelect style customlabel>>|
* When applying a stylesheet or template, it also looks for a template or stylesheet respectively based on naming convention, eg MyFunkyStyleSheet and MyFunkyPageTemplate.
!Notes
* See also http://www.tiddlytools.com/#SelectStyleSheetPlugin for a more feature-rich style sheet switcher
! Ideas
* do ViewTemplate also?
* Pretty up the [x] bit
!Code
***/
//{{{
// for compatibility with TW <2.0.9
if (!Array.prototype.contains)
Array.prototype.contains = function(item)
{
return this.find(item) != null;
};
// for compatibility with TW <2.0.9
if (!Array.prototype.containsAny)
Array.prototype.containsAny = function(items)
{
for(var i=0; i<items.length; i++)
if (this.contains(items[i]))
return true;
return false;
};
//}}}
//{{{
version.extensions.SelectTheme = { major: 1, minor: 2, revision: 5, date: new Date(2006,12,20),
source: "http://tw.lewcid.org/#SelectTheme"
};
config.SelectTheme = {
things: {
style: {
tag: ["StyleSheets","StyleSheet","styleSheet","styleSheets","stylesheet","stylesheets"],
theDefault: "StyleSheet",
suffix: "StyleSheet",
notify: refreshStyles,
cookie: "txtStyleSheet",
otherThing: "pagetemplate",
label: "Choose StyleSheet: ",
tooltip: "Choose a StyleSheet",
caseNone: { text:"None", title:"NoStyleSheet"},
caseDefault: { text:"Default", title:"StyleSheet" }
},
pagetemplate: {
tag: ["PageTemplates","PageTemplate","pageTemplates","pageTemplate","pagetemplate","pagetemplates"],
theDefault: "PageTemplate",
suffix: "PageTemplate",
notify: refreshPageTemplate,
cookie: "txtPageTemplate",
otherThing: "style",
label: "Choose PageTemplate: ",
tooltip: "Choose a PageTemplate",
caseNone: { text:"None", title:"NoPageTemplate"},
caseDefault: { text:"Default", title:"PageTemplate" }
}
},
specialCases: ["caseNone","caseDefault"]
};
TiddlyWiki.prototype.removeNotification = function(title,fn) {
for (var i=0;i<this.namedNotifications.length;i++)
if((this.namedNotifications[i].name == title) && (this.namedNotifications[i].notify == fn))
this.namedNotifications.splice(i,1); // counting on it only being there once
}
var things = config.SelectTheme.things;
var specialCases=config.SelectTheme.specialCases;
for (var zz in things) {
// make sure we have a value
if (!config.options[things[zz].cookie])
config.options[things[zz].cookie] = things[zz].theDefault;
// remove core notify
store.removeNotification(things[zz].theDefault,things[zz].notify);
// and add our one
store.addNotification(config.options[things[zz].cookie],things[zz].notify);
}
//checks to see if a tiddler exists in store or as a shadow.
TiddlyWiki.prototype.isTiddler= function (title)
{return store.tiddlerExists(title) || store.isShadowTiddler(title)}
//hijack core function & make sure template exists
window.applyPageTemplate_themeSelect=window.applyPageTemplate;
window.applyPageTemplate=function(title){
if(!store.isTiddler(title))
{title = things.pagetemplate.theDefault;}
applyPageTemplate_themeSelect(title);
}
TiddlyWiki.prototype.makeActiveTheme = function(what,title,alsoCheckOtherThing) {
var thing = things[what];
if (!store.isTiddler(title))
title = thing.theDefault;
var oldTitle = config.options[thing.cookie];
if (what == "style") {
// remove old style element from DOM
var oldStyleElement = document.getElementById(oldTitle);
oldStyleElement.parentNode.removeChild(oldStyleElement);
}
store.removeNotification(oldTitle,thing.notify);
store.addNotification(title,thing.notify);
store.notify(title);
config.options[thing.cookie] = title;
saveOptionCookie(thing.cookie);
if (alsoCheckOtherThing)
this.makeActiveTheme(thing.otherThing,
title.replace(new RegExp(thing.suffix+"$"),"") + things[thing.otherThing].suffix,
false);
};
if (config.hoverMenu)
{
old_hovermenu_makeActiveTheme = TiddlyWiki.prototype.makeActiveTheme;
TiddlyWiki.prototype.makeActiveTheme = function(what,title,alsoCheckOtherThing)
{
old_hovermenu_makeActiveTheme.apply(this,arguments);
if (!alsoCheckOtherThing)
config.hoverMenu.handler();
};
}
config.shadowTiddlers.NoStyleSheet = "";
config.shadowTiddlers.NoPageTemplate = config.shadowTiddlers.PageTemplate;
function switchTheme(e){
if (!e) var e = window.event;
var theTarget = resolveTarget(e);
var theLink = theTarget;
var switchTo= theLink.getAttribute("switchTo");
var mode = theLink.getAttribute("mode");
if ((config.options[things[mode].cookie])!=switchTo)
{store.makeActiveTheme(mode,switchTo,true);};
return(false);
}
config.macros.themeSelect={};
config.macros.themeSelect.dropdownchar = (document.all?"▼":"▾");
config.macros.themeSelect.handler = function(place,macroName,params,wikifier,paramString,tiddler){
var arrow = config.macros.themeSelect.dropdownchar;
var mode = params[0];
var label = (params[1]?params[1]:things[mode].label) + arrow;
var cookie = (config.options[things[mode].cookie]);
var onclick = function(e)
{ if (!e) var e = window.event;
var popup = Popup.create(this);
var tagged=[];
store.forEachTiddler(function(title,tiddler) {
if ((tiddler.tags).containsAny(things[mode].tag)){
tagged.push(tiddler.title);}
});
//integrate ThemePacks
if (config.themes) {
// see what themes have been loaded...
for (var i=0;i<config.themes.length;i++) {
// see if there is one
var lookForThis = config.themes[i] + things[mode].suffix;
if (store.isShadowTiddler(lookForThis)) {
tagged.pushUnique(lookForThis);
}
}
tagged = tagged.sort();
}
//this function used later to create buttons
var createThemeButton = function(switchTo){
var theButton = createTiddlyButton(createTiddlyElement(popup,"li"),text,null,switchTheme,useClass);
theButton.setAttribute("switchTo",switchTo);
theButton.setAttribute("mode",mode);};
//create Buttons for None(shadow styles) & Default (StyleSheet)
// Default button is not created if StyleSheet doesnt exist.
for(var t=0; t<specialCases.length; t++){
var special = specialCases[t];
var text = things[mode][special].text;
var useClass = "tiddlyLinkExisting"; //redundant, optimize!
if ((things[mode][special].title==cookie)||(special=="caseNone"&&!store.isTiddler(cookie)))
{text+= " [x]";
useClass = "currentlySelected";}
if (!((special=="caseDefault")&&(!store.getTiddler(things[mode][special].title))))
createThemeButton(things[mode][special].title); }
//insert horizontal rule
//createTiddlyElement(createTiddlyElement(popup,"li"),"hr");
createTiddlyElement(createTiddlyElement(popup,"li",null,"listBreak"),"div");
//create buttons for all other stylesheet tiddlers
for(var t=0; t<tagged.length; t++)
{ var useClass = "tiddlyLinkExisting";
var text = (tagged[t]).replace((things[mode].suffix),"");
if (tagged[t]==(cookie) )
{text+=" [x]"; useClass="currentlySelected";}
if ((tagged[t]!= (things[mode].theDefault))&&tagged[t]!= (things[mode].none))
{createThemeButton(tagged[t]);}}
Popup.show(popup,false);
e.cancelBubble = true;
if (e.stopPropagation)
e.stopPropagation();
return(false);
};
var createdropperButton = function(place){
var sp = createTiddlyElement(place,"span",null,"ThemeChooserButton");
var theDropDownBtn = createTiddlyButton(sp,label,things[mode].tooltip,onclick);
};
createdropperButton(place);
};
setStylesheet(".popup li a.currentlySelected {background:#ccc;color:black;font-weight:bold;}","currentlySelectedStyle"); // could do better probably...
config.macros.layoutChooser=config.macros.themeSelect;
//shadow tiddler to hold instructions for creating ThemePacks
config.shadowTiddlers.ThemePack='See http://simonbaird.com/mptw/#CreateThemePack';
config.macros.applyTheme = {handler: function (place,macroName,params,wikifier,paramString,tiddler) {
var theme = params[0];
var label = params[1]?params[1]:'Apply theme "' + theme + '"';
var tooltip = 'Apply the "'+theme+'" theme to this TiddlyWiki';
createTiddlyButton(place,label,tooltip,function() {
store.makeActiveTheme("style",theme+things.style.suffix,true);
});
}};
// this means you can put #theme:ThemeName in url. suggested by Clint
config.paramifiers.theme = {
onstart: function(themeName) {
store.makeActiveTheme("style",themeName+config.SelectTheme.things.style.suffix,true);
}
};
//}}}
!Importance of changes to services
|sortable|k
|Item|One of most<<autosort>>| Impt, not most|Some-what|Not impt|Don't know|Top 2|h
|Increased library professional staff support for you| 11%| 34%| 21%| 19%| 16%| 44%|
|Increased library professional staff support for student| 17%| 39%| 15%| 9%| 21%| 55%|
|Increased staff for academic computing needs| 22%| 45%| 12%| 4%| 16%| 67%|
Increased staff for administrative computing 29% 33% 15% 7% 15% 63%
Improved Lilly computer lab 19% 29% 24% 8% 20% 48%
Improved LBC computer labs 12% 29% 26% 12% 22% 41%
Improved Wildman computer lab 4% 29% 12% 5% 50% 33%
More support for web page development 36% 31% 14% 5% 14% 66%
Increased Moodle support 11% 35% 23% 10% 22% 46%
Increased speed of interlibrary loan and document delivery 20% 25% 23% 11% 22% 44%
More high performance computing capacity managed by IS 27% 26% 15% 10% 22% 53%
More proactive identification by IS of promising tech 16% 39% 24% 7% 13% 55%
Provide centralized scanning service for course mat'l 15% 34% 17% 15% 19% 49%
Provide more workshops/ information sessions on new tech 33% 37% 18% 4% 8% 69%
Provide more individual training on the use of specific tech 24% 24% 20% 9% 22% 48%
!!Example:
|sortable|k
|Name |Salary |Extension |Performance |File Size |Start date |h
|ZBloggs, Fred |$12000.00 |1353 |+1.2 |74.2Kb |Aug 19, 2003 21:34:00 |
|ABloggs, Fred |$12000.00 |1353 |1.2 |3350b |09/18/2003 |
|CBloggs, Fred |$12000 |1353 |1.200 |55.2Kb |August 18, 2003 |
|DBloggs, Fred |$12000.00 |1353 |1.2 |2100b |07/18/2003 |
|Bloggs, Fred |$12000.00 |1353 |01.20 |6.156Mb |08/17/2003 05:43 |
|Turvey, Kevin |$191200.00 |2342 |-33 |1b |02/05/1979 |
!!Changing account settings
Clicking @@Account settings@@ gets you to Edit user details page:
* You may want to change your name from 'Topes, Spiggy' to 'Spiggy Topes'
* You may want to change - Friendship moderation : friendships must be approved by you
* Receive email notifications : Yes. This is very useful way of alerting you to friendship adds and other messages
* Change password : suggest changing to same as Earlham password
* can change language to Spanish if you like
* Save
!!Change site picture
* click @@Your site picture@@
You can have up to 10 'avatars' uploaded.
# Browse for mugshot
# Give it a description and set the default.
# Upload new icon
<<tabs txtMainTab "Timeline" "Timeline" TabTimeline "All" "All tiddlers" TabAll "Tags" "All tags" TabTags "More" "More lists" TabMore>>
Learning Spaces for Digital Creators
http://www.earlham.edu/markp/LSW
<<slideShow noClicks forceRefresh>> - A simple slide show that keeps the TW style
<<slideShow style:'MySSStyleSheet' clock:'+'>> - A themed slide show with a clock showing the presentation elapsed time
<<slideShow repeat clock:'-20'>> - A looping slide show with a 20 minutes countdown clock
<<slideShow slidePause:1000>> - A timed slideshow that runs once
<<slideShow slidePause:1000 repeat>> - A timed looping slideshow
-s-
!The [[SlideShowPlugin]]
Press F11 to go fullscreen and adjust the font sizes with Ctrl++ Ctrl+- (or Ctrl+mousewheel).
This plugin was developed by Paulo Soares and Clint Checketts.
{{Comment{This block is not shown in the slide show.
@@Don't show me!!!@@}}}
-s-
!How slides are separated
In a tiddler, you start each slide with the markup {{{-s-}}}
-s-
Slides don't have to have titles like this poor one
-s-
!A slide with subsections and a long title
Check to TOC below to see how this slide title is abbreviated.
!!Section 1
This is a section
!!!Subsection 1.1
This is a subsection
!!!Subsection 1.2
This is another subsection
!!!!Subsubsection 1.2.1
This is a subsubsection
-s-
!Using the keyboard
The following keys are defined:
*Left arrow - previous overlay
*Down arrow - previous slide
*Right arrow - next overlay
*Up arrow - next slide
*Home - first slide
*End - last slide
*Escape - exit slide show
*Spacebar - pause/resume slide show in auto advance mode
-s-
!Slide show parameters
*The slide show can be themed by providing a ~StyleSheet ({{{<<slideShow style:'MyStyleSheet'>>}}})
*By default, there is a clock at bottom of the browser window that displays the current time. This clock can also show the presentation elapsed time with {{{<<slideShow clock:'+'>>}}} or a countdown clock with {{{<<slideShow clock:'-20'>>}}} (for 20 minutes). In these two cases, if you click on the clock display it will be restarted
*The slide show can be set to loop ({{{<<slideShow repeat>>}}})
*You can set it so each slide changes after X milliseconds ({{{<<slideShow slidePause:X>>}}}) (auto advance mode)
*Use auto start mode to begin the slideshow the moment the tiddler is opened ({{{<<slideShow autostart>>>}}})
*You can disable overlays with {{{<<slideShow noOverlays>>}}}
*These parameters can be mixed and matched in any order: {{{<<slideShow slidePause:1000 repeat>>}}} is the same as {{{<<slideShow repeat slidePause:1000>>}}}
-s-
!Overlays
To see how incremental display works use the left and right mouse buttons.
{{Overlay1{You can}}} {{Overlay2{present things}}} {{Overlay1{in an arbitrary order!!!}}}
{{Overlay3{Its a bit harder with lists but it works:}}}
<html>
<ol>
<li class="Overlay4">First item</li>
<li class="Overlay5">Second item</li>
<li class="Overlay4">Last item</li>
</ol>
</html>
{{Comment{You can hide comments on a slide that won't display in the slide show}}}
/***
|''Name:''|SlideShowPlugin|
|''Description:''|Creates a simple slide show type display|
|''Version:''|1.6|
|''Date:''|Feb 12, 2008|
|''Source:''|http://www.math.ist.utl.pt/~psoares/addons.html|
|''Documentation:''|[[SlideShowPlugin Documentation|SlideShowPluginDoc]]|
|''Author:''|Paulo Soares and [[Clint Checketts|http://www.checkettsweb.com]]|
|''License:''|[[Creative Commons Attribution-Share Alike 3.0 License|http://creativecommons.org/licenses/by-sa/3.0/]]|
|''~CoreVersion:''|2.1.0|
***/
//{{{
config.macros.slideShow = {label: "slide show", maxTOCLength: 30};
config.macros.slideShow.messages = {gotoLabel: "Go to slide:"};
config.views.wikified.slideShow = {text: "slide show", tooltip: "Start slide show"};
config.views.wikified.slideShow.quit = {text: "end", tooltip: "Quit the slide show"};
config.views.wikified.slideShow.firstSlide = {text: "<<", tooltip: "first slide"};
config.views.wikified.slideShow.previousSlide = {text: "<", tooltip: "previous slide"};
config.views.wikified.slideShow.nextSlide = {text: ">", tooltip: "next slide"};
config.views.wikified.slideShow.lastSlide = {text: ">>", tooltip: "last slide"};
config.views.wikified.slideShow.resetClock = {text: " ", tooltip: "reset"};
config.formatters.push( {
name: "SlideSeparator",
match: "^-s-+$\\n?",
handler: function(w) {
createTiddlyElement(w.output,"hr",null,'slideSeparator');
}
});
function changeStyleSheet(tiddlerName) {
setStylesheet(store.getRecursiveTiddlerText("StyleSheetColors"),"StyleSheetColors");
setStylesheet(store.getRecursiveTiddlerText("StyleSheetLayout"),"StyleSheetLayout");
setStylesheet(store.getRecursiveTiddlerText(tiddlerName == null ? "StyleSheet" : tiddlerName,""),"StyleSheet");
}
//Excellent (and versatile) reparser created by Paul Petterson for parsing the paramString in a macro
function reparse( params ) {
var re = /([^:\s]+)(?:\:((?:\d+)|(?:["'](?:[^"']+)["']))|\s|$)/g;
var ret = new Array();
var m;
while( (m = re.exec( params )) != null ) ret[ m[1] ] = m[2]?m[2]:true;
return ret;
}
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null ) node = document;
if ( tag == null ) tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
var j=0;
for (var i = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
// 'keys' code adapted from S5 which in turn was adapted from MozPoint (http://mozpoint.mozdev.org/)
function keys(key) {
with(config.macros.slideShow){
if (document.getElementById('contentWrapper').className == "slideShowMode"){
if (!key) {
key = event;
key.which = key.keyCode;
}
switch (key.which) {
case 32: // spacebar
if(time>0){
if(autoAdvance){
clearInterval(autoAdvance);
autoAdvance = null;
} else {
autoAdvance=setInterval("GoToSlide(1)", time);
}
}
break;
case 34: // page down
case 39: // rightkey
GoToSlide("n");
break;
case 40: // downkey
GoToSlide(-1);
break;
case 33: // page up
case 37: // leftkey
GoToSlide("p");
break;
case 38: // upkey
GoToSlide(1);
break;
case 36: // home
GoToSlide("f");
break;
case 35: // end
GoToSlide("l");
break;
case 27: // escape
endSlideShow();
break;
case 66: // B
blankScreen();
break;
}
}
return false;
}
}
function blankScreen(){
var blanker = document.getElementById('slideBlanker');
if (blanker.style.display == 'block'){
blanker.style.display = 'none';
} else {
blanker.style.display = 'block';
}
}
function clicker(e) {
if (!e) var e = window.event;
var target = resolveTarget(e);
//Whenever something is clicked that won't advance the slide make sure that the table of contents gets hidden
if (target.getAttribute('href') != null || isParentOrSelf(target, 'toc') || isParentOrSelf(target,'embed') || isParentOrSelf(target,'object') || isParentOrSelf(target, 'slideFooter') || isParentOrSelf(target, 'navigator')){
//Don't hide the TOC if the indexNumbers (which trigger the index) is clicked
if(isParentOrSelf(target,'indexNumbers') || isParentOrSelf(target,'jumpInput')){
return true;
}
showHideTOC('none');
return true;
}
//Advance a slide if the TOC is visible otherwise make sure that the TOC gets hidden
if ((!e.which && e.button == 1) || e.which == 1) {
if (document.getElementById('toc').style.display != 'block'){
GoToSlide("n");
} else {
showHideTOC('none');
}
}
if ((!e.which && e.button == 2) || e.which == 3) {
if (document.getElementById('toc').style.display != 'block'){
GoToSlide("p");
} else {
showHideTOC('none');
}
return false;
}
}
function isParentOrSelf(element, id) {
if (element == null || element.nodeName=='BODY') return false;
else if (element.id == id) return true;
else return isParentOrSelf(element.parentNode, id);
}
GoToSlide = function(step) {
var new_pos;
var slideHolder = document.getElementById('slideContainer');
//The parse float ensures that the attribute is returned as a number and not a string.
var cur_pos = parseFloat(slideHolder.getAttribute('currentslide'));
var numberSlides = parseFloat(slideHolder.getAttribute('numberSlides'));
switch (step) {
case "f":
new_pos=0;
break;
case "l":
new_pos=numberSlides-1;
break;
case "n":
var numberOverlays = parseFloat(slideHolder.childNodes[cur_pos].getAttribute('numberOverlays'));
var currentOverlay = parseFloat(slideHolder.getAttribute('currentOverlay'));
if(numberOverlays==0 || currentOverlay==numberOverlays){
if(noClicks==false) new_pos=cur_pos+1;
} else {
var className="Overlay"+currentOverlay;
var overlay=getElementsByClass(className,slideHolder.childNodes[cur_pos]);
for(var i=0; i<overlay.length; i++) {overlay[i].className=className+' previousOverlay';}
currentOverlay++;
slideHolder.setAttribute('currentOverlay',currentOverlay);
className="Overlay"+currentOverlay;
overlay=getElementsByClass(className,slideHolder.childNodes[cur_pos]);
for(i=0; i<overlay.length; i++) {overlay[i].className=className+' currentOverlay';}
return false;
}
break;
case "p":
var numberOverlays = parseFloat(slideHolder.childNodes[cur_pos].getAttribute('numberOverlays'));
var currentOverlay = parseFloat(slideHolder.getAttribute('currentOverlay'));
if(numberOverlays==0 || currentOverlay==0){
if(noClicks==false) new_pos=cur_pos-1;
} else {
var className="Overlay"+currentOverlay;
var overlays=getElementsByClass(className,slideHolder.childNodes[cur_pos]);
for(var i=0; i<overlays.length; i++) {overlays[i].className=className+' nextOverlay';}
currentOverlay--;
className="Overlay"+currentOverlay;
overlays=getElementsByClass(className,slideHolder.childNodes[cur_pos]);
for(i=0; i<overlays.length; i++) {overlays[i].className=className+' currentOverlay';}
slideHolder.setAttribute('currentOverlay',currentOverlay);
return false;
}
break;
default:
new_pos=cur_pos+step;
}
if(slideShowCircularMode && new_pos == numberSlides) new_pos=0;
if(slideShowCircularMode && new_pos<0) new_pos=(numberSlides - 1);
if(step!=0 && new_pos>=0 && new_pos<numberSlides) {
slideHolder.childNodes[cur_pos].style.display='none';
slideHolder.childNodes[new_pos].style.display='block';
slideHolder.setAttribute('currentslide',new_pos);
var numberOverlays = parseFloat(slideHolder.childNodes[new_pos].getAttribute('numberOverlays'));
if(step=="p"){
var currentOverlay=numberOverlays;
var state=' previousOverlay';
} else {
var currentOverlay=0;
var state=' nextOverlay';
}
slideHolder.setAttribute('currentOverlay',currentOverlay);
if(numberOverlays>0) {
for(var i=1; i<=numberOverlays; i++){
var className="Overlay"+i;
var overlays=getElementsByClass(className,slideHolder.childNodes[new_pos]);
for(var j=0; j<overlays.length; j++) {overlays[j].className=className+state;}
}
if(step=="p"){
var className="Overlay"+numberOverlays;
var overlays=getElementsByClass(className,slideHolder.childNodes[new_pos]);
for(var j=0; j<overlays.length; j++) {overlays[j].className=className+' currentOverlay';}
}
}
new_pos++;
var indexNumbers = document.getElementById('indexNumbers');
indexNumbers.firstChild.data = new_pos+'/'+numberSlides;
if((new_pos==numberSlides) && !slideShowCircularMode && autoAdvance) clearInterval(autoAdvance);
return true;
}
return false;
}
function tocShowSlide(e) {
if (!e) var e = window.event;
var target = resolveTarget(e);
var slide = target.getAttribute('slideNumber');
var cur_pos = document.getElementById('slideContainer').getAttribute('currentslide');
var step = slide-cur_pos;
if(step!=0) GoToSlide(step);
showHideTOC('none');
return;
}
//Toggle the display of the table of contents
function showHideTOC(display){
var toc = document.getElementById('toc');
//Reset the input box
document.getElementById('jumpInput').value = "";
if (display == null || display.length == null){
if (toc.style.display == 'none' || toc.style.display == ''){
toc.style.display = 'block';
document.getElementById('jumpInput').focus();
} else {
toc.style.display = 'none';
}
} else {
toc.style.display = display;
if (display == 'block')
document.getElementById('jumpInput').focus();
}
}
function padZero(x){return (x>=10 || x<0 ? "" : "0")+x;}
setClock = function(){
var actualTime = new Date();
var newTime = actualTime.getTime() - clockStartTime;
newTime = clockMultiplier*newTime+clockInterval+clockCorrection;
actualTime.setTime(newTime);
newTime = padZero(actualTime.getHours()) + ":" + padZero(actualTime.getMinutes());
//+ ":" + padZero(actualTime.getSeconds());
var clock = document.getElementById('slideClock');
clock.firstChild.nodeValue = newTime;
}
function resetClock(){
var time = new Date(0);
if(clockStartTime>time){
var startTime = new Date();
clockStartTime=startTime.getTime();
}
}
var title;
var place;
var autoAdvance=null;
var slideClock=null;
var noOverlays=false;
var noClicks=false;
var forceRefresh=false;
var time = 0;
var slideShowCircularMode;
var slideShowStyleSheet;
var slideShowParams;
var clockMultiplier;
var clockInterval;
var clockCorrection=0;
var clockStartTime;
var openTiddlers;
config.macros.slideShow.handler = function(aPlace,macroName,params,wikifier,paramString,tiddler){
if(tiddler instanceof Tiddler){
var lingo = config.views.wikified.slideShow;
if (!e) var e = window.event;
place = aPlace;
title = tiddler.title;
params = reparse(paramString);
var onclick = function(){config.macros.slideShow.onClickSlideShow(params);};
createTiddlyButton(aPlace,lingo.text,lingo.tooltip,onclick);
}
}
config.macros.slideShow.onClickSlideShow = function(newParams) {
// if(typeof(newParams)=="number") newParams=slideShowParams;
openTiddlers = new Array;
var viewer=document.getElementById('tiddlerDisplay');
for(var i=0; i<viewer.childNodes.length; i++){
var name = viewer.childNodes[i].getAttribute('tiddler');
openTiddlers.push(name);
}
document.oncontextmenu = function(e){return false;}
clockMultiplier = 1;
clockInterval = 0;
var startTime = new Date(0);
slideShowCircularMode = false;
time = 0;
slideShowStyleSheet = null;
if(newParams['style']){
slideShowStyleSheet = eval(newParams['style']);
}
if(newParams['repeat']){
slideShowCircularMode = true;
}
if(newParams['noClicks']){
noClicks = true;
}
if(newParams['forceRefresh']){
forceRefresh = true;
}
if(newParams['slidePause'] > 0){
time = newParams['slidePause'];
}
if(newParams['clock']){
clockCorrection=startTime.getTimezoneOffset()*60000;
startTime = new Date();
var clockType= eval(newParams['clock']);
if(clockType != '+') {
clockMultiplier = -1;
clockInterval = -clockType*60000;
}
}
clockStartTime=startTime.getTime();
if(newParams['noOverlays']){
noOverlays = true;
}
clearMessage();
//Attach the key and mouse listeners
document.onkeyup = keys;
document.onmouseup = clicker;
story.refreshTiddler(title,"SlideShowViewTemplate",true);
createSlides(newParams);
slideClock=setInterval('setClock()', 1000);
if(time>0) autoAdvance=setInterval("GoToSlide(1)", time);
story.closeAllTiddlers(title);
toggleSlideStyles();
return;
}
config.macros.slideShow.endSlideShow=function(){
var showHolder = document.getElementById('slideShowWrapper');
showHolder.parentNode.removeChild(showHolder);
document.oncontextmenu = function(e){};
if(autoAdvance) clearInterval(autoAdvance);
if(slideClock) clearInterval(slideClock);
noClicks=false;
story.refreshTiddler(title,null,true);
story.closeAllTiddlers();
toggleSlideStyles();
story.displayTiddlers(null,openTiddlers,DEFAULT_VIEW_TEMPLATE);
document.onmouseup = function(){};
}
function isInteger(s){
var i;
for (i = 0; i < s.length; i++){
// Check that current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
// All characters are numbers.
return true;
}
function jumpInputToSlide(e){
if (!e) {
e = window.event;
e.which = e.keyCode;
}
if(e.which==13){
var jumpInput= document.getElementById("jumpInput").value;
if(isInteger(jumpInput)){
var step=jumpInput-document.getElementById('slideContainer').getAttribute('currentslide')-1;
if (GoToSlide(step)){
showHideTOC('none');
}
}
}
return;
}
//Used to shorten the TOC fields
function abbreviateLabel(label){
var maxTOCLength = config.macros.slideShow.maxTOCLength;
if(label.length>maxTOCLength) {
var temp = new Array();
temp = label.split(' ');
label = temp[0];
for(var j=1; j<temp.length; j++){
if((label.length+temp[j].length)<=maxTOCLength){
label += " " + temp[j];
} else {
label += " ...";
break;
}
}
}
return label;
}
function createSlides(newParams){
var lingo = config.views.wikified.slideShow;
//Remove dblClick on edit function
var theTiddler = document.getElementById("tiddler"+title);
theTiddler.ondblclick = function() {};
// Grab the 'viewer' element and give it a signature so the show can be resumed if stopped
var tiddlerElements = theTiddler.childNodes;
var viewer;
for (var i = 0; i < tiddlerElements.length; i++){
if (tiddlerElements[i].className == "viewer") viewer = tiddlerElements[i];
}
viewer.id = 'slideShowWrapper';
//Hide the text that comes before the first H1 element (I think I may put this into a cover page type thing)
while(viewer.childNodes.length > 0 && viewer.firstChild.nodeName.toUpperCase() != "HR" && viewer.firstChild.className!="slideSeparator") {
viewer.removeChild(viewer.firstChild);
}
//Cycle through the content and each time you hit an H1 begin a new slide div
var slideNumber = 0;
var slideHolder = document.createElement('DIV');
slideHolder.id = "slideContainer";
slideHolder.setAttribute('currentslide',0);
while(viewer.childNodes.length > 0){
//Create a new slide a append it to the slide holder
if (viewer.firstChild.nodeName.toUpperCase() == "HR" && viewer.firstChild.className=="slideSeparator"){
slideNumber++;
var slide = document.createElement('DIV');
slide.id = "slideNumber"+slideNumber;
slide.className = "slide";
if (slideNumber > 1) {
//slideHolder.setAttribute('currentslide',0);
slide.style.display='none';
} else {
slide.style.display='block';
}
slideHolder.appendChild(slide);
viewer.removeChild(viewer.firstChild);
} else {
if(viewer.firstChild.nodeName=="SPAN" && viewer.firstChild.className=="" && viewer.firstChild.hasChildNodes()) {
var anchor=viewer.firstChild.nextSibling;
for (var ii=0;ii<viewer.firstChild.childNodes.length;ii++) {
var clone=viewer.firstChild.childNodes[ii].cloneNode(true);
viewer.insertBefore(clone,anchor);
}
viewer.removeChild(viewer.firstChild);
} else {
slide.appendChild(viewer.firstChild);
}
}
}
//Stick the slides back into the viewer
var blanker= createTiddlyElement(viewer,"DIV","slideBlanker");
blanker.style.display="none";
viewer.appendChild(slideHolder);
slideHolder.setAttribute('numberSlides',slideNumber);
//Create the navigation bar
var slidefooter = createTiddlyElement(viewer,"DIV","slideFooter","slideFooterOff");
var navigator = createTiddlyElement(slidefooter,"SPAN","navigator");
//Make it so that when the footer is hovered over the class will change to make it visible
slidefooter.onmouseover = function () {slidefooter.className = "slideFooterOn"};
slidefooter.onmouseout = function () {slidefooter.className = "slideFooterOff"};
//Create the control button for the navigation
var onClickQuit = function(){config.macros.slideShow.endSlideShow();};
createTiddlyButton(navigator,lingo.quit.text,lingo.quit.tooltip,onClickQuit);
createTiddlyButton(navigator,lingo.firstSlide.text,lingo.firstSlide.tooltip,first_slide);
createTiddlyButton(navigator,lingo.previousSlide.text,lingo.previousSlide.tooltip,previous_slide);
createTiddlyButton(navigator,lingo.nextSlide.text,lingo.nextSlide.tooltip,next_slide);
createTiddlyButton(navigator,lingo.lastSlide.text,lingo.lastSlide.tooltip,last_slide);
createTiddlyButton(navigator,lingo.resetClock.text,lingo.resetClock.tooltip,resetClock,"button","slideClock");
var indexNumbers = createTiddlyElement(slidefooter,"SPAN","indexNumbers","indexNumbers","1/"+slideNumber)
indexNumbers.onclick = showHideTOC;
var toc = createTiddlyElement(slidefooter,"UL","toc");
var ovl=1;
for (var i=0;i<slideHolder.childNodes.length;i++) {
if(!noOverlays) {
var ovl=1;
while(1){
var className="Overlay"+ovl;
var overlays=getElementsByClass(className,slideHolder.childNodes[i]);
if(overlays.length>0){
for(var j=0; j<overlays.length; j++) {overlays[j].className+=' nextOverlay';}
ovl++;
} else {break;}
}
}
slideHolder.childNodes[i].setAttribute("numberOverlays",ovl-1);
slideHolder.setAttribute("currentOverlay",0);
//Loop through each slide and check the header's content
var tocLabel = null;
for (var j=0;j<slideHolder.childNodes[i].childNodes.length;j++) {
var node = slideHolder.childNodes[i].childNodes[j];
if(node.nodeName=="H1" || node.nodeName=="H2" || node.nodeName=="H3" || node.nodeName=="H4") {
var htstring = node.innerHTML;
var stripped = htstring.replace(/(<([^>]+)>)/ig,"");
tocLabel = abbreviateLabel(stripped);
var tocLevel="tocLevel"+node.nodeName.charAt(1);
var tocItem = createTiddlyElement(toc,"LI",null,tocLevel);
var tocLink = createTiddlyElement(tocItem,"A",null,"tocItem",tocLabel);
tocLink.setAttribute("slideNumber",i);
tocLink.onclick=tocShowSlide;
}
}
}
//Input box to jump to s specific slide
var tocItem = createTiddlyElement(toc,"LI",null,"tocJumpItem",config.macros.slideShow.messages.gotoLabel);
var tocJumpInput = createTiddlyElement(tocItem,"INPUT","jumpInput");
tocJumpInput.type="text";
tocJumpInput.onkeyup=jumpInputToSlide;
}
var next_slide= function(e){GoToSlide(1);}
var first_slide= function(e){GoToSlide("f");}
var previous_slide= function(e){GoToSlide(-1);}
var last_slide= function(e){GoToSlide("l");}
function toggleSlideStyles(){
var contentWrapper = document.getElementById('contentWrapper');
if (contentWrapper.className == "slideShowMode"){
contentWrapper.className = "";
refreshPageTemplate();
setStylesheet("#backstageShow{display: block;}","SlideShowStyleSheet");
changeStyleSheet();
} else{
contentWrapper.className = "slideShowMode";
refreshPageTemplate("SlideShowPageTemplate");
setStylesheet(store.getRecursiveTiddlerText("SlideShowStyleSheet"),"SlideShowStyleSheet");
if(slideShowStyleSheet) changeStyleSheet(slideShowStyleSheet);
}
}
config.shadowTiddlers.SlideShowPageTemplate="<!--{{{-->\n<div id='displayArea'>\n<div id='tiddlerDisplay'></div>\n</div>\n<!--}}}-->";
config.shadowTiddlers.SlideShowViewTemplate="<!--{{{-->\n<div class='title' macro='view title'></div>\n<div class='viewer' macro='view text wikified'></div>\n<!--}}}-->";
config.shadowTiddlers.SlideShowStyleSheet = "/***\n!Slide Mode Styles\n***/\n/*{{{*/\n#slideBlanker {\n position:absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 90; \n background-color: #000;\n}\n#backstageShow{\n display: none !important;\n}\n\n#contentWrapper.slideShowMode #slideContainer{\n display: block;\n}\n\n#contentWrapper.slideShowMode .Comment{\n display: none;\n}\n\n#contentWrapper.slideShowMode .nextOverlay{\n visibility: hidden;\n}\n\n#contentWrapper.slideShowMode .currentOverlay{\n visibility: visible;\n}\n\n#contentWrapper.slideShowMode .previousOverlay{\n visibility: visible;\n}\n\n#jump{\n text-align: right;\n}\n\n.slideFooterOff #navigator{\n visibility: hidden;\n}\n\n.slideFooterOn #navigator{\n visibility: visible;\n}\n\n#contentWrapper.slideShowMode #slideClock{\n cursor: pointer; margin: 0 5px 0 5px; border: 1px solid #db4\n}\n\n#contentWrapper.slideShowMode,\n #contentWrapper.slideShowMode #displayArea{\n width: 100%;\n font-size: 1.5em;\n margin: 0 !important;\n padding: 0;\n}\n\n#slideContainer{\n display: none;\n}\n\n.indexNumbers{\n cursor: pointer;\n}\n\n#navigator{\n visibility: hidden;\n bottom: 0;\n}\n\n#toc{\n display: none;\n position: absolute;\n font-size: .75em;\n bottom: 2em;\n right: 0;\n background: #fff;\n border: 1px solid #000;\n text-align: left;\n}\n\nul#toc, #toc li{\n margin: 0;\n padding: 0;\n list-style: none;\n line-height: 1em;\n}\n\n.tocJumpItem{\n margin-right: 2em;\n}\n\n.tocJumpItem input{\nmargin-right: 1em;\n border: 0;\n}\n\n#toc a,\n#toc a.button{\n display: block;\n padding: .1em;\n}\n\n#toc .tocLevel1{\nfont-size: .8em;\n}\n\n#toc .tocLevel2{\n margin-left: 1em;\n font-size: .75em;\n}\n\n#toc .tocLevel3{\n margin-left: 2em;\nfont-size: .75em;\n}\n\n#toc .tocLevel4{\n margin-left: 3em;\nfont-size: .65em;\n}\n\n#toc a{\n cursor: pointer;\n}\n\nh1{\n min-height: 1em;\n}\n\n.slide h1{\n min-height: 0;\n}\n\n/* The '>' selector is ignored by IE6 and earlier so the proper rules are given */\n#slideFooter{\n position: fixed;\n bottom: 2px;\n right: 2px;\n width: 100%;\n text-align: right;\n}\n\n/* This is a hack to trick IE6 and earlier to put the navbar on the bottom of the page */\n* html #slideFooter {\n position: absolute;\n width: 100%;\n text-align: right;\n right: auto; bottom: auto;\n left: expression( ( -20 - slideFooter.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );\n top: expression( ( -10 - slideFooter.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );\n}\n\n\n\n/*}}}*/";
config.shadowTiddlers.SlideShowPluginDoc="The documentation is missing. It is available [[here|http://www.math.ist.utl.pt/~psoares/addons.html#SlideShowPluginDoc]].";
//}}}
!Description
This plugin turns a TiddlyWiki tiddler into a simple slide show type display. Most features that are usually found in presentation software are available. It should work in a way that does not interfere with TiddlyWiki. When you close the slide show you get back to your good old TW.
This plugin has been tested in Firefox and Internet Explorer. Let me know if something seems broken.
!Usage
To use this plugin you //must// be using TiddlyWiki 2.0. Some optional features (as the incremental display) require version 2.0.8 or higher. To install the plugin copy the tiddlers SlideShowPlugin, SlideShowPageTemplate and SlideShowViewTemplate to your TW, label the first one with the //systemConfig// tag, save the TW and refresh the browser.
To make a slide show simply drop {{{<<slideShow>>}}} at the beginning of a tiddler and use {{{-s-}}} to start each slide.
If you move your mouse over the bottom of the browser window you will see a few navigation buttons, a clock and a table of contents that shows up when you click the slide number.
Any block of text marked as {{{{{Comment{For my eyes only!}}}}}} will not be displayed in the slide show.
See these and other features in this [[SlideShowExample]].
!Incremental display
A succession of overlays (or layers) can be defined in each slide by marking blocks of text with {{{{{Overlay1{...some text...}}}}}}, {{{{{Overlay2{...some text...}}}}}}, {{{{{Overlay3{...some text...}}}}}}, ...
To costumize the way overlays are shown you can redefine the following CSS classes
*contentWrapper.slideShowMode .previousOverlay
*contentWrapper.slideShowMode .currentOverlay
*contentWrapper.slideShowMode .nextOverlay
in a ~StyleSheet. The default style simply hides the next overlays and shows the current and the previous ones as normal text.
!Slide show parameters
*The slide show can be themed by providing a ~StyleSheet ({{{<<slideShow style:'MyStyleSheet'>>}}})
*By default, there is a clock at bottom of the browser window that displays the current time. This clock can also show the presentation elapsed time with {{{<<slideShow clock:'+'>>}}} or a countdown clock with {{{<<slideShow clock:'-20'>>}}} (for 20 minutes). In these two cases, if you click on the clock display it will be restarted
*The slide show can be set to loop ({{{<<slideShow repeat>>}}})
*You can set it so each slide changes after X milliseconds ({{{<<slideShow slidePause:X>>}}}) (auto advance mode)
*To not use the mouse to navigate through the presentation use {{{<<slideShow noClicks>>>}}}. This is useful when there are clickable elements in the presentation
*{{{<<slideShow forceRefresh>>>}}} forces a refresh of the presentation tiddler (useful when a presentation is built from separate tiddlers using the {{{<<tiddler>>}}} macro)
*Overlays can be disabled with {{{<<slideShow noOverlays>>}}}
*These parameters can be mixed and matched in any order: {{{<<slideShow slidePause:1000 repeat>>}}} is the same as {{{<<slideShow repeat slidePause:1000>>}}}
!Slide show navigation
You can navigate through a slide show using the keyboard or the mouse. To quickly move to titled sections you can use the table of contents.
!!Mouse navigation
Left (right) clicking on a slide jumps to the next (previous) overlay. To move to the beginning of the next or previous slide you must use the navigation bar at the bottom of the browser's window. If there are no overlays defined both operations are equivalent.
!!Keyboard
The following keys are defined:
*Left arrow - previous overlay
*Down arrow - previous slide
*Right arrow - next overlay
*Up arrow - next slide
*Home - first slide
*End - last slide
*Escape - exit slide show
*Spacebar - pause/resume slide show in auto advance mode
*B - blank screen
!Revision history
*1.6
**removed seconds from clock
**added B key to blank screen
**a few fixes to make it work with IE7
*1.5.3
**fix for ~TW2.2
**forceRefresh and noClicks
**removed autoStart feature
**templates are now in shadow tiddlers
*1.5.2 13/02/2007
**fixed a conflict with TW pageFooter
*1.5.1 10/11/2006
**added SlideShowPageTemplate and SlideShowViewTemplate. This way, the plugin no longer requires a standard TW layout. Thanks to Andrew Lister for the idea.
*1.5.0 18/09/2006
**fixed restoring stylesheet on exit
**changed (again!) the way how slides are separated (slide shows prepared for previous versions must be fixed)
*1.4.0 20/04/2006
**changed the way how slides are separated (slide shows prepared for previous versions must be fixed)
**now works with content included with the {{{<<tiddler>>}}} macro
**added incremental display (overlays)
**improved documentation
**assorted small fixes
*1.3.1 10/03/2006
**removed empty slide titles
**fixed wrong numberSlides when slides have div's
**fixed wrong time in Windows
*1.3.0 26/02/2006
**restore open tiddlers on exit
**fixed problem with markup in headers (should work with NestedSlidersPlugin)
**added slide comments (blocks of text in the tiddler that don't show up in the presentation)
*1.2.1 28/01/2006
**pause timed slideshow with spacebar
**added clock with 3 different modes
**fixed bugs with style and abbreviation options
**general cleanup
*1.2.0 07/01/2006
**added a resume feature
**added themes support
*1.1.5 14/12/2005
**added mouse support
**cleaned up navbar generation
*1.1.0 12/12/2005
**added support for IE
**added key listeners
*1.0.0 11/12/2005
**initial release
!Todo
*Time code is still very hackerish and unreliable.
/***
!Slide Mode Styles
***/
/*{{{*/
#slideBlanker {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 90;
background-color: #000;
}
#backstageShow{
display: none !important;
}
#contentWrapper.slideShowMode #slideContainer{
display: block;
}
#contentWrapper.slideShowMode .Comment{
display: none;
}
#contentWrapper.slideShowMode .nextOverlay{
visibility: hidden;
}
#contentWrapper.slideShowMode .currentOverlay{
visibility: visible;
}
#contentWrapper.slideShowMode .previousOverlay{
visibility: visible;
}
#jump{
text-align: right;
}
.slideFooterOff #navigator{
visibility: hidden;
}
.slideFooterOn #navigator{
visibility: visible;
}
#contentWrapper.slideShowMode #slideClock{
cursor: pointer; margin: 0 5px 0 5px; border: 1px solid #db4
}
#contentWrapper.slideShowMode .title{
color: #CC3348;
text-align: center;
}
#contentWrapper.slideShowMode,
#contentWrapper.slideShowMode #displayArea{
width: 100%;
font-size: 1.3em;
font-family: eurostyle, arial, helvetica, sans-serif;
margin: 0 !important;
padding: 0;
}
#contentWrapper.slideShowMode a,
#contentWrapper.slideShowMode #displayArea a{
color :#8F4724;
text-decoration : none;
}
#contentWrapper.slideShowMode a:hover,
#contentWrapper.slideShowMode #displayArea a:hover{
color :#FFDFCF;
background-color: #8F4724;
}
#contentWrapper.slideShowMode ul{
list-style-position:inside;
list-style-type:disc;
}
#contentWrapper.slideShowMode li {
margin-top: 4px;
padding: 0 0 0 10px;
border-top: 2px #CC3348 solid;
/* background-color : #FFF0CF; */
background-color : #E9D4C4;
color : ;
list-style-image:url(graphics/dot_content_brown.gif);
list-style-position:inside;
}
#slideContainer{
display: none;
}
.indexNumbers{
cursor: pointer;
}
#navigator{
visibility: hidden;
bottom: 0;
}
#toc{
display: none;
position: absolute;
font-size: .75em;
bottom: 2em;
right: 0;
background: #fff;
border: 1px solid #000;
text-align: left;
}
ul#toc, #toc li{
margin: 0;
padding: 0;
list-style: none;
line-height: 1em;
}
.tocJumpItem{
margin-right: 2em;
}
.tocJumpItem input{
margin-right: 1em;
border: 0;
}
#toc a,
#toc a.button{
display: block;
padding: .1em;
}
#toc .tocLevel1{
font-size: .8em;
}
#toc .tocLevel2{
margin-left: 1em;
font-size: .75em;
}
#toc .tocLevel3{
margin-left: 2em;
font-size: .75em;
}
#toc .tocLevel4{
margin-left: 3em;
font-size: .65em;
}
#toc a{
cursor: pointer;
}
h1{
min-height: 1em;
}
.slide h1{
min-height: 0;
}
/* The '>' selector is ignored by IE6 and earlier so the proper rules are given */
#slideFooter{
position: fixed;
bottom: 2px;
right: 2px;
width: 100%;
text-align: right;
}
/* This is a hack to trick IE6 and earlier to put the navbar on the bottom of the page */
* html #slideFooter {
position: absolute;
width: 100%;
text-align: right;
right: auto; bottom: auto;
left: expression( ( -20 - slideFooter.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( -10 - slideFooter.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
/*}}}*/
!!Operating the ~TiddlyWiki Slideshow
Unlike a ~PowerPoint slideshow, merely clicking on a slide will ''not'' progress to the next slide. This is because I'm using clickable 'buttons' to hide and reveal text //within// the slide.
To advance / move back slides move the cursor to the bottom right of the window where you will reveal the controls:
[img[graphics/TW_slideshow_controls.png]]
From CampusTechnology.com [[Social Networking: Learning Theory in Action|http://campustechnology.com/articles/63319_1/]]
!!Quotes:
[[ePortfolios Meet Social Software|http://campustechnology.com/articles/50618/]]
<<<
Kevin Kelly, online teaching and learning coordinator for San Francisco State University (CA) ... "The question we most often get from students as they're working on their electronic portfolios is: Can I access this after I graduate?" he says. "So we asked if they are using social networking spaces, and if so, if they see a value in having them integrated with an academic electronic portfolio. To a person, they have replied ‘Yes!' As a result, our campus is now coming up with a social networking space for alumni."
//So, social networking space -- eportfolio -- alumni all tied together = ''Elgg'' //
The SFSU campus is quite decentralized, Kelly reports, and the school's various departments are currently using five different ePortfolio solutions. During a recent needs-assessment survey, more than half of SFSU's 80-plus departments disclosed that, at the department level, the most important reason for using ePortfolios is career-bridging. Assessing student performance ran a close second; program assessment came in a distant third.
//
#"Career bridging" (whatever that means)
# Assessing student performance
# program assessment
//
The go-anywhere, own-it-for-life model seems likely to expand the ePortfolio into a kind of online professional, postgraduate space. But with that capability, it may also untie one of modern postsecondary education's knottiest problems, says Chen: the @@fragmentation of the undergraduate experience@@. "Nowadays, students have a double major, or transfer from a community college, or take time off to work, or take some classes online. The result: @@a real lack of curricular coherence@@. Students have to take a greater responsibility for their learning, and for making sense of the various pieces of the process. ePortfolios can help them do that."
//So, using ePortfolios to address curricular coherence //
"Scalability will become an issue," Chen says. "It would be impossible for faculty or a TA to provide feedback to individual students who are posting even just once a week. But the idea of reflection is integral to ePortfolios, and students really need to be taught how to do this. If they don't receive feedback on their reflections, they will simply tend not to provide any." One solution: Teach students how to collect, select, reflect, and present, and then provide them with a social network through which they can give and receive //peer// feedback.
//This is not really a "solution" until it has been proven empirically. Students won't give serious peer feedback unless there's a compelling reason to do so.//
//Scalability is a problem; students need faculty feedback. Here is where the small Liberal Arts Colleges can make their mark.//
<<<
/***
''Inspired by [[TiddlyPom|http://www.warwick.ac.uk/~tuspam/tiddlypom.html]]''
|Name|SplashScreenPlugin|
|Created by|SaqImtiaz|
|Location|http://tw.lewcid.org/#SplashScreenPlugin|
|Version|0.21 |
|Requires|~TW2.08+|
!Description:
Provides a simple splash screen that is visible while the TW is loading.
!Installation
Copy the source text of this tiddler to your TW in a new tiddler, tag it with systemConfig and save and reload. The SplashScreen will now be installed and will be visible the next time you reload your TW.
!Customizing
Once the SplashScreen has been installed and you have reloaded your TW, the splash screen html will be present in the MarkupPreHead tiddler. You can edit it and customize to your needs.
!History
* 20-07-06 : version 0.21, modified to hide contentWrapper while SplashScreen is displayed.
* 26-06-06 : version 0.2, first release
!Code
***/
//{{{
var old_lewcid_splash_restart=restart;
restart = function()
{ if (document.getElementById("SplashScreen"))
document.getElementById("SplashScreen").style.display = "none";
if (document.getElementById("contentWrapper"))
document.getElementById("contentWrapper").style.display = "block";
old_lewcid_splash_restart();
if (splashScreenInstall)
{if(config.options.chkAutoSave)
{saveChanges();}
displayMessage("TW SplashScreen has been installed, please save and refresh your TW.");
}
}
var oldText = store.getTiddlerText("MarkupPreHead");
if (oldText.indexOf("SplashScreen")==-1)
{var siteTitle = store.getTiddlerText("SiteTitle");
var splasher='\n\n<style type="text/css">#contentWrapper {display:none;}</style><div id="SplashScreen" style="border: 3px solid #ccc; display: block; text-align: center; width: 320px; margin: 100px auto; padding: 50px; color:#000; font-size: 28px; font-family:Tahoma; background-color:#eee;"><b>'+siteTitle +'</b> is loading<blink> ...</blink><br><br><span style="font-size: 14px; color:red;">Requires Javascript.</span></div>';
if (! store.tiddlerExists("MarkupPreHead"))
{var myTiddler = store.createTiddler("MarkupPreHead");}
else
{var myTiddler = store.getTiddler("MarkupPreHead");}
myTiddler.set(myTiddler.title,oldText+splasher,config.options.txtUserName,null,null);
store.setDirty(true);
var splashScreenInstall = true;
}
//}}}
!!Starting up on Learning Spaces
Currently (Spring 08) the Elgg system allows accounts to be created manually. You will get an email from "Earlham Learning Spaces administrator" with the subject line "Your new Earlham Learning Spaces account" with your username and password. Here's what to do once you have this information.
# Click the link to Earlham Learning Spaces
# Logon with the username and password you were emailed. Do ''not'' check @@Remember login@@ ([[screenshot|graphics/login_box.png]]<<imagebox>>). You can do this next time after you have changed your password.
# At the top right of the screen there a link called @@Account settings@@ ; click this.
# [[Setting up an account]]
[[Mocha StyleSheet]]
/*{{{*/
#popup tr.fieldTableRow td {padding:3px; color : #fff}
#popup table.listView th {color : #444}
#popup tr.fieldTableRow td a.button {margin:1px; padding : 1px; background:#CC6714; color:#eee; border : none}
#tiddlerDisplay .editor {margin-bottom:1px;margin-top:1px;padding-bottom:1px;padding-top:1px;}
.tab {-moz-border-radius-topleft:0.25em;-moz-border-radius-topright:0.25em}
.tabContents, .tagged {-moz-border-radius:0.5em}
.spiderHistory a.button, .spiderLinks a.button, .spiderReferences a.button {border : none}
.spiderButton {color:#999}
#mainMenu .spiderLinks a, #mainMenu .spiderReferences a, #mainMenu .spiderHistory a {display:inline; border-bottom:none}
.tiddler {padding-bottom:1em;}
.editor input {border-color:#DDD}
.editor textarea {border-color:#DDD}
/*}}}*/
/*{{{*/
ul.accordion, ul.accordion li, ul.accordion li ul {margin:0; padding:0; list-style-type:none;text-align:left;}
ul.accordion li ul {display:none;}
ul.accordion li.accordion-active ul {display:block;}
ul.accordion li.accordion-active a {cursor:default;}
ul.accordion li.accordion-active ul li a{cursor:pointer;}
ul.accordion a {display:block; padding:0.5em;}
ul.accordion li a.tiddlyLink, ul.accordion li a.tiddlyLinkNonExisting, ul.accordion li a {font-weight:bold;}
/* ul.accordion li a {background:#0066aa; color:#FFF; border-bottom:1px solid #fff;}
ul.accordion li.accordion-active a, ul.accordion li a:hover background:#00558F;color:#FFF;} */
ul.accordion li a {background:#F5F5F5; color:#000; border-bottom:1px solid #CC6532;}
ul.accordion li.accordion-active a, ul.accordion li a:hover {background:#CC6532;color:#FFF;}
ul.accordion li ul li{display:inline-block;overflow:hidden;}
ul.accordion li.accordion-active ul li {background:#eff3fa; color:#000; padding:0em;}
ul.accordion li.accordion-active ul li div {padding:1em 1.5em; background:#eff3fa;}
ul.accordion li.accordion-active ul a{background:#eff3fa; color:#000; padding:0.5em 0.5em 0.5em 1.0em;border:none;}
ul.accordion li.accordion-active ul a:hover {background:#e0e8f5; color:#000;}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}
body {font-size:.8em; font-family:verdana,arial,helvetica; margin:0; padding:0;}
h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}
hr {height:1px;}
a {text-decoration:none;}
dt {font-weight:bold;}
ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}
.txtOptionInput {width:11em;}
#contentWrapper .chkOptionInput {border:0;}
.externalLink {text-decoration:underline;}
.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}
.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}
/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}
#mainMenu .tiddlyLinkExisting,
#mainMenu .tiddlyLinkNonExisting,
#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}
.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0em 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0em 1em 1em; left:0px; top:0px;}
.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}
#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}
#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0em 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 .3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}
.wizard {padding:0.1em 1em 0em 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0em 0em 0em; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0em;}
.wizardFooter .status {padding:0em 0.4em 0em 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em 0.1em 0.2em;}
#messageArea {position:fixed; top:2em; right:0em; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em 0.2em 0.2em 0.2em;}
#messageArea a {text-decoration:underline;}
.tiddlerPopupButton {padding:0.2em 0.2em 0.2em 0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em 1em 1em 1em; margin:0;}
.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0em;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}
.tabset {padding:1em 0em 0em 0.5em;}
.tab {margin:0em 0em 0em 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}
#contentWrapper {display:block;}
#splashScreen {display:none;}
#displayArea {margin:1em 17em 0em 14em;}
.toolbar {text-align:right; font-size:.9em;}
.tiddler {padding:1em 1em 0em 1em;}
.missing .viewer,.missing .title {font-style:italic;}
.title {font-size:1.6em; font-weight:bold;}
.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}
.tiddler .button {padding:0.2em 0.4em;}
.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}
.footer {font-size:.9em;}
.footer li {display:inline;}
.annotation {padding:0.5em; margin:0.5em;}
* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0em 0.25em; padding:0em 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}
.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}
.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}
.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0em; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}
.fieldsetFix {border:0; padding:0; margin:1px 0px 1px 0px;}
.sparkline {line-height:1em;}
.sparktick {outline:0;}
.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}
* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; right:0em;}
#backstageButton a {padding:0.1em 0.4em 0.1em 0.4em; margin:0.1em 0.1em 0.1em 0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; margin:0em 3em 0em 3em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}
.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
/*{{{*/
#tiddlerDisplay {border:1px solid #CCC;-moz-border-radius:0.5em}
.tabCloseButton {padding : 0 2px 0 2px ; margin : 0 0 0 4px; font-size:0.75em; vertical-align:top}
.tabUnselected .tabCloseButton {border : 1px solid #BBB; background-color : #DDD; color:#888}
.tabSelected .tabCloseButton {border : 1px solid #EEE; background-color : #D87443; color:#FFF}
.tabCloseButton:hover {color:#A00; background-color:#F0F0F0}
#tiddlersBar {padding : 1em 0.5em 0 0.5em}
#tiddlersBar .button {border:0; color:#444}
#tiddlerDisplay .tiddler {padding-top : 0.1em}
#tiddlersBar .tab {padding : 0.4em 0.5em 0.3em 0.5em; -moz-border-radius-topleft:0.5em;-moz-border-radius-topright:0.5em}
#tiddlersBar .tabSelected {background-color :#FFF;color:#CC6633;border-top: 1px solid #DDD;border-right: 1px solid #DDD;border-bottom: 1px solid #FFF;border-left:1px solid #DDD}
#tiddlersBar .tabUnselected {background-color :#EEE}
#tiddlersBar .tabUnselected .button {color:#AAA;font-weight:bold;font-style:italic;}
#tiddlersBar .tabSelected .button {color:#CC6633;font-weight:bold;}
/*}}}*/
<<timeline better:true sortBy:modified maxDays:20 maxEntries:30>>
/***
|''Name:''|TableSortingPlugin|
|''Description:''|Dynamically sort tables by clicking on column headers|
|''Author:''|Saq Imtiaz ( lewcid@gmail.com )|
|''Source:''|http://tw.lewcid.org/#TableSortingPlugin|
|''Code Repository:''|http://tw.lewcid.org/svn/plugins|
|''Version:''|2.01|
|''Date:''|28-11-2007|
|''License:''|[[Creative Commons Attribution-ShareAlike 3.0 License|http://creativecommons.org/licenses/by-sa/3.0/]]|
|''~CoreVersion:''|2.2.3|
!!Usage:
* Make sure your table has a header row
** {{{|Name|Phone Number|Address|h}}}<br> Note the /h/ that denote a header row
* Give the table a class of 'sortable'
** {{{
|sortable|k
|Name|Phone Number|Address|h
}}}<br>Note the /k/ that denotes a class name being assigned to the table.
* To disallow sorting by a column, place {{{<<nosort>>}}} in it's header
* To automatically sort a table by a column, place {{{<<autosort>>}}} in the header for that column
** Or to sort automatically but in reverse order, use {{{<<autosort reverse>>}}}
!!Example:
|sortable|k
|Name |Salary |Extension |Performance |File Size |Start date |h
|ZBloggs, Fred |$12000.00 |1353 |+1.2 |74.2Kb |Aug 19, 2003 21:34:00 |
|ABloggs, Fred |$12000.00 |1353 |1.2 |3350b |09/18/2003 |
|CBloggs, Fred |$12000 |1353 |1.200 |55.2Kb |August 18, 2003 |
|DBloggs, Fred |$12000.00 |1353 |1.2 |2100b |07/18/2003 |
|Bloggs, Fred |$12000.00 |1353 |01.20 |6.156Mb |08/17/2003 05:43 |
|Turvey, Kevin |$191200.00 |2342 |-33 |1b |02/05/1979 |
|Mbogo, Arnold |$32010.12 |2755 |-21.673 |1.2Gb |09/08/1998 |
|Shakespeare, Bill |£122000.00|3211 |6 |33.22Gb |12/11/1961 |
|Shakespeare, Hamlet |£9000 |9005 |-8 |3Gb |01/01/2002 |
|Fitz, Marvin |€3300.30 |5554 |+5 |4Kb |05/22/1995 |
***/
// /%
//!BEGIN-PLUGIN-CODE
config.tableSorting = {
darrow: "\u2193",
uarrow: "\u2191",
getText : function (o) {
var p = o.cells[SORT_INDEX];
return p.innerText || p.textContent || '';
},
sortTable : function (o,rev) {
SORT_INDEX = o.getAttribute("index");
var c = config.tableSorting;
var T = findRelated(o.parentNode,"TABLE");
if(T.tBodies[0].rows.length<=1)
return;
var itm = "";
var i = 0;
while (itm == "" && i < T.tBodies[0].rows.length) {
itm = c.getText(T.tBodies[0].rows[i]).trim();
i++;
}
if (itm == "")
return;
var r = [];
var S = o.getElementsByTagName("span")[0];
c.fn = c.sortAlpha;
if(!isNaN(Date.parse(itm)))
c.fn = c.sortDate;
else if(itm.match(/^[$|£|€|\+|\-]{0,1}\d*\.{0,1}\d+$/))
c.fn = c.sortNumber;
else if(itm.match(/^\d*\.{0,1}\d+[K|M|G]{0,1}b$/))
c.fn = c.sortFile;
for(i=0; i<T.tBodies[0].rows.length; i++) {
r[i]=T.tBodies[0].rows[i];
}
r.sort(c.reSort);
if(S.firstChild.nodeValue==c.darrow || rev) {
r.reverse();
S.firstChild.nodeValue=c.uarrow;
}
else
S.firstChild.nodeValue=c.darrow;
var thead = T.getElementsByTagName('thead')[0];
var headers = thead.rows[thead.rows.length-1].cells;
for(var k=0; k<headers.length; k++) {
if(!hasClass(headers[k],"nosort"))
addClass(headers[k].getElementsByTagName("span")[0],"hidden");
}
removeClass(S,"hidden");
for(i=0; i<r.length; i++) {
T.tBodies[0].appendChild(r[i]);
c.stripe(r[i],i);
for(var j=0; j<r[i].cells.length;j++){
removeClass(r[i].cells[j],"sortedCol");
}
addClass(r[i].cells[SORT_INDEX],"sortedCol");
}
},
stripe : function (e,i){
var cl = ["oddRow","evenRow"];
i&1? cl.reverse() : cl;
removeClass(e,cl[1]);
addClass(e,cl[0]);
},
sortNumber : function(v) {
var x = parseFloat(this.getText(v).replace(/[^0-9.-]/g,''));
return isNaN(x)? 0: x;
},
sortDate : function(v) {
return Date.parse(this.getText(v));
},
sortAlpha : function(v) {
return this.getText(v).toLowerCase();
},
sortFile : function(v) {
var j, q = config.messages.sizeTemplates, s = this.getText(v);
for (var i=0; i<q.length; i++) {
if ((j = s.toLowerCase().indexOf(q[i].template.replace("%0\u00a0","").toLowerCase())) != -1)
return q[i].unit * s.substr(0,j);
}
return parseFloat(s);
},
reSort : function(a,b){
var c = config.tableSorting;
var aa = c.fn(a);
var bb = c.fn(b);
return ((aa==bb)? 0 : ((aa<bb)? -1:1));
}
};
Story.prototype.tSort_refreshTiddler = Story.prototype.refreshTiddler;
Story.prototype.refreshTiddler = function(title,template,force,customFields,defaultText){
var elem = this.tSort_refreshTiddler.apply(this,arguments);
var tables = elem.getElementsByTagName("TABLE");
var c = config.tableSorting;
for(var i=0; i<tables.length; i++){
if(hasClass(tables[i],"sortable")){
var x = null, rev, table = tables[i], thead = table.getElementsByTagName('thead')[0], headers = thead.rows[thead.rows.length-1].cells;
for (var j=0; j<headers.length; j++){
var h = headers[j];
if (hasClass(h,"nosort"))
continue;
h.setAttribute("index",j);
h.onclick = function(){c.sortTable(this); return false;};
h.ondblclick = stopEvent;
if(h.getElementsByTagName("span").length == 0)
createTiddlyElement(h,"span",null,"hidden",c.uarrow);
if(!x && hasClass(h,"autosort")) {
x = j;
rev = hasClass(h,"reverse");
}
}
if(x)
c.sortTable(headers[x],rev);
}
}
return elem;
};
setStylesheet("table.sortable span.hidden {visibility:hidden;}\n"+
"table.sortable thead {cursor:pointer;}\n"+
"table.sortable .nosort {cursor:default;}\n"+
"table.sortable td.sortedCol {background:#ffc;}","TableSortingPluginStyles");
function stopEvent(e){
var ev = e? e : window.event;
ev.cancelBubble = true;
if (ev.stopPropagation) ev.stopPropagation();
return false;
}
config.macros.nosort={
handler : function(place){
addClass(place,"nosort");
}
};
config.macros.autosort={
handler : function(place,m,p,w,pS){
addClass(place,"autosort"+" "+pS);
}
};
//!END-PLUGIN-CODE
// %/
/***
|Name|TaggedTemplateTweak|
|Source|http://www.TiddlyTools.com/#TaggedTemplateTweak|
|Version|1.1.0|
|Author|Eric Shulman - ELS Design Studios|
|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|Story.prototype.chooseTemplateForTiddler()|
|Description|use alternative ViewTemplate/EditTemplate for tiddler's tagged with specific tag values|
The core function, "story.chooseTemplateForTiddler(title,template)" is essentially a "pass-thru" that returns the same template it was given, and is provided by the core so that plugins can customize the template selection logic to select alternative templates, based on whatever programmatic criteria is appropriate. This tweak extends story.chooseTemplateForTiddler() so that ''whenever a tiddler is marked with a specific tag value, it can be viewed and/or edited using alternatives to the standard tiddler templates.''
!!!!!Usage
<<<
Each alternative template is associated with a specific tiddler tag value by using that tag value as a prefix added to the standard TiddlyWiki template titles, [[ViewTemplate]] and [[EditTemplate]].
For example, any tiddlers that are tagged with ''<<tag media>>'' will look for alternative templates named [[mediaViewTemplate]] and [[mediaEditTemplate]]. Additionally, in order to find templates that have proper WikiWord tiddler titles (e.g., [[MediaViewTemplate]] and [[MediaEditTemplate]]), the plugin will also attempt to use a capitalized form of the tag value (e.g., ''Media'') as a prefix. //This capitalization is for comparison purposes only and will not alter the actual tag values that are stored in the tiddler.//
If no matching alternative template can be found by using //any// of the tiddler's tags (either "as-is" or capitalized), the tiddler defaults to using the appropriate standard [[ViewTemplate]] or [[EditTemplate]] definition.
''To add your own custom templates:''
>First, decide upon a suitable tag keyword to uniquely identify your custom templates and create custom view and/or edit templates using that keyword as a prefix (e.g., "KeywordViewTemplate" and "KeywordEditTemplate"). Then, simply create a tiddler and tag it with your chosen keyword... that's it! As long as the tiddler is tagged with your keyword, it will be displayed using the corresponding alternative templates. If you remove the tag or rename/delete the alternative templates, the tiddler will revert to using the standard viewing and editing templates.
<<<
!!!!!Examples
<<<
|Sample tiddler| tag | view template | edit template |
|[[MediaSample - QuickTime]]| <<tag media>> | [[MediaViewTemplate]] | [[MediaEditTemplate]] |
|[[MediaSample - Windows]]| <<tag media>> | [[MediaViewTemplate]] | [[MediaEditTemplate]] |
|[[CDSample]]| <<tag CD>> | [[CDViewTemplate]] | [[CDEditTemplate]] |
|<<newTiddler label:"create new task..." title:SampleTask tag:task text:"Type some text and then press DONE to view the task controls">> | <<tag task>> | [[TaskViewTemplate]] | [[EditTemplate]] |
//(note: if these samples are not present in your document, please visit// http://www.TiddlyTools.com/ //to view these sample tiddlers on-line)//
<<<
!!!!!Installation
<<<
import (or copy/paste) the following tiddlers into your document:
[[WikifyPlugin]]
<<<
!!!!!Revision History
<<<
''2007.06.23 [1.1.0]'' re-written to use automatic 'tag prefix' search instead of hard coded check for each tag. Allows new custom tags to be used without requiring code changes to this plugin.
''2007.06.11 [1.0.0]'' initial release
<<<
!!!!!Credits
<<<
This feature was developed by Eric L Shulman / ELS Design Studios
<<<
!!!!!Code
***/
//{{{
version.extensions.taggedTemplate= {major: 1, minor: 1, revision: 0, date: new Date(2007,6,18)};
Story.prototype.taggedTemplate_chooseTemplateForTiddler = Story.prototype.chooseTemplateForTiddler
Story.prototype.chooseTemplateForTiddler = function(title,template)
{
// get default template from core
var template=this.taggedTemplate_chooseTemplateForTiddler.apply(this,arguments);
// if the tiddler to be rendered doesn't exist yet, just return core result
var tiddler=store.getTiddler(title); if (!tiddler) return template;
// look for template whose prefix matches a tag on this tiddler
for (t=0; t<tiddler.tags.length; t++) {
var tag=tiddler.tags[t];
if (store.tiddlerExists(tag+template)) { template=tag+template; break; }
// try capitalized tag (to match WikiWord template titles)
var cap=tag.substr(0,1).toUpperCase()+tag.substr(1);
if (store.tiddlerExists(cap+template)) { template=cap+template; break; }
}
return template;
}
//}}}
/***
|''Name:''|~TaggerPlugin|
|''Version:''|1.0.1 (2006-06-01)|
|''Source:''|http://tw.lewcid.org//#TaggerPlugin|
|''Author:''|SaqImtiaz|
|''Description:''|Provides a drop down listing current tiddler tags, and allowing toggling of tags.|
|''Documentation:''|[[TaggerPluginDocumentation]]|
|''Source Code:''|[[TaggerPluginSource]]|
|''~TiddlyWiki:''|Version 2.0.8 or better|
***/
// /%
config.tagger={defaults:{label:"Tags: ",tooltip:"Manage tiddler tags",taglist:"true",excludeTags:"",notags:"tiddler has no tags",aretags:"current tiddler tags:",toggletext:"add tags:"}};config.macros.tagger={};config.macros.tagger.arrow=(document.all?"▼":"▾");config.macros.tagger.handler=function(_1,_2,_3,_4,_5,_6){var _7=config.tagger.defaults;var _8=_5.parseParams("tagman",null,true);var _9=((_8[0].label)&&(_8[0].label[0])!=".")?_8[0].label[0]+this.arrow:_7.label+this.arrow;var _a=((_8[0].tooltip)&&(_8[0].tooltip[0])!=".")?_8[0].tooltip[0]:_7.tooltip;var _b=((_8[0].taglist)&&(_8[0].taglist[0])!=".")?_8[0].taglist[0]:_7.taglist;var _c=((_8[0].exclude)&&(_8[0].exclude[0])!=".")?(_8[0].exclude[0]).readBracketedList():_7.excludeTags.readBracketedList();if((_8[0].source)&&(_8[0].source[0])!="."){var _d=_8[0].source[0];}if(_d&&!store.getTiddler(_d)){return false;}var _e=function(e){if(!e){var e=window.event;}var _11=Popup.create(this);var _12=store.getTags();var _13=new Array();for(var i=0;i<_12.length;i++){_13.push(_12[i][0]);}if(_d){var _15=store.getTiddler(_d);_13=_15.tags.sort();}var _16=_6.tags.sort();var _17=function(_18,_19,_1a){var sp=createTiddlyElement(createTiddlyElement(_11,"li"),"span",null,"tagger");var _1c=createTiddlyButton(sp,_18,_1a+" '"+_19+"'",taggerOnToggle,"button","toggleButton");_1c.setAttribute("tiddler",_6.title);_1c.setAttribute("tag",_19);insertSpacer(sp);if(window.createTagButton_orig_mptw){createTagButton_orig_mptw(sp,_19)}else{createTagButton(sp,_19);}};createTiddlyElement(_11,"li",null,"listTitle",(_6.tags.length==0?_7.notags:_7.aretags));for(var t=0;t<_16.length;t++){_17("[x]",_16[t],"remove tag ");}createTiddlyElement(createTiddlyElement(_11,"li"),"hr");if(_b!="false"){createTiddlyElement(_11,"li",null,"listTitle",_7.toggletext);for(var i=0;i<_13.length;i++){if(!_6.tags.contains(_13[i])&&!_c.contains(_13[i])){_17("[ ]",_13[i],"add tag ");}}createTiddlyElement(createTiddlyElement(_11,"li"),"hr");}var _1f=createTiddlyButton(createTiddlyElement(_11,"li"),("Create new tag"),null,taggerOnToggle);_1f.setAttribute("tiddler",_6.title);if(_d){_1f.setAttribute("source",_d);}Popup.show(_11,false);e.cancelBubble=true;if(e.stopPropagation){e.stopPropagation();}return (false);};createTiddlyButton(_1,_9,_a,_e,"button","taggerDrpBtn");};window.taggerOnToggle=function(e){var tag=this.getAttribute("tag");var _22=this.getAttribute("tiddler");var _23=store.getTiddler(_22);if(!tag){var _24=prompt("Enter new tag:","");if(_24!=""&&_24!=null){var tag=_24;if(this.getAttribute("source")){var _26=store.getTiddler(this.getAttribute("source"));_26.tags.pushUnique(_24);}}else{return false;}}if(!_23||!_23.tags){store.saveTiddler(_22,_22,"",config.options.txtUserName,new Date(),tag);}else{if(_23.tags.find(tag)==null){_23.tags.push(tag);}else{if(!_24){_23.tags.splice(_23.tags.find(tag),1);}}store.saveTiddler(_23.title,_23.title,_23.text,_23.modifier,_23.modified,_23.tags);}story.refreshTiddler(_22,null,true);if(config.options.chkAutoSave){saveChanges();}return false;};setStylesheet(".tagger a.button {font-weight: bold;display:inline; padding:0px;}\n"+".tagger #toggleButton {padding-left:2px; padding-right:2px; margin-right:1px; font-size:110%;}\n"+"#nestedtagger {background:#2E5ADF; border: 1px solid #0331BF;}\n"+".popup .listTitle {color:#000;}\n"+"","TaggerStyles");window.lewcidTiddlerSwapTag=function(_27,_28,_29){for(var i=0;i<_27.tags.length;i++){if(_27.tags[i]==_28){_27.tags[i]=_29;return true;}}return false;};window.lewcidRenameTag=function(e){var tag=this.getAttribute("tag");var _2d=prompt("Rename tag '"+tag+"' to:",tag);if((_2d==tag)||(_2d==null)){return false;}if(store.tiddlerExists(_2d)){if(confirm(config.messages.overwriteWarning.format([_2d.toString()]))){story.closeTiddler(_2d,false,false);}else{return null;}}tagged=store.getTaggedTiddlers(tag);if(tagged.length!=0){for(var j=0;j<tagged.length;j++){lewcidTiddlerSwapTag(tagged[j],tag,_2d);}}if(store.tiddlerExists(tag)){store.saveTiddler(tag,_2d);}if(document.getElementById("tiddler"+tag)){var _2f=document.getElementById(story.idPrefix+tag);var _30=story.positionTiddler(_2f);var _31=document.getElementById(story.container);story.closeTiddler(tag,false,false);story.createTiddler(_31,_30,_2d,null);story.saveTiddler(_2d);}if(config.options.chkAutoSave){saveChanges();}return false;};window.onClickTag=function(e){if(!e){var e=window.event;}var _34=resolveTarget(e);var _35=(!isNested(_34));if((Popup.stack.length>1)&&(_35==true)){Popup.removeFrom(1);}else{if(Popup.stack.length>0&&_35==false){Popup.removeFrom(0);}}var _36=(_35==false)?"popup":"nestedtagger";var _37=createTiddlyElement(document.body,"ol",_36,"popup",null);Popup.stack.push({root:this,popup:_37});var tag=this.getAttribute("tag");var _39=this.getAttribute("tiddler");if(_37&&tag){var _3a=store.getTaggedTiddlers(tag);var _3b=[];var li,r;for(r=0;r<_3a.length;r++){if(_3a[r].title!=_39){_3b.push(_3a[r].title);}}var _3d=config.views.wikified.tag;if(_3b.length>0){var _3e=createTiddlyButton(createTiddlyElement(_37,"li"),_3d.openAllText.format([tag]),_3d.openAllTooltip,onClickTagOpenAll);_3e.setAttribute("tag",tag);createTiddlyElement(createTiddlyElement(_37,"li"),"hr");for(r=0;r<_3b.length;r++){createTiddlyLink(createTiddlyElement(_37,"li"),_3b[r],true);}}else{createTiddlyText(createTiddlyElement(_37,"li",null,"disabled"),_3d.popupNone.format([tag]));}createTiddlyElement(createTiddlyElement(_37,"li"),"hr");var h=createTiddlyLink(createTiddlyElement(_37,"li"),tag,false);createTiddlyText(h,_3d.openTag.format([tag]));createTiddlyElement(createTiddlyElement(_37,"li"),"hr");var _40=createTiddlyButton(createTiddlyElement(_37,"li"),("Rename tag '"+tag+"'"),null,lewcidRenameTag);_40.setAttribute("tag",tag);}Popup.show(_37,false);e.cancelBubble=true;if(e.stopPropagation){e.stopPropagation();}return (false);};if(!window.isNested){window.isNested=function(e){while(e!=null){var _42=document.getElementById("contentWrapper");if(_42==e){return true;}e=e.parentNode;}return false;};}config.shadowTiddlers.TaggerPluginDocumentation="The documentation is available [[here.|http://tw.lewcid.org/#TaggerPluginDocumentation]]";config.shadowTiddlers.TaggerPluginSource="The uncompressed source code is available [[here.|http://tw.lewcid.org/#TaggerPluginSource]]";
// %/
''If you want this documentation available offline, copy this tiddler to your TW.''
!Description:
The tagger plugin is a result of combining key features from the dropTags and tagAdder macro's. However, since it departs somewhat from the interface tagAdder users will be familiar with, I'm making this available as a new plugin alongside tagAdder.
Tagger provides a dropdown list of the current tiddler tags, along with the ability to toggle them. Further it can optionally display a list of tags in the dropdown, which can be addded to the tiddler.
*Clicking on ''[x]'' and ''[ ]'' removes and adds the tag respectively.
*Clicking on the tag text displays the tag dropdown for that tag, listing tiddlers tagged with it.
*The ''Create new tag'' lets you quickly type in a new tag not in the list.
*Click on this button to see the dropdown: <<tagger>>
Further note that each tag dropdown has a ''Rename tag'' option. This can be used to quickly rename a tag in the entire TW, also rename it's tiddler if it exists.
//''tagAdder, dropTags and the future''
- tagAdder will no longer will be developed, but will remain available. I encourage all tagAdder users to upgrade to tagger.
- dropTags will still be developed for those users that dont want the 'tag editing' features.//
!Examples & Usage:
*At it's simplest, using tagger is as simple as {{{<<tagger>>}}} <<tagger>>
**This gives a dropdown with the current tiddler tags, followed by all the tags in the TW.
*You can also use a list of specified tags instead of all tags in the TW, by specifying a source tiddler.
**{{{<<tagger source:TagsDB>>}}} <<tagger source:TagDataBase>>
*You can also display ONLY the current tiddler tags
**{{{<<tagger taglist:false>>}}} <<tagger taglist:false>>
*To exclude tags from the list: {{{<<tagger exclude:"excludeLists Tag2 [[Tag with spaces]]">>}}} <<tagger exclude:"excludeLists Tag2 [[Tag with spaces]]">>
*For a custom button label: {{{<<tagger label:"custom label">>}}} <<tagger label:"custom label">>
*For a custom tooltip: {{{<<tagger tooltip:"custom tooltip">>}}} <<tagger tooltip:"custom tooltip">>
!CSS and Styling:
For those wishing to customize the popup appearance:
*the main popup has a class and id of popup has with all other popups.
*the nested tag popups have an id of nestedpopup
!Advanced Users:
You can change the global defaults for tagger, like the button label, the tags to exclude or whether to display the taglist or not, by editing the ''config.tagger.defaults'' section in the code.
!To Do:
*code optimization
*possibly a 'delete this tag' option.
!History
*version 1.0.1 (2006-06-01): fixed conflicts with QuickOpenTag (TagglyTagging) and AutoTagger.
!!How does Elgg work?
It's helpful to have an idea of how the system works in order to understand it's capabilities. Like many Open Source systems Elgg is a web based system that is powered by the php engine compiled into the Apache web server with the data or //content// being stored in a database (~MySQL). The web interface is built on the fly from content pulled from the database using another Apache component called //mod-rewrite// that rewrites ~URLs to pull out the appropriate information. Thus the system is heavy on database access. The Unix file system stores the php code, and database files, and there is a filing system built into Elgg which organises files by //user// (rather than the Moodle approach by course); access to all the content is controlled by a sophisticated access control system.
/***
|''Name:''|TiddlerNotesPlugin|
|''Description:''|Add notes to tiddlers without modifying the original content|
|''Author:''|Saq Imtiaz ( lewcid@gmail.com )|
|''Source:''|http://tw.lewcid.org/#TiddlerNotesPlugin|
|''Code Repository:''|http://tw.lewcid.org/svn/plugins|
|''Version:''|2.1|
|''Date:''|26/10/07|
|''License:''|[[Creative Commons Attribution-ShareAlike 3.0 License|http://creativecommons.org/licenses/by-sa/3.0/]]|
|''~CoreVersion:''|2.2.3|
!!Concept:
*The TiddlerNotesPlugin allows you to add notes to tiddlers, without needing to edit the original tiddler. This means that your original content will remain unaltered, and if you update it in the future, you won’t lose your notes. Notes are stored in separate tiddlers, but can be viewed and edited from within the original tiddler.
*For a tiddler titled "~MySlide", the notes are by default saved in a tiddler titled "~MySlide-Notes" and is given a tag of "Notes". The suffix and tags of the notes tiddlers are customizable. You can have one or multiple notes per tiddlers. So it is possible to have for example, teacher's notes and student's notes in the same file.
*Notes can be configured to start off blank, or pre-filled with the contents of the original tiddler.
!!Usage:
*{{{<<notes>>}}} is the simplest usage form.
* additional optional parameters include:
**{{{heading:}}} the heading to use for the notes box
**{{{tag:}}} the tag to be given to the notes tiddler
**{{{suffix:}}} the suffix to be used when naming the notes tiddler
* a full macro call could look like: {{{<<notes heading:"My Notes" tag:"NoteTiddlers" suffix:"Comments">>}}}
* To avoid adding {{{<<notes>>}}} to each tiddler you want notes for, you could add the macro call to the ViewTemplate
** below the line {{{<div class='viewer' macro='view text wikified'></div>}}} add the following line: <br> {{{<div class='viewer' macro='notes'></div>}}}
** Used in combination with the ~HideWhenPlugin or ~PublisherPlugin, you could have notes be shown only for tiddlers with specific tags. The ~PublisherPlugin would allow you for instance to only have the ~TeachersNotes visible to the teacher, and the ~StudentsNotes for the same tiddler visible to the Student.
!!Configuration
*<<option chkPrefillNotes>> Enable to pre-fill notes with the original tiddler's contents
!!Demo:
* [[MySlide]]
***/
// /%
//!BEGIN-PLUGIN-CODE
if (!config.options.chkPrefillNotes)
config.options.chkPrefillNotes = false;
function createTiddlyElement(theParent,theElement,theID,theClass,theText,attribs)
{
var e = document.createElement(theElement);
if(theClass != null)
e.className = theClass;
if(theID != null)
e.setAttribute("id",theID);
if(theText != null)
e.appendChild(document.createTextNode(theText));
if(attribs){
for(var n in attribs){
e.setAttribute(n,attribs[n]);
}
}
if(theParent != null)
theParent.appendChild(e);
return e;
}
function createTiddlyButton(theParent,theText,theTooltip,theAction,theClass,theId,theAccessKey,attribs)
{
var theButton = document.createElement("a");
if(theAction) {
theButton.onclick = theAction;
theButton.setAttribute("href","javascript:;");
}
if(theTooltip)
theButton.setAttribute("title",theTooltip);
if(theText)
theButton.appendChild(document.createTextNode(theText));
if(theClass)
theButton.className = theClass;
else
theButton.className = "button";
if(theId)
theButton.id = theId;
if(attribs){
for(var n in attribs){
e.setAttribute(n,attribs[n]);
}
}
if(theParent)
theParent.appendChild(theButton);
if(theAccessKey)
theButton.setAttribute("accessKey",theAccessKey);
return theButton;
}
config.macros.notes={
cancelWarning: "Are you sure you want to abandon changes to your notes for '%0'?",
editLabel: "edit notes",
editTitle: "double click to edit",
saveLabel: "save notes",
saveTitle: "double click to save",
cancelLabel: "cancel",
heading: "Notes",
suffix: "Notes",
tag: "Notes",
saveNotes: function(ev){
e = ev? ev : window.event;
var theTarget = resolveTarget(e);
if (theTarget.nodeName.toLowerCase() == "textarea")
return false;
var title = story.findContainingTiddler(theTarget).getAttribute("tiddler");
story.setDirty(title,false);
var box = document.getElementById("notesContainer"+title);
var textarea = document.getElementById("notesTextArea"+title);
if(textarea.getAttribute("oldText")!=textarea.value && !hasClass(theTarget,"cancelNotesButton")){
var suffix = box.getAttribute("suffix");
var t = store.getTiddler(title+"-"+suffix);
store.saveTiddler(title+"-"+suffix,title+"-"+suffix,textarea.value,config.options.txtUserName,new Date(),t?t.tags:box.getAttribute("tag"),t?t.fields:{});
}
story.refreshTiddler(title,1,true);
autoSaveChanges(true);
return false;
},
editNotes: function(box,tiddler){
removeChildren(box);
story.setDirty(tiddler,true);
box.title = this.saveTitle;
box.ondblclick = this.saveNotes;
createTiddlyButton(box,this.cancelLabel,this.cancelLabel,this.saveNotes,"cancelNotesButton");
createTiddlyButton(box,this.saveLabel,this.saveLabel,this.saveNotes,"saveNotesButton");
wikify("!!"+box.getAttribute("heading")+"\n",box);
addClass(box,"editor");
var wrapper1 = createTiddlyElement(null,"fieldset",null,"fieldsetFix");
var wrapper2 = createTiddlyElement(wrapper1,"div");
var e = createTiddlyElement(wrapper2,"textarea","notesTextArea"+tiddler);
var v = store.getValue(tiddler+"-"+box.getAttribute("suffix"),"text");
if(!v)
v = config.options.chkPrefillNotes? store.getValue(tiddler,"text"):'';
e.value = v;
e.setAttribute("oldText",v);
var rows = 10;
var lines = v.match(/\n/mg);
var maxLines = Math.max(parseInt(config.options.txtMaxEditRows),5);
if(lines != null && lines.length > rows)
rows = lines.length + 5;
rows = Math.min(rows,maxLines);
e.setAttribute("rows",rows);
box.appendChild(wrapper1);
},
editNotesButtonOnclick: function(e){
var title = story.findContainingTiddler(this).getAttribute("tiddler");
var box = document.getElementById("notesContainer"+title);
config.macros.notes.editNotes(box,title);
return false;
},
ondblclick : function(ev){
e = ev? ev : window.event;
var theTarget = resolveTarget(e);
var title = story.findContainingTiddler(theTarget).getAttribute("tiddler");
var box = document.getElementById("notesContainer"+title);
config.macros.notes.editNotes(box,title);
e.cancelBubble = true;
if(e.stopPropagation) e.stopPropagation();
return false;
},
handler : function(place,macroName,params,wikifier,paramString,tiddler){
params = paramString.parseParams("anon",null,true,false,false);
var heading = getParam(params,"heading",this.heading);
var tag = getParam(params,"tag",this.tag);
var suffix = getParam(params,"suffix",this.suffix);
var box = createTiddlyElement(place,"div","notesContainer"+tiddler.title,"TiddlerNotes",null,{"source":tiddler.title,params:paramString,heading:heading,tag:tag,suffix:suffix});
createTiddlyButton(box,this.editLabel,this.editLabel,this.editNotesButtonOnclick,"editNotesButton");
wikify("!!"+heading+"\n",box);
box.title=this.editTitle;
box.ondblclick = this.ondblclick;
wikify("<<tiddler [["+tiddler.title+"-"+suffix+"]]>>",box);
}
};
Story.prototype.old_notes_closeTiddler = Story.prototype.closeTiddler;
Story.prototype.closeTiddler = function(title,animate,unused){
if(story.isDirty(title)) {
if(!confirm(config.macros.notes.cancelWarning.format([title])))
return false;
}
return this.old_notes_closeTiddler.apply(this,arguments);
}
setStylesheet(".TiddlerNotes {\n"+ " background:#eee;\n"+ " border:1px solid #ccc;\n"+ " padding:10px;\n"+ " margin:15px;\n"+ "}\n"+ "\n"+ ".cancelNotesButton,.editNotesButton, .saveNotesButton {\n"+ " float:right;\n"+ " border:1px solid #ccc;\n"+ " padding:2px 5px;\n"+ "}\n"+ "\n"+ ".saveNotesButton{\n"+ " margin-right:0.5em;\n"+ "}\n"+ "\n"+ ".TiddlerNotes.editor textarea{\n"+ " border:1px solid #ccc;\n"+ "}","NotesPluginStyles");
//!END-PLUGIN-CODE
// %/
/***
|Location|http://visualtw.ouvaton.org/VisualTW.html|
|Version|1.0.4|
|CoreVersion|2.x|
|Browsers|Firefox 2.0.x, IE 6.0+, others|
!Description:
A bar to switch between tiddlers through tabs (like browser tabs bar).
!Demo:
* On [[homepage|http://visualtw.ouvaton.org/VisualTW.html]], open several tiddlers to use the tabs bar.
* See also http://groups.google.com/group/TiddlyWiki/msg/98992b8611d064ab where was posted a link to a "stand alone version" that you can use to test this plugin in any TW pages (by copying and pasting the code in the browser address bar).
!Installation:
*import this tiddler from [[homepage|http://visualtw.ouvaton.org/VisualTW.html]] (tagged as systemConfig)
*add a div named ''tiddlersBar'' in PageTemplate (optionally, adds ondblclick event handler to create new tiddler on this action).
*save and reload
*optionally, adjust StyleSheetTiddlersBar
!Configuration options :
<<option chkDisableTabsBar>> Disable the tabs bar (to print, by example).
<<option chkHideTabsBarWhenSingleTab >> Automatically hide the tabs bar when only one tiddler is displayed.
<<option txtSelectedTiddlerTabButton>> Optional ''selected'' tab button (as in command bar). Example : editTiddler
!Code
***/
//{{{
config.options.chkDisableTabsBar = config.options.chkDisableTabsBar ? config.options.chkDisableTabsBar : false;
config.options.chkHideTabsBarWhenSingleTab = config.options.chkHideTabsBarWhenSingleTab ? config.options.chkHideTabsBarWhenSingleTab : false;
config.options.txtSelectedTiddlerTabButton = config.options.txtSelectedTiddlerTabButton ? config.options.txtSelectedTiddlerTabButton : "";
config.macros.tiddlersBar = {
tooltip : "see ",
tooltipClose : "click here to close this tab",
promptRename : "Enter tiddler new name",
currentTiddler : "",
previousState : false,
handler: function(place,macroName,params) {
if (config.macros.tiddlersBar.isShown())
story.forEachTiddler(function(title,e){
if (title==config.macros.tiddlersBar.currentTiddler){
var d = createTiddlyElement(null,"nobr",null,"tab tabSelected");
if (config.options.txtSelectedTiddlerTabButton && config.commands[config.options.txtSelectedTiddlerTabButton]) {
var btn = createTiddlyButton(d, title, config.commands[config.options.txtSelectedTiddlerTabButton].tooltip ,config.macros.tiddlersBar.onSelectedTabButtonClick);
btn.setAttribute("tiddler", title);
}
else
createTiddlyText(d,title);
}
else {
var d = createTiddlyElement(place,"nobr",null,"tab tabUnselected");
var btn = createTiddlyButton(d,title,config.macros.tiddlersBar.tooltip + title,config.macros.tiddlersBar.onSelectTab);
btn.setAttribute("tiddler", title);
}
var c = createTiddlyButton(d,"x",config.macros.tiddlersBar.tooltipClose,config.macros.tiddlersBar.onTabClose,"tabCloseButton");
c.setAttribute("tiddler", title);
if (place.childNodes) {
place.insertBefore(document.createTextNode(" "),place.firstChild); // to allow break line here when many tiddlers are open
place.insertBefore(d,place.firstChild);
}
else place.appendChild(d);
})
},
refresh: function(place,params){
removeChildren(place);
config.macros.tiddlersBar.handler(place,"tiddlersBar",params);
if (config.macros.tiddlersBar.previousState!=config.macros.tiddlersBar.isShown()) {
story.refreshAllTiddlers();
if (config.macros.tiddlersBar.previousState) story.forEachTiddler(function(t,e){e.style.display="";});
config.macros.tiddlersBar.previousState = !config.macros.tiddlersBar.previousState;
}
},
isShown : function(){
if (config.options.chkDisableTabsBar) return false;
if (!config.options.chkHideTabsBarWhenSingleTab) return true;
var cpt=0;
story.forEachTiddler(function(){cpt++});
return (cpt>1);
},
selectNextTab : function(){ //used when the current tab is closed (to select another tab)
var previous="";
story.forEachTiddler(function(title){
if (!config.macros.tiddlersBar.currentTiddler) {
story.displayTiddler(null,title);
return;
}
if (title==config.macros.tiddlersBar.currentTiddler) {
if (previous) {
story.displayTiddler(null,previous);
return;
}
else config.macros.tiddlersBar.currentTiddler=""; // so next tab will be selected
}
else previous=title;
});
},
onSelectTab : function(e){
var t = this.getAttribute("tiddler");
if (t) story.displayTiddler(null,t);
return false;
},
onTabClose : function(e){
var t = this.getAttribute("tiddler");
if (t) {
if(story.hasChanges(t) && !readOnly) {
if(!confirm(config.commands.cancelTiddler.warning.format([t])))
return false;
}
story.closeTiddler(t);
}
return false;
},
onSelectedTabButtonClick : function(event,src,title) {
var t = this.getAttribute("tiddler");
if (t && config.options.txtSelectedTiddlerTabButton && config.commands[config.options.txtSelectedTiddlerTabButton])
config.commands[config.options.txtSelectedTiddlerTabButton].handler(event, src, t);
},
onTiddlersBarAction: function(event) {
var source = event.target ? event.target.id : event.srcElement.id; // FF uses target and IE uses srcElement;
if (source=="tiddlersBar") story.displayTiddler(null,'New Tiddler',DEFAULT_EDIT_TEMPLATE,false,null,null);
}
}
story.coreCloseTiddler = story.coreCloseTiddler? story.coreCloseTiddler : story.closeTiddler;
story.coreDisplayTiddler = story.coreDisplayTiddler ? story.coreDisplayTiddler : story.displayTiddler;
story.closeTiddler = function(title,animate,unused) {
if (title==config.macros.tiddlersBar.currentTiddler)
config.macros.tiddlersBar.selectNextTab();
story.coreCloseTiddler(title,animate,unused);
var e=document.getElementById("tiddlersBar");
if (e) config.macros.tiddlersBar.refresh(e,null);
}
story.displayTiddler = function(srcElement,title,template,animate,unused,customFields,toggle){
story.coreDisplayTiddler(srcElement,title,template,animate,unused,customFields,toggle);
if (config.macros.tiddlersBar.isShown()) {
story.forEachTiddler(function(t,e){
if (t!=title) e.style.display="none";
else e.style.display="";
})
config.macros.tiddlersBar.currentTiddler=title;
}
var e=document.getElementById("tiddlersBar");
if (e) config.macros.tiddlersBar.refresh(e,null);
}
ensureVisible=function (e) {return 0} //disable bottom scrolling (not useful now)
config.shadowTiddlers.StyleSheetTiddlersBar = "/*{{{*/\n" + "#tiddlersBar .button {border:0}\n" + "#tiddlersBar {padding : 1em 0.5em 0 0.5em}\n"+ "/*}}}*/";
store.addNotification("StyleSheetTiddlersBar", refreshStyles);
//}}}
!Documentation for TiddlyLightBoxPlugin
''Credits:''
This lightbox implementation is a derivative of Bob Denny's [[DC3.LightBox|http://solo.dc3.com/tw/index.html]] library optimized for a ~TiddlyWiki environment, with an emphasis on ease of use. It also uses some code and ideas from [[LightBox Gone Wild|http://particletree.com/features/lightbox-gone-wild/]] and [[Ibox|http://www.ibegin.com/ibox/]]. For a more feature rich and versatile option, you can't beat the ~DC3 library.
''Concept:''
I needed a light weight lightbox implementation for [[TiddlyThemes|http://tiddlythemes.googlepages.com/index.html]] but none of the existing options fit the bill. The ~DC3 library came closest, so I set out to rewrite it. I believe the result is a quite versatile ~TW plugin. Some of the bells and whistles have been removed though since I find them annoying (animations), and there are some features yet to be implemented, as you can read further on this document. Almost the entire library has been rewritten.
''Installation:''
Copy the TiddlyLightBoxPlugin tiddler to your TW, tag it with systemConfig, save and reload your TW file. You will also need to save [[this|indicator.gif]] 'loading' image to the same folder as your TW. Or you can choose one of many [[here|http://www.ajaxload.info/]]. That's it, you are ready to create some lightboxes!
''Usage:''
There are 3 macros provide to facilitate setting up macros.
1. ''{{{<<imagebox>>}}}''
The imagebox macro is designed to display images in the lightbox. The usage is very easy. Simply create a text or image link to an image using standard TW syntax, and follow it with {{{<<imagebox>>}}}.
Eg: {{{[img[cactus-thumb.jpg]cactus.jpg]]}}}
[img[cactus-thumb.jpg][cactus.jpg]]<<imagebox>>
Let's try a text link: {{{[[click me|triad.jpg]]<<imagebox>>}}}
[[click me|triad.jpg]]<<imagebox>>
This macro also accepts some optional parameters in this order:
2. description text
3. width ( as a number, like 500)
4. height (as a number, like 300)
Also, if width is passed as a word, like "bananas", then it is treated as a css class and the container for the image is given the class "bananas".
Let's try one more, with a title and a custom size:
{{{[img[cubicles-thumb.jpg][cubicles.jpg]]<<imagebox 'Office space' 300 300>>}}}
[img[cubicles-thumb.jpg][cubicles.jpg]]<<imagebox 'Office space' 300 300>>
----
2. ''{{{<<divbox>>}}}''
The divbox macro lets you put the html content of any inline div into a lightbox, you just need the id of the div in question. The idea being to create a hidden div using "display:none" and then displaying it on the click of a link/button.
You can create such a div in any tiddler by wrapping it in html tags, but using the MarkupPostBody tiddler might be the better option.
The macro can create the button for you, or you can use an existing element to launch the lightbox. To create a button, pass the label for the button as the first parameter. To use an existing element, pass the first parameter as ' ' and place the macro immediately after the element. Eg: {{{<<tiddlerbox label>> or <<tiddlerbox ''>>}}}
The next parameter is the id of the div to display: {{{<<tiddlerbox label theID>>}}}
These two parameters are a must for the divbox macro. There are also 3 more optional parameters, just like the imagebox macro:
3. description text
4. width ( as a number, like 500) OR className
5. height (as a number, like 300)
As an example, lets display this hidden div which I have written inline:
{{{<html><div id="testDiv" style="display:none;"><div style="text-align:center;"> Lightboxes have become very cliche, but they can still be useful!</div></div></html><<divbox "Click to see it" "testDiv" "This is a test div">>}}}
<html><div id="testDiv" style="display:none;"><div style="text-align:center"><br><br><br><br> Lightboxes have become very cliche, but they can still be useful!</div></div></html><<divbox "Click to see it" "testDiv" "This is a test div">>
----
3.''{{{<<tiddlerbox>>}}}''
This macro lets you put the wikified contents of any tiddler into a lightbox! So you can put your MainMenu and Sidebar into a lightbox for example, and have handy links to bring them up whenever you need them. (like in say the hovering menu provided by HoverMenuPlugin). It's also very useful for when you are working on something and want to refer to some reference material without having to loose your place in your work.
The parameters for this macro are the same as for the divbox macro, except instead of the id for the div, you use the title of the tiddler.
Let's give it a go:
{{{<<tiddlerbox "menu" "MainMenu" "Thats my main menu, and the links work!">>}}}
<<tiddlerbox "menu" "MainMenu" "Thats my main menu, and the links work!">>
or
{{{<<tiddlerbox "menu" "Sidebar" "Thats my sidebar!" 300 500>>}}}
<<tiddlerbox "sidebar" "Sidebar" "Thats my sidebar!" 300 500>>
-----
''CSS Styling:''
The css rules for the lightbox and its contents are in the TiddlyLightBoxStyles folder. You can edit them to your liking, but I recommend not changing the rules for ~lightBoxOverlay and lightboxprogress. But don't worry, if you break anything, just delete the tiddler. It's a shadow tiddler!
I'll post a diagram showing the structure of the lightbox later, to faciliate css styling.
----
''Features comparison with ~DC3Lightbox:''
Missing:
* IE transparency filters
* ability to create own lightbox containers
*call back functions on closing lightbox
Added:
*macros for TW usage
*optimized for TW environment
*ability to display Tiddlers in lightboxes
*preloading of images, to avoid layout problems
*removed need for manually creating styles tiddler and adding html markup.
*fixed bug with regards to selects displaying over the lightbox!
----
''To Do''
* fixed positioning of lightbox so it scrolls with the page!
*possible light weight animation for images
* optional preloading of images
* resizing of images to fit the viewport when larger.
* optional automatic lightboxing of all links to images.
*grabbing description from image alt text.
* improved support for inline html content.
!!Images in a lightbox:
[img[cactus-thumb.jpg][cactus.jpg]]<<imagebox>>
Let's try a text link:
[[click me|triad.jpg]]<<imagebox>>
----
!Html div in a lightbox:
<html><div id="testDiv" style="display:none;"><div style="text-align:center"><br><br><br><br> Lightboxes have become very cliche, but they can still be useful!</div></div></html><<divbox "Click to see it" "testDiv" "This is a test div">>
----
!Tiddlers in a lightbox:
Let's give it a go:
<<tiddlerbox "menu" "MainMenu" "Thats my main menu, and the links work!">>
<<tiddlerbox "sidebar" "Sidebar" "Thats my sidebar!" 300 500>>
----
[[Full Documentation|TiddlyLightBoxDoc]]
[[TiddlyLightBoxPlugin]]
/***
|''Name:''|TiddlyLightBox|
|''Date:''|Jan 1, 2006|
|''Version:''|1.0 beta|
|''Author:''|Saq Imtiaz|
|''Location:''|http://tw.lewcid.org/#TiddlyLightBoxPlugin|
|''Documentation:''|http://tw.lewcid.org/#TiddlyLightBoxDocs|
|''License:''|[[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]]|
|''Based on:''|DC3.LightBox<br>Light Box Gone Wild <br>Ibox|
!!Code
***/
//{{{
config.macros.imagebox ={};
config.macros.imagebox.handler = function (place,macroName,params,wikifier,paramString,tiddler)
{
var e = place.lastChild;
e.onclick = function(){TiddlyLightBox.initBox('image',this,params[1],params[2],params[0]);return false;};
}
config.macros.divbox ={};
config.macros.divbox.handler = function (place,macroName,params,wikifier,paramString,tiddler)
{
if (params[0]!=".")
createTiddlyButton(place,params[0],params[0],function(){TiddlyLightBox.initBox('html',params[1],params[3],params[4],params[2]);return false;});
else
{
var e = place.lastChild;
e.onclick = function(){TiddlyLightBox.initBox('html',params[1],params[3],params[4],params[2]);return false;};
}
}
config.macros.tiddlerbox ={}
config.macros.tiddlerbox.handler = function (place,macroName,params,wikifier,paramString,tiddler)
{
config.macros.divbox.handler(place,macroName,[params[0],"tiddler:"+params[1],params[2],params[3],params[4]]);
return false;
}
store.addNotification("TiddlyLightBoxStyles",refreshStyles);
if (!window.TiddlyLightBox)
window.TiddlyLightBox = {};
var loadingImage = "indicator.gif";
window.TiddlyLightBox =
{
_curBox: null, // [sentinel]
lightBoxHtml : '<div id="lightBoxOverlay" onclick="TiddlyLightBox.hideBox()" style="display:none"></div><div id="lightboxprogress" style="display:none;"><img src=\''+loadingImage+'\' alt=\'loading\' style="width:128px;height:128px;"></div><div class="lightBox" id="lightBox" style="display:none"><div id="lightBoxContent"></div><div id="lightBoxTitle">This is a title</div><div id="lightBoxClose"><a href:"#" onclick="TiddlyLightBox.hideBox();return false;">Click to close</a></div></div>',
createBoxWrapper : function()
{
var wrapper = createTiddlyElement(document.getElementsByTagName("body")[0],"div","tiddlyLightBoxWrapper");
wrapper.innerHTML = this.lightBoxHtml;
},
initBox : function(contentType,url,w,h,text)
{
if (this._curBox)
return;
this.showProgress();
this.hideSelects("hidden");
this.showBg();
this._curBox = true;
this.sizeTheBox(contentType,w,h);
if (contentType == 'image')
this.showImage(url,text);
else if (contentType == 'html')
this.showHtml(url,text);
return false;
},
sizeTheBox : function(contentType,w,h)
{
var box = document.getElementById("lightBoxContent");
if (w && isNaN(parseInt(w)))
{
addClass(box,w);
}
else if (w ||h || contentType == 'html')
{
box.style.width = w? w+ "px" : "450px";
box.style.height = h? h+ "px" : "280px";
if (contentType=='image')
setStylesheet("#lightBoxContent img{height:100%;width:100%;}","lightBoxImageSizeHack");
}
},
showProgress : function()
{
var progress = document.getElementById("lightboxprogress");
progress.style.display='';
this._center(progress);
},
hideProgress: function()
{
var progress = document.getElementById("lightboxprogress");
progress.style.display='none';
},
//this function lifted from Lightbox Gone Wild
hideSelects: function(visibility)
{
var selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++)
{
selects[i].style.visibility = visibility;
}
},
showBg: function()
{
var overlay = document.getElementById('lightBoxOverlay');
if (config.browser.isIE)
{
overlay.style.height = Math.max(document.documentElement.scrollHeight,document.documentElement.offsetHeight);
overlay.style.width = document.documentElement.scrollWidth;
}
overlay.style.display = 'block';
},
showImage: function (url,text)
{
imgPreloader = new Image();
imgPreloader.onload = function ()
{
var lb = document.getElementById("lightBoxContent");
lb.innerHTML = "<img src="+url+">";
lb.onclick = function(){TiddlyLightBox.hideBox();return false;};
TiddlyLightBox.posBox(text);
};
imgPreloader.src = url;
},
showHtml : function(theID,text)
{
var lb = document.getElementById("lightBoxContent");
if (theID.indexOf("tiddler:")==-1)
lb.innerHTML = document.getElementById(theID).innerHTML;
else
{
wikify(store.getTiddlerText(theID.replace("tiddler:","")),lb);
lb.className='tiddler';
}
lb.style.overflow = "auto";
this.posBox(text);
},
posBox: function(text)
{
this.setTitle(text);
this.hideProgress();
var lb = document.getElementById("lightBox");
lb.style.display = "";
lb.style.visibilty = "hidden";
lb.style.position = "absolute";
this._center(lb);
if(!TiddlyLightBox._curBox) return;
lb.style.visibility = "visible";
lb.style.display = "block";
},
setTitle: function(text)
{
document.getElementById("lightBoxTitle").innerHTML= (text==undefined)? '': text;
},
_center: function(lb)
{
var lbSize = new TiddlyLightBox.getElementSize(lb);
lb.style.left = (Math.round(findWindowWidth()/2) - (lbSize.width /2) + findScrollX())+'px';
lb.style.top = (Math.round(findWindowHeight()/2) - (lbSize.height /2) + findScrollY())+'px';
},
//this function lifted from Ibox
getElementSize : function(elem)
{
this.width = elem.offsetWidth || elem.style.pixelWidth;
this.height = elem.offsetHeight || elem.style.pixelHeight;
},
hideBox: function()
{
if(!this._curBox)
return;
document.getElementById("tiddlyLightBoxWrapper").innerHTML= this.lightBoxHtml;
setStylesheet("","lightBoxImageSizeHack");
this._curBox = null;
return false;
}
}
TiddlyLightBox.createBoxWrapper();
Story.prototype.findContainingTiddler = function(e)
{
while(e && (!hasClass(e,"tiddler") || !e.getAttribute("tiddler")))
e = e.parentNode;
return(e);
}
config.shadowTiddlers.TiddlyLightBoxStyles="/*{{{*/\n#lightBoxOverlay {\n position:absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 90; \n background-color: #000;\n -moz-opacity: 0.75;\n opacity: .75;\n filter: alpha(opacity=75);\n}\n#lightBoxOverlay[id]{ \n position: fixed;\n}\n\n#lightboxprogress { \n margin:0;padding:0;\n position: absolute;\n z-index:95;\n}\n\ndiv.lightBox {\n background: #fff;\n color: #fff;\n border: 4px solid #525252;\npadding:20px 20px 25px 20px; position:absolute; z-index:99;\n}\n\n#lightBoxClose {text-align:right; color:#000; font-size:1.0em; position:absolute; bottom:6px; right:20px;}\n#lightBoxClose a{color:#666; border-bottom:1px solid #666;cursor:pointer;}\n#lightBoxClose a:hover {color:#111; border-bottom:1px solid #666; cursor:pointer; background:transparent;}\n\n#lightBoxContent {border:1px solid #525252;color:#000; background:#fff;}\n#lightBox .tiddler {background:#fff;}\n\n#lightBoxContent img {border:0;margin:0;padding:0;display:block;cursor:pointer;}\n\n#lightBoxTitle {padding:0px; font-weight:bold; position:absolute; left:20px;bottom:6px; font-size:1.1em; color:#000;}\n\n/*}}}*/";
//}}}
audio/1. why blog.mp3
Why use a blog?
----
audio/2. how used.mp3
How blogs were used
/***
|Name|ToggleSideBarMacro|
|Created by|SaqImtiaz|
|Location|http://tw.lewcid.org/#ToggleSideBarMacro|
|Version|1.0|
|Requires|~TW2.x|
!Description:
Provides a button for toggling visibility of the SideBar. You can choose whether the SideBar should initially be hidden or displayed.
!Demo
<<toggleSideBar "Toggle Sidebar">>
!Usage:
{{{<<toggleSideBar>>}}} <<toggleSideBar>>
additional options:
{{{<<toggleSideBar label tooltip show/hide>>}}} where:
label = custom label for the button,
tooltip = custom tooltip for the button,
show/hide = use one or the other, determines whether the sidebar is shown at first or not.
(default is to show the sidebar)
You can add it to your tiddler toolbar, your MainMenu, or where you like really.
If you are using a horizontal MainMenu and want the button to be right aligned, put the following in your StyleSheet:
{{{ .HideSideBarButton {float:right;} }}}
!History
*23-07-06: version 1.0: completely rewritten, now works with custom stylesheets too, and easier to customize start behaviour.
*20-07-06: version 0.11
*27-04-06: version 0.1: working.
!Code
***/
//{{{
config.macros.toggleSideBar={};
config.macros.toggleSideBar.settings={
styleHide : "#sidebar { display: none;}\n"+"#contentWrapper #displayArea { margin-right: 1em;}\n"+"",
styleShow : " ",
arrow1: "«",
arrow2: "»"
};
config.macros.toggleSideBar.handler=function (place,macroName,params,wikifier,paramString,tiddler)
{
var tooltip= params[1]||'toggle sidebar';
var mode = (params[2] && params[2]=="hide")? "hide":"show";
var arrow = (mode == "hide")? this.settings.arrow1:this.settings.arrow2;
var label= (params[0]&¶ms[0]!='.')?params[0]+" "+arrow:arrow;
var theBtn = createTiddlyButton(place,label,tooltip,this.onToggleSideBar,"button HideSideBarButton");
if (mode == "hide")
{
(document.getElementById("sidebar")).setAttribute("toggle","hide");
setStylesheet(this.settings.styleHide,"ToggleSideBarStyles");
}
};
config.macros.toggleSideBar.onToggleSideBar = function(){
var sidebar = document.getElementById("sidebar");
var settings = config.macros.toggleSideBar.settings;
if (sidebar.getAttribute("toggle")=='hide')
{
setStylesheet(settings.styleShow,"ToggleSideBarStyles");
sidebar.setAttribute("toggle","show");
this.firstChild.data= (this.firstChild.data).replace(settings.arrow1,settings.arrow2);
}
else
{
setStylesheet(settings.styleHide,"ToggleSideBarStyles");
sidebar.setAttribute("toggle","hide");
this.firstChild.data= (this.firstChild.data).replace(settings.arrow2,settings.arrow1);
}
return false;
}
setStylesheet(".HideSideBarButton .button {font-weight:bold; padding: 0 5px;}\n","ToggleSideBarButtonStyles");
//}}}
//{{{
//replaces toolbar buttons with icons.
//for each command that you want to use an icon, add a line like the following in a systemConfig tiddler, specifying the icon image location:
//config.commands.editTiddler.imgLoc= "jump.bmp";
//No need to edit the ViewTemplate! If an image location is specified, then the icon will be used for that command!
config.macros.toolbar.createCommand = function(place,commandName,tiddler,theClass)
{
if(typeof commandName != "string")
{
var c = null;
for(var t in config.commands)
if(config.commands[t] == commandName)
c = t;
commandName = c;
}
if((tiddler instanceof Tiddler) && (typeof commandName == "string"))
{
var title = tiddler.title;
var command = config.commands[commandName];
var ro = tiddler.isReadOnly();
var shadow = store.isShadowTiddler(title) && !store.tiddlerExists(title);
var text = ro && command.readOnlyText ? command.readOnlyText : command.text;
var tooltip = ro && command.readOnlyTooltip ? command.readOnlyTooltip : command.tooltip;
if((!ro || (ro && !command.hideReadOnly)) && !(shadow && command.hideShadow))
{
var btn = createTiddlyButton(null,text,tooltip,this.onClickCommand);
btn.setAttribute("commandName", commandName);
btn.setAttribute("tiddler", title);
if(theClass)
addClass(btn,theClass);
place.appendChild(btn);
if(command.imgLoc)
btn.innerHTML = "<img src='"+command.imgLoc+"'>";
}
}
}
setStylesheet(".toolbarImg {vertical-align: middle; cursor:pointer;}\n","commandIconStyles");
//}}}
config.options.chkHttpReadOnly = false;
readOnly = false;
!!Moodle as self contained eportfolio system
Steve Hyndman from Georgetown College in Kentucky has modified the Moodle system itself to become a [[customised eportfolio system|stuff/moodle_eportfolio_notes_included.pdf]]
+++[the Gportfolio Portal]
<<miniBrowser http://www.georgetownprofessor.net/gportfolio/>>
===
+++!!![Hacks to the system]
* Language changes (course : eportfolio, teacher : eportfolio owner, student : visitors, etc)
* General site configuration (forcelogin : no, autologin guests (visitors) : yes, etc)
* Reduction in # tabs and fields available for Profile. Make it simpler and relevant.
* Simplify Administration block (remove backup, restore, groups, scales, etc)
* Reduction in options for Course Settings
* Single course activity instead of multiple options.
===
;Issues:
:How do students get documents into the system without having to upload in two different places (assuming they're uploading into Moodle)?
: Steve used Moodle 1.6 -- very difficult to upgrade with all those low level hacks.
<!--{{{-->
<div class='toolbar' >
<span style="padding-right:2.45em;" macro='tagger exclude:"excludelists [[excluded_tags]]" '></span>
<span macro='toolbar closeTiddler closeOthers +editTiddler > permalink references jump'></span>
</div>
<!--
<div macro="showWhen !config.macros.tiddlersBar.isShown()">
-->
<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='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
-->
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
!!The Why's and Wherefore's
In prosletysing this approach of 'social learning', where am I coming from?
In order to situate the thrust behind Earlham Learning Spaces we need to quickly look at some fundamental questions.
# Why bother with "social software" in the realm of teaching? See [[Models of Learning]]
# Why not use free online systems such as Facebook, Ning, etc, rather than go to the trouble of hosting your own? [[Project Tomorrow|http://www.facebook.com/pages/Project-Tomorrow/5701748075]] ((on Facebook(this Facebook site is why serious stuff and Facebook are immiscible)))
# Why not go with a (("safe" commercial alternative(because there isn't one)))?
# We've already got a Course Management system (eg Moodle), ((why can't that do the job(Moodle is a Course Management System oriented towards courses rather than learners)))?
# Why Elgg and not ((~WordPress(~WordPress is not a system design for Social Networking, Elgg is))) or other blogging system?
/***
|''Name:''|WikiBar|
|''Version:''|2.0.0 beta3|
|''Source:''|[[AiddlyWiki|http://aiddlywiki.sourceforge.net]]|
|''Author:''|[[Arphen Lin|mailto:arphenlin@gmail.com]]|
|''Type:''|toolbar macro command extension|
|''Required:''|TiddlyWiki 2.0.0 beta6|
!Description
WikiBar is a toolbar that gives access to most of TiddlyWiki's formatting features with a few clicks. It's a handy tool for people who are not familiar with TiddlyWiki syntax.
Besides, with WikiBar-addons, users can extend the power of WikiBar.
!Support browser
*Firefox 1.5
!Revision history
*v2.0.0 beta3 (2005/12/30)
** remove macros (replaced by TWMacro addon)
** add wikibar command in toolbar automatically
** rename DOIT to HANDLER
** rename TIP to TOOLTIP
*v2.0.0 beta2 (2005/12/21)
** re-design Wikibar addon framework
*v2.0.0 beta1 (2005/12/14)
** Note:
*** WikiBarPlugin is renamed to WikiBar
** New Features:
*** support TiddlyWiki 2.0.0 template mechanism
*** new wikibar data structure
*** new wikibar-addon framework for developers
**** support dynamic popup menu generator
*** support most new macros added in TiddlyWiki 2.0.0
*** multi-level popup menu
*** fix wikibar tab stop
*** remove paletteSelector
** Known Bugs:
*** popup-menu and color-picker can't be closed correctly
*** some macros can't be displayed correctly in previewer
*** text in previewer will be displayed italic
*v1.2.0 (2005/11/21)
**New Features:
***User defined color palettes supported
####Get color palettes from [[ColorZilla Palettes|http://www.iosart.com/firefox/colorzilla/palettes.html]].
####Save the palette file(*.gpl) as a new tiddler and tag it with 'ColorPalettes', then you can use it in WikiBar.
***WikiBar style sheet supported
***Click on document to close current colorPicker, paletteSelector or aboutWikibar
*v1.1.1 (2005/11/03)
**Bugs fixed:
***'Not enough parameters!' message is displayed when the parameter includes '%+number', ex: 'hello%20world!'
*v1.1.0 (2005/11/01)
**Bugs fixed:
***WikiBar overruns (reported by by GeoffS <gslocock@yahoo.co.uk>)
**New features:
***Insert a color code at the cursor. (Thanks to RunningUtes <RunningUtes@gmail.com>)
***Enable gradient macro. (Thanks to RunningUtes <RunningUtes@gmail.com>)
***Insert tiddler comment tags {{{/% ... %/}}}. (new feature supported by TiddlyWiki 1.2.37)
***Insert DateFormatString for {{{<<today>>}}} macro. (new feature supported by TiddlyWiki 1.2.37)
**Enhanced:
***Allow optional parameters in syntax.
**Bugs:
***'Not enough parameters!' message is displayed when the parameter includes '%+number', ex: 'hello%20world!'
*v1.0.0 (2005/10/30)
**Initial release
!Code
***/
//{{{
config.macros.wikibar = {major: 2, minor: 0, revision: 0, beta: 3, date: new Date(2005,12,30)};
config.macros.wikibar.handler = function(place,macroName,params,wikifier,paramString,tiddler){
if(!(tiddler instanceof Tiddler)) {return;}
story.setDirty(tiddler.title,true);
place.id = 'wikibar'+tiddler.title;
place.className = 'toolbar wikibar';
};
function wikibar_install(){
config.commands.wikibar = {
text: 'wikibar',
tooltip: 'wikibar on/off',
handler: function(e,src,title) {
if(!e){ e = window.event; }
var theButton = resolveTarget(e);
theButton.id = 'wikibarButton'+title;
wikibarPopup.remove();
wikibar_installAddons(theButton, title);
wikibar_createWikibar(title);
return(false);
}
};
config.shadowTiddlers['EditTemplate'] = wikibar_addWikibarCommand(config.shadowTiddlers['EditTemplate']);
var tiddler = store.getTiddler('EditTemplate');
if(tiddler){
tiddler.text = wikibar_addWikibarCommand(tiddler.text);
}
}
function wikibar_installAddons(theButton, title){
var tiddlers = store.getTaggedTiddlers('wikibarAddons');
if(!tiddlers) { return; }
theButton.addons=[];
for(var i=0; i<tiddlers.length; i++){
try{
eval(tiddlers[i].text);
try{
wikibar_addonInstall(title);
wikibar_addonInstall = null;
theButton.addons.push({ok:true, name:tiddlers[i].title});
}catch(ex){
theButton.addons.push({ok:false, name:tiddlers[i].title, error:ex});
}
}catch(ex){
theButton.addons.push({ok:false, name:tiddlers[i].title, error:ex});
}
}
}
function wikibar_addWikibarCommand(tiddlerText){
var div = document.createElement('div');
div.style.display = 'none';
div.innerHTML = tiddlerText;
for(var i=0; i<div.childNodes.length; i++){
var o=div.childNodes[i];
if(o.tagName==='DIV'){
if(o.className=='toolbar'){
var macroText = o.getAttribute('macro').trim();
if(macroText.search('wikibar')<=0){
macroText += ' wikibar';
o.setAttribute('macro', macroText);
}
break;
}
}
}
return div.innerHTML.replace(/\"/g, "\'");
}
function wikibar_processSyntaxParams(theSyntax, params){
try{
var pcr = 'AplWikibarPcr';
var rx=null;
var allParams=null;
if(params){
if(typeof(params)=='object'){
for(var i=0; i<params.length; i++){
if(params[i]){
params[i] = params[i].replace(new RegExp('%','g'), pcr).trim();
rx = '(\\[%'+(i+1)+'\\])' + '|' + '(%'+(i+1)+')';
theSyntax = theSyntax.replace(new RegExp(rx,'g'), params[i] );
}
}
allParams = params.join(' ').trim();
}else{
allParams = params.replace(new RegExp('%','g'), pcr).trim();
rx = /(\[%1{1}\])|(%1{1})/g;
theSyntax = theSyntax.replace(rx, allParams);
}
}
if(allParams){
theSyntax = theSyntax.replace(new RegExp('%N{1}','g'), allParams);
}
rx=/\[%(([1-9]{1,}[0-9]{0,})|(N{1}))\]/g;
theSyntax = theSyntax.replace(rx, '');
rx=/%(([1-9]{1,}[0-9]{0,})|(N{1}))/g;
if( theSyntax.match(rx) ){
throw 'Not enough parameters! ' + theSyntax;
}
theSyntax=theSyntax.replace(new RegExp(pcr,'g'), '%');
return theSyntax;
} catch(ex){
return null;
}
}
function wikibar_resolveEditItem(tiddlerWrapper, itemName){
if(tiddlerWrapper.hasChildNodes()){
var c=tiddlerWrapper.childNodes;
for(var i=0; i<c.length; i++){
var txt=wikibar_resolveEditItem(c[i], itemName);
if(!txt){
continue;
}else{
return txt;
}
}
}
return ((tiddlerWrapper.getAttribute && tiddlerWrapper.getAttribute('edit')==itemName)? tiddlerWrapper : null);
}
function wikibar_resolveEditItemValue(tiddlerWrapper, itemName){
var o = wikibar_resolveEditItem(tiddlerWrapper, itemName);
return (o? o.value.replace(/\r/mg,'') : null);
}
function wikibar_resolveTiddlerEditorWrapper(obj){
if(obj.id=='tiddlerDisplay'){return null;}
if((obj.getAttribute && obj.getAttribute('macro')=='edit text')){return obj;}
return wikibar_resolveTiddlerEditorWrapper(obj.parentNode);
}
function wikibar_resolveTiddlerEditor(obj){
if(obj.hasChildNodes()){
var c = obj.childNodes;
for(var i=0; i<c.length; i++){
var o=wikibar_resolveTiddlerEditor(c[i]);
if(o){ return o;}
}
}
return ((obj.getAttribute && obj.getAttribute('edit')=='text')? obj : null);
}
function wikibar_resolveTargetButton(obj){
if(obj.id && obj.id.substring(0,7)=='wikibar'){ return null; }
if(obj.tiddlerTitle){
return obj;
}else{
return wikibar_resolveTargetButton(obj.parentNode);
}
}
function wikibar_isValidMenuItem(tool){
if(!tool){ return false; }
if(tool.TYPE=='MENU' || tool.TYPE=='MAIN_MENU'){
for(var key in tool){
if(key.substring(0,8)=='DYNAITEM'){ return true; }
if(wikibar_isValidMenuItem(tool[key])){ return true; }
}
return false;
}else{
return (tool.HANDLER? true : false);
}
}
function wikibar_editFormat(param){
var editor = param.button.editor;
var params = param.params;
clearMessage();
if(!editor){ return; }
var repText = wikibar_processSyntaxParams(this.syntax, params);
if(repText===null){ return; }
var st = editor.scrollTop;
var ss = editor.selectionStart;
var se = editor.selectionEnd;
var frontText= '';
var endText = '';
var fullText = editor.value;
if(se>ss && ss>=0){
frontText = fullText.substring(0, ss);
endText = fullText.substring(se, fullText.length);
}
else if(ss===0 && (se===0 || se == fullText.length) ){
endText = fullText;
}
else if(se==ss && ss>0){
frontText = fullText.substring(0, ss);
endText = fullText.substring(se, fullText.length);
}
if(repText.indexOf('user_text')>=0 && this.hint){
repText = repText.replace('user_text', this.hint);
}
editor.value = frontText + repText + endText;
editor.selectionStart = ss;
editor.selectionEnd = ss + repText.length;
editor.scrollTop = st;
editor.focus();
}
function wikibar_editFormatByWord(param){
var editor = param.button.editor;
var params = param.params;
clearMessage();
if(!editor){return;}
var repText = wikibar_processSyntaxParams(this.syntax, params);
if(repText===null){ return; }
var st = editor.scrollTop;
var ss = editor.selectionStart;
var se = editor.selectionEnd;
var frontText= '';
var selText = '';
var endText = '';
var fullText = editor.value;
if(se>ss && ss>=0){
frontText = fullText.substring(0, ss);
selText = fullText.substring(ss,se);
endText = fullText.substring(se, fullText.length);
}
else if(ss===0 && (se===0 || se == fullText.length) ){
endText = fullText;
}
else if(se==ss && ss>0){
frontText = fullText.substring(0, ss);
endText = fullText.substring(se, fullText.length);
if(!( fullText.charAt(ss-1).match(/\W/gi) || fullText.charAt(ss).match(/\W/gi) )){
var m = frontText.match(/\W/gi);
if(m){
ss = frontText.lastIndexOf(m[m.length-1])+1;
}
else{
ss = 0;
}
m = endText.match(/\W/gi);
if(m){
se += endText.indexOf(m[0]);
}
else{
se = fullText.length;
}
frontText = fullText.substring(0, ss);
endText = fullText.substring(se, fullText.length);
selText = fullText.substring(ss,se);
}
}
if(selText.length>0){
repText = repText.replace('user_text', selText);
}
if(repText.indexOf('user_text')>=0 && this.hint){
repText = repText.replace('user_text', this.hint);
}
editor.value = frontText + repText + endText;
editor.selectionStart = ss;
editor.selectionEnd = ss + repText.length;
editor.scrollTop = st;
editor.focus();
}
function wikibar_editFormatByCursor(param){
var editor = param.button.editor;
var params = param.params;
clearMessage();
if(!editor){ return; }
var repText = wikibar_processSyntaxParams(this.syntax, params);
if(repText===null){ return; }
var st = editor.scrollTop;
var ss = editor.selectionStart;
var se = editor.selectionEnd;
var frontText= '';
var endText = '';
var fullText = editor.value;
if(se>ss && ss>=0){
frontText = fullText.substring(0, ss);
endText = fullText.substring(se, fullText.length);
}
else if(ss===0 && (se===0 || se == fullText.length) ){
endText = fullText;
}
else if(se==ss && ss>0){
frontText = fullText.substring(0, ss);
endText = fullText.substring(se, fullText.length);
}
if(repText.indexOf('user_text')>=0 && this.hint){
repText = repText.replace('user_text', this.hint);
}
editor.value = frontText + repText + endText;
editor.selectionStart = ss;
editor.selectionEnd = ss + repText.length;
editor.scrollTop = st;
editor.focus();
}
function wikibar_editFormatByLine(param){
var editor = param.button.editor;
var params = param.params;
clearMessage();
if(!editor){ return; }
var repText = wikibar_processSyntaxParams(this.syntax, params);
if(repText===null){ return; }
var st = editor.scrollTop;
var ss = editor.selectionStart;
var se = editor.selectionEnd;
var frontText= '';
var selText = '';
var endText = '';
var fullText = editor.value;
if(se>ss && ss>=0){
if(this.byBlock){
frontText = fullText.substring(0, ss);
selText = fullText.substring(ss,se);
endText = fullText.substring(se, fullText.length);
}
else{
se = ss;
}
}
if(ss===0 && (se===0 || se == fullText.length) ){
var m=fullText.match(/(\n|\r)/g);
if(m){
se = fullText.indexOf(m[0]);
}else{
se = fullText.length;
}
selText = fullText.substring(0, se);
endText = fullText.substring(se, fullText.length);
}
else if(se==ss && ss>0){
frontText = fullText.substring(0, ss);
endText = fullText.substring(se, fullText.length);
m = frontText.match(/(\n|\r)/g);
if(m){
ss = frontText.lastIndexOf(m[m.length-1])+1;
}
else{
ss = 0;
}
m = endText.match(/(\n|\r)/g);
if(m){
se += endText.indexOf(m[0]);
}
else{
se = fullText.length;
}
frontText = fullText.substring(0, ss);
selText = fullText.substring(ss,se);
endText = fullText.substring(se, fullText.length);
}
if(selText.length>0){
repText = repText.replace('user_text', selText);
}
if(repText.indexOf('user_text')>=0 && this.hint){
repText = repText.replace('user_text', this.hint);
}
if(this.byBlock){
if( (frontText.charAt(frontText.length-1)!='\n') && ss>0 ){
repText = '\n' + repText;
}
if( (endText.charAt(0)!='\n') || se==fullText.length){
repText += '\n';
}
}
editor.value = frontText + repText + endText;
editor.selectionStart = ss;
editor.selectionEnd = ss + repText.length;
editor.scrollTop = st;
editor.focus();
}
function wikibar_editFormatByTableCell(param){
var editor = param.button.editor;
var params = param.params;
clearMessage();
if(!editor){ return; }
var repText = wikibar_processSyntaxParams(this.syntax, params);
if(repText===null){ return; }
var st = editor.scrollTop;
var ss = editor.selectionStart;
var se = editor.selectionEnd;
var frontText= '';
var selText = '';
var endText = '';
var fullText = editor.value;
if(ss===0 || ss==fullText.length){
throw 'not valid cell!';
}
se=ss;
frontText = fullText.substring(0, ss);
endText = fullText.substring(se, fullText.length);
i=frontText.lastIndexOf('\n');
j=frontText.lastIndexOf('|');
if(i>j || j<0){
throw 'not valid cell!';
}
ss = j+1;
i=endText.indexOf('\n');
j=endText.indexOf('|');
if(i<j || j<0){
throw 'not valid cell!';
}
se += j;
frontText = fullText.substring(0, ss-1);
selText = fullText.substring(ss,se);
endText = fullText.substring(se+1, fullText.length);
if(this.key.substring(0,5)=='align'){
selText = selText.trim();
if( selText=='>' || selText=='~' || selText.substring(0,8)=='bgcolor(') {return; }
}
if(selText.length>0){
repText = repText.replace('user_text', selText);
}
if(repText.indexOf('user_text')>=0 && this.hint){
repText = repText.replace('user_text', this.hint);
}
editor.value = frontText + repText + endText;
editor.selectionStart = ss;
editor.selectionEnd = ss + repText.length - 2;
editor.scrollTop = st;
editor.focus();
}
function wikibar_editSelectAll(param){
var editor = param.button.editor;
editor.selectionStart = 0;
editor.selectionEnd = editor.value.length;
editor.scrollTop = 0;
editor.focus();
}
function wikibar_doPreview(param){
var theButton = param.button;
var editor = param.button.editor;
var wikibar = theButton.parentNode;
if(!wikibar) { return; }
title = theButton.tiddlerTitle;
var editorWrapper = wikibar_resolveTiddlerEditorWrapper(editor);
var tiddlerWrapper = editorWrapper.parentNode;
var previewer = document.getElementById('previewer'+title);
if(previewer){
previewer.parentNode.removeChild(previewer);
editorWrapper.style.display = 'block';
visible=true;
}else{
previewer = document.createElement('div');
previewer.id = 'previewer'+title;
previewer.className = 'viewer previewer';
previewer.style.height = (editor.offsetHeight) + 'px';
wikify(editor.value, previewer);
tiddlerWrapper.insertBefore(previewer, editorWrapper);
editorWrapper.style.display = 'none';
visible=false;
}
var pv=null;
for(var i=0; i<wikibar.childNodes.length; i++){
try{
var btn = wikibar.childNodes[i];
if(btn.toolItem.key == 'preview'){ pv=btn; }
if(btn.toolItem.key != 'preview'){
btn.style.display = visible ? '': 'none';
}
}catch(ex){}
}
if(!pv) { return; }
if(visible){
pv.innerHTML = '<font face=\"verdana\">∞</font>';
pv.title = 'preview current tiddler';
}
else{
pv.innerHTML = '<font face=\"verdana\">←</font>';
pv.title = 'back to editor';
}
}
function wikibar_doListAddons(param){
clearMessage();
var title = param.button.tiddlerTitle;
var wikibarButton = document.getElementById('wikibarButton'+title);
var ok=0, fail=0;
for(var i=0; i<wikibarButton.addons.length; i++){
var addon=wikibarButton.addons[i];
if(addon.ok){
displayMessage('[ o ] '+addon.name);
ok++;
}
else{
displayMessage('[ x ] '+addon.name + ': ' + addon.error);
fail++;
}
}
displayMessage('---------------------------------');
displayMessage(ok + ' ok ; ' + fail + ' failed');
}
function wikibar_getColorCode(param){
var cbOnPickColor = function(colorCode, param){
param.params = colorCode;
param.button.toolItem.doMore(param);
};
wikibarColorTool.openColorPicker(param.button, cbOnPickColor, param);
}
function wikibar_getLinkUrl(param){
var url= prompt('Please enter the link target', (this.param? this.param : ''));
if (url && url.trim().length>0){
param.params = url;
this.doMore(param);
}
}
function wikibar_getTableRowCol(param){
var rc= prompt('Please enter (rows x cols) of the table', '2 x 3');
if (!rc || (rc.trim()).length<=0){ return; }
var arr = rc.toUpperCase().split('X');
if(arr.length != 2) { return; }
for(var i=0; i<arr.length; i++){
if(isNaN(arr[i].trim())) { return; }
}
var rows = parseInt(arr[0].trim(), 10);
var cols = parseInt(arr[1].trim(), 10);
var txtTable='';
for(var r=0; r<rows; r++){
for(var c=0; c<=cols; c++){
if(c===0){
txtTable += '|';
}else{
txtTable += ' |';
}
}
txtTable += '\n';
}
if(txtTable.trim().length>0){
param.params = txtTable.trim();
this.doMore(param);
}
}
function wikibar_getMacroParam(param){
var p = prompt('Please enter the parameters of macro \"' + this.key + '\":' +
'\nSyntax: ' + this.syntax +
'\n\nNote: '+
'\n%1,%2,... - parameter needed'+
'\n[%1] - optional parameter'+
'\n%N - more than one parameter(1~n)'+
'\n[%N] - any number of parameters(0~n)'+
'\n\nPS:'+
'\n1. Parameters should be seperated with space character'+
'\n2. Use \" to wrap the parameter that includes space character, ex: \"hello world\"'+
'\n3. Input the word(null) for the optional parameter ignored',
(this.param? this.param : '') );
if(!p) { return; }
p=p.readMacroParams();
for(var i=0; i<p.length; i++){
var s=p[i].trim();
if(s.indexOf(' ')>0){ p[i]="'"+s+"'"; }
if(s.toLowerCase()=='null'){ p[i]=null; }
}
param.params = p;
this.doMore(param);
}
function wikibar_getMorePalette(unused){
clearMessage();
displayMessage('Get more color palettes(*.gpl) from ColorZilla Palettes site', 'http:\/\/www.iosart.com/firefox/colorzilla/palettes.html');
displayMessage('Save it as a new tiddler with \"ColorPalettes\" tag');
}
function wikibar_createWikibar(title){
var theWikibar = document.getElementById('wikibar' + title);
if(theWikibar){
if(theWikibar.hasChildNodes()){
theWikibar.style.display = (theWikibar.style.display=='block'? 'none':'block');
return;
}
}
var tiddlerWrapper = document.getElementById('tiddler'+title);
var theTextarea = wikibar_resolveTiddlerEditor(tiddlerWrapper);
if(!theTextarea){
clearMessage();
displayMessage('WikiBar only works in tiddler edit mode now');
return;
}else{
if(!theTextarea.id){ theTextarea.id = 'editor'+title; }
if(!theTextarea.parentNode.id){ theTextarea.parentNode.id='editorWrapper'+title; }
}
if(theWikibar){
theWikibar = document.getElementById('wikibar'+title);
}else{
var editorWrapper = wikibar_resolveTiddlerEditorWrapper(theTextarea);
theWikibar = createTiddlyElement(tiddlerWrapper, 'div', 'wikibar'+title, 'toolbar');
addClass(theWikibar, 'wikibar');
var previewer = document.getElementById('previewer'+title);
if(previewer){
tiddlerWrapper.insertBefore(theWikibar, previewer);
}else{
tiddlerWrapper.insertBefore(theWikibar, editorWrapper);
}
}
wikibar_createMenu(theWikibar,wikibarStore,title,theTextarea);
if(config.options['chkWikibarSetEditorHeight'] && config.options['txtWikibarEditorRows']){
theTextarea.rows = config.options['txtWikibarEditorRows'];
}
setStylesheet(
'.wikibar{text-align:left;visibility:visible;margin:2px;padding:1px;}.previewer{overflow:auto;display:block;border:1px solid;}#colorPicker{position:absolute;display:none;z-index:10;margin:0px;padding:0px;}#colorPicker table{margin:0px;padding:0px;border:2px solid #000;border-spacing:0px;border-collapse:collapse;}#colorPicker td{margin:0px;padding:0px;border:1px solid;font-size:11px;text-align:center;cursor:auto;}#colorPicker .header{background-color:#fff;}#colorPicker .button{background-color:#fff;cursor:pointer;cursor:hand;}#colorPicker .button:hover{padding-top:3px;padding-bottom:3px;color:#fff;background-color:#136;}#colorPicker .cell{padding:4px;font-size:7px;cursor:crosshair;}#colorPicker .cell:hover{padding:10px;}.wikibarPopup{position:absolute;z-index:10;border:1px solid #014;color:#014;background-color:#cef;}.wikibarPopup table{margin:0;padding:0;border:0;border-spacing:0;border-collapse:collapse;}.wikibarPopup .button:hover{color:#eee;background-color:#014;}.wikibarPopup .disabled{color:#888;}.wikibarPopup .disabled:hover{color:#888;background-color:#cef;}.wikibarPopup tr .seperator hr{margin:0;padding:0;background-color:#cef;width:100%;border:0;border-top:1px dashed #014;}.wikibarPopup tr .icon{font-family:verdana;font-weight:bolder;}.wikibarPopup tr .marker{font-family:verdana;font-weight:bolder;}.wikibarPopup td{font-size:0.9em;padding:2px;}.wikibarPopup input{border:0;border-bottom:1px solid #014;margin:0;padding:0;font-family:arial;font-size:100%;background-color:#fff;}',
'WikiBarStyleSheet');
}
function wikibar_createMenu(place,toolset,title,editor){
if(!wikibar_isValidMenuItem(toolset)){return;}
if(!(toolset.TYPE=='MAIN_MENU' || toolset.TYPE=='MENU')){ return; }
for(var key in toolset){
if(key.substring(0,9)=='SEPERATOR'){
wikibar_createMenuSeperator(place);
continue;
}
if(key.substring(0,8)=='DYNAITEM'){
var dynaTools = toolset[key](title,editor);
if(dynaTools.TYPE && dynaTools.TYPE=='MENU'){
wikibar_createMenuItem(place,dynaTools,null,editor,title);
}else{
dynaTools.TYPE = 'MENU';
wikibar_createMenu(place, dynaTools, title, editor);
}
continue;
}
if((toolset[key].TYPE!='MENU' && toolset[key].TYPE!='MAIN_MENU') && !toolset[key].HANDLER){continue;}
wikibar_createMenuItem(place,toolset,key,editor,title);
}
}
function wikibar_createMenuItem(place,toolset,key,editor,title){
if(!key){
var tool = toolset;
}else{
tool = toolset[key];
tool.key = key;
}
if(!wikibar_isValidMenuItem(tool)){return;}
var toolIsOnMainMenu = (toolset.TYPE=='MAIN_MENU');
var toolIsMenu = (tool.TYPE=='MENU');
var theButton;
if(toolIsOnMainMenu){
theButton = createTiddlyButton(
place,
'',
(tool.TOOLTIP? tool.TOOLTIP : ''),
(toolIsMenu? wikibar_onClickMenuItem : wikibar_onClickItem),
'button');
theButton.innerHTML = (tool.CAPTION? tool.CAPTION : key);
theButton.isOnMainMenu = true;
addClass(theButton, (toolIsMenu? 'menu' : 'item'));
place.appendChild( document.createTextNode('\n') );
if(!toolIsMenu){
if(config.options['chkWikibarPopmenuOnMouseOver']){
theButton.onmouseover = function(e){ wikibarPopup.remove(); };
}
}
}else{
theButton=createTiddlyElement(place, 'tr',key,'button');
theButton.title = (tool.TOOLTIP? tool.TOOLTIP : '');
theButton.onclick = (toolIsMenu? wikibar_onClickMenuItem : wikibar_onClickItem);
var tdL = createTiddlyElement(theButton, 'td','','marker');
var td = createTiddlyElement(theButton, 'td');
var tdR = createTiddlyElement(theButton, 'td','','marker');
td.innerHTML = (tool.CAPTION? tool.CAPTION : key);
if(toolIsMenu){
tdR.innerHTML=' ›';
}
if(tool.SELECTED){
tdL.innerHTML = '√ ';
addClass(theButton, 'selected');
}
if(tool.DISABLED){
addClass(theButton, 'disabled');
}
}
theButton.tiddlerTitle = title;
theButton.toolItem = tool;
theButton.editor = editor;
theButton.tabIndex = 999;
if(toolIsMenu){
if(config.options['chkWikibarPopmenuOnMouseOver']){
theButton.onmouseover = wikibar_onClickMenuItem;
}
}
}
function wikibar_createMenuSeperator(place){
if(place.id.substring(0,7)=='wikibar') { return; }
var onclickSeperator=function(e){
if(!e){ e = window.event; }
e.cancelBubble = true;
if (e.stopPropagation){ e.stopPropagation(); }
return(false);
};
var theButton=createTiddlyElement(place,'tr','','seperator');
var td = createTiddlyElement(theButton, 'td','','seperator');
td.colSpan=3;
theButton.onclick=onclickSeperator;
td.innerHTML = '<hr>';
}
function wikibar_genWikibarAbout(){
var toolset={};
toolset.version = {
CAPTION: '<center>WikiBar ' +
config.macros.wikibar.major + '.' +
config.macros.wikibar.minor + '.' +
config.macros.wikibar.revision +
(config.macros.wikibar.beta? ' beta '+config.macros.wikibar.beta : '') +
'</center>',
HANDLER: function(){}
};
toolset.SEPERATOR = {};
toolset.author = {
CAPTION: '<center>Arphen Lin<br>arphenlin@gmail.com</center>',
TOOLTIP: 'send mail to the author',
HANDLER: function(){ window.open('mailto:arphenlin@gmail.com'); }
};
toolset.website = {
CAPTION: '<center>aiddlywiki.sourceforge.net</center>',
TOOLTIP: 'go to the web site of WikiBar',
HANDLER: function(){ window.open('http:\/\/aiddlywiki.sourceforge.net/'); }
};
return toolset;
}
function wikibar_genWikibarOptions(title, editor){
var toolset={};
toolset.popOnMouseOver = {
CAPTION:'popup menu on mouse over',
SELECTED: config.options['chkWikibarPopmenuOnMouseOver'],
HANDLER: function(param){
config.options['chkWikibarPopmenuOnMouseOver'] = !config.options['chkWikibarPopmenuOnMouseOver'];
saveOptionCookie('chkWikibarPopmenuOnMouseOver');
var title = param.button.tiddlerTitle;
var wikibar = document.getElementById('wikibar'+title);
if(wikibar){ wikibar.parentNode.removeChild(wikibar); }
wikibar_createWikibar(title);
}
};
toolset.setEditorSize = {
CAPTION:'set editor height: <input id=\"txtWikibarEditorRows\" type=text size=1 MAXLENGTH=3 value=\"' +
(config.options['txtWikibarEditorRows']? config.options['txtWikibarEditorRows']:editor.rows) + '\"> ok',
HANDLER: function(param){
var input = document.getElementById('txtWikibarEditorRows');
if(input){
var rows = parseInt(input.value, 10);
if(!isNaN(rows)){
var editor = param.button.editor;
editor.rows = rows;
}else{
rows=config.maxEditRows;
}
config.options['txtWikibarEditorRows'] = rows;
saveOptionCookie('txtWikibarEditorRows');
config.maxEditRows = rows;
}
}
};
toolset.setEditorSizeOnLoadingWikibar = {
CAPTION:'set editor height on loading wikibar',
SELECTED: config.options['chkWikibarSetEditorHeight'],
HANDLER: function(param){
config.options['chkWikibarSetEditorHeight'] = !config.options['chkWikibarSetEditorHeight'];
saveOptionCookie('chkWikibarSetEditorHeight');
if(config.options['chkWikibarSetEditorHeight']){
var rows = config.options['txtWikibarEditorRows'];
if(!isNaN(rows)){ rows = 15; }
var editor = param.button.editor;
editor.rows = rows;
config.options['txtWikibarEditorRows'] = rows;
saveOptionCookie('txtWikibarEditorRows');
}
}
};
toolset.SEPERATOR = {};
toolset.update = {
CAPTION: 'check for updates',
DISABLED: true,
HANDLER: function(){}
};
return toolset;
}
function wikibar_genPaletteSelector(){
try{
var cpTiddlers = store.getTaggedTiddlers('ColorPalettes');
if(!cpTiddlers) { return; }
var palettes=[];
palettes.push(wikibarColorTool.defaultPaletteName);
for(var i=0; i<cpTiddlers.length; i++){
palettes.push(cpTiddlers[i].title.trim());
}
var toolset={};
for(i=0; i<palettes.length; i++){
toolset[palettes[i]] = {
TOOLTIP: palettes[i],
SELECTED: (palettes[i]==wikibarColorTool.paletteName),
HANDLER: wikibar_doSelectPalette
};
}
return toolset;
}catch(ex){ return null; }
}
function wikibar_onClickItem(e){
if(!e){ e = window.event; }
var theTarget = resolveTarget(e);
if(theTarget.tagName=='INPUT'){
e.cancelBubble = true;
if (e.stopPropagation){ e.stopPropagation(); }
return;
}
var theButton = wikibar_resolveTargetButton(theTarget);
if(!theButton){ return(false); }
var o = theButton.toolItem;
if(!o) { return; }
var param = {
event: e,
button: theButton
};
if(o.HANDLER){ o.HANDLER(param); }
if(o.DISABLED){
e.cancelBubble = true;
if (e.stopPropagation){ e.stopPropagation(); }
}
return(false);
}
function wikibar_onClickMenuItem(e){
if(!e){ e = window.event; }
var theButton = wikibar_resolveTargetButton(resolveTarget(e));
if(!theButton){ return(false); }
e.cancelBubble = true;
if (e.stopPropagation){ e.stopPropagation(); }
var title = theButton.tiddlerTitle;
var editor = theButton.editor;
var tool = theButton.toolItem;
if(!tool) { return; }
var popup = wikibarPopup.create(this);
if(popup){
wikibar_createMenu(popup,tool,title,editor);
if(!popup.hasChildNodes()){
wikibarPopup.remove();
}else{
wikibarPopup.show(popup, false);
}
}
return(false);
}
var wikibarColorTool = {
defaultPaletteName : 'default',
defaultColumns : 16,
defaultPalette : [
'#FFF','#DDD','#CCC','#BBB','#AAA','#999','#666','#333','#111','#000','#FC0','#F90','#F60','#F30','#C30','#C03',
'#9C0','#9D0','#9E0','#E90','#D90','#C90','#FC3','#FC6','#F96','#F63','#600','#900','#C00','#F00','#F36','#F03',
'#CF0','#CF3','#330','#660','#990','#CC0','#FF0','#C93','#C63','#300','#933','#C33','#F33','#C36','#F69','#F06',
'#9F0','#CF6','#9C3','#663','#993','#CC3','#FF3','#960','#930','#633','#C66','#F66','#903','#C39','#F6C','#F09',
'#6F0','#9F6','#6C3','#690','#996','#CC6','#FF6','#963','#630','#966','#F99','#F39','#C06','#906','#F3C','#F0C',
'#3F0','#6F3','#390','#6C0','#9F3','#CC9','#FF9','#C96','#C60','#C99','#F9C','#C69','#936','#603','#C09','#303',
'#0C0','#3C0','#360','#693','#9C6','#CF9','#FFC','#FC9','#F93','#FCC','#C9C','#969','#939','#909','#636','#606',
'#060','#3C3','#6C6','#0F0','#3F3','#6F6','#9F9','#CFC','#9CF','#FCF','#F9F','#F6F','#F3F','#F0F','#C6C','#C3C',
'#030','#363','#090','#393','#696','#9C9','#CFF','#39F','#69C','#CCF','#C9F','#96C','#639','#306','#90C','#C0C',
'#0F3','#0C3','#063','#396','#6C9','#9FC','#9CC','#06C','#369','#99F','#99C','#93F','#60C','#609','#C3F','#C0F',
'#0F6','#3F6','#093','#0C6','#3F9','#9FF','#699','#036','#039','#66F','#66C','#669','#309','#93C','#C6F','#90F',
'#0F9','#6F9','#3C6','#096','#6FF','#6CC','#366','#069','#36C','#33F','#33C','#339','#336','#63C','#96F','#60F',
'#0FC','#6FC','#3C9','#3FF','#3CC','#399','#033','#39C','#69F','#00F','#00C','#009','#006','#003','#63F','#30F',
'#0C9','#3FC','#0FF','#0CC','#099','#066','#3CF','#6CF','#09C','#36F','#0CF','#09F','#06F','#03F','#03C','#30C'
],
colorPicker : null,
pickColorHandler: null,
userData: null
};
wikibarColorTool.paletteName = wikibarColorTool.defaultPaletteName;
wikibarColorTool.columns = wikibarColorTool.defaultColumns;
wikibarColorTool.palette = wikibarColorTool.defaultPalette;
wikibarColorTool.onPickColor = function(e){
if (!e){ e = window.event; }
var theCell = resolveTarget(e);
if(!theCell){ return(false); }
color = theCell.bgColor.toLowerCase();
if(!color) { return; }
wikibarColorTool.displayColorPicker(false);
if(wikibarColorTool.pickColorHandler){
wikibarColorTool.pickColorHandler(color, wikibarColorTool.userData);
}
return(false);
};
wikibarColorTool.onMouseOver = function(e){
if (!e){ e = window.event; }
var theButton = resolveTarget(e);
if(!theButton){ return(false); }
if(!wikibarColorTool) { return; }
color = theButton.bgColor.toUpperCase();
if(!color) { return; }
td=document.getElementById('colorPickerInfo');
if(!td) { return; }
td.bgColor = color;
td.innerHTML = '<span style=\"color:#000;\">'+color+'</span> ' +
'<span style=\"color:#fff;\">'+color+'</span>';
e.cancelBubble = true;
if (e.stopPropagation){ e.stopPropagation(); }
return(false);
};
wikibarColorTool.openColorPicker = function(theTarget, pickColorHandler, userData){
wikibarColorTool.skipClickDocumentEvent = true;
wikibarColorTool.pickColorHandler = pickColorHandler;
wikibarColorTool.userData = userData;
wikibarColorTool.moveColorPicker(theTarget);
};
wikibarColorTool.convert3to6HexColor = function(c){
c=c.trim();
var rx=/^\#(\d|[a-f])(\d|[a-f])(\d|[a-f])$/gi;
return (rx.test(c)? c.replace(rx, '#$1$1$2$2$3$3') : c);
};
wikibarColorTool.numToHexColor = function (n){
if(typeof(n)=='number' && (n>=0 && n<=255)) {
s = n.toString(16).toLowerCase();
return ((s.length==1)? '0'+s : s);
}else{
return null;
}
};
wikibarColorTool.renderColorPalette = function(){
if(wikibarColorTool.paletteName==wikibarColorTool.defaultPaletteName){
wikibarColorTool.palette=wikibarColorTool.defaultPalette;
wikibarColorTool.columns=wikibarColorTool.defaultColumns;
return;
}
tiddlerText = (store.getTiddlerText(wikibarColorTool.paletteName, '')).trim();
if(tiddlerText.length<=0) { return; }
var cpContents = tiddlerText.split('\n');
var colors=[];
columns = wikibarColorTool.defaultColumns;
var tmpArray=null;
errCount=0;
for(var i=0; i<cpContents.length; i++){
cpLine=cpContents[i].trim();
if( (!cpLine) || (cpLine.length<=0) || (cpLine.charAt(0) == '#') ){ continue; }
if(cpLine.substring(0,8).toLowerCase()=='columns:'){
tmpArray = cpLine.split(':');
try{
columns = parseInt(tmpArray[1],10);
}catch(ex){
columns = wikibarColorTool.defaultColumns;
}
}else{
tmpArray = cpLine.replace('\t', ' ').split(/[ ]{1,}/);
try{
color='';
for(var j=0; j<3; j++){
c=parseInt(tmpArray[j].trim(), 10);
if(isNaN(c)){
break;
}else{
c=wikibarColorTool.numToHexColor(c);
if(!c) {break;}
color+=c;
}
}
if(color.length==6){
colors.push('#'+color);
} else {
throw 'error';
}
}catch(ex){
}
}
}
if(colors.length>0){
wikibarColorTool.palette = colors;
wikibarColorTool.columns = columns;
}else{
throw 'renderColorPalette(): No color defined in the palette.';
}
};
wikibarColorTool.displayColorPicker = function(visible){
if(wikibarColorTool.colorPicker){
wikibarColorTool.colorPicker.style.display = (visible? 'block' : 'none');
}
};
wikibarColorTool.moveColorPicker = function(theTarget){
if(!wikibarColorTool.colorPicker){
wikibarColorTool.createColorPicker();
}
var cp = wikibarColorTool.colorPicker;
var rootLeft = findPosX(theTarget);
var rootTop = findPosY(theTarget);
var popupLeft = rootLeft;
var popupTop = rootTop;
var popupWidth = cp.offsetWidth;
var winWidth = findWindowWidth();
if(popupLeft + popupWidth > winWidth){
popupLeft = winWidth - popupWidth;
}
cp.style.left = popupLeft + 'px';
cp.style.top = popupTop + 'px';
wikibarColorTool.displayColorPicker(true);
};
wikibarColorTool.createColorPicker = function(unused, palette){
if(palette){ wikibarColorTool.paletteName=palette; }
wikibarColorTool.renderColorPalette();
wikibarColorTool.colorPicker = document.createElement('div');
wikibarColorTool.colorPicker.id = 'colorPicker';
document.body.appendChild(wikibarColorTool.colorPicker);
var theTable = document.createElement('table');
wikibarColorTool.colorPicker.appendChild(theTable);
var theTR = document.createElement('tr');
theTable.appendChild(theTR);
var theTD = document.createElement('td');
theTD.className = 'header';
theTD.colSpan = wikibarColorTool.columns;
theTD.innerHTML = wikibarColorTool.paletteName;
theTR.appendChild(theTD);
for(var i=0; i<wikibarColorTool.palette.length; i++){
if((i%wikibarColorTool.columns)===0){
theTR = document.createElement('tr');
theTable.appendChild(theTR);
}
theTD = document.createElement('td');
theTD.className = 'cell';
theTD.bgColor = wikibarColorTool.convert3to6HexColor(wikibarColorTool.palette[i]);
theTD.onclick = wikibarColorTool.onPickColor;
theTD.onmouseover = wikibarColorTool.onMouseOver;
theTR.appendChild(theTD);
}
rest = wikibarColorTool.palette.length % wikibarColorTool.columns;
if(rest>0){
theTD = document.createElement('td');
theTD.colSpan = wikibarColorTool.columns-rest;
theTD.bgColor = '#000000';
theTR.appendChild(theTD);
}
theTR = document.createElement('tr');
theTable.appendChild(theTR);
theTD = document.createElement('td');
theTD.colSpan = wikibarColorTool.columns;
theTD.id = 'colorPickerInfo';
theTR.appendChild(theTD);
};
wikibarColorTool.onDocumentClick = function(e){
if (!e){ e = window.event; }
if(wikibarColorTool.skipClickDocumentEvent) {
wikibarColorTool.skipClickDocumentEvent = false;
return true;
}
if((!e.eventPhase) || e.eventPhase == Event.BUBBLING_PHASE || e.eventPhase == Event.AT_TARGET){
wikibarColorTool.displayColorPicker(false);
}
return true;
};
function wikibar_doSelectPalette(param){
clearMessage();
var theButton = param.button;
if(!theButton.toolItem.key) { return; }
var palette = theButton.toolItem.key;
var oldPaletteName = wikibarColorTool.paletteName;
if(oldPaletteName != palette){
try{
wikibarColorTool.createColorPicker(theButton, palette);
displayMessage('Palette \"'+palette+'\" ('+ wikibarColorTool.palette.length +' colors) is selected');
}catch(ex){
errMsg = ex;
if(errMsg.substring(0,18)=='renderColorPalette'){
displayMessage('Invalid palette \"' + palette + '\", please check it out!');
wikibarColorTool.createColorPicker(theButton, oldPaletteName);
}
}
}
}
var wikibarPopup = {
skipClickDocumentEvent: false,
stack: []
};
wikibarPopup.resolveRootPopup = function(o){
if(o.isOnMainMenu){ return null; }
if(o.className.substring(0,12)=='wikibarPopup'){ return o;}
return wikibarPopup.resolveRootPopup(o.parentNode);
};
wikibarPopup.create = function(root){
for(var i=0; i<wikibarPopup.stack.length; i++){
var p=wikibarPopup.stack[i];
if(p.root==root){
wikibarPopup.removeFrom(i+1);
return null;
}
}
var rootPopup = wikibarPopup.resolveRootPopup(root);
if(!rootPopup){
wikibarPopup.remove();
}else{
wikibarPopup.removeFromRootPopup(rootPopup);
}
var popup = createTiddlyElement(document.body,'div','wikibarPopup'+root.toolItem.key,'wikibarPopup');
var pop = createTiddlyElement(popup,'table','','');
wikibarPopup.stack.push({rootPopup: rootPopup, root: root, popup: popup});
return pop;
};
wikibarPopup.show = function(unused,slowly){
var curr = wikibarPopup.stack[wikibarPopup.stack.length-1];
var overlayWidth = 1;
var rootLeft, rootTop, rootWidth, rootHeight, popupLeft, popupTop, popupWidth;
if(curr.rootPopup){
rootLeft = findPosX(curr.rootPopup);
rootTop = findPosY(curr.root);
rootWidth = curr.rootPopup.offsetWidth;
popupLeft = rootLeft + rootWidth - overlayWidth;
popupTop = rootTop;
}else{
rootLeft = findPosX(curr.root);
rootTop = findPosY(curr.root);
rootHeight = curr.root.offsetHeight;
popupLeft = rootLeft;
popupTop = rootTop + rootHeight;
}
var winWidth = findWindowWidth();
popupWidth = curr.popup.offsetWidth;
if(popupLeft + popupWidth > winWidth){
popupLeft = rootLeft - popupWidth + overlayWidth;
}
curr.popup.style.left = popupLeft + 'px';
curr.popup.style.top = popupTop + 'px';
curr.popup.style.display = 'block';
addClass(curr.root, 'highlight');
if(config.options.chkAnimate){
anim.startAnimating(new Scroller(curr.popup,slowly));
}else{
window.scrollTo(0,ensureVisible(curr.popup));
}
};
wikibarPopup.remove = function(){
if(wikibarPopup.stack.length > 0){
wikibarPopup.removeFrom(0);
}
};
wikibarPopup.removeFrom = function(from){
for(var t=wikibarPopup.stack.length-1; t>=from; t--){
var p = wikibarPopup.stack[t];
removeClass(p.root,'highlight');
p.popup.parentNode.removeChild(p.popup);
}
wikibarPopup.stack = wikibarPopup.stack.slice(0,from);
};
wikibarPopup.removeFromRootPopup = function(from){
for(var t=0; t<wikibarPopup.stack.length; t++){
var p = wikibarPopup.stack[t];
if(p.rootPopup==from){
wikibarPopup.removeFrom(t);
break;
}
}
};
wikibarPopup.onDocumentClick = function(e){
if (!e){ e = window.event; }
if(wikibarPopup.skipClickDocumentEvent){
wikibarPopup.skipClickDocumentEvent=false;
return true;
}
if((!e.eventPhase) || e.eventPhase == Event.BUBBLING_PHASE || e.eventPhase == Event.AT_TARGET){
wikibarPopup.remove();
}
return true;
};
var wikibarStore = {
TYPE: 'MAIN_MENU',
help:{
TYPE:'MENU',
CAPTION: '<font face=\"verdana\">?</font>',
TOOLTIP: 'about WikiBar',
options:{
TYPE:'MENU',
DYNAITEM: wikibar_genWikibarOptions
},
about:{
TYPE:'MENU',
DYNAITEM: wikibar_genWikibarAbout
}
},
preview:{
TOOLTIP: 'preview this tiddler',
CAPTION: '<font face=\"verdana\">∞</font>',
HANDLER: wikibar_doPreview
},
line:{
TOOLTIP: 'horizontal line',
CAPTION: '<font face=\"verdana\">—</font>',
syntax: '\n----\n',
HANDLER: wikibar_editFormatByCursor
},
crlf:{
TOOLTIP: 'new line',
CAPTION: '<font face=\"verdana\">¶</font>',
syntax: '\n',
HANDLER: wikibar_editFormatByCursor
},
selectAll:{
TOOLTIP: 'select all',
CAPTION: '<font face=\"verdana\">§</font>',
HANDLER: wikibar_editSelectAll
},
deleteSelected:{
TOOLTIP: 'delete selected',
CAPTION: '<font face=\"verdana\">×</font>',
syntax: '',
HANDLER: wikibar_editFormat
},
textFormat:{
TYPE: 'MENU',
CAPTION: 'text',
TOOLTIP: 'text formatters',
ignore:{
TOOLTIP: 'ignore wiki word',
CAPTION: 'ignore wikiWord',
syntax: '~user_text',
hint: 'wiki_word',
HANDLER: wikibar_editFormatByWord
},
bolder:{
TOOLTIP: 'bolder text',
CAPTION: '<strong>bolder</strong>',
syntax: "''user_text''",
hint: 'bold_text',
HANDLER: wikibar_editFormatByWord
},
italic:{
TOOLTIP: 'italic text',
CAPTION: '<em>italic</em>',
syntax: '\/\/user_text\/\/',
hint: 'italic_text',
HANDLER: wikibar_editFormatByWord
},
underline:{
TOOLTIP: 'underline text',
CAPTION: '<u>underline</u>',
syntax: '__user_text__',
hint: 'underline_text',
HANDLER: wikibar_editFormatByWord
},
strikethrough:{
TOOLTIP: 'strikethrough text',
CAPTION: '<strike>strikethrough</strike>',
syntax: '==user_text==',
hint: 'strikethrough_text',
HANDLER: wikibar_editFormatByWord
},
superscript:{
TOOLTIP: 'superscript text',
CAPTION: 'X<sup>superscript</sup>',
syntax: '^^user_text^^',
hint: 'superscript_text',
HANDLER: wikibar_editFormatByWord
},
subscript:{
TOOLTIP: 'subscript text',
CAPTION: 'X<sub>subscript</sub>',
syntax: '~~user_text~~',
hint: 'subscript_text',
HANDLER: wikibar_editFormatByWord
},
comment:{
TOOLTIP: 'comment text',
CAPTION: 'comment text',
syntax: '/%user_text%/',
hint: 'comment_text',
HANDLER: wikibar_editFormatByWord
},
monospaced:{
TOOLTIP: 'monospaced text',
CAPTION: '<code>monospaced</code>',
syntax: '{{{user_text}}}',
hint: 'monospaced_text',
HANDLER: wikibar_editFormatByWord
}
},
paragraph:{
TYPE: 'MENU',
TOOLTIP: 'paragarph formatters',
list:{
TYPE: 'MENU',
TOOLTIP: 'list tools',
bullet:{
TOOLTIP: 'bullet point',
syntax: '*user_text',
hint: 'bullet_text',
HANDLER: wikibar_editFormatByLine
},
numbered:{
TOOLTIP: 'numbered list',
syntax: '#user_text',
hint: 'numbered_text',
HANDLER: wikibar_editFormatByLine
}
},
heading:{
TYPE: 'MENU',
heading1:{
CAPTION:'<h1>Heading 1</h1>',
TOOLTIP: 'Heading 1',
syntax: '!user_text',
hint: 'heading_1',
HANDLER: wikibar_editFormatByLine
},
heading2:{
CAPTION:'<h2>Heading 2<h2>',
TOOLTIP: 'Heading 2',
syntax: '!!user_text',
hint: 'heading_2',
HANDLER: wikibar_editFormatByLine
},
heading3:{
CAPTION:'<h3>Heading 3</h3>',
TOOLTIP: 'Heading 3',
syntax: '!!!user_text',
hint: 'heading_3',
HANDLER: wikibar_editFormatByLine
},
heading4:{
CAPTION:'<h4>Heading 4</h4>',
TOOLTIP: 'Heading 4',
syntax: '!!!!user_text',
hint: 'heading_4',
HANDLER: wikibar_editFormatByLine
},
heading5:{
CAPTION:'<h5>Heading 5</h5>',
TOOLTIP: 'Heading 5',
syntax: '!!!!!user_text',
hint: 'heading_5',
HANDLER: wikibar_editFormatByLine
}
},
comment:{
TYPE: 'MENU',
commentByLine:{
CAPTION:'comment by line',
TOOLTIP: 'line comment',
syntax: '/%user_text%/',
hint: 'comment_text',
HANDLER: wikibar_editFormatByLine
},
commentByBlock:{
CAPTION:'comment by block',
TOOLTIP: 'block comment',
syntax: '/%\nuser_text\n%/',
hint: 'comment_text',
byBlock: true,
HANDLER: wikibar_editFormatByLine
}
},
monospaced:{
TYPE: 'MENU',
monosByLine:{
CAPTION: 'monospaced by line',
TOOLTIP: 'line monospaced',
syntax: '{{{\nuser_text\n}}}',
hint: 'monospaced_text',
HANDLER: wikibar_editFormatByLine
},
monosByBlock:{
CAPTION: 'monospaced by block',
TOOLTIP: 'block monospaced',
syntax: '{{{\nuser_text\n}}}',
hint: 'monospaced_text',
byBlock: true,
HANDLER: wikibar_editFormatByLine
}
},
quote:{
TYPE: 'MENU',
quoteByLine:{
CAPTION: 'quote by line',
TOOLTIP: 'line quote',
syntax: '>user_text',
hint: 'quote_text',
HANDLER: wikibar_editFormatByLine
},
quoteByBlcok:{
CAPTION: 'quote by block',
TOOLTIP: 'block quote',
syntax: '<<<\nuser_text\n<<<',
hint: 'quote_text',
byBlock: true,
HANDLER: wikibar_editFormatByLine
}
},
plugin:{
TYPE: 'MENU',
code:{
CAPTION: 'code area',
TOOLTIP: 'block monospaced for plugin',
syntax: '\n\/\/{{{\nuser_text\n\/\/}}}\n',
hint: 'monospaced_plugin_code',
byBlock: true,
HANDLER: wikibar_editFormatByLine
},
commentByLine:{
CAPTION: 'comment by line',
TOOLTIP: 'line comment',
syntax: '\/\/user_text',
hint: 'plugin_comment',
HANDLER: wikibar_editFormatByLine
},
commentByBlock:{
CAPTION: 'comment by block',
TOOLTIP: 'block comment',
syntax: '\/\***\nuser_text\n***\/',
hint: 'plugin_comment',
byBlock: true,
HANDLER: wikibar_editFormatByLine
}
},
css:{
TYPE: 'MENU',
code:{
CAPTION: 'code area',
TOOLTIP: 'block monospaced for css',
syntax: '\n\nuser_text\n\n',
hint: 'monospaced_css_code',
byBlock: true,
HANDLER: wikibar_editFormatByLine
},
commentByLine:{
CAPTION: 'comment by line',
TOOLTIP: 'line comment',
syntax: '',
hint: 'css_comment',
HANDLER: wikibar_editFormatByLine
},
commentByBlock:{
CAPTION: 'comment by block',
TOOLTIP: 'block comment',
syntax: '',
hint: 'css_comment',
byBlock: true,
HANDLER: wikibar_editFormatByLine
}
}
},
color:{
TYPE: 'MENU',
TOOLTIP: 'color tools',
highlight:{
CAPTION:'highlight text',
TOOLTIP: 'highlight text',
syntax: '@@user_text@@',
hint: 'highlight_text',
HANDLER: wikibar_editFormatByWord
},
color:{
CAPTION:'text color',
TOOLTIP: 'text color',
hint: 'your_text',
syntax: '@@color(%1):user_text@@',
HANDLER: wikibar_getColorCode,
doMore: wikibar_editFormatByWord
},
bgcolor:{
CAPTION:'background color',
TOOLTIP: 'background color',
hint: 'your_text',
syntax: '@@bgcolor(%1):user_text@@',
HANDLER: wikibar_getColorCode,
doMore: wikibar_editFormatByWord
},
colorcode:{
CAPTION:'color code',
TOOLTIP: 'insert color code',
syntax: '%1',
HANDLER: wikibar_getColorCode,
doMore: wikibar_editFormatByCursor
},
'color palette':{
TYPE:'MENU',
DYNAITEM: wikibar_genPaletteSelector,
SEPERATOR:{},
morePalette:{
CAPTION:'more palettes',
TOOLTIP:'get more palettes',
HANDLER: wikibar_getMorePalette
}
}
},
link:{
TYPE: 'MENU',
TOOLTIP: 'insert link',
wiki:{
CAPTION:'wiki link',
TOOLTIP: 'wiki link',
syntax: '[[user_text]]',
hint: 'wiki_word',
HANDLER: wikibar_editFormatByWord
},
pretty:{
CAPTION: 'pretty link',
TOOLTIP: 'pretty link',
syntax: '[[user_text|%1]]',
hint: 'pretty_word',
param: 'PrettyLink Target',
HANDLER: wikibar_getLinkUrl,
doMore: wikibar_editFormatByWord
},
url:{
TOOLTIP: 'url link',
syntax: '[[user_text|%1]]',
hint: 'your_text',
param: 'http:\/\/...',
HANDLER: wikibar_getLinkUrl,
doMore: wikibar_editFormatByWord
},
image:{
TOOLTIP: 'image link',
syntax: '[img[user_text|%1]]',
hint: 'alt_text',
param: 'image/icon.jpg',
HANDLER: wikibar_getLinkUrl,
doMore: wikibar_editFormatByWord
}
},
macro:{},
more:{
TYPE: 'MENU',
TOOLTIP: 'more tools',
table:{
TYPE: 'MENU',
TOOLTIP: 'table',
table:{
CAPTION:'create table',
TOOLTIP: 'create a new table',