Detecting & displaying links in a form's text area - javascript

When I enter a link (video, image, URL, etc.) in Facebook's "What's on your mind?" form, it auto-detects the link and converts it to a thumbnail with a brief description below the text-area. Can anyone provide me with insight or a link to get me going on how to achieve this?

There's a javascript attached to the textarea change event. The javascript detects if the content of the textarea is a url, if it is, the javascript call a webservice that visit the url looking for the page title, the page description, etc, (or the open graph protocol meta tags), if it find each one of the tags they are returned to the javascript who proper organize then.
Facebook also cache this content, and if the same url is posted by another user, he uses the cache values instead of revisiting the page.
The open graph protocol meta tags:
http://developers.facebook.com/docs/opengraphprotocol/

using something like
var input = document.getElementById("textarea");
input.addEventListener("change", checkLink(e));
input.addEventListener("blur", checkLink(e));
function checkText(text){
var exp = "((ht|f)tp(s?))(:((\/\/)(?!\/)))(((w){3}\.)?)([a-zA-Z0-9\-_]+(\.(com|edu|gov|int|mil|net|org|biz|info|name|pro|museum|co\.uk)))(\/(?!\/))(([a-zA-Z0-9\-_\/]*)?)([a-zA-Z0-9])+\.((jpg|jpeg|gif|png)(?!(\w|\W)))";
return text.match(exp);
}
function checkLink(e){
//here you would want to use a regular expression and check for http:
var regularExpression = !!checkText(e.target.innerHTML); // returns true or false
if(regularExpression){
e.target.innerHTML += "<a href='#'><img src="" alt="" /></a>";
}
}
good resource for regular expressions - http://regexlib.com/Search.aspx?k=image&c=-1&m=-1&ps=20

Warning -- have to leave for work so regular expressions are not checked.
Take the link value and run it through a regular expression that looks for ^http:...[^\s] or ^https:...[^\s] and returns those.
Then, pass those URLs to your server and have your server retrieve the document and return a snippit for you to then put in your document. You must have your own server to help because Javascript, by itself, has security restrictions. Google same origin policy for more info.

Related

How to disable hyperlinks within a PDF rendered by PDF.js

I'm looking into PDF.js for use in a web app. So far, it's meeting all of our business requirements. However, management has requested that we have the ability to disable hyperlinks within the PDF. We don't necessarily have to get rid of the blue text and underline, but if the user clicks on the hyperlink, it shouldn't go anywhere.
I've looked carefully through what API there is and couldn't find anything for it. I also looked through the source code, but nothing jumped out at me as something I could comment out in order to disable hyperlinks. Is there any way to disable hyperlinks contained within a PDF?
After a great deal of experimentation, I found out how to do this by modifying the source. There is a block of code that begins with the following:
document.addEventListener('pagerendered', function (e) {
At the end of the function before the close bracket, add the following code:
var allowInternalLinks = true;
var page = document.getElementById('pageContainer' + pageNumber);
var hyperlinks = page.getElementsByTagName('a');
for (var i=0; i<hyperlinks.length; i++){
if (!allowInternalLinks || hyperlinks[i].className != 'internalLink'){
hyperlinks[i].onclick = function(e) {
e.preventDefault();
}
}
};
What this does is take the rendered page, iterate through all of the hyperlinks on that page, and disable them. I have also added a boolean variable that allows you to optionally allow or disallow internal links (i.e. links that take the user to another location within the document).

How to send longer emails from a Chrome extension?

I would like to make a Chrome extension that lets users send emails with certain text automatically filled in. I was using a mailto: link, but it cannot handle strings longer than 1024 characters, and it cannot create html links. Is there a way I can fill in additional text and maybe even HTML links, from within the email page (perhaps with local storage)?
Unfortunately there is no native chrome/javascript API to my knowledge. I did some searching and found an open source option that someone was working on but it was very skeleton. He was hoping others would jump on with him and flesh it out.
Sounds like you're trying this:
For creating the URL, you can use the &body= tag and url encode the message however there is a limit to the length. It sounds like you already figured out how to open a new tag using chrome so you've been able to create shorter emails using nothing but a modified URL string. I did something similar to that on my first chrome exension. It looked something like this.
function sendToUrl(){ chrome.tabs.query({active:true, windowId: chrome.windows.WINDOW_ID_CURRENT}, function(tab) {
//while this seems to generate the URL correctly, gmail limits how long the body text can be therefore this is not a viable solution
//Also there is no javascript API therefore there is no hope of sending an email.
//Need to loop through each tab and not just the first one
var currentTab = tab[0];
var tabInformation = RPATH.getTab(currentTab.id);
var mailUrl = "https://mail.google.com/mail/?view=cm&fs=1&tf=1&su=My%20Subject&to=";
// grab the email addresss from popup.html
mailUrl += document.getElementById("to").value + "&body=";
// get formBody from popup.html
var formBody = document.getElementById("body").value;
...
//I did some other stuff that isn't relevant here
...
//Concat final mailto url
mailUrl = mailUrl + formBody;
chrome.extension.sendMessage({mailUrl: mailUrl}, function(response){ console.log(response.farewell);});
});}
For longer email bodies
That only gets you half way though. The only alternative I could think of was to split up the tab open and filling out the email body. You could modify the email body after page load completes using append. That might look something like what I have below. Notice I'm selecting the iframe element, then finding the body tag inside of there, and finally appending some html just after the tag opens. Notice the email body is nothing more then html so div, tr, br, etc tags should all work in creating a well formatted email. In my previous example I pulled the text from the form as a string. You could instead use jquery to clone the html on your popup.html page and append the cloned html. For simplicity's sake, I only put text inside the append.
$("iframe#:1t4").find("body.editable").append('<p>My long email body</p>');
I suppose from there you could run a click event but you could also leave that to the user.

addition to url

I am developing my own template selector for CSS templates. At the moment, it works fine, clicking on a name from the selectbox changes the template. However there is 1 function that is missing.
If you look here: http://www.demo.joomforest.com/?template=corporate
you can obviously see the URL contains ?template=corporate at the end of it, thus if you enter that URL, it loads the corporate template.
This is my selector so far: http://joomjunk.co.uk/demo
As you can see, I added a hash + template name to the end of the url upon selecting a template, however if you copy and paste that URL into a new tab for example, it loads the default template.
So my question is, how can I add something similar to ?template=corporate and have it load the correct template upon loading that specific URL?
I'm not asking for the full code, but to point me in the right direction.
Thanks in advance.
window.location.search
This will contain whatever comes after the ? in your URL, including the ?
if
window.location.href === "http://www.demo.joomforest.com/?template=corporate"
then
window.location.search === "?template=corporate"
if you want to parse the query string, there are many resources available. If, however, you just want to do it for this specific case:
var tmpl = window.location.search.split('=')[1];
// tmpl === "corporate"
This will split the string on = and then return the second element in the array
If you have an URL like http://foo.bar/#corporate you can just check the window.location.hash in your javascript and load that template immediately.
Seems reasonable since you already add hashes in your dropdown – the user will see the same template if they choose to refresh the page.
You might even be able to trigger a click event on the right dropdown menu item based on the hash property, but that would require the DOM to be fully loaded.

Where can I find documentation to support this behavior?

I'm looking over some previous developers code and I come across this line:
location.href = '#' + variable;
Which has the effect of updating location.hash. Remove the '#' and of course it redirects to the non-existent url. Playing around a bit it seems I can set the hash via location.href as long as the value starts with '#'. This line or similar is used a lot, but I can't seem to find any documentation the supports this behavior of it updating location.hash by setting location.href this way.
I would like to see something showing this isn't just a happy accident that this works so I don't have to re-code all the situations where this is used. Anything you can link me to would help.
Would it be better to just changes these to properly set the location.hash anyway?
Thnks
At a guess this is because setting location.href to value is supposed to have the same behaviour as clicking a link whose href=value would; it's not supposed to replace the contents of the address bar, because then you'd have to build absolute URLs everytime you wanted to use location.href.
Assigning values to location and location.href was apparently there back in Javascript 1.0, so it's entirely possible this wasn't properly specified anywhere – neither the Mozilla or Microsoft documentation go into detail. HTML5 specifies the behaviour, most likely retroactively.
This is a good place to start your journey on the location properties.
https://developer.mozilla.org/en/window.location
By the way, #something is a valid url and assigning a new url to window.location cause the browser to navigate to the new destination.
#something is called hash and direct the browser to an anchor on the current document, or to the top of the document if the anchor does not exists.
http://docstore.mik.ua/orelly/webprog/DHTML_javascript/0596004672_jvdhtmlckbk-chp-10-sect-2.html
So what happens is when you set location.href to something that is not seen as an absolute path. The browser will automatically put the current url prepended to whatever value you are trying to set it to.
So "#section1" = "www.mysitethatistoocoolforschool.com#section1"
and "section1" = "www.mysitethatistoocoolforschool.comsection1" (this does not exist)
This URLs with a '#' char are called anchor based URLs, they're not supposed to redirect the user from the page, instead they just update the position of the page by some offset, the same way as setting the location.hash you cited.
As stated by Sii this works because when you change the location.href value it's like you're clicking on a link for example then you have the following equivalence:
<a href="#toc" >Go to Table of Contents</a>
Is the same as:
location.href = "#toc";
Both of them would result in your location.hash variable to have the value toc.

Change URL shown in Chrome status bar

When I hover over a url in Chrome, the url is displayed in the Chrome status bar. In my case this results in an ugly javascript:bla-bla-bla reference. Is there any way to change the contents of the status bar when you hover over a link?
Thanks
Although you selected your answer, this idea is an alternative.
You can change the href attribute on mouseover to affect what the status bar says, and change it back on mouseout or click:
function showNiceLink(el, e) {
e = e || event;
el.originalHref = el.originalHref || el.href;
console.log(e.type);
if (/click|out/i.test(e.type)){
el.href = el.originalHref;
} else {
el.href = "http://Linking...";
}
}
<a href="#this is a really UGLY link #1##$$%!!&"
onmouseover="showNiceLink(this,event)"
onmouseout="showNiceLink(this,event)"
onclick="showNiceLink(this,event)">a link with an ugly <code>href</code></a>
I'm pretty sure for security reasons this isn't possible in any browser. Otherwise links to phishing sites will become much, much harder to detect, because attackers can then just place a genuine URL in the status bar while the dangerous link actually leads elsewhere...
Use an onclick event handler for your hyperlink instead, and put a real, meaningful URL in the href attribute in place of the javascript: link (even if the link is meant to be used only with JavaScript).
Your "link"
I guess you mean you want to change what destination is shown for link that is selected? In that case you most likely should put nice url in href attribute, and use onclick attribute for your javascript. Not sure that you can duplicate everything what is done by putting javascritp in href.
Assuming this is what you have:
<a onClick="blabla">Link</a>
Add href="#" to it. Then the # should be shown in stead of the javascript:blabla.
So that would be like this:
Link
It is definitely possible to achieve the desired effect. Just look at what Google puts in the status bar of its search results.
However, you need to use some kind of a trick, e.g. onclick like BoltClock suggested.
Google shows you what you would like to see - a plain, clean URL.
Underneath, however, they use a long redirect URL with monitoring parameters to track you down as you click any result link. That way Google monitors which of the search results are clicked on and which are not.
Unfortunately, most people do not realize that. Quite frankly, I would be very glad to see a browser extension which takes all this dirty tricks down and replaces "tracking" URLs with the "real ones".

Categories

Resources