I've been trying to integrate 2 textareas for several days, within the same Summernote, but with a single toolbar, and I can't, could someone tell me if it's possible? (I am looking to do something like in the image below)
Multiple textareas mockup
The other option that I have thought of is multiple editors that, when doing onfocus and onblur, hide or show the toolbar, depending on the editor you are in.
I am using the following code, but it does not do the trick, because it identifies the two editors, and what it does is show or hide the two toolbars at the same time. I would need to identify each toolbar specifically, but as much as I try, I can't.
If anyone could lend me a hand, I'd be very grateful.
callbacks: {
onBlur: function (e) {
var p = e.target.parentNode.parentNode;
if (!(e.relatedTarget && $.contains(p, e.relatedTarget))) {
$(this).parent().children('.note-editor').children('.note-toolbar').css("display", "none");
}
},
onFocus: function (e) {
var p = e.target.parentNode.parentNode
$(this).parent().children('.note-editor').children('.note-toolbar').css("display", "block");
}
}
Related
I need to start editing in the search bar programmatically when the Form is shown. Because I didn't find any API for that, I wrote this code inside the Form:
addShowListener(l -> {
for (int i = 0; i <= getToolbar().getComponentCount(); i++) {
if (getToolbar().getComponentAt(i) instanceof Button) {
Button btn = (Button) getToolbar().getComponentAt(i);
if (btn.getUIID().equals("TitleCommand")) {
btn.pressed();
btn.released();
}
if (btn.getUIID().equals("BackCommand")) {
btn.addActionListener(ev -> {
backForm.showBack();
});
}
}
}
});
The problems of this code:
it relies on the current implementation of the method Form.getToolbar().addSearchCommand, that created in the toolbar a button with UIID TitleCommand (the search icon on the right) and another button with UIID BackButton (the arrow on the left).
my listener added to the back button doesn't work: instead of show the backForm, it shows the toolbar without the search bar.
So... my question is how to implement what I need with a better coding. Is it necessary to do an RFE to expose an API like Toolbar.startSearchEditingAsync()? And how can I change the default actionListener of backButton?
If you need to initiate it before it's shown you might need something more elaborate similar to Form.setEditOnShow().
This seemed a bit simpler in my head when I started it but once I started I had to finish so I implemented this here: https://github.com/codenameone/CodenameOne/commit/86fea99196dd5a453988ede8217e0809e529469a
It should work, let me know if it has issues.
I am trying to use this plugin to be able to list all items when we click on the textbox as well as do basic autocomplete functions. It doesn't seem to be able to do this however unless I am wrong.
http://codepen.io/moroshko/pen/LGNJMy
function getSuggestions(value) {
const escapedValue = escapeRegexCharacters(value.trim());
if (escapedValue === '') {
return languages;
}
const regex = new RegExp('^' + escapedValue, 'i');
return languages.filter(language => regex.test(language.name));
}
I tried to use the above, but it doesn't work and I am unsure if it having the full list would allow me to properly implement it as I would need to make the list appear upon an onClick event. Is there any way to make this work, or is there a better plugin for what I am trying to do?
Take a look at this codepen which has Autosuggests that show suggestions when textbox is focused which is what you want if I'm not wrong.
Basically shouldRenderSuggestions prop is the way to do that.
I've an application that need to be multilanguage.
The translations comes from the server and are based on the user that is using the application.
My current approach is to create my own field for everything that is used in the app, and during the initialize, I change what it says to the translated text, based on a given code.
For example, in a button, I create my own button like this:
Ext.define('myapp.view.shared.MyButton', {
extend: 'Ext.Button',
xtype: 'myappbutton',
initialize: function () {
this.callParent();
this.setText(myapp.util.Helper.getTranslation(this.textCode, this.defaultText));
}
})
Then I change de default button configuration to something like this, where I just change the xtype, remove text, and add textCode and defaultText.
{
xtype: 'myappbutton',
textCode: 'back',
defaultText: 'Back',
...
}
Then I define the text code and the default text. The getTranslation method, inspects in a local storage to get the translation for the code, and return the finding, or the default text sent.
¡Here is the question!
Since I've 12 different components (so far), and every component extends in some way from Ext.Component, I want to add my code to the initialize of Ext.Component, in order to apply this piece of code, avoiding this crap of creating a custom control for each different control that I need to give translations. Is this possible ?
TIA!
Milton.-
I guess you can always try something along the lines
Ext.define('MyApp.override.Internationalization',{
override:'Ext.Component',
initialize: function () {
me.callOverridden(arguments);
// Your code here.
}
});
Requirement
I want a textarea that expands or contracts vertically as the user types, alla Facebook comment box.
When the textarea loses focus it contracts to one line (with ellipsis if content overflows) and re-expands to the size of the entered text upon re-focus (this functionality not found on Facebook)
Note: Clicking on the textarea should preserve caret position exactly where user clicked, which precludes any dynamic swapping of div for textarea as the control receives focus
Attempted Solution
I'm already well into an AngularJS implementation, so...
Use Monospaced's Angular Elastic plugin. Nice.
Two attempts...
Attempt A: <textarea ng-focus="isFocussed=true" ng-blur="isFocussed=false" ng-class="'msd-elastic': isFocussed"></textarea> Fails because ng-class triggers no re-$compile of the element after adding the class, so Angular Elastic is never invoked
Attempt B: create a custom directive that does the needed re-$compile upon class add. I used this solution by hassassin. Fails with the following problems
Attempt B problems
Here's a JSFiddle of Attempt B Note that Angular v1.2.15 is used
I. Disappearing text
go to the fiddle
type into one textarea
blur focus on that textarea (eg click in the other textarea)
focus back on the text-containing textarea
result: text disappears! (not expected or desired)
II. Increasingly excessive looping and eventual browser meltdown
click into one textarea
click into the other one
repeat the above for as long as you can until the browser stops responding and you get CPU 100% or unresponsive script warnings.
you'll notice that it starts out OK, but gets worse the more you click
I confirmed this using: XP/Firefox v27, XP/Chrome v33, Win7/Chrome v33
My investigations so far
It seems that traverseScopesLoop in AngularJS starting at line 12012 of v1.2.15, gets out of control, looping hundreds of times. I put a console.log just under the do { // "traverse the scopes" loop line and clocked thousands of loops just clicking.
Curiously, I don't get the same problems in Angular v1.0.4. See this JSFiddle which is identical, except for Angular version
I logged this as an AngularJS bug and it was closed immediately, because I'd not shown it to be a bug in Angular per se.
Questions
Is there another way to solve this to avoid the pattern in Attempt B?
Is there a better way to implement Attempt B? There's no activity on that stackoverflow issue after hassassin offered the solution I used
Are the problems with Attempt B in my code, angular-elastic, hassassin's code, or my implementation of it all? Appreciate tips on how to debug so I can "fish for myself" in future. I've been using Chrome debug and Batarang for a half day already without much success.
Does it seem sensible to make a feature request to the AngularJS team for the pattern in Attempt A? Since you can add directives by class in Angular, and ngClass can add classes dynamically, it seems only natural to solve the problem this way.
You are severely overthinking this, and I can't think of any reason you would ever need to dynamically add / remove a directive, you could just as easily, inside the directive, check if it should do anything. All you need to do is
Use the elastic plugin you are using
Use your own directive to reset height / add ellipsis when it doesn't have focus.
So something like this will work (not pretty, but just threw it together):
http://jsfiddle.net/ss6Y5/8/
angular.module("App", ['monospaced.elastic']).directive('dynamicClass', function($compile) {
return {
scope: { ngModel: '=' },
require: "?ngModel",
link: function(scope, elt, attrs, ngModel) {
var tmpModel = false;
var origHeight = elt.css('height');
var height = elt.css('height');
var heightChangeIndex = 0;
scope.$watch('ngModel', function() {
if (elt.css('height') > origHeight && !heightChangeIndex) {
heightChangeIndex = scope.ngModel.length;
console.log(heightChangeIndex);
}
else if (elt.css('height') <= origHeight && elt.is(':focus')) {
heightChangeIndex = 0;
}
});
elt.on('blur focus', function() {
var tmp = elt.css('height');
elt.css('height', height);
height = tmp;
});
elt.on('blur', function() {
if (height > origHeight) {
tmpModel = angular.copy(scope.ngModel);
ngModel.$setViewValue(scope.ngModel.substr(0, heightChangeIndex-4) + '...');
ngModel.$render();
}
});
elt.on('focus', function() {
if (tmpModel.length) {
scope.ngModel = tmpModel;
ngModel.$setViewValue(scope.ngModel);
ngModel.$render();
tmpModel = '';
}
});
}
};
})
I have a page with 50 hidden checkboxes, and I want to be able to toggle each checkbox by clicking on a visible link. The actual checkboxes have to stay hidden...so... Is there a better way to do this, with a JS function so I don't have to include the entire onclick in each link? And I use mootools, not jQuery.
This works to activate a checkbox:
Select
But to toggle it, this works:
onclick="if (event.target.tagName != 'INPUT') document.getElementById('field_select_temp_professional_10').checked = !document.getElementById('field_select_temp_professional_10').checked"
None of what you posted is actually mootools code, you may as well not use mootools...
Markup:
Select
js in your domready:
document.getElements("a.add_app").addEvents({
click: function(e) {
if (e.target.get("tag") != 'input') {
var checkbox = document.id("field_select_p" + this.get("data-id"));
checkbox.set("checked", !checkbox.get("checked"));
}
}
});
If you have 100+ then I suggest you look at using event delegation from mootools-more and add just one event to the parent instead of creating 100 events and storing 100 functions that deal with it.
This is coding to patterns, and it involves changing your markup to make things work. You can also make the change based upon walking the DOM in relation to the clicked item, e.g. this.getParent().getElement("input[type=checkbox]"), or something can mean you don't need to store a relative id in the element itself.