patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
319 lines (299 loc) • 16.8 kB
HTML
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us">
<!--<![endif]-->
<head>
<title>Inline edit in a form - PatternFly</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../img/favicon.ico">
<!-- iPad retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../img/apple-touch-icon-precomposed-152.png">
<!-- iPad retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../img/apple-touch-icon-precomposed-144.png">
<!-- iPad non-retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="../img/apple-touch-icon-precomposed-76.png">
<!-- iPad non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../img/apple-touch-icon-precomposed-72.png">
<!-- iPhone 6 Plus icon -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../img/apple-touch-icon-precomposed-180.png">
<!-- iPhone retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../img/apple-touch-icon-precomposed-114.png">
<!-- iPhone non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../img/apple-touch-icon-precomposed-57.png">
<link rel="stylesheet" href="../css/patternfly.min.css" >
<link rel="stylesheet" href="../css/patternfly-additions.min.css" >
<link href="tests.css" rel="stylesheet" media="screen, print">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="https://rawgit.com/patternfly/patternfly-bootstrap-combobox/master/js/bootstrap-combobox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<script src="../js/patternfly.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Inline edit in a form</h1>
</div>
<div class="alert alert-warning">
<span class="pficon pficon-warning-triangle-o"></span>
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
</div>
<hr>
<form class="form-horizontal" role="form">
<div class="form-group" id="name-field">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10 form-control-pf-editable">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Name: </span>
<span>Mike</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<div class="form-control-pf-textbox">
<input type="text" value="Mike" class="form-control form-control-pf-editor" autocomplete="off" aria-label="name"/>
<button type="button" class="form-control-pf-empty" aria-label="Clear Value">
<span class="fa fa-times-circle fa-lg"></span>
</button>
</div>
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group" id="gender-field">
<label class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10 form-control-pf-editable">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Gender: </span>
<span>Male</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<select class="selectpicker form-control-pf-editor" autocomplete="off" aria-label="gender">
<option>Male</option>
<option>Female</option>
</select>
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group" id="depart-field">
<label class="col-sm-2 control-label">Department</label>
<div class="col-sm-10 form-control-pf-editable">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Department: </span>
<span>UXD</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<select class="form-control combobox form-control-pf-editor" autocomplete="off" aria-label="department">
<option value="accounting">Accounting</option>
<option value="automic">Automic</option>
<option value="certification">Certification</option>
<option value="devops">DevOps</option>
<option value="entitlement">Entitlement</option>
<option value="epm">EPM</option>
<option value="git">GIT</option>
<option value="gws">GWS</option>
<option value="hr">HR</option>
<option value="jboss">JBOSS</option>
<option value="kernel">Kernel</option>
<option value="kvm">KVM</option>
<option value="legal">Legal</option>
<option value="nfv">NFV</option>
<option value="openshift">Openshift</option>
<option value="qe">QE</option>
<option value="rhu">RHU</option>
<option value="sales">Sales</option>
<option value="uxd" selected="selected">UXD</option>
<option value="virt">Virt</option>
</select>
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group" id="hiredate-field">
<label class="col-sm-2 control-label">Hiredate</label>
<div class="col-sm-10 form-control-pf-editable">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Hiredate: </span>
<span>03/13/2013</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<input type="text" class="bootstrap-datepicker form-control form-control-pf-editor" value="03/13/2013" autocomplete="off" aria-label="hiredate"/>
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group" id="interests-field">
<label class="col-sm-2 control-label">Interests and hobbies</label>
<div class="col-sm-10 form-control-pf-editable">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Interests and Hobbies: </span>
<span>cooking, fishing, sports, travel</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<select class="selectpicker form-control-pf-editor" multiple autocomplete="off" aria-label="interests and hobbies">
<option selected="selected">Cooking</option>
<option>Drama</option>
<option selected="selected">Fishing</option>
<option>Fitness</option>
<option>Literature</option>
<option>Movie</option>
<option>Music</option>
<option>Painting</option>
<option selected="selected">Sports</option>
<option selected="selected">Travel</option>
</select>
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
<div class="form-group" id="profile-field">
<label class="col-sm-2 control-label">Personal profile</label>
<div class="col-sm-10 form-control-pf-editable form-control-pf-full-width">
<span class="spinner spinner-sm"></span>
<button type="button" class="form-control-pf-value">
<span class="sr-only">Edit Personal Profile: </span>
<span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</button>
<textarea class="form-control form-control-pf-editor" autocomplete="off" aria-label="personal profile">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</textarea>
<div class="action-buttons">
<button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(function() {
$('.combobox').combobox();
$('.bootstrap-datepicker').datepicker({
autoclose: true,
todayBtn: 'linked',
todayHighlight: true
})
.on('changeDate', monitorValueChange);
$('.form-control-pf-editable').find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker').each(function () {
var $this = $(this);
$this.data('old-value', $this.val());
});
function monitorValueChange (e) {
var $editor = e.target ? $(e.currentTarget) : e;
var $field = $editor.closest('.form-control-pf-editable')
var $save = $field.find('.form-control-pf-save');
if ($editor.is('[multiple]')) {
var oldValues = $editor.data('old-value');
var newValues = $editor.val();
$save.attr('disabled', (oldValues.length === newValues.length) &&
oldValues.every(function (el, i) { return el === newValues[i]; }));
} else if ($editor.is('.combobox')) {
var newOption = $editor.val().trim().toLowerCase();
var options = $field.children('.form-control-pf-editor').find('option').map(function() { return $(this).text().toLowerCase(); });
$save.attr('disabled', $editor.data('old-value').toLowerCase() === newOption ||
(newOption !== '' && $.inArray(newOption, options) === -1));
} else if ($editor.is('.bootstrap-datepicker')) {
$save.attr('disabled', !moment($editor.val().trim(), 'MM/DD/YYYY', true).isValid() ||
$editor.data('old-value') === $editor.val().trim());
} else {
$save.attr('disabled', $editor.data('old-value') === $editor.val().trim());
}
}
function cancelEdit ($field) {
var $editor = $field.find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker');
var $status = $field.find('.status');
if ($editor.is('.selectpicker')) {
$editor.selectpicker('val', $editor.data('old-value'));
} else if ($editor.is('.bootstrap-datepicker')) {
$editor.datepicker('update', $editor.data('old-value'));
} else {
$editor.val($editor.data('old-value'));
}
$field.find('.form-control-pf-save').attr('disabled', true);
$status.removeClass('spinner spinner-xs spinner-inline').addClass('fa fa-lg fa-times-circle');
$field.removeClass('form-control-pf-edit');
}
function triggerEdit (e) {
if ($('.form-control-pf-editable.form-control-pf-edit').length) {
cancelEdit($('.form-control-pf-editable.form-control-pf-edit'));
}
var $field = $(e.delegateTarget);
var $editor = $field.find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker');
$field.addClass('form-control-pf-edit');
if ($editor.is('.selectpicker')) {
$field.find('.dropdown-toggle').focus();
} else if ($editor.is('.combobox')) {
$field.find('.combobox-selected .form-control-pf-editor').select();
} else if ($editor.is('.bootstrap-datepicker')) {
$editor.select();
} else {
$editor.focus().val('').val($editor.data('old-value'));
if ($editor.is('textarea')) {
$editor.scrollTop($editor[0].scrollHeight - $editor.height());
}
}
}
$('.form-control-pf-editable').on('click', '.form-control-pf-value', triggerEdit);
$('.form-control-pf-editable').on('keyup', '.form-control-pf-value', function (e) {
if (e.which === 13) {
triggerEdit(e);
}
});
$(window).on('click', function (e) {
if ($('.form-control-pf-editable.form-control-pf-edit').length && !$(e.target).closest('.form-control-pf-editable.form-control-pf-edit').length) {
cancelEdit($('.form-control-pf-editable.form-control-pf-edit'));
}
});
$('.form-control-pf-editable').find('input.form-control-pf-editor, textarea.form-control-pf-editor').on('keyup', monitorValueChange);
$('.form-control-pf-editable').find('.combobox-container')
.on('click', '[data-dropdown]', function (e) {
if (!$(e.currentTarget).find('.glyphicon-remove').is(':visible')) {
monitorValueChange($(e.currentTarget).siblings('.form-control-pf-editor'));
}
})
.on('click', '[data-value]', function (e) {
monitorValueChange($(e.currentTarget).parent().siblings('.form-control-pf-editor'));
});
$('.form-control-pf-editable').on('change', '.selectpicker', monitorValueChange);
$('.form-control-pf-editable').on('click', '.form-control-pf-empty', function (e) {
$(e.delegateTarget).find('.form-control-pf-editor').val('').focus();
monitorValueChange($(e.currentTarget).siblings('.form-control-pf-editor'));
});
$('.form-control-pf-editable').on('click', '.form-control-pf-save', function (e) {
var $field = $(e.delegateTarget), newValue, newText;
var $editor = $field.find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker');
if ($editor.is('.selectpicker')) {
newValue = $editor.val();
if ($editor.is('[multiple]')) {
newText = newValue.join(', ');
} else {
newText = newValue;
}
} else {
newText = newValue = $editor.val().trim();
}
$editor.data('old-value', newValue);
if ($editor.is('textarea, :input:not(.combobox):not(.bootstrap-datepicker)')) {
$editor.val(newValue);
}
$field.removeClass('form-control-pf-edit').addClass('form-control-pf-updating').find('.form-control-pf-value').children('span:not(.sr-only)').text(newText);
$field.find('.form-control-pf-save').attr('disabled', true);
setTimeout(function() {
$field.removeClass('form-control-pf-updating');
}, 1000);
});
$('.form-control-pf-editable').on('click', '.form-control-pf-cancel', function (e) {
cancelEdit($(e.delegateTarget));
});
});
</script>
</div><!-- /container -->
</body>
</html>