I am using PDFMake (pdfmake v0.1.50) to generate my PDFs in a NodeJS and AngularJS application. The links in the generated PDF do not redirect to the embedded link. They redirect to the downloaded file's location path. This is a simple snippet as an example.
const docDefinition = {
content: [
{
text: 'Sample Report For Testing',
link: 'https://www.google.com/',
}
],
};
pdfMake.createPdf(docDefinition).download(fileName);
Should any other attributes be added to the link to make them work as external links?
var dd = {
content: [{
text: 'Sample Report For Testing '
},
{ text: 'Google link', link: 'https://www.google.com/', color: 'blue'}
]
}
Related
I have create a very simple addon for personal use. The only thing it does is show a "popup" with an external url. So far it works fine, but now I of course want to add features. For this I would like to access the url of the tab on which the extension is opened. I have tried many things, but I can't seem to put my finger on it. I would also be glad with the url being added as a parameter to the url of "default_popup".
This is my manifest.json:
{
"browser_action": {
"browser_style": true,
"default_title": "Name of addon",
"default_popup": "https://www.testdomain.com/dir/"
},
"icons": {
"48": "lock.svg",
"96": "lock.svg"
},
"description": "Open given page in window on top of browser I guess...?",
"manifest_version": 2,
"name": "Name of addon",
"version": "1.0.11",
"permissions": [
"tabs"
],
"applications": {
"gecko": {
"id": "name#testdomain.com"
}
}
}
It's probably just a simple thing for you seasoned developers, but I have only started today :)
You'll have to declare the popup to use a page that belongs to the extension. The script inside that page will be able to get the current tab's URL and redirect the popup to the external site.
manifest.json, inside browser_action section:
"default_popup": "popup.html"
Create popup.html:
<script src="popup.js"></script>
Create popup.js:
(async () => {
const [tab] = await browser.tabs.query({active: true, currentWindow: true});
location.href = 'https://www.example.com/?foo=' + encodeURIComponent(tab.url);
})();
I want to add a custom plugin to a rails backed tinyMCE editor, however in the console I get editor.ui is undefined and it fails
If I comment out any code relating to editor.ui in the config.js file then the editor loads and using the 'Help' plugin I can see that my plugin is loading fine from the getMetadata function
/config/tinymce.yml
toolbar:
- bold italic underline superscript subscript underline | link | alignleft aligncenter alignright | bullist numlist | hr | forecolor | backcolor | table | myplugin | image | help
plugins:
- link table lists textcolor myplugin image imagetools help
app/assets/javascripts/tinymce/plugins/myplugin/plugin.js
(this is just copied directly from https://www.tiny.cloud/docs/advanced/creating-a-plugin/ changing "example" for "myplugin")
$(document).on("ready", function() {
tinymce.PluginManager.add("myplugin", function(editor, url) {
var openDialog = function () {
return editor.windowManager.open({
title: "Example plugin",
body: {
type: "panel",
items: [
{
type: "input",
name: "title",
label: "Title"
}
]
},
buttons: [
{
type: "cancel",
text: "Close"
},
{
type: "submit",
text: "Save",
primary: true
}
],
onSubmit: function (api) {
var data = api.getData();
// Insert content when the window form is submitted
editor.insertContent("Title: " + data.title);
api.close();
}
});
};
// Add a button that opens a window
editor.ui.registry.addButton("myplugin", {
text: "My button",
onAction: function () {
// Open window
openDialog();
}
});
// Adds a menu item, which can then be included in any menu via the menu/menubar configuration
editor.ui.registry.addMenuItem("myplugin", {
text: "Example plugin",
onAction: function() {
// Open window
openDialog();
}
});
return {
getMetadata: function () {
return {
name: "Example plugin",
url: "http://exampleplugindocsurl.com"
};
}
};
});
});
Which version of TinyMCE are you using? This code works fine on our fiddle website:
http://fiddle.tinymce.com/PGgaab
Without seeing the full code you are using it will be hard to say for sure but document ready in jQuery is likely firing well before TinyMCE itself is initialized. If that is the case you can't use a TinyMCE API to add a plugin before TinyMCE is initialized.
I would, as that documentation page suggests, place the plugin code in a file and load it like all other TinyMCE plugins. TinyMCE will get the plugins at the correct time in its initialization process and this would no longer be an issue.
After whitelisting my domain, I try to access messenger extension to get the user ID, it failed with error :
Messenger Extensions are not enabled - could be "messenger_extensions"
was not set on a url, the domain was not whitelisted or this is an
outdated version of Messenger client
I tried the messenger on google chrome and firefox same error is appearing. messenger_extensions is set to true and domain is whitelisted; I confirmed.
Why is it bring that message?
Are you trying to access it through a browser? If so that may be why you are having issues.
Try access the url through the messenger app on your phone. This will iFrame in the web page and you will have access to the MessengerExtensions sdk.
Not sure how you are supposed to be able to log within messenger though. I did something like this to test it out
window.extAsyncInit = function() {
// the Messenger Extensions JS SDK is done loading
MessengerExtensions.getUserID(function success(uids) {
// User ID was successfully obtained.
var psid = uids.psid;
console.log("psid", psid)
$('.error').html(psid)
}, function error(err, errorMessage) {
// Error handling code
console.log(err, errorMessage)
$('.error').html(errorMessage)
});
};
You should add image_url to the message. This field isn't required, but if you don't include it, the shared message will only work within a mobile context.
Example:
var messageToShare = {
attachment: {
type: "template",
payload: {
template_type: "generic",
elements: [{
title: "Title",
image_url: "https://image.flaticon.com/teams/slug/freepik.jpg",
subtitle: 'A shared list from Tasks',
default_action: {
type: "web_url",
url: "your_url",
messenger_extensions: true,
webview_height_ratio: "full",
fallback_url: "fallback_url"
},
buttons: [{
type: "web_url",
title: "title",
url: "your_url",
messenger_extensions: true,
webview_height_ratio: 'full',
fallback_url: "fallback_url"
}]
}]
}
}
};
Also, with messenger_extensions: true you'll need to add fallback_url: "<your_fallback_url_here>" to make it work.
I'm using select2 (v 4.0.3) with Bootstrap 3 and I have to display several hundreds of alternatives per optgroup. Now I wish to collapse/expand the optgroups on click to make it a bit more manageable. I couldn't find any info on this so I thought I'd post a question.
I found an approach to this problem but I couldn't get it to work (it seems a bit outdated issue #730). The basic problem with that approach now is that in the current version of select2 elements aren't created until they are needed. Also, the class names seem to have changed a bit, as have apparently the names of events in the move to the latest version.
So far I've managed to get the collapse/expand functionality to work for the optgroups, but issues arise when the user provides text input (check the fiddle).
$(function () {
var data = [
{
text: "Group 1",
children: [
{ id: 'A1', text: 'a1'},
{ id: 'B2', text: 'b2'},
{ id: 'C3', text: 'c3'}]
},
{
text: "Group 2",
children: [
{ id: 'A2', text: 'a2'},
{ id: 'B3', text: 'b3'},
{ id: 'C1', text: 'c1'}
]
}];
$('#mySelect')
.select2({data: data, placeholder : 'Select one' });
// Toggle group on click
$('.select2')
.on('click', function(){
$('.select2-results__option').on('click', function(){
$(this).find('.select2-results__options--nested').toggle();
});
});
});
When the text input is used select2 runs the search and the events I've registered are dropped. My plan was to capture text input and check if the input field is empty or not, based on which I can decide to recreate the optgroup listeners or show all optgroups. Any help in this direction would be appreciated.
I am a 100% newb to Sencha and am trying to take a stab at re-factoring my company's mobile app.
Here is my app.js:
Ext.application({
name: 'RecruitTalkTouch',
views: ['Login'],
launch: function () {
Ext.Viewport.add([
{ xtype: 'loginview' }
]);
}
});
Login.js View:
Ext.define('RecruitTalkTouch.view.Login', {
extend: 'Ext.Container',
alias: "widget.loginview",
xtype: 'loginForm',
id: 'loginForm',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Button' ],
config: {
title: 'Login',
items: [
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
},
{
xtype: 'fieldset',
title: 'Login Example',
items: [
{
xtype: 'textfield',
placeHolder: 'Email',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
},
{
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'passwordTextField',
name: 'passwordTextField',
required: true
}
]
},
{
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In'
}
]
}
});
Login.js Controller:
Ext.define('RecruitTalkTouch.controller.Login', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: 'loginForm'
},
control: {
'#logInButton': {
tap: 'onSignInCommand'
}
}
},
onSignInCommand: function(){
console.log("HELLO WORLD");
}
});
When I click the submit button, nothing happens. How can I hook up my submit button to listen for events (click, tap, etc) along with submitting the information to a backend API?
In app.js file of your application, add:
controllers: [
'Login'
]
in your application class. And for submitting information, call a Ajax request like this:
Ext.Ajax.request({
url: // api url..,
method: 'POST',
params: {
username: // get user name from form and put here,
password: // get password and ...
},
success: function(response) {
do something...
},
failure: function(err) {do ..}
});
from inside onSignInCommand() function.
You must activate your controller by adding it to the controllers option of your application class.
Then, to submit your data to the backend, you've got several options. You can use a form panel instead of your raw container, and use its submit method. Alternatively, you can use the Ext.Ajax singleton. In this case, you'll have to build the payload yourself. Finally, you can create a model with a configured proxy, and use its save method. This last way is probably the best for long term maintainability... Even if in the case of a simple login form, that may be a little bit overkill.
Can u please refer this sample app to create login form. Its very simple app please go through it.
http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application/