web/data/cubicweb.image.js
author Adrien Di Mascio <Adrien.DiMascio@logilab.fr>
Mon, 11 Oct 2010 19:12:59 +0200
changeset 6448 8590d82e9b1b
parent 6215 759cf097f5aa
permissions -rw-r--r--
[javascript] update to jQuery 1.4.2 and jQuery-ui 1.8.5 The most notable changes are : - A bug in jQuery 1.4.2 forces us to add 2 noop() methods on cw objects to handle event unbinding, see : http://dev.jquery.com/ticket/6184 for more details. - jquery.autocomplete.js is not maintained anymore as it now has a standard implementation in jquery ui. The downside is that the new autocomplete version needs more work to be used. cubicweb.widgets.js defines a cwautocomplete plugin which is just a (not so) thin wrapper around the std autocomplete plugin to keep backward compatibility and usage simplicty. The original autocomplete author wrote a nice migration guide : http://www.learningjquery.com/2010/06/autocomplete-migration-guide - If you're using jQuery.ajax directly, you might have surprises with arguments serialization for arrays. To get the old behaviour, you need to pass a `traditional: true` extra arguments to jQuery.ajax. Of course, it's transparent if you're using cubicweb higher level helpers such as loadxhtml, loadRemote, etc.

jQuery.fn.autoResize = function() {
    // remove enforced with / height (by CSS and/or HTML attributes)
    this.css("width", "auto").css("height", "auto");
    this.removeAttr("width").removeAttr("height"); // Remove
    // compute image size / max allowed size to fit screen
    var imgHSize = this.width();
    var maxHSize = $(window).width() - ($(document).width() - imgHSize);
    var imgVSize = this.height();
    // we don't mind if content in [content]footer moved out of the screen
    var maxVSize = $(window).height() - ($(document).height() - imgVSize) + $('#footer').height() + $('#contentfooter').height();
    if (maxHSize > 0 && maxVSize > 0) {
        // if image don't fit screen, set width or height so that
        // browser keep img ratio, ensuring the other dimension will
        // also fit the screen
        if (imgHSize > maxHSize && ((imgVSize / imgHSize) * maxHSize) <= maxVSize) {
            this.css("width", maxHSize);
        } else if (imgVSize > maxVSize && ((imgHSize / imgVSize) * maxVSize) <= maxHSize) {
            this.css("height", maxVSize);
        }
        else {
            // image already fit in screen, don't scale it up
        }
    } else {
        // can't fit image in, don't do anything
    }
};


$(document).ready(function() {
        $("img.contentimage").load(function() {$(this).autoResize()});
});