[client-side] Turning any url into a relative url #1
Description
In both Redactor and (when I get this done) ContentBlocks, there is code that makes sure that the stored image urls for images are relative to the site url, rather than absolute with the base url or a slash prepended. This is for portability, especially when working in subdirectories (/dev/) where you don't want the base url saved with the image.
This piece of logic could be included in Alpacka as a client-side utility.
Here's the relevant code (jQuery) from the Redactor plugin/module:
updateImageSrc: function(images) {
var baseUrl = MODx.config.base_url,
siteUrl = MODx.config.site_url,
mode = this.opts.baseurlsMode || 'relative';
if (mode === 'off' || this.utils.isEmpty(mode)) {
return;
}
images.each(function(i, image) {
var $image = $(image),
imageSrc = $image.attr('src') || '',
hasBaseUrl = (imageSrc.substr(0, baseUrl.length) === baseUrl);
if ((imageSrc.substr(0, 4) === 'http') || (imageSrc.substr(0, 2) === '//')) {
if (imageSrc.substr(0, siteUrl.length) === siteUrl) {
imageSrc = imageSrc.substr(siteUrl.length);
hasBaseUrl = false;
}
else {
return;
}
}
var displaySrc = imageSrc,
cleanedSrc = imageSrc;
switch (mode) {
case 'full':
if (!hasBaseUrl) {
displaySrc = cleanedSrc = siteUrl + imageSrc;
} else {
cleanedSrc = siteUrl + imageSrc.substr(baseUrl.length);
}
break;
case 'absolute':
if (!hasBaseUrl) {
displaySrc = baseUrl + imageSrc;
cleanedSrc = baseUrl + imageSrc;
}
break;
case 'relative':
default:
if (!hasBaseUrl) {
displaySrc = baseUrl + imageSrc;
} else {
cleanedSrc = imageSrc.substr(baseUrl.length);
}
break;
}
if (displaySrc !== imageSrc) {
$image.attr('src', displaySrc);
}
if (cleanedSrc !== displaySrc) {
$image.attr('clean-src', cleanedSrc);
}
});
}Here's how it's added to ContentBlocks:
normaliseUrls: function(url) {
var baseUrl = MODx.config.base_url,
siteUrl = MODx.config.site_url,
mode = 'relative'; // @todo make configurable
var imageSrc = url,
hasBaseUrl = (imageSrc.substr(0, baseUrl.length) === baseUrl);
if ((imageSrc.substr(0, 4) === 'http') || (imageSrc.substr(0, 2) === '//')) {
if (imageSrc.substr(0, siteUrl.length) === siteUrl) {
imageSrc = imageSrc.substr(siteUrl.length);
hasBaseUrl = false;
}
else {
return;
}
}
var displaySrc = imageSrc,
cleanedSrc = imageSrc;
switch (mode) {
case 'full':
if (!hasBaseUrl) {
displaySrc = cleanedSrc = siteUrl + imageSrc;
} else {
cleanedSrc = siteUrl + imageSrc.substr(baseUrl.length);
}
break;
case 'absolute':
if (!hasBaseUrl) {
displaySrc = baseUrl + imageSrc;
cleanedSrc = baseUrl + imageSrc;
}
break;
case 'relative':
default:
if (!hasBaseUrl) {
displaySrc = baseUrl + imageSrc;
} else {
cleanedSrc = imageSrc.substr(baseUrl.length);
}
break;
}
return {
'displaySrc': displaySrc,
'cleanedSrc': cleanedSrc
};
}