Browse Source

add awesomeplete

pull/26/head
Inhji Y. 1 year ago
parent
commit
dd346f4e83
  1. 1
      apps/bookmarks/lib/bookmarks/bookmark.ex
  2. 11
      apps/tomie_web/assets/css/app.css
  3. 104
      apps/tomie_web/assets/css/awesomeplete.css
  4. 3
      apps/tomie_web/assets/static/js/awesomeplete/awesomeplete-util.js
  5. 3
      apps/tomie_web/assets/static/js/awesomeplete/awesomeplete.js
  6. 1
      apps/tomie_web/assets/static/js/awesomeplete/awesomplete-util.min.js.map
  7. 1
      apps/tomie_web/assets/static/js/awesomeplete/awesomplete.min.js.map
  8. 2
      apps/tomie_web/lib/tomie_web.ex
  9. 5
      apps/tomie_web/lib/tomie_web/controllers/bookmark_controller.ex
  10. 8
      apps/tomie_web/lib/tomie_web/router.ex
  11. 13
      apps/tomie_web/lib/tomie_web/templates/bookmark/index.html.eex
  12. 3
      apps/tomie_web/lib/tomie_web/templates/layout/app.html.eex
  13. 1
      apps/tomie_web/mix.exs
  14. 1
      mix.lock

1
apps/bookmarks/lib/bookmarks/bookmark.ex

@ -9,6 +9,7 @@ defmodule Bookmarks.Bookmark do
end
end
@derive {Jason.Encoder, only: [:title, :source]}
schema "posts" do
field(:type, :string, default: @post_type)

11
apps/tomie_web/assets/css/app.css

@ -3,6 +3,7 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "awesomeplete";
@import "alerts";
@import "navigation";
@ -13,3 +14,13 @@ form input, form label {
form input {
@apply mb-3 border-b-2 border-green-500 border-solid bg-green-200;
}
div.awesomplete {display: block}
div.awesomplete ul li p {display: block; font-size: small; margin-left: 1em}
div.awesomplete .awe-found {border: 2px solid green}
.hide-not-found div.awesomplete .awe-not-found {border-color: lightblue}
div.awesomplete .awe-not-found {border: 2px solid red}

104
apps/tomie_web/assets/css/awesomeplete.css

@ -0,0 +1,104 @@
.awesomplete [hidden] {
display: none;
}
.awesomplete .visually-hidden {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.awesomplete {
display: inline-block;
position: relative;
}
.awesomplete > input {
display: block;
}
.awesomplete > ul {
position: absolute;
left: 0;
z-index: 1;
min-width: 100%;
box-sizing: border-box;
list-style: none;
padding: 0;
margin: 0;
background: #fff;
}
.awesomplete > ul:empty {
display: none;
}
.awesomplete > ul {
border-radius: .3em;
margin: .2em 0 0;
background: hsla(0,0%,100%,.9);
background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
border: 1px solid rgba(0,0,0,.3);
box-shadow: .05em .2em .6em rgba(0,0,0,.2);
text-shadow: none;
}
@supports (transform: scale(0)) {
.awesomplete > ul {
transition: .3s cubic-bezier(.4,.2,.5,1.4);
transform-origin: 1.43em -.43em;
}
.awesomplete > ul[hidden],
.awesomplete > ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
/* Pointer */
.awesomplete > ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0; height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.awesomplete > ul > li {
position: relative;
padding: .2em .5em;
cursor: pointer;
}
.awesomplete > ul > li:hover {
background: hsl(200, 40%, 80%);
color: black;
}
.awesomplete > ul > li[aria-selected="true"] {
background: hsl(205, 40%, 40%);
color: white;
}
.awesomplete mark {
background: hsl(65, 100%, 50%);
}
.awesomplete li:hover mark {
background: hsl(68, 100%, 41%);
}
.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}
/*# sourceMappingURL=awesomplete.css.map */

3
apps/tomie_web/assets/static/js/awesomeplete/awesomeplete-util.js
File diff suppressed because it is too large
View File

3
apps/tomie_web/assets/static/js/awesomeplete/awesomeplete.js
File diff suppressed because it is too large
View File

1
apps/tomie_web/assets/static/js/awesomeplete/awesomplete-util.min.js.map
File diff suppressed because it is too large
View File

1
apps/tomie_web/assets/static/js/awesomeplete/awesomplete.min.js.map
File diff suppressed because it is too large
View File

2
apps/tomie_web/lib/tomie_web.ex

@ -40,6 +40,8 @@ defmodule TomieWeb do
import TomieWeb.ErrorHelpers
import TomieWeb.Gettext
import PhoenixFormAwesomplete
alias TomieWeb.Router.Helpers, as: Routes
end
end

5
apps/tomie_web/lib/tomie_web/controllers/bookmark_controller.ex

@ -9,6 +9,11 @@ defmodule TomieWeb.BookmarkController do
render(conn, "index.html", bookmarks: bookmarks)
end
def index_json(conn, _params) do
bookmarks = Bookmarks.list_bookmarks()
json(conn, bookmarks)
end
def new(conn, _params) do
changeset = Bookmark.changeset(%Bookmark{})

8
apps/tomie_web/lib/tomie_web/router.ex

@ -10,6 +10,10 @@ defmodule TomieWeb.Router do
plug :put_secure_browser_headers
end
pipeline :api do
plug :accepts, ["json"]
end
pipeline :protected do
plug Pow.Plug.RequireAuthenticated,
error_handler: Pow.Phoenix.PlugErrorHandler
@ -29,4 +33,8 @@ defmodule TomieWeb.Router do
resources "/bookmarks", BookmarkController, only: [:index, :new, :create, :show]
get "/bookmarks/:id/visit", BookmarkController, :visit
end
scope "/api", TomieWeb do
get "/bookmarks", BookmarkController, :index_json
end
end

13
apps/tomie_web/lib/tomie_web/templates/bookmark/index.html.eex

@ -4,6 +4,19 @@
class: "block p-3 bg-green-200 hover:bg-green-500 hover:text-white uppercase" %>
</section>
<section class="my-3">
<%= awesomplete(:user, :country,
[class: "bg-green-200 w-full p-3", placeholder: "Search bookmarks.."],
[ url: "/api/bookmarks",
loadall: true,
prepop: true,
minChars: 1,
maxItems: 8,
value: "title",
label: "title"
]) %>
</section>
<section>
<%= for bookmark <- @bookmarks do %>
<article class="bookmark p-3 shadow my-3 bg-green-200">

3
apps/tomie_web/lib/tomie_web/templates/layout/app.html.eex

@ -6,6 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title><%= assigns[:page_title] || "Tomie · Phoenix Framework" %></title>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/awesomeplete/awesomeplete.js") %>"></script>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/awesomeplete/awesomeplete-util.js") %>"></script>
<%= csrf_meta_tag() %>
</head>
<body class="mt-16">

1
apps/tomie_web/mix.exs

@ -43,6 +43,7 @@ defmodule TomieWeb.MixProject do
{:phoenix_ecto, "~> 4.0"},
{:phoenix_html, "~> 2.11"},
{:phoenix_live_reload, "~> 1.2", only: :dev},
{:phoenix_form_awesomplete, "~> 0.1"},
{:gettext, "~> 0.11"},
{:jason, "~> 1.0"},
{:plug_cowboy, "~> 2.0"},

1
mix.lock

@ -34,6 +34,7 @@
"parse_trans": {:hex, :parse_trans, "3.3.0", "09765507a3c7590a784615cfd421d101aec25098d50b89d7aa1d66646bc571c1", [:rebar3], [], "hexpm", "17ef63abde837ad30680ea7f857dd9e7ced9476cdd7b0394432af4bfc241b960"},
"phoenix": {:hex, :phoenix, "1.4.16", "2cbbe0c81e6601567c44cc380c33aa42a1372ac1426e3de3d93ac448a7ec4308", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 1.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:plug, "~> 1.8.1 or ~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 1.0 or ~> 2.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "856cc1a032fa53822737413cf51aa60e750525d7ece7d1c0576d90d7c0f05c24"},
"phoenix_ecto": {:hex, :phoenix_ecto, "4.1.0", "a044d0756d0464c5a541b4a0bf4bcaf89bffcaf92468862408290682c73ae50d", [:mix], [{:ecto, "~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.9", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "c5e666a341ff104d0399d8f0e4ff094559b2fde13a5985d4cb5023b2c2ac558b"},
"phoenix_form_awesomplete": {:hex, :phoenix_form_awesomplete, "0.1.5", "d09aade160b584e3428e1e095645482396f17bddda4f566f1118f12d2598d11c", [:mix], [{:phoenix_html, "~> 2.10", [hex: :phoenix_html, repo: "hexpm", optional: false]}], "hexpm", "acef2dbc638b5bcad92c11e41eb2b55d71f2596741a2f936717b8472196456ec"},
"phoenix_html": {:hex, :phoenix_html, "2.14.1", "7dabafadedb552db142aacbd1f11de1c0bbaa247f90c449ca549d5e30bbc66b4", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "536d5200ad37fecfe55b3241d90b7a8c3a2ca60cd012fc065f776324fa9ab0a9"},
"phoenix_live_reload": {:hex, :phoenix_live_reload, "1.2.1", "274a4b07c4adbdd7785d45a8b0bb57634d0b4f45b18d2c508b26c0344bd59b8f", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "41b4103a2fa282cfd747d377233baf213c648fdcc7928f432937676532490eee"},
"phoenix_pubsub": {:hex, :phoenix_pubsub, "1.1.2", "496c303bdf1b2e98a9d26e89af5bba3ab487ba3a3735f74bf1f4064d2a845a3e", [:mix], [], "hexpm", "1f13f9f0f3e769a667a6b6828d29dec37497a082d195cc52dbef401a9b69bf38"},

Loading…
Cancel
Save