Added ability to add a label overlay, so people know what they are us…

…ing the slider for.
milkyway-multimedia · Feb 13, 2015 · 42cd9eb · 42cd9eb
1 parent 97e5992
commit 42cd9eb
Show file tree

Hide file tree

Showing 6 changed files with 159 additions and 73 deletions.
diff --git a/_assets/css/imports/range-slider.less b/_assets/css/imports/range-slider.less
@@ -70,4 +70,44 @@ tr.ss-gridfield-range-slider.field.date {
 	> th > button {
 		display: none;
 	}
+}
+
+.ss-gridfield-range-slider--holder_hasLabel {
+	position: relative;
+
+	.rangeslider-display.noUi-horizontal {
+		height:20px;
+	}
+
+	.rangeslider-display.noUi-horizontal .noUi-handle {
+		width: 30px;
+		height: 30px;
+		left: -15px;
+		top: -6px;
+	}
+
+	.rangeslider-display .noUi-handle:after,
+	.rangeslider-display .noUi-handle:before {
+		top: 10px;
+	}
+
+	.ss-gridfield-range-slider--holder-label {
+		display: block !important;
+		position: absolute;
+		top: 15px;
+		bottom: 15px;
+		left: 50%;
+		width: 150px;
+		margin-left: -150px;
+		text-align: center;
+		text-transform: uppercase;
+		/* font-weight: normal; */
+		background: rgba(255,255,255,0.9);
+		color: #98aab6;
+		padding-top: 2px;
+	}
+
+	.noUi-handle {
+		z-index: 20;
+	}
 }
diff --git a/_assets/js/mwm.gridfield.utils.js b/_assets/js/mwm.gridfield.utils.js
@@ -1,36 +1,36 @@
 (function($) {
-	$.entwine("ss", function($) {
-		$(".gridfield-help-button-dialog").entwine({
-			loadDialog: function(deferred) {
-				var dialog = this.addClass("loading").children(".ui-dialog-content").empty();
-
-				deferred.done(function(data) {
-					dialog.html(data).parent().removeClass("loading");
-				});
-			}
-		});
-
-		$(".ss-gridfield .gridfield-help-button").entwine({
-			onclick: function() {
-				var dialog = $("<div></div>").appendTo("body").dialog({
-					modal: false,
-					resizable: true,
-					width: 600,
-					height: 600,
-					close: function() {
-						$(this).dialog("destroy").remove();
-					}
-				});
-
-				dialog.parent().addClass("gridfield-help-button-dialog").loadDialog(
-					$.get(this.prop("href"))
-				);
-
-				dialog.data("grid", this.closest(".ss-gridfield"));
-
-				return false;
-			}
-		});
+    $.entwine("ss", function($) {
+        $(".gridfield-help-button-dialog").entwine({
+            loadDialog: function(deferred) {
+                var dialog = this.addClass("loading").children(".ui-dialog-content").empty();
+
+                deferred.done(function(data) {
+                    dialog.html(data).parent().removeClass("loading");
+                });
+            }
+        });
+
+        $(".ss-gridfield .gridfield-help-button").entwine({
+            onclick: function() {
+                var dialog = $("<div></div>").appendTo("body").dialog({
+                    modal: false,
+                    resizable: true,
+                    width: 600,
+                    height: 600,
+                    close: function() {
+                        $(this).dialog("destroy").remove();
+                    }
+                });
+
+                dialog.parent().addClass("gridfield-help-button-dialog").loadDialog(
+                    $.get(this.prop("href"))
+                );
+
+                dialog.data("grid", this.closest(".ss-gridfield"));
+
+                return false;
+            }
+        });
 
         $(".ss-gridfield-treeView--toggle").entwine({
             onclick: function() {
@@ -62,9 +62,9 @@
                     row = this.find(".ss-gridfield-add-inline-extended--template:last"),
                     num = this.data("add-inline-num") || 1;
 
-                tmpl.cache["ss-gridfield-add-inline-extended--template"] = tmpl(row.html());
+                tmpl.cache[this[0].id + "-ss-gridfield-add-inline-extended--template"] = tmpl(row.html());
 
-                var item = $(tmpl("ss-gridfield-add-inline-extended--template", { num: num }));
+                var item = $(tmpl(this[0].id + "-ss-gridfield-add-inline-extended--template", { num: num }));
 
                 this.find("tbody:first").append(item);
                 this.find("tbody:first").children(".ss-gridfield-no-items:first").hide();

diff --git a/code/RangeSlider.php b/code/RangeSlider.php
@@ -19,19 +19,21 @@ class RangeSlider implements \GridField_ActionProvider, \GridField_DataManipulat
 	public $hideNavigation = false;
 
 	public $label;
+	public $navigationLabel;
 
 	public $comparisonFilter = 'LessThan';
 
 	private $working;
 
-	public function __construct($filterField = 'Created', $fragment = 'header', $label = '') {
+	public function __construct($filterField = 'Created', $fragment = 'header', $label = '', $navigationLabel = '') {
 		if(!\ClassInfo::exists('RangeSliderField')) {
 			throw new \LogicException('Please install the milkyway-multimedia/ss-mwm-formfields module to use this feature');
 		}
 
 		$this->filterField = $filterField;
 		$this->fragment = $fragment;
-		$this->label = $label ?: _t('GridFieldUtils.SHOW', 'Show');
+		$this->label = $label;
+		$this->navigationLabel = $navigationLabel ?: _t('GridFieldUtils.SHOW', 'Show');
 	}
 
 	public function getActions($gridField) {
@@ -139,6 +141,10 @@ public function getHTMLFragments($gridField) {
 			->setAttribute('title', _t('GridField.Filter', 'Filter'))
 			->setAttribute('id', 'action_filter_' . $gridField->getModelClass() . '_' . $this->filterField);
 
+		if($this->label !== null) {
+			$data['Label'] = $this->label ?: singleton($gridField->getModelClass())->fieldLabel($this->filterField);
+		}
+
 		$data['Slider']->inputCallback = function($fields) use($fieldName, $dbField, $settings, &$data) {
 			foreach($fields as $field) {
 				$this->modifyFormFieldForDBField($dbField, $field->Render, $settings);
@@ -147,9 +153,15 @@ public function getHTMLFragments($gridField) {
 					$data['HasDates'] = true;
 			}
 
-			if($this->label) {
+			if($this->navigationLabel) {
+				$fields->unshift(\ArrayData::create([
+					'Render' => \LabelField::create($fieldName . '[label]', $this->navigationLabel)
+				]));
+			}
+
+			if(isset($data['Label']) && $data['Label']) {
 				$fields->unshift(\ArrayData::create([
-					'Render' => \LabelField::create($fieldName . '[label]', $this->label)
+					'Render' => \LabelField::create($fieldName . '--LABEL', $data['Label'])->addExtraClass('ss-gridfield-range-slider--holder-label')
 				]));
 			}
 		};

diff --git a/css/mwm.gridfield.utils.css b/css/mwm.gridfield.utils.css
@@ -353,3 +353,37 @@ tr.ss-gridfield-range-slider.field.date {
 .ss-gridfield-range-slider > th > button {
   display: none;
 }
+.ss-gridfield-range-slider--holder_hasLabel {
+  position: relative;
+}
+.ss-gridfield-range-slider--holder_hasLabel .rangeslider-display.noUi-horizontal {
+  height: 20px;
+}
+.ss-gridfield-range-slider--holder_hasLabel .rangeslider-display.noUi-horizontal .noUi-handle {
+  width: 30px;
+  height: 30px;
+  left: -15px;
+  top: -6px;
+}
+.ss-gridfield-range-slider--holder_hasLabel .rangeslider-display .noUi-handle:after,
+.ss-gridfield-range-slider--holder_hasLabel .rangeslider-display .noUi-handle:before {
+  top: 10px;
+}
+.ss-gridfield-range-slider--holder_hasLabel .ss-gridfield-range-slider--holder-label {
+  display: block !important;
+  position: absolute;
+  top: 15px;
+  bottom: 15px;
+  left: 50%;
+  width: 150px;
+  margin-left: -150px;
+  text-align: center;
+  text-transform: uppercase;
+  /* font-weight: normal; */
+  background: rgba(255, 255, 255, 0.9);
+  color: #98aab6;
+  padding-top: 2px;
+}
+.ss-gridfield-range-slider--holder_hasLabel .noUi-handle {
+  z-index: 20;
+}
diff --git a/js/mwm.gridfield.utils.js b/js/mwm.gridfield.utils.js
@@ -1,36 +1,36 @@
 (function($) {
-	$.entwine("ss", function($) {
-		$(".gridfield-help-button-dialog").entwine({
-			loadDialog: function(deferred) {
-				var dialog = this.addClass("loading").children(".ui-dialog-content").empty();
-
-				deferred.done(function(data) {
-					dialog.html(data).parent().removeClass("loading");
-				});
-			}
-		});
-
-		$(".ss-gridfield .gridfield-help-button").entwine({
-			onclick: function() {
-				var dialog = $("<div></div>").appendTo("body").dialog({
-					modal: false,
-					resizable: true,
-					width: 600,
-					height: 600,
-					close: function() {
-						$(this).dialog("destroy").remove();
-					}
-				});
-
-				dialog.parent().addClass("gridfield-help-button-dialog").loadDialog(
-					$.get(this.prop("href"))
-				);
-
-				dialog.data("grid", this.closest(".ss-gridfield"));
-
-				return false;
-			}
-		});
+    $.entwine("ss", function($) {
+        $(".gridfield-help-button-dialog").entwine({
+            loadDialog: function(deferred) {
+                var dialog = this.addClass("loading").children(".ui-dialog-content").empty();
+
+                deferred.done(function(data) {
+                    dialog.html(data).parent().removeClass("loading");
+                });
+            }
+        });
+
+        $(".ss-gridfield .gridfield-help-button").entwine({
+            onclick: function() {
+                var dialog = $("<div></div>").appendTo("body").dialog({
+                    modal: false,
+                    resizable: true,
+                    width: 600,
+                    height: 600,
+                    close: function() {
+                        $(this).dialog("destroy").remove();
+                    }
+                });
+
+                dialog.parent().addClass("gridfield-help-button-dialog").loadDialog(
+                    $.get(this.prop("href"))
+                );
+
+                dialog.data("grid", this.closest(".ss-gridfield"));
+
+                return false;
+            }
+        });
 
         $(".ss-gridfield-treeView--toggle").entwine({
             onclick: function() {
@@ -62,9 +62,9 @@
                     row = this.find(".ss-gridfield-add-inline-extended--template:last"),
                     num = this.data("add-inline-num") || 1;
 
-                tmpl.cache["ss-gridfield-add-inline-extended--template"] = tmpl(row.html());
+                tmpl.cache[this[0].id + "-ss-gridfield-add-inline-extended--template"] = tmpl(row.html());
 
-                var item = $(tmpl("ss-gridfield-add-inline-extended--template", { num: num }));
+                var item = $(tmpl(this[0].id + "-ss-gridfield-add-inline-extended--template", { num: num }));
 
                 this.find("tbody:first").append(item);
                 this.find("tbody:first").children(".ss-gridfield-no-items:first").hide();

diff --git a/templates/GridField_RangeSlider_Row.ss b/templates/GridField_RangeSlider_Row.ss
@@ -1,5 +1,5 @@
 <tr class="ss-gridfield-range-slider<% if $HasDates %> field date<% end_if %><% if $HideNavigation %> ss-gridfield-range-slider--hide-navigation<% end_if %>">
-	<th class="ss-gridfield-range-slider--holder rangeslider-display--form main" colspan="$ColumnCount">
+	<th class="ss-gridfield-range-slider--holder rangeslider-display--form main<% if $Label %> ss-gridfield-range-slider--holder_hasLabel<% end_if %>" colspan="$ColumnCount">
         $Slider
         $Button
 	</th>