WordPress.org

Plugin Directory

Changeset 1146183


Ignore:
Timestamp:
04/26/15 14:17:29 (2 years ago)
Author:
jensnilsson
Message:

0.0.3

Location:
advanced-custom-fields-mapbox-geojson-field
Files:
15 added
7 edited

Legend:

Unmodified
Added
Removed
  • advanced-custom-fields-mapbox-geojson-field/trunk/acf-mapbox_geojson-v4.php

    r1142388 r1146183  
    3838            'path' => apply_filters('acf/helpers/get_path', __FILE__), 
    3939            'dir' => apply_filters('acf/helpers/get_dir', __FILE__), 
    40             'version' => '0.0.2' 
     40            'version' => '0.0.3' 
    4141        ); 
    4242 
     
    152152        // create Field HTML 
    153153        ?> 
    154         <div> 
    155             <input class="mapbox-geojson-field" type="hidden" name="<?php echo esc_attr($field['name']) ?>" value='<?php echo $field['value'] ?>' /> 
     154        <input class="mapbox-geojson-field" type="hidden" name="<?php echo esc_attr($field['name']) ?>" value='<?php echo $field['value'] ?>' /> 
     155        <div class="mapbox-geojson-map-container"> 
    156156            <div class="mapbox-geojson-map" data-access-token="<?php echo esc_attr($field['mapbox_access_token']) ?>" data-map-id="<?php echo esc_attr($field['mapbox_map_id']) ?>" style="height:<?php echo $field['height'] ?>px;"></div> 
     157            <div class="mbgs"> 
     158                <span class="mbgs-toggle"> 
     159                    <span class="dashicons dashicons-arrow-left"></span> 
     160                </span> 
     161                <div class="mbgs-body"></div> 
     162            </div> 
    157163        </div> 
    158164        <?php 
     
    188194 
    189195        // register & include CSS 
     196        wp_register_style( 'acf-input-mapbox_geojson', $this->settings['dir'] . "css/input.css", array(), '0.0.3' ); 
     197        wp_enqueue_style( 'acf-input-mapbox_geojson' ); 
     198 
    190199        wp_register_style( 'acf-input-mapbox_geojson_mapbox_css', 'https://api.tiles.mapbox.com/mapbox.js/v2.1.8/mapbox.css' ); 
    191200        wp_enqueue_style( 'acf-input-mapbox_geojson_mapbox_css' ); 
  • advanced-custom-fields-mapbox-geojson-field/trunk/acf-mapbox_geojson-v5.php

    r1142388 r1146183  
    150150        ?> 
    151151        <input class="mapbox-geojson-field" type="hidden" name="<?php echo esc_attr($field['name']) ?>" value='<?php echo $field['value'] ?>' /> 
    152         <div class="mapbox-geojson-map" data-access-token="<?php echo esc_attr($field['mapbox_access_token']) ?>" data-map-id="<?php echo esc_attr($field['mapbox_map_id']) ?>" style="height:<?php echo $field['height'] ?>px;"></div> 
     152        <div class="mapbox-geojson-map-container"> 
     153            <div class="mapbox-geojson-map" data-access-token="<?php echo esc_attr($field['mapbox_access_token']) ?>" data-map-id="<?php echo esc_attr($field['mapbox_map_id']) ?>" style="height:<?php echo $field['height'] ?>px;"></div> 
     154            <div class="mbgs"> 
     155                <span class="mbgs-toggle"> 
     156                    <span class="dashicons dashicons-arrow-left"></span> 
     157                </span> 
     158                <div class="mbgs-body"></div> 
     159            </div> 
     160        </div> 
    153161        <?php 
    154162    } 
     
    172180 
    173181        $dir = plugin_dir_url( __FILE__ ); 
    174         //// register & include JS 
    175         //wp_register_script( 'acf-input-mapbox_geojson', "{$dir}js/input.js" ); 
    176         //wp_enqueue_script('acf-input-mapbox_geojson'); 
    177         //// register & include CSS 
    178         //wp_register_style( 'acf-input-mapbox_geojson', "{$dir}css/input.css" ); 
    179         //wp_enqueue_style('acf-input-mapbox_geojson'); 
    180182 
    181183        // register & include JS 
     
    186188        wp_enqueue_script( 'acf-input-mapbox_geojson_leaflet_draw_js' ); 
    187189 
    188         wp_register_script( 'acf-input-mapbox_geojson', "{$dir}js/input.js", array('acf-input-mapbox_geojson_mapbox_js', 'acf-input-mapbox_geojson_leaflet_draw_js'), '0.0.2', true ); 
     190        wp_register_script( 'acf-input-mapbox_geojson', "{$dir}js/input.js", array('acf-input-mapbox_geojson_mapbox_js', 'acf-input-mapbox_geojson_leaflet_draw_js'), '0.0.3', true ); 
    189191        wp_enqueue_script( 'acf-input-mapbox_geojson' ); 
    190192 
    191193 
    192194        // register & include CSS 
     195        wp_register_style( 'acf-input-mapbox_geojson', "{$dir}css/input.css", array(), '0.0.3' ); 
     196        wp_enqueue_style( 'acf-input-mapbox_geojson' ); 
     197 
    193198        wp_register_style( 'acf-input-mapbox_geojson_mapbox_css', 'https://api.tiles.mapbox.com/mapbox.js/v2.1.8/mapbox.css' ); 
    194199        wp_enqueue_style( 'acf-input-mapbox_geojson_mapbox_css' ); 
  • advanced-custom-fields-mapbox-geojson-field/trunk/acf-mapbox_geojson.php

    r1142388 r1146183  
    55Plugin URI: https://github.com/jensjns/acf-mapbox-geojson-field 
    66Description: Adds a map field that lets you edit geoJSON-content. 
    7 Version: 0.0.2 
     7Version: 0.0.3 
    88Author: jensnilsson 
    99Author URI: http://jensnilsson.nu 
  • advanced-custom-fields-mapbox-geojson-field/trunk/css/input.css

    r1141021 r1146183  
     1.mapbox-geojson-map-container{overflow:hidden;position:relative;border-right:1px solid #ededed;}.mapbox-geojson-map-container .mbgs{position:absolute;top:5px;right:0;bottom:5px;transform:translateX(250px);width:250px;background:#fff;transition:all .1s ease-in;border-top-left-radius:3px;border-bottom-left-radius:3px;}.mapbox-geojson-map-container .mbgs.mbgs-open{transform:translateX(0);box-shadow:0 0 6px rgba(0,0,0,0.4);}.mapbox-geojson-map-container .mbgs.mbgs-open .mbgs-toggle{left:-27px;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;}.mapbox-geojson-map-container .mbgs.mbgs-open .mbgs-toggle .dashicons-arrow-left{transform:rotate(180deg)}.mapbox-geojson-map-container .mbgs .mbgs-body{overflow:scroll;position:absolute;top:0;bottom:0;left:0;right:0;padding-bottom:15px}.mapbox-geojson-map-container .mbgs .mbgs-toggle{position:absolute;top:5px;left:-37px;background:#fff;border-radius:3px;width:26px;height:26px;line-height:26px;border:1px solid #999;border-color:rgba(0,0,0,0.4);cursor:pointer;}.mapbox-geojson-map-container .mbgs .mbgs-toggle:hover{background-color:#f8f8f8}.mapbox-geojson-map-container .mbgs .mbgs-toggle .dashicons-arrow-left{padding:3px}.mapbox-geojson-map-container .mbgs .mbgs-tray-item{display:block;width:100%;padding:10px 10px 10px 10px;box-sizing:border-box;outline:none;border-bottom:1px solid #ededed;}.mapbox-geojson-map-container .mbgs .mbgs-tray-item.mbgs-tray-item-active{background-color:#ededed}.mapbox-geojson-map-container .mbgs .mbgs-tray-item .mbgs-tray-item-header{width:100%;height:100%;display:block;line-height:26px;color:#464646;border:none;outline:0;text-decoration:none;position:relative}.mapbox-geojson-map-container .mbgs .mbgs-tray-item .mbgs-delete-feature{position:absolute;right:0;}.mapbox-geojson-map-container .mbgs .mbgs-tray-item .mbgs-delete-feature:hover{background-color:#ededed}.mapbox-geojson-map-container .ld-icon{background-image:url("https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/images/spritesheet.png");background-repeat:no-repeat;width:26px;height:26px;display:inline-block;vertical-align:middle}.mapbox-geojson-map-container .ld-icon-polyline{background-position:-2px -2px}.mapbox-geojson-map-container .ld-icon-polygon{background-position:-31px -2px}.mapbox-geojson-map-container .ld-icon-marker{background-position:-122px -2px}.mapbox-geojson-map-container .ld-icon-trashcan{background-position:-182px -2px} 
  • advanced-custom-fields-mapbox-geojson-field/trunk/js/input.js

    r1142388 r1146183  
    5252                        }, 
    5353                    }, 
     54                    marker: true, 
    5455                    circle: false, 
    5556                    rectangle: { 
     
    5859                        }, 
    5960                    }, 
    60                     marker: true, 
    6161                }, 
    6262                edit: { 
    6363                    featureGroup: editableLayer, 
     64                    edit: false, 
     65                    remove: false, 
    6466                }, 
    6567            }).addTo(map); 
    6668 
     69            var sidebar = initialize_sidebar( $el, map, editableLayer ); 
     70 
    6771            map.on('draw:created', function(e) { 
    6872                    editableLayer.addLayer(e.layer); 
     73                    sidebar.addLayerControl(e.layerType, e.layer); 
    6974                }) 
    70                 .on('draw:created draw:edited draw:deleted', function(e) { 
     75                .on('draw:created draw:edited draw:deleted sidebareditor:edited sidebareditor:deleted', function(e) { 
    7176                    setValue(JSON.stringify(editableLayer.toGeoJSON())); 
     77                }) 
     78                .on('mouseover', function(e) { 
     79                    if(!sidebar.hasBounced && !sidebar.isOpen) { 
     80                        sidebar.bounce(); 
     81                    } 
    7282                }); 
     83 
     84            editableLayer.eachLayer(function(layer) { 
     85                var type = false; 
     86 
     87                switch(layer.feature.geometry.type) { 
     88                    case 'Point': 
     89                        type = 'marker'; 
     90                        break; 
     91                    case 'LineString': 
     92                        type= 'polyline'; 
     93                        break; 
     94                    case 'Polygon': 
     95                        type = 'polygon'; 
     96                        break; 
     97                } 
     98 
     99                if( type ) { 
     100                    var control = sidebar.addLayerControl(type, layer); 
     101                    layer.on('click', function(e) { 
     102                        sidebar.open(); 
     103                        control.enable(); 
     104                    }); 
     105                } 
     106            }); 
    73107        } 
    74108        else { 
     
    79113    } 
    80114 
     115    function initialize_sidebar( $el, map, featureGroup ) { 
     116        var sidebarDOM = $el.find('.mbgs'); 
     117        var toggle = sidebarDOM.find('.mbgs-toggle'); 
     118 
     119        var sidebar = { 
     120            domref: sidebarDOM, 
     121            body: sidebarDOM.find('.mbgs-body'), 
     122            isOpen: sidebarDOM.hasClass('mbgs-open'), 
     123            map: map, 
     124            featureGroup: featureGroup, 
     125            hasBounced: false, 
     126            bounce: function() { 
     127                this.hasBounced = true; 
     128            }, 
     129            toggle: function() { 
     130                this.domref.toggleClass('mbgs-open'); 
     131                this.isOpen = this.domref.hasClass('mbgs-open'); 
     132 
     133                if(!this.isOpen) { 
     134                    this._disableEditing(); 
     135                    this.body.find('.mbgs-tray-item-active').removeClass('mbgs-tray-item-active'); 
     136                } 
     137            }, 
     138            close: function() { 
     139                this.domref.removeClass('mbgs-open'); 
     140                this.isOpen = false; 
     141                this._disableEditing(); 
     142                this.body.find('.mbgs-tray-item-active').removeClass('mbgs-tray-item-active'); 
     143            }, 
     144            open: function() { 
     145                this.domref.addClass('mbgs-open'); 
     146                this.isOpen = true; 
     147            }, 
     148            _disableEditing: function() { 
     149                this.layerControls.forEach(function(control) { 
     150                    control._control.removeClass('mbgs-tray-item-active'); 
     151                    control._disableEdit(); 
     152                }); 
     153            }, 
     154            _panTo: function(latLng) { 
     155                if( this.isOpen ) { 
     156                    var targetPoint = this.map.project(latLng).add([250 / 2, 0]); 
     157                    var targetLatLng = map.unproject(targetPoint); 
     158                    this.map.panTo(targetLatLng); 
     159                } 
     160                else { 
     161                    this.map.panTo(latLng); 
     162                } 
     163            }, 
     164            _createTrayItem: function(type) { 
     165                var trayItem = ''; 
     166                trayItem += '<div class="mbgs-tray-item">'; 
     167                trayItem += '   <a href="#" class="mbgs-tray-item-header">'; 
     168                trayItem += '       <span class="ld-icon ld-icon-' + type + '"></span>'; 
     169                trayItem += '       <span>' + type + '</span>'; 
     170                trayItem += '       <span class="mbgs-delete-feature ld-icon ld-icon-trashcan"></span>'; 
     171                trayItem += '   </a>'; 
     172                trayItem += '</div>'; 
     173 
     174                return $(trayItem); 
     175            }, 
     176            addLayerControl: function(layerType, layer) { 
     177                var sidebar = this; 
     178 
     179                var layerControl = { 
     180                    type: layerType, 
     181                    layer: layer, 
     182                    map: sidebar.map, 
     183                    sidebar: sidebar, 
     184                    enabled: false, 
     185                    enable: function() { 
     186                        this.sidebar._disableEditing(); 
     187                        this._enableEdit(); 
     188                        this._control.addClass('mbgs-tray-item-active'); 
     189                        this.enabled = true; 
     190                    }, 
     191                    disable: function() { 
     192                        this._disableEdit(); 
     193                        this._control.removeClass('mbgs-tray-item-active'); 
     194                        this.enabled = false; 
     195                    }, 
     196                    toggle: function() { 
     197                        this._control.toggleClass('mbgs-tray-item-active'); 
     198 
     199                        if( this.enabled ) { 
     200                            this.disable(); 
     201                        } 
     202                        else { 
     203                            this.enable(); 
     204                        } 
     205                    }, 
     206                    _control: null, 
     207                    _enableEdit: function(){}, 
     208                    _disableEdit: function(){}, 
     209                    _init: function() { 
     210                        var self = this; 
     211 
     212                        if( self.type == 'marker' ) { 
     213                            self.layer.on('dragend', function(e) { 
     214                                self.map.fire('sidebareditor:edited', self.layer); 
     215                            }); 
     216 
     217                            self._enableEdit = function() { 
     218                                self.sidebar._panTo(self.layer.getLatLng()); 
     219                                self.layer.dragging.enable(); 
     220                            }; 
     221                            self._disableEdit = function() { 
     222                                self.layer.dragging.disable(); 
     223                            }; 
     224                        } 
     225                        else if(['polyline', 'polygon', 'rectangle'].indexOf(self.type) > -1) { 
     226                            self.layer.on('edit', function(e) { 
     227                                self.map.fire('sidebareditor:edited', self.layer); 
     228                            }); 
     229                            self.type = (self.type == 'rectangle') ? 'polygon' : self.type; 
     230                            self._enableEdit = function() { 
     231                                self.sidebar._panTo(self.layer.getBounds().getCenter()); 
     232                                self.layer.editing.enable(); 
     233                            }; 
     234                            self._disableEdit = function() { 
     235                                self.layer.editing.disable(); 
     236                            }; 
     237                        } 
     238 
     239                        var control = self.sidebar._createTrayItem(self.type); 
     240                        self.sidebar.body.append(control); 
     241                        self._control = control; 
     242 
     243                        control.find('.mbgs-tray-item-header').on('click', function(e) { 
     244                            self.sidebar._disableEditing(); 
     245                            var clickedTrayItem = $(this).parent('.mbgs-tray-item'); 
     246                            clickedTrayItem.toggleClass('mbgs-tray-item-active'); 
     247 
     248                            if( clickedTrayItem.hasClass('mbgs-tray-item-active') ) { 
     249                                self._enableEdit(); 
     250                            } 
     251                        }); 
     252 
     253                        control.find('.mbgs-delete-feature').on('click', function(e) { 
     254                            e.stopPropagation(); 
     255                            e.preventDefault(); 
     256                            self.sidebar.featureGroup.removeLayer(layer); 
     257                            control.remove(); 
     258                            self.map.fire('sidebareditor:deleted', layer); 
     259                        }); 
     260 
     261                        return self; 
     262                    } 
     263                }; 
     264 
     265                var initialized = layerControl._init(); 
     266                sidebar.layerControls.push(initialized); 
     267                return initialized; 
     268            }, 
     269            layerControls: [], 
     270        }; 
     271 
     272        toggle.on('click', function(e) { 
     273            sidebar.toggle(); 
     274        }); 
     275 
     276        return sidebar; 
     277    } 
    81278 
    82279    if( typeof acf.add_action !== 'undefined' ) { 
  • advanced-custom-fields-mapbox-geojson-field/trunk/readme.txt

    r1142388 r1146183  
    33Tags: Advanced Custom Fields, acf, acf5, custom fields, admin, wp-admin, map, mapbox, map-markers, mapping, geojson 
    44Requires at least: 4.0 
    5 Tested up to: 4.1.2 
     5Tested up to: 4.2 
    66Stable tag: trunk 
    77License: GPLv2 or later 
     
    4848== Changelog == 
    4949 
     50= 0.0.3 = 
     51* Added sidebar for selecting and deleting features 
     52 
    5053= 0.0.2 = 
    5154* ACF 4 support 
Note: See TracChangeset for help on using the changeset viewer.