| 1 |
( function () { |
| 2 |
var el = wp.element.createElement; |
| 3 |
var __ = wp.i18n.__; |
| 4 |
var registerBlockType = wp.blocks.registerBlockType; |
| 5 |
var InspectorControls = wp.blockEditor.InspectorControls; |
| 6 |
var PanelBody = wp.components.PanelBody; |
| 7 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 8 |
var SelectControl = wp.components.SelectControl; |
| 9 |
var RangeControl = wp.components.RangeControl; |
| 10 |
var TextControl = wp.components.TextControl; |
| 11 |
|
| 12 |
var _tc, _tv; |
| 13 |
function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); } |
| 14 |
function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); } |
| 15 |
|
| 16 |
function previewPages( range ) { |
| 17 |
var pages = []; |
| 18 |
/* show: prev, 1, ... , current-range .. current+range, ..., last, next */ |
| 19 |
for ( var i = Math.max(1, 3 - range); i <= Math.min(10, 3 + range); i++ ) { |
| 20 |
pages.push(i); |
| 21 |
} |
| 22 |
return pages; |
| 23 |
} |
| 24 |
|
| 25 |
function renderPagination( attrs, isEditor ) { |
| 26 |
var pages = previewPages( attrs.pageRange ); |
| 27 |
var current = 3; |
| 28 |
var tv = getTypoCssVars(); |
| 29 |
var wrapStyle = { |
| 30 |
'--bkpg-aBg': attrs.activeBg, |
| 31 |
'--bkpg-aTxt': attrs.activeText, |
| 32 |
'--bkpg-nBg': attrs.normalBg, |
| 33 |
'--bkpg-nTxt': attrs.normalText, |
| 34 |
'--bkpg-hBg': attrs.hoverBg, |
| 35 |
'--bkpg-size': attrs.itemSize + 'px', |
| 36 |
'--bkpg-gap': attrs.gap + 'px', |
| 37 |
'--bkpg-fs': attrs.fontSize + 'px', |
| 38 |
'--bkpg-align': attrs.alignment === 'center' ? 'center' : attrs.alignment === 'right' ? 'flex-end' : 'flex-start' |
| 39 |
}; |
| 40 |
Object.assign(wrapStyle, tv(attrs.itemTypo, '--bkpg-it-')); |
| 41 |
var styleClass = 'bkpg-style-' + attrs.style; |
| 42 |
return el( 'nav', { |
| 43 |
className: 'bkpg-wrap ' + styleClass, |
| 44 |
'aria-label': 'Pagination', |
| 45 |
style: wrapStyle, |
| 46 |
'data-range': attrs.pageRange, |
| 47 |
'data-style': attrs.style, |
| 48 |
'data-prev': attrs.prevLabel, |
| 49 |
'data-next': attrs.nextLabel |
| 50 |
}, |
| 51 |
el( 'a', { className: 'bkpg-item bkpg-prev', href: isEditor ? null : '#' }, attrs.prevLabel ), |
| 52 |
pages[0] > 1 && [ el( 'a', { key: 'p1', className: 'bkpg-item', href: isEditor ? null : '#' }, '1' ), el( 'span', { key: 'e1', className: 'bkpg-ellipsis' }, '…' ) ], |
| 53 |
pages.map( function (p) { |
| 54 |
return el( 'a', { |
| 55 |
key: p, |
| 56 |
className: 'bkpg-item' + ( p === current ? ' bkpg-active' : '' ), |
| 57 |
href: isEditor ? null : '#', |
| 58 |
'aria-current': p === current ? 'page' : null |
| 59 |
}, String(p) ); |
| 60 |
} ), |
| 61 |
pages[ pages.length - 1 ] < 10 && [ el( 'span', { key: 'e2', className: 'bkpg-ellipsis' }, '…' ), el( 'a', { key: 'p10', className: 'bkpg-item', href: isEditor ? null : '#' }, '10' ) ], |
| 62 |
el( 'a', { className: 'bkpg-item bkpg-next', href: isEditor ? null : '#' }, attrs.nextLabel ) |
| 63 |
); |
| 64 |
} |
| 65 |
|
| 66 |
registerBlockType( 'blockenberg/pagination', { |
| 67 |
edit: function ( props ) { |
| 68 |
var attrs = props.attributes; |
| 69 |
var setAttr = props.setAttributes; |
| 70 |
return el( 'div', null, |
| 71 |
el( InspectorControls, null, |
| 72 |
el( PanelBody, { title: __('Labels','blockenberg'), initialOpen: true }, |
| 73 |
el( TextControl, { label:__('Previous Label','blockenberg'), value:attrs.prevLabel, onChange:function(v){setAttr({prevLabel:v});} } ), |
| 74 |
el( TextControl, { label:__('Next Label','blockenberg'), value:attrs.nextLabel, onChange:function(v){setAttr({nextLabel:v});} } ), |
| 75 |
el( RangeControl, { label:__('Page Range (around current)','blockenberg'), value:attrs.pageRange, min:1, max:4, onChange:function(v){setAttr({pageRange:v});} } ) |
| 76 |
), |
| 77 |
el( PanelBody, { title: __('Style','blockenberg'), initialOpen: false }, |
| 78 |
el( SelectControl, { label:__('Alignment','blockenberg'), value:attrs.alignment, options:[{label:'Left',value:'left'},{label:'Center',value:'center'},{label:'Right',value:'right'}], onChange:function(v){setAttr({alignment:v});} } ), |
| 79 |
el( SelectControl, { label:__('Item Style','blockenberg'), value:attrs.style, |
| 80 |
options:[ |
| 81 |
{label:'Rounded', value:'rounded'}, |
| 82 |
{label:'Square', value:'square'}, |
| 83 |
{label:'Minimal', value:'minimal'}, |
| 84 |
{label:'Outline', value:'outline'} |
| 85 |
], |
| 86 |
onChange:function(v){setAttr({style:v});} |
| 87 |
} ), |
| 88 |
el( RangeControl, { label:__('Item Size (px)','blockenberg'), value:attrs.itemSize, min:28, max:60, onChange:function(v){setAttr({itemSize:v});} } ), |
| 89 |
el( RangeControl, { label:__('Gap (px)','blockenberg'), value:attrs.gap, min:2, max:20, onChange:function(v){setAttr({gap:v});} } ), |
| 90 |
), |
| 91 |
|
| 92 |
el( PanelBody, { title: __( 'Typography', 'blockenberg' ), initialOpen: false }, |
| 93 |
el( getTypoControl(), { label: __('Items','blockenberg'), value: attrs.itemTypo, onChange: function(v){ setAttr({ itemTypo: v }); } }) |
| 94 |
), |
| 95 |
el( PanelBody, { title: __('Colors','blockenberg'), initialOpen: false }, |
| 96 |
el( PanelColorSettings, { title:__('Colors','blockenberg'), colorSettings:[ |
| 97 |
{ value:attrs.activeBg, onChange:function(v){setAttr({activeBg:v||'#6c3fb5'});}, label:__('Active Background') }, |
| 98 |
{ value:attrs.activeText, onChange:function(v){setAttr({activeText:v||'#ffffff'});}, label:__('Active Text') }, |
| 99 |
{ value:attrs.normalBg, onChange:function(v){setAttr({normalBg:v||'#f3f4f6'});}, label:__('Normal Background') }, |
| 100 |
{ value:attrs.normalText, onChange:function(v){setAttr({normalText:v||'#374151'});}, label:__('Normal Text') }, |
| 101 |
{ value:attrs.hoverBg, onChange:function(v){setAttr({hoverBg:v||'#ede9fe'});}, label:__('Hover Background') } |
| 102 |
] } ) |
| 103 |
) |
| 104 |
), |
| 105 |
el( 'p', { style: { color:'#6b7280', fontSize:12, marginBottom:4 } }, __('Preview — actual pages render on the frontend.','blockenberg') ), |
| 106 |
renderPagination( attrs, true ) |
| 107 |
); |
| 108 |
}, |
| 109 |
save: function ( props ) { |
| 110 |
return renderPagination( props.attributes, false ); |
| 111 |
} |
| 112 |
} ); |
| 113 |
} )(); |
| 114 |
|
