[ADD] theme saas-11.3

snippet_google_map/static/description/index.html

@@ -0,0 +1,24 @@
+
+
+<div class="container">
+  <p>The Google Map Snippet embeds a Google Map on your site. This is a great way to display the location of your business or event. Add a title and address for the location to display in the snippet.</p>
+  <br/>
+  <br/>
+
+  <small>When you start typing an address, the page populates a list of autocomplete suggestions powered by Google.</small>
+  <img src="screen_1.jpg" class="img-responsive" alt="">
+  <br/>
+  <br/>
+
+  <div class="row">
+    <div class="col-sm-6">
+      <h4>Map Type</h4>
+      <img src="screen_2.jpg" class="img-responsive" alt="">
+    </div>
+    <div class="col-sm-6">
+      <h4>Map Zoom</h4>
+      <img src="screen_3.jpg" class="img-responsive" alt="">
+    </div>
+  </div>
+
+</div>

snippet_google_map/static/src/js/s_google_map_editor.js

@@ -0,0 +1,123 @@
+odoo.define('snippet_google_map.s_google_map_editor', function (require) {
+    'use strict';
+
+    var ajax = require('web.ajax');
+    var Dialog = require("web_editor.widget").Dialog;
+    var core = require('web.core');
+    var s_options = require('web_editor.snippets.options');
+    var googleScriptLoaded = require("snippet_google_map.s_google_map_frontend").googleScriptLoaded;
+
+    var _t = core._t;
+
+    ajax.loadXML('/snippet_google_map/static/src/xml/s_google_map_modal.xml', core.qweb);
+
+    s_options.registry.map = s_options.Class.extend({
+        default_location: "(50.854975,4.3753899)",
+
+        map: function (previewMode, value, $li) {
+            var self = this;
+
+            this.dialog = new Dialog(this, {
+                size: "medium",
+                title: _t("Customize your map"),
+                buttons: [
+                    {text: _t("Save"), classes: "btn-primary", close: true, click: function () {
+                        if (!this.$("#placeBk").val()) {
+                            this.$("#placeBk").val(self.default_location);
+                        }
+                        self.$target.attr({
+                            "data-map-gps": this.$("#placeBk").val(),
+                            "data-pin-style": this.$("#pin_style").val(),
+                            "data-pin-address": this.$("#pin_address").val(),
+                        });
+                        self.trigger_up('animation_start_demand', {
+                            editableMode: true,
+                            $target: self.$target,
+                        });
+                    }},
+                    {text: _t("Cancel"), close: true}
+                ],
+                $content: $(core.qweb.render("snippet_google_map.s_google_map_modal"))
+            });
+
+            this.dialog.opened().then((function () {
+                this.$("#pin_address").val(self.$target.attr('data-pin-address'));
+                this.$("#pin_style").val(self.$target.attr('data-pin-style'));
+                this.$("#placeBk").val(self.$target.attr('data-map-gps'));
+                self._rpc({ route: '/website/google_maps_api_key' }).then(function (data) {
+                    var data_json = JSON.parse(data);
+                    // show link to settings if API Key is missing
+                    if (!_.str.trim(data_json.google_maps_api_key)) {
+                        this.$('#snippet_google_map_settings_link').removeClass('hidden');
+                    }
+                }.bind(this));
+                var autocomplete = new google.maps.places.Autocomplete(this.$('#pin_address').get(0), {types: ['geocode']});
+                google.maps.event.addListener(autocomplete, 'place_changed', function () {
+                    var place = autocomplete.getPlace();
+                    self.dialog.$("#placeBk").val(place.geometry ? place.geometry.location : self.default_location);
+                });
+            }).bind(this.dialog));
+
+            googleScriptLoaded.then(function () {
+                self.dialog.open();
+            });
+        },
+
+        map_type: function (previewMode, value, $li) {
+            this.$target.attr('data-map-type', value);
+            this.$target.attr('data-map-color', "");
+            this.trigger_up('animation_start_demand', {
+                editableMode: true,
+                $target: this.$target,
+            });
+        },
+
+        map_color: function (previewMode, value, $li) {
+            this.$target.attr('data-map-color', value);
+            this.trigger_up('animation_start_demand', {
+                editableMode: true,
+                $target: this.$target,
+            });
+        },
+
+        map_zoom: function (previewMode, value, $li) {
+            this.$target.attr('data-map-zoom', value);
+            this.trigger_up('animation_start_demand', {
+                editableMode: true,
+                $target: this.$target,
+            });
+        },
+
+        map_gps: function (previewMode, value, $li) {
+            this.$target.attr('data-map-gps', value);
+            this.trigger_up('animation_start_demand', {
+                editableMode: true,
+                $target: this.$target,
+            });
+        },
+
+        _setActive: function () {
+            this.$el.find('[data-map_type]')
+                .removeClass('active')
+                .filter('[data-map_type="'+this.$target.attr('data-map-type')+'"]')
+                .addClass('active');
+            this.$el.find('[data-map_color]')
+                .removeClass('active')
+                .filter('[data-map_color="'+this.$target.attr('data-map-color')+'"]')
+                .addClass('active');
+            this.$el.find('[data-map_zoom]')
+                .removeClass('active')
+                .filter('[data-map_zoom="'+this.$target.attr('data-map-zoom')+'"]')
+                .addClass('active');
+            this.$el.find('[data-map_gps]')
+                .removeClass('active')
+                .filter('[data-map_gps="'+this.$target.attr('data-map-gps')+'"]')
+                .addClass('active');
+        },
+
+        onBuilt: function () {
+            this._super.apply(this, arguments);
+            this.map('click', null, null);
+        },
+    });
+});

snippet_google_map/static/src/js/s_google_map_frontend.js

@@ -0,0 +1,124 @@
+odoo.define('snippet_google_map.s_google_map_frontend', function (require) {
+    'use strict';
+
+    var sAnimation = require('website.content.snippets.animation');
+    var googleScriptLoaded = $.Deferred();
+
+    sAnimation.registry.s_google_map = sAnimation.Class.extend({
+        selector: 'section.s_google_map',
+
+        start: function () {
+            var self = this;
+            var defs = [this._super.apply(this, arguments)];
+            if (typeof google !== 'object' || typeof google.maps !== 'object') {
+                if (!sAnimation.registry.s_google_map.isScriptLoading) {
+                    sAnimation.registry.s_google_map.isScriptLoading = true;
+                    window.odoo_snippet_google_map_redraw_all = function odoo_snippet_google_map_redraw_all() {
+                        _.each($('section.s_google_map'), function (map) {
+                            self.trigger_up('animation_start_demand', {
+                                editableMode: self.editableMode,
+                                $target: $(map),
+                            });
+                        });
+                        sAnimation.registry.s_google_map.isScriptLoading = false;
+                        googleScriptLoaded.resolve();
+                    };
+
+                    defs.push(this._rpc({
+                        route: '/website/google_maps_api_key',
+                    }).then(function (data) {
+                        var key_param = '';
+                        var data_json = JSON.parse(data);
+                        if (data_json.google_maps_api_key !== '') {
+                            key_param = '&key=' + data_json.google_maps_api_key;
+                        }
+                        $('head').append($('<script/>', {
+                            type: "text/javascript",
+                            src: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=odoo_snippet_google_map_redraw_all" + key_param,
+                        }));
+                    }));
+                }
+            } else {
+                this.redraw();
+            }
+            return $.when.apply($, defs);
+        },
+
+        redraw: function () {
+            // Define a default map's colors set
+            var std = [];
+            new google.maps.StyledMapType(std, {name: "Std Map"});
+
+            // Default options, will be overwritten by the user
+            var myOptions = {
+                zoom: 12,
+                center: new google.maps.LatLng(50.854975,4.3753899),
+                mapTypeId: google.maps.MapTypeId.ROADMAP,
+                panControl: false,
+                zoomControl: false,
+                mapTypeControl: false,
+                streetViewControl: false,
+                scrollwheel: false,
+                mapTypeControlOptions: {
+                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
+                }
+            };
+
+            // Render Map
+            var mapC = this.$target.find('.map_container');
+            var map = new google.maps.Map(mapC.get(0), myOptions);
+
+            // Update GPS position
+            var p = this.$target.attr('data-map-gps').substring(1).slice(0, -1).split(',');
+            var gps = new google.maps.LatLng(p[0], p[1]);
+            map.setCenter(gps);
+
+            // Update Map on screen resize
+            google.maps.event.addDomListener(window, 'resize', function () {
+                map.setCenter(gps);
+            });
+
+            // Create Marker & Infowindow
+            if (this.$target.attr('data-pin-style') === "flat") {
+                new google.maps.Marker({
+                    map: map,
+                    animation: google.maps.Animation.DROP,
+                    position: new google.maps.LatLng(p[0],p[1]),
+                    icon: "/snippet_google_map/static/src/img/marker.png",
+                });
+            } else {
+                new google.maps.Marker({
+                    map: map,
+                    animation: google.maps.Animation.DROP,
+                    position: new google.maps.LatLng(p[0], p[1])
+                });
+            }
+
+            map.setMapTypeId(google.maps.MapTypeId[this.$target.attr('data-map-type')]); // Update Map Type
+            map.setZoom(parseInt(this.$target.attr('data-map-zoom'))); // Update Map Zoom
+
+            // Update Map Color
+            if (this.$target.attr('data-map-color') !== "") {
+                this.update_map_color(map);
+            }
+        },
+
+        update_map_color: function (map) {
+            var mapColor = eval("this." + this.$target.attr('data-map-color'));
+            var thisMap = new google.maps.StyledMapType(mapColor, {name: "Styled Map"});
+            map.mapTypes.set('map_style', thisMap);
+            map.setMapTypeId('map_style');
+        },
+    });
+
+    // This prototype permit to save if the google maps script is already loading or not.
+    // This script cannot be loaded 2 times, so if we have 2 snippets in the same view
+    // we don't want to call 2 times the scripts because the first one is not finished.
+    // And we cannot put in in an asset because we don't want to load this script on each
+    // page, but only page with a google maps snippet...
+    sAnimation.registry.s_google_map.prototype.isScriptLoading = false;
+
+    return {
+        googleScriptLoaded: googleScriptLoaded,
+    };
+});

snippet_google_map/static/src/less/s_google_map.less

@@ -0,0 +1,113 @@
+//  ======= Variables ============================
+//  ==============================================
+//  Change main snippet's propriety easily
+
+//  es. @s_google_map-desc-bg: red;
+
+    @s_google_map-desc-alpha        : 0.80;
+    @s_google_map-desc-hover-alpha  : 0.55;
+
+    @s_google_map-desc-bg           : @brand-primary;
+    @s_google_map-desc-hover-bg     : @brand-primary;
+
+    @s_google_map-desc-p-color      : white;
+    @s_google_map-desc-p-color      : white;
+
+//  ====== hooks(hook) =====================================
+//  ===========================================================
+//  Use them to inject NEW rules or overwrite the old ones.
+//  This method is more maintenable than classic css overwrite
+//  'couse it works also if the snippet's structure will change.
+
+//  How to:
+//  in your theme, just call the backdoor like a normal
+//  CSS class adding parethesis at the end ".backdoor-name()"
+//  (this will prevent the creation of a standard CSS class).
+//  Add your rules inside. Your style will take the priority.
+//  Done.
+
+//  .s_google_map-hook() {
+//    background: red;
+//    min-height: 200px;
+//  }
+
+    .s_google_map-hook() {}
+
+    .s_google_map-desc-hook() {}
+
+    .s_google_map-desc-p-hook() {}
+
+    .s_google_map-desc-span-hook() {}
+
+// Default Style ================================
+// ==============================================
+
+.s_google_map {
+  height: 100%;
+  min-height: 100px;
+  position: relative;
+  .s_google_map-hook(); //.s_google_map backdoor
+
+  .map_container {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+  }
+
+  &.readable{
+    .map_container {
+      position: relative;
+    }
+  }
+
+  .description{
+    z-index: 99;
+    background: @s_google_map-desc-bg;
+    background: rgba(red(@s_google_map-desc-bg), green(@s_google_map-desc-bg), blue(@s_google_map-desc-bg) , @s_google_map-desc-alpha);
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    padding: 0 1em;
+    color: white;
+    .transition(background-color 250ms ease);
+    .s_google_map-desc-hook(); //.description backdoor
+
+    font {
+      float: left;
+      margin-top: 20px;
+      margin-bottom: 15px;
+      font-weight: bold;
+      text-transform: uppercase;
+      .s_google_map-desc-p-hook(); //.description p backdoor
+    }
+
+    span{
+      float: left;
+      text-transform: none;
+      font-weight: normal;
+      margin-top: 20px;
+      margin-left: 10px;
+      .s_google_map-desc-span-hook(); //.description span backdoor
+    }
+  }
+
+  &:hover .description{
+      background: @s_google_map-desc-hover-bg;
+      background: rgba(red(@s_google_map-desc-hover-bg), green(@s_google_map-desc-hover-bg), blue(@s_google_map-desc-hover-bg) , @s_google_map-desc-hover-alpha);
+  }
+}
+
+#mapModal {
+  z-index: 3000;
+}
+
+.pac-container { // google map autosuggestion
+  z-index: 3001;
+  &:after {
+    display:none;
+  }
+}

snippet_google_map/static/src/xml/s_google_map_modal.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <div t-name="snippet_google_map.s_google_map_modal" class="form-horizontal">
+        <div class="form-group">
+            <label for="pin_address" class="col-sm-3 control-label text-right">Address</label>
+            <div class="col-sm-9">
+                <div class="input-group">
+                    <div class="input-group-addon"><i class="fa fa-building-o"/></div>
+                    <input type="text" class="form-control" id="pin_address" placeholder="Your address"/>
+                    <input type="hidden" id="placeBk"/>
+                </div>
+            </div>
+            <div class="col-sm-9 col-sm-offset-3">
+                <small class="help-block">e.g. De Brouckere, Brussels, Belgium</small>
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="pin_style" class="col-sm-3 control-label text-right">Marker Style</label>
+            <div class="col-sm-9">
+                <select id="pin_style" name="pin_style" class="col-sm-5">
+                    <option value="flat">Flat</option>
+                    <option>Default</option>
+                </select>
+            </div>
+        </div>
+        <div class="form-group">
+            <small class="col-sm-9 col-sm-offset-3 text-muted hidden" id="snippet_google_map_settings_link">
+                <a href="/web#action=website.action_website_configuration">Set Google Maps API Key in Website Settings</a>
+            </small>
+        </div>
+    </div>
+</templates>