@websy/websy-designs 1.3.3 → 1.3.5

package/dist/server/helpers/v1/pgHelper.js

@@ -216,7 +216,13 @@ class PGHelper {
           let partValues = parts[1]
           partValues = partValues.split('|')
           if (partValues.length === 1) {
-            if (parts[1].indexOf('%') !== -1) {
+            if (parts[1].indexOf('>') !== -1) {
+              return `${entity ? entity + '.' : ''}${parts[0]} > '${parts[1].replace('>', '')}'`
+            }
+            else if (parts[1].indexOf('<') !== -1) {
+              return `${entity ? entity + '.' : ''}${parts[0]} < '${parts[1].replace('<', '')}'`
+            }
+            else if (parts[1].indexOf('%') !== -1) {
               return `${entity ? entity + '.' : ''}${parts[0]} LIKE '${parts[1]}'`
             }
             else {

package/dist/websy-designs-es6.debug.js

@@ -2217,7 +2217,7 @@ class WebsyLoadingDialog {
   }
 }
 
-/* global */ 
+/* global WebsyDesigns */ 
 class WebsyNavigationMenu {
   constructor (elementId, options) {
     this.options = Object.assign({}, {
@@ -2225,20 +2225,28 @@ class WebsyNavigationMenu {
       orientation: 'horizontal',
       parentMap: {},
       childIndentation: 10,
-      activeSymbol: 'none'
+      activeSymbol: 'none',
+      enableSearch: false,
+      searchProp: 'text',
+      menuIcon: `<svg viewbox="0 0 40 40" width="30" height="40">              
+        <rect x="0" y="0" width="30" height="4" rx="2"></rect>
+        <rect x="0" y="12" width="30" height="4" rx="2"></rect>
+        <rect x="0" y="24" width="30" height="4" rx="2"></rect>
+      </svg>`,
+      searchOptions: {}
     }, options)
     if (!elementId) {
       console.log('No element Id provided for Websy Menu')		
       return
     }    
+    this.maxLevel = 0
     const el = document.getElementById(elementId)
     if (el) {
       this.elementId = elementId
       this.lowestLevel = 0
       this.flatItems = []
       this.itemMap = {}
-      this.flattenItems(0, this.options.items)    
-      console.log(this.flatItems)
+      this.flattenItems(0, this.options.items)          
       el.classList.add(`websy-${this.options.orientation}-list-container`)
       el.classList.add('websy-menu')
       if (this.options.align) {
@@ -2250,27 +2258,27 @@ class WebsyNavigationMenu {
       if (this.options.classes) {
         this.options.classes.split(' ').forEach(c => el.classList.add(c))
       }
-      el.addEventListener('click', this.handleClick.bind(this))	
+      el.addEventListener('click', this.handleClick.bind(this))
       this.render()      
     }    
   }
-  flattenItems (index, items, level = 0) {
+  flattenItems (index, items, level = 0, path = '') {
     if (items[index]) {
       this.lowestLevel = Math.max(level, this.lowestLevel)
       items[index].id = items[index].id || 	`${this.elementId}_${this.normaliseString(items[index].text)}`
-      this.itemMap[items[index].id] = items[index]
       items[index].level = level
+      items[index].hasChildren = items[index].items && items[index].items.length > 0
+      items[index].path = path !== '' ? `${path}::${items[index].id}` : items[index].id
+      this.itemMap[items[index].id] = Object.assign({}, items[index])      
       this.flatItems.push(items[index])
       if (items[index].items) {
-        this.flattenItems(0, items[index].items, level + 1)  
+        this.flattenItems(0, items[index].items, level + 1, items[index].path)  
       }
-      this.flattenItems(++index, items, level)
+      this.flattenItems(++index, items, level, path)
     }    
   }
   handleClick (event) {
-    if (event.target.classList.contains('websy-menu-icon') || 
-      event.target.nodeName === 'svg' ||
-      event.target.nodeName === 'rect') {
+    if (event.target.classList.contains('websy-menu-icon')) {
       this.toggleMobileMenu()
     }
     if (event.target.classList.contains('websy-menu-header')) {
@@ -2278,7 +2286,7 @@ class WebsyNavigationMenu {
       if (event.target.classList.contains('trigger-item') && item.level === this.lowestLevel) {
         this.toggleMobileMenu('remove')
       } 
-      if (item.items) {
+      if (item.hasChildren === true) {
         event.target.classList.toggle('menu-open')
         this.toggleMenu(item.id)
       }
@@ -2287,6 +2295,42 @@ class WebsyNavigationMenu {
       this.toggleMobileMenu()
     }
   }
+  handleSearch (searchText) {
+    const el = document.getElementById(this.elementId)
+    let lowestItems = this.flatItems.filter(d => d.level === this.maxLevel)
+    let visibleItems = lowestItems
+    let defaultMethod = 'remove'
+    if (searchText.length > 1) {
+      defaultMethod = 'add'
+      visibleItems = lowestItems.filter(d => d[this.options.searchProp].toLowerCase().indexOf(searchText.toLowerCase()) !== -1)
+    }
+    // hide everything
+    const textEls = el.querySelectorAll(`div.websy-menu-header`)
+    for (let t = 0; t < textEls.length; t++) {
+      textEls[t].classList[defaultMethod]('websy-hidden')
+    }
+    const listEls = el.querySelectorAll(`ul.websy-child-list`)
+    for (let l = 0; l < listEls.length; l++) {
+      listEls[l].classList.add('websy-menu-collapsed')
+    }
+    if (searchText.length > 1) {
+      visibleItems.forEach(d => {      
+        // show the item and open the list
+        let pathParts = d.path.split('::')
+        pathParts.forEach(p => {
+          const textEl = document.getElementById(p)    
+          if (textEl) {
+            textEl.classList.remove('websy-hidden')          
+          }              
+          const listEl = document.getElementById(`${p}_list`)          
+          if (listEl) {
+            listEl.classList.remove('websy-menu-collapsed')
+          }        
+        })        
+      })
+    }
+    console.log('visibleItems', visibleItems)
+  }
   normaliseString (text) {
     return text.replace(/-/g, '').replace(/\s/g, '_')
   }
@@ -2297,14 +2341,10 @@ class WebsyNavigationMenu {
       if (this.options.collapsible === true) {
         html += `
           <div id='${this.elementId}_menuIcon' class='websy-menu-icon'>
-            <svg viewbox="0 0 40 40" width="30" height="40">              
-              <rect x="0" y="0" width="30" height="4" rx="2"></rect>
-              <rect x="0" y="12" width="30" height="4" rx="2"></rect>
-              <rect x="0" y="24" width="30" height="4" rx="2"></rect>
-            </svg>
+            ${this.options.menuIcon}
           </div>
         `
-      }
+      }      
       if (this.options.logo) {
         if (Array.isArray(this.options.logo.classes)) {
           this.options.logo.classes = this.options.logo.classes.join(' ')
@@ -2320,14 +2360,25 @@ class WebsyNavigationMenu {
           <div id="${this.elementId}_menuContainer" class="websy-menu-block-container">
         `
       }
-      html += this.renderBlock(this.options.items, 'main', 0)
+      if (this.options.enableSearch === true) {
+        html += `
+          <div id='${this.elementId}_search' class='websy-menu-search'></div>
+        `
+      }
+      html += this.renderBlock(this.elementId, this.elementId, this.options.items, 'main', 0)
       html += `</div>`
       el.innerHTML = html
+      if (this.options.enableSearch === true) {
+        this.search = new WebsyDesigns.Search(`${this.elementId}_search`, Object.assign({}, {
+          onSearch: this.handleSearch.bind(this)
+        }, this.options.searchOptions))
+      }
     }
   }
-  renderBlock (items, block, level = 0) {
+  renderBlock (id, path, items, block, level = 0) {
+    this.maxLevel = Math.max(this.maxLevel, level)
     let html = `
-		  <ul class='websy-${this.options.orientation}-list ${level > 0 ? 'websy-child-list' : ''} ${(block !== 'main' ? 'websy-menu-collapsed' : '')}' id='${this.elementId}_${block}_list'
+		  <ul class='websy-${this.options.orientation}-list ${level > 0 ? 'websy-child-list' : ''} ${(block !== 'main' ? 'websy-menu-collapsed' : '')}' id='${id}_list' data-path='${path}'
 	  `	
     if (block !== 'main') {
       html += ` data-collapsed='${(block !== 'main' ? 'true' : 'false')}'`
@@ -2345,13 +2396,14 @@ class WebsyNavigationMenu {
       html += `
 			<li class='websy-${this.options.orientation}-list-item ${items[i].alwaysOpen === true ? 'always-open' : ''}'>
 				<div class='websy-menu-header ${items[i].classes || ''} ${selected} ${active}' 
-						 id='${blockId}' 
-						 data-id='${currentBlock}'
-             data-menu-id='${this.elementId}_${currentBlock}_list'
-						 data-popout-id='${level > 1 ? block : currentBlock}'
-						 data-text='${items[i].isLink !== true ? items[i].text : ''}'
-						 style='padding-left: ${level * this.options.childIndentation}px'
-						 ${(items[i].attributes && items[i].attributes.join(' ')) || ''}
+          id='${blockId}' 
+          data-id='${currentBlock}'
+          data-path='${items[i].path}'
+          data-menu-id='${this.elementId}_${currentBlock}_list'
+          data-popout-id='${level > 1 ? block : currentBlock}'
+          data-text='${items[i].isLink !== true ? items[i].text : ''}'
+          style='padding-left: ${level * this.options.childIndentation}px'
+          ${(items[i].attributes && items[i].attributes.join(' ')) || ''}
         >
       `      
       if (this.options.orientation === 'horizontal') {
@@ -2371,9 +2423,9 @@ class WebsyNavigationMenu {
           <span class='${items[i].items && items[i].items.length > 0 ? 'menu-carat' : ''}'></span>
       `
       if (this.options.orientation === 'vertical') {
-        html += `
-          &nbsp;
-        `
+        // html += `
+        //   &nbsp;
+        // `
       }
       if (items[i].isLink === true && items[i].href) {
         html += `<a href='${items[i].href}'>${items[i].text}</a>`
@@ -2382,7 +2434,7 @@ class WebsyNavigationMenu {
 				</div>
 		  `
       if (items[i].items) {
-        html += this.renderBlock(items[i].items, currentBlock, items[i].level + 1)			
+        html += this.renderBlock(blockId, items[i].path, items[i].items, currentBlock, items[i].level + 1)			
       }
       // map the item to it's parent
       if (block && block !== 'main') {
@@ -2399,6 +2451,8 @@ class WebsyNavigationMenu {
   }  
   toggleMenu (id) {
     const el = document.getElementById(`${id}_list`)
+    // const menuId = el.getAttribute('data-menu-id')
+    // const menuEl = document.getElementById(menuId)
     if (el) {
       el.classList.toggle('websy-menu-collapsed')
     }
@@ -3089,7 +3143,7 @@ class WebsyResultList {
     const el = document.getElementById(this.elementId)
     el.innerHTML += html.replace(/\n/g, '')
   }
-  buildHTML (d, startIndex = 0, inputTemplate) {
+  buildHTML (d, startIndex = 0, inputTemplate, locator = []) {
     let html = ``
     if (this.options.template) {      
       if (d.length > 0) {
@@ -3191,13 +3245,13 @@ class WebsyResultList {
               parts.forEach(p => {
                 items = items[p]
               })
-              template = template.replace(m[0], this.buildHTML(items, 0, withoutFor))              
+              template = template.replace(m[0], this.buildHTML(items, 0, withoutFor, [...locator, `${startIndex + ix}:${c}`]))              
             }
           })
           let tagMatches = [...template.matchAll(/(\sdata-event=["|']\w.+)["|']/g)]
           tagMatches.forEach(m => {
             if (m[0] && m.index > -1) {
-              template = template.replace(m[0], `${m[0]} data-id=${startIndex + ix}`)
+              template = template.replace(m[0], `${m[0]} data-id=${startIndex + ix} data-locator='${locator.join(';')}'`)
             }
           })         
           let flatRow = this.flattenObject(row) 
@@ -3258,15 +3312,30 @@ class WebsyResultList {
         l = l.split('(')
         let params = []
         const id = event.target.getAttribute('data-id')
+        const locator = event.target.getAttribute('data-locator')
         if (l[1]) {
           l[1] = l[1].replace(')', '')
           params = l[1].split(',')      
         }
         l = l[0]
+        let data = this.rows
+        if (locator !== '') {
+          let locatorItems = locator.split(';')
+          locatorItems.forEach(loc => {
+            let locatorParts = loc.split(':')
+            if (data[locatorParts[0]]) {
+              data = data[locatorParts[0]]
+              let parts = locatorParts[1].split('.')
+              parts.forEach(p => {
+                data = data[p]
+              })              
+            }
+          })
+        }
         params = params.map(p => {
           if (typeof p !== 'string' && typeof p !== 'number') {
-            if (this.rows[+id]) {
-              p = this.rows[+id][p]
+            if (data[+id]) {
+              p = data[+id][p]
             }
           }
           else if (typeof p === 'string') {
@@ -3276,7 +3345,7 @@ class WebsyResultList {
         })
         if (event.target.classList.contains('clickable') && this.options.listeners.click[l]) {      
           event.stopPropagation()
-          this.options.listeners.click[l].call(this, event, this.rows[+id], ...params)
+          this.options.listeners.click[l].call(this, event, data[+id], ...params)
         }  
       }
     }
@@ -3321,7 +3390,14 @@ class WebsyRouter {
     this.previousView = ''
     this.currentView = ''
     this.currentViewMain = ''
-    this.currentParams = {}
+    this.currentParams = {
+      path: '',
+      items: {}
+    }
+    this.previousParams = {
+      path: '',
+      items: {}
+    }
     this.controlPressed = false
     this.usesHTMLSuffix = window.location.pathname.indexOf('.htm') !== -1
     window.addEventListener('popstate', this.onPopState.bind(this))
@@ -3362,10 +3438,11 @@ class WebsyRouter {
       } 
     }    
   }
-  addUrlParams (params) {    
+  addUrlParams (params, reloadView = false) {    
     if (typeof params === 'undefined') {
       return
     }
+    this.previousParams = Object.assign({}, this.currentParams)
     const output = {
       path: '',
       items: {}
@@ -3387,6 +3464,9 @@ class WebsyRouter {
     history.pushState({
       inputPath
     }, inputPath, `${inputPath}?${path}`) 
+    if (reloadView === true) {
+      this.showView(this.currentView, this.currentParams, 'main')
+    }
   }
   buildUrlPath (params) {
     let path = []
@@ -3415,6 +3495,7 @@ class WebsyRouter {
     }
   }
   formatParams (params) {
+    this.previousParams = Object.assign({}, this.currentParams)
     const output = {
       path: params,
       items: {}
@@ -3634,6 +3715,10 @@ class WebsyRouter {
     if (this.previousView !== this.currentView || group !== 'main') {
       this.showComponents(view)
       this.publish('show', [view, params, group]) 
+    }       
+    if (this.previousView === this.currentView && this.previousParams.path !== this.currentParams.path) { 
+      this.showComponents(view)
+      this.publish('show', [view, params, group]) 
     }    
   }
   reloadCurrentView () {
@@ -3649,17 +3734,14 @@ class WebsyRouter {
     let groupActiveView
     let params = {}       
     let newPath = inputPath    
-    if (inputPath === this.options.defaultView && this.usesHTMLSuffix === false) {
+    if (inputPath.split('?')[0] === this.options.defaultView && this.usesHTMLSuffix === false) {
       inputPath = inputPath.replace(this.options.defaultView, '/')
     }    
     if (this.options.persistentParameters === true) {
       if (inputPath.indexOf('?') === -1 && this.queryParams) {
         inputPath += `?${this.queryParams}`
       }
-    }   
-    else {
-      this.currentParams = {}
-    } 
+    }     
     if (this.usesHTMLSuffix === true) {
       if (inputPath.indexOf('?') === -1) {
         inputPath = `?view=${inputPath}`
@@ -3680,7 +3762,11 @@ class WebsyRouter {
       inputPath = parts[0]
     }
     else if (group === this.options.defaultGroup) {
-      this.currentParams = {}
+      this.previousParams = Object.assign({}, this.currentParams)
+      this.currentParams = {
+        path: '',
+        items: {}
+      }
     }
     if (event) {
       if (event.target && event.target.classList.contains(this.options.triggerToggleClass)) {