| 1 |
( function () { |
| 2 |
var el = window.wp.element.createElement; |
| 3 |
var { registerBlockType } = window.wp.blocks; |
| 4 |
var { InspectorControls, MediaUpload, MediaUploadCheck, PanelColorSettings } = window.wp.blockEditor; |
| 5 |
var { PanelBody, RangeControl, SelectControl, TextControl, ToggleControl, Button } = window.wp.components; |
| 6 |
var { __ } = window.wp.i18n; |
| 7 |
|
| 8 |
var _fdTC, _fdTV; |
| 9 |
function _tc() { return (_fdTC = _fdTC || window.bkbgTypographyControl); } |
| 10 |
function _tv() { return (_fdTV = _fdTV || window.bkbgTypoCssVars); } |
| 11 |
|
| 12 |
var ICON_MAP = { PDF:'media-document', DOC:'editor-alignleft', XLS:'media-spreadsheet', ZIP:'media-archive', IMG:'format-image', MP3:'format-audio', MP4:'format-video', TXT:'editor-code', DEFAULT:'download' }; |
| 13 |
|
| 14 |
function fileIcon(type, color, size) { |
| 15 |
var icon = ICON_MAP[type.toUpperCase()] || ICON_MAP.DEFAULT; |
| 16 |
return el('span',{className:'dashicons dashicons-'+icon, style:{fontSize:size+'px',width:size+'px',height:size+'px',color:color,lineHeight:1}}); |
| 17 |
} |
| 18 |
|
| 19 |
function buildWrapStyle(a) { |
| 20 |
return Object.assign({ |
| 21 |
display:'flex', alignItems:'center', gap:'20px', |
| 22 |
background:a.cardBg, border:'1px solid '+a.cardBorder, |
| 23 |
borderRadius:a.cardRadius+'px', |
| 24 |
padding:'20px 24px', |
| 25 |
boxShadow: a.cardShadow ? '0 4px 20px rgba(0,0,0,0.08)' : 'none', |
| 26 |
}, |
| 27 |
_tv()(a.typoName, '--bkfd-tn-'), |
| 28 |
_tv()(a.typoDesc, '--bkfd-td-'), |
| 29 |
_tv()(a.typoMeta, '--bkfd-tm-'), |
| 30 |
_tv()(a.typoBadge, '--bkfd-tb-'), |
| 31 |
_tv()(a.typoBtn, '--bkfd-tbt-') |
| 32 |
); |
| 33 |
} |
| 34 |
|
| 35 |
function Preview(a) { |
| 36 |
var wrapStyle = buildWrapStyle(a); |
| 37 |
return el('div',{className:'bkfd-wrap',style:wrapStyle}, |
| 38 |
a.showIcon && el('div',{className:'bkfd-icon-wrap',style:{ |
| 39 |
background:a.iconBg, borderRadius:'12px', |
| 40 |
width:a.iconSize+'px', height:a.iconSize+'px', |
| 41 |
display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, |
| 42 |
}}, fileIcon(a.fileType, a.iconColor, Math.round(a.iconSize*0.5))), |
| 43 |
|
| 44 |
el('div',{className:'bkfd-info',style:{flex:1, minWidth:0}}, |
| 45 |
el('div',{className:'bkfd-name-row',style:{display:'flex',alignItems:'center',gap:'8px',flexWrap:'wrap',marginBottom:'4px'}}, |
| 46 |
el('span',{className:'bkfd-name',style:{color:a.nameColor,wordBreak:'break-word'}},a.fileName), |
| 47 |
a.badgeEnabled && a.fileType && el('span',{className:'bkfd-badge',style:{ |
| 48 |
background:a.badgeBg,color:a.badgeColor, |
| 49 |
borderRadius:'4px',padding:'2px 7px',flexShrink:0, |
| 50 |
}},a.fileType.toUpperCase()), |
| 51 |
), |
| 52 |
el('div',{className:'bkfd-meta',style:{color:a.metaColor,marginBottom:a.description?'6px':'0'}},a.fileSize), |
| 53 |
a.description && el('p',{className:'bkfd-desc',style:{margin:0,color:a.descColor}},a.description), |
| 54 |
), |
| 55 |
|
| 56 |
a.fileUrl && el('a',{href:a.fileUrl,className:'bkfd-btn', |
| 57 |
download:true,target:a.openInNew?'_blank':undefined, |
| 58 |
style:{display:'inline-flex',alignItems:'center',gap:'6px',flexShrink:0, |
| 59 |
background:a.btnBg,color:a.btnColor,padding:'10px 20px',borderRadius:a.btnRadius+'px', |
| 60 |
textDecoration:'none'}}, |
| 61 |
el('span',{className:'dashicons dashicons-download',style:{fontSize:'18px',width:'18px',height:'18px',lineHeight:1}}), |
| 62 |
a.btnLabel |
| 63 |
), |
| 64 |
!a.fileUrl && el('span',{className:'bkfd-btn', |
| 65 |
style:{display:'inline-flex',alignItems:'center',gap:'6px',flexShrink:0, |
| 66 |
background:a.btnBg,color:a.btnColor,padding:'10px 20px',borderRadius:a.btnRadius+'px', |
| 67 |
cursor:'not-allowed',opacity:0.6}}, |
| 68 |
el('span',{className:'dashicons dashicons-download',style:{fontSize:'18px',width:'18px',height:'18px',lineHeight:1}}), |
| 69 |
a.btnLabel |
| 70 |
), |
| 71 |
); |
| 72 |
} |
| 73 |
|
| 74 |
registerBlockType('blockenberg/file-download', { |
| 75 |
edit: function(props) { |
| 76 |
var a = props.attributes; |
| 77 |
var set = props.setAttributes; |
| 78 |
return el('div',null, |
| 79 |
el(InspectorControls,null, |
| 80 |
el(PanelBody,{title:__('File'),initialOpen:true}, |
| 81 |
el(MediaUploadCheck,null, |
| 82 |
el(MediaUpload,{ |
| 83 |
onSelect: m => set({fileUrl:m.url,fileId:m.id,fileName:m.filename||m.title,fileSize:m.filesizeHumanReadable||'',fileType:(m.subtype||'').toUpperCase()}), |
| 84 |
allowedTypes:['application/*','audio/*','video/*','image/*'], value:a.fileId, |
| 85 |
render:({open})=>el(Button,{onClick:open,variant:'secondary',style:{width:'100%',justifyContent:'center',marginBottom:'8px'}}, |
| 86 |
a.fileUrl ? __('Change File') : __('Select File From Media Library')) |
| 87 |
}) |
| 88 |
), |
| 89 |
el(TextControl,{label:__('File Name'),value:a.fileName,onChange:v=>set({fileName:v})}), |
| 90 |
el(TextControl,{label:__('File Size (display)'),value:a.fileSize,onChange:v=>set({fileSize:v})}), |
| 91 |
el(TextControl,{label:__('File Type / Badge'),value:a.fileType,onChange:v=>set({fileType:v})}), |
| 92 |
el(TextControl,{label:__('File URL (manual)'),value:a.fileUrl,onChange:v=>set({fileUrl:v}),help:__('Auto-filled from media or enter a direct URL.')}), |
| 93 |
el(TextControl,{label:__('Description'),value:a.description,onChange:v=>set({description:v})}), |
| 94 |
el(TextControl,{label:__('Button Label'),value:a.btnLabel,onChange:v=>set({btnLabel:v})}), |
| 95 |
el(ToggleControl,{label:__('Open In New Tab'),checked:a.openInNew,onChange:v=>set({openInNew:v}),__nextHasNoMarginBottom:true}), |
| 96 |
), |
| 97 |
el(PanelBody,{title:__('Icon'),initialOpen:false}, |
| 98 |
el(ToggleControl,{label:__('Show Icon'),checked:a.showIcon,onChange:v=>set({showIcon:v}),__nextHasNoMarginBottom:true}), |
| 99 |
el(RangeControl,{label:__('Icon Box Size (px)'),value:a.iconSize,min:32,max:96,onChange:v=>set({iconSize:v})}), |
| 100 |
), |
| 101 |
el(PanelBody,{title:__('Typography'),initialOpen:false}, |
| 102 |
_tc() && el(_tc(), { label: __('File Name', 'blockenberg'), value: a.typoName, onChange: function (v) { set({ typoName: v }); } }), |
| 103 |
_tc() && el(_tc(), { label: __('Description', 'blockenberg'), value: a.typoDesc, onChange: function (v) { set({ typoDesc: v }); } }), |
| 104 |
_tc() && el(_tc(), { label: __('Meta', 'blockenberg'), value: a.typoMeta, onChange: function (v) { set({ typoMeta: v }); } }), |
| 105 |
_tc() && el(_tc(), { label: __('Badge', 'blockenberg'), value: a.typoBadge, onChange: function (v) { set({ typoBadge: v }); } }), |
| 106 |
_tc() && el(_tc(), { label: __('Button', 'blockenberg'), value: a.typoBtn, onChange: function (v) { set({ typoBtn: v }); } }), |
| 107 |
), |
| 108 |
el(PanelBody,{title:__('Card Style'),initialOpen:false}, |
| 109 |
el(RangeControl,{label:__('Border Radius (px)'),value:a.cardRadius,min:0,max:32,onChange:v=>set({cardRadius:v})}), |
| 110 |
el(ToggleControl,{label:__('Card Shadow'),checked:a.cardShadow,onChange:v=>set({cardShadow:v}),__nextHasNoMarginBottom:true}), |
| 111 |
el(RangeControl,{label:__('Button Radius (px)'),value:a.btnRadius,min:0,max:50,onChange:v=>set({btnRadius:v})}), |
| 112 |
el(ToggleControl,{label:__('Type Badge'),checked:a.badgeEnabled,onChange:v=>set({badgeEnabled:v}),__nextHasNoMarginBottom:true}), |
| 113 |
), |
| 114 |
el(PanelColorSettings,{title:__('Colors'),initialOpen:false,colorSettings:[ |
| 115 |
{label:__('Card Background'), value:a.cardBg, onChange:v=>set({cardBg:v||'#ffffff'})}, |
| 116 |
{label:__('Card Border'), value:a.cardBorder, onChange:v=>set({cardBorder:v||'#e5e7eb'})}, |
| 117 |
{label:__('Icon BG'), value:a.iconBg, onChange:v=>set({iconBg:v||'#ede9fc'})}, |
| 118 |
{label:__('Icon Color'), value:a.iconColor, onChange:v=>set({iconColor:v||'#6c3fb5'})}, |
| 119 |
{label:__('File Name Color'), value:a.nameColor, onChange:v=>set({nameColor:v||'#1f2937'})}, |
| 120 |
{label:__('Meta Color'), value:a.metaColor, onChange:v=>set({metaColor:v||'#6b7280'})}, |
| 121 |
{label:__('Description Color'),value:a.descColor, onChange:v=>set({descColor:v||'#4b5563'})}, |
| 122 |
{label:__('Button BG'), value:a.btnBg, onChange:v=>set({btnBg:v||'#6c3fb5'})}, |
| 123 |
{label:__('Button Text'), value:a.btnColor, onChange:v=>set({btnColor:v||'#ffffff'})}, |
| 124 |
{label:__('Badge BG'), value:a.badgeBg, onChange:v=>set({badgeBg:v||'#6c3fb5'})}, |
| 125 |
{label:__('Badge Text'), value:a.badgeColor, onChange:v=>set({badgeColor:v||'#ffffff'})}, |
| 126 |
]}), |
| 127 |
), |
| 128 |
Preview(a), |
| 129 |
); |
| 130 |
}, |
| 131 |
|
| 132 |
save: function({attributes:a}) { |
| 133 |
var wrapStyle = buildWrapStyle(a); |
| 134 |
return el('div',{className:'bkfd-wrap',style:wrapStyle}, |
| 135 |
a.showIcon && el('div',{className:'bkfd-icon-wrap',style:{ |
| 136 |
background:a.iconBg,borderRadius:'12px', |
| 137 |
width:a.iconSize+'px',height:a.iconSize+'px', |
| 138 |
display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0, |
| 139 |
}}, el('span',{className:'dashicons dashicons-'+(({PDF:'media-document',DOC:'editor-alignleft',XLS:'media-spreadsheet',ZIP:'media-archive',IMG:'format-image',MP3:'format-audio',MP4:'format-video'}[a.fileType.toUpperCase()]||'download'),({PDF:'media-document',DOC:'editor-alignleft',XLS:'media-spreadsheet',ZIP:'media-archive',IMG:'format-image',MP3:'format-audio',MP4:'format-video'}[a.fileType.toUpperCase()]||'download')), |
| 140 |
style:{fontSize:Math.round(a.iconSize*0.5)+'px',width:Math.round(a.iconSize*0.5)+'px',height:Math.round(a.iconSize*0.5)+'px',color:a.iconColor,lineHeight:1}})), |
| 141 |
|
| 142 |
el('div',{className:'bkfd-info',style:{flex:1,minWidth:0}}, |
| 143 |
el('div',{style:{display:'flex',alignItems:'center',gap:'8px',flexWrap:'wrap',marginBottom:'4px'}}, |
| 144 |
el('span',{className:'bkfd-name',style:{color:a.nameColor,wordBreak:'break-word'}},a.fileName), |
| 145 |
a.badgeEnabled && a.fileType && el('span',{className:'bkfd-badge',style:{background:a.badgeBg,color:a.badgeColor,borderRadius:'4px',padding:'2px 7px',flexShrink:0}},a.fileType.toUpperCase()), |
| 146 |
), |
| 147 |
el('div',{className:'bkfd-meta',style:{color:a.metaColor,marginBottom:a.description?'6px':'0'}},a.fileSize), |
| 148 |
a.description && el('p',{className:'bkfd-desc',style:{margin:0,color:a.descColor}},a.description), |
| 149 |
), |
| 150 |
|
| 151 |
el('a',{className:'bkfd-btn',href:a.fileUrl||'#',download:'', |
| 152 |
target:a.openInNew?'_blank':undefined,rel:a.openInNew?'noopener noreferrer':undefined, |
| 153 |
style:{display:'inline-flex',alignItems:'center',gap:'6px',flexShrink:0, |
| 154 |
background:a.btnBg,color:a.btnColor,padding:'10px 20px',borderRadius:a.btnRadius+'px', |
| 155 |
textDecoration:'none'}}, |
| 156 |
el('span',{className:'dashicons dashicons-download',style:{fontSize:'18px',width:'18px',height:'18px',lineHeight:1}}), |
| 157 |
a.btnLabel |
| 158 |
), |
| 159 |
); |
| 160 |
} |
| 161 |
}); |
| 162 |
}() ); |
| 163 |
|
