decidim-assemblies 0.24.3 → 0.25.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7780d892e6468fdd163051447390c4edbb84d9cb4f2e38e6a634e30fc987961f
-  data.tar.gz: d48fc9be1cf5acae50f06da3aad41b52333964efa0dfe3e85a1301c7dad11fca
+  metadata.gz: dccd4227a991494f21e7140b9cc73637a5101ef72f067c02ec3f158f14f2f1b9
+  data.tar.gz: 22fb5a987f077d84b3f3ad579a5b1bd6ce299ed695e9ae3d4c22444700bb9050
 SHA512:
-  metadata.gz: ea12b06eadcdbfb3ac279f061ec8b6d0c5226391bae29347c3b0810b7b658df808451ec794a2f3c5269786244f566fb2215bf27bf7db2967b4f9bc7d923c6cdc
-  data.tar.gz: e368d64d4232e808fe80646ee00f7df8719d54379dacbe89da6c79d446a7567390b43f0ff7358580f7179085a2bab039124e0f339ee020e078900d9959ecb674
+  metadata.gz: 0db6b26a03e997a08cde11975ce77340664655d7501f056885f8cc0484fa1a4b5f31f1b2f18656bacc9f15cf094839afe03e25d605b0e77c2b805778a1b07e2b
+  data.tar.gz: 00bf4f2c1965414698ab705e3096e3fd0e696ba4a09702fe760e96462d2b020869daa2c0b64d5aea2462b6ec5b2d95235d420b1064f1268546be9386dc023542

data/app/cells/decidim/assemblies/assembly_m_cell.rb

@@ -27,7 +27,7 @@ module Decidim
       end
 
       def resource_image_path
-        model.hero_image.url
+        model.attached_uploader(:hero_image).path
       end
 
       def statuses

data/app/cells/decidim/assemblies/assembly_member/show.erb

@@ -24,7 +24,7 @@
                   <% end %>
                 </div>
               <% else %>
-                <div class="author__avatar"><%= image_tag asset_path("decidim/default-avatar.svg"), alt: "member-avatar" %></div>
+                <div class="author__avatar"><%= image_tag asset_pack_path("media/images/default-avatar.svg"), alt: "member-avatar" %></div>
                 <div>
                   <div class="author__name--container">
                     <div class="author__name">

data/app/cells/decidim/assemblies/content_blocks/highlighted_assemblies/show.erb

@@ -8,7 +8,7 @@
           <div class="column">
             <%= link_to decidim_assemblies.assembly_path(assembly), class: "card card--assembly card--mini" do %>
               <div aria-hidden="true" class="card__image-top"
-                style="background-image:url(<%= assembly.hero_image.url %>)"></div>
+                style="background-image:url(<%= assembly.attached_uploader(:hero_image).path %>)"></div>
               <div class="card__content">
                 <span class="card__title card__link"><%= translated_attribute assembly.title %></span>
               </div>

data/app/commands/decidim/assemblies/admin/copy_assembly.rb

@@ -26,6 +26,7 @@ module Decidim
 
           Assembly.transaction do
             copy_assembly
+            copy_assembly_attachments
             copy_assembly_categories if @form.copy_categories?
             copy_assembly_components if @form.copy_components?
           end
@@ -46,8 +47,6 @@ module Decidim
             hashtag: @assembly.hashtag,
             description: @assembly.description,
             short_description: @assembly.short_description,
-            hero_image: @assembly.hero_image,
-            banner_image: @assembly.banner_image,
             promoted: @assembly.promoted,
             scope: @assembly.scope,
             parent: @assembly.parent,
@@ -57,10 +56,19 @@ module Decidim
             target: @assembly.target,
             participatory_scope: @assembly.participatory_scope,
             participatory_structure: @assembly.participatory_structure,
-            meta_scope: @assembly.meta_scope
+            meta_scope: @assembly.meta_scope,
+            announcement: @assembly.announcement
           )
         end
 
+        def copy_assembly_attachments
+          [:hero_image, :banner_image].each do |attribute|
+            next unless @assembly.attached_uploader(attribute).attached?
+
+            @copied_assembly.send(attribute).attach(@assembly.send(attribute).blob)
+          end
+        end
+
         def copy_assembly_categories
           @assembly.categories.each do |category|
             Category.create!(

data/app/commands/decidim/assemblies/admin/create_assembly.rb

@@ -82,7 +82,8 @@ module Decidim
             facebook_handler: form.facebook_handler,
             instagram_handler: form.instagram_handler,
             youtube_handler: form.youtube_handler,
-            github_handler: form.github_handler
+            github_handler: form.github_handler,
+            announcement: form.announcement
           )
         end
 

data/app/commands/decidim/assemblies/admin/create_assembly_member.rb

@@ -67,12 +67,16 @@ module Decidim
           )
         end
 
+        def followers
+          form.user.is_a?(Decidim::UserGroup) ? form.user.users : [form.user]
+        end
+
         def notify_assembly_member_about_new_membership
           data = {
             event: "decidim.events.assemblies.create_assembly_member",
             event_class: Decidim::Assemblies::CreateAssemblyMemberEvent,
             resource: assembly,
-            followers: [form.user]
+            followers: followers
           }
           Decidim::EventsManager.publish(data)
         end

data/app/commands/decidim/assemblies/admin/update_assembly.rb

@@ -6,6 +6,8 @@ module Decidim
       # A command with all the business logic when creating a new participatory
       # assembly in the system.
       class UpdateAssembly < Rectify::Command
+        include ::Decidim::AttachmentAttributesMethods
+
         # Public: Initializes the command.
         #
         # assembly - the Assembly to update
@@ -95,17 +97,11 @@ module Decidim
             instagram_handler: form.instagram_handler,
             youtube_handler: form.youtube_handler,
             github_handler: form.github_handler,
-            weight: form.weight
-          }.merge(uploader_attributes)
-        end
-
-        def uploader_attributes
-          {
-            hero_image: form.hero_image,
-            remove_hero_image: form.remove_hero_image,
-            banner_image: form.banner_image,
-            remove_banner_image: form.remove_banner_image
-          }.delete_if { |_k, val| val.is_a?(Decidim::ApplicationUploader) }
+            weight: form.weight,
+            announcement: form.announcement
+          }.merge(
+            attachment_attributes(:hero_image, :banner_image)
+          )
         end
 
         def participatory_processes(assembly)

data/app/controllers/decidim/assemblies/admin/assemblies_controller.rb

@@ -87,11 +87,7 @@ module Decidim
         end
 
         def assembly_params
-          {
-            id: params[:slug],
-            hero_image: current_assembly.hero_image,
-            banner_image: current_assembly.banner_image
-          }.merge(params[:assembly].to_unsafe_h)
+          { id: params[:slug] }.merge(params[:assembly].to_unsafe_h)
         end
       end
     end

data/app/forms/decidim/assemblies/admin/assembly_form.rb

@@ -30,6 +30,7 @@ module Decidim
         translatable_attribute :subtitle, String
         translatable_attribute :target, String
         translatable_attribute :title, String
+        translatable_attribute :announcement, String
 
         attribute :created_by, String
         attribute :facebook_handler, String
@@ -60,8 +61,8 @@ module Decidim
 
         attribute :banner_image
         attribute :hero_image
-        attribute :remove_banner_image
-        attribute :remove_hero_image
+        attribute :remove_banner_image, Boolean, default: false
+        attribute :remove_hero_image, Boolean, default: false
 
         validates :area, presence: true, if: proc { |object| object.area_id.present? }
 

data/app/forms/decidim/assemblies/admin/assembly_import_form.rb

@@ -8,6 +8,7 @@ module Decidim
       #
       class AssemblyImportForm < Form
         include TranslatableAttributes
+        include Decidim::HasUploadValidations
 
         JSON_MIME_TYPE = "application/json"
         # Accepted mime types

data/app/forms/decidim/assemblies/admin/assembly_member_form.rb

@@ -34,7 +34,7 @@ module Decidim
         end
 
         def user
-          @user ||= current_organization.users.find_by(id: user_id)
+          @user ||= current_organization.user_entities.find_by(id: user_id)
         end
 
         def positions_for_select

data/app/helpers/decidim/assemblies/admin/assemblies_admin_menu_helper.rb

@@ -4,11 +4,6 @@ module Decidim
   module Assemblies
     module Admin
       module AssembliesAdminMenuHelper
-        include Decidim::Admin::SidebarMenuHelper
-
-        def admin_assemblies_menu
-          @admin_assemblies_menu ||= sidebar_menu(:admin_assemblies_menu)
-        end
       end
     end
   end

data/app/models/decidim/assembly.rb

@@ -40,7 +40,7 @@ module Decidim
 
     translatable_fields :title, :subtitle, :short_description, :description, :developer_group, :meta_scope, :local_area,
                         :target, :participatory_scope, :participatory_structure, :purpose_of_action, :composition, :created_by_other,
-                        :closing_date_reason, :internal_organisation, :special_features
+                        :closing_date_reason, :internal_organisation, :special_features, :announcement
 
     belongs_to :organization,
                foreign_key: "decidim_organization_id",
@@ -69,11 +69,11 @@ module Decidim
     has_many :children, foreign_key: "parent_id", class_name: "Decidim::Assembly", inverse_of: :parent, dependent: :destroy
     belongs_to :parent, class_name: "Decidim::Assembly", inverse_of: :children, optional: true, counter_cache: :children_count
 
-    validates_upload :hero_image
-    mount_uploader :hero_image, Decidim::HeroImageUploader
+    has_one_attached :hero_image
+    validates_upload :hero_image, uploader: Decidim::HeroImageUploader
 
-    validates_upload :banner_image
-    mount_uploader :banner_image, Decidim::BannerImageUploader
+    has_one_attached :banner_image
+    validates_upload :banner_image, uploader: Decidim::BannerImageUploader
 
     validates :slug, uniqueness: { scope: :organization }
     validates :slug, presence: true, format: { with: Decidim::Assembly.slug_format }

data/app/models/decidim/assembly_member.rb

@@ -9,7 +9,7 @@ module Decidim
 
     POSITIONS = %w(president vice_president secretary other).freeze
 
-    belongs_to :user, foreign_key: "decidim_user_id", class_name: "Decidim::User", optional: true
+    belongs_to :user, foreign_key: "decidim_user_id", class_name: "Decidim::UserBaseEntity", optional: true
     belongs_to :assembly, foreign_key: "decidim_assembly_id", class_name: "Decidim::Assembly"
     alias participatory_space assembly
 

data/app/packs/entrypoints/decidim_assemblies.js

@@ -0,0 +1,5 @@
+import "src/decidim/assemblies/assemblies"
+import "src/decidim/assemblies/orgchart"
+
+// Images
+require.context("../images", true)

data/app/packs/entrypoints/decidim_assemblies_admin.js

@@ -0,0 +1,3 @@
+import "src/decidim/assemblies/admin/assemblies"
+import "src/decidim/assemblies/admin/assembly_members"
+import "src/decidim/slug_form"

data/app/packs/src/decidim/assemblies/admin/assemblies.js

@@ -0,0 +1,63 @@
+$(() => {
+  const $assemblyScopeEnabled = $("#assembly_scopes_enabled");
+  const $assemblyScopeId = $("#assembly_scope_id");
+
+  if ($(".edit_assembly, .new_assembly").length > 0) {
+    $assemblyScopeEnabled.on("change", (event) => {
+      const checked = event.target.checked;
+      window.theDataPicker.enabled($assemblyScopeId, checked);
+    })
+    window.theDataPicker.enabled($assemblyScopeId, $assemblyScopeEnabled.prop("checked"));
+  }
+
+  const $form = $(".assembly_form_admin");
+
+  if ($form.length > 0) {
+
+    const $privateSpace = $form.find("#private_space");
+    const $isTransparent = $form.find("#is_transparent");
+    const $specialFeatures = $form.find("#special_features");
+
+
+    const toggleDisabledHiddenFields = () => {
+      const enabledPrivateSpace = $privateSpace.find("input[type='checkbox']").prop("checked");
+      $isTransparent.find("input[type='checkbox']").attr("disabled", "disabled");
+      $specialFeatures.hide();
+
+      if (enabledPrivateSpace) {
+        $isTransparent.find("input[type='checkbox']").attr("disabled", !enabledPrivateSpace);
+        $specialFeatures.show();
+      }
+    };
+
+    $privateSpace.on("change", toggleDisabledHiddenFields);
+    toggleDisabledHiddenFields();
+
+    const $assemblyType = $form.find("#assembly_assembly_type");
+    const $assemblyTypeOther = $form.find("#assembly_type_other");
+
+    const $assemblyCreatedBy = $form.find("#assembly_created_by");
+    const $assemblyCreatedByOther = $form.find("#created_by_other");
+
+    const toggleDependsOnSelect = ($target, $showDiv) => {
+      const value = $target.val();
+      $showDiv.hide();
+      if (value === "others") {
+        $showDiv.show();
+      }
+    };
+
+    $assemblyType.on("change", (ev) => {
+      const $target = $(ev.target);
+      toggleDependsOnSelect($target, $assemblyTypeOther);
+    });
+
+    $assemblyCreatedBy.on("change", (ev) => {
+      const $target = $(ev.target);
+      toggleDependsOnSelect($target, $assemblyCreatedByOther);
+    });
+
+    toggleDependsOnSelect($assemblyType, $assemblyTypeOther);
+    toggleDependsOnSelect($assemblyCreatedBy, $assemblyCreatedByOther);
+  }
+});

data/app/{assets/javascripts/decidim/assemblies/admin/assembly_members.js.es6 → packs/src/decidim/assemblies/admin/assembly_members.js}

@@ -1,6 +1,6 @@
-((exports) => {
-  const { createFieldDependentInputs } = exports.DecidimAdmin;
+import createFieldDependentInputs from "src/decidim/admin/field_dependent_inputs.component"
 
+$(() => {
   const $assemblyMemberType = $("#assembly_member_existing_user");
 
   createFieldDependentInputs({
@@ -34,4 +34,4 @@
       return $field.val() === "other"
     }
   });
-})(window);
+})

data/app/packs/src/decidim/assemblies/assemblies.js

@@ -0,0 +1,14 @@
+$(() => {
+  $(".show-more").on("click", function() {
+    /* eslint-disable no-invalid-this */
+    $(this).hide();
+    $(".show-more-panel").removeClass("hide");
+    $(".hide-more").show();
+  });
+
+  $(".hide-more").on("click", function() {
+    $(this).hide();
+    $(".show-more-panel").addClass("hide");
+    $(".show-more").show();
+  });
+})

data/app/packs/src/decidim/assemblies/orgchart.js

@@ -0,0 +1,695 @@
+/* eslint-disable require-jsdoc, max-lines, no-return-assign, func-style, id-length, no-plusplus, no-use-before-define, no-negated-condition, init-declarations, no-invalid-this, no-param-reassign, no-ternary, multiline-ternary, no-nested-ternary, no-eval, no-extend-native, prefer-reflect */
+/* eslint dot-location: ["error", "property"], no-negated-condition: "error" */
+/* eslint no-unused-expressions: ["error", { "allowTernary": true }] */
+/* eslint no-unused-vars: 0 */
+/* global d3 */
+
+import * as d3 from "d3"
+import renderChart from "src/decidim/vizzs/renders"
+
+// lib
+const renderOrgCharts = () => {
+  const $orgChartContainer = $(".js-orgchart")
+  const $btnReset = $(".js-reset-orgchart")
+
+  let dataDepicted = null
+  let fake = false
+  let orgchart = {}
+
+  // lib - https://bl.ocks.org/bumbeishvili/b96ba47ea21d14dfce6ebb859b002d3a
+  const renderChartCollapsibleNetwork = (params) => {
+
+    // exposed variables
+    let attrs = {
+      id: `id${Math.floor(Math.random() * 1000000)}`,
+      svgWidth: 960,
+      svgHeight: 600,
+      marginTop: 0,
+      marginBottom: 5,
+      marginRight: 0,
+      marginLeft: 30,
+      container: "body",
+      distance: 150,
+      hiddenChildLevel: 1,
+      hoverOpacity: 0.2,
+      maxTextDisplayZoomLevel: 1,
+      lineStrokeWidth: 1.5,
+      fakeRoot: false,
+      nodeGutter: { x: 16, y: 8 },
+      childrenIndicatorRadius: 15,
+      fakeBorderWidth: 32,
+      data: null
+    }
+
+    /* ############### IF EXISTS OVERWRITE ATTRIBUTES FROM PASSED PARAM  #######  */
+
+    let attrKeys = Object.keys(attrs)
+    attrKeys.forEach(function (key) {
+      if (params && params[key]) {
+        attrs[key] = params[key]
+      }
+    })
+
+    // innerFunctions which will update visuals
+    let updateData
+    let collapse, expand
+    let filter
+    let hierarchy = {}
+
+    // main chart object
+    let main = function (selection) {
+      selection.each(function scope() {
+
+        // calculated properties
+        let calc = {}
+        calc.chartLeftMargin = attrs.marginLeft
+        calc.chartTopMargin = attrs.marginTop
+        calc.chartWidth = attrs.svgWidth - attrs.marginRight - calc.chartLeftMargin
+        calc.chartHeight = attrs.svgHeight - attrs.marginBottom - calc.chartTopMargin
+
+        // ########################## HIERARCHY STUFF  #########################
+        hierarchy.root = d3.hierarchy(attrs.data.root)
+
+        // ###########################   BEHAVIORS #########################
+        let behaviors = {}
+        // behaviors.zoom = d3.zoom().scaleExtent([0.75, 100, 8]).on("zoom", zoomed)
+        behaviors.drag = d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended)
+
+        // ###########################   LAYOUTS #########################
+        let layouts = {}
+
+        // custom radial layout
+        layouts.radial = radial()
+
+        // ###########################   FORCE STUFF #########################
+        let force = {}
+        force.link = d3.forceLink().id((d) => d.id)
+        force.charge = d3.forceManyBody().strength(-240)
+        force.center = d3.forceCenter(calc.chartWidth / 2, calc.chartHeight / 2)
+
+        // prevent collide
+        force.collide = d3.forceCollide().radius((d) => {
+          // Creates an invented radius based on element measures: diagonal = 2 * radius = sqrt(width^2, height^2)
+          let base = (d.bbox || {}).width + (attrs.nodeGutter.x * 2)
+          let height = (d.bbox || {}).height + (attrs.nodeGutter.y * 2)
+          let diagonal = Math.sqrt(Math.pow(base, 2) + Math.pow(height, 2))
+          let fakeRadius = (diagonal / 2)
+
+          // return d3.max([attrs.nodeDistance * 3, fakeRadius])
+          return fakeRadius * 1.5
+        })
+
+        // manually set x positions (which is calculated using custom radial layout)
+        force.x = d3.forceX()
+          .strength(0.5)
+          .x(function (d) {
+
+            // if node does not have children and is channel (depth=2) , then position it on parent's coordinate
+            if (!d.children && d.depth > 2) {
+              if (d.parent) {
+                d = d.parent
+              }
+            }
+
+            // custom circle projection -  radius will be -  (d.depth - 1) * 150
+            return projectCircle(d.proportion, (d.depth - 1) * attrs.distance)[0]
+          })
+
+        // manually set y positions (which is calculated using d3.cluster)
+        force.y = d3.forceY()
+          .strength(0.5)
+          .y(function (d) {
+
+            // if node does not have children and is channel (depth=2) , then position it on parent's coordinate
+            if (!d.children && d.depth > 2) {
+              if (d.parent) {
+                d = d.parent
+              }
+            }
+
+            // custom circle projection -  radius will be -  (d.depth - 1) * 150
+            return projectCircle(d.proportion, (d.depth - 1) * attrs.distance)[1]
+          })
+
+        // ---------------------------------  INITIALISE FORCE SIMULATION ----------------------------
+
+        // get based on top parameter simulation
+        force.simulation = d3.forceSimulation()
+          .force("link", force.link)
+          .force("charge", force.charge)
+          .force("center", force.center)
+          .force("collide", force.collide)
+          .force("x", force.x)
+          .force("y", force.y)
+
+        // ###########################   HIERARCHY STUFF #########################
+
+        // flatten root
+        let arr = flatten(hierarchy.root)
+
+        // hide members based on their depth
+        arr.forEach((d) => {
+          // Hide fake root node
+          if ((attrs.fakeRoot) && (d.depth === 1)) {
+            d.hidden = true
+          }
+
+          if (d.depth > attrs.hiddenChildLevel) {
+            d._children = d.children
+            d.children = null
+          }
+        })
+
+        // ####################################  DRAWINGS #######################
+
+        // drawing containers
+        let container = d3.select(this)
+
+        // add svg
+        let svg = container.patternify({ tag: "svg", selector: "svg-chart-container" })
+          .attr("width", attrs.svgWidth)
+          .attr("height", attrs.svgHeight)
+          // .call(behaviors.zoom)
+
+        // add container g element
+        let chart = svg.patternify({ tag: "g", selector: "chart" })
+          .attr("transform", `translate(${calc.chartLeftMargin},${calc.chartTopMargin})`)
+
+        // ################################   Chart Content Drawing ##################################
+
+        // link wrapper
+        let linksWrapper = chart.patternify({ tag: "g", selector: "links-wrapper" })
+
+        // node wrapper
+        let nodesWrapper = chart.patternify({ tag: "g", selector: "nodes-wrapper" })
+        let links, nodes
+
+        // reusable function which updates visual based on data change
+        update()
+
+        // update visual based on data change
+        function update(clickedNode) {
+
+          // Show/hide reset button
+          (clickedNode) ? $btnReset.removeClass("invisible") : $btnReset.addClass("invisible")
+
+          // set xy and proportion properties with custom radial layout
+          layouts.radial(hierarchy.root)
+
+          // nodes and links array
+          let nodesArr = flatten(hierarchy.root, true)
+            .orderBy((d) => d.depth)
+            .filter((d) => !d.hidden)
+
+          let linksArr = hierarchy.root.links()
+            .filter((d) => !d.source.hidden)
+            .filter((d) => !d.target.hidden)
+
+          // make new nodes to appear near the parents
+          nodesArr.forEach(function (d) {
+            if (clickedNode && clickedNode.id === (d.parent && d.parent.id)) {
+              d.x = d.parent.x
+              d.y = d.parent.y
+            }
+          })
+
+          // links
+          links = linksWrapper.selectAll(".link")
+            .data(linksArr, (d) => d.target.id)
+          links.exit().remove()
+
+          links = links.enter()
+            .append("line")
+            .attr("class", "link")
+            .merge(links)
+
+          // node groups
+          nodes = nodesWrapper.selectAll(".node")
+            .data(nodesArr, (d) => d.id)
+          nodes.exit().remove()
+
+          let enteredNodes = nodes.enter()
+            .append("g")
+            .attr("class", "node")
+
+          // bind event handlers
+          enteredNodes
+            .on("click", nodeClick)
+            .on("mouseenter", nodeMouseEnter)
+            .on("mouseleave", nodeMouseLeave)
+            .call(behaviors.drag)
+
+          // channels grandchildren
+          enteredNodes.append("rect")
+            .attr("class", "as-card")
+            .attr("rx", 4)
+            .attr("ry", 4)
+
+          enteredNodes.append("text")
+            .attr("class", "as-text")
+            .text((d) => d.data.name)
+
+          enteredNodes.selectAll("text").each(function(d) {
+            d.bbox = this.getBBox()
+          })
+
+          enteredNodes.selectAll("rect")
+            .attr("x", (d) => d.bbox.x - attrs.nodeGutter.x)
+            .attr("y", (d) => d.bbox.y - attrs.nodeGutter.y)
+            .attr("width", (d) => d.bbox.width + (2 * attrs.nodeGutter.x))
+            .attr("height", (d) => d.bbox.height + (2 * attrs.nodeGutter.y))
+
+          // append circle & text only when there are children
+          enteredNodes
+            .append("circle")
+            .filter((d) => Boolean(d.children) || Boolean(d._children))
+            .attr("class", "as-circle")
+            .attr("r", attrs.childrenIndicatorRadius)
+            .attr("cx", (d) => d.bbox.x + d.bbox.width + attrs.nodeGutter.x)
+            .attr("cy", (d) => d.bbox.y + d.bbox.height + attrs.nodeGutter.y)
+
+          enteredNodes
+            .append("text")
+            .filter((d) => Boolean(d.children) || Boolean(d._children))
+            .attr("class", "as-text")
+            .attr("dx", (d) => d.bbox.x + d.bbox.width + attrs.nodeGutter.x)
+            .attr("dy", attrs.childrenIndicatorRadius + 3)
+            .text((d) => d3.max([(d.children || {}).length, (d._children || {}).length]))
+
+          // merge  node groups and style it
+          nodes = enteredNodes.merge(nodes)
+
+          // force simulation
+          force.simulation.nodes(nodesArr).on("tick", ticked)
+
+          // links simulation
+          force.simulation.force("link").links(links).id((d) => d.id).distance(attrs.distance * 2).strength(2)
+        }
+
+        // ####################################### EVENT HANDLERS  ########################
+
+        // zoom handler
+        // function zoomed() {
+        //   // get transform event
+        //   let transform = d3.event.transform
+        //   attrs.lastTransform = transform
+        //
+        //   // apply transform event props to the wrapper
+        //   chart.attr("transform", transform)
+        //
+        //   svg.selectAll(".node").attr("transform", (d) => `translate(${d.x},${d.y}) scale(${1 / (attrs.lastTransform ? attrs.lastTransform.k : 1)})`)
+        //   svg.selectAll(".link").attr("stroke-width", attrs.lineStrokeWidth / (attrs.lastTransform ? attrs.lastTransform.k : 1))
+        // }
+
+        // tick handler
+        function ticked() {
+          const fakeBorderWidth = attrs.fakeBorderWidth
+          const maxXValueAvailable = (value) => Math.max(Math.min(calc.chartWidth - fakeBorderWidth, value), fakeBorderWidth)
+          const maxYValueAvailable = (value) => Math.max(Math.min(calc.chartHeight - fakeBorderWidth, value), fakeBorderWidth)
+          // set links position
+          links
+            .attr("x1", (d) => maxXValueAvailable(d.source.x))
+            .attr("y1", (d) => maxYValueAvailable(d.source.y))
+            .attr("x2", (d) => maxXValueAvailable(d.target.x))
+            .attr("y2", (d) => maxYValueAvailable(d.target.y))
+
+          // set nodes position
+          svg.selectAll(".node")
+            .attr("transform", (d) => `translate(${maxXValueAvailable(d.x)},${maxYValueAvailable(d.y)})`)
+        }
+
+        // handler drag start event
+        function dragstarted() {
+          // disable node fixing
+          nodes.each((d) => {
+            d.fx = null
+            d.fy = null
+          })
+        }
+
+        // handle dragging event
+        function dragged(d) {
+          // make dragged node fixed
+          d.fx = d3.event.x
+          d.fy = d3.event.y
+        }
+
+        // -------------------- handle drag end event ---------------
+        function dragended() {
+          // we are doing nothing, here , aren't we?
+        }
+
+        // -------------------------- node mouse hover handler ---------------
+        function nodeMouseEnter(d) {
+          // get links
+          let _links = hierarchy.root.links()
+
+          // get hovered node connected links
+          let connectedLinks = _links.filter((l) => l.source.id === d.id || l.target.id === d.id)
+
+          // get hovered node linked nodes
+          let linkedNodes = connectedLinks.map((s) => s.source.id).concat(connectedLinks.map((c) => c.target.id))
+
+          // reduce all other nodes opacity
+          nodesWrapper.selectAll(".node")
+            .filter((n) => linkedNodes.indexOf(n.id) === -1)
+            .attr("opacity", attrs.hoverOpacity)
+
+          // reduce all other links opacity
+          linksWrapper.selectAll(".link")
+            .attr("opacity", attrs.hoverOpacity)
+
+          // highlight hovered nodes connections
+          linksWrapper.selectAll(".link")
+            .filter((l) => l.source.id === d.id || l.target.id === d.id)
+            .attr("opacity", 1)
+        }
+
+        // --------------- handle mouseleave event ---------------
+        function nodeMouseLeave() {
+          // return things back to normal
+          nodesWrapper.selectAll(".node")
+            .attr("opacity", 1)
+          linksWrapper.selectAll(".link")
+            .attr("opacity", 1)
+        }
+
+        // --------------- handle node click event ---------------
+        function nodeClick(d) {
+          // free fixed nodes
+          nodes.each((di) => {
+            di.fx = null
+            di.fy = null
+          })
+
+          // collapse or expand node
+          if (d.children) {
+            collapse(d)
+          } else if (d._children) {
+            expand(d)
+          } else {
+          // nothing is to collapse or expand
+          }
+
+          freeNodes()
+        }
+
+        // #########################################  UTIL FUNCS ##################################
+        updateData = function () {
+          main.run()
+        }
+
+        collapse = function (d, deep = false) {
+          if (d.children) {
+            if (deep) {
+              d.children.forEach((e) => collapse(e, true))
+            }
+
+            d._children = d.children
+            d.children = null
+          }
+
+          update(d)
+          force.simulation.restart()
+          force.simulation.alphaTarget(0.15)
+        }
+
+        expand = function (d, deep = false) {
+          if (d._children) {
+            if (deep) {
+              d._children.forEach((e) => expand(e, true))
+            }
+
+            d.children = d._children
+            d._children = null
+          }
+
+          update(d)
+          force.simulation.restart()
+          force.simulation.alphaTarget(0.15)
+        }
+
+        // function slowDownNodes() {
+        //   force.simulation.alphaTarget(0.05)
+        // }
+
+        // function speedUpNodes() {
+        //   force.simulation.alphaTarget(0.45)
+        // }
+
+        function freeNodes() {
+          d3.selectAll(".node").each((n) => {
+            n.fx = null
+            n.fy = null
+          })
+        }
+
+        function projectCircle(value, radius) {
+          let r = radius || 0
+          let corner = value * 2 * Math.PI
+          return [Math.sin(corner) * r, -Math.cos(corner) * r]
+        }
+
+        // recursively loop on children and extract nodes as an array
+        function flatten(root, clustered) {
+          let nodesArray = []
+          let i = 0
+          function recurse(node, depth) {
+            if (node.children) {
+              node.children.forEach(function (child) {
+                recurse(child, depth + 1)
+              })
+            }
+
+            if (!node.id) {
+              node.id = ++i
+            } else {
+              ++i
+            }
+
+            node.depth = depth
+            if (clustered) {
+              if (!node.cluster) {
+              // if cluster coordinates are not set, set it
+                node.cluster = { x: node.x, y: node.y }
+              }
+            }
+            nodesArray.push(node)
+          }
+          recurse(root, 1)
+          return nodesArray
+        }
+
+        function debug() {
+          if (attrs.isDebug) {
+          // stringify func
+            let stringified = String(scope)
+
+            // parse variable names
+            let groupVariables = stringified
+              // match var x-xx= {}
+              .match(/var\s+([\w])+\s*=\s*{\s*}/gi)
+              // match xxx
+              .map((d) => d.match(/\s+\w*/gi).filter((s) => s.trim()))
+              // get xxx
+              .map((v) => v[0].trim())
+
+            // assign local variables to the scope
+            groupVariables.forEach((v) => {
+              main[`P_${v}`] = eval(v)
+            })
+          }
+        }
+
+        debug()
+
+      })
+    }
+
+    // ----------- PROTOTYEPE FUNCTIONS  ----------------------
+    d3.selection.prototype.patternify = function (_params) {
+      let selector = _params.selector
+      let elementTag = _params.tag
+      let _data = _params.data || [selector]
+
+      // pattern in action
+      let selection = this.selectAll(`.${selector}`).data(_data)
+      selection.exit().remove()
+      selection = selection.enter().append(elementTag).merge(selection)
+      selection.attr("class", selector)
+
+      return selection
+    }
+
+    // custom radial layout
+    function radial() {
+      return function (root) {
+
+        recurse(root, 0, 1)
+
+        function recurse(node, min, max) {
+          node.proportion = (max + min) / 2
+          if (!node.x) {
+
+            // if node has parent, match entered node positions to it's parent
+            if (node.parent) {
+              node.x = node.parent.x
+            } else {
+              node.x = 0
+            }
+          }
+
+          // if node had parent, match entered node positions to it's parent
+          if (!node.y) {
+            if (node.parent) {
+              node.y = node.parent.y
+            } else {
+              node.y = 0
+            }
+          }
+
+          // recursively do the same for children
+          if (node.children) {
+            let offset = (max - min) / node.children.length
+            node.children.forEach(function (child, i) {
+              let newMin = min + (offset * i)
+              let newMax = newMin + offset
+
+              recurse(child, newMin, newMax)
+            })
+          }
+        }
+      }
+    }
+
+    // https://github.com/bumbeishvili/d3js-boilerplates#orderby
+    Array.prototype.orderBy = function (func) {
+      this.sort((_a, _b) => {
+        let a = func(_a)
+        let b = func(_b)
+        if (typeof a === "string" || a instanceof String) {
+          return a.localeCompare(b)
+        }
+        return a - b
+      })
+
+      return this
+    }
+
+    // ##########################  BOILEPLATE STUFF ################
+
+    // dinamic keys functions
+    Object.keys(attrs).forEach((key) => {
+      // Attach variables to main function
+      return main[key] = function (_) {
+        let string = `attrs['${key}'] = _`
+
+        if (!arguments.length) {
+          return eval(` attrs['${key}'];`)
+        }
+
+        eval(string)
+
+        return main
+      }
+    })
+
+    // set attrs as property
+    main.attrs = attrs
+
+    // debugging visuals
+    main.debug = function (isDebug) {
+      attrs.isDebug = isDebug
+      if (isDebug) {
+        if (!window.charts) {
+          window.charts = []
+        }
+        window.charts.push(main)
+      }
+      return main
+    }
+
+    // exposed update functions
+    main.data = function (value) {
+      if (!arguments.length) {
+        return attrs.data
+      }
+
+      attrs.data = value
+      if (typeof updateData === "function") {
+        updateData()
+      }
+      return main
+    }
+
+    // run  visual
+    main.run = function () {
+      d3.selectAll(attrs.container)
+        .call(main)
+      return main
+    }
+
+    main.filter = function (filterParams) {
+      if (!arguments.length) {
+        return attrs.filterParams
+      }
+
+      attrs.filterParams = filterParams
+      if (typeof filter === "function") {
+        filter()
+      }
+      return main
+    }
+
+    main.reset = function () {
+
+      hierarchy.root.children.forEach((e) => collapse(e, true))
+      main.run()
+
+      return main
+    }
+
+    return main
+  }
+
+  // initialization
+  $orgChartContainer.each((i, container) => {
+
+    let $container = $(container)
+    let width = $container.width()
+    let height = width / (16 / 9)
+
+    d3.json($container.data("url")).then((data) => {
+      // Make a fake previous node if the data entry is not hierarchical
+      if (data instanceof Array) {
+        fake = true
+        dataDepicted = {
+          name: null,
+          children: data
+        }
+      } else {
+        dataDepicted = data
+      }
+
+      orgchart = renderChartCollapsibleNetwork()
+        .svgHeight(height)
+        .svgWidth(width)
+        .fakeRoot(fake)
+        .container(`#${container.id}`)
+        .data({
+          root: dataDepicted
+        })
+        .debug(true)
+        .run()
+    })
+  })
+
+  // reset
+  $btnReset.click(function() {
+    orgchart.reset()
+  })
+}
+
+$(() => {
+  renderChart(renderOrgCharts);
+})