modal == bien

Makefile

@@ -37,7 +37,7 @@ main.js: main.bundle.js
 	$(Q)npx babel --minified main.bundle.js -o main.js
 
 
-main.bundle.js: client/index.ls client/authd.ls client/bulma.ls client/project.ls client/task.ls client/todowebsocket.ls  
+main.bundle.js: client/index.ls client/authd.ls client/bulma.ls client/modal.ls client/project.ls client/task.ls client/todowebsocket.ls  
 	@echo '  BUN >   main.bundle.js'
 	$(Q)npx browserify -t browserify-livescript client/index.ls -o main.bundle.js
 
@@ -118,6 +118,7 @@ $(PACKAGE)-$(VERSION).tar.gz: distdir
 		$(PACKAGE)-$(VERSION)/client/style.sass \
 		$(PACKAGE)-$(VERSION)/client/authd.ls \
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
+		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/project.ls \
 		$(PACKAGE)-$(VERSION)/client/task.ls \
 		$(PACKAGE)-$(VERSION)/client/todowebsocket.ls
@@ -131,6 +132,7 @@ $(PACKAGE)-$(VERSION).tar.xz: distdir
 		$(PACKAGE)-$(VERSION)/client/style.sass \
 		$(PACKAGE)-$(VERSION)/client/authd.ls \
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
+		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/project.ls \
 		$(PACKAGE)-$(VERSION)/client/task.ls \
 		$(PACKAGE)-$(VERSION)/client/todowebsocket.ls
@@ -144,6 +146,7 @@ $(PACKAGE)-$(VERSION).tar.bz2: distdir
 		$(PACKAGE)-$(VERSION)/client/style.sass \
 		$(PACKAGE)-$(VERSION)/client/authd.ls \
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
+		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/project.ls \
 		$(PACKAGE)-$(VERSION)/client/task.ls \
 		$(PACKAGE)-$(VERSION)/client/todowebsocket.ls

client/bulma.ls

@@ -29,46 +29,5 @@ module.exports = {
 			action: url
 			method: method
 		}, content
-
-	asking-modal: (model, args, content) ->
-		console.log "Rendering a modal: ", args, content
-		is-active = (if model.current-modal == true then \.is-active else "")
-		h \div.modal + is-active, args, [
-			h \div.modal-background (args.background || [])
-
-			h \div.modal-content {} [
-				content
-
-				h \hr []
-
-				h \div.columns {} [
-					h \div.column {} [
-						h \button.button.is-success.is-fullwidth {
-							onclick: ->
-								model.current-modal := false
-						} [
-							h \span.icon.has-text-success [ h \i.fas.fa-check-square [] ]
-						]
-					]
-					h \div.column {} [
-						# h \button.button.is-warning.is-fullwidth {
-						# 	onclick: ->
-						# 		model.current-modal := false
-						# } [
-						# 	h \span.icon.has-text-danger [ h \i.fas.fa-ban [] ]
-						# ]
-						h \span.icon.has-text-danger {
-							onclick: ->
-								model.current-modal := false
-						} [ h \i.fas.fa-ban [] ]
-					]
-				]
-				h \button.button.modal-close {
-					aria-label: "close"
-					onclick: ->
-						model.current-modal := false
-				} []
-			]
-		]
 }
 

client/index.ls

@@ -40,6 +40,7 @@ todows   = require "./todowebsocket.ls"
 bulma    = require "./bulma.ls"
 Task     = require "./task.ls"
 Project  = require "./project.ls"
+Modal    = require "./modal.ls"
 
 {create-projector, h} = maquette
 projector = create-projector!
@@ -79,6 +80,9 @@ model = {
 	jwt: undefined
 }
 
+# TODO XXX FIXME
+model.modal = Modal {+visible}
+
 model.authd-url =
 	(if location.protocol == 'https' then 'wss' else 'ws') +
 	'://' + location.hostname + \: +
@@ -266,7 +270,8 @@ render-body = ->
 
 				console.log "rendering a modal"
 				# bulma.asking-modal model, {}, [ (h \button.button {} [ "rendering a modal" ]) ]
-				bulma.asking-modal model, {}, [ "rendering a modal !!" ]
+				if model.modal
+					model.modal.render!
 
 				render-new-project-button!
 			]

client/modal.ls

@@ -0,0 +1,62 @@
+
+h = require 'maquette' .h
+
+# formulaire création de listes
+# formulaire création de tâches
+# confirmation de suppression de listes, de tâches, de colonnes
+
+Modal = (args) ->
+	self = {}
+
+	self.modal-args = args.modal-args || {}
+	self.visible = args.visible || false
+	self.content = args.content || []
+	self.background-args = args.background-args || []
+	self.on-validation = args.on-validation || ->
+	self.on-cancellation = args.on-cancellation || ->
+	self.validation-label = args.validation-label || "Ok"
+	self.cancellation-label = args.cancellation-label || "Cancel"
+
+	self.render = ->
+		console.log "Rendering a modal: ", self, self.content
+
+		is-active = (if self.visible == true then \.is-active else "")
+		h \div.modal + is-active, self.modal-args, [
+			h \div.modal-background self.background-args
+
+			h \div.modal-content {} [
+				h \div.box [
+					self.content
+
+					h \hr []
+
+					h \div.columns {} [
+						h \div.column {} [
+							h \button.button.is-fullwidth {
+								onclick: ->
+									self.visible := false
+									self.on-validation self
+							} [ self.validation-label ]
+						]
+						h \div.column {} [
+							h \button.button.is-fullwidth {
+								onclick: ->
+									self.visible := false
+									self.on-cancellation self
+							} [ self.cancellation-label ]
+						]
+					]
+				]
+
+				h \button.button.modal-close {
+					aria-label: "close"
+					onclick: ->
+						self.visible := false
+						self.on-cancellation self
+				} []
+			]
+		]
+
+	self
+
+module.exports = Modal

client/style.sass

@@ -7,7 +7,7 @@
 
 @import "../node_modules/bulmaswatch/superhero/_overrides.scss"
 
-.columns
+.project>.columns
     overflow-x: scroll
 
 .avatar