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>