So I bought a template and hosting from ghost.org. Unfortunately, it uses handlebars, a language I'm not very familiar with. I figured it out, but then when I implemented this jquery file for adding related posts to the bottom of the page using tags created in handlebars, it did not work. When I looked over the file it seemed to be fine. So I'm wondering if any of you can find a bug or error with the prototype based programming. Credits to dane cando at github for the file, but it isnt working. Below are the javascript for the related posts function and the ul class from the handlebars file.
JavScript File
(function($) {
defaults = {
feed: '/rss',
titleClass: '.post-title',
tagsClass: '.post-meta',
limit: 5,
debug: true,
template: '<li>{title}</li>',
messages: {
noRelated: 'No related posts were found.'
}
};
function RelatedPosts(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this.parseRss();
};
RelatedPosts.prototype.displayRelated = function(posts) {
var self = this, count = 0;
this._currentPostTags = this.getCurrentPostTags(this.options.tagsClass);
var related = this.matchByTag(this._currentPostTags, posts), options = this.options;
related.forEach(function(post) {
var template = options.template.replace(/{[^{}]+}/g, function(key) {
return post[key.replace(/[{}]+/g, '')] || '';
});
if (count < self.options.limit) {
$(self.element).append($(template));
}
count++;
});
if (count == 0) {
$(this.element).append($('<li>' + this.messages.noRelated + '</li>'));
}
};
RelatedPosts.prototype.parseRss = function(pageNum, prevId, feeds) {
var page = pageNum || 1, prevId = prevId || '', feeds = feeds || [], self = this;
$.ajax({
url: this.options.feed + '/' + page,
type: 'GET'
})
.done(function(data, textStatus, xhr) {
var curId = $(data).find('item > guid').text();
if (curId != prevId) {
feeds.push(data);
self.parseRss(page + 1, curId, feeds);
}
else {
var posts = self.getPosts(feeds);
self.displayRelated(posts);
}
})
.fail(function(e) {
self.reportError(e);
});
};
RelatedPosts.prototype.getCurrentPostTitle = function(titleClass) {
if (titleClass[0] != '.') {
titleClass = '.' + titleClass;
}
var postTitle = $(titleClass).text();
if (postTitle.length < 1) {
this.reportError("Couldn't find the post title with class: " + titleClass);
}
return postTitle;
};
RelatedPosts.prototype.getCurrentPostTags = function(tagsClass) {
if (tagsClass[0] != '.') {
tagsClass = '.' + tagsClass;
}
var tags = [];
$(tagsClass + ' a').each(function() {
tags.push($(this).text());
});
if (tags.length < 1) {
this.reportError("Couldn't find any tags in this post");
}
return tags;
};
RelatedPosts.prototype.getPosts = function(feeds) {
var posts = [], items = [];
feeds.forEach(function(feed) {
items = $.merge(items, $(feed).find('item'));
});
for (var i = 0; i < items.length; i++) {
var item = $(items[i]);
if (item.find('title').text() !== this.getCurrentPostTitle(this.options.titleClass)) {
posts.push({
title: item.find('title').text(),
url: item.find('link').text(),
content: item.find('description').text(),
tags: $.map(item.find('category'), function(elem) {
return $(elem).text();
})
});
}
}
if (posts.length < 1) {
this.reportError("Couldn't find any posts in feed: " + feed);
}
return posts;
};
RelatedPosts.prototype.reportError = function(error) {
if (this.options.debug) {
$(this.element).append($('<li>' + error + '</li>'));
}
};
RelatedPosts.prototype.matchByTag = function(postTags, posts) {
var matches = [];
posts.forEach(function(post) {
var beenAdded = false;
post.tags.forEach(function(tag) {
postTags.forEach(function(postTag) {
if (postTag.toLowerCase() === tag.toLowerCase() && !beenAdded) {
matches.push(post);
beenAdded = true;
}
});
});
});
if (matches.length < 1) {
this.reportError("There are no closely related posts");
}
return matches;
};
$.fn.ghostRelated = function(options) {
return this.each(function() {
new RelatedPosts(this, options);
});
};
})(jQuery);
$('.related-posts').ghostRelated();
HTML List
<ul class="related-posts">
</ul>
Related
I am using a tour booking theme. I do not want the dates in the theme reservation calendar to be opened in the form of a calendar and I want to remove the passive dates that appear on the calendar. How should I code for this. Can you help me?
I want to do:I want to do:
on my site:on my site:
calendar plugin:calendar plugin:
(function ($) {
new Vue({
el:'#bravo_tour_book_app',
data:{
id:'',
extra_price:[],
person_types:[],
message:{
content:'',
type:false
},
html:'',
onSubmit:false,
start_date:'',
start_date_html:'',
step:1,
guests:1,
price:0,
max_guests:1,
start_date_obj:'',
duration:0,
allEvents:[],
buyer_fees:[],
},
watch:{
extra_price:{
handler:function f() {
this.step = 1;
},
deep:true
},
start_date(){
this.step = 1;
},
guests(){
this.step = 1;
},
person_types:{
handler:function f() {
this.step = 1;
},
deep:true
},
},
computed:{
total_price:function(){
var me = this;
if (me.start_date !== "") {
var total = 0;
var total_guests = 0;
var startDate = new Date(me.start_date).getTime();
for (var ix in me.allEvents) {
var item = me.allEvents[ix];
var cur_date = new Date(item.start).getTime();
if (cur_date === startDate) {
if (item.person_types != null) {
me.person_types = Object.assign([], item.person_types);
} else {
me.person_types = null
}
me.max_guests = parseInt(item.max_guests);
me.price = parseFloat(item.price);
}
}
// for person types
if (me.person_types != null) {
for (var ix in me.person_types) {
var person_type = me.person_types[ix];
total += parseFloat(person_type.price) * parseInt(person_type.number);
total_guests += parseInt(person_type.number);
}
}else{
// for default
total_guests = me.guests;
total += me.guests * me.price;
}
for (var ix in me.extra_price) {
var item = me.extra_price[ix];
var type_total = 0;
if (item.enable === true) {
switch (item.type) {
case "one_time":
type_total += parseFloat(item.price);
break;
case "per_hour":
if (me.duration > 0) {
type_total += parseFloat(item.price) * parseFloat(me.duration);
}
break;
case "per_day":
if (me.duration > 0) {
type_total += parseFloat(item.price) * Math.ceil(parseFloat(me.duration) / 24);
}
break;
}
if (typeof item.per_person !== "undefined") {
type_total = type_total * total_guests;
}
total += type_total;
}
}
for (var ix in me.buyer_fees) {
var item = me.buyer_fees[ix];
var type_total = 0;
type_total += parseFloat(item.price);
if (typeof item.per_person !== "undefined") {
type_total = type_total * total_guests;
}
total += type_total;
}
return total;
}
return 0;
},
total_price_html:function(){
if(!this.total_price) return '';
return window.bravo_format_money(this.total_price);
},
daysOfWeekDisabled(){
var res = [];
for(var k in this.open_hours)
{
if(typeof this.open_hours[k].enable == 'undefined' || this.open_hours[k].enable !=1 ){
if(k == 7){
res.push(0);
}else{
res.push(k);
}
}
}
return res;
}
},
created:function(){
for(var k in bravo_booking_data){
this[k] = bravo_booking_data[k];
}
},
mounted(){
var me = this;
/*$(".bravo_tour_book").sticky({
topSpacing:30,
bottomSpacing:$(document).height() - $('.end_tour_sticky').offset().top + 40
});*/
var options = {
singleDatePicker: true,
showCalendar: false,
sameDate: true,
autoApply : true,
disabledPast : true,
dateFormat : bookingCore.date_format,
enableLoading : true,
showEventTooltip : true,
classNotAvailable : ['disabled', 'off'],
disableHightLight: true,
minDate:this.minDate,
opens:'left',
isInvalidDate:function (date) {
for(var k = 0 ; k < me.allEvents.length ; k++){
var item = me.allEvents[k];
if(item.start == date.format('YYYY-MM-DD')){
return item.active ? false : true;
}
}
return false;
}
};
if (typeof daterangepickerLocale == 'object') {
options.locale = _.merge(daterangepickerLocale,options.locale);
}
this.$nextTick(function () {
$(this.$refs.start_date).daterangepicker(options).on('apply.daterangepicker',
function (ev, picker) {
me.start_date = picker.startDate.format('YYYY-MM-DD');
me.start_date_html = picker.startDate.format(bookingCore.date_format);
})
.on('update-calendar',function (e,obj) {
me.fetchEvents(obj.leftCalendar.calendar[0][0], obj.leftCalendar.calendar[5][6])
});
});
},
methods:{
handleTotalPrice: function () {
},
fetchEvents(start,end){
var me = this;
var data = {
start: start.format('YYYY-MM-DD'),
end: end.format('YYYY-MM-DD'),
id:bravo_booking_data.id,
for_single:1
};
console.log(data);
$.ajax({
url: bravo_booking_i18n.load_dates_url,
dataType:"json",
type:'get',
data:data,
beforeSend: function() {
$('.daterangepicker').addClass("loading");
},
success:function (json) {
me.allEvents = json;
var drp = $(me.$refs.start_date).data('daterangepicker');
drp.allEvents = json;
drp.renderCalendar('left');
if (!drp.singleDatePicker) {
drp.renderCalendar('right');
}
$('.daterangepicker').removeClass("loading");
},
error:function (e) {
console.log(e);
console.log("Can not get availability");
}
});
},
formatMoney: function (m) {
return window.bravo_format_money(m);
},
validate(){
if(!this.start_date)
{
this.message.status = false;
this.message.content = bravo_booking_i18n.no_date_select;
return false;
}
return true;
},
If what you would like to use is simply a drop down list, why don't you create a simple one as follows?
<select name="availableDates">
<option value="0">Select a date</option>
<?php
//get the available dates from your database (or whatever source)
$getDates = $connection->prepare("select Date from availableDatesTable where hotelID=?");
$getDates->bind_param('i',$hotelID); //you could get the hotel ID via a $_GET variable
//store the results into an array
//loop through the array as follows:
foreach($resultArray as $res)
{
echo '<option value="'.$res.'">'.date('d F Y',$res).'</option>';
}
?>
</select>
Not sure what data source you are using, but this is a suggestion that could hopefully lead to the solution you're seeking.
I am trying to fix this script to automatically connect people you may know on Linkedin based on User roles (CEO e.t.c), Can someone help me fix this, Below is my code; I have tried the script on almost all browsers, Somebody help fix this.
var userRole = [
"CEO",
"CIO"
];
var inviter = {} || inviter;
inviter.userList = [];
inviter.className = 'button-secondary-small';
inviter.refresh = function () {
window.scrollTo(0, document.body.scrollHeight);
window.scrollTo(document.body.scrollHeight, 0);
window.scrollTo(0, document.body.scrollHeight);
};
inviter.initiate = function()
{
inviter.refresh();
var connectBtns = $(".button-secondary-small:visible");
//
if (connectBtns == null) {var connectBtns = inviter.initiate();}
return connectBtns;
};
inviter.invite = function () {
var connectBtns = inviter.initiate();
var buttonLength = connectBtns.length;
for (var i = 0; i < buttonLength; i++) {
if (connectBtns != null && connectBtns[i] != null) {inviter.handleRepeat(connectBtns[i]);}
//if there is a connect button and there is at least one that has not been pushed, repeat
if (i == buttonLength - 1) {
console.log("done: " + i);
inviter.refresh();
}
}
};
inviter.handleRepeat = function(button)
{
var nameValue = button.children[1].textContent
var name = nameValue.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
function hasRole(role){
for(var i = 0; i < role.length; i++) {
// cannot read children of undefined
var position = button.parentNode.parentNode.children[1].children[1].children[0].children[3].textContent;
var formatedPosition = position.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
var hasRole = formatedPosition.indexOf(role[i]) == -1 ? false : true;
console.log('Has role: ' + role[i] + ' -> ' + hasRole);
if (hasRole) {
return hasRole;
}
}
return false;
}
if(inviter.arrayContains(name))
{
console.log("canceled");
var cancel = button.parentNode.parentNode.children[0];
cancel.click();
}
else if (hasRole(userRole) == false) {
console.log("cancel");
var cancel = button.parentNode.parentNode.children[0];
cancel.click();
}
else if (button.textContent.indexOf("Connect")<0){
console.log("skipped");
inviter.userList.push(name); // it's likely that this person didn't join linkedin in the meantime, so we'll ignore them
var cancel = button.parentNode.parentNode.children[0];
cancel.click();
}
else {
console.log("added");
inviter.userList.push(name);
button.click();
}
};
inviter.arrayContains = function(item)
{
return (inviter.userList.indexOf(item) > -1);
};
inviter.usersJson = {};
inviter.loadResult = function()
{
var retrievedObject = localStorage.getItem('inviterList');
var temp = JSON.stringify(retrievedObject);
inviter.userList = JSON.parse(temp);
};
inviter.saveResult = function()
{
inviter.usersJson = JSON.stringify(inviter.userList);
localStorage.setItem('inviterList', inviter.usersJson);
};
setInterval(function () { inviter.invite(); }, 5000);
`
When I try executing this, I get the following error:
VM288:49 Uncaught TypeError: Cannot read property 'children' of undefined
at hasRole (<anonymous>:49:71)
at Object.inviter.handleRepeat (<anonymous>:66:11)
at Object.inviter.invite (<anonymous>:30:69)
at <anonymous>:108:35
Any ideas as to how to fix it?
So, I made a method fetchStories that fetches stories from my API in batches of 10, and the new stories can be fetched once you've scrolled to the bottom of the screen. This is what part of my Vue instance looks like:
var discoveryFeed = new Vue({ // eslint-disable-line no-unused-vars
el: '#discoveryFeed',
data: {
userId: userId,
username: username,
tags: [],
selectedTag: null,
stories: [],
checklist: [],
limit: 10,
page: 1,
isEnd: false,
busy: false,
isFollowing: true
},
beforeMount: function() {
var self = this;
self.$http.get('/api/tags')
.then(function(res) {
self.tags = res.body;
}, function(err) {
self.tags = [];
});
self.$http.get('/api/user/' + self.username + '/checklist')
.then(function(res) {
self.checklist = res.body || [];
}, function(err) {
self.checklist = [];
});
self.fetchStories();
},
methods: {
fetchStories: function(isNew) {
var self = this;
isNew = Boolean(isNew);
if(self.isEnd) { return; }
self.busy = true;
var url = '/api/discover';
if(self.selectedTag) {
url = `/api/tags/${self.selectedTag.code}/stories`;
}
url += '?p=' + self.page;
url += '&l=' + self.limit;
self.page += 1;
self.$http.get(url)
.then(function(res) {
self.busy = false;
if(res.body.length === 0) {
self.isEnd = true;
return;
}
if(isNew) {
self.stories = [];
}
self.stories = self.stories.concat(res.body);
}, function(err) {
self.busy = false;
self.stories = [];
});
},
setTag: function(tag) {
var self = this;
self.selectedTag = tag;
for(var i = 0; i < self.tags.length; i++) {
self.tags[i].selected = false;
}
self.selectedTag.selected = true;
self.page = 1;
self.fetchStories(true);
}
In my pug, I'm using the v-infinite-scroll directive to call the method fetchStories. Also note that I'm working with a list of tags, and clicking a new tag will load different sets of stories through the method setTag(tag).
nav.col-lg-3.col-md-4.d-none.d-md-block.d-lg-block.bg-sidebar(v-cloak)
.feed-sidebar.feed-sidebar-interests.border-top-0.border-bottom-0.border-left-0.position-sticky
strong Your Interests
div.list-group.list-unstyled.mt-2(v-if="tags.length > 0")
a.tag-btn.mb-2.align-middle.text-black(v-for="tag, index in tags" v-bind:class="{ active: selectedTag && selectedTag.id === tag.id }" #click="setTag(tag); scrollToTop();")
i.fa-fw.mr-2(v-bind:class="tag.icon + ' fa-lg'"
v-bind:style="'color:' + tag.hexColor")
span {{ tag.name }}
.col-lg-6.col-md-8(v-cloak
v-infinite-scroll="fetchStories"
infinite-scroll-disabled="busy"
infinite-scroll-distance="50")
Upon checking the data response at the initial load, the ten stories are fetched at /stories?p=1&l=10. However, upon reaching the bottom the data response array of /stories?p=2&l=10 is empty. This may have something to do with my use of booleans to set flags when choosing a tag.
Apparently, I should have reset the value of isEnd when I'm setting the new tag.
setTag: function(tag) {
var self = this;
self.selectedTag = tag;
for(var i = 0; i < self.tags.length; i++) {
self.tags[i].selected = false;
}
self.selectedTag.selected = true;
self.page = 1;
self.isEnd = false;
self.fetchStories(true);
}
I built out a custom pagination script to display data for my app. It works wonderfully. However, I am having a slight problem when it comes to trying to figure out how to grab a subset of the same paginated subscription.
Meteor.startup(function(){
Session.setDefault('page', 1);
Session.setDefault('recordCount', 0);
Session.setDefault('recordsPerPage', 10);
Session.setDefault('currentIndustry', null);
Session.setDefault('currentMapArea', null);
Session.setDefault('gmapLoaded', false);
});
Deps.autorun(function () {
Meteor.call('getJobsCount', Session.get('currentIndustry'), Session.get('currentMapArea'), function (err, count) {
Session.set('recordCount', count);
});
Meteor.subscribe('pagedRecords', Session.get('page'), Session.get('recordsPerPage'), Session.get('currentIndustry'), Session.get('currentMapArea'));
});
Template.gmap.rendered = function() {
if(!Session.get('gmapLoaded'))
gmaps.initialize();
}
var templateName = "jobs";
function plotCities(jobs) {
var addresses = _.chain(jobs)
.countBy('address')
.pairs()
.sortBy(function(j) {return -j[1];})
.map(function(j) {return j[0];})
.slice(0, 99)
.value();
gmaps.clearMap();
$.each(_.uniq(addresses), function(k, v){
var addr = v.split(', ');
Meteor.call('getCity', addr[0].toUpperCase(), addr[1], function(error, city){
if(city) {
var opts = {};
opts.lng = city.loc[1];
opts.lat = city.loc[0];
opts.population = city.pop;
opts._id = city._id;
gmaps.addMarker(opts);
}
});
});
}
Template[templateName].helpers({
selected: function(){
return Session.get('recordsPerPage');
}
});
Template[templateName].pages = function() {
var numPages = Math.ceil(Session.get('recordCount') / Session.get('recordsPerPage'));
var currentPage = Session.get('page');
var totalPages = Session.get('recordCount');
var prevPage = Number(currentPage) - 1;
var nextPage = Number(currentPage) + 1;
var html = '<div class="pagination-cont"><ul class="pagination">';
if (numPages !== 1) {
if (currentPage > 1) {
html += '<li>«</li>';
}
for (var i = currentPage; (i <= numPages) && (i - currentPage < 4); i++) {
if (i < 1) continue;
if (i !== currentPage)
html += '<li>' + i + '</li>';
else
html += '<li class="active">' + i + '</li>';
}
if (currentPage < numPages) {
html += '<li>»</li>';
}
}
html += '</ul></div>';
return html;
}
Template[templateName].jobs = function() {
var options = {};
var cursor;
if(!Session.get('currentMapArea')) {
cursor = Jobs.find({}, {limit: 500});
plotCities(cursor.fetch());
}
return Jobs.find({}, { limit: Session.get('recordsPerPage') });
}
Template[templateName].rendered = function(){
var select = $('#perPage');
var option = select.attr('_val');
$('option[value="' + option + '"]').attr("selected", "selected");
select.selectpicker({
style: 'btn-info col-md-4',
menuStyle: 'dropdown-inverse'
});
}
Template[templateName].events({
'click div.select-block ul.dropdown-menu li': function(e){
var selectedIndex = $(e.currentTarget).attr("rel");
var val = $('select#perPage option:eq(' + selectedIndex + ')').attr('value');
var oldVal = Session.get('recordsPerPage');
if(val != oldVal)
Session.set('recordsPerPage', Number(val));
},
'click .pageNum': function(e){
e.preventDefault();
var num = $(e.currentTarget).data('page');
Session.set('page', Number(num));
}
});
Currently, by default, only 10 records per page show up (unless the user selects from a drop-down a different amount). I have a plotCities function that I am using to try to plot the top 100 cities from the subset that is returned, however, I can't grab the top 100 because only 10 at a time show up.
Is there anyway to do what I am describing?
Ok, so the jobsPerCity and jobs are two totally different things, so I would use a separate on-fly-collection for the first one. Nothing will be stored in the database but the client will "think" that there is actually a jobsPerCity collection, which you can use to plot your map. The way you can achieve this is to define another named collection:
// only on the client !!!
var jobsPerCity = new Meteor.Collection("jobsPerCity");
On the server you will need to define a custom publish method:
Meteor.publish('jobsPerCity', function (options) {
var self = this;
var cities = new Meteor.Collection(null);
var jobToCity = {};
handle1 = Jobs.find({/* whatever condition you want */}).observeChanges({
added: function (id, fields) {
jobToCity[id] = fields.address.split(',')[0].toUpper();
cities.upsert({ _id: jobToCity[id] }, { $inc: { jobsCount: 1 } });
},
removed: function (id) {
cities.upsert({ _id: jobToCity[id] }, { $inc: { jobsCount: -1 } });
delete jobToCity[id];
},
changed: function (id, fields) {
// left as an exercise ;)
},
});
handle2 = cities.find({}, {sort: {jobsCount: -1}, limit: 100}).observeChanges({
added: function (id, fields) {
self.added('jobsPerCity', id, fields);
},
changed: function (id, fields) {
self.changed('jobsPerCity', id, fields);
},
removed: function (id) {
self.removed('jobsPerCity', id);
},
});
self.ready();
self.onStop(function () { handle1.stop(); handle2.stop(); });
});
and your good to go :)
EDIT (simple solution for more static data)
If the data is not going to be updated very often (as #dennismonsewicz suggested in one of his comments), the publish method can be implemented in a much simpler way:
Meteor.publish('jobsPerCity', function (options) {
var self = this, jobsPerCity = {};
Jobs.find({/* whatever condition you want */}).forEach(function (job) {
var city = job.address.split(',')[0].toUpper();
jobsPerCity[city] = jobsPerCity[city] !== undefined ? jobsPerCity[city] + 1 : 1;
});
_.each(jobsPerCity, function (jobsCount, city) {
self.added('jobsPerCity', city, { jobsCount: jobsCount });
});
self.ready();
});
I build a prototype that handle pages, I successfully add (push), but can get the data, I failed:
var foundImageIndex = Pages.indexFirst(function (item) { if (item.PageID == PageID) return true; });
Here the javascript page handler:
var Pages = new Array();
PageContainer = function () //constructor for the proxy
{
// this._baseURL = url;
};
PageContainer.prototype =
{
AddPage: function (data) {
if (data == null) return;
Pages.push({ PageID: data.PageID, SegmentID: data.SegmentID });
},
GetPage: function (PageID) {
alert('getPage('+PageID+')=' + JSON.stringify(Pages));
var foundImageIndex = Pages.indexFirst(function (item) { if (item.PageID == PageID) return true; });
var dt = { PageID: Pages[foundImageIndex].PageID, SegmentID: Pages[foundImageIndex].SegmentID };
return dt;
}
};
I call from other js as following:
var gPageContainer = new PageContainer();
for (var i = 0; i < SegStruct.SegmentsCount; i++) {
var segRClass = //get from webservice
gPageContainer.AddPage({ PageID: i, SegmentID: segRClass.SegmentID });
}
I trying to call: gPageContainer.GetPage(1); but it failed in GetPage: function (PageID) it returns -1 in:
var foundImageIndex = Pages.indexFirst(function (item) { if (item.PageID == PageID) return true; });
foundImageIndex always -1
why?
Simply add the following before the constructor:
if (typeof Array.prototype.indexFirst == 'undefined') {
Array.prototype.indexFirst = function (validator) {
for (var i = 0; i <= this.length - 1; i++) {
if (validator(this[i])) {
return i;
}
}
return -1;
};
}