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 127 128 129 130 131 132 | 1x 1x 1x 33x 33x 33x 33x 33x 33x 33x 33x 3x 33x 19x 19x 33x 25x 25x 8x 5x 5x 1x | const util = require( './util' ),
Button = require( './Button' ),
icons = require( './icons' );
/**
* Creates a header
*
* @ignore
* @param {string|View} headingOrView (HTML allowed)
* @param {View[]} headerActions
* @param {module:mobile.startup/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, internal for use inside GrowthExperiments only.
*
* @function
* @memberof module:mobile.startup
* @param {string} heading (HTML allowed)
* @param {module:mobile.startup/View[]} headerActions
* @param {module:mobile.startup/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
*
* @ignore
* @param {string|View} formHTMLOrView of the header
* @param {View[]} headerActions
* @param {module:mobile.startup/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
*
* @ignore
* @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
*
* @ignore
* @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
};
|