Update Map block

common.blocks/map-helper/_provider/map-helper_provider_google.js

@@ -0,0 +1,34 @@
+/**
+ * @module map-helper_provider_google
+ * @description Provide google map API (load if it does not exist).
+ */
+
+modules.define(
+    'map-helper_provider_google',
+    ['loader_type_js'],
+    function(provide, loader) {
+
+    var cfg = {
+        version : '3.exp',
+        language : 'ru',
+        coreurl : '//maps.googleapis.com/maps/api/js'
+    };
+
+    var config = cfg.coreurl +
+                    '?v=' + cfg.version +
+                    '&language=' + cfg.language;
+
+    /* global google */
+
+    function doProvide() {
+        /**
+         * @exports
+         * @type Function
+         */
+        provide(google.maps);
+    }
+
+    (typeof google || (typeof google && typeof google.maps)) !== 'undefined'?
+        doProvide() :
+        loader(config, doProvide);
+});

common.blocks/map-helper/_provider/map-helper_provider_yandex.js

@@ -0,0 +1,35 @@
+/**
+ * @module map-helper_provider_yandex
+ * @description Provide yandex map API (load if it does not exist).
+ */
+
+modules.define(
+    'map-helper_provider_yandex',
+    ['loader_type_js'],
+    function(provide, loader) {
+
+    var cfg = {
+        version : 2.1,
+        lang : 'ru_RU',
+        package : 'package.full',
+        coreurl : '//api-maps.yandex.ru/'
+    };
+
+    var config = cfg.coreurl + cfg.version +
+                    '?lang=' + cfg.lang +
+                    '&load=' + cfg.package;
+
+    /* global ymaps */
+
+    function doProvide() {
+        /**
+         * @exports
+         * @type Function
+         */
+        provide(ymaps);
+    }
+
+    typeof ymaps !== 'undefined'?
+        doProvide() :
+        loader(config, doProvide);
+});

common.blocks/map-helper/map-helper.deps.js

@@ -0,0 +1,8 @@
+({
+    shouldDeps : [
+        { block : 'loader', mods : { type : 'js' } },
+        {
+            mods : ['provider']
+        }
+    ]
+})

common.blocks/map/_provider/map_provider_google.deps.js

@@ -0,0 +1,10 @@
+({
+    shouldDeps : [
+        {
+            block : 'map-helper',
+            mods : {
+                provider : 'google'
+            }
+        }
+    ]
+})

common.blocks/map/_provider/map_provider_google.js

@@ -0,0 +1,54 @@
+/**
+ * @module map_provider_google
+ * @description map block.
+ */
+
+modules.define('map_provider_google',
+    ['i-bem__dom', 'map-helper_provider_google'],
+    function(provide, DOM, gmaps) {
+
+        DOM.decl('map', {
+            onSetMod : {
+                'js' : {
+                    'inited' : function() {
+                        if(this.getMod('provider') === 'google') {
+                            this._drawMap();
+                        }
+                    }
+                }
+            },
+
+            /**
+             * Draw map unit
+             */
+            _drawMap : function() {
+                var options = {
+                    center : this._toLatlng(this.params.center),
+                    zoom : this.params.zoom,
+                    mapTypeId : gmaps.MapTypeId[this.params.type]
+                };
+                window.onload = function() {
+                    this._map = new gmaps.Map(this.domElem[0], options);
+                };
+            },
+
+            /**
+             * Convert coordinates array to Latlng object
+             *
+             * @param {Array} coord
+             * @returns {google.maps.Latlng}
+             */
+            _toLatlng : function(coord) {
+                return new gmaps.Latlng(coord[0], coord[1]);
+            },
+
+            /**
+             * @return {Map | Null}
+             */
+            getMap : function() {
+                return this._map || null;
+            }
+        });
+
+        provide(DOM);
+});

common.blocks/map/_provider/map_provider_yandex.deps.js

@@ -0,0 +1,10 @@
+({
+    shouldDeps : [
+        {
+            block : 'map-helper',
+            mods : {
+                provider : 'yandex'
+            }
+        }
+    ]
+})

common.blocks/map/_provider/map_provider_yandex.js

@@ -0,0 +1,88 @@
+/**
+ * @module map_provider_yandex
+ * @description map block.
+ */
+
+modules.define('map_provider_yandex',
+    ['i-bem__dom', 'map-helper_provider_yandex'],
+    function(provide, DOM, ymaps) {
+
+        DOM.decl('map', {
+            onSetMod : {
+                'js' : {
+                    'inited' : function() {
+                        if(this.getMod('provider') === 'yandex') {
+                            this._drawMap();
+                        }
+                    }
+                }
+            },
+
+            /**
+             * Draw map unit
+             */
+            _drawMap : function() {
+                var params = this.params;
+                ymaps.ready(function() {
+                    this._map = new ymaps.Map(this.domElem[0], params);
+                    this._drawGeoObjects();
+                }.bind(this));
+            },
+
+            /**
+             * Draws geoObjects derived from bemjson
+             */
+            _drawGeoObjects : function() {
+                this.params.geoObjects.forEach(
+                    function(geoObject) {
+                        var coords = geoObject.coordinates;
+                        var properties = geoObject.properties;
+                        var options = geoObject.options;
+                        var type;
+                        switch(geoObject.type) {
+                            case 'placemark':
+                                type = 'Point';
+                                break;
+                            case 'polyline':
+                                type = 'LineString';
+                                break;
+                            case 'rectangle':
+                                type = 'Rectangle';
+                                break;
+                        }
+                        this.addGeoObject({
+                            type : type,
+                            coordinates : coords
+                        }, properties, options);
+                    }, this
+                );
+            },
+
+            /**
+             * Add geoObject to map
+             * @param {Object} geometry
+             * @param {Object} properties
+             * @param {Object} options
+             */
+            addGeoObject : function(geometry, properties, options) {
+                ymaps.ready(function() {
+                    this._map.geoObjects.add(new ymaps.GeoObject(
+                        {
+                            geometry : geometry,
+                            properties : properties
+                        },
+                        options
+                    ));
+                }.bind(this));
+            },
+
+            /**
+             * @return {Map | Null}
+             */
+            getMap : function() {
+                return this._map || null;
+            }
+        });
+
+        provide(DOM);
+});

common.blocks/map/map.bemhtml

@@ -0,0 +1,49 @@
+block('map')(
+    js()(function() {
+        var ctx = this.ctx;
+        switch (ctx.mods.provider) {
+            case 'yandex':
+                ctx.defaultType = 'yandex#map';
+                ctx.objects = [];
+                ctx.geoObjects && ctx.geoObjects.forEach(function(geoObject) {
+                    var options = {};
+                    if (geoObject.options) {
+                        var geoOptions = geoObject.options;
+                        options['preset'] = geoObject.iconContent &&
+                                    (geoObject.options.preset || 'islands#blueStretchyIcon');
+                        if (geoOptions) {
+                            for(var opt in geoOptions) {
+                                options[opt] = geoOptions[opt];
+                            }
+                        }
+                    } else {
+                        options['preset'] = geoObject.iconContent && 'islands#blueStretchyIcon';
+                    }
+
+                    ctx.objects.push({
+                        type : geoObject.type || 'placemark',
+                        coordinates : geoObject.coordinates,
+                        properties : {
+                            iconContent : geoObject.iconContent,
+                            hintContent : geoObject.hintContent,
+                            balloonContent : geoObject.balloonContent
+                        },
+                        options : options
+                    });
+                });
+                break;
+            case 'google':
+                ctx.defaultType = 'ROADMAP';
+                break;
+        }
+
+        return {
+            id : ctx.id,
+            center : ctx.center,
+            zoom : ctx.zoom || 12,
+            type : ctx.type || ctx.defaultType,
+            controls : ctx.controls,
+            geoObjects : ctx.objects
+        };
+    })
+);

common.blocks/map/map.bh.js

@@ -0,0 +1,16 @@
+// Сейчас он не актуальный
+// TODO: Сделать его с тем же функционалом что и bemhtml
+
+module.exports = function(bh) {
+
+    bh.match('map', function(ctx, json) {
+        ctx.js({
+          id : json.id,
+          center : json.center,
+          zoom : json.zoom,
+          controls : json.controls,
+          geoObjects : json.geoObjects
+        });
+        ctx.attr('id', json.id);
+    });
+};

common.blocks/map/map.deps.js

@@ -0,0 +1,8 @@
+({
+    shouldDeps : [
+        {
+            block : 'ymaps'
+            // mod
+        }
+    ]
+})

common.blocks/map/map.tests/.bem/level.js

@@ -0,0 +1 @@
+exports.baseLevelPath = require.resolve('../../../../.bem/levels/tests');

common.blocks/map/map.tests/google.bemjson.js

@@ -0,0 +1,53 @@
+({
+    block : 'page',
+    title : 'Google Maps Examples',
+    head : [
+        { elem : 'css', url : '_google.css' },
+        { elem : 'js', url : '_google.js' }
+    ],
+    content : [
+        {
+            block : 'wrapper',
+            content : {
+                block : 'map',
+                mods : {
+                    provider : 'google'
+                },
+                center : [55.751574, 37.573856],
+                zoom : 10,
+                controls : [],
+                geoObjects : [
+                    {
+                        coordinates :  [55.751574, 37.573856],
+                        hintContent : 'тест',
+                        iconContent : 'Длинный текст'
+                    },
+                    {
+                        type : 'placemark',
+                        coordinates :  [55.621515, 37.333333]
+                    },
+                    {
+                        type : 'rectangle',
+                        coordinates :  [[55.751574, 37.573856], [55.621515, 37.333333]],
+                        options : {
+                            draggable : true,
+                            strokeWidth : 5,
+                            strokeOpacity : 0.7
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            block : 'wrapper',
+            content : {
+                block : 'map',
+                mods : {
+                    provider : 'google'
+                },
+                center : [55.751574, 37.573856],
+                zoom : 10
+            }
+        }
+    ]
+})

common.blocks/map/map.tests/google.blocks/page/page.styl

@@ -0,0 +1,4 @@
+.page
+{
+    text-align: center;
+}

common.blocks/map/map.tests/google.blocks/wrapper/wrapper.styl

@@ -0,0 +1,8 @@
+.wrapper
+{
+    height: 500px;
+    width: 500px;
+    padding: 1em;
+    margin: 1em;
+    display: inline-block;
+}