Merge pull request ezsystems#149 from StephaneDiot/EZP-23745_Time_edi…

…t_for_old_browsers

EZP-23745 time edit for old browsers

Resources/config/yui.yml

@@ -207,7 +207,7 @@ system:
                     type: 'template'
                     path: %ez_platformui.public_dir%/templates/fields/view/dateandtime.hbt
                 ez-time-editview:
-                    requires: ['ez-fieldeditview', 'event-valuechange', 'timeeditview-ez-template', 'datatype-date-format']
+                    requires: ['ez-fieldeditview', 'event-valuechange', 'timeeditview-ez-template', 'datatype-date-format', 'datatype-date']
                     path: %ez_platformui.public_dir%/js/views/fields/ez-time-editview.js
                 timeeditview-ez-template:
                     type: 'template'

Resources/public/js/views/fields/ez-time-editview.js

@@ -27,15 +27,29 @@ YUI.add('ez-time-editview', function (Y) {
             '.ez-time-input-ui input': {
                 'blur': 'validate',
                 'valuechange': 'validate',
-            }
+            },
         },
 
         /**
-         * Validates the current input of time field
+         * Check if browser supports time input
          *
-         * @method validate
+         * @method _detectInputTimeSupport
+         * @private
          */
-        validate: function () {
+        _detectInputTimeSupport: function () {
+            var i = document.createElement("input");
+
+            i.setAttribute("type", "time");
+            return i.type === "time";
+        },
+
+        /**
+         * Validation for browsers supporting time input
+         *
+         * @protected
+         * @method _supportedTimeInputValidate
+         */
+        _supportedTimeInputValidate: function () {
             var validity = this._getInputValidity();
 
             if ( validity.valueMissing ) {
@@ -47,6 +61,37 @@ YUI.add('ez-time-editview', function (Y) {
             }
         },
 
+        /**
+         * Validation for browsers NOT supporting time input
+         *
+         * @protected
+         * @method _unsupportedTimeInputValidate
+         */
+        _unsupportedTimeInputValidate: function () {
+            var validity = this._getInputValidity();
+
+            if ( validity.valueMissing ) {
+                this.set('errorStatus', 'This field is required');
+            } else if ( validity.patternMismatch ) {
+                this.set('errorStatus', 'This time is invalid, enter a correct time: HH:MM(:SS)');
+            } else {
+                this.set('errorStatus', false);
+            }
+        },
+
+        /**
+         * Validates the current input of time field
+         *
+         * @method validate
+         */
+        validate: function () {
+            if (this.get('supportsTimeInput')) {
+                this._supportedTimeInputValidate();
+            } else {
+                this._unsupportedTimeInputValidate();
+            }
+        },
+
         /**
          * Defines the variables to import in the field edit template for time
          *
@@ -60,13 +105,17 @@ YUI.add('ez-time-editview', function (Y) {
                 time = '';
 
             if ( field && field.fieldValue ) {
-                time =  Y.Date.format(new Date(field.fieldValue * 1000), {format:"%T"});
+                if (!this.get('supportsTimeInput') && !def.fieldSettings.useSeconds) {
+                    time =  Y.Date.format(new Date(field.fieldValue * 1000), {format:"%R"});
+                } else {
+                    time =  Y.Date.format(new Date(field.fieldValue * 1000), {format:"%T"});
+                }
             }
-
             return {
                 "isRequired": def.isRequired,
-                "html5InputTime": time,
-                "useSeconds": def.fieldSettings.useSeconds
+                "supportsTimeInput": this.get('supportsTimeInput'),
+                "time": time,
+                "useSeconds": def.fieldSettings.useSeconds,
             };
         },
 
@@ -97,20 +146,75 @@ YUI.add('ez-time-editview', function (Y) {
         },
 
         /**
-         * Returns the currently filled time value
+         * Returns the currently filled time value for browsers which support Time input
          *
          * @protected
-         * @method _getFieldValue
+         * @method _supportedTimeInputGetFieldValue
          * @return {Number}
          */
-        _getFieldValue: function () {
-            var valueOfInput = this._getInputNode().get('valueAsNumber');
+        _supportedTimeInputGetFieldValue: function () {
+            var valueOfInput;
 
+            valueOfInput = this._getInputNode().get('valueAsNumber');
             if (valueOfInput) {
                 return valueOfInput/1000;
             }
             return null;
         },
+
+        /**
+         * Returns the currently filled time value for browsers which DO NOT support Time input
+         *
+         * @protected
+         * @method _unsupportedTimeInputGetFieldValue
+         * @return {Number}
+         */
+        _unsupportedTimeInputGetFieldValue: function () {
+            var time = this._getInputNode().get('value').split(":"),
+                hours,
+                minutes,
+                seconds;
+
+            if ( time.length >= 2 ) {
+                hours = parseInt(time[0], 10)*3600;
+                minutes = parseInt(time[1], 10)*60;
+                seconds = 0;
+                if ( time.length > 2 ) {
+                    seconds = parseInt(time[2], 10);
+                }
+                time = hours + minutes + seconds;
+                return time;
+            }
+            return null;
+        },
+
+        /**
+         * Returns the currently filled time value
+         *
+         * @protected
+         * @method _getFieldValue
+         * @return {Number}
+         */
+        _getFieldValue: function () {
+            if (this.get('supportsTimeInput')) {
+                return this._supportedTimeInputGetFieldValue();
+            } else {
+                return this._unsupportedTimeInputGetFieldValue();
+            }
+        },
+    },{
+        ATTRS: {
+            /**
+             * Checks if browser supports HTML5 time input
+             *
+             * @attribute supportsTimeInput
+             * @readOnly
+             */
+            supportsTimeInput: {
+                valueFn: '_detectInputTimeSupport',
+                readOnly: true
+            },
+        }
     });
 
     Y.eZ.FieldEditView.registerFieldEditView(FIELDTYPE_IDENTIFIER, Y.eZ.TimeEditView);

Resources/public/templates/fields/edit/time.hbt

@@ -9,11 +9,22 @@
         </label>
     </div>
     <div class="pure-u ez-editfield-input-area ez-default-error-style">
-        <div class="ez-editfield-input"><div class="ez-time-input-ui"><input type="time" {{#if useSeconds}}step="1"{{/if}}
-                value="{{ html5InputTime }}"
+        <div class="ez-editfield-input"><div class="ez-time-input-ui">
+            <input type="time" {{#if useSeconds}}step="1"{{/if}}
+                value="{{ time }}"
+                {{#unless supportsTimeInput}}
+                    {{#if useSeconds}}
+                        placeholder="HH:MM:SS"
+                        pattern="^([0-9]|0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):[0-5][0-9]$"
+                    {{else}}
+                        placeholder="HH:MM"
+                        pattern="^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$"
+                    {{/if}}
+                {{/unless}}
                 class="ez-validated-input"
                 id="ez-field-{{ content.contentId }}-{{ fieldDefinition.identifier }}"
                 {{#if isRequired}} required{{/if}}
-            ></div></div>
+                >
+        </div></div>
     </div>
 </div>