showBarAndButtons.html

<HTML>

<HEAD>

<script>var dFrameFilePath = '../../../'</script>

<script language="Javascript" src="../../../lib/dFrameAPI.js"></script>

 

<script language="Javascript">

     //Style

     DFrameAPI.include('styles/blue/styleBlue.js')         

    

     filePathForIcons = '../../../Styles/blue/'

     //Global

     var baseAll, dFrameForPage

    

     DFrameAPI.preLoadImagesForButtonImage('Previous', [filePathForIcons, 'A'], 'previous.gif', 'previousOver.gif', 'previous.gif', 'previousOver.gif')

     DFrameAPI.preLoadImagesForButtonImage('Next',[filePathForIcons, 'A'], 'next.gif', 'nextOver.gif', 'next.gif', 'nextOver.gif')

    

    

     DFrameAPI.onLoad = function(){   

             

          baseAll = new DFrame([10, 10, 90, 90], 'showBarAndButtons.html', dFrameStyle)

 

          var txt = 'This example uses <br>- 1 BarLayer with 1 Button <br>- 1 BarLayer with 1 Button and 2 ButtonImages.'

          txt += '<br>One or the other of the BarLayers will be shown with, for Document in list,<br> the correct set of arrows.'

          txt += '<br>The selection is made by the setBarLayer function called after each<br>document is loaded.'

          txt += '<br>BarLayers are stored in a floating and resizable Bar (black borders).'

          baseAll.addText([10, 25], txt)

 

          baseAll.addButton('Document not in list', 'showPage("NoList")')

          baseAll.addButton('Document in list', 'showPage("List")')

         

          //As all those BarLayers and Buttons have to be handled they are stored as "properties" of baseAll.

          baseAll.floatingBar = baseAll.addBar(['10', '15', 0, 0], 'Tool Bar')

          baseAll.floatingBar.setAutoWidth('CONTENT')

          baseAll.floatingBar.setAutoHeight('CONTENT')

          baseAll.floatingBar.setBordersColor('black')

          baseAll.floatingBar.setTitleBar(true)

          baseAll.floatingBar.setDragEnabled(true)

         

          baseAll.floatingBar.show(false)             

    

          baseAll.barLayerNoList = baseAll.floatingBar.addBarLayer()

          baseAll.barLayerNoList.addButton('Close', 'closeDFrameForPage()')

 

          baseAll.barLayerList = baseAll.floatingBar.addBarLayer()

          baseAll.barLayerList.previousPage = baseAll.barLayerList.addButtonImage('Previous', 'showPageList("PREV")')

          baseAll.barLayerList.addButton('Close', 'closeDFrameForPage()')

          baseAll.barLayerList.nextPage = baseAll.barLayerList.addButtonImage('Next', 'showPageList("NEXT")')                 

 

          baseAll.show()

     }

     function showPage(param){          

          //Show a page when one of the 2 Buttons of baseAll are selected

          if (!dFrameForPage) {

              dFrameForPage = new DFrame([10, 25, 90, 90], 'page', dFrameStyle, baseAll)

                  

              var list = new Array

              list[0] = 'page1.html'

              list[1] = 'page2.html'

              list[2] = 'page3.html'

              dFrameForPage.list = list

          }

          if (param == 'NoList') dFrameForPage.setURL('./showBarAndButtons/somePage.html')

          else dFrameForPage.setURL('./showBarAndButtons/page1.html')

          setBarLayer()

     }   

    

     function showPageList(param) {

          //Actions of arrow Buttons

          if (dFrameForPage.list) {

              dFrameURL = dFrameForPage.getURL()

              found = -1

              for (var i = 0 ; i < dFrameForPage.list.length ; i ++) {

                   if (dFrameURL.indexOf(dFrameForPage.list[i]) != -1) {

                               found = i

                               break;

                   }

              }

              if (found != -1) {

                   if (param == 'PREV') found -= 1

                   if (param == 'NEXT') found += 1

                   //Should be impossible but check anyway

                   found = found < 0 ? 0 : found

                   found = found > dFrameForPage.list.length-1 ? dFrameForPage.list.length-1 : found

                  

                   dFrameForPage.setURL('./showBarAndButtons/' + dFrameForPage.list[found])

                   setBarLayer()

              }               

          }

     }   

    

     function setBarLayer() {

          //Purpose:

          //   If somePage.html in dFrameForPage: Show the barLayer with the 'Close' Button

          //   If pageX.html in dFrameForPage: Show the barLayer with arrows Buttons

 

          found = -1                  

          var dFrameURL = dFrameForPage.getURL()      

          //Check current URL with the list of pages of the list                  

          for (var i = 0 ; i < dFrameForPage.list.length ; i ++) {

              if (dFrameURL.indexOf(dFrameForPage.list[i]) != -1) {

                   found = i

                   break;

              }

          }        

         

          //found = -1 or the page number

          if (found != -1) {

              //found a page, show the correct arrow Button(s)                                                                   

              if (found > 0) baseAll.barLayerList.previousPage.show(true)

              else baseAll.barLayerList.previousPage.show(false)                          

             

              if (found < dFrameForPage.list.length-1) baseAll.barLayerList.nextPage.show(true)

              else baseAll.barLayerList.nextPage.show(false)

             

              baseAll.barLayerList.show(true)                   

              baseAll.barLayerNoList.show(false)                                     

          } else {

              baseAll.barLayerList.show(false)                 

              baseAll.barLayerNoList.show(true)                                                                                       

          }

          baseAll.floatingBar.show(true)

     }

    

     function closeDFrameForPage() {

          dFrameForPage.closeFrame()

          baseAll.floatingBar.show(false)

     }

    

</script>

</HEAD>

</HTML>