var Familiarity = function (options) { this.escape_to_exit = options.escape_to_exit; this.f1_to_start = options.f1_to_start; this.show_tips_recursively = options.show_tips_recursively; this.mandatory_all_tips = options.mandatory_all_tips; this.traverse_back = options.traverse_back; this.familiaritiesUrl = '<%= Familiarity::Engine.routes.url_helpers.familiarities_path(format: :json) %>'; // To retain the flag even after reset() method familiarityAllTipsVisited flag is defined here. this.familiarityAllTipsVisited = false; this.reset(); Familiarity.setCurrentObject(this); } Familiarity.setCurrentObject = function (current_object) { return (this.currentObject = current_object); } Familiarity.getCurrentObject = function () { return this.currentObject } Familiarity.prototype = { reset: function () { // this.familiarityAllTipsVisited = false; this.familiarityRenderedFlag = false; this.familiarity_hash_pointer = -1; this.familiarity_hash = {}; this.familiarity_bubbles = []; }, familiarity_hash_keys: function () { return ($.map(this.familiarity_hash, function (v, k) { return k; })); }, showNextBubble: function () { if (this.familiarity_hash_keys().length <= 0) { return false; } this.familiarity_hash_pointer++; if ((this.familiarity_hash_pointer + 1) > this.familiarity_hash_keys().length) { this.familiarityAllTipsVisited = true if (this.show_tips_recursively) { this.familiarity_hash_pointer = 0; } else { this.familiarityView(false); return true; } } this.showOneByOne(); }, showPreviousBubble: function () { if (this.familiarity_hash_keys().length <= 0) { return false; } if (!this.traverse_back) { return false; } this.familiarity_hash_pointer--; if (this.familiarity_hash_pointer < 0) { if (this.show_tips_recursively) { this.familiarity_hash_pointer = this.familiarity_hash_keys().length - 1; } else { this.familiarity_hash_pointer = 0; } } this.showOneByOne(); }, showOneByOne: function () { // console.log(this.familiarity_hash_pointer); // console.log(this.familiarity_hash); // console.log(this.familiarity_bubbles); this.hideFBubbles(); return this.showFBubble(); }, showFBubble: function () { var current_bubble_key = this.familiarity_hash_keys()[this.familiarity_hash_pointer]; var element = $(current_bubble_key) var content = this.familiarity_hash[current_bubble_key]; if (element.length <= 0) { return false; } element.addClass('familiarity-bubble-parent') .tooltipster({ content: $('' + content.replace(/\n/g, "
") + '
'), maxWidth: 400, animation: 'grow', //fade, grow, swing, slide, fall autoClose: true, //true, false position: 'bottom-right', //right, left, top, top-right, top-left, bottom, bottom-right, bottom-left delay: 700, speed: 700, theme: 'tooltipster-default', touchDevices: false, trigger: 'custom' //hover, click, custom }); element.tooltipster('show'); // console.log(element.css('background-color')); // if (element.css('background-color') == 'transparent') { // element.css('background-color', 'white') // } this.familiarity_bubbles.push(element) return true; }, hideFBubbles: function () { while (this.familiarity_bubbles.length > 0) { this.familiarity_bubbles.pop().tooltipster('destroy').removeClass('familiarity-bubble-parent').attr('title', null); } }, fetchFamiliarities: function (callback) { if (typeof(callback) != 'function') { callback = function (familiarity_hash) { console.log('familiarity_hash'); console.log(familiarity_hash); } } var _this = this; $.get(this.familiaritiesUrl, function (data) { var familiarity_hash = data[$(location).attr('pathname')] if (familiarity_hash == null) { familiarity_hash = {} } _this.familiarity_hash = familiarity_hash; callback(familiarity_hash); }); }, familiarityView: function (enable) { var _this = this; if (typeof(enable) == 'undefined') { enable = true; } if (enable == true) { //Re-setting all values and variables (in case is there any half done state) this.reset(); //Making bubble pop-out ////////////////// this.fetchFamiliarities(function (familiarity_hash) { if (_this.familiarity_hash_keys().length > 0) { //Rendering overlay $('body').addClass('familiarity-view').append($('
')); //Rendering first bubble (via Next Bubble) _this.showNextBubble(); //Marking flag that familiarity_view is rendered _this.familiarityRenderedFlag = true; } } ); } else { // If option 'mandatory_all_tips' is true then make sure all tips has been rendered // before exit of familiarity view if (this.mandatory_all_tips && (!this.familiarityAllTipsVisited)) { return false; } //Removing bubbles _this.hideFBubbles(); //Removing rendered overlay $('#familiarity_dim').remove(); $('body').removeClass('familiarity-view'); //Marking flag that familiarity_view is removed from viewport this.familiarityRenderedFlag = false; } } } $(document).on("page:change", function () { // Show and hide on F1(Ctrl +F1 on chrome) and ESC key respectively $('body').keyup(function (e) { var _this = Familiarity.getCurrentObject(); if (typeof(_this) != "undefined" && e.keyCode == 27 && _this.escape_to_exit && _this.familiarityRenderedFlag) { //ESC key pressed _this.familiarityView(false); } if (typeof(_this) != "undefined" && e.keyCode == 112 && _this.f1_to_start && !_this.familiarityRenderedFlag) { //F1 key pressed _this.familiarityView(true); } if (typeof(_this) != "undefined" && e.keyCode == 37 && _this.familiarityRenderedFlag) { //LEFT arrow key pressed _this.showPreviousBubble(); } if (typeof(_this) != "undefined" && e.keyCode == 39 && _this.familiarityRenderedFlag) { //RIGHT arrow key pressed _this.showNextBubble() } }).mousedown(function (e) { var _this = Familiarity.getCurrentObject(); if (typeof(_this) != "undefined" && _this.familiarityRenderedFlag) { //Show next bubble on mouse down('click') _this.showNextBubble() } }); });