Changeset 13844 for trunk/themes


Ignore:
Timestamp:
Apr 1, 2012, 3:48:08 PM (12 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.