Changeset 13844


Ignore:
Timestamp:
04/01/12 15:48:08 (8 years ago)
Author:
mistic100
Message:

feature 2588: use jQuery to toggle derivatives and sort boxes + prevent boxes to overflow the page

Location:
trunk/themes/default/template
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/themes/default/template/index.tpl

    r13788 r13844  
    55        <ul class="categoryActions"> 
    66{if !empty($image_orders)} 
    7                 <li>{strip}<a href="javascript:toggleSortOrderBox()" id="sortOrderLink" title="{'Sort order'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> 
     7                <li>{strip}<a id="sortOrderLink" title="{'Sort order'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> 
    88                        <span class="pwg-icon pwg-icon-sort">&nbsp;</span><span class="pwg-button-text">{'Sort order'|@translate}</span> 
    99                </a> 
    10                 <div id="sortOrderBox" class="switchBox" style="display:none" onclick="toggleSortOrderBox()" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleSortOrderBox(1)"> 
     10                <div id="sortOrderBox" class="switchBox" style="display:none"> 
    1111                        <div class="switchBoxTitle">{'Sort order'|@translate}</div> 
    1212                        {foreach from=$image_orders item=image_order name=loop}{if !$smarty.foreach.loop.first}<br>{/if} 
     
    1919                </div> 
    2020                {footer_script}{literal} 
    21 function toggleSortOrderBox(forceHide) { 
    22         var elt = document.getElementById("sortOrderBox"), 
    23                 ePos = document.getElementById("sortOrderLink"); 
    24         if (!forceHide && elt.style.display==="none") { 
    25                 elt.style.left = ePos.offsetLeft+"px"; 
    26                 elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px"; 
    27                 elt.style.display=""; 
    28         } 
    29         else 
    30                 elt.style.display="none"; 
    31 } 
     21$(document).ready(function() { 
     22  $("#sortOrderBox").css({'top':0,'left':0}); 
     23  var sortOrderBox_width = $("#sortOrderBox").outerWidth(true); 
     24  var sortOrderBox_height = $("#sortOrderBox").outerHeight(true); 
     25   
     26  $("#sortOrderLink").click(function() { 
     27    $("#sortOrderBox").toggle(); 
     28     
     29    if ($(this).offset().left + sortOrderBox_width > $(window).width()) { 
     30      $("#sortOrderBox").css("left", $(window).width() - sortOrderBox_width - 5); 
     31    } else { 
     32      $("#sortOrderBox").css("left", $(this).offset().left); 
     33    } 
     34    $("#sortOrderBox").css("top", $(this).offset().top + $(this).outerHeight(true)); 
     35  }); 
     36   
     37  $("#sortOrderBox").bind("mouseleave", function() { 
     38    $(this).hide(); 
     39  }); 
     40}); 
    3241                {/literal}{/footer_script} 
    3342                {/strip}</li> 
     
    3544 
    3645{if !empty($image_derivatives)} 
    37                 <li>{strip}<a href="javascript:toggleImageDerivativesBox()" id="derivativeChooseLink" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> 
     46                <li>{strip}<a id="derivativeSwitchLink" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> 
    3847                        <span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span> 
    3948                </a> 
    40                 <div id="derivativeSwitchBox" class="switchBox" style="display:none" onclick="toggleImageDerivativesBox()" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleImageDerivativesBox(1)"> 
     49                <div id="derivativeSwitchBox" class="switchBox" style="display:none"> 
    4150                        <div class="switchBoxTitle">{'Photo sizes'|@translate}</div> 
    4251                        {foreach from=$image_derivatives item=image_derivative name=loop}{if !$smarty.foreach.loop.first}<br>{/if} 
     
    4958                </div> 
    5059                {footer_script}{literal} 
    51 function toggleImageDerivativesBox(forceHide) { 
    52         var elt = document.getElementById("derivativeSwitchBox"), 
    53                 ePos = document.getElementById("derivativeChooseLink"); 
    54         if (!forceHide && elt.style.display==="none") { 
    55                 elt.style.left = (ePos.offsetLeft-25)+"px"; 
    56                 elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px"; 
    57                 elt.style.display=""; 
    58         } 
    59         else 
    60                 elt.style.display="none"; 
    61 } 
     60$(document).ready(function() { 
     61  $("#derivativeSwitchBox").css({'top':0,'left':0}); 
     62  var derivativeSwitchBox_width = $("#derivativeSwitchBox").outerWidth(true); 
     63  var derivativeSwitchBox_height = $("#derivativeSwitchBox").outerHeight(true); 
     64   
     65  $("#derivativeSwitchLink").click(function() { 
     66    $("#derivativeSwitchBox").toggle(); 
     67     
     68    if ($(this).offset().left + derivativeSwitchBox_width > $(window).width()) { 
     69      $("#derivativeSwitchBox").css("left", $(window).width() - derivativeSwitchBox_width - 5); 
     70    } else { 
     71      $("#derivativeSwitchBox").css("left", $(this).offset().left); 
     72    } 
     73    $("#derivativeSwitchBox").css("top", $(this).offset().top + $(this).outerHeight(true)); 
     74  }); 
     75   
     76  $("#derivativeSwitchBox").bind("mouseleave", function() { 
     77    $(this).hide(); 
     78  }); 
     79}); 
    6280                {/literal}{/footer_script} 
    6381                {/strip}</li> 
  • trunk/themes/default/template/picture.tpl

    r13805 r13844  
    3636} 
    3737 
    38 function toggleDerivativeSwitchBox() 
    39 { 
    40         var elt = document.getElementById("derivativeSwitchBox"), 
    41                 ePos = document.getElementById("derivativeSwitchLink"); 
    42         if (elt.style.display==="none") 
    43         { 
    44                 elt.style.left = (ePos.offsetLeft)+"px"; 
    45                 elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px"; 
    46                 elt.style.display=""; 
    47         } 
    48         else 
    49                 elt.style.display="none"; 
    50 } 
    51 jQuery("#derivativeSwitchBox").on('mouseleave click', function() { 
    52         this.style.display="none"; 
    53 } 
    54 ); 
     38$(document).ready(function() { 
     39  $("#derivativeSwitchBox").css({'top':0,'left':0}); 
     40  var derivativeSwitchBox_width = $("#derivativeSwitchBox").outerWidth(true); 
     41  var derivativeSwitchBox_height = $("#derivativeSwitchBox").outerHeight(true); 
     42   
     43  $("#derivativeSwitchLink").click(function() { 
     44    $("#derivativeSwitchBox").toggle(); 
     45     
     46    if ($(this).offset().left + derivativeSwitchBox_width > $(window).width()) { 
     47      $("#derivativeSwitchBox").css("left", $(window).width() - derivativeSwitchBox_width - 5); 
     48    } else { 
     49      $("#derivativeSwitchBox").css("left", $(this).offset().left); 
     50    } 
     51    $("#derivativeSwitchBox").css("top", $(this).offset().top + $(this).outerHeight(true)); 
     52  }); 
     53   
     54  $("#derivativeSwitchBox").bind("mouseleave click", function() { 
     55    $(this).hide(); 
     56  }); 
     57}); 
    5558{/literal}{/footer_script} 
    56 {strip}<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> 
    57 <span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span></a> 
     59{strip}<a id="derivativeSwitchLink" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow"> 
     60  <span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span> 
     61</a> 
    5862<div id="derivativeSwitchBox" class="switchBox" style="display:none"> 
    59 <div class="switchBoxTitle">{'Photo sizes'|@translate}</div> 
    60 {foreach from=$current.unique_derivatives item=derivative key=derivative_type} 
    61 <span class="switchCheck" id="derivativeChecked{$derivative_type}"{if $derivative->get_type() ne $current.selected_derivative->get_type()} style="visibility:hidden"{/if}>&#x2714; </span> 
    62 <a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}')"> 
    63         {$derivative->get_type()|@translate}<span class="derivativeSizeDetails"> ({$derivative->get_size_hr()})</span> 
    64 </a><br> 
    65 {/foreach} 
    66 {if isset($U_ORIGINAL)} 
    67 <a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" rel="nofollow">{'Original'|@translate}</a> 
    68 {/if} 
    69 </div> 
    70 {/strip}{/if} 
    71  
     63  <div class="switchBoxTitle">{'Photo sizes'|@translate}</div> 
     64  {foreach from=$current.unique_derivatives item=derivative key=derivative_type} 
     65  <span class="switchCheck" id="derivativeChecked{$derivative_type}"{if $derivative->get_type() ne $current.selected_derivative->get_type()} style="visibility:hidden"{/if}>&#x2714; </span> 
     66  <a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}')"> 
     67    {$derivative->get_type()|@translate}<span class="derivativeSizeDetails"> ({$derivative->get_size_hr()})</span> 
     68  </a><br> 
     69  {/foreach} 
     70  {if isset($U_ORIGINAL)} 
     71  <a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" rel="nofollow">{'Original'|@translate}</a> 
     72  {/if} 
     73</div> 
     74{/strip} 
     75{/if} 
    7276 
    7377{strip}{if isset($U_SLIDESHOW_START)} 
Note: See TracChangeset for help on using the changeset viewer.