Yammer Open-graph and Commenting - facebook-opengraph

I have this code, no API nor nothing, I simply would like to get a Group ID inside here for it to be the default option for where to share the comment and embed the comment stream on Yammer, is this even possible? Is there a way to block the possibility of selection from all your groups and leave it to just one?
<script>
yam.connect.embedFeed({
container: "#embedded-feed",
feedType: "open-graph",
config: {
header: true,
footer: false,
promptText: "Remember to select a Group and/or person",
showOpenGraphPreview: true,
}
});
</script>
The Code is working, but I just need to filter that option
Thank you

We just released this feature. Documentation is to be updated very soon, use "defaultGroupId" inside your config to get your group selected.

i have done a simple implementation like this.
var generateYammerFeeds = function(title, description) {
try {
yam.connect.embedFeed({
container: "#yammerDiscussion",
network: "abc.com",
feedType: "open-graph",
objectProperties: {
fetch: true,
private: false,
ignore_canonical_url: false,
url: location.href,
type: "page",
title: title,
image: '',
description: description
},
config: {
header: true,
footer: true,
showOpenGraphPreview: false,
defaultToCanonical: true,
hideNetworkName: true,
promptText: "Ask a Question",
defaultGroupId: 121212
}
});
return true;
} catch (e) {
return null;
}
};

Related

Getting Cannot execute "delete" on "Article" in CASL JS

I'm learning CASL JS and trying to delete an article with a condition but getting this error Cannot execute "delete" on "Article". Here is the CodeSandBox Link.
Here is the sample code:
const { createMongoAbility, ForbiddenError } = require("#casl/ability");
const rules = [
{
action: "read",
subject: "Article"
},
{
inverted: true,
action: "delete",
subject: "Article",
conditions: { published: true },
reason: "You are not allowed to delete this article"
}
];
const ability = createMongoAbility(rules);
// this can be pulled from a database
class Article {
constructor(attrs) {
Object.assign(this, attrs);
}
}
const anotherArticle = new Article({
authorId: 2,
published: false,
content: "Lorem Ipsum"
});
try {
// checking ability before taking some action
ForbiddenError.from(ability).throwUnlessCan("delete", anotherArticle);
} catch (error) {
console.log(error.message); // throwing `Cannot execute "delete" on "Article"`
}
Please help me out. Thanks
The creator of CASL JS has answered this:
you declared that it's not possible to delete published articles but you have never said that it's possible to delete articles at all. That's why you get the error
So this means that I already declared inverted permission and it's not possible to delete articles.

Is there a way to show related model ids without sideloading or embedding data

My understanding is that using serializeIds: 'always' will give me this data, but it does not.
Here's what I'm expecting:
{
id="1"
title="some title"
customerId="2"
}
Instead the output I'm receiving is:
{
id="1"
title="some title"
}
My code looks something like this:
import {
Server,
Serializer,
Model,
belongsTo,
hasMany,
Factory
} from "miragejs";
import faker from "faker";
const ApplicationSerializer = Serializer.extend({
// don't want a root prop
root: false,
// true required to have root:false
embed: true,
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always"
});
export function makeServer() {
let server = newServer({
models: {
invoice: Model.extend({
customer: belongsTo()
}),
customer: Model.extend({
invoices: hasMany()
})
},
factories: {
invoice: Factory.extend({
title(i) {
return `Invoice ${i}`;
},
afterCreate(invoice, server) {
if (!invoice.customer) {
invoice.update({
customer: server.create("customer")
});
}
}
}),
customer: Factory.extend({
name() {
let fullName = () =>
`${faker.name.firstName()} ${faker.name.lastName()}`;
return fullName;
}
})
},
seeds(server) {
server.createList("invoice", 10);
},
serializers: {
application: ApplicationSerializer,
invoice: ApplicationSerializer.extend({
include: ["customer"]
})
},
routes() {
this.namespace = "api";
this.get("/auth");
}
});
}
Changing the config to root: true, embed: false, provides the correct output in the invoice models, but adds the root and sideloads the customer, which I don't want.
You've run into some strange behavior with how how serializeIds interacts with embed.
First, it's confusing why you need to set embed: true when you're just trying to disable the root. The reason is because embed defaults to false, so if you remove the root and try to include related resources, Mirage doesn't know where to put them. This is a confusing mix of options and Mirage should really have different "modes" that take this into account.
Second, it seems that when embed is true, Mirage basically ignores the serializeIds option, since it thinks your resources will always be embedded. (The idea here is that a foreign key is used to fetch related resources separately, but when they're embedded they always come over together.) This is also confusing and doesn't need to be the case. I've opened a tracking issue in Mirage to help address these points.
As for you today, the best way to solve this is to leave root to true and embed false, which are both the defaults, so that serializeIds works properly, and then just write your own serialize() function to remove the key for you:
const ApplicationSerializer = Serializer.extend({
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always",
serialize(resource, request) {
let json = Serializer.prototype.serialize.apply(this, arguments);
let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)
return json[root];
}
});
You should be able to test this out on both /invoices and /invoices/1.
Check out this REPL example and try making a request to each URL.
Here's the config from the example:
import {
Server,
Serializer,
Model,
belongsTo,
hasMany,
Factory,
} from "miragejs";
import faker from "faker";
const ApplicationSerializer = Serializer.extend({
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always",
serialize(resource, request) {
let json = Serializer.prototype.serialize.apply(this, arguments);
let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)
return json[root];
}
});
export default new Server({
models: {
invoice: Model.extend({
customer: belongsTo(),
}),
customer: Model.extend({
invoices: hasMany(),
}),
},
factories: {
invoice: Factory.extend({
title(i) {
return "Invoice " + i;
},
afterCreate(invoice, server) {
if (!invoice.customer) {
invoice.update({
customer: server.create("customer"),
});
}
},
}),
customer: Factory.extend({
name() {
return faker.name.firstName() + " " + faker.name.lastName();
},
}),
},
seeds(server) {
server.createList("invoice", 10);
},
serializers: {
application: ApplicationSerializer,
},
routes() {
this.resource("invoice");
},
});
Hopefully that clears things up + sorry for the confusing APIs!

Fullcalendar V4: How to parse json received from ajax into event list

I'm trying to retrieve a list of events from an ajax call. I use the following code.
document.addEventListener("DOMContentLoaded", function()
{ var calendarEl = document.getElementById("id_d_agenda_1");
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2019-08-12',
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
selectMirror: true,
select: function(arg) {
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
events: function(arg) {
$.ajax({
url: 'd.php',
dataType: 'json',
data: {
cmd:'getdata',
start:arg.startStr,
end:arg.endStr,
tz:arg.timeZone,
component:'d_agenda_1',
},
success: function(doc) {
$(doc).each(function() {
calendar.addEvent( this );
})
}
})
}
})
calendar.render();
});
While debugging my javascript I can see the rows of events appear in 'doc'. First I tried to bulk add them to the agenda, but that didn't seem to work. Now I'm adding them one-by-one, buth they still don't appear. I have checked the this variable in the debugger and it shows a single event:
title:"value", start:"2019-08-01". In fact I'm using the sample list that comes with the package. Can someone point me to the right direction in what I'm doing wrong?
other options I tried (with no luck ;-):
I tried to leave the jquery out, but with similar effect:
success: function(doc) {
doc.forEach(function(value) {
calendar.addEvent( value );
})
}
success: function(doc) {
$(doc).each(function() {
calendar.addEvent({
title:this.title,
start:this.start
});
})
Not sure if it's helpful, but I added the selectable option and tested the select option. The calendar.addevent on the select: doesn't add the event either. Since this is copied from the sample i'm quite confused now. Fun part is that if you replace the ajax part with a regular [] expression that all works well. Even the selectable options, so there's definitely something wrong with my ajax implementation, in regards to this component.
According to the DOCS you need to have a successCallback that will return the events to the calendar.
Here is the docs https://fullcalendar.io/docs/events-function
Here is a simple Demo https://codepen.io/nasser-ali-karimi/pen/gOOJrWV?editors=0010
And in short, I can say that you need to set the events like this.
events: function(info, successCallback, failureCallback) {
successCallback([
{"resourceId":"a","title":"event 1","start":"2019-11-23","end":"2019-11-25"},
{"resourceId":"b","title":"event 3","start":"2019-11-24T12:00","end":"2019-11-25T06:00"},
{"resourceId":"b","title":"event 4","start":"2019-11-24T07:30","end":"2019-11-24T09:30"},
{"resourceId":"b","title":"event 5","start":"2019-11-24T10:00","end":"2019-11-24T15:00"},
{"resourceId":"a","title":"event 2","start":"2019-11-24T09:00","end":"2019-11-24T14:00"}
])
}
you didn't mention the events data that comes from Ajax request, so I can say you need to provide the data like what said on docs.
Addition
Note: Event's date are on 11/28 and 11,29 so navigate to those dates to see the events.
Demo https://codepen.io/nasser-ali-karimi/pen/qBBGVbG?editors=0010
events: function(info, successCallback, failureCallback) {
var arrevents = [];
jQuery.get( "https://api.myjson.com/bins/16ubhe", function( data ) {
// var response = JSON.parse(data);
// $.each(response, function(k, v) {
// arrevents.push(v);
// });
arrevents = data;
successCallback(arrevents);
});
},

How to change Formatting menu options in redactor?

By default, under the Formatting menu (when the button is clicked), there are these options:
Normal Text
Quote
Code
Header 1
Header ...
Header 5
I would like to only have these options:
Normal Text
Quote
Code
Is there any way to do that? I've been scouring the configuration options and haven't been able to find out how to do it.
Olivérs answer is wrong.
You can easily achieve this by doing the following:
$('#redactor').redactor({
formattingTags: ['p', 'blockquote', 'pre']
});
Demo: http://jsfiddle.net/EkM4A/
Sadly the only way to achieve this is to decorate your redactor instance before init and overwrite the default toolbar setting in redactor.
You can see a working POC here: http://jsfiddle.net/Zmetser/7m3f9/
And the code below:
$(function() {
// Decorate redactor Object before init
$.Redactor.fn = (function () {
var toolbarInitOriginal = this.toolbarInit;
// Create a new toolbarInit method which suits our needs
this.toolbarInit = function (lang) {
// Grab the default toolbar...
var toolbar = toolbarInitOriginal(lang);
// ...and overwrite the formatting dropdown menu
toolbar.formatting.dropdown = {
p: {
title: lang.paragraph,
func: 'formatBlocks'
},
blockquote: {
title: lang.quote,
func: 'formatQuote',
className: 'redactor_format_blockquote'
},
pre: {
title: lang.code,
func: 'formatBlocks',
className: 'redactor_format_pre'
},
};
return toolbar;
};
return this;
}.call($.Redactor.fn));
// Init redactor
$('#redactor').redactor({
buttons: ['link', 'formatting', 'html']
});
});

Jqgrid in jquery ui tabs

I have a custom button for my jqgrid that when pressed takes me to another view.
But for some reason when i navigate between the tabs there is an extra added custom button every time a re-visit that tab. Is there a way to say only to add this button once?
This is the markup:
$('#tabs').tabs( {
show: function (event, ui) {
if(ui.index == 0) {
Show some content on this tab.. Not important.
}
if(ui.index == 1) {
$("#functionslist").jqGrid({
datatype: 'json',
url: '/Admin/GetFunctionsList',
colNames: ['Namn'],
colModel: [
{ index: 'FunctionName',
name: 'FunctionName',
width: 100,
sortable: false
}
],
rowNum: 20,
prmNames: { sort: 'SortColumn', order: 'SortOrder', page: 'Page', rows: 'Rows', search: null, nd: null },
hidegrid: false,
pager: '#functionspager',
autowidth: true,
shrinkToFit: true,
height: '100%',
caption: 'Functions',
viewrecords: true,
onSelectRow: function (id) {
window.location.href = '/Function/Edit/' + id;
}
}).jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
.navButtonAdd('#functionspager', {
caption: '',
title: 'Create new function',
buttonicon: 'ui-icon-plus',
onClickButton: function () {
window.location = '/Function/Add/';
}
}); .... and so forth....
Everything runs fine and i have the behavior i desire but for some reason when i navigate between the two tabs more and more custom button are added. Any ideas why, have tried to resolve this but with no luck.
/Daniel
Why not check to see if the button already exists before adding it?
if ($('#functionspager :has(".ui-icon-plus")').length == 0) {
$("#functionslist").jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
.navButtonAdd('#functionspager', {
...
});
}
The call $("#functionslist").jqGrid({/*parameters*/); convert the empty <table> to a grid having columns, capture, pager and so on. You should make the call once and not repeat it on every tab activation.
Exactly in the same way the methods navGrid and navButtonAdd should be called only once.
So you should decide what should be done if the user select the tab having jqGrid. You can for example call
$("#functionslist").trigger('reloadGrid', [{current:true}]);
(see here for details)

Resources