[ADD] theme 8.0

snippet_google_map/static/description/index.html

@@ -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>

snippet_google_map/static/src/img/marker.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.19;}
+	.st1{fill:#D36868;}
+	.st2{fill:#AF5151;}
+	.st3{fill:#913D3D;}
+</style>
+<ellipse class="st0" cx="23.5" cy="44.7" rx="10.4" ry="3.3"/>
+<path class="st1" d="M23.5,0c-9.4,0-17,7.5-17,16.8s17,28,17,28s17-18.7,17-28S32.9,0,23.5,0z"/>
+<circle class="st2" cx="23.5" cy="15.5" r="4.2"/>
+<path class="st3" d="M23.5,12.2c2.2,0,3.9,1.6,4.2,3.8c0-0.2,0.1-0.3,0.1-0.5c0-2.3-1.9-4.2-4.2-4.2s-4.2,1.9-4.2,4.2
+	c0,0.2,0,0.3,0.1,0.5C19.6,13.9,21.3,12.2,23.5,12.2z"/>
+</svg>

snippet_google_map/static/src/js/s_google_map_editor.js

@@ -0,0 +1,91 @@
+(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_title").val(self.$target.attr('data-pin-title'));
+                self.$modal.find("#pin_style").val(self.$target.attr('data-pin-style'));
+                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.$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);
+        },
+        start: function () {
+          this.$target.data('snippet-view').redraw();
+        }
+    });
+
+})();

snippet_google_map/static/src/js/s_google_map_frontend.js

@@ -0,0 +1,101 @@
+
+(function(){
+    'use strict';
+
+    var website = openerp.website;
+    website.openerp_website = {};
+
+    // GARDENIA MAP 
+    website.snippet.animationRegistry.s_google_map = website.snippet.Animation.extend({
+        selector : "section.s_google_map",
+
+        start : function() {
+            var self = this;
+            if (typeof google === 'object' && typeof google.maps === 'object') {
+                self.redraw();
+            }
+        },
+    
+        redraw: function () {
+            var self = this;
+
+            //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    = self.$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);
+            });
+            google.maps.event.addDomListener(map, 'resize', function() {
+                map.setCenter(gps);
+            });
+
+            //Create Marker & Infowindow 
+            if(self.$target.attr('data-pin-style') == "flat") {
+                var is_internetExplorer11 = navigator.userAgent.toLowerCase().indexOf('trident') > -1;
+                var marker_url = (is_internetExplorer11) ? '/snippet_google_map/static/src/img/s_google_map/marker.png' : '/snippet_google_map/static/src/img/marker.svg';
+
+                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[self.$target.attr('data-map-type')]);
+
+            //Update Map Zoom
+            map.setZoom(parseInt(self.$target.attr('data-map-zoom')));
+
+            //Update Map Color (execute only if a map color palette is not defined)
+            if(self.$target.attr('data-map-color') != ""){
+                self.update_map_color(map);
+            }
+        },
+
+        update_map_color: function(map){
+            var self = this;
+            var mapColor = eval("self." + self.$target.attr('data-map-color'));
+            
+            var thisMap = new google.maps.StyledMapType(mapColor, {name: "TEST"});
+            map.mapTypes.set('map_style', thisMap);
+            map.setMapTypeId('map_style');
+            
+        }
+
+
+    });
+})();

snippet_google_map/static/src/less/s_google_map.less

@@ -0,0 +1,115 @@
+//  ======= 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%;
+  } 
+
+  .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;
+    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;
+}
+
+a#map_options:after {
+  content: none;
+}
+
+.cke_editable section.s_google_map {
+  div.controls {
+    display: block;
+  }
+} 

snippet_google_map/static/src/xml/s_google_map_modal.xml

@@ -0,0 +1,55 @@
+<?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-labelledby="myModalLabel" aria-hidden="true" style="z-index:2001">
+  
+    <div class="modal-dialog">
+      <div class="modal-content gard_modal">
+        <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> <!-- modal-body -->
+
+        <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><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- / .modal -->
+</t>
+</templates>