Merge branch 'feature/primitive-lazy-load-on-views' into 'master'

update: adding proper data-view attrs to allow for lazy-loading

See merge request !229

src/includes/account-creation.pug

@@ -3,7 +3,7 @@ solid-router(default-route='account-creation-index')
     solid-route(name='contributor-new-account')
     solid-route(name='searcher-new-account')
 
-#account-creation-index(hidden).flex
+#account-creation-index(hidden data_view="account-creation-index").flex
     figure.logo.coopedia
         img(src=`${client_domain}/images/logo.png` alt="Coopedia logo")
 
@@ -25,8 +25,8 @@ solid-router(default-route='account-creation-index')
             p.p_entete=`${data.WhatIsASearcher}` 
             h2.button_base=`${data.IAmSearcher}`
 
-#contributor-new-account(hidden).no-sidebar.container
+#contributor-new-account(hidden data_view="contributor-new-account").no-sidebar.container
     include contributor/profile/create.pug
 
-#searcher-new-account(hidden).no-sidebar.container
+#searcher-new-account(hidden data_view="searcher-new-account").no-sidebar.container
     include searcher/profile/create.pug

src/includes/contributor/dashboard.pug

@@ -12,7 +12,7 @@ header#header(role='banner')
 
 section#home
 
-    #contributor-resource-list(hidden).no-sidebar.container
+    #contributor-resource-list(hidden data_view="contributor-resource-list").no-sidebar.container
         include resources/list.pug
 
     solid-router
@@ -21,13 +21,13 @@ section#home
             solid-route(name='resource-validation-process')
             solid-route(id-prefix=`${endpoints.resources}`, name='contributor-resource-detail', use-id)
             
-    dialog(open)#contributor-resource-validate.no-sidebar
+    dialog(open data_view="contributor-resource-validate")#contributor-resource-validate.no-sidebar
         include resources/validate.pug  
 
-    dialog(open)#resource-validation-process.no-sidebar
+    dialog(open data_view="resource-validation-process")#resource-validation-process.no-sidebar
         include ./validation-process.pug
 
-    dialog(open)#contributor-resource-detail.no-sidebar
+    dialog(open data_view="contributor-resource-detail")#contributor-resource-detail.no-sidebar
         .block_log.block_creat_count.no_shadow
             solid-link(class="backlink", next="contributor-dashboard")
                 .like
@@ -57,14 +57,14 @@ section#home
                 empty-value="add-user"
             )
 
-    #contributor-database(hidden).no-sidebar.container
+    #contributor-database(hidden data_view="contributor-database").no-sidebar.container
         include resources/database.pug
 
-        solid-router    
+        solid-router
             solid-ac-checker(permission="acl:Read" bind-resources)
                 solid-route(id-prefix=`${endpoints.resources}`, name='contributor-database-resource-detail', use-id)
         
-        dialog(open)#contributor-database-resource-detail.no-sidebar
+        dialog(open data_view="contributor-database-resource-detail")#contributor-database-resource-detail.no-sidebar
             .block_log.block_creat_count.no_shadow
                 solid-link(class="backlink", next="contributor-database")
                     .like
@@ -73,6 +73,21 @@ section#home
                 
                 include resources/detail.pug
 
+                solid-display(
+                    bind-resources
+                    fields=""
+                    nested-field="conversations"
+                    counter-template=`<p>${data.Comments} (\${counter})</p>`
+                )
+
+                sib-conversation(
+                    bind-resources
+                    nested-field="conversations"
+                    comment-input-label-text=`${data.AddAComment}`
+                    send-button-text=`${data.Send}`
+                    comment-input-placeholder-text=`${data.YourMessageHere}`
+                )
+
                 h2.title_form.related=`${data.RelatedResources}`
 
                 solid-display(
@@ -85,27 +100,27 @@ section#home
                     label-related=''
                 )
 
-    #contributor-resource-create(hidden).no-sidebar.container
+    #contributor-resource-create(hidden data_view="contributor-resource-create").no-sidebar.container
         solid-link(class="backlink", next="contributor-dashboard")=`${data.BackToDashboard}`
         include resources/create.pug
 
-    #contributor-resource-edit(hidden).no-sidebar.container
+    #contributor-resource-edit(hidden data_view="contributor-resource-edit").no-sidebar.container
         solid-link(class="backlink", next="contributor-dashboard")=`${data.BackToDashboard}`
         include resources/edit.pug
 
-    #resource-creation-confirmation(hidden).no-sidebar.container
+    #resource-creation-confirmation(hidden data_view="resource-creation-confirmation").no-sidebar.container
         include resources/confirmation.pug
 
-    #contributor-account(hidden).no-sidebar.container
+    #contributor-account(hidden data_view="contributor-account").no-sidebar.container
         include profile/detail.pug
 
-    #contributor-account-view(hidden).no-sidebar.container
+    #contributor-account-view(hidden data_view="contributor-account-view").no-sidebar.container
         include profile/view.pug
 
-    #contributor-account-edit(hidden).no-sidebar.container
+    #contributor-account-edit(hidden data_view="contributor-account-edit").no-sidebar.container
         include profile/edit.pug
 
-    #contributor-account-edit-confirmation(hidden).no-sidebar.container
+    #contributor-account-edit-confirmation(hidden data_view="contributor-account-edit-confirmation").no-sidebar.container
         include profile/confirmation.pug
 
 footer#footer 

src/includes/contributor/profile/detail.pug

@@ -88,5 +88,5 @@ div.block_list.flex
     solid-router
         solid-route(name='contributor-profile-delete')
 
-    dialog(open)#contributor-profile-delete.no-sidebar
+    dialog(open data-view="contributor-profile-delete")#contributor-profile-delete.no-sidebar
         include ./delete.pug
\ No newline at end of file

src/includes/contributor/resources/confirmation.pug

@@ -4,7 +4,7 @@ div.container_min
 solid-router
   solid-route(name='resource-validation-process-confirmation')
   
-dialog(open)#resource-validation-process-confirmation.no-sidebar
+dialog(open data-view="resource-validation-process-confirmation")#resource-validation-process-confirmation.no-sidebar
   include ../validation-process.pug
 
 div.block_list

src/includes/head.pug

@@ -6,9 +6,10 @@ head
     //- script(type="module" src="/scripts/sib-core/dist/index.js")
     script(type="module" src="https://unpkg.com/@startinblox/core@0.12")
     script(type="module" src="https://unpkg.com/@startinblox/router@0.8")
+    //- script(type="module" src="/scripts/sib-router/src/index.js")
     //- script(type="module" src="/scripts/sib-auth/index.js")
     script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8")
-    //- script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.5")
+    script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.6")
     script(src="https://kit.fontawesome.com/48014d2af3.js")
     script(src="https://unpkg.com/dialog-polyfill")
     script(src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous")

src/includes/public/dashboard.pug

@@ -8,16 +8,16 @@ header#header(role='banner')
 
 section#home
     
-    #public-resource-list.no-sidebar.container
+    #public-resource-list(data_view="public-resource-list").no-sidebar.container
         include ./resources/list.pug
 
     solid-router
         solid-route(id-prefix=`${endpoints.resources}`, name='public-resource-detail', use-id)
 
-    dialog(open)#public-resource-detail.no-sidebar
+    dialog(open data_view="public-resource-detail")#public-resource-detail.no-sidebar
         include resources/detail.pug
 
-    #user-account-view(hidden).no-sidebar.container
+    #user-account-view(hidden data_view="user-account-view").no-sidebar.container
         include profile/view.pug
 
 footer#footer 

src/includes/searcher/dashboard.pug

@@ -13,34 +13,33 @@ section#home
     // and grouped by steps
     // From two different endpoints I guess
     //-Work on the page architecture
-    #searcher-resource-list(hidden).no-sidebar.container
+    #searcher-resource-list(hidden data_view="searcher-resource-list").no-sidebar.container
         include ./resources/list.pug
 
     solid-router
-        solid-route( name='searcher-request-create')
+        solid-route(name='searcher-request-create')
         solid-route(id-prefix=`${endpoints.resources}`, name='searcher-request-validation', use-id)
         solid-route(id-prefix=`${endpoints.resources}`, name='searcher-resource-detail', use-id)
 
-    dialog(open)#searcher-request-create.no-sidebar.container
+    dialog(open data_view="searcher-request-create")#searcher-request-create.no-sidebar.container
         include ./requests/create.pug
 
-    dialog(open)#searcher-request-validation.no-sidebar
+    dialog(open data_view="searcher-request-validation")#searcher-request-validation.no-sidebar
         include ./request-submitted.pug
-        
 
-    dialog(open)#searcher-resource-detail.no-sidebar
+    dialog(open data_view="searcher-resource-detail")#searcher-resource-detail.no-sidebar
         include resources/detail.pug
 
-    #searcher-account(hidden).no-sidebar.container
+    #searcher-account(hidden data_view="searcher-account").no-sidebar.container
         include profile/detail.pug
 
-    #searcher-account-edit(hidden).no-sidebar.container
+    #searcher-account-edit(hidden data_view="searcher-account-edit").no-sidebar.container
         include profile/edit.pug
 
-    #searcher-account-edit-confirmation(hidden).no-sidebar.container
+    #searcher-account-edit-confirmation(hidden data_view="searcher-account-edit-confirmation").no-sidebar.container
         include profile/confirmation.pug
 
-    #searcher-account-view(hidden).no-sidebar.container
+    #searcher-account-view(hidden data_view="searcher-account-view").no-sidebar.container
         include profile/view.pug
 
 

src/includes/splash.pug

@@ -6,7 +6,7 @@ figure.logo.coopedia
 
 h2.title_lead=`${data.Welcome}`
 
-#splash-index(hidden).no-sidebar.block_log.flex.loggin
+#splash-index(hidden data_view="splash-index").no-sidebar.block_log.flex.loggin
     figure.img_log
         img(src=`${client_domain}/images/contributor.png` 
             alt="Connect as contributor")

src/index.pug

@@ -12,19 +12,19 @@ html
 
         include includes/components/widgets.pug
 
-        #contributor-dashboard(hidden).no-sidebar
+        #contributor-dashboard(hidden data_view="contributor-dashboard").no-sidebar
             include includes/contributor/dashboard.pug
         
-        #searcher-dashboard(hidden).no-sidebar
+        #searcher-dashboard(hidden data_view="searcher-dashboard").no-sidebar
             include includes/searcher/dashboard.pug
             
-        #public-dashboard(hidden).no-sidebar
+        #public-dashboard(hidden data_view="public-dashboard").no-sidebar
             include includes/public/dashboard.pug
 
-        #splash(hidden).no-sidebar.container.flex
+        #splash(hidden data_view="splash").no-sidebar.container.flex
             include includes/splash.pug
 
-        #account-creation(hidden).no-sidebar.container
+        #account-creation(hidden data_view="account-creation").no-sidebar.container
             include includes/account-creation.pug
 
         #main-loader(hidden) Loading…

src/scripts/coopstarter.js

@@ -551,18 +551,18 @@ document.addEventListener("DOMContentLoaded", event => {
   });
 
   //Set the share links
-  $(".twitter-link").on("populate", function (e) {
+  document.querySelectorAll(".twitter-link")[0].addEventListener("populate", function (e) {
     var regexContributor = /contributor/g
     var regexSearcher = /searcher/g
     var valUrl = window.location.href.replace(regexContributor, 'public').replace(regexSearcher, 'public')
-    $('.twshare').attr("href", "https://twitter.com/intent/tweet?text=Check%20this%20resource%20from%20Coopedia%20:%20;original_referer=http%3A%2F%2F127.0.0.1%3A3000%2Fevenements&ref_src=twsrc%5Etfw&tw_p=tweetbutton&url=" + valUrl + "&");
+    document.querySelectorAll('.twshare')[0].setAttribute("href", "https://twitter.com/intent/tweet?text=Check%20this%20resource%20from%20Coopedia%20:%20;original_referer=http%3A%2F%2F127.0.0.1%3A3000%2Fevenements&ref_src=twsrc%5Etfw&tw_p=tweetbutton&url=" + valUrl + "&");
   });
 
-  $(".email-link").on("populate", function (e) {
+  document.querySelectorAll(".email-link")[0].addEventListener("populate", function (e) {
     var regexContributor = /contributor/g
     var regexSearcher = /searcher/g
     var valUrl = window.location.href.replace(regexContributor, 'public').replace(regexSearcher, 'public')
-    $('.emshare').attr("href", "mailto:?subject=Coopedia%20shared%20resource&body=I%20share%20you%20this%20resource%20from%20Coopedia%20:%20" + valUrl);
+    document.querySelectorAll('.emshare')[0].setAttribute("href", "mailto:?subject=Coopedia%20shared%20resource&body=I%20share%20you%20this%20resource%20from%20Coopedia%20:%20" + valUrl);
   });
 
   //Refresh pagination