wpldp.js
window.wpldp = function( store, options ) {
this.options = options || {};
this.store = store;
this.resultSet = [];
Handlebars.logger.level = 0;
this.current_site_url = site_rest_url + 'ldp/v1/sites/';
this.init = function() {
jQuery('input:radio[name="tax_input[ldp_container][]"]').click(function() {
//TODO: Switch to a smooth AJAX call for changing the container, instead of reloading the page.
var form = jQuery('#post');
form.submit();
});
jQuery('input').keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
jQuery('#post').submit();
}
});
this.bindEvents();
this.loadData();
}
this.loadData = function () {
var instance = this;
this.store.list( instance.current_site_url ).then( function( sites ) {
sites.forEach( function( site ) {
this.store.list( site['@id'] ).then( function( containers ) {
console.log('TOTOT');
containers.forEach( function( container ) {
console.log('Contianer', container );
this.store.list( container['@id'] ).then( function( resources ) {
console.log( 'Resources', resources );
resources.forEach( function( resource ) {
instance.resultSet.push( resource );
console.log( instance.resultSet );
});
});
});
});
});
});
}
this.bindEvents = function() {
var instance = this;
jQuery('.remove-field-button').click( function( event ) {
instance.removeField( event );
});
jQuery('input[type=date]').datepicker();
var topics = [];
jQuery("#ldpform").on('focus', '.ldpLookup', function(event) {
jQuery(this).autocomplete({
autoFocus: true,
minlength: 3,
search: function() {
jQuery(this).addClass('sf-suggestion-search')
},
open: function() {
jQuery(this).removeClass('sf-suggestion-search')
},
select: function( event, ui ) {
var emptyFields = jQuery(this).siblings().filter(function(index) { return jQuery(this).val() == ''}).length;
},
source: function(request, callback) {
var searchResults = []
instance.resultSet.forEach( function( result ) {
if ( result['@type'] == event.target.parentNode.dataset.range ) {
searchResults.push( { 'label': result['foaf:name'], 'value': result['@id'] } );
}
});
callback( searchResults );
}
});
});
}
this.removeField = function removeField( event ) {
event.preventDefault();
event.stopPropagation();
var target_id = event.target.id.substring('remove-field-'.length);
var target_div = document.getElementById( target_id );
target_div.parentNode.removeChild( target_div );
event.target.parentNode.removeChild( event.target );
return false;
}
this.render = function render( div, objectIri, template, context, modelName, prefix ) {
var objectIri = this.store.getIri(objectIri);
var template = template ? template : this.store.mainTemplate;
var context = context || this.store.context;
var fields = modelName ? this.store.models[modelName].fields : null;
var instance = this;
this.store.get(objectIri).then(function(object) {
if (fields) {
fields.forEach( function(field) {
if (field.name) {
var propertyName = field.name;
} else if (field['data-property']) {
field.name = field['data-property'];
} else if (field['object-property']) {
field.name = field['object-property'];
}
if (prefix) {
propertyName = propertyName.replace(prefix, '');
}
if ( field.multiple == "true" ) {
if (object[field.name]) {
if ( Array.isArray(object[field.name])) {
field.fields = object[field.name];
} else {
field.fields = [ object[field.name] ];
}
} else {
field.fields = new Array();
}
} else {
field.fieldValue = object[field.name];
}
});
}
if (typeof(template) == 'string' && template.substring(0, 1) == '#') {
var element = jQuery(template);
if (element && typeof element.attr('src') !== 'undefined') {
instance.getTemplateAjax(element.attr('src'), function(template) {
jQuery(div).html(template({object: object}));
});
} else {
template = Handlebars.compile(element.html());
jQuery(div).html(template({object: object}));
}
} else {
template = Handlebars.compile(template);
jQuery(div).html(template({object: object}));
}
instance.bindEvents();
});
}
// Get handlebars templates via ajax
this.getTemplateAjax = function getTemplateAjax( path, callback ) {
var source, template;
jQuery.ajax({
url: path,
success: function (data) {
source = data;
template = Handlebars.compile(source);
if (callback) callback(template);
}
});
}
Handlebars.registerHelper("inc", function(value, options)
{
return parseInt(value) + 1;
});
// The partial definition for displaying a form field
var fieldPartialTest = "{{#this}}{{#if '@id'}}\
<button class='button remove-field-button' id='remove-field-{{parent.name}}{{inc @index}}'>-</button>\
<input data-range={{parent.range}} class='{{#ifCond parent.range 'resource'}}ldpLookup{{/ifCond}} {{#ifCond parent.hasLookup 'true'}}hasLookup{{/ifCond}}' id='{{parent.name}}{{inc @index}}' type='text' name='{{parent.name}}[]' value='{{'@id'}}' />\
{{/if}}{{/this}}";
Handlebars.registerPartial("LDPFieldTest", fieldPartialTest);
// The partial definition for displaying a form field handling array values, with possibility to add a field dynamically
var fieldDisplayPartial = "{{#if name}}<label for='{{name}}'>{{label}}</label>\
<button class='button add-field-button' id='add-field-{{name}}' onclick='return wpldp.addField(event);'>+</button>\
{{/if}}\
<div id='field-{{name}}' data-range={{range}} {{#ifCond type 'resource'}}data-ldp-lookup='true'{{/ifCond}} {{#ifCond hasLookup 'true'}}data-has-lookup='true'{{/ifCond}}>\
{{#if fields}}\
{{#each fields }}\
{{>LDPFieldTest this parent=../this}}\
{{/each}}\
{{else}} \
{{log type}}\
<input data-range={{range}} class='{{type}} {{#ifCond type 'resource'}}ldpLookup{{/ifCond}} {{#ifCond hasLookup 'true'}}hasLookup{{/ifCond}}' id='{{name}}' type='text' placeholder='{{title}}' name='{{name}}' />\
{{/if}}\
</div>";
Handlebars.registerPartial("ArrayFieldDisplay", fieldDisplayPartial);
this.addField = function addField( event ) {
event.stopPropagation();
event.preventDefault();
var target_id = event.target.id.substring('add-'.length);
var target_div = document.getElementById(target_id);
var child_count = target_div.childElementCount + 1;
var input = document.createElement('input');
input.id = target_id.substring('field-'.length) + child_count;
input.name = target_id.substring('field-'.length) + "[]";
input.type = "text";
if ( target_div.dataset && target_div.dataset.hasLookup == 'true' ) {
input.className += ' hasLookup';
} else if ( target_div.dataset && target_div.dataset.ldpLookup == 'true' ) {
input.className += ' ldpLookup';
}
var remove_button = document.createElement('button');
remove_button.id = "remove-field-" + target_id.substring('field-'.length) + child_count;
remove_button.className = "button remove-field-button";
remove_button.innerHTML = "-";
target_div.appendChild(remove_button);
target_div.appendChild(input);
this.bindEvents();
return false;
}
// The partial definition for displaying a form field
var fieldPartial = "{{#ifCond multiple 'true'}}{{> ArrayFieldDisplay }}\
{{else}}\
{{#if name}}<label for='{{name}}'>{{label}}</label>{{/if}} \
{{#ifCond type 'textarea'}} \
{{#if name}}<textarea id='{{name}}' name='{{name}}' rows='10'>{{#if fieldValue}}{{fieldValue}}{{/if}}</textarea><br/>{{/if}}\
{{else}}\
{{#ifCond type 'checkbox'}} \
{{#if name}}<input type='checkbox' name='{{name}}' id='{{name}}'/>{{/if}}\
{{else}}\
{{#ifCond type 'select'}} \
{{#if name}}<select id='{{name}}' name='{{name}}'>{{/if}}\
{{#each options}}{{> LDPOptions fieldValue='{{fieldValue}}' }}{{/each}} \
{{else}} \
{{#ifCond type 'date'}} \
{{#if name}}<input id='{{name}}' type='date' placeholder='YYYY-MM-DD' name='{{name}}' value='{{fieldValue}}' />{{/if}}\
{{else}} \
{{#ifCond type 'url'}} \
{{#if name}}<input id='{{name}}' type='url' placeholder='http://www.example.com' name='{{name}}' value='{{fieldValue}}' />{{/if}}\
{{else}} \
{{#ifCond type 'email'}} \
{{#if name}}<input id='{{name}}' type='email' placeholder='contact@example.com' name='{{name}}' value='{{fieldValue}}' />{{/if}}\
{{else}} \
{{#ifCond type 'resource'}} \
<input id='{{name}}' type='url' placeholder='http://www.example.com/ldp/resource/my-resource/' name='{{name}}' value='{{fieldValue}}' />\
{{else}} \
{{#if name}}<input id='{{name}}' type='text' placeholder='{{title}}' name='{{name}}' value='{{fieldValue}}' />{{/if}}\
{{/ifCond}}\
{{/ifCond}}\
{{/ifCond}}\
{{/ifCond}}\
{{/ifCond}}\
{{/ifCond}}\
{{/ifCond}}\
{{/ifCond}}";
Handlebars.registerPartial("LDPField", fieldPartial);
// The partial definition for displaying an option field inside a select
var optionPartial = "{{#ifCond value fieldValue}} \
<option value='{{value}}' selected>{{name}}</option>\
{{else}}\
<option value='{{value}}'>{{name}}</option>\
{{/ifCond}}";
Handlebars.registerPartial("LDPOptions", optionPartial);
var formTemplate = Handlebars.compile(
"<form data-container='{{container}}' onSubmit='return store.handleSubmit(event);'> \
{{#each fields}}{{> LDPField }}{{/each}} \
<input type='submit' value='Post' /> \
</form>");
this.registerPartialFromFile = function registerPartialFromFile( partialName, partialTemplatePath ) {
jQuery.ajax({
url: partialTemplatePath,
success: function (data) {
Handlebars.registerPartial(partialName, data);
}
});
}
Handlebars.registerHelper("ldpeach", function(array, tagName, options) {
var id = "ldp-"+Math.round(new Date().getTime() + (Math.random() * 10000));
var objects = Array.isArray(array) ? array : [array];
objects.forEach(function(object) {
this.store.get(object, this.store.context).then(function(object) {
jQuery('#'+id).append(options.fn(object));
}.bind(this));
}.bind(this));
return '<'+ tagName +' id="'+id+'"></' + tagName + '>';
}.bind(this));
Handlebars.registerHelper('ldplist', function(obj) {
return obj['ldp:contains'];
});
Handlebars.registerHelper('ifCond', function(value, tester, options) {
if (value == tester) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
Handlebars.registerHelper('if', function(conditional, options) {
if(conditional) {
return options.fn(this);
}
});
Handlebars.registerHelper('form', function(context, options) {
return formTemplate(this.store.models[context]);
}.bind(this));
};