We Keep Coding

Code behind Content editor button for Experience editor button

Is it possible to use a code behind of a command used for ribbon button in content editor as a request for experience editor button? We want to stick to SPEAK and not make any changes to Sitecore.ExperienceEditor.config.
After creating new button in Experience editor, telling .js to call NewCommand request by
Sitecore.ExperienceEditor.PipelinesUtil.generateRequestProcessor("ExperienceEditor.NewCommand");
that was referenced in Sitecore.ExperienceEditor.Speak.Requests.config as
<request name="ExperienceEditor.NewCommand" type="Sitecore.Starterkit.customcode.MyCommand,MyProject"/>
nothing happens and logs say
ERROR Could not instantiate speak request object,
name:ExperienceEditor.NewCommand,
type:Sitecore.Starterkit.customcode.MyCommand,MyProject`
Do we have to import PipelineProcessorRequest as suggested by some tutorials or is there a way to use our existing code?

Have you seen this blog post on adding custom SPEAK command buttons to Sitecore 8 Experience Editor?
https://doc.sitecore.net/sitecore%20experience%20platform/the%20editing%20tools/customize%20the%20experience%20editor%20ribbon
Otherwise if that doesn't achieve what your looking for, it might be worth trying to standard SPEAK application way of triggering a button, In a SPEAK application you can call a JavaScript function from a button click using this code.
javascript:app.FunctionName();
In the core DB update the click field on your button to call JavaScript with the javascript: prefix. Does this allow you to trigger your JavaScript?

I was able to use my existing control using guidelines from:
http://jockstothecore.com/sitecore-8-ribbon-button-transfiguration/
Relevant pieces of the old command:
if (args.IsPostBack)
{
// act upon the dialog completion
if (args.Result == "yes")
{
Context.ClientPage.SendMessage(this, "item:load(...)");
}
}
else
{
// trigger the dialog
UrlString url = new UrlString(UIUtil.GetUri("control:CopyLanguage"));
url.Add("id", item.ID.ToString());
url.Add("lang", item.Language.ToString());
url.Add("ver", item.Version.ToString());
SheerResponse.ShowModalDialog(url.ToString(), true);
args.WaitForPostBack();
}
The redressed command:
define(["sitecore"], function (Sitecore) {
Sitecore.Commands.ScoreLanguageTools = {
canExecute: function (context) {
return true; // we will get back to this one
},
execute: function (context) {
var id = context.currentContext.itemId;
var lang = context.currentContext.language;
var ver = context.currentContext.version;
var path = "/sitecore/shell/default.aspx?xmlcontrol=CopyLanguage" +
"&id=" + id + "&lang=" + lang + "&ver=" + ver;
var features = "dialogHeight: 600px;dialogWidth: 500px;";
Sitecore.ExperienceEditor.Dialogs.showModalDialog(
path, '', features, null,
function (result) {
if (result) {
window.top.location.reload();
}
}
);
}
};
});

Get the Trim Area of a PDF with PDF.js?

I'm playing about with PDF.js, and can't seem to find a solution to my problem.
I have a PDF with a trim area and bleed, I need to get the trim area so that I can crop the PDF image data in HTML canvas.
I see that Acrobat has javascript that can return the Trim based on getPageBox("Trim"). Is there any equivalent in PDF.js?
I cant seem to find a reference when inspecting the Javascript PDF Object in the console.

I was able to get it after editing pdf.worker.js. Tested with 1.7.225. First, Add get trimBox() after get cropBox() like this:
get trimBox() {
var trimBox = this.getInheritedPageProp('TrimBox', true);
if (!isArray(trimBox) || trimBox.length !== 4) {
return shadow(this, 'trimBox', this.mediaBox);
}
return shadow(this, 'trimBox', trimBox);
},
Now, in handler.on('GetPage', function ... of WorkerMessageHandler, add a few lines like this:
handler.on('GetPage', function wphSetupGetPage(data) {
return pdfManager.getPage(data.pageIndex).then(function (page) {
var rotatePromise = pdfManager.ensure(page, 'rotate');
var refPromise = pdfManager.ensure(page, 'ref');
var userUnitPromise = pdfManager.ensure(page, 'userUnit');
var viewPromise = pdfManager.ensure(page, 'view');
var trimBoxPromise = pdfManager.ensure(page, 'trimBox'); //added
return Promise.all([
rotatePromise,
refPromise,
userUnitPromise,
viewPromise,
trimBoxPromise //added
]).then(function (results) {
return {
rotate: results[0],
ref: results[1],
userUnit: results[2],
view: results[3],
trimBox: results[4] //added
That's it. Now you can get the trim box in your app by page.pageInfo.trimBox.

In addition to the excellent answer from #Sangbok Lee,
If you use the latest PDF.js version, the this.getInheritedPageProp function has changed to
this._getInheritableProperty('TrimBox', true)

Figured it out.
For anyone else who may be interested in pdf.worker.js on line 2654 I added the following that exposed the trimBox.
tboxX = this.pageDict.map.TrimBox[0];
tboxY = this.pageDict.map.TrimBox[1];
tboxW = this.pageDict.map.TrimBox[2];
tboxH = this.pageDict.map.TrimBox[3];
I'm sure there is a neater way, but it works.

Firefox Addon Button Code Not Working - Javascript

I am creating a Firefox extension that is designed to place a button automatically on the toolbar that, when clicked, will open a web page in a new tab. I have used the code snippets from the Mozilla dev site but, when both are put together, only the button placement works. The button does nothing when clicked.
I don't know too much about javascript, so I have no idea what is going wrong here. The entire extension has passed all Mozilla validation checks with no errors and no warnings.
Here is the code. Any help you could offer would be greatly appreciated.
CustomButton = {
1: function installButton(toolbarId, id, afterId) {
if (!document.getElementById(id)) {
var toolbar = document.getElementById(toolbarId);
// If no afterId is given, then append the item to the toolbar
var before = null;
if (afterId) {
let elem = document.getElementById(afterId);
if (elem && elem.parentNode == toolbar)
before = elem.nextElementSibling;
}
toolbar.insertItem(id, before);
toolbar.setAttribute("currentset", toolbar.currentSet);
document.persist(toolbar.id, "currentset");
}
if (firstRun) {
installButton("nav-bar", "my-extension-navbar-button");
}
},
2: function () {
const url = "http://www.mysite.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
}
}
I am not very sharp at this, which is why I am asking the question here instead of searching for other examples, which make no sense to me. If someone could show me how to modify this specific code to do what I need it to do, I would be grateful.

This will work from FF 29, which will be released on April 2014
It adds an action-Button to the toolbar, once you click it it will load the http://www.example.com site in a new tab; if you prefer to load a new window use require("sdk/windows") instead.
Using the addon-sdk
var ui = require("sdk/ui");
var action_button = ui.ActionButton({
id: "my-button",
label: "Open example page!",
icon: "./icon.png",
onClick: function() {
require("sdk/tabs").open("http://www.example.com");
}
});

Javascript Inserting Dynamic Row in Main Page

I have two pages: one is the Main and one is the Popup that I grab data and submit back into the main page. It seems to work OK in Chrome and in FF, but doesnt in IE. I get an error message "No Such Interface Supported". This seems to happen to everyone I ask to test on IE.
I think it has something to do with the way I'm appending dynamic rows to main page. I am just not sure how I should go about to do it right.
Here is the code I use:
function addRowForPC(pcT,pcP) {
try {
var tableID="Equipment";
var table = window.opener.document.getElementById(tableID);
var rowCount = table.rows.length - 0;
var row = table.insertRow(rowCount);
insertFld( "delEquip", "image" , table, rowCount, row, 0 ) //Image
insertFld( pcT , "text" , table, rowCount, row, 1 ) //Text
insertFld( pcP , "textSpan", table, rowCount, row, 2 ) //Text
}
catch(err) {
alert(err.message);
return "Fail";
}
}
//This calls: to create the rows:
function insertFld(fldName,fldType,table,rowCount,row,insCell) {
try {
var cellName = "cell" + (insCell+1);
cellName = row.insertCell(insCell);
switch (fldType) {
case "image":
var image = document.createElement('img');
image.src="Images/delete.jpg";
image.alt ="Remove";
image.name=fldName +rowCount;
image.setAttribute('width','10');
image.setAttribute('height','10');
image.onclick= function(){deleteRow(this)};
cellName.appendChild(image);
break;
case "text":
cellName.innerHTML = fldName;
break;
case "textSpan":
cellName.colSpan="2";
cellName.innerHTML = fldName;
break;
}
}
catch(err) {
alert (err.message);
}
}
Any help/guidance would be great. I'm new to JavaScript/HTML so I don't really even know where would start with jQuery.
Thanks.

Which version of IE? If its 9 then open up the developer tools, go to the Javascript tab and turn on debugging then run the code. It may give you some useful details. If not then start by commenting most of the code out and run it, if it works then comment some back in and try again until you find the locaton that's causing the error.
I would also try moving some of the code to the opener window, and then calling the function on it, like:
addRowForPC(pcT,pcP) {
opener.addRowForPC(pcT,pcP);
}
In fact taking a second look at your code, I'm thinking its the document.createElement() call that's the problem, if its running in the context of the popup window and then the results are being added to the opener. You might be able to do opener.document.createElement() to ensure the element is associated with the opener document and not the popup.

Js function running fine on Chrome, but not on Firefox

I'm trying to make some of the components in my list interactive, as there're many comments and settings depending on the user's input on the form.
The product is made out of several components, each one with their own properties, however, the product validation relies on some of the components values chosen.
I have the following js function which gets called from my view:
function change_people() {
money1 = $('money_1').children[0].value;
if (money1 == 5) {
$('comment_2').innerText = "sss";
//$('comment_2').hide();
}
else {
$('comment_2').innerText = "";
//$('comment_2').show();
}
}
document.observe('dom:loaded', function() {
change_people();
$('money_1').children[0].observe('change', change_people);
});
When I run the code in chrome, it works fine, with each selection it will update the next comment, however, in firefox is completely unresponsive!
Anyone got ideas of the reasons for this?
(oh and is using prototype library)
Thanks!

innerText is the Microsoft version of the standard textContent. Chrome supports both, but Firefox only the standard one. There are two things you can do:
1. Dummy test (executed only once) keep in mind the gotchas
var textContent = (function() {
var dummy = document.createElement("span");
dummy.innerHTML = "full <span>support</span>";
if (dummy.textContent === "full support") {
return "textContent";
} else {
return "innerText";
}
})();
usage
el[textContent] = "text";
2. Use DOM methods
function setText(el, text) {
while (el.firstChild) {
el.removeChild(el.firstChild);
}
el.appendChild(document.createTextNode(text));
}
usage
setText(el, "text");

It is simpler to use Element.update.
$('comment_2').update((money1 == 5) ? 'sss' : '');