Actualización
This commit is contained in:
xesmyd committed
1 parent
4aff98e77b
commit
1cdd00920f
9151 files changed
+1800913
No files matched your search
@@ -0,0 +1,25 @@
|
||||
.map-button {
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: 5px center !important;
|
||||
padding-left: 14px !important;
|
||||
}
|
||||
|
||||
.map-button-pointer {
|
||||
background-image: url("../images/selector.png") !important;
|
||||
}
|
||||
|
||||
.map-button-remove {
|
||||
background-image: url("../images/remove.png") !important;
|
||||
}
|
||||
|
||||
.map-button-active {
|
||||
outline: 1px solid #666 !important;
|
||||
background-color: #ddd !important;
|
||||
}
|
||||
|
||||
.map-canvas-drawer {
|
||||
height: 310px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
width: 468px;
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,487 @@
|
||||
(function () {
|
||||
var mapping = (function () {
|
||||
var currentAreaId = null;
|
||||
|
||||
return {
|
||||
imgMap: null,
|
||||
imageSelected: null,
|
||||
mapSelected: null,
|
||||
previousImageMode: null,
|
||||
setMode: function (mode) {
|
||||
if (mode === 'pointer') {
|
||||
this.imgMap.is_drawing = 0;
|
||||
this.imgMap.nextShape = '';
|
||||
} else {
|
||||
this.imgMap.nextShape = mode;
|
||||
}
|
||||
|
||||
this.activateMode(mode);
|
||||
},
|
||||
activateMode: function (mode) {
|
||||
if (mapping.previousImageMode) {
|
||||
mapping.previousImageMode.removeClass('map-button-active');
|
||||
}
|
||||
|
||||
if (mode === 'pointer') {
|
||||
mapping.previousImageMode = mapping.dialog.getContentElement('info', 'btnPointer').getElement();
|
||||
mapping.previousImageMode.addClass('map-button-active');
|
||||
}
|
||||
},
|
||||
setCurrentAreaAttributes: function () {
|
||||
if (currentAreaId !== null) {
|
||||
mapping.imgMap.areas[currentAreaId].ahref = mapping.dialog.getValueOf('info', 'href');
|
||||
mapping.imgMap.areas[currentAreaId].aalt = mapping.dialog.getValueOf('info', 'alt');
|
||||
mapping.imgMap.areas[currentAreaId].atitle = mapping.dialog.getValueOf('info', 'title');
|
||||
}
|
||||
},
|
||||
onSelectedArea: function (obj) {
|
||||
mapping.setPropertiesVisible(true);
|
||||
|
||||
mapping.setCurrentAreaAttributes();
|
||||
|
||||
currentAreaId = obj.aid;
|
||||
|
||||
mapping.dialog.setValueOf('info', 'href', obj.ahref);
|
||||
mapping.dialog.setValueOf('info', 'target', obj.atarget || 'notSet');
|
||||
mapping.dialog.setValueOf('info', 'alt', obj.aalt);
|
||||
mapping.dialog.setValueOf('info', 'title', obj.atitle);
|
||||
},
|
||||
setAreaProperty: function () {
|
||||
var id = currentAreaId;
|
||||
|
||||
if (id !== null) {
|
||||
mapping.imgMap.areas[id][ "a" + this.id ] = this.getValue();
|
||||
mapping.imgMap._recalculate(id);
|
||||
}
|
||||
},
|
||||
setPropertiesVisible: function (shouldShow) {
|
||||
var fieldset = mapping.dialog.getContentElement('info', 'areaProperties');
|
||||
var fieldsetElement = fieldset.getElement();
|
||||
|
||||
if (shouldShow) {
|
||||
fieldsetElement.setStyle('visibility', '');
|
||||
} else {
|
||||
fieldsetElement.setStyle('visibility', 'hidden');
|
||||
}
|
||||
},
|
||||
generateMapHTML: function () {
|
||||
var html = '';
|
||||
|
||||
for (var i = 0; i < this.imgMap.areas.length; i++) {
|
||||
html += (function (area) {
|
||||
if (!area || area.shape === '') {
|
||||
return '';
|
||||
}
|
||||
|
||||
var html = '<area shape="' + area.shape + '"' +
|
||||
' coords="' + area.lastInput + '"';
|
||||
|
||||
if (area.aalt) {
|
||||
html += ' alt="' + area.aalt + '"';
|
||||
}
|
||||
|
||||
if (area.atitle) {
|
||||
html += ' title="' + area.atitle + '"';
|
||||
}
|
||||
|
||||
if (area.ahref) {
|
||||
html += ' href="' + area.ahref + '" data-cke-saved-href="' + area.ahref + '"';
|
||||
}
|
||||
|
||||
if (area.atarget && area.atarget !== 'notSet') {
|
||||
html += ' target="' + area.atarget + '"';
|
||||
}
|
||||
|
||||
html += '/>';
|
||||
|
||||
return html;
|
||||
})(this.imgMap.areas[i]);
|
||||
}
|
||||
|
||||
return html;
|
||||
},
|
||||
setCurrentAreaId: function (id) {
|
||||
currentAreaId = id;
|
||||
},
|
||||
dialog: null
|
||||
};
|
||||
})();
|
||||
|
||||
CKEDITOR.dialog.add('Mapping', function (editor) {
|
||||
var lang = editor.lang.mapping;
|
||||
var canvasDrawer = 'canvasContainer' + CKEDITOR.tools.getNextNumber();
|
||||
var statusContainer = 'statusContainer' + CKEDITOR.tools.getNextNumber();
|
||||
var dialogReady = false;
|
||||
|
||||
(function () {
|
||||
var plugin = editor.plugins.mapping;
|
||||
|
||||
if (CKEDITOR.env.ie && typeof window.CanvasRenderingContext2D === 'undefined') {
|
||||
CKEDITOR.scriptLoader.load(plugin.path + "lib/excanvas.js", show);
|
||||
}
|
||||
|
||||
if (typeof imgmap === 'undefined') {
|
||||
CKEDITOR.scriptLoader.load(plugin.path + "dialogs/imgmap.js", show);
|
||||
}
|
||||
|
||||
var cssNode = CKEDITOR.document.getHead().append('link');
|
||||
cssNode.setAttribute("rel", "stylesheet");
|
||||
cssNode.setAttribute("type", "text/css");
|
||||
cssNode.setAttribute("href", plugin.path + "css/mapping.css");
|
||||
})();
|
||||
|
||||
var show = function () {
|
||||
if (!dialogReady) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof imgmap === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (CKEDITOR.env.ie && typeof window.CanvasRenderingContext2D === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
mapping.setCurrentAreaId(null);
|
||||
mapping.mapSelected = null;
|
||||
|
||||
var elementSelected = editor.getSelection().getSelectedElement();
|
||||
|
||||
if (!elementSelected || !elementSelected.is("img")) {
|
||||
alert(lang.youMustSelectAnImageBeforeUsingTheMapEditor);
|
||||
|
||||
mapping.dialog.hide();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
mapping.imageSelected = elementSelected;
|
||||
|
||||
var src = null;
|
||||
|
||||
if (mapping.imageSelected.data) {
|
||||
src = mapping.imageSelected.data("cke-saved-src");
|
||||
} else {
|
||||
src = mapping.imageSelected.getAttribute("_cke_saved_src");
|
||||
}
|
||||
|
||||
mapping.imageSelected = mapping.imageSelected.$;
|
||||
|
||||
mapping.imgMap = new imgmap({
|
||||
mode: "editor2",
|
||||
label: '%a',
|
||||
custom_callbacks: {
|
||||
onSelectArea: mapping.onSelectedArea,
|
||||
onRemoveArea: function () {
|
||||
mapping.setCurrentAreaId(null);
|
||||
mapping.setPropertiesVisible(false);
|
||||
},
|
||||
onStatusMessage: function (str) {
|
||||
document.getElementById(statusContainer).innerHTML = str;
|
||||
},
|
||||
onLoadImage: function (pic) {
|
||||
var ckPic = new CKEDITOR.dom.element(pic);
|
||||
ckPic.on("dragstart", function (e) {
|
||||
e.data.preventDefault();
|
||||
});
|
||||
}
|
||||
},
|
||||
pic_container: document.getElementById(canvasDrawer),
|
||||
bounding_box: false,
|
||||
lang: ''
|
||||
});
|
||||
|
||||
mapping.imgMap.loadStrings(imgmapStrings);
|
||||
mapping.imgMap.loadImage(src, parseInt(mapping.imageSelected.style.width || 0, 10), parseInt(mapping.imageSelected.style.height || 0, 10));
|
||||
|
||||
var mapname = mapping.imageSelected.getAttribute('usemap', 2) || mapping.imageSelected.usemap;
|
||||
|
||||
if (mapname) {
|
||||
mapname = mapname.substr(1);
|
||||
var maps = editor.document.$.getElementsByTagName('MAP');
|
||||
|
||||
for (var i = 0; i < maps.length; i++) {
|
||||
if (maps[i].name === mapname || maps[i].id === mapname) {
|
||||
mapping.mapSelected = maps[i];
|
||||
mapping.imgMap.setMapHTML(mapping.mapSelected);
|
||||
|
||||
mapping.dialog.setValueOf('info', 'MapName', mapname);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mapping.imgMap.config.custom_callbacks.onAddArea = function (id) {
|
||||
mapping.setPropertiesVisible(true);
|
||||
mapping.setCurrentAreaAttributes();
|
||||
mapping.setCurrentAreaId(id);
|
||||
|
||||
mapping.dialog.getContentElement('info', 'href').setValue('', true);
|
||||
mapping.dialog.getContentElement('info', 'target').setValue('notSet', true);
|
||||
mapping.dialog.getContentElement('info', 'alt').setValue('', true);
|
||||
mapping.dialog.getContentElement('info', 'title').setValue('', true);
|
||||
};
|
||||
|
||||
if (mapping.mapSelected) {
|
||||
mapping.imgMap.selectedId = 0;
|
||||
mapping.onSelectedArea(mapping.imgMap.areas[0]);
|
||||
|
||||
mapping.setMode('pointer');
|
||||
} else {
|
||||
mapping.activateMode('rect');
|
||||
}
|
||||
};
|
||||
|
||||
var removeMap = function () {
|
||||
editor.fire('saveSnapshot');
|
||||
|
||||
if (mapping.imageSelected && mapping.imageSelected.nodeName === "IMG") {
|
||||
mapping.imageSelected.removeAttribute('usemap', 0);
|
||||
}
|
||||
|
||||
if (mapping.mapSelected) {
|
||||
mapping.mapSelected.parentNode.removeChild(mapping.mapSelected);
|
||||
}
|
||||
|
||||
mapping.dialog.hide();
|
||||
};
|
||||
|
||||
return {
|
||||
title: lang.mappingProperties,
|
||||
minWidth: 600,
|
||||
minHeight: 400,
|
||||
buttons: [
|
||||
{
|
||||
type: 'button',
|
||||
label: lang.removeMap,
|
||||
onClick: removeMap
|
||||
},
|
||||
CKEDITOR.dialog.okButton,
|
||||
CKEDITOR.dialog.cancelButton
|
||||
],
|
||||
contents: [
|
||||
{
|
||||
id: 'info',
|
||||
label: editor.lang.common.generalTab,
|
||||
title: editor.lang.common.generalTab,
|
||||
elements: [
|
||||
{
|
||||
id: 'MapName',
|
||||
type: 'text',
|
||||
label: lang.mapName,
|
||||
onChange: function () {
|
||||
mapping.imgMap.mapname = this.getValue();
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'hbox',
|
||||
label: 'panels',
|
||||
widths: ['30%', '40%'],
|
||||
children: [
|
||||
{
|
||||
type: 'vbox',
|
||||
children: [
|
||||
{
|
||||
type: 'hbox',
|
||||
children: [
|
||||
{
|
||||
type: 'button',
|
||||
id: 'btnPointer',
|
||||
label: lang.selector,
|
||||
className: 'map-button map-button-pointer',
|
||||
onClick: function () {
|
||||
mapping.setMode('pointer');
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'btnRemove',
|
||||
label: lang.removeArea,
|
||||
className: 'map-button map-button-remove',
|
||||
onClick: function () {
|
||||
mapping.imgMap.removeArea(mapping.imgMap.currentid);
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'hbox',
|
||||
children: [
|
||||
{
|
||||
type: 'select',
|
||||
id: 'slcShape',
|
||||
label: lang.shape,
|
||||
items: [
|
||||
[lang.rectangle, 'rect'],
|
||||
[lang.circle, 'circle'],
|
||||
[lang.polygon, 'poly']
|
||||
],
|
||||
onChange: function () {
|
||||
mapping.setMode(this.getValue());
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
id: 'slcZoom',
|
||||
label: lang.zoom,
|
||||
onChange: function () {
|
||||
var scale = this.getValue();
|
||||
var currentImage = document.getElementById(canvasDrawer).getElementsByTagName('img')[0];
|
||||
|
||||
if (!currentImage) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentImage.oldwidth) {
|
||||
currentImage.oldwidth = currentImage.width;
|
||||
}
|
||||
|
||||
if (!currentImage.oldheight) {
|
||||
currentImage.oldheight = currentImage.height;
|
||||
}
|
||||
|
||||
currentImage.style.width = (currentImage.oldwidth * scale) + "px";
|
||||
currentImage.style.height = (currentImage.oldheight * scale) + "px";
|
||||
currentImage.style.minWidth = (currentImage.oldwidth * scale) + "px";
|
||||
currentImage.style.minHeight = (currentImage.oldheight * scale) + "px";
|
||||
|
||||
mapping.imgMap.scaleAllAreas(scale);
|
||||
},
|
||||
default: '1',
|
||||
items: [
|
||||
['25%', '0.25'],
|
||||
['50%', '0.5'],
|
||||
['100%', '1'],
|
||||
['200%', '2'],
|
||||
['300%', '3']
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'fieldset',
|
||||
id: 'areaProperties',
|
||||
label: lang.area,
|
||||
style: 'visibility:hidden',
|
||||
children: [
|
||||
{
|
||||
type: 'hbox',
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
id: 'href',
|
||||
label: lang.link,
|
||||
onChange: mapping.setAreaProperty
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
id: 'browse',
|
||||
label: editor.lang.common.browseServer,
|
||||
style: 'margin-top:10px;',
|
||||
hidden: 'true',
|
||||
filebrowser: 'info:href'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
id: 'target',
|
||||
label: lang.target,
|
||||
items: [
|
||||
[lang.notSet, 'notSet'],
|
||||
[lang.targetSelf, '_self'],
|
||||
[lang.targetBlank, '_blank'],
|
||||
[lang.targetTop, '_top']
|
||||
],
|
||||
onChange: mapping.setAreaProperty
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
id: 'title',
|
||||
label: lang.title,
|
||||
onChange: mapping.setAreaProperty
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
id: 'alt',
|
||||
label: lang.alternativeText,
|
||||
onChange: mapping.setAreaProperty
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'html',
|
||||
html: '<p id="' + statusContainer + '"> </p>'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'html',
|
||||
html: '<div id="' + canvasDrawer + '" class="map-canvas-drawer"></div>'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
onLoad: function () {
|
||||
mapping.dialog = this;
|
||||
},
|
||||
onShow: function () {
|
||||
dialogReady = true;
|
||||
show();
|
||||
},
|
||||
onHide: function () {
|
||||
if (mapping.previousImageMode) {
|
||||
mapping.previousImageMode.removeClass('map-button-active');
|
||||
mapping.previousImageMode = null;
|
||||
}
|
||||
document.getElementById(canvasDrawer).innerHTML = '';
|
||||
},
|
||||
onOk: function () {
|
||||
mapping.setCurrentAreaAttributes();
|
||||
|
||||
if (mapping.imageSelected && mapping.imageSelected.nodeName === "IMG") {
|
||||
var currentGeneratedMap = mapping.generateMapHTML();
|
||||
|
||||
if (!currentGeneratedMap) {
|
||||
removeMap();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
mapping.imgMap.mapid = mapping.imgMap.mapname = mapping.dialog.getValueOf('info', 'MapName');
|
||||
|
||||
var result = editor.fire('mapping.validate', mapping.imgMap);
|
||||
|
||||
if (typeof result !== 'object') {
|
||||
return false;
|
||||
}
|
||||
|
||||
editor.fire('saveSnapshot');
|
||||
|
||||
if (!mapping.mapSelected) {
|
||||
mapping.mapSelected = editor.document.$.createElement('map');
|
||||
mapping.imageSelected.parentNode.appendChild(mapping.mapSelected);
|
||||
}
|
||||
|
||||
mapping.mapSelected.innerHTML = currentGeneratedMap;
|
||||
|
||||
if (mapping.mapSelected.name) {
|
||||
mapping.mapSelected.removeAttribute('name');
|
||||
}
|
||||
|
||||
mapping.mapSelected.name = mapping.imgMap.getMapName();
|
||||
mapping.mapSelected.id = mapping.imgMap.getMapId();
|
||||
|
||||
mapping.imageSelected.setAttribute('usemap', "#" + mapping.mapSelected.name, 0);
|
||||
|
||||
if (CKEDITOR.plugins.mapping && CKEDITOR.plugins.mapping.generate) {
|
||||
CKEDITOR.plugins.mapping.generate(mapping.imageSelected, mapping.mapSelected);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 662 B |
Binary file not shown.
|
After Width: | Height: | Size: 792 B |
Binary file not shown.
|
After Width: | Height: | Size: 659 B |
@@ -0,0 +1,32 @@
|
||||
CKEDITOR.plugins.setLang('mapping', 'es', {
|
||||
toolbar: 'Insertar/Editar zonas interactivas',
|
||||
mappingProperties: 'Propiedades de Mapping',
|
||||
removeMap: 'Quitar el mapa',
|
||||
youMustSelectAnImageBeforeUsingTheMapEditor: 'Debes elegir una imagen antes de usar el editor de mapas',
|
||||
mapName: 'Nombre del mapa',
|
||||
selector: 'Selector',
|
||||
removeArea: 'Eliminar área',
|
||||
shape: 'Forma',
|
||||
rectangle: 'Rectángulo',
|
||||
circle: 'Círculo',
|
||||
polygon: 'Polígono',
|
||||
zoom: 'Zoom',
|
||||
area: 'Área',
|
||||
link: 'Enlace (URL)',
|
||||
target: 'Destino del enlace',
|
||||
notSet: 'No establecido',
|
||||
targetSelf: 'Esta ventana',
|
||||
targetBlank: 'Ventana nueva',
|
||||
targetTop: 'Ventana principal',
|
||||
title: 'Título',
|
||||
alternativeText: 'Texto alternativo'
|
||||
});
|
||||
|
||||
window.imgmapStrings = {
|
||||
READY: '',
|
||||
RECTANGLE_DRAW: 'Pulsa MAYS para cambiar a cuadrado.',
|
||||
SQUARE_DRAW: '',
|
||||
SQUARE2_DRAW: 'Libera MAYS para cambiar a rectángulo.',
|
||||
POLYGON_DRAW: 'Usa MAYS + click para crear el último punto.',
|
||||
ERR_INVALID_COORDS: 'Coordenadas incorrectas.'
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
// Copyright 2006 Google Inc.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
// patched with http://code.google.com/p/explorercanvas/issues/detail?id=79 compressed with AjaxMin
|
||||
document.createElement("canvas").getContext||function(){function ut(){return this.context_||(this.context_=new a(this))}function rt(n,t){var r=d.call(arguments,2);return function(){return n.apply(t,r.concat(d.call(arguments)))}}function it(n){var t=n.srcElement;switch(n.propertyName){case"width":t.style.width=t.attributes.width.nodeValue+"px",t.getContext().clearRect();break;case"height":t.style.height=t.attributes.height.nodeValue+"px",t.getContext().clearRect()}}function nt(n){var t=n.srcElement;t.firstChild&&(t.firstChild.style.width=t.clientWidth+"px",t.firstChild.style.height=t.clientHeight+"px")}function l(){return[[1,0,0],[0,1,0],[0,0,1]]}function e(n,t){for(var e=l(),i,f,r,u=0;u<3;u++)for(i=0;i<3;i++){for(f=0,r=0;r<3;r++)f+=n[u][r]*t[r][i];e[u][i]=f}return e}function p(n,t){t.fillStyle=n.fillStyle,t.lineCap=n.lineCap,t.lineJoin=n.lineJoin,t.lineWidth=n.lineWidth,t.miterLimit=n.miterLimit,t.shadowBlur=n.shadowBlur,t.shadowColor=n.shadowColor,t.shadowOffsetX=n.shadowOffsetX,t.shadowOffsetY=n.shadowOffsetY,t.strokeStyle=n.strokeStyle,t.globalAlpha=n.globalAlpha,t.arcScaleX_=n.arcScaleX_,t.arcScaleY_=n.arcScaleY_,t.lineScale_=n.lineScale_}function g(n){var i,f=1,t;if(n=String(n),n.substring(0,3)=="rgb"){var u=n.indexOf("(",3),e=n.indexOf(")",u+1),r=n.substring(u+1,e).split(",");for(i="#",t=0;t<3;t++)i+=c[Number(r[t])];r.length==4&&n.substr(3,1)=="a"&&(f=r[3])}else i=n;return{color:i,alpha:f}}function ft(n){switch(n){case"butt":return"flat";case"round":return"round";case"square":default:return"square"}}function a(n){this.m_=l(),this.mStack_=[],this.aStack_=[],this.currentPath_=[],this.strokeStyle="#000",this.fillStyle="#000",this.lineWidth=1,this.lineJoin="miter",this.lineCap="butt",this.miterLimit=i*1,this.globalAlpha=1,this.canvas=n;var t=n.ownerDocument.createElement("div");t.style.width=n.clientWidth+"px",t.style.height=n.clientHeight+"px",t.style.overflow="hidden",t.style.position="absolute",n.appendChild(t),this.element_=t,this.arcScaleX_=1,this.arcScaleY_=1,this.lineScale_=1}function b(n,t,i,r){n.currentPath_.push({type:"bezierCurveTo",cp1x:t.x,cp1y:t.y,cp2x:i.x,cp2y:i.y,x:r.x,y:r.y}),n.currentX_=r.x,n.currentY_=r.y}function tt(n){for(var t,i=0;i<3;i++)for(t=0;t<2;t++)if(!isFinite(n[i][t])||isNaN(n[i][t]))return!1;return!0}function s(n,t,i){if(tt(t)&&(n.m_=t,i)){var r=t[0][0]*t[1][1]-t[0][1]*t[1][0];n.lineScale_=ot(et(r))}}function h(n){this.type_=n,this.x0_=0,this.y0_=0,this.r0_=0,this.x1_=0,this.y1_=0,this.r1_=0,this.colors_=[]}function w(){}var r=Math,t=r.round,y=r.sin,v=r.cos,et=r.abs,ot=r.sqrt,i=10,u=i/2,d=Array.prototype.slice,k={init:function(n){if(/MSIE/.test(navigator.userAgent)&&!window.opera){var t=n||document;t.createElement("canvas"),t.readyState!=="complete"?t.attachEvent("onreadystatechange",rt(this.init_,this,t)):this.init_(t)}},init_:function(n){var i,r,t;for(n.namespaces.g_vml_||n.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml","#default#VML"),n.namespaces.g_o_||n.namespaces.add("g_o_","urn:schemas-microsoft-com:office:office","#default#VML"),n.styleSheets.ex_canvas_||(i=n.createStyleSheet(),i.owningElement.id="ex_canvas_",i.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}g_o_\\:*{behavior:url(#default#VML)}"),r=n.getElementsByTagName("canvas"),t=0;t<r.length;t++)this.initElement(r[t])},initElement:function(n){if(!n.getContext){n.getContext=ut,n.innerHTML="",n.attachEvent("onpropertychange",it),n.attachEvent("onresize",nt);var t=n.attributes;t.width&&t.width.specified?n.style.width=t.width.nodeValue+"px":n.width=n.clientWidth,t.height&&t.height.specified?n.style.height=t.height.nodeValue+"px":n.height=n.clientHeight}return n}},c,f,o,n;for(k.init(),c=[],f=0;f<16;f++)for(o=0;o<16;o++)c[f*16+o]=f.toString(16)+o.toString(16);n=a.prototype,n.clearRect=function(){this.element_.innerHTML=""},n.beginPath=function(){this.currentPath_=[]},n.moveTo=function(n,t){var i=this.getCoords_(n,t);this.currentPath_.push({type:"moveTo",x:i.x,y:i.y}),this.currentX_=i.x,this.currentY_=i.y},n.lineTo=function(n,t){var i=this.getCoords_(n,t);this.currentPath_.push({type:"lineTo",x:i.x,y:i.y}),this.currentX_=i.x,this.currentY_=i.y},n.bezierCurveTo=function(n,t,i,r,u,f){var s=this.getCoords_(u,f),o=this.getCoords_(n,t),e=this.getCoords_(i,r);b(this,o,e,s)},n.quadraticCurveTo=function(n,t,i,r){var e=this.getCoords_(n,t),f=this.getCoords_(i,r),u={x:this.currentX_+2/3*(e.x-this.currentX_),y:this.currentY_+2/3*(e.y-this.currentY_)},o={x:u.x+(f.x-this.currentX_)/3,y:u.y+(f.y-this.currentY_)/3};b(this,u,o,f)},n.arc=function(n,t,r,f,e,o){r*=i;var p=o?"at":"wa",s=n+v(f)*r-u,b=t+y(f)*r-u,l=n+v(e)*r-u,w=t+y(e)*r-u;s!=l||o||(s+=.125);var h=this.getCoords_(n,t),c=this.getCoords_(s,b),a=this.getCoords_(l,w);this.currentPath_.push({type:p,x:h.x,y:h.y,radius:r,xStart:c.x,yStart:c.y,xEnd:a.x,yEnd:a.y})},n.rect=function(n,t,i,r){this.moveTo(n,t),this.lineTo(n+i,t),this.lineTo(n+i,t+r),this.lineTo(n,t+r),this.closePath()},n.strokeRecLine truncated
|
||||
@@ -0,0 +1,218 @@
|
||||
/**
|
||||
* @file Mapping plugin for CKEditor
|
||||
* Copyright (C) 2014 BeezNest Latino S.A.C
|
||||
*
|
||||
* Licensed under the terms of any of the following licenses at your
|
||||
* choice:
|
||||
*
|
||||
* - GNU General Public License Version 2 or later (the "GPL")
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*/
|
||||
(function () {
|
||||
CKEDITOR.plugins.add('mapping', {
|
||||
requires: ['dialog'],
|
||||
lang: ['es'],
|
||||
init: function (editor) {
|
||||
var iconPath = this.path + 'images/icon.png';
|
||||
|
||||
CKEDITOR.dialog.add('Mapping', this.path + 'dialogs/mapping.js');
|
||||
|
||||
var mappingCommand = editor.addCommand('Mapping', new CKEDITOR.dialogCommand('Mapping', {
|
||||
allowedContent: 'img[usemap];map[id,name];area[alt,coords,shape,target,title,url]'
|
||||
}));
|
||||
|
||||
mappingCommand.startDisabled = true;
|
||||
|
||||
editor.ui.addButton('Mapping', {
|
||||
label: editor.lang.mapping.toolbar,
|
||||
command: 'Mapping',
|
||||
icon: iconPath
|
||||
});
|
||||
|
||||
editor.on('doubleclick', function (evt) {
|
||||
var element = evt.data.element;
|
||||
var editor = evt.editor;
|
||||
|
||||
if (element.is('area')) {
|
||||
var map = element.getParent().$;
|
||||
var mapId = map.getAttribute('id');
|
||||
var document = editor.document.$;
|
||||
var selectedImage;
|
||||
|
||||
if (document.querySelector) {
|
||||
selectedImage = document.querySelector('img[usemap="#' + mapId + '"]');
|
||||
}
|
||||
if (selectedImage) {
|
||||
editor.getSelection().selectElement(new CKEDITOR.dom.element(selectedImage));
|
||||
|
||||
evt.data.dialog = 'Mapping';
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (element.is('img') && element.hasAttribute('usemap')) {
|
||||
editor.getSelection().selectElement(element);
|
||||
evt.data.dialog = 'Mapping';
|
||||
}
|
||||
}, null, null, 20);
|
||||
|
||||
editor.on('selectionChange', CKEDITOR.tools.bind(function (evt) {
|
||||
var elementPath = evt.data.path;
|
||||
var element = elementPath.lastElement;
|
||||
|
||||
if (!element || !element.is('img')) {
|
||||
this.setState(CKEDITOR.TRISTATE_DISABLED);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState(element.hasAttribute('usemap') ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF);
|
||||
}, mappingCommand));
|
||||
|
||||
if (CKEDITOR.env.ie)
|
||||
return;
|
||||
|
||||
CKEDITOR.on('dialogDefinition', function (e) {
|
||||
if (e.data.name !== 'image')
|
||||
return;
|
||||
|
||||
var definition = e.data.definition;
|
||||
|
||||
e.removeListener();
|
||||
|
||||
definition.onOk = CKEDITOR.tools.override(definition.onOk, function (original) {
|
||||
return function () {
|
||||
original.call(this);
|
||||
|
||||
var selectedImage = this.imageElement;
|
||||
var mapName = selectedImage.getAttribute('usemap');
|
||||
|
||||
if (!mapName)
|
||||
return;
|
||||
|
||||
var map = editor.document.getById(mapName.substr(1));
|
||||
|
||||
if (!map)
|
||||
return;
|
||||
|
||||
CKEDITOR.plugins.mapping.generate(selectedImage.$, map.$);
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
editor.on('contentDom', function (e) {
|
||||
var document = e.editor.document.$;
|
||||
var maps = document.getElementsByTagName('map');
|
||||
|
||||
for (var i = 0; i < maps.length; i++) {
|
||||
var map = maps[i];
|
||||
var name = map.name;
|
||||
var imageWithMap = document.querySelector('img[usemap="#' + name + '"]');
|
||||
|
||||
if (imageWithMap) {
|
||||
CKEDITOR.plugins.mapping.generate(imageWithMap, map);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (!CKEDITOR.plugins.mapping) {
|
||||
CKEDITOR.plugins.mapping = {};
|
||||
}
|
||||
|
||||
CKEDITOR.plugins.mapping.generate = function (baseImage, map) {
|
||||
if (CKEDITOR.env.ie) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!baseImage.width) {
|
||||
baseImage.addEventListener('load', function () {
|
||||
baseImage.removeEventListener('load', onLoad);
|
||||
|
||||
CKEDITOR.plugins.mapping.generate(baseImage, map);
|
||||
}, false);
|
||||
return;
|
||||
}
|
||||
|
||||
var doc = baseImage.ownerDocument;
|
||||
var canvas = doc.createElement('canvas');
|
||||
|
||||
canvas.setAttribute('width', baseImage.width);
|
||||
canvas.setAttribute('height', baseImage.height);
|
||||
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
if (baseImage.attributes['data-cke-saved-src']) {
|
||||
var tmpImg = new Image();
|
||||
tmpImg.src = baseImage.attributes['data-cke-saved-src'].nodeValue;
|
||||
tmpImg.width = baseImage.width;
|
||||
tmpImg.height = baseImage.height;
|
||||
|
||||
context.drawImage(tmpImg, 0, 0, baseImage.width, baseImage.height);
|
||||
} else {
|
||||
context.drawImage(baseImage, 0, 0, baseImage.width, baseImage.height);
|
||||
}
|
||||
|
||||
context.strokeStyle = "#F00";
|
||||
context.lineWidth = 2;
|
||||
context.shadowOffsetX = 0;
|
||||
context.shadowOffsetY = 0;
|
||||
context.shadowBlur = 3;
|
||||
context.shadowColor = "#DDD";
|
||||
|
||||
for (var i = 0; i < map.areas.length; i++) {
|
||||
var area = map.areas[i];
|
||||
var coords = area.coords.split(',');
|
||||
|
||||
switch (area.shape) {
|
||||
case 'circle':
|
||||
context.beginPath();
|
||||
context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, true);
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
break;
|
||||
case 'poly':
|
||||
context.beginPath();
|
||||
context.moveTo(coords[0], coords[1]);
|
||||
|
||||
for (var j = 2; j < coords.length; j += 2) {
|
||||
context.lineTo(coords[j], coords[j + 1]);
|
||||
}
|
||||
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
break;
|
||||
default:
|
||||
context.strokeRect(coords[0], coords[1], coords[2] - coords[0], coords[3] - coords[1]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
baseImage.src = canvas.toDataURL();
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
};
|
||||
},
|
||||
afterInit: function (editor) {
|
||||
if (!(CKEDITOR.env.ie && CKEDITOR.env.quirks)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var dataProcessor = editor.dataProcessor;
|
||||
var htmlFilter = dataProcessor && dataProcessor.htmlFilter;
|
||||
|
||||
htmlFilter.addRules({
|
||||
elements: {
|
||||
map: function (element) {
|
||||
if (element.attributes.id && !element.attributes.name) {
|
||||
element.attributes.name = element.attributes.id;
|
||||
}
|
||||
|
||||
return element;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
Reference in new issue
Block a user