Skip to content

Commit

Permalink
[add] The MapEx widget initial version
Browse files Browse the repository at this point in the history
  • Loading branch information
rvalitov committed Dec 13, 2015
1 parent 3e9d804 commit 8f2a80d
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 22 deletions.
20 changes: 19 additions & 1 deletion map_ex/assets/maps.js

Large diffs are not rendered by default.

27 changes: 20 additions & 7 deletions map_ex/plugin.php
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
<?php
/*
MapEx plugin for Widgetkit 2.
Author: Ramil Valitov
E-mail: [email protected]
Web: http://www.valitov.me/
Git: https://github.com/rvalitov/widgetkit-map-ex
*/

return array(

'name' => 'widget/map',
'name' => 'widget/map_ex',

'main' => 'YOOtheme\\Widgetkit\\Widget\\Widget',

'config' => array(

'name' => 'map',
'label' => 'Map',
'name' => 'map_ex',
'label' => 'MapEx',
'core' => true,
'icon' => 'plugins/widgets/map/widget.svg',
'view' => 'plugins/widgets/map/views/widget.php',
'icon' => 'plugins/widgets/map_ex/widget.svg',
'view' => 'plugins/widgets/map_ex/views/widget.php',
'item' => array('title', 'content', 'media'),
'fields' => array(
array('name' => 'location')
Expand All @@ -31,6 +38,11 @@
'draggable' => true,
'directions' => false,
'disabledefaultui' => false,
'responsive' => true,
'modal_fix' => true,
'map_center' => '',
'debug_output' => false,


'styler_invert_lightness' => false,
'styler_hue' => '',
Expand Down Expand Up @@ -67,11 +79,12 @@
'events' => array(

'init.site' => function($event, $app) {
$app['scripts']->add('widgetkit-maps', 'plugins/widgets/map/assets/maps.js', array('uikit'));
//We replace the original Map widget js file with ours. It must be done to avoid issues with multiple loading of Google Map API JS libraies.
$app['scripts']->add('widgetkit-maps', 'plugins/widgets/map_ex/assets/maps.js', array('uikit'));
},

'init.admin' => function($event, $app) {
$app['angular']->addTemplate('map.edit', 'plugins/widgets/map/views/edit.php', true);
$app['angular']->addTemplate('map_ex.edit', 'plugins/widgets/map_ex/views/edit.php', true);
}

)
Expand Down
29 changes: 29 additions & 0 deletions map_ex/views/edit.php
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,35 @@
<label><input type="checkbox" ng-model="widget.data['draggable']"> {{'Move map on drag' | trans}}</label>
</div>
</div>
<h3 class="wk-form-heading">{{'MapEx Settings' | trans}}</h3>
<div class="uk-form-row">
<span class="uk-form-label">{{'Responsive' | trans}}</span>
<div class="uk-form-controls uk-form-controls-text">
<label><input type="checkbox" ng-model="widget.data['responsive']"> {{'Adjust map on window resize and orientation change' | trans}}</label>
</div>
</div>
<div class="uk-form-row">
<span class="uk-form-label">{{'Modal dialog fix' | trans}}</span>
<div class="uk-form-controls uk-form-controls-text">
<label><input type="checkbox" ng-model="widget.data['modal_fix']"> {{'Correct visualization if widget displayed inside modal' | trans}}</label>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label" for="wk-height" title="Coordinates of a point that will be a center of the map, e.g. -34.23, 151.0023. Leave blank if not required.">{{'Map Center Point' | trans}}</label>
<div class="uk-form-controls">
<input id="wk-height" class="uk-form-width-medium" type="text" ng-model="widget.data['map_center']">
</div>
</div>
<div class="uk-form-row">
<span class="uk-form-label">{{'Debug output' | trans}}</span>
<div class="uk-form-controls uk-form-controls-text">
<label><input type="checkbox" ng-model="widget.data['debug_output']"> {{'Extra messages output to browser console' | trans}}</label>
</div>
</div>
</li>
<li>
Expand Down
97 changes: 95 additions & 2 deletions map_ex/views/widget.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
<?php
/*
MapEx plugin for Widgetkit 2.
Author: Ramil Valitov
E-mail: [email protected]
Web: http://www.valitov.me/
Git: https://github.com/rvalitov/widgetkit-map-ex
*/

$map_id = uniqid('wk-map');
$map_id = uniqid('wk-map-ex');
$markers = array();
$width = $settings['width'] == 'auto' ? 'auto' : ((int)$settings['width']).'px';
$height = $settings['height'] == 'auto' ? '300px' : ((int)$settings['height']).'px';
Expand Down Expand Up @@ -28,9 +35,95 @@
}

$settings['markers'] = $markers;

$settings['map_id'] = $map_id;
$settings['map_center'] = trim($settings['map_center']);
?>

<script type="widgetkit/map" data-id="<?php echo $map_id;?>" data-class="<?php echo $settings['class']; ?> uk-img-preserve" data-style="width:<?php echo $width?>;height:<?php echo $height?>;">
<?php echo json_encode($settings) ?>
</script>

<?php if ( ($settings['responsive']) || (!empty($settings['map_center'])) || ($settings['modal_fix']) ):?>
<script>
jQuery(document).ready(function($){
function checkWidgetkitMaps() {
var item=getWidgetkitMap("<?php echo $settings['map_id']?>");
if (item) {
<?php if (!empty($settings['map_center'])):?>
item.setCenter(new google.maps.LatLng(<?php echo $settings['map_center']?>));
<?php if ($settings['debug_output']):?>
console.log('[MapEx] map centered to <?php echo $settings['map_center']?> for id#<?php echo $settings['map_id']?>');
<?php endif;?>
<?php endif;?>

<?php if ($settings['responsive']):?>
google.maps.event.addDomListener(window, 'resize', function() {
<?php if (!empty($settings['map_center'])):?>
item.panTo(new google.maps.LatLng(<?php echo $settings['map_center']?>));
<?php if ($settings['debug_output']):?>
console.log('[MapEx] auto pan performed to <?php echo $settings['map_center']?> for id#<?php echo $settings['map_id']?>');
<?php endif;?>
<?php endif;?>
item.setZoom(<?php echo $settings['zoom']?>);
<?php if ($settings['debug_output']):?>
console.log('[MapEx] auto zoom performed to level <?php echo $settings['zoom']?> for id#<?php echo $settings['map_id']?>');
<?php endif;?>
});
<?php if ($settings['debug_output']):?>
console.log('[MapEx] responsive setup performed for id#<?php echo $settings['map_id']?>');
<?php endif;?>
<?php endif;?>

<?php if ($settings['modal_fix']):?>
var modal_id='#<?php echo $settings['map_id']?>';
var modal_dialog=$(modal_id).closest('.uk-modal');
if (modal_dialog){
var box_id=modal_dialog.attr("id");
if (box_id){
<?php if ($settings['debug_output']):?>
console.log('[MapEx] modal fix setup successfull for id'+modal_id);
<?php endif;?>
$('#'+box_id).on({
'show.uk.modal': function(){
var map = jQuery('#<?php echo $settings['map_id']?>', '#'+box_id).first().get(0);
<?php if (!empty($settings['map_center'])):?>
item.setCenter(new google.maps.LatLng(<?php echo $settings['map_center']?>));
item.panTo(new google.maps.LatLng(<?php echo $settings['map_center']?>));
<?php if ($settings['debug_output']):?>
console.log('[MapEx] map centered to <?php echo $settings['map_center']?> for id#<?php echo $settings['map_id']?>');
console.log('[MapEx] auto pan performed to <?php echo $settings['map_center']?> for id#<?php echo $settings['map_id']?>');
<?php endif;?>
<?php endif;?>

item.setZoom(<?php echo $settings['zoom']?>);
<?php if ($settings['debug_output']):?>
console.log('[MapEx] auto zoom performed to level <?php echo $settings['zoom']?> for id#<?php echo $settings['map_id']?>');
<?php endif;?>

google.maps.event.trigger(map, 'resize');
<?php if ($settings['debug_output']):?>
console.log('[MapEx] modal fix performed for id'+modal_id);
<?php endif;?>
}
});
}
<?php if ($settings['debug_output']):?>
else
console.log('[MapEx] failed to get id for modal dailog for id'+modal_id);
<?php endif;?>

}
<?php if ($settings['debug_output']):?>
else
console.log('[MapEx] failed to find modal dailog for id'+modal_id);
<?php endif;?>

<?php endif;//modal fix?>
}
else
setTimeout(checkWidgetkitMaps,1000);
}
setTimeout(checkWidgetkitMaps,1000);
});
</script>
<?php endif;?>
21 changes: 9 additions & 12 deletions map_ex/widget.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 8f2a80d

Please sign in to comment.