How do I customise telescope-base? - meteor

In the open source example http://www.telesc.pe/, how do I remove digest and daily view items from the view menu? Do I need to modify telescope-base?

You need to create a new package to hold your customizations. You can look at the Telescope documentation, look at existing theme packages such as base and hubble, or copy and adapt the telescope-blank package.
Once you have your new package, you can simply overwrite the viewNav menu. For example:
viewNav = [
{
route: 'posts_top',
label: 'top'
},
{
route: 'posts_new',
label: 'new'
},
{
route: 'posts_best',
label: 'best'
}
];
The daily view is provided by another package, telescope-daily, so you'll need to remove it from the app if you don't want to use it:
meteor remove telescope-daily
(Note that the digest view will also be extracted out as its own package eventually, but right now it's still part of the core)

You can try this :
Create a config.js under client/ and put the following code inside :
while(viewNav.length > 0){
viewNav.pop();
}
viewNav.push({
route: 'posts_top',
label: 'Top'
});
// etc...
This will load after telescope-base which is responsible for exporting viewNav an array used to control which items are inserted in the menu.

Related

Can't get the `data-*-id` attribute to properly record the custom event name via ClickAnalytics plugin

I have a client React app I'm instrumenting in appinsights, and I'm using both the React plugin and the new ClickAnalytics plugin. Everything works, telemetry is flowing, however I'm having trouble getting the data-*-id custom event feature working properly.
The docs say:
The id provided in the data-*-id will be used as the customEvent name. For example, if the clicked HTML element has the attribute "data-sample-id"="button1", then "button1" will be the customEvent name.
I instrument an element as follows (using Semantic UI React):
<Button
data-custom-id="AddDealButton"
as={Link}
color="blue"
icon
labelPosition="right"
size="huge"
>
Clicking that button causes the custom event to record but the name, "AddDealButton", doesn't flow through. I always get not_specified as the event name:
Reading the docs, there is this warning regarding the plugin configuration:
If useDefaultContentNameOrId is false, then the customEvent name will be "not_specified".
So I am initializing the plugin this way:
...
extensions: [reactPlugin, clickPlugin],
extensionConfig: {
[reactPlugin.identifier]: { history: browserHistory },
[clickPlugin.identifier]: { autoCapture: true, useDefaultContentNameOrId: true }
}
...yet the name does not pass. Am I misconfiguring? Any idea what I'm doing wrong?
It turns out the problem was in the initialization configuration I showed above. It should be set up as follows:
...
extensions: [reactPlugin, clickPlugin],
extensionConfig: {
[reactPlugin.identifier]: { history: browserHistory },
[clickPlugin.identifier]: { autoCapture: true, dataTags: { useDefaultContentNameOrId: true } }
}
The resulting event name is not being pulled from my data-custom-id but rather pulled from the content of the Icon element of the Button component, so the event name becomes "Create new deal", but I can figure that out.
Microsoft's docs show a different samples for the npm install method vs the "snippet" method, and so I missed the dataTags sample.

tinyMCE4 can't get external templates to work

I'm very new to tinyMCE (and to JavaScript), so I'm sorry if the answer to my question is obvious. (I'm also working on code and files that another developer created and that I'm not overly familiar with.)
I need to use an external template file for tinyMCE4, and I can't get it to work. I've looked at the tinyMCE4 documentation, but I don't understand where I'm going wrong.
The tinyMCE init is in an index.cfm file, and the list of templates is in a separate file, template_list.js.
Contents of template_list.js:
var tinyMCETemplateList = [
["Name", "templates/file1.cfm", "Name."],
["Name2", "templates/file2.cfm", "Name2."],
...
];
In index.cfm, I've included "template" in the plugins line.
To pull in the templates to appear as a list in a drop-down so the user can choose a template, I've tried:
template_external_list_url: "tinymce/js/tinymce/template_list.js"
With this, when I run the program and click the Insert Template button I get a "No templates defined" error.
I've also tried:
templates : [{url:"tinymce/js/tinymce/template_list.js"}]
With this, the Insert Template dialog box appears, but the drop-down is empty, and the raw code from template_list.js appears in the text area under the drop-down. I get the same result if I change the code in template_list.js to:
[
{title: "Name", url: "templates/file1.cfm", description: "Name."},
{title: "Name2", url: "templates/file2.cfm", description: "Name2."},
...
]
...and also if I add quotations around "title", "url", and "description".
Again, sorry if the answer is obvious, but as a beginner I appreciate any help.
Per the documentation the TinyMCE configuration object expects you to pass an array containing one object for each template. At a high level it would look like this:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: [
{title: 'Item 1', description: 'Desc 1', content: 'My content'},
{title: 'Item 2', description: 'Desc 2', url: 'development.html'}
]
});
You will note that the templates configuration option is passed an array of objects - this is what TinyMCE expects so no matter what you have to return an array of objects.
You can insert the template HTML directly (as shown in the first example above) or you can point to a URL that the browser can fetch when TinyMCE is initialized (as shown in the second example above). There is no template_external_list_url configuration option so that is not working because its not valid.
If you want to externalize the templates outside the TinyMCE configuration you can place the data in a file and reference that via a URL. For example:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: "/path/to/the/file/templates.php"
});
The URL referenced there must return an array of objects as that is ultimately what TinyMCE is expecting. Your example above seems to imply your external file is returning a JavaScript variable named tinyMCETemplateList - but that means nothing to TinyMCE so while the file may be loaded what is "returned" is not an array of JavaScript objects.
I would suggest you start by getting things to work without externalizing the templates (just make sure you get the basics working). Then externalize the content to a separate file and make sure that the file returns an array of objects. I would note that your example using tinyMCETemplateList seems to return an array of arrays which is not what TinyMCE is expecting.
I found this really frustrating and fiddly to get working at all. Eventually what I'm doing is calling a function in another js file that returns an array that I give to the templates parameter.
function GetTemplateArray()
{
return new Array(
{
title: "2 Columns",
url: "templates/template1.html",
description: "Adds a 2 column table"
},
{
title: "3 Columns",
url: "templates/scf/template2.html",
description: "Adds a 3 column table"
}
);
}
Then in the tinymce.init code:
tinymce.init(
{
...
templates: GetTemplateArray(),
...

setting rowsPerPageOptions in alfresco share document library pagination section

I need to enable rowsPerPageOptions in documentLibrary paginator section.I found that paginator is configured in _setupHistoryManagers function in OOTB documentlist.js. so I have created documentlist-custom.js and overwrite entire function[_setupHistoryManagers] that exists in OOB documentlist.js and put it in my custom js file.it working fine.
But I want to know Is it the right way or Is there any way setting the adding this rowsPerPageOptions option in this.widgets.paginator function instead of copying whole _setupHistoryManagers function in custom js file?
using 4.2.2 version.
_setupHistoryManagers
{
// YUI Paginator definition
this.widgets.paginator = new YAHOO.widget.Paginator(
{
containers: [this.id + "-paginator", this.id + "-paginatorBottom"],
rowsPerPage: this.options.pageSize,
initialPage: this.currentPage,
rowsPerPageOptions: [25,50,75,100,500],
template: this.msg("pagination.template"),
pageReportTemplate: this.msg("pagination.template.page-report"),
previousPageLinkLabel: this.msg("pagination.previousPageLinkLabel"),
nextPageLinkLabel: this.msg("pagination.nextPageLinkLabel")
});
}

Multilingual in Meteor

I'm developing a multilingual app in Meteor.js
I would like to know about best way in your opinion to do that; as example here is wat I'm doing right now (pretty sure that can be done better);
First I save items in mongodb with properties neted in a language root:
{
en: {
name: "english name",
content: "english content"
},
it: {
name: "italian name",
content: "italian content"
},
//since images are the same for both, are not nested
images: {
mainImage: "dataURL",
mainThumb: "dataURL"
}
}
Then I publish a subscription using currentLang session variable:
Meteor.publish("elementsCurrentLang", function(currentLang) {
var projection = {
images: 1
};
projection[currentLang] = 1;
return Elements.find({}, projection);
});
I subscribe on route using Iron Router waitOn hook:
Router.route('/eng/elements', {
waitOn: function() {
return Meteor.subscribe("municipalitiesCurrentLang", Session.get('currentLang'));
},
action: function() {
this.layout('ApplicationLayout');
this.render('elements');
}
});
Now the first problem: I would like to reuse the same template for every language, but I can't simply put in the template {{name}} or {{content}} since the subscription returns the attributes nested under lang root, so it is needed to do for example {{en.name}} for english or {{it.name}} for italian;
To avoid this I use a template helper that buids a new object; essentially it removes attributes from the lang root:
Template.elements.helpers({
elements: function() {
var elements = Elements.find();
var currentLang = Session.get('currentLang');
var resultList = [];
elements.forEach(function(element, index) {
var element = {
name: element[currentLang].name,
content: element[currentLang].nameUrl,
images: element.images
};
resultList.push(element);
});
return resultList;
}
});
And now in the template I can access attributes like wanted:
<h1>{{name}}</h1>
<p>{{content}}</p>
Before continuing with this approach I want to listen for suggestions, since I don't know if this will work well; when Session.currentLang will change, the subscription will be reloaded?
is there a way to avoid the forEach loop in template helpers?
I'm developping a multilangage web app too and I advise you to use a package, like this one : https://atmospherejs.com/tap/i18n
You can change the langage reactively. Have the same template for all your langages, as you want !
You can put it as a parameter in the route.
Personnaly I use it as a Session variable and in the user profile !
If you use this package, you also can export your app, or part of it, more easily as many developpers will use the same code.
you put all your words in json files :
en.i18n.json:
{
"hello": "hello"
}
fr.i18n.json:
{
"hello": "bonjour"
}
and
{{_ "hello" }}
will write hello or bonjour depending of the langage set. You can set it with :
TAPi18n.setLanguage(getUserLanguage())
//getUserLanguage() <- my function to get the current langage in the user profile or
the one used by the navigator
This module does what you're looking for
https://github.com/TAPevents/tap-i18n-db
As the developer says: "Extends the tap:i18n package to allow the translation of collections."
Finally there is a package which is very complete (it also works with number formats, locales...) and is being updated frequently.
https://github.com/vazco/meteor-universe-i18n
You can also install https://atmospherejs.com/universe/i18n-blaze for using it with blade.
Just name your files with the pattern locale.i80n.json and its contents like
{
name: "english name",
content: "english content"
}
then translate your strings with {{__ 'name'}}.

Meteor local package, phaser game, asset loading?

Ok I'm trying to make a package from a Phaser game, been researching this for a couple of days, but it doesn't seem to work.
I think I identified the problem though, hopefully somebody can help me with this!
I set everything up to make use of a local package, which all works.
Untill I'm preloading an asset.
This is my Menu class
Menu = function() {
console.log(this);
}
Menu.prototype = {
preload: function(){
this.load.image('background', 'assets/background.png');
console.log("ok in preload");
},
create: function(){
this.background = this.game.add.sprite(0, 0, 'background');
console.log("ok in create");
var text = "We're getting there";
var style = { font: "23px Arial", fill: "#ff0044", align: "center" };
var t = game.add.text(game.world.centerX, 0, text, style);
},
};
and I call this by doing
game = new Phaser.Game(400, 300, Phaser.AUTO, "gameWindow");
game.state.add('menu', Menu);
game.state.start('menu');
which all seems to work by looking at the console logs, as long as I don't try to load the image in the preload function, if I do it just keeps stuck in the preload function.
The background.png is located at my root folder going 'public/assets/background.png'.
So I'm thinking when I try to access this from a local package, it is having trouble getting there...
my package.js is this btw:
Package.describe({
summary: "game one"
});
Package.on_use(function (api, where) {
api.use(['phaserio'], 'client');
api.add_files(['states/menu.js'],
['client']);
api.export('Menu', ['client']);
});
Anybody out there, that sees what I'm doing wrong?
Thanks in advance!
you should be able to load public images from the app, but it depends when that preload sequence is running. Packages get parsed first. So is your new game created within a Meteor.startUp ->? by which time the app itself is initialized?
Also you can put assets in the package itself.
are you using 0.9? there are some issues with paths for static assets inside packages
see this thread:
https://github.com/meteor/meteor/issues/2602
for 0.9 packages you'll have to add a bit more info
Package.describe({
summary: "phaser for meteor",
version: '0.0.1',
git: 'https://github.com/dcsan/package-dev',
name: "YOURNAME:phaser"
});
currently if you use something like replacing colon with an underscore:
/packages/YOURNAME_phaser/added/path/to/asset.png
if you get phaser wrapped i would also be interested, so please publish it to atmosphere!

Resources