Home Explore Help
Sign In
bux
/
tracim_v2
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

implementation of pageHtml plugin

Skylsmoi 6 years ago
commit
9878588553
15 changed files with 359 additions and 0 deletions
Split View Show Diff Stats
  1. 5 0
      .gitignore
  2. 1 0
      README.md
  3. 44 0
      dist/index.html
  4. 1 0
      dist/pageHtml.plugin.js
  5. 51 0
      package.json
  6. 12 0
      src/component/PageHtml.jsx
  7. 82 0
      src/container/PageHtml.jsx
  8. 13 0
      src/css/Variable.styl
  9. 1 0
      src/css/index.styl
  10. 6 0
      src/helper.js
  11. 10 0
      src/index.dev.js
  12. 20 0
      src/index.js
  13. 6 0
      src/reducer/root.js
  14. 21 0
      src/reducer/user.js
  15. 86 0
      webpack.config.js

+ 5 - 0
.gitignore View File 

@@ -0,0 +1,5 @@
1 
+# Created by .ignore support plugin (hsz.mobi)
2 
+.idea/
3 
+.git/
4 
+node_modules/
5 
+dist/pageHtml.plugin.js.map

+ 1 - 0
README.md View File 

@@ -0,0 +1 @@
1 
+# react init

+ 44 - 0
dist/index.html View File 

@@ -0,0 +1,44 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+  <head>
4 
+    <meta charset='utf-8' />
5 
+    <meta name="viewport" content="width=device-width, user-scalable=no">
6 
+    <title>Plugin PageHtml</title>
7 
+    <link rel='shortcut icon' href='favicon.ico'>
8 
+  </head>
9 
+  <body>
10 
+    <div id='content'></div>
11 
+
12 
+    <script src='pageHtml.plugin.dev.js'></script>
13 
+
14 
+    <script type='text/javascript'>
15 
+      GLOBAL_renderPlugin = pluginName => {
16 
+        if (pluginName === 'PageHtml') {
17 
+          pluginPageHtml.renderPlugin('pluginContainer')
18 
+          console.log('plugin pagehtml rendered')
19 
+        }
20 
+      }
21 
+
22 
+      GLOBAL_dispatchEvent = (data) => {
23 
+        var event = new CustomEvent('pluginCustomEvent', {detail: data})
24 
+        document.dispatchEvent(event)
25 
+      }
26 
+
27 
+      GLOBAL_unmountPlugin = () => {
28 
+        console.log('btn close clicked')
29 
+        pluginPageHtml.hidePlugin('pluginContainer')
30 
+      }
31 
+
32 
+      // only usefull if plugin doesn't handle fileContent himself
33 
+      GLOBAL_handleRequireRedraw = () => {
34 
+        var rez = pluginA.destroyPlugin('plugin')
35 
+        if (rez) GLOBAL_drawPlugin('redraw')
36 
+        else console.log('Erreur, failed at destroying plugin')
37 
+      }
38 
+    </script>
39 
+
40 
+    <script type='text/javascript'>
41 
+      // pluginPageHtml.renderPlugin('content')
42 
+    </script>
43 
+  </body>
44 
+</html>

File diff suppressed because it is too large
+ 1 - 0
dist/pageHtml.plugin.js


+ 51 - 0
package.json View File 

@@ -0,0 +1,51 @@
1 
+{
2 
+  "name": "tracim_plugin_pagehtml",
3 
+  "version": "1.0.0",
4 
+  "description": "",
5 
+  "main": "index.js",
6 
+  "scripts": {
7 
+    "mockapi": "node jsonserver/server.js",
8 
+    "servdev": "NODE_ENV=development webpack-dev-server --watch --colors --inline --hot --progress",
9 
+    "build": "NODE_ENV=production webpack -p",
10 
+    "test": "echo \"Error: no test specified\" && exit 1"
11 
+  },
12 
+  "author": "",
13 
+  "license": "ISC",
14 
+  "dependencies": {
15 
+    "babel-core": "^6.26.0",
16 
+    "babel-eslint": "^8.2.1",
17 
+    "babel-loader": "^7.1.2",
18 
+    "babel-plugin-transform-class-properties": "^6.24.1",
19 
+    "babel-plugin-transform-object-assign": "^6.22.0",
20 
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
21 
+    "babel-polyfill": "^6.26.0",
22 
+    "babel-preset-env": "^1.6.1",
23 
+    "babel-preset-react": "^6.24.1",
24 
+    "classnames": "^2.2.5",
25 
+    "css-loader": "^0.28.7",
26 
+    "file-loader": "^1.1.5",
27 
+    "prop-types": "^15.6.0",
28 
+    "react": "^16.0.0",
29 
+    "react-dom": "^16.0.0",
30 
+    "standard": "^11.0.0",
31 
+    "standard-loader": "^6.0.1",
32 
+    "style-loader": "^0.19.0",
33 
+    "stylus": "^0.54.5",
34 
+    "stylus-loader": "^3.0.1",
35 
+    "url-loader": "^0.6.2",
36 
+    "webpack": "^3.8.1",
37 
+    "whatwg-fetch": "^2.0.3",
38 
+    "tracim_lib": "git://github.com/Skylsmoi/tracim_lib.git"
39 
+  },
40 
+  "devDependencies": {
41 
+    "webpack-dev-server": "^2.9.2"
42 
+  },
43 
+  "standard": {
44 
+    "globals": [
45 
+      "fetch",
46 
+      "history"
47 
+    ],
48 
+    "parser": "babel-eslint",
49 
+    "ignore": []
50 
+  }
51 
+}

+ 12 - 0
src/component/PageHtml.jsx View File 

@@ -0,0 +1,12 @@
1 
+import React from 'react'
2 
+
3 
+const PageHtml = props => {
4 
+  return (
5 
+    <div className='wsFilePageHtml__contentpage__textnote'>
6 
+      <div className='wsFilePageHtml__contentpage__textnote__latestversion' dangerouslySetInnerHTML={{__html: props.version}} />
7 
+      <div className='wsFilePageHtml__contentpage__textnote__text' dangerouslySetInnerHTML={{__html: props.text}} />
8 
+    </div>
9 
+  )
10 
+}
11 
+
12 
+export default PageHtml

+ 82 - 0
src/container/PageHtml.jsx View File 

@@ -0,0 +1,82 @@
1 
+import React from 'react'
2 
+import PageHtmlComponent from '../component/PageHtml.jsx'
3 
+import {
4 
+  PopinFixed,
5 
+  PopinFixedHeader,
6 
+  PopinFixedOption,
7 
+  PopinFixedContent
8 
+} from 'tracim_lib'
9 
+
10 
+class pageHtml extends React.Component {
11 
+  constructor (props) {
12 
+    super(props)
13 
+    this.state = {
14 
+      pluginName: 'PageHtml',
15 
+      data: props.data
16 
+        ? props.data
17 
+        : { // for debugg purpose
18 
+          PageHtml: {
19 
+            name: 'PageHtml',
20 
+            componentLeft: 'PageHtml',
21 
+            componentRight: 'Timeline',
22 
+            customClass: 'wsFilePageHtml',
23 
+            icon: 'fa fa-file-word-o'
24 
+          },
25 
+          activeFileContent: {
26 
+            version: '3',
27 
+            text: 'Bonjour ?'
28 
+          }
29 
+        }
30 
+    }
31 
+
32 
+    document.addEventListener('pluginCustomEvent', this.customEventReducer, false)
33 
+  }
34 
+
35 
+  customEventReducer = ({detail}) => {
36 
+    switch (detail.type) {
37 
+      case 'PageHtml_showMsg':
38 
+        this.setState({inputText: detail.content})
39 
+        break
40 
+    }
41 
+  }
42 
+
43 
+  handleClickBtnClosePlugin = () => {
44 
+    GLOBAL_unmountPlugin(this.state.pluginName)
45 
+  }
46 
+
47 
+  render () {
48 
+    const { PageHtml, activeFileContent } = this.state.data
49 
+
50 
+    return (
51 
+      <PopinFixed customClass={`${PageHtml.customClass}`}>
52 
+        <PopinFixedHeader
53 
+          customClass={`${PageHtml.customClass}`}
54 
+          icon={PageHtml.icon}
55 
+          name={activeFileContent.title}
56 
+          onClickCloseBtn={this.handleClickBtnClosePlugin}
57 
+        />
58 
+
59 
+        <PopinFixedOption customClass={`${PageHtml.customClass}`} />
60 
+
61 
+        <PopinFixedContent customClass={`${PageHtml.customClass}__contentpage`}>
62 
+          <PageHtmlComponent
63 
+            version={activeFileContent.version}
64 
+            text={activeFileContent.text}
65 
+            key={'PageHtml'}
66 
+          />
67 
+
68 
+          <div>Timeline</div>
69 
+
70 
+          {/*
71 
+          <Timeline
72 
+            customClass={`${PageHtml.customClass}__contentpage`}
73 
+            key={'pageHtml__timeline'}
74 
+          />
75 
+          */}
76 
+        </PopinFixedContent>
77 
+      </PopinFixed>
78 
+    )
79 
+  }
80 
+}
81 
+
82 
+export default pageHtml

+ 13 - 0
src/css/Variable.styl View File 

@@ -0,0 +1,13 @@
1 
+min-xs = 0px
2 
+max-xs = 575px
3 
+
4 
+min-sm = 576px
5 
+max-sm = 767px
6 
+
7 
+min-md = 768px
8 
+max-md = 991px
9 
+
10 
+min-lg = 992px
11 
+max-lg = 1199px
12 
+
13 
+min-xl = 1200px

+ 1 - 0
src/css/index.styl View File 

@@ -0,0 +1 @@
1 
+@import "Variable"

+ 6 - 0
src/helper.js View File 

@@ -0,0 +1,6 @@
1 
+export const FETCH_CONFIG = {
2 
+  headers: {
3 
+    'Accept': 'application/json',
4 
+    'Content-Type': 'application/json'
5 
+  }
6 
+}

+ 10 - 0
src/index.dev.js View File 

@@ -0,0 +1,10 @@
1 
+import React from 'react'
2 
+import ReactDOM from 'react-dom'
3 
+import PageHtml from './container/PageHtml.jsx'
4 
+
5 
+require('./css/index.styl')
6 
+
7 
+ReactDOM.render(
8 
+  <PageHtml />
9 
+  , document.getElementById('content')
10 
+)

+ 20 - 0
src/index.js View File 

@@ -0,0 +1,20 @@
1 
+import React from 'react'
2 
+import ReactDOM from 'react-dom'
3 
+import PageHtml from './container/PageHtml.jsx'
4 
+
5 
+require('./css/index.styl')
6 
+
7 
+const pluginInterface = {
8 
+  renderPlugin: domId => {
9 
+    return ReactDOM.render(
10 
+      <PageHtml />
11 
+      , document.getElementById(domId)
12 
+    )
13 
+  },
14 
+  hidePlugin: domId => {
15 
+    // TODO: should be a display none
16 
+    return ReactDOM.unmountComponentAtNode(document.getElementById(domId)) // returns bool
17 
+  }
18 
+}
19 
+
20 
+module.exports = pluginInterface

+ 6 - 0
src/reducer/root.js View File 

@@ -0,0 +1,6 @@
1 
+import { combineReducers } from 'redux'
2 
+import user from './user.js'
3 
+
4 
+const rootReducer = combineReducers({ user })
5 
+
6 
+export default rootReducer

+ 21 - 0
src/reducer/user.js View File 

@@ -0,0 +1,21 @@
1 
+import {
2 
+  USER_CONNECTED,
3 
+  USER_DATA
4 
+} from '../action-creator.sync.js'
5 
+
6 
+export default function user (state = {
7 
+  isLoggedIn: false,
8 
+  username: '',
9 
+  email: ''
10 
+}, action) {
11 
+  switch (action.type) {
12 
+    case `Update/${USER_CONNECTED}`:
13 
+      return {...state, isLoggedIn: true, ...action.user}
14 
+
15 
+    case `Update/${USER_DATA}`:
16 
+      return {...state, ...action.data}
17 
+
18 
+    default:
19 
+      return state
20 
+  }
21 
+}

+ 86 - 0
webpack.config.js View File 

@@ -0,0 +1,86 @@
1 
+const webpack = require('webpack')
2 
+const path = require('path')
3 
+const isProduction = process.env.NODE_ENV === 'production'
4 
+
5 
+console.log('isProduction : ', isProduction)
6 
+
7 
+module.exports = {
8 
+  entry: isProduction ? './src/index.js' : './src/index.dev.js',
9 
+  output: {
10 
+    path: path.resolve(__dirname, 'dist'),
11 
+    filename: isProduction ? 'pageHtml.plugin.js' : 'pageHtml.plugin.dev.js',
12 
+    pathinfo: !isProduction,
13 
+    library: isProduction ? 'tracim_lib' : undefined,
14 
+    libraryTarget: isProduction ? 'umd' : undefined,
15 
+    umdNamedDefine: isProduction
16 
+  },
17 
+  externals: isProduction
18 
+    ? {
19 
+      react: {commonjs: 'react', commonjs2: 'react', amd: 'react', root: '_'},
20 
+      'react-dom': {commonjs: 'react-dom', commonjs2: 'react-dom', amd: 'react-dom', root: '_'},
21 
+      classnames: {commonjs: 'classnames', commonjs2: 'classnames', amd: 'classnames', root: '_'},
22 
+      'prop-types': {commonjs: 'prop-types', commonjs2: 'prop-types', amd: 'prop-types', root: '_'},
23 
+      tracim_lib: {commonjs: 'tracim_lib', commonjs2: 'tracim_lib', amd: 'tracim_lib', root: '_'}
24 
+    }
25 
+    : {},
26 
+  devServer: {
27 
+    contentBase: path.join(__dirname, 'dist/'),
28 
+    port: 8071,
29 
+    hot: true,
30 
+    noInfo: true,
31 
+    overlay: {
32 
+      warnings: false,
33 
+      errors: true
34 
+    },
35 
+    historyApiFallback: true
36 
+    // headers: {
37 
+    //   'Access-Control-Allow-Origin': '*'
38 
+    // }
39 
+  },
40 
+  devtool: isProduction ? false : 'cheap-module-source-map',
41 
+  module: {
42 
+    rules: [{
43 
+      test: /\.jsx?$/,
44 
+      enforce: 'pre',
45 
+      use: 'standard-loader',
46 
+      exclude: [/node_modules/]
47 
+    }, {
48 
+      test: [/\.js$/, /\.jsx$/],
49 
+      loader: 'babel-loader',
50 
+      options: {
51 
+        presets: ['env', 'react'],
52 
+        plugins: ['transform-object-rest-spread', 'transform-class-properties', 'transform-object-assign']
53 
+      },
54 
+      exclude: [/node_modules/]
55 
+    }, {
56 
+      test: /\.css$/,
57 
+      use: ['style-loader', 'css-loader']
58 
+    }, {
59 
+      test: /\.styl$/,
60 
+      use: ['style-loader', 'css-loader', 'stylus-loader']
61 
+    }, {
62 
+      test: /\.(jpg|png|svg)$/,
63 
+      loader: 'url-loader',
64 
+      options: {
65 
+        limit: 25000
66 
+      }
67 
+    }]
68 
+  },
69 
+  resolve: {
70 
+    extensions: ['.js', '.jsx']
71 
+  },
72 
+  plugins:[
73 
+    ...[], // generic plugins always present
74 
+    ...(isProduction
75 
+      ? [ // production specific plugins
76 
+        new webpack.DefinePlugin({
77 
+          'process.env': { 'NODE_ENV': JSON.stringify('production') }
78 
+        }),
79 
+        new webpack.optimize.UglifyJsPlugin({
80 
+          compress: { warnings: false }
81 
+        })
82 
+      ]
83 
+      : [] // development specific plugins
84 
+    )
85 
+  ]
86 
+}