litvinovg/vitro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

VIVO-921: widget-ized the data property form. Dates, ints, integers, floats, uris and booleans no longer use tinyMCE.

Browse source
This commit is contained in:
Tim Worrall 2015-04-01 12:48:15 -04:00
parent c69138b737
commit c47964fbde
8 changed files with 406 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/languages/es_GO/i18n/all_es_GO.properties
View file

@ -793,7 +793,7 @@ august = Agosto
september = Septiembre
october = Octubre
november = Noviembre
december = Deciembre
#
# miscellaneous javascript variables ( webapp/web/js)
#

7
webapp/src/edu/cornell/mannlib/vitro/webapp/dao/jena/DatatypeDaoJena.java
View file

@ -99,6 +99,13 @@ public class DatatypeDaoJena extends JenaBaseDao implements DatatypeDao {
allDatatypes.add(integerD);
allDatatypesMap.put(integerD.getUri(), integerD);
Datatype floatD = new Datatype();
floatD.setUri(XSD+"float");
floatD.setName("float");
floatD.setId(index++);
allDatatypes.add(floatD);
allDatatypesMap.put(floatD.getUri(), floatD);
Datatype dateTimeD = new Datatype();
dateTimeD.setUri(XSD+"dateTime");
dateTimeD.setName("date and time (YYYY-MM-DDThh:mm:ss)");

2
webapp/web/i18n/all.properties
View file

@ -806,7 +806,7 @@ august = August
september = September
october = October
november = November
december = December
#
# miscellaneous javascript variables ( webapp/web/js)
#

22
webapp/web/templates/freemarker/body/partials/individual/propStatement-dataDefault.ftl
View file

@ -5,7 +5,7 @@
This template must be self-contained and not rely on other variables set for the individual page, because it
is also used to generate the property statement during a deletion.
-->
<#import "lib-datetime.ftl" as dt>
<@showStatement statement />
<#macro showStatement statement>
@ -19,10 +19,18 @@
<#if theValue?contains("<p>") >
<#assign theValue = theValue?replace("<p>","<p style='margin-bottom:.6em'>") />
</#if>
${theValue}
<#if theValue?matches("^(10-20)\\d\\d[- \\/.](0[1-9]|1[012])[- \\/.](0[1-9]|[12][0-9]|3[01])$") >
<#assign theValue = theValue + "T00:00:00" />
${dt.formatXsdDateTimeLong(theValue, "yearMonthDayPrecision")}
<#elseif theValue?matches("^(10-20)\\d{2}(-|\\/)((0[1-9])|(1[0-2]))(-|\\/)((0[1-9])|([1-2][0-9])|(3[0-1]))(T|\\s)(([0-1][0-9])|(2[0-3])):([0-5][0-9]):([0-5][0-9])")>
${dt.formatXsdDateTimeLong(theValue, "yearMonthDayTimePrecision")}
<#elseif theValue?matches("^((10-20)\\d\\d+)-(0[1-9]|1[012])")>
<#assign theValue = theValue + "-01T00:00:00" />
${dt.formatXsdDateTimeLong(theValue, "yearMonthPrecision")}
<#elseif theValue?matches("^--(0[1-9]|1[012])")>
<#assign theValue = "2000" + theValue?substring(1) + "-01T00:00:00" />
${dt.formatXsdDateTimeLong(theValue, "monthPrecision")}
<#else>
${theValue}
</#if>
</#macro>

223
webapp/web/templates/freemarker/edit/forms/dateTimeEntryForm.ftl Normal file
View file

@ -0,0 +1,223 @@
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
<fieldset class="dateTime">
<input type="hidden" id="literal" name="literal" value="${literalValues}" role="input"/>
<#if datatype?contains("#date") || datatype?contains("Year") >
<label for="dateTimeField-year">Year</label>
<input class="text-field" name="dateTimeField-year" id="dateTimeField-year" type="text" value="" size="4" maxlength="4" />
</#if>
<#if datatype?contains("#date") || datatype?contains("Month") >
<label for="dateTimeField-month">Month</label>
<select name="dateTimeField-month" id="dateTimeField-month" >
<option value="">month</option>
<option value="01">${i18n().january}</option>
<option value="02">${i18n().february}</option>
<option value="03">${i18n().march}</option>
<option value="04">${i18n().april}</option>
<option value="05">${i18n().may}</option>
<option value="06">${i18n().june}</option>
<option value="07">${i18n().july}</option>
<option value="08">${i18n().august}</option>
<option value="09">${i18n().september}</option>
<option value="10">${i18n().october}</option>
<option value="11">${i18n().november}</option>
<option value="12">${i18n().december}</option>
</select>
</#if>
<#if datatype?contains("#date") >
<label for="dateTimeField-day">Day</label>
<select name="dateTimeField-day" id="dateTimeField-day" >
<option value="">day</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</#if>
<#if datatype?contains("#dateTime") || datatype?contains("#time") >
<label for="dateTimeField-hour">Hour</label>
<select name="dateTimeField-hour" id="dateTimeField-hour" >
<option value="">hour</option>
<option value="00">12am</option>
<option value="01">1am</option>
<option value="02">2am</option>
<option value="03">3am</option>
<option value="04">4am</option>
<option value="05">5am</option>
<option value="06">6am</option>
<option value="07">7am</option>
<option value="08">8am</option>
<option value="09">9am</option>
<option value="10">10am</option>
<option value="11">11am</option>
<option value="12">12pm</option>
<option value="13">1pm</option>
<option value="14">2pm</option>
<option value="15">3pm</option>
<option value="16">4pm</option>
<option value="17">5pm</option>
<option value="18">6pm</option>
<option value="19">7pm</option>
<option value="20">8pm</option>
<option value="21">9pm</option>
<option value="22">10pm</option>
<option value="23">11pm</option>
</select>
<label for="dateTimeField-minute">Minutes</label>
<select name="dateTimeField-minute" id="dateTimeField-minute" >
<option value="">minutes</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
<label for="dateTimeField-second">Seconds</label>
<select name="dateTimeField-second" id="dateTimeField-second" >
<option value="">seconds</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</#if>
</fieldset>

56
webapp/web/templates/freemarker/edit/forms/defaultDataPropertyForm.ftl
View file

@ -23,6 +23,11 @@
</#if>
<#assign literalValues = "${editConfiguration.dataLiteralValuesAsString}" />
<#if editConfiguration.dataPredicateProperty.rangeDatatypeURI?? >
<#assign datatype = editConfiguration.dataPredicateProperty.rangeDatatypeURI />
<#else>
<#assign datatype = "none" />
</#if>
<form class="editForm" action = "${submitUrl}" method="post">
<input type="hidden" name="editKey" id="editKey" value="${editKey}" role="input" />
@ -30,8 +35,41 @@
<label for="${editConfiguration.dataLiteral}"><p class="propEntryHelpText">${editConfiguration.dataPredicatePublicDescription}</p></label>
</#if>
<textarea rows="2" id="literal" name="literal" value="" class="useTinyMce" role="textarea">${literalValues}</textarea>
<#if datatype = "http://www.w3.org/2001/XMLSchema#integer" || datatype = "http://www.w3.org/2001/XMLSchema#int">
<input
type="text" id="literal" name="literal" value="${literalValues}"
placeholder="123456"
/>
<#elseif datatype = "http://www.w3.org/2001/XMLSchema#float">
<input
type="text" id="literal" name="literal" value="${literalValues}"
placeholder="12.345"
/>
<#elseif datatype = "http://www.w3.org/2001/XMLSchema#boolean">
<select id="literal" name="literal">
<#if literalValues = "true">
<option value="true" selected="true">true</option>
<option value="false">false</option>
<#else>
<option value="true">true</option>
<option value="false" selected="true">false</option>
</#if>
</select>
<#elseif datatype = "http://www.w3.org/2001/XMLSchema#anyURI">
<input
type="text" id="literal" name="literal" value="${literalValues}"
placeholder="http://..."
/>
<#elseif datatype = "http://www.w3.org/2001/XMLSchema#dateTime" ||
datatype = "http://www.w3.org/2001/XMLSchema#date" ||
datatype = "http://www.w3.org/2001/XMLSchema#time" ||
datatype = "http://www.w3.org/2001/XMLSchema#gYearMonth" ||
datatype = "http://www.w3.org/2001/XMLSchema#gYear" ||
datatype = "http://www.w3.org/2001/XMLSchema#gMonth" >
<#include "dateTimeEntryForm.ftl">
<#else>
<textarea rows="2" id="literal" name="literal" value="" class="useTinyMce" role="textarea">${literalValues}</textarea>
</#if>
<br />
<#--The submit label should be set within the template itself, right now
@ -47,10 +85,14 @@
<#include "defaultDeletePropertyForm.ftl">
</#if>
<script type="text/javascript">
var datatype = "${datatype!}";
</script>
<#include "defaultFormScripts.ftl">
<script type="text/javascript">
$(document).ready(function(){
defaultDataPropertyUtils.onLoad();
});
</script>
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/templates/freemarker/edit/forms/css/customForm.css" />')}
${scripts.add('<script type="text/javascript" src="${urls.base}/js/utils.js"></script>',
'<script type="text/javascript" src="${urls.base}/js/customFormUtils.js"></script>')}

122
webapp/web/templates/freemarker/edit/forms/js/defaultDataPropertyUtils.js
View file

@ -6,7 +6,9 @@ var defaultDataPropertyUtils = {
this.initObjectReferences();
this.bindEventListeners();
if ( $('#literal').val().length > 0 ) {
this.parseLiteralValue();
}
},
initObjectReferences: function() {
@ -14,27 +16,115 @@ var defaultDataPropertyUtils = {
this.form = $('form.editForm');
this.textArea = $('textarea.useTinyMce');
$.extend(this, datatype);
},
bindEventListeners: function() {
this.form.submit(function() {
var theText = tinyMCE.get('literal').getContent();
if ( defaultDataPropertyUtils.textArea.length ) {
var theText = tinyMCE.get('literal').getContent();
if ( theText.indexOf("<!--") > -1 && theText.indexOf("-->") > -1 ) {
var start = theText.indexOf("<p><!--");
var end = (theText.indexOf("--></p>") + 10);
var removeText = theText.slice(start,end);
var newText = theText.replace(removeText,"");
tinyMCE.get('literal').setContent(newText);
}
else if ( theText.indexOf("&lt;!--") > -1 && theText.indexOf("--&gt;") > -1 ) {
var start = theText.indexOf("<p>&lt;!--");
var end = (theText.indexOf("--&gt;</p>") + 10);
var removeText = theText.slice(start,end);
var newText = theText.replace(removeText,"");
tinyMCE.get('literal').setContent(newText);
}
if ( theText.indexOf("<!--") > -1 && theText.indexOf("-->") > -1 ) {
var start = theText.indexOf("<p><!--");
var end = (theText.indexOf("--></p>") + 10);
var removeText = theText.slice(start,end);
var newText = theText.replace(removeText,"");
tinyMCE.get('literal').setContent(newText);
}
else if ( theText.indexOf("&lt;!--") > -1 && theText.indexOf("--&gt;") > -1 ) {
var start = theText.indexOf("<p>&lt;!--");
var end = (theText.indexOf("--&gt;</p>") + 10);
var removeText = theText.slice(start,end);
var newText = theText.replace(removeText,"");
tinyMCE.get('literal').setContent(newText);
}
}
else {
defaultDataPropertyUtils.createLiteralValue();
}
});
},
createLiteralValue: function() {
var theType = datatype.substring(datatype.lastIndexOf("#") + 1);
var temp = "";
switch (theType) {
case 'date':
temp = $('#dateTimeField-year').val() + "-"
+ $('#dateTimeField-month').val() + "-"
+ $('#dateTimeField-day').val();
$('#literal').val(temp);
break;
case 'dateTime':
temp = $('#dateTimeField-year').val() + "-"
+ $('#dateTimeField-month').val() + "-"
+ $('#dateTimeField-day').val() + "T"
+ $('#dateTimeField-hour').val() + ":"
+ $('#dateTimeField-minute').val() + ":"
+ $('#dateTimeField-second').val();
$('#literal').val(temp);
break;
case 'time':
temp = $('#dateTimeField-hour').val() + ":"
+ $('#dateTimeField-minute').val() + ":"
+ $('#dateTimeField-second').val();
$('#literal').val(temp);
break;
case 'gYear':
$('#literal').val($('#dateTimeField-year').val());
break;
case 'gYearMonth':
temp = $('#dateTimeField-year').val() + "-" + $('#dateTimeField-month').val();
$('#literal').val(temp);
break;
case 'gMonth':
temp = "--" + $('#dateTimeField-month').val()
$('input#literal').val(temp);
break;
}
},
parseLiteralValue: function() {
var theType = datatype.substring(datatype.lastIndexOf("#") + 1);
var temp = $('#literal').val();
switch (theType) {
case 'date':
$('#dateTimeField-year').val(temp.substring(0, temp.indexOf("-")));
$('#dateTimeField-month').val(temp.substring(temp.indexOf("-")+1,temp.lastIndexOf("-")));
$('#dateTimeField-day').val(temp.substring(temp.lastIndexOf("-")+1));
break;
case 'dateTime':
$('#dateTimeField-year').val(temp.substring(0, temp.indexOf("-")));
$('#dateTimeField-month').val(temp.substring(temp.indexOf("-")+1,temp.lastIndexOf("-")));
$('#dateTimeField-day').val(temp.substring(temp.lastIndexOf("-")+1,temp.indexOf("T")));
$('#dateTimeField-hour').val(temp.substring(temp.indexOf("T")+1,temp.indexOf(":")));
$('#dateTimeField-minute').val(temp.substring(temp.indexOf(":")+1,temp.lastIndexOf(":")));
$('#dateTimeField-second').val(temp.substring(temp.lastIndexOf(":")+1));
break;
case 'time':
$('#dateTimeField-hour').val(temp.substring(0,temp.indexOf(":")));
$('#dateTimeField-minute').val(temp.substring(temp.indexOf(":")+1,temp.lastIndexOf(":")));
$('#dateTimeField-second').val(temp.substring(temp.lastIndexOf(":")+1));
break;
case 'gYear':
$('#dateTimeField-year').val(temp);
break;
case 'gYearMonth':
$('#dateTimeField-year').val(temp.substring(0, temp.indexOf("-")));
$('#dateTimeField-month').val(temp.substring(temp.indexOf("-")+1));
break;
case 'gMonth':
$('#dateTimeField-month').val(temp.substring(temp.lastIndexOf("-")+1));
break;
}
}
}
$(document).ready(function(){
defaultDataPropertyUtils.onLoad();
});

1
webapp/web/templates/freemarker/lib/lib-datetime.ftl
View file

@ -161,6 +161,7 @@
<#if formatType == "long">
<#if precision?ends_with("yearPrecision")>yyyy
<#elseif precision?ends_with("yearMonthPrecision")>MMMM yyyy
<#elseif precision?ends_with("monthPrecision")>MMMM
<#elseif precision?ends_with("yearMonthDayPrecision")>MMMM d, yyyy
<#else>MMMM d, yyyy h:mm a
</#if>