add loadDataToBlock for handling markdown content and new block content

backstage/static/js/blockHandler.js

@@ -0,0 +1,105 @@
+function loadDataToBlock(blockArray, blockCount, blockData) {
+  blockData = blockData || {}
+  var dataIndex = 0;
+  const blockIndex = blockCount;
+  const {blockDiv, h, titleInput, inputButton, descButton, imgButton} = getBlockElements(contentDiv);
+  if (_.get(blockData, 'title')) {
+    loadTitleData(blockArray, blockIndex, h, _.get(blockData, 'title'));
+    for (var data of _.get(blockData, 'data', [])) {
+      if ('description' in data) {
+        const ownDataIndex = dataIndex;
+        dataIndex += 1;
+        const text = _.get(data, 'description.text');
+        handleDescButton(blockDiv, blockArray, blockIndex, ownDataIndex, text);
+      } else if ('image' in data) {
+        const ownDataIndex = dataIndex;
+        dataIndex += 1;
+        handleImgButton(blockDiv, blockArray, blockIndex, ownDataIndex, data);
+      }
+    }
+  }
+  inputButton.onclick = function() {
+    loadTitleData(blockArray, blockIndex, h, titleInput.value);
+  }
+  descButton.onclick = function() {
+    const ownDataIndex = dataIndex;
+    dataIndex += 1;
+    handleDescButton(blockDiv, blockArray, blockIndex, ownDataIndex);
+  }
+  imgButton.onclick = function() {
+    const ownDataIndex = dataIndex;
+    dataIndex += 1;
+    handleImgButton(blockDiv, blockArray, blockIndex, ownDataIndex);
+  }
+
+  blockCount += 1
+  return blockCount;
+}
+
+function loadTitleData(blockArray, blockIndex, h, text) {
+  if (isIndexExistInBlockArray(blockIndex, blockArray.length)) {
+    blockArray[blockIndex].title = text;
+    h.textContent = text;
+  } else {
+    blockArray[blockIndex] = {title: text, data: []};
+    h.textContent = text;
+  }
+}
+
+function handleDescButton(blockDiv, blockArray, blockIndex, dataIndex, text) {
+  const {p, descTextArea, descInputButton, descRemoveButton} = getdescElements(blockDiv);
+  if (text !== undefined) {
+    handleDescInputClick(p, text, blockArray, blockIndex, dataIndex);
+  }
+  descInputButton.onclick = function() {
+    handleDescInputClick(p, descTextArea.value, blockArray, blockIndex, dataIndex);
+  }
+  descRemoveButton.onclick = function() {
+    removeDescElement(p, descTextArea, descInputButton, descRemoveButton);
+    removeDescData(blockArray, blockIndex, dataIndex);
+  }
+}
+
+function handleDescInputClick(p, desc, blockArray, blockIndex, ownDataIndex) {
+  p.textContent = desc;
+  addDataToBlockArray({description: {text: desc + '\n'}}, blockArray, blockIndex, ownDataIndex)
+}
+
+function handleImgButton(blockDiv, blockArray, blockIndex, dataIndex, preImgObject) {
+  const {img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton} = getImgElements(blockDiv);
+  if (preImgObject !== undefined) {
+    handleImgInputClick(img, preImgObject, blockArray, blockIndex, dataIndex);
+  }
+  imgInputButton.onclick = function() {
+    const imgObject = {image: {src: 'img/' + imgInput.files[0].name,
+                               height: heightInput.value,
+                               width: widthInput.value,
+                               alt: 'image field',
+                               layout: 'responsive'}};
+    handleImgInputClick(img, imgObject, blockArray, blockIndex, dataIndex);
+  }
+  imgRemoveButton.onclick = function() {
+    removeImgElement(img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton);
+    removeImgData(blockArray, blockIndex, dataIndex, );
+  }
+}
+
+function handleImgInputClick(img, imgObject, blockArray, blockIndex, ownDataIndex) {
+  img.setAttribute('src', contentUrl() + _.get(imgObject, 'image.src'));
+  img.setAttribute('width', _.get(imgObject, 'image.width'));
+  img.setAttribute('height', _.get(imgObject, 'image.height'));
+  img.setAttribute('alt', _.get(imgObject, 'image.alt'));
+  addDataToBlockArray(imgObject, blockArray, blockIndex, ownDataIndex)
+}
+
+function addDataToBlockArray(dataObject, blockArray, blockIndex, dataIndex) {
+  if ('data' in blockArray[blockIndex]) {
+    blockArray[blockIndex].data[dataIndex] = dataObject
+  } else {
+    blockArray[blockIndex].data = [dataObject];
+  }
+}
+
+function isIndexExistInBlockArray(blockIndex, length) {
+  return blockIndex < length;
+}