diff --git a/widget/index.html b/widget/index.html new file mode 100644 index 0000000..04de1fa --- /dev/null +++ b/widget/index.html @@ -0,0 +1,36 @@ + + + + Plugin Demo + + + + + + diff --git a/widget/src/plugin.css b/widget/src/plugin.css new file mode 100644 index 0000000..a25ef61 --- /dev/null +++ b/widget/src/plugin.css @@ -0,0 +1,99 @@ +.sal-feedback__container { + display: none; + position: fixed; + bottom: -2px; + right: 2px; + border: 1px solid #ddd; + background-color: #fff; + border-radius: 4px; + padding: 10px; + font-family: 'Helvetica', sans-serif; +} + +.sal-feedback__overlay { + display: none; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + background-color: #fff; + z-index: 111; + text-align: center; + padding-top: 100px; +} + +.sal-feedback__container .sal-feedback__container--close { + cursor: pointer; + position: absolute; + right: 20px; + color: #ddd; + z-index: 222; +} + +.sal-feedback__container .sal-feedback__container--close:hover { + color: red; +} + +.sal-feedback__toggle--btn { + position: fixed; + bottom: 5px; + right: 5px; +} + +.sal-feedback__container .sal-feedback__header { + margin: 5px 0; +} + +.sal-feedback__container .sal-feedback__textArea textarea { + width: 97%; + height: 90px; + margin: 0; + font-size: 14px; + border: 1px solid #dedede; + border-radius: 4px; + padding: 5px; +} + +.sal-feedback__container .sal-feedback__textArea textarea.invalid { + border: 1px solid #f17575; +} + +.sal-feedback__container .sal-feedback__textField input { + width: 97%; + margin: 5px 0; + padding: 5px; + font-size: 14px; + border: 1px solid #dedede; + border-radius: 4px; +} + +.sal-feedback__container .sal-feedback__textField input.invalid { + border: 1px solid #f17575; +} + +.sal-feedback__container .sal-feedback__btn button { + padding: 6px; + margin: 5px 5px 10px 0; + font-size: 13px; + border: none; + outline: none; +} + +.sal-feedback__container .sal-feedback__btn button:hover { + cursor: pointer; +} + +.sal-feedback__container .sal-feedback__btn .submit { + background-color: #49ac77; + color: #fff; +} + +.sal-feedback__container .sal-feedback__btn .submit:hover { + background-color: #49be77; + color: #f1f1f1; +} + +.sal-feedback__container .sal-feedback__btn .clear:hover { + background-color: #dedede; +} diff --git a/widget/src/plugin.js b/widget/src/plugin.js new file mode 100644 index 0000000..1ca3443 --- /dev/null +++ b/widget/src/plugin.js @@ -0,0 +1,168 @@ +'use strict'; + +(function() { + if(typeof jQuery === 'undefined') { + var headTag = document.getElementsByTagName('head')[0]; + var scriptTag = document.createElement('script'); + scriptTag.type = 'text/javascript'; + scriptTag.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js'; + scriptTag.onload = initSalWidget; + headTag.appendChild(scriptTag); + } else { + initSalWidget(); + } + + function initSalWidget() { + // TODO: Fix this + // var _this = this; + var _this = {}; + + $( + '' + + '
' + + '
Thank you for your valuable feedback.
' + + 'x' + + '
' + + '' + + '' + + '' + + '' + + '
' + + '
' + ).appendTo('body'); + + _this.$container = $('.sal-feedback__container'); + _this.$toggleBtn = $('.sal-feedback__toggle--btn'); + _this.$overlay = _this.$container.find('.sal-feedback__overlay'); + _this.$closeBtn = _this.$container.find('.sal-feedback__container--close'); + _this.$submitBtn = _this.$container.find('.sal-feedback__btn .submit'); + _this.$resetBtn = _this.$container.find('.sal-feedback__btn .clear'); + _this.$form = _this.$container.find('form'); + _this.submitBtnLoadingText = 'Sending ...'; + _this.requiredFields = ['description', 'email']; + _this.requiredFieldsInputs = []; + _this.salEndpoint = "http://localhost:8090"; + + for(var i = 0; i < _this.requiredFields.length; i++) { + var $inputEle = _this.$form.find("[name='" + _this.requiredFields[i] + "']"); + _this.requiredFieldsInputs.push($inputEle); + } + + _this.validateForm = function() { + for(var i = 0; i < _this.requiredFieldsInputs.length; i++) { + if(!_this.requiredFieldsInputs[i].val()) { + return false; + } + } + + return true; + }; + + _this.resetForm = function() { + if(_this.$form[0]) { + _this.$form[0].reset(); + + for(var i = 0; i < _this.requiredFieldsInputs.length; i++) { + _this.requiredFieldsInputs[i].removeClass('invalid'); + } + + _this.$submitBtn.html('Send Feedback'); + } + }; + + _this.highlightRequiredFields = function() { + for(var i = 0; i < _this.requiredFieldsInputs.length; i++) { + var $inputEle = _this.requiredFieldsInputs[i]; + + if(!$inputEle.val()) { + $inputEle.addClass('invalid'); + } else { + $inputEle.removeClass('invalid'); + } + } + }; + + _this.inputValOf = function(inputName) { + var value; + + $.grep(_this.requiredFieldsInputs, function($input, i) { + if ($input[0].name == inputName) { + value = $input.val(); + return; + } + }); + + return value; + }; + + _this.submitForm = function() { + if(_this.validateForm()) { + _this.$submitBtn.addClass('disabled'); + _this.$submitBtn.html(_this.submitBtnLoadingText); + _this.submitFeedback(); + } else { + _this.highlightRequiredFields(); + } + }; + + _this.$closeBtn.on('click', function(e) { + e.preventDefault(); + _this.$container.hide(); + _this.resetForm(); + _this.$overlay.hide(); + _this.$toggleBtn.show(); + }); + + _this.$resetBtn.on('click', function(e) { + e.preventDefault(); + _this.resetForm(); + }); + + _this.$submitBtn.on('click', function(e) { + e.preventDefault(); + _this.submitForm(); + }); + + _this.$toggleBtn.on('click', function(e) { + e.preventDefault(); + _this.$toggleBtn.hide(); + _this.$container.show(); + }); + + _this.newFeedbackData = function() { + var params = { + data: { + appid: 4, + desc: _this.inputValOf('description'), + email: _this.inputValOf('email') + } + }; + + return JSON.stringify(params); + }; + + _this.submitFeedback = function() { + $.ajax({ + url: _this.salEndpoint + '/feedbacks/create', + method: 'POST', + contentType: 'application/json', + data: _this.newFeedbackData() + }).then( + function(res) { + _this.$overlay.show(); + }, + function(err) { + console.log('Oops! something went wrong.'); + } + ); + }; + } +})();