[devdocsgjs/main: 646/1867] Move all styling configuration to the client




commit dd23a6c7b70f6408a824d6db7080d5512482034b
Author: Jasper van Merle <jaspervmerle gmail com>
Date:   Mon Jul 8 01:42:34 2019 +0200

    Move all styling configuration to the client

 assets/javascripts/app/app.coffee           |   4 ++--
 assets/javascripts/app/serviceworker.coffee |   4 ++--
 assets/javascripts/app/settings.coffee      |  21 +++++++++++++++++++++
 lib/app.rb                                  |   4 ----
 public/images/webapp-icon-192.png           | Bin 0 -> 32187 bytes
 public/manifest.json                        |   6 ++++++
 views/app.erb                               |   6 ------
 views/service-worker.js.erb                 |  12 +++---------
 8 files changed, 34 insertions(+), 23 deletions(-)
---
diff --git a/assets/javascripts/app/app.coffee b/assets/javascripts/app/app.coffee
index 0d2d9814..0928f45b 100644
--- a/assets/javascripts/app/app.coffee
+++ b/assets/javascripts/app/app.coffee
@@ -17,6 +17,8 @@
     @settings = new app.Settings
     @db = new app.DB()
 
+    @settings.initLayout()
+
     @docs = new app.collections.Docs
     @disabledDocs = new app.collections.Docs
     @entries = new app.collections.Entries
@@ -26,8 +28,6 @@
     @document = new app.views.Document
     @mobile = new app.views.Mobile if @isMobile()
 
-    @settings.initLayout()
-
     if document.body.hasAttribute('data-doc')
       @DOC = JSON.parse(document.body.getAttribute('data-doc'))
       @bootOne()
diff --git a/assets/javascripts/app/serviceworker.coffee b/assets/javascripts/app/serviceworker.coffee
index 8bdd5064..7a58f304 100644
--- a/assets/javascripts/app/serviceworker.coffee
+++ b/assets/javascripts/app/serviceworker.coffee
@@ -30,13 +30,13 @@ class app.ServiceWorker
     $.on @registration, 'updatefound', @onUpdateFound
     return
 
-  onUpdateFound: () =>
+  onUpdateFound: =>
     $.off @installingRegistration, 'statechange', @onStateChange() if @installingRegistration
     @installingRegistration = @registration.installing
     $.on @installingRegistration, 'statechange', @onStateChange
     return
 
-  onStateChange: () =>
+  onStateChange: =>
     if @installingRegistration and @installingRegistration.state == 'installed' and 
navigator.serviceWorker.controller
       @installingRegistration = null
       @onUpdateReady()
diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee
index 7b731e0b..58875f42 100644
--- a/assets/javascripts/app/settings.coffee
+++ b/assets/javascripts/app/settings.coffee
@@ -120,6 +120,7 @@ class app.Settings
   initLayout: ->
     @toggleDark(@get('dark'))
     @toggleLayout(layout, @hasLayout(layout)) for layout in @LAYOUTS
+    @addResizerCSS()
 
   toggleDark: (enable) ->
     classList = document.documentElement.classList
@@ -130,3 +131,23 @@ class app.Settings
     classList = document.body.classList
     classList[if enable then 'add' else 'remove'](layout) unless layout is SIDEBAR_HIDDEN_LAYOUT
     classList[if $.overlayScrollbarsEnabled() then 'add' else 'remove']('_overlay-scrollbars')
+
+  addResizerCSS: ->
+    size = @get('size')
+    size = if size then size + 'px' else '20rem'
+
+    css = """
+      ._container { margin-left: #{size}; }
+      ._header, ._list { width: #{size}; }
+      ._list-hover.clone { min-width: #{size}; }
+      ._notice, ._path, ._resizer { left: #{size}; }
+    """
+
+    style = document.createElement('style')
+    style.type = 'text/css'
+    style.appendChild(document.createTextNode(css))
+    style.setAttribute('data-size', size)
+    style.setAttribute('data-resizer', '')
+
+    document.head.appendChild(style)
+    return
diff --git a/lib/app.rb b/lib/app.rb
index c89328ad..83e646e4 100644
--- a/lib/app.rb
+++ b/lib/app.rb
@@ -205,10 +205,6 @@ class App < Sinatra::Application
       ].compact
     end
 
-    def app_size
-      @app_size ||= memoized_cookies['size'].nil? ? '20rem' : "#{memoized_cookies['size']}px"
-    end
-
     def bypass_cache?
       !memoized_cookies['bypassCache'].nil?
     end
diff --git a/public/images/webapp-icon-192.png b/public/images/webapp-icon-192.png
new file mode 100644
index 00000000..d1d1dd75
Binary files /dev/null and b/public/images/webapp-icon-192.png differ
diff --git a/public/manifest.json b/public/manifest.json
index 1faa5978..301c56d1 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -4,6 +4,7 @@
   "description": "API Documentation Browser",
   "start_url": "/",
   "display": "standalone",
+  "background_color": "#EEEEEE",
   "icons": [
     {
       "src": "/images/webapp-icon-32.png",
@@ -25,6 +26,11 @@
       "sizes": "128x128",
       "type": "image/png"
     },
+    {
+      "src": "/images/webapp-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
     {
       "src": "/images/webapp-icon-256.png",
       "sizes": "256x256",
diff --git a/views/app.erb b/views/app.erb
index 7cffabd0..7e3cc10b 100644
--- a/views/app.erb
+++ b/views/app.erb
@@ -63,9 +63,3 @@
     <symbol id="icon-external-link" viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 
1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></symbol>
   </defs>
 </svg>
-<style data-size="<%= app_size %>" data-resizer>
-  ._container { margin-left: <%= app_size %>; }
-  ._header, ._list { width: <%= app_size %>; }
-  ._list-hover.clone { min-width: <%= app_size %>; }
-  ._notice, ._path, ._resizer { left: <%= app_size %>; }
-</style>
diff --git a/views/service-worker.js.erb b/views/service-worker.js.erb
index c962564b..20de7bbe 100644
--- a/views/service-worker.js.erb
+++ b/views/service-worker.js.erb
@@ -2,17 +2,11 @@
 <%# This ensures that the cache is always updated if the hash of the application.js file changes %>
 const cacheName = '<%= javascript_path('application', asset_host: 
false).scan(/application-([^\.]+)\.js/).last&.first || 'app' %>';
 
-<%# Paths to cache when the service worker is installed %>
-const cachePaths = [
+<%# Url's to cache when the service worker is installed %>
+const urlsToCache = [
   '/',
   '/favicon.ico',
   '/manifest.json',
-  '/images/webapp-icon-32.png',
-  '/images/webapp-icon-60.png',
-  '/images/webapp-icon-80.png',
-  '/images/webapp-icon-128.png',
-  '/images/webapp-icon-256.png',
-  '/images/webapp-icon-512.png',
   '<%= service_worker_asset_urls.join "',\n  '" %>',
   '<%= doc_index_urls.join "',\n  '" %>',
 ];
@@ -22,7 +16,7 @@ self.addEventListener('install', event => {
   self.skipWaiting();
 
   event.waitUntil(
-    caches.open(cacheName).then(cache => cache.addAll(cachePaths)),
+    caches.open(cacheName).then(cache => cache.addAll(urlsToCache)),
   );
 });
 


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]