static-cms/src/actions/mediaLibrary.js
Shawn Erquhart cfbf31b130
WIP - Global UI (#785)
* update top bar and collections sidebar UI

* update collection entries UI

* improve global layout

* merge search page into collection page

* enable new entry button

* search fixup

* wip -initial editor update

* update editor scrolling and markdown toolbar position

* wip

* editor toolbar progress

* editor toolbar wip

* finished basic editor toolbar

* add standalone toggle component

* improve markdown toolbar spacing

* add user avatar placeholder

* finish markdown toggle styling

* refactor icon setup, add new icons

* add new icons to markdown editor toolbar

* remove extra app container

* add markdown active mark style

* relation and text widget styling

* widget design updates, basic list/object design update

* widget style updates, image widget improvements

* refactor widget directory, fix file removal

* widget focus styles

* finish editor widget focus styles

* migrate media library modal to react-modal

* wip - migrate editor component form to modal

* wip - move editor component form to modal

* wip - embed plugin forms in the editor

* inline shortcode forms working

* disable react hot loading, its breaking things

* improve shortcode form styles

* make shortcode form collapsible, improve styling

* add close functionality to shortcode blocks

* improve base media library styling

* fix shortcode label

* migrate unstyled workflow to new UI

* wip - reorganizing everything

* more work moving everything

* finish more moving and eliminating stuff

* restructure, remove react-toolbox

* wip - removing old stuff, more restructure

* finish restructure

* wip - css arch

* switch back to test repo

* update react-datetime to ^2.11.0

* remove leftover react-toolbox button

* more restructuring clean-up

* fix UI component directory case

* wip -css editor control style

* wip - consolidate widget styles

* wip - use a single control renderer

* fixed object values breaking

* wip - editor control active styles

* pass control wrapper to widgets

* ensure branch name is trimmed

* wip - improve widget authoring support

* import Map to Widget component

* refactor toolbar buttons

* wip - more widget active styles

* break out editor toggle component

* add local scroll sync back

* update editor toggle icons

* limit editor control pane content width

* fix editor control spacing

* migrate markdown toolbar stickiness to css

* fix markdown toolbar border radius

* temporarily use test backend

* stop markdown toolbar from going to bottom

* restore disabled markdown toolbar buttons for raw

* test markdown widget without focus styles

* more widget updates

* remove card visuals from editor

* disable dragging editor split off screen

* use editorControl component for shortcode fields

* make header site link configurable

* add configurable collection descriptions

* temporarily add example assets

* add basic list view

* remove outdated css mixins

* add and implement search icon

* activate quick add menu

* visualize usable space in editor view

* fix entry close, other improvements

* wip - editorial workflow updates

* some dropshadow and other CSS tweaks

* workflow ui updates

* add worfklow card buttons

* fix workflow card button handlers

* some dropshadow and other CSS tweaks

* make workflow board wider

* center workflow and collection views

* add basic responsiveness

* a bunch of fun UI fixes! a BUNCH! (#875)

* give `.nc-entryEditor-toolbar-mainSection` left and right child divs

* a bunch of fun UI fixes! a BUNCH!

* remove obscure --buttonShadow

* revert to test repo

* fix not found page styling

* allow workflow publishing from any column

* disallow publishing from all columns, with feedback

* fix new entry button

* fix markdown state persisting across entries

* enable simple workflow save and new from editor

* update slug in address bar when saving new entry

* wip - workflow updates, deletion working

* add status change functionality to editor

* wip - improving status change from editor

* editor toolbar back button improvements, loading improvements, cleanup

* progress on the media library UI cleanup

* remove font smothing css

* a quick fix for these buttons

* tweaks

* progress on media library modal— broken FYI

* fix media library functionality, finish migrating footer

* remove media library footer files

* remove leftover css import

* fix media library

* editor publishing functionality complete (unstyled)

* remove leftover loader var from media library

* wip - editor publishing styles

* add status dropdown styling

* editor toolbar style updates

* editor toolbar state improvements

* progress on the media library UI cleanup, style improvements

* finish editorial workflow editor styling

* finish media library styling

* fix config

* add what-input to optimize focus styling

* fix button

* fix navigation blocking for simple workflow

* improve simple workflow publishing

* add avatar dropdown to editor top bar

* style github and test-repo auth pages

* add git gateway auth page styles

* improve editor error styling
2017-12-07 12:37:10 -05:00

197 lines
6.0 KiB
JavaScript

import { actions as notifActions } from 'redux-notifications';
import { currentBackend } from 'Backends/backend';
import { createAssetProxy } from 'ValueObjects/AssetProxy';
import { getAsset, selectIntegration } from 'Reducers';
import { getIntegrationProvider } from 'Integrations';
import { addAsset } from './media';
const { notifSend } = notifActions;
export const MEDIA_LIBRARY_OPEN = 'MEDIA_LIBRARY_OPEN';
export const MEDIA_LIBRARY_CLOSE = 'MEDIA_LIBRARY_CLOSE';
export const MEDIA_INSERT = 'MEDIA_INSERT';
export const MEDIA_REMOVE_INSERTED = 'MEDIA_REMOVE_INSERTED';
export const MEDIA_LOAD_REQUEST = 'MEDIA_LOAD_REQUEST';
export const MEDIA_LOAD_SUCCESS = 'MEDIA_LOAD_SUCCESS';
export const MEDIA_LOAD_FAILURE = 'MEDIA_LOAD_FAILURE';
export const MEDIA_PERSIST_REQUEST = 'MEDIA_PERSIST_REQUEST';
export const MEDIA_PERSIST_SUCCESS = 'MEDIA_PERSIST_SUCCESS';
export const MEDIA_PERSIST_FAILURE = 'MEDIA_PERSIST_FAILURE';
export const MEDIA_DELETE_REQUEST = 'MEDIA_DELETE_REQUEST';
export const MEDIA_DELETE_SUCCESS = 'MEDIA_DELETE_SUCCESS';
export const MEDIA_DELETE_FAILURE = 'MEDIA_DELETE_FAILURE';
export function openMediaLibrary(payload) {
return { type: MEDIA_LIBRARY_OPEN, payload };
}
export function closeMediaLibrary() {
return { type: MEDIA_LIBRARY_CLOSE };
}
export function insertMedia(mediaPath) {
return { type: MEDIA_INSERT, payload: { mediaPath } };
}
export function removeInsertedMedia(controlID) {
return { type: MEDIA_REMOVE_INSERTED, payload: { controlID } };
}
export function loadMedia(opts = {}) {
const { delay = 0, query = '', page = 1, privateUpload } = opts;
return async (dispatch, getState) => {
const state = getState();
const backend = currentBackend(state.config);
const integration = selectIntegration(state, null, 'assetStore');
if (integration) {
const provider = getIntegrationProvider(state.integrations, backend.getToken, integration);
dispatch(mediaLoading(page));
try {
const files = await provider.retrieve(query, page, privateUpload);
const mediaLoadedOpts = {
page,
canPaginate: true,
dynamicSearch: true,
dynamicSearchQuery: query,
privateUpload,
};
return dispatch(mediaLoaded(files, mediaLoadedOpts));
}
catch(error) {
return dispatch(mediaLoadFailed({ privateUpload }));
}
}
dispatch(mediaLoading(page));
return new Promise(resolve => {
setTimeout(() => resolve(
backend.getMedia()
.then(files => dispatch(mediaLoaded(files)))
.catch((error) => dispatch(error.status === 404 ? mediaLoaded() : mediaLoadFailed()))
));
}, delay);
};
}
export function persistMedia(file, opts = {}) {
const { privateUpload } = opts;
return async (dispatch, getState) => {
const state = getState();
const backend = currentBackend(state.config);
const integration = selectIntegration(state, null, 'assetStore');
dispatch(mediaPersisting());
try {
const assetProxy = await createAssetProxy(file.name.toLowerCase(), file, false, privateUpload);
dispatch(addAsset(assetProxy));
if (!integration) {
const asset = await backend.persistMedia(assetProxy);
return dispatch(mediaPersisted(asset));
}
return dispatch(mediaPersisted(assetProxy.asset, { privateUpload }));
}
catch(error) {
console.error(error);
dispatch(notifSend({
message: `Failed to persist media: ${ error }`,
kind: 'danger',
dismissAfter: 8000,
}));
return dispatch(mediaPersistFailed({ privateUpload }));
}
};
}
export function deleteMedia(file, opts = {}) {
const { privateUpload } = opts;
return (dispatch, getState) => {
const state = getState();
const backend = currentBackend(state.config);
const integration = selectIntegration(state, null, 'assetStore');
if (integration) {
const provider = getIntegrationProvider(state.integrations, backend.getToken, integration);
dispatch(mediaDeleting());
return provider.delete(file.id)
.then(() => {
return dispatch(mediaDeleted(file, { privateUpload }));
})
.catch(error => {
console.error(error);
dispatch(notifSend({
message: `Failed to delete media: ${ error.message }`,
kind: 'danger',
dismissAfter: 8000,
}));
return dispatch(mediaDeleteFailed({ privateUpload }));
});
}
dispatch(mediaDeleting());
return backend.deleteMedia(file.path)
.then(() => {
return dispatch(mediaDeleted(file));
})
.catch(error => {
console.error(error);
dispatch(notifSend({
message: `Failed to delete media: ${ error.message }`,
kind: 'danger',
dismissAfter: 8000,
}));
return dispatch(mediaDeleteFailed());
});
};
}
export function mediaLoading(page) {
return {
type: MEDIA_LOAD_REQUEST,
payload: { page },
}
}
export function mediaLoaded(files, opts = {}) {
return {
type: MEDIA_LOAD_SUCCESS,
payload: { files, ...opts }
};
}
export function mediaLoadFailed(error, opts = {}) {
const { privateUpload } = opts;
return { type: MEDIA_LOAD_FAILURE, payload: { privateUpload } };
}
export function mediaPersisting() {
return { type: MEDIA_PERSIST_REQUEST };
}
export function mediaPersisted(asset, opts = {}) {
const { privateUpload } = opts;
return {
type: MEDIA_PERSIST_SUCCESS,
payload: { file: asset, privateUpload },
};
}
export function mediaPersistFailed(error, opts = {}) {
const { privateUpload } = opts;
return { type: MEDIA_PERSIST_FAILURE, payload: { privateUpload } };
}
export function mediaDeleting() {
return { type: MEDIA_DELETE_REQUEST };
}
export function mediaDeleted(file, opts = {}) {
const { privateUpload } = opts;
return {
type: MEDIA_DELETE_SUCCESS,
payload: { file, privateUpload },
};
}
export function mediaDeleteFailed(error, opts = {}) {
const { privateUpload } = opts;
return { type: MEDIA_DELETE_FAILURE, payload: { privateUpload } };
}