Skip to content

Commit

Permalink
messages also accept string instead of object
Browse files Browse the repository at this point in the history
  • Loading branch information
@moinism
moinism committed Jul 6, 2017
1 parent 1ed9849 commit ef241ec
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 28 deletions.
36 changes: 25 additions & 11 deletions build/botui.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* botui 0.1.4
* botui 0.1.5
* A JS library to build the UI for your bot
* https://botui.moin.im
*
Expand Down Expand Up @@ -40,6 +40,7 @@
debug: false,
fontawesome: true
},
_container, // the outermost Element. Needed to scroll to bottom, for now.
_interface = {}, // methods returned by a BotUI() instance.
_actionResolve,
_markDownRegex = {
Expand Down Expand Up @@ -98,7 +99,7 @@
}

var _botuiComponent = {
template: '<div class=\"botui botui-container\"><div class=\"botui-messages-container\"><div v-for=\"msg in messages\"><transition name=\"slide-fade\"><div class=\"botui-message\" v-if=\"msg.visible\" :class=\"msg.cssClass\"><div :class=\"[{human: msg.human, \'botui-message-content\': true}, msg.type]\" v-botui-scroll><span v-if=\"msg.type == \'text\'\" v-text=\"msg.content\" v-botui-markdown></span> <iframe v-if=\"msg.type == \'embed\'\" :src=\"msg.content\" frameborder=\"0\" allowfullscreen></iframe></div></div></transition></div></div><div class=\"botui-actions-container\"><transition name=\"slide-fade\"><div v-if=\"action.show\" v-botui-scroll><form v-if=\"action.type == \'text\'\" class=\"botui-actions-text\" @submit.prevent=\"handle_action_text()\" :class=\"action.cssClass\"> <input type=\"text\" ref=\"input\" :type=\"action.text.sub_type\" v-model=\"action.text.value\" class=\"botui-actions-text-input\" :placeholder=\"action.text.placeholder\" :size=\"action.text.size\" :value=\"action.text.value\" :value=\"action.text.cssClass\" required/> <button v-if=\"isMobile\" class=\"botui-actions-text-submit\">Go</button></form><div v-if=\"action.type == \'button\'\" class=\"botui-actions-buttons\" :class=\"action.cssClass\"> <button type=\"button\" :class=\"button.cssClass\" class=\"botui-actions-buttons-button\" v-for=\"button in action.button.buttons\" @click=\"handle_action_button(button)\" autofocus><i v-if=\"button.icon\" class=\"botui-icon botui-action-button-icon fa\" :class=\"\'fa-\' + button.icon\"></i> {{button.text}}</button></div></div></transition></div></div>', // replaced by HTML template during build. see Gulpfile.js
template: '<div class=\"botui botui-container\" v-botui-container><div class=\"botui-messages-container\"><div v-for=\"msg in messages\" v-botui-scroll><transition name=\"slide-fade\"><div class=\"botui-message\" v-if=\"msg.visible\" :class=\"msg.cssClass\"><div :class=\"[{human: msg.human, \'botui-message-content\': true}, msg.type]\"><span v-if=\"msg.type == \'text\'\" v-text=\"msg.content\" v-botui-markdown></span> <iframe v-if=\"msg.type == \'embed\'\" :src=\"msg.content\" frameborder=\"0\" allowfullscreen></iframe></div></div></transition></div></div><div class=\"botui-actions-container\"><transition name=\"slide-fade\"><div v-if=\"action.show\" v-botui-scroll><form v-if=\"action.type == \'text\'\" class=\"botui-actions-text\" @submit.prevent=\"handle_action_text()\" :class=\"action.cssClass\"> <input type=\"text\" ref=\"input\" :type=\"action.text.sub_type\" v-model=\"action.text.value\" class=\"botui-actions-text-input\" :placeholder=\"action.text.placeholder\" :size=\"action.text.size\" :value=\"action.text.value\" :class=\"action.text.cssClass\" required/> <button v-if=\"isMobile\" class=\"botui-actions-text-submit\">Go</button></form><div v-if=\"action.type == \'button\'\" class=\"botui-actions-buttons\" :class=\"action.cssClass\"> <button type=\"button\" :class=\"button.cssClass\" class=\"botui-actions-buttons-button\" v-for=\"button in action.button.buttons\" @click=\"handle_action_button(button)\" autofocus><i v-if=\"button.icon\" class=\"botui-icon botui-action-button-icon fa\" :class=\"\'fa-\' + button.icon\"></i> {{button.text}}</button></div></div></transition></div></div>', // replaced by HTML template during build. see Gulpfile.js
data: function () {
return {
action: {
Expand Down Expand Up @@ -141,16 +142,20 @@
}
};

root.Vue.directive('botui-markdown', {
inserted: function (el, binding) {
if(binding.value == 'false') return;
el.innerHTML = _parseMarkDown(el.textContent);
}
root.Vue.directive('botui-markdown', function (el, binding) {
if(binding.value == 'false') return; // v-botui-markdown="false"
el.innerHTML = _parseMarkDown(el.textContent);
});

root.Vue.directive('botui-scroll', {
inserted: function (el) {
el.scrollIntoView();
_container.scrollTop = _container.scrollHeight;
}
});

root.Vue.directive('botui-container', {
inserted: function (el) {
_container = el;
}
});

Expand Down Expand Up @@ -180,16 +185,25 @@
});
}

function _checkOpts(_opts) {
if(typeof _opts === 'string') {
_opts = {
content: _opts
};
}
return _opts || {};
}

_interface.message = {
add: function (addOpts) {
return _addMessage(addOpts);
return _addMessage( _checkOpts(addOpts) );
},
bot: function (addOpts) {
addOpts = addOpts || {};
addOpts = _checkOpts(addOpts);
return _addMessage(addOpts);
},
human: function (addOpts) {
addOpts = addOpts || {};
addOpts = _checkOpts(addOpts);
addOpts.human = true;
return _addMessage(addOpts);
},
Expand Down
2 changes: 1 addition & 1 deletion build/botui.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions build/botui.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "botui",
"version": "0.1.4",
"version": "0.1.5",
"description": "A JS library to build the UI for your bot",
"main": "build/botui.min.js",
"devDependencies": {
Expand Down
8 changes: 4 additions & 4 deletions src/botui.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="botui botui-container">
<div class="botui botui-container" v-botui-container>
<div class="botui-messages-container">
<div v-for="msg in messages">
<div v-for="msg in messages" v-botui-scroll>
<transition name="slide-fade">
<div class="botui-message" v-if="msg.visible" :class="msg.cssClass">
<div :class="[{human: msg.human, 'botui-message-content': true}, msg.type]" v-botui-scroll>
<div :class="[{human: msg.human, 'botui-message-content': true}, msg.type]">
<span v-if="msg.type == 'text'" v-text="msg.content" v-botui-markdown></span>
<iframe v-if="msg.type == 'embed'" :src="msg.content" frameborder="0" allowfullscreen></iframe>
</div>
Expand All @@ -18,7 +18,7 @@
@submit.prevent="handle_action_text()" :class="action.cssClass">
<input type="text" ref="input" :type="action.text.sub_type"
v-model="action.text.value" class="botui-actions-text-input" :placeholder="action.text.placeholder"
:size="action.text.size" :value="action.text.value" :value="action.text.cssClass" required/>
:size="action.text.size" :value="action.text.value" :class="action.text.cssClass" required/>
<button v-if="isMobile" class="botui-actions-text-submit">Go</button>
</form>
<div v-if="action.type == 'button'" class="botui-actions-buttons" :class="action.cssClass">
Expand Down
32 changes: 23 additions & 9 deletions src/scripts/botui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
debug: false,
fontawesome: true
},
_container, // the outermost Element. Needed to scroll to bottom, for now.
_interface = {}, // methods returned by a BotUI() instance.
_actionResolve,
_markDownRegex = {
Expand Down Expand Up @@ -132,16 +133,20 @@
}
};

root.Vue.directive('botui-markdown', {
inserted: function (el, binding) {
if(binding.value == 'false') return;
el.innerHTML = _parseMarkDown(el.textContent);
}
root.Vue.directive('botui-markdown', function (el, binding) {
if(binding.value == 'false') return; // v-botui-markdown="false"
el.innerHTML = _parseMarkDown(el.textContent);
});

root.Vue.directive('botui-scroll', {
inserted: function (el) {
el.scrollIntoView();
_container.scrollTop = _container.scrollHeight;
}
});

root.Vue.directive('botui-container', {
inserted: function (el) {
_container = el;
}
});

Expand Down Expand Up @@ -171,16 +176,25 @@
});
}

function _checkOpts(_opts) {
if(typeof _opts === 'string') {
_opts = {
content: _opts
};
}
return _opts || {};
}

_interface.message = {
add: function (addOpts) {
return _addMessage(addOpts);
return _addMessage( _checkOpts(addOpts) );
},
bot: function (addOpts) {
addOpts = addOpts || {};
addOpts = _checkOpts(addOpts);
return _addMessage(addOpts);
},
human: function (addOpts) {
addOpts = addOpts || {};
addOpts = _checkOpts(addOpts);
addOpts.human = true;
return _addMessage(addOpts);
},
Expand Down

0 comments on commit ef241ec

Please sign in to comment.