hera_cms 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 59772e5b5e2184b62826db82401b6cca00739bdf9bc35388893ae081d4908793
-  data.tar.gz: bc2eb8324e8fd527e5002f1c23060e863effa81ed341859f06faa884014bee69
+  metadata.gz: 5aa9efe0f53f57f3455978481d5b469a58b470f651db6c9b9de10167bdd6910e
+  data.tar.gz: b5ed7cb6d61b33f38d40448a12737ccc95aa577f240f2970872edd95de9814e2
 SHA512:
-  metadata.gz: cc0bce2b2b970264219687acfe7767fb344513404192811df7366f51ca0c05993ac39e4baad8b6342e6b429b7904308a45880c761e3d95961a1ebc8244e9ae64
-  data.tar.gz: 3c4608285ef81aec585c542f23755cf7c0f0dc342591077ee394fae576ddbf18038d16d8cf05cb0d4eacde69b880396e328e4357ffbc0f59bf3464a388ff2319
+  metadata.gz: 6f1d9b6b41a4e272cb4df3e1a84aba88d10ec26f10458c42206f12af256c7db0451642e0767720d6eb1d5e0ffffc56bf77feef62b9a498526c41102ba568e1ed
+  data.tar.gz: '0798a46a9aa7ed5d8dd557e1cd37a82be450d17fbc852cacf89fa4071248a396672376581d3120f1ed12ea84f51c966490a1222f2318f8028c84772037a6687f'

data/README.md

@@ -1,13 +1,7 @@
----- STILL IN DEVELOPMENT ----
----- If you want to contribute, feel free to open an issue or contact me at rayan@hortatech.com.br ----
-
 # HeraCms
 
 Hera aims to enable you to easily add Content Managment to your Rails projects, with a very friendly user interface.
 
-## Usage
-We use some tables to store the editable content of your website, in order for it to be updatable dynamically by the website owner.
-
 ## Installation
 
 1. Add this line to your application's Gemfile:
@@ -16,13 +10,13 @@ gem 'hera_cms'
 ```
 2. Execute:
 ```bash
-$ bundle
+bundle
 ```
 
 3. The Hera Installer will generate some migrations, that you need to run:
 ```bash
-$ rails hera_cms:install
-$ rails db:migrate
+rails g hera_cms:install
+rails db:migrate
 ```
 
 ## Configuration
@@ -60,8 +54,91 @@ Then, you need to add the Hera navbar to your layout. Here is also highly recomm
 
 ```
 
+## Usage
+We use hera_cms tables to store the editable content of your website, in order for it to be updatable dynamically by the website owner.
+
+There are 3 types of editable content you can use: Links, Texts and Images
+
+### Links
+
+To add an editable link to the view, you first need to create it in the rails console
+
+```ruby
+# rails console
+pry(main)> HeraCms::Link.create(identifier: 'home-link-main', inner_text: "HortaTech", path: 'https://www.hortatech.com.br')
+
+```
+
+Then you can just add it to the view using the Hera Link Helper, passing the correct identifier
+
+```erb
+<!-- app/views/pages/home.html.erb  -->
+<!-- ... -->
+
+<%= hera_link 'home-link-main' %>
+
+<!-- ... -->
+
+```
+
+Alternatively, you can create links passing a block, similar to the link_to rails helper
+
+```erb
+<!-- app/views/pages/home.html.erb  -->
+<!-- ... -->
+
+<%= hera_link 'home-link-main', class: 'main-link' do %>
+  <div class="card">
+    <p>Lorem ipsum</p>
+  </div>
+<% end %>
+
+<!-- ... -->
+
+```
+
+
+### Texts
+
+To add an editable text to the view, it is exactly like addings links. You first need to create it in the rails console
+
+```ruby
+# rails console
+pry(main)> HeraCms::Text.create(identifier: 'home-description', inner_text: "These are not the droids you're looking for")
+
+```
+
+Then you can just add it to the view using the Hera Text Helper, passing the correct identifier
+
+```erb
+<!-- app/views/pages/home.html.erb  -->
+<!-- ... -->
+
+<%= hera_text 'home-description', html_tag: :p %>
+
+<!-- ... -->
+
+```
+
+### Images
+
+Coming soon...
+
+## Production Database
+
+In order to facilitate you not have to duplicate all of your created records from development to production, we use a YAML file to store all record's information from development, located at db/hera_cms/hera_database_seed.yml
+
+After you finish developing your application and want to build it in production, you can just run this command in production to replicate your created Hera Links, Texts and Images to your production database
+
+```bash
+rails hera_cms:populate_database
+```
+
 ## Contributing
-Contribution directions go here.
+
+---- GEM STILL IN DEVELOPMENT ----
+
+If you want to contribute, feel free to open an issue or contact me at rayan@hortatech.com.br
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/javascripts/hera_cms/application.js

@@ -1 +1,310 @@
-// Hera edit JS is located at app/views/hera_cms/shared/_hera_edit.js
+// console.log('Loading Hera CMS Javascript');
+
+let editables = document.querySelectorAll('.hera-editable')
+
+const AUTH_TOKEN = document.querySelector('meta[name=csrf-token]').attributes['content'].value;
+
+const allowEdit = () => {
+  // Add listeners for all editables [edit mode]
+  editables.forEach((editable) => {
+    editable.addEventListener('mouseenter', displayEditor);
+    editable.addEventListener('mouseleave', hideEditor);
+  });
+};
+
+const lockEdit = () => {
+  // Remove listeners for all editables [view mode]
+  editables.forEach((editable) => {
+    editable.removeEventListener('mouseenter', displayEditor);
+    editable.removeEventListener('mouseleave', hideEditor);
+  });
+};
+
+const toggleOff = () => {
+  // Remove open forms and remove highlights that could be still active [switching from edit to view mode]
+  let formBox = document.querySelector(".hera-form-box");
+  if(formBox){
+    formBox.parentNode.removeChild(formBox);
+  };
+
+  editables.forEach((editable) => {
+    if (editable.classList.contains('hera-highlight-layer')){
+      editable.classList.remove('hera-highlight-layer');
+    }
+  });
+  // Swap wrapper with editable one (?)
+  let wrapper = document.querySelector('.hera-editable-wrapper');
+  if(wrapper){
+    wrapper.parentNode.replaceChild(wrapper.firstChild, wrapper);
+  };
+};
+
+
+const toggleEditLoader = (e) => {
+  // Select all editable elements on the page
+  editables = document.querySelectorAll('.hera-editable')
+
+  // Switches between Edit Mode and View mode
+  // In edit mode, all editable links, texts and images need the following:
+    // 1. One edit button that appears on hover
+    // 2. When you click it, it opens a form that enables you to change the value of the content
+  // This events can only exist on edit mode. On view mode nothing happens.
+
+  const button = e.target;
+  if (button.dataset["mode"] === "edit") {
+    // console.log('Switching to view mode');
+    button.innerText = "Off"
+    button.dataset["mode"] = "view"
+    button.classList.toggle("hera-edit-button-on");
+    toggleOff();
+
+    const layer = document.querySelector(".hera-background-layer");
+    document.body.removeChild(layer);
+    // const slickerLayer = document.querySelector(".slicker-layer");
+    // const slider = document.querySelector('.slick-track');
+    // slider.removeChild(slickerLayer);
+    lockEdit();
+  }
+  else if (button.dataset["mode"] === "view") {
+    // console.log('Switching to edit mode');
+    button.innerText = "On"
+    button.classList.toggle("hera-edit-button-on");
+    button.dataset["mode"] = "edit"
+    const layer = document.createElement("div");
+    layer.classList.add('hera-background-layer');
+    // const slickerLayer = document.createElement("div");
+    // slickerLayer.classList.add('hera-slicker-layer');
+    // const slider = document.querySelector('.slick-track');
+    // slider.appendChild(slickerLayer);
+    document.body.appendChild(layer);
+    allowEdit();
+  }
+}
+
+const displayEditor = (e) => {
+  // Shows the edit button for an element
+  // highlith the field to be edited
+  e.target.classList.add('hera-highlight-layer');
+  e.target.addEventListener('click', createForm);
+}
+
+const hideEditor = (e) => {
+  // Removes the edit button for an element
+  // remove highlighted field
+  e.target.classList.remove('hera-highlight-layer');
+  e.target.removeEventListener('click', createForm);
+}
+
+const sendRequest = (e) => {
+  e.preventDefault();
+  form = e.target;
+
+  let url = form.action + "?&authenticity_token=" + encodeURIComponent(AUTH_TOKEN);
+
+  options = {
+    method: "PUT",
+    body: new FormData(form)
+  };
+
+  // console.log("fetching");
+  fetch(url, options)
+  .then(response => response.json())
+  .then((data) => {
+    window.location.replace(data.redirect);
+  });
+
+  // console.log('end');
+}
+
+const createForm = (e) => {
+  // Create a form to update the content of element in the database, using its dataset
+
+  // Prevent the link click when clicks on the form, and the default form behavior
+  e.stopImmediatePropagation();
+  e.preventDefault();
+  e.target.removeEventListener('click', createForm);
+  lockEdit();
+
+  // Selects the element to be edited
+  const editable = e.currentTarget
+
+  // Creates the base form using rails autenthicity token
+  let form = document.createElement("form");
+
+  // Updates the form action to the proper element update route, using the datase
+  form.action = `/hera_cms/${editable.dataset['editableType']}/${editable.dataset['editableId']}`;
+
+  form.enctype = 'multipart/form-data';
+
+  // Add a hidden input field to properly utilize the PATCH method
+
+  let i = document.createElement("input");
+  i.setAttribute('type', "hidden");
+  i.setAttribute('name', "_method");
+  i.setAttribute('value', 'patch');
+
+  form.appendChild(i);
+
+  // Add the proper inputs for each type of editable
+
+  switch (editable.dataset['editableType']) {
+    case 'links':
+      form = linkForm(form, editable);
+      break;
+    case 'media_index':
+      form = imageForm(form, editable);
+      break;
+    case 'texts':
+      form = textForm(form, editable);
+      break;
+    case 'forms':
+       form = formForm(form, editable);
+       break;
+    default:
+      console.log(`Tipo ${editable.dataset['editableType']} não identificado.`)
+  }
+
+  // Add form submit button
+  let s = document.createElement("input");
+  s.setAttribute('type', "submit");
+  s.setAttribute('value', "Atualizar");
+
+  form.appendChild(s);
+
+  // Add editable wrapper with form inside
+  let wrapper = document.createElement("div");
+  wrapper.className = "hera-editable-wrapper " + editable.className;
+  editable.parentNode.insertBefore(wrapper ,editable);
+
+  wrappedEditable = wrapper.appendChild(editable);
+
+  // Creates and initializes the modal
+  let formBox = document.createElement('div');
+  formBox.classList.add("hera-form-box");
+  formBox.appendChild(form);
+  wrapper.appendChild(formBox);
+  let boxPositionY = wrapper.getBoundingClientRect().top + 150;
+  let boxPositionX = wrapper.getBoundingClientRect().left + 150;
+  let screenHeight = window.screen.height;
+  let screenWidth = window.screen.width;
+  let relativeY = (boxPositionY / screenHeight) * screenHeight;
+  let relativeX = boxPositionX / screenWidth * screenWidth;
+
+  if(relativeX > screenWidth / 2){
+    formBox.style.left = "-308px";
+  }else{
+    formBox.style.right = "-308px";
+  };
+  if(relativeY > screenHeight / 2){
+    formBox.style.top = "-150px";
+  }else{
+    formBox.style.bottom = "-150px";
+  };
+  wrappedEditable.removeEventListener('mouseenter', displayEditor);
+  wrappedEditable.removeEventListener('mouseleave', hideEditor);
+
+  // Adds button to destroy wrapper and the form
+  let destroyButton = document.createElement("p");
+  destroyButton.className = "form-destroy";
+  destroyButton.innerHTML = "x";
+  destroyButton.addEventListener('click', () => {
+    if (wrapper.parentNode) {
+      newEditable = wrapper.parentNode.replaceChild(editable, wrapper);
+      wrapper.removeChild(formBox);
+      editable.classList.remove('hera-highlight-layer');
+      bodyLayer.classList.remove('hera-clickable');
+      allowEdit();
+    }
+  });
+
+
+  let bodyLayer = document.querySelector('.hera-background-layer');
+  bodyLayer.classList.add('hera-clickable');
+  bodyLayer.addEventListener('click', () => {
+    destroyButton.click();
+  });
+
+  form.appendChild(destroyButton);
+  form.addEventListener('submit', sendRequest);
+}
+
+const linkForm = (form, editable) => {
+
+  // Creates text input for the content of the element and appends it to the form
+  pathInput = document.createElement("input");
+  pathInput.setAttribute('type', "text");
+  pathInput.setAttribute('name', "link[path]");
+  pathInput.setAttribute('autocomplete', "off");
+  pathInput.setAttribute('value', editable);
+
+  form.appendChild(pathInput);
+
+  // Creates text input for the content of the element and appends it to the form
+  innerTextInput = document.createElement("input");
+  innerTextInput.setAttribute('type', "text");
+  innerTextInput.setAttribute('name', "link[inner_text]");
+  innerTextInput.setAttribute('autocomplete', "off");
+  innerTextInput.innerHTML = editable.innerText;
+  innerTextInput.setAttribute('value', editable.innerText);
+
+  form.appendChild(innerTextInput);
+  return form;
+}
+
+const imageForm = (form, editable) => {
+
+  // Creates text input for the content of the element and appends it to the form
+  i = document.createElement("input");
+  i.setAttribute('type', "file");
+  i.setAttribute('name', "media[upload]");
+
+  form.appendChild(i);
+
+  i = document.createElement("input");
+  i.setAttribute('type', "hidden");
+  i.setAttribute('name', "media[upload_cache]");
+
+  form.appendChild(i);
+
+  return form;
+}
+
+const textForm = (form, editable) => {
+
+  // Creates text input for the content of the element and appends it to the form
+  i = document.createElement("textarea");
+  i.setAttribute('type', "text");
+  i.setAttribute('name', "text[inner_text]");
+  i.setAttribute('autocomplete', "off");
+  i.innerHTML = editable.innerText;
+  i.setAttribute('value', editable.innerText);
+
+  form.appendChild(i);
+
+  return form;
+}
+
+const formForm = (form, editable) => {
+  i = document.createElement("input");
+  i.setAttribute('type', "text");
+  i.setAttribute('name', "form[send_to]");
+  i.setAttribute('value', editable.getAttribute("data-mail"))
+  form.appendChild(i)
+  return form
+}
+
+
+const createElementFromHTML = (htmlString) => {
+  // Creates a node element from a HTML string
+  const div = document.createElement('div');
+  div.innerHTML = htmlString.trim();
+
+  return div.firstChild;
+}
+
+
+// Selects the view's edit button and adds listener to toggle between edit and view mode
+const editButton = document.getElementById('hera-edit-button');
+if (editButton) {
+  editButton.addEventListener('click', toggleEditLoader)
+}

data/app/models/hera_cms/application_record.rb

@@ -1,6 +1,8 @@
 module HeraCms
   class ApplicationRecord < ActiveRecord::Base
     self.abstract_class = true
+    before_save :update_seed
+
     def self.identify(identifier)
       self.find_by(identifier: identifier)
     end

data/app/models/hera_cms/image.rb

@@ -2,6 +2,5 @@ module HeraCms
   class Image < ApplicationRecord
     validates :identifier, presence: true, uniqueness: true
 
-    before_save :update_seed
   end
 end

data/app/models/hera_cms/link.rb

@@ -3,6 +3,5 @@ module HeraCms
     validates :identifier, presence: true, uniqueness: true
     validates :path, presence: true
 
-    before_save :update_seed
   end
 end

data/app/models/hera_cms/text.rb

@@ -2,6 +2,5 @@ module HeraCms
   class Text < ApplicationRecord
     validates :identifier, presence: true, uniqueness: true
 
-    before_save :update_seed
   end
 end

data/app/views/hera_cms/dashboard/home.html.erb

@@ -3,4 +3,8 @@
 
 <h1>Hello Hera CMS Engine</h1>
 
+
+
+
+
 <%= hera_link "my-link" %>

data/app/views/hera_cms/shared/_navbar.html.erb

@@ -8,6 +8,4 @@
   </div>
 </div>
 
-<%= javascript_tag do %>
-  <%= render(partial: 'hera_cms/shared/hera_edit', handlers: [], formats: [:js]) %>
-<% end %>
+<%= javascript_include_tag "hera_cms/application" %>

data/lib/generators/hera_cms/install_generator.rb

@@ -11,7 +11,7 @@ module HeraCms
       end
 
       def copy_config
-        template "config.rb", "config/hera.rb"
+        template "config.rb", "config/initializers/hera.rb"
       end
 
       def migration_version

data/lib/generators/hera_cms/templates/install.rb.tt

@@ -28,11 +28,5 @@ class <%= migration_class_name %> < ActiveRecord::Migration<%= migration_version
 
       t.timestamps
     end
-
-    create_table :hera_cms_forms do |t|
-      t.string :send_to
-
-      t.timestamps
-    end
   end
 end

data/lib/hera_cms.rb

@@ -12,9 +12,10 @@ module HeraCms
 
   # mattr_accessor :app_root
 
-  # class << self
-  #   attr_accessor :s3_bucket
-  # end
+  class << self
+    # attr_accessor :s3_bucket
+    attr_accessor :image_upload, :upload_service
+  end
 
   # Yield self on setup for nice config blocks
   def self.setup

data/lib/hera_cms/version.rb

@@ -1,3 +1,3 @@
 module HeraCms
-  VERSION = '0.2.0'
+  VERSION = '0.3.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hera_cms
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Rayan Castro
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-02-22 00:00:00.000000000 Z
+date: 2021-02-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -160,7 +160,6 @@ files:
 - app/models/hera_cms/text.rb
 - app/views/hera_cms/dashboard/home.html.erb
 - app/views/hera_cms/layouts/hera_cms/application.html.erb
-- app/views/hera_cms/shared/_hera_edit.js
 - app/views/hera_cms/shared/_navbar.html.erb
 - app/views/layouts/hera_cms/application.html.erb
 - config/routes.rb

data/app/views/hera_cms/shared/_hera_edit.js

@@ -1,312 +0,0 @@
-console.log('Hera CMS Javascript ON :)');
-
-let editables = document.querySelectorAll('.hera-editable')
-
-const AUTH_TOKEN = document.querySelector('meta[name=csrf-token]').attributes['content'].value;
-
-const allowEdit = () => {
-  // Add listeners for all editables [edit mode]
-  editables.forEach((editable) => {
-    editable.addEventListener('mouseenter', displayEditor);
-    editable.addEventListener('mouseleave', hideEditor);
-  });
-};
-
-const lockEdit = () => {
-  // Remove listeners for all editables [view mode]
-  editables.forEach((editable) => {
-    editable.removeEventListener('mouseenter', displayEditor);
-    editable.removeEventListener('mouseleave', hideEditor);
-  });
-};
-
-const toggleOff = () => {
-  // Remove open forms and remove highlights that could be still active [switching from edit to view mode]
-  let formBox = document.querySelector(".hera-form-box");
-  if(formBox){
-    formBox.parentNode.removeChild(formBox);
-  };
-
-  editables.forEach((editable) => {
-    if (editable.classList.contains('hera-highlight-layer')){
-      editable.classList.remove('hera-highlight-layer');
-    }
-  });
-  // Swap wrapper with editable one (?)
-  let wrapper = document.querySelector('.hera-editable-wrapper');
-  if(wrapper){
-    wrapper.parentNode.replaceChild(wrapper.firstChild, wrapper);
-  };
-};
-
-
-const toggleEditLoader = (e) => {
-  // Select all editable elements on the page
-  editables = document.querySelectorAll('.hera-editable')
-
-  // Switches between Edit Mode and View mode
-  // In edit mode, all editable links, texts and images need the following:
-    // 1. One edit button that appears on hover
-    // 2. When you click it, it opens a form that enables you to change the value of the content
-  // This events can only exist on edit mode. On view mode nothing happens.
-
-  const button = e.target;
-  if (button.dataset["mode"] === "edit") {
-    console.log('Switching to view mode');
-    button.innerText = "Off"
-    button.dataset["mode"] = "view"
-    button.classList.toggle("hera-edit-button-on");
-    toggleOff();
-
-    const layer = document.querySelector(".hera-background-layer");
-    document.body.removeChild(layer);
-    // const slickerLayer = document.querySelector(".slicker-layer");
-    // const slider = document.querySelector('.slick-track');
-    // slider.removeChild(slickerLayer);
-    lockEdit();
-  }
-  else if (button.dataset["mode"] === "view") {
-    console.log('Switching to edit mode');
-    button.innerText = "On"
-    button.classList.toggle("hera-edit-button-on");
-    button.dataset["mode"] = "edit"
-    const layer = document.createElement("div");
-    layer.classList.add('hera-background-layer');
-    // const slickerLayer = document.createElement("div");
-    // slickerLayer.classList.add('hera-slicker-layer');
-    // const slider = document.querySelector('.slick-track');
-    // slider.appendChild(slickerLayer);
-    document.body.appendChild(layer);
-    allowEdit();
-  }
-}
-
-const displayEditor = (e) => {
-  // Shows the edit button for an element
-  // highlith the field to be edited
-  e.target.classList.add('hera-highlight-layer');
-  e.target.addEventListener('click', createForm);
-}
-
-const hideEditor = (e) => {
-  // Removes the edit button for an element
-  // remove highlighted field
-  e.target.classList.remove('hera-highlight-layer');
-  e.target.removeEventListener('click', createForm);
-}
-
-const sendRequest = (e) => {
-  e.preventDefault();
-  form = e.target;
-
-  let url = form.action + "?&authenticity_token=" + encodeURIComponent(AUTH_TOKEN);
-
-  options = {
-    method: "PUT",
-    body: new FormData(form)
-  };
-
-  console.log("fetching");
-  fetch(url, options)
-  .then(response => response.json())
-  .then((data) => {
-    window.location.replace(data.redirect);
-  });
-
-  console.log('end');
-}
-
-const createForm = (e) => {
-  // Create a form to update the content of element in the database, using its dataset
-
-  // Prevent the link click when clicks on the form, and the default form behavior
-  e.stopImmediatePropagation();
-  e.preventDefault();
-  e.target.removeEventListener('click', createForm);
-  lockEdit();
-
-  // Selects the element to be edited
-  const editable = e.currentTarget
-
-  // Creates the base form using rails autenthicity token
-  let form = document.createElement("form");
-
-  // Updates the form action to the proper element update route, using the datase
-  form.action = `/hera_cms/${editable.dataset['editableType']}/${editable.dataset['editableId']}`;
-
-  form.enctype = 'multipart/form-data';
-
-  // Add a hidden input field to properly utilize the PATCH method
-
-  let i = document.createElement("input");
-  i.setAttribute('type', "hidden");
-  i.setAttribute('name', "_method");
-  i.setAttribute('value', 'patch');
-
-  form.appendChild(i);
-
-  // Add the proper inputs for each type of editable
-
-  switch (editable.dataset['editableType']) {
-    case 'links':
-      form = linkForm(form, editable);
-      break;
-    case 'media_index':
-      form = imageForm(form, editable);
-      break;
-    case 'texts':
-      form = textForm(form, editable);
-      break;
-    case 'forms':
-       form = formForm(form, editable);
-       break;
-    default:
-      console.log(`Tipo ${editable.dataset['editableType']} não identificado.`)
-  }
-
-  // Add form submit button
-  let s = document.createElement("input");
-  s.setAttribute('type', "submit");
-  s.setAttribute('value', "Atualizar");
-
-  form.appendChild(s);
-
-  // Add editable wrapper with form inside
-  let wrapper = document.createElement("div");
-  wrapper.className = "hera-editable-wrapper " + editable.className;
-  editable.parentNode.insertBefore(wrapper ,editable);
-
-  wrappedEditable = wrapper.appendChild(editable);
-
-  // Creates and initializes the modal
-  let formBox = document.createElement('div');
-  formBox.classList.add("hera-form-box");
-  formBox.appendChild(form);
-  wrapper.appendChild(formBox);
-  let boxPositionY = wrapper.getBoundingClientRect().top + 150;
-  let boxPositionX = wrapper.getBoundingClientRect().left + 150;
-  let screenHeight = window.screen.height;
-  let screenWidth = window.screen.width;
-  let relativeY = (boxPositionY / screenHeight) * screenHeight;
-  let relativeX = boxPositionX / screenWidth * screenWidth;
-
-  if(relativeX > screenWidth / 2){
-    formBox.style.left = "-308px";
-  }else{
-    formBox.style.right = "-308px";
-  };
-  if(relativeY > screenHeight / 2){
-    formBox.style.top = "-150px";
-  }else{
-    formBox.style.bottom = "-150px";
-  };
-  wrappedEditable.removeEventListener('mouseenter', displayEditor);
-  wrappedEditable.removeEventListener('mouseleave', hideEditor);
-
-  // Adds button to destroy wrapper and the form
-  let destroyButton = document.createElement("p");
-  destroyButton.className = "form-destroy";
-  destroyButton.innerHTML = "x";
-  destroyButton.addEventListener('click', () => {
-    if (wrapper.parentNode) {
-      newEditable = wrapper.parentNode.replaceChild(editable, wrapper);
-      wrapper.removeChild(formBox);
-      editable.classList.remove('hera-highlight-layer');
-      bodyLayer.classList.remove('hera-clickable');
-      allowEdit();
-    }
-  });
-
-
-  let bodyLayer = document.querySelector('.hera-background-layer');
-  bodyLayer.classList.add('hera-clickable');
-  bodyLayer.addEventListener('click', () => {
-    destroyButton.click();
-  });
-
-  form.appendChild(destroyButton);
-  form.addEventListener('submit', sendRequest);
-}
-
-const linkForm = (form, editable) => {
-
-  // Creates text input for the content of the element and appends it to the form
-  pathInput = document.createElement("input");
-  pathInput.setAttribute('type', "text");
-  pathInput.setAttribute('name', "link[path]");
-  pathInput.setAttribute('autocomplete', "off");
-  pathInput.setAttribute('value', editable);
-
-  form.appendChild(pathInput);
-
-  // Creates text input for the content of the element and appends it to the form
-  innerTextInput = document.createElement("input");
-  innerTextInput.setAttribute('type', "text");
-  innerTextInput.setAttribute('name', "link[inner_text]");
-  innerTextInput.setAttribute('autocomplete', "off");
-  innerTextInput.innerHTML = editable.innerText;
-  innerTextInput.setAttribute('value', editable.innerText);
-
-  form.appendChild(innerTextInput);
-  return form;
-}
-
-const imageForm = (form, editable) => {
-
-  // Creates text input for the content of the element and appends it to the form
-  i = document.createElement("input");
-  i.setAttribute('type', "file");
-  i.setAttribute('name', "media[upload]");
-
-  form.appendChild(i);
-
-  i = document.createElement("input");
-  i.setAttribute('type', "hidden");
-  i.setAttribute('name', "media[upload_cache]");
-
-  form.appendChild(i);
-
-  return form;
-}
-
-const textForm = (form, editable) => {
-
-  // Creates text input for the content of the element and appends it to the form
-  i = document.createElement("textarea");
-  i.setAttribute('type', "text");
-  i.setAttribute('name', "text[inner_text]");
-  i.setAttribute('autocomplete', "off");
-  i.innerHTML = editable.innerText;
-  i.setAttribute('value', editable.innerText);
-
-  form.appendChild(i);
-
-  return form;
-}
-
-const formForm = (form, editable) => {
-  console.log(editable)
-  console.log(form)
-  i = document.createElement("input");
-  i.setAttribute('type', "text");
-  i.setAttribute('name', "form[send_to]");
-  i.setAttribute('value', editable.getAttribute("data-mail"))
-  form.appendChild(i)
-  return form
-}
-
-
-const createElementFromHTML = (htmlString) => {
-  // Creates a node element from a HTML string
-  const div = document.createElement('div');
-  div.innerHTML = htmlString.trim();
-
-  return div.firstChild;
-}
-
-
-// Selects the view's edit button and adds listener to toggle between edit and view mode
-const editButton = document.getElementById('hera-edit-button');
-if (editButton) {
-  editButton.addEventListener('click', toggleEditLoader)
-}