189 lines
7.6 KiB
HTML
189 lines
7.6 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<!--
|
||
|
|
* WYMeditor : what you see is What You Mean web-based editor
|
||
|
|
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
|
||
|
|
* Dual licensed under the MIT (MIT-license.txt)
|
||
|
|
* and GPL (GPL-license.txt) licenses.
|
||
|
|
*
|
||
|
|
* For further information visit:
|
||
|
|
* http://www.wymeditor.org/
|
||
|
|
*
|
||
|
|
* File Name:
|
||
|
|
* 15-rdfa-editor.html
|
||
|
|
* RDFa editor implementation example page.
|
||
|
|
* See the documentation for more info.
|
||
|
|
*
|
||
|
|
* File Authors:
|
||
|
|
* Jean-Francois Hovinne (jf.hovinne a-t wymeditor dotorg)
|
||
|
|
-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<title>RDFa editor</title>
|
||
|
|
<style type="text/css">
|
||
|
|
/* visual feedback */
|
||
|
|
.about { background-color: #f99; }
|
||
|
|
.dc_creator { background-color: #9f9; }
|
||
|
|
.dc_title { background-color: #9ff; }
|
||
|
|
.foaf_Person { background-color: #69c; }
|
||
|
|
.foaf_name { background-color: #99c; }
|
||
|
|
.foaf_homepage { background-color: #c9c; }
|
||
|
|
.foaf_mbox { background-color: #c6c; }
|
||
|
|
.foaf_phone { background-color: #c3c; }
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript" src="../jquery/jquery.js"></script>
|
||
|
|
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
/*EXTEND THE XHTML PARSER*/
|
||
|
|
/*************************/
|
||
|
|
|
||
|
|
//Add the RDFa attributes
|
||
|
|
WYMeditor.XhtmlValidator._attributes['core']['attributes'].push(
|
||
|
|
'rel',
|
||
|
|
'rev',
|
||
|
|
'content',
|
||
|
|
'href',
|
||
|
|
'src',
|
||
|
|
'about',
|
||
|
|
'property',
|
||
|
|
'resource',
|
||
|
|
'datatype',
|
||
|
|
'typeof');
|
||
|
|
|
||
|
|
//Add the 'standard' vocabularies
|
||
|
|
WYMeditor.XhtmlValidator._attributes['core']['attributes'].push(
|
||
|
|
'xmlns:biblio',
|
||
|
|
'xmlns:cc',
|
||
|
|
'xmlns:dbp',
|
||
|
|
'xmlns:dbr',
|
||
|
|
'xmlns:dc',
|
||
|
|
'xmlns:ex',
|
||
|
|
'xmlns:foaf',
|
||
|
|
'xmlns:rdf',
|
||
|
|
'xmlns:rdfs',
|
||
|
|
'xmlns:taxo',
|
||
|
|
'xmlns:xhv',
|
||
|
|
'xmlns:xsd');
|
||
|
|
|
||
|
|
//Overwrite the <a> attributes 'rel' and 'rev'
|
||
|
|
WYMeditor.XhtmlValidator._tags['a'] = {
|
||
|
|
"attributes": {
|
||
|
|
"0":"charset",
|
||
|
|
"1":"coords",
|
||
|
|
"2":"href",
|
||
|
|
"3":"hreflang",
|
||
|
|
"4":"name",
|
||
|
|
"5":"rel",
|
||
|
|
"6":"rev",
|
||
|
|
"shape":/^(rect|rectangle|circ|circle|poly|polygon)$/,
|
||
|
|
"7":"type"
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/*END EXTEND*/
|
||
|
|
/************/
|
||
|
|
|
||
|
|
jQuery(function() {
|
||
|
|
|
||
|
|
jQuery('.wymeditor').wymeditor({
|
||
|
|
stylesheet: 'wym_stylesheet.css',
|
||
|
|
html: '<h2 class="dc_title" property="dc:title">The trouble with Bob<\/h2><h3 class="dc_creator" property="dc:creator">Alice<\/h3>'
|
||
|
|
+ '<p>The trouble with Bob is that he takes much better photos than I do.<\/p>'
|
||
|
|
+ '<p class="foaf_Person" typeof="foaf:Person">'
|
||
|
|
+ '<strong class="foaf_name" property="foaf:name">Alice Birpemswick<\/strong><br \/>'
|
||
|
|
+ 'Email: <a class="foaf_mbox" rel="foaf:mbox" href="mailto:alice@example.com">alice@example.com<\/a><br \/>'
|
||
|
|
+ 'Phone: <a class="foaf_phone" rel="foaf:phone" href="tel:+1-617-555-7332">+1 617.555.7332<\/a>'
|
||
|
|
+ '<\/p>',
|
||
|
|
|
||
|
|
postInit: function(wym) {
|
||
|
|
|
||
|
|
//set the classes panel as dropdown
|
||
|
|
jQuery(wym._box).find('div.wym_classes').hide();
|
||
|
|
|
||
|
|
//construct the panel
|
||
|
|
jQuery(wym._box).find('div.wym_area_right')
|
||
|
|
.append('<div class="wym_attributes wym_section wym_panel"><\/div>')
|
||
|
|
.children(':last')
|
||
|
|
.append('<h2>Attributes<\/h2>')
|
||
|
|
.append('<ul><\/ul>')
|
||
|
|
.children(':last')
|
||
|
|
//store the attribute name/value in the button class (better idea?)
|
||
|
|
.append('<li><a class="about" title="What the data is about." href="#">ABOUT: about #value#<\/a><\/li>')
|
||
|
|
.append('<li><a class="property dc_title" title="A name by which the resource is formally known." href="#">TITLE: prop dc:title<\/a><\/li>')
|
||
|
|
.append('<li><a class="property dc_creator" title="An entity primarily responsible for making the resource." href="#">CREATOR: prop dc:creator<\/a><\/li>')
|
||
|
|
.append('<li><a class="typeof foaf_Person" title="A person." href="#">PERSON: typeof foaf:Person<\/a><\/li>')
|
||
|
|
.append('<li><a class="property foaf_name" title="A name for some thing." href="#">NAME: property foaf:name<\/a><\/li>')
|
||
|
|
.append('<li><a class="rel foaf_homepage" title="A homepage for some thing." href="#">HOMEPAGE: rel foaf:homepage<\/a><\/li>')
|
||
|
|
.append('<li><a class="rel foaf_mbox" title="A personal mailbox." href="#">MAILBOX: rel foaf:mbox<\/a><\/li>')
|
||
|
|
.append('<li><a class="rel foaf_phone" title="A phone." href="#">PHONE: rel foaf:phone<\/a><\/li>')
|
||
|
|
.find('a')
|
||
|
|
//event handlers
|
||
|
|
.click( function() {
|
||
|
|
|
||
|
|
//init
|
||
|
|
var selected = wym.selected(), //selected container
|
||
|
|
classes = jQuery(this).attr('class').split(' '), //clicked button classes
|
||
|
|
attrName = classes[0], //attribute name, e.g. 'property'
|
||
|
|
attrValue = classes.length > 1 ? classes[1] : null; //attribute value, if available, e.g. dc_title
|
||
|
|
|
||
|
|
//the attribute already exists, remove it
|
||
|
|
if( jQuery(selected).attr(attrName) != undefined && jQuery(selected).attr(attrName) != '') {
|
||
|
|
WYMeditor.console.log('attribute already exists, remove it:', attrName, jQuery(selected).attr(attrName));
|
||
|
|
if( classes.length == 1 || jQuery(selected).attr(attrName) == attrValue.replace('_', ':') )
|
||
|
|
jQuery(selected).removeAttr(attrName).removeClass(attrName).removeClass(attrValue);
|
||
|
|
|
||
|
|
//else, add it (and the feedback class)
|
||
|
|
} else {
|
||
|
|
WYMeditor.console.log('attribute does not exist, add it:', attrName, attrValue);
|
||
|
|
if( classes.length > 1 ) { //value available
|
||
|
|
jQuery(selected).attr(attrName, attrValue.replace('_', ':')).addClass(attrValue);
|
||
|
|
} else { //value not available
|
||
|
|
attrValue = prompt('Value', '');
|
||
|
|
if(attrValue != null) jQuery(selected).attr(attrName, attrValue).addClass(attrName);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//feedback css
|
||
|
|
var rules = [
|
||
|
|
{ name: '.about',
|
||
|
|
css: 'background-color: #f99;' },
|
||
|
|
{ name: '.dc_creator',
|
||
|
|
css: 'background-color: #9f9;' },
|
||
|
|
{ name: '.dc_title',
|
||
|
|
css: 'background-color: #9ff;' },
|
||
|
|
{ name: '.foaf_Person',
|
||
|
|
css: 'background-color: #69c;' },
|
||
|
|
{ name: '.foaf_name',
|
||
|
|
css: 'background-color: #99c;' },
|
||
|
|
{ name: '.foaf_homepage',
|
||
|
|
css: 'background-color: #c9c;' },
|
||
|
|
{ name: '.foaf_mbox',
|
||
|
|
css: 'background-color: #c6c;' },
|
||
|
|
{ name: '.foaf_phone',
|
||
|
|
css: 'background-color: #c3c;' }
|
||
|
|
];
|
||
|
|
wym.addCssRules( wym._doc, rules);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>WYMeditor based RDFa editor (proof of concept)</h1>
|
||
|
|
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
|
||
|
|
<p>More information on the forum: <a href="http://forum.wymeditor.org/forum/viewtopic.php?f=3&p=2030">WYMeditor for RDFa</a></p>
|
||
|
|
<form method="post" action="">
|
||
|
|
<textarea class="wymeditor"></textarea>
|
||
|
|
<input type="submit" class="wymupdate" />
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|