Open-Source-Access-Control-.../public/wymeditor/examples/15-rdfa-editor.html

189 lines
7.6 KiB
HTML
Raw Normal View History

2013-09-28 11:59:19 +00:00
<!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&amp;p=2030">WYMeditor for RDFa</a></p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>