dokno 1.1.0 → 1.1.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: df8bbd2d17e134f0298f31fc97d049b245c4830e9d44655a8c4659507c6ebe6f
4
- data.tar.gz: bdeb9513295036198a8f30a476a1ea8a4c34d35330c9e6e75e2364aadddf0b3b
3
+ metadata.gz: 43b733c58c27a4d573269c75b1d47ba35aa570796535de91f9619429ce0cc017
4
+ data.tar.gz: 199666be242bb2a24a57552d377f4d3c9f84a1d0f5e92e99817c4786a80ba5c6
5
5
  SHA512:
6
- metadata.gz: 97c1353f3c85e9a6e40de60a0947101978bb101b0dc85be48945ee7e54bb13596fd0f1afbd011113f538c5dfe0ed8784c09c87643b5813e5021292c49244273b
7
- data.tar.gz: 1bfda031b688b21b65fc8b43fd550e006fec2d5b5f1fd50d4f536db9724ef4853ed47f49e8b2e3ed3329f9ecd6092eb2d678dc6562fa1c07d092da0412ff1e12
6
+ metadata.gz: 4a5b2583ecedf613308ac35ce4f55df892ca69593a34698d9cf8584ae61c8f0fa9d0d3444957941c76a9f501b383b49b517d63cac0b18d9012a3fc5201901708
7
+ data.tar.gz: a06162fecccb4d41751e8fcbb0f503427f3fe280fbd67fab5af761a3976a4d1646bc1d1861641da7bb9d06299c5e05281cc2a7b97b2a47349537a119eebe3fce
@@ -10,6 +10,31 @@ function elems(selector) {
10
10
  return document.getElementsByClassName(selector);
11
11
  }
12
12
 
13
+ function selectOption(id, value) {
14
+ var sel = elem('#' + id);
15
+ var opts = sel.options;
16
+
17
+ for (var opt, j = 0; opt = opts[j]; j++) {
18
+ if (opt.value == value) {
19
+ sel.selectedIndex = j;
20
+ break;
21
+ }
22
+ }
23
+ }
24
+
25
+ function changeCategory(category_code, term, order) {
26
+ goToPage(dokno__base_path + category_code + '?search_term=' + term + '&order=' + order);
27
+ }
28
+
29
+ function search(term, order) {
30
+ goToPage('?search_term=' + term + '&order=' + order);
31
+ }
32
+
33
+ function goToPage(url) {
34
+ var param_join = url.indexOf('?') >= 0 ? '&' : '?';
35
+ location.href=url + param_join + '_=' + Math.round(new Date().getTime());
36
+ }
37
+
13
38
  function sendRequest(url, data, callback, method) {
14
39
  const request = new XMLHttpRequest();
15
40
  request.open(method, url, true);
@@ -57,6 +57,11 @@ module Dokno
57
57
  self.class.branch(parent_category_id: id)
58
58
  end
59
59
 
60
+ # Used to invalidate the fragment cache of the hierarchical category select options
61
+ def self.cache_key
62
+ maximum :updated_at
63
+ end
64
+
60
65
  # The given Category and all child Categories. Useful for filtering associated articles.
61
66
  def self.branch(parent_category_id:, at_top: true)
62
67
  return if parent_category_id.blank?
@@ -1,7 +1,7 @@
1
1
  <style>
2
2
  /* Article formatting */
3
3
  .dokno-article-content-markup {
4
- font-weight: 300;
4
+ font-weight: 400;
5
5
  line-height: 1.75rem;
6
6
  font-size: 1rem;
7
7
  }
@@ -37,18 +37,17 @@
37
37
  }
38
38
 
39
39
  .dokno-article-content-markup h1 {
40
- font-size: 2rem;
41
- }
42
-
43
- .dokno-article-content-markup h2 {
44
40
  font-size: 1.625rem;
45
41
  }
46
42
 
47
- .dokno-article-content-markup h3 {
43
+ .dokno-article-content-markup h2 {
48
44
  font-size: 1.25rem;
49
45
  }
50
46
 
51
- .dokno-article-content-markup h4 {
47
+ .dokno-article-content-markup h3,
48
+ .dokno-article-content-markup h4,
49
+ .dokno-article-content-markup h5,
50
+ .dokno-article-content-markup h6 {
52
51
  font-size: 1rem;
53
52
  }
54
53
 
@@ -13,13 +13,6 @@
13
13
 
14
14
  <!-- Slide-out panel markup -->
15
15
  <div id="dokno-panel-container">
16
- <div id="dokno-panel-close" class="dokno-hidden">
17
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="#eee" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
18
- <circle cx="12" cy="12" r="10"></circle>
19
- <line x1="15" y1="9" x2="9" y2="15"></line>
20
- <line x1="9" y1="9" x2="15" y2="15"></line>
21
- </svg>
22
- </div>
23
16
  <div id="dokno-panel-title"></div>
24
17
  <div id="dokno-panel-summary"></div>
25
18
  <div id="dokno-panel-markdown" class="dokno-article-content-markup"></div>
@@ -29,10 +22,12 @@
29
22
  <!-- Slide-out panel behavior -->
30
23
  <script>
31
24
  function doknoOpenPanel(slug) {
32
- if (slug == dokno__slug) {
33
- doknoClosePanel();
34
- return true;
35
- }
25
+ if (slug == dokno__slug) { return true; }
26
+
27
+ // Set flag to avoid flicker when closing the panel before opening the panel
28
+ dokno__link_just_clicked = true;
29
+ setTimeout(function() { dokno__link_just_clicked = false; }, 200);
30
+
36
31
  dokno__slug = slug;
37
32
 
38
33
  // Can't use fetch API; IE
@@ -62,9 +57,6 @@
62
57
  dokno__panel.classList.add('open');
63
58
  document.body.classList.add('dokno-no-scroll');
64
59
 
65
- // Reveal fixed close icon
66
- setTimeout(function() { dokno__close.classList.remove('dokno-hidden'); }, 200);
67
-
68
60
  // Close on escape
69
61
  document.addEventListener('keydown', dokno__keydown_listener, false);
70
62
  document.addEventListener('click', dokno__click_listener, false);
@@ -75,7 +67,9 @@
75
67
  }
76
68
 
77
69
  function doknoClosePanel() {
78
- dokno__close.classList.add('dokno-hidden');
70
+ // Just clicked a link to open a panel, so don't close to avoid flicker
71
+ if (dokno__link_just_clicked) { return true; }
72
+
79
73
  dokno__panel.classList.remove('open');
80
74
  document.body.classList.remove('dokno-no-scroll');
81
75
  document.removeEventListener('keydown', dokno__keydown_listener, false);
@@ -98,7 +92,6 @@
98
92
  }
99
93
 
100
94
  const dokno__panel = document.getElementById('dokno-panel-container');
101
- const dokno__close = document.querySelector('div#dokno-panel-close');
102
95
  const dokno__panel_title = document.getElementById('dokno-panel-title');
103
96
  const dokno__panel_summary = document.getElementById('dokno-panel-summary');
104
97
  const dokno__panel_footer = document.getElementById('dokno-panel-footer');
@@ -113,7 +106,5 @@
113
106
  if (!isClickInside) { doknoClosePanel(); }
114
107
  }
115
108
 
116
- dokno__close.onclick = function() { doknoClosePanel(); }
117
-
118
- var dokno__id, dokno__slug;
109
+ var dokno__id, dokno__slug, dokno__link_just_clicked;
119
110
  </script>
@@ -9,87 +9,77 @@
9
9
 
10
10
  div#dokno-panel-container {
11
11
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
12
- font-size: 1rem;
13
- line-height: 1.5rem;
14
- right: -600px;
15
- z-index: 9999;
16
- position: fixed;
17
- top: 0;
18
- bottom: 0;
19
- width: 600px;
20
- max-width: 100vw;
21
- overflow: hidden;
22
- overflow-y: auto;
23
- background-color: #fff;
24
- color: #2d3748;
25
- transition: all .15s ease-in-out;
26
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
12
+ font-size: 1rem !important;
13
+ line-height: 1.5rem !important;
14
+ right: -600px !important;
15
+ z-index: 9999 !important;
16
+ position: fixed !important;
17
+ top: 0 !important;
18
+ bottom: 0 !important;
19
+ width: 600px !important;
20
+ max-width: 100vw !important;
21
+ overflow: hidden !important;
22
+ overflow-y: auto !important;
23
+ background-color: #fff !important;
24
+ color: #2d3748 !important;
25
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
27
26
  }
28
27
 
29
28
  div#dokno-panel-container.open {
30
- right: 0;
31
- }
32
-
33
- div#dokno-panel-close {
34
- position: fixed;
35
- background-color: transparent;
36
- color: #222;
37
- cursor: pointer;
38
- top: 1.5rem;
39
- right: 2.5rem;
29
+ right: 0 !important;
40
30
  }
41
31
 
42
32
  div#dokno-panel-title {
43
- padding: 2.5rem;
44
- font-size: 2.25rem;
45
- line-height: 2.75rem;
46
- font-weight: 300;
47
- background-color: rgb(42,67,101);
48
- color: #ebf8ff;
33
+ padding: 2.5rem !important;
34
+ font-size: 2.25rem !important;
35
+ line-height: 2.75rem !important;
36
+ font-weight: 600 !important;
37
+ background-color: rgb(42,67,101) !important;
38
+ color: #ebf8ff !important;
49
39
  }
50
40
 
51
41
  div#dokno-panel-title div#article-deprecated-alert {
52
- font-size: 1rem;
53
- line-height: 1.5rem;
54
- padding: 1rem;
55
- margin-bottom: 1rem;
56
- border-top-width: 4px;
57
- border-radius: .25rem;
58
- border-top-style: solid;
59
- border-color: rgb(116,66,16);
60
- background-color: rgb(183,121,31);
61
- color: rgb(255,255,255);
42
+ font-size: 1rem !important;
43
+ line-height: 1.5rem !important;
44
+ padding: 1rem !important;
45
+ margin-bottom: 1rem !important;
46
+ border-top-width: 4px !important;
47
+ border-radius: .25rem !important;
48
+ border-top-style: solid !important;
49
+ border-color: rgb(116,66,16) !important;
50
+ background-color: rgb(183,121,31) !important;
51
+ color: rgb(255,255,255) !important;
62
52
  }
63
53
 
64
54
  div#dokno-panel-title > span,
65
55
  div#dokno-panel-footer > svg {
66
- cursor: pointer;
56
+ cursor: pointer !important;
67
57
  }
68
58
 
69
59
  div#dokno-panel-summary {
70
- font-size: 1.5rem;
71
- line-height: 2.25rem;
72
- padding: 2.5rem;
73
- font-weight: 300;
60
+ font-size: 1.5rem !important;
61
+ line-height: 2.25rem !important;
62
+ padding: 2.5rem !important;
63
+ font-weight: 400 !important;
74
64
  }
75
65
 
76
66
  div#dokno-panel-markdown {
77
- padding: 2.5rem;
78
- background-color: #f7fafc;
67
+ padding: 2.5rem !important;
68
+ background-color: #f7fafc !important;
79
69
  }
80
70
 
81
71
  div#dokno-panel-footer {
82
- text-align: center;
83
- position: relative;
84
- padding: 2.5rem;
85
- color: #999;
86
- background-color: #edf2f7;
87
- font-weight: 300;
88
- font-size: 1rem;
89
- line-height: 1.5rem;
72
+ text-align: center !important;
73
+ position: relative !important;
74
+ padding: 2.5rem !important;
75
+ color: #999 !important;
76
+ background-color: #edf2f7 !important;
77
+ font-weight: 400 !important;
78
+ font-size: 1rem !important;
79
+ line-height: 1.5rem !important;
90
80
  }
91
81
 
92
82
  div#dokno-panel-footer p {
93
- margin: .5rem 0;
83
+ margin: .5rem 0 !important;
94
84
  }
95
85
  </style>
@@ -38,7 +38,7 @@
38
38
  </div>
39
39
  </div>
40
40
 
41
- <div class="mt-5 flex">
41
+ <div class="mt-5 flex no-print">
42
42
  <div class="no-print w-8"><i data-feather="eye" class="inline-block h-5"></i></div>
43
43
  <div class="w-full">
44
44
  Views:<br />
@@ -57,7 +57,7 @@
57
57
  <% end %>
58
58
 
59
59
  <% if @article.reading_time.present? %>
60
- <div class="mt-5 flex">
60
+ <div class="mt-5 flex no-print">
61
61
  <div class="no-print w-8"><i data-feather="watch" class="inline-block h-5"></i></div>
62
62
  <div class="w-full">
63
63
  Reading time:<br />
@@ -75,7 +75,7 @@
75
75
  </div>
76
76
 
77
77
  <% if can_edit? %>
78
- <div class="mt-5 flex">
78
+ <div class="mt-5 flex no-print">
79
79
  <div class="no-print w-8"><i data-feather="crosshair" class="inline-block h-5"></i></div>
80
80
  <div class="w-full">
81
81
  Unique slug:<br />
@@ -94,7 +94,7 @@
94
94
  <% end %>
95
95
 
96
96
  <% if @article.categories.exists? %>
97
- <div class="mt-5 flex">
97
+ <div class="mt-5 flex no-print">
98
98
  <div class="no-print w-8"><i data-feather="folder" class="inline-block h-5"></i></div>
99
99
  <div class="w-full">
100
100
  <%= 'Category'.pluralize @article.categories.count %>:<br />
@@ -31,7 +31,7 @@
31
31
  <% if category.persisted? %>
32
32
  <button type="button" class="bg-red-700 text-gray-300 hover:bg-red-900 hover:text-white rounded py-2 px-3 font-bold ml-5" onclick="deleteCategory('<%= category.id %>');"><i data-feather="trash" class="inline h-5"></i> DELETE</button>
33
33
  <% end %>
34
- <span class="text-lg ml-5"><a class="no-underline" href="<%= category.persisted? ? "#{root_path}?id=#{category.id}" : root_path %>">Cancel</a></span>
34
+ <span class="text-lg ml-5"><a class="no-underline" href="<%= category.persisted? ? "#{dokno.article_index_path(category.code)}" : root_path %>">Cancel</a></span>
35
35
  </div>
36
36
  </section>
37
37
 
@@ -7,17 +7,18 @@
7
7
  <div class="flex items-center mb-10">
8
8
  <% if Dokno::Category.exists? %>
9
9
  <div class="w-1/2 pr-5">
10
- <select name="category" id="category" size="1" class="rounded text-xl shadow-inner bg-gray-100 p-2 w-full max-w-full" onchange="location.href='<%= article_index_path %>' + this.value + '?search_term=' + elem('#search_term').value + '&order=<%= @order %>';">
10
+
11
+ <select aria-label="Category" name="category" id="category" size="1" class="rounded text-xl shadow-inner bg-gray-100 p-2 w-full max-w-full" onchange="changeCategory(this.value, elem('#search_term').value, '<%= @order %>');">
11
12
  <option value="">Select a category</option>
12
- <%= Dokno::Category.select_option_markup(selected_category_codes: [@category&.code]).html_safe %>
13
+ <% cache Dokno::Category do %>
14
+ <%= Dokno::Category.select_option_markup.html_safe %>
15
+ <% end %>
13
16
  </select>
17
+
14
18
  </div>
15
19
  <% end %>
16
20
  <div class="w-<%= Dokno::Category.exists? ? '1/2 pl-5' : 'full' %>">
17
- <%= form_with(url: article_index_path(@category&.code), method: :get) do %>
18
- <input type="hidden" name="order" value="<%= @order %>">
19
- <input placeholder="Search article content, titles, and slugs" type="text" name="search_term" id="search_term" value="<%= @search_term %>" class="rounded text-xl shadow-inner bg-gray-100 p-2 w-full" />
20
- <% end %>
21
+ <input onsearch="search(this.value, '<%= @order %>');" placeholder="Search article content, titles, and slugs" type="search" name="search_term" id="search_term" value="<%= @search_term %>" class="rounded text-xl shadow-inner bg-gray-100 p-2 w-full" />
21
22
  </div>
22
23
  </div>
23
24
 
@@ -53,7 +54,7 @@
53
54
  </div>
54
55
 
55
56
  <div id="dokno-article-list">
56
- <% @articles.each_with_index do |article, i| %>
57
+ <% @articles.each do |article| %>
57
58
  <section class="border-t border-gray-300 py-10 text-xl flex">
58
59
  <div class="w-1/3 pr-10">
59
60
  <div class="flex">
@@ -72,17 +73,17 @@
72
73
 
73
74
  <span class="dokno-article-content-highlight"><%= article.summary.presence || 'No summary provided' %></span>
74
75
 
75
- <div class="text-base mt-2">
76
- <div class="text-gray-500"><%= article.category_name_list(context_category_id: @category&.id, order: @order, search_term: @search_term) %></div>
77
-
78
- <% if @order == 'views' %>
79
- <div class="text-gray-500">Viewed <%= number_with_delimiter(article.views, delimiter: ',') %> <%= 'time'.pluralize(article.views) %></div>
80
- <% elsif @order == 'updated' %>
81
- <div class="text-gray-500">Last updated <%= time_ago_in_words article.updated_at %> ago</div>
82
- <% elsif @order == 'newest' %>
83
- <div class="text-gray-500">Added <%= time_ago_in_words article.created_at %> ago</div>
84
- <% end %>
85
- </div>
76
+ <% unless @order == 'alpha' %>
77
+ <div class="text-base mt-2">
78
+ <% if @order == 'views' %>
79
+ <div class="text-gray-500">Viewed <%= number_with_delimiter(article.views, delimiter: ',') %> <%= 'time'.pluralize(article.views) %></div>
80
+ <% elsif @order == 'updated' %>
81
+ <div class="text-gray-500">Last updated <%= time_ago_in_words article.updated_at %> ago</div>
82
+ <% elsif @order == 'newest' %>
83
+ <div class="text-gray-500">Added <%= time_ago_in_words article.created_at %> ago</div>
84
+ <% end %>
85
+ </div>
86
+ <% end %>
86
87
  </div>
87
88
  </section>
88
89
  <% end %>
@@ -96,6 +97,11 @@
96
97
  </div>
97
98
  <% end %>
98
99
 
100
+ <script>
101
+ // Client-side select of cached select list
102
+ selectOption('category', '<%= j @category&.code %>');
103
+ </script>
104
+
99
105
  <% if @search_term.present? %>
100
- <script>highlightTerm(['<%= j @search_term.strip %>'], 'dokno-article-content-highlight');</script>
106
+ <script> highlightTerm(['<%= j @search_term.strip %>'], 'dokno-article-content-highlight'); </script>
101
107
  <% end %>
@@ -45,7 +45,7 @@
45
45
  <div class="text-center m-auto mb-10 w-full max-w-screen-xl">
46
46
  <% if @search_term.present? %>
47
47
  <div class="text-gray-600 text-2xl uppercase">
48
- <%= (article_count = @articles.count).positive? ? "#{article_count} #{'article'.pluralize(article_count)}" : 'No articles' %>
48
+ <%= @total_records.positive? ? "#{@total_records} #{'article'.pluralize(@total_records)}" : 'No articles' %>
49
49
  found containing the search term
50
50
  <div class="text-4xl leading-tight"><span class="font-serif">&ldquo;</span> <%= @search_term %> <span class="font-serif">&rdquo;</span> </div>
51
51
  </div>
@@ -76,12 +76,11 @@
76
76
 
77
77
  <footer id="dokno-footer-container">
78
78
  <% if @article.present? && action_name == 'show' %>
79
- <div id="dokno-article-log-container" data-category-id="<%= @category&.id %>" data-article-id="<%= @article&.id %>">
79
+ <div id="dokno-article-log-container" data-category-id="<%= @category&.id %>" data-article-id="<%= @article.id %>">
80
80
  <%= render 'partials/logs', category: @category, article: @article %>
81
81
  </div>
82
82
  <% end %>
83
83
 
84
-
85
84
  <div class="py-10 px-16 text-gray-400 bg-blue-900">
86
85
  <div class="w-full max-w-screen-xl m-auto flex">
87
86
  <div class="w-1/2">
@@ -99,7 +98,6 @@
99
98
  </div>
100
99
  </div>
101
100
  </div>
102
-
103
101
  </footer>
104
102
 
105
103
  <%= javascript_include_tag 'init' %>
@@ -5,11 +5,10 @@
5
5
 
6
6
  <span class="mr-1 inline-block">Page</span>
7
7
 
8
- <%= form_with(url: article_index_path, method: :get, class: 'inline') do %>
9
- <input type="hidden" name="id" value="<%= @category&.id %>">
8
+ <%= form_with(url: article_index_path(@category&.code), method: :get, class: 'inline') do %>
10
9
  <input type="hidden" name="search_term" value="<%= @search_term %>">
11
10
  <input type="hidden" name="order" value="<%= @order %>">
12
- <input type="text" name="page" id="page" value="<%= @page %>" onclick="this.select();" class="w-10 text-center bg-gray-200 rounded" />
11
+ <input aria-label="Page" type="text" name="page" value="<%= @page %>" onclick="this.select();" class="w-10 text-center bg-gray-200 rounded" />
13
12
 
14
13
  <span class="mx-1 inline-block">of</span>
15
14
  <span class="text-center inline-block"><%= @total_pages %></span>
@@ -1,3 +1,3 @@
1
1
  module Dokno
2
- VERSION = '1.1.0'
2
+ VERSION = '1.1.1'
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: dokno
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.1.0
4
+ version: 1.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Courtney Payne
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-12-04 00:00:00.000000000 Z
11
+ date: 2020-12-06 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: diffy