I am using rzymek:fullcalendar package.
I just create a select list using semantic ui dropdown
<div class="ui compact selection dropdown">
<i class="dropdown icon"></i>
<div class="text">Compact</div>
<div class="menu">
<div class="item">January 2015</div>
</div>
</div>
Create A calendar (call the fullcalendar template):-
<div class="calendar">
{{>fullcalendar options id="myCalendar"}}
</div>
Changing the calendar month and year like this:-
$('.ui.selection.dropdown')
.dropdown('restore default text')
.dropdown({
onChange: function (val) {
var monthAndYear = val.split(" ");
console.log(monthAndYear[0]);
var today = new Date();
Session.set('date'monthAndYear[1]+'-0'+MonthList.indexOf(monthAndYear[0]));
$('#myCalendar').fullCalendar({
gotoDate: moment(Session.get('date')),
});
}
});
But it's not working. I don't know why ?
After your template with class calendar has been added to the HTML you can use $('#myCalendar').
If the calendar is already rendered you can't use:
$('#myCalendar').fullCalendar({gotoDate: moment(Session.get('date'))});
To go to a date you might want to call:
$('#myCalendar').fullCalendar('gotoDate', moment(Session.get('date')));
Related
I'm new to aurelia. I'm looking to find the best method for adding classes on click events.
I simply want to click approve or request information, and then add a class to the corresponding "contact card". This class would change the background color.
I know it's probably simple, but I thought I'd look here for the best method.
Here's an image to what I've got:
Apologies for the wait, work has been a bit busy.
This is my first time posting on S.O., so I apologize for any expectations I'm not meeting.
<div class="col-sm-4">
<button class="btn btn-success col-sm-12" click.delegate="goodBoi()">
approve contact
</button>
</div>
<div class="col-sm-4">
<button class="btn btn col-sm-12" click.delegate="requestContact()">
request information
</button>
</div>
</div>
the element to be changed is named "list-group-item", containing the
contact's details(code shown above).
<template>
<div class="contact-list">
<ul class="list-group">
<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
<h4>${contact.firstName} ${contact.lastName}</h4>
<p>${contact.company}</p>
<p>${contact.email}</p>
<h6>${contact.approval}</h6>
</a>
<a route-href="route: contacts; params.bind: {id:contact.id}">
<p>${contact.phoneNumber}</p>
</a>
</li>
</ul>
</div>
goodBoi() {
let result = confirm("Are you sure you want to confirm this contact?");
if (result === true) {
var standingShell = document.getElementsByClassName("list-group-item");
//im hoping here I would add a class to the new variable//
this.contact.approval = 'approved';
this.save();
}
}
//confirms contact, changing color of approved contact//
//same thing here, just plan to give it a different color//
requestContact() {
let contactRequestText = "request sent to contact";
this.routeConfig.navModel.setTitle(this.contact.approval = contactRequestText);
this.ea.publish(new ContactUpdated(this.contact));
}
There are many ways to set a CSS-class using Aurelia. Following I prepared an example gist:
Template:
<template>
<h1>${message}</h1>
<div class="form-group ${clicked ? 'red' : 'blue'}" style="width: 100px; height: 100px;">
</div>
<div class="form-group">
<button click.delegate="save()">
Click me
</button>
</div>
</template>
And the code class:
#autoinject
export class App {
#bindable clicked = false;
save(){
this.clicked = true;
}
}
https://gist.run/?id=425993b04a977466fa685758389aa2b4
But there are other, cleaner ways:
using ref in a custom element.
custom attributes.
Include jQuery for using e.g. $('#myelement').addClass()
I am trying to add a delete function that if i click on a list item(template) it adds a selected class to the li. I then want be able to click a button that finds the li with a class of selected and passes the data to a meteor method that removes the data from a collection. How do i access this data.
I have tried a few ways but this is what i have so far.
sidebar.js
Template.Sidebar.events({
'click .button-collapse': function() {
console.log("here")
$(".button-collapse").sideNav();
},
'click #delete i': function() {
Meteor.call('deleteListItem', $( "li.selected" )._id);
}
})
sidebar.html
<template name="Sidebar">
<ul id="slide-out" class="side-nav fixed grey darken-3">
<li class="action-bar">
<span id="add-new" data-target="modal-add" class="modal-trigger"><i class="small material-icons">add</i></span>
<span id="save"><i class="small material-icons">note_add</i></span>
<span id="rename"><i class="small material-icons">mode_edit</i></span>
<span id="delete"><i class="small material-icons">delete</i></span>
<span data-activates="slide-out" id="close" class="button-collapse close "><i class="small material-icons right">reorder</i></span>
</li>
<!-- Load save items-->
{{#if Template.subscriptionsReady}}
{{#each userSaves}}
{{>ListItem}}
{{/each}}
{{else}}
<p>Loading</p>
{{/if}}
</ul>
<i class="material-icons">menu</i>
<!-- Modal form to add new simulator file -->
<!-- Modal Structure -->
<div id="modal-add" class="modal">
<div class="modal-content">
<h4>New Simulator</h4>
{{> quickForm collection=saves id="newSimulator" type="insert" buttonClasses="modal-action modal-close btn waves-effect waves-light" buttonContent="Add"}}
</div>
</div>
</template>
list class
Meteor.methods({
deleteListItem: function(id) {
Saves.remove(id);
}
});
You can not retrieve the ID of an object like that. Either your button has to be inside the document you're gonna remove or you have to include the _id in your HTML attributes and get that value.
So simply add data-value="{{_id}}" to your <li> in your loop and get the selected like this:
//this will retrieve the id of one selected element only
//you need to use each/forEach if you want to remove multiple
$('li.selected').attr('data-value')
EDIT:
Another solution would be using Session. Since you click on an item to select it, you can set a Session in that event
//in the click event where you select a list item
Session.set('itemId', this._id);
//in Sidebar events
'click #delete i': function() {
const itemId = Session.get('itemId');
Meteor.call('deleteListItem', itemId);
}
EDIT 2:
If you use Session solution, don't forget to remove the Session when the template is destroyed. Otherwise (for your use case) when you go to another route and come back without deleting a selected item and click the delete button, it will delete the document even though it doesn't appear to be selected.
Template.templateName.onDestroyed(function(){
Session.set('sessionName', undefined);
});
I have 3 Bootstrap panels that expand/collapse when their headers are clicked.
However when changing to another route id (for example for :id=CarModel1 to id=CarModel2 with /cars/details/:id as route), I want to keep their state as was in the previous id after the user messes around with the panels, so that the user can compare the different details immediately when changing views.
How can I keep the panel state? Please, keep in mind I'm using ngRoute and not ui-Router.
Sample panel:
<div id="details">
<div class="panel-heading detailsPanel">
<a data-toggle="collapse" data-parent="#details" data-target="#collapseDetailsPanel">
<h4>Additional Details</h4>
</a>
</div>
<div id="collapseDetailsPanel" class="panel-collapse collapse">
<div class="panel-body">
<div>Lorem Ipsum</div>
</div>
</div>
</div>
Managed to do it by adapting a solution found here and using sessionStorage instead of $.cookie.
$("#details").on('shown.bs.collapse', function() {
var activeDetails = $("#details .in").attr('id');
sessionStorage.setItem('activeDetailsGroup', activeDetails);
});
$("#details").on('hidden.bs.collapse', function() {
sessionStorage.setItem('activeDetailsGroup', "inactive");
});
var lastDetails = sessionStorage.getItem('activeDetailsGroup');
if (lastDetails !== "inactive") {
//remove default collapse settings
$("#details .panel-collapse").removeClass('in');
//show the account_last visible group
$("#" + lastDetails).addClass("in");
}
I am using the Semantic UI search for the title property of my data object. data has other fields and I want to access them when an object is selected. For example, I want to put the value from the uuid property in a hidden input.
Is there a Semantic UI way of doing this? - I couldn't figure it out from the documentation (I know I can go and search through all data.title's for the selected one, but ... there probably is another way).
$('.ui.search').search({
source: data,
searchFields: [
'title'
]
,onSelect : function(event){
//...some other code
$("#tags").append('<input type="hidden" value="'+ value_from_my_uuid_field +'"');
}
});
<div class="ui search">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt" type="text" placeholder="Search subjects...">
</div>
<div class="results"></div>
</div>
Thank you.
The search widget has an onSelect callback you can register (docs) When your user selects a suggestion from the search response, your callback will be called with the selection:
$searchWidget.search({
onSelect: function(result) {
// do something with result.id or whatever
}
});
I had a similar problem (but with ajax source data) and I finally ended up adding hidden content-tags to the results (on server side) like <div style='display:none;' class='id'>12345</div>.
And in the onSelect-callback I search the result (with jquery) for this content:
onSelect : function(event){
var $result = $(this);
var id = $result.find(".id").html();
...
// Return 'default' triggers the default select behaviour of the search module.
return "default";
}
HTH
Semantic UI actually provides a way of accessing any of the object's properties.
I used both dropdown and search classes, as shown in the docs with hidden input values for the properties.
<template name="search_drop">
<div class="ui floating dropdown labeled search icon button">
<i class="search icon"></i>
<span class="text">Search subjects...</span>
<div class="menu">
{{#each subjects}}
<div class="item" data-id="{{this.id}}" data-value="{{this.value}}" data-child="{{this.haschildren}}">{{this.name}}
</div>
{{/each}}
</div>
</div>
</template>
subjects contains my objects with id, name, value, haschildren properties.
Template.search_drop.rendered = function(){
$(".dropdown").dropdown({
onChange: function(value, text, $choice){
console.log(value); //will output the equivalent of {{this.name}}
console.log($choice[0].attributes); //list of attributes
console.log($choice[0].attributes["data-id"].value); //the equivalent of {{this.id}}
}
});
}
I'm really struggling with this one. If you want to view what I have bludgeoned together, it is all in a repo on GitHub called instructor-oracle. What I would like to do is have the landing page be the layout at ./wbs. Then I would like the search to route to ./wbs/:_wbsCode and populate the sidebar with the appropriate record. I am thinking the router needs to be structured something like...
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function () {
this.route('wbs', {
path: '/wbs'
}, function () {
this.render('wbs-detail', {
path: '/wbs/:_wbsAbbrev',
to: 'wbs-detail',
data: function () {
theOne = Wbs.findOne({abbrev: this.params._wbsAbbrev});
console.log(theOne.abbrev);
return theOne;
}
});
});
...and this would be paried with templates like...
<template name="layout">
<header class="container-fluid">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="{{pathFor 'wbs'}}">Instructor Oracle</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<form class="navbar-form navbar-left" role="search" id="wbsSearchForm">
<div class="form-group">
<input
class="form-control typeahead"
name="wbsSearch"
id="wbsSearch"
type="text"
placeholder="Search"
autocomplete="on"
spellcheck="off"
autofocus="true"
/>
</div>
<button type="submit" class="btn btn-default">Find</button>
</form>
</div>
</nav>
</header>
<main class="container-fluid">
{{> yield}}
</main>
</template>
<template name="wbs">
<div class="col-sm-3" id="wbsCol">
{{> yield 'wbs-detail'}}
</div>
<div class="col-sm-9" id="timesheetCol">
<iframe src="http://iframeurl.html" id="timesheetFrame"></iframe>
</div>
{{#contentFor 'wbs-detail'}}
<h1>{{abbrev}} <small>{{code}}</small></h1>
{{/contentFor}}
</template>
...and an event handler for the form like this...
Template.layout.events({
// catch submit event for wbs form
'submit': function (event, template) {
// prevent default behavior and stop bubbling
event.preventDefault();
event.stopPropagation();
// store dom element in variable
var inputElement = template.find('input#wbsSearch');
// access value in form and extract abbreviation if found
var abbrev = Wbs.findOne({abbrev: (inputElement.value).toUpperCase()}).abbrev;
// clear input
inputElement.value = "";
// go to the page
Router.go('wbs-edit', {_wbsAbbrev: abbrev});
}
});
I have been trying to sort through this on the iron:router documentation, but right now I am all kinds of lost (obviously). Still, I need this to work to avoid reloads on the main layout template so the iframe does not reload while the sidebar can change along with the matching url so links to specific sidebar content can be bookmarked and shared.
Thank you in advance for your assistance. If I eventually sort all of this out, I am more than happy to contribute to the iron:router documentation so it makes sense for the next pea-brained idiot like myself who happens to need to sort this out.