Set JavaScript data via element attributes for SegmentSelectorControl. Introduced new UIControl PHP class to function as base type for reusable controls (the analog of UIControl JS type).

5 files changed, 56 insertions, 20 deletions

diff --git a/core/View.php b/core/View.php
index 8ecbce9451..ba60198ddd 100644
--- a/core/View.php
+++ b/core/View.php
@@ -176,7 +176,7 @@ class View implements ViewInterface
      * @param string $key The variable name.
      * @return mixed The variable value.
      */
-    public function __get($key)
+    public function &__get($key)
     {
         return $this->templateVars[$key];
     }
diff --git a/core/View/UIControl.php b/core/View/UIControl.php
new file mode 100644
index 0000000000..90d0b0b331
--- /dev/null
+++ b/core/View/UIControl.php
@@ -0,0 +1,36 @@
+<?php
+/**
+ * Piwik - Open source web analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ *
+ */
+namespace Piwik\View;
+
+/**
+ * Base type of UI controls.
+ *
+ * The JavaScript companion class can be found in plugins/CoreHome/javascripts/uiControl.js.
+ *
+ * @api
+ */
+class UIControl extends \Piwik\View
+{
+    /**
+     * The Twig template file that generates the control's HTML.
+     *
+     * Derived classes must set this constant.
+     */
+    const TEMPLATE = '';
+
+    /**
+     * Constructor.
+     */
+    public function __construct() {
+        parent::__construct(static::TEMPLATE);
+
+        $this->clientSideProperties = array();
+        $this->clientSideParameters = array();
+    }
+}
\ No newline at end of file
diff --git a/plugins/SegmentEditor/SegmentSelectorControl.php b/plugins/SegmentEditor/SegmentSelectorControl.php
index 08324a5bca..d1ec4749cc 100644
--- a/plugins/SegmentEditor/SegmentSelectorControl.php
+++ b/plugins/SegmentEditor/SegmentSelectorControl.php
@@ -12,13 +12,13 @@ use Piwik\Common;
 use Piwik\Config;
 use Piwik\Piwik;
 use Piwik\Plugins\API\API as APIMetadata;
-use Piwik\View;
+use Piwik\View\UIControl;
 use Piwik\Access;
 
 /**
  * Generates the HTML for the segment selector control (which includes the segment editor).
  */
-class SegmentSelectorControl extends View
+class SegmentSelectorControl extends UIControl
 {
     const TEMPLATE = "@SegmentEditor/_segmentSelector";
 
@@ -27,7 +27,7 @@ class SegmentSelectorControl extends View
      */
     public function __construct()
     {
-        parent::__construct(self::TEMPLATE);
+        parent::__construct();
 
         $this->isSuperUser = Access::getInstance()->hasSuperUserAccess();
         $this->idSite = Common::getRequestVar('idSite', false, 'int');
@@ -51,7 +51,7 @@ class SegmentSelectorControl extends View
 
         $this->segmentsByCategory   = $segmentsByCategory;
         $this->nameOfCurrentSegment = '';
-        $this->isSegmentNotAppliedBecauseBrowserArchivingIsDisabled = 0;
+        $this->clientSideProperties['isSegmentNotAppliedBecauseBrowserArchivingIsDisabled'] = 0;
 
         $savedSegments = API::getInstance()->getAll($this->idSite);
         foreach ($savedSegments as &$savedSegment) {
@@ -59,13 +59,15 @@ class SegmentSelectorControl extends View
 
             if (!empty($currentSelectedSegment) && $currentSelectedSegment == $savedSegment['definition']) {
                 $this->nameOfCurrentSegment = $savedSegment['name'];
-                $this->isSegmentNotAppliedBecauseBrowserArchivingIsDisabled = $this->wouldApplySegment($savedSegment) ? 0 : 1;
+                $this->clientSideProperties['isSegmentNotAppliedBecauseBrowserArchivingIsDisabled']
+                    = $this->wouldApplySegment($savedSegment) ? 0 : 1;
             }
         }
 
-        $this->savedSegmentsJson = Common::json_encode($savedSegments);
+        $this->clientSideProperties['availableSegments'] = $savedSegments;
+        $this->clientSideProperties['segmentTranslations'] = $this->getTranslations();
+
         $this->authorizedToCreateSegments = !Piwik::isUserIsAnonymous();
-        $this->segmentTranslations = Common::json_encode($this->getTranslations());
     }
 
     private function wouldApplySegment($savedSegment)
diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index 03bc1aab1f..162e35e107 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -998,7 +998,9 @@ $(document).ready(function() {
     var SegmentSelectorControl = function (element) {
         UIControl.call(this, element);
 
-        if ((typeof isSegmentNotAppliedBecauseBrowserArchivingIsDisabled != "undefined") && isSegmentNotAppliedBecauseBrowserArchivingIsDisabled) {
+        if ((typeof this.props.isSegmentNotAppliedBecauseBrowserArchivingIsDisabled != "undefined")
+            && this.props.isSegmentNotAppliedBecauseBrowserArchivingIsDisabled
+        ) {
             piwikHelper.modalConfirm('.pleaseChangeBrowserAchivingDisabledSetting', {yes: function () {}});
         }
 
@@ -1091,16 +1093,16 @@ $(document).ready(function() {
         if($.browser.mozilla) {
             segmentFromRequest = decodeURIComponent(segmentFromRequest);
         }
-        var segmentationFtw = new Segmentation({
+        this.impl = new Segmentation({
             "target"   : this.$element.find(".segmentListContainer"),
             "segmentAccess" : "write",
-            "availableSegments" : availableSegments,
+            "availableSegments" : this.props.availableSegments,
             "addMethod": addSegment,
             "updateMethod": updateSegment,
             "deleteMethod": deleteSegment,
             "segmentSelectMethod": changeSegment,
             "currentSegmentStr": segmentFromRequest,
-            "translations": segmentTranslations
+            "translations": this.props.segmentTranslations
         });
 
         this.onMouseUp = function(e) {
diff --git a/plugins/SegmentEditor/templates/_segmentSelector.twig b/plugins/SegmentEditor/templates/_segmentSelector.twig
index 5c10ff5187..85cf139106 100644
--- a/plugins/SegmentEditor/templates/_segmentSelector.twig
+++ b/plugins/SegmentEditor/templates/_segmentSelector.twig
@@ -1,4 +1,6 @@
-<div class="segmentEditorPanel js-autoLeftPanel">
+<div class="segmentEditorPanel js-autoLeftPanel"
+     data-props="{{ clientSideProperties|json_encode }}"
+     data-params="{{ clientSideParameters|json_encode }}">
     <div class="SegmentEditor" style="display:none;">
         <div class="segmentationContainer listHtml">
             <span class="segmentationTitle"></span>
@@ -149,10 +151,4 @@
     </div>
 </div>
 
-<script type="text/javascript">
-var availableSegments = {{ savedSegmentsJson|raw }};
-var segmentTranslations = {{ segmentTranslations|raw }};
-var isSegmentNotAppliedBecauseBrowserArchivingIsDisabled = {{ isSegmentNotAppliedBecauseBrowserArchivingIsDisabled }};
-
-$(document).ready(function () { require('piwik/UI').SegmentSelectorControl.initElements(); });
-</script>
\ No newline at end of file
+<script type="text/javascript">$(document).ready(function () { require('piwik/UI').SegmentSelectorControl.initElements(); });</script>
\ No newline at end of file