37 |
39 | ku·dos Please
38 |
40 |
42 | To gain kudos is to earn respect and recognition (Urbandirectory).
41 |To gain kudos is to earn respect and recognition (Urbandirectory).
41 |A one-element kudos widget with no dependencies.
52 |Works on touch and normal devices.
53 |The widget interacts with the Kudos Please API so you don't have to worry about saving the amount.
54 |55 | 56 | 57 | 58 |
59 |<script src="kudosplease-min.js"></script><link rel="stylesheet" href="kudosplease-min.css"><div class="kudos" data-amount="0" data-url="domain.tld/my-awesome-article"></div>new KudosPlease({
88 | el : '.kudos',
89 | duration : 1500,
90 | persistent : true,
91 | status : {
92 | alpha: 'fontelico-emo-shoot',
93 | beta: 'fontelico-emo-shoot',
94 | gamma: 'fontelico-emo-beer'
95 | }
96 | });120 | After you reload the page, you can use the widget again. 121 |
122 | 123 |new KudosPlease({
124 | el : '.kudos--persistent',
125 | duration : 1500,
126 | persistent : false,
127 | status : {
128 | alpha: '',
129 | beta: '',
130 | gamma: 'fontelico-emo-sunglasses'
131 | }
132 | });164 | Handcrafted 2013 - 2014 by @TimPietrusky. 165 |
166 |el
28 | */
29 | addClass = inject('add', function(el, classes) {
30 | classes = classes.split(',');
31 |
32 | for (var i=0; i < classes.length; i++) {
33 | if (el.className.indexOf(classes[i]) == -1) {
34 | el.className = el.className.trim() + ' ' + classes[i];
35 | }
36 | }
37 | }),
38 |
39 | /*
40 | * Remove class to el
41 | */
42 | removeClass = inject('remove', function(el, classes) {
43 | classes = classes.split(',');
44 |
45 | for (var i = 0; i < classes.length; i++) {
46 | el.className = el.className.replace(classes[i], '').trim();
47 | }
48 | }),
49 |
50 | /*
51 | * Returns true if el has
52 | * the class, false otherwise
53 | */
54 | hasClass = inject('contains', function(el, className) {
55 | var classes = el.className.split(' '),
56 | result = false;
57 |
58 | for (var i = 0; i < classes.length; i++) {
59 | if (classes[i] == className) {
60 | result = true;
61 | }
62 | }
63 |
64 | return result;
65 | }),
66 | /*
67 | * Change the status of the widget and
68 | * aply 3 different classes for the icon
69 | * in the middle.
70 | */
71 | changeStatus = function(el, state, _$) {
72 | if (_$.status != undefined) {
73 |
74 | if (el.getAttribute('data-status') != undefined) {
75 | removeClass(el, _$.status[el.getAttribute('data-status')]);
76 | }
77 |
78 | addClass(el, _$.status[state]);
79 | el.setAttribute('data-status', state);
80 | }
81 | },
82 |
83 | /*
84 | * State: finished (kudos given)
85 | */
86 | finish = function(el, increase, _$) {
87 | // Finished
88 | addClass(el, 'finish');
89 | changeStatus(el, 'gamma', _$);
90 |
91 | increase = increase || false;
92 | amount = loadAmount(parseInt(el.getAttribute('data-id'), 10), _$);
93 |
94 | if (increase) {
95 | ++amount;
96 |
97 | // Update kudos via ajax
98 | request(el, 'POST', _$);
99 | }
100 | },
101 | /*
102 | * Enter the element
103 | */
104 | enter = function(e, el, _$) {
105 | var id = -1;
106 |
107 | // Do the kudo twist
108 | if (!hasClass(el, 'finish')) {
109 | // Activate the kudo twist
110 | addClass(el, 'active');
111 |
112 | // Start timeout
113 | id = setTimeout(function() {
114 | removeClass(el, 'active');
115 | finish(el, true, _$);
116 | }, _$.duration);
117 |
118 | // Add timeout id to global object
119 | _$.timer[el.getAttribute('data-id')] = id;
120 | }
121 | },
122 | /*
123 | * Touch enter the element
124 | */
125 | touchEnter = function(e, el, _$){
126 | // Only execute on single finger touch to allow zooming.
127 | if (e.touches.length === 1){
128 | // prevent from propagation and preventDefault. So we can use both touch events and mouse events.
129 | e.stopPropagation();
130 | e.preventDefault();
131 |
132 | // Execute "normal" enter function
133 | enter(e, el, _$);
134 | }
135 | },
136 |
137 | /*
138 | * Leave the element
139 | */
140 | out = function(e, el, _$) {
141 | if (!hasClass(el, 'finish')) {
142 | removeClass(el, 'active');
143 | clearTimeout(_$.timer[el.getAttribute('data-id')]);
144 | }
145 | },
146 | /*
147 | * Bind event
148 | */
149 | on = function(el, event, func, _$) {
150 | try {
151 | el.addEventListener(event, function(e) { func(e, el, _$); }, false);
152 | } catch(e) {
153 | el.attachEvent('on' + event, function(e) { func(e, el, _$); });
154 | }
155 | },
156 |
157 | /*
158 | * Saves the amount of a specific widget into localStorage
159 | * when persistent is true.
160 | */
161 | save = function(el, amount, _$) {
162 | if (_$.persistent) {
163 | window.localStorage.setItem('kudos:saved:' + el.getAttribute('data-url'), amount);
164 | }
165 | },
166 |
167 | /*
168 | * Loads the amount of a specific widget from the localStorage
169 | * when persistent is true.
170 | */
171 | loadAmount = function(id, _$) {
172 | var result = _$.elements[id].getAttribute('data-amount') || 0;
173 |
174 | if (_$.persistent) {
175 | if ((amount = window.localStorage.getItem('kudos:saved:' + _$.elements[id].getAttribute('data-url'))) != undefined) {
176 | result = amount;
177 | }
178 | }
179 |
180 | return result;
181 | },
182 |
183 |
184 | /*
185 | * Create a ajax request to a backend
186 | * which just keeps track of the kudos counter
187 | * via php & mysql
188 | */
189 | request = function(el, type, _$) {
190 | var xhr;
191 |
192 | // Initialize
193 | try {
194 | xhr = new ActiveXObject("Microsoft.XMLHTTP");
195 | } catch(e) {
196 | xhr = new XMLHttpRequest();
197 | }
198 |
199 | // Response received
200 | xhr.onreadystatechange = function() {
201 | if (xhr.readyState == 4 && xhr.status == 200) {
202 | var amount = xhr.responseText;
203 | el.setAttribute('data-amount', amount);
204 |
205 | if (type == 'GET') {
206 | // Set status based on amount
207 | changeStatus(el, amount == 0 ? 'alpha' : 'beta', _$);
208 |
209 | // When persistence is activated and a value was saved for the URL,
210 | // the kudos widget is in status gamma (finished)
211 | if (_$.persistent
212 | && window.localStorage.getItem('kudos:saved:' + el.getAttribute('data-url')) != null) {
213 | changeStatus(el, 'gamma', _$);
214 | }
215 | }
216 |
217 | if (type == 'POST') {
218 | save(el, amount, _$);
219 | }
220 | }
221 | };
222 |
223 | var url = "?url="+encodeURIComponent(el.getAttribute('data-url'));
224 | // Open request
225 | xhr.open(type, "http://api.kudosplease.com/" + url, true);
226 | xhr.send();
227 | };
228 |
229 | /*
230 | * Constructor
231 | */
232 | function KudosPlease(args) {
233 | // All widgets
234 | this.elements = document.querySelectorAll(args.el);
235 | // Set the status
236 | this.status = args.status;
237 | // Is localStorage enabled?
238 | this.persistent = args.persistent != undefined ? (args.persistent && window.localStorage != undefined) : true;
239 | // Duration of activation
240 | this.duration = args.duration;
241 | // setTimeout-ID's
242 | this.timer = {};
243 |
244 | for (var i = 0; i < this.elements.length; i++) {
245 | var el = this.elements[i];
246 |
247 | // Delete all elements from localStorage
248 | // localStorage.setItem('kudos:saved:'+el.getAttribute('data-url'), 0);
249 |
250 | // Identify element
251 | el.setAttribute('data-id', i);
252 |
253 | // Load kudos via ajax
254 | request(el, 'GET', this);
255 |
256 | // Amount is 0
257 | if (loadAmount(i, this) == 0) {
258 | // Set kudos amount
259 | el.setAttribute('data-amount', 0);
260 |
261 | // Init timer id
262 | this.timer[i] = -1;
263 |
264 | // Events, both touch and mouse
265 | on(el, 'touchstart', touchEnter, this);
266 | on(el, 'touchend', out, this);
267 | on(el, 'mouseover', enter, this);
268 | on(el, 'mouseout', out, this);
269 |
270 | // Load the amount and display it, because user already voted
271 | } else {
272 | finish(el, false, this);
273 | }
274 | }
275 |
276 | return this;
277 | }
278 |
279 | // trim polyfill
280 | ''.trim || (String.prototype.trim = function(){
281 | return this.replace(/^\s+|\s+$/g,'');
282 | });
283 |
284 | return KudosPlease;
285 | })();
--------------------------------------------------------------------------------
/js/main-min.js:
--------------------------------------------------------------------------------
1 | KudosPlease=(function(){var a=document.documentElement.classList,p=!!a,e=function(s,q){return p?function(t,u){if(u!=""){return t.classList[s](u)}}:q},g=e("add",function(t,s){s=s.split(",");for(var q=0;q