I'd like to change a link's href based on that: if Skype isn't installed, show a popup explaining what Skype is and how to install it, if it is installed, change the link to skype:my.contact.name?call so the click will start a call. Real estate issues means that I'd prefer to only have one link shown.
Unfortunately, browsers do not support such API and this cannot be done cross-browser compatible way. There is some kind of support, but it is buggy.
Javascript to detect Skype?
All browser plugins registering their mime-types in global array named mimeTypes, that can be accessed via navigator object navigator.mimeTypes.
So you can use this for check plugin active or not. If plugin installed and disabled — no any mime-type will be registred for that disabled plugin. If plugin installed and active — he has a mime-type record in navigator.mimeTypes
Some code implementation using jQuery:
jQuery.extend({checkPlugin: function(mimetype_substr) {
for (var i = 0; i < navigator.mimeTypes.length; i++) {
if (navigator.mimeTypes[i]['type'].toLowerCase().indexOf(mimetype_substr) >= 0) {
console.log("Gotcha! Here it is: "+navigator.mimeTypes[i]['type']);
return true;
}
}
return false;
}});
So this: $.checkPlugin("skype"); returns true if skype click2call plugin is installed and active. And false if there is no active plugin or plugin are not installed.
Actually need to search within another global array — navigator.plugins, but all active plugins have their records in navigator.mimeTypes, and this is a bit easier.
Related
A coworker and I were having a discussion about what is and isn't possible within the browser.
Then a question came up that neither of us could answer with certainty.
Can you create a webpage such that when you navigate to it, it engages the client-side printer and attempts to print a document. For instance, whenever you visit my personal website, you'll be treated to a print out of a picture of me, smiling.
Now, this is a hideous idea. I'm aware. But the discussion intrigued me as to if it could be done, and how. My friend insisted that the best you could do was pop up the print dialog for the user, they would have to click print themselves.
Would it be possible to bypass this step? Or just some fancy script to move the mouse over the print button and click on it? Or use an activeX control to interface with a Printer API directly?
You have to prompt the user to print the current page, there's no way to bypass this step (possibly in activeX for IE). That said, there's two different ways you could prompt the user to print images of you smiling when the page is loaded.
Here's how to do it in JavaScript.
window.onload = function() {
var img = window.open("me-smiling.png");
img.print();
}
And here's how to do it in css/javascript/html (assuming your picture has the id 'me-smiling'):
CSS:
#media print {
* {
display:none;
}
img#me-smiling {
display:block;
}
}
Javascript:
window.onload = function() { window.print() }
The only solution to avoid print dialog that I found was creating a variable on Mozilla Firefox to set auto-print. Maybe is not the best solution if you need to use other browser, but in my case, I only need to print a report automatically and it works:
1- Open Firefox and type "about:config" in the address bar
2- Right click on any preference and select "New" > "Boolean"
3- Add a variable called "print.always_print_silent" with "true" value
4- Restart Firefox.
Hope help you!
AttendStar created a free add-on that suppresses the dialog box and removes all headers and footers for most versions of Firefox.
https://addons.mozilla.org/en-US/firefox/addon/attendprint/
With that feature on you can use $('img').jqprint(); and jqprint for jquery will only print that image automatically called from your web application.
As far as I know, there is no way to print a document directly, without some client intervention, like setting browser flags.
In our current project we need to print directly to the default printer, but at least with Chrome you can do it easily with additional startup arguments.
To print directly to the OS default printer you can use:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir=c:\tmp --kiosk-printing http://www.contoso.com
Another option, which may also be useful, is tos use the native print dialog instead of chromes print preview.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir=c:\tmp --disable-print-preview http://www.contoso.com
Note, that window.print() and/or Ctrl-P behave accordingly the mentioned settings.
I know, that this does not exactly answers the OPs question, but I think it somewhat related, and for web based enterprise applications this is a quite common use case. Maybe someone find it useful.
For Firefox I recommend Seamless Print Addon
You can't bypass the print dialog, as far as I know. That would be a pretty obvious security flaw if the browser allowed that. But you can bring up the print dialog with "window.print()".
I think at best you would need an ActiveX component using base windows API to obtain a device context for the default printer and try and print an embedded image using assumed values for the printer settings.
To print to the default printer automatically without seeing a print dialog prompt, I've shared some code in the following question that works in IE7, IE8 and IE9:
Bypass Printdialog in IE9
From lot of search from last few days,
I've found a best possible solution.
Till date Chrome do not support direct printing from javascript.
It has launched USB and serial API which might help.
But currently I'm using a JavaApplet solution which is open source.
https://github.com/qzind/qz-print - build
While I'm getting error in building it. I preferred a Prebuilt - QZ Print Plugin 1.9.3
desktop app, which works great.
Download it from here: https://qz.io/download/
Code Example:
/***************************************************************************
* Prototype function for printing an HTML screenshot of the existing page
* Usage: (identical to appendImage(), but uses html2canvas for png rendering)
* qz.setPaperSize("8.5in", "11.0in"); // US Letter
* qz.setAutoSize(true);
* qz.appendImage($("canvas")[0].toDataURL('image/png'));
***************************************************************************/
function printHTML5Page() {
$("#qz-status").html2canvas({
canvas: hidden_screenshot,
onrendered: function() {
if (notReady()) { return; }
// Optional, set up custom page size. These only work for PostScript printing.
// setPaperSize() must be called before setAutoSize(), setOrientation(), etc.
qz.setPaperSize("8.5in", "11.0in"); // US Letter
qz.setAutoSize(true);
qz.appendImage($("canvas")[0].toDataURL('image/png'));
//qz.setCopies(3);
qz.setCopies(parseInt(document.getElementById("copies").value));
// Automatically gets called when "qz.appendFile()" is finished.
window['qzDoneAppending'] = function() {
// Tell the applet to print.
qz.printPS();
// Remove reference to this function
window['qzDoneAppending'] = null;
};
}
});
}
Complete example can be found here:
https://gist.github.com/bkrajendra/c80de17b627e59287f7c
This is the best solution that I have found for firefox:
There is this awesome add-on Seamless Print.
It works like charm.
I tested a site for accessibility and I now have a QA validating that all of the changes were made. The QA needs to validate that the site is still readable with the stylesheets turned off. The QA can only use MS Edge and cannot install any plugins or browser extensions. Has anyone figured out how to turn off stylesheets? Googling this got me nowhere. When I evaluate the site, I use an extension in Chrome so I have never had this issue before.
Press F12 and copy this to console, hit enter
$('style,link[rel="stylesheet"]').remove()
Vanilla JS approach.
( [].slice.call( document.styleSheets ) ).map( function ( style ) {
var node = style.ownerNode;
node.parentNode.removeChild( node );
} );
ES6 Vanilla JS Version
[ ...document.styleSheets ].map( ( style ) => {
const node = style.ownerNode;
node.parentNode.removeChild( node );
} );
In Alfresco Share the Search page is implemented with Aikau.
I'm interested in the more general question, is it possible to Debug Aikau widgets?
I have founds some links on this matter, but they talk more about logging and not actual javascript debugging:
http://docs.alfresco.com/5.1/tasks/dev-extensions-share-tutorials-debugging.html
https://github.com/Alfresco/Aikau/blob/master/tutorial/chapters/Tutorial4.md
Suppose I have the following Aikau widget alfresco/search/AlfSearchResult and the following method inside it:
/**
* This function is called to create a
* [SearchResultPropertyLink]{#link module:alfresco/renderers/SearchResultPropertyLink} widget
* to render the displayName of the result. It can be overridden to replace the default widget
* with a reconfigured version.
*
* #instance
*/
createDisplayNameRenderer: function alfresco_search_AlfSearchResult__createDisplayNameRenderer() {
// jshint nonew:false
var config = {
id: this.id + "_DISPLAY_NAME",
currentItem: this.currentItem,
pubSubScope: this.pubSubScope,
propertyToRender: "displayName",
renderSize: "large",
newTabOnMiddleOrCtrlClick: this.newTabOnMiddleOrCtrlClick,
defaultNavigationTarget: this.navigationTarget
};
if (this.navigationTarget)
{
config.navigationTarget = this.navigationTarget;
}
new SearchResultPropertyLink(config, this.nameNode);
}
Is there any way I could insert a breakpoint and stop execution at the line where this.currentItem is used in order for me to evaluate it's properties?
Yes, there are several ways in which you can debug Aikau... the first thing to do is to make sure that you're running with "client-debug" mode enabled (either in Share or in your custom Aikau client).
For example, in Share you'd want to update the /WEB-INF/classes/alfresco/share-config.xml file to change:
<config>
<flags>
<client-debug>false</client-debug>
...to be...
<config>
<flags>
<client-debug>true</client-debug>
You'll need to restart Share for the changes to take effect. You'll see then that you have a "Debug Menu" item in the main header menu bar. If you open this you can enable logging by toggling "Debug Logging" and "Show All Logs" to be true.
This will result in logging output appearing in your browser developer tools console. You can also fine tune the logging output to only show errors or warning and to provide a RegEx expression to match certain logging output.
With client debug enabled the JavaScript source being loaded by the browser will be uncompressed. This will make it easier for you to add break points.
Because Surf aggregates all of the required module source code into a single resource (for performance and caching reasons) you will want to find the Aikau source file - the easiest way to do this is to use "CTRL-P" (in Chrome) to open a resource and type "surf" into the box that appears - this will always find the Aikau source code first.
Firebug for Firefox handles finding across resources better, so you can just used "CTRL-F" and then paste in the line you want to break on.
You can add breakpoints in this resource as you normally would and the browser will break on them.
As well as setting break points you can also use the DebugLog widget. This can be toggled from the "Debug Menu" and shows all the publications and subscriptions that are being made.
It is also possible to directly include and configure the alfresco/services/LoggingService and the alfresco/logging/DebugLog widgets in your page as you are developing. We take this approach for all our unit test pages. This can be a handy approach during development and they can be removed when you're finished developing.
This presentation although quite old, also contains some useful debugging tips (see slide 56 onwards).
Before 3.2, I can set the menu item type to "external link" and then set the link as
"javascript:myFunction()"
When clicked, the menu item will call the JavaScript function. But after I upgraded to 3.2, when I did the same thing and tried to save the menu item, it said "Save not permitted".
Did 3.2 block this usage? If yes, how do I get my JS function executed by a menu item?
I've came up this problem a while ago, in Joomla version 3.2.1 concerning a 'Skype' link, e.g.
skype:myloginname
This has to do with the protocol types that are allowed and are defined in this file:
/administrator/components/com_menus/controllers/item.php, line ~180.
There is an array that defines the acceptable schemes:
$scheme = array('http', 'https', 'ftp', 'ftps', 'gopher', 'mailto', 'news', 'prospero', 'telnet', 'rlogin', 'tn3270', 'wais', 'url', 'mid', 'cid', 'nntp', 'tel', 'urn', 'ldap', 'file', 'fax', 'modem', 'git');
When adding skype at the end of the list Joomla! allowed saving the external link. The same applies for javascript. In any case you should consider any security risk that comeswith this solution.
In addition, you should take into mind that this override may be discarded in any future update of joomla.
Technically speaking Joomla thinks that javascript is a protocol, like HTTP & Co., it looks it up inside a list of known protocols, it does not find it and it throws an error.
Start reading at around line inside [MenusControllerItem::save()][1]. So basically it has nothing to do with the fact you are trying to use some JavaScript, this is just a side-effect.
While using JavaScript in the External Link is not really an advertised feature but rather said a loophole, it does break b/c if you have used before.
You can:
Open an issue in the Joomla Issue Tracker and report this issue, get some community feedback. The fix is really easy, it just needs to get accepted.
Use the suggestion below:
Instead of link put #
Set the field "Link CSS Style" to something that does not colide with other classes, eg. my-function
Save
You can use jQuery to intercept the click event on the link and to make it run your function. See code below:
jQuery(document).ready(function($){
// Select element based on the class set in Joomla backend
$( ".my-function" ).on( "click", function(e) {
// Do not follow the link
e.preventDefault();
// Call function
myFunction(1);
});
});
function myFunction(x)
{
alert("I was called" + x);
}
Update: after a short discussion with the commiter of the change, I understood that it may be related to a security issue. So it may be on purpose after all not to allow js.
I'm posting this question to Stackflow b/c after doing much research into an answer to this very question online, I did not come across a straight forward answer and had to do my own sleuthwork to resolve this.
Basically, Sitecore uses a handler file .ASHX for all files uploaded to the Media Library. Since the 3rd party GA tracking tool I was using (entourage.js or gatags.js) does not recognize .ashx as a whitelisted download file, it was not adding the appropriate GA tracking syntax to the GA pixel tracker (__utm.gif).
So the solution turns out to be simple but sadly, not retroactive, meaning all files previously uploaded to the Media Library in the Sitecore content tree will continue to use the ashx extension unless you reupload the image. In your web.config file, search for the "Media.RequestExtension" setting. If you change the value associated with this setting from "ashx" to a blank string, this will force Sitecore to use the originalextension of the file and image in the Sitecore Media Library.
Aside from interfering with GA analytics, this method of turning every downloadable file extension into an ashx file is poor SEO practice. AND, Sitecore will not point you in the right direction of getting around this other than a round-about way (google Sitecore dynamic linking and configuration) because they want you to use their Sitecore OMS download tracking capability. And that's it! Two days of research led me to this conclusion.
So the solution turns out to be simple but sadly, not retroactive,
meaning all files previously uploaded to the Media Library in the
Sitecore content tree will continue to use the ashx extension unless
you reupload the image.
Not sure where you got this information, but it's incorrect. You can blank out the Media.RequestExtension setting and all existing files will use their original extension. In IIS7 Integrated Mode, you should be able to make this change without having to make other server configuration changes.
Edit: More Info
If you analyze Sitecore.Configuration.Settings.Media.RequestExtension (the API equivalent to this settings) in a decompiler, you can see that it's only used by the MediaProvider when constructing the Media URL. Sitecore should remember the original extension of the media and can serve it with its original URL, regardless of what this setting was when it was uploaded. That's my experience, anyway, and it seems to be validated by looking into Sitecore.Kernel.
You could use this script to track download events via Google Analytics.
if (typeof jQuery != 'undefined') {
jQuery(document).ready(function($) {
var filetypes = /\.(zip|pdf|doc*|xls*|ppt*|jpg|ashx)$/i;
var baseHref = '';
if (jQuery('base').attr('href') != undefined) baseHref = jQuery('base').attr('href');
jQuery('a').each(function() {
var href = jQuery(this).attr('href');
if (href) {
if (href.indexOf('?') != '-1') {
href = href.substring(0, href.indexOf('?'));
}
if (href.match(filetypes)) {
jQuery(this).click(function() {
var extension = String((/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined);
var filePath = String(href);
_gaq.push(['_trackEvent', 'Download', extension, filePath]);
if (jQuery(this).attr('target') != undefined && jQuery(this).attr('target').toLowerCase() != '_blank') {
setTimeout(function() {
location.href = baseHref + href;
}, 200);
return false;
}
});
}
}
});
});
}
Just add in the required file types here at this line -
var filetypes = /.(zip|pdf|doc*|xls*|ppt*|jpg|ashx)$/i;
Having done a quick google for gatags.js, I can see that you can add an extension to the whitelist on line 24:
var isDoc = path.match(/\.(?:doc|eps|jpg|png|svg|xls|ppt|pdf|xls|zip|txt|vsd|vxd|js|css|rar|exe|wma|mov|avi|wmv|mp3)($|\&|\?)/);
Change it to:
var isDoc = path.match(/\.(?:ashx|doc|eps|jpg|png|svg|xls|ppt|pdf|xls|zip|txt|vsd|vxd|js|css|rar|exe|wma|mov|avi|wmv|mp3)($|\&|\?)/);
Alternatively, you could attach the Google Analytics _trackEvent yourself with a dom selector and a click event.
Either way, I think OMS can track media library files regardless of extension - removing the default ashx extension doesn't stop the file being handled by Sitecore.