Persönliche Werkzeuge

Vorlage:SH

Aus BogenWiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
 
(Der Versionsvergleich bezieht 34 dazwischenliegende Versionen mit ein.)
Zeile 1: Zeile 1:
-
<html><img id="</html>{{{SHButtonID}}}<html>" src="" onclick="ShowHideElem('</html>{{{SHButtonID}}}<html>','</html>{{{SHElemID}}}<html>','toggle','ShowT','HideT')" style="cursor:pointer">
+
<noinclude>
-
<script type="text/javascript">ShowHideElem('</html>{{{SHButtonID}}}<html>','</html>{{{SHElemID}}}<html>','</html>{{{Default|show}}}<html>','ShowT','HideT')</script></html>
+
{{SH|Cmd=InitJS}}
 +
Zeigen/Verbergen: {{SH|Cmd=CreateImg|ImgID=SHTestImg|ElemID=SHTestElem}} <br>
 +
<div id="SHTestElem" style="display:inline-block;border:1px silver solid;">
 +
dies ist ein Test ...<br>
 +
dies ist ein Test ...<br>
 +
dies ist ein Test ...<br>
 +
dies ist ein Test ...
 +
</div>
 +
{{SH|Cmd=InitElem|ImgID=SHTestImg|ElemID=SHTestElem|Default=show}}
 +
</noinclude><includeonly>
 +
{{#switch:{{{Cmd}}}
 +
|InitJS=<html><script type="text/javascript">
 +
  function ShowHideElem(sSHButtonID,sSHElemID,sCmd='toggle',sFNShowImg='ShowT',sFNHideImg='HideT')
 +
  {
 +
    var eSHElem = document.getElementById(sSHElemID);
 +
    var eSHButton = document.getElementById(sSHButtonID);
 +
    if ((sCmd == 'show') || (sCmd+eSHElem.style.display == 'togglenone')) {
 +
      eSHElem.style.display = 'inline-block';
 +
      eSHButton.src = '/bogenwiki/images/Symbol_'+sFNHideImg+'.png';
 +
    } else {
 +
      eSHElem.style.display = 'none';
 +
      eSHButton.src = '/bogenwiki/images/Symbol_'+sFNShowImg+'.png';
 +
    }
 +
  }
 +
  function CountSHBD(sSHID)
 +
  {
 +
    console.log('CountSHBD('+sSHID+')');
 +
    let nRowsShown = 0;
 +
    let nRowsAvail = 0;
 +
    let nRowsTotal = 0;
 +
    // count display state of rows with objects
 +
    let sNodeSel = 'tr[id^=SH-objrow-'+sSHID+']';
 +
    let aNodes = document.querySelectorAll(sNodeSel);
 +
    nRowsAvail = aNodes.length;
 +
    nRowsTotal = aNodes.length;
 +
    for (var i = 0; i < aNodes.length; i++)
 +
      nRowsShown = (aNodes[i].style.display=='table-row' ? nRowsShown+1 : nRowsShown);
 +
    // count display state of empty rows
 +
    sNodeSel = 'tr[id^=SH-emptyrow-'+sSHID+']';
 +
    aNodes = document.querySelectorAll(sNodeSel);
 +
    nRowsTotal += aNodes.length;
 +
    for (var i = 0; i < aNodes.length; i++)
 +
      nRowsShown = (aNodes[i].style.display=='table-row' ? nRowsShown+1 : nRowsShown);
 +
    console.log('[CountSHBD()]: Shown='+nRowsShown+', Avail='+nRowsAvail+', Total='+nRowsTotal);
 +
    return [nRowsShown,nRowsAvail,nRowsTotal];
 +
  }
 +
  function AddNodesSHBD(sSel,aNodes=[])
 +
  {
 +
    console.log('AddNodesSHBD("'+sSel+'",'+aNodes.length+')');
 +
    let aAddNodes = document.querySelectorAll(sSel);
 +
    for (var i = 0; i < aAddNodes.length; i++) { aNodes.push(aAddNodes[i]); }
 +
    console.log('[AddNodesSHBD()]: aNodes[].length='+aNodes.length);
 +
    return aNodes;
 +
  }
 +
  function SetBtnStateSHBD(sBtnID,sState)
 +
  {
 +
    console.log('SetBtnStateSHBD('+sBtnID+','+sState+')');
 +
    let sNewImage = '???';
 +
    let sNewTitle = '???';
 +
    switch (sState) {
 +
    case 'hideall':  sNewImage = 'HideT';      sNewTitle = 'Alle verbergen'; break;
 +
    case 'showall':  sNewImage = 'ShowT';      sNewTitle = 'Alle anzeigen'; break;
 +
    case 'showavail': sNewImage = 'ShowMixedT'; sNewTitle = 'Alle vorhandenen anzeigen'; break;
 +
    }
 +
    console.log('[SetBtnStateSHBD()]: sNewImage='+sNewImage+', sNewTitle="'+sNewTitle+'"');
 +
    let eHeaderBtn = document.getElementById(sBtnID);
 +
    eHeaderBtn.src = '/bogenwiki/images/Symbol_'+sNewImage+'.png';
 +
    eHeaderBtn.title = sNewTitle;
 +
  }
 +
  function SetRowStateSHBD(sRowID,sState)
 +
  {
 +
    console.log('SetRowStateSHBD('+sRowID+','+sState+')');
 +
    sNewDisplayState = '???';
 +
    switch (sState) {
 +
    case 'showall':  sNewDisplayState = 'table-row'; break;
 +
    case 'showavail': sNewDisplayState = (sRowID.split('-')[1] == 'objrow' ? 'table-row' : 'none'); break;
 +
    case 'hideall':  sNewDisplayState = 'none'; break;
 +
    }
 +
    eRow = document.getElementById(sRowID);
 +
    console.log('[SetRowStateSHBD()]: sRowID='+sRowID+', '+eRow.style.display+' => '+sNewDisplayState);
 +
    eRow.style.display = sNewDisplayState;
 +
  }
 +
  function GetActAndNewStateSHBD(sSHID)
 +
  {
 +
    console.log('GetActAndNewStateSHBD(): sSHID="'+sSHID+'"');
 +
    // count shown rows, rows with available objects and total rows
 +
    let [nRowsShown,nRowsAvail,nRowsTotal] = CountSHBD(sSHID);
 +
    // State-/display-order: hideall => showavail => showall
 +
    // State showavail is skipped if all rows contain available objects
 +
    //                                            ActState    NewState
 +
    // nRowsShown == 0, nRowsAvail > 0 && < nRowsTotal: hideall  => showavail
 +
    // nRowsShown == 0, nRowsAvail ==      nRowsTotal: hideall  => showall
 +
    // nRowsShown ==    nRowsAvail > 0 && < nRowsTotal: showavail => showall
 +
    // nRowsShown ==    nRowsAvail ==      nRowsTotal: showall  => hideall
 +
    let sActState = '';
 +
    let sNewState = '';
 +
    if (nRowsShown == 0) {
 +
      sActState = 'hideall';
 +
      sNewState = (nRowsAvail > 0 ? (nRowsAvail < nRowsTotal ? 'showavail' : 'showall') : 'showall');
 +
    } else {
 +
      sActState = (nRowsAvail > 0 ? (nRowsAvail < nRowsTotal ? 'showavail' : 'showall') : 'showall');
 +
      sNewState = (nRowsShown < nRowsTotal ? 'showall' : 'hideall');
 +
    }
 +
    console.log('[GetActAndNewStateSHBD()]: sActState='+sActState+', sNewState="'+sNewState+'"');
 +
    return [sActState,sNewState];
 +
  }
 +
  function ShowHideBD(sSHID,sCmd)
 +
  {
 +
    console.log('ShowHideBD('+sSHID+','+sCmd+')');
 +
    let aNodesAll = [];
 +
    let sActState = '';
 +
    let sNewState = '';
 +
    switch (sCmd) {
 +
      case 'init':
 +
        break;
 +
      case 'showall':
 +
        break;
 +
      case 'showallavail':
 +
        break;
 +
      case 'hideall':
 +
        break;
 +
      case 'showgroup':
 +
        break;
 +
      case 'showgroupavail':
 +
        break;
 +
      case 'hidegroup':
 +
        break;
 +
      case 'toggleall':
 +
        // determine current state and new state
 +
        [sActState,sNewState] = GetActAndNewStateSHBD(sSHID)
 +
        // show/hide rows
 +
        aNodesAll = AddNodesSHBD('tr[id^=SH-objrow-'+sSHID+']')
 +
        aNodesAll = AddNodesSHBD('tr[id^=SH-emptyrow-'+sSHID+']',aNodesAll)
 +
        // update display state of the rows
 +
        for (let i = 0; i < aNodesAll.length; i++)
 +
          SetRowStateSHBD(aNodesAll[i].id,sNewState);
 +
        // update header button
 +
        [sActState,sNewState] = GetActAndNewStateSHBD(sSHID)
 +
        SetBtnStateSHBD('SH-headbtn-'+sSHID,sNewState);
 +
        // update group buttons
 +
        let aNodesGroup = AddNodesSHBD('tr[id^=SH-divrow-'+sSHID+']');
 +
        for (var i = 0; i < aNodesGroup.length; i++) {
 +
          let sSHGroupID = aNodesGroup[i].id.split('-')[2];
 +
          let [sGroupActState,sGroupNewState] = GetActAndNewStateSHBD(sSHGroupID)
 +
          SetBtnStateSHBD('SH-divbtn-'+sSHGroupID,sGroupNewState);
 +
        }
 +
        break;
 +
      case 'togglegroup':
 +
        [sActState,sNewState] = GetActAndNewStateSHBD(sSHID)
 +
        // show/hide rows
 +
        aNodesAll = AddNodesSHBD('tr[id^=SH-objrow-'+sSHID+']')
 +
        aNodesAll = AddNodesSHBD('tr[id^=SH-emptyrow-'+sSHID+']',aNodesAll)
 +
        // update display state of the rows
 +
        for (let i = 0; i < aNodesAll.length; i++) {
 +
          SetRowStateSHBD(aNodesAll[i].id,sNewState);
 +
        }
 +
        SetBtnStateSHBD('SH-divbtn-'+sSHID,sNewState);
 +
       
 +
        break;
 +
    }
 +
  }
 +
</script></html>
 +
|CreateImg=<html>
 +
  <img id="</html>{{{ImgID}}}<html>" src="" onclick="ShowHideElem('</html>{{{ImgID}}}<html>','</html>{{{ElemID}}}<html>','toggle','ShowT','HideT')" style="cursor:pointer" />
 +
</html>
 +
|InitElem=<html><script type="text/javascript">
 +
  ShowHideElem('</html>{{{ImgID}}}<html>','</html>{{{ElemID}}}<html>','</html>{{{Default|show}}}<html>','ShowT','HideT');
 +
</script></html>}}</includeonly>

Aktuelle Version vom 22:26, 2. Okt. 2026


Zeigen/Verbergen:

dies ist ein Test ...
dies ist ein Test ...
dies ist ein Test ...
dies ist ein Test ...

Von „https://www.nugman.info/bogenwiki/index.php?title=Vorlage:SH“