butcherman /
Tech_Bench
| @@ 5645-5692 (lines=48) @@ | ||
| 5642 | }); |
|
| 5643 | ||
| 5644 | var PanelButton = Button.extend({ |
|
| 5645 | showPanel: function () { |
|
| 5646 | var self = this, settings = self.settings; |
|
| 5647 | self.classes.add('opened'); |
|
| 5648 | if (!self.panel) { |
|
| 5649 | var panelSettings = settings.panel; |
|
| 5650 | if (panelSettings.type) { |
|
| 5651 | panelSettings = { |
|
| 5652 | layout: 'grid', |
|
| 5653 | items: panelSettings |
|
| 5654 | }; |
|
| 5655 | } |
|
| 5656 | panelSettings.role = panelSettings.role || 'dialog'; |
|
| 5657 | panelSettings.popover = true; |
|
| 5658 | panelSettings.autohide = true; |
|
| 5659 | panelSettings.ariaRoot = true; |
|
| 5660 | self.panel = new FloatPanel(panelSettings).on('hide', function () { |
|
| 5661 | self.classes.remove('opened'); |
|
| 5662 | }).on('cancel', function (e) { |
|
| 5663 | e.stopPropagation(); |
|
| 5664 | self.focus(); |
|
| 5665 | self.hidePanel(); |
|
| 5666 | }).parent(self).renderTo(self.getContainerElm()); |
|
| 5667 | self.panel.fire('show'); |
|
| 5668 | self.panel.reflow(); |
|
| 5669 | } else { |
|
| 5670 | self.panel.show(); |
|
| 5671 | } |
|
| 5672 | var rtlRels = [ |
|
| 5673 | 'bc-tc', |
|
| 5674 | 'bc-tl', |
|
| 5675 | 'bc-tr' |
|
| 5676 | ]; |
|
| 5677 | var ltrRels = [ |
|
| 5678 | 'bc-tc', |
|
| 5679 | 'bc-tr', |
|
| 5680 | 'bc-tl', |
|
| 5681 | 'tc-bc', |
|
| 5682 | 'tc-br', |
|
| 5683 | 'tc-bl' |
|
| 5684 | ]; |
|
| 5685 | var rel = self.panel.testMoveRel(self.getEl(), settings.popoverAlign || (self.isRtl() ? rtlRels : ltrRels)); |
|
| 5686 | self.panel.classes.toggle('start', rel.substr(-1) === 'l'); |
|
| 5687 | self.panel.classes.toggle('end', rel.substr(-1) === 'r'); |
|
| 5688 | var isTop = rel.substr(0, 1) === 't'; |
|
| 5689 | self.panel.classes.toggle('bottom', !isTop); |
|
| 5690 | self.panel.classes.toggle('top', isTop); |
|
| 5691 | self.panel.moveRel(self.getEl(), rel); |
|
| 5692 | }, |
|
| 5693 | hidePanel: function () { |
|
| 5694 | var self = this; |
|
| 5695 | if (self.panel) { |
|
| @@ 5463-5510 (lines=48) @@ | ||
| 5460 | }); |
|
| 5461 | ||
| 5462 | var PanelButton = Button.extend({ |
|
| 5463 | showPanel: function () { |
|
| 5464 | var self = this, settings = self.settings; |
|
| 5465 | self.classes.add('opened'); |
|
| 5466 | if (!self.panel) { |
|
| 5467 | var panelSettings = settings.panel; |
|
| 5468 | if (panelSettings.type) { |
|
| 5469 | panelSettings = { |
|
| 5470 | layout: 'grid', |
|
| 5471 | items: panelSettings |
|
| 5472 | }; |
|
| 5473 | } |
|
| 5474 | panelSettings.role = panelSettings.role || 'dialog'; |
|
| 5475 | panelSettings.popover = true; |
|
| 5476 | panelSettings.autohide = true; |
|
| 5477 | panelSettings.ariaRoot = true; |
|
| 5478 | self.panel = new FloatPanel(panelSettings).on('hide', function () { |
|
| 5479 | self.classes.remove('opened'); |
|
| 5480 | }).on('cancel', function (e) { |
|
| 5481 | e.stopPropagation(); |
|
| 5482 | self.focus(); |
|
| 5483 | self.hidePanel(); |
|
| 5484 | }).parent(self).renderTo(self.getContainerElm()); |
|
| 5485 | self.panel.fire('show'); |
|
| 5486 | self.panel.reflow(); |
|
| 5487 | } else { |
|
| 5488 | self.panel.show(); |
|
| 5489 | } |
|
| 5490 | var rtlRels = [ |
|
| 5491 | 'bc-tc', |
|
| 5492 | 'bc-tl', |
|
| 5493 | 'bc-tr' |
|
| 5494 | ]; |
|
| 5495 | var ltrRels = [ |
|
| 5496 | 'bc-tc', |
|
| 5497 | 'bc-tr', |
|
| 5498 | 'bc-tl', |
|
| 5499 | 'tc-bc', |
|
| 5500 | 'tc-br', |
|
| 5501 | 'tc-bl' |
|
| 5502 | ]; |
|
| 5503 | var rel = self.panel.testMoveRel(self.getEl(), settings.popoverAlign || (self.isRtl() ? rtlRels : ltrRels)); |
|
| 5504 | self.panel.classes.toggle('start', rel.substr(-1) === 'l'); |
|
| 5505 | self.panel.classes.toggle('end', rel.substr(-1) === 'r'); |
|
| 5506 | var isTop = rel.substr(0, 1) === 't'; |
|
| 5507 | self.panel.classes.toggle('bottom', !isTop); |
|
| 5508 | self.panel.classes.toggle('top', isTop); |
|
| 5509 | self.panel.moveRel(self.getEl(), rel); |
|
| 5510 | }, |
|
| 5511 | hidePanel: function () { |
|
| 5512 | var self = this; |
|
| 5513 | if (self.panel) { |
|
