require(['knockout', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojoffcanvas', 'ojs/ojselectcombobox' ], function(ko, oj, $) { 'use strict'; var ViewModel = function() { var self = this; //offcanvas options var toastOptions = { "displayMode": "overlay", "selector": "#toast" }; var photos = { "Jim Marion": "//media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAK3AAAAJGQwMmEzOGMxLTM2YzEtNGU1MC04YWZhLTNiODMyYTkyY2Y1Mw.jpg", "Paul Thaden": "//media.licdn.com/mpr/mpr/shrinknp_100_100/p/6/005/090/27f/02c6064.jpg", "John Brock": "//media.licdn.com/mpr/mpr/shrinknp_100_100/p/3/000/212/318/3f35b26.jpg", "Geertjan Wielenga": "//media.licdn.com/media/p/1/000/12b/10a/03aed67.jpg" } self.blogger = ko.observable(); self.photoUrl = ko.pureComputed(function() { return photos[self.blogger()]; }); self.closeToast = function() { return oj.OffcanvasUtils.close(toastOptions); }; self.browserChangedHandler = function (event, data) { if (data.option === "value") { console.log(data); oj.OffcanvasUtils.open(toastOptions); //window.setTimeout(closeToast, 5*1000); } }; }; ko.applyBindings(new ViewModel()); }); //RequireJS configs (usually these come first in main.js, but they don't have to) requirejs.config({ // Path mappings for the logical module names paths: { 'knockout': '//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min', 'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min', "jqueryui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui", "jqueryui-amd": "//rawgit.com/jquery/jquery-ui/1-11-stable/ui", "promise": "//cdn.lukej.me/es6-promise/1.0.0/promise.min", "hammerjs": "//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min", "ojdnd": "//rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min", "ojs": "//rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/debug", "ojL10n": "//rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/ojL10n", "ojtranslations": "//rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/resources", "text": "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min", "signals": "//cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min", }, // Shim configurations for modules that do not expose AMD shim: { 'jqueryui-amd': { exports: "$", deps: ['jquery'] }, 'jquery': { exports: ['jQuery', '$'] } }, config: { ojL10n: { merge: { //'ojtranslations/nls/ojtranslations': 'resources/nls/menu' // The following addes en-US to the r.js bundle //'ojtranslations/nls/ojtranslations': '../../oj/resources/nls/en-US/localeElements' } } } });
<div class="oj-offcanvas-outer-wrapper" style="min-height: 400px;"> <div id="wrapper" class="oj-offcanvas-inner-wrapper"> <!-- toast offcanvas --> <div id="toast" class="oj-offcanvas-top oj-panel"> <div class="flex-container"> <div> <i class="close-button fa fa-close" data-bind="click: closeToast"></i> <img data-bind="attr: {src: photoUrl}" class="avatar"/> </div> <div> <p> <strong>Confirmation</strong> </p> <p> You chose <strong data-bind="text: blogger"></strong>. </p> </div> </div> </div> <!-- this content will be overlayed by the toast notification --> <div class="oj-panel oj-margin"> <label for="basicSelect">Select an Oracle JET Blogger</label> <select id="basicSelect" data-bind="ojComponent: {component: 'ojSelect', value: blogger, optionChange: browserChangedHandler, rootAttributes: {style:'max-width:20em'}}"> <option value="Geertjan Wielenga">Geertjan Wielenga</option> <option value="Jim Marion">Jim Marion</option> <option value="John Brock">John Brock</option> <option value="Paul Thaden">Paul Thaden</option> </select> </div> </div> <!-- /end inner-wrapper --> </div><!-- /end outer-wrapper -->
@import url('//rawgit.com/oracle/oraclejet/2.0.1/dist/css/alta/oj-alta-min.css'); @import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'); #toast:active, #toast:focus, #toast { /* Make the message look pretty */ border-radius: 10px; background: black; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 6px #000; /* hide the chrome/ff outline on active elements */ outline: none; /* set the location of the toast message */ left: auto; right: 10px; width: 300px; /* z-index required to overlay oj form controls */ z-index: 1; } #toast .flex-container { /*align-items: center;*/ display: flex; flex-flow: row nowrap; justify-content: space-between; } #toast .close-button { background: #000; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 6px #000; color: #fff; cursor: pointer; height: 1em; margin-right: 10px; padding: 2px; position: absolute; left: 6px; text-align: center; top: 6px; width: 1em; } #toast .avatar { margin-right: 12px; max-width: 75px; }