Merge pull request #37 from synrc/disabled-sortable-list

Disabled sortable list

include/sortable_item.hrl

@@ -2,6 +2,6 @@
 -define(SORTABLE_ITEM_NX_HRL, true).
 
 -include_lib("nitro/include/nitro.hrl").
--record(sortable_item, {?ELEMENT_BASE(element_sortable_item), list_id, value, closeable}).
+-record(sortable_item, {?ELEMENT_BASE(element_sortable_item), list_id, value, closeable, disabled}).
 
 -endif.

include/sortable_list.hrl

@@ -2,6 +2,6 @@
 -define(SORTABLE_LIST_NX_HRL, true).
 
 -include_lib("nitro/include/nitro.hrl").
--record(sortable_list, {?ELEMENT_BASE(element_sortable_list), values, closeable}).
+-record(sortable_list, {?ELEMENT_BASE(element_sortable_list), values, closeable, disabled}).
 
 -endif.

mix.exs

@@ -4,7 +4,7 @@ defmodule NITRO.Mixfile do
   def project do
     [
       app: :nitro,
-      version: "4.12.4",
+      version: "4.12.5",
       description: "NITRO Nitrogen Web Framework",
       package: package(),
       deps: deps()

priv/js/sortable.js

@@ -38,12 +38,10 @@ function () {
       if (e.type === 'mousedown' && e.which !== 1) return;
       if (e.type === 'touchstart' && e.touches.length > 1) return;
       this.handle = null;
-      this.close = null;
       var el = e.target;
 
       while (el) {
         if (el.hasAttribute('data-sortable-handle')) this.handle = el;
-        if (el.hasAttribute('data-sortable-close')) this.close = el;
         if (el.hasAttribute('data-sortable-item')) this.item = el;
         if (el.hasAttribute('data-sortable-list')) break;
         el = el.parentElement;
@@ -167,7 +165,7 @@ function () {
       var template = document.createElement('template');
       template.innerHTML =
       '<div class="list__item" data-sortable-item="data-sortable-item" style="">'+
-        '<div class="list__item-close" onclick="removeSortableItem(\'#' + this.list.id + '\', this.parentNode);" data-sortable-close="data-sortable-close"></div>'+
+        '<div class="list__item-close" onclick="removeSortableItem(\'#' + this.list.id + '\', this.parentNode);"></div>'+
         '<div class="list__item-content">'+
           '<div class="list__item-title">' + value + '</div>'+
         '</div>'+
@@ -209,4 +207,4 @@ function getSortableValues(list) {
   } else {
     return Array.from([]);
   }
-}
+}

src/elements/combo/element_sortable_item.erl

@@ -4,35 +4,31 @@
 -include_lib("nitro/include/event.hrl").
 -export([render_element/1]).
 
-render_element(#sortable_item{list_id = ListId, value = Value, closeable = Close}) ->
-  nitro:render(#panel{
-                class = <<"list__item">>,
-                data_fields = [{<<"data-sortable-item">>,<<"data-sortable-item">>}],
-                body = [
-                  case Close of
-                    true -> 
-                      #panel{
-                        class = <<"list__item-close">>,
-                        onclick = nitro:jse("removeSortableItem('#" ++ ListId ++ "', this.parentNode);"),
-                        data_fields = [{<<"data-sortable-close">>,<<"data-sortable-close">>}]
-                      };
-                    _ ->
-                      #panel{
-                        style = <<"position:relative;width:40px">>
-                      }
-                    end,
-                  #panel{
-                    class = <<"list__item-content">>,
-                    body = [
-                      #panel{
-                        class = <<"list__item-title">>,
-                        body = Value
-                      }
-                    ]
-                  },
-                  #panel{
-                    class = <<"list__item-handle">>,
-                    data_fields = [{<<"data-sortable-handle">>,<<"data-sortable-handle">>}]
-                  }
-                ]
-              }).
+render_element(#sortable_item{list_id = ListId, value = Value, closeable = Close, disabled = Disabled}) ->
+  Item = case Disabled of
+              true ->
+                #panel{
+                  class = <<"list__item">>,
+                  body = #panel{
+                      class = <<"list__item-content">>,
+                      style = <<"width:100%">>,
+                      body = #panel{ class = <<"list__item-title">>, body = Value}}};
+              _ ->
+                #panel{
+                  class = <<"list__item">>,
+                  data_fields = [{<<"data-sortable-item">>,<<"data-sortable-item">>}],
+                  body = [
+                    case Close of
+                      true -> 
+                        #panel{
+                          class = <<"list__item-close">>,
+                          onclick = nitro:jse("removeSortableItem('#" ++ ListId ++ "', this.parentNode);")};
+                      _ -> [] end,
+                    #panel{
+                      class = <<"list__item-content">>,
+                      style = case Close of true -> []; _ -> <<"width:100% - 40px">> end,
+                      body = #panel{ class = <<"list__item-title">>, body = Value}},
+                    #panel{
+                      class = <<"list__item-handle">>,
+                      data_fields = [{<<"data-sortable-handle">>,<<"data-sortable-handle">>}]}]} end,
+  nitro:render(Item).

src/elements/combo/element_sortable_list.erl

@@ -5,10 +5,21 @@
 -include_lib("nitro/include/event.hrl").
 -export([render_element/1]).
 
-render_element(#sortable_list{id=Id, values = Values, closeable = Close}) ->
-  nitro:wire("createSortable('#" ++ Id ++ "');"),
+render_element(#sortable_list{id=Id, values = Values, closeable = Close, disabled = Disabled}) ->
+  case Disabled of
+    true ->
+      Closeable = false;
+    _ ->
+      nitro:wire("createSortable('#" ++ Id ++ "');"),
+      Closeable = Close end,
+  
   nitro:render(
     #panel{
       id = Id,
       data_fields = [{<<"data-sortable-list">>, <<"data-sortable-list">>}],
-      body = [#sortable_item{list_id = Id, value = Val, closeable = Close} || Val <- Values]}).
+      body = [#sortable_item{
+                list_id = Id,
+                value = Val,
+                closeable = Closeable,
+                disabled = Disabled
+              } || Val <- Values]}).

src/nitro.app.src

@@ -1,6 +1,6 @@
 {application, nitro, [
     {description,  "NITRO Nitrogen Web Framework"},
-    {vsn,          "4.12.4"},
+    {vsn,          "4.12.5"},
     {applications, [kernel, stdlib]},
     {modules, []},
     {registered,   []},