Skip to content

GitLab

M
morpheus.js
Commit d6b420e1 authored by Joshua Gould's avatar Joshua Gould
Browse files
Options

scroll lens

parent b2792ab4
Hide whitespace changes
Inline Side-by-side
Showing with 248 additions and 242 deletions
js/morpheus-latest.min.js
View file @ d6b420e1
This source diff could not be displayed because it is too large. You can view the blob instead.
src/ui/form_builder.js
View file @ d6b420e1
morpheus.FormBuilder = function(options) { morpheus.FormBuilder = function (options) {
var that = this; var that = this;
this.prefix = _.uniqueId('form'); this.prefix = _.uniqueId('form');
this.$form = $('<form></form>'); this.$form = $('<form></form>');
...@@ -12,39 +12,39 @@ morpheus.FormBuilder = function(options) { ...@@ -12,39 +12,39 @@ morpheus.FormBuilder = function(options) {
this.labelClass = 'control-label'; this.labelClass = 'control-label';
this.titleClass = 'control-label'; this.titleClass = 'control-label';
} }
this.$form.on('submit', function(e) { this.$form.on('submit', function (e) {
e.preventDefault(); e.preventDefault();
}); });
this.$form.on( this.$form.on(
'dragover', 'dragover',
function(e) { function (e) {
var node = $(e.originalEvent.srcElement).parent().parent() var node = $(e.originalEvent.srcElement).parent().parent()
.prev(); .prev();
if (node.is('select') && node.hasClass('file-input')) { if (node.is('select') && node.hasClass('file-input')) {
$(e.originalEvent.srcElement).parent().css('border', $(e.originalEvent.srcElement).parent().css('border',
'1px solid black'); '1px solid black');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
}).on( }).on(
'dragenter', 'dragenter',
function(e) { function (e) {
var node = $(e.originalEvent.srcElement).parent().parent() var node = $(e.originalEvent.srcElement).parent().parent()
.prev(); .prev();
if (node.is('select') && node.hasClass('file-input')) { if (node.is('select') && node.hasClass('file-input')) {
$(e.originalEvent.srcElement).parent().css('border', $(e.originalEvent.srcElement).parent().css('border',
'1px solid black'); '1px solid black');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
}).on('dragleave', function(e) { }).on('dragleave', function (e) {
var node = $(e.originalEvent.srcElement).parent().parent().prev(); var node = $(e.originalEvent.srcElement).parent().parent().prev();
if (node.is('select') && node.hasClass('file-input')) { if (node.is('select') && node.hasClass('file-input')) {
$(e.originalEvent.srcElement).parent().css('border', ''); $(e.originalEvent.srcElement).parent().css('border', '');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
}).on('drop', function(e) { }).on('drop', function (e) {
var node = $(e.originalEvent.srcElement).parent().parent().prev(); var node = $(e.originalEvent.srcElement).parent().parent().prev();
if (node.is('select') && node.hasClass('file-input')) { if (node.is('select') && node.hasClass('file-input')) {
var isMultiple = node.data('multiple'); var isMultiple = node.data('multiple');
...@@ -58,17 +58,17 @@ morpheus.FormBuilder = function(options) { ...@@ -58,17 +58,17 @@ morpheus.FormBuilder = function(options) {
var files = e.originalEvent.dataTransfer.files; var files = e.originalEvent.dataTransfer.files;
that.setValue(name, isMultiple ? files : files[0]); that.setValue(name, isMultiple ? files : files[0]);
that.trigger('change', { that.trigger('change', {
name : name, name: name,
value : files[0] value: files[0]
}); });
} else { } else {
var url = e.originalEvent.dataTransfer.getData('URL'); var url = e.originalEvent.dataTransfer.getData('URL');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
that.setValue(name, url); that.setValue(name, isMultiple ? [url] : url);
that.trigger('change', { that.trigger('change', {
name : name, name: name,
value : url value: url
}); });
} }
} }
...@@ -78,17 +78,17 @@ morpheus.FormBuilder = function(options) { ...@@ -78,17 +78,17 @@ morpheus.FormBuilder = function(options) {
// this.fieldColumnDef = '8'; // this.fieldColumnDef = '8';
}; };
morpheus.FormBuilder.showProgressBar = function(options) { morpheus.FormBuilder.showProgressBar = function (options) {
var content = []; var content = [];
content.push('<div class="container-fluid">'); content.push('<div class="container-fluid">');
content.push('<div class="row">'); content.push('<div class="row">');
content.push('<div class="col-xs-8">'); content.push('<div class="col-xs-8">');
content content
.push('<div class="progress progress-striped active"><div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div></div>'); .push('<div class="progress progress-striped active"><div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div></div>');
content.push('</div>'); // col content.push('</div>'); // col
content.push('<div class="col-xs-2">'); content.push('<div class="col-xs-2">');
content content
.push('<input class="btn btn-default" type="button" name="stop" value="Cancel">'); .push('<input class="btn btn-default" type="button" name="stop" value="Cancel">');
content.push('</div>'); // col content.push('</div>'); // col
content.push('</div>'); // row content.push('</div>'); // row
if (options.subtitle) { if (options.subtitle) {
...@@ -100,32 +100,32 @@ morpheus.FormBuilder.showProgressBar = function(options) { ...@@ -100,32 +100,32 @@ morpheus.FormBuilder.showProgressBar = function(options) {
} }
content.push('</div>'); content.push('</div>');
var $content = $(content.join('')); var $content = $(content.join(''));
$content.find('[name=stop]').on('click', function(e) { $content.find('[name=stop]').on('click', function (e) {
options.stop(); options.stop();
e.preventDefault(); e.preventDefault();
}); });
return morpheus.FormBuilder.showInDraggableDiv({ return morpheus.FormBuilder.showInDraggableDiv({
title : options.title, title: options.title,
$content : $content $content: $content
}); });
}; };
morpheus.FormBuilder.showInDraggableDiv = function(options) { morpheus.FormBuilder.showInDraggableDiv = function (options) {
var width = options.width || '300px'; var width = options.width || '300px';
var html = []; var html = [];
html html
.push('<div style="top: 100px; position:absolute; padding-left:10px; padding-right:10px; width:' .push('<div style="top: 100px; position:absolute; padding-left:10px; padding-right:10px; width:'
+ width + width
+ ' ; background:white; box-shadow: 0 5px 15px rgba(0,0,0,0.5); border: 1px solid rgba(0,0,0,0.2); border-radius: 6px;">'); + ' ; background:white; box-shadow: 0 5px 15px rgba(0,0,0,0.5); border: 1px solid rgba(0,0,0,0.2); border-radius: 6px;">');
html html
.push('<h4 style="cursor:move; border-bottom: 1px solid #e5e5e5;" name="header">' .push('<h4 style="cursor:move; border-bottom: 1px solid #e5e5e5;" name="header">'
+ options.title + '</h4>'); + options.title + '</h4>');
html.push('<div name="content"></div>'); html.push('<div name="content"></div>');
html.push('</div>'); html.push('</div>');
var $div = $(html.join('')); var $div = $(html.join(''));
var $content = $div.find('[name=content]'); var $content = $div.find('[name=content]');
$div.find('[name=header]').on('dblclick', function() { $div.find('[name=header]').on('dblclick', function () {
if ($content.css('display') === 'none') { if ($content.css('display') === 'none') {
$content.css('display', ''); $content.css('display', '');
} else { } else {
...@@ -136,25 +136,25 @@ morpheus.FormBuilder.showInDraggableDiv = function(options) { ...@@ -136,25 +136,25 @@ morpheus.FormBuilder.showInDraggableDiv = function(options) {
options.$content.appendTo($content); options.$content.appendTo($content);
$div.css('left', ($(window).width() / 2) - $content.outerWidth() / 2); $div.css('left', ($(window).width() / 2) - $content.outerWidth() / 2);
$div.draggable({ $div.draggable({
handle : '[name=header]', handle: '[name=header]',
containment : 'document' containment: 'document'
}); });
// $div.resizable(); // $div.resizable();
$div.appendTo($(document.body)); $div.appendTo($(document.body));
return $div; return $div;
}; };
morpheus.FormBuilder.promptForDataset = function(cb) { morpheus.FormBuilder.promptForDataset = function (cb) {
var formBuilder = new morpheus.FormBuilder(); var formBuilder = new morpheus.FormBuilder();
formBuilder.append({ formBuilder.append({
name : 'file', name: 'file',
value : '', value: '',
type : 'file', type: 'file',
required : true, required: true,
help : morpheus.DatasetUtil.DATASET_FILE_FORMATS help: morpheus.DatasetUtil.DATASET_FILE_FORMATS
}); });
var $modal; var $modal;
formBuilder.on('change', function(e) { formBuilder.on('change', function (e) {
var value = e.value; var value = e.value;
if (value !== '' && value != null) { if (value !== '' && value != null) {
$modal.modal('hide'); $modal.modal('hide');
...@@ -163,25 +163,25 @@ morpheus.FormBuilder.promptForDataset = function(cb) { ...@@ -163,25 +163,25 @@ morpheus.FormBuilder.promptForDataset = function(cb) {
} }
}); });
$modal = morpheus.FormBuilder.showInModal({ $modal = morpheus.FormBuilder.showInModal({
title : 'Dataset', title: 'Dataset',
html : formBuilder.$form, html: formBuilder.$form,
close : false close: false
}); });
}; };
morpheus.FormBuilder.showInModal = function(options) { morpheus.FormBuilder.showInModal = function (options) {
var $div = morpheus.FormBuilder var $div = morpheus.FormBuilder
._showInModal({ ._showInModal({
z : options.z, z: options.z,
title : options.title, title: options.title,
html : options.html, html: options.html,
footer : options.close ? ('<button type="button" class="btn btn-default" data-dismiss="modal">' footer: options.close ? ('<button type="button" class="btn btn-default" data-dismiss="modal">'
+ options.close + '</button>') + options.close + '</button>')
: null, : null,
onClose : options.callback, onClose: options.callback,
backdrop : options.backdrop, backdrop: options.backdrop,
size : options.size size: options.size
}); });
return $div; return $div;
// if (options.draggable) { // if (options.draggable) {
// $div.draggable({ // $div.draggable({
...@@ -190,34 +190,34 @@ morpheus.FormBuilder.showInModal = function(options) { ...@@ -190,34 +190,34 @@ morpheus.FormBuilder.showInModal = function(options) {
// } // }
}; };
morpheus.FormBuilder.showOkCancel = function(options) { morpheus.FormBuilder.showOkCancel = function (options) {
options = $.extend({}, { options = $.extend({}, {
ok : true ok: true
}, options); }, options);
var footer = []; var footer = [];
if (options.ok) { if (options.ok) {
footer footer
.push('<button name="ok" type="button" class="btn btn-default">OK</button>'); .push('<button name="ok" type="button" class="btn btn-default">OK</button>');
} }
if (options.apply) { if (options.apply) {
footer footer
.push('<button name="apply" type="button" class="btn btn-default">Apply</button>'); .push('<button name="apply" type="button" class="btn btn-default">Apply</button>');
} }
footer footer
.push('<button name="cancel" type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>'); .push('<button name="cancel" type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>');
var $div = morpheus.FormBuilder._showInModal({ var $div = morpheus.FormBuilder._showInModal({
title : options.title, title: options.title,
html : options.content, html: options.content,
footer : footer.join(''), footer: footer.join(''),
onClose : options.hiddenCallback, onClose: options.hiddenCallback,
size : options.size size: options.size
}); });
// if (options.align === 'right') { // if (options.align === 'right') {
// $div.css('left', $(window).width() // $div.css('left', $(window).width()
// - $div.find('.modal-content').width() - 60); // - $div.find('.modal-content').width() - 60);
// } // }
var $ok = $div.find('[name=ok]'); var $ok = $div.find('[name=ok]');
$ok.on('click', function(e) { $ok.on('click', function (e) {
options.okCallback(); options.okCallback();
$div.modal('hide'); $div.modal('hide');
}); });
...@@ -227,8 +227,8 @@ morpheus.FormBuilder.showOkCancel = function(options) { ...@@ -227,8 +227,8 @@ morpheus.FormBuilder.showOkCancel = function(options) {
if (options.draggable) { if (options.draggable) {
$div.draggable({ $div.draggable({
handle : '.modal-header', handle: '.modal-header',
containment : 'document' containment: 'document'
}); });
} }
// $div.on('click', '[name=apply]', function(e) { // $div.on('click', '[name=apply]', function(e) {
...@@ -237,7 +237,7 @@ morpheus.FormBuilder.showOkCancel = function(options) { ...@@ -237,7 +237,7 @@ morpheus.FormBuilder.showOkCancel = function(options) {
return $div; return $div;
}; };
morpheus.FormBuilder.hasChanged = function(object, keyToUIElement) { morpheus.FormBuilder.hasChanged = function (object, keyToUIElement) {
var keys = _.keys(keyToUIElement); var keys = _.keys(keyToUIElement);
for (var i = 0; i < keys.length; i++) { for (var i = 0; i < keys.length; i++) {
var key = keys[i]; var key = keys[i];
...@@ -249,7 +249,7 @@ morpheus.FormBuilder.hasChanged = function(object, keyToUIElement) { ...@@ -249,7 +249,7 @@ morpheus.FormBuilder.hasChanged = function(object, keyToUIElement) {
} }
return false; return false;
}; };
morpheus.FormBuilder.getValue = function($element) { morpheus.FormBuilder.getValue = function ($element) {
var list = $element.data('morpheus.checkbox-list'); var list = $element.data('morpheus.checkbox-list');
if (list != null) { if (list != null) {
return list.val(); return list.val();
...@@ -261,14 +261,14 @@ morpheus.FormBuilder.getValue = function($element) { ...@@ -261,14 +261,14 @@ morpheus.FormBuilder.getValue = function($element) {
return $element.data('files'); return $element.data('files');
} }
return $element.attr('type') === 'checkbox' ? $element.prop('checked') ? true return $element.attr('type') === 'checkbox' ? $element.prop('checked') ? true
: false : false
: $element.val(); : $element.val();
}; };
morpheus.FormBuilder._showInModal = function(options) { morpheus.FormBuilder._showInModal = function (options) {
var html = []; var html = [];
options = $.extend({}, { options = $.extend({}, {
size : '' size: ''
}, options); }, options);
html.push('<div class="modal" role="dialog" aria-hidden="false"'); html.push('<div class="modal" role="dialog" aria-hidden="false"');
if (options.z) { if (options.z) {
...@@ -279,7 +279,7 @@ morpheus.FormBuilder._showInModal = function(options) { ...@@ -279,7 +279,7 @@ morpheus.FormBuilder._showInModal = function(options) {
html.push('<div class="modal-content">'); html.push('<div class="modal-content">');
html.push(' <div class="modal-header">'); html.push(' <div class="modal-header">');
html html
.push(' <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>'); .push(' <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>');
if (options.title != null) { if (options.title != null) {
html.push('<h4 class="modal-title">' + options.title + '</h4>'); html.push('<h4 class="modal-title">' + options.title + '</h4>');
} }
...@@ -295,14 +295,14 @@ morpheus.FormBuilder._showInModal = function(options) { ...@@ -295,14 +295,14 @@ morpheus.FormBuilder._showInModal = function(options) {
html.push('</div>'); html.push('</div>');
html.push('</div>'); html.push('</div>');
var $div = $(html.join('')); var $div = $(html.join(''));
$div.on('mousewheel', function(e) { $div.on('mousewheel', function (e) {
e.stopPropagation(); e.stopPropagation();
}); });
$div.find('.modal-body').html(options.html); $div.find('.modal-body').html(options.html);
$div.prependTo($(document.body)); $div.prependTo($(document.body));
$div.modal({ $div.modal({
backdrop : options.backdrop === true ? true : false, backdrop: options.backdrop === true ? true : false,
}).on('hidden.bs.modal', function(e) { }).on('hidden.bs.modal', function (e) {
$div.remove(); $div.remove();
if (options.onClose) { if (options.onClose) {
options.onClose(); options.onClose();
...@@ -332,10 +332,10 @@ morpheus.FormBuilder._showInModal = function(options) { ...@@ -332,10 +332,10 @@ morpheus.FormBuilder._showInModal = function(options) {
// return id; // return id;
// }; // };
morpheus.FormBuilder.prototype = { morpheus.FormBuilder.prototype = {
appendContent : function($content) { appendContent: function ($content) {
this.$form.append($content); this.$form.append($content);
}, },
addSeparator : function() { addSeparator: function () {
var html = []; var html = [];
html.push('<div class="form-group">'); html.push('<div class="form-group">');
if (!this.vertical) { if (!this.vertical) {
...@@ -348,14 +348,14 @@ morpheus.FormBuilder.prototype = { ...@@ -348,14 +348,14 @@ morpheus.FormBuilder.prototype = {
html.push('</div>'); html.push('</div>');
this.$form.append(html.join('')); this.$form.append(html.join(''));
}, },
_append : function(html, field, isFieldStart) { _append: function (html, field, isFieldStart) {
var that = this; var that = this;
var required = field.required; var required = field.required;
var name = field.name; var name = field.name;
var type = field.type; var type = field.type;
if (type == 'separator') { if (type == 'separator') {
html.push(this.vertical ? '<div class="form-group"></div>' html.push(this.vertical ? '<div class="form-group"></div>'
: '<div class="col-xs-12">'); : '<div class="col-xs-12">');
html.push('<hr />'); html.push('<hr />');
html.push('</div>'); html.push('</div>');
return; return;
...@@ -372,7 +372,7 @@ morpheus.FormBuilder.prototype = { ...@@ -372,7 +372,7 @@ morpheus.FormBuilder.prototype = {
} }
if (showLabel === undefined) { if (showLabel === undefined) {
showLabel = 'checkbox' !== type && 'button' !== type showLabel = 'checkbox' !== type && 'button' !== type
&& 'radio' !== type; && 'radio' !== type;
showLabel = showLabel || field.options !== undefined; showLabel = showLabel || field.options !== undefined;
} }
var id = that.prefix + '_' + name; var id = that.prefix + '_' + name;
...@@ -382,7 +382,7 @@ morpheus.FormBuilder.prototype = { ...@@ -382,7 +382,7 @@ morpheus.FormBuilder.prototype = {
} }
if (showLabel) { if (showLabel) {
html.push('<label for="' + id + '" class="' + this.labelClass html.push('<label for="' + id + '" class="' + this.labelClass
+ '">'); + '">');
html.push(title); html.push(title);
html.push('</label>'); html.push('</label>');
if (isFieldStart) { if (isFieldStart) {
...@@ -394,35 +394,35 @@ morpheus.FormBuilder.prototype = { ...@@ -394,35 +394,35 @@ morpheus.FormBuilder.prototype = {
if ('radio' === type) { if ('radio' === type) {
if (field.options) { if (field.options) {
_.each(field.options, _.each(field.options,
function(choice) { function (choice) {
var isChoiceObject = _.isObject(choice) var isChoiceObject = _.isObject(choice)
&& choice.value !== undefined; && choice.value !== undefined;
var optionValue = isChoiceObject ? choice.value var optionValue = isChoiceObject ? choice.value
: choice; : choice;
var optionText = isChoiceObject ? choice.name var optionText = isChoiceObject ? choice.name
: choice; : choice;
var selected = value === optionValue; var selected = value === optionValue;
html.push('<div class="radio"><label>'); html.push('<div class="radio"><label>');
html.push('<input value="' + optionValue html.push('<input value="' + optionValue
+ '" name="' + field.name + '" name="' + field.name
+ '" type="radio"'); + '" type="radio"');
if (selected) { if (selected) {
html.push(' checked'); html.push(' checked');
} }
html.push('> '); html.push('> ');
if (choice.icon) { if (choice.icon) {
html.push('<span class="' + choice.icon html.push('<span class="' + choice.icon
+ '"></span> '); + '"></span> ');
} }
optionText = optionText[0].toUpperCase() optionText = optionText[0].toUpperCase()
+ optionText.substring(1); + optionText.substring(1);
html.push(optionText); html.push(optionText);
html.push('</label></div>'); html.push('</label></div>');
}); });
} else { } else {
html.push('<div class="radio"><label>'); html.push('<div class="radio"><label>');
html.push('<input value="' + value + '" name="' + name html.push('<input value="' + value + '" name="' + name
+ '" id="' + id + '" type="radio"'); + '" id="' + id + '" type="radio"');
if (field.checked) { if (field.checked) {
html.push(' checked'); html.push(' checked');
} }
...@@ -433,7 +433,7 @@ morpheus.FormBuilder.prototype = { ...@@ -433,7 +433,7 @@ morpheus.FormBuilder.prototype = {
} else if ('checkbox' === type) { } else if ('checkbox' === type) {
html.push('<div class="checkbox"><label>'); html.push('<div class="checkbox"><label>');
html.push('<input name="' + name + '" id="' + id html.push('<input name="' + name + '" id="' + id
+ '" type="checkbox"'); + '" type="checkbox"');
if (value) { if (value) {
html.push(' checked'); html.push(' checked');
} }
...@@ -449,11 +449,11 @@ morpheus.FormBuilder.prototype = { ...@@ -449,11 +449,11 @@ morpheus.FormBuilder.prototype = {
// } // }
if (type == 'bootstrap-select') { if (type == 'bootstrap-select') {
html.push('<select data-selected-text-format="count" name="' html.push('<select data-selected-text-format="count" name="'
+ name + '" id="' + id + name + '" id="' + id
+ '" class="selectpicker form-control"'); + '" class="selectpicker form-control"');
} else { } else {
html.push('<select name="' + name + '" id="' + id html.push('<select name="' + name + '" id="' + id
+ '" class="form-control"'); + '" class="form-control"');
} }
if (disabled) { if (disabled) {
html.push(' disabled'); html.push(' disabled');
...@@ -462,13 +462,13 @@ morpheus.FormBuilder.prototype = { ...@@ -462,13 +462,13 @@ morpheus.FormBuilder.prototype = {
html.push(' multiple'); html.push(' multiple');
} }
html.push('>'); html.push('>');
_.each(field.options, function(choice) { _.each(field.options, function (choice) {
if (choice && choice.divider) { if (choice && choice.divider) {
html.push('<option data-divider="true"></option>'); html.push('<option data-divider="true"></option>');
} else { } else {
html.push('<option value="'); html.push('<option value="');
var isChoiceObject = _.isObject(choice) var isChoiceObject = _.isObject(choice)
&& choice.value !== undefined; && choice.value !== undefined;
var optionValue = isChoiceObject ? choice.value : choice; var optionValue = isChoiceObject ? choice.value : choice;
var optionText = isChoiceObject ? choice.name : choice; var optionText = isChoiceObject ? choice.name : choice;
html.push(optionValue); html.push(optionValue);
...@@ -490,31 +490,31 @@ morpheus.FormBuilder.prototype = { ...@@ -490,31 +490,31 @@ morpheus.FormBuilder.prototype = {
html.push('</select>'); html.push('</select>');
if (field.type == 'bootstrap-select' && field.toggle) { if (field.type == 'bootstrap-select' && field.toggle) {
html.push('<p class="help-block"><a name="' + name html.push('<p class="help-block"><a name="' + name
+ '_all" href="#">All</a>&nbsp;|&nbsp;<a name="' + name + '_all" href="#">All</a>&nbsp;|&nbsp;<a name="' + name
+ '_none" href="#">None</a></p>'); + '_none" href="#">None</a></p>');
that.$form.on('click', '[name=' + name + '_all]', that.$form.on('click', '[name=' + name + '_all]',
function(evt) { function (evt) {
evt.preventDefault(); evt.preventDefault();
var $select = that.$form var $select = that.$form
.find('[name=' + name + ']'); .find('[name=' + name + ']');
$select.selectpicker('val', $.map($select $select.selectpicker('val', $.map($select
.find('option'), function(o) { .find('option'), function (o) {
return $(o).val(); return $(o).val();
})); }));
$select.trigger('change'); $select.trigger('change');
}); });
that.$form.on('click', '[name=' + name + '_none]', that.$form.on('click', '[name=' + name + '_none]',
function(evt) { function (evt) {
evt.preventDefault(); evt.preventDefault();
var $select = that.$form var $select = that.$form
.find('[name=' + name + ']'); .find('[name=' + name + ']');
$select.selectpicker('val', []); $select.selectpicker('val', []);
$select.trigger('change'); $select.trigger('change');
}); });
} }
} else if ('textarea' == type) { } else if ('textarea' == type) {
html.push('<textarea id="' + id + '" class="form-control" name="' html.push('<textarea id="' + id + '" class="form-control" name="'
+ name + '"'); + name + '"');
if (required) { if (required) {
html.push(' required'); html.push(' required');
} }
...@@ -531,7 +531,7 @@ morpheus.FormBuilder.prototype = { ...@@ -531,7 +531,7 @@ morpheus.FormBuilder.prototype = {
html.push('</textarea>'); html.push('</textarea>');
} else if ('button' == type) { } else if ('button' == type) {
html.push('<button id="' + id + '" name="' + name html.push('<button id="' + id + '" name="' + name
+ '" type="button" class="btn btn-default btn-sm">'); + '" type="button" class="btn btn-default btn-sm">');
if (field.icon) { if (field.icon) {
html.push('<span class="' + field.icon + '"></span> '); html.push('<span class="' + field.icon + '"></span> ');
} }
...@@ -542,14 +542,14 @@ morpheus.FormBuilder.prototype = { ...@@ -542,14 +542,14 @@ morpheus.FormBuilder.prototype = {
} else if ('file' === type) { } else if ('file' === type) {
var isMultiple = field.multiple; var isMultiple = field.multiple;
html html
.push('<select data-multiple="' .push('<select data-multiple="'
+ isMultiple + isMultiple
+ '" type="file" title="' + '" type="file" title="'
+ (field.placeholder || (isMultiple ? 'Choose one or more files...' + (field.placeholder || (isMultiple ? 'Choose one or more files...'
: 'Choose a file...')) : 'Choose a file...'))
+ '" name="' + '" name="'
+ name + name
+ '_picker" data-width="35%" class="file-input selectpicker form-control">'); + '_picker" data-width="35%" class="file-input selectpicker form-control">');
var npre = 1; var npre = 1;
var options = []; var options = [];
...@@ -563,9 +563,9 @@ morpheus.FormBuilder.prototype = { ...@@ -563,9 +563,9 @@ morpheus.FormBuilder.prototype = {
if (typeof Dropbox !== 'undefined') { if (typeof Dropbox !== 'undefined') {
options.push('Dropbox'); options.push('Dropbox');
} }
_.each(options, function(choice, index) { _.each(options, function (choice, index) {
var isChoiceObject = _.isObject(choice) var isChoiceObject = _.isObject(choice)
&& choice.value !== undefined; && choice.value !== undefined;
var optionValue = isChoiceObject ? choice.value : choice; var optionValue = isChoiceObject ? choice.value : choice;
var optionText = isChoiceObject ? choice.name : choice; var optionText = isChoiceObject ? choice.name : choice;
html.push('<option value="'); html.push('<option value="');
...@@ -591,70 +591,75 @@ morpheus.FormBuilder.prototype = { ...@@ -591,70 +591,75 @@ morpheus.FormBuilder.prototype = {
if (field.url !== false) { if (field.url !== false) {
html.push('<div>'); html.push('<div>');
html html
.push('<input placeholder="' .push('<input placeholder="'
+ (isMultiple ? 'Enter one or more URLs' + (isMultiple ? 'Enter one or more URLs'
: 'Enter a URL') : 'Enter a URL')
+ '" class="form-control" style="width:50%; display:none;" type="text" name="' + '" class="form-control" style="width:50%; display:none;" type="text" name="'
+ name + '_text">'); + name + '_text">');
html.push('</div>'); html.push('</div>');
} }
html.push('<input style="display:none;" type="file" name="' + name html.push('<input style="display:none;" type="file" name="' + name
+ '_file"' + (isMultiple ? ' multiple' : '') + '>'); + '_file"' + (isMultiple ? ' multiple' : '') + '>');
// browse button clicked // browse button clicked
// select change // select change
that.$form that.$form
.on( .on(
'change', 'change',
'[name=' + name + '_picker]', '[name=' + name + '_picker]',
function(evt) { function (evt) {
var $this = $(this); var $this = $(this);
var val = $this.val(); var val = $this.val();
var showTextInput = val === 'URL'; var showTextInput = val === 'URL';
if ('Dropbox' === val) { if ('Dropbox' === val) {
var options = { var options = {
success : function(results) { success: function (results) {
var val = !isMultiple ? results[0].link var val = !isMultiple ? results[0].link
: results.map(function( : results.map(function (result) {
result) { return result.link;
return result.link; });
}); that.setValue(name, val);
that.setValue(name, val); that.trigger('change', {
that.trigger('change', { name: name,
name : name, value: val
value : val });
}); },
}, linkType: 'direct',
linkType : 'direct', multiselect: isMultiple
multiselect : isMultiple };
}; Dropbox.choose(options);
Dropbox.choose(options); } else if ('My Computer' === val) {
} else if ('My Computer' === val) { that.$form.find('[name=' + name + '_file]')
that.$form.find('[name=' + name + '_file]') .click();
.click(); }
} that.$form.find('[name=' + name + '_text]')
that.$form.find('[name=' + name + '_text]') .css('display',
.css('display', showTextInput ? '' : 'none');
showTextInput ? '' : 'none'); });
});
// URL // URL
that.$form.on('keyup', '[name=' + name + '_text]', function(evt) { that.$form.on('keyup', '[name=' + name + '_text]', function (evt) {
var text = $.trim($(this).val()); var text = $.trim($(this).val());
if (isMultiple) {
text = text.split(',').filter(function (t) {
t = $.trim(t);
return t !== '';
});
}
that.setValue(name, text); that.setValue(name, text);
if (evt.which === 13) { if (evt.which === 13) {
that.trigger('change', { that.trigger('change', {
name : name, name: name,
value : text value: text
}); });
} }
}); });
// browse file selected // browse file selected
that.$form.on('change', '[name=' + name + '_file]', function(evt) { that.$form.on('change', '[name=' + name + '_file]', function (evt) {
var files = evt.target.files; // FileList object var files = evt.target.files; // FileList object
that.setValue(name, isMultiple ? files : files[0]); that.setValue(name, isMultiple ? files : files[0]);
that.trigger('change', { that.trigger('change', {
name : name, name: name,
value : files[0] value: files[0]
}); });
}); });
} else { } else {
...@@ -663,8 +668,8 @@ morpheus.FormBuilder.prototype = { ...@@ -663,8 +668,8 @@ morpheus.FormBuilder.prototype = {
html.push('<div name="' + name + '" id="' + id + '"'); html.push('<div name="' + name + '" id="' + id + '"');
} else { } else {
html.push('<input type="' + type html.push('<input type="' + type
+ '" class="form-control" name="' + name + '" id="' + '" class="form-control" name="' + name + '" id="'
+ id + '"'); + id + '"');
} }
if (value != null) { if (value != null) {
html.push(' value="' + value + '"'); html.push(' value="' + value + '"');
...@@ -689,15 +694,15 @@ morpheus.FormBuilder.prototype = { ...@@ -689,15 +694,15 @@ morpheus.FormBuilder.prototype = {
html.push('</span>'); html.push('</span>');
} }
}, },
append : function(fields) { append: function (fields) {
var html = []; var html = [];
var that = this; var that = this;
var isArray = morpheus.Util.isArray(fields); var isArray = morpheus.Util.isArray(fields);
if (!isArray) { if (!isArray) {
fields = [ fields ]; fields = [fields];
} }
html.push('<div class="form-group">'); html.push('<div class="form-group">');
_.each(fields, function(field, index) { _.each(fields, function (field, index) {
that._append(html, field, index === 0); that._append(html, field, index === 0);
}); });
html.push('</div>'); html.push('</div>');
...@@ -707,38 +712,38 @@ morpheus.FormBuilder.prototype = { ...@@ -707,38 +712,38 @@ morpheus.FormBuilder.prototype = {
var checkBoxLists = $div.find('.checkbox-list'); var checkBoxLists = $div.find('.checkbox-list');
if (checkBoxLists.length > 0) { if (checkBoxLists.length > 0) {
var checkBoxIndex = 0; var checkBoxIndex = 0;
_.each(fields, function(field) { _.each(fields, function (field) {
// needs to already be in dom // needs to already be in dom
if (field.type === 'checkbox-list') { if (field.type === 'checkbox-list') {
var list = new morpheus.CheckBoxList({ var list = new morpheus.CheckBoxList({
responsive : false, responsive: false,
$el : $(checkBoxLists[checkBoxIndex]), $el: $(checkBoxLists[checkBoxIndex]),
items : field.options items: field.options
}); });
$(checkBoxLists[checkBoxIndex]).data( $(checkBoxLists[checkBoxIndex]).data(
'morpheus.checkbox-list', list); 'morpheus.checkbox-list', list);
checkBoxIndex++; checkBoxIndex++;
} }
}); });
} }
$div.find('.selectpicker').selectpicker({ $div.find('.selectpicker').selectpicker({
iconBase : 'fa', iconBase: 'fa',
tickIcon : 'fa-check', tickIcon: 'fa-check',
style : 'btn-default btn-sm' style: 'btn-default btn-sm'
}); });
}, },
clear : function() { clear: function () {
this.$form.empty(); this.$form.empty();
}, },
getValue : function(name) { getValue: function (name) {
var $v = this.$form.find('[name=' + name + ']'); var $v = this.$form.find('[name=' + name + ']');
if ($v.length === 0) { if ($v.length === 0) {
$v = this.$form.find('[name=' + name + '_picker]'); $v = this.$form.find('[name=' + name + '_picker]');
} }
return morpheus.FormBuilder.getValue($v); return morpheus.FormBuilder.getValue($v);
}, },
setOptions : function(name, options, selectFirst) { setOptions: function (name, options, selectFirst) {
var $select = this.$form.find('[name=' + name + ']'); var $select = this.$form.find('[name=' + name + ']');
var checkBoxList = $select.data('morpheus.checkbox-list'); var checkBoxList = $select.data('morpheus.checkbox-list');
if (checkBoxList) { if (checkBoxList) {
...@@ -746,10 +751,10 @@ morpheus.FormBuilder.prototype = { ...@@ -746,10 +751,10 @@ morpheus.FormBuilder.prototype = {
} else { } else {
var html = []; var html = [];
var selection = $select.val(); var selection = $select.val();
_.each(options, function(choice) { _.each(options, function (choice) {
html.push('<option value="'); html.push('<option value="');
var isChoiceObject = _.isObject(choice) var isChoiceObject = _.isObject(choice)
&& choice.value !== undefined; && choice.value !== undefined;
var optionValue = isChoiceObject ? choice.value : choice; var optionValue = isChoiceObject ? choice.value : choice;
var optionText = isChoiceObject ? choice.name : choice; var optionText = isChoiceObject ? choice.name : choice;
html.push(optionValue); html.push(optionValue);
...@@ -773,14 +778,14 @@ morpheus.FormBuilder.prototype = { ...@@ -773,14 +778,14 @@ morpheus.FormBuilder.prototype = {
} }
} }
}, },
find : function(name) { find: function (name) {
return this.$form.find('[name=' + name + ']'); return this.$form.find('[name=' + name + ']');
}, },
setHelpText : function(name, value) { setHelpText: function (name, value) {
var v = this.$form.find('[name=' + name + '_help]'); var v = this.$form.find('[name=' + name + '_help]');
v.html(value); v.html(value);
}, },
setValue : function(name, value) { setValue: function (name, value) {
var v = this.$form.find('[name=' + name + ']'); var v = this.$form.find('[name=' + name + ']');
if (v.length === 0) { if (v.length === 0) {
v = this.$form.find('[name=' + name + '_picker]'); v = this.$form.find('[name=' + name + '_picker]');
...@@ -808,21 +813,21 @@ morpheus.FormBuilder.prototype = { ...@@ -808,21 +813,21 @@ morpheus.FormBuilder.prototype = {
} }
}, },
setVisible : function(name, visible) { setVisible: function (name, visible) {
var $div = this.$form.find('[name=' + name + ']') var $div = this.$form.find('[name=' + name + ']')
.parents('.form-group'); .parents('.form-group');
if (visible) { if (visible) {
$div.show(); $div.show();
} else { } else {
$div.hide(); $div.hide();
} }
}, },
remove : function(name) { remove: function (name) {
var $div = this.$form.find('[name=' + name + ']') var $div = this.$form.find('[name=' + name + ']')
.parents('.form-group'); .parents('.form-group');
$div.remove(); $div.remove();
}, },
setEnabled : function(name, enabled) { setEnabled: function (name, enabled) {
var $div = this.$form.find('[name=' + name + ']'); var $div = this.$form.find('[name=' + name + ']');
$div.attr('disabled', !enabled); $div.attr('disabled', !enabled);
if (!enabled) { if (!enabled) {
...@@ -832,4 +837,4 @@ morpheus.FormBuilder.prototype = { ...@@ -832,4 +837,4 @@ morpheus.FormBuilder.prototype = {
} }
} }
}; };
morpheus.Util.extend(morpheus.FormBuilder, morpheus.Events); morpheus.Util.extend(morpheus.FormBuilder, morpheus.Events);
\ No newline at end of file
src/ui/heat_map.js
View file @ d6b420e1
...@@ -2177,6 +2177,7 @@ morpheus.HeatMap.prototype = { ...@@ -2177,6 +2177,7 @@ morpheus.HeatMap.prototype = {
canvas.height = heatMapHeight * morpheus.CanvasUtil.BACKING_SCALE; canvas.height = heatMapHeight * morpheus.CanvasUtil.BACKING_SCALE;
canvas.style.height = heatMapHeight + 'px'; canvas.style.height = heatMapHeight + 'px';
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
morpheus.CanvasUtil.resetTransform(context);
context.save(); context.save();
context.translate(-this.heatmap.lastClip.x, -startPix); context.translate(-this.heatmap.lastClip.x, -startPix);
context.rect(this.heatmap.lastClip.x, startPix, this.heatmap.lastClip.width, this.heatmap.lastClip.height); context.rect(this.heatmap.lastClip.x, startPix, this.heatmap.lastClip.width, this.heatmap.lastClip.height);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment