Oracle JET Notifications

Notifications using Oracle JET's oj.Offcanvas

by Evan Chavez

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
<div class="oj-offcanvas-outer-wrapper">
  <div id="wrapper" class="oj-offcanvas-inner-wrapper">

    <!-- toast offcanvas -->
    <div id="toast" class="oj-offcanvas-top oj-panel oj-panel-alt2">
      <div class="flex-container">
        <div>Confirmation: You chose browser <strong data-bind="text: browser"></strong>.
        </div>
        <div class="demo-offcanvas-close">
          <button class="oj-button-sm" aria-label="close" role="button"
              data-bind="click: closeToast,
                         ojComponent: {component:'ojButton', 
                                       label: 'Close message', 
                                       chroming: 'half',
                                       display: 'icons', 
                                       icons: {start: 'oj-fwk-icon-cross oj-fwk-icon'}}">
          </button>
        </div>
      </div>
    </div>



    <!-- this content will be overlayed by the toast notification -->
    <div class="oj-panel oj-margin">
      <label for="basicSelect">Select a browser</label>
      <select id="basicSelect"
        data-bind="ojComponent: {component: 'ojSelect',
                                 value: browser,
                                 optionChange: browserChangedHandler,
                                 rootAttributes: {style:'max-width:20em'}}">
        <option value="IE">Internet Explorer</option>
        <option value="FF">Firefox</option>
        <option value="CH">Chrome</option>
        <option value="OP">Opera</option>
        <option value="SA">Safari</option>
      </select>
    </div>
  </div> <!-- /end inner-wrapper -->

</div><!-- /end outer-wrapper -->

CSS

@import url('//rawgit.com/oracle/oraclejet/2.0.1/dist/css/alta/oj-alta-min.css');

#toast .flex-container {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

#toast {
  border: 1px solid #0572ce;
  box-shadow: 0 1px 3px #777;
  margin: 4px auto 0;
  width: 90%;
  /* following z-index required to overlay oj form controls */
  z-index: 1;
}

JavaScript

require(['knockout',
  'ojs/ojcore',
  'jquery',
  'ojs/ojknockout',
  'ojs/ojbutton', 'ojs/ojinputtext', 'ojs/ojinputnumber',
  'ojs/ojoffcanvas', 'ojs/ojselectcombobox'
], function(ko, oj, $) {
  'use strict';

  var ViewModel = function() {
    var self = this;

    //offcanvas options
    var toastOptions = {
      "displayMode": "overlay",
      "selector": "#toast"
    };
    
    self.browser = ko.observable(['CH']);
    
    self.browserChangedHandler = function (event, data) {
      if (data.option == "value") {
        self.showToast(data, event);
      }
    };

    // This is what a click handler might look like
    self.showToast = function(data, event) {
      oj.OffcanvasUtils.open(toastOptions);
    }

    // click handler for the close button in popup message
    // can also dismiss by clicking outside of popup panel
    self.closeToast = function() {
      return oj.OffcanvasUtils.close(toastOptions);
    };
  };


  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": "//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.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":...