diff --git a/README.md b/README.md index c581e8e..ee79efa 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,7 @@ To configure the chat, just use the object passed on IASChat instantiation. *Bol - topbarColor: Color Chat topbar text and icons color - buttonBg: Color Show button background color - buttonColor: Color Show button text/icon color + - buttonIcon: String Image URI for the icon you want to add in the open button. SVG or PNG recommended, but all image types should work - inputBorderColor: Color Chat text input border bottom color - container: String Container for chat (*#identifier* or *.className*) - hashSign: String Symbol or string to add before url hash when chat open (Default: '?'. I.e.: url#existentHash**?**ias=true) diff --git a/demo/index.html b/demo/index.html index 3b78f74..0edf122 100644 --- a/demo/index.html +++ b/demo/index.html @@ -54,6 +54,7 @@

User side support

button: true, // topbarBg: 'lightgrey', // topbarColor: '#000', + // buttonIcon: 'http://simpleicon.com/wp-content/uploads/rocket.png', // buttonBg: 'red', // buttonColor: '#ccc', // inputBorderColor: 'rgba(0, 0, 0, .2)', diff --git a/dist/chat.js b/dist/chat.js index 7f01ae0..371fa41 100644 --- a/dist/chat.js +++ b/dist/chat.js @@ -13,6 +13,7 @@ function IASChat(config) { var topbarColor = config.topbarColor || textColor; var buttonBg = config.buttonBg || mainColor; var buttonColor = config.buttonColor || textColor; + var buttonIcon = config.buttonIcon || null; var inputBorderColor = config.inputBorderColor || mainColor; var defaultSupportName = config.defaultSupportName || 'Support chat'; var defaultSupportPic = config.defaultSupportPic || 'https://s3.amazonaws.com/uifaces/faces/twitter/robertovivancos/128.jpg'; @@ -43,6 +44,9 @@ function IASChat(config) { var attatchment = null; + var lastHash = ''; + var lastPage = ''; + // Listen event submit if(show) { show.addEventListener('click', showIAS.bind(this)); @@ -60,12 +64,8 @@ function IASChat(config) { // Set user setUser(config); - // Check url hash visibility - if(visibilityUrlHash() === true) { - showIAS(); - } else { - hideIAS(); - } + // Detect hash change to update IAS visibility + hashChange(); return { @@ -178,6 +178,16 @@ function IASChat(config) { form.children[1].style.margin = '0 16px'; form.children[1].style.width = 'calc(100% - 88px)'; } + + // If changed button icon + if(buttonIcon) { + var icon = document.createElement('img'); + icon.style.width = '24px'; + icon.style.height = '24px'; + icon.setAttribute('src', buttonIcon); + document.getElementById('ias-show').removeChild(document.getElementById('ias-show').firstChild); + document.getElementById('ias-show').appendChild(icon); + } } @@ -366,15 +376,47 @@ function IASChat(config) { } else { window.location.hash += '#ias=true'; } + + lastPage = window.location.href.split('#')[0] + + setTimeout(hashChange, 300); } } function remUrlHash() { if(window.location.hash) { - if(window.location.hash.indexOf( hashSign + 'ias=true') !== -1) { - window.location.hash = window.location.hash.replace( hashSign + 'ias=true', ''); - } else if(window.location.hash.indexOf('#ias=true') !== -1) { - window.location.hash = window.location.hash.replace('ias=true', ''); + + if(lastPage === window.location.href.split('#')[0] && (lastHash.indexOf( hashSign + 'ias=true') !== -1 || lastHash.indexOf('#ias=true') !== -1)) { + window.history.back(); + } else { + if(window.location.hash.indexOf( hashSign + 'ias=true') !== -1) { + window.location.hash = window.location.hash.replace( hashSign + 'ias=true', ''); + } else if(window.location.hash.indexOf('#ias=true') !== -1) { + window.location.hash = window.location.hash.replace('ias=true', ''); + } + } + } + } + + function hashChange() { + + var isHash = visibilityUrlHash(); + + if(window.location.hash !== lastHash) { + + lastHash = window.location.hash; + + if(isHash) { + showIAS(); + } else { + hideIAS(); + } + + setTimeout(hashChange, 300); + + } else { + if(isHash) { + setTimeout(hashChange, 300); } } } diff --git a/js/chat.js b/js/chat.js index c530723..ac0a7e1 100644 --- a/js/chat.js +++ b/js/chat.js @@ -13,6 +13,7 @@ function IASChat(config) { var topbarColor = config.topbarColor || textColor; var buttonBg = config.buttonBg || mainColor; var buttonColor = config.buttonColor || textColor; + var buttonIcon = config.buttonIcon || null; var inputBorderColor = config.inputBorderColor || mainColor; var defaultSupportName = config.defaultSupportName || 'Support chat'; var defaultSupportPic = config.defaultSupportPic || 'https://s3.amazonaws.com/uifaces/faces/twitter/robertovivancos/128.jpg'; @@ -43,6 +44,9 @@ function IASChat(config) { var attatchment = null; + var lastHash = ''; + var lastPage = ''; + // Listen event submit if(show) { show.addEventListener('click', showIAS.bind(this)); @@ -60,12 +64,8 @@ function IASChat(config) { // Set user setUser(config); - // Check url hash visibility - if(visibilityUrlHash() === true) { - showIAS(); - } else { - hideIAS(); - } + // Detect hash change to update IAS visibility + hashChange(); return { @@ -178,6 +178,16 @@ function IASChat(config) { form.children[1].style.margin = '0 16px'; form.children[1].style.width = 'calc(100% - 88px)'; } + + // If changed button icon + if(buttonIcon) { + var icon = document.createElement('img'); + icon.style.width = '24px'; + icon.style.height = '24px'; + icon.setAttribute('src', buttonIcon); + document.getElementById('ias-show').removeChild(document.getElementById('ias-show').firstChild); + document.getElementById('ias-show').appendChild(icon); + } } @@ -366,15 +376,47 @@ function IASChat(config) { } else { window.location.hash += '#ias=true'; } + + lastPage = window.location.href.split('#')[0] + + setTimeout(hashChange, 300); } } function remUrlHash() { if(window.location.hash) { - if(window.location.hash.indexOf( hashSign + 'ias=true') !== -1) { - window.location.hash = window.location.hash.replace( hashSign + 'ias=true', ''); - } else if(window.location.hash.indexOf('#ias=true') !== -1) { - window.location.hash = window.location.hash.replace('ias=true', ''); + + if(lastPage === window.location.href.split('#')[0] && (lastHash.indexOf( hashSign + 'ias=true') !== -1 || lastHash.indexOf('#ias=true') !== -1)) { + window.history.back(); + } else { + if(window.location.hash.indexOf( hashSign + 'ias=true') !== -1) { + window.location.hash = window.location.hash.replace( hashSign + 'ias=true', ''); + } else if(window.location.hash.indexOf('#ias=true') !== -1) { + window.location.hash = window.location.hash.replace('ias=true', ''); + } + } + } + } + + function hashChange() { + + var isHash = visibilityUrlHash(); + + if(window.location.hash !== lastHash) { + + lastHash = window.location.hash; + + if(isHash) { + showIAS(); + } else { + hideIAS(); + } + + setTimeout(hashChange, 300); + + } else { + if(isHash) { + setTimeout(hashChange, 300); } } }