Permalink
Browse files

added title bar support for BB10 issue #85

  • Loading branch information...
1 parent 29953fa commit dd2334a24f079fd5d223f0303adabc45e0dc1a23 Tim Neil committed May 18, 2012
View
2 CHANGELOG.md
@@ -13,6 +13,8 @@ Below you will find all the different changes that have been added since the fir
* HTML5 input fields now supported in a Label/Control container
* Added slider styling for BlackBerry 10
* Added progress indicators for BlackBerry 5/6/7/PlayBook/10
+* Supplying a back caption in a title bar no longer creates an action bar with a back button
+* Added title bar support to BB10
## Version 0.9.1
View
138 pkg/bbui-0.9.1.css
@@ -848,6 +848,144 @@ body, html {
}
/* =================================================
+ BB10 Title Bar
+ =================================================*/
+.bb-bb10-title-bar-hires {
+ height:132px;
+ position:absolute;
+ top:0px;
+ left:0px;
+ right:0px;
+ text-align:center;
+ padding-top:8px;
+ line-height:140px;
+ font-size: 26pt;
+ z-index:1000;
+}
+
+.bb-bb10-title-bar-lowres {
+ height:68px;
+ position:absolute;
+ top:0px;
+ left:0px;
+ right:0px;
+ text-align:center;
+ line-height:73px;
+ font-size: 16pt;
+ padding-top: 5px;
+ z-index:1000;
+}
+
+.bb-bb10-title-bar-dark
+{
+ background-color:#333333;
+ color:white;
+}
+
+.bb-bb10-title-bar-light
+{
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#F1F1F1), to(#D4D4D4));;
+ color:black;
+}
+
+.bb-bb10-titlebar-button-container-light
+{
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#BDBDBD), to(#D4D4D4));
+ color: black;
+ border-top-color: #A3A3A3;
+ border-bottom-color: #CECECE;
+ border-left-color: #C3C3C3;
+ border-right-color: #C4C4C4;
+}
+
+.bb-bb10-titlebar-button-container-dark
+{
+ background-color: #0B0B0B;
+ color: white;
+ border-color: #333333;
+}
+
+.bb-bb10-titlebar-button-container-hires
+{
+ position: absolute;
+ top: 0px;
+ border-width:4px;
+ border-style: solid;
+ border-radius:10px;
+ padding: 2px;
+ margin: 20px;
+}
+
+.bb-bb10-titlebar-button-container-lowres
+{
+ position: absolute;
+ top: 0px;
+ border-width:2px;
+ border-style: solid;
+ border-radius:4px;
+ padding: 1px;
+ margin: 7px;
+}
+
+.bb-bb10-titlebar-button {
+ border-style: solid;
+ text-align:center;
+ white-space:nowrap;
+ vertical-align: middle;
+ display: block;
+ background-clip: padding-box;
+}
+
+.bb-bb10-titlebar-button-light {
+ border-top-color: #B4B4B4;
+ border-left-color: #C2C2C2;
+ border-bottom-color: #B4B4B4;
+ border-right-color: #C8C8C8;
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD));
+}
+
+.bb-bb10-titlebar-button-dark {
+ border-color:#5C5C5C;
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#3F3F3F), to(#262626));
+}
+
+.bb-bb10-titlebar-button-disabled-dark {
+ border-color:#262626;
+ background-color: #262626;
+ color: #666666;
+
+}
+
+.bb-bb10-titlebar-button-disabled-light {
+ border-color: #D4D4D4;
+ background-color: #C1C1C1;
+ color: #838383;
+}
+
+.bb-bb10-titlebar-button-hires {
+ border-width:1px;
+ border-radius:5px;
+ line-height:75px;
+ height:75px;
+ padding-top:12px;
+ padding-left: 35px;
+ padding-right: 35px;
+ font-size:28pt;
+}
+
+.bb-bb10-titlebar-button-lowres {
+ border-width:1px;
+ border-radius:2px;
+ line-height:46px;
+ height:46px;
+ padding-top:5px;
+ padding-left: 15px;
+ padding-right: 15px;
+ font-size:16pt;
+}
+
+
+/* =================================================
PlayBook Title Bar
=================================================*/
.pb-title-bar {
View
233 pkg/bbui-0.9.1.js
@@ -2353,24 +2353,14 @@ bb.screen = {
scrollArea,
tempHolder = [],
childNode = null,
- j;
+ j,
+ height = (bb.device.isPlayBook) ? 73 : 140;
// Figure out what to do with the title bar
if (titleBar.length > 0) {
titleBar = titleBar[0];
- // See if they want a back button
- if (titleBar.hasAttribute('data-bb-back-caption')) {
- if (actionBar.length == 0) {
- // Since there's no way to get back, we'll add an action bar
- var newBackBar = document.createElement('div');
- newBackBar.setAttribute('data-bb-type','action-bar');
- newBackBar.setAttribute('data-bb-back-caption',titleBar.getAttribute('data-bb-back-caption'));
- outerElement.appendChild(newBackBar);
- actionBar = [newBackBar];
- }
- }
- // TODO: Add title bar support
- outerElement.removeChild(titleBar);
+ } else {
+ titleBar = null;
}
// Assign our action bar
@@ -2390,12 +2380,12 @@ bb.screen = {
// Inner Scroll Area
scrollArea = document.createElement('div');
- outerScrollArea.appendChild(scrollArea);
+ outerScrollArea.appendChild(scrollArea);
// Copy all nodes in the screen that are not the action bar
for (j = 0; j < outerElement.childNodes.length - 1; j++) {
childNode = outerElement.childNodes[j];
- if ((childNode != actionBar) && (childNode != menuBar)) {
+ if ((childNode != actionBar) && (childNode != menuBar) && (childNode != titleBar)) {
tempHolder.push(childNode);
}
}
@@ -2404,17 +2394,26 @@ bb.screen = {
scrollArea.appendChild(tempHolder[j]);
}
+ // Set our outer scroll area dimensions
+ if (titleBar && actionBar) {
+ outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:'+height+'px;top:'+height+'px;left:0px;right:0px;');
+ } else if (titleBar) {
+ outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:'+height+'px;left:0px;right:0px;');
+ } else if (actionBar) {
+ outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:'+height+'px;top:0px;left:0px;right:0px;');
+ } else {
+ outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:0px;left:0px;right:0px;');
+ }
+
+ // Apply any title bar styling
+ if (titleBar) {
+ bb.titleBar.apply(titleBar);
+ }
+
+ // Apply any action Bar styling
if (actionBar) {
- if (bb.device.isPlayBook) {
- outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:73px;top:0px;left:0px;right:0px;');
- } else {
- outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:140px;top:0px;left:0px;right:0px;');
- }
bb.actionBar.apply(actionBar,outerElement);
}
- else {
- outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:0px;left:0px;right:0px;');
- }
// Assign our context
if (context.length > 0) {
@@ -2472,18 +2471,7 @@ bb.screen = {
if (titleBar) {
outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:55px;left:0px;right:0px;');
- titleBar.setAttribute('class', 'pb-title-bar');
- titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
- if (titleBar.hasAttribute('data-bb-back-caption')) {
- var button = document.createElement('div'),
- buttonInner = document.createElement('div');
- button.setAttribute('class', 'pb-title-bar-back');
- button.onclick = bb.popScreen;
- buttonInner.setAttribute('class','pb-title-bar-back-inner');
- buttonInner.innerHTML = titleBar.getAttribute('data-bb-back-caption');
- button.appendChild(buttonInner);
- titleBar.appendChild(button);
- }
+ bb.titleBar.apply(titleBar);
}
else {
outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:0px;left:0px;right:0px;');
@@ -2504,20 +2492,9 @@ bb.screen = {
context[j].style.display = 'none';
}
-
if (titleBar.length > 0) {
titleBar = titleBar[0];
- if (titleBar.hasAttribute('data-bb-caption')) {
- var outerStyle = outerElement.getAttribute('style');
- if (bb.device.isHiRes) {
- titleBar.setAttribute('class', 'bb-hires-screen-title');
- outerElement.setAttribute('style', outerStyle + ';padding-top:33px');
- } else {
- titleBar.setAttribute('class', 'bb-lowres-screen-title');
- outerElement.setAttribute('style', outerStyle + ';padding-top:27px');
- }
- titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
- }
+ bb.titleBar.apply(titleBar);
}
}
}
@@ -2879,6 +2856,166 @@ bb.progress = {
}
};
+
+bb.titleBar = {
+
+ apply: function(titleBar) {
+
+ if (bb.device.isBB10) {
+ var res = (bb.device.isPlayBook) ? 'lowres' : 'hires',
+ button;
+ titleBar.setAttribute('class', 'bb-bb10-title-bar-'+res +' bb-bb10-title-bar-' + bb.actionBar.color);
+ titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
+ // Get our back button if provided
+ if (titleBar.hasAttribute('data-bb-back-caption')) {
+ button = document.createElement('div');
+ button.innerHTML = titleBar.getAttribute('data-bb-back-caption');
+ titleBar.appendChild(button);
+ titleBar.backButton = button;
+ button.onclick = bb.popScreen;
+ bb.titleBar.styleBB10Button(button);
+ button.style.left = '0px';
+ }
+ // Get our action button if provided
+ if (titleBar.hasAttribute('data-bb-action-caption')) {
+ button = document.createElement('div');
+ button.innerHTML = titleBar.getAttribute('data-bb-action-caption');
+ if (titleBar.hasAttribute('onactionclick')) {
+ button.onactionclick = titleBar.getAttribute('onactionclick');
+ button.onclick = function() {
+ eval(this.onactionclick);
+ };
+ } else if (titleBar.onactionclick) {
+ button.onclick = onactionclick;
+ }
+ //button.onclick = bb.popScreen;
+ bb.titleBar.styleBB10Button(button);
+ button.style.right = '0px';
+ titleBar.appendChild(button);
+ titleBar.actionButton = button;
+ }
+ // Create an adjustment function for the widths
+ if (titleBar.actionButton && titleBar.backButton) {
+
+ titleBar.evenButtonWidths = function() {
+ var backWidth = parseInt(window.getComputedStyle(this.backButton).width),
+ actionWidth = parseInt(window.getComputedStyle(this.actionButton).width);
+ if (backWidth > actionWidth) {
+ this.actionButton.style.width = backWidth +'px';
+ } else {
+ this.backButton.style.width = actionWidth +'px';
+ }
+ };
+ titleBar.evenButtonWidths = titleBar.evenButtonWidths.bind(titleBar);
+ window.setTimeout(titleBar.evenButtonWidths,0);
+ }
+ } else if (bb.device.isPlayBook) {
+ titleBar.setAttribute('class', 'pb-title-bar');
+ titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
+ if (titleBar.hasAttribute('data-bb-back-caption')) {
+ var button = document.createElement('div'),
+ buttonInner = document.createElement('div');
+ button.setAttribute('class', 'pb-title-bar-back');
+ button.onclick = bb.popScreen;
+ buttonInner.setAttribute('class','pb-title-bar-back-inner');
+ buttonInner.innerHTML = titleBar.getAttribute('data-bb-back-caption');
+ button.appendChild(buttonInner);
+ titleBar.appendChild(button);
+ }
+ } else {
+ if (titleBar.hasAttribute('data-bb-caption')) {
+ var outerStyle = outerElement.getAttribute('style');
+ if (bb.device.isHiRes) {
+ titleBar.setAttribute('class', 'bb-hires-screen-title');
+ outerElement.setAttribute('style', outerStyle + ';padding-top:33px');
+ } else {
+ titleBar.setAttribute('class', 'bb-lowres-screen-title');
+ outerElement.setAttribute('style', outerStyle + ';padding-top:27px');
+ }
+ titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
+ }
+ }
+ },
+
+ styleBB10Button: function(outerElement) {
+ var res = (bb.device.isPlayBook) ? 'lowres' : 'hires',
+ //disabledStyle,
+ innerElement = document.createElement('div');
+ //disabled = outerElement.hasAttribute('data-bb-disabled'),
+ normal = 'bb-bb10-titlebar-button bb-bb10-titlebar-button-'+res,
+ highlight = 'bb-bb10-titlebar-button bb-bb10-titlebar-button-'+res+' bb10-button-highlight',
+ outerNormal = 'bb-bb10-titlebar-button-container-'+res+' bb-bb10-titlebar-button-container-' + bb.actionBar.color;
+
+ //outerElement.enabled = !disabled;
+ outerElement.enabled = true;
+ innerElement.innerHTML = outerElement.innerHTML;
+ outerElement.innerHTML = '';
+ outerElement.appendChild(innerElement);
+
+ // Set our styles
+ //disabledStyle = normal + ' bb-bb10-button-disabled-'+bb.screen.controlColor;
+ normal = normal + ' bb-bb10-titlebar-button-' + bb.actionBar.color;
+
+ /*if (disabled) {
+ outerElement.removeAttribute('data-bb-disabled');
+ innerElement.setAttribute('class',disabledStyle);
+ } else {*/
+ innerElement.setAttribute('class',normal);
+ //}
+ // Set our variables on the elements
+ outerElement.setAttribute('class',outerNormal);
+ outerElement.outerNormal = outerNormal;
+ outerElement.innerElement = innerElement;
+ innerElement.normal = normal;
+ innerElement.highlight = highlight;
+ //innerElement.disabledStyle = disabledStyle;
+ //if (!disabled) {
+ outerElement.ontouchstart = function() {
+ this.innerElement.setAttribute('class', this.innerElement.highlight);
+
+ };
+ outerElement.ontouchend = function() {
+ this.innerElement.setAttribute('class', this.innerElement.normal);
+ };
+ //}
+
+ // Trap the click and call it only if the button is enabled
+ outerElement.trappedClick = outerElement.onclick;
+ outerElement.onclick = undefined;
+ if (outerElement.trappedClick !== null) {
+ outerElement.addEventListener('click',function (e) {
+ if (this.enabled) {
+ this.trappedClick();
+ }
+ },false);
+ }
+
+ // Assign our enable function
+ /* outerElement.enable = function(){
+ if (this.enabled) return;
+ this.innerElement.setAttribute('class', this.innerElement.normal);
+ this.ontouchstart = function() {
+ this.innerElement.setAttribute('class', this.innerElement.highlight);
+
+ };
+ this.ontouchend = function() {
+ this.innerElement.setAttribute('class', this.innerElement.normal);
+ };
+ this.enabled = true;
+ };
+ // Assign our disable function
+ outerElement.disable = function(){
+ if (!this.enabled) return;
+ this.innerElement.setAttribute('class', this.innerElement.disabledStyle);
+ this.ontouchstart = null;
+ this.ontouchend = null;
+ this.enabled = false;
+ };*/
+
+
+ }
+}
+
// Apply styling to an action bar
bb.actionBar = {
View
1 samples/actionBar.htm
@@ -15,7 +15,6 @@
* limitations under the License.
-->
<div data-bb-type="screen" data-bb-effect="fade">
- <div data-bb-type="title" data-bb-caption="Action Bar Example" data-bb-back-caption="Menu"></div>
<div data-bb-type="round-panel">
<div data-bb-type="panel-header">General</div>
<div>Action bars allow you to create a set of buttons/tabs on a fixed toolbar at the bottom of the screen. You can add a &quot;Back&quot; button by assigning
View
1 samples/arrowList.htm
@@ -31,5 +31,6 @@
<div data-bb-type="item" onclick="alert('click')">Happy</div>
</div>
</div>
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
1 samples/bbmBubbles.htm
@@ -37,5 +37,6 @@
<div data-bb-type="item" data-bb-img="images/bbmBubbles/bullet.png">Cool!! I'll have to check that out</div>
</div>
</div>
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
138 samples/bbui-0.9.1.css
@@ -848,6 +848,144 @@ body, html {
}
/* =================================================
+ BB10 Title Bar
+ =================================================*/
+.bb-bb10-title-bar-hires {
+ height:132px;
+ position:absolute;
+ top:0px;
+ left:0px;
+ right:0px;
+ text-align:center;
+ padding-top:8px;
+ line-height:140px;
+ font-size: 26pt;
+ z-index:1000;
+}
+
+.bb-bb10-title-bar-lowres {
+ height:68px;
+ position:absolute;
+ top:0px;
+ left:0px;
+ right:0px;
+ text-align:center;
+ line-height:73px;
+ font-size: 16pt;
+ padding-top: 5px;
+ z-index:1000;
+}
+
+.bb-bb10-title-bar-dark
+{
+ background-color:#333333;
+ color:white;
+}
+
+.bb-bb10-title-bar-light
+{
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#F1F1F1), to(#D4D4D4));;
+ color:black;
+}
+
+.bb-bb10-titlebar-button-container-light
+{
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#BDBDBD), to(#D4D4D4));
+ color: black;
+ border-top-color: #A3A3A3;
+ border-bottom-color: #CECECE;
+ border-left-color: #C3C3C3;
+ border-right-color: #C4C4C4;
+}
+
+.bb-bb10-titlebar-button-container-dark
+{
+ background-color: #0B0B0B;
+ color: white;
+ border-color: #333333;
+}
+
+.bb-bb10-titlebar-button-container-hires
+{
+ position: absolute;
+ top: 0px;
+ border-width:4px;
+ border-style: solid;
+ border-radius:10px;
+ padding: 2px;
+ margin: 20px;
+}
+
+.bb-bb10-titlebar-button-container-lowres
+{
+ position: absolute;
+ top: 0px;
+ border-width:2px;
+ border-style: solid;
+ border-radius:4px;
+ padding: 1px;
+ margin: 7px;
+}
+
+.bb-bb10-titlebar-button {
+ border-style: solid;
+ text-align:center;
+ white-space:nowrap;
+ vertical-align: middle;
+ display: block;
+ background-clip: padding-box;
+}
+
+.bb-bb10-titlebar-button-light {
+ border-top-color: #B4B4B4;
+ border-left-color: #C2C2C2;
+ border-bottom-color: #B4B4B4;
+ border-right-color: #C8C8C8;
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD));
+}
+
+.bb-bb10-titlebar-button-dark {
+ border-color:#5C5C5C;
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#3F3F3F), to(#262626));
+}
+
+.bb-bb10-titlebar-button-disabled-dark {
+ border-color:#262626;
+ background-color: #262626;
+ color: #666666;
+
+}
+
+.bb-bb10-titlebar-button-disabled-light {
+ border-color: #D4D4D4;
+ background-color: #C1C1C1;
+ color: #838383;
+}
+
+.bb-bb10-titlebar-button-hires {
+ border-width:1px;
+ border-radius:5px;
+ line-height:75px;
+ height:75px;
+ padding-top:12px;
+ padding-left: 35px;
+ padding-right: 35px;
+ font-size:28pt;
+}
+
+.bb-bb10-titlebar-button-lowres {
+ border-width:1px;
+ border-radius:2px;
+ line-height:46px;
+ height:46px;
+ padding-top:5px;
+ padding-left: 15px;
+ padding-right: 15px;
+ font-size:16pt;
+}
+
+
+/* =================================================
PlayBook Title Bar
=================================================*/
.pb-title-bar {
View
233 samples/bbui-0.9.1.js
@@ -2353,24 +2353,14 @@ bb.screen = {
scrollArea,
tempHolder = [],
childNode = null,
- j;
+ j,
+ height = (bb.device.isPlayBook) ? 73 : 140;
// Figure out what to do with the title bar
if (titleBar.length > 0) {
titleBar = titleBar[0];
- // See if they want a back button
- if (titleBar.hasAttribute('data-bb-back-caption')) {
- if (actionBar.length == 0) {
- // Since there's no way to get back, we'll add an action bar
- var newBackBar = document.createElement('div');
- newBackBar.setAttribute('data-bb-type','action-bar');
- newBackBar.setAttribute('data-bb-back-caption',titleBar.getAttribute('data-bb-back-caption'));
- outerElement.appendChild(newBackBar);
- actionBar = [newBackBar];
- }
- }
- // TODO: Add title bar support
- outerElement.removeChild(titleBar);
+ } else {
+ titleBar = null;
}
// Assign our action bar
@@ -2390,12 +2380,12 @@ bb.screen = {
// Inner Scroll Area
scrollArea = document.createElement('div');
- outerScrollArea.appendChild(scrollArea);
+ outerScrollArea.appendChild(scrollArea);
// Copy all nodes in the screen that are not the action bar
for (j = 0; j < outerElement.childNodes.length - 1; j++) {
childNode = outerElement.childNodes[j];
- if ((childNode != actionBar) && (childNode != menuBar)) {
+ if ((childNode != actionBar) && (childNode != menuBar) && (childNode != titleBar)) {
tempHolder.push(childNode);
}
}
@@ -2404,17 +2394,26 @@ bb.screen = {
scrollArea.appendChild(tempHolder[j]);
}
+ // Set our outer scroll area dimensions
+ if (titleBar && actionBar) {
+ outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:'+height+'px;top:'+height+'px;left:0px;right:0px;');
+ } else if (titleBar) {
+ outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:'+height+'px;left:0px;right:0px;');
+ } else if (actionBar) {
+ outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:'+height+'px;top:0px;left:0px;right:0px;');
+ } else {
+ outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:0px;left:0px;right:0px;');
+ }
+
+ // Apply any title bar styling
+ if (titleBar) {
+ bb.titleBar.apply(titleBar);
+ }
+
+ // Apply any action Bar styling
if (actionBar) {
- if (bb.device.isPlayBook) {
- outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:73px;top:0px;left:0px;right:0px;');
- } else {
- outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:140px;top:0px;left:0px;right:0px;');
- }
bb.actionBar.apply(actionBar,outerElement);
}
- else {
- outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:0px;left:0px;right:0px;');
- }
// Assign our context
if (context.length > 0) {
@@ -2472,18 +2471,7 @@ bb.screen = {
if (titleBar) {
outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:55px;left:0px;right:0px;');
- titleBar.setAttribute('class', 'pb-title-bar');
- titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
- if (titleBar.hasAttribute('data-bb-back-caption')) {
- var button = document.createElement('div'),
- buttonInner = document.createElement('div');
- button.setAttribute('class', 'pb-title-bar-back');
- button.onclick = bb.popScreen;
- buttonInner.setAttribute('class','pb-title-bar-back-inner');
- buttonInner.innerHTML = titleBar.getAttribute('data-bb-back-caption');
- button.appendChild(buttonInner);
- titleBar.appendChild(button);
- }
+ bb.titleBar.apply(titleBar);
}
else {
outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:0px;left:0px;right:0px;');
@@ -2504,20 +2492,9 @@ bb.screen = {
context[j].style.display = 'none';
}
-
if (titleBar.length > 0) {
titleBar = titleBar[0];
- if (titleBar.hasAttribute('data-bb-caption')) {
- var outerStyle = outerElement.getAttribute('style');
- if (bb.device.isHiRes) {
- titleBar.setAttribute('class', 'bb-hires-screen-title');
- outerElement.setAttribute('style', outerStyle + ';padding-top:33px');
- } else {
- titleBar.setAttribute('class', 'bb-lowres-screen-title');
- outerElement.setAttribute('style', outerStyle + ';padding-top:27px');
- }
- titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
- }
+ bb.titleBar.apply(titleBar);
}
}
}
@@ -2879,6 +2856,166 @@ bb.progress = {
}
};
+
+bb.titleBar = {
+
+ apply: function(titleBar) {
+
+ if (bb.device.isBB10) {
+ var res = (bb.device.isPlayBook) ? 'lowres' : 'hires',
+ button;
+ titleBar.setAttribute('class', 'bb-bb10-title-bar-'+res +' bb-bb10-title-bar-' + bb.actionBar.color);
+ titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
+ // Get our back button if provided
+ if (titleBar.hasAttribute('data-bb-back-caption')) {
+ button = document.createElement('div');
+ button.innerHTML = titleBar.getAttribute('data-bb-back-caption');
+ titleBar.appendChild(button);
+ titleBar.backButton = button;
+ button.onclick = bb.popScreen;
+ bb.titleBar.styleBB10Button(button);
+ button.style.left = '0px';
+ }
+ // Get our action button if provided
+ if (titleBar.hasAttribute('data-bb-action-caption')) {
+ button = document.createElement('div');
+ button.innerHTML = titleBar.getAttribute('data-bb-action-caption');
+ if (titleBar.hasAttribute('onactionclick')) {
+ button.onactionclick = titleBar.getAttribute('onactionclick');
+ button.onclick = function() {
+ eval(this.onactionclick);
+ };
+ } else if (titleBar.onactionclick) {
+ button.onclick = onactionclick;
+ }
+ //button.onclick = bb.popScreen;
+ bb.titleBar.styleBB10Button(button);
+ button.style.right = '0px';
+ titleBar.appendChild(button);
+ titleBar.actionButton = button;
+ }
+ // Create an adjustment function for the widths
+ if (titleBar.actionButton && titleBar.backButton) {
+
+ titleBar.evenButtonWidths = function() {
+ var backWidth = parseInt(window.getComputedStyle(this.backButton).width),
+ actionWidth = parseInt(window.getComputedStyle(this.actionButton).width);
+ if (backWidth > actionWidth) {
+ this.actionButton.style.width = backWidth +'px';
+ } else {
+ this.backButton.style.width = actionWidth +'px';
+ }
+ };
+ titleBar.evenButtonWidths = titleBar.evenButtonWidths.bind(titleBar);
+ window.setTimeout(titleBar.evenButtonWidths,0);
+ }
+ } else if (bb.device.isPlayBook) {
+ titleBar.setAttribute('class', 'pb-title-bar');
+ titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
+ if (titleBar.hasAttribute('data-bb-back-caption')) {
+ var button = document.createElement('div'),
+ buttonInner = document.createElement('div');
+ button.setAttribute('class', 'pb-title-bar-back');
+ button.onclick = bb.popScreen;
+ buttonInner.setAttribute('class','pb-title-bar-back-inner');
+ buttonInner.innerHTML = titleBar.getAttribute('data-bb-back-caption');
+ button.appendChild(buttonInner);
+ titleBar.appendChild(button);
+ }
+ } else {
+ if (titleBar.hasAttribute('data-bb-caption')) {
+ var outerStyle = outerElement.getAttribute('style');
+ if (bb.device.isHiRes) {
+ titleBar.setAttribute('class', 'bb-hires-screen-title');
+ outerElement.setAttribute('style', outerStyle + ';padding-top:33px');
+ } else {
+ titleBar.setAttribute('class', 'bb-lowres-screen-title');
+ outerElement.setAttribute('style', outerStyle + ';padding-top:27px');
+ }
+ titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
+ }
+ }
+ },
+
+ styleBB10Button: function(outerElement) {
+ var res = (bb.device.isPlayBook) ? 'lowres' : 'hires',
+ //disabledStyle,
+ innerElement = document.createElement('div');
+ //disabled = outerElement.hasAttribute('data-bb-disabled'),
+ normal = 'bb-bb10-titlebar-button bb-bb10-titlebar-button-'+res,
+ highlight = 'bb-bb10-titlebar-button bb-bb10-titlebar-button-'+res+' bb10-button-highlight',
+ outerNormal = 'bb-bb10-titlebar-button-container-'+res+' bb-bb10-titlebar-button-container-' + bb.actionBar.color;
+
+ //outerElement.enabled = !disabled;
+ outerElement.enabled = true;
+ innerElement.innerHTML = outerElement.innerHTML;
+ outerElement.innerHTML = '';
+ outerElement.appendChild(innerElement);
+
+ // Set our styles
+ //disabledStyle = normal + ' bb-bb10-button-disabled-'+bb.screen.controlColor;
+ normal = normal + ' bb-bb10-titlebar-button-' + bb.actionBar.color;
+
+ /*if (disabled) {
+ outerElement.removeAttribute('data-bb-disabled');
+ innerElement.setAttribute('class',disabledStyle);
+ } else {*/
+ innerElement.setAttribute('class',normal);
+ //}
+ // Set our variables on the elements
+ outerElement.setAttribute('class',outerNormal);
+ outerElement.outerNormal = outerNormal;
+ outerElement.innerElement = innerElement;
+ innerElement.normal = normal;
+ innerElement.highlight = highlight;
+ //innerElement.disabledStyle = disabledStyle;
+ //if (!disabled) {
+ outerElement.ontouchstart = function() {
+ this.innerElement.setAttribute('class', this.innerElement.highlight);
+
+ };
+ outerElement.ontouchend = function() {
+ this.innerElement.setAttribute('class', this.innerElement.normal);
+ };
+ //}
+
+ // Trap the click and call it only if the button is enabled
+ outerElement.trappedClick = outerElement.onclick;
+ outerElement.onclick = undefined;
+ if (outerElement.trappedClick !== null) {
+ outerElement.addEventListener('click',function (e) {
+ if (this.enabled) {
+ this.trappedClick();
+ }
+ },false);
+ }
+
+ // Assign our enable function
+ /* outerElement.enable = function(){
+ if (this.enabled) return;
+ this.innerElement.setAttribute('class', this.innerElement.normal);
+ this.ontouchstart = function() {
+ this.innerElement.setAttribute('class', this.innerElement.highlight);
+
+ };
+ this.ontouchend = function() {
+ this.innerElement.setAttribute('class', this.innerElement.normal);
+ };
+ this.enabled = true;
+ };
+ // Assign our disable function
+ outerElement.disable = function(){
+ if (!this.enabled) return;
+ this.innerElement.setAttribute('class', this.innerElement.disabledStyle);
+ this.ontouchstart = null;
+ this.ontouchend = null;
+ this.enabled = false;
+ };*/
+
+
+ }
+}
+
// Apply styling to an action bar
bb.actionBar = {
View
1 samples/charts.htm
@@ -38,4 +38,5 @@
</div>
</div>
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
3 samples/contextMenu.htm
@@ -15,7 +15,6 @@
* limitations under the License.
-->
<div data-bb-type="screen" data-bb-effect="fade">
- <div data-bb-type="title" data-bb-caption="Context menu example" data-bb-back-caption="Menu" ></div>
<div data-bb-type="round-panel" style="margin-top:10px;">
<div data-bb-type="panel-header">BlackBerry 10 Only</div>
<p style="text-align:center;">The Delete menu item demonstrates how to grab the currently selected item of the context menu</p>
@@ -66,5 +65,7 @@
<div data-bb-type="action" data-bb-img="images/actionBar/cog_dark_theme.png">View details</div>
<div data-bb-type="action" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="alert('Your Item is ' + document.getElementById('foo').menu.selected.description+'?');">Delete</div>
</div>
+
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
3 samples/dataOnLoad.htm
@@ -15,10 +15,11 @@
* limitations under the License.
-->
<div data-bb-type="screen" data-bb-effect="fade">
- <div data-bb-type="title" data-bb-caption="Load Data" data-bb-back-caption="Menu" ></div>
+ <div data-bb-type="title" data-bb-caption="Load Data" data-bb-back-caption="Back" ></div>
<script id="dataOnLoadJS" src="js/dataOnLoad.js"></script>
<div id="dataList" data-bb-type="image-list">
</div>
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
3 samples/dataOnTheFly.htm
@@ -15,7 +15,7 @@
* limitations under the License.
-->
<div data-bb-type="screen" data-bb-effect="fade">
- <div data-bb-type="title" data-bb-caption="[hack] Data on the Fly [/hack]" data-bb-back-caption="Menu" ></div>
+ <div data-bb-type="title" data-bb-caption="[hack] Data on the Fly [/hack]" data-bb-back-caption="Back" ></div>
<script id="dataOnTheFlyJS" src="js/dataOnTheFly.js"></script>
<p align="center" style="color:orange;">This example shows you how to &quot;hack&quot; your way to adding UI elements on the fly. You can use as is, but it will be subject to change once a
@@ -34,4 +34,5 @@
</div>
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
2 samples/gauge.htm
@@ -33,4 +33,6 @@
<div style="margin:20px;">
<progress id="progress" value="0" max="100"></progress>
</div>
+
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
3 samples/grid.htm
@@ -15,7 +15,6 @@
* limitations under the License.
-->
<div data-bb-type="screen" data-bb-effect="fade">
- <div data-bb-type="title" data-bb-caption="Grid List Example" data-bb-back-caption="Menu"></div>
<style>
body, html {
background-color:black;
@@ -50,7 +49,7 @@
</div>
</div>
</div>
- <div data-bb-type="action-bar" data-bb-back-caption="Menu">
+ <div data-bb-type="action-bar" data-bb-back-caption="Back">
<div data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="alert('You clicked Action 3');">Action 1</div>
<div data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="alert('You clicked Action 3');">Action 2</div>
<div data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="alert('You clicked Action 3');">Action 3</div>
View
2 samples/gridSquare.htm
@@ -15,7 +15,6 @@
* limitations under the License.
-->
<div data-bb-type="screen" data-bb-effect="fade">
- <div data-bb-type="title" data-bb-caption="Grid List Example" data-bb-back-caption="Menu"></div>
<style>
body, html {
background-color:black;
@@ -41,4 +40,5 @@
</div>
</div>
</div>
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
2 samples/imageListAndGrid.htm
@@ -15,7 +15,6 @@
* limitations under the License.
-->
<div data-bb-type="screen" data-bb-effect="fade">
- <div data-bb-type="title" data-bb-caption="Grid &amp; Image List Example" data-bb-back-caption="Menu"></div>
<div data-bb-type="grid-layout">
<div data-bb-type="group" data-bb-title="Most Interactions">
<div data-bb-type="row">
@@ -37,4 +36,5 @@
<div data-bb-type="item" data-bb-img="images/icons/icon6.png" data-bb-title="Banana">I like the yellow ones</div>
<div data-bb-type="item" data-bb-img="images/icons/icon9.png" data-bb-title="Blackberry">You know where I'm going with this one</div>
</div>
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
3 samples/inboxList.htm
@@ -16,7 +16,7 @@
-->
<div data-bb-type="screen" data-bb-effect="fade">
- <div data-bb-type="title" data-bb-caption="Inbox List" data-bb-back-caption="Menu" ></div>
+ <div data-bb-type="title" data-bb-caption="Inbox List" data-bb-back-caption="Back" ></div>
<script id="inboxListJS" src="js/inboxList.js" onunload="unloadMessageList();"></script>
<div data-bb-type="image-list">
<div data-bb-type="header">Thu 27 May 2010</div>
@@ -50,5 +50,6 @@
<div data-bb-type="item" data-bb-img="images/inboxList/opened.png" data-bb-title="Dale D." data-bb-accent-text="9:31a" >Theme work underway for 6.0</div>
<div data-bb-type="item" data-bb-img="images/inboxList/opened.png" data-bb-title="Christine P." data-bb-accent-text="8:55a" >Year end reviews</div>
</div>
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
9 samples/index.htm
@@ -28,7 +28,7 @@
randomNumber;
randomNumber=Math.floor(Math.random()*100);
if (randomNumber > 60) {
- bb10HighlightColor = '#6356AF';
+ bb10HighlightColor = '#BA55D3';
bb10AccentColor = '#3E385F';
} else if (randomNumber > 30) {
bb10HighlightColor = '#00BC9F';
@@ -51,6 +51,13 @@
if (id == 'dataOnLoad') {
dataOnLoad_initialLoad(element);
}
+ // Remove all titles "exept" input and pill buttons screen if runnint on BB10
+ if (bb.device.isBB10 && id != 'input' && id != 'pillButtons') {
+ var titles = element.querySelectorAll('[data-bb-type=title]');
+ if (titles.length > 0) {
+ titles[0].parentNode.removeChild(titles[0]);
+ }
+ }
},
// Fires "after" styling is applied and "after" the screen is inserted in the DOM
ondomready: function(element, id) {
View
3 samples/input.htm
@@ -16,7 +16,7 @@
-->
<div data-bb-type="screen" data-bb-effect="fade" >
- <div data-bb-type="title" data-bb-caption="Input Controls" data-bb-back-caption="Back" ></div>
+ <div data-bb-type="title" data-bb-caption="Edit Contact" data-bb-back-caption="Cancel" data-bb-action-caption="Save" onactionclick="alert('Save Clicked')"></div>
<div data-bb-type="round-panel">
<div data-bb-type="panel-header">Dropdown Buttons</div>
@@ -111,6 +111,5 @@
</div>
</div>
</div>
-
</div>
View
1 samples/menu.htm
@@ -15,7 +15,6 @@
* limitations under the License.
-->
<div data-bb-type="screen" data-bb-effect="fade">
- <div data-bb-type="title" data-bb-caption="User Interface Examples" ></div>
<div data-bb-type="image-list">
<div data-bb-type="header" data-bb-justify="left">BlackBerry 10 Only</div>
<div data-bb-type="item" onclick="bb.pushScreen('grid.htm', 'bb10grid');" data-bb-img="images/icons/icon6.png" data-bb-title="Landscape Image Grid">Layout content in an Image Grid</div>
View
2 samples/menuBar.htm
@@ -32,4 +32,6 @@
<div data-bb-type="panel-header">Smartphone</div>
<p>When viewed on a Smartphone the menu will appear when you use the Blackberry button.</p>
</div>
+
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
3 samples/pillButtons.htm
@@ -15,7 +15,7 @@
* limitations under the License.
-->
<div data-bb-type="screen" data-bb-effect="fade">
- <div data-bb-type="title" data-bb-caption="Pill Buttons" data-bb-back-caption="Back" ></div>
+ <div data-bb-type="title" data-bb-caption="Pill Buttons" data-bb-back-caption="Back" data-bb-action-caption="Save"></div>
<script id="pillButtonsJS" src="js/pillButtons.js"></script>
<div data-bb-type="pill-buttons">
@@ -93,5 +93,6 @@
</div>
</div>
</div>
+
</div>
View
2 samples/settings.htm
@@ -82,4 +82,6 @@
</div>
</div>
</div>
+
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
2 samples/slider.htm
@@ -36,5 +36,7 @@
<div style="padding-top:50px">
<div data-bb-type="button" data-bb-stretch="true" onclick="moveSlider()">Slide with a Timer</div>
</div>
+
+ <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
View
138 src/bbUI.css
@@ -848,6 +848,144 @@ body, html {
}
/* =================================================
+ BB10 Title Bar
+ =================================================*/
+.bb-bb10-title-bar-hires {
+ height:132px;
+ position:absolute;
+ top:0px;
+ left:0px;
+ right:0px;
+ text-align:center;
+ padding-top:8px;
+ line-height:140px;
+ font-size: 26pt;
+ z-index:1000;
+}
+
+.bb-bb10-title-bar-lowres {
+ height:68px;
+ position:absolute;
+ top:0px;
+ left:0px;
+ right:0px;
+ text-align:center;
+ line-height:73px;
+ font-size: 16pt;
+ padding-top: 5px;
+ z-index:1000;
+}
+
+.bb-bb10-title-bar-dark
+{
+ background-color:#333333;
+ color:white;
+}
+
+.bb-bb10-title-bar-light
+{
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#F1F1F1), to(#D4D4D4));;
+ color:black;
+}
+
+.bb-bb10-titlebar-button-container-light
+{
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#BDBDBD), to(#D4D4D4));
+ color: black;
+ border-top-color: #A3A3A3;
+ border-bottom-color: #CECECE;
+ border-left-color: #C3C3C3;
+ border-right-color: #C4C4C4;
+}
+
+.bb-bb10-titlebar-button-container-dark
+{
+ background-color: #0B0B0B;
+ color: white;
+ border-color: #333333;
+}
+
+.bb-bb10-titlebar-button-container-hires
+{
+ position: absolute;
+ top: 0px;
+ border-width:4px;
+ border-style: solid;
+ border-radius:10px;
+ padding: 2px;
+ margin: 20px;
+}
+
+.bb-bb10-titlebar-button-container-lowres
+{
+ position: absolute;
+ top: 0px;
+ border-width:2px;
+ border-style: solid;
+ border-radius:4px;
+ padding: 1px;
+ margin: 7px;
+}
+
+.bb-bb10-titlebar-button {
+ border-style: solid;
+ text-align:center;
+ white-space:nowrap;
+ vertical-align: middle;
+ display: block;
+ background-clip: padding-box;
+}
+
+.bb-bb10-titlebar-button-light {
+ border-top-color: #B4B4B4;
+ border-left-color: #C2C2C2;
+ border-bottom-color: #B4B4B4;
+ border-right-color: #C8C8C8;
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#DDDDDD));
+}
+
+.bb-bb10-titlebar-button-dark {
+ border-color:#5C5C5C;
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#3F3F3F), to(#262626));
+}
+
+.bb-bb10-titlebar-button-disabled-dark {
+ border-color:#262626;
+ background-color: #262626;
+ color: #666666;
+
+}
+
+.bb-bb10-titlebar-button-disabled-light {
+ border-color: #D4D4D4;
+ background-color: #C1C1C1;
+ color: #838383;
+}
+
+.bb-bb10-titlebar-button-hires {
+ border-width:1px;
+ border-radius:5px;
+ line-height:75px;
+ height:75px;
+ padding-top:12px;
+ padding-left: 35px;
+ padding-right: 35px;
+ font-size:28pt;
+}
+
+.bb-bb10-titlebar-button-lowres {
+ border-width:1px;
+ border-radius:2px;
+ line-height:46px;
+ height:46px;
+ padding-top:5px;
+ padding-left: 15px;
+ padding-right: 15px;
+ font-size:16pt;
+}
+
+
+/* =================================================
PlayBook Title Bar
=================================================*/
.pb-title-bar {
View
73 src/plugins/screen.js
@@ -42,24 +42,14 @@ bb.screen = {
scrollArea,
tempHolder = [],
childNode = null,
- j;
+ j,
+ height = (bb.device.isPlayBook) ? 73 : 140;
// Figure out what to do with the title bar
if (titleBar.length > 0) {
titleBar = titleBar[0];
- // See if they want a back button
- if (titleBar.hasAttribute('data-bb-back-caption')) {
- if (actionBar.length == 0) {
- // Since there's no way to get back, we'll add an action bar
- var newBackBar = document.createElement('div');
- newBackBar.setAttribute('data-bb-type','action-bar');
- newBackBar.setAttribute('data-bb-back-caption',titleBar.getAttribute('data-bb-back-caption'));
- outerElement.appendChild(newBackBar);
- actionBar = [newBackBar];
- }
- }
- // TODO: Add title bar support
- outerElement.removeChild(titleBar);
+ } else {
+ titleBar = null;
}
// Assign our action bar
@@ -79,12 +69,12 @@ bb.screen = {
// Inner Scroll Area
scrollArea = document.createElement('div');
- outerScrollArea.appendChild(scrollArea);
+ outerScrollArea.appendChild(scrollArea);
// Copy all nodes in the screen that are not the action bar
for (j = 0; j < outerElement.childNodes.length - 1; j++) {
childNode = outerElement.childNodes[j];
- if ((childNode != actionBar) && (childNode != menuBar)) {
+ if ((childNode != actionBar) && (childNode != menuBar) && (childNode != titleBar)) {
tempHolder.push(childNode);
}
}
@@ -93,17 +83,26 @@ bb.screen = {
scrollArea.appendChild(tempHolder[j]);
}
+ // Set our outer scroll area dimensions
+ if (titleBar && actionBar) {
+ outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:'+height+'px;top:'+height+'px;left:0px;right:0px;');
+ } else if (titleBar) {
+ outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:'+height+'px;left:0px;right:0px;');
+ } else if (actionBar) {
+ outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:'+height+'px;top:0px;left:0px;right:0px;');
+ } else {
+ outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:0px;left:0px;right:0px;');
+ }
+
+ // Apply any title bar styling
+ if (titleBar) {
+ bb.titleBar.apply(titleBar);
+ }
+
+ // Apply any action Bar styling
if (actionBar) {
- if (bb.device.isPlayBook) {
- outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:73px;top:0px;left:0px;right:0px;');
- } else {
- outerScrollArea.setAttribute('style','overflow:auto;position:absolute;bottom:140px;top:0px;left:0px;right:0px;');
- }
bb.actionBar.apply(actionBar,outerElement);
}
- else {
- outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:0px;left:0px;right:0px;');
- }
// Assign our context
if (context.length > 0) {
@@ -161,18 +160,7 @@ bb.screen = {
if (titleBar) {
outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:55px;left:0px;right:0px;');
- titleBar.setAttribute('class', 'pb-title-bar');
- titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
- if (titleBar.hasAttribute('data-bb-back-caption')) {
- var button = document.createElement('div'),
- buttonInner = document.createElement('div');
- button.setAttribute('class', 'pb-title-bar-back');
- button.onclick = bb.popScreen;
- buttonInner.setAttribute('class','pb-title-bar-back-inner');
- buttonInner.innerHTML = titleBar.getAttribute('data-bb-back-caption');
- button.appendChild(buttonInner);
- titleBar.appendChild(button);
- }
+ bb.titleBar.apply(titleBar);
}
else {
outerScrollArea.setAttribute('style','overflow:auto;bottom:0px;position:absolute;top:0px;left:0px;right:0px;');
@@ -193,20 +181,9 @@ bb.screen = {
context[j].style.display = 'none';
}
-
if (titleBar.length > 0) {
titleBar = titleBar[0];
- if (titleBar.hasAttribute('data-bb-caption')) {
- var outerStyle = outerElement.getAttribute('style');
- if (bb.device.isHiRes) {
- titleBar.setAttribute('class', 'bb-hires-screen-title');
- outerElement.setAttribute('style', outerStyle + ';padding-top:33px');
- } else {
- titleBar.setAttribute('class', 'bb-lowres-screen-title');
- outerElement.setAttribute('style', outerStyle + ';padding-top:27px');
- }
- titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
- }
+ bb.titleBar.apply(titleBar);
}
}
}
View
158 src/plugins/titleBar.js
@@ -0,0 +1,158 @@
+bb.titleBar = {
+
+ apply: function(titleBar) {
+
+ if (bb.device.isBB10) {
+ var res = (bb.device.isPlayBook) ? 'lowres' : 'hires',
+ button;
+ titleBar.setAttribute('class', 'bb-bb10-title-bar-'+res +' bb-bb10-title-bar-' + bb.actionBar.color);
+ titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
+ // Get our back button if provided
+ if (titleBar.hasAttribute('data-bb-back-caption')) {
+ button = document.createElement('div');
+ button.innerHTML = titleBar.getAttribute('data-bb-back-caption');
+ titleBar.appendChild(button);
+ titleBar.backButton = button;
+ button.onclick = bb.popScreen;
+ bb.titleBar.styleBB10Button(button);
+ button.style.left = '0px';
+ }
+ // Get our action button if provided
+ if (titleBar.hasAttribute('data-bb-action-caption')) {
+ button = document.createElement('div');
+ button.innerHTML = titleBar.getAttribute('data-bb-action-caption');
+ if (titleBar.hasAttribute('onactionclick')) {
+ button.onactionclick = titleBar.getAttribute('onactionclick');
+ button.onclick = function() {
+ eval(this.onactionclick);
+ };
+ } else if (titleBar.onactionclick) {
+ button.onclick = onactionclick;
+ }
+ //button.onclick = bb.popScreen;
+ bb.titleBar.styleBB10Button(button);
+ button.style.right = '0px';
+ titleBar.appendChild(button);
+ titleBar.actionButton = button;
+ }
+ // Create an adjustment function for the widths
+ if (titleBar.actionButton && titleBar.backButton) {
+
+ titleBar.evenButtonWidths = function() {
+ var backWidth = parseInt(window.getComputedStyle(this.backButton).width),
+ actionWidth = parseInt(window.getComputedStyle(this.actionButton).width);
+ if (backWidth > actionWidth) {
+ this.actionButton.style.width = backWidth +'px';
+ } else {
+ this.backButton.style.width = actionWidth +'px';
+ }
+ };
+ titleBar.evenButtonWidths = titleBar.evenButtonWidths.bind(titleBar);
+ window.setTimeout(titleBar.evenButtonWidths,0);
+ }
+ } else if (bb.device.isPlayBook) {
+ titleBar.setAttribute('class', 'pb-title-bar');
+ titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
+ if (titleBar.hasAttribute('data-bb-back-caption')) {
+ var button = document.createElement('div'),
+ buttonInner = document.createElement('div');
+ button.setAttribute('class', 'pb-title-bar-back');
+ button.onclick = bb.popScreen;
+ buttonInner.setAttribute('class','pb-title-bar-back-inner');
+ buttonInner.innerHTML = titleBar.getAttribute('data-bb-back-caption');
+ button.appendChild(buttonInner);
+ titleBar.appendChild(button);
+ }
+ } else {
+ if (titleBar.hasAttribute('data-bb-caption')) {
+ var outerStyle = outerElement.getAttribute('style');
+ if (bb.device.isHiRes) {
+ titleBar.setAttribute('class', 'bb-hires-screen-title');
+ outerElement.setAttribute('style', outerStyle + ';padding-top:33px');
+ } else {
+ titleBar.setAttribute('class', 'bb-lowres-screen-title');
+ outerElement.setAttribute('style', outerStyle + ';padding-top:27px');
+ }
+ titleBar.innerHTML = titleBar.getAttribute('data-bb-caption');
+ }
+ }
+ },
+
+ styleBB10Button: function(outerElement) {
+ var res = (bb.device.isPlayBook) ? 'lowres' : 'hires',
+ //disabledStyle,
+ innerElement = document.createElement('div');
+ //disabled = outerElement.hasAttribute('data-bb-disabled'),
+ normal = 'bb-bb10-titlebar-button bb-bb10-titlebar-button-'+res,
+ highlight = 'bb-bb10-titlebar-button bb-bb10-titlebar-button-'+res+' bb10-button-highlight',
+ outerNormal = 'bb-bb10-titlebar-button-container-'+res+' bb-bb10-titlebar-button-container-' + bb.actionBar.color;
+
+ //outerElement.enabled = !disabled;
+ outerElement.enabled = true;
+ innerElement.innerHTML = outerElement.innerHTML;
+ outerElement.innerHTML = '';
+ outerElement.appendChild(innerElement);
+
+ // Set our styles
+ //disabledStyle = normal + ' bb-bb10-button-disabled-'+bb.screen.controlColor;
+ normal = normal + ' bb-bb10-titlebar-button-' + bb.actionBar.color;
+
+ /*if (disabled) {
+ outerElement.removeAttribute('data-bb-disabled');
+ innerElement.setAttribute('class',disabledStyle);
+ } else {*/
+ innerElement.setAttribute('class',normal);
+ //}
+ // Set our variables on the elements
+ outerElement.setAttribute('class',outerNormal);
+ outerElement.outerNormal = outerNormal;
+ outerElement.innerElement = innerElement;
+ innerElement.normal = normal;
+ innerElement.highlight = highlight;
+ //innerElement.disabledStyle = disabledStyle;
+ //if (!disabled) {
+ outerElement.ontouchstart = function() {
+ this.innerElement.setAttribute('class', this.innerElement.highlight);
+
+ };
+ outerElement.ontouchend = function() {
+ this.innerElement.setAttribute('class', this.innerElement.normal);
+ };
+ //}
+
+ // Trap the click and call it only if the button is enabled
+ outerElement.trappedClick = outerElement.onclick;
+ outerElement.onclick = undefined;
+ if (outerElement.trappedClick !== null) {
+ outerElement.addEventListener('click',function (e) {
+ if (this.enabled) {
+ this.trappedClick();
+ }
+ },false);
+ }
+
+ // Assign our enable function
+ /* outerElement.enable = function(){
+ if (this.enabled) return;
+ this.innerElement.setAttribute('class', this.innerElement.normal);
+ this.ontouchstart = function() {
+ this.innerElement.setAttribute('class', this.innerElement.highlight);
+
+ };
+ this.ontouchend = function() {
+ this.innerElement.setAttribute('class', this.innerElement.normal);
+ };
+ this.enabled = true;
+ };
+ // Assign our disable function
+ outerElement.disable = function(){
+ if (!this.enabled) return;
+ this.innerElement.setAttribute('class', this.innerElement.disabledStyle);
+ this.ontouchstart = null;
+ this.ontouchend = null;
+ this.enabled = false;
+ };*/
+
+
+ }
+}

0 comments on commit dd2334a

Please sign in to comment.