Ghost/ghost/admin/lib/koenig-editor/addon/options/cards.js
Kevin Ansfield 661b35ba51 Added drag-and-drop card re-ordering in the editor (#1085)
no issue
- add vertical drop position indicator handling to `koenig-drag-drop-handler` service
- fixed issues with nested drag-and-drop containers
- register card drag/drop handler in `koenig-editor`
    - add drag icon creation
2018-12-17 14:02:40 +00:00

169 lines
5.2 KiB
JavaScript

import createComponentCard from '../utils/create-component-card';
// map card names to component names
export const CARD_COMPONENT_MAP = {
hr: 'koenig-card-hr',
image: 'koenig-card-image',
markdown: 'koenig-card-markdown',
'card-markdown': 'koenig-card-markdown', // backwards-compat with markdown editor
html: 'koenig-card-html',
code: 'koenig-card-code',
embed: 'koenig-card-embed',
gallery: 'koenig-card-gallery'
};
// map card names to generic icons (used for ghost elements when dragging)
export const CARD_ICON_MAP = {
hr: 'koenig/kg-card-type-divider',
image: 'koenig/kg-card-type-image',
markdown: 'koenig/kg-card-type-markdown',
'card-markdown': 'koenig/kg-card-type-markdown',
html: 'koenig/kg-card-type-html',
code: 'koenig/kg-card-type-gen-embed',
embed: 'koenig/kg-card-type-gen-embed',
gallery: 'koenig/kg-card-type-gallery'
};
// TODO: move koenigOptions directly into cards now that card components register
// themselves so that they are available on card.component
export default [
createComponentCard('card-markdown'), // backwards-compat with markdown editor
createComponentCard('code', {deleteIfEmpty: 'payload.code'}),
createComponentCard('embed', {hasEditMode: false, deleteIfEmpty: 'payload.html'}),
createComponentCard('hr', {hasEditMode: false, selectAfterInsert: false}),
createComponentCard('html', {deleteIfEmpty: 'payload.html'}),
createComponentCard('image', {hasEditMode: false, deleteIfEmpty(card) {
return card.payload.imageSelector && !card.payload.src;
}}),
createComponentCard('markdown', {deleteIfEmpty: 'payload.markdown'}),
createComponentCard('gallery', {hasEditMode: false})
];
export const CARD_MENU = [
{
title: 'Primary',
items: [{
label: 'Image',
icon: 'koenig/kg-card-type-image',
iconClass: 'kg-card-type-native',
matches: ['image', 'img'],
type: 'card',
replaceArg: 'image',
params: ['src']
},
{
label: 'Markdown',
icon: 'koenig/kg-card-type-markdown',
iconClass: 'kg-card-type-native',
matches: ['markdown', 'md'],
type: 'card',
replaceArg: 'markdown'
},
{
label: 'HTML',
icon: 'koenig/kg-card-type-html',
iconClass: 'kg-card-type-native',
matches: ['html'],
type: 'card',
replaceArg: 'html'
},
{
label: 'Gallery',
icon: 'koenig/kg-card-type-gallery',
iconClass: 'kg-card-type-native',
matches: ['gallery'],
type: 'card',
replaceArg: 'gallery'
},
{
label: 'Divider',
icon: 'koenig/kg-card-type-divider',
iconClass: 'kg-card-type-native',
matches: ['divider', 'horizontal-rule', 'hr'],
type: 'card',
replaceArg: 'hr'
}]
},
{
title: 'Embed',
items: [{
label: 'YouTube',
icon: 'koenig/kg-card-type-youtube',
matches: ['youtube'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'Twitter',
icon: 'koenig/kg-card-type-twitter',
matches: ['twitter'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'Instagram',
icon: 'koenig/kg-card-type-instagram',
matches: ['instagram'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'Unsplash',
icon: 'koenig/kg-card-type-unsplash',
iconClass: 'kg-card-type-unsplash',
matches: ['unsplash'],
type: 'card',
replaceArg: 'image',
params: ['searchTerm'],
payload: {
imageSelector: 'unsplash'
}
},
{
label: 'Vimeo',
icon: 'koenig/kg-card-type-vimeo',
matches: ['vimeo'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'CodePen',
icon: 'koenig/kg-card-type-codepen',
iconClass: 'kg-card-type-codepen',
matches: ['codepen'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'Spotify',
icon: 'koenig/kg-card-type-spotify',
matches: ['spotify'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'SoundCloud',
icon: 'koenig/kg-card-type-soundcloud',
matches: ['soundcloud'],
type: 'card',
replaceArg: 'embed',
params: ['url']
},
{
label: 'Other...',
icon: 'koenig/kg-card-type-other',
iconClass: 'kg-card-type-native',
matches: ['embed'],
type: 'card',
replaceArg: 'embed',
params: ['url']
}]
}
];