add markdown support to cv section

This commit is contained in:
Xuan Sang LE 2018-02-21 00:20:54 +01:00
parent e909da8057
commit f0a2fac51a
3 changed files with 24 additions and 4 deletions

View File

@ -1,5 +1,6 @@
<afx-app-window data-id = "blogger-cv-sec-win" apptitle="Porforlio section" width="450" height="400"> <afx-app-window data-id = "blogger-cv-sec-win" apptitle="Porforlio section" width="450" height="400">
<afx-vbox > <afx-vbox >
<div data-height="5"></div>
<afx-hbox data-height = "30" > <afx-hbox data-height = "30" >
<afx-label data-width= "70" text = "Title*:"></afx-label> <afx-label data-width= "70" text = "Title*:"></afx-label>
<input type = "text" name="title" input-class = "user-input"/> <input type = "text" name="title" input-class = "user-input"/>
@ -19,8 +20,10 @@
<input type = "text" name="end" input-class = "user-input"/> <input type = "text" name="end" input-class = "user-input"/>
</afx-hbox> </afx-hbox>
<afx-label data-height = "30" text = "Content*:" style = "margin-left:5px;"/> <afx-label data-height = "30" text = "Content*:" style = "margin-left:5px;"/>
<textarea name="content" input-class = "user-input" style = "margin-left:5px; margin-right:5px;" /> <div data-id="editor-container">
<afx-hbox data-height = "30"> <textarea name="content" data-id = "contentarea" />
</div>
<afx-hbox data-height = "35">
<div></div> <div></div>
<afx-button iconclass = "fa fa-save" data-id = "bt-cv-sec-save" data-width="60" text = "Save"/> <afx-button iconclass = "fa fa-save" data-id = "bt-cv-sec-save" data-width="60" text = "Save"/>
</afx-hbox> </afx-hbox>

View File

@ -58,16 +58,32 @@ class BloggerCVSectionDiaglog extends this.OS.GUI.BaseDialog
main: () -> main: () ->
me = @ me = @
@scheme.set "apptitle", @title @scheme.set "apptitle", @title
@editor = new SimpleMDE
element: @find "contentarea"
status: false
toolbar: false
($ (@select '[class = "CodeMirror-scroll"]')[0]).css "min-height", "50px"
($ (@select '[class="CodeMirror cm-s-paper CodeMirror-wrap"]')[0]).css "min-height", "50px"
@on "vboxchange", () ->
me.resizeContent()
console.log "resize content"
inputs = me.select "[input-class='user-input']" inputs = me.select "[input-class='user-input']"
(($ v).val me.data[v.name] for v in inputs ) if me.data (($ v).val me.data[v.name] for v in inputs ) if me.data
@editor.value me.data.content if me.data and me.data.content
(@find "bt-cv-sec-save").set "onbtclick", (e) -> (@find "bt-cv-sec-save").set "onbtclick", (e) ->
data = {} data = {}
console.log inputs console.log inputs
data[v.name] = ($ v).val() for v in inputs data[v.name] = ($ v).val() for v in inputs
data.content = me.editor.value()
return me.notify "Title must not be blank" if data.title is "" return me.notify "Title must not be blank" if data.title is ""
return me.notify "Content must not be blank" if data.content is "" return me.notify "Content must not be blank" if data.content is ""
data.id = me.data.id if me.data and me.data.id data.id = me.data.id if me.data and me.data.id
me.handler data if me.handler me.handler data if me.handler
me.quit() me.quit()
me.resizeContent()
resizeContent: () ->
container = @find "editor-container"
children = ($ container).children()
cheight = ($ container).height() - 30
($ children[1]).css("height", cheight + "px")
this.OS.register "BloggerCVSectionDiaglog", BloggerCVSectionDiaglog this.OS.register "BloggerCVSectionDiaglog", BloggerCVSectionDiaglog

View File

@ -41,7 +41,8 @@ afx-app-window[data-id="blogger-win"] afx-hbox[data-id="cv-container"] afx-labe
} }
afx-app-window[data-id="blogger-cv-sec-win"] afx-hbox{ afx-app-window[data-id="blogger-cv-sec-win"] afx-hbox{
padding:5px; padding-left:5px;
padding-right:5px;
} }
afx-app-window[data-id="blogger-win"] afx-list-view[ data-id = "cv-sec-list"] > div.list-container > ul > li{ afx-app-window[data-id="blogger-win"] afx-list-view[ data-id = "cv-sec-list"] > div.list-container > ul > li{
padding-bottom: 10px; padding-bottom: 10px;