Changeset 615519

Timestamp:

10/22/2012 09:45:54 AM (12 years ago)

Author:

510crew

Message:

Made changes for v0.2

Location:

maphilight/trunk

Files:

• README.md (modified) (4 diffs)
• classes/Map_Hilight.php (modified) (1 diff)
• classes/Map_Hilight_Site.php (modified) (4 diffs)
• javascript/app.js (modified) (1 diff)
• javascript/jquery.imagemapster.min.js (added)
• readme.txt (modified) (2 diffs)

maphilight/trunk/README.md

@@ -6 +6 @@
 __Donate link__:   
 __Requires at least__: 3.3  
-__Tested up to__: 3.4.1  
-__Stable tag__: 1.3  
+__Tested up to__: 3.4.2  
+__Stable tag__: 0.2 
 __License__: GPLv2  
 
@@ -13 +13 @@
 -----------
 
-MapHilight makes it easy to integrate the javascript needed to make your maps or images interactive. Based on the maphilight jQuery plugin, MapHilight allows you to customize a hover effect on your maps or images.  
-Plugin uses jQuery plugin found here : https://github.com/kemayo/maphilight - MIT Licensed
+MapHilight makes it easy to integrate the javascript needed to make your maps or images interactive. Based on the imagemapster jQuery plugin, MapHilight allows you to customize a hover effect on your maps or images.
+Plugin uses jQuery plugin found here : https://github.com/jamietre/imagemapster
+Thanks jmcphail for pointing it out on this plugin's Wordpress forum.
 
 Use it in your Posts by adding the following shortcode : [maphilight]
@@ -31 +32 @@
 --------------------------
 
-1.  How do I integrate the map in an article or a post once it has been created in the admin menu ?
+1.  How do I integrate the map in an article or a post once it has been created in the admin menu ?  
 >  You only need to use the [maphilight] shortcode in your post or article and the map will appear. The javascript will only be loaded in your page if the shortcode is present.
 
@@ -48 +49 @@
 Changelog
 ---------
+### 0.2 ###
+
+* Changed jQuery plugin mahilight for imagemapster. Allowing responsive maps !
 
 ### 0.1 ###

maphilight/trunk/classes/Map_Hilight.php

@@ -129 +129 @@
         // echo map tag with corresponding name
         // echo the given areas (stripslashes as wordpress \ when saving)
-        $html = '<img src="'.$options['map_url'].'" usemap="#map" id="map">';
-        $html .= '<map name="map">';
+        $html = '<img src="'.$options['map_url'].'" usemap="#map-area" id="map" />';
+        $html .= '<map name="map-area">';
         $html .= stripslashes($options['map_area_code']);
         $html .= '</map>';

maphilight/trunk/classes/Map_Hilight_Site.php

@@ -30 +30 @@
         // Scripts
         wp_register_script(
-            'maphilight' , 
-            plugins_url('javascript/jquery.maphilight.min.js', Map_Hilight::$file),
+            'imagemapster' , 
+            plugins_url('javascript/jquery.imagemapster.min.js', Map_Hilight::$file),
             array('jquery')
         );
@@ -39 +39 @@
             'map-hilight-app' , 
             plugins_url('javascript/app.js', Map_Hilight::$file) ,
-            array('jquery', 'maphilight')
+            array('jquery', 'imagemapster')
         );
     }
@@ -53 +53 @@
         // As of WordPress 3.3 wp_enqueue_script() can be called mid-page (in the HTML body). 
         // This will load the script in the footer. 
-        wp_enqueue_script('maphilight');
+        wp_enqueue_script('imagemapster');
         wp_enqueue_script('map-hilight-app');
         wp_localize_script('map-hilight-app', 'map_hilight_args', Map_Hilight::getOptions());
@@ -67 +67 @@
     public static function printScripts() {
         if(self::$printScripts) {
-            wp_print_scripts(array('maphilight', 'map-hilight-app'));
+            wp_print_scripts(array('imagemapster', 'map-hilight-app'));
         }
     }

maphilight/trunk/javascript/app.js

@@ -1 +1 @@
 jQuery.noConflict();
 jQuery(function($) {
-    $('#map').maphilight({
+    var resizeTime = 100;     // total duration of the resize effect, 0 is instant
+    var resizeDelay = 100; 
+    $('#map').mapster({
         fillColor: map_hilight_args.background_color,
         fillOpacity: map_hilight_args.opacity,
-        strokeColor: map_hilight_args.border_color
+        strokeColor: map_hilight_args.border_color,
+        clickNavigate: true
     });
+    $(window).bind('resize',onWindowResize);
+    // Resize the map to fit within the boundaries provided
+
+    function resize(maxWidth,maxHeight) {
+         var image =  $('#map'),
+            imgWidth = image.width(),
+            imgHeight = image.height(),
+            newWidth=0,
+            newHeight=0;
+
+        if (imgWidth/maxWidth>imgHeight/maxHeight) {
+            newWidth = maxWidth;
+        } else {
+            newHeight = maxHeight;
+        }
+        image.mapster('resize',newWidth,newHeight,resizeTime);   
+    }
+
+    // Track window resizing events, but only actually call the map resize when the
+    // window isn't being resized any more
+
+    function onWindowResize() {
+        var curWidth = $('#map').parent().parent().width(),
+            curHeight = $('#map').parent().parent().height(),
+            checking=false;
+        if (checking) {
+            return;
+                }
+        checking = true;
+        window.setTimeout(function() {
+            var newWidth = $('#map').parent().parent().width(),
+               newHeight = $('#map').parent().parent().height();
+            if (newWidth === curWidth &&
+                newHeight === curHeight) {
+                resize(newWidth,newHeight);
+            }
+            checking=false;
+        },resizeDelay );
+    }
 });

maphilight/trunk/readme.txt

@@ -6 +6 @@
 Requires at least: 3.3
 Tested up to: 3.4.2
-Stable tag: 0.1
+Stable tag: 0.2
 License: GPLv2
 
 == Description ==
 
-MapHilight makes it easy to integrate the javascript needed to make your maps or images interactive. Based on the maphilight jQuery plugin, MapHilight allows you to customize a hover effect on your maps or images.
-Plugin uses jQuery plugin found here : https://github.com/kemayo/maphilight - MIT Licensed
+MapHilight makes it easy to integrate the javascript needed to make your maps or images interactive. Based on the imagemapster jQuery plugin, MapHilight allows you to customize a hover effect on your maps or images.
+Plugin uses jQuery plugin found here : https://github.com/jamietre/imagemapster
+Thanks jmcphail for pointing it out on this plugin's Wordpress forum.
 
 Use it in your Posts by adding the following shortcode : [maphilight]
@@ -44 +45 @@
 == Changelog ==
 
+= 0.2 =
+
+* Changed jQuery plugin mahilight for imagemapster. Allowing responsive maps !
+
 = 0.1 =