I'm developing Brackets extension and want to add side button. What module can do that?
Short answer: There is no module or API for it, you have to do it yourself.
Helpful answer:
You can use this snipped to add a Button to the toolbar:
$toolbarButton = $(document.createElement("a"))
.attr("id", "phanect-extensionname-toolbar-icon")
.attr("href", "#")
.attr("title", Strings.TOOLBAR_ICON_TOOLTIP)
.on("click", function () {
// Handle click
})
.appendTo($("#main-toolbar .buttons"));
For the icon of the Button and the css see Extension Icon Guidelines
Related
Creating a React-VR app that I need to iFrame into an existing app. My question is regarding the fullscreen button. How can i either hide this button and manage within my other app or send a message to the parent that the button was clicked?
Couldn't find any official documentation for this but if you look at the implementation of VRInstance you'll notice a hideFullscreen option that hides that button.
// vr/client.js
const vr = new VRInstance(bundle, 'VRTEST', parent, {
hideFullscreen: true,
...options,
});
To toggle fullscreen mode for an iframe you can use a library like screenfull.js so you don't have to worry about the various cross-browser implementation details of the Fullscreen API.
Just render a button in your page and make it toggle fullscreen mode for a DOM element on click.
const vrIframe = document.getElementById('vrIframe');
document.getElementById('vrFullscreenButton').addEventListener('click', () => {
if (screenfull.enabled) {
screenfull.request(vrIframe);
}
});
I am trying to insert a button into HtmlEditor's ToolBar. Button should get selected text by mouse or keyboard and add '#' character at the start of that selected text for locating it as a url.
As i understand the best solution is creating a plugin for adding buttons into html editor toolbar. I found creation codes but the problem is; how can i get selected text? Ext-js version 2.2
And there is the code that provides to create a plugin for html editor toolbar button:
Ext.ns('Ext.ux.form.HtmlEditor');
Ext.ux.form.HtmlEditor.NewLine = Ext.extend(Ext.util.Observable, {
init:function (cmp) {
this.cmp = cmp;
this.cmp.on('render', this.onRender, this);
},
onRender:function () {
this.cmp.getToolbar().addButton([
{
iconCls:'newline', //your iconCls here
handler:function () {
this.cmp.insertAtCursor('<br> ');
},
scope:this
}
]);
}
});
You can get the selected text like this: window.getSelection()
That gives you a Selection object. If you want to get the text only: window.getSelection().toString()
but if you want to make stuff bold or something, you need to check if the selection is inside the editor. Everything you need for that is inside the selection object.
=> correction: the htmlEditor uses an iframe you can get the iframe window by the getWin function.
Note that this is only for modern browser (not < IE9) judging from the legacy Ext version you use, that might be an issue for you... but there are workarounds for IE.
more info
If you have used the fullscreen mode in an instance of Galleria you've seen that the only way to close it is by pressing the escape key.
As I like that functionality since it's really practical, for end users it's not that intuitive so I would like to add a close button in the upper right.
I checked the code to find out where to add that button but I couldn't understand it to make it work.
Has someone already made that? I hope I'm not the only one who had that idea.
Thank you for your help!
You add it using the Galleria API:
Galleria.ready(function() {
var gallery = this;
this.addElement('exit').appendChild('container','exit');
var btn = this.$('exit').hide().text('close').click(function(e) {
gallery.exitFullscreen();
});
this.bind('fullscreen_enter', function() {
btn.show();
});
this.bind('fullscreen_exit', function() {
btn.hide();
});
});
This will place the close text in the upper left corner, you should of course style it with som CSS, f.ex:
.galleria-exit{position:absolute;top:12px;right:12px;z-index:10;cursor:pointer}
How to disable/enable a button? which is not in a form , in a navBar. I'v tried some examples , all fail.
I'm changing my textarea text $("textarea").val(x); The text is changing , the problem it doesn't get auto re-size , I see the ugly scroll bar on the side , If I manually resize it , its OK... is there a method to force refresh or something like that?
Thanks
Update (TextArea):
If i click on the text area and then press any key -> it opens up as should be,
I'm trying to simulate it .. but fail , the binding is works , but the trigger for keypress/keydown doesn't , I tried some codes from googling, this should work , I think , mayb for nomral jQuery 1.6 , but not jQuery mobile.. My test are are on Chrome and iPhone 4
$('#textarea').bind('click', function() {
var e = jQuery.Event("keypress", { keyCode: 64 });
$(this).trigger( e );
});
UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
http://jsfiddle.net/gRLYQ/7/ (Header button example)
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.
Regarding your second question, you can cause a textarea to autogrow by triggering a keyup() event on it.
Considering your original example code, the following works for me:
/*Note: I'm using 'on' instead of 'bind', because that's what I've actually tested
with, but I'm pretty sure this will work with 'bind' as well*/
$('#textarea').on('click', function() {
//First we'll add some text to #textarea
$('#textarea').val('some dummy text to be added to the textarea');
//Then we trigger keyup(), which causes the textarea to grow to fit the text
$('#textarea').keyup();
});
Short and sweet version of the above, this time chained and with no comments:
$('#textarea').on('click', function() {
$(this).val('some dummy text to be added to the textarea').keyup();
});
Adapted from here.
Is there a way to set a button inside the dojo dialog box and have it close the dialog box it is residing in?
Putting dijits inside of dijits doesn't work, and I can't beleive there isn't a way to do that.
Sure you can put a dijit widget inside another widget. And in a standard Dojo release there's even a test case Dijit Dialog focus & destroy included that demonstrates closing dialog with a button inside of it. Here's the relevant part:
var btn = new dijit.form.Button({ label: "Close" });
dlg.containerNode.appendChild(btn.domNode);
dojo.connect(btn, "onClick", function(){
console.log("destroying, while visible");
dlg.destroy();
});
Note, since Dojo 1.7 onwards, the connect module has been replaced with dojo/on. The equivalent of the above is therefore:
require(['dojo/on', 'dijit/form/Button'], function (on, Button) {
// etc
var btn = new Button({ label: "Close" });
dlg.containerNode.appendChild(btn.domNode);
on(btn, "onClick", function(){
console.log("destroying, while visible");
dlg.destroy();
});
});