https://www.betasia9.com/jcmm-float-icon/jcmm-float-icon.js

1// Author: kevin
2// USAGE
3// to init float icon
4// include jcmm-float-icon.js
5// declare <div id="id-name" style="display: none"></div>
6// inside jQuery.document.ready()
7// initFloatIcon($('#id-name'))
8
9function initFloatIcon(ele, size = null) {
10	console.log('FI: Received initiation');
11	if (ele.length == 0) {
12		console.log('Failed to init float icon');
13		console.log('FI Error: Element given does not exist.');
14		return;
15    }
16
17    // jQuery
18    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.min.js', function () {
19        console.log('Velocity loaded');
20
21        getCurrentFloatIcon(function (data) {
22            console.log('FI xhr: data receive completed');
23
24            if (data.errCode != 0) {
25                console.log('FI Error: proc_errCode:' + data.errCode);
26                console.log('FI Error: proc_errMsg:' + data.errMsg);
27                return;
28            }
29
30            if (data.data != undefined) {
31                $.each(JSON.parse(data.data), function (i, d) {
32                    var fi = {
33                        image_url: null,
34                        command: null,
35                        redirect_url: null,
36                        display_type: null
37                    };
38
39                    fi.image_url = d.floaticon_imageurl;
40                    fi.command = d.command;
41                    fi.redirect_url = d.redirect_url;
42                    fi.display_type = d.display_type;
43
44                    if (window.location.protocol == 'https:') {
45                        fi.image_url = fi.image_url.replace('http:', 'https:');
46                    }
47
48                    validateFloat(fi, function (floatState) {
49                        if (floatState) initFloatHtml(ele, fi, size);
50                    });
51                });
52            }
53        });
54    });
55}
56
57function getCurrentFloatIcon(callback) {
58	var http_protocol = window.location.protocol;
59	var host = window.location.host;
60
61	$.ajax({
62        url: http_protocol + '//' + host + '/ajaxData/proc_getFloatIcon',
63        method: 'get',
64        data: '',
65        dataType: 'json',
66        success: function (data) {
67        	callback(data);
68        },
69        error: function(xhr) {
70        	callback({ data: -1 });
71        	console.log('FI Error: Failed XHR');
72        }
73    });
74}
75
76function validateFloat(fi, callback) {
77	if (fi.command == 'Redirection') {
78		if (!isValidURL(fi.redirect_url)) {
79			console.log('FI Error: Invalid Redirect URL');
80			callback(false);
81		}
82	}
83	callback(true);
84}
85
86function initFloatHtml(ele, fi, size) {
87	var $isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
88	
89	var eleCss = setElePosition(fi, $isMobile);
90
91	ele.css(eleCss);
92
93    ele.append('<a href="#" id="btn-float-icon"><div id="div-img"><img src="' + fi.image_url + '" alt="floating image"/></div></a>');
94
95    if (size == null) {
96        ele.find('img').css({
97            'width': ($isMobile ? '75px' : '100px'),
98            'height': 'auto'
99        });
100    } else {
101        ele.find('img').css({
102            'width': size.width,
103            'height': size.height
104        });
105    }
106	
107	
108	// initiation complete
109	executeCommand(ele, fi);
110    ele.css('display', 'block');
111
112    if (fi.display_type == 'animatedTop_LeftToRight' || fi.display_type == 'animatedBottom_LeftToRight') {
113        $('#float-icon').velocity({ left: ($isMobile ? '75%' : '85%') }, { duration: 10000, delay: 100, loop: 999 });
114    } else if (fi.display_type == 'animatedLeft_TopToBottom' || fi.display_type == 'animatedRight_TopToBottom') {
115        $('#float-icon').velocity({ top: ($isMobile ? '75%' : '85%') }, { duration: 10000, delay: 100, loop: 999 });
116    }
117    if (!fi.display_type.includes('animated')) {
118        ele.find('#div-img').css({
119            'transform': 'translatey(0px)',
120            'animation': 'float 2s ease-in-out infinite'
121        });
122    }
123}
124
125function setElePosition(fi, $isMobile) {
126
127    var eleCss = {
128        'position': 'fixed',
129        'z-index': '99990' // loading screen is 99999
130    };
131
132    var webStandardPx = '5%';
133    var mTopPx = '10%';
134    var mBottomPx = '15%';
135    var mLeftRightPx = '3%';
136
137    if (fi.display_type == 'TopLeft' || fi.display_type == 'animatedTop_LeftToRight' || fi.display_type == 'animatedLeft_TopToBottom') {
138        eleCss.top = ($isMobile ? mTopPx : webStandardPx);
139        eleCss.left = ($isMobile ? mLeftRightPx : webStandardPx);
140    } else if (fi.display_type == 'TopRight' || fi.display_type == 'animatedRight_TopToBottom') {
141        eleCss.top = ($isMobile ? mTopPx : webStandardPx);
142        eleCss.right = ($isMobile ? mLeftRightPx : webStandardPx);
143    } else if (fi.display_type == 'BottomLeft' || fi.display_type == 'animatedBottom_LeftToRight') {
144		eleCss.bottom = ($isMobile ? mBottomPx : webStandardPx);
145		eleCss.left = ($isMobile ? mLeftRightPx : webStandardPx);
146	} else if (fi.display_type == 'BottomRight') {
147		eleCss.bottom = ($isMobile ? mBottomPx : webStandardPx);
148		eleCss.right = ($isMobile ? mLeftRightPx : webStandardPx);
149    }
150
151	return eleCss;
152}
153
154function executeCommand(ele, fi) {
155    if (fi.command == 'LaunchRG') {
156        ele.on('click', '#btn-float-icon', function (e) {
157            e.preventDefault();
158            $('body').find('.mg-reward-modal').toggleClass('mg-reward-show-modal');
159        });
160    } else if (fi.command == 'Redirection') {
161        ele.on('click', '#btn-float-icon', function (e) {
162            e.preventDefault();
163            window.open(fi.redirect_url, '_blank');
164        });
165    } else if (fi.command == 'LaunchLD') {
166        ele.on('click', '#btn-float-icon', function (e) {
167            e.preventDefault();
168            $('body').find('.lucky-dice-modal').toggleClass('lucky-dice-show-modal');
169        });
170    } else if (fi.command == 'LaunchFW') {
171        ele.on('click', '#btn-float-icon', function (e) {
172            e.preventDefault();
173            $('body').find('.fortune-wheel-modal').toggleClass('fortune-wheel-show-modal');
174        });
175    } else if (fi.command == 'LaunchMines') {
176        ele.on('click', '#btn-float-icon', function (e) {
177            e.preventDefault();
178            $('body').find('.mines-modal').toggleClass('mines-show-modal');
179        });
180    } else {
181		console.log('FI Error: Invalid command.');
182	}
183}
184
185function isValidURL(str) {
186  var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
187    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
188    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
189    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
190    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
191    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
192  return !!pattern.test(str);
193}