16 | {
17 | slide.plugins.map((plugin: any, key: number) => {
18 | // When plugin is deleted from plugins array, their position is not
19 | // removed rather the value is set to null
20 | if (!plugin) return null;
21 |
22 | const { moduleName, state: { width, height, left, top } } = plugin;
23 | const Plugin = req(moduleName).component;
24 |
25 | return (
26 |
32 | );
33 | })
34 | }
35 |
28 |
Image Options
29 |
30 |
35 |
36 | updateCurrentPlugin({ imageUrl: value })} />
42 |
43 | );
44 | }
45 | }
46 |
47 | export default OptionsMenu;
48 |
--------------------------------------------------------------------------------
/app/plugins/node_modules/devdecks-textbox/TextBox.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import './text-box.scss';
3 |
4 | const ContentEditable = require("react-contenteditable");
5 |
6 | interface TextBoxProps {
7 | disabled: boolean;
8 | pluginState: any;
9 | updateCurrentPlugin: Function;
10 | }
11 |
12 | const TextBox = ({ disabled, pluginState, updateCurrentPlugin }: TextBoxProps) => {
13 | const {
14 | fontBackgroundColor,
15 | fontColor,
16 | fontSize,
17 | fontFamily,
18 | textAlignment,
19 | value,
20 | width,
21 | } = pluginState;
22 |
23 | return (
24 |
33 | {
38 | if (!value) {
39 | updateCurrentPlugin({
40 | isOrderedList: false,
41 | isUnorderedList: false,
42 | value: e.target.value,
43 | });
44 | } else {
45 | updateCurrentPlugin({ value: e.target.value });
46 | }
47 | }}
48 | />
49 |
50 | );
51 | }
52 |
53 | export default TextBox;
54 |
--------------------------------------------------------------------------------
/app/plugins/node_modules/devdecks-textbox/options/Utils.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Button, Intent } from "@blueprintjs/core";
3 |
4 | interface UtilsProps {
5 | pluginState: any;
6 | updateCurrentPlugin: any;
7 | }
8 |
9 | const Utils = ({ pluginState, updateCurrentPlugin }: UtilsProps) => {
10 | const { isOrderedList, isUnorderedList } = pluginState;
11 | return (
12 |
13 |
37 | );
38 | };
39 |
40 | export default Utils;
41 |
--------------------------------------------------------------------------------
/app/plugins/node_modules/devdecks-code-editor/Options/CodeImportExport.tsx:
--------------------------------------------------------------------------------
1 | import * as fs from 'fs';
2 | import * as React from 'react';
3 | import { remote } from 'electron';
4 | import { Button } from '@blueprintjs/core';
5 |
6 | interface CodeImportExportProps {
7 | pluginState: any;
8 | updateCurrentPlugin: Function;
9 | }
10 |
11 | const CodeImportExport = ({ pluginState, updateCurrentPlugin }: CodeImportExportProps) => {
12 | const { snippet } = pluginState;
13 |
14 | const selectCodeFileToImport: React.MouseEventHandler = () => {
15 | remote.dialog.showOpenDialog((filePaths: string[]) => {
16 | if (!filePaths) return;
17 | fs.readFile(filePaths[0], (err: any, data: any) => {
18 | if (err) return;
19 | updateCurrentPlugin({ snippet: data.toString() });
20 | });
21 | });
22 | };
23 |
24 | const selectCodeFileToExport: React.MouseEventHandler = () => {
25 | remote.dialog.showSaveDialog((filename: string) => {
26 | if (!filename) return;
27 | fs.writeFile(filename, snippet);
28 | });
29 | };
30 |
31 | return (
32 |
33 |
37 |
38 |
42 |
43 | );
44 | };
45 |
46 |
47 | export default CodeImportExport;
48 |
--------------------------------------------------------------------------------
/app/plugins/node_modules/devdecks-textbox/options/FontColor.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { SketchPicker } from 'react-color';
3 | import { Button, Popover, PopoverInteractionKind, Position } from '@blueprintjs/core';
4 |
5 | interface FontColor {
6 | pluginState: any;
7 | theme: any;
8 | addThemeColor: Function;
9 | updateCurrentPlugin: Function;
10 | }
11 |
12 | const FontColor = ({ pluginState, theme, addThemeColor, updateCurrentPlugin }: FontColor) => {
13 | const { fontBackgroundColor, fontColor, fontColorHex } = pluginState;
14 | const { colors } = theme;
15 |
16 | const content = (
17 |
18 |
23 | updateCurrentPlugin({
24 | fontColor: `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`,
25 | fontColorHex: color.hex
26 | })} />
27 |
35 | );
36 |
37 | return (
38 |
41 |
43 |
44 | );
45 | };
46 |
47 | export default FontColor;
48 |
--------------------------------------------------------------------------------
/app/modules/App/FullscreenView/FullscreenView.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { DummySlide } from 'modules';
3 | import { EDirection } from 'constants/slides.enums';
4 | import './fullscreen-view.scss';
5 |
6 | const ReactTransitions = require('react-transitions');
7 | require('react-transitions/dist/animations.css');
8 |
9 | interface FullScreenViewProps {
10 | deviceDimension: {
11 | width: number;
12 | height: number;
13 | };
14 | direction: EDirection;
15 | isFullscreen: boolean;
16 | slide: any;
17 | }
18 |
19 | const FullScreenView = ({
20 | deviceDimension,
21 | direction,
22 | isFullscreen,
23 | slide
24 | }: FullScreenViewProps) => {
25 | const { r, g, b, a } = slide.state.backgroundColor;
26 | const { state: { transition } } = slide;
27 | return (
28 |
29 |
37 |
44 |
47 |
48 |
49 |
29 | );
30 | } else if (imageBufferString) {
31 | componentToRender = (
32 |
37 | );
38 | } else {
39 | componentToRender = (
40 | selectImageFile(updateCurrentPlugin) } />
45 | );
46 | }
47 |
48 | return (
49 | { componentToRender }
50 | );
51 | }
52 |
53 | export default AddImage;
54 |
--------------------------------------------------------------------------------
/test/reducers/slides/actions/deleteSlide-spec.ts:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import { DELETE_SLIDE } from '../../../../app/constants/slides.constants';
3 |
4 | export default function(initialState: any, reducer: any, slide: any) {
5 | const dummySlide1 = {
6 | plugins: ['plugin1'],
7 | state: {
8 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
9 | transition: {
10 | right: 'rotate-push-left-move-from-right',
11 | left: 'rotate-push-right-move-from-left',
12 | }
13 | }
14 | };
15 |
16 | describe('DELETE_SLIDE', () => {
17 | const _initialState: any = [slide, dummySlide1];
18 | it('should delete Slide 0 when the first slide is selected', () => {
19 | expect(
20 | reducer(_initialState, {
21 | type: DELETE_SLIDE,
22 | slideToDelete: 0
23 | })
24 | )
25 | .to.deep.equal([dummySlide1])
26 | .and.to.have.lengthOf(1)
27 | });
28 |
29 | it('should delete Slide 1 when the second slide is selected', () => {
30 | expect(
31 | reducer(_initialState, {
32 | type: DELETE_SLIDE,
33 | slideToDelete: 1
34 | })
35 | )
36 | .to.deep.equal([slide])
37 | .and.to.have.lengthOf(1)
38 | });
39 |
40 | it('should delete only one slide when there are multiple slides', () => {
41 | const _initialState = [slide, slide, slide];
42 | expect(
43 | reducer(_initialState, {
44 | type: DELETE_SLIDE,
45 | slideToDelete: 1
46 | })
47 | )
48 | .to.deep.equal([slide, slide])
49 | .and.to.have.lengthOf(2)
50 | });
51 | });
52 | }
53 |
--------------------------------------------------------------------------------
/app/plugins/node_modules/devdecks-textbox/options/FontBackgroundColor.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { SketchPicker } from 'react-color';
3 | import { Button, Popover, PopoverInteractionKind, Position } from '@blueprintjs/core';
4 |
5 | interface FontBackgroundColor {
6 | pluginState: any;
7 | slide: any;
8 | theme: any;
9 | addThemeColor: Function;
10 | updateCurrentPlugin: Function;
11 | }
12 |
13 | const FontBackgroundColor = ({
14 | pluginState,
15 | slide,
16 | theme,
17 | addThemeColor,
18 | updateCurrentPlugin
19 | }: FontBackgroundColor) => {
20 | const { fontBackgroundColor, fontBackgroundColorHex, fontColor } = pluginState;
21 | const { colors } = theme;
22 |
23 | const content = (
24 |
25 | {
30 | updateCurrentPlugin({
31 | fontBackgroundColor: `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`,
32 | fontBackgroundColorHex: color.hex
33 | });
34 | }} />
35 |
43 | );
44 |
45 | return (
46 |
49 |
54 |
55 | );
56 | };
57 |
58 | export default FontBackgroundColor;
59 |
--------------------------------------------------------------------------------
/app/actions/app.actions.ts:
--------------------------------------------------------------------------------
1 | import * as constants from 'constants/app.constants';
2 |
3 | export function addThemeColor(color: string) {
4 | return {
5 | type: constants.ADD_THEME_COLOR,
6 | color,
7 | };
8 | }
9 |
10 | export function goToSlide(slideNumber: number, maxSlides?: number) {
11 | return {
12 | type: constants.GO_TO_SLIDE,
13 | slideNumber,
14 | maxSlides,
15 | };
16 | }
17 |
18 | export function leftArrowPrev() {
19 | return {
20 | type: constants.LEFT_ARROW_PREV,
21 | };
22 | }
23 |
24 | export function rightArrowNext() {
25 | return {
26 | type: constants.RIGHT_ARROW_NEXT,
27 | };
28 | }
29 |
30 | export function saveLastSlideDimensions() {
31 | return {
32 | type: constants.SAVE_LAST_SLIDE_DIMENSION,
33 | };
34 | }
35 |
36 | export function setActivePlugin(moduleName?: string, pluginNumber?: number, slideNumber?: number) {
37 | const isPluginDeleted = !moduleName || pluginNumber === undefined || slideNumber === undefined;
38 | return {
39 | type: constants.SET_ACTIVE_PLUGIN,
40 | newActivePlugin: isPluginDeleted ? null : { moduleName, pluginNumber, slideNumber },
41 | };
42 | }
43 |
44 | export function toggleFullScreen() {
45 | return {
46 | type: constants.TOGGLE_FULLSCREEN,
47 | };
48 | }
49 |
50 | export function toggleGuidelines() {
51 | return {
52 | type: constants.TOGGLE_GUIDELINES,
53 | };
54 | }
55 |
56 | export function updateDeviceDimension(newDeviceDimension: { width: number, height: number }) {
57 | return {
58 | type: constants.UPDATE_DEVICE_DIMENSION,
59 | newDeviceDimension,
60 | };
61 | }
62 |
63 | export function updateSlidesDimension(slidesDimension: { width: number; height: number; }) {
64 | return {
65 | type: constants.UPDATE_SLIDES_DIMENSION,
66 | slidesDimension,
67 | };
68 | }
69 |
--------------------------------------------------------------------------------
/app/modules/UtilitiesMenu/DefaultOptions/DefaultOptions.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import BackgroundColor from './Options/BackgroundColor';
3 | import DuplicateSlide from './Options/DuplicateSlide';
4 | import MoveSlide from './Options/MoveSlide';
5 | import SelectTransitions from './Options/SelectTransitions';
6 | import './options.scss';
7 |
8 | interface DefaultOptionsProps {
9 | currentSlideNumber: number;
10 | maxSlides: number;
11 | slide: any;
12 | theme: Object;
13 |
14 | addThemeColor: Function;
15 | duplicateSlide: Function;
16 | goToSlide: Function;
17 | moveSlideDown: Function;
18 | moveSlideUp: Function;
19 | updateCurrentSlide: Function;
20 | }
21 |
22 | const DefaultOptions = ({
23 | currentSlideNumber,
24 | maxSlides,
25 | slide,
26 | theme,
27 |
28 | addThemeColor,
29 | duplicateSlide,
30 | goToSlide,
31 | moveSlideDown,
32 | moveSlideUp,
33 | updateCurrentSlide
34 | }: DefaultOptionsProps) => (
35 |
61 | );
62 |
63 | export default DefaultOptions;
64 |
--------------------------------------------------------------------------------
/webpack.config.base.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Base webpack config used across other specific configs
3 | */
4 |
5 | import path from 'path';
6 | import validate from 'webpack-validator';
7 | import {
8 | dependencies as externals
9 | } from './app/package.json';
10 |
11 | export default validate({
12 | module: {
13 | loaders: [
14 | {
15 | test: /\.jsx?$/,
16 | loader: 'babel-loader',
17 | exclude: /node_modules/
18 | },
19 | {
20 | test: /\.json$/,
21 | loader: 'json-loader'
22 | },
23 | {
24 | test: /\.css$/,
25 | loaders: [
26 | 'style-loader',
27 | 'css-loader'
28 | ]
29 | },
30 |
31 | { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
32 | { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
33 | { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
34 | { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
35 | { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
36 |
37 | { test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/, loader: 'url-loader' },
38 | ]
39 | },
40 |
41 | output: {
42 | path: path.join(__dirname, '../app'),
43 | filename: 'bundle.js',
44 |
45 | // https://github.com/webpack/webpack/issues/1114
46 | libraryTarget: 'commonjs2'
47 | },
48 |
49 | // https://webpack.github.io/docs/configuration.html#resolve
50 | resolve: {
51 | extensions: ['', '.ts', '.tsx', '.js', '.jsx', '.json', '.scss'],
52 | packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main'],
53 | modulesDirectories: ['app', 'node_modules']
54 | },
55 |
56 | plugins: [],
57 |
58 | externals: Object.keys(externals || {})
59 | });
60 |
--------------------------------------------------------------------------------
/test/reducers/slides/actions/addPluginToCurrentSlide-spec.ts:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import { ADD_PLUGIN_TO_CURRENT_SLIDE } from '../../../../app/constants/slides.constants';
3 |
4 | export default function(initialState: any, reducer: any, slide: any) {
5 | const plugin1 = 'plugin1';
6 |
7 | describe('ADD_PLUGIN_TO_CURRENT_SLIDE', () => {
8 | it('should add a new plugin to selected slide', () => {
9 | expect(
10 | reducer(initialState, {
11 | type: ADD_PLUGIN_TO_CURRENT_SLIDE,
12 | plugin: plugin1,
13 | slideNumber: 0
14 | })
15 | ).to.deep.equal([{
16 | plugins: ['plugin1'],
17 | state: {
18 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
19 | transition: {
20 | right: 'rotate-push-left-move-from-right',
21 | left: 'rotate-push-right-move-from-left',
22 | }
23 | }
24 | }]);
25 | });
26 |
27 | it('should add new plugins to the end of the plugin list', () => {
28 | const _initialState = [{
29 | plugins: ['plugin5', 'plugin4'],
30 | state: {
31 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
32 | transition: {
33 | right: 'rotate-push-left-move-from-right',
34 | left: 'rotate-push-right-move-from-left',
35 | }
36 | }
37 | }];
38 |
39 | expect(reducer(_initialState, {
40 | type: ADD_PLUGIN_TO_CURRENT_SLIDE,
41 | plugin: plugin1,
42 | slideNumber: 0
43 | })).to.deep.equal([{
44 | plugins: ['plugin5', 'plugin4', plugin1],
45 | state: {
46 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
47 | transition: {
48 | right: 'rotate-push-left-move-from-right',
49 | left: 'rotate-push-right-move-from-left',
50 | }
51 | }
52 | }]);
53 | });
54 | });
55 | }
56 |
--------------------------------------------------------------------------------
/app/actions/slides.actions.ts:
--------------------------------------------------------------------------------
1 | import * as constants from '../constants/slides.constants';
2 |
3 | export function addPluginToCurrentSlide(plugin: any, slideNumber: number) {
4 | return {
5 | type: constants.ADD_PLUGIN_TO_CURRENT_SLIDE,
6 | plugin,
7 | slideNumber,
8 | };
9 | }
10 |
11 | export function addSlide(currentSlide: number) {
12 | return {
13 | type: constants.ADD_SLIDE,
14 | currentSlide,
15 | };
16 | }
17 |
18 | export function deleteCurrentPlugin(pluginNumber: any, slideNumber: number) {
19 | return {
20 | type: constants.DELETE_CURRENT_PLUGIN,
21 | pluginNumber,
22 | slideNumber,
23 | };
24 | }
25 |
26 | export function deleteSlide(slideToDelete: number) {
27 | return {
28 | type: constants.DELETE_SLIDE,
29 | slideToDelete,
30 | };
31 | }
32 |
33 | export function duplicateSlide(slideToDuplicate: number) {
34 | return {
35 | type: constants.DUPLICATE_SLIDE,
36 | slideToDuplicate,
37 | }
38 | }
39 |
40 | export function moveSlideDown(slideNumber: number) {
41 | return {
42 | type: constants.MOVE_SLIDE_DOWN,
43 | slideNumber,
44 | };
45 | }
46 |
47 | export function moveSlideUp(slideNumber: number) {
48 | return {
49 | type: constants.MOVE_SLIDE_UP,
50 | slideNumber,
51 | };
52 | }
53 |
54 | export function openFile(buffer_data: Buffer) {
55 | return {
56 | type: constants.OPEN_FILE,
57 | buffer_data,
58 | };
59 | }
60 |
61 | export function openNewDeck() {
62 | return {
63 | type: constants.OPEN_NEW_DECK
64 | };
65 | }
66 |
67 | export function updateCurrentPlugin(pluginNumber: number, slideNumber: number, changes: Object) {
68 | return {
69 | type: constants.UPDATE_CURRENT_PLUGIN,
70 | changes,
71 | pluginNumber,
72 | slideNumber,
73 | };
74 | }
75 |
76 | export function updateCurrentSlide(slideNumber: number, changes: Object) {
77 | return {
78 | type: constants.UPDATE_CURRENT_SLIDE,
79 | changes,
80 | slideNumber,
81 | };
82 | }
83 |
--------------------------------------------------------------------------------
/webpack.config.production.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Build config for electron 'Renderer Process' file
3 | */
4 |
5 | import path from 'path';
6 | import webpack from 'webpack';
7 | import validate from 'webpack-validator';
8 | import merge from 'webpack-merge';
9 | import HtmlWebpackPlugin from 'html-webpack-plugin';
10 | import baseConfig from './webpack.config.base';
11 |
12 | const config = validate(merge(baseConfig, {
13 | devtool: 'cheap-module-source-map',
14 |
15 | entry: [
16 | 'babel-polyfill',
17 | './app/index'
18 | ],
19 |
20 | output: {
21 | path: path.join(__dirname, '/app/dist'),
22 | publicPath: './dist/'
23 | },
24 |
25 | module: {
26 | loaders: [
27 | {
28 | test: /\.tsx?$/,
29 | loader: 'ts',
30 | include: /app/
31 | },
32 | {
33 | test: /\.scss$/,
34 | loaders: [
35 | 'style-loader',
36 | 'css-loader',
37 | 'sass-loader'
38 | ],
39 | include: /app/
40 | },
41 | ]
42 | },
43 |
44 | plugins: [
45 | // https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
46 | // https://github.com/webpack/webpack/issues/864
47 | new webpack.optimize.OccurrenceOrderPlugin(),
48 |
49 | // NODE_ENV should be production so that modules do not perform certain development checks
50 | new webpack.DefinePlugin({
51 | 'process.env.NODE_ENV': JSON.stringify('production')
52 | }),
53 |
54 | // Minify without warning messages and IE8 support
55 | new webpack.optimize.UglifyJsPlugin({
56 | compressor: {
57 | screw_ie8: true,
58 | warnings: false
59 | }
60 | }),
61 | new HtmlWebpackPlugin({
62 | filename: '../app.html',
63 | template: 'app/app.html',
64 | inject: false
65 | })
66 | ],
67 |
68 | // https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works
69 | target: 'electron-renderer'
70 | }));
71 |
72 | export default config;
73 |
--------------------------------------------------------------------------------
/app/plugins/node_modules/devdecks-code-editor/code-editor.scss:
--------------------------------------------------------------------------------
1 | #codeeditor-container {
2 | display: flex;
3 | overflow: auto;
4 |
5 | &::-webkit-scrollbar {
6 | display: none;
7 | }
8 |
9 | &:focus {
10 | border: none;
11 | outline: none;
12 | }
13 |
14 | .pt-icon-code {
15 | align-self: center;
16 | background-color: rgba(50, 50, 50, .2);
17 | }
18 |
19 | .code {
20 | display: flex;
21 | position: relative;
22 | }
23 |
24 | .code-line-number {
25 | visibility: hidden;
26 | position: absolute;
27 |
28 | &.show {
29 | align-self: center;
30 | color: mediumpurple;
31 | font-size: 1.2em;
32 | font-weight: bold;
33 | visibility: initial;
34 | }
35 | }
36 |
37 | // Hides the popover if there is no content
38 | // with the highlight
39 | .hide-popover {
40 | display: none;
41 | }
42 |
43 | .highlighted, .non-highlighted {
44 | font-size: 2.5em;
45 | }
46 |
47 | .highlighted {
48 | font-weight: 600;
49 | }
50 |
51 | .non-highlighted {
52 | opacity: 0.3;
53 | }
54 |
55 | .pt-popover-target {
56 | width: 100%;
57 | }
58 |
59 | .pt-popover-content {
60 | font-size: 2em;
61 | }
62 |
63 | pre {
64 | width: 100%;
65 | box-shadow: none;
66 | margin: 0;
67 | padding: 0;
68 | }
69 | }
70 |
71 | #codeeditor-options-container {
72 | ul {
73 | list-style-type: none;
74 | margin: 0 auto !important;
75 |
76 | li {
77 | margin: 5px 0;
78 | }
79 | }
80 | }
81 |
82 | #code-editor-highlight-code-container {
83 | .pt-input {
84 | width: 100%;
85 | }
86 |
87 | input[type=number]::-webkit-inner-spin-button,
88 | input[type=number]::-webkit-outer-spin-button {
89 | -webkit-appearance: none;
90 | margin: 0;
91 | }
92 | }
93 |
94 | .code-editor-draggable-items {
95 | list-style-type: none;
96 | }
97 |
98 | .code-editor-code-edit {
99 | width: 700px;
100 | height: 400px;
101 | }
--------------------------------------------------------------------------------
/app/modules/ControlPanel/ControlPanel.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { connect } from 'react-redux';
3 | import { Button } from '@blueprintjs/core';
4 | import {
5 | goToSlide,
6 | saveLastSlideDimensions,
7 | toggleFullScreen,
8 | } from 'actions/app.actions';
9 | import { addSlide } from 'actions/slides.actions';
10 | import './control-panel.scss';
11 |
12 | interface ControlPanelProps {
13 | currentSlide: number;
14 | numberOfSlides: number;
15 |
16 | addSlide: Function;
17 | goToSlide: Function;
18 | saveLastSlideDimensions: Function;
19 | toggleFullScreen: Function;
20 | }
21 |
22 | export class ControlPanelComponent extends React.Component {
23 | render() {
24 | const {
25 | currentSlide,
26 | numberOfSlides,
27 |
28 | addSlide,
29 | goToSlide,
30 | saveLastSlideDimensions,
31 | toggleFullScreen,
32 | } = this.props;
33 |
34 | return (
35 |
36 |
51 | );
52 | }
53 | }
54 |
55 | const mapStateToProps = (state: any) => ({
56 | currentSlide: state.app.present.currentSlide,
57 | numberOfSlides: state.slides.present.length,
58 | });
59 |
60 | const mapDispatchToProps = (dispatch: any) => ({
61 | addSlide: (currentSlide: number) => dispatch(addSlide(currentSlide)),
62 | goToSlide: (slideNumber: number) => dispatch(goToSlide(slideNumber)),
63 | saveLastSlideDimensions: () => dispatch(saveLastSlideDimensions()),
64 | toggleFullScreen: () => dispatch(toggleFullScreen()),
65 | });
66 |
67 | const ControlPanel = connect(mapStateToProps, mapDispatchToProps)(ControlPanelComponent as any);
68 |
69 | export { ControlPanel };
70 |
--------------------------------------------------------------------------------
/app/modules/UtilitiesMenu/DefaultOptions/Options/SelectTransitions.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as Select from 'react-select';
3 | import 'react-select/dist/react-select.css';
4 |
5 | const { Transitions } = require('react-transitions');
6 |
7 | interface SelectTransitionsProps {
8 | slide: any;
9 | updateCurrentSlide: Function;
10 | }
11 |
12 | const SelectTransitions = ({ slide, updateCurrentSlide }: SelectTransitionsProps) => {
13 | const { transition } = slide.state;
14 |
15 | // Odd transition at element 26
16 | // Removing this transition so we can dynamically produce
17 | // left and right directions in pairs
18 | const oddTransitions: any = [
19 | 'rotate-fall-scale-up',
20 | 'rotate-out-newspaper-rotate-in-newspaper',
21 | 'scale-down-center-scale-up-center',
22 | 'sides',
23 | 'slide',
24 | ];
25 |
26 | const customTransitions = Transitions.filter((transition: string) => {
27 | if (!oddTransitions.includes(transition)) return true;
28 | });
29 |
30 | const options = customTransitions.reduce((
31 | transitions: any,
32 | current: string,
33 | i: number,
34 | ) => {
35 | if (i % 2 === 0) {
36 | transitions.pair.push(current);
37 | } else {
38 | transitions.pair.push(current);
39 | transitions._transitions.push({
40 | value: transitions.pair[0],
41 | label: transitions.pair[0],
42 | pair: transitions.pair,
43 | });
44 | transitions.pair = [];
45 | }
46 |
47 | return transitions;
48 | }, { _transitions: [], pair: [] })._transitions;
49 |
50 | return (
51 |
69 | );
70 | }
71 |
72 | export default SelectTransitions;
73 |
--------------------------------------------------------------------------------
/docs/API.md:
--------------------------------------------------------------------------------
1 | # API Reference
2 |
3 | * [Component](#component)
4 | * [Options Menu](#optionsmenu)
5 |
6 | ## \
7 | This is what gets render onto the slide.
8 |
9 | ### Props
10 |
11 | **```isFullscreen: boolean```**
12 |
13 | Whether the app is currently in fullscreen mode or not.
14 |
15 | **```pluginState: Object```**
16 |
17 | The state of your plugin.
18 |
19 | ```typescript
20 | {
21 | // Default properties
22 | width: number, // 300
23 | height: number, // 300
24 | lockAspectRatio: boolean, // false
25 | isResizable: {
26 | top: boolean, // false
27 | right: boolean, // true
28 | bottom: boolean, // true
29 | left: boolean, // false
30 | topRight: boolean, // false
31 | bottomRight: boolean, // true
32 | bottomLeft: boolean, // false
33 | topLeft: boolean // false
34 | },
35 |
36 | // Your properties get added after default properties so you can
37 | // overwrite our default properties or add on more properties
38 | ...
39 | }
40 | ```
41 |
42 | **```updateCurrentPlugin(changes: Object)```**
43 |
44 | The changes you want to make to `pluginState`.
45 |
46 | For example:
47 |
48 | ```javascript
49 | updateCurrentPlugin({ value: 'foo' });
50 | ```
51 |
52 | will change the `pluginState` to
53 |
54 | ```javascript
55 | {
56 | value: 'foo',
57 | ...
58 | }
59 | ```
60 |
61 | You can also pass in multiple changes at once:
62 |
63 | ```javascript
64 | updateCurrentPlugin({ value: 'foo', color: 'blue' });
65 | ```
66 |
67 | ## \
68 | The options you want to provide with your \.
69 | Keep in mind that the container is 295px wide.
70 |
71 |
72 | ### Props
73 |
74 | **```addThemeColor(color: string)```**
75 |
76 | Add a new color to your themes.
77 |
78 | ```javascript
79 | addThemeColor('#ffeb3b');
80 | ```
81 |
82 |
83 | **```pluginState: Object```**
84 |
85 | The state of your plugin. Same as `pluginState` from [\](#component).
86 |
87 | **```theme: Object```**
88 |
89 | ```typescript
90 | {
91 | colors: string[] // ['#ffeb3b', '#0062A3']
92 | }
93 | ```
94 |
95 | **```updateCurrentPlugin(changes: Object)```**
96 |
97 | The changes you want to make to `pluginState`. Same as `updateCurrentPlugin` from
98 | [\](#component).
--------------------------------------------------------------------------------
/app/plugins/node_modules/devdecks-code-editor/OptionsMenu.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Checkbox } from '@blueprintjs/core';
3 | import CodeEdit from './Options/CodeEdit';
4 | import CodeHighlightSubmit from './Options/CodeHighlightSubmit';
5 | import CodeLang from './Options/CodeLang';
6 | import CodeRun from './Options/CodeRun';
7 | import CodeTheme from './Options/CodeTheme';
8 | import CodeImportExport from './Options/CodeImportExport';
9 | import ToggleConsole from './Options/ToggleConsole';
10 |
11 | interface OptionsMenuProps {
12 | moduleName: string;
13 | pluginNumber: number;
14 | pluginState: any;
15 | slideNumber: number;
16 | updateCurrentPlugin: Function;
17 | }
18 |
19 | const OptionsMenu = ({
20 | moduleName,
21 | pluginNumber,
22 | pluginState,
23 | slideNumber,
24 | updateCurrentPlugin
25 | }: OptionsMenuProps) => (
26 |
27 | Code Editor Options
28 |
29 |
32 |
33 | {/*
34 |
37 | */}
38 |
39 |
40 |
41 |
44 |
45 |
46 |
47 |
52 |
53 |
54 |
55 | updateCurrentPlugin({ showLineNumbers: !pluginState.showLineNumbers })} />
59 |
60 |
61 |
62 |
63 |
66 | -
67 |
68 |
69 |
72 |
73 |
74 | );
75 |
76 | export default OptionsMenu;
77 |
--------------------------------------------------------------------------------
/webpack.config.development.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | /**
3 | * Build config for development process that uses Hot-Module-Replacement
4 | * https://webpack.github.io/docs/hot-module-replacement-with-webpack.html
5 | */
6 |
7 | import webpack from 'webpack';
8 | import validate from 'webpack-validator';
9 | import merge from 'webpack-merge';
10 | import formatter from 'eslint-formatter-pretty';
11 | import baseConfig from './webpack.config.base';
12 |
13 | const port = process.env.PORT || 3000;
14 |
15 | export default validate(merge(baseConfig, {
16 | debug: true,
17 |
18 | devtool: 'inline-source-map',
19 |
20 | entry: [
21 | `webpack-hot-middleware/client?path=http://localhost:${port}/__webpack_hmr`,
22 | './app/index'
23 | ],
24 |
25 | output: {
26 | publicPath: `http://localhost:${port}/dist/`
27 | },
28 |
29 | module: {
30 | loaders: [
31 | {
32 | test: /\.tsx?$/,
33 | loaders: ['babel', 'ts'],
34 | include: /app/
35 | },
36 | {
37 | test: /\.global\.scss$/,
38 | loaders: [
39 | 'style-loader',
40 | 'css-loader?sourceMap',
41 | 'sass-loader?sourceMap'
42 | ],
43 | include: /app/
44 | },
45 |
46 | {
47 | test: /^((?!\.global).)*\.scss$/,
48 | loaders: [
49 | 'style-loader',
50 | 'css-loader?sourceMap',
51 | 'sass-loader?sourceMap'
52 | ],
53 | include: /app/
54 | },
55 | ]
56 | },
57 |
58 | eslint: {
59 | formatter
60 | },
61 |
62 | plugins: [
63 | // https://webpack.github.io/docs/hot-module-replacement-with-webpack.html
64 | new webpack.HotModuleReplacementPlugin(),
65 |
66 | // “If you are using the CLI, the webpack process will not exit with an error code by enabling this plugin.”
67 | // https://github.com/webpack/docs/wiki/list-of-plugins#noerrorsplugin
68 | new webpack.NoErrorsPlugin(),
69 |
70 | // NODE_ENV should be production so that modules do not perform certain development checks
71 | new webpack.DefinePlugin({
72 | 'process.env.NODE_ENV': JSON.stringify('development')
73 | }),
74 | ],
75 |
76 | // https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works
77 | target: 'electron-renderer'
78 | }));
79 |
--------------------------------------------------------------------------------
/test/reducers/slides/actions/deleteCurrentPlugin-spec.ts:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import { DELETE_CURRENT_PLUGIN } from '../../../../app/constants/slides.constants';
3 |
4 | export default function(initialState: any, reducer: any, slide: any) {
5 | describe('DELETE_CURRENT_PLUGIN', () => {
6 | it('should the first plugin from the first slide', () => {
7 | const _initialState: any = [{
8 | plugins: ['plugin1'],
9 | state: {
10 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
11 | transition: {
12 | right: 'rotate-push-left-move-from-right',
13 | left: 'rotate-push-right-move-from-left',
14 | }
15 | }
16 | }];
17 | expect(
18 | reducer(_initialState, {
19 | type: DELETE_CURRENT_PLUGIN,
20 | pluginNumber: 0,
21 | slideNumber: 0
22 | })
23 | ).to.deep.equal([
24 | {
25 | plugins: [null],
26 | state: {
27 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
28 | transition: {
29 | right: 'rotate-push-left-move-from-right',
30 | left: 'rotate-push-right-move-from-left',
31 | }
32 | }
33 | }
34 | ]);
35 | });
36 |
37 | it('should delete the third plugin only from the second slide', () => {
38 | const _initialState: any = [
39 | slide,
40 | {
41 | plugins: ['plugin1', 'plugin2', 'plugin3'],
42 | state: {
43 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
44 | transition: {
45 | right: 'rotate-push-left-move-from-right',
46 | left: 'rotate-push-right-move-from-left',
47 | }
48 | }
49 | }
50 | ];
51 | expect(
52 | reducer(_initialState, {
53 | type: DELETE_CURRENT_PLUGIN,
54 | pluginNumber: 2,
55 | slideNumber: 1
56 | })
57 | ).to.deep.equal([
58 | slide,
59 | {
60 | plugins: ['plugin1', 'plugin2', null],
61 | state: {
62 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
63 | transition: {
64 | right: 'rotate-push-left-move-from-right',
65 | left: 'rotate-push-right-move-from-left',
66 | }
67 | }
68 | }
69 | ]);
70 | });
71 | });
72 | }
73 |
--------------------------------------------------------------------------------
/test/reducers/slides/actions/updateCurrentPlugin-spec.ts:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import { UPDATE_CURRENT_PLUGIN } from '../../../../app/constants/slides.constants';
3 |
4 | export default function(initialState: any, reducer: any, slide: any) {
5 | const _initialState = [
6 | {
7 | plugins: [
8 | { state: {} }
9 | ]
10 | }
11 | ];
12 |
13 | describe('UPDATE_CURRENT_PLUGIN', () => {
14 | it('should update selected plugin with new change', () => {
15 | expect(
16 | reducer(_initialState, {
17 | type: UPDATE_CURRENT_PLUGIN,
18 | pluginNumber: 0,
19 | slideNumber: 0,
20 | changes: {
21 | hello: 'world'
22 | }
23 | })
24 | ).to.deep.equal([
25 | {
26 | plugins: [
27 | {
28 | state: {
29 | hello: 'world'
30 | }
31 | }
32 | ],
33 | }
34 | ]);
35 | });
36 |
37 | it('should update selected plugin with multiple changes at once', () => {
38 | expect(
39 | reducer(_initialState, {
40 | type: UPDATE_CURRENT_PLUGIN,
41 | pluginNumber: 0,
42 | slideNumber: 0,
43 | changes: {
44 | string: 'world',
45 | boolean: true,
46 | number: 1,
47 | undefined: undefined,
48 | null: null,
49 | array: [],
50 | object: {}
51 | }
52 | })
53 | ).to.deep.equal([
54 | {
55 | plugins: [
56 | {
57 | state: {
58 | string: 'world',
59 | boolean: true,
60 | number: 1,
61 | undefined: undefined,
62 | null: null,
63 | array: [],
64 | object: {}
65 | }
66 | }
67 | ]
68 | }
69 | ]);
70 | });
71 |
72 | it('should be able to accept functions in its state', () => {
73 | const nextState: any = reducer(_initialState, {
74 | type: UPDATE_CURRENT_PLUGIN,
75 | pluginNumber: 0,
76 | slideNumber: 0,
77 | changes: {
78 | function: () => {}
79 | }
80 | });
81 |
82 | expect(nextState[0].plugins[0].state)
83 | .to.have.property('function')
84 | .that.is.a('function');
85 | })
86 | });
87 | }
88 |
--------------------------------------------------------------------------------
/app/plugins/node_modules/devdecks-textbox/OptionsMenu.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import FontBackgroundColor from './options/FontBackgroundColor';
4 | import FontColor from './options/FontColor';
5 | import FontSize from './options/FontSize';
6 | import FontFamily from './options/FontFamily';
7 | import FontStyles from './options/FontStyles';
8 | import Utils from './options/Utils';
9 |
10 | interface OptionsMenuProps {
11 | moduleName: string;
12 | pluginNumber: number;
13 | pluginState: any;
14 | slide: Object;
15 | slideNumber: number;
16 | theme: any;
17 | addThemeColor: Function;
18 | updateCurrentPlugin: Function;
19 | }
20 |
21 | class OptionsMenu extends React.Component {
22 | render() {
23 | const {
24 | moduleName,
25 | pluginNumber,
26 | pluginState,
27 | slide,
28 | slideNumber,
29 | theme,
30 | addThemeColor,
31 | updateCurrentPlugin
32 | } = this.props;
33 |
34 | return (
35 |
36 | Text Box Options
37 |
38 | -
39 |
42 |
43 | -
44 |
47 |
48 | -
49 |
52 |
53 | -
54 |
57 |
58 |
59 | -
60 |
65 |
66 | -
67 |
73 |
74 |
75 | );
76 | };
77 | }
78 |
79 | export default OptionsMenu;
80 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # DevDecks
2 | An open-source, desktop presentation app for developers. Built in Electron with React-Redux/TypeScript.
3 |
4 | 
5 |
6 | ### Docs & Help
7 | * [Guides and API docs](docs/README.md)
8 |
9 | ### Installation
10 | - To install the application for use:
11 | 1. download at: www.devdecks.io
12 |
13 | - To contribute to Devdecks development:
14 | 1. Create a local copy of devdecks (forked, cloned, or downloaded).
15 | 2. Navigate to the devdecks folder then ```npm install``` the dependencies. This may take a few minutes.
16 | 3. To launch the application, run ```npm run dev```. This may take a moment. Leave Terminal open while you are working on devdecks.
17 |
18 | - To create your own installation file
19 | - ```npm run package``` for macs
20 | - ```npm run package-win``` for windows
21 | - ```npm run package-linux``` for linux
22 |
23 | ### Getting Started
24 | - The two buttons on the top right allow you to add a slide and go into presentation mode.
25 | - To add content to a slide, use the three buttons above the main slide container. Currently text, image, and code content can be added to slide decks.
26 | - Once content is added, it can be moved and resized by dragging.
27 | - When a component is active, options will appear on the right sidebar.
28 | - If no component is selected, options for the current slide will appear, including the ability to reorder and delete the current slide [KNOWN ISSUE].
29 | - Save or open your devdeck files through the menu bar or by pressing ⌘+S or ⌘+O, respectively.
30 |
31 | ### Known Issues
32 | - Once components are added to the slide, user cannot access current slide options unless user clicks on that slide on the mini-slides thumbnail.
33 | - Undo/redo causes issues with current slide number being out of sync with state when adding/deleting or switching slides (current fix is to restart app) - app still works
34 | - It takes more ‘undo’ action calls than should be necessary to undo an action. This is because the undo function is listening to more than just the actions that render a visible difference on the document
35 |
36 | ### User Feedback
37 | [Report bugs or request features](https://goo.gl/forms/W3b5t1DeYldvA8dO2) email: chad.devdecks@gmail.com Your feedback will be greatly appreciated!
38 |
39 | ### Upcoming Features
40 | Feel free to work on any of these features!
41 | - Allowing 3rd party plugins to be downloaded and consumed
42 | - Shapes
--------------------------------------------------------------------------------
/app/modules/App/EditView/EditView.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import './edit-view.scss';
3 |
4 | import {
5 | MiniSlidesPanel,
6 | Scale,
7 | SmartSlide,
8 | ToolBar,
9 | UtilitiesMenu,
10 | } from 'modules';
11 |
12 | import SettingsMenu from './SettingsMenu/SettingsMenu';
13 |
14 | interface IDimensions {
15 | width: number;
16 | height: number;
17 | }
18 |
19 | interface EditViewProps {
20 | deviceDimension: IDimensions;
21 | isDragging: boolean;
22 | lastSavedSlideDimensions: IDimensions;
23 | slide: any;
24 | slidesDimension: IDimensions;
25 | thumbnailsDimension: IDimensions;
26 | updateDeviceDimension: Function;
27 | }
28 |
29 | const EditView = ({
30 | deviceDimension,
31 | isDragging,
32 | lastSavedSlideDimensions,
33 | slide,
34 | slidesDimension,
35 | thumbnailsDimension,
36 | updateDeviceDimension,
37 | }: EditViewProps) => {
38 | const EDIT_VIEW_WIDTH = '100vw';
39 | const UTILITIES_MENU_WIDTH = 295;
40 |
41 | const scale = Math.min( slidesDimension.width / deviceDimension.width, slidesDimension.height / deviceDimension.height);
42 | const { r, g, b, a } = slide.state.backgroundColor;
43 |
44 | return (
45 |
46 |
47 |
48 |
49 |
50 |
51 |
57 |
58 |
59 |
66 |
67 |
68 |
69 |
72 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
21 |
71 | );
72 | };
73 |
74 | export default FontStyles;
75 |
--------------------------------------------------------------------------------
/app/modules/MiniSlidesPanel/MiniSlidesPanel.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { connect } from 'react-redux';
3 | import { DummySlide, Scale } from 'modules';
4 | import { goToSlide, setActivePlugin } from 'actions/app.actions';
5 | import './mini-slide-panel.scss';
6 |
7 | interface IDimensions {
8 | width: number;
9 | height: number;
10 | }
11 |
12 | interface MiniSlidesPanelProps {
13 | currentSlideNumber: number;
14 | deviceDimension: IDimensions;
15 | slidesDimension: IDimensions;
16 | slides: any;
17 | goToSlide: Function;
18 | setActivePlugin: Function;
19 | }
20 |
21 | class MiniSlidesPanelComponent extends React.Component {
22 | render() {
23 | const THUMBNAILS_SCALE = 15;
24 |
25 | const {
26 | currentSlideNumber,
27 | deviceDimension,
28 | slides,
29 | slidesDimension,
30 | goToSlide,
31 | setActivePlugin,
32 | } = this.props;
33 |
34 | const thumbnailsDimension = {
35 | width: deviceDimension.width / THUMBNAILS_SCALE,
36 | height: deviceDimension.height / THUMBNAILS_SCALE
37 | };
38 |
39 | const scale = Math.min(
40 | thumbnailsDimension.width / deviceDimension.width,
41 | thumbnailsDimension.height / deviceDimension.height
42 | );
43 |
44 | return (
45 |
74 | );
75 | }
76 | }
77 |
78 | const mapStateToProps = (state: any, props: any) => ({
79 | currentSlideNumber: state.app.present.currentSlide,
80 | deviceDimension: state.app.present.deviceDimension,
81 | slides: state.slides.present,
82 | slidesDimension: state.app.present.slidesDimension,
83 | });
84 |
85 | const mapDispatchToProps = (dispatch: any) => ({
86 | goToSlide: (slideNumber: number) => dispatch(goToSlide(slideNumber)),
87 | setActivePlugin: () => dispatch(setActivePlugin()),
88 | });
89 |
90 | const MiniSlidesPanel = connect(mapStateToProps, mapDispatchToProps)(MiniSlidesPanelComponent as any);
91 |
92 | export { MiniSlidesPanel };
93 |
--------------------------------------------------------------------------------
/docs/Example.md:
--------------------------------------------------------------------------------
1 | # Example: Creating an Image Plugin
2 | We recommend using something like babel to make your development easier!
3 |
4 | ### index.js
5 |
6 | ```javascript
7 | import Image from './Image';
8 | import ImageOptions from './ImageOptions';
9 |
10 | export default {
11 | component: Image,
12 | icon: 'media',
13 | moduleName: 'devdecks-image',
14 | tooltip: 'Image',
15 | optionsMenuComponent: ImageOptions,
16 | state: {
17 | height: 200,
18 | imageBufferString: '',
19 | lockAspectRatio: true,
20 | },
21 | };
22 | ```
23 |
24 | ### Image.jsx
25 |
26 | ```javascript
27 | import React from 'react';
28 |
29 | // Utilize Node's APIs too!
30 | import fs from 'fs';
31 |
32 | // Freely use any of Electron's API with your plugin!
33 | import { remote } from 'electron';
34 |
35 | // Options for Electron's dialog API
36 | const options = {
37 | filters: [
38 | {
39 | name: 'Images',
40 | extensions: [ 'jpeg', 'jpg', 'gif', 'png' ]
41 | }
42 | ]
43 | };
44 |
45 | const Image = ({ pluginState, updateCurrentPlugin }) => {
46 | // Prompt user to select an image from their file system
47 | const selectImageFile = () => {
48 | remote.dialog.showOpenDialog(options, filePaths => {
49 | if (!filePaths) return;
50 | fs.readFile(filePaths[0], (err, data) => {
51 | if (err) return;
52 | const imageBufferString = new Buffer(data).toString('base64');
53 | updateCurrentPlugin({ imageBufferString });
54 | });
55 | });
56 | };
57 |
58 | const { width, imageBufferString } = pluginState;
59 |
60 | return (
61 | {
62 | imageBufferString
63 | ? 
68 | :
72 | }
73 | );
74 | }
75 |
76 | export default Image;
77 | ```
78 |
79 | ### ImageOptions.jsx
80 |
81 | ```javascript
82 | import React from 'react';
83 | import fs from 'fs';
84 | import { remote } from 'electron';
85 |
86 | // Feel free to use any libraries you want!
87 | // We're basing our UI from blueprintjs
88 | import { Button } from '@blueprintjs/core';
89 |
90 | // Got styles? Import your stylesheets
91 | import './devdecks-image.scss';
92 |
93 | const options = {
94 | filters: [
95 | {
96 | name: 'Images',
97 | extensions: [ 'jpeg', 'jpg', 'gif', 'png' ]
98 | }
99 | ]
100 | };
101 |
102 | const ImageOptions = ({ updateCurrentPlugin }) => {
103 | // Prompt user to select an image from their file system
104 | const selectImageFile = () => {
105 | remote.dialog.showOpenDialog(options, filePaths => {
106 | if (!filePaths) return;
107 | fs.readFile(filePaths[0], (err, data) => {
108 | if (err) return;
109 | const imageBufferString = new Buffer(data).toString('base64');
110 | updateCurrentPlugin({ imageBufferString });
111 | });
112 | });
113 | };
114 |
115 | return (
116 |
117 |
Image Options
118 |
119 |
124 |
125 | );
126 | };
127 |
128 | export default ImageOptions;
129 | ```
130 |
131 | ### devdecks-image.scss
132 | ```scss
133 | #devdecks-image-options-container {
134 | #add-image-button {
135 | width: 100%;
136 | }
137 | }
138 | ```
--------------------------------------------------------------------------------
/app/plugins/node_modules/devdecks-code-editor/Options/CodeEdit.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Button, Dialog, Intent } from '@blueprintjs/core';
3 |
4 | const brace = require('brace');
5 | const AceEditor = require('react-ace').default;
6 |
7 | //languages
8 | require('brace/mode/c_cpp');
9 | require('brace/mode/clojure');
10 | require('brace/mode/css');
11 | require('brace/mode/django');
12 | require('brace/mode/golang');
13 | require('brace/mode/haskell');
14 | require('brace/mode/html');
15 | require('brace/mode/java');
16 | require('brace/mode/javascript');
17 | require('brace/mode/json');
18 | require('brace/mode/less');
19 | require('brace/mode/objectivec');
20 | require('brace/mode/perl');
21 | require('brace/mode/php');
22 | require('brace/mode/python');
23 | require('brace/mode/ruby');
24 | require('brace/mode/scala');
25 | require('brace/mode/scss');
26 | require('brace/mode/sql');
27 | require('brace/mode/swift');
28 | require('brace/mode/typescript');
29 |
30 | //themes
31 | require('brace/theme/xcode');
32 |
33 | interface CodeEditProps {
34 | pluginState: any;
35 | updateCurrentPlugin: Function;
36 | }
37 |
38 | interface CodeEditStates {
39 | value: string;
40 | }
41 |
42 | class CodeEdit extends React.Component {
43 | constructor() {
44 | super();
45 | this.state = {
46 | value: '',
47 | };
48 | }
49 |
50 | componentWillReceiveProps() {
51 | const { pluginState: { snippet } } = this.props;
52 | if (this.state.value !== snippet) {
53 | this.setState({ value: snippet });
54 | }
55 | }
56 |
57 | render() {
58 | const { pluginState, updateCurrentPlugin } = this.props;
59 | const { value } = this.state;
60 | const { fontSize, isOpen, snippet, snippetEval, theme } = pluginState;
61 |
62 | let { language } = pluginState;
63 | switch (language) {
64 | case 'CPP': {
65 | language = 'c_cpp';
66 | break;
67 | }
68 | case 'Go': {
69 | language = 'golang';
70 | break;
71 | }
72 | case 'HTMLBars': {
73 | language = 'html';
74 | break;
75 | }
76 | }
77 |
78 | return (
79 |
80 |
118 | );
119 | }
120 | }
121 |
122 | export default CodeEdit;
123 |
--------------------------------------------------------------------------------
/app/reducers/slides.reducer.ts:
--------------------------------------------------------------------------------
1 | import * as constants from '../constants/slides.constants';
2 |
3 | const cloneDeep = require('lodash.clonedeep');
4 | const undoable = require('redux-undo').default;
5 |
6 | interface Slide {
7 | plugins: any[];
8 | state: {
9 | backgroundColor: {
10 | r: number;
11 | g: number;
12 | b: number;
13 | a: number;
14 | };
15 | transition: {
16 | right: string;
17 | left: string;
18 | };
19 | };
20 | }
21 |
22 | const initialSlideState: Slide = {
23 | plugins: [],
24 | state: {
25 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
26 | transition: {
27 | right: 'rotate-push-left-move-from-right',
28 | left: 'rotate-push-right-move-from-left',
29 | }
30 | }
31 | };
32 |
33 | const initialSlidesState: Slide[] = [ initialSlideState ];
34 |
35 | export const slidesReducer = (state: any = initialSlidesState, action: any) => {
36 | const slides = cloneDeep(state);
37 |
38 | switch (action.type) {
39 | case constants.ADD_PLUGIN_TO_CURRENT_SLIDE: {
40 | const { plugin, slideNumber } = action;
41 | slides[slideNumber].plugins.push(plugin);
42 | return slides;
43 | }
44 |
45 | case constants.ADD_SLIDE: {
46 | const newSlide = cloneDeep(initialSlideState);
47 | slides.splice(action.currentSlide + 1, 0, newSlide);
48 | return slides;
49 | }
50 |
51 | case constants.DELETE_CURRENT_PLUGIN: {
52 | const { pluginNumber, slideNumber } = action;
53 | slides[slideNumber].plugins[pluginNumber] = null;
54 | return slides;
55 | }
56 |
57 | case constants.DELETE_SLIDE: {
58 | slides.splice(action.slideToDelete, 1);
59 | return slides;
60 | }
61 |
62 | case constants.DUPLICATE_SLIDE: {
63 | const { slideToDuplicate } = action;
64 | const dupedSlide = cloneDeep(slides[slideToDuplicate]);
65 | slides.splice(slideToDuplicate + 1, 0, dupedSlide);
66 | return slides;
67 | }
68 |
69 | case constants.MOVE_SLIDE_DOWN: {
70 | const { slideNumber } = action;
71 |
72 | if (slideNumber === 0) return slides;
73 |
74 | const currentSlide = slides[slideNumber];
75 | const previousSlide = slides[slideNumber - 1];
76 | slides[slideNumber] = previousSlide;
77 | slides[slideNumber - 1] = currentSlide;
78 |
79 | return slides;
80 | }
81 |
82 | case constants.MOVE_SLIDE_UP: {
83 | const { slideNumber } = action;
84 |
85 | if (slideNumber >= state.length - 1) return slides;
86 |
87 | const currentSlide = slides[slideNumber];
88 | const nextSlide = slides[slideNumber + 1];
89 | slides[slideNumber] = nextSlide;
90 | slides[slideNumber + 1] = currentSlide;
91 |
92 | return slides;
93 | }
94 |
95 | case constants.OPEN_FILE: {
96 | const { buffer_data } = action;
97 | const slidesFromFile = JSON.parse(buffer_data.toString());
98 | return slidesFromFile;
99 | }
100 |
101 | case constants.OPEN_NEW_DECK: {
102 | const slides = initialSlidesState;
103 | return slides;
104 | }
105 |
106 | case constants.UPDATE_CURRENT_PLUGIN: {
107 | const { changes, pluginNumber, slideNumber } = action;
108 | const plugin = slides[slideNumber].plugins[pluginNumber];
109 |
110 | for (const change in changes) {
111 | plugin.state[change] = changes[change];
112 | }
113 |
114 | return slides;
115 | }
116 |
117 | case constants.UPDATE_CURRENT_SLIDE: {
118 | const { changes, slideNumber } = action;
119 | const slide = slides[slideNumber];
120 |
121 | for (const change in changes) {
122 | slide.state[change] = changes[change];
123 | }
124 |
125 | return slides;
126 | }
127 |
128 | default: {
129 | return state;
130 | }
131 | }
132 | }
133 |
134 | const undoableSlidesReducer = undoable(slidesReducer, {
135 | filter: function filterActions(action: any, currentState: any, previousHistory: any) {
136 | return true;
137 | }
138 | });
139 |
140 | export { undoableSlidesReducer };
141 |
--------------------------------------------------------------------------------
/app/reducers/app.reducer.ts:
--------------------------------------------------------------------------------
1 | import { remote } from 'electron';
2 | import * as constants from 'constants/app.constants';
3 | import { EDirection }from 'constants/slides.enums';
4 |
5 | const cloneDeep = require('lodash.clonedeep');
6 | const undoable = require('redux-undo').default;
7 |
8 | interface IDimensions {
9 | width: number;
10 | height: number;
11 | }
12 |
13 | interface InitialAppState {
14 | deviceDimension: IDimensions;
15 | currentSlide: number;
16 | currentSelectedPlugin: any;
17 | isDragging: boolean;
18 | isFullScreen: boolean;
19 | lastSavedSlideDimensions: IDimensions;
20 | direction: EDirection;
21 | slidesDimension: IDimensions;
22 | theme: {
23 | colors: string[];
24 | };
25 | }
26 |
27 | const deviceDimension = {
28 | width: 1280,
29 | height: 800
30 | };
31 |
32 | const initialAppState: InitialAppState = {
33 | deviceDimension,
34 | currentSlide: 0,
35 | currentSelectedPlugin: null,
36 | isDragging: false,
37 | isFullScreen: false,
38 | lastSavedSlideDimensions: deviceDimension,
39 | direction: EDirection.RIGHT,
40 | slidesDimension: {
41 | width: deviceDimension.width * .75,
42 | height: deviceDimension.height * .75
43 | },
44 | theme: {
45 | colors: ['#ffeb3b', '#0062A3'],
46 | }
47 | };
48 |
49 | const appReducer = (state: any = initialAppState, action: any) => {
50 | switch (action.type) {
51 | case constants.ADD_THEME_COLOR: {
52 | const { color } = action;
53 |
54 | const newState = cloneDeep(state);
55 | newState.theme.colors.push(color);
56 |
57 | return newState;
58 | }
59 |
60 | case constants.GO_TO_SLIDE: {
61 | const { maxSlides, slideNumber } = action;
62 | if (slideNumber < 1) return Object.assign({}, state, {
63 | currentSelectedPlugin: null,
64 | currentSlide: 0,
65 | });
66 | if (slideNumber >= maxSlides) return state;
67 | return Object.assign({}, state, {
68 | currentSelectedPlugin: null,
69 | currentSlide: slideNumber,
70 | });
71 | }
72 |
73 | case constants.LEFT_ARROW_PREV: {
74 | const currentSlide: number = state.currentSlide - 1;
75 | return Object.assign({}, state, {
76 | currentSlide,
77 | direction: EDirection.LEFT
78 | });
79 | }
80 |
81 | case constants.RIGHT_ARROW_NEXT: {
82 | const currentSlide: number = state.currentSlide + 1;
83 | return Object.assign({}, state, {
84 | currentSlide,
85 | direction: EDirection.RIGHT
86 | });
87 | }
88 |
89 | case constants.SAVE_LAST_SLIDE_DIMENSION: {
90 | const slideElement = document.getElementById('edit-slide-view');
91 | const { clientWidth: width, clientHeight: height } = slideElement;
92 | return Object.assign({}, state, { lastSavedSlideDimensions: { width, height } });
93 | }
94 |
95 | case constants.SET_ACTIVE_PLUGIN: {
96 | return Object.assign({}, state, { currentSelectedPlugin: action.newActivePlugin });
97 | }
98 |
99 | case constants.TOGGLE_FULLSCREEN: {
100 | const window = remote.getCurrentWindow();
101 | if (state.isFullScreen) {
102 | window.setMenuBarVisibility(true);
103 | window.setFullScreen(false)
104 | } else {
105 | window.setMenuBarVisibility(false);
106 | window.setFullScreen(true);
107 | }
108 |
109 | return Object.assign({}, state, { isFullScreen: !state.isFullScreen });
110 | }
111 |
112 | case constants.TOGGLE_GUIDELINES: {
113 | return Object.assign({}, state, { isDragging: !state.isDragging });
114 | }
115 |
116 | case constants.UPDATE_DEVICE_DIMENSION: {
117 | return Object.assign({}, state, { deviceDimension: action.newDeviceDimension });
118 | }
119 |
120 | case constants.UPDATE_SLIDES_DIMENSION: {
121 | return Object.assign({}, state, { slidesDimension: action.slidesDimension })
122 | }
123 |
124 | default: {
125 | return state;
126 | }
127 | }
128 | };
129 |
130 | const ignoreActions:any = [constants.TOGGLE_GUIDELINES];
131 | const undoableAppReducer = undoable(appReducer, {
132 | filter: function filterActions(action: any, currentState: any, previousHistory: any) {
133 | if (action.type === 'SET_ACTIVE_PLUGIN' || action.type === 'GO_TO_SLIDE') return true;
134 | return false;
135 | }
136 | });
137 |
138 | export { undoableAppReducer };
139 |
--------------------------------------------------------------------------------
/test/reducers/slides/actions/addSlide-spec.ts:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import { ADD_SLIDE } from '../../../../app/constants/slides.constants';
3 |
4 | export default function(initialState: any, reducer: any, slide: any) {
5 | describe('ADD_SLIDE', () => {
6 | it('should add a new slide at position 1 when current slide is 0 and there is only one slide', () => {
7 | const _initialState: any = [{
8 | plugins: ['plugin1'],
9 | state: {
10 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
11 | transition: {
12 | right: 'rotate-push-left-move-from-right',
13 | left: 'rotate-push-right-move-from-left',
14 | }
15 | }
16 | }];
17 |
18 | expect(
19 | reducer(_initialState, {
20 | type: ADD_SLIDE,
21 | currentSlide: 0
22 | })
23 | ).to.deep.equal([
24 | {
25 | plugins: ['plugin1'],
26 | state: {
27 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
28 | transition: {
29 | right: 'rotate-push-left-move-from-right',
30 | left: 'rotate-push-right-move-from-left',
31 | }
32 | }
33 | },
34 | slide
35 | ])
36 | .and.to.have.lengthOf(2);
37 | });
38 |
39 | it('should add a new slide at position 2 when current slide is 1 and there are three slides', () => {
40 | const _initialState: any = [{
41 | plugins: ['plugin1'],
42 | state: {
43 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
44 | transition: {
45 | right: 'rotate-push-left-move-from-right',
46 | left: 'rotate-push-right-move-from-left',
47 | }
48 | }
49 | }, {
50 | plugins: ['plugin1', 'plugin2'],
51 | state: {
52 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
53 | transition: {
54 | right: 'rotate-push-left-move-from-right',
55 | left: 'rotate-push-right-move-from-left',
56 | }
57 | }
58 | }, {
59 | plugins: ['plugin1', 'plugin2', 'plugin5'],
60 | state: {
61 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
62 | transition: {
63 | right: 'rotate-push-left-move-from-right',
64 | left: 'rotate-push-right-move-from-left',
65 | }
66 | }
67 | }];
68 |
69 | expect(
70 | reducer(_initialState, {
71 | type: ADD_SLIDE,
72 | currentSlide: 1
73 | })
74 | )
75 | .to.deep.equal([
76 | {
77 | plugins: ['plugin1'],
78 | state: {
79 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
80 | transition: {
81 | right: 'rotate-push-left-move-from-right',
82 | left: 'rotate-push-right-move-from-left',
83 | }
84 | }
85 | }, {
86 | plugins: ['plugin1', 'plugin2'],
87 | state: {
88 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
89 | transition: {
90 | right: 'rotate-push-left-move-from-right',
91 | left: 'rotate-push-right-move-from-left',
92 | }
93 | }
94 | }, slide, {
95 | plugins: ['plugin1', 'plugin2', 'plugin5'],
96 | state: {
97 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
98 | transition: {
99 | right: 'rotate-push-left-move-from-right',
100 | left: 'rotate-push-right-move-from-left',
101 | }
102 | }
103 | }
104 | ])
105 | .and.to.have.lengthOf(4);
106 | });
107 |
108 | it('should add a new slide at the end when last slide is selected', () => {
109 | const _initialState: any = [{
110 | plugins: ['plugin1', 'plugin2'],
111 | state: {
112 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
113 | transition: {
114 | right: 'rotate-push-left-move-from-right',
115 | left: 'rotate-push-right-move-from-left',
116 | }
117 | }
118 | }, {
119 | plugins: ['plugin1', 'plugin2'],
120 | state: {
121 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
122 | transition: {
123 | right: 'rotate-push-left-move-from-right',
124 | left: 'rotate-push-right-move-from-left',
125 | }
126 | }
127 | }];
128 |
129 | expect(
130 | reducer(_initialState, {
131 | type: ADD_SLIDE,
132 | currentSlide: 1
133 | })
134 | )
135 | .to.deep.equal([
136 | {
137 | plugins: ['plugin1', 'plugin2'],
138 | state: {
139 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
140 | transition: {
141 | right: 'rotate-push-left-move-from-right',
142 | left: 'rotate-push-right-move-from-left',
143 | }
144 | }
145 | },
146 | {
147 | plugins: ['plugin1', 'plugin2'],
148 | state: {
149 | backgroundColor: { r: 255, g: 255, b: 255, a: 100 },
150 | transition: {
151 | right: 'rotate-push-left-move-from-right',
152 | left: 'rotate-push-right-move-from-left',
153 | }
154 | }
155 | },
156 | slide
157 | ])
158 | .and.to.have.lengthOf(3)
159 | });
160 | });
161 | }
162 |
--------------------------------------------------------------------------------
/app/plugins/node_modules/devdecks-code-editor/CodeEditor.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import CodeRun from './Options/CodeRun';
3 | import './code-editor.scss';
4 |
5 | import {
6 | Popover,
7 | Position,
8 | } from '@blueprintjs/core';
9 |
10 | const classNames = require('classnames');
11 | const Highlight = require('react-highlight');
12 | require('highlight.js/styles/xcode.css');
13 |
14 | interface CodeEditorProps {
15 | isFullscreen?: boolean;
16 | pluginState: any;
17 | updateCurrentPlugin?: any;
18 | }
19 |
20 | class CodeEditor extends React.Component {
21 | codeBlocks: any[] = [];
22 |
23 | constructor() {
24 | super();
25 | this.handleCodeHighlight = this.handleCodeHighlight.bind(this);
26 | this.state = {
27 | activeItem: 0,
28 | };
29 | }
30 |
31 | private handleCodeHighlight(e: any) {
32 | const { pluginState: { highlightedItems } } = this.props;
33 | const { activeItem } = this.state;
34 | switch (e.keyCode) {
35 | // UP
36 | case 38: {
37 | if (activeItem > 0) this.setState({ activeItem: activeItem - 1 });
38 | break;
39 | }
40 |
41 | // DOWN
42 | case 40: {
43 | if (activeItem < highlightedItems.length - 1) this.setState({ activeItem: activeItem + 1 });
44 | break;
45 | }
46 | }
47 | };
48 |
49 | public componentDidUpdate() {
50 | const { codeBlocks } = this;
51 | const { pluginState: { highlightedItems } } = this.props;
52 | const { activeItem } = this.state;
53 | const activeBlock = highlightedItems[activeItem];
54 | if (activeBlock) {
55 | const scrollToCodeBlock = codeBlocks[activeBlock.start]
56 | scrollToCodeBlock ? scrollToCodeBlock.scrollIntoViewIfNeeded(true) : null;
57 | }
58 | }
59 |
60 | public render() {
61 | const {
62 | isFullscreen,
63 | pluginState,
64 | updateCurrentPlugin,
65 | } = this.props;
66 |
67 | const { activeItem } = this.state;
68 |
69 | const {
70 | fontSize,
71 | height,
72 | highlightedItems,
73 | isOpen,
74 | language,
75 | showLineNumbers,
76 | snippet,
77 | theme
78 | } = pluginState;
79 |
80 | const codeLineNumberClass = classNames({
81 | 'code-line-number': true,
82 | 'show': !isFullscreen || showLineNumbers,
83 | });
84 |
85 | const activeBlock = highlightedItems[activeItem];
86 | const code = (
87 | snippet.split('\n').map((line: string, i: number) => {
88 | if (!activeBlock){
89 | return (
90 |
94 | {i}
95 |
96 | {line}
97 |
98 |
99 | );
100 | } else if (i >= activeBlock.start && i <= activeBlock.end) {
101 | if (i == activeBlock.end) {
102 | return (
103 |
110 | this.codeBlocks[i] = c}
112 | className="code"
113 | id={`code-highlight-${i}`} >
114 | {i}
115 |
116 | {line}
117 |
118 |
119 |
120 | );
121 | }
122 |
123 | return (
124 | this.codeBlocks[i] = c}
126 | key={i}
127 | className="code"
128 | id={`code-highlight-${i}`} >
129 | {i}
130 |
131 | {line}
132 |
133 |
134 | );
135 | }
136 | return (
137 |
141 | {i}
142 |
143 | {line}
144 |
145 |
146 | );
147 | })
148 | );
149 |
150 | return (
151 | {} }
156 | onKeyDown={this.handleCodeHighlight} >
157 | {
158 | snippet
159 | ?
160 | {code}
161 | {
162 | isFullscreen
163 | ?
166 | : null
167 | }
168 |
169 | :
172 |
173 | }
174 |
34 | {
35 | props.items.map((value: any, index: number) =>
36 |
43 | )
44 | }
45 |
46 | );
47 | });
48 |
49 | interface CodeHighlightSubmitProps {
50 | pluginState: any;
51 | updateCurrentPlugin: Function;
52 | }
53 |
54 | interface CodeHighlightSubmitStates {
55 | alertMessage?: string;
56 | isAlert?: boolean;
57 | start?: string;
58 | end?: string;
59 | text?: string;
60 | }
61 |
62 | class CodeHighlightSubmit extends React.Component {
63 | maxLines: number = 0;
64 |
65 | constructor() {
66 | super();
67 | this.handleSort = this.handleSort.bind(this);
68 | this.validateHighlightBlock = this.validateHighlightBlock.bind(this);
69 | this.state = {
70 | alertMessage: '',
71 | isAlert: false,
72 | start: '',
73 | end: '',
74 | text: '',
75 | };
76 | }
77 |
78 | private handleSort({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) {
79 | const { pluginState: { highlightedItems }, updateCurrentPlugin } = this.props;
80 | updateCurrentPlugin({ highlightedItems: arrayMove(highlightedItems, oldIndex, newIndex) });
81 | }
82 |
83 | private validateHighlightBlock() {
84 | const { pluginState: { highlightedItems, snippet } } = this.props;
85 | const { start, end, text } = this.state;
86 |
87 | const max = snippet.split('\n').length - 1;
88 | if (!start || +start < 0 || +start > max) {
89 | return {
90 | success: false,
91 | message: 'Start value cannot be less than 0 or greater than number of lines',
92 | };
93 | }
94 | if (!end || +end < +start || +end > max) {
95 | return {
96 | success: false,
97 | message: 'End value cannot be less than start value or greater than number of lines',
98 | };
99 | }
100 | return {
101 | success: true,
102 | };
103 | }
104 |
105 | public componentWillReceiveProps(nextProps: CodeHighlightSubmitProps) {
106 | const { snippet } = nextProps.pluginState;
107 | this.maxLines = snippet.split('\n').length - 1;
108 | }
109 |
110 | public render() {
111 | const { pluginState: { highlightedItems, snippet }, updateCurrentPlugin } = this.props;
112 | const disabled = snippet ? false : true;
113 | const items = highlightedItems.map((highlightedItem: any) => `${highlightedItem.start}-${highlightedItem.end}`);
114 |
115 | return (
116 |