ojDialog Fade-in

Apply a fade-in animation to ojDialog

by Jim Marion

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
<div id="dialogWrapper">
  <div style="display:none" id="modalDialog1" title="Modal Dialog" 
       data-bind="ojComponent:{component: 'ojDialog',
                               initialVisibility: 'hide',
                               open: dialogOpen,
                               close: dialogClose,
                               rootAttributes: {
                                 class: 'animate'
                               }}">
     <div class="oj-dialog-body">
       The dialog window can be moved, resized and closed with the 'x' icon.
       Arbitrary content can be added to the the oj-dialog-body and oj-dialog-footer sections.
     </div>
     <div class="oj-dialog-footer">
        <button id="okButton" data-bind="click: closeDialog,
                                         ojComponent: {component: 'ojButton',
                                                       label: 'OK'}"> </button>
      </div>
  </div>
  <button id="buttonOpener" data-bind="click: openDialog,  
                                       ojComponent: {component: 'ojButton',
                                                     label: 'Open Modal Dialog'}"></button>

</div>

CSS

@import url('//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/css/alta/oj-alta.css');

.oj-dialog.animate {
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.oj-dialog.animate.fully-opaque {
  opacity: 1;
}

JavaScript

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": "//cdn.rawgit.com/jquery/jquery-ui/1-11-stable/ui",

    "promise": "//cdn.rawgit.com/components/es6-promise/c95149ffaa2e8162601c57d4282362eac84f929b/promise.min",
    "hammerjs": "//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min",
    "ojdnd": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min",
    "ojs": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/js/libs/oj/debug",
    "ojL10n": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/js/libs/oj/ojL10n",
    "ojtranslations": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/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'
      }
    }
  }
});

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

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

    self.openDialog = function() {
      $("#modalDialog1").ojDialog("open");
    };
 ...