Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 1x 1x 1x 33x 33x 33x 33x 33x 33x 33x 33x 3x 33x 19x 19x 33x 25x 25x 8x 5x 5x 1x | var util = require( './util' ),
Button = require( './Button' ),
icons = require( './icons' );
/**
* Creates a header
*
* @param {string|View} headingOrView (HTML allowed)
* @param {View[]} headerActions
* @param {View} [headerCancel] defaults to cancel button
* @param {string} [additionalClassNames] (should be escaped)
* @return {Element}
*/
function makeHeader( headingOrView, headerActions, headerCancel, additionalClassNames ) {
const heading = typeof headingOrView === 'string' ? headingOrView : undefined,
templateData = {
hasActions: headerActions && headerActions.length,
isHidden: false,
heading
},
html = util.template( `
<div class="overlay-header header ${additionalClassNames || ''} hideable">
<ul class="header-cancel">
<li></li>
</ul>
{{{heading}}}
{{#hasActions}}
<div class="header-action"></div>
{{/hasActions}}
</div>
` ).render( templateData );
headerCancel = headerCancel || icons.cancel();
const $el = util.parseHTML( html );
// Truncate any text inside in the overlay header.
$el.find( 'h2 span' ).addClass( 'truncated-text' );
$el.find( '.header-cancel li' ).append(
headerCancel.$el
);
if ( heading === undefined ) {
headingOrView.$el.insertAfter( $el.find( '.header-cancel' ) );
}
if ( headerActions && headerActions.length ) {
$el.find( '.header-action' ).append(
headerActions.map( ( component ) => component.$el )
);
}
return $el[0];
}
/**
* Creates a header with a h2 heading
*
* @param {string} heading (HTML allowed)
* @param {View[]} headerActions
* @param {View} [headerCancel] defaults to cancel button
* @param {string} [additionalClassNames] (should be escaped)
* @return {Element}
*/
function header( heading, headerActions, headerCancel, additionalClassNames ) {
heading = `<div class="overlay-title"><h2>${heading}</h2></div>`;
return makeHeader( heading, headerActions, headerCancel, additionalClassNames );
}
/**
* Creates a header with a form
*
* @param {string|View} formHTMLOrView of the header
* @param {View[]} headerActions
* @param {View} [headerCancel] defaults to cancel button
* @param {string} [additionalClassNames] (should be escaped)
* @return {Element}
*/
function formHeader( formHTMLOrView, headerActions, headerCancel, additionalClassNames ) {
return makeHeader( formHTMLOrView, headerActions, headerCancel, additionalClassNames );
}
/**
* Creates a header with a form
*
* @param {string} heading of the header
* @param {string} additionalClassNames of the header
* @return {Element}
*/
function saveHeader( heading, additionalClassNames ) {
return header(
heading,
[
new Button( {
tagName: 'button',
additionalClassNames: 'save submit',
disabled: true,
label: util.saveButtonMessage(),
size: 'large'
} )
],
icons.back(),
additionalClassNames
);
}
/**
* Creates a header with a form
*
* @param {string} heading of the header
* @param {string} additionalClassNames of the header
* @return {Element}
*/
function savingHeader( heading ) {
return header(
heading,
[
icons.spinner( {
additionalClassNames: 'savespinner loading'
} )
],
icons.cancel(),
'saving-header hidden'
);
}
module.exports = {
savingHeader,
saveHeader,
formHeader,
header
};
|