WordPress.org

Ready to get started?Download WordPress

Forums

Pinterest Image Pinner From Collective Bias
[resolved] Race condition in javascript (3 posts)

  1. freerange
    Member
    Posted 1 year ago #

    There is a race condition in your javascript:

    If an image has no size attributes and is not in cache your codes sees it as 0 x 0 and adds a pin button. However if the image is in cache and the browser knows it's actual size you correctly detect it as too small and don't add the button.

    The net result of this is you are adding pin buttons to other buttons if the user has a cold cache.

    The fix for this would be to add buttons in 2 stages: If you know the size go ahead but for any image that comes back 0 x 0 use onload() to trigger your code so that you only run when the browser actually knows how big the image is.

    John

    http://wordpress.org/extend/plugins/cb-pinterest-image-pinner/

  2. freerange
    Member
    Posted 1 year ago #

    Here is a fix that hides the button if the image size is 0 and check again on load to display the actual image.

    CB_Pinterest_Pinner = function(selector, not_selector, min_width, min_height){
        function init(selector, not_selector, min_width, min_height) {
            jQuery(selector).not(not_selector).each(function(index) {
                var extra_css = new Array("margin", "margin-top", "margin-bottom", "margin-left", "margin-right", "padding", "padding-top", "padding-bottom", "padding-left", "padding-right");
                var already_selected = jQuery(this).attr("cb_pinned");
                if(already_selected != "true") {
                    jQuery(this).attr("cb_pinned", "true");
                    var height = jQuery(this).height();
                    if( typeof height === "undefined") {
                        height = jQuery(this).attr("height");
                    }
                    var width = jQuery(this).width();
                    if( typeof width === "undefined") {
                        width = jQuery(this).attr("width");
                    }
    
                    width = parseInt(width);
                    height = parseInt(height);
    
                    min_width = parseInt(min_width);
                    min_height = parseInt(min_height);
    
                    if((height == 0 || height > min_height) && (width == 0 || width > min_width)) {
                        var theID = 'pin_images_' + index;
                        jQuery(this).wrap('<div class="cb_pin_images" id="' + theID + '" />');
                        jQuery('#' + theID).append('<a class="cb_pin_link" href="#">&nbsp;</a>');
                        jQuery('#' + theID + " a").click(image_click);
                        if(height > 0) {
                            jQuery('#' + theID).height(height);
                        }
                        if(width > 0) {
                            jQuery('#' + theID).width(width);
                        }
                        var len = extra_css.length;
                        for(var i = 0; i < len; i++) {
                            var css_attr_name = extra_css[i];
                            var css_attr_value = jQuery(this).css(css_attr_name);
                            if(!( typeof css_attr_value === "undefined")) {
                                jQuery('#' + theID).css(css_attr_name,css_attr_value);
                            }
                        }
                        jQuery('#' + theID).addClass(jQuery(this).attr("class"));
                        if(height == 0 || width == 0) {
                            jQuery('#' + theID+' a.cb_pin_link').hide();        //If we don't know the image size hide the button for now
                            jQuery(this).load(function() {
                                //Image now loaded, see if it's big enough
                                if(jQuery(this).height() > min_height && jQuery(this).width() > min_width) {
                                    jQuery(this).parent().find('.cb_pin_link').show();
                                }
                            })
                        }
                    }
                }
            });
        }
        function image_click(event) {
            var url = document.URL;
           /* TODO add somehow to determine if this is a link to a post or not.
            * This works for the most part but not completely
            * $link_parents =jQuery(this).parent().parent("a");
            alert($link_parents.length);
            if($link_parents && $link_parents.length == 1 ){
                //alert(typeof $link_parents.get(0));
                url = $link_parents.attr("href");
            }*/
            if(url.charAt(url.length - 1) == "/") {
                url = url.substring(0, url.length - 1);
            }
            url = encodeURIComponent(url);
            var media = jQuery(this).prev("img").attr("src");
            media = encodeURIComponent(media);
            var description = jQuery(this).attr("title");
            if( typeof description === "undefined" || jQuery.trim(description) == "" ) {
                description = jQuery(this).prev("img").attr("alt");
                if( typeof description === "undefined" || jQuery.trim(description) == "" ){
                    description = document.title;
                }
            }
            var href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
            event.preventDefault();
            pin_this(href);
        }
        function pin_this(href) {
            window.open(href, "cb_pin_windows", "menubar=1,resizable=1,width=800,height=250");
        }
        init(selector, not_selector, min_width, min_height);
    }
  3. chriswhittle
    Member
    Plugin Author

    Posted 1 year ago #

    thanks will get it incorporated in my next build

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.