114 lines
3.4 KiB
JavaScript
114 lines
3.4 KiB
JavaScript
/*
|
|
* Template Diff plugin
|
|
*
|
|
* Data attributes:
|
|
* - data-plugin="template-diff" - enables the plugin on an element
|
|
*
|
|
* JavaScript API:
|
|
* $('pre').templateDiff({ option: 'value' })
|
|
*
|
|
* Dependences:
|
|
* - jsdiff (diff.js)
|
|
*/
|
|
|
|
+function ($) { "use strict";
|
|
|
|
// TEMPALTE DIFF CLASS DEFINITION
|
|
// ============================
|
|
|
|
var TemplateDiff = function(element, options) {
|
|
this.options = options
|
|
this.$el = $(element)
|
|
|
|
// Init
|
|
this.init()
|
|
}
|
|
|
|
TemplateDiff.DEFAULTS = {
|
|
oldFieldName: null,
|
|
newFieldName: null,
|
|
contentTag: '',
|
|
diffType: 'lines' // chars, words, lines
|
|
}
|
|
|
|
TemplateDiff.prototype.init = function() {
|
|
var
|
|
oldValue = $('[data-field-name="'+this.options.oldFieldName+'"] .form-control '+this.options.contentTag).html(),
|
|
newValue = $('[data-field-name="'+this.options.newFieldName+'"] .form-control '+this.options.contentTag).html()
|
|
|
|
oldValue = $('<div />').html(oldValue).text()
|
|
newValue = $('<div />').html(newValue).text()
|
|
|
|
this.diffStrings(oldValue, newValue)
|
|
}
|
|
|
|
TemplateDiff.prototype.diffStrings = function(oldValue, newValue) {
|
|
var result = this.$el.get(0)
|
|
var diffType = 'diff' + this.options.diffType[0].toUpperCase() + this.options.diffType.slice(1)
|
|
var diff = JsDiff[diffType](oldValue, newValue)
|
|
var fragment = document.createDocumentFragment();
|
|
for (var i=0; i < diff.length; i++) {
|
|
|
|
if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
|
|
var swap = diff[i];
|
|
diff[i] = diff[i + 1];
|
|
diff[i + 1] = swap;
|
|
}
|
|
|
|
var node;
|
|
if (diff[i].removed) {
|
|
node = document.createElement('del');
|
|
node.appendChild(document.createTextNode(diff[i].value));
|
|
}
|
|
else if (diff[i].added) {
|
|
node = document.createElement('ins');
|
|
node.appendChild(document.createTextNode(diff[i].value));
|
|
}
|
|
else {
|
|
node = document.createTextNode(diff[i].value);
|
|
}
|
|
fragment.appendChild(node);
|
|
}
|
|
|
|
result.textContent = '';
|
|
result.appendChild(fragment);
|
|
}
|
|
|
|
// TEMPALTE DIFF PLUGIN DEFINITION
|
|
// ============================
|
|
|
|
var old = $.fn.templateDiff
|
|
|
|
$.fn.templateDiff = function (option) {
|
|
var args = Array.prototype.slice.call(arguments, 1), result
|
|
this.each(function () {
|
|
var $this = $(this)
|
|
var data = $this.data('oc.example')
|
|
var options = $.extend({}, TemplateDiff.DEFAULTS, $this.data(), typeof option == 'object' && option)
|
|
if (!data) $this.data('oc.example', (data = new TemplateDiff(this, options)))
|
|
if (typeof option == 'string') result = data[option].apply(data, args)
|
|
if (typeof result != 'undefined') return false
|
|
})
|
|
|
|
return result ? result : this
|
|
}
|
|
|
|
$.fn.templateDiff.Constructor = TemplateDiff
|
|
|
|
// TEMPALTE DIFF NO CONFLICT
|
|
// =================
|
|
|
|
$.fn.templateDiff.noConflict = function () {
|
|
$.fn.templateDiff = old
|
|
return this
|
|
}
|
|
|
|
// TEMPALTE DIFF DATA-API
|
|
// ===============
|
|
|
|
$(document).render(function () {
|
|
$('[data-plugin="template-diff"]').templateDiff()
|
|
});
|
|
|
|
}(window.jQuery);
|