Capture web pages in a Domino application

This script allows to bookmark web pages in a Domino application. It uses a Bookmarklet you can add to your favorites or put in the menu bar of the browser.

The bookmarklet

The technique I am going to use: use a bookmarklet to insert my own JavaScript in the web page (any webpage, e.g. BBC News, Youtube, you name it):

<a href="javascript:var d=document,o=d.createElement('script');o.src='http://[your URL]/link-capture.js';d.body.appendChild(o);void null;">Bookmark this</a>

If you want to learn how to add a bookmarklet to the links bar of the browser and how they work, read more here.

The link-capture.js

Once this file is loaded, I now have the possibility to manipulate the page. So I can actually read the DOM nodes and even modify them. The base of the script is my global namespace 'G' (see previous post). Here's the code:

G.capture={
init:function(){
    var m=this,v=m.info={Subject:document.title,Link:location.href,Description:'', Keywords:''},o=$$('meta'),i,q,qn
    for(i=0;i<o.length;i++){
        q=o[i];qn=q.name.toLowerCase()
        if(qn=='description')v.Description=q.content
        else if(qn=='keywords')v.Keywords=q.content
    }
    if(/youtube.com/.test(v.Link)){v.Type='youtube';try{v.Embed=$('embed_code').value}catch(e){}}
    m.render(v)
},
render:function(a){
    var m=this,o=m.ovl=G.create('div',{className:'ovl'}),f,ul
    G.append($$('head')[0],'link',{rel:'stylesheet',type:'text/css',href:G.base+'link-capture.css'})
    m.hideEmbeds(true)
    f=G.append(o,'form',{method:'post',action:G.base+'link?createdocument',target:'_blank'})
    G.append(f,'h2',{innerHTML:'Add to '+G.base})
    ul=G.append(f,'ul')
    for(q in a)G.append(ul,m.row(q,a[q]))
    G.append(f,m.actions())
    G.append(document.body, o)
},
row:function(a,b){
    var o=G.create('li'),n='f_'+a
    G.append(o,'label',{'for':n,innerHTML:a+': '})
    switch(a){
    case 'Description':case 'Keywords':
        G.append(o,'textarea',{name:a,id:n,value:b})
        break
    default:
        G.append(o,'input',{name:a,id:n,value:b})
    }
    return o
},
actions:function(){
    var o=G.create('div',{className:'actions'})
    G.append(o,'input',{type:'submit',className:'button',value:'Submit'})
    G.append(o,'a',{href:'javascript:G.capture.cancel()',innerHTML:'Cancel'})
    return o
},
hideEmbeds:function(a){
    var m=this,o=$$('embed'),p=$$('object'),i,q=a?'hidden':'visible'
    for(i=0;i<o.length;i++)o[i].style.visibility=q
    for(i=0;i<p.length;i++)p[i].style.visibility=q
},
cancel:function(){var m=this;m.ovl.style.display='none';m.hideEmbeds(false)}
}
G.capture.init()

How it works

When the script is loaded, the G.capture.init() is executed. This function gathers information from the page in an object 'v'. On a Youtube page, it even captures the embed code of the movie.

Next the render() function is executed.

render()

First a 'div' element is created to add to the page.

Then it appends an extra CSS file from my own server to style the form I am going to build. Here's the CSS I used:

.ovl{position:absolute;top:10px;left:10px;border:solid 1px #666;width:500px;padding:10px;background:#fff;text-align:left;z-index:5000}
.ovl,.ovl textarea,.ovl input{font-family:'trebuchet ms',sans-serif;font-size:13px;color:#000}
.ovl h2{font-size:18px;color:#666;margin:0 0 10px 0}
.ovl ul{margin:0;padding:0;list-style:none}
.ovl li{border-bottom:solid 1px #ccc}
.ovl label{display:block;float:left;width:120px}
.ovl input,.ovl textarea{width:350px}
input.button{width:80px;text-align:center;margin-right:10px}
.ovl .actions{text-align:center;padding:5px}

To prevent the form to be hidden behind movies on the page, I make the movies hidden with the hideEmbeds() function. All the information gathered is then rendered as fields in a form. Add a submit button, and you are ready to send the form to your server. Here's a screenshot of how it looks:

Next?

All the links I collect in this way become documents in my Domino application. Later on, I will add more fields to categorize the links. Also, I am looking for a nice way to make them available in my rich text editor. Sorry, I don't have a live demo: I am running out of databases on the hosting server.