Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
P
purescript-gargantext
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
148
Issues
148
List
Board
Labels
Milestones
Merge Requests
2
Merge Requests
2
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
gargantext
purescript-gargantext
Commits
31851ae1
Commit
31851ae1
authored
Feb 14, 2020
by
Przemyslaw Kaminski
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[CodeEditor] divider is working now
parent
c803af68
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
70 additions
and
11 deletions
+70
-11
CodeEditor.css
dist/styles/CodeEditor.css
+0
-1
CodeEditor.sass
dist/styles/CodeEditor.sass
+1
-1
CodeEditor.purs
src/Gargantext/Components/CodeEditor.purs
+68
-5
Reactix.purs
src/Gargantext/Utils/Reactix.purs
+1
-4
No files found.
dist/styles/CodeEditor.css
View file @
31851ae1
...
@@ -22,7 +22,6 @@
...
@@ -22,7 +22,6 @@
width
:
100%
;
width
:
100%
;
}
}
.code-editor
.editor
.code-area
{
.code-editor
.editor
.code-area
{
flex-grow
:
1
;
max-height
:
200px
;
max-height
:
200px
;
min-width
:
25%
;
min-width
:
25%
;
overflow
:
auto
;
overflow
:
auto
;
...
...
dist/styles/CodeEditor.sass
View file @
31851ae1
...
@@ -39,7 +39,7 @@
...
@@ -39,7 +39,7 @@
display
:
flex
display
:
flex
width
:
100%
width
:
100%
.code-area
.code-area
flex-grow
:
1
//
flex-grow: 1
max-height
:
200px
max-height
:
200px
min-width
:
25%
min-width
:
25%
overflow
:
auto
overflow
:
auto
...
...
src/Gargantext/Components/CodeEditor.purs
View file @
31851ae1
module Gargantext.Components.CodeEditor where
module Gargantext.Components.CodeEditor where
import DOM.Simple.Types (Element)
import Data.Argonaut.Parser (jsonParser)
import Data.Argonaut.Parser (jsonParser)
import Data.Either (either, Either(..))
import Data.Either (either, Either(..))
import Data.Generic.Rep (class Generic)
import Data.Generic.Rep (class Generic)
...
@@ -11,10 +10,15 @@ import Data.Nullable (Nullable, null, toMaybe)
...
@@ -11,10 +10,15 @@ import Data.Nullable (Nullable, null, toMaybe)
import Data.String.Utils (endsWith)
import Data.String.Utils (endsWith)
import Data.Tuple (fst, snd)
import Data.Tuple (fst, snd)
import Data.Tuple.Nested ((/\))
import Data.Tuple.Nested ((/\))
import DOM.Simple.Console (log2)
import DOM.Simple.Element (boundingRect)
import DOM.Simple.Event (MouseEvent)
import DOM.Simple.Types (DOMRect, Element)
import Effect (Effect)
import Effect (Effect)
import FFI.Simple ((.=))
import FFI.Simple ((.
.), (.
=))
import Reactix as R
import Reactix as R
import Reactix.DOM.HTML as H
import Reactix.DOM.HTML as H
import Reactix.SyntheticEvent (SyntheticEvent)
import Text.Markdown.SlamDown.Parser (parseMd)
import Text.Markdown.SlamDown.Parser (parseMd)
import Text.Markdown.SlamDown.Smolder as MD
import Text.Markdown.SlamDown.Smolder as MD
import Text.Markdown.SlamDown.Syntax (SlamDownP)
import Text.Markdown.SlamDown.Syntax (SlamDownP)
...
@@ -87,6 +91,24 @@ renderHaskell s = s
...
@@ -87,6 +91,24 @@ renderHaskell s = s
codeEditor :: Record Props -> R.Element
codeEditor :: Record Props -> R.Element
codeEditor p = R.createElement codeEditorCpt p []
codeEditor p = R.createElement codeEditorCpt p []
type Divider = (
codeAreaRef:: R.Ref (Nullable Element)
, codeAreaPositionRef:: R.Ref (Maybe DOMRect)
, dividerInitialPositionRef:: R.Ref (Maybe R2.Point)
)
initDivider :: R.Hooks (Record Divider)
initDivider = do
codeAreaRef <- R.useRef null
codeAreaPositionRef <- R.useRef Nothing
dividerInitialPositionRef <- R.useRef Nothing
pure $ {
codeAreaRef
, codeAreaPositionRef
, dividerInitialPositionRef
}
-- The code editor contains 3 components:
-- The code editor contains 3 components:
-- - a hidden textarea
-- - a hidden textarea
-- - textarea code overlay
-- - textarea code overlay
...
@@ -99,18 +121,26 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt
...
@@ -99,18 +121,26 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt
cpt {code, defaultCodeType, onChange} _ = do
cpt {code, defaultCodeType, onChange} _ = do
controls <- initControls code defaultCodeType
controls <- initControls code defaultCodeType
divider <- initDivider
R.useEffect2' (fst controls.codeS) (fst controls.codeType) $ do
R.useEffect2' (fst controls.codeS) (fst controls.codeType) $ do
let code' = fst controls.codeS
let code' = fst controls.codeS
setCodeOverlay controls code'
setCodeOverlay controls code'
renderHtml code' controls
renderHtml code' controls
pure $ H.div { className: "code-editor" } [
pure $ H.div { className: "code-editor"
, on: {
mouseMove: onDividerMouseMove divider
, mouseUp: onDividerMouseUp divider
}
} [
toolbar {controls, onChange}
toolbar {controls, onChange}
, H.div { className: "row error" } [
, H.div { className: "row error" } [
errorComponent {error: controls.error}
errorComponent {error: controls.error}
]
]
, H.div { className: "row editor" } [
, H.div { className: "row editor" } [
H.div { className: "code-area " <> (codeHidden $ fst controls.viewType) } [
H.div { className: "code-area " <> (codeHidden $ fst controls.viewType)
, ref: divider.codeAreaRef } [
H.div { className: "code-container" } [
H.div { className: "code-container" } [
H.textarea { defaultValue: code
H.textarea { defaultValue: code
, on: { change: onEditChange controls onChange }
, on: { change: onEditChange controls onChange }
...
@@ -125,7 +155,10 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt
...
@@ -125,7 +155,10 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt
]
]
]
]
, H.div { className: "v-divider " <> (dividerHidden $ fst controls.viewType) } [
, H.div { className: "v-divider " <> (dividerHidden $ fst controls.viewType) } [
H.span { className: "fa fa-bars handle" } []
H.span { className: "fa fa-bars handle"
, on: {
mouseDown: onDividerMouseDown divider
} } []
]
]
, H.div { className: "html " <> (langClass $ fst controls.codeType) <> (previewHidden $ fst controls.viewType)
, H.div { className: "html " <> (langClass $ fst controls.codeType) <> (previewHidden $ fst controls.viewType)
, ref: controls.htmlElRef
, ref: controls.htmlElRef
...
@@ -158,6 +191,36 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt
...
@@ -158,6 +191,36 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt
snd codeS $ const code
snd codeS $ const code
onChange codeType code
onChange codeType code
onDividerMouseDown :: Record Divider -> SyntheticEvent MouseEvent -> Effect Unit
onDividerMouseDown {codeAreaRef, codeAreaPositionRef, dividerInitialPositionRef} e = do
case (toMaybe $ R.readRef codeAreaRef) of
Nothing -> pure unit
Just codeAreaEl -> do
R.setRef codeAreaPositionRef $ Just $ boundingRect codeAreaEl
R.setRef dividerInitialPositionRef $ Just $ R2.mousePosition e
onDividerMouseMove :: Record Divider -> SyntheticEvent MouseEvent -> Effect Unit
onDividerMouseMove {codeAreaRef, codeAreaPositionRef, dividerInitialPositionRef} e = do
case (toMaybe $ R.readRef codeAreaRef) of
Nothing -> pure unit
Just codeAreaEl -> do
case (R.readRef codeAreaPositionRef) of
Nothing -> pure unit
Just codeAreaPosition -> do
case (R.readRef dividerInitialPositionRef) of
Nothing -> pure unit
Just (R2.Point dividerInitialPosition) -> do
let (R2.Point pos) = R2.mousePosition e
let diff = dividerInitialPosition.x - codeAreaPosition.right
let width = pos.x - codeAreaPosition.left - diff
let style = codeAreaEl .. "style"
pure $ (style .= "width") width
onDividerMouseUp :: forall e. Record Divider -> e -> Effect Unit
onDividerMouseUp {codeAreaPositionRef, dividerInitialPositionRef} _ = do
R.setRef codeAreaPositionRef Nothing
R.setRef dividerInitialPositionRef Nothing
setCodeOverlay :: Record Controls -> Code -> Effect Unit
setCodeOverlay :: Record Controls -> Code -> Effect Unit
setCodeOverlay {codeOverlayElRef, codeType: (codeType /\ _)} code = do
setCodeOverlay {codeOverlayElRef, codeType: (codeType /\ _)} code = do
let mCodeOverlayEl = toMaybe $ R.readRef codeOverlayElRef
let mCodeOverlayEl = toMaybe $ R.readRef codeOverlayElRef
...
...
src/Gargantext/Utils/Reactix.purs
View file @
31851ae1
...
@@ -3,7 +3,6 @@ module Gargantext.Utils.Reactix where
...
@@ -3,7 +3,6 @@ module Gargantext.Utils.Reactix where
import Prelude
import Prelude
import DOM.Simple as DOM
import DOM.Simple as DOM
import DOM.Simple.Console (log2)
import DOM.Simple.Document (document)
import DOM.Simple.Document (document)
import DOM.Simple.Element as Element
import DOM.Simple.Element as Element
import DOM.Simple.Event as DE
import DOM.Simple.Event as DE
...
@@ -21,7 +20,7 @@ import Effect (Effect)
...
@@ -21,7 +20,7 @@ import Effect (Effect)
import Effect.Aff (Aff, launchAff, launchAff_, killFiber)
import Effect.Aff (Aff, launchAff, launchAff_, killFiber)
import Effect.Class (liftEffect)
import Effect.Class (liftEffect)
import Effect.Exception (error)
import Effect.Exception (error)
import Effect.Uncurried (EffectFn1, mkEffectFn1, mkEffectFn2, runEffectFn1)
import Effect.Uncurried (EffectFn1, mkEffectFn1, mkEffectFn2, runEffectFn1
, EffectFn2, runEffectFn2
)
import Effect.Unsafe (unsafePerformEffect)
import Effect.Unsafe (unsafePerformEffect)
import FFI.Simple ((..), (...), defineProperty, delay, args2, args3)
import FFI.Simple ((..), (...), defineProperty, delay, args2, args3)
import Partial.Unsafe (unsafePartial)
import Partial.Unsafe (unsafePartial)
...
@@ -196,8 +195,6 @@ appendChild n c = delay unit $ \_ -> pure $ n ... "appendChild" $ [c]
...
@@ -196,8 +195,6 @@ appendChild n c = delay unit $ \_ -> pure $ n ... "appendChild" $ [c]
appendChildToParentId :: forall c. IsNode c => String -> c -> Effect Unit
appendChildToParentId :: forall c. IsNode c => String -> c -> Effect Unit
appendChildToParentId ps c = delay unit $ \_ -> do
appendChildToParentId ps c = delay unit $ \_ -> do
parentEl <- getElementById ps
parentEl <- getElementById ps
log2 "[appendChildToParentId] ps" ps
log2 "[appendChildToParentId] parentEl" parentEl
case parentEl of
case parentEl of
Nothing -> pure unit
Nothing -> pure unit
Just el -> appendChild el c
Just el -> appendChild el c
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment