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;
//number converter for alert message because i couldn't get the dollar amount to line up except as a <strong>
var converterFactory = oj.Validation.converterFactory("number");
var options = {
style: "currency",
currency: "USD",
minimumIntegerDigits: 1
};
self.converter = converterFactory.createConverter(options);
//LOVs for my employees
self.employees = ko.observableArray([{
value: 'Sam Malone',
label: 'Sam Malone'
}, {
value: 'Carla Torelli',
label: 'Carla Torelli'
}, {
value: 'Woody Boyd',
label: 'Woody Boyd'
}, {
value: 'Rebecca Howe',
label: 'Rebecca Howe'
}, {
value: 'Diane Chambers',
label: 'Diane Chambers'
}, {
value: 'Ernie Pantusso',
label: 'Ernie Pantusso'
}]);
//selected choices from form
self.employee = ko.observable();
self.assignment = ko.observable();
self.hourlyRate = ko.observable();
//formatted string with dollar sign
self.rate = ko.computed(function() {
return self.converter.format(self.hourlyRate() ? self.hourlyRate() : 0);
});
//LOVs for new assignment
self.groupData = ko.observableArray([{
label: "Front of house",
children: [{
value: "Server",
label: "Server"
}, {
value: "Server trainee",
label: "Server trainee"
}, {
value: "Host/Hostess",
label: "Host/Hostess"
}, {
value: "Bartender",
label: "Bartender"
}]
}, {
label: "Kitchen",
children: [{
value: "Line Cook",
label: "Line Cook"
}, {
value: "Dishwasher",
label: "Dishwasher"
}, {
value: "Kitchen Manager",
label: "Kitchen Manager"
}]
}]);
//click handler for submit button press
self.buttonClick = function(data, event) {
//dim the button while waiting for call to return
$('#button').ojButton({
"disabled": true
});
//a little delay action between button click and confirmation to simulate API call
setTimeout(function() {
oj.OffcanvasUtils.open(self.innerDrawer);
$('#button').ojButton({
"disabled": false
});
}, Math.floor(Math.random() * 1200) + 333);
}
//offcanvas options
this.innerDrawer = {
"displayMode": "overlay",
"selector": "#innerDrawer"
};
//click handler for the close button in popup message; can also dismiss by clicking outside of popup panel
this.closeInner = function() {
return oj.OffcanvasUtils.close(this.innerDrawer);
};
};
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">
<!-- had to cheat with a z-index to get the drawer to come up over top of the form elements-->
<div id="wrapper" class="oj-offcanvas-inner-wrapper" >
<!-- inner start offcanvas -->
<div id="innerDrawer" class="oj-offcanvas-top oj-panel oj-panel-alt2" style="z-index: 9999; outline: none">
<div class="demo-offcanvas-close">
<button class="oj-button-sm" aria-label="close" role="button" data-bind="click: closeInner,
ojComponent: {component:'ojButton',
label: 'Close inner offcanvas',
chroming: 'half',
display: 'icons',
icons: {start: 'oj-fwk-icon-cross oj-fwk-icon'}}">
</button>
</div>
<div>Confirmation: <strong data-bind="text: employee"></strong> is assigned to <strong data-bind="text: assignment"></strong> at <strong data-bind="text: rate"></strong>/hour.
</div>
</div>
<h1>Employee New Assignment</h1>
<hr/>
<div id="form-container" class="oj-form-layout">
<div class="oj-form oj-sm-odd-cols-12 oj-md-odd-cols-4 oj-md-labels-inline">
<div class="oj-flex">
<div class="oj-flex-item">
<label for="combobox3">My employees</label>
</div>
<div class="oj-flex-item">
<input id="combobox3" data-bind="ojComponent: {
component: 'ojCombobox',
required: true,
options: employees,
value: employee,
rootAttributes: {style:'max-width:20em'}}" />
</div>
</div>
<div class="oj-flex">
<div class="oj-flex-item">
<label for="combobox2">New Assignment</label>
</div>
<div class="oj-flex-item">
<input id="combobox2" data-bind="ojComponent: {
component: 'ojCombobox',
required: true,
value: assignment,
options: groupData,
rootAttributes: {style:'max-width:20em'}}" />
</div>
</div>
<div class="oj-flex">
<div class="oj-flex-item">
<label for="currency1">Hourly Rate</label>
</div>
<input id="currency1" name="currency1" title="enter an amount with or without grouping separator" data-bind="ojComponent: {
component: 'ojInputNumber',
value: hourlyRate,
step: '.25',
min: 0,
required: true,
converter: {
type: 'number',
options: {
style: 'currency',
currency: '$',
currencyDisplay: 'code',
pattern: 'ยค ##,##0.00'}}}" />
</div>
<div class="oj-flex oj-sm-justify-content-flex-end">
<div class="oj-flex-item ">
<button id="button" data-bind="click: buttonClick,
ojComponent: { component: 'ojButton', label: 'Submit' }">
</button>
</div>
</div>
</div>
</div>
</div>
</div>
@import url('//rawgit.com/oracle/oraclejet/2.0.1/dist/css/alta/oj-alta-min.css');
.demo-offcanvas-close {
float: right;
margin-right: -7px;
margin-top: -7px;
}
.oj-offcanvas-top {
outline: none;
border-bottom: 4px solid #7EBAF7
}