[ADD] theme saas-6

2021-05-25 18:32:22 +02:00
commit b2e6533276
3407 changed files with 104584 additions and 0 deletions
@@ -0,0 +1,27 @@
+
+
+<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>
@@ -0,0 +1,90 @@
+(function(){
+    'use strict';
+
+    var website = openerp.website;
+
+    website.add_template_file('/snippet_google_map/static/src/xml/s_google_map_modal.xml');
+
+    website.openerp_website = {};
+    
+    website.snippet.options.map = website.snippet.Option.extend({
+        
+        map: function (type, value, $li) {
+            if (type !== 'click') return;
+            var self = this;  
+            self.$modal = $(openerp.qweb.render("snippet_google_map.s_google_map_modal"));
+            self.$modal.appendTo('body');
+            self.$modal.modal();
+
+            self.$modal.on('shown.bs.modal', function () {
+                self.$modal.find("#pin_address").val(self.$target.attr('data-pin-address'));
+                self.$modal.find("#pin_style").val(self.$target.attr('data-pin-style'));
+                self.$modal.find("#placeBk").val(self.$target.attr('data-map-gps'));
+                var autocomplete = new google.maps.places.Autocomplete((self.$modal.find('#pin_address').get(0)),{ types: ['geocode'] });
+                google.maps.event.addListener(autocomplete, 'place_changed', function() {
+                    var place = autocomplete.getPlace();
+                    if (!place.geometry) {
+                      self.$modal.find("#placeBk").val("(50.854975,4.3753899)");
+                    } else {
+                        self.$modal.find("#placeBk").val(place.geometry.location);
+                    }
+                });
+            });
+
+            self.$modal.find("#sub_map").on('click', function () {
+                if (!self.$modal.find("#placeBk").val()) {
+                    self.$modal.find("#placeBk").val("(50.854975,4.3753899)")
+                }
+                self.$target.attr('data-map-gps', (self.$modal.find("#placeBk").val()));
+                self.$target.attr('data-pin-style', (self.$modal.find("#pin_style").val()));
+                self.$target.attr('data-pin-address', (self.$modal.find("#pin_address").val()));
+                self.$modal.modal('hide');
+                self.$target.data('snippet-view').redraw();
+            });
+        },
+
+        map_type: function (type, value, $li) {
+            if (type !== 'click') return;
+            this.$target.attr('data-map-type', value);
+            this.$target.attr('data-map-color', "");
+            this.$target.data('snippet-view').redraw();
+        },
+        map_color: function (type, value, $li) {
+            if (type !== 'click') return;
+            this.$target.attr('data-map-color', value);
+            this.$target.data('snippet-view').redraw();
+        },
+        map_zoom: function (type, value, $li) {
+            if (type !== 'click') return;
+            this.$target.attr('data-map-zoom', value);
+            this.$target.data('snippet-view').redraw();
+        },
+        map_gps: function (type, value, $li) {
+            this.$target.attr('data-map-gps', value);
+            this.$target.data('snippet-view').redraw();
+        },
+        set_active: 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');
+        },
+        drop_and_build_snippet: function () {
+          this.map('click', null, null);
+        }
+
+    });
+
+})();
@@ -0,0 +1,113 @@
+
+(function(){
+    'use strict';
+
+    var website = openerp.website;
+    website.openerp_website = {};
+
+    website.snippet.animationRegistry.s_google_map = website.snippet.Animation.extend({
+        selector : "section.s_google_map",
+
+        start: function () {
+            if (typeof google !== 'object' || typeof google.maps !== 'object') {
+                if (!website.snippet.animationRegistry.s_google_map.isScriptLoading) {
+                    website.snippet.animationRegistry.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) {
+                            $(map).data('snippet-view') && $(map).data('snippet-view').redraw();
+                        });
+                        website.snippet.animationRegistry.s_google_map.isScriptLoading = false;
+                    };
+
+                    $('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",
+                    }));
+                }
+            } else {
+                this.redraw();
+            }
+        },
+
+        redraw: function () {
+            // Define a default map's colors set
+            var std = [];
+            var stdMap = 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'), 
+                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") {
+                var marker_url = '/snippet_google_map/static/src/img/marker.png';
+
+                var marker = new google.maps.Marker({
+                    map: map,
+                    animation: google.maps.Animation.DROP,
+                    position: new google.maps.LatLng(p[0],p[1]),
+                    icon: marker_url
+                });
+            } else {
+                var marker = new google.maps.Marker({
+                    map: map,
+                    animation: google.maps.Animation.DROP,
+                    position: new google.maps.LatLng(p[0], p[1])
+                });
+            }
+
+            // Update Map Type
+            map.setMapTypeId(google.maps.MapTypeId[this.$target.attr('data-map-type')]);
+
+            // Update Map Zoom
+            map.setZoom(parseInt(this.$target.attr('data-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...
+    website.snippet.animationRegistry.s_google_map.prototype.isScriptLoading = false;
+
+})();
@@ -0,0 +1,116 @@
+//  ======= 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: 300px;
+  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;
+  }
+}
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+  <t t-name="snippet_google_map.s_google_map_modal">
+    <div class="modal fade" id="mapModal" contenteditable="False" contentEditable="false" backdrop="false" tabindex="1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal">
+              <span aria-hidden="true">×</span>
+              <span class="sr-only">Close</span>
+            </button>
+            <h4 class="modal-title">Customize your map</h4>
+          </div>
+          <div class="modal-body" contenteditable="false">
+            <div class="form-group">
+              <label for="pin_address text-right" class="col-sm-3 control-label text-right">Address</label>
+              <div class="input-group col-sm-8">  
+                <div class="input-group-addon"><i class="fa fa-building-o"></i></div>
+                <input type="text" class="form-control" id="pin_address" placeholder="Your address" />
+                <input type="hidden" id="placeBk"/>
+              </div>
+              <div class="col-sm-8 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="input-group col-sm-8">
+                <select id="pin_style" name="pin_style" class=" col-sm-5">
+                  <option value="flat">Flat</option>
+                  <option>Default</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button id="cancel" data-dismiss="modal" class="btn btn-primary">Cancel</button>
+            <button id="sub_map"  class="btn btn-danger">Save</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </t>
+</templates>