Add customs rating interface example (#1489)

* Add rating interface * Save value to DB and populate on open * Show stars on list * Move rating interface to customs folder * Update gitignore to allow rating interfvace * Add rating interface to git * Remove unsupported dataTypes * Remove empty function param * Unignore rating interface
directus · May 15, 2017 · f3d5a9a · f3d5a9a
1 parent 808d066
commit f3d5a9a
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 0 deletions.
diff --git a/customs/interfaces/.gitignore b/customs/interfaces/.gitignore
@@ -1,3 +1,4 @@
 *
 !.gitignore
 !_example
+!rating
diff --git a/customs/interfaces/rating/component.js b/customs/interfaces/rating/component.js
@@ -0,0 +1,22 @@
+define(['./interface', 'core/UIComponent', 'core/t'], function (Input, UIComponent, __t) {
+  return UIComponent.extend({
+    id: 'rating',
+    dataTypes: ['INT'],
+    variables: [
+      {id: 'max_score', default_value: 5, ui: 'numeric'}
+    ],
+    Input: Input,
+    validate: function (value, options) {
+      if (options.schema.isRequired() && !value) {
+        return __t('this_field_is_required');
+      }
+    },
+    list: function (options) {
+      var html = '';
+      for (var i = 0; i < options.value; i++) {
+        html += '<i style="color: #999;" class="material-icons">star</i>';
+      }
+      return html;
+    }
+  });
+});
diff --git a/customs/interfaces/rating/input.html b/customs/interfaces/rating/input.html
@@ -0,0 +1,40 @@
+<style>
+	.interface-rating {
+		float: left;
+	}
+
+	.interface-rating input {
+		position: absolute;
+		top: -9999px;
+		clip: rect(0, 0, 0, 0);
+	}
+
+	.interface-rating label {
+		font-size: 0;
+		float: right;
+		cursor: pointer;
+	}
+
+	.interface-rating label::before {
+		content: 'star_border';
+		font-family: 'Material Icons';
+		font-size: 2.5rem;
+		color: #999;
+	}
+
+	.interface-rating label:hover::before,
+	.interface-rating label:hover ~ label::before {
+		content: 'star';
+	}
+
+	.interface-rating input:checked ~ label::before {
+		content: 'star';
+		color: #3498db;
+	}
+</style>
+<div class="interface-rating">
+{{#each amount}}
+	<input type="radio" name={{../name}} id="{{../name}}-score-{{i}}" value="{{i}}" {{#if checked}}checked{{/if}}/>
+	<label for="{{../name}}-score-{{i}}">{{i}} stars</label>
+{{/each}}
+</div>
diff --git a/customs/interfaces/rating/interface.js b/customs/interfaces/rating/interface.js
@@ -0,0 +1,25 @@
+define(['core/UIView'], function (UIView) {
+  return UIView.extend({
+    template: 'rating/input',
+    serialize: function () {
+      var value = this.options.value;
+
+      // This is needed because Handlebars doesn't have a for loop equivalent
+      var scoresArray = [];
+      for (var i = this.options.settings.get('max_score'); i > 0; i--) {
+        scoresArray.push({
+          i: i,
+          checked: i === value
+        });
+      }
+
+      return {
+        value: value,
+        amount: scoresArray,
+        name: this.options.name,
+        comment: this.options.schema.get('comment')
+      };
+    }
+  });
+});
+