Emailing a piece of Dom - javascript

I want to be able to send a piece of html Dom by email, in a similar fashion I use jqPrint jQuery plugin to print a partial dom. Has anyone seen a project like that?
When a user interacts with my site having a bunch of ExtJs components and RichFaces rendered components, they will want to print/email part of their work in progress as a screen capture for audit purposes. I want to gather up part of the dom, serialize it and send it back to the server, from where I would initiate the email that will look more or less like the screen a user was seeing prior to initiating this action.
Any suggestions?

Google is doing this in Google+ and a talented developer reverse engineered it and produced http://html2canvas.hertzen.com/ . To work in IE you'll need a canvas support library such as http://excanvas.sourceforge.net/

Related

PDFObject 2.0 : determine when user reaches the end of the document

I want an embedded PDF on my HTML 5 web page. I was looking at different viewers like PDFObject 2.0. This works well for viewing, but I have a requirement where the user must read the entire document (scroll or page to the end), and then I can enable a button for them to click on. This is for a legal compliance situation.
What types of code hooks are there when doing an embed of a PDF document using PDFObject 2.0 for finding out when the user has reached the end of the document (scroll to end or last page).
I believe PDFObject is like a wrapper that helps render the PDF under different browser conditions including mobile, tablets and desktop scenarios, and this request may not be possible without using PDF.js and customizing the code and then dealing with all the browser scenarios myself.
PDFObject only embeds the PDF within the HTML page, it does not provide any additional functionality. Currently, most built-in PDF rendering engines do not even provide a JavaScript API.
As far as I know, there is no way to prove someone has read (or navigated) through an entire PDF; that's why compliance web sites typically just present the user with a checkbox, something along the lines of "Check here to indicate you have read and agree with this document".
If you absolutely must find a way to ensure someone has navigated to the final page of the document -- which, let me remind you, does not imply they read anything -- you might be able to put something together with PDF.js. The PDF.js utility is a JavaScript-based PDF rendering engine. You can force the PDF to be rendered via PDF.js (PDFObject.com has examples for this); since PDF.js is JavaScript-based and open-source, you might be able to hack something together using the PDF.js API.

How to render HTML elements on PDF in browser

I need to render a PDF document in web browser (HTML5).
User should be able to make a selection for annotation (text or area).
Render html elements on the annotation (check-boxes, drop-down) received through ajax.
User's choice will be sent to back-end along with the selection/annotation made.
I should be able to render the annotations made again on the PDF.
Which frameworks should I use to create this solution? I'm happy to use open source frameworks as well as licensed SDKs. I can manage handling back-end using Node.js and interactions with ajax calls.
I did some research and found that I can use PDF.js for rendering PDF. Found many solutions to annonate but they cannot be used to render HTML elements on an annotation. I'm happy to get PSPDFKit but no way to create html elements on PDF.
I found two solutions and I'm really happy with them.
Annotate.co
PSPDFKit
Almost everything needed is there.

Filtering contentEditable on client and server

I'm developing a Rails web app using the contentEditable feature of HTML 5, in the style of Google Docs and others. This works well for simple typing, but breaks whenever the user tries to paste text from Word or another webpage. The resulting HTML will be littered with style attributes and will look like it was literally cut and pasted from the source.
I need to filter the HTML some way. This can be done client-side, giving a smooth interface for the user where pasted material fits instantly into my app's style.
Of course, the user can override my filtering. So to protect myself fully from tag soup hell, I would need to perform the same filtering again, server-side. This is similar to the form validation problem.
I don't want to duplicate the filtering logic in both jQuery (client-side) and Ruby (server-side) but I don't know if there's any good way to avoid it. So far I have identified two possibilities:
Implement all filtering server-side, access it from the client by AJAX. This will put a heavy load on the server.
Implement filtering fully in JS, run on client and on server through Node.js. I don't know if there is enough similarity between the two platforms to implement a shared filtering routine. Libraries like Cheerio look promising though.
Has anyone solved a similar problem before? I would appreciate any guidance to keep my app as DRY as possible.

Is there a library to handle form like in Google Contact

In Google Contacts, by default the form displays the values with some (read only) but when you click on a value, it converts the field into an so you can edit it, and when you press enter, it updates the value, remove the and redisplay the new value in the .
So it's really easy to add/modify information in one click.
I'm looking for a lib that do that, ideally that handle the whole process javascript+ajax+ror. Or just the javascript+ajax, or just javascript at least.
I think, like many of the other products, that they use GWT. Google Web Toolkit, its actually written in Java then cross compiled into Javascript. It allows them to write sourcecode for both the front and backend in Java and then creates optimised javascript for cross browsers.
The advantage of this is it is all widget based, and its super easy to switch components in and out without having to manually interact with the DOM.
However, if you do not wish to go down this route you can do it very simply in javascript using ajax calls. On a blur event you make an ajax call to your server which saves the field. On success it switches back to a Label. When you click on the label/text it switches for a textedit and uses the same contents as the label. No real need to use a plugin for this kind of thing as its actually pretty basic, it just looks good :).

Add enhancements to a website (whether it be by C#, Chrome Extensions, etc.) -- Not sure what would work?

There is a website that I visit often... let's call it www.example.com. And, I am able to interact with parts of this website. The interactions send XMLHttpRequest and get a response back through Javascript, jQuery I believe.
I'm not sure what technology will let me achieve what I want to do, and where to start. Basically, I want to add additional options/shortcuts that the site does not provide. I thought about maybe using a macro, but trying to use macro recording software is just a pain in the butt.
I inspected (using Google Chrome's Developer Tools) the XMLHttpRequest being sent back and forth and I noticed that it is simple JSON messages. I figured the best way to add enhancements to the site without waiting for the actual owners of the site to do so would be to simulate the website sending/recieving these XMLHttpRequest/Response and making additional adjustments to the DOM to provide extra shortcuts.
I don't want to interfere with the original site's functionality though... ie if I send a request and receive a response I want both the original script and my script to process the response. So, here is where I'm stuck... I'm not sure whether to go along the paths of creating a C# application or a Google Chrome extension (I use Google Chrome) or something else alltogether. Any pointers on what dev tools/languages will give me the ability to do what I want would be great. Thanks!
Chrome has built in support for user scripts. You can use these to modify the page as you see fit and also to make requests. Without more details regarding what exactly you want to do with these AJAX request it's hard to advise further.
I'm not 100% sure what your question is, but as I understand it, you want to be able to make changes to a certain website. If these changes can be done with js, i would recommend Greasemonkey for Firefox. It basically lets you run a custom script when you are visiting a certain webpage/domain. You can be as specific as you want about which pages use the script. Once your script loads jQuery, it is really easy to add any functionality.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
You can find pre-written scripts for tons of sites here:
http://userscripts.org/

Categories

Resources