Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add support for URLs and tooltips. #11

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add support for URLs and tooltips. #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
/*! Image Map Resizer
* Desc: Resize HTML imageMap to scaled image.
* Copyright: (c) 2014 David J. Bradshaw - [email protected]
* License: MIT
*/

(function(){
'use strict';

function scaleImageMap(){

function resizeMap() {
function resizeAreaTag(cachedAreaCoords){
function scaleCoord(e){
return e * scallingFactor[(1===(isWidth = 1-isWidth) ? 'width' : 'height')];
}

var isWidth = 0;

return cachedAreaCoords.split(',').map(Number).map(scaleCoord).map(Math.floor).join(',');
}

var scallingFactor = {
width : displayedImage.width / sourceImage.width,
height : displayedImage.height / sourceImage.height
};

for (var i=0; i < areasLen ; i++) {
areas[i].coords = resizeAreaTag(cachedAreaCoordsArray[i]);
}
}

function start(){
//WebKit asyncs image loading, so we have to catch the load event.
sourceImage.onload = function sourceImageOnLoadF(){
if ((displayedImage.width !== sourceImage.width) || (displayedImage.height !== sourceImage.height)) {
resizeMap();
}
};
//Make copy of image, so we can get the actual size measurements
sourceImage.src = displayedImage.src;
}

function listenForResize(){
function debounce() {
clearTimeout(timer);
timer = setTimeout(resizeMap, 250);
}
if (window.addEventListener) { window.addEventListener('resize', debounce, false); }
else if (window.attachEvent) { window.attachEvent('onresize', debounce); }
}

function getCoords(e){
// normalize coord-string to csv format without any space chars
return e.coords.replace(/ *, */g,',').replace(/ +/g,',');
}

var
/*jshint validthis:true */
map = this,
areas = map.getElementsByTagName('area'),
areasLen = areas.length,
cachedAreaCoordsArray = Array.prototype.map.call(areas, getCoords),
displayedImage = document.querySelector('img[usemap="#'+map.name+'"]'),
sourceImage = new Image(),
timer = null;

start();
listenForResize();
}



function factory(){
function init(element){
if(element.tagName && 'MAP' !== element.tagName.toUpperCase()) {
throw new TypeError('Expected <MAP> tag, found <'+element.tagName+'>.');
}

scaleImageMap.call(element);
}

return function imageMapResizeF(target){
switch (typeof(target)){
case 'undefined':
case 'string':
Array.prototype.forEach.call(document.querySelectorAll(target||'map'),init);
break;
case 'object':
init(target);
break;
default:
throw new TypeError('Unexpected data type ('+typeof(target)+').');
}
};
}


if (typeof define === 'function' && define.amd) {
define([],factory);
} else if (typeof exports === 'object') { //Node for browserfy
module.exports = factory();
} else {
window.imageMapResize = factory();
}


if('jQuery' in window) {
jQuery.fn.imageMapResize = function $imageMapResizeF(){
return this.filter('map').each(scaleImageMap).end();
};
}

})();
72 changes: 54 additions & 18 deletions syntax.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,10 @@ function render($format, &$R, $data) {
if($data['height']) $R->doc .= ' height="'.$data['height'].'"';
if($data['align'] == 'right') $R->doc .= ' align="right"';
if($data['align'] == 'left') $R->doc .= ' align="left"';
$R->doc .= '/>';
$R->doc .= ' usemap="#graphviz_'.$data['md5'].'"';
$R->doc .= "/>\n";
$R->doc .= io_readFile($this->_imgmap($data), false);
$R->doc .= '<script type="text/javascript">/*<![CDATA[*/ imageMapResize(); /*!]]>*/</script>'."\n";
return true;
}elseif($format == 'odt'){
$src = $this->_imgfile($data);
Expand All @@ -123,19 +126,26 @@ function _imgfile($data){

// create the file if needed
if(!file_exists($cache)){
$in = $this->_cachename($data,'txt');
if($this->getConf('path')){
$ok = $this->_run($data,$in,$cache);
}else{
$ok = $this->_remote($data,$in,$cache);
}
$ok = $this->_run($data);
if(!$ok) return false;
clearstatcache();
}

// resized version
if($data['width']){
$cache = media_resize_image($cache,'png',$data['width'],$data['height']);
// something went wrong, we're missing the file
if(!file_exists($cache)) return false;

return $cache;
}

/**
* Return path to the rendered map on our local system
*/
function _imgmap($data){
$cache = $this->_cachename($data,'map');

// create the file if needed
if(!file_exists($cache)){
$ok = $this->_run($data);
if(!$ok) return false;
}

// something went wrong, we're missing the file
Expand All @@ -144,10 +154,27 @@ function _imgfile($data){
return $cache;
}

/**
* Render the graph
*/
function _run($data){
$cache_png = $this->_cachename($data,'png');
$cache_map = $this->_cachename($data,'map');
$in = $this->_cachename($data,'txt');
if($this->getConf('path')){
$ok = $this->_run_local($data,$in,$cache_png,$cache_map);
}else{
$ok = $this->_run_remote($data,$in,$cache_png,$cache_map);
}
if(!$ok) return false;
clearstatcache();
return true;
}

/**
* Render the output remotely at google
*/
function _remote($data,$in,$out){
function _run_remote($data,$in,$out_png,$out_map){
if(!file_exists($in)){
if($conf['debug']){
dbglog($in,'no such graphviz input file');
Expand All @@ -165,13 +192,16 @@ function _remote($data,$in,$out){
$img = $http->post('http://chart.apis.google.com/chart',$pass,'&');
if(!$img) return false;

return io_saveFile($out,$img);
//Unfortunately, google chart doesn't support image-maps, store an empty map.
$ok = io_saveFile($out_map, '<map name="graphviz_'.$data['md5'].'"></map>');
if(!$ok) return false;
return io_saveFile($out_png,$img);
}

/**
* Run the graphviz program
* Run the graphviz program locally
*/
function _run($data,$in,$out) {
function _run_local($data,$in,$out_png,$out_map) {
global $conf;

if(!file_exists($in)){
Expand All @@ -182,9 +212,11 @@ function _run($data,$in,$out) {
}

$cmd = $this->getConf('path');
$cmd .= ' -Tpng';
$cmd .= ' -K'.$data['layout'];
$cmd .= ' -o'.escapeshellarg($out); //output
$cmd .= ' -Tpng';
$cmd .= ' -o'.escapeshellarg($out_png); //output png image
$cmd .= ' -Tcmapx';
$cmd .= ' -o'.escapeshellarg($out_map); //output image map
$cmd .= ' '.escapeshellarg($in); //input

exec($cmd, $output, $error);
Expand All @@ -195,7 +227,11 @@ function _run($data,$in,$out) {
}
return false;
}
return true;

// change name of image-map
$map = io_readFile($out_map,false);
$map = preg_replace('/<map [^>]*>/', '<map name="graphviz_'.$data['md5'].'">', $map);
return io_saveFile($out_map,$map);
}

}
Expand Down