From f74e7c15e98d97ac354249094ee0fcbb720ee2ad Mon Sep 17 00:00:00 2001
From: lonalore <lonalore@freemail.hu>
Date: Thu, 9 Jun 2016 11:50:45 +0200
Subject: [PATCH] Use JS behavior to initialize datepicker.

---
 e107_handlers/form_handler.php                | 102 ++----------------
 .../js/bootstrap-datetimepicker.init.js       |  83 ++++++++++++++
 2 files changed, 92 insertions(+), 93 deletions(-)
 create mode 100644 e107_web/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.init.js

diff --git a/e107_handlers/form_handler.php b/e107_handlers/form_handler.php
index cd42a3ade..7474a7eab 100644
--- a/e107_handlers/form_handler.php
+++ b/e107_handlers/form_handler.php
@@ -1004,8 +1004,6 @@ class e_form
 			}
 		}
 
-		$text = "";
-
 		$class 		= (isset($classes[$type])) ? $classes[$type] : "tbox e-date";
 		$size 		= vartrue($options['size']) ? intval($options['size']) : 40;
 		$required 	= vartrue($options['required']) ? "required" : "";
@@ -1013,114 +1011,32 @@ class e_form
 		$xsize		= (vartrue($options['size']) && !is_numeric($options['size'])) ? $options['size'] : 'xlarge';
 		$disabled 	= vartrue($options['disabled']) ? "disabled" : "";
 
+		$text = "";
+
 		if(vartrue($options['inline']))
 		{
-			$text .= "<div class='{$class}' id='inline-{$id}' data-date-format='{$dformat}'  data-date-ampm='{$ampm}' data-date-firstday='{$firstDay}' ></div>
-				<input  type='hidden' name='{$name}' id='{$id}' value='{$value}' data-date-format='{$dformat}'  data-date-ampm='{$ampm}' data-date-firstday='{$firstDay}' />
-			";
+			$text .= "<div class='{$class}' id='inline-{$id}' data-date-format='{$dformat}' data-date-ampm='{$ampm}' data-date-firstday='{$firstDay}'></div>";
+			$text .= "<input type='hidden' name='{$name}' id='{$id}' value='{$value}' data-date-format='{$dformat}' data-date-ampm='{$ampm}' data-date-firstday='{$firstDay}' />";
 		}
 		else
 		{
-			$text .= "<input class='{$class} input-".$xsize." form-control' type='text' size='{$size}'  id='e-datepicker-{$id}' value='{$value}' data-date-unix ='{$useUnix}' data-date-format='{$dformat}' data-date-ampm='{$ampm}'  data-date-language='".e_LAN."' data-date-firstday='{$firstDay}' {$required} {$disabled} />";
-
+			$text .= "<input class='{$class} input-".$xsize." form-control' type='text' size='{$size}' id='e-datepicker-{$id}' value='{$value}' data-date-unix ='{$useUnix}' data-date-format='{$dformat}' data-date-ampm='{$ampm}' data-date-language='".e_LAN."' data-date-firstday='{$firstDay}' {$required} {$disabled} />";
 			$ftype = (!empty($options['debug'])) ? 'text' : 'hidden';
 			$text .= "<input type='{$ftype}' name='{$name}' id='{$id}' value='{$hiddenValue}' />";
 		}
 
-	//	$text .= "ValueFormat: ".$dateFormat."  Value: ".$value;
-	//	$text .= " ({$dformat}) type:".$dateFormat." ".$value;
-
 		// Load it in the footer.
-		e107::css('core', 	'bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css', 'jquery');
-
-		e107::js('core', 	'bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js', 'jquery', 2);
+		// FIXME use Library Manager (e107::library()) instead?
+		e107::css('core', 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css', 'jquery');
+		e107::js('core', 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js', 'jquery', 2);
+		e107::js('core', 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.init.js', 'jquery', 2);
 
 		if(e_LANGUAGE !== 'English')
 		{
 			e107::js('footer-inline', e107::getDate()->buildDateLocale());
 		}
 
-		e107::js('footer-inline', '
-
-
-			// Fix for changeDate() not being fired when value manually altered.
-			$("input.e-date,input.e-datetime").on("change", function(){
-
-				var useUnix = $(this).attr("data-date-unix");
-
-				if(useUnix !== "true")
-				{
-					var id = $(this).attr("id");
-					var newTarget = "#"+ id.replace("e-datepicker-","");
-					var newValue = $(this).val();
-					 $(newTarget).val(newValue);
-				}
-
-
-			});
-
-
-			$("input.e-date").each(function() {
-        		$(this).datetimepicker({
-        			minView: "month",
-        			maxView: "decade",
-        			autoclose: true,
-        			format: $(this).attr("data-date-format"),
-        			weekStart: $(this).attr("data-date-firstday"),
-        			language: $(this).attr("data-date-language")
-        		 }).on("changeDate", function(ev){
-
-					var useUnix = $(this).attr("data-date-unix");
-					var newValue = "";
-
-					var newTarget = "#"+ ev.target.id.replace("e-datepicker-","");
-
-					if(useUnix === "true")
-					{
-						newValue = parseInt(ev.date.getTime() / 1000);
-					}
-					else
-					{
-						newValue = $("#"+ ev.target.id).val();
-					}
-
-			        $(newTarget).val(newValue);
-
-				})
-    		});
-
-    		$("input.e-datetime").each(function() {
-        		$(this).datetimepicker({
-        			autoclose: true,
-        			format: $(this).attr("data-date-format"),
-        			weekStart: $(this).attr("data-date-firstday"),
-        			showMeridian: $(this).attr("data-date-ampm"),
-        			language: $(this).attr("data-date-language")
-        		 }).on("changeDate", function(ev){
-
-					var useUnix = $(this).attr("data-date-unix");
-					var newValue = "";
-
-					var newTarget = "#"+ ev.target.id.replace("e-datepicker-","");
-
-					if(useUnix === "true")
-					{
-						newValue = parseInt(ev.date.getTime() / 1000);
-					}
-					else
-					{
-						newValue = $("#"+ ev.target.id).val();
-					}
-
-			        $(newTarget).val(newValue);
-
-				})
-    		});
-    		');
-
 		return $text;
-
-
 	}
 
 
diff --git a/e107_web/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.init.js b/e107_web/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.init.js
new file mode 100644
index 000000000..6fd9ea7e0
--- /dev/null
+++ b/e107_web/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.init.js
@@ -0,0 +1,83 @@
+// If you don't insert this line into your JS, you may see the error: e107 is not defined.
+var e107 = e107 || {'settings': {}, 'behaviors': {}};
+
+(function ($) {
+
+    /**
+     * Behavior to initialize date-time-picker on elements.
+     *
+     * @type {{attach: e107.behaviors.bootstrapDatetimepickerInit.attach}}
+     */
+    e107.behaviors.bootstrapDatetimepickerInit = {
+        attach: function (context, settings) {
+            $(context).find('input.e-date,input.e-datetime').once('datetimepicker-onchange-init').each(function () {
+                var $item = $(this);
+
+                // Fix for changeDate() not being fired when value manually altered.
+                $item.on("change", function () {
+                    var $this = $(this);
+                    var useUnix = $this.attr("data-date-unix");
+
+                    if (useUnix !== "true") {
+                        var id = $this.attr("id");
+                        var newTarget = "#" + id.replace("e-datepicker-", "");
+                        var newValue = $this.val();
+                        $(newTarget).val(newValue);
+                    }
+                });
+            });
+
+            $(context).find('input.e-date').once('datetimepicker-init').each(function () {
+                var $item = $(this);
+
+                $item.datetimepicker({
+                    minView: "month",
+                    maxView: "decade",
+                    autoclose: true,
+                    format: $item.attr("data-date-format"),
+                    weekStart: $item.attr("data-date-firstday"),
+                    language: $item.attr("data-date-language")
+                }).on("changeDate", function (ev) {
+                    var useUnix = $(this).attr("data-date-unix");
+                    var newValue = "";
+                    var newTarget = "#" + ev.target.id.replace("e-datepicker-", "");
+
+                    if (useUnix === "true") {
+                        newValue = parseInt(ev.date.getTime() / 1000);
+                    }
+                    else {
+                        newValue = $("#" + ev.target.id).val();
+                    }
+
+                    $(newTarget).val(newValue);
+                });
+            });
+
+            $(context).find('input.e-date').once('datetimepicker-init').each(function () {
+                var $item = $(this);
+
+                $item.datetimepicker({
+                    autoclose: true,
+                    format: $item.attr("data-date-format"),
+                    weekStart: $item.attr("data-date-firstday"),
+                    showMeridian: $item.attr("data-date-ampm"),
+                    language: $item.attr("data-date-language")
+                }).on("changeDate", function (ev) {
+                    var useUnix = $(this).attr("data-date-unix");
+                    var newValue = "";
+                    var newTarget = "#" + ev.target.id.replace("e-datepicker-", "");
+
+                    if (useUnix === "true") {
+                        newValue = parseInt(ev.date.getTime() / 1000);
+                    }
+                    else {
+                        newValue = $("#" + ev.target.id).val();
+                    }
+
+                    $(newTarget).val(newValue);
+                })
+            });
+        }
+    };
+
+})(jQuery);