34 | {uploadStatus &&
35 |
36 | {uploadStatus.status === 'initializing' ?
37 | translate( 'Analyzing contents...' )
38 | : translate( 'Adding "{n}"', { n: uploadStatus.currentFileName } )}
39 |
40 | }
41 | {
42 | uploadStatus && uploadStatus.errors && uploadStatus.errors.length > 0 &&
43 |
44 | {
45 | uploadStatus.errors.map( ( error, errorIndex ) => (
46 |
50 |
51 |
52 |
54 |
55 |
56 | {
57 | error.reason === 'too big' ?
58 | translate( '"{f}" is too big', { f: error.fileName } )
59 | : null
60 | }
61 |
62 |
63 |
64 |
65 | ) )
66 | }
67 |
68 | }
69 |
70 | }
71 | />
72 | );
73 | };
74 |
75 | UploadModal.contextTypes = {
76 | t: PropTypes.func,
77 | };
78 |
79 | export default UploadModal;
80 |
--------------------------------------------------------------------------------
/src/components/UploadModal/index.js:
--------------------------------------------------------------------------------
1 | import UploadModal from './UploadModal';
2 | export default UploadModal;
3 |
--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Fonio Configuration Module
3 | * ===========================
4 | *
5 | * Module exporting the client app's configuration.
6 | *
7 | * IMPORTANT: the FONIO_CONFIG is a global variable which is:
8 | * `dev`: injected by webpack.DefinePlugin
9 | * `prod`: a global variable templated in a script tag
10 | */
11 | /* eslint no-console: 0 */
12 | const CONFIG = typeof FONIO_CONFIG !== 'undefined' ? FONIO_CONFIG : {};
13 |
14 | if ( !Object.keys( CONFIG ).length )
15 | console.warn( 'WARNING: FONIO_CONFIG is absent.' );
16 |
17 | CONFIG.restUrl = `${CONFIG.apiUrl }/api`;
18 |
19 | export default CONFIG;
20 |
--------------------------------------------------------------------------------
/src/features/AuthManager/components/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides an entrypoint to the authentication manager feature react components
3 | * @module fonio/features/AuthManager
4 | */
5 | import AuthManagerContainer from './AuthManagerContainer';
6 |
7 | export default AuthManagerContainer;
8 |
--------------------------------------------------------------------------------
/src/features/DesignView/components/MainDesignColumn.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a layout component for displaying design view main column layout
3 | * @module fonio/features/DesignView
4 | */
5 | /**
6 | * Imports Libraries
7 | */
8 | import React from 'react';
9 | import StoryPlayer from 'quinoa-story-player';
10 | import Frame, { FrameContextConsumer } from 'react-frame-component';
11 | import { set } from 'lodash/fp';
12 | import {
13 | Column,
14 | Button,
15 | } from 'quinoa-design-library/components/';
16 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
17 | import { faPrint } from '@fortawesome/free-solid-svg-icons/faPrint';
18 | import { getTemplateName, isNewSchema, getStyles } from 'quinoa-schemas';
19 |
20 | /**
21 | * Imports Project utils
22 | */
23 | import { processCustomCss } from '../../../helpers/postcss';
24 |
25 | const PreviewWrapper = ( props ) => {
26 | const { story, lang } = props;
27 | const renderedStory = set(
28 | isNewSchema( story ) ? [
29 | 'settings',
30 | 'styles',
31 | getTemplateName( story ),
32 | 'css'
33 | ] : [
34 | 'settings',
35 | 'css'
36 | ],
37 | processCustomCss( getStyles( story ).css ),
38 | story
39 | );
40 | return (
41 |
53 | {( { document, window } ) => (
54 |
62 |
63 | );
64 | };
65 |
66 | const MainDesignColumn = ( {
67 | story,
68 | lang
69 | } ) => {
70 |
71 | const handleClickOnPrint = () => {
72 | window.frames.preview.focus();
73 | window.frames.preview.print();
74 | };
75 |
76 | return (
77 |
81 | {
82 |
96 |
98 |
99 | );
100 | };
101 |
102 | export default MainDesignColumn;
103 |
--------------------------------------------------------------------------------
/src/features/DesignView/components/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides an entrypoint to the design view react components
3 | * @module fonio/features/DesignView
4 | */
5 | import DesignViewContainer from './DesignViewContainer';
6 |
7 | export default DesignViewContainer;
8 |
--------------------------------------------------------------------------------
/src/features/DesignView/utils/buildCssHelp.js:
--------------------------------------------------------------------------------
1 | export default ( translate ) => [
2 | {
3 | action: translate( 'Change the paragraphs font size' ),
4 | code: `
5 | .content-p{
6 | font-size: 10px;
7 | }`
8 | },
9 | {
10 | action: translate( 'Change the background color' ),
11 | code: `
12 | .wrapper, .nav{
13 | background: white;
14 | }`
15 | },
16 | {
17 | action: translate( 'Change the titles color' ),
18 | code: `
19 | .content-h1,.content-h2,.section-title
20 | {
21 | color: blue;
22 | }`
23 | }
24 | ];
25 |
--------------------------------------------------------------------------------
/src/features/EditionUiWrapper/components/EditionUiWrapperContainer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a connected component for handling edition ui generals
3 | * @module fonio/features/EditionUi
4 | */
5 | /**
6 | * Imports Libraries
7 | */
8 | import React, { Component } from 'react';
9 | import { bindActionCreators } from 'redux';
10 | import { connect } from 'react-redux';
11 | import { withRouter } from 'react-router';
12 |
13 | /**
14 | * Imports Project utils
15 | */
16 | /**
17 | * Imports Ducks
18 | */
19 | import * as duck from '../duck';
20 | import * as userInfoDuck from '../../UserInfoManager/duck';
21 | import * as connectionsDuck from '../../ConnectionsManager/duck';
22 | import * as editedStoryDuck from '../../StoryManager/duck';
23 |
24 | /**
25 | * Imports Components
26 | */
27 | import EditionUiWrapperLayout from './EditionUiWrapperLayout';
28 |
29 | @connect(
30 | ( state ) => ( {
31 | lang: state.i18nState && state.i18nState.lang,
32 | ...connectionsDuck.selector( state.connections ),
33 | ...duck.selector( state.editionUiWrapper ),
34 | ...userInfoDuck.selector( state.userInfo ),
35 | ...editedStoryDuck.selector( state.editedStory ),
36 | } ),
37 | ( dispatch ) => ( {
38 | actions: bindActionCreators( {
39 |
40 | ...duck,
41 | ...userInfoDuck,
42 | ...connectionsDuck,
43 | }, dispatch )
44 | } )
45 | )
46 |
47 | class EditionUiWrapperContainer extends Component {
48 |
49 | constructor( props ) {
50 | super( props );
51 | }
52 |
53 | getNavLocation = ( path ) => {
54 | switch ( path ) {
55 | case '/story/:storyId/library':
56 | return 'library';
57 | case '/story/:storyId/design':
58 | return 'design';
59 | case '/story/:storyId/section/:sectionId':
60 | return 'editor';
61 | case '/story/:storyId/summary':
62 | case '/story/:storyId':
63 | return 'summary';
64 | default:
65 | return undefined;
66 | }
67 | }
68 |
69 | getActiveSectionTitle = ( story, sectionId ) => story.sections[sectionId].metadata.title;
70 |
71 | render() {
72 | const navLocation = this.getNavLocation( this.props.match.path );
73 | let activeSectionTitle;
74 | if ( this.props.match.params.sectionId && this.props.editedStory ) {
75 | activeSectionTitle = this.getActiveSectionTitle( this.props.editedStory, this.props.match.params.sectionId );
76 | }
77 | return (
78 |
35 |
36 |
37 |
38 |
58 |
59 |
60 |
64 | FORCCAST program, fostering pedagogical innovations in controversy mapping.' )
67 | } }
68 | />
69 |
médialab SciencesPo, a research laboratory that connects social sciences with inventive methods.' )
72 | } }
73 | />
74 |
75 |
76 | {translate( 'Avatar icons courtesy of ' )}
77 |
81 | Freepik
82 | .
83 |
84 |
85 |
94 | AGPL v3
95 |
96 | {translate( ' and is hosted on ' )}
97 |
101 | Github
102 | .
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 | );
111 |
112 | export default FooterComponent;
113 |
--------------------------------------------------------------------------------
/src/features/HomeView/components/HomeViewContainer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a connected component for handling the home view
3 | * @module fonio/features/HomeView
4 | */
5 | /**
6 | * Imports Libraries
7 | */
8 | import React, { Component } from 'react';
9 | import PropTypes from 'prop-types';
10 | import { bindActionCreators } from 'redux';
11 | import { connect } from 'react-redux';
12 | import { setLanguage } from 'redux-i18n';
13 | import { withRouter } from 'react-router';
14 |
15 | /**
16 | * Imports Project utils
17 | */
18 | import { getEditionHistoryMap } from '../../../helpers/localStorageUtils';
19 |
20 | /**
21 | * Imports Ducks
22 | */
23 | import * as duck from '../duck';
24 | import * as userInfoDuck from '../../UserInfoManager/duck';
25 | import * as connectionsDuck from '../../ConnectionsManager/duck';
26 | import * as authDuck from '../../AuthManager/duck';
27 | import * as editionDuck from '../../EditionUiWrapper/duck';
28 | import * as errorMessageDuck from '../../ErrorMessageManager/duck';
29 |
30 | /**
31 | * Imports Components
32 | */
33 | import HomeViewLayout from './HomeViewLayout';
34 |
35 | /**
36 | * Redux-decorated component class rendering the takeaway dialog feature to the app
37 | */
38 | @connect(
39 | ( state ) => ( {
40 | ...editionDuck.selector( state.editionUiWrapper ),
41 | ...duck.selector( state.home ),
42 | lang: state.i18nState.lang,
43 | ...userInfoDuck.selector( state.userInfo ),
44 | ...connectionsDuck.selector( state.connections ),
45 | ...authDuck.selector( state.auth ),
46 | } ),
47 | ( dispatch ) => ( {
48 | actions: bindActionCreators( {
49 | ...editionDuck,
50 | ...userInfoDuck,
51 | ...connectionsDuck,
52 | ...authDuck,
53 | ...errorMessageDuck,
54 | ...duck,
55 | setLanguage,
56 | }, dispatch )
57 | } )
58 | )
59 | class HomeViewContainer extends Component {
60 |
61 | /**
62 | * Context data used by the component
63 | */
64 | static contextTypes = {
65 |
66 | /**
67 | * Un-namespaced translate function
68 | */
69 | t: PropTypes.func.isRequired,
70 |
71 | /**
72 | * Redux store
73 | */
74 | store: PropTypes.object.isRequired
75 | }
76 |
77 | /**
78 | * constructor
79 | * @param {object} props - properties given to instance at instanciation
80 | */
81 | constructor( props ) {
82 | super( props );
83 | }
84 |
85 | componentWillMount() {
86 | this.props.actions.fetchStories();
87 | const editionHistoryMap = getEditionHistoryMap();
88 | this.props.actions.setEditionHistory( editionHistoryMap );
89 | this.props.actions.setStoryLoginId( undefined );
90 | }
91 |
92 | /**
93 | * Defines whether the component should re-render
94 | * @param {object} nextProps - the props to come
95 | * @param {object} nextState - the state to come
96 | * @return {boolean} shouldUpdate - whether to update or not
97 | */
98 | shouldComponentUpdate() {
99 | // todo: optimize when the feature is stabilized
100 | return true;
101 | }
102 |
103 | /**
104 | * Renders the component
105 | * @return {ReactElement} component - the component
106 | */
107 | render() {
108 | return (
109 |
44 | {
45 |
46 |
47 | <Columns>
48 | <Column isSize={ 11 }>
49 | {translate( 'New Story' )}
50 | </Column>
51 | <Column style={ { textAlign: 'right' } }>
52 | <Delete onClick={ onClose } />
53 | </Column>
54 | </Columns>
55 |
56 |
60 |
61 |
62 | {translate( 'Create a story' )}
66 | {translate( 'Import an existing story' )}
71 |
73 |
74 |
75 | {mode === 'form' ?
76 |
85 |
89 | {translate( 'Drop a fonio file' )}
90 |
91 | {importStoryStatus === 'fail' && {translate( 'Story is not valid' )} }
92 |
93 |
94 | }
95 |
96 | }
97 |
98 |
99 | );
100 | };
101 |
102 | export default NewStoryForm;
103 |
--------------------------------------------------------------------------------
/src/features/HomeView/components/OtherUsersWidget.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a component for representing other users active in the classroom
3 | * @module fonio/features/HomeView
4 | */
5 | /**
6 | * Imports Libraries
7 | */
8 | import React from 'react';
9 | import {
10 | Title,
11 | StretchedLayoutContainer,
12 | StretchedLayoutItem,
13 | HelpPin,
14 | Image,
15 | Content
16 | } from 'quinoa-design-library/components';
17 |
18 | const OtherUsersWidget = ( {
19 | translate,
20 | users,
21 | userId,
22 | } ) => {
23 | return (
24 |
25 | {
26 | users &&
27 | Object.keys( users )
28 | .filter( ( thatUserId ) => userId !== thatUserId ).length > 0 &&
29 |
33 | {translate( 'Who else is online ?' )}
34 | <HelpPin>{translate( 'writers connected to this classroom right now' )}</HelpPin>
35 |
36 | }
37 |
38 | {users &&
39 | Object.keys( users )
40 | .filter( ( thatUserId ) => userId !== thatUserId )
41 | .map( ( thatUserId ) => ( { userId, ...users[thatUserId] } ) )
42 | .map( ( user, index ) => {
43 | return (
44 |
49 |
50 |
56 |
57 |
58 | {user.name}
59 |
60 |
61 |
62 | );
63 | } )
64 | }
65 |
66 |
28 |
32 | {translate( 'Your profile' )}
33 | <HelpPin>{translate( 'choose how you will be identified by other writers' )}</HelpPin>
34 |
35 | {userInfo.userId !== undefined &&
36 |
37 |
38 |
45 |
49 | {userInfo.name}
50 |
51 |
52 |
53 | {translate( 'edit' )}
54 |
55 |
56 |
57 | }
58 |
59 | );
60 | };
61 |
62 | export default ProfileWidget;
63 |
--------------------------------------------------------------------------------
/src/features/HomeView/components/StoryCard.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | .fonio-StoryCard{
4 | .users-container{
5 | max-height: 30rem;
6 | overflow-x: auto;
7 | }
8 | .users-wrapper{
9 | display: flex;
10 | flex-flow: row wrap;
11 | }
12 | .user-container{
13 | margin-right: 1rem;
14 | margin-bottom: 1rem;
15 | }
16 | .authors-container{
17 | padding-bottom: 3rem;
18 | }
19 | .last-update-container{
20 | align-self: flex-end;
21 | position: absolute;
22 | bottom: 2.5rem;
23 | left: 1.5rem;
24 | }
25 | .inline-icon-container{
26 | margin-left: .5rem;
27 | margin-right: 1rem;
28 | }
29 | .title,.subtitle{
30 | color: inherit;
31 | }
32 | &.is-special{
33 | .card{
34 | background: #4a4a4a;
35 | color: #fff;
36 | }
37 | }
38 | @media screen and (max-width:789px) {
39 | .card-content{
40 | padding-bottom: 0;
41 | }
42 | .column.is-two-fifth{
43 | padding-top: 0;
44 |
45 | }
46 | .aside-actions{
47 | padding-top: 0;
48 | padding-bottom: 1.5rem;
49 | }
50 | .authors-container{
51 | padding-bottom: 0;
52 | .content{
53 | margin-bottom: 0;
54 | }
55 | }
56 | .users-container{
57 | padding-bottom: 0;
58 | padding-top: 0;
59 | }
60 | .last-update-container{
61 | padding-top: 1rem;
62 | align-self: unset;
63 | position: relative;
64 | bottom: unset;
65 | left: unset;
66 | }
67 | }
68 | }
--------------------------------------------------------------------------------
/src/features/HomeView/components/StoryCardWrapper.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a wrapper for story cards as displayed in list within the home view
3 | * @module fonio/features/HomeView
4 | */
5 | /* eslint react/prefer-stateless-function : 0 */
6 | /**
7 | * Imports Libraries
8 | */
9 | import React, { Component } from 'react';
10 | import {
11 | Level,
12 | Column
13 | } from 'quinoa-design-library/components/';
14 |
15 | /**
16 | * Imports Components
17 | */
18 | import StoryCard from './StoryCard';
19 |
20 | export default class StoryCardWrapper extends Component {
21 | render = () => {
22 | const {
23 | story,
24 | users,
25 | onAction: handleAction,
26 | onClick: handleClick,
27 | } = this.props;
28 | return (
29 |
30 |
31 |
38 |
39 | );
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/features/HomeView/components/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides an entrypoint to the authentication manager feature react components
3 | * @module fonio/features/HomeView
4 | */
5 | import HomeViewContainer from './HomeViewContainer';
6 |
7 | export default HomeViewContainer;
8 |
--------------------------------------------------------------------------------
/src/features/HomeView/duck.spec.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect';
2 |
3 | import {
4 | ui as uiReducer,
5 | SET_TAB_MODE,
6 | SET_SEARCH_STRING,
7 | SET_SORTING_MODE,
8 | SET_IDENTIFICATION_MODAL_SWITCH,
9 | SET_PREVIEWED_STORY_ID,
10 | SET_STORY_DELETE_ID,
11 | SET_CHANGE_PASSWORD_ID,
12 | SET_OVERRIDE_IMPORT,
13 | SET_OVERRIDE_STORY_MODE,
14 | SET_NEW_STORY_OPEN,
15 | SET_NEW_STORY_TAB_MODE,
16 | SET_PASSWORD_MODAL_OPEN
17 | } from './duck';
18 |
19 | describe( 'HomeView ui reducer test', () => {
20 | let mockState;
21 | let action;
22 |
23 | beforeEach( () => {
24 | mockState = {};
25 | } );
26 |
27 | test.each( [
28 | [ 'stories', SET_TAB_MODE, 'stories', 'tabMode' ],
29 | [ 'searchinput', SET_SEARCH_STRING, 'searchinput', 'searchString' ],
30 | [ 'title', SET_SORTING_MODE, 'title', 'sortingMode' ],
31 | [ false, SET_IDENTIFICATION_MODAL_SWITCH, false, 'identificationModalSwitch' ],
32 | [ 'testStoryId', SET_PREVIEWED_STORY_ID, 'testStoryId', 'previewedStoryId' ],
33 | [ 'testStoryId', SET_STORY_DELETE_ID, 'testStoryId', 'storyDeleteId' ],
34 | [ 'testStoryId', SET_CHANGE_PASSWORD_ID, 'testStoryId', 'changePasswordId' ],
35 | [ false, SET_OVERRIDE_IMPORT, false, 'overrideImport' ],
36 | [ 'create', SET_OVERRIDE_STORY_MODE, 'create', 'overrideStoryMode' ],
37 | [ false, SET_NEW_STORY_OPEN, false, 'newStoryOpen' ],
38 | [ 'form', SET_NEW_STORY_TAB_MODE, 'form', 'newStoryTabMode' ],
39 | [ false, SET_PASSWORD_MODAL_OPEN, false, 'passwordModalOpen' ],
40 | ] )(
41 | 'should return %p when %s with %p',
42 | ( expected, actionName, input, reducerName ) => {
43 | action = {
44 | type: actionName,
45 | payload: input
46 | };
47 | const resultState = uiReducer( mockState, action );
48 | expect( resultState[reducerName] ).toEqual( expected );
49 | },
50 | );
51 | } );
52 |
--------------------------------------------------------------------------------
/src/features/LibraryView/components/ConfirmBatchDeleteModal.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a modal for confirm the deletion of several resources
3 | * @module fonio/features/LibraryView
4 | */
5 | /**
6 | * Imports Libraries
7 | */
8 | import React from 'react';
9 | import {
10 | ModalCard,
11 | Button
12 | } from 'quinoa-design-library/components';
13 |
14 | const ConfirmBatchDeleteModal = ( {
15 | translate,
16 | isActive,
17 | actualResourcesPromptedToDelete,
18 | resourcesPromptedToDelete,
19 | endangeredContextualizationsLength,
20 | onDelete,
21 | onCancel
22 | } ) => (
23 |
29 | {
30 | actualResourcesPromptedToDelete.length !== resourcesPromptedToDelete.length &&
31 |
32 | {
33 | translate( '{x} of {y} of the resources you selected cannot be deleted now because they are used by another author.', { x: resourcesPromptedToDelete.length - actualResourcesPromptedToDelete.length, y: resourcesPromptedToDelete.length } )
34 | }
35 |
36 | }
37 | {endangeredContextualizationsLength > 0 &&
38 | {
39 | translate( [
40 | 'You will destroy one item mention in your content if you delete these items.',
41 | 'You will destroy {n} item mentions in your content if your delete these items.',
42 | 'n'
43 | ],
44 | { n: endangeredContextualizationsLength } )}
45 |
46 | }
47 |
48 | {translate( [ 'Are you sure you want to delete this item ?', 'Are you sure you want to delete these items ?', 'n' ], { n: resourcesPromptedToDelete.length } )}
49 |
50 |
51 | }
52 | footerContent={ [
53 | {translate( 'Delete' )}
60 | ,
61 | {translate( 'Cancel' )}
67 | ,
68 | ] }
69 | />
70 | );
71 |
72 | export default ConfirmBatchDeleteModal;
73 |
--------------------------------------------------------------------------------
/src/features/LibraryView/components/ResourceCard.scss:
--------------------------------------------------------------------------------
1 | .fonio-ResourceCard
2 | {
3 | .bib-wrapper
4 | {
5 | .Bibliography
6 | {
7 | .csl-entry
8 | {
9 | position: relative;
10 |
11 | overflow: hidden;
12 |
13 | max-height: 9rem;
14 |
15 | word-break: break-all;
16 | &:before
17 | {
18 | position: absolute;
19 | top: 0;
20 | left: 0;
21 |
22 | width: 100%;
23 | height: 100%;
24 |
25 | content: '';
26 | }
27 | }
28 | a
29 | {
30 | pointer-events: none;
31 | }
32 | }
33 | }
34 | .preview-container
35 | {
36 | overflow: hidden;
37 | }
38 |
39 | .ReactTable
40 | {
41 | .-pagination
42 | {
43 | display: none;
44 | }
45 | .rt-tbody{
46 | overflow-y: hidden;
47 | }
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/features/LibraryView/components/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides an entrypoint to the library view react components
3 | * @module fonio/features/LibraryView
4 | */
5 | import LibraryViewContainer from './LibraryViewContainer';
6 |
7 | export default LibraryViewContainer;
8 |
--------------------------------------------------------------------------------
/src/features/ReadStoryView/components/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides an entrypoint to the read story view react components
3 | * @module fonio/features/ReadStoryView
4 | */
5 | import ReadStoryViewContainer from './ReadStoryViewContainer';
6 |
7 | export default ReadStoryViewContainer;
8 |
--------------------------------------------------------------------------------
/src/features/SectionView/components/MoveButton.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a mini component for representing move possibility
3 | * @module fonio/features/SectionView
4 | */
5 | /**
6 | * Imports Libraries
7 | */
8 | import React from 'react';
9 | import {
10 | Button,
11 | Icon
12 | } from 'quinoa-design-library/components';
13 | import icons from 'quinoa-design-library/src/themes/millet/icons';
14 |
15 | const MoveButton = ( {
16 |
17 | } ) => (
18 |
24 |
25 |
27 |
28 | );
29 |
30 | export default MoveButton;
31 |
--------------------------------------------------------------------------------
/src/features/SectionView/components/ResourceMiniCard.scss:
--------------------------------------------------------------------------------
1 | .bib-wrapper-mini {
2 | .Bibliography
3 | {
4 | .csl-entry
5 | {
6 | overflow: hidden;
7 | max-height: 4.5rem;
8 | word-break: break-all;
9 | position: relative;
10 | &:before
11 | {
12 | content:'';
13 | width:100%;
14 | height:100%;
15 | position:absolute;
16 | left:0;
17 | top:0;
18 | }
19 | }
20 | a
21 | {
22 | pointer-events: none;
23 | }
24 | }
25 | }
--------------------------------------------------------------------------------
/src/features/SectionView/components/ShortcutsModal.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a modal displaying shortcuts help
3 | * @module fonio/features/SectionView
4 | */
5 | /**
6 | * Imports Libraries
7 | */
8 | import React from 'react';
9 | import {
10 | ModalCard
11 | } from 'quinoa-design-library/components';
12 |
13 | const ShortcutsModal = ( {
14 | translate,
15 | isActive,
16 | onClose,
17 | } ) => (
18 |
27 |
28 | {translate( 'All the shortcuts presented below are also accessible through the editor graphical interface (move cursor/select text)' )}
29 |
30 |
31 |
32 |
33 | {translate( 'Shortcut' )}
34 | {translate( 'Where' )}
35 | {translate( 'Effect' )}
36 |
37 |
38 |
39 |
40 | cmd+l{translate( 'Anywhere' )}
42 | {translate( 'Open item citation widget' )}
43 |
44 |
45 | cmd+m{translate( 'Anywhere' )}
47 | {translate( 'Add a new note' )}
48 |
49 |
50 | {translate( '"#" then space' )}{translate( 'Begining of a paragraph' )}
52 | {translate( 'Add a title' )}
53 |
54 |
55 | {translate( '">" then space' )}{translate( 'Begining of a paragraph' )}
57 | {translate( 'Add a citation block' )}
58 |
59 |
60 | {translate( '"*" then content then "*"' )}{translate( 'Anywhere' )}
62 | {translate( 'Write italic text' )}
63 |
64 |
65 | {translate( '"**" then content then "**"' )}{translate( 'Anywhere' )}
67 | {translate( 'Write bold text' )}
68 |
69 |
70 | {translate( '"*" then space' )}{translate( 'Begining of a paragraph' )}
72 | {translate( 'Begin a list' )}
73 |
74 |
75 |
76 |
77 | }
78 | />
79 | );
80 |
81 | export default ShortcutsModal;
82 |
--------------------------------------------------------------------------------
/src/features/SectionView/components/SortableMiniSectionsList.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a list of sections for the section view
3 | * @module fonio/features/SectionView
4 | */
5 | /**
6 | * Imports Libraries
7 | */
8 | import React from 'react';
9 | import { SortableContainer, SortableElement } from 'react-sortable-hoc';
10 | import { List, AutoSizer } from 'react-virtualized';
11 | import ReactTooltip from 'react-tooltip';
12 | import {
13 | Level,
14 | Column,
15 | } from 'quinoa-design-library/components/';
16 |
17 | /**
18 | * Imports Components
19 | */
20 | import SectionMiniCard from './SectionMiniCard';
21 |
22 | const SortableItem = SortableElement( ( {
23 | value: section,
24 | onOpenSettings,
25 | onDeleteSection,
26 | setSectionLevel,
27 |
28 | storyId,
29 |
30 | setSectionIndex,
31 | sectionIndex,
32 | maxSectionIndex,
33 | history,
34 |
35 | } ) => {
36 | const handleDelete = ( event ) => {
37 | event.stopPropagation();
38 | onDeleteSection( section.id );
39 | };
40 | const handleSelect = () => {
41 | if ( section.lockStatus === 'open' || ( section.lockData && section.lockData.status === 'idle' ) ) {
42 | history.push( `/story/${storyId}/section/${section.id}` );
43 | }
44 | };
45 | return (
46 |
47 |
51 |
63 |
64 | );
65 | } );
66 |
67 | const SortableSectionsList = SortableContainer( ( {
68 | items,
69 | ...props
70 | } ) => {
71 | const rowRenderer = ( {
72 | key,
73 | style,
74 | index,
75 | } ) => {
76 | return (
77 |
81 |
88 | );
89 | };
90 | const handleRowsRendered = () =>
91 | ReactTooltip.rebuild();
92 | return (
93 |
94 | {( { width, height } ) => (
95 |
103 | )}
104 |
105 | );
106 | } );
107 |
108 | export default SortableSectionsList;
109 |
--------------------------------------------------------------------------------
/src/features/SectionView/components/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides an entrypoint to the section view react components
3 | * @module fonio/features/SectionView
4 | */
5 | import SectionViewContainer from './SectionViewContainer';
6 |
7 | export default SectionViewContainer;
8 |
--------------------------------------------------------------------------------
/src/features/SectionsManager/duck.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module exports logic-related elements for specific cross-view sections operations
3 | * This module follows the ducks convention for putting in the same place actions, action types,
4 | * state selectors and reducers about a given feature (see https://github.com/erikras/ducks-modular-redux)
5 | * @module fonio/features/SectionsManager
6 | */
7 |
8 | import { combineReducers } from 'redux';
9 | import { createStructuredSelector } from 'reselect';
10 |
11 | import { getStatePropFromActionSet } from '../../helpers/reduxUtils';
12 |
13 | /**
14 | * ===================================================
15 | * ACTION NAMES
16 | * ===================================================
17 | */
18 | /**
19 | * UI
20 | */
21 | const SET_PROMPTED_TO_DELETE_SECTION_ID = 'SET_PROMPTED_TO_DELETE_SECTION_ID';
22 |
23 | /**
24 | * ===================================================
25 | * ACTION CREATORS
26 | * ===================================================
27 | */
28 |
29 | export const setPromptedToDeleteSectionId = ( payload ) => ( {
30 | type: SET_PROMPTED_TO_DELETE_SECTION_ID,
31 | payload
32 | } );
33 |
34 | /**
35 | * ===================================================
36 | * REDUCERS
37 | * ===================================================
38 | */
39 |
40 | const UI_DEFAULT_STATE = {
41 | promptedToDeleteSectionId: undefined,
42 | };
43 |
44 | /**
45 | * This redux reducer handles the state of the ui
46 | * @param {object} state - the state given to the reducer
47 | * @param {object} action - the action to use to produce new state
48 | * @return {object} newState - the resulting state
49 | */
50 | function ui( state = UI_DEFAULT_STATE, action ) {
51 | const { payload } = action;
52 | switch ( action.type ) {
53 | case SET_PROMPTED_TO_DELETE_SECTION_ID:
54 | const propName = getStatePropFromActionSet( action.type );
55 | return {
56 | ...state,
57 | [propName]: payload
58 | };
59 | default:
60 | return state;
61 | }
62 | }
63 |
64 | /**
65 | * The module exports a reducer connected to pouchdb thanks to redux-pouchdb
66 | */
67 | export default combineReducers( {
68 | ui,
69 | } );
70 |
71 | /**
72 | * ===================================================
73 | * SELECTORS
74 | * ===================================================
75 | */
76 | const promptedToDeleteSectionId = ( state ) => state.ui.promptedToDeleteSectionId;
77 |
78 | /**
79 | * The selector is a set of functions for accessing this feature's state
80 | * @type {object}
81 | */
82 | export const selector = createStructuredSelector( {
83 | promptedToDeleteSectionId,
84 | } );
85 |
--------------------------------------------------------------------------------
/src/features/SummaryView/components/SortableSectionsList.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a sortable sections cards list
3 | * @module fonio/features/SummaryView
4 | */
5 | /**
6 | * Imports Libraries
7 | */
8 | import React from 'react';
9 | import { SortableContainer, SortableElement } from 'react-sortable-hoc';
10 | import FlipMove from 'react-flip-move';
11 | import {
12 | Level,
13 | Column,
14 | } from 'quinoa-design-library/components/';
15 |
16 | /**
17 | * Imports Components
18 | */
19 | import SectionCard from './SectionCard';
20 |
21 | const SortableItem = SortableElement( ( {
22 | value: section,
23 | story,
24 | goToSection,
25 | onDelete,
26 | setSectionLevel,
27 | reverseSectionLockMap = {},
28 | isSorting,
29 | sectionIndex,
30 | // sectionIndex,
31 | maxSectionIndex,
32 | setSectionIndex,
33 | } ) => {
34 | return (
35 |
36 |
40 |
53 |
54 | );
55 | }
56 | );
57 |
58 | const SortableSectionsList = SortableContainer( ( {
59 | items,
60 | ...props
61 | } ) => {
62 | return (
63 |
64 | {items
65 | .map( ( section, index ) => {
66 | return (
67 |
79 | );
80 | } );
81 |
82 | export default SortableSectionsList;
83 |
--------------------------------------------------------------------------------
/src/features/SummaryView/components/SummaryViewContainer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a connected component for handling the summary view
3 | * @module fonio/features/SummaryView
4 | */
5 | /**
6 | * Imports Libraries
7 | */
8 | import React, { Component } from 'react';
9 | import { bindActionCreators } from 'redux';
10 | import { connect } from 'react-redux';
11 |
12 | /**
13 | * Imports Ducks
14 | */
15 | import * as duck from '../duck';
16 | import * as editedStoryDuck from '../../StoryManager/duck';
17 | import * as connectionsDuck from '../../ConnectionsManager/duck';
18 | import * as sectionsManagementDuck from '../../SectionsManager/duck';
19 |
20 | /**
21 | * Imports Components
22 | */
23 | import SummaryViewLayout from './SummaryViewLayout';
24 | import EditionUiWrapper from '../../EditionUiWrapper/components';
25 |
26 | @connect(
27 | ( state ) => ( {
28 | ...duck.selector( state.summary ),
29 | ...editedStoryDuck.selector( state.editedStory ),
30 | ...connectionsDuck.selector( state.connections ),
31 | ...sectionsManagementDuck.selector( state.sectionsManagement ),
32 | } ),
33 | ( dispatch ) => ( {
34 | actions: bindActionCreators( {
35 | ...connectionsDuck,
36 | ...editedStoryDuck,
37 | ...sectionsManagementDuck,
38 | ...duck
39 | }, dispatch )
40 | } )
41 | )
42 | class SummaryViewContainer extends Component {
43 |
44 | constructor( props ) {
45 | super( props );
46 | }
47 |
48 | componentWillMount = () => {
49 | const {
50 | match: {
51 | params: {
52 | storyId
53 | }
54 | },
55 | userId
56 | } = this.props;
57 | this.props.actions.enterBlock( {
58 | storyId,
59 | userId,
60 | blockType: 'summary',
61 | blockId: 'summary',
62 | noLock: true
63 | } );
64 | }
65 |
66 | shouldComponentUpdate = () => true;
67 |
68 | componentWillUnmount = () => {
69 |
70 | /**
71 | * Leave metadata if it was locked
72 | */
73 | const {
74 | lockingMap,
75 | userId,
76 | editedStory = {},
77 | actions: {
78 | leaveBlock
79 | }
80 | } = this.props;
81 | const { id: storyId } = editedStory;
82 | const userLockedOnMetadataId = lockingMap[storyId] && lockingMap[storyId].locks &&
83 | Object.keys( lockingMap[storyId].locks )
84 | .find( ( thatUserId ) => lockingMap[storyId].locks[thatUserId].storyMetadata !== undefined );
85 | if ( userLockedOnMetadataId && userLockedOnMetadataId === userId ) {
86 | leaveBlock( {
87 | storyId,
88 | userId,
89 | blockType: 'storyMetadata',
90 | blockId: 'storyMetadata',
91 | } );
92 | }
93 |
94 | this.props.actions.leaveBlock( {
95 | storyId,
96 | userId,
97 | blockType: 'summary',
98 | blockId: 'summary',
99 | noLock: true
100 | } );
101 | }
102 |
103 | goToSection = ( sectionId ) => {
104 | const {
105 | editedStory: {
106 | id
107 | }
108 | } = this.props;
109 | this.props.history.push( `/story/${id}/section/${sectionId}` );
110 | }
111 |
112 | render() {
113 | return this.props.editedStory ?
114 | (
115 |
116 |
121 | )
122 | : null;
123 | }
124 | }
125 |
126 | export default SummaryViewContainer;
127 |
--------------------------------------------------------------------------------
/src/features/SummaryView/components/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides an entrypoint to the summary view react components
3 | * @module fonio/features/SummaryView
4 | */
5 | import SummaryViewContainer from './SummaryViewContainer';
6 |
7 | export default SummaryViewContainer;
8 |
--------------------------------------------------------------------------------
/src/features/UserInfoManager/duck.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module exports logic-related elements for managing user personal identification
3 | * This module follows the ducks convention for putting in the same place actions, action types,
4 | * state selectors and reducers about a given feature (see https://github.com/erikras/ducks-modular-redux)
5 | * @module fonio/features/UserInfo
6 | */
7 |
8 | import { createStructuredSelector } from 'reselect';
9 | import { saveUserInfo, loadUserInfo } from '../../helpers/localStorageUtils';
10 |
11 | /**
12 | * ===================================================
13 | * ACTION NAMES
14 | * ===================================================
15 | */
16 | export const SET_USER_INFO = 'SET_USER_INFO';
17 | export const SET_USER_INFO_TEMP = 'SET_USER_INFO_TEMP';
18 |
19 | import { SET_IDENTIFICATION_MODAL_SWITCH } from '../HomeView/duck';
20 |
21 | /**
22 | * ===================================================
23 | * ACTION CREATORS
24 | * ===================================================
25 | */
26 | export const setUserInfo = ( payload ) => ( {
27 | type: SET_USER_INFO,
28 | payload
29 | } );
30 |
31 | export const setUserInfoTemp = ( payload ) => ( {
32 | type: SET_USER_INFO_TEMP,
33 | payload
34 | } );
35 |
36 | const DEFAULT_USER_INFO_STATE = {
37 |
38 | /**
39 | * User info
40 | */
41 | userInfo: loadUserInfo(),
42 |
43 | /**
44 | * temp value of user info
45 | */
46 | userInfoTemp: loadUserInfo(),
47 | };
48 |
49 | /**
50 | * Reducer for the user info function
51 | * @param {object} state
52 | * @param {object} action
53 | * @return {object} newState
54 | */
55 | export default function userInfo( state = DEFAULT_USER_INFO_STATE, action ) {
56 | switch ( action.type ) {
57 | case SET_USER_INFO:
58 | saveUserInfo( action.payload );
59 | return {
60 | ...state,
61 | userInfo: action.payload,
62 | userInfoTemp: action.payload,
63 | };
64 | case SET_USER_INFO_TEMP:
65 | return {
66 | ...state,
67 | userInfoTemp: action.payload,
68 | };
69 | case SET_IDENTIFICATION_MODAL_SWITCH:
70 | if ( action.payload === false ) {
71 | return {
72 | ...state,
73 | userInfoTemp: loadUserInfo()
74 | };
75 | }
76 | return state;
77 | default:
78 | return state;
79 | }
80 | }
81 |
82 | export const selector = createStructuredSelector( {
83 | userInfo: ( state ) => state.userInfo,
84 | userInfoTemp: ( state ) => state.userInfoTemp,
85 | } );
86 |
--------------------------------------------------------------------------------
/src/helpers/clipboardUtils/__mocks__/README.md:
--------------------------------------------------------------------------------
1 | # Generate mocked data for copy/paste utils test
2 |
3 | ## copyTests.json (mocked data for editor copied from inside fonio)
4 |
5 | ```
6 | {
7 | name, // name of test case
8 | editorFocus, // focused editor when copy ('main' or 'note')
9 | data: {
10 | sections, // for test purpose, only one section should inside the story, if editorFocus is note, only one note is required
11 | sectionsOrder, // for test purpose, only one section should inside the story
12 | resources,
13 | contextualizations,
14 | contextualizers,
15 | }
16 | }
17 | ```
18 |
19 | ## pasteOutsideTests.json (mocked data for paste from outside fonio)
20 |
21 | ```
22 | {
23 | name, // name of test case
24 | html, // html text copied from outside
25 | resources, // exist resources in story
26 | expectedResourcesToAdd, // number of resources retrieved from html
27 | expectedContextualizationsToAdd, // number of contextualizations should be created from html
28 | expectedContextualizersToAdd, // number of contextualizers created from html
29 | expectedImagesToAdd, // number of images retrieved from html
30 | }
31 | ```
32 | ## pasteInsideTests.json (mocked data for target editor pasted to inside fonio)
33 |
34 | ```
35 | {
36 | name, // name of test case
37 | editorFocus, // focused editor when paste ('main' or 'note')
38 | data: {
39 | sections, // for test purpose, only one section should inside the story, if editorFocus is note, only one note is required
40 | sectionsOrder, // for test purpose, only one section should inside the story
41 | }
42 | }
43 | ```
--------------------------------------------------------------------------------
/src/helpers/clipboardUtils/__mocks__/pasteOutsideTests.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "single-hyperlink",
4 | "html": "Bold text , Italic text Example link ",
5 | "resources": {},
6 | "expectedResourcesToAdd": 1,
7 | "expectedContextualizationsToAdd": 1,
8 | "expectedContextualizersToAdd": 1,
9 | "expectedImagesToAdd": 0
10 | }
11 | ]
--------------------------------------------------------------------------------
/src/helpers/clipboardUtils/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides an entrypoint for methods handling the complex logic
3 | * required to handle copying and pasting content in/from the editor
4 | * @module fonio/components/SectionEditor
5 | */
6 | import copyManager from './handleCopy';
7 | import pasteManager from './handlePaste';
8 |
9 | /**
10 | * Prepares data within component's state for later pasting
11 | * @param {event} e - the copy event
12 | */
13 | export const handleCopy = copyManager;
14 |
15 | /**
16 | * Handles pasting command in the editor
17 | * @param {event} e - the copy event
18 | */
19 | export const handlePaste = pasteManager;
20 |
--------------------------------------------------------------------------------
/src/helpers/clipboardUtils/makeReactCitations.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides a helper for preparing csl-json citations for their display in editor
3 | * @module fonio/components/SectionEditor
4 | */
5 | import { Parser } from 'html-to-react';
6 |
7 | const htmlToReactParser = new Parser();
8 |
9 | const makeReactCitations = ( processor, cits ) => {
10 | return cits.reduce( ( inputCitations, citationData ) => {
11 | const citations = { ...inputCitations };
12 | const citation = citationData[0];
13 | const citationsPre = citationData[1];
14 | const citationsPost = citationData[2];
15 | let citationObjects = processor.processCitationCluster( citation, citationsPre, citationsPost );
16 | citationObjects = citationObjects[1];
17 | citationObjects.forEach( ( cit ) => {
18 | const order = cit[0];
19 | const html = cit[1];
20 | const ThatComponent = htmlToReactParser.parse( cit[1] );
21 | const citationId = cit[2];
22 | citations[citationId] = {
23 | order,
24 | html,
25 | Component: ThatComponent
26 | };
27 | } );
28 | return citations;
29 | }, {} );
30 | };
31 |
32 | export default makeReactCitations;
33 |
--------------------------------------------------------------------------------
/src/helpers/clipboardUtils/parsePastedImage.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides the logic for handling an image pasting
3 | * @module fonio/components/SectionEditor
4 | */
5 | import { v4 as generateId } from 'uuid';
6 |
7 | import { createDefaultResource } from '../schemaUtils';
8 |
9 | import {
10 | constants,
11 | } from 'scholar-draft';
12 |
13 | const {
14 | BLOCK_ASSET,
15 | } = constants;
16 |
17 | export default (
18 | node,
19 | resources = [],
20 | activeSectionId,
21 | ) => {
22 |
23 | let resource;
24 |
25 | const url = node.getAttribute( 'src' );
26 | let title = node.getAttribute( 'title' );
27 | const alt = node.getAttribute( 'alt' );
28 | if ( !title || !alt || alt === 'href' ) {
29 | title = url;
30 | }
31 | if ( !url || url.indexOf( 'http' ) !== 0 ) {
32 | return {};
33 | }
34 |
35 | const existingResource = [ ...resources ]
36 | .find( ( res ) =>
37 | res.metadata.type === 'image'
38 | && res.data.url === url
39 | );
40 | let resourceId;
41 | if ( existingResource ) {
42 | resourceId = existingResource.id;
43 | }
44 | else {
45 | resourceId = generateId();
46 | const ext = url.split( '.' ).pop().split( '?' )[0];
47 | resource = {
48 | ...createDefaultResource(),
49 | id: resourceId,
50 | metadata: {
51 | type: 'image',
52 | createdAt: new Date().getTime(),
53 | lastModifiedAt: new Date().getTime(),
54 | ext,
55 | mimetype: `image/${ext}`,
56 | title,
57 | },
58 | data: {
59 | url,
60 | }
61 | };
62 | }
63 | const contextualizerId = generateId();
64 | const contextualizationId = generateId();
65 | const contextualizer = {
66 | id: contextualizerId,
67 | type: 'image',
68 | insertionType: 'block'
69 | };
70 | const contextualization = {
71 | id: contextualizationId,
72 | resourceId,
73 | contextualizerId,
74 | sectionId: activeSectionId,
75 | type: 'image',
76 | };
77 |
78 | const entity = {
79 | type: BLOCK_ASSET,
80 | mutability: 'IMMUTABLE',
81 | data: {
82 | asset: {
83 | id: contextualizationId
84 | }
85 | }
86 | };
87 |
88 | return {
89 | resource,
90 | contextualizer,
91 | contextualization,
92 | entity,
93 | };
94 | };
95 |
--------------------------------------------------------------------------------
/src/helpers/clipboardUtils/parsePastedLink.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides the logic for handling a link pasting
3 | * @module fonio/components/SectionEditor
4 | */
5 | import { v4 as generateId } from 'uuid';
6 |
7 | import { createDefaultResource } from '../schemaUtils';
8 |
9 | import {
10 | constants,
11 | } from 'scholar-draft';
12 |
13 | const {
14 | INLINE_ASSET,
15 | } = constants;
16 |
17 | export default (
18 | node,
19 | resources = [],
20 | activeSectionId,
21 | ) => {
22 |
23 | let resource;
24 |
25 | const url = node.getAttribute( 'href' );
26 | const alt = node.getAttribute( 'alt' );
27 | let title = node.getAttribute( 'title' );
28 | if ( !title || !alt || alt === 'href' ) {
29 | title = url;
30 | }
31 | if ( !url || url.indexOf( '#' ) === 0 ) {
32 | return {};
33 | }
34 |
35 | const existingResource = [ ...resources ]
36 | .find( ( res ) =>
37 | res.metadata.type === 'webpage'
38 | && res.data.url === url
39 | );
40 | let resourceId;
41 | if ( existingResource ) {
42 | resourceId = existingResource.id;
43 | }
44 | else {
45 | resourceId = generateId();
46 | resource = {
47 | ...createDefaultResource(),
48 | id: resourceId,
49 | metadata: {
50 | type: 'webpage',
51 | createdAt: new Date().getTime(),
52 | lastModifiedAt: new Date().getTime(),
53 | title,
54 | },
55 | data: {
56 | url,
57 | }
58 | };
59 | }
60 | const contextualizerId = generateId();
61 | const contextualizationId = generateId();
62 | const contextualizer = {
63 | id: contextualizerId,
64 | type: 'webpage',
65 | insertionType: 'inline'
66 | };
67 | const contextualization = {
68 | id: contextualizationId,
69 | resourceId,
70 | contextualizerId,
71 | sectionId: activeSectionId,
72 | type: 'webpage',
73 | };
74 |
75 | const entity = {
76 | type: INLINE_ASSET,
77 | mutability: 'MUTABLE',
78 | data: {
79 | asset: {
80 | id: contextualizationId
81 | }
82 | }
83 | };
84 |
85 | return {
86 | resource,
87 | contextualizer,
88 | contextualization,
89 | entity,
90 | };
91 | };
92 |
--------------------------------------------------------------------------------
/src/helpers/clipboardUtils/pasteFromOutside.spec.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides unit tests for the assetsUtils module
3 | * @module fonio/helpers/clipboardUtils/handleCopy
4 | * @funciton computePastedData()
5 | * @param {string} html - mock from handleCopy
6 | * @param {object} activeSection - mock from state
7 | * @param {object} resources - mock from story json
8 | */
9 |
10 | import expect from 'expect';
11 | import {
12 | } from './__mocks__/services.js';
13 | import tests from './__mocks__/pasteOutsideTests';
14 | import {
15 | computePastedData,
16 | } from './pasteFromOutside';
17 |
18 | const testCases = tests.map( ( item ) => {
19 | return [ item.name ];
20 | } );
21 | describe( 'test computePastedData()', () => {
22 | test.each( testCases )( 'test', ( testName ) => {
23 | const {
24 | html,
25 | resources,
26 | expectedResourcesToAdd,
27 | expectedContextualizationsToAdd,
28 | expectedContextualizersToAdd,
29 | expectedImagesToAdd
30 | } = tests.find( ( item ) => item.name === testName );
31 | const computedData = computePastedData( {
32 | html,
33 | resources,
34 | activeSection: {
35 | id: 'testSectionId'
36 | }
37 | } );
38 | const {
39 | copiedContentState,
40 | resourcesToAdd,
41 | contextualizationsToAdd,
42 | contextualizersToAdd,
43 | imagesToAdd
44 | } = computedData;
45 | expect( copiedContentState ).toBeDefined();
46 | expect( resourcesToAdd.length ).toEqual( expectedResourcesToAdd );
47 | expect( contextualizationsToAdd.length ).toEqual( expectedContextualizationsToAdd );
48 | expect( contextualizersToAdd.length ).toEqual( expectedContextualizersToAdd );
49 | expect( imagesToAdd.length ).toEqual( expectedImagesToAdd );
50 | } );
51 | } );
52 |
53 |
--------------------------------------------------------------------------------
/src/helpers/draftUtils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module handles scholar-draft related operations on draft-js states
3 | * @module fonio/utils/draftUtils
4 | */
5 |
6 | import {
7 | utils
8 | } from 'scholar-draft';
9 |
10 | const {
11 | insertInlineAssetInEditor,
12 | insertBlockAssetInEditor,
13 | } = utils;
14 |
15 | /**
16 | * Inserts an inline contextualization entity into the given draft editor state
17 | * @param {EditorState} editorState - the editor state before insertion
18 | * @param {object} contextualization - the contextualization to link the entity to
19 | * @return {EditorState} newEditorState - a new editor state
20 | */
21 | export const insertInlineContextualization = ( editorState, contextualization, mutable = false ) => {
22 | const newEditorState = insertInlineAssetInEditor( editorState, { id: contextualization.id }, editorState.getSelection(), mutable );
23 | return newEditorState ? newEditorState : editorState;
24 | };
25 |
26 | /**
27 | * Inserts a block contextualization entity into the given draft editor state
28 | * @param {EditorState} editorState - the editor state before insertion
29 | * @param {object} contextualization - the contextualization to link the entity to
30 | * @return {EditorState} newEditorState - a new editor state
31 | */
32 | export const insertBlockContextualization = ( editorState, contextualization ) => {
33 | const newEditorState = insertBlockAssetInEditor( editorState, { id: contextualization.id }, editorState.getSelection() );
34 | return newEditorState ? newEditorState : editorState;
35 | };
36 |
37 | /**
38 | * Get current selected text
39 | * @param {Draft.ContentState}
40 | * @param {Draft.SelectionState}
41 | * @param {String}
42 | * @return {String}
43 | */
44 | export const getTextSelection = ( contentState, selection, blockDelimiter ) => {
45 | blockDelimiter = blockDelimiter || '\n';
46 | const startKey = selection.getStartKey();
47 | const endKey = selection.getEndKey();
48 | const blocks = contentState.getBlockMap();
49 |
50 | let lastWasEnd = false;
51 | const selectedBlock = blocks
52 | .skipUntil( function( block ) {
53 | return block.getKey() === startKey;
54 | } )
55 | .takeUntil( function( block ) {
56 | const result = lastWasEnd;
57 |
58 | if ( block.getKey() === endKey ) {
59 | lastWasEnd = true;
60 | }
61 |
62 | return result;
63 | } );
64 |
65 | return selectedBlock
66 | .map( function( block ) {
67 | const key = block.getKey();
68 | let text = block.getText();
69 |
70 | let start = 0;
71 | let end = text.length;
72 |
73 | if ( key === startKey ) {
74 | start = selection.getStartOffset();
75 | }
76 | if ( key === endKey ) {
77 | end = selection.getEndOffset();
78 | }
79 |
80 | text = text.slice( start, end );
81 | return text;
82 | } )
83 | .join( blockDelimiter );
84 | };
85 |
--------------------------------------------------------------------------------
/src/helpers/editorToStoryUtils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides utils for infering story modifications from the editor state
3 | * @module fonio/components/SectionEditor
4 | */
5 | /**
6 | * Imports Libraries
7 | */
8 | import {
9 | utils,
10 | } from 'scholar-draft';
11 |
12 | /**
13 | * Shared variables
14 | */
15 | const {
16 | getUsedAssets,
17 | updateNotesFromEditor,
18 | } = utils;
19 |
20 | /**
21 | * Deletes notes that are not any more linked
22 | * to an entity in the editor
23 | * and update notes numbers if their order has changed.
24 | * @param {object} props - properties to use
25 | */
26 | export const updateNotesFromSectionEditor = ( props ) => {
27 | const {
28 | editorStates,
29 | sectionId,
30 | activeStoryId,
31 | activeSection,
32 | updateSection,
33 | } = props;
34 | const {
35 | // newNotes,
36 | notesOrder
37 | } = updateNotesFromEditor( editorStates[sectionId], { ...activeSection.notes } );
38 | const newSection = activeSection;
39 | // newSection.notes = newNotes;
40 | newSection.notesOrder = notesOrder;
41 | // if (newNotes !== activeSection.notes) {
42 | updateSection( activeStoryId, sectionId, newSection );
43 | // }
44 | };
45 |
46 | /**
47 | * Deletes contextualizations that are not any more linked
48 | * to an entity in the editor.
49 | * @param {object} props - properties to use
50 | */
51 | export const updateContextualizationsFromEditor = ( props ) => {
52 | const {
53 | activeSection,
54 | editorStates,
55 | deleteContextualization,
56 | deleteContextualizer,
57 | // sectionId,
58 | story,
59 | userId
60 | } = props;
61 | const activeStoryId = story.id;
62 | const activeSectionId = activeSection.id;
63 | // regroup all eligible editorStates
64 | const notesEditorStates = activeSection.notesOrder.reduce( ( result, noteId ) => {
65 | return {
66 | ...result,
67 | [noteId]: editorStates[noteId]
68 | };
69 | }, {} );
70 | // regroup all eligible contextualizations
71 | const sectionContextualizations = Object.keys( story.contextualizations )
72 | .filter( ( id ) => {
73 | return story.contextualizations[id].sectionId === activeSectionId;
74 | } )
75 | .reduce( ( final, id ) => ( {
76 | ...final,
77 | [id]: story.contextualizations[id],
78 | } ), {} );
79 |
80 | // look for used contextualizations in main
81 | let used = getUsedAssets( editorStates[activeSectionId], sectionContextualizations );
82 | // look for used contextualizations in notes
83 | Object.keys( notesEditorStates )
84 | .forEach( ( noteId ) => {
85 | const noteEditor = notesEditorStates[noteId];
86 | used = used.concat( getUsedAssets( noteEditor, sectionContextualizations ) );
87 | } );
88 |
89 | /*
90 | * compare list of contextualizations with list of used contextualizations
91 | * to track all unused contextualizations
92 | */
93 | const unusedAssets = Object.keys( sectionContextualizations ).filter( ( id ) => !used.includes( id ) );
94 | // delete contextualizations
95 | unusedAssets.forEach( ( id ) => {
96 | const { contextualizerId } = sectionContextualizations[id];
97 | deleteContextualization( { storyId: activeStoryId, contextualizationId: id, userId } );
98 | deleteContextualizer( { storyId: activeStoryId, contextualizerId, userId } );
99 | } );
100 | };
101 |
--------------------------------------------------------------------------------
/src/helpers/fileDownloader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module handles downloading a file from string content
3 | * @module fonio/utils/fileDownloader
4 | */
5 | import FileSaver from 'file-saver';
6 |
7 | /**
8 | * @param {string} text - the text to put in the file
9 | * @param {string} extension - the extension to append to file name
10 | * @param {string} fileName - the name to attribute to the downloaded file
11 | */
12 | export default function downloadFile( text, extension = 'txt', fileName = 'fonio' ) {
13 | let type;
14 | switch ( extension ) {
15 | case 'zip':
16 | type = 'octet/stream';
17 | break;
18 | case 'html':
19 | type = 'text/html;charset=utf-8';
20 | break;
21 | default:
22 | type = 'text/plain;charset=utf-8';
23 | break;
24 | }
25 | const blob = new Blob( [ text ], { type } );
26 | FileSaver.saveAs( blob, `${fileName }.${ extension}` );
27 | }
28 |
--------------------------------------------------------------------------------
/src/helpers/fileLoader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module helps to load files from app server or user own file system
3 | * @module fonio/utils/fileLoader
4 | */
5 |
6 | /**
7 | * Validates whether the extension of a file is valid against its visualization model
8 | * @param {string} fileName - the name of the file to validate
9 | * @param {object} visualizationModel - the model of the visualization to validate the filename against
10 | * @return {boolean} isValid - whether the filename is valid
11 | */
12 | export function validateFileExtensionForVisType ( fileName = '', visualizationModel ) {
13 | const fileExtension = fileName.split( '.' ).pop();
14 | return visualizationModel.acceptedFileExtensions.find( ( ext ) => ext === fileExtension ) !== undefined;
15 | }
16 |
17 | /**
18 | * Reads the raw string content of a file from user file system
19 | * @param {File} fileToRead - the file to read
20 | * @param {function} callback
21 | */
22 | export function getFileAsText( file ) {
23 | return new Promise( ( resolve, reject ) => {
24 | let reader = new FileReader();
25 | reader.onload = ( event ) => {
26 | resolve( event.target.result );
27 | reader = undefined;
28 | };
29 | reader.onerror = ( event ) => {
30 | reject( event.target.error );
31 | reader = undefined;
32 | };
33 | return reader.readAsText( file );
34 | } );
35 | }
36 |
--------------------------------------------------------------------------------
/src/helpers/fileLoader.spec.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides unit tests for the fileLoader module
3 | * @module fonio/utils/fileLoader
4 | */
5 | import { expect } from 'chai';
6 |
7 | import {
8 | validateFileExtensionForVisType
9 | } from './fileLoader';
10 |
11 | describe( 'fileLoader helpers', () => {
12 | describe( 'validateFileExtensionForVisType', () => {
13 | const visualizationModel = {
14 | acceptedFileExtensions: [ 'csv', 'tsv', 'dsv' ]
15 | };
16 | const validFileNames = [ 'myfile.csv', 'myfile.tsv', 'myfile.dsv', 'myfile.doc.csv' ];
17 | const invalidFileNames = [ '', 'myfile', 'myfile_csv', 'myfile.csv.psd' ];
18 |
19 | it( 'should accept valid extensions', () => {
20 | validFileNames.forEach( ( fileName ) => {
21 | const valid = validateFileExtensionForVisType( fileName, visualizationModel );
22 | return expect( valid ).to.be.true;
23 | } );
24 | } );
25 |
26 | it( 'should not accept invalid extensions', () => {
27 | invalidFileNames.forEach( ( fileName ) => {
28 | const valid = validateFileExtensionForVisType( fileName, visualizationModel );
29 | return expect( valid ).to.be.false;
30 | } );
31 | } );
32 | } );
33 | } );
34 |
--------------------------------------------------------------------------------
/src/helpers/localStorageUtils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module helps to manage local storage data
3 | * @module fonio/utils/localStorageUtils
4 | */
5 | export const loadStoryToken = ( storyId ) => {
6 | return localStorage.getItem( `fonio/storyToken/${storyId}` );
7 | };
8 | export const saveStoryToken = ( storyId, token ) => {
9 | localStorage.setItem( `fonio/storyToken/${storyId}`, token );
10 | };
11 | export const deleteStoryToken = ( storyId ) => {
12 | localStorage.removeItem( `fonio/storyToken/${storyId}` );
13 | };
14 |
15 | export const updateEditionHistoryMap = ( storyId ) => {
16 | const existing = localStorage.getItem( 'fonio/editionStoryMap' );
17 | let previousMap;
18 | try {
19 | if ( existing ) {
20 | previousMap = JSON.parse( existing );
21 | }
22 | else previousMap = {};
23 | }
24 | catch ( e ) {
25 | previousMap = {};
26 | }
27 | const newMap = {
28 | ...previousMap,
29 | [storyId]: new Date().getTime()
30 | };
31 | localStorage.setItem( 'fonio/editionStoryMap', JSON.stringify( newMap ) );
32 | };
33 |
34 | const getJSONFromStorage = ( key ) => {
35 | const existing = localStorage.getItem( key );
36 | let result;
37 | try {
38 | if ( existing ) {
39 | result = JSON.parse( existing );
40 | }
41 | }
42 | catch ( e ) {
43 | result = undefined;
44 | }
45 | return result;
46 | };
47 |
48 | export const getEditionHistoryMap = () => {
49 | return getJSONFromStorage( 'fonio/editionStoryMap' ) || {};
50 | };
51 |
52 | export const saveUserInfo = ( userInfo ) => {
53 | localStorage.setItem( 'fonio/user_info', JSON.stringify( userInfo ) );
54 | };
55 |
56 | export const loadUserInfo = () => {
57 | return getJSONFromStorage( 'fonio/user_info' );
58 | };
59 |
--------------------------------------------------------------------------------
/src/helpers/misc.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provides miscellaneous utils
3 | * @module fonio/utils/misc
4 | */
5 | import trunc from 'unicode-byte-truncate';
6 |
7 | export const abbrevString = ( str = '', maxLength = 10 ) => {
8 | if ( str.length > maxLength ) {
9 | return `${trunc( str, maxLength ) }...`;
10 | }
11 | return str;
12 | };
13 |
14 | export const splitPathnameForSockets = ( url ) => {
15 | const h = url.split( '//' );
16 | const p = h.slice( -1 )[0].split( '/' );
17 |
18 | return [
19 | ( h.length > 1 ? ( `${h[0] }//` ) : '' ) + p[0],
20 | p.slice( 1 ).filter( ( i ) => i )
21 | ];
22 | };
23 |
24 | export const bytesToBase64Length = ( bytes ) => bytes * ( 4 / 3 );
25 | export const base64ToBytesLength = ( bytes ) => bytes / ( 4 / 3 );
26 |
27 | export const getBrowserInfo = () => {
28 | const ua = navigator.userAgent;
29 | let tem, M = ua.match( /(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i ) || [];
30 | if ( /trident/i.test( M[1] ) ) {
31 | tem = /\brv[ :]+(\d+)/g.exec( ua ) || [];
32 | return { name: 'IE ', version: ( tem[1] || '' ) };
33 | }
34 | if ( /edge/gi.test( ua ) ) {
35 | return {
36 | name: 'Edge',
37 | version: 'unknown',
38 | };
39 | }
40 | if ( M[1] === 'Chrome' ) {
41 | tem = ua.match( /\bOPR\/(\d+)/ );
42 | if ( tem != null ) { /* eslint eqeqeq : 0 */
43 | return { name: 'Opera', version: tem[1] };
44 | }
45 | }
46 | M = M[2] ? [ M[1], M[2] ] : [ navigator.appName, navigator.appVersion, '-?' ];
47 | if ( ( tem = ua.match( /version\/(\d+)/i ) ) != null ) { /* eslint eqeqeq : 0 */
48 | M.splice( 1, 1, tem[1] );
49 | }
50 | return {
51 | name: M[0],
52 | version: M[1]
53 | };
54 | };
55 |
56 | export const computeSectionFirstWords = ( section, maxLength = 100 ) => {
57 | if ( section.contents
58 | && section.contents.blocks
59 | && section.contents.blocks[0]
60 | && section.contents.blocks[0].text
61 | ) {
62 | return section.contents.blocks[0].text.length > maxLength ?
63 | `${section.contents.blocks[0].text.substr( 0, maxLength )}...`
64 | :
65 | section.contents.blocks[0].text;
66 | }
67 | return '';
68 | };
69 |
70 | export const silentEvent = ( event ) => {
71 | if ( event ) {
72 | event.stopPropagation();
73 | event.preventDefault();
74 | }
75 | };
76 |
77 | const getContentsRawText = ( contentObj ) => {
78 | return contentObj.blocks ? contentObj.blocks.map( ( b ) => b.text ).join( '\n' ) : '';
79 | };
80 |
81 | const getSectionRawText = ( section ) => {
82 | return section.notesOrder.reduce( ( sum, noteId ) => {
83 | return `${sum} ${getContentsRawText( section.notes[noteId].contents )} `;
84 | }, getContentsRawText( section.contents ) );
85 | };
86 |
87 | export const getStoryStats = ( story ) => {
88 | const rawText = story.sectionsOrder.reduce( ( sum, sectionId ) => {
89 | return `${sum} ${story.sections[sectionId].metadata.title} ${getSectionRawText( story.sections[sectionId] )}`;
90 | }, '' );
91 | const numberOfWords = rawText.match( /\S+/g ) ? rawText.match( /\S+/g ).length : 0;
92 | return {
93 | numberOfCharacters: rawText.length,
94 | numberOfWords,
95 | numberOfPages: Math.ceil( numberOfWords / 300 )
96 | };
97 | };
98 |
--------------------------------------------------------------------------------
/src/helpers/postcss.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module helps to prefix css style
3 | * @module fonio/utils/postcss
4 | */
5 | import postcss from 'postcss';
6 | import prefixer from 'postcss-prefix-selector';
7 |
8 | export const processCustomCss = ( css = '' ) => {
9 | try {
10 | return postcss().use( prefixer( {
11 | prefix: '.quinoa-story-player',
12 | // exclude: ['.c'],
13 |
14 | // Optional transform callback for case-by-case overrides
15 | transform ( prefix, selector, prefixedSelector ) {
16 | if ( selector === 'body' ) {
17 | return `body ${ prefix}`;
18 | }
19 | else {
20 | return prefixedSelector;
21 | }
22 | }
23 | } ) )
24 | .process( css ).css;
25 | }
26 | catch ( e ) {
27 | return undefined;
28 | }
29 | };
30 |
--------------------------------------------------------------------------------
/src/helpers/projectBundler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module helps for processes related to the exports of a story
3 | * @module fonio/utils/projectBundler
4 | */
5 | import {
6 | convertFromRaw
7 | } from 'draft-js';
8 |
9 | import { stateToMarkdown } from 'draft-js-export-markdown';
10 |
11 | /**
12 | * Prepares a story data for a clean version to export
13 | * @param {object} story - the input data to clean
14 | * @return {object} newStory - the cleaned story
15 | */
16 | export const cleanStoryForExport = ( story ) => {
17 | return story;
18 | };
19 |
20 | /**
21 | * Consumes story data to produce a representation in markdown syntax
22 | * @todo: for now this does not handle assets, it should be broadly improved to do that
23 | * @param {object} story - the story to consume
24 | * @return {string} markdown - the markdown representation of the story
25 | */
26 | export const convertStoryToMarkdown = ( story ) => {
27 | const header = `${story.metadata.title}
28 | ====
29 | ${story.metadata.authors.join( ', ' )}
30 | ---
31 | `;
32 | return header + story.sectionsOrder.map( ( id ) => {
33 | const content = convertFromRaw( story.sections[id].contents );
34 | return stateToMarkdown( content );
35 | } ).join( '\n \n' );
36 | };
37 |
38 | /**
39 | * Cleans and serializes a story representation
40 | * @param {object} story - the story to bundle
41 | * @return {string} result - the resulting serialized story
42 | */
43 | export const bundleProjectAsJSON = ( story ) => {
44 | return JSON.stringify( cleanStoryForExport( story ) );
45 | };
46 |
--------------------------------------------------------------------------------
/src/helpers/reduxUtils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module helps to optimize redux-related code
3 | * @module fonio/utils/reduxUtils
4 | */
5 |
6 | export const getStatePropFromActionSet = ( actionName ) => {
7 | return actionName.replace( 'SET_', '' ).toLowerCase().replace( /(_[a-z])/gi, ( a, b ) => b.substr( 1 ).toUpperCase() );
8 | };
9 |
--------------------------------------------------------------------------------
/src/helpers/translateUtils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module provide helpers to handle translations in the app
3 | * @module bulgur/utils/translateUtils
4 | */
5 |
6 | /**
7 | * Automatically functions a translate function
8 | * @param {function} translateFn - the translate function to namespace
9 | * @param {string} nameSpace - the namespace to use
10 | * @return {function} translateFnBis - a new function using the namespace
11 | */
12 | export const translateNameSpacer = ( translateFn, nameSpace ) => {
13 | return function( key, props ) {
14 | if ( Array.isArray( key ) ) {
15 | return translateFn( key.map( ( k ) => {
16 | if ( k.length > 1 ) {
17 | return `${nameSpace }.${ k}`;
18 | }
19 | return k;
20 | } ), props );
21 | }
22 | return translateFn( `${nameSpace }.${ key}`, props );
23 | };
24 | };
25 |
--------------------------------------------------------------------------------
/src/helpers/userInfo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This module helps to manage users identification data
3 | * @module fonio/utils/userInfo
4 | */
5 | import userNames from '../sharedAssets/userNames';
6 | import avatars from '../sharedAssets/avatars';
7 |
8 | /**
9 | * Generates random values for user name
10 | * @param {string} lang - the lang to use to generate info
11 | */
12 | export default function generateRandomUserInfo ( lang ) {
13 | const { adjectives, names, pattern } = userNames[lang];
14 | const adjective = adjectives[parseInt( Math.random() * adjectives.length, 10 )];
15 | const name = names[parseInt( Math.random() * names.length, 10 )].toLowerCase();
16 | const avatar = avatars[parseInt( Math.random() * avatars.length, 10 )];
17 | return {
18 | name: pattern.replace( 'adjective', adjective ).replace( 'name', name ),
19 | avatar,
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Fonio Application Endpoint
3 | * ======================================
4 | *
5 | * Rendering the application.
6 | * @module fonio
7 | */
8 | import React from 'react';
9 | import { render } from 'react-dom';
10 | import { Provider } from 'react-redux';
11 | import I18n from 'redux-i18n';
12 |
13 | import configureStore from './redux/configureStore';
14 | import Application from './Application';
15 |
16 | import translations from './translations/index.js';
17 |
18 | let CurrentApplication = Application;
19 |
20 | const initialState = {};
21 |
22 | const store = configureStore( initialState );
23 | window.store = store;
24 |
25 | const mountNode = document.getElementById( 'mount' );
26 |
27 | let browserLang = ( navigator.language || navigator.userLanguage ).split( '-' )[0];
28 | if ( browserLang !== 'en' || browserLang !== 'fr' ) {
29 | browserLang = 'en';
30 | }
31 | const initialLang = localStorage.getItem( 'fonio-lang' ) || browserLang;
32 |
33 | /**
34 | * Mounts the application to the given mount node
35 | */
36 | export function renderApplication() {
37 | const group = (
38 |
39 |
43 |
45 |
46 | );
47 | render( group, mountNode );
48 | }
49 |
50 | renderApplication();
51 |
52 | /**
53 | * Hot-reloading.
54 | */
55 | if ( module.hot ) {
56 | module.hot.accept( './Application', function() {
57 | CurrentApplication = require( './Application' ).default;
58 | renderApplication();
59 | } );
60 | }
61 |
--------------------------------------------------------------------------------
/src/parameters.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * global style parameters for the whole app
3 | *
4 | * @module fonio
5 | */
6 |
7 |
8 | $gutter-small : 1rem;
9 |
--------------------------------------------------------------------------------
/src/redux/configureStore.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Fonio store configuration
3 | * ===================================
4 | * Configuring store with appropriate middlewares
5 | */
6 | import {
7 | applyMiddleware,
8 | createStore,
9 | compose
10 | } from 'redux';
11 | import rootReducer from './rootReducer';
12 | import promiseMiddleware from './promiseMiddleware';
13 | import Validator from './payloadValidatorMiddleware';
14 | import { loadingBarMiddleware } from 'react-redux-loading-bar';
15 |
16 | import { CONNECT_ERROR, RECONNECT } from '../features/ErrorMessageManager/duck';
17 |
18 | import config from '../config';
19 |
20 | import io from 'socket.io-client';
21 | import createSocketIoMiddleware from './socketIoMiddleware';
22 |
23 | import { splitPathnameForSockets } from '../helpers/misc';
24 |
25 | /**
26 | * @todo: fetch that from config
27 | */
28 | const [ apiOrigin, apiPathname ] = splitPathnameForSockets( config.apiUrl );
29 | const path = `/${ apiPathname.concat( 'sockets' ).join( '/' )}`;
30 |
31 | const socket = io( apiOrigin, { path } );
32 |
33 | const socketIoMiddleware = createSocketIoMiddleware( socket );
34 |
35 | /**
36 | * redux action validator middleware
37 | */
38 | const validatorMiddleware = Validator();
39 |
40 | /**
41 | * Configures store with a possible inherited state and appropriate reducers
42 | * @param initialState - the state to use to bootstrap the reducer
43 | * @return {object} store - the configured store
44 | */
45 | export default function configureStore ( initialState = {} ) {
46 | // Compose final middleware with thunk and promises handling
47 | const middleware = applyMiddleware(
48 | validatorMiddleware,
49 | socketIoMiddleware,
50 | promiseMiddleware(),
51 | loadingBarMiddleware( {
52 | promiseTypeSuffixes: [ 'PENDING', 'SUCCESS', 'FAIL' ],
53 | } )
54 | );
55 |
56 | // Create final store and subscribe router in debug env ie. for devtools
57 | const createStoreWithMiddleware = window.__REDUX_DEVTOOLS_EXTENSION__ ? compose(
58 | // related middlewares
59 | middleware,
60 | // connection to redux dev tools
61 | window.__REDUX_DEVTOOLS_EXTENSION__() )( createStore ) : compose( middleware )( createStore );
62 |
63 | const store = createStoreWithMiddleware(
64 | rootReducer,
65 | initialState,
66 | );
67 |
68 | const connectionErrors = [ 'connect_error', 'reconnect_failed', 'reconnect_error', 'disconnect' ];
69 | connectionErrors.forEach( ( message ) => {
70 | socket.on( message, ( error ) => {
71 | store.dispatch( {
72 | type: CONNECT_ERROR,
73 | error
74 | } );
75 | } );
76 | } );
77 |
78 | socket.on( 'reconnect', ( error ) => {
79 | store.dispatch( {
80 | type: RECONNECT,
81 | error
82 | } );
83 | } );
84 |
85 | // live-reloading handling
86 | if ( module.hot ) {
87 | module.hot.accept( './rootReducer', () => {
88 | const nextRootReducer = require( './rootReducer' ).default;
89 | store.replaceReducer( nextRootReducer );
90 | } );
91 | }
92 | return store;
93 | }
94 |
--------------------------------------------------------------------------------
/src/redux/payloadValidatorMiddleware.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Payload validator middleware
3 | * ===================================
4 | * Modified from:
5 | * https://github.com/MaxLi1994/redux-validator
6 | * Author: https://github.com/MaxLi1994
7 | */
8 | const options = {
9 | validatorKey: 'meta',
10 | paramKey: 'payload'
11 | };
12 |
13 | export default () => ( store ) => ( next ) => ( action ) => {
14 | if ( !action[options.validatorKey] || !action[options.validatorKey].validator || action[options.validatorKey].disableValidate ) {
15 | // thunk compatible
16 | if ( action[options.paramKey] && action[options.paramKey].thunk ) {
17 | return next( action[options.paramKey].thunk );
18 | }
19 | else {
20 | return next( action );
21 | }
22 | }
23 |
24 | let flag = true;
25 | let errorParam, errorId, errorMsg;
26 |
27 | const validators = action[options.validatorKey].validator || {};
28 | const runValidator = ( param, func, msg, id, key ) => {
29 | let valid;
30 | if ( func ) {
31 | valid = func( param, store.getState(), action.payload );
32 | }
33 | else {
34 | throw new Error( 'validator func is needed' );
35 | }
36 | if
37 | ( typeof valid !== 'boolean' ) {
38 | throw new Error( 'validator func must return boolean type' );
39 | }
40 | if ( !valid ) {
41 | errorParam = key;
42 | errorId = id;
43 | errorMsg = ( typeof msg === 'function'
44 | ? msg( param, store.getState(), action.payload )
45 | : msg )
46 | || '';
47 | }
48 |
49 | return valid;
50 | };
51 |
52 | const runValidatorContainer = ( validator, param, key ) => {
53 | let valid;
54 | if ( Array.prototype.isPrototypeOf( validator ) ) {
55 | for ( const j in validator ) {
56 | if ( validator.hasOwnProperty( j ) ) {
57 | const item = validator[j];
58 | valid = runValidator( param, item.func, item.msg, j, key );
59 | if ( !valid ) break;
60 | }
61 | }
62 | }
63 | else {
64 | valid = runValidator( param, validator.func, validator.msg, 0, key );
65 | }
66 | return valid;
67 | };
68 |
69 | const params = action[options.paramKey] || {};
70 | for ( const i in validators ) {
71 | if ( validators.hasOwnProperty( i ) ) {
72 | if ( i === options.paramKey || i === 'thunk' ) continue;
73 | const validator = validators[i];
74 |
75 | flag = runValidatorContainer( validator, params[i], i );
76 | if ( !flag ) break;
77 | }
78 | }
79 |
80 | // param object itself
81 | const paramObjValidator = validators[options.paramKey];
82 | if ( paramObjValidator && flag ) {
83 | flag = runValidatorContainer( paramObjValidator, action[options.paramKey], options.paramKey );
84 | }
85 | // -------
86 |
87 | if ( flag ) {
88 | // thunk compatible
89 | if ( action[options.paramKey] && action[options.paramKey].thunk ) {
90 | return next( action[options.paramKey].thunk );
91 | }
92 | else {
93 | return next( action );
94 | }
95 | }
96 | else {
97 | return next( { errors: errorMsg, type: `${action.type}_FAIL`, param: errorParam, id: errorId } );
98 |
99 | /*
100 | * return {
101 | * err: 'validator',
102 | * msg: errorMsg,
103 | * param: errorParam,
104 | * id: errorId
105 | * };
106 | */
107 | }
108 | };
109 |
--------------------------------------------------------------------------------
/src/redux/promiseMiddleware.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Promise middleware
3 | * ===================================
4 | * If a promise is passed in an action,
5 | * this middleware will resolve it and dispatch related actions names
6 | * (ACTION_NAME when started, then ACTION_NAME_SUCCESS or ACTION_NAME_FAIL depending on promise outcome)
7 | */
8 |
9 | import config from '../../config';
10 | const { timers } = config;
11 |
12 | export default () => ( { dispatch, getState } ) => ( next ) => ( action ) => {
13 | // If the action is a function, execute it
14 | if ( typeof action === 'function' ) {
15 | return action( dispatch, getState );
16 | }
17 |
18 | const { promise, type, ...rest } = action;
19 |
20 | // If there is no promise in the action, ignore it
21 | if ( !promise ) {
22 | // pass the action to the next middleware
23 | return next( action );
24 | }
25 | else if ( typeof promise !== 'function' || !Promise.resolve( promise ) ) {
26 | console.warn( 'passed an action with a "promise" prop which is not a promise function, action:', action );/* eslint no-console : 0 */
27 | return next( action );
28 | }
29 | // build constants that will be used to dispatch actions
30 | const REQUEST = `${type }_PENDING`;
31 | const SUCCESS = `${type }_SUCCESS`;
32 | const FAIL = `${type }_FAIL`;
33 | const RESET = `${type }_RESET`;
34 |
35 | /*
36 | * Trigger the action once to dispatch
37 | * the fact promise is starting resolving (for loading indication for instance)
38 | */
39 | next( { ...rest, type: REQUEST } );
40 | // resolve promise
41 | return promise( dispatch, getState ).then(
42 | ( result ) => {
43 | setTimeout( () =>
44 | next( { ...rest, type: RESET } )
45 | , timers.long );
46 | return next( { ...rest, result, type: SUCCESS } );
47 | } ).catch( ( error ) =>
48 | next( { ...rest, error, type: FAIL } )
49 | );
50 |
51 | };
52 |
--------------------------------------------------------------------------------
/src/redux/rootReducer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Fonio Reducers Endpoint
3 | * ===================================
4 | *
5 | * Combining the app's reducers.
6 | */
7 | import { combineReducers } from 'redux';
8 |
9 | import { i18nState } from 'redux-i18n';
10 |
11 | import { loadingBarReducer } from 'react-redux-loading-bar';
12 |
13 | import { reducer as toastrReducer } from 'react-redux-toastr';
14 |
15 | import home from '../features/HomeView/duck';
16 | import summary from '../features/SummaryView/duck';
17 | import section from '../features/SectionView/duck';
18 | import library from '../features/LibraryView/duck';
19 | import design from '../features/DesignView/duck';
20 |
21 | import connections from '../features/ConnectionsManager/duck';
22 | import userInfo from '../features/UserInfoManager/duck';
23 | import auth from '../features/AuthManager/duck';
24 | import editionUiWrapper from '../features/EditionUiWrapper/duck';
25 | import editedStory from '../features/StoryManager/duck';
26 | import sectionsManagement from '../features/SectionsManager/duck';
27 | import errorMessage from '../features/ErrorMessageManager/duck';
28 |
29 | const saveLang = ( state = {}, action ) => {
30 | if ( action.type === 'REDUX_I18N_SET_LANGUAGE' ) {
31 | localStorage.setItem( 'fonio-lang', action.lang );
32 | return state;
33 | }
34 | else return state;
35 | };
36 |
37 | export default combineReducers( {
38 | i18nState,
39 | saveLang,
40 |
41 | loadingBar: loadingBarReducer,
42 | toastr: toastrReducer,
43 |
44 | connections,
45 | userInfo,
46 | auth,
47 | editionUiWrapper,
48 | editedStory,
49 | sectionsManagement,
50 | errorMessage,
51 |
52 | home,
53 | summary,
54 | section,
55 | library,
56 | design,
57 | } );
58 |
--------------------------------------------------------------------------------
/src/redux/socketIoMiddleware.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Socket middleware
3 | * Catch socket-related actions (triggered if they contain a meta property)
4 | * and pass them through the socket
5 | */
6 | import { loadStoryToken } from '../helpers/localStorageUtils';
7 |
8 | export default ( socket ) => {
9 | const eventName = 'action';
10 |
11 | return ( store ) => {
12 | socket.on( eventName, store.dispatch );
13 | return ( next ) => ( action ) => {
14 | if ( action.meta && action.meta.remote ) {
15 |
16 | // passing jwt token if a story content is involved
17 | const { storyId } = action.payload;
18 | let token;
19 | if ( storyId ) {
20 | token = loadStoryToken( storyId );
21 | }
22 |
23 | if ( action.callback && typeof action.callback === 'function' ) {
24 | socket.emit( eventName, { ...action, token }, action.callback );
25 | }
26 | else {
27 | socket.emit( eventName, { ...action, token } );
28 | }
29 | }
30 | return next( action );
31 | };
32 | };
33 | };
34 |
--------------------------------------------------------------------------------
/src/sharedAssets/avatars/disappointed-boy.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/src/sharedAssets/avatars/embarrased-boy.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/src/sharedAssets/avatars/fat-boy-smiling.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/src/sharedAssets/avatars/happy-baby.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/src/sharedAssets/avatars/index.json:
--------------------------------------------------------------------------------
1 | [
2 | "amazed-man.svg",
3 | "happy-baby.svg",
4 | "angry-man.svg",
5 | "happy-woman.svg",
6 | "angry-woman.svg",
7 | "hipster-smiling.svg",
8 | "baby-crying.svg",
9 | "hypnotized-hipster.svg",
10 | "baby-love.svg",
11 | "inexpressive-girl.svg",
12 | "boy-broad-smile.svg",
13 | "kissing-girl.svg",
14 | "boy-happy-smile.svg",
15 | "man-with-moustache-smiling.svg",
16 | "boy-smiling.svg",
17 | "naughty-girl.svg",
18 | "boy-suffering.svg",
19 | "perplexed-man.svg",
20 | "delighted-granny.svg",
21 | "philosophizing-boy.svg",
22 | "disappointed-boy.svg",
23 | "sad-baby.svg",
24 | "embarrased-boy.svg",
25 | "sad-girl.svg",
26 | "embarrased-girl.svg",
27 | "sad-hipster.svg",
28 | "embarrased-granny.svg",
29 | "sad-woman.svg",
30 | "emotive-granny.svg",
31 | "satisfied-woman.svg",
32 | "fat-boy-angry.svg",
33 | "shocked-girl.svg",
34 | "fat-boy-shocked.svg",
35 | "sleeping-granny.svg",
36 | "fat-boy-smiling.svg",
37 | "sleepy-boy.svg",
38 | "fat-boy-sorry.svg",
39 | "smiling-baby.svg",
40 | "fat-boy.svg",
41 | "smiling-girl.svg",
42 | "frightened-hipster.svg",
43 | "surprised-girl.svg",
44 | "girl-air-kissing.svg",
45 | "suspicious-man.svg",
46 | "girl-crying.svg",
47 | "teasing-boy.svg",
48 | "girl-embarrased.svg",
49 | "upset-girl.svg",
50 | "girl-laughing-to-tears.svg",
51 | "upset-granny.svg",
52 | "girl-showing-tongue.svg",
53 | "winking-boy.svg",
54 | "girl-smiling.svg",
55 | "wondered-hipster.svg",
56 | "girl-with-poker-face.svg"
57 | ]
--------------------------------------------------------------------------------
/src/sharedAssets/avatars/sad-baby.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/src/sharedAssets/avatars/smiling-baby.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/src/sharedAssets/avatars/winking-boy.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/src/sharedAssets/cover_forccast.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/medialab/fonio/974f497357f401250d69cad69d05c501f58c5c3d/src/sharedAssets/cover_forccast.jpg
--------------------------------------------------------------------------------
/src/sharedAssets/internal-link.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
16 |
17 |
--------------------------------------------------------------------------------
/src/sharedAssets/logo-quinoa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/medialab/fonio/974f497357f401250d69cad69d05c501f58c5c3d/src/sharedAssets/logo-quinoa.png
--------------------------------------------------------------------------------
/src/translations/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Translation data map
3 | * Exports available language data maps
4 | */
5 |
6 | import fr from './locales/fr';
7 | import en from './locales/en';
8 |
9 | const translations = {
10 | en,
11 | fr
12 | };
13 |
14 | export default translations;
15 |
--------------------------------------------------------------------------------
/translationScripts/addTranslationLanguage.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Translations language adder
3 | */
4 | var fs = require('fs');
5 | var path = require('path');
6 | var colors = require('colors');
7 | var argv = require('optimist').argv;
8 |
9 | var addTranslationLanguage = function() {
10 | const lang = argv._[0];
11 | const poPath = argv.poPath || './translations';
12 | const translationsPath = path.resolve(__dirname, argv['translations-folder']);
13 | if (lang) {
14 | // copy translation json
15 | const modelPath = fs.readdirSync(translationsPath + '/locales')[0];
16 | const model = fs.readFileSync(translationsPath + '/locales/' + modelPath, 'utf-8');
17 | fs.writeFileSync(translationsPath + '/locales/' + lang + '.json', model);
18 | // update translations index script
19 | const indexContent = fs.readFileSync(translationsPath + '/index.js', 'utf-8');
20 | const defRegex = /translations = {/;
21 | const match = indexContent.match(defRegex);
22 | if (match) {
23 | const newIndexContent = 'import ' + lang + ' from \'./locales/' + lang + '\';\n' + indexContent.substr(0, match.index) + match[0] + '\n ' + lang + ',' + indexContent.substr(match.index + match[0].length);
24 | fs.writeFileSync(translationsPath + '/index.js', newIndexContent);
25 | fs.writeFileSync(poPath + '/' + lang + '.po', '');
26 | console.log(colors.green('done updating code for language ' + lang));
27 | }
28 | } else {
29 | console.log('you must indicate a language code, e.g. "npm run translations:addlanguage it"')
30 | }
31 | }
32 |
33 | addTranslationLanguage();
34 |
35 | module.exports = addTranslationLanguage;
--------------------------------------------------------------------------------
/translationScripts/backfillTranslations.js:
--------------------------------------------------------------------------------
1 | /**
2 | * written by Robin de Mourat
3 | * Backfills untranslated keys with default language.
4 | * Lets the user know about the process
5 | */
6 |
7 | var fs = require('fs');
8 | var path = require('path');
9 | var colors = require('colors');
10 | var argv = require('optimist').argv;
11 |
12 | var backfillTranslations = function() {
13 | console.log(colors.green('Begining to check all translations'));
14 | const localesPath = path.resolve(__dirname, argv.locales);
15 | const localesFiles = fs.readdirSync(localesPath);
16 | const locales = localesFiles.map(fileName => {
17 | return {
18 | fileName,
19 | translations: require(argv.locales + '/' + fileName)
20 | }
21 | });
22 | const msgs = [];
23 |
24 | locales.forEach(locale1 => {
25 | Object.keys(locale1.translations).map(key => {
26 | locales.forEach(locale2 => {
27 | if (locale1.fileName !== locale2.fileName) {
28 | if (locale2.translations[key] === undefined) {
29 | msgs.push({
30 | type: 'untranslated',
31 | key: key,
32 | from: locale1.fileName,
33 | to: locale2.fileName,
34 | backfill: locale1.translations[key]
35 | });
36 | locale2.translations[key] = locale1.translations[key];
37 | }
38 | }
39 | });
40 | });
41 | });
42 |
43 | locales.forEach(locale => {
44 | fs.writeFileSync(localesPath + '/' + locale.fileName, JSON.stringify(locale.translations, null, 2));
45 | });
46 | msgs.forEach(msg => {
47 | if (msg.type === 'untranslated') {
48 | var msgC ='Message with key "' +
49 | msg.key +
50 | '" was not translated in language ' +
51 | msg.to.split('.')[0] +
52 | ', it has been backfilled with ' +
53 | msg.from.split('.')[0] +
54 | ' message "' +
55 | msg.backfill +
56 | '". \nGo to ' +
57 | localesPath +
58 | '/' + msg.to +
59 | ' to translate it properly.\n\n';
60 | console.log(colors.red(msgC));
61 | }
62 | })
63 | console.log(colors.green('Translation maintenance is complete'));
64 | }
65 |
66 | backfillTranslations();
67 |
68 | module.exports = backfillTranslations;
--------------------------------------------------------------------------------
/translationScripts/exportTranslationsToPo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Translations exporter
3 | */
4 | var fs = require('fs');
5 | var path = require('path');
6 | var colors = require('colors');
7 | var argv = require('optimist').argv;
8 | var json2po = require('json2po');
9 |
10 | var exportTranslationsToPo = function() {
11 | console.log(colors.green('Begining to export all translations to .po translation files'));
12 | const localesPath = path.resolve(__dirname, argv.locales);
13 | const localesFiles = fs.readdirSync(localesPath);
14 | const destPath = path.resolve(__dirname, argv.dest);
15 | localesFiles.forEach(function (fileName) {
16 | const lang = fileName.split('.')[0];
17 | const data = require(localesPath + '/' + fileName);
18 | const po = json2po(
19 | JSON.stringify(data),
20 | {
21 | "Project-Id-Version": "Sample Project",
22 | "PO-Revision-Date": new Date(),
23 | "Language": lang
24 | }
25 | );
26 | const output = destPath + '/' + lang + '.po';
27 | fs.writeFileSync(output, po);
28 | })
29 | console.log(colors.green('Export done for all translations files !'));
30 | }
31 |
32 | exportTranslationsToPo();
33 |
34 | module.exports = exportTranslationsToPo;
--------------------------------------------------------------------------------
/translationScripts/importTranslationsFromPo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Translations importer
3 | */
4 | var fs = require('fs');
5 | var path = require('path');
6 | var colors = require('colors');
7 | var argv = require('optimist').argv;
8 | var po2json = require('po2json');
9 |
10 | var importTranslationsFromPo = function() {
11 | console.log(colors.green('Begining to import all translations from .po translation files'));
12 | const localesPath = path.resolve(__dirname, argv.locales);
13 | const localesFiles = fs.readdirSync(localesPath);
14 | const srcPath = path.resolve(__dirname, argv.src);
15 | const localesSources = fs.readdirSync(srcPath);
16 | localesSources.forEach(function (fileName) {
17 | const lang = fileName.split('.')[0];
18 | console.log(colors.green('importing locale files for ', lang));
19 | const json = po2json.parseFileSync(srcPath + '/' + fileName);
20 | const clean = Object.keys(json).reduce(function(results, key) {
21 | if (key.length > 0) {
22 | results[key] = json[key][1];
23 | }
24 | return results;
25 | }, {});
26 | if (clean) {
27 | fs.writeFileSync(localesPath + '/' + lang + '.json', JSON.stringify(clean, null, 2));
28 | }
29 | })
30 | console.log(colors.green('Import done for all translations files !'));
31 | }
32 |
33 | importTranslationsFromPo();
34 |
35 | module.exports = importTranslationsFromPo;
--------------------------------------------------------------------------------
/translationScripts/updateTranslationsToPo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Translations reconcilier
3 | */
4 | var fs = require('fs');
5 | var path = require('path');
6 | var colors = require('colors');
7 | var argv = require('optimist').argv;
8 | var json2po = require('json2po');
9 | var po2json = require('po2json');
10 |
11 | var updateTranslationsToPo = function() {
12 | console.log(colors.green('Begining to update po files with translations to .po translation files'));
13 | const localesPath = path.resolve(__dirname, argv.locales);
14 | const localesFiles = fs.readdirSync(localesPath);
15 | const destPath = path.resolve(__dirname, argv.dest);
16 | const poFiles = fs.readdirSync(destPath);
17 | poFiles.forEach(function (fileName) {
18 | const lang = fileName.split('.')[0];
19 | console.log(colors.green('inspecting locale files for ', lang));
20 | const json = po2json.parseFileSync(destPath + '/' + fileName);
21 | const data = Object.keys(json).reduce(function(results, key) {
22 | if (key.length > 0) {
23 | results[key] = json[key][1];
24 | }
25 | return results;
26 | }, {});
27 | if (data) {
28 | const js = require(localesPath + '/' + lang + '.json');
29 | var toUpdate = false;
30 | Object.keys(js).forEach(function(key) {
31 | if (data[key] === undefined) {
32 | console.log(colors.red(key + ' key is not present in po files for lang ' + lang + ', adding it'));
33 | data[key] = js[key];
34 | toUpdate = true;
35 | }
36 | });
37 |
38 | if (toUpdate) {
39 | console.log(colors.green('updating po file ' + fileName));
40 | const po = json2po(
41 | JSON.stringify(data),
42 | {
43 | "Project-Id-Version": "Sample Project",
44 | "PO-Revision-Date": new Date(),
45 | "Language": lang
46 | }
47 | );
48 | const output = destPath + '/' + lang + '.po';
49 | fs.writeFileSync(output, po);
50 | console.log(colors.green('update done for po file ' + fileName));
51 | }
52 | }
53 | })
54 | console.log(colors.green('Update done for all translations files ! You can now work with the Po files'));
55 | }
56 |
57 | updateTranslationsToPo();
58 |
59 | module.exports = updateTranslationsToPo;
--------------------------------------------------------------------------------
/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Webpack configuration for handling the application's source code
3 | * in development mode (standard)
4 | */
5 | var webpack = require('webpack');
6 | var config = require('config');
7 | var sharedConfig = require('./webpack.config.shared');
8 |
9 | module.exports = {
10 | module: sharedConfig.module,
11 | plugins: sharedConfig.plugins.concat([
12 | new webpack.DefinePlugin({
13 | 'process.env': {
14 | NODE_ENV: JSON.stringify('development')
15 | },
16 | 'FONIO_CONFIG': JSON.stringify(config)
17 | })
18 | ])
19 | };
20 |
--------------------------------------------------------------------------------
/webpack.config.docker.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Webpack configuration for handling the applicatino's source code
3 | * in production mode (standard + minify)
4 | */
5 | var webpack = require('webpack');
6 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
7 |
8 | var sharedConfig = require('./webpack.config.shared');
9 |
10 | module.exports = {
11 |
12 | module: sharedConfig.module,
13 |
14 | plugins: sharedConfig.plugins
15 | .concat(new UglifyJsPlugin())
16 | .concat(new webpack.DefinePlugin({
17 | 'process.env': {
18 | NODE_ENV: JSON.stringify('production')
19 | }
20 | })),
21 |
22 | devtool: 'source-map',
23 |
24 | output: {
25 | path: '/build',
26 | publicPath: '@@URL_PREFIX@@/build/'
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Webpack configuration for handling the applicatino's source code
3 | * in production mode (standard + minify)
4 | */
5 | var webpack = require('webpack');
6 | const config = require('config');
7 | const urlPrefix = config.get('urlPrefix');
8 |
9 | var sharedConfig = require('./webpack.config.shared');
10 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
11 | module.exports = {
12 |
13 | module: sharedConfig.module,
14 |
15 | mode: 'production',
16 |
17 | plugins: sharedConfig.plugins
18 | /*.concat(new UglifyJsPlugin())*/
19 | .concat(new webpack.DefinePlugin({
20 | 'process.env': {
21 | NODE_ENV: JSON.stringify('production')
22 | }
23 | }))
24 | .concat(new BundleAnalyzerPlugin({
25 | openAnalyzer: false,
26 | generateStatsFile: true,
27 | analyzerMode: 'disabled'
28 | }))
29 | ,
30 |
31 | // devtool: 'source-map',
32 |
33 | output: {
34 | path: '/build',
35 | publicPath: urlPrefix && urlPrefix.length ? urlPrefix + '/build/' : '/build/'
36 | }
37 | };
38 |
--------------------------------------------------------------------------------
/webpack.config.shared.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Webpack configuration base for handling the application's source code
3 | */
4 | var webpack = require('webpack');
5 |
6 | module.exports = {
7 | module: {
8 | rules: [
9 | {
10 | test: /\.(woff|ttf|otf|eot|woff2)$/i,
11 | use: [
12 | {
13 | loader: 'file-loader',
14 | options: {
15 | query: {
16 | name:'assets/[name].[ext]'
17 | }
18 | }
19 | },
20 | ]
21 | },
22 | {
23 | test: /\.(jpe?g|png|gif|svg)$/i,
24 | use: [
25 | 'url-loader?limit=10000',
26 | 'img-loader'
27 | ]
28 | },
29 | /*{
30 | test: /\.scss$/,
31 | use: ['style-loader', 'css-loader', 'sass-loader']
32 | },
33 | {
34 | test: /\.css$/,
35 | use: ['style-loader', 'css-loader']
36 | }*/
37 | ]
38 | },
39 | plugins: []
40 | };
41 |
--------------------------------------------------------------------------------