Develop Reference

How to set the button in my toolbar to disabled

I have created a toolbar in my windows 10 UWP winjs app and I want to disable some of the buttons.
I append attributes to the button like so :
new WinJS.UI.Command(null, {
disable: true,
id: 'cmdSave',
label: 'save',
section: 'primary',
type: 'button',
icon: 'save',
onclick: clickbuttonprintout()
});
I have looked through the winjs css files and found many disabled tags. Is it possible to set the button to disabled like I have appended other attributes above ?

Figured this out :
You select the button, set it to disabled and then process it.
var thisBtn = document.getElementById('cmdSave');
thisBtn.disabled = true;
WinJS.UI.process(btn); //this is key
With this in mind, I set up a function so I can pass different buttons to it:
function disableButton(buttonID){
var btn = document.getElementById(buttonID);
btn.disabled = true;
WinJS.UI.process(btn);
}
P.S
Even though this is not part of the question, it may help people.
What about editing the attributes on the button too ? Ive made this function to edit any attribute on a winjs button :
function changeButtonAttributes(buttonId, element, attribute) {
var btn = document.getElementById(buttonId); //select button
btn.winControl[element] = attribute; //button.element = attribute
WinJS.UI.process(btn); //process all
}
Hope that helps :)

Hiding field of custom-multi-field using javascript in listener

I have customized form of multi-field in a component having two variations.
In one variation of my component I want to hide a field (title) which is inside custom-multi-field . I am using the following JavaScript code in listener.
This code is not working. Where am I wrong?
function() {
var dialog = this.findParentByType('dialog');
var contenttype = dialog.getField("./type").getValue();
var teaserlinks = dialog.getField("./teaserlinks");
var title = dialog.getField("./teaserlinks").getField("./title");
alert(title);
if(contenttype == 'variation-1'){
teaserlinks.show();
title.hide();
}
else if(contenttype == 'variation-2'){
teaserlinks.show();
}
}

Try using the hidden property of node. Initially set the hidden property to true and in javascript file change the hidden property to false (or as per your requirement).

Few imp points first before answer:
you have to write listener in your widget file only.
below is the sample code where in I have 2 fields. 1st field is mytext field and another field is myselection. On changing the value in myselection field I am toggling visibility of my text field.
Below is snippet:
this.mytext = new CQ.form.textField({...})
this.myselection = new CQ.form.Selection({
fieldLabel:"my selection",
type:"select",
width : "325",
allowBlank:false,
defaultType:"String[]",
fieldDescription : "Select value from dropdown",
options: "/a/b/c.json",
listeners : {
selectionchanged : function(){
var mytext = this.findParentByType('mywidget').mytext;
mytext.hide();
}
}
});
I hope this will be helpful.

I have no knowledge about aem and Adobe CQ5 but I can give you some hints how to debug your script.
First of all don't use alert for debugging! (BTW what does alert(title); show?)
I would recommend to open the browser console (e.g. Press <F12> on Firefox and switch to the tab "Console").
Herein the browser displays all exceptions and error messages. Additionally you can output some text with console.log("...");` from your script.
Here is my edit of your program. Perhaps the output can help you.
function()
{
var dialog = this.findParentByType('dialog');
var contenttype = dialog.getField("./type").getValue();
var teaserlinks = dialog.getField("./teaserlinks");
var title = dialog.getField("./teaserlinks").getField("./title");
console.dir(title);
console.log(contenttype);
teaserlinks.show();
if(contenttype == 'variation-1')
{
title.hide();
}
else if(contenttype == 'variation-2')
{
title.show();
}
}
And, console.dir(<object>); shows you the object structure to one level deep.

TinyMCE Enable button while in read only mode

I have a TinyMCE 4.x instance where the text should be in read only mode. But I still have some buttons that I want to have enabled. For example, one button could provide a character count for the part of the text I've selected.
But when I turn on read only mode for TinyMCE all buttons are disabled. Can I enable just my buttons while still retaining read only mode?

It's probably too late for you but other people may pass by here.
I came up by writing this function
function enableTinyMceEditorPlugin(editorId, pluginName, commandName) {
var htmlEditorDiv = document.getElementById(editorId).previousSibling;
var editor = tinymce.get(editorId);
var buttonDiv = htmlEditorDiv.querySelectorAll('.mce-i-' + pluginName.toLowerCase())[0].parentElement.parentElement;
buttonDiv.className = buttonDiv.className.replace(' mce-disabled', '');
buttonDiv.removeAttribute('aria-disabled');
buttonDiv.firstChild.onclick = function () {
editor.execCommand(commandName);
};
}
It does the trick in 2 steps:
make the button clickable (remove mce-disabled CSS class and remove the aria-disabled property)
assign the good command to the click event
And in my editor init event I call the function.
editor.on('init', function () {
if (readOnly) {
editor.setMode('readonly');
enableTinyMceEditorPlugin(htmlEditorId, 'preview', 'mcePreview');
enableTinyMceEditorPlugin(htmlEditorId, 'code', 'mceCodeEditor');
}
});
Current version of TinyMCE for which I wrote this code is 4.4.3. It may break in a future version, specifically about the selectors to get and modify the good HTML elements.
Command identifiers can be found at this page otherwise you can also find them under tinymce\plugins\PluginName\plugin(.min).js

Here is a simple way to enable your custom toolbar button and attach a click event handler inside a read only TinyMCE editor using JQUERY:
//Initialize read only Tinymce editor so that Lock button is also disabled
function initReadOnlyTinyMCE() {
tinymce.init({
selector: '#main'
, toolbar: 'myLockButton'
, body_class: 'main-div'
, content_css: 'stylesheets/index.css'
, readonly: true
, setup: function (readOnlyMain) {
readOnlyMain.addButton('myLockButton', { //Lock button is disabled because readonly is set to true
image: 'images/lock.png'
, tooltip: 'Lock Editor'
});
}
});
}
function displayReadOnlyTinyMCEwithLockButtonEnabled() {
var edContent = $('main').html();
$("#main").empty();
initReadOnlyTinyMCE(true);
tinyMCE.activeEditor.setContent(edContent);
//enable the lock button and attach a click event handler
$('[aria-label="Lock Editor"]').removeClass("mce-disabled");
$('[aria-label="Lock Editor"]').removeAttr("aria-disabled");
$('[aria-label="Lock Editor"]').attr("onclick", "LockEditor()");
}
function LockEditor() {
alert("Tiny mce editor is locked by the current user!!");
//Write your logic to lock the editor...
}

I couldn't find an easy way to do this. The simplest way is to remove the contenteditable attribute from the iframe body instead and substitute a read only toolbar set. It also means that people will still be able to copy content from the editor.
$("iframe").contents().find("body").removeAttr("contenteditable");

How about this :
editor.addButton('yourButton', {
title: 'One can Enable/disable TinyMCE',
text: "Disable",
onclick: function (ee) {
editor.setMode('readonly');
if($(ee.target).text() == "Disable"){
var theEle = $(ee.target).toggle();
var edit = editor;
var newBut = "<input type='button' style='opacity:1;color:white; background-color:orange;' value='Enable'/>";
$(newBut).prependTo($(theEle).closest("div")).click(function(e){
edit.setMode('design');
$(e.target).remove();
$(theEle).toggle();
});
}
}
});

You can try to run the code below:
$("#tinymce").contentEditable="false";
if you have more than one editors, you can use their id like below
$("#tinymce[data-id='idOfTheEditor']").contentEditable="false";

Print preview xulrunner

So I'm having this problem with opening print preview in xulrunner.
I open print preview but i can't get the navigation toolbar.
This is the code from PrintUtils.js where the toolbar is created:
var XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
printPreviewTB = document.createElementNS(XUL_NS, "toolbar");
printPreviewTB.setAttribute("PrintPreview", true);
printPreviewTB.id = "print-preview-toolbar";
printPreviewTB.className = "toolbar-primary";
And later it does this:
var navToolbox = this._callback.getNavToolb
navToolbox.parentNode.insertBefore(printPreviewTB, browser);
I'm providing the navToolbox, that's the place where the toolbar is inserted but it doesn't show. As I said, print preview opens perfectly, pages formatted and everything but without toolbar.
Anyone have any idea why?

Ok, i found soulution, if anyone is interested.
So when enternig printPreview you have to pass an object with 5 functions:
getSourceBrowser, getPrintPreviewBrowser, getNavToolbox, onEnter and onExit.
With getNavToolbox you pass the reference to toolbar (placeholder) where you want to place standard navigation toolbar (with print button, zoom, and others).
I have done all that but you have to bind to that toolbar, like this :
toolbar.style.MozBinding = url('chrome://global/content/printPreviewBindings.xml#printpreviewtoolbar')";
I'm doing that in the onEnter function.
But i also had problem with the enterPrintPreview function from PrintUtils.js.
In this part of code:
var printPreviewTB = document.getElementById("print-preview-toolbar");
if (printPreviewTB) {
printPreviewTB.updateToolbar();
tmptoolbar.updateToolbar();
var browser = this._callback.getPrintPreviewBrowser();
browser.collapsed = false;
browser.contentWindow.focus();
return;
}
printPreviewTB.updateToolbar(); throws error.
I fixed this by getting the reference to the toolbar that i passed in getNavToolbox function and then calling updateToolbar on him, like this:
var printPreviewTB = document.getElementById("print-preview-toolbar");
if (printPreviewTB) {
var tmptoolbar = this._callback.getNavToolbox();
tmptoolbar.updateToolbar();
var browser = this._callback.getPrintPreviewBrowser();
browser.collapsed = false;
browser.contentWindow.focus();
return;
}
And now everything works fine.

How to add content to a containerNode that already has its content from href using dijit.Dialog

I’m new with this javascript and dijit.
My problem: In my js-function I’m building up a dijit.Dialog, using parameters that has been sent to the function.
One of the parameters is a href to en external xhtml-file that contains only the text that’s supposed to be shown in the dialog. Now, I want to add a div with one more link to the dialog, in the containerNode (with a link that's supposed to be specific for every single user).
The problem is that I can se that the added div is there until I reach dialog.show, after that it disapears. The text from the xhtml takes over. If I put it in the domNode (like the button) it shows up in the wrong place.
I've also tried another approach, to let the link be in the external href (in file three), give it an id and tried to reach it that way and manipulate it. Like this:
document.getElementById("bytlosen").href="www.xxx.se";
But it doesn't work. I get "document.getElementById(...) is null.
I would be SO happy if anyone can help me how to add the div (link) to the dialog! It doesn't matter if I
have it in file three and can reach it from file two and manipulate it,
simply adds the div in the js (in file two), or
any other way?
I have three files:
file one.xhtml (calling file two):
<li>Kontakta oss</li>
file two.js:
Xxxx.contactsDialog = function(title, href, cssClass, destroy) {
if (href) {
var options = {
title: title,
href: href
};
if (cssClass)
options["class"] = cssClass;
var dialog = new dijit.Dialog(options);
var div = document.createElement("div");
var bytLosen = document.createElement("a");
bytLosen.appendChild(document.createTextNode("Byt lösenord"));
bytLosen.setAttribute("href", "https://xxxx.xxx.se/xxx/xxx/xxxx=xxxx&TARGET=xxx.xxx.se");
bytLosen.setAttribute("target", "_blank");
div.appendChild(bytLosen);
dialog.containerNode.appendChild(div);
var okButton = document.createElement("button");
okButton.setAttribute("type", "submit");
okButton.setAttribute("style", "margin-top: 10px");
okButton.innerHTML = "Ok";
dojo.addClass(okButton, "button");
dialog.domNode.appendChild(okButton);
dialog.startup();
dialog.show();
dojo.connect(okButton, "onclick", function() {
dialog.hide();
if (destroy) {
dialog.destroy();
}
});
return true;
} else
return false;
};
file three.html:
<div class="popupHeader">Synpunkter och felanmälan <span style="font-weight: normal">skickas till:</span></div>
<div>ajourhallning-xxx#xx.se</div>
<div class="popupHeader">Länkar <span style="font-weight: normal">(till xxxx's externa hemsida)</span></div>
<div>www.xxxxx.se</div>
<div>www.xxxx.se/xxx</div>
<div class="popupHeader">Byt lösenord</div>