IBS Mappro is developed using the Netbeans IDE and WAMP on a Windows 7 desktop. Some curious souls may want to look at the code or may want to modify or even extract some code. This section is for those.
jQuery is a definite requirement for this plugin.
This is the Netbean view of the plugin project within an Installed WordPress instance. Identical to the deployed plugin.
The following is a brief discussion on each folder or file
- css : this is the folder for the mappro styles used by mappro.
- image : the images used in mappro
- js/ckeditor_4.5.4_custom. This is a custom build of the CKeditor with a modified and unique to mappro “ckeditor/plugins/filebrowser”. Also the “ckeditor/skins/bootstrapck” is the CKeditor “full” version copy.
- js/jQuery.print is used to print directions cue sheets.
- js/jquery.filedownload this is used for downloads. GIT HUB
- js/jquery.fineuploader this is an older version 3.9.0-3. Works exceptionally well for uploading. GIT HUB current non commercial version. Have not upgraded because the licencing changed.
- js/jquery.qtip standard release;
- js/ibs_mappro,js this is the head of IBS_MAPPRO the main JavaScipt object for the plugin;
- js/ibs_colorpicker.js a modified version of juery.color-picker.js GIT HUB Since it is modified it was moved into the mappro naming.
- js/elevation.js Elevation plots the elevation profile for a segment.
- js/ib_mappro_file.js The File object that handle the loading and display of map files. Original design had a File for every discrete map file. Current version there is only one File object that merges multiple map files into one file.
- js/ibs_mappro_filetree.js This is modified version of the jQuery File Tree plugin. Multiple selection was added.
- js/ibs_mappro_handlers.js Most event handlers are contained within this file to insure the correct initialization sequence.
- js/ibs_library.js This contains dialog objects for the manage library functions, image browser, and icon manager.
- js/ibs_mappro_media.js This file contains the dialog object supporting the post media button to inset map shortcode.
- js/ibs_mappro_placemark.js This file contains the Placemark object. Every marker and waypoint is has a Placemark object.
- js/ibs_mappro_places. js This is the code for the Google Maps search box.
- js/ibs_mappro_scrollto.js This file contains a modified version of balupton jquery-scrollto. The modification constrains the scroll to one level.
- js/ibs_mappro_segment.js Contains the Segment object. Each segment/polyline/route is a Segment object. Perhaps the heaviest piece of logic as it handles line drawing down to the point level and up to Google Map directions and cue sheets.
- js/ibs_mappro_utility.js Garbage collector of miscellaneous functions mainly non jquery related.
- js/ibs_mappro_xml.js Contains the GPX and KML objects for reading and writing the xml for the map files. Include the utility xmlwriter.
- lib this folder contains the uploader server folder for PHP support files. The WordPress “class-pclzip.php” is included here for standalone implementations.
- mappro this folder contains the seed library and work folders that are copied to the WordPress “uploads/ibs-files” on installation. For upgrages the library example sub directories are refreshed.
- readme.txt the standard WordPress plugin read me.
This is the initialization code on the PHP side. Note the minimal use of PHP code and HTML.
The generated HTML structure can be confusing. A goal was to run multiple instances from the same base code. To do that requires the DOM structure for each instance to be unique. That meant each tag id used had to be unique or not use tag ids altogether. The latter was chosen which meant using a scope limited class-naming convention. To address an element meant that you needed a root element with a unique tag id to define the beginning scope for finding a class named element. This can also be very cumbersome. The way around that was using an object where the members pointed to sub scopes to make element easier to find.
Code for how the scopes are defined and shows how the html object is used to find DOM elements.