Growl-ing with Oracle JET

Growl-like notifications using Oracle JET's oj.Offcanvas

by Jim Marion

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
<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 -->

CSS

@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;
}

JavaScript

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":...