-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #63 from infor-design/soho-7942-patch
Merging Fix on SOHO-7942 onto 4.6.1
- Loading branch information
Showing
8 changed files
with
281 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
<div class="row"> | ||
<div class="six columns"> | ||
<h2>Popupmenu Test: Empty Items</h2> | ||
</div> | ||
</div> | ||
|
||
<div class="row top-padding"> | ||
<div class="six columns"> | ||
|
||
<div class="field"> | ||
<button type="button" id="single-check" class="btn-primary btn-menu"> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-settings"></use> | ||
</svg> | ||
<span>This Has Empty Items</span> | ||
</button> | ||
<ul class="popupmenu is-selectable"> | ||
<li class="is-checked"> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-delete"></use> | ||
</svg> | ||
<a href="#"></a> | ||
</li> | ||
<li> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-settings"></use> | ||
</svg> | ||
<a href="#"></a> | ||
</li> | ||
<li> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-mail"></use> | ||
</svg> | ||
<a href="#"></a> | ||
</li> | ||
<li> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-print"></use> | ||
</svg> | ||
<a href="#"></a> | ||
</li> | ||
</ul> | ||
</div> | ||
|
||
</div> | ||
</div> |
192 changes: 192 additions & 0 deletions
192
components/toolbar/test-tooltips-populating-more-actions.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,192 @@ | ||
<div class="row"> | ||
<div class="six columns"> | ||
<h2>Toolbar Test: Tooltips Populating the More Actions Menu</h2> | ||
<p>Related JIRA Ticket: | ||
<a class="hyperlink" href="http://jira.infor.com/browse/SOHO-7942" target="_blank">SOHO-7942</a> | ||
</p> | ||
<p></p> | ||
</div> | ||
</div> | ||
|
||
<div class="row"> | ||
<div class="twelve columns"> | ||
|
||
<div id="ajax-toolbar" class="toolbar" data-init="false"> | ||
<div class="title">Ajax-ified Toolbar</div> | ||
<div class="buttonset"> | ||
|
||
<button id="print-button" class="btn" title="Print"> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-print"></use> | ||
</svg> | ||
<span></span> | ||
</button> | ||
|
||
<button id="settings-button" class="btn-menu" title="Settings"> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-settings"></use> | ||
</svg> | ||
<span></span> | ||
</button> | ||
<ul class="popupmenu is-selectable"> | ||
<li class="is-selectable is-checked"><a href="#">Setting #1</a></li> | ||
<li class="is-selectable"><a href="#">Setting #2</a></li> | ||
<li class="is-selectable"><a href="#">Setting #3</a></li> | ||
</ul> | ||
|
||
<button id="save-button" class="btn" title="Save"> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-save"></use> | ||
</svg> | ||
<span></span> | ||
</button> | ||
|
||
<button id="email-button" class="btn" title="Send via Email"> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-mail"></use> | ||
</svg> | ||
<span></span> | ||
</button> | ||
|
||
<button id="refresh-button" class="btn" title="Refresh"> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-refresh"></use> | ||
</svg> | ||
<span></span> | ||
</button> | ||
|
||
</div> | ||
<div class="more"> | ||
|
||
<button id="predefined-more" class="btn-actions page-changer" type="button" title="More..."> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-more"></use> | ||
</svg> | ||
<span class="audible">More Actions</span> | ||
</button> | ||
<ul id="predefined-more-menu" class="popupmenu" data-init="false" > | ||
<li><a href="#">Pre-defined Option #1</a></li> | ||
</ul> | ||
|
||
</div> | ||
</div> | ||
|
||
</div> | ||
</div> | ||
<div class="row top-padding"> | ||
<div class="twelve columns"> | ||
<button id="change-ajax" type="button" class="btn-secondary"> | ||
<svg class="icon" focusable="false" aria-hidden="true" role="presentation"> | ||
<use xlink:href="#icon-settings"></use> | ||
</svg> | ||
<span>Change Ajax Call</span> | ||
</button> | ||
|
||
<button id="destroy" type="button" class="btn-secondary"> | ||
<span>Destroy Toolbar Instance</span> | ||
</button> | ||
|
||
<button id="reinvoke" type="button" class="btn-secondary" disabled> | ||
<span>Re-invoke Toolbar Instance</span> | ||
</button> | ||
</div> | ||
</div> | ||
|
||
<script> | ||
var TOP_LEVEL_POPUPMENU_CONTENT = '' + | ||
'<li><a href="#">AJAX Option #1</a></li>' + | ||
'<li><a href="#">AJAX Option #2</a></li>' + | ||
'<li class="submenu">' + | ||
'<a href="#">AJAX Option #3</a>' + | ||
'<ul class="popupmenu"></ul>' + | ||
'</li>' + | ||
'<li><a href="#">AJAX Option #4</a></li>'; | ||
|
||
var SUB_LEVEL_POPUPMENU_CONTENT = '' + | ||
'<li><a href="#">AJAX Sub-option #1</a></li>' + | ||
'<li><a href="#">AJAX Sub-option #2</a></li>' + | ||
'<li><a href="#">AJAX Sub-option #3</a></li>' + | ||
'<li><a href="#">AJAX Sub-option #4</a></li>'; | ||
|
||
var ALTERNATE_TOP_LEVEL_POPUPMENU_CONTENT = '' + | ||
'<li><a href="#">Different AJAX Option #1</a></li>' + | ||
'<li><a href="#">Different AJAX Option #2</a></li>' + | ||
'<li><a href="#">Different AJAX Option #3</a></li>' + | ||
'<li><a href="#">Different AJAX Option #4</a></li>'; | ||
|
||
// Populate the menu with some fake content for the sake of testing the AJAX call. | ||
function popupmenuBeforeOpen(response, options) { | ||
if (options.contextElement) { | ||
return response( $(SUB_LEVEL_POPUPMENU_CONTENT) ); | ||
} | ||
return response( $(TOP_LEVEL_POPUPMENU_CONTENT) ); | ||
} | ||
|
||
// Populate the menu with some fake content for the sake of testing the AJAX call. | ||
function popupmenuBeforeOpenTwo(response, options) { | ||
console.log('Using different Popupmenu Content...'); | ||
return response( $(ALTERNATE_TOP_LEVEL_POPUPMENU_CONTENT) ); | ||
} | ||
|
||
// Manually invoke the Toolbar. | ||
// (more akin to how the Angular components will deal with the jQuery components) | ||
var toolbarElem = $('#ajax-toolbar'); | ||
var toolbarAPI = toolbarElem.data('toolbar'); | ||
var moreElem = $('#predefined-more'); | ||
var moreAPI = moreElem.data('popupmenu'); | ||
|
||
var btnChangeAjax = $('#change-ajax'); | ||
var btnDestroy = $('#destroy'); | ||
var btnReinvoke = $('#reinvoke'); | ||
|
||
// Settings | ||
var TOOLBAR_SETTINGS = { | ||
maxVisibleButtons: 4, | ||
moreMenuSettings: { | ||
beforeOpen: popupmenuBeforeOpen | ||
} | ||
}; | ||
|
||
function invokeToolbar() { | ||
btnChangeAjax.enable(); | ||
btnDestroy.enable(); | ||
btnReinvoke.disable(); | ||
|
||
if (toolbarAPI) { | ||
toolbarAPI.updated(TOOLBAR_SETTINGS); | ||
} else { | ||
toolbarElem.toolbar(TOOLBAR_SETTINGS); | ||
toolbarAPI = toolbarElem.data('toolbar'); | ||
} | ||
} | ||
|
||
// invoke the toolbar once on page load | ||
invokeToolbar(); | ||
|
||
// Destroys the toolbar instance. | ||
btnDestroy.on('click', function() { | ||
$(this).disable(); | ||
btnChangeAjax.disable(); | ||
btnReinvoke.enable(); | ||
toolbarAPI.destroy(); | ||
}); | ||
|
||
// Reinvokes the toolbar instance. | ||
btnReinvoke.on('click', function() { | ||
invokeToolbar(); | ||
}); | ||
|
||
// Swaps out the More Menu's ajax call for a different one. | ||
btnChangeAjax.on('click', function () { | ||
$(this).disable(); | ||
|
||
if (toolbarAPI) { | ||
toolbarAPI.updated({ | ||
maxVisibleButtons: 4, | ||
moreMenuSettings: { | ||
beforeOpen: popupmenuBeforeOpenTwo | ||
} | ||
}); | ||
} | ||
}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters