Changeset 13637

Show
Ignore:
Timestamp:
11/26/07 14:07:12 (1 year ago)
Author:
w_i
Message:

Rewrote to use jQuery

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • trunk/midcom/midcom.helper.imagepopup/handler/list.php

    r13617 r13637  
    133133                        } 
    134134                } 
    135  
    136         $_MIDCOM->add_jsfile(MIDCOM_STATIC_URL."/Pearified/JavaScript/Prototype/prototype.js"); 
     135         
     136        $_MIDCOM->enable_jquery(); 
    137137        $_MIDCOM->add_jsfile(MIDCOM_STATIC_URL . "/midcom.helper.imagepopup/functions.js"); 
    138          
    139         $image_info = "var imagepopup_images = new Array();\n"; 
    140         $image_info .= "imagepopup_images['prefix'] = \"{$_MIDGARD['self']}midcom-serveattachmentguid-\";\n";  
    141         $_MIDCOM->add_jscript($image_info); 
    142          
    143         //$_MIDCOM->add_jsonload("tinyMCEPopup.executeOnLoad('tinyMCEPopup.resizeToContent()');"); 
    144138         
    145139        // Ensure we get the correct styles 
    …… 
    173167                break; 
    174168        } 
    175  
    176         $_MIDCOM->add_jsonload("imagePopupConvertImagesForAddition();imagePopupConvertFilesForAddition();"); 
     169         
     170        $_MIDCOM->add_jsonload("jQuery('.midcom_helper_datamanager2_widget_images_image').dm2ImagePopupConvert();"); 
     171        $_MIDCOM->add_jsonload("jQuery('.midcom_helper_datamanager2_widget_downloads_download').dm2ImagePopupConvert();"); 
    177172    } 
    178173 
    …… 
    189184                $this->_search_results = $qb->execute(); 
    190185                 
    191                 $_MIDCOM->add_jsonload("imagePopupConvertResultsForAddition();"); 
     186                $_MIDCOM->add_jsonload("jQuery('.midcom_helper_imagepopup_search_result_item').dm2ImagePopupConvert();"); 
    192187        } 
    193188     

  • trunk/midcom/midcom.helper.imagepopup/static/functions.js

    r13613 r13637  
    1 /** 
    2  * The functions in this file are based on the G2image plugin found here: 
    3  * http://g2image.steffensenfamily.com/index.php?title=Main_Page 
    4  */ 
     1(function($){ 
     2     
     3    $.datamanager2 = $.datamanager2 || {}; 
     4    $.datamanager2.imagepopup = { 
     5        items: '' 
     6    } 
     7     
     8    function dm2ImagePopupConverter(item, options) 
     9    { 
     10        var jq_item = $(item); 
     11         
     12        if ($.datamanager2.imagepopup.items == '') { 
     13            $.datamanager2.imagepopup.items = new Array(); 
     14        } 
     15         
     16        var item_type = 'image'; 
     17        if (jq_item.hasClass('midcom_helper_datamanager2_widget_downloads_download')) 
     18        { 
     19            item_type = 'attachment'; 
     20        } 
     21         
     22        var converted_object = { 
     23            guid: jq_item.attr('title'), 
     24            title: '', 
     25            name: '', 
     26            url: '', 
     27            type: item_type 
     28        }; 
     29         
     30        if (converted_object.guid == '') { 
     31            return; 
     32        } 
     33         
     34        converted_object.url = $('a.download:eq(0)', jq_item).attr('href'); 
     35        converted_object.name = $('td.filename', jq_item).attr('title'); 
     36        converted_object.title = $('td.title', jq_item).attr('title'); 
     37         
     38        if (   typeof converted_object.title == 'undefined' 
     39            || converted_object.title == '') 
     40        { 
     41            converted_object.title = converted_object.name; 
     42        } 
     43         
     44        $('a', jq_item).attr({ 
     45            href: 'javascript:$j.datamanager2.imagepopup.InsertItem("' + converted_object.guid.toString() + '");', 
     46            title: 'Click to insert', 
     47            target: '' 
     48        }); 
     49         
     50        $.datamanager2.imagepopup.items.push(converted_object); 
     51    } 
     52     
     53    $.datamanager2.imagepopup.InsertItem = function(guid) 
     54    { 
     55        var image_info = {}; 
     56        var html_code = ''; 
     57         
     58        $.each($.datamanager2.imagepopup.items, function(i,n){ 
     59            if (n.guid == guid) { 
     60                image_info = n; 
     61                return; 
     62            } 
     63        }); 
    564 
    6 /** 
    7  * Mangle the HTML generated to Datamanager 2 to add the image insertion links 
    8  */ 
    9 function imagePopupConvertImagesForAddition() 
    10 { 
    11     // We convert the image "size lists" into the addition clickers 
    12     imageRows = document.getElementsByClassName('midcom_helper_datamanager2_widget_images_image'); 
    13     if (imageRows) 
    14     { 
    15         for (i = 0; i < imageRows.length; i++)  
    16         { 
    17             imageGuid = imageRows[i].getAttribute('title'); 
    18             if (imageGuid) 
    19             { 
    20                 var links = imageRows[i].getElementsByTagName('a'); 
    21                 var imageUrl = ''; 
    22                 for (var li = 0; li < links.length; li++) 
    23                 { 
    24                     if (   Element.hasClassName(links[li], 'download') 
    25                         && imageUrl == '') 
    26                     { 
    27                         imageUrl = links[li].getAttribute('href'); 
    28                     } 
    29                 } 
    30  
    31                 image = new Array(); 
    32                 image['guid'] = imageGuid; 
    33                  
    34                 // Find the rest of the metadata 
    35                 imageCells = imageRows[i].getElementsByTagName('td'); 
    36                 if (!imageCells) 
    37                 { 
    38                     alert("No cells!"); 
    39                 } 
    40                  
    41                 for (ii = 0; ii < imageCells.length; ii++)  
    42                 { 
    43                     imageCellTitle = imageCells[ii].getAttribute('title'); 
    44                      
    45                     // Image filename 
    46                     if (Element.hasClassName(imageCells[ii], 'filename')) 
    47                     { 
    48                         image['name'] = imageCells[ii].getAttribute('title'); 
    49                         imageLinks = imageCells[ii].getElementsByTagName('a'); 
    50  
    51                         // Tweak the image links 
    52                         for (iii = 0; iii < imageLinks.length; iii++)  
    53                         { 
    54                             imageLinks[iii].href = 'javascript:insertImage("' + imageGuid + '");'; 
    55                             imageLinks[iii].target = ''; 
    56                             imageLinks[iii].title = 'Click to insert'; 
    57                         } 
    58                     } 
    59                     else if (Element.hasClassName(imageCells[ii], 'title')) 
    60                     { 
    61                         image['title'] = imageCells[ii].getAttribute('title'); 
    62                     } 
    63                     // TODO: Get type 
    64                 } 
    65                  
    66                 // Populate image to the image info Array 
    67                 imagepopup_images[imageGuid] = new Array(); 
    68                 imagepopup_images[imageGuid]['title'] = image['title']; 
    69                 imagepopup_images[imageGuid]['name'] = image['name']; 
    70                 imagepopup_images[imageGuid]['type'] = 'image'; 
    71                 imagepopup_images[imageGuid]['url'] = imageUrl; 
    72             } 
     65        switch (image_info['type'])  { 
     66                case "attachment": 
     67                        html_code = '<a href="' + image_info['url'] + '" >' + image_info['title'] + '</a>'; 
     68                break; 
     69                case "image": 
     70                default: 
     71                        html_code = '<img src="' + image_info['url'] + '" alt="' + 
     72                                                    image_info['title'] + '" title="' + 
     73                                                    image_info['title'] + '"/>'; 
     74                break; 
     75        } 
     76         
     77        window.opener.tinyMCE.execCommand("mceInsertContent", true, html_code); 
     78    } 
     79     
     80    $.fn.extend({ 
     81        dm2ImagePopupConvert: function(options) { 
     82            options = $.extend({}, options); 
     83            return this.each(function(){ 
     84                new dm2ImagePopupConverter(this, options); 
     85            }); 
    7386        } 
    74     } 
    75 } 
    76 function imagePopupConvertFilesForAddition() 
    77 { 
    78     // We convert the image "size lists" into the addition clickers 
    79     imageRows = document.getElementsByClassName('midcom_helper_datamanager2_widget_downloads_download'); 
    80     if (imageRows) 
    81     { 
    82         for (i = 0; i < imageRows.length; i++)  
    83         { 
    84             imageGuid = imageRows[i].getAttribute('title'); 
    85             if (imageGuid) 
    86             { 
    87                 var links = imageRows[i].getElementsByTagName('a'); 
    88                 var imageUrl = ''; 
    89                 for (var li = 0; li < links.length; li++) 
    90                 { 
    91                     if (   Element.hasClassName(links[li], 'download') 
    92                         && imageUrl == '') 
    93                     { 
    94                         imageUrl = links[li].getAttribute('href'); 
    95                     } 
    96                 } 
    97                  
    98                 image = new Array(); 
    99                 image['guid'] = imageGuid; 
    100                  
    101                 // Find the rest of the metadata 
    102                 imageCells = imageRows[i].getElementsByTagName('td'); 
    103                 if (!imageCells) 
    104                 { 
    105                     alert("No cells!"); 
    106                 } 
    107                  
    108                 for (ii = 0; ii < imageCells.length; ii++)  
    109                 { 
    110                     imageCellTitle = imageCells[ii].getAttribute('title'); 
    111                      
    112                     // Image filename 
    113                     if (Element.hasClassName(imageCells[ii], 'filename')) 
    114                     { 
    115                         image['name'] = imageCells[ii].getAttribute('title'); 
    116                         imageLinks = imageCells[ii].getElementsByTagName('a'); 
    117  
    118                         // Tweak the image links 
    119                         for (iii = 0; iii < imageLinks.length; iii++)  
    120                         { 
    121                             imageLinks[iii].href = 'javascript:insertImage("' + imageGuid + '");'; 
    122                             imageLinks[iii].target = ''; 
    123                             imageLinks[iii].title = 'Click to insert'; 
    124                         } 
    125                     } 
    126                     else if (Element.hasClassName(imageCells[ii], 'title')) 
    127                     { 
    128                         image['title'] = imageCells[ii].getAttribute('title'); 
    129                     } 
    130                     // TODO: Get type 
    131                 } 
    132                  
    133                 // Populate image to the image info Array 
    134                 imagepopup_images[imageGuid] = new Array(); 
    135                 imagepopup_images[imageGuid]['title'] = image['title']; 
    136                 imagepopup_images[imageGuid]['name'] = image['name']; 
    137                 imagepopup_images[imageGuid]['type'] = 'attachment'; 
    138                 imagepopup_images[imageGuid]['url'] = imageUrl; 
    139                  
    140             } 
    141         } 
    142     } 
    143 } 
    144   
    145 /** 
    146  * HTML insertion to selected area function 
    147  * TODO: this functionshould make it possible to insert images into markdown textareas as well! 
    148  */ 
    149 function insertAtCursor(myField, myValue)  
    150 { 
    151         //IE support 
    152         if (document.selection && !window.opera)  
    153         { 
    154                 myField.focus(); 
    155                 sel = window.opener.document.selection.createRange(); 
    156                 sel.text = myValue; 
    157         } 
    158         //MOZILLA/NETSCAPE/OPERA support 
    159         else if (myField.selectionStart || myField.selectionStart == '0')  
    160         { 
    161                 var startPos = myField.selectionStart; 
    162                 var endPos = myField.selectionEnd; 
    163                 myField.value = myField.value.substring(0, startPos) 
    164                 + myValue 
    165                 + myField.value.substring(endPos, myField.value.length); 
    166         } 
    167     else  
    168     { 
    169                 myField.value += myValue; 
    170         } 
    171 } 
    172  
    173 /** 
    174  * Insert an image to its correct place in the editor 
    175  * TODO: Add support for Markdown areas 
    176  */ 
    177 function insertImage(objId)  
    178 { 
    179     // Generate the HTML needed to be inserted 
    180         imagehtml=makeHtmlForInsertion(objId); 
    181  
    182         // Insert the HTML into TinyMCE 
    183     window.opener.tinyMCE.execCommand("mceInsertContent", true, imagehtml); 
    184      
    185     // Close the popup 
    186         //window.close(); 
    187 } 
    188  
    189 /** 
    190  * Generate the HTML required for image insertion based on its type 
    191  */ 
    192 function makeHtmlForInsertion(objId) 
    193 {        
    194         var iminfo = imagepopup_images[objId]; 
    195         var html_code = ''; 
    196  
    197         switch (iminfo['type'])  
    198         { 
    199                  
    200                 case "attachment": 
    201                 html_code = '<a href="' + iminfo['url'] + '" >' + iminfo['title'] + '</a>'; 
    202                  
    203                 break; 
    204                  
    205                 case "image": 
    206                 default: 
    207                 html_code = '<img src="' + iminfo['url'] + '" alt="' + 
    208                                             iminfo['title'] + '" title="' + 
    209                                             iminfo['title'] + '"/>'; 
    210                 break; 
    211         } 
    212          
    213         return html_code; 
    214 } 
    215  
    216 function imagePopupConvertResultsForAddition() 
    217 { 
    218     resultRows = document.getElementsByClassName('midcom_helper_imagepopup_search_result_item'); 
    219     if (resultRows) 
    220     { 
    221         for (i = 0; i < resultRows.length; i++)  
    222         { 
    223             itemGuid = resultRows[i].getAttribute('title'); 
    224             itemType = resultRows[i].getAttribute('rel'); 
    225             if (itemGuid) 
    226             { 
    227                 var links = imageRows[i].getElementsByTagName('a'); 
    228                 var imageUrl = ''; 
    229                 for (var li = 0; li < links.length; li++) 
    230                 { 
    231                     if (   Element.hasClassName(links[li], 'download') 
    232                         && imageUrl == '') 
    233                     { 
    234                         imageUrl = links[li].getAttribute('href'); 
    235                     } 
    236                 } 
    237                  
    238                 item = new Array(); 
    239                 item['guid'] = itemGuid; 
    240                 item['type'] = itemType; 
    241                                  
    242                                 informationBlocks = resultRows[i].getElementsByTagName('span'); 
    243                 if (!informationBlocks) 
    244                 { 
    245                     alert("No metadata information available for object "+item['guid']+"!"); 
    246                 } 
    247  
    248                                 for (ii = 0; ii < informationBlocks.length; ii++) 
    249                                 { 
    250                                         informationTitle = informationBlocks[ii].getAttribute('title'); 
    251                                         item[informationTitle] = informationBlocks[ii].innerHTML; 
    252                                 } 
    253  
    254                 imageLinks = resultRows[i].getElementsByTagName('a'); 
    255  
    256                 // Tweak the image links 
    257                 for (iii = 0; iii < imageLinks.length; iii++)  
    258                 { 
    259                     imageLinks[iii].href = 'javascript:insertImage("' + itemGuid + '");'; 
    260                     imageLinks[iii].target = ''; 
    261                     imageLinks[iii].title = 'Click to insert'; 
    262                 } 
    263                  
    264                 // Populate image to the image info Array 
    265                 imagepopup_images[itemGuid] = new Array(); 
    266                 imagepopup_images[itemGuid]['title'] = item['title'] == undefined ? item['name'] : item['title']; 
    267                 imagepopup_images[itemGuid]['name'] = item['name']; 
    268                 imagepopup_images[itemGuid]['type'] = itemType; 
    269                 imagepopup_images[itemGuid]['url'] = imageUrl; 
    270             } 
    271         } 
    272     } 
    273 } 
     87    }); 
     88})(jQuery);