plone.app.event/thet-js-init: In the plone.app.event JavaScript initialization, explicitly

Repository: plone.app.event
Branch: refs/heads/thet-js-init
Date: 2017-07-12T16:18:59+02:00
Author: Johannes Raggam (thet) <[email protected]>
Commit: https://github.com/plone/plone.app.event/commit/09394298bb39b029f5895dffc8eecc81691ef3c5

In the plone.app.event JavaScript initialization, explicitly wait until pickadate has been initialized and all DOM elements are found.
Fixes a problem, where the time part wasn't hidden on open end events.

Files changed:
M CHANGES.rst
M plone/app/event/browser/resources/event.js

diff --git a/CHANGES.rst b/CHANGES.rst
index 8341b4ed..88a7613b 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -14,7 +14,9 @@ New features:
 
 Bug fixes:
 
-- *add item here*
+- In the plone.app.event JavaScript initialization, explicitly wait until pickadate has been initialized and all DOM elements are found.
+  Fixes a problem, where the time part wasn't hidden on open end events.
+  [thet]
 
 
 3.0.5 (2017-07-03)
@@ -26,9 +28,9 @@ New features:
   https://plone/Products.CMFPlone#1734 [fgrcon]
   applied https://github.com/plone/Products.CMFPlone/issues/1483
   [fgrcon]
-  
+
 Bug fixes:
- 
+
 - fixed css-classes for thumb scales ...
   https://github.com/plone/Products.CMFPlone/issues/2077
   [fgrcon]
diff --git a/plone/app/event/browser/resources/event.js b/plone/app/event/browser/resources/event.js
index bc1c3ab8..e4a3ed87 100644
--- a/plone/app/event/browser/resources/event.js
+++ b/plone/app/event/browser/resources/event.js
@@ -139,19 +139,20 @@ require([
         }
     }
 
-    function initilize_event() {
-
-        // EDIT FORM
-        var $start_input         = $('form input.event_start');
-        var $start_container     = $start_input.closest('div');
-        var $pickadate_starttime = $('.pattern-pickadate-time-wrapper', $start_container);
-
-        var $end_input           = $('form input.event_end');
-        var $end_container       = $end_input.closest('div');
-        var $pickadate_endtime   = $('.pattern-pickadate-time-wrapper', $end_container);
-
-        var $whole_day_input     = $('form input.event_whole_day');
-        var $open_end_input      = $('form input.event_open_end');
+    function initilize_event(
+        $start_input,
+        $start_container,
+        $pickadate_starttime,
+        $end_input,
+        $end_container,
+        $pickadate_endtime,
+        $whole_day_input,
+        $open_end_input
+    ) {
+
+        if (!$pickadate_starttime.length || !$pickadate_endtime.length || !$whole_day_input.length) {
+            debugger;
+        }
 
         // WHOLE DAY INIT
         if ($whole_day_input.length > 0) {
@@ -186,14 +187,59 @@ require([
 
     }
 
-    // mockup-core should trigger event once it initiallized all patterns (in
-    // mockup-core) but it only sets body class once all patterns were
-    // initialized
+
+    function get_dom_element(sel) {
+        /* Try to get the DOM element from a selector and return it or return undefined.
+         * */
+        var $el = $(sel);
+        return $el.length ? $el : undefined;
+    }
+
+    // Initialize necessary DOM elements and wait until all are foumd.
+    var $start_input,
+        $start_container,
+        $pickadate_starttime,
+        $end_input,
+        $end_container,
+        $pickadate_endtime,
+        $whole_day_input,
+        $open_end_input;
+
     var interval = setInterval(function(){
-      if ($(document.body).hasClass('patterns-loaded')) {
-        clearInterval(interval);
-        initilize_event();
-      }
+        $start_input     = !$start_input && get_dom_element('form input.event_start');
+        $start_container = !$start_container && $start_input && $start_input.closest('div');
+        $pickadate_starttime = !$pickadate_starttime && $start_container && get_dom_element('.pattern-pickadate-time-wrapper', $start_container);
+
+        $end_input       = !$end_input && get_dom_element('form input.event_end');
+        $end_container   = !$end_container && $end_input && $end_input.closest('div');
+        $pickadate_endtime = !$pickadate_endtime && $end_container && $('.pattern-pickadate-time-wrapper', $end_container);
+
+        $whole_day_input = !$whole_day_input && get_dom_element('form input.event_whole_day');
+        $open_end_input  = !$open_end_input && get_dom_element('form input.event_open_end');
+
+        if (
+            $start_input &&
+            $start_container &&
+            $pickadate_starttime &&
+            $end_input &&
+            $end_container &&
+            $pickadate_endtime &&
+            $whole_day_input &&
+            $open_end_input
+        ) {
+            clearInterval(interval);
+            initilize_event(
+                $start_input,
+                $start_container,
+                $pickadate_starttime,
+                $end_input,
+                $end_container,
+                $pickadate_endtime,
+                $whole_day_input,
+                $open_end_input
+            );
+        }
+
     }, 100);
 
 });



------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot