grych · grych · May 29, 2018 · May 29, 2018 · May 29, 2018 · May 29, 2018
diff --git a/lib/drab/element.ex b/lib/drab/element.ex
@@ -288,6 +288,21 @@ defmodule Drab.Element do
     set_prop!(socket, selector, %{"style" => Map.new(properties)})
   end
 
+  @doc """
+  Broadcasting version of `set_style/3`.
+
+  It does exactly the same as `set_style/3`, but instead of pushing the message to the current
+  browser, it broadcasts it to all connected users.
+
+  Always returns `{:ok, :broadcasted}`.
+
+  See `Drab.Core.broadcast_js/2` for broadcasting options.  
+  """
+  @spec broadcast_style(Drab.Core.subject(), String.t(), map | Keyword.t()) :: Drab.Core.bcast_result()
+  def broadcast_style(subject, selector, properties) when is_list(properties) or is_map(properties) do
+    broadcast_js(subject, set_js(selector, %{"style" => Map.new(properties)}))
+  end
+
   @doc """
   Helper for setting the attributes of found elements. A shorthand for:
 
@@ -312,6 +327,22 @@ defmodule Drab.Element do
     set_prop!(socket, selector, %{"attributes" => Map.new(attributes)})
   end
 
+  @doc """
+  Broadcasting version of `set_attr/3`.
+
+  It does exactly the same as `set_attr/3`, but instead of pushing the message to the current
+  browser, it broadcasts it to all connected users.
+
+  Always returns `{:ok, :broadcasted}`.
+
+  See `Drab.Core.broadcast_js/2` for broadcasting options.  
+  """
+  @spec broadcast_attr(Drab.Core.subject(), String.t(), map | Keyword.t()) :: Drab.Core.bcast_result()
+  def broadcast_attr(subject, selector, attributes) when is_list(attributes) or is_map(attributes) do
+    # set_prop(socket, selector, %{"attributes" => Map.new(attributes)})
+    broadcast_js(subject, set_js(selector, %{"attributes" => Map.new(attributes)}))
+  end
+
   @doc """
   Helper for setting the dataset of elements. A shorthand for:
 
@@ -336,6 +367,21 @@ defmodule Drab.Element do
     set_prop!(socket, selector, %{"dataset" => Map.new(dataset)})
   end
 
+  @doc """
+  Broadcasting version of `set_data/3`.
+
+  It does exactly the same as `set_data/3`, but instead of pushing the message to the current
+  browser, it broadcasts it to all connected users.
+
+  Always returns `{:ok, :broadcasted}`.
+
+  See `Drab.Core.broadcast_js/2` for broadcasting options.  
+  """
+  @spec broadcast_data(Drab.Core.subject(), String.t(), map | Keyword.t()) :: Drab.Core.bcast_result()
+  def broadcast_data(subject, selector, dataset) when is_list(dataset) or is_map(dataset) do
+    broadcast_js(subject, set_js(selector, %{"dataset" => Map.new(dataset)}))
+  end
+
   @doc """
   Parses the specified text as HTML and inserts the resulting nodes into the DOM tree at
   a specified position.
@@ -418,4 +464,19 @@ defmodule Drab.Element do
     set_prop! socket, selector, innerHTML: html
   end
 
+  @doc """
+  Broadcasting version of `set_html/3`.
+
+  It does exactly the same as `set_html/3`, but instead of pushing the message to the current
+  browser, it broadcasts it to all connected users.
+
+  Always returns `{:ok, :broadcasted}`.
+
+  See `Drab.Core.broadcast_js/2` for broadcasting options.  
+  """
+  @spec broadcast_html(Drab.Core.subject(), String.t(), String.t()) :: Drab.Core.bcast_result()
+  def broadcast_html(subject, selector, html) do
+    broadcast_js(subject, set_js(selector, %{"innerHTML" => html}))
+  end
+
 end
diff --git a/test/integration/element_test.exs b/test/integration/element_test.exs
@@ -108,6 +108,11 @@ defmodule DrabTestApp.ElementTest do
 
       {:ok, ret} = query_one(socket, "button", :style)
       assert ret["style"]["cssText"] == "background-color: red; width: 200px;"
+
+      assert {:ok, :broadcasted} ==
+                broadcast_style(socket, "button", %{"backgroundColor" => "red", "width" => "200px"})
+      {:ok, ret} = query_one(socket, "button", :style)
+      assert ret["style"]["cssText"] == "background-color: red; width: 200px;"
     end
 
     test "set_attr" do
@@ -116,6 +121,11 @@ defmodule DrabTestApp.ElementTest do
       assert {:ok, 1} == set_attr(socket, "a", href: "https://tg.pl/drab")
       {:ok, ret} = query_one(socket, "a", :attributes)
       assert ret["attributes"]["href"] == "https://tg.pl/drab"
+
+      assert {:ok, :broadcasted} ==
+                broadcast_attr(socket, "a", href: "https://tg.pl/drab")
+      {:ok, ret} = query_one(socket, "a", :attributes)
+      assert ret["attributes"]["href"] == "https://tg.pl/drab"
     end
 
     test "set_data" do
@@ -124,6 +134,11 @@ defmodule DrabTestApp.ElementTest do
       assert {:ok, 1} == set_data(socket, "button", foo: "bar")
       {:ok, ret} = query_one(socket, "button", :dataset)
       assert ret["dataset"]["foo"] == "bar"
+
+      assert {:ok, :broadcasted} ==
+                broadcast_data(socket, "button", foo: "bar")
+      {:ok, ret} = query_one(socket, "button", :dataset)
+      assert ret["dataset"]["foo"] == "bar"
     end
 
     test "insert" do
@@ -184,6 +199,10 @@ defmodule DrabTestApp.ElementTest do
     html = "<p>Hello, World!</p>"
     assert {:ok, 1} == set_html(socket, "#my_element", html)
     assert %{"innerHTML" => html} == query_one!(socket, "#my_element", :innerHTML)
+
+    assert {:ok, :broadcasted} ==
+              broadcast_html(socket, "#my_element", html)
+    assert %{"innerHTML" => html} == query_one!(socket, "#my_element", :innerHTML)
   end
 
 end