Changeset 8

Show
Ignore:
Timestamp:
11/26/09 21:08:32 (10 months ago)
Author:
guillaume
Message:

. Add compatibility with opera and chromium
. correct minor bug & enhancement:

  • go to 1st page when loading a new document
  • Dare-Dare elements are hidden until complete load of the application
Location:
branches/compatible-opera
Files:
4 added
4 modified

Legend:

Unmodified
Added
Removed

  • branches/compatible-opera/demo/css/demo.css

    r2 r8  
    6161} 
    6262 
    63 span#firefox { 
     63span.browser { 
    6464        vertical-align: text-middle; 
    6565        border: 1px solid black; 
    … …  
    7070        content: url('../res/firefox.jpg'); 
    7171} 
     72span#opera:before { 
     73        content: url('../res/opera.png'); 
     74} 
     75span#chromium:before { 
     76        content: url('../res/chromium.png'); 
     77} 
    7278 
    7379 

  • branches/compatible-opera/demo/index.html

    r7 r8  
    22<html> 
    33<head> 
    4         <title>dare-dare demo - document ajax reader extension</title> 
     4        <title>Dare-Dare demo - document ajax reader extension</title> 
    55 
    66        <!-- demo css --> 
    … …  
    2222                        $.ajaxFileUpload 
    2323                        ({ 
    24                                 url                                                     : 'fileupload.wsgi', 
     24                                url                                                     : 'ws/fileupload.wsgi', 
    2525                                secureuri                               : false, 
    2626                                fileElementId           : 'document', 
    … …  
    4545        </script> 
    4646</head> 
    47 <body onload="docreader.init(undefined, '/fileview');"> 
     47<body onload="docreader.init(undefined, 'dare-dare/ws');"> 
    4848        <div id="carpet"> 
    49         <h1>» <span>dare-dare demo</span> «</h1> 
     49        <h1>» <span>Dare-Dare demo</span> «</h1> 
    5050 
    5151        <p> 
    52                 This is a demo of dare-dare, a full-javascript document reader 
     52                This is a demo of Dare-Dare, a full-javascript document reader 
    5353        </p> 
    5454 
    … …  
    5656 
    5757        <div id="right"> 
    58         <form method="post" enctype="multipart/form-data" onsubmit="return loaddoc(this);" > 
    59                 <h2>preview your pdf document(s) in dare-dare applet</h2> 
    60                 <fieldset> 
    61                         <label for="document">PDF document:</label> 
    62                         <input type="file" name="document" id="document" /> 
    63                         <legend>Max 5Mo</legend> 
    64                 </fieldset> 
    65                 <br/> 
    66                 <fieldset> 
    67                         <input type="submit" value="view" /> 
    68                 </fieldset> 
    69         </form>  
     58                <form method="post" enctype="multipart/form-data" onsubmit="return loaddoc(this);" > 
     59                        <h2>preview your pdf document(s) in Dare-Dare applet</h2> 
     60                        <fieldset> 
     61                                <label for="document">PDF document:</label> 
     62                                <input type="file" name="document" id="document" /> 
     63                                <legend>Max 5Mo</legend> 
     64                        </fieldset> 
     65                        <br/> 
     66                        <fieldset> 
     67                                <input type="submit" value="view" /> 
     68                        </fieldset> 
     69                </form>  
    7070         
    71         <p> 
    72                 Compatible with:<br/>    
    73                         <span id="firefox">firefox 3.5+</span> 
    74         </p> 
     71                <p> 
     72                        Compatible with:<br/>    
     73                                <span id="firefox"      class="browser">firefox 3.5+</span> 
     74                                <span id="opera"        class="browser">opera 10+</span> 
     75                                <span id="chromium"     class="browser">chromium 4+</span> 
     76                </p> 
    7577        </div> 
    7678         

  • branches/compatible-opera/demo/ws/fileupload.wsgi

    r2 r8  
    3737                start_response('400 Bad Request', headers); return {'error': 'no document'} 
    3838 
    39         if post_args['document'].type != 'application/pdf': 
     39        doc                      = post_args['document'] 
     40        if '/' in doc.filename: 
     41                start_response('400 Bad Request', headers); return {'error': '\'/\' character forbidden in document name'} 
     42 
     43        if doc.type != 'application/pdf': 
    4044                start_response('400 Bad Request', headers); return {'error': 'document is not a pdf'} 
    4145 
    … …  
    4549                return {'error': 'document size is more than 5Mo'} 
    4650 
    47         doc                      = post_args['document'] 
    4851        fileid           = hashlib.md5(doc.filename + '--' + environ['REMOTE_ADDR']).hexdigest() 
    4952        tmpfiledir = '/'.join((environ['dare-dare.tempdir'], fileid)) 
    … …  
    6063        fp.close() 
    6164 
     65        # simply touch original filename 
     66        open('/'.join((tmpfiledir, doc.filename)), 'a').close() 
     67 
    6268        start_response('200 OK', headers) 
    6369        return {'msg': fileid} 

  • branches/compatible-opera/jslib/dare-dare.js

    r7 r8  
    5555 
    5656        /* get current script base address */ 
    57         var basedir = ''; 
     57        this.basedir = ''; 
    5858        scripts = document.getElementsByTagName('script'); 
    5959        for(i = 0; i < scripts.length; i++) 
    … …  
    6767 
    6868                // found dare-dare script :: get basedir 
    69                 var basedir = src.slice(0, start) + '/'; 
    70         } 
    71  
    72         if (basedir == '') 
     69                this.basedir = src.slice(0, start) + '/'; 
     70        } 
     71 
     72        if (this.basedir == '') 
    7373        {  
    7474                console.error('dare-dare script line not found. You must load dare-dare using <script type="text/javascript" src="my/path/dare-dare.js"></script>'); 
    … …  
    8181        var js   = document.createElement('script'); 
    8282        js.type  = 'text/javascript'; 
    83         js.src   = basedir + 'xmlhttprequest.js'; 
     83        js.src   = this.basedir + 'xmlhttprequest.js'; 
     84        head.appendChild(js); 
     85 
     86        // add browser-compat javascript 
     87        var js   = document.createElement('script'); 
     88        js.type  = 'text/javascript'; 
     89        js.src   = this.basedir + 'browser-compat.js'; 
     90        console.log('js=' + js); 
     91        _dd = this; js.onload= function(){ _dd.compat = new compat(); } 
    8492        head.appendChild(js); 
    8593 
    … …  
    8896        css.rel  = 'stylesheet'; 
    8997        css.type = 'text/css'; 
    90         css.href = basedir + 'dare-dare.css'; 
     98        css.href = this.basedir + 'dare-dare.css'; 
    9199        head.appendChild(css); 
    92100 
     101        this.base.style.visibility = 'hidden'; 
    93102        // set docreader HTML content 
    94103        this.base.innerHTML = '                                                                                                                                                                                                                                                                                                                 \ 
    … …  
    101110                        </span>                                                                                         \ 
    102111                        <span id="pgslider">                                                                            \ 
    103                                 <input id="pagenum" type="text" maxlength="3" value="Nan" onchange="docreader._pageslide(this.value);"/> /<span id="pagetotal">Nan</span>    \ 
     112                                <input id="pagenum" type="text" maxlength="3" value="Nan" onchange="docreader._pageslide(this.value);" onkeypress="docreader._pageslideKP(event, this.value);"/> /<span id="pagetotal">Nan</span>    \ 
    104113                        </span>                                                                                           \ 
    105114                        <span id="zoom">                                                                                  \ 
    … …  
    126135                        \ 
    127136                        <div>\ 
    128                                 dare-dare, by <a href="&#109;&#x61;&#105;&#108;&#116;&#x6f;&#x3a;&#x67;&#117;&#105;&#x6c;&#x6c;&#x61;&#x75;&#109;&#x65;&#64;&#x62;&#111;&#x75;&#114;&#46;&#x63;&#x63;">guillaume bour</a>\ 
     137                                dare-dare, by <a href="http://guillaume.bour.cc">guillaume bour</a>\ 
    129138                                <p>\ 
    130139                                        <a href="http://dare-dare.bour.cc">http://dare-dare.bour.cc</a></br>\ 
    … …  
    153162 */ 
    154163docreader._postinit = function(iframe) 
    155 { 
     164{        
     165        // load compat object 
     166        console.log('func::_postinit'); 
     167 
    156168        // iframe content document 
    157169        // NOTE: konqueror does not yet see base.innerHTML elements, so we use  
    … …  
    164176        this.content    = iframe.contentDocument; 
    165177        this.contentw = iframe.contentWindow; 
    166         this.content.body.setAttribute('class', 'content'); 
    167                          
     178 
     179        /* 
     180                 In chromium (chrome?), iframe content is '<body></body>', whereas 
     181                 firefox & opera also have a head node 
     182        */ 
     183        if(this.content.getElementsByTagName('head').length == 0) 
     184        { 
     185                var head = document.createElement('head'); 
     186                this.content.body.parentNode.insertBefore(head, this.content.body); 
     187        } 
     188 
     189        //this.content.body.setAttribute('class', 'content');                    
    168190 
    169191        // set iframe dimensions from its container (docreader) 
    … …  
    176198        css.rel         = 'stylesheet' 
    177199        css.type        = 'text/css'; 
    178         css.href        = 'docreader.css'; 
     200        css.href        = this.basedir + 'dare-dare.css'; 
    179201        this.content.getElementsByTagName('head')[0].appendChild(css); 
    180202 
    … …  
    192214        else 
    193215        {       this.content.body.innerHTML = '<p>No document</p>'; } 
     216 
     217        this.content.body.setAttribute('class', 'content');                      
     218        this.base.style.visibility = 'visible'; 
    194219} 
    195220 
    … …  
    220245docreader._open = function(filename) 
    221246{ 
     247        console.log('func::_open'); 
     248 
    222249        req = new xmlhttp(); 
    223         console.log('query for open') 
    224250        req.get(this.dirname + 'open?filename=' + filename, false); 
    225         //alert('ok: ' + req.responseText); 
    226251        ret = eval('(' + req.responseText + ')'); 
    227252        //TODO: check if ok 
    … …  
    260285        console.log('yoffset= ' + this._yoffset); 
    261286 
     287        // goto 1st page 
     288        this._curpage = 0; 
    262289        // set default zoom 
    263290        this.setZoom(2, true); 
    … …  
    269296docreader.updateNavitems = function(pagenum) 
    270297{ 
    271         console.log('updating navitems'); 
     298        console.log('func::updatingNavitems. pagenum=' + pagenum + ',' + this.compat); 
     299        var display = this.compat.getStyle(document, this._navitems[0], 'display'); 
     300        // setting none then display for "repaint" (required for opera) 
     301        this._navitems[0].style.display = 'none'; 
     302        this._navitems[1].style.display = 'none'; 
     303        this._navitems[2].style.display = 'none'; 
     304        this._navitems[3].style.display = 'none'; 
     305 
    272306        this._navitems[0].setAttribute('active', pagenum == 0 ?false:true); 
    273307        this._navitems[1].setAttribute('active', pagenum == 0 ?false:true); 
    274308        this._navitems[2].setAttribute('active', pagenum == this._totalpages-1 ?false:true); 
    275309        this._navitems[3].setAttribute('active', pagenum == this._totalpages-1 ?false:true); 
     310 
     311        this._navitems[0].style.display = display; 
     312        this._navitems[1].style.display = display; 
     313        this._navitems[2].style.display = display; 
     314        this._navitems[3].style.display = display; 
    276315} 
    277316 
    … …  
    318357} 
    319358 
     359docreader._pageslideKP = function(event, pagenum) 
     360{ 
     361        //console.log('slideKP=' + event.keyCode); 
     362 
     363        // not match ENTER 
     364        if(event.keyCode != 13) 
     365        { return false; } 
     366 
     367        return this._pageslide(pagenum); 
     368} 
     369 
    320370docreader.gotopage = function(pagenum) 
    321371{ 
     372        console.log('func::gotopage(' + pagenum + ')') 
    322373        // get "previous line" image index 
    323         ylineup = pagenum - this._viewport[0] - (pagenum % this._viewport[0]); 
     374        var ylineup = pagenum - this._viewport[0] - (pagenum % this._viewport[0]); 
    324375        console.log('ylineup= ' + ylineup); 
    325376 
    326377        // scroll to page 
    327         if(ylineup < 0) 
    328         { top = 0 } 
    329         else     
     378        var top = 0; 
     379        if(ylineup >= 0) 
    330380        { 
    331381                img = this.content.getElementById('page' + ylineup); 
    … …  
    335385                top += ((pagenum - (pagenum % this._viewport[0])) / this._viewport[0]) % 2; 
    336386        } 
    337         console.log('img h= ', top); 
     387        console.log('img h= ' + top); 
    338388 
    339389        this._catchscroll = false; 
    … …  
    349399        // set current page value 
    350400        this._curpage = pagenum; 
     401        console.log('  set pagenum=' + this._curpage + ',' + this._pagenum); 
    351402        this._pagenum.value = this._curpage + 1; 
    352403} 
    … …  
    354405docreader.fill_viewport = function() 
    355406{ 
     407        console.log('func::fill_vp'); 
     408 
    356409        // get top-left image 
    357         img   = this.content.elementFromPoint(20, 20); 
    358         console.log('vp.img= ' + img) 
     410        //img   = this.content.elementFromPoint(20, 30); 
     411        img = this.compat.viewportElementFromPoint(this.content, this.contentw, 20, 30); 
     412        //console.log('vp.img= ' + img) 
    359413        start = parseInt(img.getAttribute('pagenum')) 
    360414         
    … …  
    364418        for(i = start - 1; i < start + (this._viewport[0] * this._viewport[1]) + 1; i++)         
    365419        { this.read(i); } 
     420 
     421        return img; 
    366422} 
    367423 
    … …  
    376432        if (img == undefined) 
    377433        { return; } 
    378         img.src                 = this.dirname + 'read?fileid=' + this._fileid + '&pagenum=' + pagenum + '&resolution=' + this._zooms[this._curzoom] + 'x-1'; 
     434 
     435        cache_img                       = new Image(); 
     436        cache_img.src   = this.dirname + 'read?fileid=' + this._fileid + '&pagenum=' + 
     437                pagenum + '&resolution=' + this._zooms[this._curzoom] + 'x-1'; 
     438        //img.src               = this.dirname + 'read?fileid=' + this._fileid + '&pagenum=' + 
     439        //      pagenum + '&resolution=' + this._zooms[this._curzoom] + 'x-1'; 
     440        img.src = cache_img.src; 
     441 
     442        //console.log('  img.src=' + img.src); 
    379443} 
    380444 
    … …  
    384448        { return; } 
    385449 
    386         docreader._yoffset = docreader.contentw.pageYOffset;  
     450        docreader._yoffset = docreader.contentw.pageYOffset; 
     451        /* 
    387452        img     = docreader.content.elementFromPoint(20, docreader.contentw.innerHeight / 2); 
    388453        // did we fall in an interpage ? 
    … …  
    390455        { img           = docreader.content.elementFromPoint(20, docreader.contentw.innerHeight / 2 - 10); } 
    391456        curpage = parseInt(img.getAttribute('pagenum')) 
    392  
    393457        console.log('scroll start= ' + curpage); 
    394         docreader.fill_viewport(); 
     458        */ 
     459        img = docreader.fill_viewport(); 
     460        if(isNaN(img)) 
     461        {  
     462                img     = docreader.compat.viewportElementFromPoint( 
     463                        docreader.content, docreader.contentw, 20,                       
     464                        docreader.contentw.innerHeight / 2 - 10 
     465                );  
     466        } 
     467 
     468        curpage = parseInt(img.getAttribute('pagenum')) 
     469        console.log('scroll start= ' + curpage); 
    395470 
    396471        // update navitems 
    … …  
    406481        if(level == this._curzoom && !force) 
    407482        { return; } 
    408         console.log('setZoom') 
    409483         
    410         document.getElementById('lvl' + (this._curzoom + 1)).setAttribute('active', 'false'); 
    411         document.getElementById('lvl' + (level + 1)).setAttribute('active', true); 
     484        console.log('func::setZoom') 
     485        var z1 = document.getElementById('lvl' + (this._curzoom + 1)); 
     486        var z2 = document.getElementById('lvl' + (level + 1)); 
     487        var display = this.compat.getStyle(document, z1, 'display'); 
     488        z1.style.display = 'none'; 
     489        z2.style.display = 'none'; 
     490 
     491        z1.setAttribute('active', 'false'); 
     492        z2.setAttribute('active', true); 
     493 
     494        z1.style.display = display; 
     495        z2.style.display = display; 
    412496 
    413497        this._curzoom = level;