[IMP] point_of_sale: initial commit for the fullscreen mode.

The fullscreen option will detect if the pos is displayed in fullscreen
and if not will tell the user how to set it up for fullscreen, or propose
to go fullscreen with the HTML5 Built-in API.

The HTML5 API requires a click from the user to allow fullscreen, so the
popup will pop everytime unless the user has setup kiosk-mode or native
application emulation which makes the app start in real fullscreen.

addons/point_of_sale/point_of_sale.py

@@ -72,6 +72,7 @@ class pos_config(osv.osv):
         'iface_scan_via_proxy' : fields.boolean('Scan via Proxy', help="Enable barcode scanning with a remotely connected barcode scanner"),
         'iface_invoicing': fields.boolean('Invoicing',help='Enables invoice generation from the Point of Sale'),
         'iface_big_scrollbars': fields.boolean('Large Scrollbars',help='For imprecise industrial touchscreens'),
+        'iface_fullscreen':     fields.boolean('Fullscreen', help='Display the Point of Sale in full screen mode'),
         'receipt_header': fields.text('Receipt Header',help="A short text that will be inserted as a header in the printed receipt"),
         'receipt_footer': fields.text('Receipt Footer',help="A short text that will be inserted as a footer in the printed receipt"),
         'proxy_ip':       fields.char('IP Address', help='The hostname or ip address of the hardware proxy, Will be autodetected if left empty', size=45),

addons/point_of_sale/point_of_sale_view.xml

@@ -658,6 +658,7 @@
                                 <field name="iface_invoicing" />
                             </group>
                             <group>
+                                <field name="iface_fullscreen" />
                                 <field name="iface_big_scrollbars" />
                             </group>
                         </group>

addons/point_of_sale/static/src/css/pos.css

@@ -1663,7 +1663,7 @@ td {
 .pos .popup .comment{
     font-weight: normal;
     font-size: 18px;
-    margin: 0px 16px;
+    margin: 0px 16px 16px 16px;
 }
 .pos .popup .footer{
     position:absolute;

addons/point_of_sale/static/src/js/screens.js

@@ -314,6 +314,26 @@ function openerp_pos_screens(instance, module){ //module is instance.point_of_sa
     });
 
 
+    module.FullscreenPopup = module.PopUpWidget.extend({
+        template:'FullscreenPopupWidget',
+        show: function(){
+            var self = this;
+            this._super();
+            this.renderElement();
+            this.$('.button.fullscreen').off('click').click(function(){
+                window.document.body.webkitRequestFullscreen();
+                self.pos_widget.screen_selector.close_popup();
+            });
+            this.$('.button.cancel').off('click').click(function(){
+                self.pos_widget.screen_selector.close_popup();
+            });
+        },
+        ismobile: function(){
+            return typeof window.orientation !== 'undefined'; 
+        }
+    });
+
+
     module.ChooseReceiptPopupWidget = module.PopUpWidget.extend({
         template:'ChooseReceiptPopupWidget',
         show: function(){

addons/point_of_sale/static/src/js/widgets.js

@@ -1001,6 +1001,10 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
                     self.screen_selector.show_popup('error', 'Sorry, we could not create a user session');
                 }else if(!self.pos.config){
                     self.screen_selector.show_popup('error', 'Sorry, we could not find any PoS Configuration for this session');
+                }else if(self.pos.config.iface_fullscreen && document.body.webkitRequestFullscreen && (
+                    window.screen.availWidth  > window.innerWidth ||
+                    window.screen.availHeight > window.innerHeight    )){
+                    self.screen_selector.show_popup('fullscreen');
                 }
             
                 self.$('.loader').animate({opacity:0},1500,'swing',function(){self.$('.loader').addClass('oe_hidden');});
@@ -1085,6 +1089,9 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
             this.confirm_popup = new module.ConfirmPopupWidget(this,{});
             this.confirm_popup.appendTo(this.$el);
 
+            this.fullscreen_popup = new module.FullscreenPopup(this,{});
+            this.fullscreen_popup.appendTo(this.$el);
+
             // --------  Misc ---------
 
             this.close_button = new module.HeaderButtonWidget(this,{
@@ -1140,6 +1147,7 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
                     'error-no-client': this.error_no_client_popup,
                     'error-invoice-transfer': this.error_invoice_transfer_popup,
                     'confirm': this.confirm_popup,
+                    'fullscreen': this.fullscreen_popup,
                 },
                 default_screen: 'products',
                 default_mode: 'cashier',

addons/point_of_sale/static/src/xml/pos.xml

@@ -586,6 +586,51 @@
         </div>
     </t>
 
+    <t t-name="FullscreenPopupWidget">
+        <div class="modal-dialog">
+            <div class="popup popup-fullscreen">
+                <p class="message">Fullscreen Setup</p>
+
+                <t t-if='widget.ismobile()'>
+                    <p class="comment">
+                        The best way to make the point of sale fullscreen on mobile
+                        devices is to add the point of sale to your home screen. On 
+                        iPhone and iPad this is done by tapping <img src='/point_of_sale/static/src/img/ios-share-icon.png' />
+                        and then <i>Add to Homescreen</i>
+                    </p>
+                    <p class='comment'>
+                        This also works on Android with the Chrome Beta Browser, using the <i>Add to Homescreen</i> option 
+                        in the browser's menu.
+                    </p>
+                    <p class='comment'> 
+                        If you want to work in fullscreen just this time tap the <i>Go Fullscreen</i> button.
+                    </p>
+                </t>
+
+                <t t-if='!widget.ismobile()'>
+                    <p class="comment">
+                        The best way to make the point of sale fullscreen on desktop
+                        and laptops is to launch your browser in kiosk mode. Please
+                        refer to your browser's documentation for the specific 
+                        instructions.
+                    </p>
+                    <p class="comment">
+                        If you want to work in fullscreen just this time, click the <i> Go Fullscreen</i> button.
+                    </p>
+                </t>
+
+                <div class="footer">
+                    <div class="button fullscreen">
+                        Go Fullscreen
+                    </div>
+                    <div class="button cancel">
+                        Cancel
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+
     <t t-name="ErrorSessionPopupWidget">
         <div class="modal-dialog">
             <div class="popup popup-nosession">