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.
Is there a way with EmberJS to show a loading template somewhere when something in my page is loading something?
For example, I have a page with many many songs artists, and each of them have many many songs. I load the page of the artists, and good, but in background I'm loading info about songs of everyone. I simply need a loading spinner somewhere that says to me the site is loading something (for example, there is in "Network" tab of Chrome Developer Tools something pending...)
how to do that in such an elegant Emberjs way?
You can observe the isPending property of Ember.PROMISEPROXYMIXIN like so:
{{#if artist.songs.isPending}}
loading...
{{/if}}
As far as I know (and based on a quick perusal of the API docs) Ember doesn't provide a built-in way to achieve this. Unless I'm wrong, this means you'll need to implement request state tracking yourself.
You could do this in Ember's adapter layer (e.g. add code in app/adapters/application.js), but the simplest solution might be to just work with jQuery directly. There are a few APIs you can use:
jQuery.active, which indicates the number of outstanding requests
ajaxStart and ajaxStop
I'd recommend creating an Ember.Service to track this state-- then you can inject it in any Controller or Component that needs to render a template based on this info. Your Service could look like:
import Ember from 'ember';
export default Ember.Service.extend({
init() {
this._super(...arguments);
const invalidateRequestInProgress = () => {
this.notifyPropertyChange('dummyProperty');
}
$(document).ajaxStart(invalidateRequestInProgress);
$(document).ajaxStop(invalidateRequestInProgress);
},
requestInProgress: Ember.computed('dummyProperty', function() {
return Ember.$.active !== 0;
}),
});
I haven't tested this code, so I'm not sure if it'll work in practice :)
I'm using {{> atForm}} for login and register, and also these packages for users accounts-password accounts-base useraccounts:unstyled
I want to remove register possibilities for users.
It should be something in this list, but i'm not sure what i'm supposed to override.
Can anyone help?
Edit:
I also added this on the server,
AccountsTemplates.configure({
forbidClientAccountCreation : true
})
and it disabled the creation of users, but i need to remove it from the UI too, like u see in the picture.
For now, I just did this from the css :-)
.at-signup-link {
display none
}
When using a custom front-end theme, the preview button for my content stops working. It just redirects to the content overview page.
Am I missing something in my theme that allows me to use the 'preview' function?
You most likely have the ?destination=admin/content in your URL. This is a core bug. The current discussion can be read at:
https://www.drupal.org/node/2325463
Jason Ruyle's answer is correct, I had the same problem and solved it by adding this code to my module:
use Drupal\Core\Entity\EntityInterface;
function my_module_entity_operation_alter(array &$operations, EntityInterface $entity) {
if (isset($operations['edit']['query'])) {
unset($operations['edit']['query']['destination']);
}
return $operations;
}
The code could also be improved to target the right entities, if needed.
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.