|
(function($) { |
|
var IMAGE_MIRROR_CLASSES = ['fr-dii', 'fr-fil', 'fr-fir', 'fr-dib']; |
|
var IMAGE_MIRROR_STYLES = ['width']; |
|
|
|
$.FroalaEditor.DEFAULTS = $.extend($.FroalaEditor.DEFAULTS, { |
|
imageCaptionFigureAll: false |
|
}); |
|
|
|
$.FroalaEditor.PLUGINS.imageCaption = function(editor) |
|
{ |
|
var content; |
|
|
|
function init() |
|
{ |
|
content = editor.$el[0]; |
|
editor.events.on('contentChanged', handleContentChanged); |
|
updateImages(); |
|
} |
|
|
|
function handleContentChanged() |
|
{ |
|
updateImages(); |
|
} |
|
|
|
function updateImages() |
|
{ |
|
var isChanged = false; |
|
var defaultTag = editor.html.defaultTag(); |
|
|
|
Array.prototype.forEach.call(content.querySelectorAll('img'), function(img) { |
|
var figure, imageRoot; |
|
|
|
if (img.parentNode.tagName.toLowerCase() === 'a') { |
|
imageRoot = img.parentNode; |
|
} else { |
|
imageRoot = img; |
|
} |
|
|
|
if (editor.opts.imageCaptionFigureAll || img.alt.trim().length) { |
|
if (imageRoot.parentNode.tagName.toLowerCase() !== 'figure') { |
|
figure = document.createElement('figure'); |
|
imageRoot.parentNode.insertBefore(figure, imageRoot); |
|
figure.appendChild(imageRoot); |
|
isChanged = true; |
|
} |
|
} else { |
|
if (imageRoot.parentNode.tagName.toLowerCase() === 'figure') { |
|
figure = imageRoot.parentNode; |
|
figure.parentNode.insertBefore(imageRoot, figure); |
|
figure.parentNode.removeChild(figure); |
|
isChanged = true; |
|
} |
|
} |
|
}); |
|
|
|
Array.prototype.forEach.call(content.querySelectorAll('figure'), function(figure) { |
|
var img, figcaption, i, child, parent, figureClass; |
|
|
|
for (i = 0; i < figure.childNodes.length; ++i) { |
|
child = figure.childNodes[i]; |
|
|
|
if ( |
|
!img && |
|
child instanceof HTMLElement && |
|
child.tagName.toLowerCase() === 'img' |
|
) { |
|
img = child; |
|
} else if ( |
|
!img && |
|
child instanceof HTMLElement && |
|
child.tagName.toLowerCase() === 'a' |
|
) { |
|
for (i = 0; i < child.children.length; ++i) { |
|
if (child.children[i].tagName.toLowerCase() === 'img') { |
|
img = child.children[i]; |
|
break; |
|
} |
|
} |
|
} else if ( |
|
!figcaption && |
|
child instanceof HTMLElement && |
|
child.tagName.toLowerCase() === 'figcaption' |
|
) { |
|
figcaption = child; |
|
} else { |
|
figure.removeChild(child); |
|
isChanged = true; |
|
i -= 1; |
|
} |
|
} |
|
|
|
if (!img) { |
|
child = figure; |
|
|
|
do { |
|
parent = child.parentNode; |
|
parent.removeChild(child); |
|
child = parent; |
|
} while (child !== content && child.children.length === 0 && child.textContent.trim().length === 0); |
|
|
|
isChanged = true; |
|
return; |
|
} |
|
|
|
if (img.alt.trim().length) { |
|
if (!figcaption) { |
|
figcaption = document.createElement('figcaption'); |
|
figure.appendChild(figcaption); |
|
isChanged = true; |
|
} |
|
|
|
if (figcaption.textContent !== img.alt) { |
|
figcaption.textContent = img.alt; |
|
isChanged = true; |
|
} |
|
} else { |
|
if (figcaption) { |
|
figure.removeChild(figcaption); |
|
isChanged = true; |
|
} |
|
} |
|
|
|
IMAGE_MIRROR_STYLES.forEach(function(styleName) { |
|
if (figure.style[styleName] !== img.style[styleName]) { |
|
figure.style[styleName] = img.style[styleName]; |
|
isChanged = true; |
|
} |
|
}); |
|
|
|
figureClass = Array.prototype.filter.call(img.classList, function(className) { |
|
return IMAGE_MIRROR_CLASSES.indexOf(className) !== -1; |
|
}).join(' '); |
|
|
|
if (figure.className !== figureClass) { |
|
figure.className = figureClass; |
|
isChanged = true; |
|
} |
|
}); |
|
|
|
if (isChanged) { |
|
// console.log('changed'); |
|
// editor.html.set(content.innerHTML); |
|
} |
|
} |
|
|
|
return { |
|
_init: init |
|
}; |
|
}; |
|
})(jQuery); |