Skip to content

Commit

Permalink
custom theme robot and user images are now set using javascript and n…
Browse files Browse the repository at this point in the history
…ot as overrides in theme scss. Fixes issue #315
  • Loading branch information
jenssogaard committed Oct 30, 2019
1 parent 082c606 commit ae288fa
Show file tree
Hide file tree
Showing 8 changed files with 92 additions and 62 deletions.
20 changes: 17 additions & 3 deletions src/scripts/cf/ConversationalForm.ts
Expand Up @@ -132,6 +132,7 @@ namespace cf {
public el: HTMLElement;
public chatList: ChatList;
public uiOptions: IUserInterfaceOptions;
public options:ConversationalFormOptions;
public preventSubmitOnEnter: boolean;

private context: HTMLElement;
Expand Down Expand Up @@ -251,25 +252,38 @@ namespace cf {
this.uiOptions = Helpers.extendObject(UserInterfaceDefaultOptions, options.userInterfaceOptions || {});
// console.log('this.uiOptions:', this.uiOptions);

this.options = options;

this.init();
}

public init(): ConversationalForm{
console.log(this.options)
switch(this.theme) {
case 'dark':
this.theme = 'conversational-form-dark.min.css';
if (!this.options.robotImage) this.updateDictionaryValue('robot-image', 'robot', "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%233A3A3C'/%3E%3Crect x='66' y='66' width='68' height='68' fill='%23E5E6EA'/%3E%3C/svg%3E%0A");
if (!this.options.userImage) this.updateDictionaryValue('user-image', 'user', "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23E5E6EA'/%3E%3Cpath d='M100 55L138.971 122.5H61.0289L100 55Z' fill='%233A3A3C'/%3E%3C/svg%3E%0A");
break;
case 'green':
this.theme = 'conversational-form-green.min.css';
if (!this.options.robotImage) this.updateDictionaryValue('robot-image', 'robot', "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23EEEFF0'/%3E%3Crect x='66' y='66' width='68' height='68' fill='%2300BF75'/%3E%3C/svg%3E%0A");
if (!this.options.userImage) this.updateDictionaryValue('user-image', 'user', "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%2300BF75'/%3E%3Cpath d='M100 55L138.971 122.5H61.0289L100 55Z' fill='%23EEEFF0'/%3E%3C/svg%3E%0A");
break;
case 'blue':
this.theme = 'conversational-form-irisblue.min.css';
if (!this.options.robotImage) this.updateDictionaryValue('robot-image', 'robot', "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23E8E9EB'/%3E%3Crect x='66' y='66' width='68' height='68' fill='%2300C2DF'/%3E%3C/svg%3E%0A");
if (!this.options.userImage) this.updateDictionaryValue('user-image', 'user', "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%2300C2DF'/%3E%3Cpath d='M100 55L138.971 122.5H61.0289L100 55Z' fill='%23E8E9EB'/%3E%3C/svg%3E%0A");
break;
case 'purple':
this.theme = 'conversational-form-purple.min.css';
if (!this.options.robotImage) this.updateDictionaryValue('robot-image', 'robot', "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23EEEFF0'/%3E%3Crect x='66' y='66' width='68' height='68' fill='%235A1DE4'/%3E%3C/svg%3E%0A");
if (!this.options.userImage) this.updateDictionaryValue('user-image', 'user', "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%235A1DE4'/%3E%3Cpath d='M100 55L138.971 122.5H61.0289L100 55Z' fill='%23EEEFF0'/%3E%3C/svg%3E%0A");
break;
case 'red':
this.theme = 'conversational-form-red.min.css';
if (!this.options.robotImage) this.updateDictionaryValue('robot-image', 'robot', "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23E8E9EB'/%3E%3Crect x='66' y='66' width='68' height='68' fill='%23FF3233'/%3E%3C/svg%3E%0A");
if (!this.options.userImage) this.updateDictionaryValue('user-image', 'user', "data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23FF3233'/%3E%3Cpath d='M100 55L138.971 122.5H61.0289L100 55Z' fill='%23E8E9EB'/%3E%3C/svg%3E%0A");
break;
default:
this.theme = 'conversational-form.min.css';
Expand Down Expand Up @@ -367,9 +381,9 @@ namespace cf {
public updateDictionaryValue(id:string, type: string, value: string){
Dictionary.set(id, type, value);

if(["robot-image", "user-image"].indexOf(id) != -1){
this.chatList.updateThumbnail(id == "robot-image", value);
}
// if(["robot-image", "user-image"].indexOf(id) != -1){
// this.chatList.updateThumbnail(id == "robot-image", value);
// }
}

public getFormData(serialized: boolean = false): FormData | any{
Expand Down
25 changes: 0 additions & 25 deletions src/styles/conversational-form-dark.scss
Expand Up @@ -8,9 +8,6 @@

$cf-color-background: #2C2C2E;
$cf-color-chat-response-user-bg: #E5E6EA;
// $cf-base-font-size: 18px; // MERGED
// $cf-input-field-height: relativeValue(40px); // MERGED
// $cf-chat-response-border-radius: relativeValue(16px); // MERGED

@import "./conversational-form.scss";

Expand All @@ -24,23 +21,14 @@ cf-chat-response.robot text > p {
cf-chat-response.user text > p {
background: #E5E6EA;
color: #303030;
// padding: 13px 21px 13px 21px;
}

cf-chat-response {
// padding-left: 64px;

& thumb {
background-color: inherit;
// width: 50px;
// height: 50px;
}
}

// cf-chat-response.user {
// padding-right: 64px;
// }

.cf-button {
border: 1px solid rgba($cf-color-secondary, 1);
color: $cf-color-secondary;
Expand All @@ -55,7 +43,6 @@ cf-chat-response {
}

&[selected="selected"], &[checked="checked"] {
// TODO
&:not(:focus):not(:hover):not(.highlight) {
color: $cf-color-primary;
background: $cf-color-secondary;
Expand Down Expand Up @@ -141,18 +128,6 @@ cf-input-button {
background: #3A3A3C !important;
}

// cf-chat-response text > p:not(:only-child):not(:first-child) {
// margin-top: 12px;
// }

cf-chat-response.robot thumb {
background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%233A3A3C'/%3E%3Crect x='66' y='66' width='68' height='68' fill='%23E5E6EA'/%3E%3C/svg%3E%0A") !important;
}

cf-chat-response.user thumb {
background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23E5E6EA'/%3E%3Cpath d='M100 55L138.971 122.5H61.0289L100 55Z' fill='%233A3A3C'/%3E%3C/svg%3E%0A") !important;
}

.cf-progressBar {
background-color: $cf-color-primary;

Expand Down
8 changes: 0 additions & 8 deletions src/styles/conversational-form-green.scss
Expand Up @@ -4,11 +4,3 @@ $cf-color-primary: #00bf75;
$cf-color-secondary: #eeeff0;

@import "./conversational-form";

cf-chat-response.robot thumb {
background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='" + encodecolor($cf-color-secondary) + "'/%3E%3Crect x='66' y='66' width='68' height='68' fill='" + encodecolor($cf-color-primary) + "'/%3E%3C/svg%3E%0A") !important;
}

cf-chat-response.user thumb {
background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='" + encodecolor($cf-color-primary) + "'/%3E%3Cpath d='M100 55L138.971 122.5H61.0289L100 55Z' fill='" + encodecolor($cf-color-secondary) + "'/%3E%3C/svg%3E%0A") !important;
}
8 changes: 0 additions & 8 deletions src/styles/conversational-form-irisblue.scss
Expand Up @@ -4,11 +4,3 @@ $cf-color-primary: #00c2df;
$cf-color-secondary: #e8e9eb;

@import "./conversational-form";

cf-chat-response.robot thumb {
background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='" + encodecolor($cf-color-secondary) + "'/%3E%3Crect x='66' y='66' width='68' height='68' fill='" + encodecolor($cf-color-primary) + "'/%3E%3C/svg%3E%0A") !important;
}

cf-chat-response.user thumb {
background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='" + encodecolor($cf-color-primary) + "'/%3E%3Cpath d='M100 55L138.971 122.5H61.0289L100 55Z' fill='" + encodecolor($cf-color-secondary) + "'/%3E%3C/svg%3E%0A") !important;
}
8 changes: 0 additions & 8 deletions src/styles/conversational-form-purple.scss
Expand Up @@ -4,11 +4,3 @@ $cf-color-primary: #5a1de4;
$cf-color-secondary: #eeeff0;

@import "./conversational-form";

cf-chat-response.robot thumb {
background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='" + encodecolor($cf-color-secondary) + "'/%3E%3Crect x='66' y='66' width='68' height='68' fill='" + encodecolor($cf-color-primary) + "'/%3E%3C/svg%3E%0A") !important;
}

cf-chat-response.user thumb {
background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='" + encodecolor($cf-color-primary) + "'/%3E%3Cpath d='M100 55L138.971 122.5H61.0289L100 55Z' fill='" + encodecolor($cf-color-secondary) + "'/%3E%3C/svg%3E%0A") !important;
}
8 changes: 0 additions & 8 deletions src/styles/conversational-form-red.scss
Expand Up @@ -4,11 +4,3 @@ $cf-color-primary: #ff3233;
$cf-color-secondary: #e8e9eb;

@import "./conversational-form";

cf-chat-response.robot thumb {
background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='" + encodecolor($cf-color-secondary) + "'/%3E%3Crect x='66' y='66' width='68' height='68' fill='" + encodecolor($cf-color-primary) + "'/%3E%3C/svg%3E%0A") !important;
}

cf-chat-response.user thumb {
background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='" + encodecolor($cf-color-primary) + "'/%3E%3Cpath d='M100 55L138.971 122.5H61.0289L100 55Z' fill='" + encodecolor($cf-color-secondary) + "'/%3E%3C/svg%3E%0A") !important;
}
4 changes: 2 additions & 2 deletions src/styles/ui/chat/_cf-chat-response.scss
Expand Up @@ -258,8 +258,8 @@ cf-chat-response {
height: $cf-avatar-area;
border-radius: 50%;
background: $cf-avatar-background;
// background-size: cover;
background-size: $cf-avatar-size;
background-size: cover;
// background-size: $cf-avatar-size;
background-repeat: no-repeat;
background-position: 50% 50%;
opacity: 0;
Expand Down
73 changes: 73 additions & 0 deletions tests/userAndRobotImage.js
@@ -0,0 +1,73 @@
describe('Custom user and robot images', function() {
var photo = 'https://space10-community.github.io/conversational-form/landingpage/photo2.jpg';

var tags = [
{
"tag": "input",
"type": "text",
"name": "max-min-length",
"minlength": 5,
"maxlength": 15,
}
];

var instanceDefault = window.cf.ConversationalForm.startTheConversation({
"options": {
formEl: document.createElement("form"),
"submitCallback": function(){},
},
"tags": tags
});

var instanceRobotImage = window.cf.ConversationalForm.startTheConversation({
"options": {
formEl: document.createElement("form"),
"submitCallback": function(){},
robotImage: photo,
userImage: photo,
},
"tags": tags
});

var instanceDark = window.cf.ConversationalForm.startTheConversation({
"options": {
formEl: document.createElement("form"),
"submitCallback": function(){},
theme: 'dark'
},
"tags": tags
});

var instanceDarkRobotImage = window.cf.ConversationalForm.startTheConversation({
"options": {
formEl: document.createElement("form"),
"submitCallback": function(){},
robotImage: photo,
userImage: photo,
theme: 'dark'
},
"tags": tags
});

it('Theme should have a svg as value (default)', function() {
expect(instanceDefault.dictionary.robotData['robot-image']).toContain('svg+xml');
expect(instanceDefault.dictionary.data['user-image']).toContain('svg+xml');
});

it('Theme should have custom photo as robotImage', function() {
expect(instanceRobotImage.dictionary.robotData['robot-image']).toEqual(photo);
expect(instanceRobotImage.dictionary.data['user-image']).toEqual(photo);
});

it('Dark Theme should have a svg as value (default)', function() {
expect(instanceDark.dictionary.robotData['robot-image']).toContain('svg+xml');
expect(instanceDark.dictionary.data['user-image']).toContain('svg+xml');
});

it('Dark Theme should have custom photo as robotImage', function() {
expect(instanceDarkRobotImage.dictionary.robotData['robot-image']).toEqual(photo);
expect(instanceDarkRobotImage.dictionary.data['user-image']).toEqual(photo);
});


});

0 comments on commit ae288fa

Please sign in to comment.