I am supporting a website that uses ShareThis. I notice that the email share is not configured properly. If one clicks on the email button, the following
&subject=I'd like to share a link with you
shows up in the "To" field of the mail client such as desktop Outlook. How can to fix this? The following is the ShareThis code the site uses:
window.__sharethis__.load('inline-share-buttons', {
alignment: 'right',
id: 'share-buttons',
enabled: true,
font_size: 12,
padding: 3,
radius: 2,
networks: ['facebook', 'twitter', 'reddit', 'email', 'sharethis'],
size: 18,
show_mobile_buttons: true,
spacing: 4
});
There isn't a built-in way with the ShareThis API to correct this issue but you can work around it by handling the share this onLoad event and intercepting the email button click event. I'm using jQuery but it's easy enough to accomplish the same thing with vanilla JS.
window.__sharethis__.load('inline-share-buttons', {
alignment: 'right',
id: 'share-buttons',
enabled: true,
font_size: 12,
padding: 3,
radius: 2,
networks: ['facebook', 'twitter', 'reddit', 'email', 'sharethis'],
size: 18,
show_mobile_buttons: true,
spacing: 4,
onLoad: function () {
//override the default email sharing functionality since it's broken in outlook
$('.st-btn[data-network=email]').on('click', function (e) {
var subject = "I'd like to share a link with you";
var body = $('#share-buttons').data('url');
document.location = "mailto:?subject=" + subject + "&body=" + body;
//Prevent default share this functionality
e.stopPropagation();
});
}
});
Related
I'm using tinymce a trying to extend a plugin to show a dialog with specific layout:
editor.windowManager.open({
title: 'Title of my dialog',
body: [
{type: 'label', text: 'my label'},
{ name:'my_input', type: 'textbox'},
// { type: 'text', html:'some content with <b>bold</b> if posilbe!'},
// { type: 'html', value:'<div>with custom formating</div>'}
]
}
I checked the the documentation for tinymce.ui several times but can find a way to add html or text component in the constructor of the dialog (like the comment rows in the example).
I know there is a option using a ready html template for the dialog.. but there are also a lot of events and triggers so using the constructor and .ui components is more suitable for my case.
I used to use JQuery UI dialog for this but ran into some issues after TinyMCE 4.0.
I have a TinyMCE plugin that lets people fetch the plain text version of their post in the WordPress editor. Then I show them that text using this:
var plain_block = {
type: 'container',
html: '<textarea style="margin: 10px; width: 550px !important; height: 450px !important; background-color: #eee;" readonly="readonly">Whatever plain text I need to show goes here</textarea>'
};
ed.windowManager.open({
title: "Plain Text of This Post",
spacing: 10,
padding: 10,
items: [
plain_block
],
buttons: [
{
text: "Close",
onclick: function() { ed.windowManager.close();}
}
]
});
End result is a pretty plain-jane dialog box with some HTML and a Close button
I am using this library: mobiscroll.custom-2.5.0.min.js. How do I set limits to deny users' selecting past dates?
My code:
xtype:'panel',
layout:'hbox',
width: (screenWidth-(84+24+55))/2,
cls: 'paymentsSectionDetailsDate',
items:[{
xtype:'panel',
html:'<div class="paymentsSectionDetailsDateLabel" >'+txt_PayOn+'</div>',
width: 80
},{
xtype: 'button',
text:txt_select_date,
name: 'BillPayDetailsForm_date',
id:'BillPayDetailsForm_date',
cls: 'paymentsSectionDetailsDateTextButt',
listeners:{
tap : function()
{
inputNumber=4;
$('#dateIos').fadeIn("slow");
}
}
}]
I am not familiar with mobiscroll, could you use a datepicker? It has 'yearFrom' and 'yearTo' configuration options. You might be able to use a listener to get the data into mobiscroll.
An earlier question mentioned a method using the el config in order to make the browser remember passwords. Howewer, the el config no longer exists in ExtJS 4.1.
Now, what should I do?
I believe it should be contentEl instead of el but I do this another way. You can build the entire thing with ExtJS directly. The only twist is that Ext fields will be created with the autocomplete=off attribute by default, so I use a derived class to override that.
Ext.define('ACField', {
extend: 'Ext.form.field.Text',
initComponent: function() {
Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) {
if (Ext.isString(oneTpl)) {
allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"');
}
});
this.callParent(arguments);
}
});
Ext.onReady(function() {
new Ext.panel.Panel({
renderTo: Ext.getBody(),
width: 300,
height: 100,
autoEl: {
tag: 'form',
action: 'login.php',
method: 'post'
},
items: [
new ACField({
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username'
}),
new ACField({
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password'
}),
],
buttons: [{
xtype: 'button',
text: 'Log in',
type: 'submit',
preventDefault: false
}]
});
});
The answer from lagnat was mostly correct, to get this also working on Chrome and Firefox the following is required:
1) Override default ExtJS Textfield behavior for autocomplete (copied from lagnat):
Ext.define('ACField', {
extend: 'Ext.form.field.Text',
initComponent: function() {
Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) {
if (Ext.isString(oneTpl)) {
allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"');
}
});
this.callParent(arguments);
}
});
2) Make sure the textfields are within a <form> tag: (see answer from lagnat), since ExtJS 4 the <form> tag is no longer present in a FormPanel.
autoEl: {
tag: 'form',
action: '/j_spring_security_check',
method: 'post'
},
3) Make sure there is a <form> present in the HTML, with the same <input> names:
items:[
Ext.create('ACField',{
fieldLabel: 'Username',
name:'j_username',
inputId: 'username',
allowBlank:false,
selectOnFocus:true
}),
Ext.create('ACField',{
fieldLabel:'Password',
name:'j_password',
inputId: 'password',
xtype:'textfield',
allowBlank:false,
inputType:'password'
})
],
and within the HTML the regular form with same input names:
<body>
<div id="login-panel">
<form id="loginForm" action="<c:url value="/j_spring_security_check"/>" method="post">
<input class="x-hidden" type="text" id="username" name="j_username"/>
<input class="x-hidden" type="password" id="password" name="j_password"/>
</form>
</div>
<noscript>Please enable JavaScript</noscript>
</body>
With all these changes in place, saving username/password works in IE, Chrome and Firefox.
There is the autoRender property which will allow you to apply the Extjs field to an already existing element on the page. So if you set up your basic form in html, the browser should recognize the fields for the form as login info, and then Extjs will overlay itself onto that form if you use the autoRender with a reference to the correct fields (and also the button on the form to a submit type button in your basic html form) it should work correctly.
Also, keep in mind that the browser probably will not recognize an ajax call for logging in and you may need to use the basic form submission. I have a working example in my application, but I would have a hard time trying to pull out application specific code so have an example for here. Please comment if you need the example and I may be able to get back to you by monday.
Answer by #Lagnat does not work for ExtJS 4.2.1 and 4.2.2. It might be due to removal of type config from button. What we need is standard submit button <input type="submit"> for the button. So I added it on the button with opacity: 0. Below is my working code (Tested working on Firefox 27, Chrome 33, Safari 5.1.7, IE 11. Autofill/Autosave password should be enabled for browser):
Ext.create('Ext.FormPanel', {
width: 400,
height: 500,
padding: '45 0 0 25',
autoEl: {
tag: 'form',
action: 'login.php',
method: 'post'
},
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
name: 'username',
listeners: {
afterrender: function() {
this.inputEl.set({
'autocomplete': 'on'
});
}
}
}, {
xtype: 'textfield',
fieldLabel: 'Password',
inputType: 'password',
name: 'username',
listeners: {
afterrender: function() {
this.inputEl.set({
'autocomplete': 'on'
});
}
}
}, {
xtype: 'button',
text: 'LOG IN',
width: 100,
height: 35,
preventDefault: false,
clickEvent: 'click',
listeners: {
afterrender: function() {
this.el.createChild({
tag: 'input',
type: 'submit',
value: 'LOG IN',
style: 'width: 100px; height: 35px; position: relative; top: -31px; left: -4px; opacity: 0;'
});
}
}
}]
});
I recommend using the built in Cookie functionality of ExtJS.
You can read a cookie using: readCookie('password);
You can create a cookie using: createCookie('password', "pass123", 30); // save for 30 days
Then you can use basic business logic to auto-populate your formField with the stored password.
Does that make sense?
Just diving into SenchaTouch which seems very promising.
I'm building my first application, a simple login form check source http://pastebin.com/8Zddr9cj
I'm looking for a way to do the following things :
Display 'nice' error message when the login/password is wrong. Can be in red to replace the 'Please enter your credentials); i don't know how to access this property.
If login success, close the form and load the application (probably another js file).
Quite simple, but i'm a newbie to this,
1) Fieldset has a method called setInstructions which you can call to update the instructions. So, you could specify an id configuration in your field set, then use that later on when you want to update the instructions.
...
items: [
{
xtype: 'fieldset',
id: 'fieldset',
title: 'Login',
instructions: 'Please enter your credentials',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: 'your#email.com',
useClearIcon: true
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}]
}
],
...
//wherever you want to update the instructions
var fieldset = Ext.getCmp('fieldset');
fieldset.setInstructions('My new instructions!');
2) Here is a simple demo of this:
//create a panel, which is full screen, and will contain your form, and another item
//which you want to show at some point
var wrapper = new Ext.Panel({
fullscreen: true,
layout: 'card',
//my two items
items: [
form,
{
xtype: 'panel',
html: 'my second panel, which is not visible on render.'
}
]
});
//change the active card/item, when you need to
wrapper.setActiveItem(1); //starts at 0
Make sure you remove fullscreen from your form, as it is no longer fullscreen (this wrapper panel is).
I'm about to send out an email campaign to my clients. The email will be sent in HTML format, and I wanted to embed a twitter feed in my email, similar to the twitter widgets you see embedded in blogs and websites everywhere. When I copy and paste the code generated through the twitter website, my email doesn't render anything :(
Any ideas if this is possible? Thanks! Here's the code twitter generated:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'faves',
rpp: 5,
interval: 6000,
title: 'The best of Twitter according to',
subject: 'My Tweets',
width: 250,
height: 300,
theme: {
shell: {
background: '#8540c2',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#43c43f'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('maryamKE').start();
</script>
There is no standard for HTML email, and most email clients sensibly reject JavaScript. I recommend you link to a page on your web site.
There is no good way to accomplish this with the embeds provided directly from Twitter.
This was a need I also had and created a service that makes it extremely easy: https://www.widgmail.com/