From a2b2a04faf49ef0334d1b740a83ba876c3176029 Mon Sep 17 00:00:00 2001 From: Ingo Richtsmeier Date: Sun, 13 Jan 2019 23:52:12 +0100 Subject: [PATCH] style button and rename for "Preview Form" (single one) --- .../README.md | 4 +- .../GeneratedFormPreviewPluginProvider.js | 2 +- .../client/client-bundle.js | 559 +++++++++--------- .../style/style.css | 6 + 4 files changed, 288 insertions(+), 283 deletions(-) diff --git a/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/README.md b/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/README.md index e4ff07dbdc..d37816fc8c 100644 --- a/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/README.md +++ b/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/README.md @@ -1,6 +1,6 @@ # Camunda Modeler Plugin - UserTask Generated Form Preview and Embedded Form Generator -This plugin adds a 'Preview Forms' Button to all BPMN User Tasks in the Camunda Modeler Properties Panel. +This plugin adds a 'Preview Form' Button to all BPMN User Tasks in the Camunda Modeler Properties Panel. Once you click on this button a overlay with show you a preview of your form that has been defined as form fields in the UserTask Forms Tab. It shows you how the form will look like in the default Camunda Tasklist. Besides just giving you a preview, this plugin automatically generates HTML source code that you will need to create an embedded form for your UserTask. @@ -17,6 +17,6 @@ So this plugin is the perfect fit if you often start with simple generated form Put the whole directory including subdirectories into the `plugins` directory of the Camunda Modeler and you're ready to go. -Model a UserTask and check in the Forms Tab if you are seeing the "Preview Forms" button. +Model a UserTask and check in the Forms Tab if you are seeing the "Preview Form" button. If you're interested in how to create your own plugins see the [documentation](https://github.com/camunda/camunda-modeler/tree/547-plugins/docs/plugins) and this [example](https://github.com/camunda/camunda-modeler-plugin-example). diff --git a/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/client/GeneratedFormPreviewPluginProvider.js b/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/client/GeneratedFormPreviewPluginProvider.js index 1a0812ebae..93523d3fd5 100644 --- a/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/client/GeneratedFormPreviewPluginProvider.js +++ b/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/client/GeneratedFormPreviewPluginProvider.js @@ -37,7 +37,7 @@ GeneratedFormPreviewPluginProvider.prototype.getFormsTab = function(formsTab) { var self = this; if (formsTab.groups.length > 0 && formsTab.groups[0].entries.length > 0) { formsTab.groups[0].entries.splice(2, 0, { - html: "", + html: "", id: "form-fields-generate-button", openPreview: function(element, node) { var formFields = formHelper.getFormFields(element); diff --git a/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/client/client-bundle.js b/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/client/client-bundle.js index dba67ff4c2..33b7e41ca5 100644 --- a/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/client/client-bundle.js +++ b/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/client/client-bundle.js @@ -1,284 +1,283 @@ (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i 0) { - var newFormsTab = this.getFormsTab(formsTab[0]); - array[formIndex] = newFormsTab; - } - return array; - }; -}; - - - -GeneratedFormPreviewPluginProvider.prototype.getFormsTab = function(formsTab) { - var self = this; - if (formsTab.groups.length > 0 && formsTab.groups[0].entries.length > 0) { - formsTab.groups[0].entries.splice(2, 0, { - html: "", - id: "form-fields-generate-button", - openPreview: function(element, node) { - var formFields = formHelper.getFormFields(element); - console.log(formFields); - if (formFields != null) { - self.generateHTML(formFields); - } - } - }); - } - return formsTab; -}; - -GeneratedFormPreviewPluginProvider.prototype.generateHTML = function(formFields) { - var self = this; - var fullHtml = ''; - var source = ''; - formFields.forEach(function(formField) { - if (formField.type != null) { - fullHtml += self.generateHTMLSnippet(formField); - source += self.generateSource(formField); - } - }); - var fullSource = `
-

Hint: You can just copy and paste this source into your embedded form.

- - -
`; - var tabPanel = `
-
- - -
-
-
- ${fullHtml} -
-
-
- ${fullSource} -
-
`; - var domHtml = domify(tabPanel); - swal({ - text: "Generated Forms", - content: domHtml - }); - var tablinks = document.querySelectorAll(".tablinks"); - tablinks.forEach(function(tablink) { - tablink.addEventListener("click", function(event) { - var id = event.target.getAttribute("data-id"); - self.openTab(event, id); - }); - }); - tablinks[0].click(); - var copybutton = document.querySelector("#copytext"); - copybutton.addEventListener('click', function() { - var text = document.querySelector("#copytextarea").value; - copy(text); - }); -}; - -GeneratedFormPreviewPluginProvider.prototype.openTab = function(evt, tabName) { - - // Declare all variables - var i, tabcontent, tablinks; - - // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("tabcontent"); - for (i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; - } - - // Get all elements with class="tablinks" and remove the class "active" - tablinks = document.getElementsByClassName("tablinks"); - for (i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" active", ""); - } - - // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "block"; - evt.currentTarget.className += " active"; -} - -GeneratedFormPreviewPluginProvider.prototype.generateSource = function(formField) { - switch (formField.type) { - case 'string': - return `
- - -
`; - break; - case 'long': - return `
- - -
`; - break; - case 'boolean': - return `
- - -
`; - break; - case 'date': - return `
- -

- - - - - -

- -
`; - break; - case 'enum': - var options = ''; - if (formField.values && formField.values.length > 0) { - formField.values.forEach(function(value) { - options += ``; - }); - } - - return `
- -
`; - break; - default: - return ''; - - } -}; - -GeneratedFormPreviewPluginProvider.prototype.generateHTMLSnippet = function(formField) { - switch (formField.type) { - case 'string': - return `
- - -
`; - break; - case 'long': - return `
- - -
`; - break; - case 'boolean': - return `
- - -
`; - break; - case 'date': - return `
- - -
`; - break; - case 'enum': - var options = ''; - if (formField.values && formField.values.length > 0) { - formField.values.forEach(function(value) { - options += ``; - }); - } - - return `
- -
`; - break; - default: - return ''; - - } -}; - - -GeneratedFormPreviewPlugin.$inject = ['eventBus', 'elementRegistry', 'bpmnFactory', 'elementTemplates', 'translate']; - -function GeneratedFormPreviewPlugin() { - -}; - -module.exports = { - __init__: ['generatedFormPreviewPlugin'], - propertiesProvider: ['type', GeneratedFormPreviewPluginProvider], - generatedFormPreviewPlugin: ['type', GeneratedFormPreviewPlugin] -}; +'use strict'; + +var domify = require('min-dom/lib/domify'), + domEvent = require('min-dom/lib/event'), + domClasses = require('min-dom/lib/classes'), + domQuery = require('min-dom/lib/query'), + clear = require('min-dom/lib/clear'); +var PropertiesActivator = require('bpmn-js-properties-panel/lib/PropertiesActivator'); +var CamundaPropertiesProvider = require('bpmn-js-properties-panel/lib/provider/camunda/CamundaPropertiesProvider'); +var formHelper = require('bpmn-js-properties-panel/lib/helper/FormHelper'); +var swal = require('sweetalert'); +var copy = require('clipboard-copy'); + +function GeneratedFormPreviewPluginProvider(eventBus, elementRegistry, bpmnFactory, elementTemplates, translate) { + var camunda = new CamundaPropertiesProvider(eventBus, bpmnFactory, elementRegistry, elementTemplates, translate); + + this.getTabs = function(element) { + var array = camunda.getTabs(element); + var formIndex; + var formsTab = array.filter(function(item, index) { + if (item.id == 'forms') { + formIndex = index; + return true; + } + }); + if (formsTab.length > 0) { + var newFormsTab = this.getFormsTab(formsTab[0]); + array[formIndex] = newFormsTab; + } + return array; + }; +}; + + + +GeneratedFormPreviewPluginProvider.prototype.getFormsTab = function(formsTab) { + var self = this; + if (formsTab.groups.length > 0 && formsTab.groups[0].entries.length > 0) { + formsTab.groups[0].entries.splice(2, 0, { + html: "", + id: "form-fields-generate-button", + openPreview: function(element, node) { + var formFields = formHelper.getFormFields(element); + if (formFields != null) { + self.generateHTML(formFields); + } + } + }); + } + return formsTab; +}; + +GeneratedFormPreviewPluginProvider.prototype.generateHTML = function(formFields) { + var self = this; + var fullHtml = ''; + var source = ''; + formFields.forEach(function(formField) { + if (formField.type != null) { + fullHtml += self.generateHTMLSnippet(formField); + source += self.generateSource(formField); + } + }); + var fullSource = `
+

Hint: You can just copy and paste this source into your embedded form.

+ + +
`; + var tabPanel = `
+
+ + +
+
+
+ ${fullHtml} +
+
+
+ ${fullSource} +
+
`; + var domHtml = domify(tabPanel); + swal({ + text: "Generated Forms", + content: domHtml + }); + var tablinks = document.querySelectorAll(".tablinks"); + tablinks.forEach(function(tablink) { + tablink.addEventListener("click", function(event) { + var id = event.target.getAttribute("data-id"); + self.openTab(event, id); + }); + }); + tablinks[0].click(); + var copybutton = document.querySelector("#copytext"); + copybutton.addEventListener('click', function() { + var text = document.querySelector("#copytextarea").value; + copy(text); + }); +}; + +GeneratedFormPreviewPluginProvider.prototype.openTab = function(evt, tabName) { + + // Declare all variables + var i, tabcontent, tablinks; + + // Get all elements with class="tabcontent" and hide them + tabcontent = document.getElementsByClassName("tabcontent"); + for (i = 0; i < tabcontent.length; i++) { + tabcontent[i].style.display = "none"; + } + + // Get all elements with class="tablinks" and remove the class "active" + tablinks = document.getElementsByClassName("tablinks"); + for (i = 0; i < tablinks.length; i++) { + tablinks[i].className = tablinks[i].className.replace(" active", ""); + } + + // Show the current tab, and add an "active" class to the button that opened the tab + document.getElementById(tabName).style.display = "block"; + evt.currentTarget.className += " active"; +} + +GeneratedFormPreviewPluginProvider.prototype.generateSource = function(formField) { + switch (formField.type) { + case 'string': + return `
+ + +
`; + break; + case 'long': + return `
+ + +
`; + break; + case 'boolean': + return `
+ + +
`; + break; + case 'date': + return `
+ +

+ + + + + +

+ +
`; + break; + case 'enum': + var options = ''; + if (formField.values && formField.values.length > 0) { + formField.values.forEach(function(value) { + options += ``; + }); + } + + return `
+ +
`; + break; + default: + return ''; + + } +}; + +GeneratedFormPreviewPluginProvider.prototype.generateHTMLSnippet = function(formField) { + switch (formField.type) { + case 'string': + return `
+ + +
`; + break; + case 'long': + return `
+ + +
`; + break; + case 'boolean': + return `
+ + +
`; + break; + case 'date': + return `
+ + +
`; + break; + case 'enum': + var options = ''; + if (formField.values && formField.values.length > 0) { + formField.values.forEach(function(value) { + options += ``; + }); + } + + return `
+ +
`; + break; + default: + return ''; + + } +}; + + +GeneratedFormPreviewPlugin.$inject = ['eventBus', 'elementRegistry', 'bpmnFactory', 'elementTemplates', 'translate']; + +function GeneratedFormPreviewPlugin() { + +}; + +module.exports = { + __init__: ['generatedFormPreviewPlugin'], + propertiesProvider: ['type', GeneratedFormPreviewPluginProvider], + generatedFormPreviewPlugin: ['type', GeneratedFormPreviewPlugin] +}; },{"bpmn-js-properties-panel/lib/PropertiesActivator":3,"bpmn-js-properties-panel/lib/helper/FormHelper":21,"bpmn-js-properties-panel/lib/provider/camunda/CamundaPropertiesProvider":42,"clipboard-copy":286,"min-dom/lib/classes":347,"min-dom/lib/clear":348,"min-dom/lib/domify":349,"min-dom/lib/event":350,"min-dom/lib/query":351,"sweetalert":354}],2:[function(require,module,exports){ var registerBpmnJSPlugin = require('camunda-modeler-plugin-helpers').registerBpmnJSPlugin; diff --git a/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/style/style.css b/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/style/style.css index 252726c35f..c5d5fddda1 100644 --- a/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/style/style.css +++ b/snippets/camunda-modeler-plugins/camunda-modeler-plugin-usertask-generatedform-preview/style/style.css @@ -1,5 +1,11 @@ @import "bootstrap.min.css"; +/* Style the Preview Button */ +button.preview-button { + position: relative; + width: 100px; +} + /* Style the tab */ .tab { overflow: hidden;