Skip to content

Commit e454370

Browse files
CodingCarlosCodingCarlos
authored
Merge pull request #16 from CodingCarlos/dev
Fixed #14
2 parents fdeabf1 + 1ac4b12 commit e454370

File tree

4 files changed

+106
-20
lines changed

4 files changed

+106
-20
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ To configure the chat, just use the object passed on IASChat instantiation. *Bol
4242
- topbarColor: Color Chat topbar text and icons color
4343
- buttonBg: Color Show button background color
4444
- buttonColor: Color Show button text/icon color
45+
- 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
4546
- inputBorderColor: Color Chat text input border bottom color
4647
- container: String Container for chat (*#identifier* or *.className*)
4748
- hashSign: String Symbol or string to add before url hash when chat open (Default: '?'. I.e.: url#existentHash**?**ias=true)

‎demo/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ <h1>User side support</h1>
5454
button: true,
5555
// topbarBg: 'lightgrey',
5656
// topbarColor: '#000',
57+
// buttonIcon: 'http://simpleicon.com/wp-content/uploads/rocket.png',
5758
// buttonBg: 'red',
5859
// buttonColor: '#ccc',
5960
// inputBorderColor: 'rgba(0, 0, 0, .2)',

‎dist/chat.js

Lines changed: 52 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ function IASChat(config) {
1313
var topbarColor = config.topbarColor || textColor;
1414
var buttonBg = config.buttonBg || mainColor;
1515
var buttonColor = config.buttonColor || textColor;
16+
var buttonIcon = config.buttonIcon || null;
1617
var inputBorderColor = config.inputBorderColor || mainColor;
1718
var defaultSupportName = config.defaultSupportName || 'Support chat';
1819
var defaultSupportPic = config.defaultSupportPic || 'https://s3.amazonaws.com/uifaces/faces/twitter/robertovivancos/128.jpg';
@@ -43,6 +44,9 @@ function IASChat(config) {
4344

4445
var attatchment = null;
4546

47+
var lastHash = '';
48+
var lastPage = '';
49+
4650
// Listen event submit
4751
if(show) {
4852
show.addEventListener('click', showIAS.bind(this));
@@ -60,12 +64,8 @@ function IASChat(config) {
6064
// Set user
6165
setUser(config);
6266

63-
// Check url hash visibility
64-
if(visibilityUrlHash() === true) {
65-
showIAS();
66-
} else {
67-
hideIAS();
68-
}
67+
// Detect hash change to update IAS visibility
68+
hashChange();
6969

7070

7171
return {
@@ -178,6 +178,16 @@ function IASChat(config) {
178178
form.children[1].style.margin = '0 16px';
179179
form.children[1].style.width = 'calc(100% - 88px)';
180180
}
181+
182+
// If changed button icon
183+
if(buttonIcon) {
184+
var icon = document.createElement('img');
185+
icon.style.width = '24px';
186+
icon.style.height = '24px';
187+
icon.setAttribute('src', buttonIcon);
188+
document.getElementById('ias-show').removeChild(document.getElementById('ias-show').firstChild);
189+
document.getElementById('ias-show').appendChild(icon);
190+
}
181191
}
182192

183193

@@ -366,15 +376,47 @@ function IASChat(config) {
366376
} else {
367377
window.location.hash += '#ias=true';
368378
}
379+
380+
lastPage = window.location.href.split('#')[0]
381+
382+
setTimeout(hashChange, 300);
369383
}
370384
}
371385

372386
function remUrlHash() {
373387
if(window.location.hash) {
374-
if(window.location.hash.indexOf( hashSign + 'ias=true') !== -1) {
375-
window.location.hash = window.location.hash.replace( hashSign + 'ias=true', '');
376-
} else if(window.location.hash.indexOf('#ias=true') !== -1) {
377-
window.location.hash = window.location.hash.replace('ias=true', '');
388+
389+
if(lastPage === window.location.href.split('#')[0] && (lastHash.indexOf( hashSign + 'ias=true') !== -1 || lastHash.indexOf('#ias=true') !== -1)) {
390+
window.history.back();
391+
} else {
392+
if(window.location.hash.indexOf( hashSign + 'ias=true') !== -1) {
393+
window.location.hash = window.location.hash.replace( hashSign + 'ias=true', '');
394+
} else if(window.location.hash.indexOf('#ias=true') !== -1) {
395+
window.location.hash = window.location.hash.replace('ias=true', '');
396+
}
397+
}
398+
}
399+
}
400+
401+
function hashChange() {
402+
403+
var isHash = visibilityUrlHash();
404+
405+
if(window.location.hash !== lastHash) {
406+
407+
lastHash = window.location.hash;
408+
409+
if(isHash) {
410+
showIAS();
411+
} else {
412+
hideIAS();
413+
}
414+
415+
setTimeout(hashChange, 300);
416+
417+
} else {
418+
if(isHash) {
419+
setTimeout(hashChange, 300);
378420
}
379421
}
380422
}

‎js/chat.js

Lines changed: 52 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ function IASChat(config) {
1313
var topbarColor = config.topbarColor || textColor;
1414
var buttonBg = config.buttonBg || mainColor;
1515
var buttonColor = config.buttonColor || textColor;
16+
var buttonIcon = config.buttonIcon || null;
1617
var inputBorderColor = config.inputBorderColor || mainColor;
1718
var defaultSupportName = config.defaultSupportName || 'Support chat';
1819
var defaultSupportPic = config.defaultSupportPic || 'https://s3.amazonaws.com/uifaces/faces/twitter/robertovivancos/128.jpg';
@@ -43,6 +44,9 @@ function IASChat(config) {
4344

4445
var attatchment = null;
4546

47+
var lastHash = '';
48+
var lastPage = '';
49+
4650
// Listen event submit
4751
if(show) {
4852
show.addEventListener('click', showIAS.bind(this));
@@ -60,12 +64,8 @@ function IASChat(config) {
6064
// Set user
6165
setUser(config);
6266

63-
// Check url hash visibility
64-
if(visibilityUrlHash() === true) {
65-
showIAS();
66-
} else {
67-
hideIAS();
68-
}
67+
// Detect hash change to update IAS visibility
68+
hashChange();
6969

7070

7171
return {
@@ -178,6 +178,16 @@ function IASChat(config) {
178178
form.children[1].style.margin = '0 16px';
179179
form.children[1].style.width = 'calc(100% - 88px)';
180180
}
181+
182+
// If changed button icon
183+
if(buttonIcon) {
184+
var icon = document.createElement('img');
185+
icon.style.width = '24px';
186+
icon.style.height = '24px';
187+
icon.setAttribute('src', buttonIcon);
188+
document.getElementById('ias-show').removeChild(document.getElementById('ias-show').firstChild);
189+
document.getElementById('ias-show').appendChild(icon);
190+
}
181191
}
182192

183193

@@ -366,15 +376,47 @@ function IASChat(config) {
366376
} else {
367377
window.location.hash += '#ias=true';
368378
}
379+
380+
lastPage = window.location.href.split('#')[0]
381+
382+
setTimeout(hashChange, 300);
369383
}
370384
}
371385

372386
function remUrlHash() {
373387
if(window.location.hash) {
374-
if(window.location.hash.indexOf( hashSign + 'ias=true') !== -1) {
375-
window.location.hash = window.location.hash.replace( hashSign + 'ias=true', '');
376-
} else if(window.location.hash.indexOf('#ias=true') !== -1) {
377-
window.location.hash = window.location.hash.replace('ias=true', '');
388+
389+
if(lastPage === window.location.href.split('#')[0] && (lastHash.indexOf( hashSign + 'ias=true') !== -1 || lastHash.indexOf('#ias=true') !== -1)) {
390+
window.history.back();
391+
} else {
392+
if(window.location.hash.indexOf( hashSign + 'ias=true') !== -1) {
393+
window.location.hash = window.location.hash.replace( hashSign + 'ias=true', '');
394+
} else if(window.location.hash.indexOf('#ias=true') !== -1) {
395+
window.location.hash = window.location.hash.replace('ias=true', '');
396+
}
397+
}
398+
}
399+
}
400+
401+
function hashChange() {
402+
403+
var isHash = visibilityUrlHash();
404+
405+
if(window.location.hash !== lastHash) {
406+
407+
lastHash = window.location.hash;
408+
409+
if(isHash) {
410+
showIAS();
411+
} else {
412+
hideIAS();
413+
}
414+
415+
setTimeout(hashChange, 300);
416+
417+
} else {
418+
if(isHash) {
419+
setTimeout(hashChange, 300);
378420
}
379421
}
380422
}

0 commit comments

Comments
 (0)