From be55499ae9b9bb23df33901d5771a9ef7ca6f954 Mon Sep 17 00:00:00 2001 From: ydaniel98 Date: Fri, 23 Jun 2017 17:08:12 -0400 Subject: [PATCH] Fixed styles & added mobile friendly selector for categories --- both/collections/events.js | 8 +--- .../optionSelect/optionSelect.scss | 13 +++-- .../templates/eventsForm/edit/editEvent.html | 7 +++ client/templates/eventsForm/edit/editEvent.js | 47 +++++++++++++++++++ .../eventsForm/lifetime/lifetime.html | 32 ++++++------- .../templates/eventsForm/lifetime/lifetime.js | 4 +- client/templates/eventsForm/new/newEvent.html | 7 +++ client/templates/eventsForm/new/newEvent.js | 46 +++++++++++++++++- .../eventsForm/optionSelect/optionSelect.html | 4 +- 9 files changed, 137 insertions(+), 31 deletions(-) diff --git a/both/collections/events.js b/both/collections/events.js index e7f7c3c64..3926c0935 100644 --- a/both/collections/events.js +++ b/both/collections/events.js @@ -211,13 +211,9 @@ Events.attachSchema(new SimpleSchema({ type: String, //optional: true, autoform: { - options: function() { - return Categories.find().map(function(cat) { - return {label: cat.name, value: cat._id}; - }); - }, label: false, - firstOption: 'Choose Category' + hidden: true, + class: "category-select-id" } }, 'category.name': { diff --git a/client/stylesheets/optionSelect/optionSelect.scss b/client/stylesheets/optionSelect/optionSelect.scss index 82e2ac4c5..cf45b42a7 100644 --- a/client/stylesheets/optionSelect/optionSelect.scss +++ b/client/stylesheets/optionSelect/optionSelect.scss @@ -11,16 +11,23 @@ .option-select-inner { margin: 0 auto; - width: 50%; + width: 90%; padding: 10px; } .option-select-list { - height: 40vh; - overflow: scroll; + height: 200px; + overflow-y: scroll; + overflow-x: hidden; + font-size: 20px; } #option-select-close { margin: 0 auto; display: block; + font-size: 30px; + + &:hover { + background-color: white; + } } diff --git a/client/templates/eventsForm/edit/editEvent.html b/client/templates/eventsForm/edit/editEvent.html index 8202ba94e..7b9eb00eb 100644 --- a/client/templates/eventsForm/edit/editEvent.html +++ b/client/templates/eventsForm/edit/editEvent.html @@ -5,6 +5,10 @@
{{_ "editEvent.title"}}
{{#autoForm collection="Events" doc=selectedEventDoc id="events-form" omitFields='links' type="update"}} {{> afQuickField name="organiser._id"}} {{> afQuickField name="organiser.name"}} +
+ + +
{{> afQuickField name="category"}} {{> afQuickField name="name"}} {{> afQuickField name="address"}} @@ -32,6 +36,9 @@
{{_ "editEvent.title"}}
{{> optionSelect}}
+
+ {{> optionSelect}} +
{{/if}} diff --git a/client/templates/eventsForm/edit/editEvent.js b/client/templates/eventsForm/edit/editEvent.js index 83c7589cf..c1f90a42e 100644 --- a/client/templates/eventsForm/edit/editEvent.js +++ b/client/templates/eventsForm/edit/editEvent.js @@ -17,7 +17,13 @@ AutoForm.hooks({ Template.editEvent.onCreated(function() { create.call(this); + this.categories = new ReactiveVar([]); instance = this; + + Tracker.autorun(function() { + instance.categories.set(Categories.find({}).fetch()); + }); + }); Template.editEvent.helpers({ @@ -87,6 +93,47 @@ Template.autoForm.onRendered(function() { }); onRendered.call(this); + + // Enable Category Select + var $categoryInput = $("input#category-select-input-edit"); + var $categoryId = $("#events-form .category-select-id"); + + $categoryInput.val(Categories.find({_id: $categoryId.val()}).fetch()[0].name); + + var options = function() { + var categories = instance.categories.get(); + for (category in categories) { + categories[category].option = categories[category].name; + } + return categories; + }(); + + // Initialize the mobile friendly selection UI + var categorySelection = new OptionSelect(function(selected) { + $categoryInput.val(selected.option); + $categoryId.val(selected._id); + }, '#category-select-edit', options); + + // Activate time selection on click (OptionSelect) + $("input#category-select-input-edit").on('click', function(e) { + e.preventDefault(); + categorySelection.open(); + $("#events-form-new").scrollTop(0); + return false; + }); + + $("input#category-select-input-edit").on('keydown', function(e) { + e.preventDefault(); + return false; + }); + + $("input#category-select-input-edit").on("change", function(e) { + var $this = $(this); + if (options.indexOf($this.val()) === -1) { + $this.val('Choose a Category!'); + } + }); + }); Template.editEvent.onDestroyed(function () { diff --git a/client/templates/eventsForm/lifetime/lifetime.html b/client/templates/eventsForm/lifetime/lifetime.html index c8c6e2f7d..fab58c16c 100644 --- a/client/templates/eventsForm/lifetime/lifetime.html +++ b/client/templates/eventsForm/lifetime/lifetime.html @@ -3,8 +3,8 @@ {{> afQuickField name="week_enable"}} {{> afQuickField name="dateEvent"}}
- {{> afQuickField name="time"}} - {{> afQuickField name="time_end"}} + {{> afQuickField name="time" readonly="true"}} + {{> afQuickField name="time_end" readonly="true"}}
@@ -15,15 +15,15 @@
{{> afQuickField name="week.monday.enable"}}
- {{> afQuickField name="week.monday.time"}} - {{> afQuickField name="week.monday.time_end"}} + {{> afQuickField name="week.monday.time" readonly="true"}} + {{> afQuickField name="week.monday.time_end" readonly="true"}}
{{> afQuickField name="week.tuesday.enable"}}
- {{> afQuickField name="week.tuesday.time"}} - {{> afQuickField name="week.tuesday.time_end"}} + {{> afQuickField name="week.tuesday.time" readonly="true"}} + {{> afQuickField name="week.tuesday.time_end" readonly="true"}}
@@ -31,15 +31,15 @@
{{> afQuickField name="week.wednesday.enable"}}
- {{> afQuickField name="week.wednesday.time"}} - {{> afQuickField name="week.wednesday.time_end"}} + {{> afQuickField name="week.wednesday.time" readonly="true"}} + {{> afQuickField name="week.wednesday.time_end" readonly="true"}}
{{> afQuickField name="week.thursday.enable"}}
- {{> afQuickField name="week.thursday.time"}} - {{> afQuickField name="week.thursday.time_end"}} + {{> afQuickField name="week.thursday.time" readonly="true"}} + {{> afQuickField name="week.thursday.time_end" readonly="true"}}
@@ -47,15 +47,15 @@
{{> afQuickField name="week.friday.enable"}}
- {{> afQuickField name="week.friday.time"}} - {{> afQuickField name="week.friday.time_end"}} + {{> afQuickField name="week.friday.time" readonly="true"}} + {{> afQuickField name="week.friday.time_end" readonly="true"}}
{{> afQuickField name="week.saturday.enable"}}
- {{> afQuickField name="week.saturday.time"}} - {{> afQuickField name="week.saturday.time_end"}} + {{> afQuickField name="week.saturday.time" readonly="true"}} + {{> afQuickField name="week.saturday.time_end" readonly="true"}}
@@ -63,8 +63,8 @@
{{> afQuickField name="week.sunday.enable"}}
- {{> afQuickField name="week.sunday.time"}} - {{> afQuickField name="week.sunday.time_end"}} + {{> afQuickField name="week.sunday.time" readonly="true"}} + {{> afQuickField name="week.sunday.time_end" readonly="true"}}
diff --git a/client/templates/eventsForm/lifetime/lifetime.js b/client/templates/eventsForm/lifetime/lifetime.js index 3a45016e2..23ff6d26b 100644 --- a/client/templates/eventsForm/lifetime/lifetime.js +++ b/client/templates/eventsForm/lifetime/lifetime.js @@ -123,7 +123,7 @@ iniinitLifetime = function(parentForm, scrollTarget, timeSelectContainer) { for (var hour = 8; hour < 24; ++hour) { ['00', '30'].forEach(function (minutes) { var time = hour + ':' + minutes; - timeArr.push({time: time}); + timeArr.push({option: time}); }); } return timeArr; @@ -131,7 +131,7 @@ iniinitLifetime = function(parentForm, scrollTarget, timeSelectContainer) { // Initialize the mobile friendly selection UI var timesSelection = new OptionSelect(function(selected) { - $timeInput.val(selected.time); + $timeInput.val(selected.option); }, timeSelectContainer, options); // Activate time selection on click (OptionSelect) diff --git a/client/templates/eventsForm/new/newEvent.html b/client/templates/eventsForm/new/newEvent.html index 28d6086b5..06cc5bffb 100644 --- a/client/templates/eventsForm/new/newEvent.html +++ b/client/templates/eventsForm/new/newEvent.html @@ -19,6 +19,10 @@
{{_ "newEvent.section_titles.0"}}
{{> afQuickField name="organiser._id"}} {{> afQuickField name="organiser.name"}}
+
+ + +
{{> afQuickField name="category"}}
@@ -97,6 +101,9 @@
{{_ "newEvent.section_titles.6"}}
{{> optionSelect}}
+
+ {{> optionSelect}} +
diff --git a/client/templates/eventsForm/new/newEvent.js b/client/templates/eventsForm/new/newEvent.js index 075734302..3f4bfd599 100644 --- a/client/templates/eventsForm/new/newEvent.js +++ b/client/templates/eventsForm/new/newEvent.js @@ -1,5 +1,6 @@ var sequence = undefined; var defaultCategory = new ReactiveVar(''); +var instance = undefined; AutoForm.hooks({ 'events-form-new': { @@ -34,8 +35,11 @@ Template.newEvent.viewmodel({ Template.newEvent.onCreated(function() { create.call(this); + this.categories = new ReactiveVar([]); + instance = this; Tracker.autorun(function() { + instance.categories.set(Categories.find({}).fetch()); var temp = Categories.find({default: true}).fetch()[0]; if (temp !== undefined) { defaultCategory.set(temp.name); @@ -63,8 +67,8 @@ Template.autoForm.onRendered(function () { $("#new-resource").on('click', function() { var category = Categories.find({name: defaultCategory.get()}).fetch()[0]; if (category !== undefined) { - var $categoryContainer = $("#category-container"); - $categoryContainer.find("ul").find('li span:contains(' + category.name + ')').click(); + $("#events-form-new .category-select-id").val(category._id); + $("input#category-select-input").val(category.name); } $("#next").click(); }); @@ -181,6 +185,44 @@ Template.autoForm.onRendered(function () { } }); + // Enable Category Select + var $categoryInput = $("input#category-select-input"); + var $categoryId = $("#events-form-new .category-select-id"); + + var options = function() { + var categories = instance.categories.get(); + for (category in categories) { + categories[category].option = categories[category].name; + } + return categories; + }(); + + // Initialize the mobile friendly selection UI + var categorySelection = new OptionSelect(function(selected) { + $categoryInput.val(selected.option); + $categoryId.val(selected._id); + }, '#category-select', options); + + // Activate time selection on click (OptionSelect) + $("input#category-select-input").on('click', function(e) { + e.preventDefault(); + categorySelection.open(); + $("#events-form-new").scrollTop(0); + return false; + }); + + $("input#category-select-input").on('keydown', function(e) { + e.preventDefault(); + return false; + }); + + $("input#category-select-input").on("change", function(e) { + var $this = $(this); + if (options.indexOf($this.val()) === -1) { + $this.val('Choose a Category!'); + } + }); + }); Template.newEvent.onDestroyed(function () { diff --git a/client/templates/eventsForm/optionSelect/optionSelect.html b/client/templates/eventsForm/optionSelect/optionSelect.html index 09a281280..602389531 100644 --- a/client/templates/eventsForm/optionSelect/optionSelect.html +++ b/client/templates/eventsForm/optionSelect/optionSelect.html @@ -1,9 +1,9 @@