projects / framework7.git / blame
| Commit | Line | Data |
|---|---|---|
| 5309fbda | 1 | /** |
| 5d51ea26 | 2 | * Framework7 4.4.7 |
| 5309fbda DC |
3 | * Full featured mobile HTML framework for building iOS & Android apps |
| 4 | * http://framework7.io/ | |
| 5 | * | |
| 6 | * Copyright 2014-2019 Vladimir Kharlampidi | |
| 7 | * | |
| 8 | * Released under the MIT License | |
| 9 | * | |
| 5d51ea26 | 10 | * Released on: July 19, 2019 |
| 5309fbda DC |
11 | */ |
| 12 | ||
| 13 | (function (global, factory) { | |
| 14 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | |
| 15 | typeof define === 'function' && define.amd ? define(factory) : | |
| 16 | (global = global || self, global.Framework7 = factory()); | |
| 17 | }(this, function () { 'use strict'; | |
| 18 | ||
| 19 | /** | |
| 5d51ea26 | 20 | * Template7 1.4.2 |
| 5309fbda DC |
21 | * Mobile-first HTML template engine |
| 22 | * | |
| 23 | * http://www.idangero.us/template7/ | |
| 24 | * | |
| 25 | * Copyright 2019, Vladimir Kharlampidi | |
| 26 | * The iDangero.us | |
| 27 | * http://www.idangero.us/ | |
| 28 | * | |
| 29 | * Licensed under MIT | |
| 30 | * | |
| 5d51ea26 | 31 | * Released on: June 14, 2019 |
| 5309fbda DC |
32 | */ |
| 33 | ||
| 34 | var t7ctx; | |
| 35 | if (typeof window !== 'undefined') { | |
| 36 | t7ctx = window; | |
| 37 | } else if (typeof global !== 'undefined') { | |
| 38 | t7ctx = global; | |
| 39 | } else { | |
| 40 | t7ctx = undefined; | |
| 41 | } | |
| 42 | ||
| 43 | var Template7Context = t7ctx; | |
| 44 | ||
| 45 | var Template7Utils = { | |
| 46 | quoteSingleRexExp: new RegExp('\'', 'g'), | |
| 47 | quoteDoubleRexExp: new RegExp('"', 'g'), | |
| 48 | isFunction: function isFunction(func) { | |
| 49 | return typeof func === 'function'; | |
| 50 | }, | |
| 51 | escape: function escape(string) { | |
| 52 | if ( string === void 0 ) string = ''; | |
| 53 | ||
| 54 | return string | |
| 55 | .replace(/&/g, '&') | |
| 56 | .replace(/</g, '<') | |
| 57 | .replace(/>/g, '>') | |
| 58 | .replace(/"/g, '"') | |
| 59 | .replace(/'/g, '''); | |
| 60 | }, | |
| 61 | helperToSlices: function helperToSlices(string) { | |
| 62 | var quoteDoubleRexExp = Template7Utils.quoteDoubleRexExp; | |
| 63 | var quoteSingleRexExp = Template7Utils.quoteSingleRexExp; | |
| 64 | var helperParts = string.replace(/[{}#}]/g, '').trim().split(' '); | |
| 65 | var slices = []; | |
| 66 | var shiftIndex; | |
| 67 | var i; | |
| 68 | var j; | |
| 69 | for (i = 0; i < helperParts.length; i += 1) { | |
| 70 | var part = helperParts[i]; | |
| 71 | var blockQuoteRegExp = (void 0); | |
| 72 | var openingQuote = (void 0); | |
| 73 | if (i === 0) { slices.push(part); } | |
| 74 | else if (part.indexOf('"') === 0 || part.indexOf('\'') === 0) { | |
| 75 | blockQuoteRegExp = part.indexOf('"') === 0 ? quoteDoubleRexExp : quoteSingleRexExp; | |
| 76 | openingQuote = part.indexOf('"') === 0 ? '"' : '\''; | |
| 77 | // Plain String | |
| 78 | if (part.match(blockQuoteRegExp).length === 2) { | |
| 79 | // One word string | |
| 80 | slices.push(part); | |
| 81 | } else { | |
| 82 | // Find closed Index | |
| 83 | shiftIndex = 0; | |
| 84 | for (j = i + 1; j < helperParts.length; j += 1) { | |
| 85 | part += " " + (helperParts[j]); | |
| 86 | if (helperParts[j].indexOf(openingQuote) >= 0) { | |
| 87 | shiftIndex = j; | |
| 88 | slices.push(part); | |
| 89 | break; | |
| 90 | } | |
| 91 | } | |
| 92 | if (shiftIndex) { i = shiftIndex; } | |
| 93 | } | |
| 94 | } else if (part.indexOf('=') > 0) { | |
| 95 | // Hash | |
| 96 | var hashParts = part.split('='); | |
| 97 | var hashName = hashParts[0]; | |
| 98 | var hashContent = hashParts[1]; | |
| 99 | if (!blockQuoteRegExp) { | |
| 100 | blockQuoteRegExp = hashContent.indexOf('"') === 0 ? quoteDoubleRexExp : quoteSingleRexExp; | |
| 101 | openingQuote = hashContent.indexOf('"') === 0 ? '"' : '\''; | |
| 102 | } | |
| 103 | if (hashContent.match(blockQuoteRegExp).length !== 2) { | |
| 104 | shiftIndex = 0; | |
| 105 | for (j = i + 1; j < helperParts.length; j += 1) { | |
| 106 | hashContent += " " + (helperParts[j]); | |
| 107 | if (helperParts[j].indexOf(openingQuote) >= 0) { | |
| 108 | shiftIndex = j; | |
| 109 | break; | |
| 110 | } | |
| 111 | } | |
| 112 | if (shiftIndex) { i = shiftIndex; } | |
| 113 | } | |
| 114 | var hash = [hashName, hashContent.replace(blockQuoteRegExp, '')]; | |
| 115 | slices.push(hash); | |
| 116 | } else { | |
| 117 | // Plain variable | |
| 118 | slices.push(part); | |
| 119 | } | |
| 120 | } | |
| 121 | return slices; | |
| 122 | }, | |
| 123 | stringToBlocks: function stringToBlocks(string) { | |
| 124 | var blocks = []; | |
| 125 | var i; | |
| 126 | var j; | |
| 127 | if (!string) { return []; } | |
| 128 | var stringBlocks = string.split(/({{[^{^}]*}})/); | |
| 129 | for (i = 0; i < stringBlocks.length; i += 1) { | |
| 130 | var block = stringBlocks[i]; | |
| 131 | if (block === '') { continue; } | |
| 132 | if (block.indexOf('{{') < 0) { | |
| 133 | blocks.push({ | |
| 134 | type: 'plain', | |
| 135 | content: block, | |
| 136 | }); | |
| 137 | } else { | |
| 138 | if (block.indexOf('{/') >= 0) { | |
| 139 | continue; | |
| 140 | } | |
| 141 | block = block | |
| 142 | .replace(/{{([#/])*([ ])*/, '{{$1') | |
| 143 | .replace(/([ ])*}}/, '}}'); | |
| 144 | if (block.indexOf('{#') < 0 && block.indexOf(' ') < 0 && block.indexOf('else') < 0) { | |
| 145 | // Simple variable | |
| 146 | blocks.push({ | |
| 147 | type: 'variable', | |
| 148 | contextName: block.replace(/[{}]/g, ''), | |
| 149 | }); | |
| 150 | continue; | |
| 151 | } | |
| 152 | // Helpers | |
| 153 | var helperSlices = Template7Utils.helperToSlices(block); | |
| 154 | var helperName = helperSlices[0]; | |
| 155 | var isPartial = helperName === '>'; | |
| 156 | var helperContext = []; | |
| 157 | var helperHash = {}; | |
| 158 | for (j = 1; j < helperSlices.length; j += 1) { | |
| 159 | var slice = helperSlices[j]; | |
| 160 | if (Array.isArray(slice)) { | |
| 161 | // Hash | |
| 162 | helperHash[slice[0]] = slice[1] === 'false' ? false : slice[1]; | |
| 163 | } else { | |
| 164 | helperContext.push(slice); | |
| 165 | } | |
| 166 | } | |
| 167 | ||
| 168 | if (block.indexOf('{#') >= 0) { | |
| 169 | // Condition/Helper | |
| 170 | var helperContent = ''; | |
| 171 | var elseContent = ''; | |
| 172 | var toSkip = 0; | |
| 173 | var shiftIndex = (void 0); | |
| 174 | var foundClosed = false; | |
| 175 | var foundElse = false; | |
| 176 | var depth = 0; | |
| 177 | for (j = i + 1; j < stringBlocks.length; j += 1) { | |
| 178 | if (stringBlocks[j].indexOf('{{#') >= 0) { | |
| 179 | depth += 1; | |
| 180 | } | |
| 181 | if (stringBlocks[j].indexOf('{{/') >= 0) { | |
| 182 | depth -= 1; | |
| 183 | } | |
| 184 | if (stringBlocks[j].indexOf(("{{#" + helperName)) >= 0) { | |
| 185 | helperContent += stringBlocks[j]; | |
| 186 | if (foundElse) { elseContent += stringBlocks[j]; } | |
| 187 | toSkip += 1; | |
| 188 | } else if (stringBlocks[j].indexOf(("{{/" + helperName)) >= 0) { | |
| 189 | if (toSkip > 0) { | |
| 190 | toSkip -= 1; | |
| 191 | helperContent += stringBlocks[j]; | |
| 192 | if (foundElse) { elseContent += stringBlocks[j]; } | |
| 193 | } else { | |
| 194 | shiftIndex = j; | |
| 195 | foundClosed = true; | |
| 196 | break; | |
| 197 | } | |
| 198 | } else if (stringBlocks[j].indexOf('else') >= 0 && depth === 0) { | |
| 199 | foundElse = true; | |
| 200 | } else { | |
| 201 | if (!foundElse) { helperContent += stringBlocks[j]; } | |
| 202 | if (foundElse) { elseContent += stringBlocks[j]; } | |
| 203 | } | |
| 204 | } | |
| 205 | if (foundClosed) { | |
| 206 | if (shiftIndex) { i = shiftIndex; } | |
| 207 | if (helperName === 'raw') { | |
| 208 | blocks.push({ | |
| 209 | type: 'plain', | |
| 210 | content: helperContent, | |
| 211 | }); | |
| 212 | } else { | |
| 213 | blocks.push({ | |
| 214 | type: 'helper', | |
| 215 | helperName: helperName, | |
| 216 | contextName: helperContext, | |
| 217 | content: helperContent, | |
| 218 | inverseContent: elseContent, | |
| 219 | hash: helperHash, | |
| 220 | }); | |
| 221 | } | |
| 222 | } | |
| 223 | } else if (block.indexOf(' ') > 0) { | |
| 224 | if (isPartial) { | |
| 225 | helperName = '_partial'; | |
| 226 | if (helperContext[0]) { | |
| 227 | if (helperContext[0].indexOf('[') === 0) { helperContext[0] = helperContext[0].replace(/[[\]]/g, ''); } | |
| 228 | else { helperContext[0] = "\"" + (helperContext[0].replace(/"|'/g, '')) + "\""; } | |
| 229 | } | |
| 230 | } | |
| 231 | blocks.push({ | |
| 232 | type: 'helper', | |
| 233 | helperName: helperName, | |
| 234 | contextName: helperContext, | |
| 235 | hash: helperHash, | |
| 236 | }); | |
| 237 | } | |
| 238 | } | |
| 239 | } | |
| 240 | return blocks; | |
| 241 | }, | |
| 242 | parseJsVariable: function parseJsVariable(expression, replace, object) { | |
| 243 | return expression.split(/([+ \-*/^()&=|<>!%:?])/g).reduce(function (arr, part) { | |
| 244 | if (!part) { | |
| 245 | return arr; | |
| 246 | } | |
| 247 | if (part.indexOf(replace) < 0) { | |
| 248 | arr.push(part); | |
| 249 | return arr; | |
| 250 | } | |
| 251 | if (!object) { | |
| 252 | arr.push(JSON.stringify('')); | |
| 253 | return arr; | |
| 254 | } | |
| 255 | ||
| 256 | var variable = object; | |
| 257 | if (part.indexOf((replace + ".")) >= 0) { | |
| 258 | part.split((replace + "."))[1].split('.').forEach(function (partName) { | |
| 259 | if (partName in variable) { variable = variable[partName]; } | |
| 260 | else { variable = undefined; } | |
| 261 | }); | |
| 262 | } | |
| 5d51ea26 DC |
263 | if ( |
| 264 | (typeof variable === 'string') | |
| 265 | || Array.isArray(variable) | |
| 266 | || (variable.constructor && variable.constructor === Object) | |
| 267 | ) { | |
| 5309fbda DC |
268 | variable = JSON.stringify(variable); |
| 269 | } | |
| 270 | if (variable === undefined) { variable = 'undefined'; } | |
| 271 | ||
| 272 | arr.push(variable); | |
| 273 | return arr; | |
| 274 | }, []).join(''); | |
| 5d51ea26 | 275 | |
| 5309fbda DC |
276 | }, |
| 277 | parseJsParents: function parseJsParents(expression, parents) { | |
| 278 | return expression.split(/([+ \-*^()&=|<>!%:?])/g).reduce(function (arr, part) { | |
| 279 | if (!part) { | |
| 280 | return arr; | |
| 281 | } | |
| 282 | ||
| 283 | if (part.indexOf('../') < 0) { | |
| 284 | arr.push(part); | |
| 285 | return arr; | |
| 286 | } | |
| 287 | ||
| 288 | if (!parents || parents.length === 0) { | |
| 289 | arr.push(JSON.stringify('')); | |
| 290 | return arr; | |
| 291 | } | |
| 292 | ||
| 293 | var levelsUp = part.split('../').length - 1; | |
| 294 | var parentData = levelsUp > parents.length ? parents[parents.length - 1] : parents[levelsUp - 1]; | |
| 295 | ||
| 296 | var variable = parentData; | |
| 297 | var parentPart = part.replace(/..\//g, ''); | |
| 298 | parentPart.split('.').forEach(function (partName) { | |
| 299 | if (typeof variable[partName] !== 'undefined') { variable = variable[partName]; } | |
| 300 | else { variable = 'undefined'; } | |
| 301 | }); | |
| 302 | if (variable === false || variable === true) { | |
| 303 | arr.push(JSON.stringify(variable)); | |
| 304 | return arr; | |
| 305 | } | |
| 306 | if (variable === null || variable === 'undefined') { | |
| 307 | arr.push(JSON.stringify('')); | |
| 308 | return arr; | |
| 309 | } | |
| 310 | arr.push(JSON.stringify(variable)); | |
| 311 | return arr; | |
| 312 | }, []).join(''); | |
| 313 | }, | |
| 314 | getCompileVar: function getCompileVar(name, ctx, data) { | |
| 315 | if ( data === void 0 ) data = 'data_1'; | |
| 316 | ||
| 317 | var variable = ctx; | |
| 318 | var parts; | |
| 319 | var levelsUp = 0; | |
| 320 | var newDepth; | |
| 321 | if (name.indexOf('../') === 0) { | |
| 322 | levelsUp = name.split('../').length - 1; | |
| 323 | newDepth = variable.split('_')[1] - levelsUp; | |
| 324 | variable = "ctx_" + (newDepth >= 1 ? newDepth : 1); | |
| 325 | parts = name.split('../')[levelsUp].split('.'); | |
| 326 | } else if (name.indexOf('@global') === 0) { | |
| 327 | variable = 'Template7.global'; | |
| 328 | parts = name.split('@global.')[1].split('.'); | |
| 329 | } else if (name.indexOf('@root') === 0) { | |
| 330 | variable = 'root'; | |
| 331 | parts = name.split('@root.')[1].split('.'); | |
| 332 | } else { | |
| 333 | parts = name.split('.'); | |
| 334 | } | |
| 335 | for (var i = 0; i < parts.length; i += 1) { | |
| 336 | var part = parts[i]; | |
| 337 | if (part.indexOf('@') === 0) { | |
| 338 | var dataLevel = data.split('_')[1]; | |
| 339 | if (levelsUp > 0) { | |
| 340 | dataLevel = newDepth; | |
| 341 | } | |
| 342 | if (i > 0) { | |
| 343 | variable += "[(data_" + dataLevel + " && data_" + dataLevel + "." + (part.replace('@', '')) + ")]"; | |
| 344 | } else { | |
| 345 | variable = "(data_" + dataLevel + " && data_" + dataLevel + "." + (part.replace('@', '')) + ")"; | |
| 346 | } | |
| 347 | } else if (Number.isFinite ? Number.isFinite(part) : Template7Context.isFinite(part)) { | |
| 348 | variable += "[" + part + "]"; | |
| 349 | } else if (part === 'this' || part.indexOf('this.') >= 0 || part.indexOf('this[') >= 0 || part.indexOf('this(') >= 0) { | |
| 350 | variable = part.replace('this', ctx); | |
| 351 | } else { | |
| 352 | variable += "." + part; | |
| 353 | } | |
| 354 | } | |
| 355 | return variable; | |
| 356 | }, | |
| 357 | getCompiledArguments: function getCompiledArguments(contextArray, ctx, data) { | |
| 358 | var arr = []; | |
| 359 | for (var i = 0; i < contextArray.length; i += 1) { | |
| 360 | if (/^['"]/.test(contextArray[i])) { arr.push(contextArray[i]); } | |
| 361 | else if (/^(true|false|\d+)$/.test(contextArray[i])) { arr.push(contextArray[i]); } | |
| 362 | else { | |
| 363 | arr.push(Template7Utils.getCompileVar(contextArray[i], ctx, data)); | |
| 364 | } | |
| 365 | } | |
| 366 | ||
| 367 | return arr.join(', '); | |
| 368 | }, | |
| 369 | }; | |
| 370 | ||
| 371 | /* eslint no-eval: "off" */ | |
| 372 | ||
| 373 | var Template7Helpers = { | |
| 374 | _partial: function _partial(partialName, options) { | |
| 375 | var ctx = this; | |
| 376 | var p = Template7Class.partials[partialName]; | |
| 377 | if (!p || (p && !p.template)) { return ''; } | |
| 378 | if (!p.compiled) { | |
| 379 | p.compiled = new Template7Class(p.template).compile(); | |
| 380 | } | |
| 381 | Object.keys(options.hash).forEach(function (hashName) { | |
| 382 | ctx[hashName] = options.hash[hashName]; | |
| 383 | }); | |
| 384 | return p.compiled(ctx, options.data, options.root); | |
| 385 | }, | |
| 386 | escape: function escape(context) { | |
| 5d51ea26 | 387 | if (typeof context === 'undefined' || context === null) { return ''; } |
| 5309fbda DC |
388 | if (typeof context !== 'string') { |
| 389 | throw new Error('Template7: Passed context to "escape" helper should be a string'); | |
| 390 | } | |
| 391 | return Template7Utils.escape(context); | |
| 392 | }, | |
| 393 | if: function if$1(context, options) { | |
| 394 | var ctx = context; | |
| 395 | if (Template7Utils.isFunction(ctx)) { ctx = ctx.call(this); } | |
| 396 | if (ctx) { | |
| 397 | return options.fn(this, options.data); | |
| 398 | } | |
| 399 | ||
| 400 | return options.inverse(this, options.data); | |
| 401 | }, | |
| 402 | unless: function unless(context, options) { | |
| 403 | var ctx = context; | |
| 404 | if (Template7Utils.isFunction(ctx)) { ctx = ctx.call(this); } | |
| 405 | if (!ctx) { | |
| 406 | return options.fn(this, options.data); | |
| 407 | } | |
| 408 | ||
| 409 | return options.inverse(this, options.data); | |
| 410 | }, | |
| 411 | each: function each(context, options) { | |
| 412 | var ctx = context; | |
| 413 | var ret = ''; | |
| 414 | var i = 0; | |
| 415 | if (Template7Utils.isFunction(ctx)) { ctx = ctx.call(this); } | |
| 416 | if (Array.isArray(ctx)) { | |
| 417 | if (options.hash.reverse) { | |
| 418 | ctx = ctx.reverse(); | |
| 419 | } | |
| 420 | for (i = 0; i < ctx.length; i += 1) { | |
| 421 | ret += options.fn(ctx[i], { first: i === 0, last: i === ctx.length - 1, index: i }); | |
| 422 | } | |
| 423 | if (options.hash.reverse) { | |
| 424 | ctx = ctx.reverse(); | |
| 425 | } | |
| 426 | } else { | |
| 427 | // eslint-disable-next-line | |
| 428 | for (var key in ctx) { | |
| 429 | i += 1; | |
| 430 | ret += options.fn(ctx[key], { key: key }); | |
| 431 | } | |
| 432 | } | |
| 433 | if (i > 0) { return ret; } | |
| 434 | return options.inverse(this); | |
| 435 | }, | |
| 436 | with: function with$1(context, options) { | |
| 437 | var ctx = context; | |
| 438 | if (Template7Utils.isFunction(ctx)) { ctx = context.call(this); } | |
| 439 | return options.fn(ctx); | |
| 440 | }, | |
| 441 | join: function join(context, options) { | |
| 442 | var ctx = context; | |
| 443 | if (Template7Utils.isFunction(ctx)) { ctx = ctx.call(this); } | |
| 444 | return ctx.join(options.hash.delimiter || options.hash.delimeter); | |
| 445 | }, | |
| 446 | js: function js(expression, options) { | |
| 447 | var data = options.data; | |
| 448 | var func; | |
| 449 | var execute = expression; | |
| 450 | ('index first last key').split(' ').forEach(function (prop) { | |
| 451 | if (typeof data[prop] !== 'undefined') { | |
| 452 | var re1 = new RegExp(("this.@" + prop), 'g'); | |
| 453 | var re2 = new RegExp(("@" + prop), 'g'); | |
| 454 | execute = execute | |
| 455 | .replace(re1, JSON.stringify(data[prop])) | |
| 456 | .replace(re2, JSON.stringify(data[prop])); | |
| 457 | } | |
| 458 | }); | |
| 459 | if (options.root && execute.indexOf('@root') >= 0) { | |
| 460 | execute = Template7Utils.parseJsVariable(execute, '@root', options.root); | |
| 461 | } | |
| 462 | if (execute.indexOf('@global') >= 0) { | |
| 463 | execute = Template7Utils.parseJsVariable(execute, '@global', Template7Context.Template7.global); | |
| 464 | } | |
| 465 | if (execute.indexOf('../') >= 0) { | |
| 466 | execute = Template7Utils.parseJsParents(execute, options.parents); | |
| 467 | } | |
| 468 | if (execute.indexOf('return') >= 0) { | |
| 469 | func = "(function(){" + execute + "})"; | |
| 470 | } else { | |
| 471 | func = "(function(){return (" + execute + ")})"; | |
| 472 | } | |
| 473 | return eval(func).call(this); | |
| 474 | }, | |
| 475 | js_if: function js_if(expression, options) { | |
| 476 | var data = options.data; | |
| 477 | var func; | |
| 478 | var execute = expression; | |
| 479 | ('index first last key').split(' ').forEach(function (prop) { | |
| 480 | if (typeof data[prop] !== 'undefined') { | |
| 481 | var re1 = new RegExp(("this.@" + prop), 'g'); | |
| 482 | var re2 = new RegExp(("@" + prop), 'g'); | |
| 483 | execute = execute | |
| 484 | .replace(re1, JSON.stringify(data[prop])) | |
| 485 | .replace(re2, JSON.stringify(data[prop])); | |
| 486 | } | |
| 487 | }); | |
| 488 | if (options.root && execute.indexOf('@root') >= 0) { | |
| 489 | execute = Template7Utils.parseJsVariable(execute, '@root', options.root); | |
| 490 | } | |
| 491 | if (execute.indexOf('@global') >= 0) { | |
| 492 | execute = Template7Utils.parseJsVariable(execute, '@global', Template7Context.Template7.global); | |
| 493 | } | |
| 494 | if (execute.indexOf('../') >= 0) { | |
| 495 | execute = Template7Utils.parseJsParents(execute, options.parents); | |
| 496 | } | |
| 497 | if (execute.indexOf('return') >= 0) { | |
| 498 | func = "(function(){" + execute + "})"; | |
| 499 | } else { | |
| 500 | func = "(function(){return (" + execute + ")})"; | |
| 501 | } | |
| 502 | var condition = eval(func).call(this); | |
| 503 | if (condition) { | |
| 504 | return options.fn(this, options.data); | |
| 505 | } | |
| 506 | ||
| 507 | return options.inverse(this, options.data); | |
| 508 | }, | |
| 509 | }; | |
| 510 | Template7Helpers.js_compare = Template7Helpers.js_if; | |
| 511 | ||
| 512 | var Template7Options = {}; | |
| 513 | var Template7Partials = {}; | |
| 514 | ||
| 515 | var Template7Class = function Template7Class(template) { | |
| 516 | var t = this; | |
| 517 | t.template = template; | |
| 518 | }; | |
| 519 | ||
| 520 | var staticAccessors = { options: { configurable: true },partials: { configurable: true },helpers: { configurable: true } }; | |
| 521 | Template7Class.prototype.compile = function compile (template, depth) { | |
| 522 | if ( template === void 0 ) template = this.template; | |
| 523 | if ( depth === void 0 ) depth = 1; | |
| 524 | ||
| 525 | var t = this; | |
| 526 | if (t.compiled) { return t.compiled; } | |
| 527 | ||
| 528 | if (typeof template !== 'string') { | |
| 529 | throw new Error('Template7: Template must be a string'); | |
| 530 | } | |
| 531 | var stringToBlocks = Template7Utils.stringToBlocks; | |
| 532 | var getCompileVar = Template7Utils.getCompileVar; | |
| 533 | var getCompiledArguments = Template7Utils.getCompiledArguments; | |
| 534 | ||
| 535 | var blocks = stringToBlocks(template); | |
| 536 | var ctx = "ctx_" + depth; | |
| 537 | var data = "data_" + depth; | |
| 538 | if (blocks.length === 0) { | |
| 539 | return function empty() { return ''; }; | |
| 540 | } | |
| 541 | ||
| 542 | function getCompileFn(block, newDepth) { | |
| 543 | if (block.content) { return t.compile(block.content, newDepth); } | |
| 544 | return function empty() { return ''; }; | |
| 545 | } | |
| 546 | function getCompileInverse(block, newDepth) { | |
| 547 | if (block.inverseContent) { return t.compile(block.inverseContent, newDepth); } | |
| 548 | return function empty() { return ''; }; | |
| 549 | } | |
| 550 | ||
| 551 | var resultString = ''; | |
| 552 | if (depth === 1) { | |
| 553 | resultString += "(function (" + ctx + ", " + data + ", root) {\n"; | |
| 554 | } else { | |
| 555 | resultString += "(function (" + ctx + ", " + data + ") {\n"; | |
| 556 | } | |
| 557 | if (depth === 1) { | |
| 558 | resultString += 'function isArray(arr){return Array.isArray(arr);}\n'; | |
| 559 | resultString += 'function isFunction(func){return (typeof func === \'function\');}\n'; | |
| 560 | resultString += 'function c(val, ctx) {if (typeof val !== "undefined" && val !== null) {if (isFunction(val)) {return val.call(ctx);} else return val;} else return "";}\n'; | |
| 561 | resultString += 'root = root || ctx_1 || {};\n'; | |
| 562 | } | |
| 563 | resultString += 'var r = \'\';\n'; | |
| 564 | var i; | |
| 565 | for (i = 0; i < blocks.length; i += 1) { | |
| 566 | var block = blocks[i]; | |
| 567 | // Plain block | |
| 568 | if (block.type === 'plain') { | |
| 569 | // eslint-disable-next-line | |
| 570 | resultString += "r +='" + ((block.content).replace(/\r/g, '\\r').replace(/\n/g, '\\n').replace(/'/g, '\\' + '\'')) + "';"; | |
| 571 | continue; | |
| 572 | } | |
| 573 | var variable = (void 0); | |
| 574 | var compiledArguments = (void 0); | |
| 575 | // Variable block | |
| 576 | if (block.type === 'variable') { | |
| 577 | variable = getCompileVar(block.contextName, ctx, data); | |
| 578 | resultString += "r += c(" + variable + ", " + ctx + ");"; | |
| 579 | } | |
| 580 | // Helpers block | |
| 581 | if (block.type === 'helper') { | |
| 582 | var parents = (void 0); | |
| 583 | if (ctx !== 'ctx_1') { | |
| 584 | var level = ctx.split('_')[1]; | |
| 585 | var parentsString = "ctx_" + (level - 1); | |
| 586 | for (var j = level - 2; j >= 1; j -= 1) { | |
| 587 | parentsString += ", ctx_" + j; | |
| 588 | } | |
| 589 | parents = "[" + parentsString + "]"; | |
| 590 | } else { | |
| 591 | parents = "[" + ctx + "]"; | |
| 592 | } | |
| 593 | var dynamicHelper = (void 0); | |
| 594 | if (block.helperName.indexOf('[') === 0) { | |
| 595 | block.helperName = getCompileVar(block.helperName.replace(/[[\]]/g, ''), ctx, data); | |
| 596 | dynamicHelper = true; | |
| 597 | } | |
| 598 | if (dynamicHelper || block.helperName in Template7Helpers) { | |
| 599 | compiledArguments = getCompiledArguments(block.contextName, ctx, data); | |
| 600 | resultString += "r += (Template7Helpers" + (dynamicHelper ? ("[" + (block.helperName) + "]") : ("." + (block.helperName))) + ").call(" + ctx + ", " + (compiledArguments && ((compiledArguments + ", "))) + "{hash:" + (JSON.stringify(block.hash)) + ", data: " + data + " || {}, fn: " + (getCompileFn(block, depth + 1)) + ", inverse: " + (getCompileInverse(block, depth + 1)) + ", root: root, parents: " + parents + "});"; | |
| 601 | } else if (block.contextName.length > 0) { | |
| 602 | throw new Error(("Template7: Missing helper: \"" + (block.helperName) + "\"")); | |
| 603 | } else { | |
| 604 | variable = getCompileVar(block.helperName, ctx, data); | |
| 605 | resultString += "if (" + variable + ") {"; | |
| 606 | resultString += "if (isArray(" + variable + ")) {"; | |
| 607 | resultString += "r += (Template7Helpers.each).call(" + ctx + ", " + variable + ", {hash:" + (JSON.stringify(block.hash)) + ", data: " + data + " || {}, fn: " + (getCompileFn(block, depth + 1)) + ", inverse: " + (getCompileInverse(block, depth + 1)) + ", root: root, parents: " + parents + "});"; | |
| 608 | resultString += '}else {'; | |
| 609 | resultString += "r += (Template7Helpers.with).call(" + ctx + ", " + variable + ", {hash:" + (JSON.stringify(block.hash)) + ", data: " + data + " || {}, fn: " + (getCompileFn(block, depth + 1)) + ", inverse: " + (getCompileInverse(block, depth + 1)) + ", root: root, parents: " + parents + "});"; | |
| 610 | resultString += '}}'; | |
| 611 | } | |
| 612 | } | |
| 613 | } | |
| 614 | resultString += '\nreturn r;})'; | |
| 615 | ||
| 616 | if (depth === 1) { | |
| 617 | // eslint-disable-next-line | |
| 618 | t.compiled = eval(resultString); | |
| 619 | return t.compiled; | |
| 620 | } | |
| 621 | return resultString; | |
| 622 | }; | |
| 623 | staticAccessors.options.get = function () { | |
| 624 | return Template7Options; | |
| 625 | }; | |
| 626 | staticAccessors.partials.get = function () { | |
| 627 | return Template7Partials; | |
| 628 | }; | |
| 629 | staticAccessors.helpers.get = function () { | |
| 630 | return Template7Helpers; | |
| 631 | }; | |
| 632 | ||
| 633 | Object.defineProperties( Template7Class, staticAccessors ); | |
| 634 | ||
| 635 | function Template7() { | |
| 636 | var args = [], len = arguments.length; | |
| 637 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 638 | ||
| 639 | var template = args[0]; | |
| 640 | var data = args[1]; | |
| 641 | if (args.length === 2) { | |
| 642 | var instance = new Template7Class(template); | |
| 643 | var rendered = instance.compile()(data); | |
| 644 | instance = null; | |
| 645 | return (rendered); | |
| 646 | } | |
| 647 | return new Template7Class(template); | |
| 648 | } | |
| 649 | Template7.registerHelper = function registerHelper(name, fn) { | |
| 650 | Template7Class.helpers[name] = fn; | |
| 651 | }; | |
| 652 | Template7.unregisterHelper = function unregisterHelper(name) { | |
| 653 | Template7Class.helpers[name] = undefined; | |
| 654 | delete Template7Class.helpers[name]; | |
| 655 | }; | |
| 656 | Template7.registerPartial = function registerPartial(name, template) { | |
| 657 | Template7Class.partials[name] = { template: template }; | |
| 658 | }; | |
| 659 | Template7.unregisterPartial = function unregisterPartial(name) { | |
| 660 | if (Template7Class.partials[name]) { | |
| 661 | Template7Class.partials[name] = undefined; | |
| 662 | delete Template7Class.partials[name]; | |
| 663 | } | |
| 664 | }; | |
| 665 | Template7.compile = function compile(template, options) { | |
| 666 | var instance = new Template7Class(template, options); | |
| 667 | return instance.compile(); | |
| 668 | }; | |
| 669 | ||
| 670 | Template7.options = Template7Class.options; | |
| 671 | Template7.helpers = Template7Class.helpers; | |
| 672 | Template7.partials = Template7Class.partials; | |
| 673 | ||
| 674 | /** | |
| 675 | * SSR Window 1.0.1 | |
| 676 | * Better handling for window object in SSR environment | |
| 677 | * https://github.com/nolimits4web/ssr-window | |
| 678 | * | |
| 679 | * Copyright 2018, Vladimir Kharlampidi | |
| 680 | * | |
| 681 | * Licensed under MIT | |
| 682 | * | |
| 683 | * Released on: July 18, 2018 | |
| 684 | */ | |
| 685 | var doc = (typeof document === 'undefined') ? { | |
| 686 | body: {}, | |
| 687 | addEventListener: function addEventListener() {}, | |
| 688 | removeEventListener: function removeEventListener() {}, | |
| 689 | activeElement: { | |
| 690 | blur: function blur() {}, | |
| 691 | nodeName: '', | |
| 692 | }, | |
| 693 | querySelector: function querySelector() { | |
| 694 | return null; | |
| 695 | }, | |
| 696 | querySelectorAll: function querySelectorAll() { | |
| 697 | return []; | |
| 698 | }, | |
| 699 | getElementById: function getElementById() { | |
| 700 | return null; | |
| 701 | }, | |
| 702 | createEvent: function createEvent() { | |
| 703 | return { | |
| 704 | initEvent: function initEvent() {}, | |
| 705 | }; | |
| 706 | }, | |
| 707 | createElement: function createElement() { | |
| 708 | return { | |
| 709 | children: [], | |
| 710 | childNodes: [], | |
| 711 | style: {}, | |
| 712 | setAttribute: function setAttribute() {}, | |
| 713 | getElementsByTagName: function getElementsByTagName() { | |
| 714 | return []; | |
| 715 | }, | |
| 716 | }; | |
| 717 | }, | |
| 718 | location: { hash: '' }, | |
| 719 | } : document; // eslint-disable-line | |
| 720 | ||
| 721 | var win = (typeof window === 'undefined') ? { | |
| 722 | document: doc, | |
| 723 | navigator: { | |
| 724 | userAgent: '', | |
| 725 | }, | |
| 726 | location: {}, | |
| 727 | history: {}, | |
| 728 | CustomEvent: function CustomEvent() { | |
| 729 | return this; | |
| 730 | }, | |
| 731 | addEventListener: function addEventListener() {}, | |
| 732 | removeEventListener: function removeEventListener() {}, | |
| 733 | getComputedStyle: function getComputedStyle() { | |
| 734 | return { | |
| 735 | getPropertyValue: function getPropertyValue() { | |
| 736 | return ''; | |
| 737 | }, | |
| 738 | }; | |
| 739 | }, | |
| 740 | Image: function Image() {}, | |
| 741 | Date: function Date() {}, | |
| 742 | screen: {}, | |
| 743 | setTimeout: function setTimeout() {}, | |
| 744 | clearTimeout: function clearTimeout() {}, | |
| 745 | } : window; // eslint-disable-line | |
| 746 | ||
| 747 | /** | |
| 748 | * Dom7 2.1.3 | |
| 749 | * Minimalistic JavaScript library for DOM manipulation, with a jQuery-compatible API | |
| 750 | * http://framework7.io/docs/dom.html | |
| 751 | * | |
| 752 | * Copyright 2019, Vladimir Kharlampidi | |
| 753 | * The iDangero.us | |
| 754 | * http://www.idangero.us/ | |
| 755 | * | |
| 756 | * Licensed under MIT | |
| 757 | * | |
| 758 | * Released on: February 11, 2019 | |
| 759 | */ | |
| 760 | ||
| 761 | var Dom7 = function Dom7(arr) { | |
| 762 | var self = this; | |
| 763 | // Create array-like object | |
| 764 | for (var i = 0; i < arr.length; i += 1) { | |
| 765 | self[i] = arr[i]; | |
| 766 | } | |
| 767 | self.length = arr.length; | |
| 768 | // Return collection with methods | |
| 769 | return this; | |
| 770 | }; | |
| 771 | ||
| 772 | function $(selector, context) { | |
| 773 | var arr = []; | |
| 774 | var i = 0; | |
| 775 | if (selector && !context) { | |
| 776 | if (selector instanceof Dom7) { | |
| 777 | return selector; | |
| 778 | } | |
| 779 | } | |
| 780 | if (selector) { | |
| 781 | // String | |
| 782 | if (typeof selector === 'string') { | |
| 783 | var els; | |
| 784 | var tempParent; | |
| 785 | var html = selector.trim(); | |
| 786 | if (html.indexOf('<') >= 0 && html.indexOf('>') >= 0) { | |
| 787 | var toCreate = 'div'; | |
| 788 | if (html.indexOf('<li') === 0) { toCreate = 'ul'; } | |
| 789 | if (html.indexOf('<tr') === 0) { toCreate = 'tbody'; } | |
| 790 | if (html.indexOf('<td') === 0 || html.indexOf('<th') === 0) { toCreate = 'tr'; } | |
| 791 | if (html.indexOf('<tbody') === 0) { toCreate = 'table'; } | |
| 792 | if (html.indexOf('<option') === 0) { toCreate = 'select'; } | |
| 793 | tempParent = doc.createElement(toCreate); | |
| 794 | tempParent.innerHTML = html; | |
| 795 | for (i = 0; i < tempParent.childNodes.length; i += 1) { | |
| 796 | arr.push(tempParent.childNodes[i]); | |
| 797 | } | |
| 798 | } else { | |
| 799 | if (!context && selector[0] === '#' && !selector.match(/[ .<>:~]/)) { | |
| 800 | // Pure ID selector | |
| 801 | els = [doc.getElementById(selector.trim().split('#')[1])]; | |
| 802 | } else { | |
| 803 | // Other selectors | |
| 804 | els = (context || doc).querySelectorAll(selector.trim()); | |
| 805 | } | |
| 806 | for (i = 0; i < els.length; i += 1) { | |
| 807 | if (els[i]) { arr.push(els[i]); } | |
| 808 | } | |
| 809 | } | |
| 810 | } else if (selector.nodeType || selector === win || selector === doc) { | |
| 811 | // Node/element | |
| 812 | arr.push(selector); | |
| 813 | } else if (selector.length > 0 && selector[0].nodeType) { | |
| 814 | // Array of elements or instance of Dom | |
| 815 | for (i = 0; i < selector.length; i += 1) { | |
| 816 | arr.push(selector[i]); | |
| 817 | } | |
| 818 | } | |
| 819 | } | |
| 820 | return new Dom7(arr); | |
| 821 | } | |
| 822 | ||
| 823 | $.fn = Dom7.prototype; | |
| 824 | $.Class = Dom7; | |
| 825 | $.Dom7 = Dom7; | |
| 826 | ||
| 827 | function unique(arr) { | |
| 828 | var uniqueArray = []; | |
| 829 | for (var i = 0; i < arr.length; i += 1) { | |
| 830 | if (uniqueArray.indexOf(arr[i]) === -1) { uniqueArray.push(arr[i]); } | |
| 831 | } | |
| 832 | return uniqueArray; | |
| 833 | } | |
| 834 | function toCamelCase(string) { | |
| 835 | return string.toLowerCase().replace(/-(.)/g, function (match, group1) { return group1.toUpperCase(); }); | |
| 836 | } | |
| 837 | ||
| 838 | function requestAnimationFrame(callback) { | |
| 839 | if (win.requestAnimationFrame) { return win.requestAnimationFrame(callback); } | |
| 840 | else if (win.webkitRequestAnimationFrame) { return win.webkitRequestAnimationFrame(callback); } | |
| 841 | return win.setTimeout(callback, 1000 / 60); | |
| 842 | } | |
| 843 | function cancelAnimationFrame(id) { | |
| 844 | if (win.cancelAnimationFrame) { return win.cancelAnimationFrame(id); } | |
| 845 | else if (win.webkitCancelAnimationFrame) { return win.webkitCancelAnimationFrame(id); } | |
| 846 | return win.clearTimeout(id); | |
| 847 | } | |
| 848 | ||
| 849 | // Classes and attributes | |
| 850 | function addClass(className) { | |
| 851 | if (typeof className === 'undefined') { | |
| 852 | return this; | |
| 853 | } | |
| 854 | var classes = className.split(' '); | |
| 855 | for (var i = 0; i < classes.length; i += 1) { | |
| 856 | for (var j = 0; j < this.length; j += 1) { | |
| 857 | if (typeof this[j] !== 'undefined' && typeof this[j].classList !== 'undefined') { this[j].classList.add(classes[i]); } | |
| 858 | } | |
| 859 | } | |
| 860 | return this; | |
| 861 | } | |
| 862 | function removeClass(className) { | |
| 863 | var classes = className.split(' '); | |
| 864 | for (var i = 0; i < classes.length; i += 1) { | |
| 865 | for (var j = 0; j < this.length; j += 1) { | |
| 866 | if (typeof this[j] !== 'undefined' && typeof this[j].classList !== 'undefined') { this[j].classList.remove(classes[i]); } | |
| 867 | } | |
| 868 | } | |
| 869 | return this; | |
| 870 | } | |
| 871 | function hasClass(className) { | |
| 872 | if (!this[0]) { return false; } | |
| 873 | return this[0].classList.contains(className); | |
| 874 | } | |
| 875 | function toggleClass(className) { | |
| 876 | var classes = className.split(' '); | |
| 877 | for (var i = 0; i < classes.length; i += 1) { | |
| 878 | for (var j = 0; j < this.length; j += 1) { | |
| 879 | if (typeof this[j] !== 'undefined' && typeof this[j].classList !== 'undefined') { this[j].classList.toggle(classes[i]); } | |
| 880 | } | |
| 881 | } | |
| 882 | return this; | |
| 883 | } | |
| 884 | function attr(attrs, value) { | |
| 885 | var arguments$1 = arguments; | |
| 886 | ||
| 887 | if (arguments.length === 1 && typeof attrs === 'string') { | |
| 888 | // Get attr | |
| 889 | if (this[0]) { return this[0].getAttribute(attrs); } | |
| 890 | return undefined; | |
| 891 | } | |
| 892 | ||
| 893 | // Set attrs | |
| 894 | for (var i = 0; i < this.length; i += 1) { | |
| 895 | if (arguments$1.length === 2) { | |
| 896 | // String | |
| 897 | this[i].setAttribute(attrs, value); | |
| 898 | } else { | |
| 899 | // Object | |
| 900 | // eslint-disable-next-line | |
| 901 | for (var attrName in attrs) { | |
| 902 | this[i][attrName] = attrs[attrName]; | |
| 903 | this[i].setAttribute(attrName, attrs[attrName]); | |
| 904 | } | |
| 905 | } | |
| 906 | } | |
| 907 | return this; | |
| 908 | } | |
| 909 | // eslint-disable-next-line | |
| 910 | function removeAttr(attr) { | |
| 911 | for (var i = 0; i < this.length; i += 1) { | |
| 912 | this[i].removeAttribute(attr); | |
| 913 | } | |
| 914 | return this; | |
| 915 | } | |
| 916 | // eslint-disable-next-line | |
| 917 | function prop(props, value) { | |
| 918 | var arguments$1 = arguments; | |
| 919 | ||
| 920 | if (arguments.length === 1 && typeof props === 'string') { | |
| 921 | // Get prop | |
| 922 | if (this[0]) { return this[0][props]; } | |
| 923 | } else { | |
| 924 | // Set props | |
| 925 | for (var i = 0; i < this.length; i += 1) { | |
| 926 | if (arguments$1.length === 2) { | |
| 927 | // String | |
| 928 | this[i][props] = value; | |
| 929 | } else { | |
| 930 | // Object | |
| 931 | // eslint-disable-next-line | |
| 932 | for (var propName in props) { | |
| 933 | this[i][propName] = props[propName]; | |
| 934 | } | |
| 935 | } | |
| 936 | } | |
| 937 | return this; | |
| 938 | } | |
| 939 | } | |
| 940 | function data(key, value) { | |
| 941 | var el; | |
| 942 | if (typeof value === 'undefined') { | |
| 943 | el = this[0]; | |
| 944 | // Get value | |
| 945 | if (el) { | |
| 946 | if (el.dom7ElementDataStorage && (key in el.dom7ElementDataStorage)) { | |
| 947 | return el.dom7ElementDataStorage[key]; | |
| 948 | } | |
| 949 | ||
| 950 | var dataKey = el.getAttribute(("data-" + key)); | |
| 951 | if (dataKey) { | |
| 952 | return dataKey; | |
| 953 | } | |
| 954 | return undefined; | |
| 955 | } | |
| 956 | return undefined; | |
| 957 | } | |
| 958 | ||
| 959 | // Set value | |
| 960 | for (var i = 0; i < this.length; i += 1) { | |
| 961 | el = this[i]; | |
| 962 | if (!el.dom7ElementDataStorage) { el.dom7ElementDataStorage = {}; } | |
| 963 | el.dom7ElementDataStorage[key] = value; | |
| 964 | } | |
| 965 | return this; | |
| 966 | } | |
| 967 | function removeData(key) { | |
| 968 | for (var i = 0; i < this.length; i += 1) { | |
| 969 | var el = this[i]; | |
| 970 | if (el.dom7ElementDataStorage && el.dom7ElementDataStorage[key]) { | |
| 971 | el.dom7ElementDataStorage[key] = null; | |
| 972 | delete el.dom7ElementDataStorage[key]; | |
| 973 | } | |
| 974 | } | |
| 975 | } | |
| 976 | function dataset() { | |
| 977 | var el = this[0]; | |
| 978 | if (!el) { return undefined; } | |
| 979 | var dataset = {}; // eslint-disable-line | |
| 980 | if (el.dataset) { | |
| 981 | // eslint-disable-next-line | |
| 982 | for (var dataKey in el.dataset) { | |
| 983 | dataset[dataKey] = el.dataset[dataKey]; | |
| 984 | } | |
| 985 | } else { | |
| 986 | for (var i = 0; i < el.attributes.length; i += 1) { | |
| 987 | // eslint-disable-next-line | |
| 988 | var attr = el.attributes[i]; | |
| 989 | if (attr.name.indexOf('data-') >= 0) { | |
| 990 | dataset[toCamelCase(attr.name.split('data-')[1])] = attr.value; | |
| 991 | } | |
| 992 | } | |
| 993 | } | |
| 994 | // eslint-disable-next-line | |
| 995 | for (var key in dataset) { | |
| 996 | if (dataset[key] === 'false') { dataset[key] = false; } | |
| 997 | else if (dataset[key] === 'true') { dataset[key] = true; } | |
| 998 | else if (parseFloat(dataset[key]) === dataset[key] * 1) { dataset[key] *= 1; } | |
| 999 | } | |
| 1000 | return dataset; | |
| 1001 | } | |
| 1002 | function val(value) { | |
| 1003 | var dom = this; | |
| 1004 | if (typeof value === 'undefined') { | |
| 1005 | if (dom[0]) { | |
| 1006 | if (dom[0].multiple && dom[0].nodeName.toLowerCase() === 'select') { | |
| 1007 | var values = []; | |
| 1008 | for (var i = 0; i < dom[0].selectedOptions.length; i += 1) { | |
| 1009 | values.push(dom[0].selectedOptions[i].value); | |
| 1010 | } | |
| 1011 | return values; | |
| 1012 | } | |
| 1013 | return dom[0].value; | |
| 1014 | } | |
| 1015 | return undefined; | |
| 1016 | } | |
| 1017 | ||
| 1018 | for (var i$1 = 0; i$1 < dom.length; i$1 += 1) { | |
| 1019 | var el = dom[i$1]; | |
| 1020 | if (Array.isArray(value) && el.multiple && el.nodeName.toLowerCase() === 'select') { | |
| 1021 | for (var j = 0; j < el.options.length; j += 1) { | |
| 1022 | el.options[j].selected = value.indexOf(el.options[j].value) >= 0; | |
| 1023 | } | |
| 1024 | } else { | |
| 1025 | el.value = value; | |
| 1026 | } | |
| 1027 | } | |
| 1028 | return dom; | |
| 1029 | } | |
| 1030 | // Transforms | |
| 1031 | // eslint-disable-next-line | |
| 1032 | function transform(transform) { | |
| 1033 | for (var i = 0; i < this.length; i += 1) { | |
| 1034 | var elStyle = this[i].style; | |
| 1035 | elStyle.webkitTransform = transform; | |
| 1036 | elStyle.transform = transform; | |
| 1037 | } | |
| 1038 | return this; | |
| 1039 | } | |
| 1040 | function transition(duration) { | |
| 1041 | if (typeof duration !== 'string') { | |
| 1042 | duration = duration + "ms"; // eslint-disable-line | |
| 1043 | } | |
| 1044 | for (var i = 0; i < this.length; i += 1) { | |
| 1045 | var elStyle = this[i].style; | |
| 1046 | elStyle.webkitTransitionDuration = duration; | |
| 1047 | elStyle.transitionDuration = duration; | |
| 1048 | } | |
| 1049 | return this; | |
| 1050 | } | |
| 1051 | // Events | |
| 1052 | function on() { | |
| 1053 | var assign; | |
| 1054 | ||
| 1055 | var args = [], len = arguments.length; | |
| 1056 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 1057 | var eventType = args[0]; | |
| 1058 | var targetSelector = args[1]; | |
| 1059 | var listener = args[2]; | |
| 1060 | var capture = args[3]; | |
| 1061 | if (typeof args[1] === 'function') { | |
| 1062 | (assign = args, eventType = assign[0], listener = assign[1], capture = assign[2]); | |
| 1063 | targetSelector = undefined; | |
| 1064 | } | |
| 1065 | if (!capture) { capture = false; } | |
| 1066 | ||
| 1067 | function handleLiveEvent(e) { | |
| 1068 | var target = e.target; | |
| 1069 | if (!target) { return; } | |
| 1070 | var eventData = e.target.dom7EventData || []; | |
| 1071 | if (eventData.indexOf(e) < 0) { | |
| 1072 | eventData.unshift(e); | |
| 1073 | } | |
| 1074 | if ($(target).is(targetSelector)) { listener.apply(target, eventData); } | |
| 1075 | else { | |
| 1076 | var parents = $(target).parents(); // eslint-disable-line | |
| 1077 | for (var k = 0; k < parents.length; k += 1) { | |
| 1078 | if ($(parents[k]).is(targetSelector)) { listener.apply(parents[k], eventData); } | |
| 1079 | } | |
| 1080 | } | |
| 1081 | } | |
| 1082 | function handleEvent(e) { | |
| 1083 | var eventData = e && e.target ? e.target.dom7EventData || [] : []; | |
| 1084 | if (eventData.indexOf(e) < 0) { | |
| 1085 | eventData.unshift(e); | |
| 1086 | } | |
| 1087 | listener.apply(this, eventData); | |
| 1088 | } | |
| 1089 | var events = eventType.split(' '); | |
| 1090 | var j; | |
| 1091 | for (var i = 0; i < this.length; i += 1) { | |
| 1092 | var el = this[i]; | |
| 1093 | if (!targetSelector) { | |
| 1094 | for (j = 0; j < events.length; j += 1) { | |
| 1095 | var event = events[j]; | |
| 1096 | if (!el.dom7Listeners) { el.dom7Listeners = {}; } | |
| 1097 | if (!el.dom7Listeners[event]) { el.dom7Listeners[event] = []; } | |
| 1098 | el.dom7Listeners[event].push({ | |
| 1099 | listener: listener, | |
| 1100 | proxyListener: handleEvent, | |
| 1101 | }); | |
| 1102 | el.addEventListener(event, handleEvent, capture); | |
| 1103 | } | |
| 1104 | } else { | |
| 1105 | // Live events | |
| 1106 | for (j = 0; j < events.length; j += 1) { | |
| 1107 | var event$1 = events[j]; | |
| 1108 | if (!el.dom7LiveListeners) { el.dom7LiveListeners = {}; } | |
| 1109 | if (!el.dom7LiveListeners[event$1]) { el.dom7LiveListeners[event$1] = []; } | |
| 1110 | el.dom7LiveListeners[event$1].push({ | |
| 1111 | listener: listener, | |
| 1112 | proxyListener: handleLiveEvent, | |
| 1113 | }); | |
| 1114 | el.addEventListener(event$1, handleLiveEvent, capture); | |
| 1115 | } | |
| 1116 | } | |
| 1117 | } | |
| 1118 | return this; | |
| 1119 | } | |
| 1120 | function off() { | |
| 1121 | var assign; | |
| 1122 | ||
| 1123 | var args = [], len = arguments.length; | |
| 1124 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 1125 | var eventType = args[0]; | |
| 1126 | var targetSelector = args[1]; | |
| 1127 | var listener = args[2]; | |
| 1128 | var capture = args[3]; | |
| 1129 | if (typeof args[1] === 'function') { | |
| 1130 | (assign = args, eventType = assign[0], listener = assign[1], capture = assign[2]); | |
| 1131 | targetSelector = undefined; | |
| 1132 | } | |
| 1133 | if (!capture) { capture = false; } | |
| 1134 | ||
| 1135 | var events = eventType.split(' '); | |
| 1136 | for (var i = 0; i < events.length; i += 1) { | |
| 1137 | var event = events[i]; | |
| 1138 | for (var j = 0; j < this.length; j += 1) { | |
| 1139 | var el = this[j]; | |
| 1140 | var handlers = (void 0); | |
| 1141 | if (!targetSelector && el.dom7Listeners) { | |
| 1142 | handlers = el.dom7Listeners[event]; | |
| 1143 | } else if (targetSelector && el.dom7LiveListeners) { | |
| 1144 | handlers = el.dom7LiveListeners[event]; | |
| 1145 | } | |
| 1146 | if (handlers && handlers.length) { | |
| 1147 | for (var k = handlers.length - 1; k >= 0; k -= 1) { | |
| 1148 | var handler = handlers[k]; | |
| 1149 | if (listener && handler.listener === listener) { | |
| 1150 | el.removeEventListener(event, handler.proxyListener, capture); | |
| 1151 | handlers.splice(k, 1); | |
| 1152 | } else if (listener && handler.listener && handler.listener.dom7proxy && handler.listener.dom7proxy === listener) { | |
| 1153 | el.removeEventListener(event, handler.proxyListener, capture); | |
| 1154 | handlers.splice(k, 1); | |
| 1155 | } else if (!listener) { | |
| 1156 | el.removeEventListener(event, handler.proxyListener, capture); | |
| 1157 | handlers.splice(k, 1); | |
| 1158 | } | |
| 1159 | } | |
| 1160 | } | |
| 1161 | } | |
| 1162 | } | |
| 1163 | return this; | |
| 1164 | } | |
| 1165 | function once() { | |
| 1166 | var assign; | |
| 1167 | ||
| 1168 | var args = [], len = arguments.length; | |
| 1169 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 1170 | var dom = this; | |
| 1171 | var eventName = args[0]; | |
| 1172 | var targetSelector = args[1]; | |
| 1173 | var listener = args[2]; | |
| 1174 | var capture = args[3]; | |
| 1175 | if (typeof args[1] === 'function') { | |
| 1176 | (assign = args, eventName = assign[0], listener = assign[1], capture = assign[2]); | |
| 1177 | targetSelector = undefined; | |
| 1178 | } | |
| 1179 | function onceHandler() { | |
| 1180 | var eventArgs = [], len = arguments.length; | |
| 1181 | while ( len-- ) eventArgs[ len ] = arguments[ len ]; | |
| 1182 | ||
| 1183 | listener.apply(this, eventArgs); | |
| 1184 | dom.off(eventName, targetSelector, onceHandler, capture); | |
| 1185 | if (onceHandler.dom7proxy) { | |
| 1186 | delete onceHandler.dom7proxy; | |
| 1187 | } | |
| 1188 | } | |
| 1189 | onceHandler.dom7proxy = listener; | |
| 1190 | return dom.on(eventName, targetSelector, onceHandler, capture); | |
| 1191 | } | |
| 1192 | function trigger() { | |
| 1193 | var args = [], len = arguments.length; | |
| 1194 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 1195 | ||
| 1196 | var events = args[0].split(' '); | |
| 1197 | var eventData = args[1]; | |
| 1198 | for (var i = 0; i < events.length; i += 1) { | |
| 1199 | var event = events[i]; | |
| 1200 | for (var j = 0; j < this.length; j += 1) { | |
| 1201 | var el = this[j]; | |
| 1202 | var evt = (void 0); | |
| 1203 | try { | |
| 1204 | evt = new win.CustomEvent(event, { | |
| 1205 | detail: eventData, | |
| 1206 | bubbles: true, | |
| 1207 | cancelable: true, | |
| 1208 | }); | |
| 1209 | } catch (e) { | |
| 1210 | evt = doc.createEvent('Event'); | |
| 1211 | evt.initEvent(event, true, true); | |
| 1212 | evt.detail = eventData; | |
| 1213 | } | |
| 1214 | // eslint-disable-next-line | |
| 1215 | el.dom7EventData = args.filter(function (data, dataIndex) { return dataIndex > 0; }); | |
| 1216 | el.dispatchEvent(evt); | |
| 1217 | el.dom7EventData = []; | |
| 1218 | delete el.dom7EventData; | |
| 1219 | } | |
| 1220 | } | |
| 1221 | return this; | |
| 1222 | } | |
| 1223 | function transitionEnd(callback) { | |
| 1224 | var events = ['webkitTransitionEnd', 'transitionend']; | |
| 1225 | var dom = this; | |
| 1226 | var i; | |
| 1227 | function fireCallBack(e) { | |
| 1228 | /* jshint validthis:true */ | |
| 1229 | if (e.target !== this) { return; } | |
| 1230 | callback.call(this, e); | |
| 1231 | for (i = 0; i < events.length; i += 1) { | |
| 1232 | dom.off(events[i], fireCallBack); | |
| 1233 | } | |
| 1234 | } | |
| 1235 | if (callback) { | |
| 1236 | for (i = 0; i < events.length; i += 1) { | |
| 1237 | dom.on(events[i], fireCallBack); | |
| 1238 | } | |
| 1239 | } | |
| 1240 | return this; | |
| 1241 | } | |
| 1242 | function animationEnd(callback) { | |
| 1243 | var events = ['webkitAnimationEnd', 'animationend']; | |
| 1244 | var dom = this; | |
| 1245 | var i; | |
| 1246 | function fireCallBack(e) { | |
| 1247 | if (e.target !== this) { return; } | |
| 1248 | callback.call(this, e); | |
| 1249 | for (i = 0; i < events.length; i += 1) { | |
| 1250 | dom.off(events[i], fireCallBack); | |
| 1251 | } | |
| 1252 | } | |
| 1253 | if (callback) { | |
| 1254 | for (i = 0; i < events.length; i += 1) { | |
| 1255 | dom.on(events[i], fireCallBack); | |
| 1256 | } | |
| 1257 | } | |
| 1258 | return this; | |
| 1259 | } | |
| 1260 | // Sizing/Styles | |
| 1261 | function width() { | |
| 1262 | if (this[0] === win) { | |
| 1263 | return win.innerWidth; | |
| 1264 | } | |
| 1265 | ||
| 1266 | if (this.length > 0) { | |
| 1267 | return parseFloat(this.css('width')); | |
| 1268 | } | |
| 1269 | ||
| 1270 | return null; | |
| 1271 | } | |
| 1272 | function outerWidth(includeMargins) { | |
| 1273 | if (this.length > 0) { | |
| 1274 | if (includeMargins) { | |
| 1275 | // eslint-disable-next-line | |
| 1276 | var styles = this.styles(); | |
| 1277 | return this[0].offsetWidth + parseFloat(styles.getPropertyValue('margin-right')) + parseFloat(styles.getPropertyValue('margin-left')); | |
| 1278 | } | |
| 1279 | return this[0].offsetWidth; | |
| 1280 | } | |
| 1281 | return null; | |
| 1282 | } | |
| 1283 | function height() { | |
| 1284 | if (this[0] === win) { | |
| 1285 | return win.innerHeight; | |
| 1286 | } | |
| 1287 | ||
| 1288 | if (this.length > 0) { | |
| 1289 | return parseFloat(this.css('height')); | |
| 1290 | } | |
| 1291 | ||
| 1292 | return null; | |
| 1293 | } | |
| 1294 | function outerHeight(includeMargins) { | |
| 1295 | if (this.length > 0) { | |
| 1296 | if (includeMargins) { | |
| 1297 | // eslint-disable-next-line | |
| 1298 | var styles = this.styles(); | |
| 1299 | return this[0].offsetHeight + parseFloat(styles.getPropertyValue('margin-top')) + parseFloat(styles.getPropertyValue('margin-bottom')); | |
| 1300 | } | |
| 1301 | return this[0].offsetHeight; | |
| 1302 | } | |
| 1303 | return null; | |
| 1304 | } | |
| 1305 | function offset() { | |
| 1306 | if (this.length > 0) { | |
| 1307 | var el = this[0]; | |
| 1308 | var box = el.getBoundingClientRect(); | |
| 1309 | var body = doc.body; | |
| 1310 | var clientTop = el.clientTop || body.clientTop || 0; | |
| 1311 | var clientLeft = el.clientLeft || body.clientLeft || 0; | |
| 1312 | var scrollTop = el === win ? win.scrollY : el.scrollTop; | |
| 1313 | var scrollLeft = el === win ? win.scrollX : el.scrollLeft; | |
| 1314 | return { | |
| 1315 | top: (box.top + scrollTop) - clientTop, | |
| 1316 | left: (box.left + scrollLeft) - clientLeft, | |
| 1317 | }; | |
| 1318 | } | |
| 1319 | ||
| 1320 | return null; | |
| 1321 | } | |
| 1322 | function hide() { | |
| 1323 | for (var i = 0; i < this.length; i += 1) { | |
| 1324 | this[i].style.display = 'none'; | |
| 1325 | } | |
| 1326 | return this; | |
| 1327 | } | |
| 1328 | function show() { | |
| 1329 | for (var i = 0; i < this.length; i += 1) { | |
| 1330 | var el = this[i]; | |
| 1331 | if (el.style.display === 'none') { | |
| 1332 | el.style.display = ''; | |
| 1333 | } | |
| 1334 | if (win.getComputedStyle(el, null).getPropertyValue('display') === 'none') { | |
| 1335 | // Still not visible | |
| 1336 | el.style.display = 'block'; | |
| 1337 | } | |
| 1338 | } | |
| 1339 | return this; | |
| 1340 | } | |
| 1341 | function styles() { | |
| 1342 | if (this[0]) { return win.getComputedStyle(this[0], null); } | |
| 1343 | return {}; | |
| 1344 | } | |
| 1345 | function css(props, value) { | |
| 1346 | var i; | |
| 1347 | if (arguments.length === 1) { | |
| 1348 | if (typeof props === 'string') { | |
| 1349 | if (this[0]) { return win.getComputedStyle(this[0], null).getPropertyValue(props); } | |
| 1350 | } else { | |
| 1351 | for (i = 0; i < this.length; i += 1) { | |
| 1352 | // eslint-disable-next-line | |
| 1353 | for (var prop in props) { | |
| 1354 | this[i].style[prop] = props[prop]; | |
| 1355 | } | |
| 1356 | } | |
| 1357 | return this; | |
| 1358 | } | |
| 1359 | } | |
| 1360 | if (arguments.length === 2 && typeof props === 'string') { | |
| 1361 | for (i = 0; i < this.length; i += 1) { | |
| 1362 | this[i].style[props] = value; | |
| 1363 | } | |
| 1364 | return this; | |
| 1365 | } | |
| 1366 | return this; | |
| 1367 | } | |
| 1368 | ||
| 1369 | // Dom manipulation | |
| 1370 | function toArray() { | |
| 1371 | var arr = []; | |
| 1372 | for (var i = 0; i < this.length; i += 1) { | |
| 1373 | arr.push(this[i]); | |
| 1374 | } | |
| 1375 | return arr; | |
| 1376 | } | |
| 1377 | // Iterate over the collection passing elements to `callback` | |
| 1378 | function each(callback) { | |
| 1379 | // Don't bother continuing without a callback | |
| 1380 | if (!callback) { return this; } | |
| 1381 | // Iterate over the current collection | |
| 1382 | for (var i = 0; i < this.length; i += 1) { | |
| 1383 | // If the callback returns false | |
| 1384 | if (callback.call(this[i], i, this[i]) === false) { | |
| 1385 | // End the loop early | |
| 1386 | return this; | |
| 1387 | } | |
| 1388 | } | |
| 1389 | // Return `this` to allow chained DOM operations | |
| 1390 | return this; | |
| 1391 | } | |
| 1392 | function forEach(callback) { | |
| 1393 | // Don't bother continuing without a callback | |
| 1394 | if (!callback) { return this; } | |
| 1395 | // Iterate over the current collection | |
| 1396 | for (var i = 0; i < this.length; i += 1) { | |
| 1397 | // If the callback returns false | |
| 1398 | if (callback.call(this[i], this[i], i) === false) { | |
| 1399 | // End the loop early | |
| 1400 | return this; | |
| 1401 | } | |
| 1402 | } | |
| 1403 | // Return `this` to allow chained DOM operations | |
| 1404 | return this; | |
| 1405 | } | |
| 1406 | function filter(callback) { | |
| 1407 | var matchedItems = []; | |
| 1408 | var dom = this; | |
| 1409 | for (var i = 0; i < dom.length; i += 1) { | |
| 1410 | if (callback.call(dom[i], i, dom[i])) { matchedItems.push(dom[i]); } | |
| 1411 | } | |
| 1412 | return new Dom7(matchedItems); | |
| 1413 | } | |
| 1414 | function map(callback) { | |
| 1415 | var modifiedItems = []; | |
| 1416 | var dom = this; | |
| 1417 | for (var i = 0; i < dom.length; i += 1) { | |
| 1418 | modifiedItems.push(callback.call(dom[i], i, dom[i])); | |
| 1419 | } | |
| 1420 | return new Dom7(modifiedItems); | |
| 1421 | } | |
| 1422 | // eslint-disable-next-line | |
| 1423 | function html(html) { | |
| 1424 | if (typeof html === 'undefined') { | |
| 1425 | return this[0] ? this[0].innerHTML : undefined; | |
| 1426 | } | |
| 1427 | ||
| 1428 | for (var i = 0; i < this.length; i += 1) { | |
| 1429 | this[i].innerHTML = html; | |
| 1430 | } | |
| 1431 | return this; | |
| 1432 | } | |
| 1433 | // eslint-disable-next-line | |
| 1434 | function text(text) { | |
| 1435 | if (typeof text === 'undefined') { | |
| 1436 | if (this[0]) { | |
| 1437 | return this[0].textContent.trim(); | |
| 1438 | } | |
| 1439 | return null; | |
| 1440 | } | |
| 1441 | ||
| 1442 | for (var i = 0; i < this.length; i += 1) { | |
| 1443 | this[i].textContent = text; | |
| 1444 | } | |
| 1445 | return this; | |
| 1446 | } | |
| 1447 | function is(selector) { | |
| 1448 | var el = this[0]; | |
| 1449 | var compareWith; | |
| 1450 | var i; | |
| 1451 | if (!el || typeof selector === 'undefined') { return false; } | |
| 1452 | if (typeof selector === 'string') { | |
| 1453 | if (el.matches) { return el.matches(selector); } | |
| 1454 | else if (el.webkitMatchesSelector) { return el.webkitMatchesSelector(selector); } | |
| 1455 | else if (el.msMatchesSelector) { return el.msMatchesSelector(selector); } | |
| 1456 | ||
| 1457 | compareWith = $(selector); | |
| 1458 | for (i = 0; i < compareWith.length; i += 1) { | |
| 1459 | if (compareWith[i] === el) { return true; } | |
| 1460 | } | |
| 1461 | return false; | |
| 1462 | } else if (selector === doc) { return el === doc; } | |
| 1463 | else if (selector === win) { return el === win; } | |
| 1464 | ||
| 1465 | if (selector.nodeType || selector instanceof Dom7) { | |
| 1466 | compareWith = selector.nodeType ? [selector] : selector; | |
| 1467 | for (i = 0; i < compareWith.length; i += 1) { | |
| 1468 | if (compareWith[i] === el) { return true; } | |
| 1469 | } | |
| 1470 | return false; | |
| 1471 | } | |
| 1472 | return false; | |
| 1473 | } | |
| 1474 | function indexOf(el) { | |
| 1475 | for (var i = 0; i < this.length; i += 1) { | |
| 1476 | if (this[i] === el) { return i; } | |
| 1477 | } | |
| 1478 | return -1; | |
| 1479 | } | |
| 1480 | function index() { | |
| 1481 | var child = this[0]; | |
| 1482 | var i; | |
| 1483 | if (child) { | |
| 1484 | i = 0; | |
| 1485 | // eslint-disable-next-line | |
| 1486 | while ((child = child.previousSibling) !== null) { | |
| 1487 | if (child.nodeType === 1) { i += 1; } | |
| 1488 | } | |
| 1489 | return i; | |
| 1490 | } | |
| 1491 | return undefined; | |
| 1492 | } | |
| 1493 | // eslint-disable-next-line | |
| 1494 | function eq(index) { | |
| 1495 | if (typeof index === 'undefined') { return this; } | |
| 1496 | var length = this.length; | |
| 1497 | var returnIndex; | |
| 1498 | if (index > length - 1) { | |
| 1499 | return new Dom7([]); | |
| 1500 | } | |
| 1501 | if (index < 0) { | |
| 1502 | returnIndex = length + index; | |
| 1503 | if (returnIndex < 0) { return new Dom7([]); } | |
| 1504 | return new Dom7([this[returnIndex]]); | |
| 1505 | } | |
| 1506 | return new Dom7([this[index]]); | |
| 1507 | } | |
| 1508 | function append() { | |
| 1509 | var args = [], len = arguments.length; | |
| 1510 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 1511 | ||
| 1512 | var newChild; | |
| 1513 | ||
| 1514 | for (var k = 0; k < args.length; k += 1) { | |
| 1515 | newChild = args[k]; | |
| 1516 | for (var i = 0; i < this.length; i += 1) { | |
| 1517 | if (typeof newChild === 'string') { | |
| 1518 | var tempDiv = doc.createElement('div'); | |
| 1519 | tempDiv.innerHTML = newChild; | |
| 1520 | while (tempDiv.firstChild) { | |
| 1521 | this[i].appendChild(tempDiv.firstChild); | |
| 1522 | } | |
| 1523 | } else if (newChild instanceof Dom7) { | |
| 1524 | for (var j = 0; j < newChild.length; j += 1) { | |
| 1525 | this[i].appendChild(newChild[j]); | |
| 1526 | } | |
| 1527 | } else { | |
| 1528 | this[i].appendChild(newChild); | |
| 1529 | } | |
| 1530 | } | |
| 1531 | } | |
| 1532 | ||
| 1533 | return this; | |
| 1534 | } | |
| 1535 | // eslint-disable-next-line | |
| 1536 | function appendTo(parent) { | |
| 1537 | $(parent).append(this); | |
| 1538 | return this; | |
| 1539 | } | |
| 1540 | function prepend(newChild) { | |
| 1541 | var i; | |
| 1542 | var j; | |
| 1543 | for (i = 0; i < this.length; i += 1) { | |
| 1544 | if (typeof newChild === 'string') { | |
| 1545 | var tempDiv = doc.createElement('div'); | |
| 1546 | tempDiv.innerHTML = newChild; | |
| 1547 | for (j = tempDiv.childNodes.length - 1; j >= 0; j -= 1) { | |
| 1548 | this[i].insertBefore(tempDiv.childNodes[j], this[i].childNodes[0]); | |
| 1549 | } | |
| 1550 | } else if (newChild instanceof Dom7) { | |
| 1551 | for (j = 0; j < newChild.length; j += 1) { | |
| 1552 | this[i].insertBefore(newChild[j], this[i].childNodes[0]); | |
| 1553 | } | |
| 1554 | } else { | |
| 1555 | this[i].insertBefore(newChild, this[i].childNodes[0]); | |
| 1556 | } | |
| 1557 | } | |
| 1558 | return this; | |
| 1559 | } | |
| 1560 | // eslint-disable-next-line | |
| 1561 | function prependTo(parent) { | |
| 1562 | $(parent).prepend(this); | |
| 1563 | return this; | |
| 1564 | } | |
| 1565 | function insertBefore(selector) { | |
| 1566 | var before = $(selector); | |
| 1567 | for (var i = 0; i < this.length; i += 1) { | |
| 1568 | if (before.length === 1) { | |
| 1569 | before[0].parentNode.insertBefore(this[i], before[0]); | |
| 1570 | } else if (before.length > 1) { | |
| 1571 | for (var j = 0; j < before.length; j += 1) { | |
| 1572 | before[j].parentNode.insertBefore(this[i].cloneNode(true), before[j]); | |
| 1573 | } | |
| 1574 | } | |
| 1575 | } | |
| 1576 | } | |
| 1577 | function insertAfter(selector) { | |
| 1578 | var after = $(selector); | |
| 1579 | for (var i = 0; i < this.length; i += 1) { | |
| 1580 | if (after.length === 1) { | |
| 1581 | after[0].parentNode.insertBefore(this[i], after[0].nextSibling); | |
| 1582 | } else if (after.length > 1) { | |
| 1583 | for (var j = 0; j < after.length; j += 1) { | |
| 1584 | after[j].parentNode.insertBefore(this[i].cloneNode(true), after[j].nextSibling); | |
| 1585 | } | |
| 1586 | } | |
| 1587 | } | |
| 1588 | } | |
| 1589 | function next(selector) { | |
| 1590 | if (this.length > 0) { | |
| 1591 | if (selector) { | |
| 1592 | if (this[0].nextElementSibling && $(this[0].nextElementSibling).is(selector)) { | |
| 1593 | return new Dom7([this[0].nextElementSibling]); | |
| 1594 | } | |
| 1595 | return new Dom7([]); | |
| 1596 | } | |
| 1597 | ||
| 1598 | if (this[0].nextElementSibling) { return new Dom7([this[0].nextElementSibling]); } | |
| 1599 | return new Dom7([]); | |
| 1600 | } | |
| 1601 | return new Dom7([]); | |
| 1602 | } | |
| 1603 | function nextAll(selector) { | |
| 1604 | var nextEls = []; | |
| 1605 | var el = this[0]; | |
| 1606 | if (!el) { return new Dom7([]); } | |
| 1607 | while (el.nextElementSibling) { | |
| 1608 | var next = el.nextElementSibling; // eslint-disable-line | |
| 1609 | if (selector) { | |
| 1610 | if ($(next).is(selector)) { nextEls.push(next); } | |
| 1611 | } else { nextEls.push(next); } | |
| 1612 | el = next; | |
| 1613 | } | |
| 1614 | return new Dom7(nextEls); | |
| 1615 | } | |
| 1616 | function prev(selector) { | |
| 1617 | if (this.length > 0) { | |
| 1618 | var el = this[0]; | |
| 1619 | if (selector) { | |
| 1620 | if (el.previousElementSibling && $(el.previousElementSibling).is(selector)) { | |
| 1621 | return new Dom7([el.previousElementSibling]); | |
| 1622 | } | |
| 1623 | return new Dom7([]); | |
| 1624 | } | |
| 1625 | ||
| 1626 | if (el.previousElementSibling) { return new Dom7([el.previousElementSibling]); } | |
| 1627 | return new Dom7([]); | |
| 1628 | } | |
| 1629 | return new Dom7([]); | |
| 1630 | } | |
| 1631 | function prevAll(selector) { | |
| 1632 | var prevEls = []; | |
| 1633 | var el = this[0]; | |
| 1634 | if (!el) { return new Dom7([]); } | |
| 1635 | while (el.previousElementSibling) { | |
| 1636 | var prev = el.previousElementSibling; // eslint-disable-line | |
| 1637 | if (selector) { | |
| 1638 | if ($(prev).is(selector)) { prevEls.push(prev); } | |
| 1639 | } else { prevEls.push(prev); } | |
| 1640 | el = prev; | |
| 1641 | } | |
| 1642 | return new Dom7(prevEls); | |
| 1643 | } | |
| 1644 | function siblings(selector) { | |
| 1645 | return this.nextAll(selector).add(this.prevAll(selector)); | |
| 1646 | } | |
| 1647 | function parent(selector) { | |
| 1648 | var parents = []; // eslint-disable-line | |
| 1649 | for (var i = 0; i < this.length; i += 1) { | |
| 1650 | if (this[i].parentNode !== null) { | |
| 1651 | if (selector) { | |
| 1652 | if ($(this[i].parentNode).is(selector)) { parents.push(this[i].parentNode); } | |
| 1653 | } else { | |
| 1654 | parents.push(this[i].parentNode); | |
| 1655 | } | |
| 1656 | } | |
| 1657 | } | |
| 1658 | return $(unique(parents)); | |
| 1659 | } | |
| 1660 | function parents(selector) { | |
| 1661 | var parents = []; // eslint-disable-line | |
| 1662 | for (var i = 0; i < this.length; i += 1) { | |
| 1663 | var parent = this[i].parentNode; // eslint-disable-line | |
| 1664 | while (parent) { | |
| 1665 | if (selector) { | |
| 1666 | if ($(parent).is(selector)) { parents.push(parent); } | |
| 1667 | } else { | |
| 1668 | parents.push(parent); | |
| 1669 | } | |
| 1670 | parent = parent.parentNode; | |
| 1671 | } | |
| 1672 | } | |
| 1673 | return $(unique(parents)); | |
| 1674 | } | |
| 1675 | function closest(selector) { | |
| 1676 | var closest = this; // eslint-disable-line | |
| 1677 | if (typeof selector === 'undefined') { | |
| 1678 | return new Dom7([]); | |
| 1679 | } | |
| 1680 | if (!closest.is(selector)) { | |
| 1681 | closest = closest.parents(selector).eq(0); | |
| 1682 | } | |
| 1683 | return closest; | |
| 1684 | } | |
| 1685 | function find(selector) { | |
| 1686 | var foundElements = []; | |
| 1687 | for (var i = 0; i < this.length; i += 1) { | |
| 1688 | var found = this[i].querySelectorAll(selector); | |
| 1689 | for (var j = 0; j < found.length; j += 1) { | |
| 1690 | foundElements.push(found[j]); | |
| 1691 | } | |
| 1692 | } | |
| 1693 | return new Dom7(foundElements); | |
| 1694 | } | |
| 1695 | function children(selector) { | |
| 1696 | var children = []; // eslint-disable-line | |
| 1697 | for (var i = 0; i < this.length; i += 1) { | |
| 1698 | var childNodes = this[i].childNodes; | |
| 1699 | ||
| 1700 | for (var j = 0; j < childNodes.length; j += 1) { | |
| 1701 | if (!selector) { | |
| 1702 | if (childNodes[j].nodeType === 1) { children.push(childNodes[j]); } | |
| 1703 | } else if (childNodes[j].nodeType === 1 && $(childNodes[j]).is(selector)) { | |
| 1704 | children.push(childNodes[j]); | |
| 1705 | } | |
| 1706 | } | |
| 1707 | } | |
| 1708 | return new Dom7(unique(children)); | |
| 1709 | } | |
| 1710 | function remove() { | |
| 1711 | for (var i = 0; i < this.length; i += 1) { | |
| 1712 | if (this[i].parentNode) { this[i].parentNode.removeChild(this[i]); } | |
| 1713 | } | |
| 1714 | return this; | |
| 1715 | } | |
| 1716 | function detach() { | |
| 1717 | return this.remove(); | |
| 1718 | } | |
| 1719 | function add() { | |
| 1720 | var args = [], len = arguments.length; | |
| 1721 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 1722 | ||
| 1723 | var dom = this; | |
| 1724 | var i; | |
| 1725 | var j; | |
| 1726 | for (i = 0; i < args.length; i += 1) { | |
| 1727 | var toAdd = $(args[i]); | |
| 1728 | for (j = 0; j < toAdd.length; j += 1) { | |
| 1729 | dom[dom.length] = toAdd[j]; | |
| 1730 | dom.length += 1; | |
| 1731 | } | |
| 1732 | } | |
| 1733 | return dom; | |
| 1734 | } | |
| 1735 | function empty() { | |
| 1736 | for (var i = 0; i < this.length; i += 1) { | |
| 1737 | var el = this[i]; | |
| 1738 | if (el.nodeType === 1) { | |
| 1739 | for (var j = 0; j < el.childNodes.length; j += 1) { | |
| 1740 | if (el.childNodes[j].parentNode) { | |
| 1741 | el.childNodes[j].parentNode.removeChild(el.childNodes[j]); | |
| 1742 | } | |
| 1743 | } | |
| 1744 | el.textContent = ''; | |
| 1745 | } | |
| 1746 | } | |
| 1747 | return this; | |
| 1748 | } | |
| 1749 | ||
| 1750 | var Methods = /*#__PURE__*/Object.freeze({ | |
| 1751 | addClass: addClass, | |
| 1752 | removeClass: removeClass, | |
| 1753 | hasClass: hasClass, | |
| 1754 | toggleClass: toggleClass, | |
| 1755 | attr: attr, | |
| 1756 | removeAttr: removeAttr, | |
| 1757 | prop: prop, | |
| 1758 | data: data, | |
| 1759 | removeData: removeData, | |
| 1760 | dataset: dataset, | |
| 1761 | val: val, | |
| 1762 | transform: transform, | |
| 1763 | transition: transition, | |
| 1764 | on: on, | |
| 1765 | off: off, | |
| 1766 | once: once, | |
| 1767 | trigger: trigger, | |
| 1768 | transitionEnd: transitionEnd, | |
| 1769 | animationEnd: animationEnd, | |
| 1770 | width: width, | |
| 1771 | outerWidth: outerWidth, | |
| 1772 | height: height, | |
| 1773 | outerHeight: outerHeight, | |
| 1774 | offset: offset, | |
| 1775 | hide: hide, | |
| 1776 | show: show, | |
| 1777 | styles: styles, | |
| 1778 | css: css, | |
| 1779 | toArray: toArray, | |
| 1780 | each: each, | |
| 1781 | forEach: forEach, | |
| 1782 | filter: filter, | |
| 1783 | map: map, | |
| 1784 | html: html, | |
| 1785 | text: text, | |
| 1786 | is: is, | |
| 1787 | indexOf: indexOf, | |
| 1788 | index: index, | |
| 1789 | eq: eq, | |
| 1790 | append: append, | |
| 1791 | appendTo: appendTo, | |
| 1792 | prepend: prepend, | |
| 1793 | prependTo: prependTo, | |
| 1794 | insertBefore: insertBefore, | |
| 1795 | insertAfter: insertAfter, | |
| 1796 | next: next, | |
| 1797 | nextAll: nextAll, | |
| 1798 | prev: prev, | |
| 1799 | prevAll: prevAll, | |
| 1800 | siblings: siblings, | |
| 1801 | parent: parent, | |
| 1802 | parents: parents, | |
| 1803 | closest: closest, | |
| 1804 | find: find, | |
| 1805 | children: children, | |
| 1806 | remove: remove, | |
| 1807 | detach: detach, | |
| 1808 | add: add, | |
| 1809 | empty: empty | |
| 1810 | }); | |
| 1811 | ||
| 1812 | function scrollTo() { | |
| 1813 | var assign; | |
| 1814 | ||
| 1815 | var args = [], len = arguments.length; | |
| 1816 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 1817 | var left = args[0]; | |
| 1818 | var top = args[1]; | |
| 1819 | var duration = args[2]; | |
| 1820 | var easing = args[3]; | |
| 1821 | var callback = args[4]; | |
| 1822 | if (args.length === 4 && typeof easing === 'function') { | |
| 1823 | callback = easing; | |
| 1824 | (assign = args, left = assign[0], top = assign[1], duration = assign[2], callback = assign[3], easing = assign[4]); | |
| 1825 | } | |
| 1826 | if (typeof easing === 'undefined') { easing = 'swing'; } | |
| 1827 | ||
| 1828 | return this.each(function animate() { | |
| 1829 | var el = this; | |
| 1830 | var currentTop; | |
| 1831 | var currentLeft; | |
| 1832 | var maxTop; | |
| 1833 | var maxLeft; | |
| 1834 | var newTop; | |
| 1835 | var newLeft; | |
| 1836 | var scrollTop; // eslint-disable-line | |
| 1837 | var scrollLeft; // eslint-disable-line | |
| 1838 | var animateTop = top > 0 || top === 0; | |
| 1839 | var animateLeft = left > 0 || left === 0; | |
| 1840 | if (typeof easing === 'undefined') { | |
| 1841 | easing = 'swing'; | |
| 1842 | } | |
| 1843 | if (animateTop) { | |
| 1844 | currentTop = el.scrollTop; | |
| 1845 | if (!duration) { | |
| 1846 | el.scrollTop = top; | |
| 1847 | } | |
| 1848 | } | |
| 1849 | if (animateLeft) { | |
| 1850 | currentLeft = el.scrollLeft; | |
| 1851 | if (!duration) { | |
| 1852 | el.scrollLeft = left; | |
| 1853 | } | |
| 1854 | } | |
| 1855 | if (!duration) { return; } | |
| 1856 | if (animateTop) { | |
| 1857 | maxTop = el.scrollHeight - el.offsetHeight; | |
| 1858 | newTop = Math.max(Math.min(top, maxTop), 0); | |
| 1859 | } | |
| 1860 | if (animateLeft) { | |
| 1861 | maxLeft = el.scrollWidth - el.offsetWidth; | |
| 1862 | newLeft = Math.max(Math.min(left, maxLeft), 0); | |
| 1863 | } | |
| 1864 | var startTime = null; | |
| 1865 | if (animateTop && newTop === currentTop) { animateTop = false; } | |
| 1866 | if (animateLeft && newLeft === currentLeft) { animateLeft = false; } | |
| 1867 | function render(time) { | |
| 1868 | if ( time === void 0 ) time = new Date().getTime(); | |
| 1869 | ||
| 1870 | if (startTime === null) { | |
| 1871 | startTime = time; | |
| 1872 | } | |
| 1873 | var progress = Math.max(Math.min((time - startTime) / duration, 1), 0); | |
| 1874 | var easeProgress = easing === 'linear' ? progress : (0.5 - (Math.cos(progress * Math.PI) / 2)); | |
| 1875 | var done; | |
| 1876 | if (animateTop) { scrollTop = currentTop + (easeProgress * (newTop - currentTop)); } | |
| 1877 | if (animateLeft) { scrollLeft = currentLeft + (easeProgress * (newLeft - currentLeft)); } | |
| 1878 | if (animateTop && newTop > currentTop && scrollTop >= newTop) { | |
| 1879 | el.scrollTop = newTop; | |
| 1880 | done = true; | |
| 1881 | } | |
| 1882 | if (animateTop && newTop < currentTop && scrollTop <= newTop) { | |
| 1883 | el.scrollTop = newTop; | |
| 1884 | done = true; | |
| 1885 | } | |
| 1886 | if (animateLeft && newLeft > currentLeft && scrollLeft >= newLeft) { | |
| 1887 | el.scrollLeft = newLeft; | |
| 1888 | done = true; | |
| 1889 | } | |
| 1890 | if (animateLeft && newLeft < currentLeft && scrollLeft <= newLeft) { | |
| 1891 | el.scrollLeft = newLeft; | |
| 1892 | done = true; | |
| 1893 | } | |
| 1894 | ||
| 1895 | if (done) { | |
| 1896 | if (callback) { callback(); } | |
| 1897 | return; | |
| 1898 | } | |
| 1899 | if (animateTop) { el.scrollTop = scrollTop; } | |
| 1900 | if (animateLeft) { el.scrollLeft = scrollLeft; } | |
| 1901 | requestAnimationFrame(render); | |
| 1902 | } | |
| 1903 | requestAnimationFrame(render); | |
| 1904 | }); | |
| 1905 | } | |
| 1906 | // scrollTop(top, duration, easing, callback) { | |
| 1907 | function scrollTop() { | |
| 1908 | var assign; | |
| 1909 | ||
| 1910 | var args = [], len = arguments.length; | |
| 1911 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 1912 | var top = args[0]; | |
| 1913 | var duration = args[1]; | |
| 1914 | var easing = args[2]; | |
| 1915 | var callback = args[3]; | |
| 1916 | if (args.length === 3 && typeof easing === 'function') { | |
| 1917 | (assign = args, top = assign[0], duration = assign[1], callback = assign[2], easing = assign[3]); | |
| 1918 | } | |
| 1919 | var dom = this; | |
| 1920 | if (typeof top === 'undefined') { | |
| 1921 | if (dom.length > 0) { return dom[0].scrollTop; } | |
| 1922 | return null; | |
| 1923 | } | |
| 1924 | return dom.scrollTo(undefined, top, duration, easing, callback); | |
| 1925 | } | |
| 1926 | function scrollLeft() { | |
| 1927 | var assign; | |
| 1928 | ||
| 1929 | var args = [], len = arguments.length; | |
| 1930 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 1931 | var left = args[0]; | |
| 1932 | var duration = args[1]; | |
| 1933 | var easing = args[2]; | |
| 1934 | var callback = args[3]; | |
| 1935 | if (args.length === 3 && typeof easing === 'function') { | |
| 1936 | (assign = args, left = assign[0], duration = assign[1], callback = assign[2], easing = assign[3]); | |
| 1937 | } | |
| 1938 | var dom = this; | |
| 1939 | if (typeof left === 'undefined') { | |
| 1940 | if (dom.length > 0) { return dom[0].scrollLeft; } | |
| 1941 | return null; | |
| 1942 | } | |
| 1943 | return dom.scrollTo(left, undefined, duration, easing, callback); | |
| 1944 | } | |
| 1945 | ||
| 1946 | var Scroll = /*#__PURE__*/Object.freeze({ | |
| 1947 | scrollTo: scrollTo, | |
| 1948 | scrollTop: scrollTop, | |
| 1949 | scrollLeft: scrollLeft | |
| 1950 | }); | |
| 1951 | ||
| 1952 | function animate(initialProps, initialParams) { | |
| 1953 | var els = this; | |
| 1954 | var a = { | |
| 1955 | props: Object.assign({}, initialProps), | |
| 1956 | params: Object.assign({ | |
| 1957 | duration: 300, | |
| 1958 | easing: 'swing', // or 'linear' | |
| 1959 | /* Callbacks | |
| 1960 | begin(elements) | |
| 1961 | complete(elements) | |
| 1962 | progress(elements, complete, remaining, start, tweenValue) | |
| 1963 | */ | |
| 1964 | }, initialParams), | |
| 1965 | ||
| 1966 | elements: els, | |
| 1967 | animating: false, | |
| 1968 | que: [], | |
| 1969 | ||
| 1970 | easingProgress: function easingProgress(easing, progress) { | |
| 1971 | if (easing === 'swing') { | |
| 1972 | return 0.5 - (Math.cos(progress * Math.PI) / 2); | |
| 1973 | } | |
| 1974 | if (typeof easing === 'function') { | |
| 1975 | return easing(progress); | |
| 1976 | } | |
| 1977 | return progress; | |
| 1978 | }, | |
| 1979 | stop: function stop() { | |
| 1980 | if (a.frameId) { | |
| 1981 | cancelAnimationFrame(a.frameId); | |
| 1982 | } | |
| 1983 | a.animating = false; | |
| 1984 | a.elements.each(function (index, el) { | |
| 1985 | var element = el; | |
| 1986 | delete element.dom7AnimateInstance; | |
| 1987 | }); | |
| 1988 | a.que = []; | |
| 1989 | }, | |
| 1990 | done: function done(complete) { | |
| 1991 | a.animating = false; | |
| 1992 | a.elements.each(function (index, el) { | |
| 1993 | var element = el; | |
| 1994 | delete element.dom7AnimateInstance; | |
| 1995 | }); | |
| 1996 | if (complete) { complete(els); } | |
| 1997 | if (a.que.length > 0) { | |
| 1998 | var que = a.que.shift(); | |
| 1999 | a.animate(que[0], que[1]); | |
| 2000 | } | |
| 2001 | }, | |
| 2002 | animate: function animate(props, params) { | |
| 2003 | if (a.animating) { | |
| 2004 | a.que.push([props, params]); | |
| 2005 | return a; | |
| 2006 | } | |
| 2007 | var elements = []; | |
| 2008 | ||
| 2009 | // Define & Cache Initials & Units | |
| 2010 | a.elements.each(function (index, el) { | |
| 2011 | var initialFullValue; | |
| 2012 | var initialValue; | |
| 2013 | var unit; | |
| 2014 | var finalValue; | |
| 2015 | var finalFullValue; | |
| 2016 | ||
| 2017 | if (!el.dom7AnimateInstance) { a.elements[index].dom7AnimateInstance = a; } | |
| 2018 | ||
| 2019 | elements[index] = { | |
| 2020 | container: el, | |
| 2021 | }; | |
| 2022 | Object.keys(props).forEach(function (prop) { | |
| 2023 | initialFullValue = win.getComputedStyle(el, null).getPropertyValue(prop).replace(',', '.'); | |
| 2024 | initialValue = parseFloat(initialFullValue); | |
| 2025 | unit = initialFullValue.replace(initialValue, ''); | |
| 2026 | finalValue = parseFloat(props[prop]); | |
| 2027 | finalFullValue = props[prop] + unit; | |
| 2028 | elements[index][prop] = { | |
| 2029 | initialFullValue: initialFullValue, | |
| 2030 | initialValue: initialValue, | |
| 2031 | unit: unit, | |
| 2032 | finalValue: finalValue, | |
| 2033 | finalFullValue: finalFullValue, | |
| 2034 | currentValue: initialValue, | |
| 2035 | }; | |
| 2036 | }); | |
| 2037 | }); | |
| 2038 | ||
| 2039 | var startTime = null; | |
| 2040 | var time; | |
| 2041 | var elementsDone = 0; | |
| 2042 | var propsDone = 0; | |
| 2043 | var done; | |
| 2044 | var began = false; | |
| 2045 | ||
| 2046 | a.animating = true; | |
| 2047 | ||
| 2048 | function render() { | |
| 2049 | time = new Date().getTime(); | |
| 2050 | var progress; | |
| 2051 | var easeProgress; | |
| 2052 | // let el; | |
| 2053 | if (!began) { | |
| 2054 | began = true; | |
| 2055 | if (params.begin) { params.begin(els); } | |
| 2056 | } | |
| 2057 | if (startTime === null) { | |
| 2058 | startTime = time; | |
| 2059 | } | |
| 2060 | if (params.progress) { | |
| 2061 | // eslint-disable-next-line | |
| 2062 | params.progress(els, Math.max(Math.min((time - startTime) / params.duration, 1), 0), ((startTime + params.duration) - time < 0 ? 0 : (startTime + params.duration) - time), startTime); | |
| 2063 | } | |
| 2064 | ||
| 2065 | elements.forEach(function (element) { | |
| 2066 | var el = element; | |
| 2067 | if (done || el.done) { return; } | |
| 2068 | Object.keys(props).forEach(function (prop) { | |
| 2069 | if (done || el.done) { return; } | |
| 2070 | progress = Math.max(Math.min((time - startTime) / params.duration, 1), 0); | |
| 2071 | easeProgress = a.easingProgress(params.easing, progress); | |
| 2072 | var ref = el[prop]; | |
| 2073 | var initialValue = ref.initialValue; | |
| 2074 | var finalValue = ref.finalValue; | |
| 2075 | var unit = ref.unit; | |
| 2076 | el[prop].currentValue = initialValue + (easeProgress * (finalValue - initialValue)); | |
| 2077 | var currentValue = el[prop].currentValue; | |
| 2078 | ||
| 2079 | if ( | |
| 2080 | (finalValue > initialValue && currentValue >= finalValue) || | |
| 2081 | (finalValue < initialValue && currentValue <= finalValue)) { | |
| 2082 | el.container.style[prop] = finalValue + unit; | |
| 2083 | propsDone += 1; | |
| 2084 | if (propsDone === Object.keys(props).length) { | |
| 2085 | el.done = true; | |
| 2086 | elementsDone += 1; | |
| 2087 | } | |
| 2088 | if (elementsDone === elements.length) { | |
| 2089 | done = true; | |
| 2090 | } | |
| 2091 | } | |
| 2092 | if (done) { | |
| 2093 | a.done(params.complete); | |
| 2094 | return; | |
| 2095 | } | |
| 2096 | el.container.style[prop] = currentValue + unit; | |
| 2097 | }); | |
| 2098 | }); | |
| 2099 | if (done) { return; } | |
| 2100 | // Then call | |
| 2101 | a.frameId = requestAnimationFrame(render); | |
| 2102 | } | |
| 2103 | a.frameId = requestAnimationFrame(render); | |
| 2104 | return a; | |
| 2105 | }, | |
| 2106 | }; | |
| 2107 | ||
| 2108 | if (a.elements.length === 0) { | |
| 2109 | return els; | |
| 2110 | } | |
| 2111 | ||
| 2112 | var animateInstance; | |
| 2113 | for (var i = 0; i < a.elements.length; i += 1) { | |
| 2114 | if (a.elements[i].dom7AnimateInstance) { | |
| 2115 | animateInstance = a.elements[i].dom7AnimateInstance; | |
| 2116 | } else { a.elements[i].dom7AnimateInstance = a; } | |
| 2117 | } | |
| 2118 | if (!animateInstance) { | |
| 2119 | animateInstance = a; | |
| 2120 | } | |
| 2121 | ||
| 2122 | if (initialProps === 'stop') { | |
| 2123 | animateInstance.stop(); | |
| 2124 | } else { | |
| 2125 | animateInstance.animate(a.props, a.params); | |
| 2126 | } | |
| 2127 | ||
| 2128 | return els; | |
| 2129 | } | |
| 2130 | ||
| 2131 | function stop() { | |
| 2132 | var els = this; | |
| 2133 | for (var i = 0; i < els.length; i += 1) { | |
| 2134 | if (els[i].dom7AnimateInstance) { | |
| 2135 | els[i].dom7AnimateInstance.stop(); | |
| 2136 | } | |
| 2137 | } | |
| 2138 | } | |
| 2139 | ||
| 2140 | var Animate = /*#__PURE__*/Object.freeze({ | |
| 2141 | animate: animate, | |
| 2142 | stop: stop | |
| 2143 | }); | |
| 2144 | ||
| 2145 | var noTrigger = ('resize scroll').split(' '); | |
| 2146 | function eventShortcut(name) { | |
| 2147 | var ref; | |
| 2148 | ||
| 2149 | var args = [], len = arguments.length - 1; | |
| 2150 | while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | |
| 2151 | if (typeof args[0] === 'undefined') { | |
| 2152 | for (var i = 0; i < this.length; i += 1) { | |
| 2153 | if (noTrigger.indexOf(name) < 0) { | |
| 2154 | if (name in this[i]) { this[i][name](); } | |
| 2155 | else { | |
| 2156 | $(this[i]).trigger(name); | |
| 2157 | } | |
| 2158 | } | |
| 2159 | } | |
| 2160 | return this; | |
| 2161 | } | |
| 2162 | return (ref = this).on.apply(ref, [ name ].concat( args )); | |
| 2163 | } | |
| 2164 | ||
| 2165 | function click() { | |
| 2166 | var args = [], len = arguments.length; | |
| 2167 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2168 | ||
| 2169 | return eventShortcut.bind(this).apply(void 0, [ 'click' ].concat( args )); | |
| 2170 | } | |
| 2171 | function blur() { | |
| 2172 | var args = [], len = arguments.length; | |
| 2173 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2174 | ||
| 2175 | return eventShortcut.bind(this).apply(void 0, [ 'blur' ].concat( args )); | |
| 2176 | } | |
| 2177 | function focus() { | |
| 2178 | var args = [], len = arguments.length; | |
| 2179 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2180 | ||
| 2181 | return eventShortcut.bind(this).apply(void 0, [ 'focus' ].concat( args )); | |
| 2182 | } | |
| 2183 | function focusin() { | |
| 2184 | var args = [], len = arguments.length; | |
| 2185 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2186 | ||
| 2187 | return eventShortcut.bind(this).apply(void 0, [ 'focusin' ].concat( args )); | |
| 2188 | } | |
| 2189 | function focusout() { | |
| 2190 | var args = [], len = arguments.length; | |
| 2191 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2192 | ||
| 2193 | return eventShortcut.bind(this).apply(void 0, [ 'focusout' ].concat( args )); | |
| 2194 | } | |
| 2195 | function keyup() { | |
| 2196 | var args = [], len = arguments.length; | |
| 2197 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2198 | ||
| 2199 | return eventShortcut.bind(this).apply(void 0, [ 'keyup' ].concat( args )); | |
| 2200 | } | |
| 2201 | function keydown() { | |
| 2202 | var args = [], len = arguments.length; | |
| 2203 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2204 | ||
| 2205 | return eventShortcut.bind(this).apply(void 0, [ 'keydown' ].concat( args )); | |
| 2206 | } | |
| 2207 | function keypress() { | |
| 2208 | var args = [], len = arguments.length; | |
| 2209 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2210 | ||
| 2211 | return eventShortcut.bind(this).apply(void 0, [ 'keypress' ].concat( args )); | |
| 2212 | } | |
| 2213 | function submit() { | |
| 2214 | var args = [], len = arguments.length; | |
| 2215 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2216 | ||
| 2217 | return eventShortcut.bind(this).apply(void 0, [ 'submit' ].concat( args )); | |
| 2218 | } | |
| 2219 | function change() { | |
| 2220 | var args = [], len = arguments.length; | |
| 2221 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2222 | ||
| 2223 | return eventShortcut.bind(this).apply(void 0, [ 'change' ].concat( args )); | |
| 2224 | } | |
| 2225 | function mousedown() { | |
| 2226 | var args = [], len = arguments.length; | |
| 2227 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2228 | ||
| 2229 | return eventShortcut.bind(this).apply(void 0, [ 'mousedown' ].concat( args )); | |
| 2230 | } | |
| 2231 | function mousemove() { | |
| 2232 | var args = [], len = arguments.length; | |
| 2233 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2234 | ||
| 2235 | return eventShortcut.bind(this).apply(void 0, [ 'mousemove' ].concat( args )); | |
| 2236 | } | |
| 2237 | function mouseup() { | |
| 2238 | var args = [], len = arguments.length; | |
| 2239 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2240 | ||
| 2241 | return eventShortcut.bind(this).apply(void 0, [ 'mouseup' ].concat( args )); | |
| 2242 | } | |
| 2243 | function mouseenter() { | |
| 2244 | var args = [], len = arguments.length; | |
| 2245 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2246 | ||
| 2247 | return eventShortcut.bind(this).apply(void 0, [ 'mouseenter' ].concat( args )); | |
| 2248 | } | |
| 2249 | function mouseleave() { | |
| 2250 | var args = [], len = arguments.length; | |
| 2251 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2252 | ||
| 2253 | return eventShortcut.bind(this).apply(void 0, [ 'mouseleave' ].concat( args )); | |
| 2254 | } | |
| 2255 | function mouseout() { | |
| 2256 | var args = [], len = arguments.length; | |
| 2257 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2258 | ||
| 2259 | return eventShortcut.bind(this).apply(void 0, [ 'mouseout' ].concat( args )); | |
| 2260 | } | |
| 2261 | function mouseover() { | |
| 2262 | var args = [], len = arguments.length; | |
| 2263 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2264 | ||
| 2265 | return eventShortcut.bind(this).apply(void 0, [ 'mouseover' ].concat( args )); | |
| 2266 | } | |
| 2267 | function touchstart() { | |
| 2268 | var args = [], len = arguments.length; | |
| 2269 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2270 | ||
| 2271 | return eventShortcut.bind(this).apply(void 0, [ 'touchstart' ].concat( args )); | |
| 2272 | } | |
| 2273 | function touchend() { | |
| 2274 | var args = [], len = arguments.length; | |
| 2275 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2276 | ||
| 2277 | return eventShortcut.bind(this).apply(void 0, [ 'touchend' ].concat( args )); | |
| 2278 | } | |
| 2279 | function touchmove() { | |
| 2280 | var args = [], len = arguments.length; | |
| 2281 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2282 | ||
| 2283 | return eventShortcut.bind(this).apply(void 0, [ 'touchmove' ].concat( args )); | |
| 2284 | } | |
| 2285 | function resize() { | |
| 2286 | var args = [], len = arguments.length; | |
| 2287 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2288 | ||
| 2289 | return eventShortcut.bind(this).apply(void 0, [ 'resize' ].concat( args )); | |
| 2290 | } | |
| 2291 | function scroll() { | |
| 2292 | var args = [], len = arguments.length; | |
| 2293 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2294 | ||
| 2295 | return eventShortcut.bind(this).apply(void 0, [ 'scroll' ].concat( args )); | |
| 2296 | } | |
| 2297 | ||
| 2298 | var eventShortcuts = /*#__PURE__*/Object.freeze({ | |
| 2299 | click: click, | |
| 2300 | blur: blur, | |
| 2301 | focus: focus, | |
| 2302 | focusin: focusin, | |
| 2303 | focusout: focusout, | |
| 2304 | keyup: keyup, | |
| 2305 | keydown: keydown, | |
| 2306 | keypress: keypress, | |
| 2307 | submit: submit, | |
| 2308 | change: change, | |
| 2309 | mousedown: mousedown, | |
| 2310 | mousemove: mousemove, | |
| 2311 | mouseup: mouseup, | |
| 2312 | mouseenter: mouseenter, | |
| 2313 | mouseleave: mouseleave, | |
| 2314 | mouseout: mouseout, | |
| 2315 | mouseover: mouseover, | |
| 2316 | touchstart: touchstart, | |
| 2317 | touchend: touchend, | |
| 2318 | touchmove: touchmove, | |
| 2319 | resize: resize, | |
| 2320 | scroll: scroll | |
| 2321 | }); | |
| 2322 | ||
| 2323 | [Methods, Scroll, Animate, eventShortcuts].forEach(function (group) { | |
| 2324 | Object.keys(group).forEach(function (methodName) { | |
| 2325 | $.fn[methodName] = group[methodName]; | |
| 2326 | }); | |
| 2327 | }); | |
| 2328 | ||
| 2329 | /** | |
| 2330 | * https://github.com/gre/bezier-easing | |
| 2331 | * BezierEasing - use bezier curve for transition easing function | |
| 2332 | * by Gaëtan Renaudeau 2014 - 2015 – MIT License | |
| 2333 | */ | |
| 2334 | ||
| 2335 | /* eslint-disable */ | |
| 2336 | ||
| 2337 | // These values are established by empiricism with tests (tradeoff: performance VS precision) | |
| 2338 | var NEWTON_ITERATIONS = 4; | |
| 2339 | var NEWTON_MIN_SLOPE = 0.001; | |
| 2340 | var SUBDIVISION_PRECISION = 0.0000001; | |
| 2341 | var SUBDIVISION_MAX_ITERATIONS = 10; | |
| 2342 | ||
| 2343 | var kSplineTableSize = 11; | |
| 2344 | var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); | |
| 2345 | ||
| 2346 | var float32ArraySupported = typeof Float32Array === 'function'; | |
| 2347 | ||
| 2348 | function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; } | |
| 2349 | function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; } | |
| 2350 | function C (aA1) { return 3.0 * aA1; } | |
| 2351 | ||
| 2352 | // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. | |
| 2353 | function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; } | |
| 2354 | ||
| 2355 | // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. | |
| 2356 | function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); } | |
| 2357 | ||
| 2358 | function binarySubdivide (aX, aA, aB, mX1, mX2) { | |
| 2359 | var currentX, currentT, i = 0; | |
| 2360 | do { | |
| 2361 | currentT = aA + (aB - aA) / 2.0; | |
| 2362 | currentX = calcBezier(currentT, mX1, mX2) - aX; | |
| 2363 | if (currentX > 0.0) { | |
| 2364 | aB = currentT; | |
| 2365 | } else { | |
| 2366 | aA = currentT; | |
| 2367 | } | |
| 2368 | } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS); | |
| 2369 | return currentT; | |
| 2370 | } | |
| 2371 | ||
| 2372 | function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { | |
| 2373 | for (var i = 0; i < NEWTON_ITERATIONS; ++i) { | |
| 2374 | var currentSlope = getSlope(aGuessT, mX1, mX2); | |
| 2375 | if (currentSlope === 0.0) { | |
| 2376 | return aGuessT; | |
| 2377 | } | |
| 2378 | var currentX = calcBezier(aGuessT, mX1, mX2) - aX; | |
| 2379 | aGuessT -= currentX / currentSlope; | |
| 2380 | } | |
| 2381 | return aGuessT; | |
| 2382 | } | |
| 2383 | ||
| 2384 | function bezier (mX1, mY1, mX2, mY2) { | |
| 2385 | if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { | |
| 2386 | throw new Error('bezier x values must be in [0, 1] range'); | |
| 2387 | } | |
| 2388 | ||
| 2389 | // Precompute samples table | |
| 2390 | var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize); | |
| 2391 | if (mX1 !== mY1 || mX2 !== mY2) { | |
| 2392 | for (var i = 0; i < kSplineTableSize; ++i) { | |
| 2393 | sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); | |
| 2394 | } | |
| 2395 | } | |
| 2396 | ||
| 2397 | function getTForX (aX) { | |
| 2398 | var intervalStart = 0.0; | |
| 2399 | var currentSample = 1; | |
| 2400 | var lastSample = kSplineTableSize - 1; | |
| 2401 | ||
| 2402 | for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { | |
| 2403 | intervalStart += kSampleStepSize; | |
| 2404 | } | |
| 2405 | --currentSample; | |
| 2406 | ||
| 2407 | // Interpolate to provide an initial guess for t | |
| 2408 | var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); | |
| 2409 | var guessForT = intervalStart + dist * kSampleStepSize; | |
| 2410 | ||
| 2411 | var initialSlope = getSlope(guessForT, mX1, mX2); | |
| 2412 | if (initialSlope >= NEWTON_MIN_SLOPE) { | |
| 2413 | return newtonRaphsonIterate(aX, guessForT, mX1, mX2); | |
| 2414 | } else if (initialSlope === 0.0) { | |
| 2415 | return guessForT; | |
| 2416 | } else { | |
| 2417 | return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); | |
| 2418 | } | |
| 2419 | } | |
| 2420 | ||
| 2421 | return function BezierEasing (x) { | |
| 2422 | if (mX1 === mY1 && mX2 === mY2) { | |
| 2423 | return x; // linear | |
| 2424 | } | |
| 2425 | // Because JavaScript number are imprecise, we should guarantee the extremes are right. | |
| 2426 | if (x === 0) { | |
| 2427 | return 0; | |
| 2428 | } | |
| 2429 | if (x === 1) { | |
| 2430 | return 1; | |
| 2431 | } | |
| 2432 | return calcBezier(getTForX(x), mY1, mY2); | |
| 2433 | }; | |
| 2434 | } | |
| 2435 | ||
| 2436 | /* eslint no-control-regex: "off" */ | |
| 2437 | ||
| 2438 | // Remove Diacritics | |
| 2439 | var defaultDiacriticsRemovalap = [ | |
| 2440 | { base: 'A', letters: '\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F' }, | |
| 2441 | { base: 'AA', letters: '\uA732' }, | |
| 2442 | { base: 'AE', letters: '\u00C6\u01FC\u01E2' }, | |
| 2443 | { base: 'AO', letters: '\uA734' }, | |
| 2444 | { base: 'AU', letters: '\uA736' }, | |
| 2445 | { base: 'AV', letters: '\uA738\uA73A' }, | |
| 2446 | { base: 'AY', letters: '\uA73C' }, | |
| 2447 | { base: 'B', letters: '\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181' }, | |
| 2448 | { base: 'C', letters: '\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E' }, | |
| 2449 | { base: 'D', letters: '\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779' }, | |
| 2450 | { base: 'DZ', letters: '\u01F1\u01C4' }, | |
| 2451 | { base: 'Dz', letters: '\u01F2\u01C5' }, | |
| 2452 | { base: 'E', letters: '\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E' }, | |
| 2453 | { base: 'F', letters: '\u0046\u24BB\uFF26\u1E1E\u0191\uA77B' }, | |
| 2454 | { base: 'G', letters: '\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E' }, | |
| 2455 | { base: 'H', letters: '\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D' }, | |
| 2456 | { base: 'I', letters: '\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197' }, | |
| 2457 | { base: 'J', letters: '\u004A\u24BF\uFF2A\u0134\u0248' }, | |
| 2458 | { base: 'K', letters: '\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2' }, | |
| 2459 | { base: 'L', letters: '\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780' }, | |
| 2460 | { base: 'LJ', letters: '\u01C7' }, | |
| 2461 | { base: 'Lj', letters: '\u01C8' }, | |
| 2462 | { base: 'M', letters: '\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C' }, | |
| 2463 | { base: 'N', letters: '\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4' }, | |
| 2464 | { base: 'NJ', letters: '\u01CA' }, | |
| 2465 | { base: 'Nj', letters: '\u01CB' }, | |
| 2466 | { base: 'O', letters: '\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C' }, | |
| 2467 | { base: 'OI', letters: '\u01A2' }, | |
| 2468 | { base: 'OO', letters: '\uA74E' }, | |
| 2469 | { base: 'OU', letters: '\u0222' }, | |
| 2470 | { base: 'OE', letters: '\u008C\u0152' }, | |
| 2471 | { base: 'oe', letters: '\u009C\u0153' }, | |
| 2472 | { base: 'P', letters: '\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754' }, | |
| 2473 | { base: 'Q', letters: '\u0051\u24C6\uFF31\uA756\uA758\u024A' }, | |
| 2474 | { base: 'R', letters: '\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782' }, | |
| 2475 | { base: 'S', letters: '\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784' }, | |
| 2476 | { base: 'T', letters: '\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786' }, | |
| 2477 | { base: 'TZ', letters: '\uA728' }, | |
| 2478 | { base: 'U', letters: '\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244' }, | |
| 2479 | { base: 'V', letters: '\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245' }, | |
| 2480 | { base: 'VY', letters: '\uA760' }, | |
| 2481 | { base: 'W', letters: '\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72' }, | |
| 2482 | { base: 'X', letters: '\u0058\u24CD\uFF38\u1E8A\u1E8C' }, | |
| 2483 | { base: 'Y', letters: '\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE' }, | |
| 2484 | { base: 'Z', letters: '\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762' }, | |
| 2485 | { base: 'a', letters: '\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250' }, | |
| 2486 | { base: 'aa', letters: '\uA733' }, | |
| 2487 | { base: 'ae', letters: '\u00E6\u01FD\u01E3' }, | |
| 2488 | { base: 'ao', letters: '\uA735' }, | |
| 2489 | { base: 'au', letters: '\uA737' }, | |
| 2490 | { base: 'av', letters: '\uA739\uA73B' }, | |
| 2491 | { base: 'ay', letters: '\uA73D' }, | |
| 2492 | { base: 'b', letters: '\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253' }, | |
| 2493 | { base: 'c', letters: '\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184' }, | |
| 2494 | { base: 'd', letters: '\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A' }, | |
| 2495 | { base: 'dz', letters: '\u01F3\u01C6' }, | |
| 2496 | { base: 'e', letters: '\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD' }, | |
| 2497 | { base: 'f', letters: '\u0066\u24D5\uFF46\u1E1F\u0192\uA77C' }, | |
| 2498 | { base: 'g', letters: '\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F' }, | |
| 2499 | { base: 'h', letters: '\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265' }, | |
| 2500 | { base: 'hv', letters: '\u0195' }, | |
| 2501 | { base: 'i', letters: '\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131' }, | |
| 2502 | { base: 'j', letters: '\u006A\u24D9\uFF4A\u0135\u01F0\u0249' }, | |
| 2503 | { base: 'k', letters: '\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3' }, | |
| 2504 | { base: 'l', letters: '\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747' }, | |
| 2505 | { base: 'lj', letters: '\u01C9' }, | |
| 2506 | { base: 'm', letters: '\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F' }, | |
| 2507 | { base: 'n', letters: '\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5' }, | |
| 2508 | { base: 'nj', letters: '\u01CC' }, | |
| 2509 | { base: 'o', letters: '\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275' }, | |
| 2510 | { base: 'oi', letters: '\u01A3' }, | |
| 2511 | { base: 'ou', letters: '\u0223' }, | |
| 2512 | { base: 'oo', letters: '\uA74F' }, | |
| 2513 | { base: 'p', letters: '\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755' }, | |
| 2514 | { base: 'q', letters: '\u0071\u24E0\uFF51\u024B\uA757\uA759' }, | |
| 2515 | { base: 'r', letters: '\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783' }, | |
| 2516 | { base: 's', letters: '\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B' }, | |
| 2517 | { base: 't', letters: '\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787' }, | |
| 2518 | { base: 'tz', letters: '\uA729' }, | |
| 2519 | { base: 'u', letters: '\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289' }, | |
| 2520 | { base: 'v', letters: '\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C' }, | |
| 2521 | { base: 'vy', letters: '\uA761' }, | |
| 2522 | { base: 'w', letters: '\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73' }, | |
| 2523 | { base: 'x', letters: '\u0078\u24E7\uFF58\u1E8B\u1E8D' }, | |
| 2524 | { base: 'y', letters: '\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF' }, | |
| 2525 | { base: 'z', letters: '\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763' } ]; | |
| 2526 | ||
| 2527 | var diacriticsMap = {}; | |
| 2528 | for (var i = 0; i < defaultDiacriticsRemovalap.length; i += 1) { | |
| 2529 | var letters = defaultDiacriticsRemovalap[i].letters; | |
| 2530 | for (var j = 0; j < letters.length; j += 1) { | |
| 2531 | diacriticsMap[letters[j]] = defaultDiacriticsRemovalap[i].base; | |
| 2532 | } | |
| 2533 | } | |
| 2534 | ||
| 2535 | var uniqueNumber = 1; | |
| 2536 | ||
| 2537 | var Utils = { | |
| 2538 | uniqueNumber: function uniqueNumber$1() { | |
| 2539 | uniqueNumber += 1; | |
| 2540 | return uniqueNumber; | |
| 2541 | }, | |
| 2542 | id: function id(mask, map) { | |
| 2543 | if ( mask === void 0 ) mask = 'xxxxxxxxxx'; | |
| 2544 | if ( map === void 0 ) map = '0123456789abcdef'; | |
| 2545 | ||
| 2546 | var length = map.length; | |
| 2547 | return mask.replace(/x/g, function () { return map[Math.floor((Math.random() * length))]; }); | |
| 2548 | }, | |
| 2549 | mdPreloaderContent: "\n <span class=\"preloader-inner\">\n <span class=\"preloader-inner-gap\"></span>\n <span class=\"preloader-inner-left\">\n <span class=\"preloader-inner-half-circle\"></span>\n </span>\n <span class=\"preloader-inner-right\">\n <span class=\"preloader-inner-half-circle\"></span>\n </span>\n </span>\n ".trim(), | |
| 5d51ea26 DC |
2550 | iosPreloaderContent: ("\n <span class=\"preloader-inner\">\n " + ([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function () { return '<span class="preloader-inner-line"></span>'; }).join('')) + "\n </span>\n ").trim(), |
| 2551 | auroraPreloaderContent: "\n <span class=\"preloader-inner\">\n <span class=\"preloader-inner-circle\"></span>\n </span>\n ", | |
| 5309fbda DC |
2552 | eventNameToColonCase: function eventNameToColonCase(eventName) { |
| 2553 | var hasColon; | |
| 2554 | return eventName.split('').map(function (char, index) { | |
| 2555 | if (char.match(/[A-Z]/) && index !== 0 && !hasColon) { | |
| 2556 | hasColon = true; | |
| 2557 | return (":" + (char.toLowerCase())); | |
| 2558 | } | |
| 2559 | return char.toLowerCase(); | |
| 2560 | }).join(''); | |
| 2561 | }, | |
| 2562 | deleteProps: function deleteProps(obj) { | |
| 2563 | var object = obj; | |
| 2564 | Object.keys(object).forEach(function (key) { | |
| 2565 | try { | |
| 2566 | object[key] = null; | |
| 2567 | } catch (e) { | |
| 2568 | // no setter for object | |
| 2569 | } | |
| 2570 | try { | |
| 2571 | delete object[key]; | |
| 2572 | } catch (e) { | |
| 2573 | // something got wrong | |
| 2574 | } | |
| 2575 | }); | |
| 2576 | }, | |
| 2577 | bezier: function bezier$1() { | |
| 2578 | var args = [], len = arguments.length; | |
| 2579 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2580 | ||
| 2581 | return bezier.apply(void 0, args); | |
| 2582 | }, | |
| 2583 | nextTick: function nextTick(callback, delay) { | |
| 2584 | if ( delay === void 0 ) delay = 0; | |
| 2585 | ||
| 2586 | return setTimeout(callback, delay); | |
| 2587 | }, | |
| 2588 | nextFrame: function nextFrame(callback) { | |
| 2589 | return Utils.requestAnimationFrame(function () { | |
| 2590 | Utils.requestAnimationFrame(callback); | |
| 2591 | }); | |
| 2592 | }, | |
| 2593 | now: function now() { | |
| 2594 | return Date.now(); | |
| 2595 | }, | |
| 2596 | requestAnimationFrame: function requestAnimationFrame(callback) { | |
| 2597 | return win.requestAnimationFrame(callback); | |
| 2598 | }, | |
| 2599 | cancelAnimationFrame: function cancelAnimationFrame(id) { | |
| 2600 | return win.cancelAnimationFrame(id); | |
| 2601 | }, | |
| 2602 | removeDiacritics: function removeDiacritics(str) { | |
| 2603 | return str.replace(/[^\u0000-\u007E]/g, function (a) { return diacriticsMap[a] || a; }); | |
| 2604 | }, | |
| 2605 | parseUrlQuery: function parseUrlQuery(url) { | |
| 2606 | var query = {}; | |
| 2607 | var urlToParse = url || win.location.href; | |
| 2608 | var i; | |
| 2609 | var params; | |
| 2610 | var param; | |
| 2611 | var length; | |
| 2612 | if (typeof urlToParse === 'string' && urlToParse.length) { | |
| 2613 | urlToParse = urlToParse.indexOf('?') > -1 ? urlToParse.replace(/\S*\?/, '') : ''; | |
| 2614 | params = urlToParse.split('&').filter(function (paramsPart) { return paramsPart !== ''; }); | |
| 2615 | length = params.length; | |
| 2616 | ||
| 2617 | for (i = 0; i < length; i += 1) { | |
| 2618 | param = params[i].replace(/#\S+/g, '').split('='); | |
| 2619 | query[decodeURIComponent(param[0])] = typeof param[1] === 'undefined' ? undefined : decodeURIComponent(param.slice(1).join('=')) || ''; | |
| 2620 | } | |
| 2621 | } | |
| 2622 | return query; | |
| 2623 | }, | |
| 2624 | getTranslate: function getTranslate(el, axis) { | |
| 2625 | if ( axis === void 0 ) axis = 'x'; | |
| 2626 | ||
| 2627 | var matrix; | |
| 2628 | var curTransform; | |
| 2629 | var transformMatrix; | |
| 2630 | ||
| 2631 | var curStyle = win.getComputedStyle(el, null); | |
| 2632 | ||
| 2633 | if (win.WebKitCSSMatrix) { | |
| 2634 | curTransform = curStyle.transform || curStyle.webkitTransform; | |
| 2635 | if (curTransform.split(',').length > 6) { | |
| 2636 | curTransform = curTransform.split(', ').map(function (a) { return a.replace(',', '.'); }).join(', '); | |
| 2637 | } | |
| 2638 | // Some old versions of Webkit choke when 'none' is passed; pass | |
| 2639 | // empty string instead in this case | |
| 2640 | transformMatrix = new win.WebKitCSSMatrix(curTransform === 'none' ? '' : curTransform); | |
| 2641 | } else { | |
| 2642 | transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,'); | |
| 2643 | matrix = transformMatrix.toString().split(','); | |
| 2644 | } | |
| 2645 | ||
| 2646 | if (axis === 'x') { | |
| 2647 | // Latest Chrome and webkits Fix | |
| 2648 | if (win.WebKitCSSMatrix) { curTransform = transformMatrix.m41; } | |
| 2649 | // Crazy IE10 Matrix | |
| 2650 | else if (matrix.length === 16) { curTransform = parseFloat(matrix[12]); } | |
| 2651 | // Normal Browsers | |
| 2652 | else { curTransform = parseFloat(matrix[4]); } | |
| 2653 | } | |
| 2654 | if (axis === 'y') { | |
| 2655 | // Latest Chrome and webkits Fix | |
| 2656 | if (win.WebKitCSSMatrix) { curTransform = transformMatrix.m42; } | |
| 2657 | // Crazy IE10 Matrix | |
| 2658 | else if (matrix.length === 16) { curTransform = parseFloat(matrix[13]); } | |
| 2659 | // Normal Browsers | |
| 2660 | else { curTransform = parseFloat(matrix[5]); } | |
| 2661 | } | |
| 2662 | return curTransform || 0; | |
| 2663 | }, | |
| 2664 | serializeObject: function serializeObject(obj, parents) { | |
| 2665 | if ( parents === void 0 ) parents = []; | |
| 2666 | ||
| 2667 | if (typeof obj === 'string') { return obj; } | |
| 2668 | var resultArray = []; | |
| 2669 | var separator = '&'; | |
| 2670 | var newParents; | |
| 2671 | function varName(name) { | |
| 2672 | if (parents.length > 0) { | |
| 2673 | var parentParts = ''; | |
| 2674 | for (var j = 0; j < parents.length; j += 1) { | |
| 2675 | if (j === 0) { parentParts += parents[j]; } | |
| 2676 | else { parentParts += "[" + (encodeURIComponent(parents[j])) + "]"; } | |
| 2677 | } | |
| 2678 | return (parentParts + "[" + (encodeURIComponent(name)) + "]"); | |
| 2679 | } | |
| 2680 | return encodeURIComponent(name); | |
| 2681 | } | |
| 2682 | function varValue(value) { | |
| 2683 | return encodeURIComponent(value); | |
| 2684 | } | |
| 2685 | Object.keys(obj).forEach(function (prop) { | |
| 2686 | var toPush; | |
| 2687 | if (Array.isArray(obj[prop])) { | |
| 2688 | toPush = []; | |
| 2689 | for (var i = 0; i < obj[prop].length; i += 1) { | |
| 2690 | if (!Array.isArray(obj[prop][i]) && typeof obj[prop][i] === 'object') { | |
| 2691 | newParents = parents.slice(); | |
| 2692 | newParents.push(prop); | |
| 2693 | newParents.push(String(i)); | |
| 2694 | toPush.push(Utils.serializeObject(obj[prop][i], newParents)); | |
| 2695 | } else { | |
| 2696 | toPush.push(((varName(prop)) + "[]=" + (varValue(obj[prop][i])))); | |
| 2697 | } | |
| 2698 | } | |
| 2699 | if (toPush.length > 0) { resultArray.push(toPush.join(separator)); } | |
| 2700 | } else if (obj[prop] === null || obj[prop] === '') { | |
| 2701 | resultArray.push(((varName(prop)) + "=")); | |
| 2702 | } else if (typeof obj[prop] === 'object') { | |
| 2703 | // Object, convert to named array | |
| 2704 | newParents = parents.slice(); | |
| 2705 | newParents.push(prop); | |
| 2706 | toPush = Utils.serializeObject(obj[prop], newParents); | |
| 2707 | if (toPush !== '') { resultArray.push(toPush); } | |
| 2708 | } else if (typeof obj[prop] !== 'undefined' && obj[prop] !== '') { | |
| 2709 | // Should be string or plain value | |
| 2710 | resultArray.push(((varName(prop)) + "=" + (varValue(obj[prop])))); | |
| 2711 | } else if (obj[prop] === '') { resultArray.push(varName(prop)); } | |
| 2712 | }); | |
| 2713 | return resultArray.join(separator); | |
| 2714 | }, | |
| 2715 | isObject: function isObject(o) { | |
| 2716 | return typeof o === 'object' && o !== null && o.constructor && o.constructor === Object; | |
| 2717 | }, | |
| 2718 | merge: function merge() { | |
| 2719 | var args = [], len$1 = arguments.length; | |
| 2720 | while ( len$1-- ) args[ len$1 ] = arguments[ len$1 ]; | |
| 2721 | ||
| 2722 | var to = args[0]; | |
| 2723 | args.splice(0, 1); | |
| 2724 | var from = args; | |
| 2725 | ||
| 2726 | for (var i = 0; i < from.length; i += 1) { | |
| 2727 | var nextSource = args[i]; | |
| 2728 | if (nextSource !== undefined && nextSource !== null) { | |
| 2729 | var keysArray = Object.keys(Object(nextSource)); | |
| 2730 | for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) { | |
| 2731 | var nextKey = keysArray[nextIndex]; | |
| 2732 | var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey); | |
| 2733 | if (desc !== undefined && desc.enumerable) { | |
| 2734 | to[nextKey] = nextSource[nextKey]; | |
| 2735 | } | |
| 2736 | } | |
| 2737 | } | |
| 2738 | } | |
| 2739 | return to; | |
| 2740 | }, | |
| 2741 | extend: function extend() { | |
| 2742 | var args = [], len$1 = arguments.length; | |
| 2743 | while ( len$1-- ) args[ len$1 ] = arguments[ len$1 ]; | |
| 2744 | ||
| 2745 | var deep = true; | |
| 2746 | var to; | |
| 2747 | var from; | |
| 2748 | if (typeof args[0] === 'boolean') { | |
| 2749 | deep = args[0]; | |
| 2750 | to = args[1]; | |
| 2751 | args.splice(0, 2); | |
| 2752 | from = args; | |
| 2753 | } else { | |
| 2754 | to = args[0]; | |
| 2755 | args.splice(0, 1); | |
| 2756 | from = args; | |
| 2757 | } | |
| 2758 | for (var i = 0; i < from.length; i += 1) { | |
| 2759 | var nextSource = args[i]; | |
| 2760 | if (nextSource !== undefined && nextSource !== null) { | |
| 2761 | var keysArray = Object.keys(Object(nextSource)); | |
| 2762 | for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) { | |
| 2763 | var nextKey = keysArray[nextIndex]; | |
| 2764 | var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey); | |
| 2765 | if (desc !== undefined && desc.enumerable) { | |
| 2766 | if (!deep) { | |
| 2767 | to[nextKey] = nextSource[nextKey]; | |
| 2768 | } else if (Utils.isObject(to[nextKey]) && Utils.isObject(nextSource[nextKey])) { | |
| 2769 | Utils.extend(to[nextKey], nextSource[nextKey]); | |
| 2770 | } else if (!Utils.isObject(to[nextKey]) && Utils.isObject(nextSource[nextKey])) { | |
| 2771 | to[nextKey] = {}; | |
| 2772 | Utils.extend(to[nextKey], nextSource[nextKey]); | |
| 2773 | } else { | |
| 2774 | to[nextKey] = nextSource[nextKey]; | |
| 2775 | } | |
| 2776 | } | |
| 2777 | } | |
| 2778 | } | |
| 2779 | } | |
| 2780 | return to; | |
| 2781 | }, | |
| 2782 | colorHexToRgb: function colorHexToRgb(hex) { | |
| 2783 | var h = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function (m, r, g, b) { return r + r + g + g + b + b; }); | |
| 2784 | var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h); | |
| 2785 | return result | |
| 2786 | ? result.slice(1).map(function (n) { return parseInt(n, 16); }) | |
| 2787 | : null; | |
| 2788 | }, | |
| 2789 | colorRgbToHex: function colorRgbToHex(r, g, b) { | |
| 2790 | var result = [r, g, b].map(function (n) { | |
| 2791 | var hex = n.toString(16); | |
| 2792 | return hex.length === 1 ? ("0" + hex) : hex; | |
| 2793 | }).join(''); | |
| 2794 | return ("#" + result); | |
| 2795 | }, | |
| 2796 | colorRgbToHsl: function colorRgbToHsl(r, g, b) { | |
| 2797 | r /= 255; // eslint-disable-line | |
| 2798 | g /= 255; // eslint-disable-line | |
| 2799 | b /= 255; // eslint-disable-line | |
| 2800 | var max = Math.max(r, g, b); | |
| 2801 | var min = Math.min(r, g, b); | |
| 2802 | var d = max - min; | |
| 2803 | var h; | |
| 2804 | if (d === 0) { h = 0; } | |
| 2805 | else if (max === r) { h = ((g - b) / d) % 6; } | |
| 2806 | else if (max === g) { h = (b - r) / d + 2; } | |
| 2807 | else if (max === b) { h = (r - g) / d + 4; } | |
| 2808 | var l = (min + max) / 2; | |
| 2809 | var s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1)); | |
| 5d51ea26 | 2810 | if (h < 0) { h = 360 / 60 + h; } |
| 5309fbda DC |
2811 | return [h * 60, s, l]; |
| 2812 | }, | |
| 2813 | colorHslToRgb: function colorHslToRgb(h, s, l) { | |
| 2814 | var c = (1 - Math.abs(2 * l - 1)) * s; | |
| 2815 | var hp = h / 60; | |
| 2816 | var x = c * (1 - Math.abs((hp % 2) - 1)); | |
| 2817 | var rgb1; | |
| 2818 | if (Number.isNaN(h) || typeof h === 'undefined') { | |
| 2819 | rgb1 = [0, 0, 0]; | |
| 2820 | } else if (hp <= 1) { rgb1 = [c, x, 0]; } | |
| 2821 | else if (hp <= 2) { rgb1 = [x, c, 0]; } | |
| 2822 | else if (hp <= 3) { rgb1 = [0, c, x]; } | |
| 2823 | else if (hp <= 4) { rgb1 = [0, x, c]; } | |
| 2824 | else if (hp <= 5) { rgb1 = [x, 0, c]; } | |
| 2825 | else if (hp <= 6) { rgb1 = [c, 0, x]; } | |
| 2826 | var m = l - (c / 2); | |
| 2827 | return rgb1.map(function (n) { return Math.max(0, Math.min(255, Math.round(255 * (n + m)))); }); | |
| 2828 | }, | |
| 5d51ea26 DC |
2829 | colorHsbToHsl: function colorHsbToHsl(h, s, b) { |
| 2830 | var HSL = { | |
| 2831 | h: h, | |
| 2832 | s: 0, | |
| 2833 | l: 0, | |
| 2834 | }; | |
| 2835 | var HSB = { h: h, s: s, b: b }; | |
| 2836 | ||
| 2837 | HSL.l = (2 - HSB.s) * HSB.b / 2; | |
| 2838 | HSL.s = HSL.l && HSL.l < 1 ? HSB.s * HSB.b / (HSL.l < 0.5 ? HSL.l * 2 : 2 - HSL.l * 2) : HSL.s; | |
| 2839 | ||
| 2840 | return [HSL.h, HSL.s, HSL.l]; | |
| 2841 | }, | |
| 2842 | colorHslToHsb: function colorHslToHsb(h, s, l) { | |
| 2843 | var HSB = { | |
| 2844 | h: h, | |
| 2845 | s: 0, | |
| 2846 | b: 0, | |
| 2847 | }; | |
| 2848 | var HSL = { h: h, s: s, l: l }; | |
| 2849 | ||
| 2850 | var t = HSL.s * (HSL.l < 0.5 ? HSL.l : 1 - HSL.l); | |
| 2851 | HSB.b = HSL.l + t; | |
| 2852 | HSB.s = HSL.l > 0 ? 2 * t / HSB.b : HSB.s; | |
| 2853 | ||
| 2854 | return [HSB.h, HSB.s, HSB.b]; | |
| 2855 | }, | |
| 5309fbda DC |
2856 | colorThemeCSSProperties: function colorThemeCSSProperties() { |
| 2857 | var args = [], len = arguments.length; | |
| 2858 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 2859 | ||
| 2860 | var hex; | |
| 2861 | var rgb; | |
| 2862 | if (args.length === 1) { | |
| 2863 | hex = args[0]; | |
| 2864 | rgb = Utils.colorHexToRgb(hex); | |
| 2865 | } else if (args.length === 3) { | |
| 2866 | rgb = args; | |
| 2867 | hex = Utils.colorRgbToHex.apply(Utils, rgb); | |
| 2868 | } | |
| 2869 | if (!rgb) { return {}; } | |
| 2870 | var hsl = Utils.colorRgbToHsl.apply(Utils, rgb); | |
| 2871 | var hslShade = [hsl[0], hsl[1], Math.max(0, (hsl[2] - 0.08))]; | |
| 2872 | var hslTint = [hsl[0], hsl[1], Math.max(0, (hsl[2] + 0.08))]; | |
| 2873 | var shade = Utils.colorRgbToHex.apply(Utils, Utils.colorHslToRgb.apply(Utils, hslShade)); | |
| 2874 | var tint = Utils.colorRgbToHex.apply(Utils, Utils.colorHslToRgb.apply(Utils, hslTint)); | |
| 2875 | return { | |
| 2876 | '--f7-theme-color': hex, | |
| 2877 | '--f7-theme-color-rgb': rgb.join(', '), | |
| 2878 | '--f7-theme-color-shade': shade, | |
| 2879 | '--f7-theme-color-tint': tint, | |
| 2880 | }; | |
| 2881 | }, | |
| 2882 | }; | |
| 2883 | ||
| 5d51ea26 DC |
2884 | var Support = (function Support() { |
| 2885 | var testDiv = doc.createElement('div'); | |
| 2886 | ||
| 2887 | return { | |
| 2888 | touch: (function checkTouch() { | |
| 2889 | return !!((win.navigator.maxTouchPoints > 0) || ('ontouchstart' in win) || (win.DocumentTouch && doc instanceof win.DocumentTouch)); | |
| 2890 | }()), | |
| 2891 | ||
| 2892 | pointerEvents: !!(win.navigator.pointerEnabled || win.PointerEvent || ('maxTouchPoints' in win.navigator && win.navigator.maxTouchPoints > 0)), | |
| 2893 | prefixedPointerEvents: !!win.navigator.msPointerEnabled, | |
| 2894 | ||
| 2895 | transition: (function checkTransition() { | |
| 2896 | var style = testDiv.style; | |
| 2897 | return ('transition' in style || 'webkitTransition' in style || 'MozTransition' in style); | |
| 2898 | }()), | |
| 2899 | transforms3d: (win.Modernizr && win.Modernizr.csstransforms3d === true) || (function checkTransforms3d() { | |
| 2900 | var style = testDiv.style; | |
| 2901 | return ('webkitPerspective' in style || 'MozPerspective' in style || 'OPerspective' in style || 'MsPerspective' in style || 'perspective' in style); | |
| 2902 | }()), | |
| 2903 | ||
| 2904 | flexbox: (function checkFlexbox() { | |
| 2905 | var div = doc.createElement('div').style; | |
| 2906 | var styles = ('alignItems webkitAlignItems webkitBoxAlign msFlexAlign mozBoxAlign webkitFlexDirection msFlexDirection mozBoxDirection mozBoxOrient webkitBoxDirection webkitBoxOrient').split(' '); | |
| 2907 | for (var i = 0; i < styles.length; i += 1) { | |
| 2908 | if (styles[i] in div) { return true; } | |
| 2909 | } | |
| 2910 | return false; | |
| 2911 | }()), | |
| 2912 | ||
| 2913 | observer: (function checkObserver() { | |
| 2914 | return ('MutationObserver' in win || 'WebkitMutationObserver' in win); | |
| 2915 | }()), | |
| 2916 | ||
| 2917 | passiveListener: (function checkPassiveListener() { | |
| 2918 | var supportsPassive = false; | |
| 2919 | try { | |
| 2920 | var opts = Object.defineProperty({}, 'passive', { | |
| 2921 | // eslint-disable-next-line | |
| 2922 | get: function get() { | |
| 2923 | supportsPassive = true; | |
| 2924 | }, | |
| 2925 | }); | |
| 2926 | win.addEventListener('testPassiveListener', null, opts); | |
| 2927 | } catch (e) { | |
| 2928 | // No support | |
| 2929 | } | |
| 2930 | return supportsPassive; | |
| 2931 | }()), | |
| 2932 | ||
| 2933 | gestures: (function checkGestures() { | |
| 2934 | return 'ongesturestart' in win; | |
| 2935 | }()), | |
| 2936 | ||
| 2937 | intersectionObserver: (function checkObserver() { | |
| 2938 | return ('IntersectionObserver' in win); | |
| 2939 | }()), | |
| 2940 | }; | |
| 2941 | }()); | |
| 2942 | ||
| 5309fbda DC |
2943 | var Device = (function Device() { |
| 2944 | var platform = win.navigator.platform; | |
| 2945 | var ua = win.navigator.userAgent; | |
| 2946 | ||
| 2947 | var device = { | |
| 2948 | ios: false, | |
| 2949 | android: false, | |
| 2950 | androidChrome: false, | |
| 2951 | desktop: false, | |
| 2952 | windowsPhone: false, | |
| 2953 | iphone: false, | |
| 2954 | iphoneX: false, | |
| 2955 | ipod: false, | |
| 2956 | ipad: false, | |
| 2957 | edge: false, | |
| 2958 | ie: false, | |
| 2959 | firefox: false, | |
| 2960 | macos: false, | |
| 2961 | windows: false, | |
| 2962 | cordova: !!(win.cordova || win.phonegap), | |
| 2963 | phonegap: !!(win.cordova || win.phonegap), | |
| 5d51ea26 | 2964 | electron: false, |
| 5309fbda DC |
2965 | }; |
| 2966 | ||
| 2967 | var screenWidth = win.screen.width; | |
| 2968 | var screenHeight = win.screen.height; | |
| 2969 | ||
| 2970 | var windowsPhone = ua.match(/(Windows Phone);?[\s\/]+([\d.]+)?/); // eslint-disable-line | |
| 2971 | var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); // eslint-disable-line | |
| 2972 | var ipad = ua.match(/(iPad).*OS\s([\d_]+)/); | |
| 2973 | var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/); | |
| 2974 | var iphone = !ipad && ua.match(/(iPhone\sOS|iOS)\s([\d_]+)/); | |
| 2975 | var iphoneX = iphone && ( | |
| 2976 | (screenWidth === 375 && screenHeight === 812) // X/XS | |
| 2977 | || (screenWidth === 414 && screenHeight === 896) // XR / XS Max | |
| 2978 | ); | |
| 2979 | var ie = ua.indexOf('MSIE ') >= 0 || ua.indexOf('Trident/') >= 0; | |
| 2980 | var edge = ua.indexOf('Edge/') >= 0; | |
| 2981 | var firefox = ua.indexOf('Gecko/') >= 0 && ua.indexOf('Firefox/') >= 0; | |
| 5309fbda | 2982 | var windows = platform === 'Win32'; |
| 5d51ea26 DC |
2983 | var electron = ua.toLowerCase().indexOf('electron') >= 0; |
| 2984 | var macos = platform === 'MacIntel'; | |
| 2985 | ||
| 2986 | // iPadOs 13 fix | |
| 2987 | if (!ipad | |
| 2988 | && macos | |
| 2989 | && Support.touch | |
| 2990 | && ( | |
| 2991 | (screenWidth === 1024 && screenHeight === 1366) // Pro 12.9 | |
| 2992 | || (screenWidth === 834 && screenHeight === 1194) // Pro 11 | |
| 2993 | || (screenWidth === 834 && screenHeight === 1112) // Pro 10.5 | |
| 2994 | || (screenWidth === 768 && screenHeight === 1024) // other | |
| 2995 | ) | |
| 2996 | ) { | |
| 2997 | ipad = ua.match(/(Version)\/([\d.]+)/); | |
| 2998 | macos = false; | |
| 2999 | } | |
| 5309fbda DC |
3000 | |
| 3001 | device.ie = ie; | |
| 3002 | device.edge = edge; | |
| 3003 | device.firefox = firefox; | |
| 3004 | ||
| 3005 | // Windows | |
| 3006 | if (windowsPhone) { | |
| 5d51ea26 | 3007 | device.os = 'windowsPhone'; |
| 5309fbda DC |
3008 | device.osVersion = windowsPhone[2]; |
| 3009 | device.windowsPhone = true; | |
| 3010 | } | |
| 3011 | // Android | |
| 3012 | if (android && !windows) { | |
| 3013 | device.os = 'android'; | |
| 3014 | device.osVersion = android[2]; | |
| 3015 | device.android = true; | |
| 3016 | device.androidChrome = ua.toLowerCase().indexOf('chrome') >= 0; | |
| 3017 | } | |
| 3018 | if (ipad || iphone || ipod) { | |
| 3019 | device.os = 'ios'; | |
| 3020 | device.ios = true; | |
| 3021 | } | |
| 3022 | // iOS | |
| 3023 | if (iphone && !ipod) { | |
| 3024 | device.osVersion = iphone[2].replace(/_/g, '.'); | |
| 3025 | device.iphone = true; | |
| 3026 | device.iphoneX = iphoneX; | |
| 3027 | } | |
| 3028 | if (ipad) { | |
| 3029 | device.osVersion = ipad[2].replace(/_/g, '.'); | |
| 3030 | device.ipad = true; | |
| 3031 | } | |
| 3032 | if (ipod) { | |
| 3033 | device.osVersion = ipod[3] ? ipod[3].replace(/_/g, '.') : null; | |
| 5d51ea26 | 3034 | device.ipod = true; |
| 5309fbda DC |
3035 | } |
| 3036 | // iOS 8+ changed UA | |
| 3037 | if (device.ios && device.osVersion && ua.indexOf('Version/') >= 0) { | |
| 3038 | if (device.osVersion.split('.')[0] === '10') { | |
| 3039 | device.osVersion = ua.toLowerCase().split('version/')[1].split(' ')[0]; | |
| 3040 | } | |
| 3041 | } | |
| 3042 | ||
| 3043 | // Webview | |
| 3044 | device.webView = !!((iphone || ipad || ipod) && (ua.match(/.*AppleWebKit(?!.*Safari)/i) || win.navigator.standalone)) | |
| 3045 | || (win.matchMedia && win.matchMedia('(display-mode: standalone)').matches); | |
| 3046 | device.webview = device.webView; | |
| 3047 | device.standalone = device.webView; | |
| 3048 | ||
| 3049 | // Desktop | |
| 5d51ea26 | 3050 | device.desktop = !(device.ios || device.android || device.windowsPhone) || electron; |
| 5309fbda | 3051 | if (device.desktop) { |
| 5d51ea26 | 3052 | device.electron = electron; |
| 5309fbda DC |
3053 | device.macos = macos; |
| 3054 | device.windows = windows; | |
| 3055 | } | |
| 3056 | ||
| 5309fbda DC |
3057 | // Meta statusbar |
| 3058 | var metaStatusbar = doc.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]'); | |
| 3059 | ||
| 3060 | // Check for status bar and fullscreen app mode | |
| 3061 | device.needsStatusbarOverlay = function needsStatusbarOverlay() { | |
| 5d51ea26 | 3062 | if (device.desktop) { return false; } |
| 5309fbda DC |
3063 | if (device.standalone && device.ios && metaStatusbar && metaStatusbar.content === 'black-translucent') { |
| 3064 | return true; | |
| 3065 | } | |
| 3066 | if ((device.webView || (device.android && device.cordova)) && (win.innerWidth * win.innerHeight === win.screen.width * win.screen.height)) { | |
| 3067 | if (device.iphoneX && (win.orientation === 90 || win.orientation === -90)) { | |
| 3068 | return false; | |
| 3069 | } | |
| 3070 | return true; | |
| 3071 | } | |
| 3072 | return false; | |
| 3073 | }; | |
| 3074 | device.statusbar = device.needsStatusbarOverlay(); | |
| 3075 | ||
| 3076 | // Pixel Ratio | |
| 3077 | device.pixelRatio = win.devicePixelRatio || 1; | |
| 3078 | ||
| 5d51ea26 DC |
3079 | // Color Scheme |
| 3080 | var DARK = '(prefers-color-scheme: dark)'; | |
| 3081 | var LIGHT = '(prefers-color-scheme: light)'; | |
| 3082 | device.prefersColorScheme = function prefersColorTheme() { | |
| 3083 | var theme; | |
| 3084 | if (win.matchMedia && win.matchMedia(LIGHT).matches) { | |
| 3085 | theme = 'light'; | |
| 3086 | } | |
| 3087 | if (win.matchMedia && win.matchMedia(DARK).matches) { | |
| 3088 | theme = 'dark'; | |
| 3089 | } | |
| 3090 | return theme; | |
| 3091 | }; | |
| 3092 | ||
| 5309fbda DC |
3093 | // Export object |
| 3094 | return device; | |
| 3095 | }()); | |
| 3096 | ||
| 3097 | var EventsClass = function EventsClass(parents) { | |
| 3098 | if ( parents === void 0 ) parents = []; | |
| 3099 | ||
| 3100 | var self = this; | |
| 3101 | self.eventsParents = parents; | |
| 3102 | self.eventsListeners = {}; | |
| 3103 | }; | |
| 3104 | ||
| 3105 | EventsClass.prototype.on = function on (events, handler, priority) { | |
| 3106 | var self = this; | |
| 3107 | if (typeof handler !== 'function') { return self; } | |
| 3108 | var method = priority ? 'unshift' : 'push'; | |
| 3109 | events.split(' ').forEach(function (event) { | |
| 3110 | if (!self.eventsListeners[event]) { self.eventsListeners[event] = []; } | |
| 3111 | self.eventsListeners[event][method](handler); | |
| 3112 | }); | |
| 3113 | return self; | |
| 3114 | }; | |
| 3115 | ||
| 3116 | EventsClass.prototype.once = function once (events, handler, priority) { | |
| 3117 | var self = this; | |
| 3118 | if (typeof handler !== 'function') { return self; } | |
| 3119 | function onceHandler() { | |
| 3120 | var args = [], len = arguments.length; | |
| 3121 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 3122 | ||
| 3123 | handler.apply(self, args); | |
| 3124 | self.off(events, onceHandler); | |
| 3125 | if (onceHandler.f7proxy) { | |
| 3126 | delete onceHandler.f7proxy; | |
| 3127 | } | |
| 3128 | } | |
| 3129 | onceHandler.f7proxy = handler; | |
| 3130 | return self.on(events, onceHandler, priority); | |
| 3131 | }; | |
| 3132 | ||
| 3133 | EventsClass.prototype.off = function off (events, handler) { | |
| 3134 | var self = this; | |
| 3135 | if (!self.eventsListeners) { return self; } | |
| 3136 | events.split(' ').forEach(function (event) { | |
| 3137 | if (typeof handler === 'undefined') { | |
| 3138 | self.eventsListeners[event] = []; | |
| 3139 | } else if (self.eventsListeners[event]) { | |
| 3140 | self.eventsListeners[event].forEach(function (eventHandler, index) { | |
| 3141 | if (eventHandler === handler || (eventHandler.f7proxy && eventHandler.f7proxy === handler)) { | |
| 3142 | self.eventsListeners[event].splice(index, 1); | |
| 3143 | } | |
| 3144 | }); | |
| 3145 | } | |
| 3146 | }); | |
| 3147 | return self; | |
| 3148 | }; | |
| 3149 | ||
| 3150 | EventsClass.prototype.emit = function emit () { | |
| 3151 | var args = [], len = arguments.length; | |
| 3152 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 3153 | ||
| 3154 | var self = this; | |
| 3155 | if (!self.eventsListeners) { return self; } | |
| 3156 | var events; | |
| 3157 | var data; | |
| 3158 | var context; | |
| 3159 | var eventsParents; | |
| 3160 | if (typeof args[0] === 'string' || Array.isArray(args[0])) { | |
| 3161 | events = args[0]; | |
| 3162 | data = args.slice(1, args.length); | |
| 3163 | context = self; | |
| 3164 | eventsParents = self.eventsParents; | |
| 3165 | } else { | |
| 3166 | events = args[0].events; | |
| 3167 | data = args[0].data; | |
| 3168 | context = args[0].context || self; | |
| 3169 | eventsParents = args[0].local ? [] : args[0].parents || self.eventsParents; | |
| 3170 | } | |
| 3171 | var eventsArray = Array.isArray(events) ? events : events.split(' '); | |
| 3172 | var localEvents = eventsArray.map(function (eventName) { return eventName.replace('local::', ''); }); | |
| 3173 | var parentEvents = eventsArray.filter(function (eventName) { return eventName.indexOf('local::') < 0; }); | |
| 3174 | ||
| 3175 | localEvents.forEach(function (event) { | |
| 3176 | if (self.eventsListeners && self.eventsListeners[event]) { | |
| 3177 | var handlers = []; | |
| 3178 | self.eventsListeners[event].forEach(function (eventHandler) { | |
| 3179 | handlers.push(eventHandler); | |
| 3180 | }); | |
| 3181 | handlers.forEach(function (eventHandler) { | |
| 3182 | eventHandler.apply(context, data); | |
| 3183 | }); | |
| 3184 | } | |
| 3185 | }); | |
| 3186 | if (eventsParents && eventsParents.length > 0) { | |
| 3187 | eventsParents.forEach(function (eventsParent) { | |
| 3188 | eventsParent.emit.apply(eventsParent, [ parentEvents ].concat( data )); | |
| 3189 | }); | |
| 3190 | } | |
| 3191 | return self; | |
| 3192 | }; | |
| 3193 | ||
| 5d51ea26 | 3194 | var Framework7Class = /*@__PURE__*/(function (EventsClass) { |
| 5309fbda DC |
3195 | function Framework7Class(params, parents) { |
| 3196 | if ( params === void 0 ) params = {}; | |
| 3197 | if ( parents === void 0 ) parents = []; | |
| 3198 | ||
| 5d51ea26 | 3199 | EventsClass.call(this, parents); |
| 5309fbda DC |
3200 | var self = this; |
| 3201 | self.params = params; | |
| 3202 | ||
| 3203 | if (self.params && self.params.on) { | |
| 3204 | Object.keys(self.params.on).forEach(function (eventName) { | |
| 3205 | self.on(eventName, self.params.on[eventName]); | |
| 3206 | }); | |
| 3207 | } | |
| 3208 | } | |
| 3209 | ||
| 5d51ea26 DC |
3210 | if ( EventsClass ) Framework7Class.__proto__ = EventsClass; |
| 3211 | Framework7Class.prototype = Object.create( EventsClass && EventsClass.prototype ); | |
| 5309fbda DC |
3212 | Framework7Class.prototype.constructor = Framework7Class; |
| 3213 | ||
| 3214 | var staticAccessors = { components: { configurable: true } }; | |
| 3215 | ||
| 3216 | // eslint-disable-next-line | |
| 3217 | Framework7Class.prototype.useModuleParams = function useModuleParams (module, instanceParams) { | |
| 3218 | if (module.params) { | |
| 3219 | var originalParams = {}; | |
| 3220 | Object.keys(module.params).forEach(function (paramKey) { | |
| 3221 | if (typeof instanceParams[paramKey] === 'undefined') { return; } | |
| 3222 | originalParams[paramKey] = Utils.extend({}, instanceParams[paramKey]); | |
| 3223 | }); | |
| 3224 | Utils.extend(instanceParams, module.params); | |
| 3225 | Object.keys(originalParams).forEach(function (paramKey) { | |
| 3226 | Utils.extend(instanceParams[paramKey], originalParams[paramKey]); | |
| 3227 | }); | |
| 3228 | } | |
| 3229 | }; | |
| 3230 | ||
| 3231 | Framework7Class.prototype.useModulesParams = function useModulesParams (instanceParams) { | |
| 3232 | var instance = this; | |
| 3233 | if (!instance.modules) { return; } | |
| 3234 | Object.keys(instance.modules).forEach(function (moduleName) { | |
| 3235 | var module = instance.modules[moduleName]; | |
| 3236 | // Extend params | |
| 3237 | if (module.params) { | |
| 3238 | Utils.extend(instanceParams, module.params); | |
| 3239 | } | |
| 3240 | }); | |
| 3241 | }; | |
| 3242 | ||
| 3243 | Framework7Class.prototype.useModule = function useModule (moduleName, moduleParams) { | |
| 3244 | if ( moduleName === void 0 ) moduleName = ''; | |
| 3245 | if ( moduleParams === void 0 ) moduleParams = {}; | |
| 3246 | ||
| 3247 | var instance = this; | |
| 3248 | if (!instance.modules) { return; } | |
| 3249 | var module = typeof moduleName === 'string' ? instance.modules[moduleName] : moduleName; | |
| 3250 | if (!module) { return; } | |
| 3251 | ||
| 3252 | // Extend instance methods and props | |
| 3253 | if (module.instance) { | |
| 3254 | Object.keys(module.instance).forEach(function (modulePropName) { | |
| 3255 | var moduleProp = module.instance[modulePropName]; | |
| 3256 | if (typeof moduleProp === 'function') { | |
| 3257 | instance[modulePropName] = moduleProp.bind(instance); | |
| 3258 | } else { | |
| 3259 | instance[modulePropName] = moduleProp; | |
| 3260 | } | |
| 3261 | }); | |
| 3262 | } | |
| 3263 | // Add event listeners | |
| 3264 | if (module.on && instance.on) { | |
| 3265 | Object.keys(module.on).forEach(function (moduleEventName) { | |
| 3266 | instance.on(moduleEventName, module.on[moduleEventName]); | |
| 3267 | }); | |
| 3268 | } | |
| 3269 | // Add vnode hooks | |
| 3270 | if (module.vnode) { | |
| 3271 | if (!instance.vnodeHooks) { instance.vnodeHooks = {}; } | |
| 3272 | Object.keys(module.vnode).forEach(function (vnodeId) { | |
| 3273 | Object.keys(module.vnode[vnodeId]).forEach(function (hookName) { | |
| 3274 | var handler = module.vnode[vnodeId][hookName]; | |
| 3275 | if (!instance.vnodeHooks[hookName]) { instance.vnodeHooks[hookName] = {}; } | |
| 3276 | if (!instance.vnodeHooks[hookName][vnodeId]) { instance.vnodeHooks[hookName][vnodeId] = []; } | |
| 3277 | instance.vnodeHooks[hookName][vnodeId].push(handler.bind(instance)); | |
| 3278 | }); | |
| 3279 | }); | |
| 3280 | } | |
| 3281 | // Module create callback | |
| 3282 | if (module.create) { | |
| 3283 | module.create.bind(instance)(moduleParams); | |
| 3284 | } | |
| 3285 | }; | |
| 3286 | ||
| 3287 | Framework7Class.prototype.useModules = function useModules (modulesParams) { | |
| 3288 | if ( modulesParams === void 0 ) modulesParams = {}; | |
| 3289 | ||
| 3290 | var instance = this; | |
| 3291 | if (!instance.modules) { return; } | |
| 3292 | Object.keys(instance.modules).forEach(function (moduleName) { | |
| 3293 | var moduleParams = modulesParams[moduleName] || {}; | |
| 3294 | instance.useModule(moduleName, moduleParams); | |
| 3295 | }); | |
| 3296 | }; | |
| 3297 | ||
| 3298 | staticAccessors.components.set = function (components) { | |
| 3299 | var Class = this; | |
| 3300 | if (!Class.use) { return; } | |
| 3301 | Class.use(components); | |
| 3302 | }; | |
| 3303 | ||
| 3304 | Framework7Class.installModule = function installModule (module) { | |
| 3305 | var params = [], len = arguments.length - 1; | |
| 3306 | while ( len-- > 0 ) params[ len ] = arguments[ len + 1 ]; | |
| 3307 | ||
| 3308 | var Class = this; | |
| 3309 | if (!Class.prototype.modules) { Class.prototype.modules = {}; } | |
| 3310 | var name = module.name || (((Object.keys(Class.prototype.modules).length) + "_" + (Utils.now()))); | |
| 3311 | Class.prototype.modules[name] = module; | |
| 3312 | // Prototype | |
| 3313 | if (module.proto) { | |
| 3314 | Object.keys(module.proto).forEach(function (key) { | |
| 3315 | Class.prototype[key] = module.proto[key]; | |
| 3316 | }); | |
| 3317 | } | |
| 3318 | // Class | |
| 3319 | if (module.static) { | |
| 3320 | Object.keys(module.static).forEach(function (key) { | |
| 3321 | Class[key] = module.static[key]; | |
| 3322 | }); | |
| 3323 | } | |
| 3324 | // Callback | |
| 3325 | if (module.install) { | |
| 3326 | module.install.apply(Class, params); | |
| 3327 | } | |
| 3328 | return Class; | |
| 3329 | }; | |
| 3330 | ||
| 3331 | Framework7Class.use = function use (module) { | |
| 3332 | var params = [], len = arguments.length - 1; | |
| 3333 | while ( len-- > 0 ) params[ len ] = arguments[ len + 1 ]; | |
| 3334 | ||
| 3335 | var Class = this; | |
| 3336 | if (Array.isArray(module)) { | |
| 3337 | module.forEach(function (m) { return Class.installModule(m); }); | |
| 3338 | return Class; | |
| 3339 | } | |
| 3340 | return Class.installModule.apply(Class, [ module ].concat( params )); | |
| 3341 | }; | |
| 3342 | ||
| 3343 | Object.defineProperties( Framework7Class, staticAccessors ); | |
| 3344 | ||
| 3345 | return Framework7Class; | |
| 3346 | }(EventsClass)); | |
| 3347 | ||
| 3348 | function ConstructorMethods (parameters) { | |
| 3349 | if ( parameters === void 0 ) parameters = {}; | |
| 3350 | ||
| 3351 | var defaultSelector = parameters.defaultSelector; | |
| 3352 | var constructor = parameters.constructor; | |
| 3353 | var domProp = parameters.domProp; | |
| 3354 | var app = parameters.app; | |
| 3355 | var addMethods = parameters.addMethods; | |
| 3356 | var methods = { | |
| 3357 | create: function create() { | |
| 3358 | var args = [], len = arguments.length; | |
| 3359 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 3360 | ||
| 3361 | if (app) { return new (Function.prototype.bind.apply( constructor, [ null ].concat( [app], args) )); } | |
| 3362 | return new (Function.prototype.bind.apply( constructor, [ null ].concat( args) )); | |
| 3363 | }, | |
| 3364 | get: function get(el) { | |
| 3365 | if ( el === void 0 ) el = defaultSelector; | |
| 3366 | ||
| 3367 | if (el instanceof constructor) { return el; } | |
| 3368 | var $el = $(el); | |
| 3369 | if ($el.length === 0) { return undefined; } | |
| 3370 | return $el[0][domProp]; | |
| 3371 | }, | |
| 3372 | destroy: function destroy(el) { | |
| 3373 | var instance = methods.get(el); | |
| 3374 | if (instance && instance.destroy) { return instance.destroy(); } | |
| 3375 | return undefined; | |
| 3376 | }, | |
| 3377 | }; | |
| 3378 | if (addMethods && Array.isArray(addMethods)) { | |
| 3379 | addMethods.forEach(function (methodName) { | |
| 3380 | methods[methodName] = function (el) { | |
| 3381 | if ( el === void 0 ) el = defaultSelector; | |
| 3382 | var args = [], len = arguments.length - 1; | |
| 3383 | while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | |
| 3384 | ||
| 3385 | var instance = methods.get(el); | |
| 3386 | if (instance && instance[methodName]) { return instance[methodName].apply(instance, args); } | |
| 3387 | return undefined; | |
| 3388 | }; | |
| 3389 | }); | |
| 3390 | } | |
| 3391 | return methods; | |
| 3392 | } | |
| 3393 | ||
| 3394 | function ModalMethods (parameters) { | |
| 3395 | if ( parameters === void 0 ) parameters = {}; | |
| 3396 | ||
| 3397 | var defaultSelector = parameters.defaultSelector; | |
| 3398 | var constructor = parameters.constructor; | |
| 3399 | var app = parameters.app; | |
| 3400 | var methods = Utils.extend( | |
| 3401 | ConstructorMethods({ | |
| 3402 | defaultSelector: defaultSelector, | |
| 3403 | constructor: constructor, | |
| 3404 | app: app, | |
| 3405 | domProp: 'f7Modal', | |
| 3406 | }), | |
| 3407 | { | |
| 3408 | open: function open(el, animate) { | |
| 3409 | var $el = $(el); | |
| 3410 | var instance = $el[0].f7Modal; | |
| 3411 | if (!instance) { instance = new constructor(app, { el: $el }); } | |
| 3412 | return instance.open(animate); | |
| 3413 | }, | |
| 3414 | close: function close(el, animate) { | |
| 3415 | if ( el === void 0 ) el = defaultSelector; | |
| 3416 | ||
| 3417 | var $el = $(el); | |
| 3418 | if ($el.length === 0) { return undefined; } | |
| 3419 | var instance = $el[0].f7Modal; | |
| 3420 | if (!instance) { instance = new constructor(app, { el: $el }); } | |
| 3421 | return instance.close(animate); | |
| 3422 | }, | |
| 3423 | } | |
| 3424 | ); | |
| 3425 | return methods; | |
| 3426 | } | |
| 3427 | ||
| 3428 | var fetchedModules = []; | |
| 3429 | function loadModule(moduleToLoad) { | |
| 3430 | var Framework7 = this; | |
| 3431 | return new Promise(function (resolve, reject) { | |
| 3432 | var app = Framework7.instance; | |
| 3433 | var modulePath; | |
| 3434 | var moduleObj; | |
| 3435 | var moduleFunc; | |
| 3436 | if (!moduleToLoad) { | |
| 3437 | reject(new Error('Framework7: Lazy module must be specified')); | |
| 3438 | return; | |
| 3439 | } | |
| 3440 | ||
| 3441 | function install(module) { | |
| 3442 | Framework7.use(module); | |
| 3443 | ||
| 3444 | if (app) { | |
| 3445 | app.useModuleParams(module, app.params); | |
| 3446 | app.useModule(module); | |
| 3447 | } | |
| 3448 | } | |
| 3449 | ||
| 3450 | if (typeof moduleToLoad === 'string') { | |
| 3451 | var matchNamePattern = moduleToLoad.match(/([a-z0-9-]*)/i); | |
| 3452 | if (moduleToLoad.indexOf('.') < 0 && matchNamePattern && matchNamePattern[0].length === moduleToLoad.length) { | |
| 3453 | if (!app || (app && !app.params.lazyModulesPath)) { | |
| 3454 | reject(new Error('Framework7: "lazyModulesPath" app parameter must be specified to fetch module by name')); | |
| 3455 | return; | |
| 3456 | } | |
| 3457 | modulePath = (app.params.lazyModulesPath) + "/" + moduleToLoad + ".js"; | |
| 3458 | } else { | |
| 3459 | modulePath = moduleToLoad; | |
| 3460 | } | |
| 3461 | } else if (typeof moduleToLoad === 'function') { | |
| 3462 | moduleFunc = moduleToLoad; | |
| 3463 | } else { | |
| 3464 | // considering F7-Plugin object | |
| 3465 | moduleObj = moduleToLoad; | |
| 3466 | } | |
| 3467 | ||
| 3468 | if (moduleFunc) { | |
| 3469 | var module = moduleFunc(Framework7, false); | |
| 3470 | if (!module) { | |
| 3471 | reject(new Error('Framework7: Can\'t find Framework7 component in specified component function')); | |
| 3472 | return; | |
| 3473 | } | |
| 3474 | // Check if it was added | |
| 3475 | if (Framework7.prototype.modules && Framework7.prototype.modules[module.name]) { | |
| 3476 | resolve(); | |
| 3477 | return; | |
| 3478 | } | |
| 3479 | // Install It | |
| 3480 | install(module); | |
| 3481 | ||
| 3482 | resolve(); | |
| 3483 | } | |
| 3484 | if (moduleObj) { | |
| 3485 | var module$1 = moduleObj; | |
| 3486 | if (!module$1) { | |
| 3487 | reject(new Error('Framework7: Can\'t find Framework7 component in specified component')); | |
| 3488 | return; | |
| 3489 | } | |
| 3490 | // Check if it was added | |
| 3491 | if (Framework7.prototype.modules && Framework7.prototype.modules[module$1.name]) { | |
| 3492 | resolve(); | |
| 3493 | return; | |
| 3494 | } | |
| 3495 | // Install It | |
| 3496 | install(module$1); | |
| 3497 | ||
| 3498 | resolve(); | |
| 3499 | } | |
| 3500 | if (modulePath) { | |
| 3501 | if (fetchedModules.indexOf(modulePath) >= 0) { | |
| 3502 | resolve(); | |
| 3503 | return; | |
| 3504 | } | |
| 3505 | fetchedModules.push(modulePath); | |
| 3506 | var scriptLoad = new Promise(function (resolveScript, rejectScript) { | |
| 3507 | Framework7.request.get( | |
| 3508 | modulePath, | |
| 3509 | function (scriptContent) { | |
| 3510 | var id = Utils.id(); | |
| 3511 | var callbackLoadName = "f7_component_loader_callback_" + id; | |
| 3512 | ||
| 3513 | var scriptEl = document.createElement('script'); | |
| 3514 | scriptEl.innerHTML = "window." + callbackLoadName + " = function (Framework7, Framework7AutoInstallComponent) {return " + (scriptContent.trim()) + "}"; | |
| 3515 | $('head').append(scriptEl); | |
| 3516 | ||
| 3517 | var componentLoader = window[callbackLoadName]; | |
| 3518 | delete window[callbackLoadName]; | |
| 3519 | $(scriptEl).remove(); | |
| 3520 | ||
| 3521 | var module = componentLoader(Framework7, false); | |
| 3522 | ||
| 3523 | if (!module) { | |
| 3524 | rejectScript(new Error(("Framework7: Can't find Framework7 component in " + modulePath + " file"))); | |
| 3525 | return; | |
| 3526 | } | |
| 3527 | ||
| 3528 | // Check if it was added | |
| 3529 | if (Framework7.prototype.modules && Framework7.prototype.modules[module.name]) { | |
| 3530 | resolveScript(); | |
| 3531 | return; | |
| 3532 | } | |
| 3533 | ||
| 3534 | // Install It | |
| 3535 | install(module); | |
| 3536 | ||
| 3537 | resolveScript(); | |
| 3538 | }, | |
| 3539 | function (xhr, status) { | |
| 3540 | rejectScript(xhr, status); | |
| 3541 | } | |
| 3542 | ); | |
| 3543 | }); | |
| 3544 | var styleLoad = new Promise(function (resolveStyle) { | |
| 3545 | Framework7.request.get( | |
| 3546 | modulePath.replace('.js', app.rtl ? '.rtl.css' : '.css'), | |
| 3547 | function (styleContent) { | |
| 3548 | var styleEl = document.createElement('style'); | |
| 3549 | styleEl.innerHTML = styleContent; | |
| 3550 | $('head').append(styleEl); | |
| 3551 | ||
| 3552 | resolveStyle(); | |
| 3553 | }, | |
| 3554 | function () { | |
| 3555 | resolveStyle(); | |
| 3556 | } | |
| 3557 | ); | |
| 3558 | }); | |
| 3559 | ||
| 3560 | Promise.all([scriptLoad, styleLoad]).then(function () { | |
| 3561 | resolve(); | |
| 3562 | }).catch(function (err) { | |
| 3563 | reject(err); | |
| 3564 | }); | |
| 3565 | } | |
| 3566 | }); | |
| 3567 | } | |
| 3568 | ||
| 5d51ea26 | 3569 | var Framework7 = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda | 3570 | function Framework7(params) { |
| 5d51ea26 | 3571 | Framework7Class.call(this, params); |
| 5309fbda DC |
3572 | if (Framework7.instance) { |
| 3573 | throw new Error('Framework7 is already initialized and can\'t be initialized more than once'); | |
| 3574 | } | |
| 3575 | ||
| 3576 | var passedParams = Utils.extend({}, params); | |
| 3577 | ||
| 3578 | // App Instance | |
| 3579 | var app = this; | |
| 3580 | ||
| 3581 | Framework7.instance = app; | |
| 3582 | ||
| 3583 | // Default | |
| 3584 | var defaults = { | |
| 3585 | version: '1.0.0', | |
| 3586 | id: 'io.framework7.testapp', | |
| 3587 | root: 'body', | |
| 3588 | theme: 'auto', | |
| 3589 | language: win.navigator.language, | |
| 3590 | routes: [], | |
| 3591 | name: 'Framework7', | |
| 3592 | lazyModulesPath: null, | |
| 3593 | initOnDeviceReady: true, | |
| 3594 | init: true, | |
| 5d51ea26 | 3595 | autoDarkTheme: false, |
| 5309fbda DC |
3596 | }; |
| 3597 | ||
| 3598 | // Extend defaults with modules params | |
| 3599 | app.useModulesParams(defaults); | |
| 3600 | ||
| 3601 | // Extend defaults with passed params | |
| 3602 | app.params = Utils.extend(defaults, params); | |
| 3603 | ||
| 3604 | var $rootEl = $(app.params.root); | |
| 3605 | ||
| 3606 | Utils.extend(app, { | |
| 3607 | // App Id | |
| 3608 | id: app.params.id, | |
| 3609 | // App Name | |
| 3610 | name: app.params.name, | |
| 3611 | // App version | |
| 3612 | version: app.params.version, | |
| 3613 | // Routes | |
| 3614 | routes: app.params.routes, | |
| 3615 | // Lang | |
| 3616 | language: app.params.language, | |
| 3617 | // Root | |
| 3618 | root: $rootEl, | |
| 3619 | // RTL | |
| 3620 | rtl: $rootEl.css('direction') === 'rtl', | |
| 3621 | // Theme | |
| 3622 | theme: (function getTheme() { | |
| 3623 | if (app.params.theme === 'auto') { | |
| 5d51ea26 DC |
3624 | if (Device.ios) { return 'ios'; } |
| 3625 | if (Device.desktop && Device.electron) { return 'aurora'; } | |
| 3626 | return 'md'; | |
| 5309fbda DC |
3627 | } |
| 3628 | return app.params.theme; | |
| 3629 | }()), | |
| 3630 | // Initially passed parameters | |
| 3631 | passedParams: passedParams, | |
| 3632 | }); | |
| 3633 | ||
| 3634 | // Save Root | |
| 3635 | if (app.root && app.root[0]) { | |
| 3636 | app.root[0].f7 = app; | |
| 3637 | } | |
| 3638 | ||
| 3639 | // Install Modules | |
| 3640 | app.useModules(); | |
| 3641 | ||
| 3642 | // Init Data & Methods | |
| 3643 | app.initData(); | |
| 3644 | ||
| 5d51ea26 DC |
3645 | // Auto Dark Theme |
| 3646 | var DARK = '(prefers-color-scheme: dark)'; | |
| 3647 | var LIGHT = '(prefers-color-scheme: light)'; | |
| 3648 | app.mq = {}; | |
| 3649 | if (win.matchMedia) { | |
| 3650 | app.mq.dark = win.matchMedia(DARK); | |
| 3651 | app.mq.light = win.matchMedia(LIGHT); | |
| 3652 | } | |
| 3653 | app.colorSchemeListener = function colorSchemeListener(ref) { | |
| 3654 | var matches = ref.matches; | |
| 3655 | var media = ref.media; | |
| 3656 | ||
| 3657 | if (!matches) { | |
| 3658 | return; | |
| 3659 | } | |
| 3660 | var html = doc.querySelector('html'); | |
| 3661 | if (media === DARK) { | |
| 3662 | html.classList.add('theme-dark'); | |
| 3663 | } else if (media === LIGHT) { | |
| 3664 | html.classList.remove('theme-dark'); | |
| 3665 | } | |
| 3666 | }; | |
| 5309fbda DC |
3667 | // Init |
| 3668 | if (app.params.init) { | |
| 3669 | if (Device.cordova && app.params.initOnDeviceReady) { | |
| 3670 | $(doc).on('deviceready', function () { | |
| 3671 | app.init(); | |
| 3672 | }); | |
| 3673 | } else { | |
| 3674 | app.init(); | |
| 3675 | } | |
| 3676 | } | |
| 3677 | // Return app instance | |
| 3678 | return app; | |
| 3679 | } | |
| 3680 | ||
| 5d51ea26 DC |
3681 | if ( Framework7Class ) Framework7.__proto__ = Framework7Class; |
| 3682 | Framework7.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
3683 | Framework7.prototype.constructor = Framework7; |
| 3684 | ||
| 3685 | var prototypeAccessors = { $: { configurable: true },t7: { configurable: true } }; | |
| 3686 | var staticAccessors = { Dom7: { configurable: true },$: { configurable: true },Template7: { configurable: true },Class: { configurable: true },Events: { configurable: true } }; | |
| 3687 | ||
| 3688 | Framework7.prototype.initData = function initData () { | |
| 3689 | var app = this; | |
| 3690 | ||
| 3691 | // Data | |
| 3692 | app.data = {}; | |
| 3693 | if (app.params.data && typeof app.params.data === 'function') { | |
| 3694 | Utils.extend(app.data, app.params.data.bind(app)()); | |
| 3695 | } else if (app.params.data) { | |
| 3696 | Utils.extend(app.data, app.params.data); | |
| 3697 | } | |
| 3698 | // Methods | |
| 3699 | app.methods = {}; | |
| 3700 | if (app.params.methods) { | |
| 3701 | Object.keys(app.params.methods).forEach(function (methodName) { | |
| 3702 | if (typeof app.params.methods[methodName] === 'function') { | |
| 3703 | app.methods[methodName] = app.params.methods[methodName].bind(app); | |
| 3704 | } else { | |
| 3705 | app.methods[methodName] = app.params.methods[methodName]; | |
| 3706 | } | |
| 3707 | }); | |
| 3708 | } | |
| 3709 | }; | |
| 3710 | ||
| 5d51ea26 DC |
3711 | Framework7.prototype.enableAutoDarkTheme = function enableAutoDarkTheme () { |
| 3712 | if (!win.matchMedia) { return; } | |
| 3713 | var app = this; | |
| 3714 | var html = doc.querySelector('html'); | |
| 3715 | if (app.mq.dark && app.mq.light) { | |
| 3716 | app.mq.dark.addListener(app.colorSchemeListener); | |
| 3717 | app.mq.light.addListener(app.colorSchemeListener); | |
| 3718 | } | |
| 3719 | if (app.mq.dark && app.mq.dark.matches) { | |
| 3720 | html.classList.add('theme-dark'); | |
| 3721 | } else if (app.mq.light && app.mq.light.matches) { | |
| 3722 | html.classList.remove('theme-dark'); | |
| 3723 | } | |
| 3724 | }; | |
| 3725 | ||
| 3726 | Framework7.prototype.disableAutoDarkTheme = function disableAutoDarkTheme () { | |
| 3727 | if (!win.matchMedia) { return; } | |
| 3728 | var app = this; | |
| 3729 | if (app.mq.dark) { app.mq.dark.removeListener(app.colorSchemeListener); } | |
| 3730 | if (app.mq.light) { app.mq.light.removeListener(app.colorSchemeListener); } | |
| 3731 | }; | |
| 3732 | ||
| 5309fbda DC |
3733 | Framework7.prototype.init = function init () { |
| 3734 | var app = this; | |
| 3735 | if (app.initialized) { return app; } | |
| 3736 | ||
| 3737 | app.root.addClass('framework7-initializing'); | |
| 3738 | ||
| 3739 | // RTL attr | |
| 3740 | if (app.rtl) { | |
| 3741 | $('html').attr('dir', 'rtl'); | |
| 3742 | } | |
| 3743 | ||
| 5d51ea26 DC |
3744 | // Auto Dark Theme |
| 3745 | if (app.params.autoDarkTheme) { | |
| 3746 | app.enableAutoDarkTheme(); | |
| 3747 | } | |
| 3748 | ||
| 5309fbda DC |
3749 | // Root class |
| 3750 | app.root.addClass('framework7-root'); | |
| 3751 | ||
| 3752 | // Theme class | |
| 3753 | $('html').removeClass('ios md').addClass(app.theme); | |
| 3754 | ||
| 3755 | // Init class | |
| 3756 | Utils.nextFrame(function () { | |
| 3757 | app.root.removeClass('framework7-initializing'); | |
| 3758 | }); | |
| 3759 | // Emit, init other modules | |
| 3760 | app.initialized = true; | |
| 3761 | app.emit('init'); | |
| 3762 | ||
| 3763 | return app; | |
| 3764 | }; | |
| 3765 | ||
| 3766 | // eslint-disable-next-line | |
| 5d51ea26 | 3767 | Framework7.prototype.loadModule = function loadModule () { |
| 5309fbda DC |
3768 | var args = [], len = arguments.length; |
| 3769 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 3770 | ||
| 3771 | return Framework7.loadModule.apply(Framework7, args); | |
| 3772 | }; | |
| 3773 | ||
| 3774 | // eslint-disable-next-line | |
| 3775 | Framework7.prototype.loadModules = function loadModules () { | |
| 3776 | var args = [], len = arguments.length; | |
| 3777 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 3778 | ||
| 3779 | return Framework7.loadModules.apply(Framework7, args); | |
| 3780 | }; | |
| 3781 | ||
| 3782 | Framework7.prototype.getVnodeHooks = function getVnodeHooks (hook, id) { | |
| 3783 | var app = this; | |
| 3784 | if (!app.vnodeHooks || !app.vnodeHooks[hook]) { return []; } | |
| 3785 | return app.vnodeHooks[hook][id] || []; | |
| 3786 | }; | |
| 3787 | ||
| 3788 | // eslint-disable-next-line | |
| 3789 | prototypeAccessors.$.get = function () { | |
| 3790 | return $; | |
| 3791 | }; | |
| 3792 | // eslint-disable-next-line | |
| 3793 | prototypeAccessors.t7.get = function () { | |
| 3794 | return Template7; | |
| 3795 | }; | |
| 3796 | ||
| 3797 | staticAccessors.Dom7.get = function () { | |
| 3798 | return $; | |
| 3799 | }; | |
| 3800 | ||
| 3801 | staticAccessors.$.get = function () { | |
| 3802 | return $; | |
| 3803 | }; | |
| 3804 | ||
| 3805 | staticAccessors.Template7.get = function () { | |
| 3806 | return Template7; | |
| 3807 | }; | |
| 3808 | ||
| 3809 | staticAccessors.Class.get = function () { | |
| 5d51ea26 | 3810 | return Framework7Class; |
| 5309fbda DC |
3811 | }; |
| 3812 | ||
| 3813 | staticAccessors.Events.get = function () { | |
| 3814 | return EventsClass; | |
| 3815 | }; | |
| 3816 | ||
| 3817 | Object.defineProperties( Framework7.prototype, prototypeAccessors ); | |
| 3818 | Object.defineProperties( Framework7, staticAccessors ); | |
| 3819 | ||
| 3820 | return Framework7; | |
| 3821 | }(Framework7Class)); | |
| 3822 | ||
| 3823 | Framework7.ModalMethods = ModalMethods; | |
| 3824 | Framework7.ConstructorMethods = ConstructorMethods; | |
| 3825 | ||
| 3826 | Framework7.loadModule = loadModule; | |
| 3827 | Framework7.loadModules = function loadModules(modules) { | |
| 3828 | return Promise.all(modules.map(function (module) { return Framework7.loadModule(module); })); | |
| 3829 | }; | |
| 3830 | ||
| 3831 | var DeviceModule = { | |
| 3832 | name: 'device', | |
| 3833 | proto: { | |
| 3834 | device: Device, | |
| 3835 | }, | |
| 3836 | static: { | |
| 3837 | device: Device, | |
| 3838 | }, | |
| 3839 | on: { | |
| 3840 | init: function init() { | |
| 3841 | var classNames = []; | |
| 3842 | var html = doc.querySelector('html'); | |
| 3843 | var metaStatusbar = doc.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]'); | |
| 3844 | if (!html) { return; } | |
| 3845 | if (Device.standalone && Device.ios && metaStatusbar && metaStatusbar.content === 'black-translucent') { | |
| 3846 | classNames.push('device-full-viewport'); | |
| 3847 | } | |
| 3848 | ||
| 3849 | // Pixel Ratio | |
| 3850 | classNames.push(("device-pixel-ratio-" + (Math.floor(Device.pixelRatio)))); | |
| 3851 | if (Device.pixelRatio >= 2) { | |
| 3852 | classNames.push('device-retina'); | |
| 3853 | } | |
| 3854 | // OS classes | |
| 3855 | if (Device.os) { | |
| 3856 | classNames.push( | |
| 3857 | ("device-" + (Device.os)), | |
| 3858 | ("device-" + (Device.os) + "-" + (Device.osVersion.split('.')[0])), | |
| 3859 | ("device-" + (Device.os) + "-" + (Device.osVersion.replace(/\./g, '-'))) | |
| 3860 | ); | |
| 3861 | if (Device.os === 'ios') { | |
| 3862 | var major = parseInt(Device.osVersion.split('.')[0], 10); | |
| 3863 | for (var i = major - 1; i >= 6; i -= 1) { | |
| 3864 | classNames.push(("device-ios-gt-" + i)); | |
| 3865 | } | |
| 3866 | if (Device.iphoneX) { | |
| 3867 | classNames.push('device-iphone-x'); | |
| 3868 | } | |
| 3869 | } | |
| 3870 | } else if (Device.desktop) { | |
| 3871 | classNames.push('device-desktop'); | |
| 3872 | if (Device.macos) { classNames.push('device-macos'); } | |
| 3873 | else if (Device.windows) { classNames.push('device-windows'); } | |
| 3874 | } | |
| 3875 | if (Device.cordova || Device.phonegap) { | |
| 3876 | classNames.push('device-cordova'); | |
| 3877 | } | |
| 3878 | ||
| 3879 | // Add html classes | |
| 3880 | classNames.forEach(function (className) { | |
| 3881 | html.classList.add(className); | |
| 3882 | }); | |
| 3883 | }, | |
| 3884 | }, | |
| 3885 | }; | |
| 3886 | ||
| 5309fbda DC |
3887 | var SupportModule = { |
| 3888 | name: 'support', | |
| 3889 | proto: { | |
| 3890 | support: Support, | |
| 3891 | }, | |
| 3892 | static: { | |
| 3893 | support: Support, | |
| 3894 | }, | |
| 3895 | on: { | |
| 3896 | init: function init() { | |
| 3897 | var html = doc.querySelector('html'); | |
| 3898 | if (!html) { return; } | |
| 3899 | var classNames = []; | |
| 3900 | // Add html classes | |
| 3901 | classNames.forEach(function (className) { | |
| 3902 | html.classList.add(className); | |
| 3903 | }); | |
| 3904 | }, | |
| 3905 | }, | |
| 3906 | }; | |
| 3907 | ||
| 3908 | var UtilsModule = { | |
| 3909 | name: 'utils', | |
| 3910 | proto: { | |
| 3911 | utils: Utils, | |
| 3912 | }, | |
| 3913 | static: { | |
| 3914 | utils: Utils, | |
| 3915 | }, | |
| 3916 | }; | |
| 3917 | ||
| 3918 | var ResizeModule = { | |
| 3919 | name: 'resize', | |
| 3920 | instance: { | |
| 3921 | getSize: function getSize() { | |
| 3922 | var app = this; | |
| 3923 | if (!app.root[0]) { return { width: 0, height: 0, left: 0, top: 0 }; } | |
| 3924 | var offset = app.root.offset(); | |
| 3925 | var ref = [app.root[0].offsetWidth, app.root[0].offsetHeight, offset.left, offset.top]; | |
| 3926 | var width = ref[0]; | |
| 3927 | var height = ref[1]; | |
| 3928 | var left = ref[2]; | |
| 3929 | var top = ref[3]; | |
| 3930 | app.width = width; | |
| 3931 | app.height = height; | |
| 3932 | app.left = left; | |
| 3933 | app.top = top; | |
| 3934 | return { width: width, height: height, left: left, top: top }; | |
| 3935 | }, | |
| 3936 | }, | |
| 3937 | on: { | |
| 3938 | init: function init() { | |
| 3939 | var app = this; | |
| 3940 | ||
| 3941 | // Get Size | |
| 3942 | app.getSize(); | |
| 3943 | ||
| 3944 | // Emit resize | |
| 3945 | win.addEventListener('resize', function () { | |
| 3946 | app.emit('resize'); | |
| 3947 | }, false); | |
| 3948 | ||
| 3949 | // Emit orientationchange | |
| 3950 | win.addEventListener('orientationchange', function () { | |
| 3951 | app.emit('orientationchange'); | |
| 3952 | }); | |
| 3953 | }, | |
| 3954 | orientationchange: function orientationchange() { | |
| 3955 | var app = this; | |
| 5309fbda DC |
3956 | // Fix iPad weird body scroll |
| 3957 | if (app.device.ipad) { | |
| 3958 | doc.body.scrollLeft = 0; | |
| 3959 | setTimeout(function () { | |
| 3960 | doc.body.scrollLeft = 0; | |
| 3961 | }, 0); | |
| 3962 | } | |
| 3963 | }, | |
| 3964 | resize: function resize() { | |
| 3965 | var app = this; | |
| 3966 | app.getSize(); | |
| 3967 | }, | |
| 3968 | }, | |
| 3969 | }; | |
| 3970 | ||
| 3971 | var globals = {}; | |
| 3972 | var jsonpRequests = 0; | |
| 3973 | ||
| 3974 | function Request(requestOptions) { | |
| 3975 | var globalsNoCallbacks = Utils.extend({}, globals); | |
| 3976 | ('beforeCreate beforeOpen beforeSend error complete success statusCode').split(' ').forEach(function (callbackName) { | |
| 3977 | delete globalsNoCallbacks[callbackName]; | |
| 3978 | }); | |
| 3979 | var defaults = Utils.extend({ | |
| 3980 | url: win.location.toString(), | |
| 3981 | method: 'GET', | |
| 3982 | data: false, | |
| 3983 | async: true, | |
| 3984 | cache: true, | |
| 3985 | user: '', | |
| 3986 | password: '', | |
| 3987 | headers: {}, | |
| 3988 | xhrFields: {}, | |
| 3989 | statusCode: {}, | |
| 3990 | processData: true, | |
| 3991 | dataType: 'text', | |
| 3992 | contentType: 'application/x-www-form-urlencoded', | |
| 3993 | timeout: 0, | |
| 3994 | }, globalsNoCallbacks); | |
| 3995 | ||
| 3996 | var options = Utils.extend({}, defaults, requestOptions); | |
| 3997 | var proceedRequest; | |
| 3998 | ||
| 3999 | // Function to run XHR callbacks and events | |
| 4000 | function fireCallback(callbackName) { | |
| 4001 | var data = [], len = arguments.length - 1; | |
| 4002 | while ( len-- > 0 ) data[ len ] = arguments[ len + 1 ]; | |
| 4003 | ||
| 4004 | /* | |
| 4005 | Callbacks: | |
| 4006 | beforeCreate (options), | |
| 4007 | beforeOpen (xhr, options), | |
| 4008 | beforeSend (xhr, options), | |
| 4009 | error (xhr, status), | |
| 4010 | complete (xhr, stautus), | |
| 4011 | success (response, status, xhr), | |
| 4012 | statusCode () | |
| 4013 | */ | |
| 4014 | var globalCallbackValue; | |
| 4015 | var optionCallbackValue; | |
| 4016 | if (globals[callbackName]) { | |
| 4017 | globalCallbackValue = globals[callbackName].apply(globals, data); | |
| 4018 | } | |
| 4019 | if (options[callbackName]) { | |
| 4020 | optionCallbackValue = options[callbackName].apply(options, data); | |
| 4021 | } | |
| 4022 | if (typeof globalCallbackValue !== 'boolean') { globalCallbackValue = true; } | |
| 4023 | if (typeof optionCallbackValue !== 'boolean') { optionCallbackValue = true; } | |
| 4024 | return (globalCallbackValue && optionCallbackValue); | |
| 4025 | } | |
| 4026 | ||
| 4027 | // Before create callback | |
| 4028 | proceedRequest = fireCallback('beforeCreate', options); | |
| 4029 | if (proceedRequest === false) { return undefined; } | |
| 4030 | ||
| 4031 | // For jQuery guys | |
| 4032 | if (options.type) { options.method = options.type; } | |
| 4033 | ||
| 4034 | // Parameters Prefix | |
| 4035 | var paramsPrefix = options.url.indexOf('?') >= 0 ? '&' : '?'; | |
| 4036 | ||
| 4037 | // UC method | |
| 4038 | var method = options.method.toUpperCase(); | |
| 4039 | ||
| 4040 | // Data to modify GET URL | |
| 4041 | if ((method === 'GET' || method === 'HEAD' || method === 'OPTIONS' || method === 'DELETE') && options.data) { | |
| 4042 | var stringData; | |
| 4043 | if (typeof options.data === 'string') { | |
| 4044 | // Should be key=value string | |
| 4045 | if (options.data.indexOf('?') >= 0) { stringData = options.data.split('?')[1]; } | |
| 4046 | else { stringData = options.data; } | |
| 4047 | } else { | |
| 4048 | // Should be key=value object | |
| 4049 | stringData = Utils.serializeObject(options.data); | |
| 4050 | } | |
| 4051 | if (stringData.length) { | |
| 4052 | options.url += paramsPrefix + stringData; | |
| 4053 | if (paramsPrefix === '?') { paramsPrefix = '&'; } | |
| 4054 | } | |
| 4055 | } | |
| 4056 | ||
| 4057 | // JSONP | |
| 4058 | if (options.dataType === 'json' && options.url.indexOf('callback=') >= 0) { | |
| 4059 | var callbackName = "f7jsonp_" + (Date.now() + ((jsonpRequests += 1))); | |
| 4060 | var abortTimeout; | |
| 4061 | var callbackSplit = options.url.split('callback='); | |
| 4062 | var requestUrl = (callbackSplit[0]) + "callback=" + callbackName; | |
| 4063 | if (callbackSplit[1].indexOf('&') >= 0) { | |
| 4064 | var addVars = callbackSplit[1].split('&').filter(function (el) { return el.indexOf('=') > 0; }).join('&'); | |
| 4065 | if (addVars.length > 0) { requestUrl += "&" + addVars; } | |
| 4066 | } | |
| 4067 | ||
| 4068 | // Create script | |
| 4069 | var script = doc.createElement('script'); | |
| 4070 | script.type = 'text/javascript'; | |
| 4071 | script.onerror = function onerror() { | |
| 4072 | clearTimeout(abortTimeout); | |
| 4073 | fireCallback('error', null, 'scripterror'); | |
| 4074 | fireCallback('complete', null, 'scripterror'); | |
| 4075 | }; | |
| 4076 | script.src = requestUrl; | |
| 4077 | ||
| 4078 | // Handler | |
| 4079 | win[callbackName] = function jsonpCallback(data) { | |
| 4080 | clearTimeout(abortTimeout); | |
| 4081 | fireCallback('success', data); | |
| 4082 | script.parentNode.removeChild(script); | |
| 4083 | script = null; | |
| 4084 | delete win[callbackName]; | |
| 4085 | }; | |
| 4086 | doc.querySelector('head').appendChild(script); | |
| 4087 | ||
| 4088 | if (options.timeout > 0) { | |
| 4089 | abortTimeout = setTimeout(function () { | |
| 4090 | script.parentNode.removeChild(script); | |
| 4091 | script = null; | |
| 4092 | fireCallback('error', null, 'timeout'); | |
| 4093 | }, options.timeout); | |
| 4094 | } | |
| 4095 | ||
| 4096 | return undefined; | |
| 4097 | } | |
| 4098 | ||
| 4099 | // Cache for GET/HEAD requests | |
| 4100 | if (method === 'GET' || method === 'HEAD' || method === 'OPTIONS' || method === 'DELETE') { | |
| 4101 | if (options.cache === false) { | |
| 4102 | options.url += paramsPrefix + "_nocache" + (Date.now()); | |
| 4103 | } | |
| 4104 | } | |
| 4105 | ||
| 4106 | // Create XHR | |
| 4107 | var xhr = new XMLHttpRequest(); | |
| 4108 | ||
| 4109 | // Save Request URL | |
| 4110 | xhr.requestUrl = options.url; | |
| 4111 | xhr.requestParameters = options; | |
| 4112 | ||
| 4113 | // Before open callback | |
| 4114 | proceedRequest = fireCallback('beforeOpen', xhr, options); | |
| 4115 | if (proceedRequest === false) { return xhr; } | |
| 4116 | ||
| 4117 | // Open XHR | |
| 4118 | xhr.open(method, options.url, options.async, options.user, options.password); | |
| 4119 | ||
| 4120 | // Create POST Data | |
| 4121 | var postData = null; | |
| 4122 | ||
| 4123 | if ((method === 'POST' || method === 'PUT' || method === 'PATCH') && options.data) { | |
| 4124 | if (options.processData) { | |
| 4125 | var postDataInstances = [ArrayBuffer, Blob, Document, FormData]; | |
| 4126 | // Post Data | |
| 4127 | if (postDataInstances.indexOf(options.data.constructor) >= 0) { | |
| 4128 | postData = options.data; | |
| 4129 | } else { | |
| 4130 | // POST Headers | |
| 4131 | var boundary = "---------------------------" + (Date.now().toString(16)); | |
| 4132 | ||
| 4133 | if (options.contentType === 'multipart/form-data') { | |
| 4134 | xhr.setRequestHeader('Content-Type', ("multipart/form-data; boundary=" + boundary)); | |
| 4135 | } else { | |
| 4136 | xhr.setRequestHeader('Content-Type', options.contentType); | |
| 4137 | } | |
| 4138 | postData = ''; | |
| 4139 | var data$1 = Utils.serializeObject(options.data); | |
| 4140 | if (options.contentType === 'multipart/form-data') { | |
| 4141 | data$1 = data$1.split('&'); | |
| 4142 | var newData = []; | |
| 4143 | for (var i = 0; i < data$1.length; i += 1) { | |
| 4144 | newData.push(("Content-Disposition: form-data; name=\"" + (data$1[i].split('=')[0]) + "\"\r\n\r\n" + (data$1[i].split('=')[1]) + "\r\n")); | |
| 4145 | } | |
| 4146 | postData = "--" + boundary + "\r\n" + (newData.join(("--" + boundary + "\r\n"))) + "--" + boundary + "--\r\n"; | |
| 4147 | } else if (options.contentType === 'application/json') { | |
| 4148 | postData = JSON.stringify(options.data); | |
| 4149 | } else { | |
| 4150 | postData = data$1; | |
| 4151 | } | |
| 4152 | } | |
| 4153 | } else { | |
| 4154 | postData = options.data; | |
| 4155 | xhr.setRequestHeader('Content-Type', options.contentType); | |
| 4156 | } | |
| 4157 | } | |
| 5d51ea26 DC |
4158 | if (options.dataType === 'json' && (!options.headers || !options.headers.Accept)) { |
| 4159 | xhr.setRequestHeader('Accept', 'application/json'); | |
| 4160 | } | |
| 5309fbda DC |
4161 | |
| 4162 | // Additional headers | |
| 4163 | if (options.headers) { | |
| 4164 | Object.keys(options.headers).forEach(function (headerName) { | |
| 4165 | xhr.setRequestHeader(headerName, options.headers[headerName]); | |
| 4166 | }); | |
| 4167 | } | |
| 4168 | ||
| 4169 | // Check for crossDomain | |
| 4170 | if (typeof options.crossDomain === 'undefined') { | |
| 4171 | // eslint-disable-next-line | |
| 4172 | options.crossDomain = /^([\w-]+:)?\/\/([^\/]+)/.test(options.url) && RegExp.$2 !== win.location.host; | |
| 4173 | } | |
| 4174 | ||
| 4175 | if (!options.crossDomain) { | |
| 4176 | xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); | |
| 4177 | } | |
| 4178 | ||
| 4179 | if (options.xhrFields) { | |
| 4180 | Utils.extend(xhr, options.xhrFields); | |
| 4181 | } | |
| 4182 | ||
| 4183 | var xhrTimeout; | |
| 4184 | ||
| 4185 | // Handle XHR | |
| 4186 | xhr.onload = function onload() { | |
| 4187 | if (xhrTimeout) { clearTimeout(xhrTimeout); } | |
| 4188 | if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) { | |
| 4189 | var responseData; | |
| 4190 | if (options.dataType === 'json') { | |
| 4191 | var parseError; | |
| 4192 | try { | |
| 4193 | responseData = JSON.parse(xhr.responseText); | |
| 4194 | } catch (err) { | |
| 4195 | parseError = true; | |
| 4196 | } | |
| 4197 | if (!parseError) { | |
| 4198 | fireCallback('success', responseData, xhr.status, xhr); | |
| 4199 | } else { | |
| 4200 | fireCallback('error', xhr, 'parseerror'); | |
| 4201 | } | |
| 4202 | } else { | |
| 4203 | responseData = xhr.responseType === 'text' || xhr.responseType === '' ? xhr.responseText : xhr.response; | |
| 4204 | fireCallback('success', responseData, xhr.status, xhr); | |
| 4205 | } | |
| 4206 | } else { | |
| 4207 | fireCallback('error', xhr, xhr.status); | |
| 4208 | } | |
| 4209 | if (options.statusCode) { | |
| 4210 | if (globals.statusCode && globals.statusCode[xhr.status]) { globals.statusCode[xhr.status](xhr); } | |
| 4211 | if (options.statusCode[xhr.status]) { options.statusCode[xhr.status](xhr); } | |
| 4212 | } | |
| 4213 | fireCallback('complete', xhr, xhr.status); | |
| 4214 | }; | |
| 4215 | ||
| 4216 | xhr.onerror = function onerror() { | |
| 4217 | if (xhrTimeout) { clearTimeout(xhrTimeout); } | |
| 4218 | fireCallback('error', xhr, xhr.status); | |
| 4219 | fireCallback('complete', xhr, 'error'); | |
| 4220 | }; | |
| 4221 | ||
| 4222 | // Timeout | |
| 4223 | if (options.timeout > 0) { | |
| 4224 | xhr.onabort = function onabort() { | |
| 4225 | if (xhrTimeout) { clearTimeout(xhrTimeout); } | |
| 4226 | }; | |
| 4227 | xhrTimeout = setTimeout(function () { | |
| 4228 | xhr.abort(); | |
| 4229 | fireCallback('error', xhr, 'timeout'); | |
| 4230 | fireCallback('complete', xhr, 'timeout'); | |
| 4231 | }, options.timeout); | |
| 4232 | } | |
| 4233 | ||
| 4234 | // Ajax start callback | |
| 4235 | proceedRequest = fireCallback('beforeSend', xhr, options); | |
| 4236 | if (proceedRequest === false) { return xhr; } | |
| 4237 | ||
| 4238 | // Send XHR | |
| 4239 | xhr.send(postData); | |
| 4240 | ||
| 4241 | // Return XHR object | |
| 4242 | return xhr; | |
| 4243 | } | |
| 4244 | function RequestShortcut(method) { | |
| 4245 | var assign, assign$1; | |
| 4246 | ||
| 4247 | var args = [], len = arguments.length - 1; | |
| 4248 | while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | |
| 4249 | var ref = []; | |
| 4250 | var url = ref[0]; | |
| 4251 | var data = ref[1]; | |
| 4252 | var success = ref[2]; | |
| 4253 | var error = ref[3]; | |
| 4254 | var dataType = ref[4]; | |
| 4255 | if (typeof args[1] === 'function') { | |
| 4256 | (assign = args, url = assign[0], success = assign[1], error = assign[2], dataType = assign[3]); | |
| 4257 | } else { | |
| 4258 | (assign$1 = args, url = assign$1[0], data = assign$1[1], success = assign$1[2], error = assign$1[3], dataType = assign$1[4]); | |
| 4259 | } | |
| 4260 | [success, error].forEach(function (callback) { | |
| 4261 | if (typeof callback === 'string') { | |
| 4262 | dataType = callback; | |
| 4263 | if (callback === success) { success = undefined; } | |
| 4264 | else { error = undefined; } | |
| 4265 | } | |
| 4266 | }); | |
| 4267 | dataType = dataType || (method === 'json' || method === 'postJSON' ? 'json' : undefined); | |
| 4268 | var requestOptions = { | |
| 4269 | url: url, | |
| 4270 | method: method === 'post' || method === 'postJSON' ? 'POST' : 'GET', | |
| 4271 | data: data, | |
| 4272 | success: success, | |
| 4273 | error: error, | |
| 4274 | dataType: dataType, | |
| 4275 | }; | |
| 4276 | if (method === 'postJSON') { | |
| 4277 | Utils.extend(requestOptions, { | |
| 4278 | contentType: 'application/json', | |
| 4279 | processData: false, | |
| 4280 | crossDomain: true, | |
| 4281 | data: typeof data === 'string' ? data : JSON.stringify(data), | |
| 4282 | }); | |
| 4283 | } | |
| 4284 | return Request(requestOptions); | |
| 4285 | } | |
| 4286 | function RequestShortcutPromise(method) { | |
| 4287 | var args = [], len = arguments.length - 1; | |
| 4288 | while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | |
| 4289 | ||
| 4290 | var url = args[0]; | |
| 4291 | var data = args[1]; | |
| 4292 | var dataType = args[2]; | |
| 4293 | return new Promise(function (resolve, reject) { | |
| 4294 | RequestShortcut( | |
| 4295 | method, | |
| 4296 | url, | |
| 4297 | data, | |
| 4298 | function (response) { | |
| 4299 | resolve(response); | |
| 4300 | }, | |
| 4301 | function (xhr, status) { | |
| 4302 | reject(status); | |
| 4303 | }, | |
| 4304 | dataType | |
| 4305 | ); | |
| 4306 | }); | |
| 4307 | } | |
| 4308 | Object.assign(Request, { | |
| 4309 | get: function () { | |
| 4310 | var args = [], len = arguments.length; | |
| 4311 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 4312 | ||
| 4313 | return RequestShortcut.apply(void 0, [ 'get' ].concat( args )); | |
| 4314 | }, | |
| 4315 | post: function () { | |
| 4316 | var args = [], len = arguments.length; | |
| 4317 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 4318 | ||
| 4319 | return RequestShortcut.apply(void 0, [ 'post' ].concat( args )); | |
| 4320 | }, | |
| 4321 | json: function () { | |
| 4322 | var args = [], len = arguments.length; | |
| 4323 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 4324 | ||
| 4325 | return RequestShortcut.apply(void 0, [ 'json' ].concat( args )); | |
| 4326 | }, | |
| 4327 | getJSON: function () { | |
| 4328 | var args = [], len = arguments.length; | |
| 4329 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 4330 | ||
| 4331 | return RequestShortcut.apply(void 0, [ 'json' ].concat( args )); | |
| 4332 | }, | |
| 4333 | postJSON: function () { | |
| 4334 | var args = [], len = arguments.length; | |
| 4335 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 4336 | ||
| 4337 | return RequestShortcut.apply(void 0, [ 'postJSON' ].concat( args )); | |
| 4338 | }, | |
| 4339 | }); | |
| 4340 | ||
| 4341 | Request.promise = function requestPromise(requestOptions) { | |
| 4342 | return new Promise(function (resolve, reject) { | |
| 4343 | Request(Object.assign(requestOptions, { | |
| 4344 | success: function success(data) { | |
| 4345 | resolve(data); | |
| 4346 | }, | |
| 4347 | error: function error(xhr, status) { | |
| 4348 | reject(status); | |
| 4349 | }, | |
| 4350 | })); | |
| 4351 | }); | |
| 4352 | }; | |
| 4353 | Object.assign(Request.promise, { | |
| 4354 | get: function () { | |
| 4355 | var args = [], len = arguments.length; | |
| 4356 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 4357 | ||
| 4358 | return RequestShortcutPromise.apply(void 0, [ 'get' ].concat( args )); | |
| 4359 | }, | |
| 4360 | post: function () { | |
| 4361 | var args = [], len = arguments.length; | |
| 4362 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 4363 | ||
| 4364 | return RequestShortcutPromise.apply(void 0, [ 'post' ].concat( args )); | |
| 4365 | }, | |
| 4366 | json: function () { | |
| 4367 | var args = [], len = arguments.length; | |
| 4368 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 4369 | ||
| 4370 | return RequestShortcutPromise.apply(void 0, [ 'json' ].concat( args )); | |
| 4371 | }, | |
| 4372 | getJSON: function () { | |
| 4373 | var args = [], len = arguments.length; | |
| 4374 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 4375 | ||
| 4376 | return RequestShortcutPromise.apply(void 0, [ 'json' ].concat( args )); | |
| 4377 | }, | |
| 4378 | postJSON: function () { | |
| 4379 | var args = [], len = arguments.length; | |
| 4380 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 4381 | ||
| 4382 | return RequestShortcutPromise.apply(void 0, [ 'postJSON' ].concat( args )); | |
| 4383 | }, | |
| 4384 | }); | |
| 4385 | ||
| 4386 | Request.setup = function setup(options) { | |
| 4387 | if (options.type && !options.method) { | |
| 4388 | Utils.extend(options, { method: options.type }); | |
| 4389 | } | |
| 4390 | Utils.extend(globals, options); | |
| 4391 | }; | |
| 4392 | ||
| 4393 | /* eslint no-param-reassign: "off" */ | |
| 4394 | ||
| 4395 | var RequestModule = { | |
| 4396 | name: 'request', | |
| 4397 | proto: { | |
| 4398 | request: Request, | |
| 4399 | }, | |
| 4400 | static: { | |
| 4401 | request: Request, | |
| 4402 | }, | |
| 4403 | }; | |
| 4404 | ||
| 4405 | function initTouch() { | |
| 4406 | var app = this; | |
| 4407 | var params = app.params.touch; | |
| 4408 | var useRipple = params[((app.theme) + "TouchRipple")]; | |
| 4409 | ||
| 4410 | if (Device.ios && Device.webView) { | |
| 4411 | // Strange hack required for iOS 8 webview to work on inputs | |
| 4412 | win.addEventListener('touchstart', function () {}); | |
| 4413 | } | |
| 4414 | ||
| 4415 | var touchStartX; | |
| 4416 | var touchStartY; | |
| 4417 | var touchStartTime; | |
| 4418 | var targetElement; | |
| 4419 | var trackClick; | |
| 4420 | var activeSelection; | |
| 4421 | var scrollParent; | |
| 4422 | var lastClickTime; | |
| 4423 | var isMoved; | |
| 4424 | var tapHoldFired; | |
| 4425 | var tapHoldTimeout; | |
| 4426 | var preventClick; | |
| 4427 | ||
| 4428 | var activableElement; | |
| 4429 | var activeTimeout; | |
| 4430 | ||
| 4431 | var needsFastClick; | |
| 4432 | var needsFastClickTimeOut; | |
| 4433 | ||
| 4434 | var rippleWave; | |
| 4435 | var rippleTarget; | |
| 4436 | var rippleTimeout; | |
| 4437 | ||
| 4438 | function findActivableElement(el) { | |
| 4439 | var target = $(el); | |
| 4440 | var parents = target.parents(params.activeStateElements); | |
| 4441 | var activable; | |
| 4442 | if (target.is(params.activeStateElements)) { | |
| 4443 | activable = target; | |
| 4444 | } | |
| 4445 | if (parents.length > 0) { | |
| 4446 | activable = activable ? activable.add(parents) : parents; | |
| 4447 | } | |
| 5d51ea26 DC |
4448 | if (activable && activable.length > 1) { |
| 4449 | var newActivable = []; | |
| 4450 | var preventPropagation; | |
| 4451 | for (var i = 0; i < activable.length; i += 1) { | |
| 4452 | if (!preventPropagation) { | |
| 4453 | newActivable.push(activable[i]); | |
| 4454 | if (activable.eq(i).hasClass('prevent-active-state-propagation') | |
| 4455 | || activable.eq(i).hasClass('no-active-state-propagation') | |
| 4456 | ) { | |
| 4457 | preventPropagation = true; | |
| 4458 | } | |
| 4459 | } | |
| 4460 | } | |
| 4461 | activable = $(newActivable); | |
| 4462 | } | |
| 5309fbda DC |
4463 | return activable || target; |
| 4464 | } | |
| 4465 | ||
| 4466 | function isInsideScrollableViewLight(el) { | |
| 4467 | var pageContent = el.parents('.page-content'); | |
| 4468 | return pageContent.length > 0; | |
| 4469 | } | |
| 4470 | function isInsideScrollableView(el) { | |
| 4471 | var pageContent = el.parents('.page-content'); | |
| 4472 | ||
| 4473 | if (pageContent.length === 0) { | |
| 4474 | return false; | |
| 4475 | } | |
| 4476 | ||
| 4477 | // This event handler covers the "tap to stop scrolling". | |
| 4478 | if (pageContent.prop('scrollHandlerSet') !== 'yes') { | |
| 4479 | pageContent.on('scroll', function () { | |
| 4480 | clearTimeout(activeTimeout); | |
| 4481 | clearTimeout(rippleTimeout); | |
| 4482 | }); | |
| 4483 | pageContent.prop('scrollHandlerSet', 'yes'); | |
| 4484 | } | |
| 4485 | ||
| 4486 | return true; | |
| 4487 | } | |
| 4488 | function addActive() { | |
| 4489 | if (!activableElement) { return; } | |
| 4490 | activableElement.addClass('active-state'); | |
| 4491 | } | |
| 4492 | function removeActive() { | |
| 4493 | if (!activableElement) { return; } | |
| 4494 | activableElement.removeClass('active-state'); | |
| 4495 | activableElement = null; | |
| 4496 | } | |
| 4497 | function isFormElement(el) { | |
| 4498 | var nodes = ('input select textarea label').split(' '); | |
| 4499 | if (el.nodeName && nodes.indexOf(el.nodeName.toLowerCase()) >= 0) { return true; } | |
| 4500 | return false; | |
| 4501 | } | |
| 4502 | function androidNeedsBlur(el) { | |
| 4503 | var noBlur = ('button input textarea select').split(' '); | |
| 4504 | if (doc.activeElement && el !== doc.activeElement && doc.activeElement !== doc.body) { | |
| 4505 | if (noBlur.indexOf(el.nodeName.toLowerCase()) >= 0) { | |
| 4506 | return false; | |
| 4507 | } | |
| 4508 | return true; | |
| 4509 | } | |
| 4510 | return false; | |
| 4511 | } | |
| 4512 | function targetNeedsFastClick(el) { | |
| 4513 | /* | |
| 4514 | if ( | |
| 4515 | Device.ios | |
| 4516 | && | |
| 4517 | ( | |
| 4518 | Device.osVersion.split('.')[0] > 9 | |
| 4519 | || | |
| 4520 | (Device.osVersion.split('.')[0] * 1 === 9 && Device.osVersion.split('.')[1] >= 1) | |
| 4521 | ) | |
| 4522 | ) { | |
| 4523 | return false; | |
| 4524 | } | |
| 4525 | */ | |
| 4526 | var $el = $(el); | |
| 4527 | if (el.nodeName.toLowerCase() === 'input' && (el.type === 'file' || el.type === 'range')) { return false; } | |
| 4528 | if (el.nodeName.toLowerCase() === 'select' && Device.android) { return false; } | |
| 4529 | if ($el.hasClass('no-fastclick') || $el.parents('.no-fastclick').length > 0) { return false; } | |
| 4530 | if (params.fastClicksExclude && $el.closest(params.fastClicksExclude).length > 0) { return false; } | |
| 4531 | ||
| 4532 | return true; | |
| 4533 | } | |
| 4534 | function targetNeedsFocus(el) { | |
| 4535 | if (doc.activeElement === el) { | |
| 4536 | return false; | |
| 4537 | } | |
| 4538 | var tag = el.nodeName.toLowerCase(); | |
| 4539 | var skipInputs = ('button checkbox file image radio submit').split(' '); | |
| 4540 | if (el.disabled || el.readOnly) { return false; } | |
| 4541 | if (tag === 'textarea') { return true; } | |
| 4542 | if (tag === 'select') { | |
| 4543 | if (Device.android) { return false; } | |
| 4544 | return true; | |
| 4545 | } | |
| 4546 | if (tag === 'input' && skipInputs.indexOf(el.type) < 0) { return true; } | |
| 4547 | return false; | |
| 4548 | } | |
| 4549 | function targetNeedsPrevent(el) { | |
| 4550 | var $el = $(el); | |
| 4551 | var prevent = true; | |
| 4552 | if ($el.is('label') || $el.parents('label').length > 0) { | |
| 4553 | if (Device.android) { | |
| 4554 | prevent = false; | |
| 4555 | } else if (Device.ios && $el.is('input')) { | |
| 4556 | prevent = true; | |
| 4557 | } else { prevent = false; } | |
| 4558 | } | |
| 4559 | return prevent; | |
| 4560 | } | |
| 4561 | ||
| 4562 | // Ripple handlers | |
| 4563 | function findRippleElement(el) { | |
| 4564 | var rippleElements = params.touchRippleElements; | |
| 4565 | var $el = $(el); | |
| 4566 | if ($el.is(rippleElements)) { | |
| 4567 | if ($el.hasClass('no-ripple')) { | |
| 4568 | return false; | |
| 4569 | } | |
| 4570 | return $el; | |
| 4571 | } | |
| 4572 | if ($el.parents(rippleElements).length > 0) { | |
| 4573 | var rippleParent = $el.parents(rippleElements).eq(0); | |
| 4574 | if (rippleParent.hasClass('no-ripple')) { | |
| 4575 | return false; | |
| 4576 | } | |
| 4577 | return rippleParent; | |
| 4578 | } | |
| 4579 | return false; | |
| 4580 | } | |
| 4581 | function createRipple($el, x, y) { | |
| 4582 | if (!$el) { return; } | |
| 4583 | rippleWave = app.touchRipple.create($el, x, y); | |
| 4584 | } | |
| 4585 | ||
| 4586 | function removeRipple() { | |
| 4587 | if (!rippleWave) { return; } | |
| 4588 | rippleWave.remove(); | |
| 4589 | rippleWave = undefined; | |
| 4590 | rippleTarget = undefined; | |
| 4591 | } | |
| 4592 | function rippleTouchStart(el) { | |
| 4593 | rippleTarget = findRippleElement(el); | |
| 4594 | if (!rippleTarget || rippleTarget.length === 0) { | |
| 4595 | rippleTarget = undefined; | |
| 4596 | return; | |
| 4597 | } | |
| 4598 | var inScrollable = params.fastClicks | |
| 4599 | ? isInsideScrollableView(rippleTarget) | |
| 4600 | : isInsideScrollableViewLight(rippleTarget); | |
| 4601 | ||
| 4602 | if (!inScrollable) { | |
| 5d51ea26 | 4603 | removeRipple(); |
| 5309fbda DC |
4604 | createRipple(rippleTarget, touchStartX, touchStartY); |
| 4605 | } else { | |
| 5d51ea26 | 4606 | clearTimeout(rippleTimeout); |
| 5309fbda | 4607 | rippleTimeout = setTimeout(function () { |
| 5d51ea26 | 4608 | removeRipple(); |
| 5309fbda DC |
4609 | createRipple(rippleTarget, touchStartX, touchStartY); |
| 4610 | }, 80); | |
| 4611 | } | |
| 4612 | } | |
| 4613 | function rippleTouchMove() { | |
| 4614 | clearTimeout(rippleTimeout); | |
| 4615 | removeRipple(); | |
| 4616 | } | |
| 4617 | function rippleTouchEnd() { | |
| 5d51ea26 | 4618 | if (!rippleWave && rippleTarget && !isMoved) { |
| 5309fbda DC |
4619 | clearTimeout(rippleTimeout); |
| 4620 | createRipple(rippleTarget, touchStartX, touchStartY); | |
| 4621 | setTimeout(removeRipple, 0); | |
| 4622 | } else { | |
| 4623 | removeRipple(); | |
| 4624 | } | |
| 4625 | } | |
| 4626 | ||
| 4627 | // Mouse Handlers | |
| 4628 | function handleMouseDown(e) { | |
| 4629 | findActivableElement(e.target).addClass('active-state'); | |
| 4630 | if ('which' in e && e.which === 3) { | |
| 4631 | setTimeout(function () { | |
| 4632 | $('.active-state').removeClass('active-state'); | |
| 4633 | }, 0); | |
| 4634 | } | |
| 4635 | if (useRipple) { | |
| 4636 | touchStartX = e.pageX; | |
| 4637 | touchStartY = e.pageY; | |
| 4638 | rippleTouchStart(e.target, e.pageX, e.pageY); | |
| 4639 | } | |
| 4640 | } | |
| 4641 | function handleMouseMove() { | |
| 4642 | $('.active-state').removeClass('active-state'); | |
| 4643 | if (useRipple) { | |
| 4644 | rippleTouchMove(); | |
| 4645 | } | |
| 4646 | } | |
| 4647 | function handleMouseUp() { | |
| 4648 | $('.active-state').removeClass('active-state'); | |
| 4649 | if (useRipple) { | |
| 4650 | rippleTouchEnd(); | |
| 4651 | } | |
| 4652 | } | |
| 4653 | ||
| 4654 | // Send Click | |
| 4655 | function sendClick(e) { | |
| 4656 | var touch = e.changedTouches[0]; | |
| 4657 | var evt = doc.createEvent('MouseEvents'); | |
| 4658 | var eventType = 'click'; | |
| 4659 | if (Device.android && targetElement.nodeName.toLowerCase() === 'select') { | |
| 4660 | eventType = 'mousedown'; | |
| 4661 | } | |
| 4662 | evt.initMouseEvent(eventType, true, true, win, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); | |
| 4663 | evt.forwardedTouchEvent = true; | |
| 4664 | ||
| 4665 | if (app.device.ios && win.navigator.standalone) { | |
| 4666 | // Fix the issue happens in iOS home screen apps where the wrong element is selected during a momentum scroll. | |
| 4667 | // Upon tapping, we give the scrolling time to stop, then we grab the element based where the user tapped. | |
| 4668 | setTimeout(function () { | |
| 4669 | targetElement = doc.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY); | |
| 5d51ea26 DC |
4670 | if (targetElement) { |
| 4671 | targetElement.dispatchEvent(evt); | |
| 4672 | } | |
| 5309fbda DC |
4673 | }, 10); |
| 4674 | } else { | |
| 4675 | targetElement.dispatchEvent(evt); | |
| 4676 | } | |
| 4677 | } | |
| 4678 | ||
| 4679 | // Touch Handlers | |
| 4680 | function handleTouchStart(e) { | |
| 4681 | var this$1 = this; | |
| 4682 | ||
| 4683 | isMoved = false; | |
| 4684 | tapHoldFired = false; | |
| 4685 | if (e.targetTouches.length > 1) { | |
| 4686 | if (activableElement) { removeActive(); } | |
| 4687 | return true; | |
| 4688 | } | |
| 4689 | if (e.touches.length > 1 && activableElement) { | |
| 4690 | removeActive(); | |
| 4691 | } | |
| 4692 | if (params.tapHold) { | |
| 4693 | if (tapHoldTimeout) { clearTimeout(tapHoldTimeout); } | |
| 4694 | tapHoldTimeout = setTimeout(function () { | |
| 4695 | if (e && e.touches && e.touches.length > 1) { return; } | |
| 4696 | tapHoldFired = true; | |
| 4697 | e.preventDefault(); | |
| 4698 | $(e.target).trigger('taphold'); | |
| 4699 | }, params.tapHoldDelay); | |
| 4700 | } | |
| 4701 | if (needsFastClickTimeOut) { clearTimeout(needsFastClickTimeOut); } | |
| 4702 | needsFastClick = targetNeedsFastClick(e.target); | |
| 4703 | ||
| 4704 | if (!needsFastClick) { | |
| 4705 | trackClick = false; | |
| 4706 | return true; | |
| 4707 | } | |
| 4708 | if (Device.ios || (Device.android && 'getSelection' in win)) { | |
| 4709 | var selection = win.getSelection(); | |
| 4710 | if ( | |
| 4711 | selection.rangeCount | |
| 4712 | && selection.focusNode !== doc.body | |
| 4713 | && (!selection.isCollapsed || doc.activeElement === selection.focusNode) | |
| 4714 | ) { | |
| 4715 | activeSelection = true; | |
| 4716 | return true; | |
| 4717 | } | |
| 4718 | ||
| 4719 | activeSelection = false; | |
| 4720 | } | |
| 4721 | if (Device.android) { | |
| 4722 | if (androidNeedsBlur(e.target)) { | |
| 4723 | doc.activeElement.blur(); | |
| 4724 | } | |
| 4725 | } | |
| 4726 | ||
| 4727 | trackClick = true; | |
| 4728 | targetElement = e.target; | |
| 4729 | touchStartTime = (new Date()).getTime(); | |
| 4730 | touchStartX = e.targetTouches[0].pageX; | |
| 4731 | touchStartY = e.targetTouches[0].pageY; | |
| 4732 | ||
| 4733 | // Detect scroll parent | |
| 4734 | if (Device.ios) { | |
| 4735 | scrollParent = undefined; | |
| 4736 | $(targetElement).parents().each(function () { | |
| 4737 | var parent = this$1; | |
| 4738 | if (parent.scrollHeight > parent.offsetHeight && !scrollParent) { | |
| 4739 | scrollParent = parent; | |
| 4740 | scrollParent.f7ScrollTop = scrollParent.scrollTop; | |
| 4741 | } | |
| 4742 | }); | |
| 4743 | } | |
| 4744 | if ((touchStartTime - lastClickTime) < params.fastClicksDelayBetweenClicks) { | |
| 4745 | e.preventDefault(); | |
| 4746 | } | |
| 4747 | ||
| 4748 | if (params.activeState) { | |
| 4749 | activableElement = findActivableElement(targetElement); | |
| 4750 | activeTimeout = setTimeout(addActive, 0); | |
| 4751 | } | |
| 4752 | if (useRipple) { | |
| 5d51ea26 | 4753 | rippleTouchStart(targetElement); |
| 5309fbda DC |
4754 | } |
| 4755 | return true; | |
| 4756 | } | |
| 4757 | function handleTouchMove(e) { | |
| 4758 | if (!trackClick) { return; } | |
| 4759 | var distance = params.fastClicksDistanceThreshold; | |
| 4760 | if (distance) { | |
| 4761 | var pageX = e.targetTouches[0].pageX; | |
| 4762 | var pageY = e.targetTouches[0].pageY; | |
| 4763 | if (Math.abs(pageX - touchStartX) > distance || Math.abs(pageY - touchStartY) > distance) { | |
| 4764 | isMoved = true; | |
| 4765 | } | |
| 4766 | } else { | |
| 4767 | isMoved = true; | |
| 4768 | } | |
| 4769 | if (isMoved) { | |
| 4770 | trackClick = false; | |
| 4771 | targetElement = null; | |
| 4772 | isMoved = true; | |
| 4773 | if (params.tapHold) { | |
| 4774 | clearTimeout(tapHoldTimeout); | |
| 4775 | } | |
| 4776 | if (params.activeState) { | |
| 4777 | clearTimeout(activeTimeout); | |
| 4778 | removeActive(); | |
| 4779 | } | |
| 4780 | if (useRipple) { | |
| 4781 | rippleTouchMove(); | |
| 4782 | } | |
| 4783 | } | |
| 4784 | } | |
| 4785 | function handleTouchEnd(e) { | |
| 4786 | clearTimeout(activeTimeout); | |
| 4787 | clearTimeout(tapHoldTimeout); | |
| 4788 | ||
| 4789 | var touchEndTime = (new Date()).getTime(); | |
| 4790 | ||
| 4791 | if (!trackClick) { | |
| 4792 | if (!activeSelection && needsFastClick) { | |
| 4793 | if (!(Device.android && !e.cancelable) && e.cancelable) { | |
| 4794 | e.preventDefault(); | |
| 4795 | } | |
| 4796 | } | |
| 4797 | if (params.activeState) { removeActive(); } | |
| 4798 | if (useRipple) { | |
| 4799 | rippleTouchEnd(); | |
| 4800 | } | |
| 4801 | return true; | |
| 4802 | } | |
| 4803 | ||
| 4804 | if (doc.activeElement === e.target) { | |
| 4805 | if (params.activeState) { removeActive(); } | |
| 4806 | if (useRipple) { | |
| 4807 | rippleTouchEnd(); | |
| 4808 | } | |
| 4809 | return true; | |
| 4810 | } | |
| 4811 | ||
| 4812 | if (!activeSelection) { | |
| 4813 | e.preventDefault(); | |
| 4814 | } | |
| 4815 | ||
| 4816 | if ((touchEndTime - lastClickTime) < params.fastClicksDelayBetweenClicks) { | |
| 4817 | setTimeout(removeActive, 0); | |
| 4818 | if (useRipple) { | |
| 4819 | rippleTouchEnd(); | |
| 4820 | } | |
| 4821 | return true; | |
| 4822 | } | |
| 4823 | ||
| 4824 | lastClickTime = touchEndTime; | |
| 4825 | ||
| 4826 | trackClick = false; | |
| 4827 | ||
| 4828 | if (Device.ios && scrollParent) { | |
| 4829 | if (scrollParent.scrollTop !== scrollParent.f7ScrollTop) { | |
| 4830 | return false; | |
| 4831 | } | |
| 4832 | } | |
| 4833 | ||
| 4834 | // Add active-state here because, in a very fast tap, the timeout didn't | |
| 4835 | // have the chance to execute. Removing active-state in a timeout gives | |
| 4836 | // the chance to the animation execute. | |
| 4837 | if (params.activeState) { | |
| 4838 | addActive(); | |
| 4839 | setTimeout(removeActive, 0); | |
| 4840 | } | |
| 4841 | // Remove Ripple | |
| 4842 | if (useRipple) { | |
| 4843 | rippleTouchEnd(); | |
| 4844 | } | |
| 4845 | ||
| 4846 | // Trigger focus when required | |
| 4847 | if (targetNeedsFocus(targetElement)) { | |
| 4848 | if (Device.ios && Device.webView) { | |
| 4849 | targetElement.focus(); | |
| 4850 | return false; | |
| 4851 | } | |
| 4852 | ||
| 4853 | targetElement.focus(); | |
| 4854 | } | |
| 4855 | ||
| 4856 | // Blur active elements | |
| 4857 | if (doc.activeElement && targetElement !== doc.activeElement && doc.activeElement !== doc.body && targetElement.nodeName.toLowerCase() !== 'label') { | |
| 4858 | doc.activeElement.blur(); | |
| 4859 | } | |
| 4860 | ||
| 4861 | // Send click | |
| 4862 | e.preventDefault(); | |
| 4863 | if (params.tapHoldPreventClicks && tapHoldFired) { | |
| 4864 | return false; | |
| 4865 | } | |
| 4866 | sendClick(e); | |
| 4867 | return false; | |
| 4868 | } | |
| 4869 | function handleTouchCancel() { | |
| 4870 | trackClick = false; | |
| 4871 | targetElement = null; | |
| 4872 | ||
| 4873 | // Remove Active State | |
| 4874 | clearTimeout(activeTimeout); | |
| 4875 | clearTimeout(tapHoldTimeout); | |
| 4876 | if (params.activeState) { | |
| 4877 | removeActive(); | |
| 4878 | } | |
| 4879 | ||
| 4880 | // Remove Ripple | |
| 4881 | if (useRipple) { | |
| 4882 | rippleTouchEnd(); | |
| 4883 | } | |
| 4884 | } | |
| 4885 | ||
| 4886 | function handleClick(e) { | |
| 4887 | var allowClick = false; | |
| 4888 | if (trackClick) { | |
| 4889 | targetElement = null; | |
| 4890 | trackClick = false; | |
| 4891 | return true; | |
| 4892 | } | |
| 4893 | if ((e.target.type === 'submit' && e.detail === 0) || e.target.type === 'file') { | |
| 4894 | return true; | |
| 4895 | } | |
| 4896 | if (!targetElement) { | |
| 4897 | if (!isFormElement(e.target)) { | |
| 4898 | allowClick = true; | |
| 4899 | } | |
| 4900 | } | |
| 4901 | if (!needsFastClick) { | |
| 4902 | allowClick = true; | |
| 4903 | } | |
| 4904 | if (doc.activeElement === targetElement) { | |
| 4905 | allowClick = true; | |
| 4906 | } | |
| 4907 | if (e.forwardedTouchEvent) { | |
| 4908 | allowClick = true; | |
| 4909 | } | |
| 4910 | if (!e.cancelable) { | |
| 4911 | allowClick = true; | |
| 4912 | } | |
| 4913 | if (params.tapHold && params.tapHoldPreventClicks && tapHoldFired) { | |
| 4914 | allowClick = false; | |
| 4915 | } | |
| 4916 | if (!allowClick) { | |
| 4917 | e.stopImmediatePropagation(); | |
| 4918 | e.stopPropagation(); | |
| 4919 | if (targetElement) { | |
| 4920 | if (targetNeedsPrevent(targetElement) || isMoved) { | |
| 4921 | e.preventDefault(); | |
| 4922 | } | |
| 4923 | } else { | |
| 4924 | e.preventDefault(); | |
| 4925 | } | |
| 4926 | targetElement = null; | |
| 4927 | } | |
| 4928 | needsFastClickTimeOut = setTimeout(function () { | |
| 4929 | needsFastClick = false; | |
| 4930 | }, (Device.ios || Device.androidChrome ? 100 : 400)); | |
| 4931 | ||
| 4932 | if (params.tapHold) { | |
| 4933 | tapHoldTimeout = setTimeout(function () { | |
| 4934 | tapHoldFired = false; | |
| 4935 | }, (Device.ios || Device.androidChrome ? 100 : 400)); | |
| 4936 | } | |
| 4937 | ||
| 4938 | return allowClick; | |
| 4939 | } | |
| 4940 | ||
| 4941 | function handleTouchStartLight(e) { | |
| 4942 | isMoved = false; | |
| 4943 | tapHoldFired = false; | |
| 4944 | preventClick = false; | |
| 4945 | if (e.targetTouches.length > 1) { | |
| 4946 | if (activableElement) { removeActive(); } | |
| 4947 | return true; | |
| 4948 | } | |
| 4949 | if (e.touches.length > 1 && activableElement) { | |
| 4950 | removeActive(); | |
| 4951 | } | |
| 4952 | if (params.tapHold) { | |
| 4953 | if (tapHoldTimeout) { clearTimeout(tapHoldTimeout); } | |
| 4954 | tapHoldTimeout = setTimeout(function () { | |
| 4955 | if (e && e.touches && e.touches.length > 1) { return; } | |
| 4956 | tapHoldFired = true; | |
| 4957 | e.preventDefault(); | |
| 4958 | preventClick = true; | |
| 4959 | $(e.target).trigger('taphold'); | |
| 4960 | }, params.tapHoldDelay); | |
| 4961 | } | |
| 4962 | targetElement = e.target; | |
| 4963 | touchStartX = e.targetTouches[0].pageX; | |
| 4964 | touchStartY = e.targetTouches[0].pageY; | |
| 4965 | ||
| 4966 | if (params.activeState) { | |
| 4967 | activableElement = findActivableElement(targetElement); | |
| 4968 | if (!isInsideScrollableViewLight(activableElement)) { | |
| 4969 | addActive(); | |
| 4970 | } else { | |
| 4971 | activeTimeout = setTimeout(addActive, 80); | |
| 4972 | } | |
| 4973 | } | |
| 4974 | if (useRipple) { | |
| 5d51ea26 | 4975 | rippleTouchStart(targetElement); |
| 5309fbda DC |
4976 | } |
| 4977 | return true; | |
| 4978 | } | |
| 4979 | function handleTouchMoveLight(e) { | |
| 5d51ea26 DC |
4980 | var touch; |
| 4981 | var distance; | |
| 4982 | if (e.type === 'touchmove') { | |
| 4983 | touch = e.targetTouches[0]; | |
| 4984 | distance = params.touchClicksDistanceThreshold; | |
| 4985 | // if (touch && touch.touchType === 'stylus') { | |
| 4986 | // distance = 5; | |
| 4987 | // } else { | |
| 4988 | // distance = 3; | |
| 4989 | // } | |
| 4990 | } | |
| 4991 | ||
| 4992 | if (distance && touch) { | |
| 4993 | var pageX = touch.pageX; | |
| 4994 | var pageY = touch.pageY; | |
| 5309fbda DC |
4995 | if (Math.abs(pageX - touchStartX) > distance || Math.abs(pageY - touchStartY) > distance) { |
| 4996 | isMoved = true; | |
| 4997 | } | |
| 4998 | } else { | |
| 4999 | isMoved = true; | |
| 5000 | } | |
| 5001 | if (isMoved) { | |
| 5002 | preventClick = true; | |
| 5003 | if (params.tapHold) { | |
| 5004 | clearTimeout(tapHoldTimeout); | |
| 5005 | } | |
| 5006 | if (params.activeState) { | |
| 5007 | clearTimeout(activeTimeout); | |
| 5008 | removeActive(); | |
| 5009 | } | |
| 5010 | if (useRipple) { | |
| 5011 | rippleTouchMove(); | |
| 5012 | } | |
| 5013 | } | |
| 5014 | } | |
| 5015 | function handleTouchEndLight(e) { | |
| 5016 | clearTimeout(activeTimeout); | |
| 5017 | clearTimeout(tapHoldTimeout); | |
| 5018 | if (doc.activeElement === e.target) { | |
| 5019 | if (params.activeState) { removeActive(); } | |
| 5020 | if (useRipple) { | |
| 5021 | rippleTouchEnd(); | |
| 5022 | } | |
| 5023 | return true; | |
| 5024 | } | |
| 5025 | if (params.activeState) { | |
| 5026 | addActive(); | |
| 5027 | setTimeout(removeActive, 0); | |
| 5028 | } | |
| 5029 | if (useRipple) { | |
| 5030 | rippleTouchEnd(); | |
| 5031 | } | |
| 5032 | if ((params.tapHoldPreventClicks && tapHoldFired) || preventClick) { | |
| 5033 | if (e.cancelable) { e.preventDefault(); } | |
| 5034 | preventClick = true; | |
| 5035 | return false; | |
| 5036 | } | |
| 5037 | return true; | |
| 5038 | } | |
| 5039 | function handleClickLight(e) { | |
| 5040 | var localPreventClick = preventClick; | |
| 5041 | if (targetElement && e.target !== targetElement) { | |
| 5042 | localPreventClick = true; | |
| 5043 | } | |
| 5044 | if (params.tapHold && params.tapHoldPreventClicks && tapHoldFired) { | |
| 5045 | localPreventClick = true; | |
| 5046 | } | |
| 5047 | if (localPreventClick) { | |
| 5048 | e.stopImmediatePropagation(); | |
| 5049 | e.stopPropagation(); | |
| 5050 | e.preventDefault(); | |
| 5051 | } | |
| 5052 | ||
| 5053 | if (params.tapHold) { | |
| 5054 | tapHoldTimeout = setTimeout( | |
| 5055 | function () { | |
| 5056 | tapHoldFired = false; | |
| 5057 | }, | |
| 5058 | (Device.ios || Device.androidChrome ? 100 : 400) | |
| 5059 | ); | |
| 5060 | } | |
| 5061 | preventClick = false; | |
| 5062 | targetElement = null; | |
| 5063 | ||
| 5064 | return !localPreventClick; | |
| 5065 | } | |
| 5066 | ||
| 5067 | function emitAppTouchEvent(name, e) { | |
| 5068 | app.emit({ | |
| 5069 | events: name, | |
| 5070 | data: [e], | |
| 5071 | }); | |
| 5072 | } | |
| 5073 | function appClick(e) { | |
| 5074 | emitAppTouchEvent('click', e); | |
| 5075 | } | |
| 5076 | function appTouchStartActive(e) { | |
| 5077 | emitAppTouchEvent('touchstart touchstart:active', e); | |
| 5078 | } | |
| 5079 | function appTouchMoveActive(e) { | |
| 5080 | emitAppTouchEvent('touchmove touchmove:active', e); | |
| 5081 | } | |
| 5082 | function appTouchEndActive(e) { | |
| 5083 | emitAppTouchEvent('touchend touchend:active', e); | |
| 5084 | } | |
| 5085 | function appTouchStartPassive(e) { | |
| 5086 | emitAppTouchEvent('touchstart:passive', e); | |
| 5087 | } | |
| 5088 | function appTouchMovePassive(e) { | |
| 5089 | emitAppTouchEvent('touchmove:passive', e); | |
| 5090 | } | |
| 5091 | function appTouchEndPassive(e) { | |
| 5092 | emitAppTouchEvent('touchend:passive', e); | |
| 5093 | } | |
| 5094 | ||
| 5095 | var passiveListener = Support.passiveListener ? { passive: true } : false; | |
| 5096 | var activeListener = Support.passiveListener ? { passive: false } : false; | |
| 5097 | ||
| 5098 | doc.addEventListener('click', appClick, true); | |
| 5099 | ||
| 5100 | if (Support.passiveListener) { | |
| 5101 | doc.addEventListener(app.touchEvents.start, appTouchStartActive, activeListener); | |
| 5102 | doc.addEventListener(app.touchEvents.move, appTouchMoveActive, activeListener); | |
| 5103 | doc.addEventListener(app.touchEvents.end, appTouchEndActive, activeListener); | |
| 5104 | ||
| 5105 | doc.addEventListener(app.touchEvents.start, appTouchStartPassive, passiveListener); | |
| 5106 | doc.addEventListener(app.touchEvents.move, appTouchMovePassive, passiveListener); | |
| 5107 | doc.addEventListener(app.touchEvents.end, appTouchEndPassive, passiveListener); | |
| 5108 | } else { | |
| 5109 | doc.addEventListener(app.touchEvents.start, function (e) { | |
| 5110 | appTouchStartActive(e); | |
| 5111 | appTouchStartPassive(e); | |
| 5112 | }, false); | |
| 5113 | doc.addEventListener(app.touchEvents.move, function (e) { | |
| 5114 | appTouchMoveActive(e); | |
| 5115 | appTouchMovePassive(e); | |
| 5116 | }, false); | |
| 5117 | doc.addEventListener(app.touchEvents.end, function (e) { | |
| 5118 | appTouchEndActive(e); | |
| 5119 | appTouchEndPassive(e); | |
| 5120 | }, false); | |
| 5121 | } | |
| 5122 | ||
| 5123 | if (Support.touch) { | |
| 5124 | if (params.fastClicks) { | |
| 5125 | app.on('click', handleClick); | |
| 5126 | app.on('touchstart', handleTouchStart); | |
| 5127 | app.on('touchmove', handleTouchMove); | |
| 5128 | app.on('touchend', handleTouchEnd); | |
| 5129 | } else { | |
| 5130 | app.on('click', handleClickLight); | |
| 5131 | app.on('touchstart', handleTouchStartLight); | |
| 5132 | app.on('touchmove', handleTouchMoveLight); | |
| 5133 | app.on('touchend', handleTouchEndLight); | |
| 5134 | } | |
| 5135 | ||
| 5136 | doc.addEventListener('touchcancel', handleTouchCancel, { passive: true }); | |
| 5137 | } else if (params.activeState) { | |
| 5138 | app.on('touchstart', handleMouseDown); | |
| 5139 | app.on('touchmove', handleMouseMove); | |
| 5140 | app.on('touchend', handleMouseUp); | |
| 5141 | } | |
| 5142 | doc.addEventListener('contextmenu', function (e) { | |
| 5143 | if (params.disableContextMenu && (Device.ios || Device.android || Device.cordova)) { | |
| 5144 | e.preventDefault(); | |
| 5145 | } | |
| 5146 | if (useRipple) { | |
| 5147 | if (activableElement) { removeActive(); } | |
| 5148 | rippleTouchEnd(); | |
| 5149 | } | |
| 5150 | }); | |
| 5151 | } | |
| 5152 | ||
| 5153 | var TouchModule = { | |
| 5154 | name: 'touch', | |
| 5155 | params: { | |
| 5156 | touch: { | |
| 5157 | // Fast clicks | |
| 5158 | fastClicks: false, | |
| 5159 | fastClicksDistanceThreshold: 10, | |
| 5160 | fastClicksDelayBetweenClicks: 50, | |
| 5161 | fastClicksExclude: '', // CSS selector | |
| 5d51ea26 DC |
5162 | // Clicks |
| 5163 | touchClicksDistanceThreshold: 5, | |
| 5309fbda DC |
5164 | // ContextMenu |
| 5165 | disableContextMenu: false, | |
| 5166 | // Tap Hold | |
| 5167 | tapHold: false, | |
| 5168 | tapHoldDelay: 750, | |
| 5169 | tapHoldPreventClicks: true, | |
| 5170 | // Active State | |
| 5171 | activeState: true, | |
| 5d51ea26 | 5172 | activeStateElements: 'a, button, label, span, .actions-button, .stepper-button, .stepper-button-plus, .stepper-button-minus, .card-expandable, .menu-item, .link, .item-link', |
| 5309fbda DC |
5173 | mdTouchRipple: true, |
| 5174 | iosTouchRipple: false, | |
| 5d51ea26 | 5175 | auroraTouchRipple: false, |
| 5309fbda DC |
5176 | touchRippleElements: '.ripple, .link, .item-link, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus, .menu-item-content', |
| 5177 | }, | |
| 5178 | }, | |
| 5179 | instance: { | |
| 5180 | touchEvents: { | |
| 5181 | start: Support.touch ? 'touchstart' : 'mousedown', | |
| 5182 | move: Support.touch ? 'touchmove' : 'mousemove', | |
| 5183 | end: Support.touch ? 'touchend' : 'mouseup', | |
| 5184 | }, | |
| 5185 | }, | |
| 5186 | on: { | |
| 5187 | init: initTouch, | |
| 5188 | }, | |
| 5189 | }; | |
| 5190 | ||
| 5191 | /** | |
| 5192 | * Expose `pathToRegexp`. | |
| 5193 | */ | |
| 5194 | var pathToRegexp_1 = pathToRegexp; | |
| 5195 | var parse_1 = parse; | |
| 5196 | var compile_1 = compile; | |
| 5197 | var tokensToFunction_1 = tokensToFunction; | |
| 5198 | var tokensToRegExp_1 = tokensToRegExp; | |
| 5199 | ||
| 5200 | /** | |
| 5201 | * Default configs. | |
| 5202 | */ | |
| 5203 | var DEFAULT_DELIMITER = '/'; | |
| 5204 | ||
| 5205 | /** | |
| 5206 | * The main path matching regexp utility. | |
| 5207 | * | |
| 5208 | * @type {RegExp} | |
| 5209 | */ | |
| 5210 | var PATH_REGEXP = new RegExp([ | |
| 5211 | // Match escaped characters that would otherwise appear in future matches. | |
| 5212 | // This allows the user to escape special characters that won't transform. | |
| 5213 | '(\\\\.)', | |
| 5214 | // Match Express-style parameters and un-named parameters with a prefix | |
| 5215 | // and optional suffixes. Matches appear as: | |
| 5216 | // | |
| 5217 | // ":test(\\d+)?" => ["test", "\d+", undefined, "?"] | |
| 5218 | // "(\\d+)" => [undefined, undefined, "\d+", undefined] | |
| 5219 | '(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?' | |
| 5220 | ].join('|'), 'g'); | |
| 5221 | ||
| 5222 | /** | |
| 5223 | * Parse a string for the raw tokens. | |
| 5224 | * | |
| 5225 | * @param {string} str | |
| 5226 | * @param {Object=} options | |
| 5227 | * @return {!Array} | |
| 5228 | */ | |
| 5229 | function parse (str, options) { | |
| 5230 | var tokens = []; | |
| 5231 | var key = 0; | |
| 5232 | var index = 0; | |
| 5233 | var path = ''; | |
| 5234 | var defaultDelimiter = (options && options.delimiter) || DEFAULT_DELIMITER; | |
| 5235 | var whitelist = (options && options.whitelist) || undefined; | |
| 5236 | var pathEscaped = false; | |
| 5237 | var res; | |
| 5238 | ||
| 5239 | while ((res = PATH_REGEXP.exec(str)) !== null) { | |
| 5240 | var m = res[0]; | |
| 5241 | var escaped = res[1]; | |
| 5242 | var offset = res.index; | |
| 5243 | path += str.slice(index, offset); | |
| 5244 | index = offset + m.length; | |
| 5245 | ||
| 5246 | // Ignore already escaped sequences. | |
| 5247 | if (escaped) { | |
| 5248 | path += escaped[1]; | |
| 5249 | pathEscaped = true; | |
| 5250 | continue | |
| 5251 | } | |
| 5252 | ||
| 5253 | var prev = ''; | |
| 5254 | var name = res[2]; | |
| 5255 | var capture = res[3]; | |
| 5256 | var group = res[4]; | |
| 5257 | var modifier = res[5]; | |
| 5258 | ||
| 5259 | if (!pathEscaped && path.length) { | |
| 5260 | var k = path.length - 1; | |
| 5261 | var c = path[k]; | |
| 5262 | var matches = whitelist ? whitelist.indexOf(c) > -1 : true; | |
| 5263 | ||
| 5264 | if (matches) { | |
| 5265 | prev = c; | |
| 5266 | path = path.slice(0, k); | |
| 5267 | } | |
| 5268 | } | |
| 5269 | ||
| 5270 | // Push the current path onto the tokens. | |
| 5271 | if (path) { | |
| 5272 | tokens.push(path); | |
| 5273 | path = ''; | |
| 5274 | pathEscaped = false; | |
| 5275 | } | |
| 5276 | ||
| 5277 | var repeat = modifier === '+' || modifier === '*'; | |
| 5278 | var optional = modifier === '?' || modifier === '*'; | |
| 5279 | var pattern = capture || group; | |
| 5280 | var delimiter = prev || defaultDelimiter; | |
| 5281 | ||
| 5282 | tokens.push({ | |
| 5283 | name: name || key++, | |
| 5284 | prefix: prev, | |
| 5285 | delimiter: delimiter, | |
| 5286 | optional: optional, | |
| 5287 | repeat: repeat, | |
| 5288 | pattern: pattern | |
| 5289 | ? escapeGroup(pattern) | |
| 5290 | : '[^' + escapeString(delimiter === defaultDelimiter ? delimiter : (delimiter + defaultDelimiter)) + ']+?' | |
| 5291 | }); | |
| 5292 | } | |
| 5293 | ||
| 5294 | // Push any remaining characters. | |
| 5295 | if (path || index < str.length) { | |
| 5296 | tokens.push(path + str.substr(index)); | |
| 5297 | } | |
| 5298 | ||
| 5299 | return tokens | |
| 5300 | } | |
| 5301 | ||
| 5302 | /** | |
| 5303 | * Compile a string to a template function for the path. | |
| 5304 | * | |
| 5305 | * @param {string} str | |
| 5306 | * @param {Object=} options | |
| 5307 | * @return {!function(Object=, Object=)} | |
| 5308 | */ | |
| 5309 | function compile (str, options) { | |
| 5310 | return tokensToFunction(parse(str, options)) | |
| 5311 | } | |
| 5312 | ||
| 5313 | /** | |
| 5314 | * Expose a method for transforming tokens into the path function. | |
| 5315 | */ | |
| 5316 | function tokensToFunction (tokens) { | |
| 5317 | // Compile all the tokens into regexps. | |
| 5318 | var matches = new Array(tokens.length); | |
| 5319 | ||
| 5320 | // Compile all the patterns before compilation. | |
| 5321 | for (var i = 0; i < tokens.length; i++) { | |
| 5322 | if (typeof tokens[i] === 'object') { | |
| 5323 | matches[i] = new RegExp('^(?:' + tokens[i].pattern + ')$'); | |
| 5324 | } | |
| 5325 | } | |
| 5326 | ||
| 5327 | return function (data, options) { | |
| 5328 | var path = ''; | |
| 5329 | var encode = (options && options.encode) || encodeURIComponent; | |
| 5330 | ||
| 5331 | for (var i = 0; i < tokens.length; i++) { | |
| 5332 | var token = tokens[i]; | |
| 5333 | ||
| 5334 | if (typeof token === 'string') { | |
| 5335 | path += token; | |
| 5336 | continue | |
| 5337 | } | |
| 5338 | ||
| 5339 | var value = data ? data[token.name] : undefined; | |
| 5340 | var segment; | |
| 5341 | ||
| 5342 | if (Array.isArray(value)) { | |
| 5343 | if (!token.repeat) { | |
| 5344 | throw new TypeError('Expected "' + token.name + '" to not repeat, but got array') | |
| 5345 | } | |
| 5346 | ||
| 5347 | if (value.length === 0) { | |
| 5348 | if (token.optional) { continue } | |
| 5349 | ||
| 5350 | throw new TypeError('Expected "' + token.name + '" to not be empty') | |
| 5351 | } | |
| 5352 | ||
| 5353 | for (var j = 0; j < value.length; j++) { | |
| 5354 | segment = encode(value[j], token); | |
| 5355 | ||
| 5356 | if (!matches[i].test(segment)) { | |
| 5357 | throw new TypeError('Expected all "' + token.name + '" to match "' + token.pattern + '"') | |
| 5358 | } | |
| 5359 | ||
| 5360 | path += (j === 0 ? token.prefix : token.delimiter) + segment; | |
| 5361 | } | |
| 5362 | ||
| 5363 | continue | |
| 5364 | } | |
| 5365 | ||
| 5366 | if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') { | |
| 5367 | segment = encode(String(value), token); | |
| 5368 | ||
| 5369 | if (!matches[i].test(segment)) { | |
| 5370 | throw new TypeError('Expected "' + token.name + '" to match "' + token.pattern + '", but got "' + segment + '"') | |
| 5371 | } | |
| 5372 | ||
| 5373 | path += token.prefix + segment; | |
| 5374 | continue | |
| 5375 | } | |
| 5376 | ||
| 5377 | if (token.optional) { continue } | |
| 5378 | ||
| 5379 | throw new TypeError('Expected "' + token.name + '" to be ' + (token.repeat ? 'an array' : 'a string')) | |
| 5380 | } | |
| 5381 | ||
| 5382 | return path | |
| 5383 | } | |
| 5384 | } | |
| 5385 | ||
| 5386 | /** | |
| 5387 | * Escape a regular expression string. | |
| 5388 | * | |
| 5389 | * @param {string} str | |
| 5390 | * @return {string} | |
| 5391 | */ | |
| 5392 | function escapeString (str) { | |
| 5393 | return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, '\\$1') | |
| 5394 | } | |
| 5395 | ||
| 5396 | /** | |
| 5397 | * Escape the capturing group by escaping special characters and meaning. | |
| 5398 | * | |
| 5399 | * @param {string} group | |
| 5400 | * @return {string} | |
| 5401 | */ | |
| 5402 | function escapeGroup (group) { | |
| 5403 | return group.replace(/([=!:$/()])/g, '\\$1') | |
| 5404 | } | |
| 5405 | ||
| 5406 | /** | |
| 5407 | * Get the flags for a regexp from the options. | |
| 5408 | * | |
| 5409 | * @param {Object} options | |
| 5410 | * @return {string} | |
| 5411 | */ | |
| 5412 | function flags (options) { | |
| 5413 | return options && options.sensitive ? '' : 'i' | |
| 5414 | } | |
| 5415 | ||
| 5416 | /** | |
| 5417 | * Pull out keys from a regexp. | |
| 5418 | * | |
| 5419 | * @param {!RegExp} path | |
| 5420 | * @param {Array=} keys | |
| 5421 | * @return {!RegExp} | |
| 5422 | */ | |
| 5423 | function regexpToRegexp (path, keys) { | |
| 5424 | if (!keys) { return path } | |
| 5425 | ||
| 5426 | // Use a negative lookahead to match only capturing groups. | |
| 5427 | var groups = path.source.match(/\((?!\?)/g); | |
| 5428 | ||
| 5429 | if (groups) { | |
| 5430 | for (var i = 0; i < groups.length; i++) { | |
| 5431 | keys.push({ | |
| 5432 | name: i, | |
| 5433 | prefix: null, | |
| 5434 | delimiter: null, | |
| 5435 | optional: false, | |
| 5436 | repeat: false, | |
| 5437 | pattern: null | |
| 5438 | }); | |
| 5439 | } | |
| 5440 | } | |
| 5441 | ||
| 5442 | return path | |
| 5443 | } | |
| 5444 | ||
| 5445 | /** | |
| 5446 | * Transform an array into a regexp. | |
| 5447 | * | |
| 5448 | * @param {!Array} path | |
| 5449 | * @param {Array=} keys | |
| 5450 | * @param {Object=} options | |
| 5451 | * @return {!RegExp} | |
| 5452 | */ | |
| 5453 | function arrayToRegexp (path, keys, options) { | |
| 5454 | var parts = []; | |
| 5455 | ||
| 5456 | for (var i = 0; i < path.length; i++) { | |
| 5457 | parts.push(pathToRegexp(path[i], keys, options).source); | |
| 5458 | } | |
| 5459 | ||
| 5460 | return new RegExp('(?:' + parts.join('|') + ')', flags(options)) | |
| 5461 | } | |
| 5462 | ||
| 5463 | /** | |
| 5464 | * Create a path regexp from string input. | |
| 5465 | * | |
| 5466 | * @param {string} path | |
| 5467 | * @param {Array=} keys | |
| 5468 | * @param {Object=} options | |
| 5469 | * @return {!RegExp} | |
| 5470 | */ | |
| 5471 | function stringToRegexp (path, keys, options) { | |
| 5472 | return tokensToRegExp(parse(path, options), keys, options) | |
| 5473 | } | |
| 5474 | ||
| 5475 | /** | |
| 5476 | * Expose a function for taking tokens and returning a RegExp. | |
| 5477 | * | |
| 5478 | * @param {!Array} tokens | |
| 5479 | * @param {Array=} keys | |
| 5480 | * @param {Object=} options | |
| 5481 | * @return {!RegExp} | |
| 5482 | */ | |
| 5483 | function tokensToRegExp (tokens, keys, options) { | |
| 5484 | options = options || {}; | |
| 5485 | ||
| 5486 | var strict = options.strict; | |
| 5487 | var start = options.start !== false; | |
| 5488 | var end = options.end !== false; | |
| 5489 | var delimiter = options.delimiter || DEFAULT_DELIMITER; | |
| 5490 | var endsWith = [].concat(options.endsWith || []).map(escapeString).concat('$').join('|'); | |
| 5491 | var route = start ? '^' : ''; | |
| 5492 | ||
| 5493 | // Iterate over the tokens and create our regexp string. | |
| 5494 | for (var i = 0; i < tokens.length; i++) { | |
| 5495 | var token = tokens[i]; | |
| 5496 | ||
| 5497 | if (typeof token === 'string') { | |
| 5498 | route += escapeString(token); | |
| 5499 | } else { | |
| 5500 | var capture = token.repeat | |
| 5501 | ? '(?:' + token.pattern + ')(?:' + escapeString(token.delimiter) + '(?:' + token.pattern + '))*' | |
| 5502 | : token.pattern; | |
| 5503 | ||
| 5504 | if (keys) { keys.push(token); } | |
| 5505 | ||
| 5506 | if (token.optional) { | |
| 5507 | if (!token.prefix) { | |
| 5508 | route += '(' + capture + ')?'; | |
| 5509 | } else { | |
| 5510 | route += '(?:' + escapeString(token.prefix) + '(' + capture + '))?'; | |
| 5511 | } | |
| 5512 | } else { | |
| 5513 | route += escapeString(token.prefix) + '(' + capture + ')'; | |
| 5514 | } | |
| 5515 | } | |
| 5516 | } | |
| 5517 | ||
| 5518 | if (end) { | |
| 5519 | if (!strict) { route += '(?:' + escapeString(delimiter) + ')?'; } | |
| 5520 | ||
| 5521 | route += endsWith === '$' ? '$' : '(?=' + endsWith + ')'; | |
| 5522 | } else { | |
| 5523 | var endToken = tokens[tokens.length - 1]; | |
| 5524 | var isEndDelimited = typeof endToken === 'string' | |
| 5525 | ? endToken[endToken.length - 1] === delimiter | |
| 5526 | : endToken === undefined; | |
| 5527 | ||
| 5528 | if (!strict) { route += '(?:' + escapeString(delimiter) + '(?=' + endsWith + '))?'; } | |
| 5529 | if (!isEndDelimited) { route += '(?=' + escapeString(delimiter) + '|' + endsWith + ')'; } | |
| 5530 | } | |
| 5531 | ||
| 5532 | return new RegExp(route, flags(options)) | |
| 5533 | } | |
| 5534 | ||
| 5535 | /** | |
| 5536 | * Normalize the given path string, returning a regular expression. | |
| 5537 | * | |
| 5538 | * An empty array can be passed in for the keys, which will hold the | |
| 5539 | * placeholder key descriptions. For example, using `/user/:id`, `keys` will | |
| 5540 | * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`. | |
| 5541 | * | |
| 5542 | * @param {(string|RegExp|Array)} path | |
| 5543 | * @param {Array=} keys | |
| 5544 | * @param {Object=} options | |
| 5545 | * @return {!RegExp} | |
| 5546 | */ | |
| 5547 | function pathToRegexp (path, keys, options) { | |
| 5548 | if (path instanceof RegExp) { | |
| 5549 | return regexpToRegexp(path, keys) | |
| 5550 | } | |
| 5551 | ||
| 5552 | if (Array.isArray(path)) { | |
| 5553 | return arrayToRegexp(/** @type {!Array} */ (path), keys, options) | |
| 5554 | } | |
| 5555 | ||
| 5556 | return stringToRegexp(/** @type {string} */ (path), keys, options) | |
| 5557 | } | |
| 5558 | pathToRegexp_1.parse = parse_1; | |
| 5559 | pathToRegexp_1.compile = compile_1; | |
| 5560 | pathToRegexp_1.tokensToFunction = tokensToFunction_1; | |
| 5561 | pathToRegexp_1.tokensToRegExp = tokensToRegExp_1; | |
| 5562 | ||
| 5563 | var History = { | |
| 5564 | queue: [], | |
| 5565 | clearQueue: function clearQueue() { | |
| 5566 | if (History.queue.length === 0) { return; } | |
| 5567 | var currentQueue = History.queue.shift(); | |
| 5568 | currentQueue(); | |
| 5569 | }, | |
| 5570 | routerQueue: [], | |
| 5571 | clearRouterQueue: function clearRouterQueue() { | |
| 5572 | if (History.routerQueue.length === 0) { return; } | |
| 5573 | var currentQueue = History.routerQueue.pop(); | |
| 5574 | var router = currentQueue.router; | |
| 5575 | var stateUrl = currentQueue.stateUrl; | |
| 5576 | var action = currentQueue.action; | |
| 5577 | ||
| 5578 | var animate = router.params.animate; | |
| 5579 | if (router.params.pushStateAnimate === false) { animate = false; } | |
| 5580 | ||
| 5581 | if (action === 'back') { | |
| 5582 | router.back({ animate: animate, pushState: false }); | |
| 5583 | } | |
| 5584 | if (action === 'load') { | |
| 5585 | router.navigate(stateUrl, { animate: animate, pushState: false }); | |
| 5586 | } | |
| 5587 | }, | |
| 5588 | handle: function handle(e) { | |
| 5589 | if (History.blockPopstate) { return; } | |
| 5590 | var app = this; | |
| 5591 | // const mainView = app.views.main; | |
| 5592 | var state = e.state; | |
| 5593 | History.previousState = History.state; | |
| 5594 | History.state = state; | |
| 5595 | ||
| 5596 | History.allowChange = true; | |
| 5597 | History.clearQueue(); | |
| 5598 | ||
| 5599 | state = History.state; | |
| 5600 | if (!state) { state = {}; } | |
| 5601 | ||
| 5602 | app.views.forEach(function (view) { | |
| 5603 | var router = view.router; | |
| 5604 | var viewState = state[view.id]; | |
| 5605 | if (!viewState && view.params.pushState) { | |
| 5606 | viewState = { | |
| 5607 | url: view.router.history[0], | |
| 5608 | }; | |
| 5609 | } | |
| 5610 | if (!viewState) { return; } | |
| 5611 | var stateUrl = viewState.url || undefined; | |
| 5612 | ||
| 5613 | var animate = router.params.animate; | |
| 5614 | if (router.params.pushStateAnimate === false) { animate = false; } | |
| 5615 | ||
| 5616 | if (stateUrl !== router.url) { | |
| 5617 | if (router.history.indexOf(stateUrl) >= 0) { | |
| 5618 | // Go Back | |
| 5619 | if (router.allowPageChange) { | |
| 5620 | router.back({ animate: animate, pushState: false }); | |
| 5621 | } else { | |
| 5622 | History.routerQueue.push({ | |
| 5623 | action: 'back', | |
| 5624 | router: router, | |
| 5625 | }); | |
| 5626 | } | |
| 5627 | } else if (router.allowPageChange) { | |
| 5628 | // Load page | |
| 5629 | router.navigate(stateUrl, { animate: animate, pushState: false }); | |
| 5630 | } else { | |
| 5631 | History.routerQueue.unshift({ | |
| 5632 | action: 'load', | |
| 5633 | stateUrl: stateUrl, | |
| 5634 | router: router, | |
| 5635 | }); | |
| 5636 | } | |
| 5637 | } | |
| 5638 | }); | |
| 5639 | }, | |
| 5640 | initViewState: function initViewState(viewId, viewState) { | |
| 5641 | var obj; | |
| 5642 | ||
| 5643 | var newState = Utils.extend({}, (History.state || {}), ( obj = {}, obj[viewId] = viewState, obj )); | |
| 5644 | History.state = newState; | |
| 5645 | win.history.replaceState(newState, ''); | |
| 5646 | }, | |
| 5647 | push: function push(viewId, viewState, url) { | |
| 5648 | var obj; | |
| 5649 | ||
| 5650 | if (!History.allowChange) { | |
| 5651 | History.queue.push(function () { | |
| 5652 | History.push(viewId, viewState, url); | |
| 5653 | }); | |
| 5654 | return; | |
| 5655 | } | |
| 5656 | History.previousState = History.state; | |
| 5657 | var newState = Utils.extend({}, (History.previousState || {}), ( obj = {}, obj[viewId] = viewState, obj )); | |
| 5658 | History.state = newState; | |
| 5659 | win.history.pushState(newState, '', url); | |
| 5660 | }, | |
| 5661 | replace: function replace(viewId, viewState, url) { | |
| 5662 | var obj; | |
| 5663 | ||
| 5664 | if (!History.allowChange) { | |
| 5665 | History.queue.push(function () { | |
| 5666 | History.replace(viewId, viewState, url); | |
| 5667 | }); | |
| 5668 | return; | |
| 5669 | } | |
| 5670 | History.previousState = History.state; | |
| 5671 | var newState = Utils.extend({}, (History.previousState || {}), ( obj = {}, obj[viewId] = viewState, obj )); | |
| 5672 | History.state = newState; | |
| 5673 | win.history.replaceState(newState, '', url); | |
| 5674 | }, | |
| 5675 | go: function go(index) { | |
| 5676 | History.allowChange = false; | |
| 5677 | win.history.go(index); | |
| 5678 | }, | |
| 5679 | back: function back() { | |
| 5680 | History.allowChange = false; | |
| 5681 | win.history.back(); | |
| 5682 | }, | |
| 5683 | allowChange: true, | |
| 5684 | previousState: {}, | |
| 5685 | state: win.history.state, | |
| 5686 | blockPopstate: true, | |
| 5687 | init: function init(app) { | |
| 5688 | $(win).on('load', function () { | |
| 5689 | setTimeout(function () { | |
| 5690 | History.blockPopstate = false; | |
| 5691 | }, 0); | |
| 5692 | }); | |
| 5693 | ||
| 5694 | if (doc.readyState && doc.readyState === 'complete') { | |
| 5695 | History.blockPopstate = false; | |
| 5696 | } | |
| 5697 | ||
| 5698 | $(win).on('popstate', History.handle.bind(app)); | |
| 5699 | }, | |
| 5700 | }; | |
| 5701 | ||
| 5702 | function SwipeBack(r) { | |
| 5703 | var router = r; | |
| 5704 | var $el = router.$el; | |
| 5705 | var $navbarEl = router.$navbarEl; | |
| 5706 | var app = router.app; | |
| 5707 | var params = router.params; | |
| 5708 | var isTouched = false; | |
| 5709 | var isMoved = false; | |
| 5710 | var touchesStart = {}; | |
| 5711 | var isScrolling; | |
| 5d51ea26 DC |
5712 | var $currentPageEl = []; |
| 5713 | var $previousPageEl = []; | |
| 5309fbda DC |
5714 | var viewContainerWidth; |
| 5715 | var touchesDiff; | |
| 5716 | var allowViewTouchMove = true; | |
| 5717 | var touchStartTime; | |
| 5d51ea26 DC |
5718 | var $currentNavbarInnerEl = []; |
| 5719 | var $previousNavbarInnerEl = []; | |
| 5309fbda DC |
5720 | var dynamicNavbar; |
| 5721 | var separateNavbar; | |
| 5d51ea26 DC |
5722 | var $pageShadowEl; |
| 5723 | var $pageOpacityEl; | |
| 5309fbda DC |
5724 | |
| 5725 | var animatableNavEls; | |
| 5726 | ||
| 5727 | var paramsSwipeBackAnimateShadow = params[((app.theme) + "SwipeBackAnimateShadow")]; | |
| 5728 | var paramsSwipeBackAnimateOpacity = params[((app.theme) + "SwipeBackAnimateOpacity")]; | |
| 5729 | var paramsSwipeBackActiveArea = params[((app.theme) + "SwipeBackActiveArea")]; | |
| 5730 | var paramsSwipeBackThreshold = params[((app.theme) + "SwipeBackThreshold")]; | |
| 5731 | ||
| 5732 | var transformOrigin = app.rtl ? 'right center' : 'left center'; | |
| 5733 | ||
| 5734 | function animatableNavElements() { | |
| 5735 | var els = []; | |
| 5736 | var inverter = app.rtl ? -1 : 1; | |
| 5d51ea26 DC |
5737 | var currentNavIsLarge = $currentNavbarInnerEl.hasClass('navbar-inner-large'); |
| 5738 | var previousNavIsLarge = $previousNavbarInnerEl.hasClass('navbar-inner-large'); | |
| 5739 | var fromLarge = currentNavIsLarge && !$currentNavbarInnerEl.hasClass('navbar-inner-large-collapsed'); | |
| 5740 | var toLarge = previousNavIsLarge && !$previousNavbarInnerEl.hasClass('navbar-inner-large-collapsed'); | |
| 5741 | var $currentNavElements = $currentNavbarInnerEl.children('.left, .title, .right, .subnavbar, .fading, .title-large'); | |
| 5742 | var $previousNavElements = $previousNavbarInnerEl.children('.left, .title, .right, .subnavbar, .fading, .title-large'); | |
| 5309fbda DC |
5743 | var activeNavBackIconText; |
| 5744 | var previousNavBackIconText; | |
| 5745 | ||
| 5746 | if (params.iosAnimateNavbarBackIcon) { | |
| 5d51ea26 DC |
5747 | if ($currentNavbarInnerEl.hasClass('sliding')) { |
| 5748 | activeNavBackIconText = $currentNavbarInnerEl.children('.left').find('.back .icon + span').eq(0); | |
| 5309fbda | 5749 | } else { |
| 5d51ea26 | 5750 | activeNavBackIconText = $currentNavbarInnerEl.children('.left.sliding').find('.back .icon + span').eq(0); |
| 5309fbda | 5751 | } |
| 5d51ea26 DC |
5752 | if ($previousNavbarInnerEl.hasClass('sliding')) { |
| 5753 | previousNavBackIconText = $previousNavbarInnerEl.children('.left').find('.back .icon + span').eq(0); | |
| 5309fbda | 5754 | } else { |
| 5d51ea26 | 5755 | previousNavBackIconText = $previousNavbarInnerEl.children('.left.sliding').find('.back .icon + span').eq(0); |
| 5309fbda DC |
5756 | } |
| 5757 | if (activeNavBackIconText.length) { | |
| 5758 | $previousNavElements.each(function (index, el) { | |
| 5759 | if (!$(el).hasClass('title')) { return; } | |
| 5760 | el.f7NavbarLeftOffset += activeNavBackIconText.prev('.icon')[0].offsetWidth; | |
| 5761 | }); | |
| 5762 | } | |
| 5763 | } | |
| 5764 | $currentNavElements | |
| 5765 | .each(function (index, navEl) { | |
| 5766 | var $navEl = $(navEl); | |
| 5767 | var isSubnavbar = $navEl.hasClass('subnavbar'); | |
| 5768 | var isLeft = $navEl.hasClass('left'); | |
| 5769 | var isTitle = $navEl.hasClass('title'); | |
| 5770 | if (!fromLarge && $navEl.hasClass('.title-large')) { return; } | |
| 5771 | var el = { | |
| 5772 | el: navEl, | |
| 5773 | }; | |
| 5774 | if (fromLarge) { | |
| 5775 | if (isTitle) { return; } | |
| 5776 | if ($navEl.hasClass('title-large')) { | |
| 5777 | if (!separateNavbar) { return; } | |
| 5778 | if (toLarge) { | |
| 5779 | if (els.indexOf(el) < 0) { els.push(el); } | |
| 5780 | el.overflow = 'visible'; | |
| 5781 | el.transform = 'translateX(100%)'; | |
| 5782 | $navEl.find('.title-large-text, .title-large-inner').each(function (subIndex, subNavEl) { | |
| 5783 | els.push({ | |
| 5784 | el: subNavEl, | |
| 5785 | transform: function (progress) { return ("translateX(" + (-100 + progress * 100 * inverter) + "%)"); }, | |
| 5786 | }); | |
| 5787 | }); | |
| 5788 | } else { | |
| 5789 | if (els.indexOf(el) < 0) { els.push(el); } | |
| 5790 | el.overflow = 'hidden'; | |
| 5791 | el.transform = function (progress) { return ("translateY(calc(" + (-progress) + " * var(--f7-navbar-large-title-height)))"); }; | |
| 5792 | $navEl.find('.title-large-text, .title-large-inner').each(function (subIndex, subNavEl) { | |
| 5793 | els.push({ | |
| 5794 | el: subNavEl, | |
| 5795 | transform: function (progress) { return ("translateX(" + (progress * 100 * inverter) + "%) translateY(calc(" + progress + " * var(--f7-navbar-large-title-height)))"); }, | |
| 5796 | }); | |
| 5797 | }); | |
| 5798 | } | |
| 5799 | return; | |
| 5800 | } | |
| 5801 | } | |
| 5802 | if (toLarge) { | |
| 5803 | if (!fromLarge) { | |
| 5804 | if ($navEl.hasClass('title-large')) { | |
| 5805 | if (!separateNavbar) { return; } | |
| 5806 | if (els.indexOf(el) < 0) { els.push(el); } | |
| 5807 | el.opacity = 0; | |
| 5808 | } | |
| 5809 | } | |
| 5810 | if (isLeft && separateNavbar) { | |
| 5811 | if (els.indexOf(el) < 0) { els.push(el); } | |
| 5812 | el.opacity = function (progress) { return (1 - (Math.pow( progress, 0.33 ))); }; | |
| 5813 | $navEl.find('.back span').each(function (subIndex, subNavEl) { | |
| 5814 | els.push({ | |
| 5815 | el: subNavEl, | |
| 5816 | 'transform-origin': transformOrigin, | |
| 5817 | transform: function (progress) { return ("translateY(calc(var(--f7-navbar-height) * " + progress + ")) scale(" + (1 + (1 * progress)) + ")"); }, | |
| 5818 | }); | |
| 5819 | }); | |
| 5820 | return; | |
| 5821 | } | |
| 5822 | } | |
| 5823 | if ($navEl.hasClass('title-large')) { return; } | |
| 5d51ea26 | 5824 | var isSliding = $navEl.hasClass('sliding') || $currentNavbarInnerEl.hasClass('sliding'); |
| 5309fbda DC |
5825 | if (els.indexOf(el) < 0) { els.push(el); } |
| 5826 | if (!isSubnavbar || (isSubnavbar && !isSliding)) { | |
| 5827 | el.opacity = function (progress) { return (1 - (Math.pow( progress, 0.33 ))); }; | |
| 5828 | } | |
| 5829 | if (isSliding) { | |
| 5830 | var transformTarget = el; | |
| 5831 | if (isLeft && activeNavBackIconText.length && params.iosAnimateNavbarBackIcon) { | |
| 5832 | var textEl = { el: activeNavBackIconText[0] }; | |
| 5833 | transformTarget = textEl; | |
| 5834 | els.push(textEl); | |
| 5835 | } | |
| 5836 | transformTarget.transform = function (progress) { | |
| 5837 | var activeNavTranslate = progress * transformTarget.el.f7NavbarRightOffset; | |
| 5838 | if (Device.pixelRatio === 1) { activeNavTranslate = Math.round(activeNavTranslate); } | |
| 5839 | if (isSubnavbar && currentNavIsLarge && separateNavbar) { | |
| 5840 | return ("translate3d(" + activeNavTranslate + "px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)"); | |
| 5841 | } | |
| 5842 | return ("translate3d(" + activeNavTranslate + "px,0,0)"); | |
| 5843 | }; | |
| 5844 | } | |
| 5845 | }); | |
| 5846 | $previousNavElements | |
| 5847 | .each(function (index, navEl) { | |
| 5848 | var $navEl = $(navEl); | |
| 5849 | var isSubnavbar = $navEl.hasClass('subnavbar'); | |
| 5850 | var isLeft = $navEl.hasClass('left'); | |
| 5851 | var isTitle = $navEl.hasClass('title'); | |
| 5852 | var el = { | |
| 5853 | el: navEl, | |
| 5854 | }; | |
| 5855 | if (toLarge) { | |
| 5856 | if (isTitle) { return; } | |
| 5857 | if (els.indexOf(el) < 0) { els.push(el); } | |
| 5858 | ||
| 5859 | if ($navEl.hasClass('title-large')) { | |
| 5860 | if (!separateNavbar) { return; } | |
| 5861 | if (fromLarge) { | |
| 5862 | el.opacity = 1; | |
| 5863 | el.overflow = 'visible'; | |
| 5864 | el.transform = 'translateY(0)'; | |
| 5865 | $navEl.find('.title-large-text').each(function (subIndex, subNavEl) { | |
| 5866 | els.push({ | |
| 5867 | el: subNavEl, | |
| 5868 | 'transform-origin': transformOrigin, | |
| 5869 | opacity: function (progress) { return (Math.pow( progress, 3 )); }, | |
| 5870 | transform: function (progress) { return ("translateY(calc(" + (-1 + progress * 1) + " * var(--f7-navbar-large-title-height))) scale(" + (0.5 + progress * 0.5) + ")"); }, | |
| 5871 | }); | |
| 5872 | }); | |
| 5873 | } else { | |
| 5874 | el.transform = function (progress) { return ("translateY(calc(" + (progress - 1) + " * var(--f7-navbar-large-title-height)))"); }; | |
| 5875 | el.opacity = 1; | |
| 5876 | el.overflow = 'hidden'; | |
| 5877 | $navEl.find('.title-large-text').each(function (subIndex, subNavEl) { | |
| 5878 | els.push({ | |
| 5879 | el: subNavEl, | |
| 5880 | 'transform-origin': transformOrigin, | |
| 5881 | opacity: function (progress) { return (Math.pow( progress, 3 )); }, | |
| 5882 | transform: function (progress) { return ("scale(" + (0.5 + progress * 0.5) + ")"); }, | |
| 5883 | }); | |
| 5884 | }); | |
| 5885 | } | |
| 5886 | $navEl.find('.title-large-inner').each(function (subIndex, subNavEl) { | |
| 5887 | els.push({ | |
| 5888 | el: subNavEl, | |
| 5889 | 'transform-origin': transformOrigin, | |
| 5890 | opacity: function (progress) { return (Math.pow( progress, 3 )); }, | |
| 5891 | transform: function (progress) { return ("translateX(" + (-100 * (1 - progress) * inverter) + "%)"); }, | |
| 5892 | }); | |
| 5893 | }); | |
| 5894 | return; | |
| 5895 | } | |
| 5896 | } | |
| 5897 | if ($navEl.hasClass('title-large')) { return; } | |
| 5d51ea26 | 5898 | var isSliding = $navEl.hasClass('sliding') || $previousNavbarInnerEl.hasClass('sliding'); |
| 5309fbda DC |
5899 | if (els.indexOf(el) < 0) { els.push(el); } |
| 5900 | if (!isSubnavbar || (isSubnavbar && !isSliding)) { | |
| 5901 | el.opacity = function (progress) { return (Math.pow( progress, 3 )); }; | |
| 5902 | } | |
| 5903 | if (isSliding) { | |
| 5904 | var transformTarget = el; | |
| 5905 | if (isLeft && previousNavBackIconText.length && params.iosAnimateNavbarBackIcon) { | |
| 5d51ea26 | 5906 | var textEl = { el: previousNavBackIconText[0] }; |
| 5309fbda DC |
5907 | transformTarget = textEl; |
| 5908 | els.push(textEl); | |
| 5909 | } | |
| 5910 | transformTarget.transform = function (progress) { | |
| 5911 | var previousNavTranslate = transformTarget.el.f7NavbarLeftOffset * (1 - progress); | |
| 5912 | if (Device.pixelRatio === 1) { previousNavTranslate = Math.round(previousNavTranslate); } | |
| 5913 | if (isSubnavbar && previousNavIsLarge && separateNavbar) { | |
| 5914 | return ("translate3d(" + previousNavTranslate + "px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)"); | |
| 5915 | } | |
| 5916 | return ("translate3d(" + previousNavTranslate + "px,0,0)"); | |
| 5917 | }; | |
| 5918 | } | |
| 5919 | }); | |
| 5920 | return els; | |
| 5921 | } | |
| 5922 | ||
| 5923 | function setAnimatableNavElements(ref) { | |
| 5924 | if ( ref === void 0 ) ref = {}; | |
| 5925 | var progress = ref.progress; | |
| 5926 | var reset = ref.reset; | |
| 5927 | var transition = ref.transition; | |
| 5928 | ||
| 5929 | var styles = ['overflow', 'transform', 'transform-origin', 'opacity']; | |
| 5930 | for (var i = 0; i < animatableNavEls.length; i += 1) { | |
| 5931 | var el = animatableNavEls[i]; | |
| 5932 | if (el && el.el) { | |
| 5933 | if (transition === true) { el.el.classList.add('navbar-page-transitioning'); } | |
| 5934 | if (transition === false) { el.el.classList.remove('navbar-page-transitioning'); } | |
| 5935 | for (var j = 0; j < styles.length; j += 1) { | |
| 5936 | var styleProp = styles[j]; | |
| 5937 | if (el[styleProp]) { | |
| 5938 | if (reset) { | |
| 5939 | el.el.style[styleProp] = ''; | |
| 5940 | } else if (typeof el[styleProp] === 'function') { | |
| 5941 | el.el.style[styleProp] = el[styleProp](progress); | |
| 5942 | } else { | |
| 5943 | el.el.style[styleProp] = el[styleProp]; | |
| 5944 | } | |
| 5945 | } | |
| 5946 | } | |
| 5947 | } | |
| 5948 | } | |
| 5949 | } | |
| 5950 | ||
| 5951 | function handleTouchStart(e) { | |
| 5952 | var swipeBackEnabled = params[((app.theme) + "SwipeBack")]; | |
| 5953 | if (!allowViewTouchMove || !swipeBackEnabled || isTouched || (app.swipeout && app.swipeout.el) || !router.allowPageChange) { return; } | |
| 5954 | if ($(e.target).closest('.range-slider, .calendar-months').length > 0) { return; } | |
| 5955 | if ($(e.target).closest('.page-master, .page-master-detail').length > 0 && params.masterDetailBreakpoint > 0 && app.width >= params.masterDetailBreakpoint) { return; } | |
| 5956 | isMoved = false; | |
| 5957 | isTouched = true; | |
| 5958 | isScrolling = undefined; | |
| 5959 | touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 5960 | touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 5961 | touchStartTime = Utils.now(); | |
| 5962 | dynamicNavbar = router.dynamicNavbar; | |
| 5963 | separateNavbar = router.separateNavbar; | |
| 5964 | } | |
| 5965 | function handleTouchMove(e) { | |
| 5966 | if (!isTouched) { return; } | |
| 5967 | var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 5968 | var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 5969 | if (typeof isScrolling === 'undefined') { | |
| 5970 | isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x)) || (pageX < touchesStart.x && !app.rtl) || (pageX > touchesStart.x && app.rtl); | |
| 5971 | } | |
| 5972 | if (isScrolling || e.f7PreventSwipeBack || app.preventSwipeBack) { | |
| 5973 | isTouched = false; | |
| 5974 | return; | |
| 5975 | } | |
| 5976 | if (!isMoved) { | |
| 5977 | // Calc values during first move fired | |
| 5978 | var cancel = false; | |
| 5979 | var target = $(e.target); | |
| 5980 | ||
| 5981 | var swipeout = target.closest('.swipeout'); | |
| 5982 | if (swipeout.length > 0) { | |
| 5983 | if (!app.rtl && swipeout.find('.swipeout-actions-left').length > 0) { cancel = true; } | |
| 5984 | if (app.rtl && swipeout.find('.swipeout-actions-right').length > 0) { cancel = true; } | |
| 5985 | } | |
| 5986 | ||
| 5d51ea26 DC |
5987 | $currentPageEl = target.closest('.page'); |
| 5988 | if ($currentPageEl.hasClass('no-swipeback') || target.closest('.no-swipeback, .card-opened').length > 0) { cancel = true; } | |
| 5989 | $previousPageEl = $el.find('.page-previous:not(.stacked)'); | |
| 5990 | if ($previousPageEl.length > 1) { | |
| 5991 | $previousPageEl = $previousPageEl.eq($previousPageEl.length - 1); | |
| 5992 | } | |
| 5309fbda DC |
5993 | var notFromBorder = touchesStart.x - $el.offset().left > paramsSwipeBackActiveArea; |
| 5994 | viewContainerWidth = $el.width(); | |
| 5995 | if (app.rtl) { | |
| 5996 | notFromBorder = touchesStart.x < ($el.offset().left - $el[0].scrollLeft) + (viewContainerWidth - paramsSwipeBackActiveArea); | |
| 5997 | } else { | |
| 5998 | notFromBorder = touchesStart.x - $el.offset().left > paramsSwipeBackActiveArea; | |
| 5999 | } | |
| 6000 | if (notFromBorder) { cancel = true; } | |
| 5d51ea26 | 6001 | if ($previousPageEl.length === 0 || $currentPageEl.length === 0) { cancel = true; } |
| 5309fbda DC |
6002 | if (cancel) { |
| 6003 | isTouched = false; | |
| 6004 | return; | |
| 6005 | } | |
| 6006 | ||
| 6007 | if (paramsSwipeBackAnimateShadow) { | |
| 5d51ea26 DC |
6008 | $pageShadowEl = $currentPageEl.find('.page-shadow-effect'); |
| 6009 | if ($pageShadowEl.length === 0) { | |
| 6010 | $pageShadowEl = $('<div class="page-shadow-effect"></div>'); | |
| 6011 | $currentPageEl.append($pageShadowEl); | |
| 5309fbda DC |
6012 | } |
| 6013 | } | |
| 6014 | if (paramsSwipeBackAnimateOpacity) { | |
| 5d51ea26 DC |
6015 | $pageOpacityEl = $previousPageEl.find('.page-opacity-effect'); |
| 6016 | if ($pageOpacityEl.length === 0) { | |
| 6017 | $pageOpacityEl = $('<div class="page-opacity-effect"></div>'); | |
| 6018 | $previousPageEl.append($pageOpacityEl); | |
| 5309fbda DC |
6019 | } |
| 6020 | } | |
| 6021 | ||
| 6022 | if (dynamicNavbar) { | |
| 6023 | if (separateNavbar) { | |
| 5d51ea26 DC |
6024 | $currentNavbarInnerEl = $navbarEl.find('.navbar-current:not(.stacked)'); |
| 6025 | $previousNavbarInnerEl = $navbarEl.find('.navbar-previous:not(.stacked)'); | |
| 5309fbda | 6026 | } else { |
| 5d51ea26 DC |
6027 | $currentNavbarInnerEl = $currentPageEl.children('.navbar').children('.navbar-inner'); |
| 6028 | $previousNavbarInnerEl = $previousPageEl.children('.navbar').children('.navbar-inner'); | |
| 6029 | } | |
| 6030 | if ($previousNavbarInnerEl.length > 1) { | |
| 6031 | $previousNavbarInnerEl = $previousNavbarInnerEl.eq($previousNavbarInnerEl.length - 1); | |
| 5309fbda DC |
6032 | } |
| 6033 | ||
| 5d51ea26 | 6034 | animatableNavEls = animatableNavElements(); |
| 5309fbda DC |
6035 | } |
| 6036 | ||
| 6037 | // Close/Hide Any Picker | |
| 6038 | if ($('.sheet.modal-in').length > 0 && app.sheet) { | |
| 6039 | app.sheet.close($('.sheet.modal-in')); | |
| 6040 | } | |
| 6041 | } | |
| 6042 | e.f7PreventPanelSwipe = true; | |
| 6043 | isMoved = true; | |
| 6044 | app.preventSwipePanelBySwipeBack = true; | |
| 6045 | e.preventDefault(); | |
| 6046 | ||
| 6047 | // RTL inverter | |
| 6048 | var inverter = app.rtl ? -1 : 1; | |
| 6049 | ||
| 6050 | // Touches diff | |
| 6051 | touchesDiff = (pageX - touchesStart.x - paramsSwipeBackThreshold) * inverter; | |
| 6052 | if (touchesDiff < 0) { touchesDiff = 0; } | |
| 6053 | var percentage = Math.min(Math.max(touchesDiff / viewContainerWidth, 0), 1); | |
| 6054 | ||
| 6055 | // Swipe Back Callback | |
| 6056 | var callbackData = { | |
| 6057 | percentage: percentage, | |
| 6058 | progress: percentage, | |
| 5d51ea26 DC |
6059 | currentPageEl: $currentPageEl[0], |
| 6060 | previousPageEl: $previousPageEl[0], | |
| 6061 | currentNavbarEl: $currentNavbarInnerEl[0], | |
| 6062 | previousNavbarEl: $previousNavbarInnerEl[0], | |
| 5309fbda DC |
6063 | }; |
| 6064 | $el.trigger('swipeback:move', callbackData); | |
| 6065 | router.emit('swipebackMove', callbackData); | |
| 6066 | ||
| 6067 | // Transform pages | |
| 6068 | var currentPageTranslate = touchesDiff * inverter; | |
| 6069 | var previousPageTranslate = ((touchesDiff / 5) - (viewContainerWidth / 5)) * inverter; | |
| 6070 | if (!app.rtl) { | |
| 6071 | currentPageTranslate = Math.min(currentPageTranslate, viewContainerWidth); | |
| 6072 | previousPageTranslate = Math.min(previousPageTranslate, 0); | |
| 6073 | } else { | |
| 6074 | currentPageTranslate = Math.max(currentPageTranslate, -viewContainerWidth); | |
| 6075 | previousPageTranslate = Math.max(previousPageTranslate, 0); | |
| 6076 | } | |
| 6077 | if (Device.pixelRatio === 1) { | |
| 6078 | currentPageTranslate = Math.round(currentPageTranslate); | |
| 6079 | previousPageTranslate = Math.round(previousPageTranslate); | |
| 6080 | } | |
| 6081 | ||
| 6082 | router.swipeBackActive = true; | |
| 5d51ea26 | 6083 | $([$currentPageEl[0], $previousPageEl[0]]).addClass('page-swipeback-active'); |
| 5309fbda | 6084 | |
| 5d51ea26 DC |
6085 | $currentPageEl.transform(("translate3d(" + currentPageTranslate + "px,0,0)")); |
| 6086 | if (paramsSwipeBackAnimateShadow) { $pageShadowEl[0].style.opacity = 1 - (1 * percentage); } | |
| 5309fbda | 6087 | |
| 5d51ea26 DC |
6088 | if (app.theme === 'ios') { |
| 6089 | $previousPageEl.transform(("translate3d(" + previousPageTranslate + "px,0,0)")); | |
| 5309fbda | 6090 | } |
| 5d51ea26 | 6091 | if (paramsSwipeBackAnimateOpacity) { $pageShadowEl[0].style.opacity = 1 - (1 * percentage); } |
| 5309fbda DC |
6092 | |
| 6093 | // Dynamic Navbars Animation | |
| 6094 | if (!dynamicNavbar) { return; } | |
| 6095 | ||
| 6096 | setAnimatableNavElements({ progress: percentage }); | |
| 6097 | } | |
| 6098 | function handleTouchEnd() { | |
| 6099 | app.preventSwipePanelBySwipeBack = false; | |
| 6100 | if (!isTouched || !isMoved) { | |
| 6101 | isTouched = false; | |
| 6102 | isMoved = false; | |
| 6103 | return; | |
| 6104 | } | |
| 6105 | isTouched = false; | |
| 6106 | isMoved = false; | |
| 6107 | router.swipeBackActive = false; | |
| 5d51ea26 | 6108 | $([$currentPageEl[0], $previousPageEl[0]]).removeClass('page-swipeback-active'); |
| 5309fbda | 6109 | if (touchesDiff === 0) { |
| 5d51ea26 DC |
6110 | $([$currentPageEl[0], $previousPageEl[0]]).transform(''); |
| 6111 | if ($pageShadowEl && $pageShadowEl.length > 0) { $pageShadowEl.remove(); } | |
| 6112 | if ($pageOpacityEl && $pageOpacityEl.length > 0) { $pageOpacityEl.remove(); } | |
| 5309fbda DC |
6113 | if (dynamicNavbar) { |
| 6114 | setAnimatableNavElements({ reset: true }); | |
| 6115 | } | |
| 6116 | return; | |
| 6117 | } | |
| 6118 | var timeDiff = Utils.now() - touchStartTime; | |
| 6119 | var pageChanged = false; | |
| 6120 | // Swipe back to previous page | |
| 6121 | if ( | |
| 6122 | (timeDiff < 300 && touchesDiff > 10) | |
| 6123 | || (timeDiff >= 300 && touchesDiff > viewContainerWidth / 2) | |
| 6124 | ) { | |
| 5d51ea26 DC |
6125 | $currentPageEl.removeClass('page-current').addClass(("page-next" + (app.theme !== 'ios' ? ' page-next-on-right' : ''))); |
| 6126 | $previousPageEl.removeClass('page-previous').addClass('page-current').removeAttr('aria-hidden'); | |
| 6127 | if ($pageShadowEl) { $pageShadowEl[0].style.opacity = ''; } | |
| 6128 | if ($pageOpacityEl) { $pageOpacityEl[0].style.opacity = ''; } | |
| 5309fbda | 6129 | if (dynamicNavbar) { |
| 5d51ea26 DC |
6130 | $currentNavbarInnerEl.removeClass('navbar-current').addClass('navbar-next'); |
| 6131 | $previousNavbarInnerEl.removeClass('navbar-previous').addClass('navbar-current').removeAttr('aria-hidden'); | |
| 5309fbda DC |
6132 | } |
| 6133 | pageChanged = true; | |
| 6134 | } | |
| 6135 | // Reset custom styles | |
| 6136 | // Add transitioning class for transition-duration | |
| 5d51ea26 | 6137 | $([$currentPageEl[0], $previousPageEl[0]]).addClass('page-transitioning page-transitioning-swipeback').transform(''); |
| 5309fbda DC |
6138 | |
| 6139 | if (dynamicNavbar) { | |
| 6140 | setAnimatableNavElements({ progress: pageChanged ? 1 : 0, transition: true }); | |
| 6141 | } | |
| 6142 | allowViewTouchMove = false; | |
| 6143 | router.allowPageChange = false; | |
| 6144 | ||
| 6145 | // Swipe Back Callback | |
| 6146 | var callbackData = { | |
| 5d51ea26 DC |
6147 | currentPageEl: $currentPageEl[0], |
| 6148 | previousPageEl: $previousPageEl[0], | |
| 6149 | currentNavbarEl: $currentNavbarInnerEl[0], | |
| 6150 | previousNavbarEl: $previousNavbarInnerEl[0], | |
| 5309fbda DC |
6151 | }; |
| 6152 | ||
| 6153 | if (pageChanged) { | |
| 6154 | // Update Route | |
| 5d51ea26 DC |
6155 | router.currentRoute = $previousPageEl[0].f7Page.route; |
| 6156 | router.currentPage = $previousPageEl[0]; | |
| 5309fbda DC |
6157 | |
| 6158 | // Page before animation callback | |
| 5d51ea26 DC |
6159 | router.pageCallback('beforeOut', $currentPageEl, $currentNavbarInnerEl, 'current', 'next', { route: $currentPageEl[0].f7Page.route, swipeBack: true }); |
| 6160 | router.pageCallback('beforeIn', $previousPageEl, $previousNavbarInnerEl, 'previous', 'current', { route: $previousPageEl[0].f7Page.route, swipeBack: true }, $currentPageEl[0]); | |
| 5309fbda DC |
6161 | |
| 6162 | $el.trigger('swipeback:beforechange', callbackData); | |
| 6163 | router.emit('swipebackBeforeChange', callbackData); | |
| 6164 | } else { | |
| 6165 | $el.trigger('swipeback:beforereset', callbackData); | |
| 6166 | router.emit('swipebackBeforeReset', callbackData); | |
| 6167 | } | |
| 6168 | ||
| 5d51ea26 DC |
6169 | $currentPageEl.transitionEnd(function () { |
| 6170 | $([$currentPageEl[0], $previousPageEl[0]]).removeClass('page-transitioning page-transitioning-swipeback'); | |
| 5309fbda DC |
6171 | if (dynamicNavbar) { |
| 6172 | setAnimatableNavElements({ reset: true, transition: false }); | |
| 6173 | } | |
| 6174 | allowViewTouchMove = true; | |
| 6175 | router.allowPageChange = true; | |
| 6176 | if (pageChanged) { | |
| 6177 | // Update History | |
| 6178 | if (router.history.length === 1) { | |
| 6179 | router.history.unshift(router.url); | |
| 6180 | } | |
| 6181 | router.history.pop(); | |
| 6182 | router.saveHistory(); | |
| 6183 | ||
| 6184 | // Update push state | |
| 6185 | if (params.pushState) { | |
| 6186 | History.back(); | |
| 6187 | } | |
| 6188 | ||
| 6189 | // Page after animation callback | |
| 5d51ea26 DC |
6190 | router.pageCallback('afterOut', $currentPageEl, $currentNavbarInnerEl, 'current', 'next', { route: $currentPageEl[0].f7Page.route, swipeBack: true }); |
| 6191 | router.pageCallback('afterIn', $previousPageEl, $previousNavbarInnerEl, 'previous', 'current', { route: $previousPageEl[0].f7Page.route, swipeBack: true }); | |
| 5309fbda DC |
6192 | |
| 6193 | // Remove Old Page | |
| 5d51ea26 DC |
6194 | if (params.stackPages && router.initialPages.indexOf($currentPageEl[0]) >= 0) { |
| 6195 | $currentPageEl.addClass('stacked'); | |
| 5309fbda | 6196 | if (separateNavbar) { |
| 5d51ea26 | 6197 | $currentNavbarInnerEl.addClass('stacked'); |
| 5309fbda DC |
6198 | } |
| 6199 | } else { | |
| 5d51ea26 DC |
6200 | router.pageCallback('beforeRemove', $currentPageEl, $currentNavbarInnerEl, 'next', { swipeBack: true }); |
| 6201 | router.removePage($currentPageEl); | |
| 5309fbda | 6202 | if (separateNavbar) { |
| 5d51ea26 | 6203 | router.removeNavbar($currentNavbarInnerEl); |
| 5309fbda DC |
6204 | } |
| 6205 | } | |
| 6206 | ||
| 6207 | $el.trigger('swipeback:afterchange', callbackData); | |
| 6208 | router.emit('swipebackAfterChange', callbackData); | |
| 6209 | ||
| 6210 | router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| 6211 | ||
| 6212 | if (params.preloadPreviousPage) { | |
| 6213 | router.back(router.history[router.history.length - 2], { preload: true }); | |
| 6214 | } | |
| 6215 | } else { | |
| 6216 | $el.trigger('swipeback:afterreset', callbackData); | |
| 6217 | router.emit('swipebackAfterReset', callbackData); | |
| 6218 | } | |
| 5d51ea26 DC |
6219 | if ($pageShadowEl && $pageShadowEl.length > 0) { $pageShadowEl.remove(); } |
| 6220 | if ($pageOpacityEl && $pageOpacityEl.length > 0) { $pageOpacityEl.remove(); } | |
| 5309fbda DC |
6221 | }); |
| 6222 | } | |
| 6223 | ||
| 6224 | function attachEvents() { | |
| 6225 | var passiveListener = (app.touchEvents.start === 'touchstart' && Support.passiveListener) ? { passive: true, capture: false } : false; | |
| 6226 | $el.on(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 6227 | app.on('touchmove:active', handleTouchMove); | |
| 6228 | app.on('touchend:passive', handleTouchEnd); | |
| 6229 | } | |
| 6230 | function detachEvents() { | |
| 6231 | var passiveListener = (app.touchEvents.start === 'touchstart' && Support.passiveListener) ? { passive: true, capture: false } : false; | |
| 6232 | $el.off(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 6233 | app.off('touchmove:active', handleTouchMove); | |
| 6234 | app.off('touchend:passive', handleTouchEnd); | |
| 6235 | } | |
| 6236 | ||
| 6237 | attachEvents(); | |
| 6238 | ||
| 6239 | router.on('routerDestroy', detachEvents); | |
| 6240 | } | |
| 6241 | ||
| 6242 | function redirect (direction, route, options) { | |
| 6243 | var router = this; | |
| 6244 | var redirect = route.route.redirect; | |
| 6245 | if (options.initial && router.params.pushState) { | |
| 6246 | options.replaceState = true; // eslint-disable-line | |
| 6247 | options.history = true; // eslint-disable-line | |
| 6248 | } | |
| 6249 | function redirectResolve(redirectUrl, redirectOptions) { | |
| 6250 | if ( redirectOptions === void 0 ) redirectOptions = {}; | |
| 6251 | ||
| 6252 | router.allowPageChange = true; | |
| 6253 | router[direction](redirectUrl, Utils.extend({}, options, redirectOptions)); | |
| 6254 | } | |
| 6255 | function redirectReject() { | |
| 6256 | router.allowPageChange = true; | |
| 6257 | } | |
| 6258 | if (typeof redirect === 'function') { | |
| 6259 | router.allowPageChange = false; | |
| 6260 | var redirectUrl = redirect.call(router, route, redirectResolve, redirectReject); | |
| 6261 | if (redirectUrl && typeof redirectUrl === 'string') { | |
| 6262 | router.allowPageChange = true; | |
| 6263 | return router[direction](redirectUrl, options); | |
| 6264 | } | |
| 6265 | return router; | |
| 6266 | } | |
| 6267 | return router[direction](redirect, options); | |
| 6268 | } | |
| 6269 | ||
| 6270 | function processQueue(router, routerQueue, routeQueue, to, from, resolve, reject) { | |
| 6271 | var queue = []; | |
| 6272 | ||
| 6273 | if (Array.isArray(routeQueue)) { | |
| 6274 | queue.push.apply(queue, routeQueue); | |
| 6275 | } else if (routeQueue && typeof routeQueue === 'function') { | |
| 6276 | queue.push(routeQueue); | |
| 6277 | } | |
| 6278 | if (routerQueue) { | |
| 6279 | if (Array.isArray(routerQueue)) { | |
| 6280 | queue.push.apply(queue, routerQueue); | |
| 6281 | } else { | |
| 6282 | queue.push(routerQueue); | |
| 6283 | } | |
| 6284 | } | |
| 6285 | ||
| 6286 | function next() { | |
| 6287 | if (queue.length === 0) { | |
| 6288 | resolve(); | |
| 6289 | return; | |
| 6290 | } | |
| 6291 | var queueItem = queue.shift(); | |
| 6292 | ||
| 6293 | queueItem.call( | |
| 6294 | router, | |
| 6295 | to, | |
| 6296 | from, | |
| 6297 | function () { | |
| 6298 | next(); | |
| 6299 | }, | |
| 6300 | function () { | |
| 6301 | reject(); | |
| 6302 | } | |
| 6303 | ); | |
| 6304 | } | |
| 6305 | next(); | |
| 6306 | } | |
| 6307 | ||
| 6308 | function processRouteQueue (to, from, resolve, reject) { | |
| 6309 | var router = this; | |
| 6310 | function enterNextRoute() { | |
| 6311 | if (to && to.route && (router.params.routesBeforeEnter || to.route.beforeEnter)) { | |
| 6312 | router.allowPageChange = false; | |
| 6313 | processQueue( | |
| 6314 | router, | |
| 6315 | router.params.routesBeforeEnter, | |
| 6316 | to.route.beforeEnter, | |
| 6317 | to, | |
| 6318 | from, | |
| 6319 | function () { | |
| 6320 | router.allowPageChange = true; | |
| 6321 | resolve(); | |
| 6322 | }, | |
| 6323 | function () { | |
| 6324 | reject(); | |
| 6325 | } | |
| 6326 | ); | |
| 6327 | } else { | |
| 6328 | resolve(); | |
| 6329 | } | |
| 6330 | } | |
| 6331 | function leaveCurrentRoute() { | |
| 6332 | if (from && from.route && (router.params.routesBeforeLeave || from.route.beforeLeave)) { | |
| 6333 | router.allowPageChange = false; | |
| 6334 | processQueue( | |
| 6335 | router, | |
| 6336 | router.params.routesBeforeLeave, | |
| 6337 | from.route.beforeLeave, | |
| 6338 | to, | |
| 6339 | from, | |
| 6340 | function () { | |
| 6341 | router.allowPageChange = true; | |
| 6342 | enterNextRoute(); | |
| 6343 | }, | |
| 6344 | function () { | |
| 6345 | reject(); | |
| 6346 | } | |
| 6347 | ); | |
| 6348 | } else { | |
| 6349 | enterNextRoute(); | |
| 6350 | } | |
| 6351 | } | |
| 6352 | leaveCurrentRoute(); | |
| 6353 | } | |
| 6354 | ||
| 6355 | function appRouterCheck (router, method) { | |
| 6356 | if (!router.view) { | |
| 6357 | throw new Error(("Framework7: it is not allowed to use router methods on global app router. Use router methods only on related View, e.g. app.views.main.router." + method + "(...)")); | |
| 6358 | } | |
| 6359 | } | |
| 6360 | ||
| 6361 | function refreshPage() { | |
| 6362 | var router = this; | |
| 6363 | appRouterCheck(router, 'refreshPage'); | |
| 6364 | return router.navigate(router.currentRoute.url, { | |
| 6365 | ignoreCache: true, | |
| 6366 | reloadCurrent: true, | |
| 6367 | }); | |
| 6368 | } | |
| 6369 | ||
| 6370 | function forward(el, forwardOptions) { | |
| 6371 | if ( forwardOptions === void 0 ) forwardOptions = {}; | |
| 6372 | ||
| 6373 | var router = this; | |
| 6374 | var $el = $(el); | |
| 6375 | var app = router.app; | |
| 6376 | var view = router.view; | |
| 6377 | var options = Utils.extend(false, { | |
| 6378 | animate: router.params.animate, | |
| 6379 | pushState: true, | |
| 6380 | replaceState: false, | |
| 6381 | history: true, | |
| 6382 | reloadCurrent: router.params.reloadPages, | |
| 6383 | reloadPrevious: false, | |
| 6384 | reloadAll: false, | |
| 6385 | clearPreviousHistory: false, | |
| 6386 | reloadDetail: router.params.reloadDetail, | |
| 6387 | on: {}, | |
| 6388 | }, forwardOptions); | |
| 6389 | ||
| 6390 | var masterDetailEnabled = router.params.masterDetailBreakpoint > 0; | |
| 6391 | var isMaster = masterDetailEnabled && options.route && options.route.route && options.route.route.master === true; | |
| 6392 | var masterPageEl; | |
| 6393 | var otherDetailPageEl; | |
| 6394 | ||
| 6395 | var currentRouteIsModal = router.currentRoute.modal; | |
| 6396 | var modalType; | |
| 6397 | if (!currentRouteIsModal) { | |
| 6398 | ('popup popover sheet loginScreen actions customModal panel').split(' ').forEach(function (modalLoadProp) { | |
| 6399 | if (router.currentRoute && router.currentRoute.route && router.currentRoute.route[modalLoadProp]) { | |
| 6400 | currentRouteIsModal = true; | |
| 6401 | modalType = modalLoadProp; | |
| 6402 | } | |
| 6403 | }); | |
| 6404 | } | |
| 6405 | ||
| 6406 | if (currentRouteIsModal) { | |
| 6407 | var modalToClose = router.currentRoute.modal | |
| 6408 | || router.currentRoute.route.modalInstance | |
| 6409 | || app[modalType].get(); | |
| 6410 | var previousUrl = router.history[router.history.length - 2]; | |
| 6411 | var previousRoute = router.findMatchingRoute(previousUrl); | |
| 6412 | if (!previousRoute && previousUrl) { | |
| 6413 | previousRoute = { | |
| 6414 | url: previousUrl, | |
| 6415 | path: previousUrl.split('?')[0], | |
| 6416 | query: Utils.parseUrlQuery(previousUrl), | |
| 6417 | route: { | |
| 6418 | path: previousUrl.split('?')[0], | |
| 6419 | url: previousUrl, | |
| 6420 | }, | |
| 6421 | }; | |
| 6422 | } | |
| 6423 | ||
| 6424 | router.modalRemove(modalToClose); | |
| 6425 | } | |
| 6426 | ||
| 6427 | var dynamicNavbar = router.dynamicNavbar; | |
| 6428 | var separateNavbar = router.separateNavbar; | |
| 6429 | ||
| 6430 | var $viewEl = router.$el; | |
| 6431 | var $newPage = $el; | |
| 6432 | var reload = options.reloadPrevious || options.reloadCurrent || options.reloadAll; | |
| 6433 | var $oldPage; | |
| 6434 | ||
| 6435 | var $navbarEl; | |
| 6436 | var $newNavbarInner; | |
| 6437 | var $oldNavbarInner; | |
| 6438 | ||
| 6439 | router.allowPageChange = false; | |
| 6440 | if ($newPage.length === 0) { | |
| 6441 | router.allowPageChange = true; | |
| 6442 | return router; | |
| 6443 | } | |
| 6444 | ||
| 6445 | if ($newPage.length) { | |
| 6446 | // Remove theme elements | |
| 6447 | router.removeThemeElements($newPage); | |
| 6448 | } | |
| 6449 | ||
| 6450 | if (dynamicNavbar) { | |
| 6451 | $newNavbarInner = $newPage.children('.navbar').children('.navbar-inner'); | |
| 6452 | if (separateNavbar) { | |
| 6453 | $navbarEl = router.$navbarEl; | |
| 6454 | if ($newNavbarInner.length > 0) { | |
| 6455 | $newPage.children('.navbar').remove(); | |
| 6456 | } | |
| 6457 | if ($newNavbarInner.length === 0 && $newPage[0] && $newPage[0].f7Page) { | |
| 6458 | // Try from pageData | |
| 6459 | $newNavbarInner = $newPage[0].f7Page.$navbarEl; | |
| 6460 | } | |
| 6461 | } | |
| 6462 | } | |
| 6463 | ||
| 6464 | // Save Keep Alive Cache | |
| 6465 | if (options.route && options.route.route && options.route.route.keepAlive && !options.route.route.keepAliveData) { | |
| 6466 | options.route.route.keepAliveData = { | |
| 6467 | pageEl: $el[0], | |
| 6468 | }; | |
| 6469 | } | |
| 6470 | ||
| 6471 | // Pages In View | |
| 6472 | var $pagesInView = $viewEl | |
| 6473 | .children('.page:not(.stacked)') | |
| 6474 | .filter(function (index, pageInView) { return pageInView !== $newPage[0]; }); | |
| 6475 | ||
| 6476 | // Navbars In View | |
| 6477 | var $navbarsInView; | |
| 6478 | if (separateNavbar) { | |
| 6479 | $navbarsInView = $navbarEl | |
| 6480 | .children('.navbar-inner:not(.stacked)') | |
| 6481 | .filter(function (index, navbarInView) { return navbarInView !== $newNavbarInner[0]; }); | |
| 6482 | } | |
| 6483 | ||
| 6484 | // Exit when reload previous and only 1 page in view so nothing ro reload | |
| 6485 | if (options.reloadPrevious && $pagesInView.length < 2) { | |
| 6486 | router.allowPageChange = true; | |
| 6487 | return router; | |
| 6488 | } | |
| 6489 | ||
| 6490 | // Find Detail' master page | |
| 6491 | var isDetail; | |
| 6492 | var reloadDetail; | |
| 6493 | if (masterDetailEnabled && !options.reloadAll) { | |
| 6494 | for (var i = 0; i < $pagesInView.length; i += 1) { | |
| 6495 | if (!masterPageEl | |
| 6496 | && $pagesInView[i].classList.contains('page-master') | |
| 6497 | ) { | |
| 6498 | masterPageEl = $pagesInView[i]; | |
| 6499 | continue; // eslint-disable-line | |
| 6500 | } | |
| 6501 | } | |
| 6502 | isDetail = !isMaster && masterPageEl; | |
| 6503 | ||
| 6504 | if (isDetail) { | |
| 6505 | // Find Other Detail | |
| 6506 | if (masterPageEl) { | |
| 6507 | for (var i$1 = 0; i$1 < $pagesInView.length; i$1 += 1) { | |
| 6508 | if ($pagesInView[i$1].classList.contains('page-master-detail') | |
| 6509 | ) { | |
| 6510 | otherDetailPageEl = $pagesInView[i$1]; | |
| 6511 | continue; // eslint-disable-line | |
| 6512 | } | |
| 6513 | } | |
| 6514 | } | |
| 6515 | } | |
| 6516 | reloadDetail = isDetail && options.reloadDetail && app.width >= router.params.masterDetailBreakpoint && masterPageEl; | |
| 6517 | } | |
| 6518 | ||
| 6519 | // New Page | |
| 6520 | var newPagePosition = 'next'; | |
| 6521 | if (options.reloadCurrent || options.reloadAll || reloadDetail) { | |
| 6522 | newPagePosition = 'current'; | |
| 6523 | } else if (options.reloadPrevious) { | |
| 6524 | newPagePosition = 'previous'; | |
| 6525 | } | |
| 6526 | $newPage | |
| 5d51ea26 | 6527 | .removeClass('page-previous page-current page-next') |
| 5309fbda DC |
6528 | .addClass(("page-" + newPagePosition + (isMaster ? ' page-master' : '') + (isDetail ? ' page-master-detail' : ''))) |
| 6529 | .removeClass('stacked') | |
| 6530 | .trigger('page:unstack') | |
| 6531 | .trigger('page:position', { position: newPagePosition }); | |
| 5d51ea26 DC |
6532 | router.emit('pageUnstack', $newPage[0]); |
| 6533 | router.emit('pagePosition', $newPage[0], newPagePosition); | |
| 6534 | ||
| 5309fbda DC |
6535 | if (isMaster || isDetail) { |
| 6536 | $newPage.trigger('page:role', { role: isMaster ? 'master' : 'detail' }); | |
| 6537 | } | |
| 6538 | ||
| 6539 | ||
| 6540 | if (dynamicNavbar && $newNavbarInner.length) { | |
| 6541 | $newNavbarInner | |
| 5d51ea26 | 6542 | .removeClass('navbar-previous navbar-current navbar-next') |
| 5309fbda DC |
6543 | .addClass(("navbar-" + newPagePosition + (isMaster ? ' navbar-master' : '') + (isDetail ? ' navbar-master-detail' : ''))) |
| 6544 | .removeClass('stacked'); | |
| 6545 | } | |
| 6546 | ||
| 6547 | // Find Old Page | |
| 6548 | if (options.reloadCurrent || reloadDetail) { | |
| 6549 | $oldPage = $pagesInView.eq($pagesInView.length - 1); | |
| 6550 | if (separateNavbar) { | |
| 6551 | // $oldNavbarInner = $navbarsInView.eq($pagesInView.length - 1); | |
| 6552 | $oldNavbarInner = $(app.navbar.getElByPage($oldPage)); | |
| 6553 | } | |
| 6554 | } else if (options.reloadPrevious) { | |
| 6555 | $oldPage = $pagesInView.eq($pagesInView.length - 2); | |
| 6556 | if (separateNavbar) { | |
| 6557 | // $oldNavbarInner = $navbarsInView.eq($pagesInView.length - 2); | |
| 6558 | $oldNavbarInner = $(app.navbar.getElByPage($oldPage)); | |
| 6559 | } | |
| 6560 | } else if (options.reloadAll) { | |
| 6561 | $oldPage = $pagesInView.filter(function (index, pageEl) { return pageEl !== $newPage[0]; }); | |
| 6562 | if (separateNavbar) { | |
| 6563 | $oldNavbarInner = $navbarsInView.filter(function (index, navbarEl) { return navbarEl !== $newNavbarInner[0]; }); | |
| 6564 | } | |
| 6565 | } else { | |
| 6566 | if ($pagesInView.length > 1) { | |
| 6567 | var i$2 = 0; | |
| 6568 | for (i$2 = 0; i$2 < $pagesInView.length - 1; i$2 += 1) { | |
| 6569 | if (masterPageEl | |
| 6570 | && $pagesInView[i$2] === masterPageEl | |
| 6571 | ) { | |
| 6572 | $pagesInView.eq(i$2).addClass('page-master-stacked'); | |
| 6573 | $pagesInView.eq(i$2).trigger('page:masterstack'); | |
| 5d51ea26 | 6574 | router.emit('pageMasterStack', $pagesInView[i$2]); |
| 5309fbda DC |
6575 | if (separateNavbar) { |
| 6576 | $(app.navbar.getElByPage(masterPageEl)).addClass('navbar-master-stacked'); | |
| 6577 | } | |
| 6578 | continue; // eslint-disable-line | |
| 6579 | } | |
| 6580 | var oldNavbarInnerEl = app.navbar.getElByPage($pagesInView.eq(i$2)); | |
| 6581 | if (router.params.stackPages) { | |
| 6582 | $pagesInView.eq(i$2).addClass('stacked'); | |
| 6583 | $pagesInView.eq(i$2).trigger('page:stack'); | |
| 5d51ea26 | 6584 | router.emit('pageStack', $pagesInView[i$2]); |
| 5309fbda DC |
6585 | if (separateNavbar) { |
| 6586 | $(oldNavbarInnerEl).addClass('stacked'); | |
| 6587 | } | |
| 6588 | } else { | |
| 6589 | // Page remove event | |
| 6590 | router.pageCallback('beforeRemove', $pagesInView[i$2], $navbarsInView && $navbarsInView[i$2], 'previous', undefined, options); | |
| 6591 | router.removePage($pagesInView[i$2]); | |
| 6592 | if (separateNavbar && oldNavbarInnerEl) { | |
| 6593 | router.removeNavbar(oldNavbarInnerEl); | |
| 6594 | } | |
| 6595 | } | |
| 6596 | } | |
| 6597 | } | |
| 6598 | $oldPage = $viewEl | |
| 6599 | .children('.page:not(.stacked)') | |
| 6600 | .filter(function (index, page) { return page !== $newPage[0]; }); | |
| 6601 | if (separateNavbar) { | |
| 6602 | $oldNavbarInner = $navbarEl | |
| 6603 | .children('.navbar-inner:not(.stacked)') | |
| 6604 | .filter(function (index, navbarInner) { return navbarInner !== $newNavbarInner[0]; }); | |
| 6605 | } | |
| 6606 | } | |
| 6607 | ||
| 6608 | if (dynamicNavbar && !separateNavbar) { | |
| 6609 | $oldNavbarInner = $oldPage.children('.navbar').children('.navbar-inner'); | |
| 6610 | } | |
| 6611 | if (isDetail && !options.reloadAll) { | |
| 6612 | if ($oldPage.length > 1 || reloadDetail) { | |
| 6613 | $oldPage = $oldPage.filter(function (pageIndex, pageEl) { return !pageEl.classList.contains('page-master'); }); | |
| 6614 | } | |
| 6615 | if ($oldNavbarInner && ($oldNavbarInner.length > 1 || reloadDetail)) { | |
| 6616 | $oldNavbarInner = $oldNavbarInner.filter(function (navbarIndex, navbarEl) { return !navbarEl.classList.contains('navbar-master'); }); | |
| 6617 | } | |
| 6618 | } | |
| 6619 | ||
| 6620 | // Push State | |
| 6621 | if (router.params.pushState && (options.pushState || options.replaceState) && !options.reloadPrevious) { | |
| 6622 | var pushStateRoot = router.params.pushStateRoot || ''; | |
| 6623 | History[options.reloadCurrent || (reloadDetail && otherDetailPageEl) || options.reloadAll || options.replaceState ? 'replace' : 'push']( | |
| 6624 | view.id, | |
| 6625 | { | |
| 6626 | url: options.route.url, | |
| 6627 | }, | |
| 6628 | pushStateRoot + router.params.pushStateSeparator + options.route.url | |
| 6629 | ); | |
| 6630 | } | |
| 6631 | ||
| 6632 | if (!options.reloadPrevious) { | |
| 6633 | // Current Page & Navbar | |
| 6634 | router.currentPageEl = $newPage[0]; | |
| 6635 | if (dynamicNavbar && $newNavbarInner.length) { | |
| 6636 | router.currentNavbarEl = $newNavbarInner[0]; | |
| 6637 | } else { | |
| 6638 | delete router.currentNavbarEl; | |
| 6639 | } | |
| 6640 | ||
| 6641 | // Current Route | |
| 6642 | router.currentRoute = options.route; | |
| 6643 | } | |
| 6644 | ||
| 6645 | // Update router history | |
| 6646 | var url = options.route.url; | |
| 6647 | ||
| 6648 | if (options.history) { | |
| 6649 | if (((options.reloadCurrent || (reloadDetail && otherDetailPageEl)) && router.history.length) > 0 || options.replaceState) { | |
| 6650 | router.history[router.history.length - (options.reloadPrevious ? 2 : 1)] = url; | |
| 6651 | } else if (options.reloadPrevious) { | |
| 6652 | router.history[router.history.length - 2] = url; | |
| 6653 | } else if (options.reloadAll) { | |
| 6654 | router.history = [url]; | |
| 6655 | } else { | |
| 6656 | router.history.push(url); | |
| 6657 | } | |
| 6658 | } | |
| 6659 | router.saveHistory(); | |
| 6660 | ||
| 6661 | // Insert new page and navbar | |
| 6662 | var newPageInDom = $newPage.parents(doc).length > 0; | |
| 6663 | var f7Component = $newPage[0].f7Component; | |
| 6664 | if (options.reloadPrevious) { | |
| 6665 | if (f7Component && !newPageInDom) { | |
| 6666 | f7Component.$mount(function (componentEl) { | |
| 6667 | $(componentEl).insertBefore($oldPage); | |
| 6668 | }); | |
| 6669 | } else { | |
| 6670 | $newPage.insertBefore($oldPage); | |
| 6671 | } | |
| 6672 | if (separateNavbar && $newNavbarInner.length) { | |
| 6673 | if ($newNavbarInner.children('.title-large').length) { | |
| 6674 | $newNavbarInner.addClass('navbar-inner-large'); | |
| 6675 | } | |
| 6676 | if ($oldNavbarInner.length) { | |
| 6677 | $newNavbarInner.insertBefore($oldNavbarInner); | |
| 6678 | } else { | |
| 6679 | if (!router.$navbarEl.parents(doc).length) { | |
| 6680 | router.$el.prepend(router.$navbarEl); | |
| 6681 | } | |
| 6682 | $navbarEl.append($newNavbarInner); | |
| 6683 | } | |
| 6684 | } | |
| 6685 | } else { | |
| 6686 | if ($oldPage.next('.page')[0] !== $newPage[0]) { | |
| 6687 | if (f7Component && !newPageInDom) { | |
| 6688 | f7Component.$mount(function (componentEl) { | |
| 6689 | $viewEl.append(componentEl); | |
| 6690 | }); | |
| 6691 | } else { | |
| 6692 | $viewEl.append($newPage[0]); | |
| 6693 | } | |
| 6694 | } | |
| 6695 | if (separateNavbar && $newNavbarInner.length) { | |
| 6696 | if ($newNavbarInner.children('.title-large').length) { | |
| 6697 | $newNavbarInner.addClass('navbar-inner-large'); | |
| 6698 | } | |
| 6699 | if (!router.$navbarEl.parents(doc).length) { | |
| 6700 | router.$el.prepend(router.$navbarEl); | |
| 6701 | } | |
| 6702 | $navbarEl.append($newNavbarInner[0]); | |
| 6703 | } | |
| 6704 | } | |
| 6705 | if (!newPageInDom) { | |
| 6706 | router.pageCallback('mounted', $newPage, $newNavbarInner, newPagePosition, reload ? newPagePosition : 'current', options, $oldPage); | |
| 6707 | } else if (options.route && options.route.route && options.route.route.keepAlive && !$newPage[0].f7PageMounted) { | |
| 6708 | $newPage[0].f7PageMounted = true; | |
| 6709 | router.pageCallback('mounted', $newPage, $newNavbarInner, newPagePosition, reload ? newPagePosition : 'current', options, $oldPage); | |
| 6710 | } | |
| 6711 | ||
| 6712 | // Remove old page | |
| 6713 | if ((options.reloadCurrent || reloadDetail) && $oldPage.length > 0) { | |
| 6714 | if (router.params.stackPages && router.initialPages.indexOf($oldPage[0]) >= 0) { | |
| 6715 | $oldPage.addClass('stacked'); | |
| 6716 | $oldPage.trigger('page:stack'); | |
| 5d51ea26 | 6717 | router.emit('pageStack', $oldPage[0]); |
| 5309fbda DC |
6718 | if (separateNavbar) { |
| 6719 | $oldNavbarInner.addClass('stacked'); | |
| 6720 | } | |
| 6721 | } else { | |
| 6722 | // Page remove event | |
| 5d51ea26 DC |
6723 | router.pageCallback('beforeOut', $oldPage, $oldNavbarInner, 'current', undefined, options); |
| 6724 | router.pageCallback('afterOut', $oldPage, $oldNavbarInner, 'current', undefined, options); | |
| 6725 | router.pageCallback('beforeRemove', $oldPage, $oldNavbarInner, 'current', undefined, options); | |
| 5309fbda DC |
6726 | router.removePage($oldPage); |
| 6727 | if (separateNavbar && $oldNavbarInner && $oldNavbarInner.length) { | |
| 6728 | router.removeNavbar($oldNavbarInner); | |
| 6729 | } | |
| 6730 | } | |
| 6731 | } else if (options.reloadAll) { | |
| 6732 | $oldPage.each(function (index, pageEl) { | |
| 6733 | var $oldPageEl = $(pageEl); | |
| 6734 | var $oldNavbarInnerEl = $(app.navbar.getElByPage($oldPageEl)); | |
| 6735 | if (router.params.stackPages && router.initialPages.indexOf($oldPageEl[0]) >= 0) { | |
| 6736 | $oldPageEl.addClass('stacked'); | |
| 6737 | $oldPageEl.trigger('page:stack'); | |
| 5d51ea26 | 6738 | router.emit('pageStack', $oldPageEl[0]); |
| 5309fbda DC |
6739 | if (separateNavbar) { |
| 6740 | $oldNavbarInnerEl.addClass('stacked'); | |
| 6741 | } | |
| 6742 | } else { | |
| 6743 | // Page remove event | |
| 5d51ea26 DC |
6744 | if ($oldPageEl.hasClass('page-current')) { |
| 6745 | router.pageCallback('beforeOut', $oldPage, $oldNavbarInner, 'current', undefined, options); | |
| 6746 | router.pageCallback('afterOut', $oldPage, $oldNavbarInner, 'current', undefined, options); | |
| 6747 | } | |
| 5309fbda DC |
6748 | router.pageCallback('beforeRemove', $oldPageEl, $oldNavbarInner && $oldNavbarInner.eq(index), 'previous', undefined, options); |
| 6749 | router.removePage($oldPageEl); | |
| 6750 | if (separateNavbar && $oldNavbarInnerEl.length) { | |
| 6751 | router.removeNavbar($oldNavbarInnerEl); | |
| 6752 | } | |
| 6753 | } | |
| 6754 | }); | |
| 6755 | } else if (options.reloadPrevious) { | |
| 6756 | if (router.params.stackPages && router.initialPages.indexOf($oldPage[0]) >= 0) { | |
| 6757 | $oldPage.addClass('stacked'); | |
| 6758 | $oldPage.trigger('page:stack'); | |
| 5d51ea26 | 6759 | router.emit('pageStack', $oldPage[0]); |
| 5309fbda DC |
6760 | if (separateNavbar) { |
| 6761 | $oldNavbarInner.addClass('stacked'); | |
| 6762 | } | |
| 6763 | } else { | |
| 6764 | // Page remove event | |
| 6765 | router.pageCallback('beforeRemove', $oldPage, $oldNavbarInner, 'previous', undefined, options); | |
| 6766 | router.removePage($oldPage); | |
| 6767 | if (separateNavbar && $oldNavbarInner && $oldNavbarInner.length) { | |
| 6768 | router.removeNavbar($oldNavbarInner); | |
| 6769 | } | |
| 6770 | } | |
| 6771 | } | |
| 6772 | ||
| 6773 | // Load Tab | |
| 6774 | if (options.route.route.tab) { | |
| 6775 | router.tabLoad(options.route.route.tab, Utils.extend({}, options, { | |
| 6776 | history: false, | |
| 6777 | pushState: false, | |
| 6778 | })); | |
| 6779 | } | |
| 6780 | ||
| 6781 | // Page init and before init events | |
| 6782 | router.pageCallback('init', $newPage, $newNavbarInner, newPagePosition, reload ? newPagePosition : 'current', options, $oldPage); | |
| 6783 | ||
| 6784 | if (options.reloadCurrent || options.reloadAll || reloadDetail) { | |
| 6785 | router.allowPageChange = true; | |
| 6786 | router.pageCallback('beforeIn', $newPage, $newNavbarInner, newPagePosition, 'current', options); | |
| 5d51ea26 DC |
6787 | $newPage.removeAttr('aria-hidden'); |
| 6788 | if (dynamicNavbar && $newNavbarInner) { | |
| 6789 | $newNavbarInner.removeAttr('aria-hidden'); | |
| 6790 | } | |
| 5309fbda DC |
6791 | router.pageCallback('afterIn', $newPage, $newNavbarInner, newPagePosition, 'current', options); |
| 6792 | if (options.reloadCurrent && options.clearPreviousHistory) { router.clearPreviousHistory(); } | |
| 6793 | if (reloadDetail) { | |
| 6794 | masterPageEl.classList.add('page-previous'); | |
| 6795 | masterPageEl.classList.remove('page-current'); | |
| 6796 | $(masterPageEl).trigger('page:position', { position: 'previous' }); | |
| 5d51ea26 DC |
6797 | router.emit('pagePosition', masterPageEl, 'previous'); |
| 6798 | ||
| 5309fbda DC |
6799 | if (masterPageEl.f7Page && masterPageEl.f7Page.navbarEl) { |
| 6800 | masterPageEl.f7Page.navbarEl.classList.add('navbar-previous'); | |
| 6801 | masterPageEl.f7Page.navbarEl.classList.remove('navbar-current'); | |
| 6802 | } | |
| 6803 | } | |
| 6804 | return router; | |
| 6805 | } | |
| 6806 | if (options.reloadPrevious) { | |
| 6807 | router.allowPageChange = true; | |
| 6808 | return router; | |
| 6809 | } | |
| 6810 | ||
| 6811 | // Before animation event | |
| 5309fbda | 6812 | router.pageCallback('beforeOut', $oldPage, $oldNavbarInner, 'current', 'previous', options); |
| 5d51ea26 | 6813 | router.pageCallback('beforeIn', $newPage, $newNavbarInner, 'next', 'current', options); |
| 5309fbda DC |
6814 | |
| 6815 | // Animation | |
| 6816 | function afterAnimation() { | |
| 6817 | var pageClasses = 'page-previous page-current page-next'; | |
| 6818 | var navbarClasses = 'navbar-previous navbar-current navbar-next'; | |
| 6819 | $newPage.removeClass(pageClasses).addClass('page-current').removeAttr('aria-hidden').trigger('page:position', { position: 'current' }); | |
| 5d51ea26 | 6820 | router.emit('pagePosition', $newPage[0], 'current'); |
| 5309fbda | 6821 | $oldPage.removeClass(pageClasses).addClass('page-previous').trigger('page:position', { position: 'previous' }); |
| 5d51ea26 DC |
6822 | router.emit('pagePosition', $oldPage[0], 'previous'); |
| 6823 | ||
| 5309fbda DC |
6824 | if (!$oldPage.hasClass('page-master')) { |
| 6825 | $oldPage.attr('aria-hidden', 'true'); | |
| 6826 | } | |
| 6827 | if (dynamicNavbar) { | |
| 6828 | $newNavbarInner.removeClass(navbarClasses).addClass('navbar-current').removeAttr('aria-hidden'); | |
| 6829 | $oldNavbarInner.removeClass(navbarClasses).addClass('navbar-previous'); | |
| 6830 | if (!$oldNavbarInner.hasClass('navbar-master')) { | |
| 6831 | $oldNavbarInner.attr('aria-hidden', 'true'); | |
| 6832 | } | |
| 6833 | } | |
| 6834 | // After animation event | |
| 6835 | router.allowPageChange = true; | |
| 5309fbda | 6836 | router.pageCallback('afterOut', $oldPage, $oldNavbarInner, 'current', 'previous', options); |
| 5d51ea26 | 6837 | router.pageCallback('afterIn', $newPage, $newNavbarInner, 'next', 'current', options); |
| 5309fbda | 6838 | |
| 5d51ea26 | 6839 | var keepOldPage = (router.params.preloadPreviousPage || router.params[((app.theme) + "SwipeBack")]) && !isMaster; |
| 5309fbda | 6840 | if (!keepOldPage) { |
| 5d51ea26 | 6841 | if ($newPage.hasClass('smart-select-page') || $newPage.hasClass('photo-browser-page') || $newPage.hasClass('autocomplete-page') || $newPage.hasClass('color-picker-page')) { |
| 5309fbda DC |
6842 | keepOldPage = true; |
| 6843 | } | |
| 6844 | } | |
| 6845 | if (!keepOldPage) { | |
| 6846 | if (router.params.stackPages) { | |
| 6847 | $oldPage.addClass('stacked'); | |
| 6848 | $oldPage.trigger('page:stack'); | |
| 5d51ea26 | 6849 | router.emit('pageStack', $oldPage[0]); |
| 5309fbda DC |
6850 | if (separateNavbar) { |
| 6851 | $oldNavbarInner.addClass('stacked'); | |
| 6852 | } | |
| 6853 | } else if (!($newPage.attr('data-name') && $newPage.attr('data-name') === 'smart-select-page')) { | |
| 6854 | // Remove event | |
| 6855 | router.pageCallback('beforeRemove', $oldPage, $oldNavbarInner, 'previous', undefined, options); | |
| 6856 | router.removePage($oldPage); | |
| 6857 | if (separateNavbar && $oldNavbarInner.length) { | |
| 6858 | router.removeNavbar($oldNavbarInner); | |
| 6859 | } | |
| 6860 | } | |
| 6861 | } | |
| 6862 | if (options.clearPreviousHistory) { router.clearPreviousHistory(); } | |
| 6863 | router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| 6864 | ||
| 6865 | if (router.params.pushState) { | |
| 6866 | History.clearRouterQueue(); | |
| 6867 | } | |
| 6868 | } | |
| 6869 | function setPositionClasses() { | |
| 6870 | var pageClasses = 'page-previous page-current page-next'; | |
| 6871 | var navbarClasses = 'navbar-previous navbar-current navbar-next'; | |
| 6872 | $oldPage.removeClass(pageClasses).addClass('page-current').removeAttr('aria-hidden').trigger('page:position', { position: 'current' }); | |
| 5d51ea26 | 6873 | router.emit('pagePosition', $oldPage[0], 'current'); |
| 5309fbda | 6874 | $newPage.removeClass(pageClasses).addClass('page-next').removeAttr('aria-hidden').trigger('page:position', { position: 'next' }); |
| 5d51ea26 | 6875 | router.emit('pagePosition', $newPage[0], 'next'); |
| 5309fbda DC |
6876 | if (dynamicNavbar) { |
| 6877 | $oldNavbarInner.removeClass(navbarClasses).addClass('navbar-current').removeAttr('aria-hidden'); | |
| 6878 | $newNavbarInner.removeClass(navbarClasses).addClass('navbar-next').removeAttr('aria-hidden'); | |
| 6879 | } | |
| 6880 | } | |
| 6881 | if (options.animate && !(isMaster && app.width >= router.params.masterDetailBreakpoint)) { | |
| 5d51ea26 | 6882 | var delay = router.params[((router.app.theme) + "PageLoadDelay")]; |
| 5309fbda DC |
6883 | if (delay) { |
| 6884 | setTimeout(function () { | |
| 6885 | setPositionClasses(); | |
| 6886 | router.animate($oldPage, $newPage, $oldNavbarInner, $newNavbarInner, 'forward', function () { | |
| 6887 | afterAnimation(); | |
| 6888 | }); | |
| 6889 | }, delay); | |
| 6890 | } else { | |
| 6891 | setPositionClasses(); | |
| 6892 | router.animate($oldPage, $newPage, $oldNavbarInner, $newNavbarInner, 'forward', function () { | |
| 6893 | afterAnimation(); | |
| 6894 | }); | |
| 6895 | } | |
| 6896 | } else { | |
| 6897 | afterAnimation(); | |
| 6898 | } | |
| 6899 | return router; | |
| 6900 | } | |
| 6901 | function load(loadParams, loadOptions, ignorePageChange) { | |
| 6902 | if ( loadParams === void 0 ) loadParams = {}; | |
| 6903 | if ( loadOptions === void 0 ) loadOptions = {}; | |
| 6904 | ||
| 6905 | var router = this; | |
| 6906 | if (!router.allowPageChange && !ignorePageChange) { return router; } | |
| 6907 | var params = loadParams; | |
| 6908 | var options = loadOptions; | |
| 6909 | var url = params.url; | |
| 6910 | var content = params.content; | |
| 6911 | var el = params.el; | |
| 6912 | var pageName = params.pageName; | |
| 6913 | var template = params.template; | |
| 6914 | var templateUrl = params.templateUrl; | |
| 6915 | var component = params.component; | |
| 6916 | var componentUrl = params.componentUrl; | |
| 6917 | ||
| 6918 | if (!options.reloadCurrent | |
| 6919 | && options.route | |
| 6920 | && options.route.route | |
| 6921 | && options.route.route.parentPath | |
| 6922 | && router.currentRoute.route | |
| 6923 | && router.currentRoute.route.parentPath === options.route.route.parentPath) { | |
| 6924 | // Do something nested | |
| 6925 | if (options.route.url === router.url) { | |
| 6926 | router.allowPageChange = true; | |
| 6927 | return false; | |
| 6928 | } | |
| 6929 | // Check for same params | |
| 6930 | var sameParams = Object.keys(options.route.params).length === Object.keys(router.currentRoute.params).length; | |
| 6931 | if (sameParams) { | |
| 6932 | // Check for equal params name | |
| 6933 | Object.keys(options.route.params).forEach(function (paramName) { | |
| 6934 | if ( | |
| 6935 | !(paramName in router.currentRoute.params) | |
| 6936 | || (router.currentRoute.params[paramName] !== options.route.params[paramName]) | |
| 6937 | ) { | |
| 6938 | sameParams = false; | |
| 6939 | } | |
| 6940 | }); | |
| 6941 | } | |
| 6942 | if (sameParams) { | |
| 6943 | if (options.route.route.tab) { | |
| 6944 | return router.tabLoad(options.route.route.tab, options); | |
| 6945 | } | |
| 6946 | return false; | |
| 6947 | } | |
| 6948 | if (!sameParams | |
| 6949 | && options.route.route.tab | |
| 6950 | && router.currentRoute.route.tab | |
| 6951 | && router.currentRoute.parentPath === options.route.parentPath | |
| 6952 | ) { | |
| 6953 | return router.tabLoad(options.route.route.tab, options); | |
| 6954 | } | |
| 6955 | } | |
| 6956 | ||
| 6957 | if ( | |
| 6958 | options.route | |
| 6959 | && options.route.url | |
| 6960 | && router.url === options.route.url | |
| 6961 | && !(options.reloadCurrent || options.reloadPrevious) | |
| 6962 | && !router.params.allowDuplicateUrls | |
| 6963 | ) { | |
| 6964 | router.allowPageChange = true; | |
| 6965 | return false; | |
| 6966 | } | |
| 6967 | ||
| 6968 | if (!options.route && url) { | |
| 6969 | options.route = router.parseRouteUrl(url); | |
| 6970 | Utils.extend(options.route, { route: { url: url, path: url } }); | |
| 6971 | } | |
| 6972 | ||
| 6973 | // Component Callbacks | |
| 6974 | function resolve(pageEl, newOptions) { | |
| 6975 | return router.forward(pageEl, Utils.extend(options, newOptions)); | |
| 6976 | } | |
| 6977 | function reject() { | |
| 6978 | router.allowPageChange = true; | |
| 6979 | return router; | |
| 6980 | } | |
| 6981 | ||
| 6982 | if (url || templateUrl || componentUrl) { | |
| 6983 | router.allowPageChange = false; | |
| 6984 | } | |
| 6985 | ||
| 6986 | // Proceed | |
| 6987 | if (content) { | |
| 6988 | router.forward(router.getPageEl(content), options); | |
| 6989 | } else if (template || templateUrl) { | |
| 6990 | // Parse template and send page element | |
| 6991 | try { | |
| 6992 | router.pageTemplateLoader(template, templateUrl, options, resolve, reject); | |
| 6993 | } catch (err) { | |
| 6994 | router.allowPageChange = true; | |
| 6995 | throw err; | |
| 6996 | } | |
| 6997 | } else if (el) { | |
| 6998 | // Load page from specified HTMLElement or by page name in pages container | |
| 6999 | router.forward(router.getPageEl(el), options); | |
| 7000 | } else if (pageName) { | |
| 7001 | // Load page by page name in pages container | |
| 7002 | router.forward(router.$el.children((".page[data-name=\"" + pageName + "\"]")).eq(0), options); | |
| 7003 | } else if (component || componentUrl) { | |
| 7004 | // Load from component (F7/Vue/React/...) | |
| 7005 | try { | |
| 7006 | router.pageComponentLoader(router.el, component, componentUrl, options, resolve, reject); | |
| 7007 | } catch (err) { | |
| 7008 | router.allowPageChange = true; | |
| 7009 | throw err; | |
| 7010 | } | |
| 7011 | } else if (url) { | |
| 7012 | // Load using XHR | |
| 7013 | if (router.xhr) { | |
| 7014 | router.xhr.abort(); | |
| 7015 | router.xhr = false; | |
| 7016 | } | |
| 7017 | router.xhrRequest(url, options) | |
| 7018 | .then(function (pageContent) { | |
| 7019 | router.forward(router.getPageEl(pageContent), options); | |
| 7020 | }) | |
| 7021 | .catch(function () { | |
| 7022 | router.allowPageChange = true; | |
| 7023 | }); | |
| 7024 | } | |
| 7025 | return router; | |
| 7026 | } | |
| 7027 | function navigate(navigateParams, navigateOptions) { | |
| 7028 | if ( navigateOptions === void 0 ) navigateOptions = {}; | |
| 7029 | ||
| 7030 | var router = this; | |
| 7031 | if (router.swipeBackActive) { return router; } | |
| 7032 | var url; | |
| 7033 | var createRoute; | |
| 7034 | var name; | |
| 7035 | var query; | |
| 7036 | var params; | |
| 7037 | var route; | |
| 7038 | if (typeof navigateParams === 'string') { | |
| 7039 | url = navigateParams; | |
| 7040 | } else { | |
| 7041 | url = navigateParams.url; | |
| 7042 | createRoute = navigateParams.route; | |
| 7043 | name = navigateParams.name; | |
| 7044 | query = navigateParams.query; | |
| 7045 | params = navigateParams.params; | |
| 7046 | } | |
| 7047 | if (name) { | |
| 7048 | // find route by name | |
| 7049 | route = router.findRouteByKey('name', name); | |
| 7050 | if (!route) { | |
| 7051 | throw new Error(("Framework7: route with name \"" + name + "\" not found")); | |
| 7052 | } | |
| 7053 | url = router.constructRouteUrl(route, { params: params, query: query }); | |
| 7054 | if (url) { | |
| 7055 | return router.navigate(url, navigateOptions); | |
| 7056 | } | |
| 7057 | throw new Error(("Framework7: can't construct URL for route with name \"" + name + "\"")); | |
| 7058 | } | |
| 7059 | var app = router.app; | |
| 7060 | appRouterCheck(router, 'navigate'); | |
| 7061 | if (url === '#' || url === '') { | |
| 7062 | return router; | |
| 7063 | } | |
| 7064 | ||
| 7065 | var navigateUrl = url.replace('./', ''); | |
| 7066 | if (navigateUrl[0] !== '/' && navigateUrl.indexOf('#') !== 0) { | |
| 7067 | var currentPath = router.currentRoute.parentPath || router.currentRoute.path; | |
| 7068 | navigateUrl = ((currentPath ? (currentPath + "/") : '/') + navigateUrl) | |
| 7069 | .replace('///', '/') | |
| 7070 | .replace('//', '/'); | |
| 7071 | } | |
| 7072 | if (createRoute) { | |
| 7073 | route = Utils.extend(router.parseRouteUrl(navigateUrl), { | |
| 7074 | route: Utils.extend({}, createRoute), | |
| 7075 | }); | |
| 7076 | } else { | |
| 7077 | route = router.findMatchingRoute(navigateUrl); | |
| 7078 | } | |
| 7079 | ||
| 7080 | if (!route) { | |
| 7081 | return router; | |
| 7082 | } | |
| 7083 | ||
| 7084 | if (route.route.redirect) { | |
| 7085 | return redirect.call(router, 'navigate', route, navigateOptions); | |
| 7086 | } | |
| 7087 | ||
| 7088 | ||
| 7089 | var options = {}; | |
| 7090 | if (route.route.options) { | |
| 7091 | Utils.extend(options, route.route.options, navigateOptions); | |
| 7092 | } else { | |
| 7093 | Utils.extend(options, navigateOptions); | |
| 7094 | } | |
| 7095 | options.route = route; | |
| 7096 | ||
| 7097 | if (options && options.context) { | |
| 7098 | route.context = options.context; | |
| 7099 | options.route.context = options.context; | |
| 7100 | } | |
| 7101 | ||
| 7102 | function resolve() { | |
| 7103 | var routerLoaded = false; | |
| 7104 | ('popup popover sheet loginScreen actions customModal panel').split(' ').forEach(function (modalLoadProp) { | |
| 7105 | if (route.route[modalLoadProp] && !routerLoaded) { | |
| 7106 | routerLoaded = true; | |
| 7107 | router.modalLoad(modalLoadProp, route, options); | |
| 7108 | } | |
| 7109 | }); | |
| 7110 | if (route.route.keepAlive && route.route.keepAliveData) { | |
| 7111 | router.load({ el: route.route.keepAliveData.pageEl }, options, false); | |
| 7112 | routerLoaded = true; | |
| 7113 | } | |
| 7114 | ('url content component pageName el componentUrl template templateUrl').split(' ').forEach(function (pageLoadProp) { | |
| 7115 | var obj; | |
| 7116 | ||
| 7117 | if (route.route[pageLoadProp] && !routerLoaded) { | |
| 7118 | routerLoaded = true; | |
| 7119 | router.load(( obj = {}, obj[pageLoadProp] = route.route[pageLoadProp], obj ), options, false); | |
| 7120 | } | |
| 7121 | }); | |
| 7122 | if (routerLoaded) { return; } | |
| 7123 | // Async | |
| 7124 | function asyncResolve(resolveParams, resolveOptions) { | |
| 7125 | router.allowPageChange = false; | |
| 7126 | var resolvedAsModal = false; | |
| 7127 | if (resolveOptions && resolveOptions.context) { | |
| 7128 | if (!route.context) { route.context = resolveOptions.context; } | |
| 7129 | else { route.context = Utils.extend({}, route.context, resolveOptions.context); } | |
| 7130 | options.route.context = route.context; | |
| 7131 | } | |
| 7132 | ('popup popover sheet loginScreen actions customModal panel').split(' ').forEach(function (modalLoadProp) { | |
| 7133 | if (resolveParams[modalLoadProp]) { | |
| 7134 | resolvedAsModal = true; | |
| 7135 | var modalRoute = Utils.extend({}, route, { route: resolveParams }); | |
| 7136 | router.allowPageChange = true; | |
| 7137 | router.modalLoad(modalLoadProp, modalRoute, Utils.extend(options, resolveOptions)); | |
| 7138 | } | |
| 7139 | }); | |
| 7140 | if (resolvedAsModal) { return; } | |
| 7141 | router.load(resolveParams, Utils.extend(options, resolveOptions), true); | |
| 7142 | } | |
| 7143 | function asyncReject() { | |
| 7144 | router.allowPageChange = true; | |
| 7145 | } | |
| 7146 | if (route.route.async) { | |
| 7147 | router.allowPageChange = false; | |
| 7148 | ||
| 7149 | route.route.async.call(router, options.route, router.currentRoute, asyncResolve, asyncReject); | |
| 7150 | } | |
| 7151 | } | |
| 7152 | function reject() { | |
| 7153 | router.allowPageChange = true; | |
| 7154 | } | |
| 7155 | ||
| 7156 | if (router.params.masterDetailBreakpoint > 0 && route.route.masterRoute) { | |
| 7157 | // load detail route | |
| 7158 | var preloadMaster = true; | |
| 5d51ea26 | 7159 | var masterLoaded = false; |
| 5309fbda | 7160 | if (router.currentRoute && router.currentRoute.route) { |
| 5d51ea26 DC |
7161 | if ( |
| 7162 | router.currentRoute.route.master | |
| 7163 | && ( | |
| 7164 | router.currentRoute.route === route.route.masterRoute | |
| 7165 | || router.currentRoute.route.path === route.route.masterRoute.path | |
| 7166 | ) | |
| 7167 | ) { | |
| 5309fbda DC |
7168 | preloadMaster = false; |
| 7169 | } | |
| 5d51ea26 DC |
7170 | if ( |
| 7171 | router.currentRoute.route.masterRoute | |
| 7172 | && (router.currentRoute.route.masterRoute === route.route.masterRoute | |
| 7173 | || router.currentRoute.route.masterRoute.path === route.route.masterRoute.path | |
| 7174 | ) | |
| 7175 | ) { | |
| 5309fbda | 7176 | preloadMaster = false; |
| 5d51ea26 | 7177 | masterLoaded = true; |
| 5309fbda DC |
7178 | } |
| 7179 | } | |
| 5d51ea26 | 7180 | if (preloadMaster || (masterLoaded && navigateOptions.reloadAll)) { |
| 5309fbda DC |
7181 | router.navigate(route.route.masterRoute.path, { |
| 7182 | animate: false, | |
| 7183 | reloadAll: navigateOptions.reloadAll, | |
| 7184 | reloadCurrent: navigateOptions.reloadCurrent, | |
| 7185 | reloadPrevious: navigateOptions.reloadPrevious, | |
| 5d51ea26 DC |
7186 | pushState: !navigateOptions.initial, |
| 7187 | history: !navigateOptions.initial, | |
| 5309fbda DC |
7188 | once: { |
| 7189 | pageAfterIn: function pageAfterIn() { | |
| 7190 | router.navigate(navigateParams, Utils.extend({}, navigateOptions, { | |
| 7191 | animate: false, | |
| 7192 | reloadAll: false, | |
| 7193 | reloadCurrent: false, | |
| 7194 | reloadPrevious: false, | |
| 5d51ea26 DC |
7195 | history: !navigateOptions.initial, |
| 7196 | pushState: !navigateOptions.initial, | |
| 5309fbda DC |
7197 | })); |
| 7198 | }, | |
| 7199 | }, | |
| 7200 | }); | |
| 7201 | return router; | |
| 7202 | } | |
| 7203 | } | |
| 7204 | ||
| 7205 | processRouteQueue.call( | |
| 7206 | router, | |
| 7207 | route, | |
| 7208 | router.currentRoute, | |
| 7209 | function () { | |
| 7210 | if (route.route.modules) { | |
| 7211 | app | |
| 7212 | .loadModules(Array.isArray(route.route.modules) ? route.route.modules : [route.route.modules]) | |
| 7213 | .then(function () { | |
| 7214 | resolve(); | |
| 7215 | }) | |
| 7216 | .catch(function () { | |
| 7217 | reject(); | |
| 7218 | }); | |
| 7219 | } else { | |
| 7220 | resolve(); | |
| 7221 | } | |
| 7222 | }, | |
| 7223 | function () { | |
| 7224 | reject(); | |
| 7225 | } | |
| 7226 | ); | |
| 7227 | ||
| 7228 | // Return Router | |
| 7229 | return router; | |
| 7230 | } | |
| 7231 | ||
| 7232 | function tabLoad(tabRoute, loadOptions) { | |
| 7233 | if ( loadOptions === void 0 ) loadOptions = {}; | |
| 7234 | ||
| 7235 | var router = this; | |
| 7236 | var options = Utils.extend({ | |
| 7237 | animate: router.params.animate, | |
| 7238 | pushState: true, | |
| 7239 | history: true, | |
| 7240 | parentPageEl: null, | |
| 7241 | preload: false, | |
| 7242 | on: {}, | |
| 7243 | }, loadOptions); | |
| 7244 | ||
| 7245 | var currentRoute; | |
| 7246 | var previousRoute; | |
| 7247 | if (options.route) { | |
| 7248 | // Set Route | |
| 7249 | if (!options.preload && options.route !== router.currentRoute) { | |
| 7250 | previousRoute = router.previousRoute; | |
| 7251 | router.currentRoute = options.route; | |
| 7252 | } | |
| 7253 | if (options.preload) { | |
| 7254 | currentRoute = options.route; | |
| 7255 | previousRoute = router.currentRoute; | |
| 7256 | } else { | |
| 7257 | currentRoute = router.currentRoute; | |
| 7258 | if (!previousRoute) { previousRoute = router.previousRoute; } | |
| 7259 | } | |
| 7260 | ||
| 7261 | // Update Browser History | |
| 7262 | if (router.params.pushState && options.pushState && !options.reloadPrevious) { | |
| 7263 | History.replace( | |
| 7264 | router.view.id, | |
| 7265 | { | |
| 7266 | url: options.route.url, | |
| 7267 | }, | |
| 7268 | (router.params.pushStateRoot || '') + router.params.pushStateSeparator + options.route.url | |
| 7269 | ); | |
| 7270 | } | |
| 7271 | ||
| 7272 | // Update Router History | |
| 7273 | if (options.history) { | |
| 7274 | router.history[Math.max(router.history.length - 1, 0)] = options.route.url; | |
| 7275 | router.saveHistory(); | |
| 7276 | } | |
| 7277 | } | |
| 7278 | ||
| 7279 | // Show Tab | |
| 7280 | var $parentPageEl = $(options.parentPageEl || router.currentPageEl); | |
| 7281 | var tabEl; | |
| 7282 | if ($parentPageEl.length && $parentPageEl.find(("#" + (tabRoute.id))).length) { | |
| 7283 | tabEl = $parentPageEl.find(("#" + (tabRoute.id))).eq(0); | |
| 7284 | } else if (router.view.selector) { | |
| 7285 | tabEl = (router.view.selector) + " #" + (tabRoute.id); | |
| 7286 | } else { | |
| 7287 | tabEl = "#" + (tabRoute.id); | |
| 7288 | } | |
| 7289 | var tabShowResult = router.app.tab.show({ | |
| 7290 | tabEl: tabEl, | |
| 7291 | animate: options.animate, | |
| 7292 | tabRoute: options.route, | |
| 7293 | }); | |
| 7294 | ||
| 7295 | var $newTabEl = tabShowResult.$newTabEl; | |
| 7296 | var $oldTabEl = tabShowResult.$oldTabEl; | |
| 7297 | var animated = tabShowResult.animated; | |
| 7298 | var onTabsChanged = tabShowResult.onTabsChanged; | |
| 7299 | ||
| 7300 | if ($newTabEl && $newTabEl.parents('.page').length > 0 && options.route) { | |
| 7301 | var tabParentPageData = $newTabEl.parents('.page')[0].f7Page; | |
| 7302 | if (tabParentPageData && options.route) { | |
| 7303 | tabParentPageData.route = options.route; | |
| 7304 | } | |
| 7305 | } | |
| 7306 | ||
| 7307 | // Tab Content Loaded | |
| 7308 | function onTabLoaded(contentEl) { | |
| 7309 | // Remove theme elements | |
| 7310 | router.removeThemeElements($newTabEl); | |
| 7311 | ||
| 7312 | var tabEventTarget = $newTabEl; | |
| 7313 | if (typeof contentEl !== 'string') { tabEventTarget = $(contentEl); } | |
| 7314 | ||
| 7315 | tabEventTarget.trigger('tab:init tab:mounted', tabRoute); | |
| 7316 | router.emit('tabInit tabMounted', $newTabEl[0], tabRoute); | |
| 7317 | ||
| 7318 | if ($oldTabEl && $oldTabEl.length) { | |
| 7319 | if (animated) { | |
| 7320 | onTabsChanged(function () { | |
| 7321 | router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| 7322 | if (router.params.unloadTabContent) { | |
| 7323 | router.tabRemove($oldTabEl, $newTabEl, tabRoute); | |
| 7324 | } | |
| 7325 | }); | |
| 7326 | } else { | |
| 7327 | router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| 7328 | if (router.params.unloadTabContent) { | |
| 7329 | router.tabRemove($oldTabEl, $newTabEl, tabRoute); | |
| 7330 | } | |
| 7331 | } | |
| 7332 | } | |
| 7333 | } | |
| 7334 | ||
| 7335 | if ($newTabEl[0].f7RouterTabLoaded) { | |
| 7336 | if (!$oldTabEl || !$oldTabEl.length) { return router; } | |
| 7337 | if (animated) { | |
| 7338 | onTabsChanged(function () { | |
| 7339 | router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| 7340 | }); | |
| 7341 | } else { | |
| 7342 | router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| 7343 | } | |
| 7344 | return router; | |
| 7345 | } | |
| 7346 | ||
| 7347 | // Load Tab Content | |
| 7348 | function loadTab(loadTabParams, loadTabOptions) { | |
| 7349 | // Load Tab Props | |
| 7350 | var url = loadTabParams.url; | |
| 7351 | var content = loadTabParams.content; | |
| 7352 | var el = loadTabParams.el; | |
| 7353 | var template = loadTabParams.template; | |
| 7354 | var templateUrl = loadTabParams.templateUrl; | |
| 7355 | var component = loadTabParams.component; | |
| 7356 | var componentUrl = loadTabParams.componentUrl; | |
| 7357 | // Component/Template Callbacks | |
| 7358 | function resolve(contentEl) { | |
| 7359 | router.allowPageChange = true; | |
| 7360 | if (!contentEl) { return; } | |
| 7361 | if (typeof contentEl === 'string') { | |
| 7362 | $newTabEl.html(contentEl); | |
| 7363 | } else { | |
| 7364 | $newTabEl.html(''); | |
| 7365 | if (contentEl.f7Component) { | |
| 7366 | contentEl.f7Component.$mount(function (componentEl) { | |
| 7367 | $newTabEl.append(componentEl); | |
| 7368 | }); | |
| 7369 | } else { | |
| 7370 | $newTabEl.append(contentEl); | |
| 7371 | } | |
| 7372 | } | |
| 7373 | $newTabEl[0].f7RouterTabLoaded = true; | |
| 7374 | onTabLoaded(contentEl); | |
| 7375 | } | |
| 7376 | function reject() { | |
| 7377 | router.allowPageChange = true; | |
| 7378 | return router; | |
| 7379 | } | |
| 7380 | ||
| 7381 | if (content) { | |
| 7382 | resolve(content); | |
| 7383 | } else if (template || templateUrl) { | |
| 7384 | try { | |
| 7385 | router.tabTemplateLoader(template, templateUrl, loadTabOptions, resolve, reject); | |
| 7386 | } catch (err) { | |
| 7387 | router.allowPageChange = true; | |
| 7388 | throw err; | |
| 7389 | } | |
| 7390 | } else if (el) { | |
| 7391 | resolve(el); | |
| 7392 | } else if (component || componentUrl) { | |
| 7393 | // Load from component (F7/Vue/React/...) | |
| 7394 | try { | |
| 7395 | router.tabComponentLoader($newTabEl[0], component, componentUrl, loadTabOptions, resolve, reject); | |
| 7396 | } catch (err) { | |
| 7397 | router.allowPageChange = true; | |
| 7398 | throw err; | |
| 7399 | } | |
| 7400 | } else if (url) { | |
| 7401 | // Load using XHR | |
| 7402 | if (router.xhr) { | |
| 7403 | router.xhr.abort(); | |
| 7404 | router.xhr = false; | |
| 7405 | } | |
| 7406 | router.xhrRequest(url, loadTabOptions) | |
| 7407 | .then(function (tabContent) { | |
| 7408 | resolve(tabContent); | |
| 7409 | }) | |
| 7410 | .catch(function () { | |
| 7411 | router.allowPageChange = true; | |
| 7412 | }); | |
| 7413 | } | |
| 7414 | } | |
| 7415 | ||
| 7416 | var hasContentLoadProp; | |
| 7417 | ('url content component el componentUrl template templateUrl').split(' ').forEach(function (tabLoadProp) { | |
| 7418 | var obj; | |
| 7419 | ||
| 7420 | if (tabRoute[tabLoadProp]) { | |
| 7421 | hasContentLoadProp = true; | |
| 7422 | loadTab(( obj = {}, obj[tabLoadProp] = tabRoute[tabLoadProp], obj ), options); | |
| 7423 | } | |
| 7424 | }); | |
| 7425 | ||
| 7426 | // Async | |
| 7427 | function asyncResolve(resolveParams, resolveOptions) { | |
| 7428 | loadTab(resolveParams, Utils.extend(options, resolveOptions)); | |
| 7429 | } | |
| 7430 | function asyncReject() { | |
| 7431 | router.allowPageChange = true; | |
| 7432 | } | |
| 7433 | if (tabRoute.async) { | |
| 7434 | tabRoute.async.call(router, currentRoute, previousRoute, asyncResolve, asyncReject); | |
| 7435 | } else if (!hasContentLoadProp) { | |
| 7436 | router.allowPageChange = true; | |
| 7437 | } | |
| 7438 | ||
| 7439 | return router; | |
| 7440 | } | |
| 7441 | function tabRemove($oldTabEl, $newTabEl, tabRoute) { | |
| 7442 | var router = this; | |
| 7443 | ||
| 7444 | var hasTabComponentChild; | |
| 7445 | if ($oldTabEl[0]) { | |
| 7446 | $oldTabEl[0].f7RouterTabLoaded = false; | |
| 7447 | delete $oldTabEl[0].f7RouterTabLoaded; | |
| 7448 | } | |
| 7449 | $oldTabEl.children().each(function (index, tabChild) { | |
| 7450 | if (tabChild.f7Component) { | |
| 7451 | hasTabComponentChild = true; | |
| 7452 | $(tabChild).trigger('tab:beforeremove', tabRoute); | |
| 7453 | tabChild.f7Component.$destroy(); | |
| 7454 | } | |
| 7455 | }); | |
| 7456 | if (!hasTabComponentChild) { | |
| 7457 | $oldTabEl.trigger('tab:beforeremove', tabRoute); | |
| 7458 | } | |
| 7459 | router.emit('tabBeforeRemove', $oldTabEl[0], $newTabEl[0], tabRoute); | |
| 7460 | router.removeTabContent($oldTabEl[0], tabRoute); | |
| 7461 | } | |
| 7462 | ||
| 7463 | function modalLoad(modalType, route, loadOptions) { | |
| 7464 | if ( loadOptions === void 0 ) loadOptions = {}; | |
| 7465 | ||
| 7466 | var router = this; | |
| 7467 | var app = router.app; | |
| 7468 | var isPanel = modalType === 'panel'; | |
| 7469 | var modalOrPanel = isPanel ? 'panel' : 'modal'; | |
| 7470 | ||
| 7471 | var options = Utils.extend({ | |
| 7472 | animate: router.params.animate, | |
| 7473 | pushState: true, | |
| 7474 | history: true, | |
| 7475 | on: {}, | |
| 7476 | }, loadOptions); | |
| 7477 | ||
| 7478 | var modalParams = Utils.extend({}, route.route[modalType]); | |
| 7479 | var modalRoute = route.route; | |
| 7480 | ||
| 7481 | function onModalLoaded() { | |
| 7482 | // Create Modal | |
| 7483 | var modal = app[modalType].create(modalParams); | |
| 7484 | modalRoute.modalInstance = modal; | |
| 7485 | ||
| 7486 | var hasEl = modal.el; | |
| 7487 | ||
| 7488 | function closeOnSwipeBack() { | |
| 7489 | modal.close(); | |
| 7490 | } | |
| 7491 | modal.on((modalOrPanel + "Open"), function () { | |
| 7492 | if (!hasEl) { | |
| 7493 | // Remove theme elements | |
| 7494 | router.removeThemeElements(modal.el); | |
| 7495 | ||
| 7496 | // Emit events | |
| 7497 | modal.$el.trigger(((modalType.toLowerCase()) + ":init " + (modalType.toLowerCase()) + ":mounted"), route, modal); | |
| 7498 | router.emit(((!isPanel ? 'modalInit' : '') + " " + modalType + "Init " + modalType + "Mounted"), modal.el, route, modal); | |
| 7499 | } | |
| 7500 | router.once('swipeBackMove', closeOnSwipeBack); | |
| 7501 | }); | |
| 7502 | modal.on((modalOrPanel + "Close"), function () { | |
| 7503 | router.off('swipeBackMove', closeOnSwipeBack); | |
| 7504 | if (!modal.closeByRouter) { | |
| 7505 | router.back(); | |
| 7506 | } | |
| 7507 | }); | |
| 7508 | ||
| 7509 | modal.on((modalOrPanel + "Closed"), function () { | |
| 7510 | modal.$el.trigger(((modalType.toLowerCase()) + ":beforeremove"), route, modal); | |
| 7511 | modal.emit(("" + (!isPanel ? 'modalBeforeRemove ' : '') + modalType + "BeforeRemove"), modal.el, route, modal); | |
| 7512 | var modalComponent = modal.el.f7Component; | |
| 7513 | if (modalComponent) { | |
| 7514 | modalComponent.$destroy(); | |
| 7515 | } | |
| 7516 | Utils.nextTick(function () { | |
| 7517 | if (modalComponent || modalParams.component) { | |
| 7518 | router.removeModal(modal.el); | |
| 7519 | } | |
| 7520 | modal.destroy(); | |
| 7521 | delete modal.route; | |
| 7522 | delete modalRoute.modalInstance; | |
| 7523 | }); | |
| 7524 | }); | |
| 7525 | ||
| 7526 | if (options.route) { | |
| 7527 | // Update Browser History | |
| 7528 | if (router.params.pushState && options.pushState) { | |
| 7529 | History.push( | |
| 7530 | router.view.id, | |
| 7531 | { | |
| 7532 | url: options.route.url, | |
| 7533 | modal: modalType, | |
| 7534 | }, | |
| 7535 | (router.params.pushStateRoot || '') + router.params.pushStateSeparator + options.route.url | |
| 7536 | ); | |
| 7537 | } | |
| 7538 | ||
| 7539 | // Set Route | |
| 7540 | if (options.route !== router.currentRoute) { | |
| 7541 | modal.route = Utils.extend(options.route, { modal: modal }); | |
| 7542 | router.currentRoute = modal.route; | |
| 7543 | } | |
| 7544 | ||
| 7545 | // Update Router History | |
| 7546 | if (options.history) { | |
| 7547 | router.history.push(options.route.url); | |
| 7548 | router.saveHistory(); | |
| 7549 | } | |
| 7550 | } | |
| 7551 | ||
| 7552 | if (hasEl) { | |
| 7553 | // Remove theme elements | |
| 7554 | router.removeThemeElements(modal.el); | |
| 7555 | ||
| 7556 | // Emit events | |
| 7557 | modal.$el.trigger(((modalType.toLowerCase()) + ":init " + (modalType.toLowerCase()) + ":mounted"), route, modal); | |
| 7558 | router.emit((modalOrPanel + "Init " + modalType + "Init " + modalType + "Mounted"), modal.el, route, modal); | |
| 7559 | } | |
| 7560 | ||
| 7561 | // Open | |
| 7562 | modal.open(); | |
| 7563 | } | |
| 7564 | ||
| 7565 | // Load Modal Content | |
| 7566 | function loadModal(loadModalParams, loadModalOptions) { | |
| 7567 | // Load Modal Props | |
| 7568 | var url = loadModalParams.url; | |
| 7569 | var content = loadModalParams.content; | |
| 7570 | var template = loadModalParams.template; | |
| 7571 | var templateUrl = loadModalParams.templateUrl; | |
| 7572 | var component = loadModalParams.component; | |
| 7573 | var componentUrl = loadModalParams.componentUrl; | |
| 7574 | ||
| 7575 | // Component/Template Callbacks | |
| 7576 | function resolve(contentEl) { | |
| 7577 | if (contentEl) { | |
| 7578 | if (typeof contentEl === 'string') { | |
| 7579 | modalParams.content = contentEl; | |
| 7580 | } else if (contentEl.f7Component) { | |
| 7581 | contentEl.f7Component.$mount(function (componentEl) { | |
| 7582 | modalParams.el = componentEl; | |
| 7583 | app.root.append(componentEl); | |
| 7584 | }); | |
| 7585 | } else { | |
| 7586 | modalParams.el = contentEl; | |
| 7587 | } | |
| 7588 | onModalLoaded(); | |
| 7589 | } | |
| 7590 | } | |
| 7591 | function reject() { | |
| 7592 | router.allowPageChange = true; | |
| 7593 | return router; | |
| 7594 | } | |
| 7595 | ||
| 7596 | if (content) { | |
| 7597 | resolve(content); | |
| 7598 | } else if (template || templateUrl) { | |
| 7599 | try { | |
| 7600 | router.modalTemplateLoader(template, templateUrl, loadModalOptions, resolve, reject); | |
| 7601 | } catch (err) { | |
| 7602 | router.allowPageChange = true; | |
| 7603 | throw err; | |
| 7604 | } | |
| 7605 | } else if (component || componentUrl) { | |
| 7606 | // Load from component (F7/Vue/React/...) | |
| 7607 | try { | |
| 7608 | router.modalComponentLoader(app.root[0], component, componentUrl, loadModalOptions, resolve, reject); | |
| 7609 | } catch (err) { | |
| 7610 | router.allowPageChange = true; | |
| 7611 | throw err; | |
| 7612 | } | |
| 7613 | } else if (url) { | |
| 7614 | // Load using XHR | |
| 7615 | if (router.xhr) { | |
| 7616 | router.xhr.abort(); | |
| 7617 | router.xhr = false; | |
| 7618 | } | |
| 7619 | router.xhrRequest(url, loadModalOptions) | |
| 7620 | .then(function (modalContent) { | |
| 7621 | modalParams.content = modalContent; | |
| 7622 | onModalLoaded(); | |
| 7623 | }) | |
| 7624 | .catch(function () { | |
| 7625 | router.allowPageChange = true; | |
| 7626 | }); | |
| 7627 | } else { | |
| 7628 | onModalLoaded(); | |
| 7629 | } | |
| 7630 | } | |
| 7631 | ||
| 7632 | var foundLoadProp; | |
| 7633 | ('url content component el componentUrl template templateUrl').split(' ').forEach(function (modalLoadProp) { | |
| 7634 | var obj; | |
| 7635 | ||
| 7636 | if (modalParams[modalLoadProp] && !foundLoadProp) { | |
| 7637 | foundLoadProp = true; | |
| 7638 | loadModal(( obj = {}, obj[modalLoadProp] = modalParams[modalLoadProp], obj ), options); | |
| 7639 | } | |
| 7640 | }); | |
| 7641 | if (!foundLoadProp && modalType === 'actions') { | |
| 7642 | onModalLoaded(); | |
| 7643 | } | |
| 7644 | ||
| 7645 | // Async | |
| 7646 | function asyncResolve(resolveParams, resolveOptions) { | |
| 7647 | loadModal(resolveParams, Utils.extend(options, resolveOptions)); | |
| 7648 | } | |
| 7649 | function asyncReject() { | |
| 7650 | router.allowPageChange = true; | |
| 7651 | } | |
| 7652 | if (modalParams.async) { | |
| 7653 | modalParams.async.call(router, options.route, router.currentRoute, asyncResolve, asyncReject); | |
| 7654 | } | |
| 7655 | return router; | |
| 7656 | } | |
| 7657 | function modalRemove(modal) { | |
| 7658 | Utils.extend(modal, { closeByRouter: true }); | |
| 7659 | modal.close(); | |
| 7660 | } | |
| 7661 | ||
| 7662 | function backward(el, backwardOptions) { | |
| 7663 | var router = this; | |
| 7664 | var $el = $(el); | |
| 7665 | var app = router.app; | |
| 7666 | var view = router.view; | |
| 7667 | ||
| 7668 | var options = Utils.extend({ | |
| 7669 | animate: router.params.animate, | |
| 7670 | pushState: true, | |
| 5d51ea26 | 7671 | replaceState: false, |
| 5309fbda DC |
7672 | }, backwardOptions); |
| 7673 | ||
| 7674 | var masterDetailEnabled = router.params.masterDetailBreakpoint > 0; | |
| 7675 | var isMaster = masterDetailEnabled && options.route && options.route.route && options.route.route.master === true; | |
| 7676 | var masterPageEl; | |
| 7677 | ||
| 7678 | var dynamicNavbar = router.dynamicNavbar; | |
| 7679 | var separateNavbar = router.separateNavbar; | |
| 7680 | ||
| 7681 | var $newPage = $el; | |
| 7682 | var $oldPage = router.$el.children('.page-current'); | |
| 7683 | var currentIsMaster = masterDetailEnabled && $oldPage.hasClass('page-master'); | |
| 7684 | ||
| 7685 | if ($newPage.length) { | |
| 7686 | // Remove theme elements | |
| 7687 | router.removeThemeElements($newPage); | |
| 7688 | } | |
| 7689 | ||
| 7690 | var $navbarEl; | |
| 7691 | var $newNavbarInner; | |
| 7692 | var $oldNavbarInner; | |
| 7693 | ||
| 7694 | if (dynamicNavbar) { | |
| 7695 | $newNavbarInner = $newPage.children('.navbar').children('.navbar-inner'); | |
| 7696 | if (separateNavbar) { | |
| 7697 | $navbarEl = router.$navbarEl; | |
| 7698 | if ($newNavbarInner.length > 0) { | |
| 7699 | $newPage.children('.navbar').remove(); | |
| 7700 | } | |
| 7701 | if ($newNavbarInner.length === 0 && $newPage[0] && $newPage[0].f7Page) { | |
| 7702 | // Try from pageData | |
| 7703 | $newNavbarInner = $newPage[0].f7Page.$navbarEl; | |
| 7704 | } | |
| 7705 | $oldNavbarInner = $navbarEl.find('.navbar-current'); | |
| 7706 | } else { | |
| 7707 | $oldNavbarInner = $oldPage.children('.navbar').children('.navbar-inner'); | |
| 7708 | } | |
| 7709 | } | |
| 7710 | ||
| 7711 | router.allowPageChange = false; | |
| 7712 | if ($newPage.length === 0 || $oldPage.length === 0) { | |
| 7713 | router.allowPageChange = true; | |
| 7714 | return router; | |
| 7715 | } | |
| 7716 | ||
| 7717 | // Remove theme elements | |
| 7718 | router.removeThemeElements($newPage); | |
| 7719 | ||
| 7720 | // Save Keep Alive Cache | |
| 7721 | if (options.route && options.route.route && options.route.route.keepAlive && !options.route.route.keepAliveData) { | |
| 7722 | options.route.route.keepAliveData = { | |
| 7723 | pageEl: $el[0], | |
| 7724 | }; | |
| 7725 | } | |
| 7726 | ||
| 7727 | // Pages In View | |
| 7728 | var isDetail; | |
| 7729 | if (masterDetailEnabled) { | |
| 7730 | var $pagesInView = router.$el | |
| 7731 | .children('.page:not(.stacked)') | |
| 7732 | .filter(function (index, pageInView) { return pageInView !== $newPage[0]; }); | |
| 7733 | ||
| 7734 | // Find Detail' master page | |
| 7735 | for (var i = 0; i < $pagesInView.length; i += 1) { | |
| 7736 | if (!masterPageEl | |
| 7737 | && $pagesInView[i].classList.contains('page-master') | |
| 7738 | ) { | |
| 7739 | masterPageEl = $pagesInView[i]; | |
| 7740 | continue; // eslint-disable-line | |
| 7741 | } | |
| 7742 | } | |
| 7743 | ||
| 7744 | isDetail = !isMaster | |
| 7745 | && masterPageEl | |
| 7746 | && (router.history.indexOf(options.route.url) > router.history.indexOf(masterPageEl.f7Page.route.url)); | |
| 5d51ea26 DC |
7747 | |
| 7748 | if (!isDetail && !isMaster && masterPageEl && masterPageEl.f7Page && options.route.route.masterRoute) { | |
| 7749 | isDetail = options.route.route.masterRoute.path === masterPageEl.f7Page.route.route.path; | |
| 7750 | } | |
| 5309fbda DC |
7751 | } |
| 7752 | ||
| 7753 | ||
| 7754 | // New Page | |
| 7755 | $newPage | |
| 7756 | .addClass(("page-previous" + (isMaster ? ' page-master' : '') + (isDetail ? ' page-master-detail' : ''))) | |
| 7757 | .removeClass('stacked') | |
| 7758 | .removeAttr('aria-hidden') | |
| 7759 | .trigger('page:unstack') | |
| 7760 | .trigger('page:position', { position: 'previous' }); | |
| 5d51ea26 DC |
7761 | router.emit('pageUnstack', $newPage[0]); |
| 7762 | router.emit('pagePosition', $newPage[0], 'previous'); | |
| 5309fbda DC |
7763 | if (isMaster || isDetail) { |
| 7764 | $newPage.trigger('page:role', { role: isMaster ? 'master' : 'detail' }); | |
| 7765 | } | |
| 7766 | ||
| 7767 | if (dynamicNavbar && $newNavbarInner.length > 0) { | |
| 7768 | $newNavbarInner | |
| 7769 | .addClass(("navbar-previous" + (isMaster ? ' navbar-master' : '') + (isDetail ? ' navbar-master-detail' : ''))) | |
| 7770 | .removeClass('stacked') | |
| 7771 | .removeAttr('aria-hidden'); | |
| 7772 | } | |
| 7773 | ||
| 7774 | // Remove previous page in case of "forced" | |
| 7775 | var backIndex; | |
| 7776 | if (options.force) { | |
| 7777 | if ($oldPage.prev('.page-previous:not(.stacked)').length > 0 || $oldPage.prev('.page-previous').length === 0) { | |
| 7778 | if (router.history.indexOf(options.route.url) >= 0) { | |
| 7779 | backIndex = router.history.length - router.history.indexOf(options.route.url) - 1; | |
| 7780 | router.history = router.history.slice(0, router.history.indexOf(options.route.url) + 2); | |
| 7781 | view.history = router.history; | |
| 7782 | } else if (router.history[[router.history.length - 2]]) { | |
| 7783 | router.history[router.history.length - 2] = options.route.url; | |
| 7784 | } else { | |
| 7785 | router.history.unshift(router.url); | |
| 7786 | } | |
| 7787 | ||
| 7788 | if (backIndex && router.params.stackPages) { | |
| 7789 | $oldPage.prevAll('.page-previous').each(function (index, pageToRemove) { | |
| 7790 | var $pageToRemove = $(pageToRemove); | |
| 7791 | var $navbarToRemove; | |
| 7792 | if (separateNavbar) { | |
| 7793 | // $navbarToRemove = $oldNavbarInner.prevAll('.navbar-previous').eq(index); | |
| 7794 | $navbarToRemove = $(app.navbar.getElByPage($pageToRemove)); | |
| 7795 | } | |
| 7796 | if ($pageToRemove[0] !== $newPage[0] && $pageToRemove.index() > $newPage.index()) { | |
| 7797 | if (router.initialPages.indexOf($pageToRemove[0]) >= 0) { | |
| 7798 | $pageToRemove.addClass('stacked'); | |
| 7799 | $pageToRemove.trigger('page:stack'); | |
| 5d51ea26 | 7800 | router.emit('pageStack', $pageToRemove[0]); |
| 5309fbda DC |
7801 | if (separateNavbar) { |
| 7802 | $navbarToRemove.addClass('stacked'); | |
| 7803 | } | |
| 7804 | } else { | |
| 7805 | router.pageCallback('beforeRemove', $pageToRemove, $navbarToRemove, 'previous', undefined, options); | |
| 7806 | router.removePage($pageToRemove); | |
| 7807 | if (separateNavbar && $navbarToRemove.length > 0) { | |
| 7808 | router.removeNavbar($navbarToRemove); | |
| 7809 | } | |
| 7810 | } | |
| 7811 | } | |
| 7812 | }); | |
| 7813 | } else { | |
| 7814 | var $pageToRemove = $oldPage.prev('.page-previous:not(.stacked)'); | |
| 7815 | var $navbarToRemove; | |
| 7816 | if (separateNavbar) { | |
| 7817 | // $navbarToRemove = $oldNavbarInner.prev('.navbar-inner:not(.stacked)'); | |
| 7818 | $navbarToRemove = $(app.navbar.getElByPage($pageToRemove)); | |
| 7819 | } | |
| 7820 | if (router.params.stackPages && router.initialPages.indexOf($pageToRemove[0]) >= 0) { | |
| 7821 | $pageToRemove.addClass('stacked'); | |
| 7822 | $pageToRemove.trigger('page:stack'); | |
| 5d51ea26 | 7823 | router.emit('pageStack', $pageToRemove[0]); |
| 5309fbda DC |
7824 | $navbarToRemove.addClass('stacked'); |
| 7825 | } else if ($pageToRemove.length > 0) { | |
| 7826 | router.pageCallback('beforeRemove', $pageToRemove, $navbarToRemove, 'previous', undefined, options); | |
| 7827 | router.removePage($pageToRemove); | |
| 7828 | if (separateNavbar && $navbarToRemove.length) { | |
| 7829 | router.removeNavbar($navbarToRemove); | |
| 7830 | } | |
| 7831 | } | |
| 7832 | } | |
| 7833 | } | |
| 7834 | } | |
| 7835 | ||
| 7836 | // Insert new page | |
| 7837 | var newPageInDom = $newPage.parents(doc).length > 0; | |
| 7838 | var f7Component = $newPage[0].f7Component; | |
| 7839 | ||
| 7840 | function insertPage() { | |
| 7841 | if ($newPage.next($oldPage).length === 0) { | |
| 7842 | if (!newPageInDom && f7Component) { | |
| 7843 | f7Component.$mount(function (componentEl) { | |
| 7844 | $(componentEl).insertBefore($oldPage); | |
| 7845 | }); | |
| 7846 | } else { | |
| 7847 | $newPage.insertBefore($oldPage); | |
| 7848 | } | |
| 7849 | } | |
| 7850 | if (separateNavbar && $newNavbarInner.length) { | |
| 7851 | if ($newNavbarInner.children('.title-large').length) { | |
| 7852 | $newNavbarInner.addClass('navbar-inner-large'); | |
| 7853 | } | |
| 7854 | $newNavbarInner.insertBefore($oldNavbarInner); | |
| 7855 | if ($oldNavbarInner.length > 0) { | |
| 7856 | $newNavbarInner.insertBefore($oldNavbarInner); | |
| 7857 | } else { | |
| 7858 | if (!router.$navbarEl.parents(doc).length) { | |
| 7859 | router.$el.prepend(router.$navbarEl); | |
| 7860 | } | |
| 7861 | $navbarEl.append($newNavbarInner); | |
| 7862 | } | |
| 7863 | } | |
| 7864 | if (!newPageInDom) { | |
| 7865 | router.pageCallback('mounted', $newPage, $newNavbarInner, 'previous', 'current', options, $oldPage); | |
| 7866 | } else if (options.route && options.route.route && options.route.route.keepAlive && !$newPage[0].f7PageMounted) { | |
| 7867 | $newPage[0].f7PageMounted = true; | |
| 7868 | router.pageCallback('mounted', $newPage, $newNavbarInner, 'previous', 'current', options, $oldPage); | |
| 7869 | } | |
| 7870 | } | |
| 7871 | ||
| 7872 | if (options.preload) { | |
| 7873 | // Insert Page | |
| 7874 | insertPage(); | |
| 7875 | // Tab route | |
| 7876 | if (options.route.route.tab) { | |
| 7877 | router.tabLoad(options.route.route.tab, Utils.extend({}, options, { | |
| 7878 | history: false, | |
| 7879 | pushState: false, | |
| 7880 | preload: true, | |
| 7881 | })); | |
| 7882 | } | |
| 7883 | if (isMaster) { | |
| 7884 | $newPage | |
| 7885 | .removeClass('page-master-stacked') | |
| 7886 | .trigger('page:masterunstack'); | |
| 5d51ea26 | 7887 | router.emit('pageMasterUnstack', $newPage[0]); |
| 5309fbda DC |
7888 | if (separateNavbar) { |
| 7889 | $(app.navbar.getElByPage($newPage)).removeClass('navbar-master-stacked'); | |
| 7890 | } | |
| 7891 | } | |
| 7892 | // Page init and before init events | |
| 7893 | router.pageCallback('init', $newPage, $newNavbarInner, 'previous', 'current', options, $oldPage); | |
| 7894 | var $previousPages = $newPage.prevAll('.page-previous:not(.stacked):not(.page-master)'); | |
| 7895 | if ($previousPages.length > 0) { | |
| 7896 | $previousPages.each(function (index, pageToRemove) { | |
| 7897 | var $pageToRemove = $(pageToRemove); | |
| 7898 | var $navbarToRemove; | |
| 7899 | if (separateNavbar) { | |
| 7900 | // $navbarToRemove = $newNavbarInner.prevAll('.navbar-previous:not(.stacked)').eq(index); | |
| 7901 | $navbarToRemove = $(app.navbar.getElByPage($pageToRemove)); | |
| 7902 | } | |
| 7903 | if (router.params.stackPages && router.initialPages.indexOf(pageToRemove) >= 0) { | |
| 7904 | $pageToRemove.addClass('stacked'); | |
| 7905 | $pageToRemove.trigger('page:stack'); | |
| 5d51ea26 | 7906 | router.emit('pageStack', $pageToRemove[0]); |
| 5309fbda DC |
7907 | if (separateNavbar) { |
| 7908 | $navbarToRemove.addClass('stacked'); | |
| 7909 | } | |
| 7910 | } else { | |
| 7911 | router.pageCallback('beforeRemove', $pageToRemove, $navbarToRemove, 'previous', undefined); | |
| 7912 | router.removePage($pageToRemove); | |
| 7913 | if (separateNavbar && $navbarToRemove.length) { | |
| 7914 | router.removeNavbar($navbarToRemove); | |
| 7915 | } | |
| 7916 | } | |
| 7917 | }); | |
| 7918 | } | |
| 7919 | router.allowPageChange = true; | |
| 7920 | return router; | |
| 7921 | } | |
| 7922 | ||
| 7923 | // History State | |
| 7924 | if (!(Device.ie || Device.edge || (Device.firefox && !Device.ios))) { | |
| 7925 | if (router.params.pushState && options.pushState) { | |
| 5d51ea26 DC |
7926 | if (options.replaceState) { |
| 7927 | var pushStateRoot = router.params.pushStateRoot || ''; | |
| 7928 | History.replace( | |
| 7929 | view.id, | |
| 7930 | { | |
| 7931 | url: options.route.url, | |
| 7932 | }, | |
| 7933 | pushStateRoot + router.params.pushStateSeparator + options.route.url | |
| 7934 | ); | |
| 7935 | } else if (backIndex) { | |
| 7936 | History.go(-backIndex); | |
| 7937 | } else { | |
| 7938 | History.back(); | |
| 7939 | } | |
| 5309fbda DC |
7940 | } |
| 7941 | } | |
| 7942 | ||
| 7943 | // Update History | |
| 5d51ea26 DC |
7944 | if (options.replaceState) { |
| 7945 | router.history[router.history.length - 1] = options.route.url; | |
| 7946 | } else { | |
| 7947 | if (router.history.length === 1) { | |
| 7948 | router.history.unshift(router.url); | |
| 7949 | } | |
| 7950 | router.history.pop(); | |
| 5309fbda | 7951 | } |
| 5309fbda DC |
7952 | router.saveHistory(); |
| 7953 | ||
| 7954 | // Current Page & Navbar | |
| 7955 | router.currentPageEl = $newPage[0]; | |
| 7956 | if (dynamicNavbar && $newNavbarInner.length) { | |
| 7957 | router.currentNavbarEl = $newNavbarInner[0]; | |
| 7958 | } else { | |
| 7959 | delete router.currentNavbarEl; | |
| 7960 | } | |
| 7961 | ||
| 7962 | // Current Route | |
| 7963 | router.currentRoute = options.route; | |
| 7964 | ||
| 7965 | // History State | |
| 7966 | if (Device.ie || Device.edge || (Device.firefox && !Device.ios)) { | |
| 7967 | if (router.params.pushState && options.pushState) { | |
| 5d51ea26 DC |
7968 | if (options.replaceState) { |
| 7969 | var pushStateRoot$1 = router.params.pushStateRoot || ''; | |
| 7970 | History.replace( | |
| 7971 | view.id, | |
| 7972 | { | |
| 7973 | url: options.route.url, | |
| 7974 | }, | |
| 7975 | pushStateRoot$1 + router.params.pushStateSeparator + options.route.url | |
| 7976 | ); | |
| 7977 | } else if (backIndex) { | |
| 7978 | History.go(-backIndex); | |
| 7979 | } else { | |
| 7980 | History.back(); | |
| 7981 | } | |
| 5309fbda DC |
7982 | } |
| 7983 | } | |
| 7984 | ||
| 7985 | // Insert Page | |
| 7986 | insertPage(); | |
| 7987 | ||
| 7988 | // Load Tab | |
| 7989 | if (options.route.route.tab) { | |
| 7990 | router.tabLoad(options.route.route.tab, Utils.extend({}, options, { | |
| 7991 | history: false, | |
| 7992 | pushState: false, | |
| 7993 | })); | |
| 7994 | } | |
| 7995 | ||
| 7996 | // Page init and before init events | |
| 7997 | router.pageCallback('init', $newPage, $newNavbarInner, 'previous', 'current', options, $oldPage); | |
| 7998 | ||
| 7999 | // Before animation callback | |
| 5309fbda | 8000 | router.pageCallback('beforeOut', $oldPage, $oldNavbarInner, 'current', 'next', options); |
| 5d51ea26 | 8001 | router.pageCallback('beforeIn', $newPage, $newNavbarInner, 'previous', 'current', options); |
| 5309fbda DC |
8002 | |
| 8003 | // Animation | |
| 8004 | function afterAnimation() { | |
| 8005 | // Set classes | |
| 8006 | var pageClasses = 'page-previous page-current page-next'; | |
| 8007 | var navbarClasses = 'navbar-previous navbar-current navbar-next'; | |
| 8008 | $newPage.removeClass(pageClasses).addClass('page-current').removeAttr('aria-hidden').trigger('page:position', { position: 'current' }); | |
| 5d51ea26 | 8009 | router.emit('pagePosition', $newPage[0], 'current'); |
| 5309fbda | 8010 | $oldPage.removeClass(pageClasses).addClass('page-next').attr('aria-hidden', 'true').trigger('page:position', { position: 'next' }); |
| 5d51ea26 | 8011 | router.emit('pagePosition', $oldPage[0], 'next'); |
| 5309fbda DC |
8012 | if (dynamicNavbar) { |
| 8013 | $newNavbarInner.removeClass(navbarClasses).addClass('navbar-current').removeAttr('aria-hidden'); | |
| 8014 | $oldNavbarInner.removeClass(navbarClasses).addClass('navbar-next').attr('aria-hidden', 'true'); | |
| 8015 | } | |
| 8016 | ||
| 8017 | // After animation event | |
| 5309fbda | 8018 | router.pageCallback('afterOut', $oldPage, $oldNavbarInner, 'current', 'next', options); |
| 5d51ea26 | 8019 | router.pageCallback('afterIn', $newPage, $newNavbarInner, 'previous', 'current', options); |
| 5309fbda DC |
8020 | |
| 8021 | // Remove Old Page | |
| 8022 | if (router.params.stackPages && router.initialPages.indexOf($oldPage[0]) >= 0) { | |
| 8023 | $oldPage.addClass('stacked'); | |
| 8024 | $oldPage.trigger('page:stack'); | |
| 5d51ea26 | 8025 | router.emit('pageStack', $oldPage[0]); |
| 5309fbda DC |
8026 | if (separateNavbar) { |
| 8027 | $oldNavbarInner.addClass('stacked'); | |
| 8028 | } | |
| 8029 | } else { | |
| 8030 | router.pageCallback('beforeRemove', $oldPage, $oldNavbarInner, 'next', undefined, options); | |
| 8031 | router.removePage($oldPage); | |
| 8032 | if (separateNavbar && $oldNavbarInner.length) { | |
| 8033 | router.removeNavbar($oldNavbarInner); | |
| 8034 | } | |
| 8035 | } | |
| 8036 | ||
| 8037 | router.allowPageChange = true; | |
| 8038 | router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| 8039 | ||
| 8040 | // Preload previous page | |
| 5d51ea26 | 8041 | var preloadPreviousPage = router.params.preloadPreviousPage || router.params[((app.theme) + "SwipeBack")]; |
| 5309fbda DC |
8042 | if (preloadPreviousPage && router.history[router.history.length - 2] && !isMaster) { |
| 8043 | router.back(router.history[router.history.length - 2], { preload: true }); | |
| 8044 | } | |
| 8045 | if (router.params.pushState) { | |
| 8046 | History.clearRouterQueue(); | |
| 8047 | } | |
| 8048 | } | |
| 8049 | ||
| 8050 | function setPositionClasses() { | |
| 8051 | var pageClasses = 'page-previous page-current page-next'; | |
| 8052 | var navbarClasses = 'navbar-previous navbar-current navbar-next'; | |
| 8053 | $oldPage.removeClass(pageClasses).addClass('page-current').trigger('page:position', { position: 'current' }); | |
| 5d51ea26 | 8054 | router.emit('pagePosition', $oldPage[0], 'current'); |
| 5309fbda | 8055 | $newPage.removeClass(pageClasses).addClass('page-previous').removeAttr('aria-hidden').trigger('page:position', { position: 'previous' }); |
| 5d51ea26 | 8056 | router.emit('pagePosition', $newPage[0], 'previous'); |
| 5309fbda DC |
8057 | if (dynamicNavbar) { |
| 8058 | $oldNavbarInner.removeClass(navbarClasses).addClass('navbar-current'); | |
| 8059 | $newNavbarInner.removeClass(navbarClasses).addClass('navbar-previous').removeAttr('aria-hidden'); | |
| 8060 | } | |
| 8061 | } | |
| 8062 | ||
| 8063 | if (options.animate && !(currentIsMaster && app.width >= router.params.masterDetailBreakpoint)) { | |
| 8064 | setPositionClasses(); | |
| 8065 | router.animate($oldPage, $newPage, $oldNavbarInner, $newNavbarInner, 'backward', function () { | |
| 8066 | afterAnimation(); | |
| 8067 | }); | |
| 8068 | } else { | |
| 8069 | afterAnimation(); | |
| 8070 | } | |
| 8071 | ||
| 8072 | return router; | |
| 8073 | } | |
| 8074 | function loadBack(backParams, backOptions, ignorePageChange) { | |
| 8075 | var router = this; | |
| 8076 | ||
| 8077 | if (!router.allowPageChange && !ignorePageChange) { return router; } | |
| 8078 | var params = backParams; | |
| 8079 | var options = backOptions; | |
| 8080 | var url = params.url; | |
| 8081 | var content = params.content; | |
| 8082 | var el = params.el; | |
| 8083 | var pageName = params.pageName; | |
| 8084 | var template = params.template; | |
| 8085 | var templateUrl = params.templateUrl; | |
| 8086 | var component = params.component; | |
| 8087 | var componentUrl = params.componentUrl; | |
| 8088 | ||
| 8089 | if ( | |
| 8090 | options.route.url | |
| 8091 | && router.url === options.route.url | |
| 8092 | && !(options.reloadCurrent || options.reloadPrevious) | |
| 8093 | && !router.params.allowDuplicateUrls | |
| 8094 | ) { | |
| 8095 | return false; | |
| 8096 | } | |
| 8097 | ||
| 8098 | if (!options.route && url) { | |
| 8099 | options.route = router.parseRouteUrl(url); | |
| 8100 | } | |
| 8101 | ||
| 8102 | // Component Callbacks | |
| 8103 | function resolve(pageEl, newOptions) { | |
| 8104 | return router.backward(pageEl, Utils.extend(options, newOptions)); | |
| 8105 | } | |
| 8106 | function reject() { | |
| 8107 | router.allowPageChange = true; | |
| 8108 | return router; | |
| 8109 | } | |
| 8110 | ||
| 8111 | if (url || templateUrl || componentUrl) { | |
| 8112 | router.allowPageChange = false; | |
| 8113 | } | |
| 8114 | ||
| 8115 | // Proceed | |
| 8116 | if (content) { | |
| 8117 | router.backward(router.getPageEl(content), options); | |
| 8118 | } else if (template || templateUrl) { | |
| 8119 | // Parse template and send page element | |
| 8120 | try { | |
| 8121 | router.pageTemplateLoader(template, templateUrl, options, resolve, reject); | |
| 8122 | } catch (err) { | |
| 8123 | router.allowPageChange = true; | |
| 8124 | throw err; | |
| 8125 | } | |
| 8126 | } else if (el) { | |
| 8127 | // Load page from specified HTMLElement or by page name in pages container | |
| 8128 | router.backward(router.getPageEl(el), options); | |
| 8129 | } else if (pageName) { | |
| 8130 | // Load page by page name in pages container | |
| 8131 | router.backward(router.$el.children((".page[data-name=\"" + pageName + "\"]")).eq(0), options); | |
| 8132 | } else if (component || componentUrl) { | |
| 8133 | // Load from component (F7/Vue/React/...) | |
| 8134 | try { | |
| 8135 | router.pageComponentLoader(router.el, component, componentUrl, options, resolve, reject); | |
| 8136 | } catch (err) { | |
| 8137 | router.allowPageChange = true; | |
| 8138 | throw err; | |
| 8139 | } | |
| 8140 | } else if (url) { | |
| 8141 | // Load using XHR | |
| 8142 | if (router.xhr) { | |
| 8143 | router.xhr.abort(); | |
| 8144 | router.xhr = false; | |
| 8145 | } | |
| 8146 | router.xhrRequest(url, options) | |
| 8147 | .then(function (pageContent) { | |
| 8148 | router.backward(router.getPageEl(pageContent), options); | |
| 8149 | }) | |
| 8150 | .catch(function () { | |
| 8151 | router.allowPageChange = true; | |
| 8152 | }); | |
| 8153 | } | |
| 8154 | return router; | |
| 8155 | } | |
| 8156 | function back() { | |
| 8157 | var args = [], len = arguments.length; | |
| 8158 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 8159 | ||
| 8160 | var router = this; | |
| 8161 | if (router.swipeBackActive) { return router; } | |
| 8162 | var navigateUrl; | |
| 8163 | var navigateOptions; | |
| 8164 | var route; | |
| 8165 | if (typeof args[0] === 'object') { | |
| 8166 | navigateOptions = args[0] || {}; | |
| 8167 | } else { | |
| 8168 | navigateUrl = args[0]; | |
| 8169 | navigateOptions = args[1] || {}; | |
| 8170 | } | |
| 8171 | ||
| 8172 | var name = navigateOptions.name; | |
| 8173 | var params = navigateOptions.params; | |
| 8174 | var query = navigateOptions.query; | |
| 8175 | if (name) { | |
| 8176 | // find route by name | |
| 8177 | route = router.findRouteByKey('name', name); | |
| 8178 | if (!route) { | |
| 8179 | throw new Error(("Framework7: route with name \"" + name + "\" not found")); | |
| 8180 | } | |
| 8181 | navigateUrl = router.constructRouteUrl(route, { params: params, query: query }); | |
| 8182 | if (navigateUrl) { | |
| 8183 | return router.back(navigateUrl, Utils.extend({}, navigateOptions, { | |
| 8184 | name: null, | |
| 8185 | params: null, | |
| 8186 | query: null, | |
| 8187 | })); | |
| 8188 | } | |
| 8189 | throw new Error(("Framework7: can't construct URL for route with name \"" + name + "\"")); | |
| 8190 | } | |
| 8191 | ||
| 8192 | var app = router.app; | |
| 8193 | appRouterCheck(router, 'back'); | |
| 8194 | ||
| 8195 | var currentRouteIsModal = router.currentRoute.modal; | |
| 8196 | var modalType; | |
| 8197 | if (!currentRouteIsModal) { | |
| 8198 | ('popup popover sheet loginScreen actions customModal panel').split(' ').forEach(function (modalLoadProp) { | |
| 8199 | if (router.currentRoute.route[modalLoadProp]) { | |
| 8200 | currentRouteIsModal = true; | |
| 8201 | modalType = modalLoadProp; | |
| 8202 | } | |
| 8203 | }); | |
| 8204 | } | |
| 8205 | if (currentRouteIsModal) { | |
| 8206 | var modalToClose = router.currentRoute.modal | |
| 8207 | || router.currentRoute.route.modalInstance | |
| 8208 | || app[modalType].get(); | |
| 8209 | var previousUrl = router.history[router.history.length - 2]; | |
| 8210 | var previousRoute; | |
| 8211 | // check if previous route is modal too | |
| 8212 | if (modalToClose && modalToClose.$el) { | |
| 8213 | var prevOpenedModals = modalToClose.$el.prevAll('.modal-in'); | |
| 8214 | if (prevOpenedModals.length && prevOpenedModals[0].f7Modal) { | |
| 8215 | previousRoute = prevOpenedModals[0].f7Modal.route; | |
| 8216 | } | |
| 8217 | } | |
| 8218 | if (!previousRoute) { | |
| 8219 | previousRoute = router.findMatchingRoute(previousUrl); | |
| 8220 | } | |
| 8221 | ||
| 8222 | if (!previousRoute && previousUrl) { | |
| 8223 | previousRoute = { | |
| 8224 | url: previousUrl, | |
| 8225 | path: previousUrl.split('?')[0], | |
| 8226 | query: Utils.parseUrlQuery(previousUrl), | |
| 8227 | route: { | |
| 8228 | path: previousUrl.split('?')[0], | |
| 8229 | url: previousUrl, | |
| 8230 | }, | |
| 8231 | }; | |
| 8232 | } | |
| 8233 | if (!navigateUrl || navigateUrl.replace(/[# ]/g, '').trim().length === 0) { | |
| 8234 | if (!previousRoute || !modalToClose) { | |
| 8235 | return router; | |
| 8236 | } | |
| 8237 | } | |
| 8238 | var forceOtherUrl = navigateOptions.force && previousRoute && navigateUrl; | |
| 8239 | if (previousRoute && modalToClose) { | |
| 8240 | if (router.params.pushState && navigateOptions.pushState !== false) { | |
| 8241 | History.back(); | |
| 8242 | } | |
| 8243 | router.currentRoute = previousRoute; | |
| 8244 | router.history.pop(); | |
| 8245 | router.saveHistory(); | |
| 8246 | router.modalRemove(modalToClose); | |
| 8247 | if (forceOtherUrl) { | |
| 8248 | router.navigate(navigateUrl, { reloadCurrent: true }); | |
| 8249 | } | |
| 8250 | } else if (modalToClose) { | |
| 8251 | router.modalRemove(modalToClose); | |
| 8252 | if (navigateUrl) { | |
| 8253 | router.navigate(navigateUrl, { reloadCurrent: true }); | |
| 8254 | } | |
| 8255 | } | |
| 8256 | return router; | |
| 8257 | } | |
| 8258 | var $previousPage = router.$el.children('.page-current').prevAll('.page-previous:not(.page-master)').eq(0); | |
| 8259 | ||
| 8260 | var skipMaster; | |
| 8261 | if (router.params.masterDetailBreakpoint > 0) { | |
| 8262 | var $previousMaster = router.$el.children('.page-current').prevAll('.page-master').eq(0); | |
| 8263 | if ($previousMaster.length) { | |
| 8264 | var expectedPreviousPageUrl = router.history[router.history.length - 2]; | |
| 8265 | var expectedPreviousPageRoute = router.findMatchingRoute(expectedPreviousPageUrl); | |
| 8266 | if (expectedPreviousPageRoute && expectedPreviousPageRoute.route === $previousMaster[0].f7Page.route.route) { | |
| 8267 | $previousPage = $previousMaster; | |
| 8268 | if (!navigateOptions.preload) { | |
| 8269 | skipMaster = app.width >= router.params.masterDetailBreakpoint; | |
| 8270 | } | |
| 8271 | } | |
| 8272 | } | |
| 8273 | } | |
| 8274 | if (!navigateOptions.force && $previousPage.length && !skipMaster) { | |
| 8275 | if (router.params.pushState | |
| 8276 | && $previousPage[0].f7Page | |
| 8277 | && router.history[router.history.length - 2] !== $previousPage[0].f7Page.route.url | |
| 8278 | ) { | |
| 8279 | router.back( | |
| 8280 | router.history[router.history.length - 2], | |
| 8281 | Utils.extend(navigateOptions, { force: true }) | |
| 8282 | ); | |
| 8283 | return router; | |
| 8284 | } | |
| 8285 | var previousPageRoute = $previousPage[0].f7Page.route; | |
| 8286 | ||
| 8287 | processRouteQueue.call( | |
| 8288 | router, | |
| 8289 | previousPageRoute, | |
| 8290 | router.currentRoute, | |
| 8291 | function () { | |
| 8292 | router.loadBack({ el: $previousPage }, Utils.extend(navigateOptions, { | |
| 8293 | route: previousPageRoute, | |
| 8294 | })); | |
| 8295 | }, | |
| 8296 | function () {} | |
| 8297 | ); | |
| 8298 | ||
| 8299 | return router; | |
| 8300 | } | |
| 8301 | ||
| 8302 | // Navigate URL | |
| 8303 | if (navigateUrl === '#') { | |
| 8304 | navigateUrl = undefined; | |
| 8305 | } | |
| 8306 | if (navigateUrl && navigateUrl[0] !== '/' && navigateUrl.indexOf('#') !== 0) { | |
| 8307 | navigateUrl = ((router.path || '/') + navigateUrl).replace('//', '/'); | |
| 8308 | } | |
| 8309 | if (!navigateUrl && router.history.length > 1) { | |
| 8310 | navigateUrl = router.history[router.history.length - 2]; | |
| 8311 | } | |
| 8312 | if (skipMaster && !navigateOptions.force && router.history[router.history.length - 3]) { | |
| 8313 | return router.back(router.history[router.history.length - 3], Utils.extend({}, navigateOptions || {}, { | |
| 8314 | force: true, | |
| 8315 | animate: false, | |
| 8316 | })); | |
| 8317 | } | |
| 8318 | if (skipMaster && !navigateOptions.force) { | |
| 8319 | return router; | |
| 8320 | } | |
| 8321 | ||
| 8322 | // Find route to load | |
| 8323 | route = router.findMatchingRoute(navigateUrl); | |
| 8324 | if (!route) { | |
| 8325 | if (navigateUrl) { | |
| 8326 | route = { | |
| 8327 | url: navigateUrl, | |
| 8328 | path: navigateUrl.split('?')[0], | |
| 8329 | query: Utils.parseUrlQuery(navigateUrl), | |
| 8330 | route: { | |
| 8331 | path: navigateUrl.split('?')[0], | |
| 8332 | url: navigateUrl, | |
| 8333 | }, | |
| 8334 | }; | |
| 8335 | } | |
| 8336 | } | |
| 8337 | if (!route) { | |
| 8338 | return router; | |
| 8339 | } | |
| 8340 | ||
| 8341 | if (route.route.redirect) { | |
| 8342 | return redirect.call(router, 'back', route, navigateOptions); | |
| 8343 | } | |
| 8344 | ||
| 8345 | var options = {}; | |
| 8346 | if (route.route.options) { | |
| 8347 | Utils.extend(options, route.route.options, navigateOptions); | |
| 8348 | } else { | |
| 8349 | Utils.extend(options, navigateOptions); | |
| 8350 | } | |
| 8351 | options.route = route; | |
| 8352 | ||
| 8353 | if (options && options.context) { | |
| 8354 | route.context = options.context; | |
| 8355 | options.route.context = options.context; | |
| 8356 | } | |
| 8357 | ||
| 8358 | var backForceLoaded; | |
| 8359 | if (options.force && router.params.stackPages) { | |
| 8360 | router.$el.children('.page-previous.stacked').each(function (index, pageEl) { | |
| 8361 | if (pageEl.f7Page && pageEl.f7Page.route && pageEl.f7Page.route.url === route.url) { | |
| 8362 | backForceLoaded = true; | |
| 8363 | router.loadBack({ el: pageEl }, options); | |
| 8364 | } | |
| 8365 | }); | |
| 8366 | if (backForceLoaded) { | |
| 8367 | return router; | |
| 8368 | } | |
| 8369 | } | |
| 8370 | function resolve() { | |
| 8371 | var routerLoaded = false; | |
| 8372 | if (route.route.keepAlive && route.route.keepAliveData) { | |
| 8373 | router.loadBack({ el: route.route.keepAliveData.pageEl }, options); | |
| 8374 | routerLoaded = true; | |
| 8375 | } | |
| 8376 | ('url content component pageName el componentUrl template templateUrl').split(' ').forEach(function (pageLoadProp) { | |
| 8377 | var obj; | |
| 8378 | ||
| 8379 | if (route.route[pageLoadProp] && !routerLoaded) { | |
| 8380 | routerLoaded = true; | |
| 8381 | router.loadBack(( obj = {}, obj[pageLoadProp] = route.route[pageLoadProp], obj ), options); | |
| 8382 | } | |
| 8383 | }); | |
| 8384 | if (routerLoaded) { return; } | |
| 8385 | // Async | |
| 8386 | function asyncResolve(resolveParams, resolveOptions) { | |
| 8387 | router.allowPageChange = false; | |
| 8388 | if (resolveOptions && resolveOptions.context) { | |
| 8389 | if (!route.context) { route.context = resolveOptions.context; } | |
| 8390 | else { route.context = Utils.extend({}, route.context, resolveOptions.context); } | |
| 8391 | options.route.context = route.context; | |
| 8392 | } | |
| 8393 | router.loadBack(resolveParams, Utils.extend(options, resolveOptions), true); | |
| 8394 | } | |
| 8395 | function asyncReject() { | |
| 8396 | router.allowPageChange = true; | |
| 8397 | } | |
| 8398 | if (route.route.async) { | |
| 8399 | router.allowPageChange = false; | |
| 8400 | ||
| 8401 | route.route.async.call(router, route, router.currentRoute, asyncResolve, asyncReject); | |
| 8402 | } | |
| 8403 | } | |
| 8404 | function reject() { | |
| 8405 | router.allowPageChange = true; | |
| 8406 | } | |
| 8407 | ||
| 8408 | if (options.preload) { | |
| 8409 | resolve(); | |
| 8410 | } else { | |
| 8411 | processRouteQueue.call( | |
| 8412 | router, | |
| 8413 | route, | |
| 8414 | router.currentRoute, | |
| 8415 | function () { | |
| 8416 | if (route.route.modules) { | |
| 8417 | app | |
| 8418 | .loadModules(Array.isArray(route.route.modules) ? route.route.modules : [route.route.modules]) | |
| 8419 | .then(function () { | |
| 8420 | resolve(); | |
| 8421 | }) | |
| 8422 | .catch(function () { | |
| 8423 | reject(); | |
| 8424 | }); | |
| 8425 | } else { | |
| 8426 | resolve(); | |
| 8427 | } | |
| 8428 | }, | |
| 8429 | function () { | |
| 8430 | reject(); | |
| 8431 | } | |
| 8432 | ); | |
| 8433 | } | |
| 8434 | ||
| 8435 | // Return Router | |
| 8436 | return router; | |
| 8437 | } | |
| 8438 | ||
| 8439 | function clearPreviousPages() { | |
| 8440 | var router = this; | |
| 8441 | appRouterCheck(router, 'clearPreviousPages'); | |
| 8442 | var app = router.app; | |
| 8443 | var separateNavbar = router.separateNavbar; | |
| 8444 | ||
| 8445 | var $pagesToRemove = router.$el | |
| 8446 | .children('.page') | |
| 8447 | .filter(function (index, pageInView) { | |
| 8448 | if (router.currentRoute && (router.currentRoute.modal || router.currentRoute.panel)) { return true; } | |
| 8449 | return pageInView !== router.currentPageEl; | |
| 8450 | }); | |
| 8451 | ||
| 8452 | $pagesToRemove.each(function (index, pageEl) { | |
| 8453 | var $oldPageEl = $(pageEl); | |
| 8454 | var $oldNavbarInnerEl = $(app.navbar.getElByPage($oldPageEl)); | |
| 8455 | if (router.params.stackPages && router.initialPages.indexOf($oldPageEl[0]) >= 0) { | |
| 8456 | $oldPageEl.addClass('stacked'); | |
| 8457 | if (separateNavbar) { | |
| 8458 | $oldNavbarInnerEl.addClass('stacked'); | |
| 8459 | } | |
| 8460 | } else { | |
| 8461 | // Page remove event | |
| 8462 | router.pageCallback('beforeRemove', $oldPageEl, $oldNavbarInnerEl, 'previous', undefined, {}); | |
| 8463 | router.removePage($oldPageEl); | |
| 8464 | if (separateNavbar && $oldNavbarInnerEl.length) { | |
| 8465 | router.removeNavbar($oldNavbarInnerEl); | |
| 8466 | } | |
| 8467 | } | |
| 8468 | }); | |
| 8469 | } | |
| 8470 | ||
| 8471 | function clearPreviousHistory() { | |
| 8472 | var router = this; | |
| 8473 | appRouterCheck(router, 'clearPreviousHistory'); | |
| 8474 | var url = router.history[router.history.length - 1]; | |
| 8475 | ||
| 8476 | router.clearPreviousPages(); | |
| 8477 | ||
| 8478 | router.history = [url]; | |
| 8479 | router.view.history = [url]; | |
| 8480 | router.saveHistory(); | |
| 8481 | } | |
| 8482 | ||
| 5d51ea26 | 8483 | var Router = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda | 8484 | function Router(app, view) { |
| 5d51ea26 | 8485 | Framework7Class.call(this, {}, [typeof view === 'undefined' ? app : view]); |
| 5309fbda DC |
8486 | var router = this; |
| 8487 | ||
| 8488 | // Is App Router | |
| 8489 | router.isAppRouter = typeof view === 'undefined'; | |
| 8490 | ||
| 8491 | if (router.isAppRouter) { | |
| 8492 | // App Router | |
| 8493 | Utils.extend(false, router, { | |
| 8494 | app: app, | |
| 8495 | params: app.params.view, | |
| 8496 | routes: app.routes || [], | |
| 8497 | cache: app.cache, | |
| 8498 | }); | |
| 8499 | } else { | |
| 8500 | // View Router | |
| 8501 | Utils.extend(false, router, { | |
| 8502 | app: app, | |
| 8503 | view: view, | |
| 8504 | viewId: view.id, | |
| 8505 | params: view.params, | |
| 8506 | routes: view.routes, | |
| 8507 | $el: view.$el, | |
| 8508 | el: view.el, | |
| 8509 | $navbarEl: view.$navbarEl, | |
| 8510 | navbarEl: view.navbarEl, | |
| 8511 | history: view.history, | |
| 8512 | scrollHistory: view.scrollHistory, | |
| 8513 | cache: app.cache, | |
| 8514 | dynamicNavbar: app.theme === 'ios' && view.params.iosDynamicNavbar, | |
| 8515 | separateNavbar: app.theme === 'ios' && view.params.iosDynamicNavbar && view.params.iosSeparateDynamicNavbar, | |
| 8516 | initialPages: [], | |
| 8517 | initialNavbars: [], | |
| 8518 | }); | |
| 8519 | } | |
| 8520 | ||
| 8521 | // Install Modules | |
| 8522 | router.useModules(); | |
| 8523 | ||
| 8524 | // Temporary Dom | |
| 8525 | router.tempDom = doc.createElement('div'); | |
| 8526 | ||
| 8527 | // AllowPageChage | |
| 8528 | router.allowPageChange = true; | |
| 8529 | ||
| 8530 | // Current Route | |
| 8531 | var currentRoute = {}; | |
| 8532 | var previousRoute = {}; | |
| 8533 | Object.defineProperty(router, 'currentRoute', { | |
| 8534 | enumerable: true, | |
| 8535 | configurable: true, | |
| 8536 | set: function set(newRoute) { | |
| 8537 | if ( newRoute === void 0 ) newRoute = {}; | |
| 8538 | ||
| 8539 | previousRoute = Utils.extend({}, currentRoute); | |
| 8540 | currentRoute = newRoute; | |
| 8541 | if (!currentRoute) { return; } | |
| 8542 | router.url = currentRoute.url; | |
| 8543 | router.emit('routeChange', newRoute, previousRoute, router); | |
| 8544 | }, | |
| 8545 | get: function get() { | |
| 8546 | return currentRoute; | |
| 8547 | }, | |
| 8548 | }); | |
| 8549 | Object.defineProperty(router, 'previousRoute', { | |
| 8550 | enumerable: true, | |
| 8551 | configurable: true, | |
| 8552 | get: function get() { | |
| 8553 | return previousRoute; | |
| 8554 | }, | |
| 8555 | set: function set(newRoute) { | |
| 8556 | previousRoute = newRoute; | |
| 8557 | }, | |
| 8558 | }); | |
| 8559 | ||
| 8560 | return router; | |
| 8561 | } | |
| 8562 | ||
| 5d51ea26 DC |
8563 | if ( Framework7Class ) Router.__proto__ = Framework7Class; |
| 8564 | Router.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
8565 | Router.prototype.constructor = Router; |
| 8566 | ||
| 8567 | Router.prototype.animatableNavElements = function animatableNavElements (newNavbarInner, oldNavbarInner, toLarge, fromLarge, direction) { | |
| 8568 | var router = this; | |
| 8569 | var dynamicNavbar = router.dynamicNavbar; | |
| 8570 | var separateNavbar = router.separateNavbar; | |
| 8571 | var animateIcon = router.params.iosAnimateNavbarBackIcon; | |
| 8572 | ||
| 8573 | var newNavEls; | |
| 8574 | var oldNavEls; | |
| 8575 | function animatableNavEl($el, navbarInner) { | |
| 8576 | var isSliding = $el.hasClass('sliding') || navbarInner.hasClass('sliding'); | |
| 8577 | var isSubnavbar = $el.hasClass('subnavbar'); | |
| 8578 | var needsOpacityTransition = isSliding ? !isSubnavbar : true; | |
| 8579 | var $iconEl = $el.find('.back .icon'); | |
| 8580 | var isIconLabel; | |
| 8581 | if (isSliding && animateIcon && $el.hasClass('left') && $iconEl.length > 0 && $iconEl.next('span').length) { | |
| 8582 | $el = $iconEl.next('span'); // eslint-disable-line | |
| 8583 | isIconLabel = true; | |
| 8584 | } | |
| 8585 | return { | |
| 8586 | $el: $el, | |
| 8587 | isIconLabel: isIconLabel, | |
| 8588 | leftOffset: $el[0].f7NavbarLeftOffset, | |
| 8589 | rightOffset: $el[0].f7NavbarRightOffset, | |
| 8590 | isSliding: isSliding, | |
| 8591 | isSubnavbar: isSubnavbar, | |
| 8592 | needsOpacityTransition: needsOpacityTransition, | |
| 8593 | }; | |
| 8594 | } | |
| 8595 | if (dynamicNavbar) { | |
| 8596 | newNavEls = []; | |
| 8597 | oldNavEls = []; | |
| 8598 | newNavbarInner.children('.left, .right, .title, .subnavbar').each(function (index, navEl) { | |
| 8599 | var $navEl = $(navEl); | |
| 8600 | if ($navEl.hasClass('left') && fromLarge && direction === 'forward' && separateNavbar) { return; } | |
| 8601 | if ($navEl.hasClass('title') && toLarge) { return; } | |
| 8602 | newNavEls.push(animatableNavEl($navEl, newNavbarInner)); | |
| 8603 | }); | |
| 8604 | if (!(oldNavbarInner.hasClass('navbar-master') && router.params.masterDetailBreakpoint > 0 && router.app.width >= router.params.masterDetailBreakpoint)) { | |
| 8605 | oldNavbarInner.children('.left, .right, .title, .subnavbar').each(function (index, navEl) { | |
| 8606 | var $navEl = $(navEl); | |
| 8607 | if ($navEl.hasClass('left') && toLarge && !fromLarge && direction === 'forward' && separateNavbar) { return; } | |
| 8608 | if ($navEl.hasClass('left') && toLarge && direction === 'backward' && separateNavbar) { return; } | |
| 8609 | if ($navEl.hasClass('title') && fromLarge) { | |
| 8610 | return; | |
| 8611 | } | |
| 8612 | oldNavEls.push(animatableNavEl($navEl, oldNavbarInner)); | |
| 8613 | }); | |
| 8614 | } | |
| 8615 | [oldNavEls, newNavEls].forEach(function (navEls) { | |
| 8616 | navEls.forEach(function (navEl) { | |
| 8617 | var n = navEl; | |
| 8618 | var isSliding = navEl.isSliding; | |
| 8619 | var $el = navEl.$el; | |
| 8620 | var otherEls = navEls === oldNavEls ? newNavEls : oldNavEls; | |
| 8621 | if (!(isSliding && $el.hasClass('title') && otherEls)) { return; } | |
| 8622 | otherEls.forEach(function (otherNavEl) { | |
| 8623 | if (otherNavEl.isIconLabel) { | |
| 8624 | var iconTextEl = otherNavEl.$el[0]; | |
| 8625 | n.leftOffset += iconTextEl ? (iconTextEl.offsetLeft || 0) : 0; | |
| 8626 | } | |
| 8627 | }); | |
| 8628 | }); | |
| 8629 | }); | |
| 8630 | } | |
| 8631 | ||
| 8632 | return { newNavEls: newNavEls, oldNavEls: oldNavEls }; | |
| 8633 | }; | |
| 8634 | ||
| 8635 | Router.prototype.animate = function animate (oldPage, newPage, oldNavbarInner, newNavbarInner, direction, callback) { | |
| 8636 | var router = this; | |
| 8637 | if (router.params.animateCustom) { | |
| 8638 | router.params.animateCustom.apply(router, [oldPage, newPage, oldNavbarInner, newNavbarInner, direction, callback]); | |
| 8639 | return; | |
| 8640 | } | |
| 8641 | var dynamicNavbar = router.dynamicNavbar; | |
| 8642 | var ios = router.app.theme === 'ios'; | |
| 8643 | // Router Animation class | |
| 8644 | var routerTransitionClass = "router-transition-" + direction + " router-transition"; | |
| 8645 | ||
| 8646 | var newNavEls; | |
| 8647 | var oldNavEls; | |
| 8648 | ||
| 8649 | var fromLarge; | |
| 8650 | var toLarge; | |
| 8651 | ||
| 8652 | var oldIsLarge; | |
| 8653 | var newIsLarge; | |
| 8654 | ||
| 8655 | if (ios && dynamicNavbar) { | |
| 8656 | oldIsLarge = oldNavbarInner && oldNavbarInner.hasClass('navbar-inner-large'); | |
| 8657 | newIsLarge = newNavbarInner && newNavbarInner.hasClass('navbar-inner-large'); | |
| 8658 | fromLarge = oldIsLarge && !oldNavbarInner.hasClass('navbar-inner-large-collapsed'); | |
| 8659 | toLarge = newIsLarge && !newNavbarInner.hasClass('navbar-inner-large-collapsed'); | |
| 8660 | var navEls = router.animatableNavElements(newNavbarInner, oldNavbarInner, toLarge, fromLarge, direction); | |
| 8661 | newNavEls = navEls.newNavEls; | |
| 8662 | oldNavEls = navEls.oldNavEls; | |
| 8663 | } | |
| 8664 | ||
| 8665 | function animateNavbars(progress) { | |
| 8666 | if (!(ios && dynamicNavbar)) { return; } | |
| 8667 | if (progress === 1) { | |
| 8668 | if (toLarge) { | |
| 8669 | newNavbarInner.addClass('router-navbar-transition-to-large'); | |
| 8670 | oldNavbarInner.addClass('router-navbar-transition-to-large'); | |
| 8671 | } | |
| 8672 | if (fromLarge) { | |
| 8673 | newNavbarInner.addClass('router-navbar-transition-from-large'); | |
| 8674 | oldNavbarInner.addClass('router-navbar-transition-from-large'); | |
| 8675 | } | |
| 8676 | } | |
| 8677 | newNavEls.forEach(function (navEl) { | |
| 8678 | var $el = navEl.$el; | |
| 8679 | var offset = direction === 'forward' ? navEl.rightOffset : navEl.leftOffset; | |
| 8680 | if (navEl.isSliding) { | |
| 8681 | if (navEl.isSubnavbar && newIsLarge) { | |
| 8682 | $el[0].style.setProperty('transform', ("translate3d(" + (offset * (1 - progress)) + "px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)"), 'important'); | |
| 8683 | } else { | |
| 8684 | $el.transform(("translate3d(" + (offset * (1 - progress)) + "px,0,0)")); | |
| 8685 | } | |
| 8686 | } | |
| 8687 | }); | |
| 8688 | oldNavEls.forEach(function (navEl) { | |
| 8689 | var $el = navEl.$el; | |
| 8690 | var offset = direction === 'forward' ? navEl.leftOffset : navEl.rightOffset; | |
| 8691 | if (navEl.isSliding) { | |
| 8692 | if (navEl.isSubnavbar && oldIsLarge) { | |
| 8693 | $el.transform(("translate3d(" + (offset * (progress)) + "px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)")); | |
| 8694 | } else { | |
| 8695 | $el.transform(("translate3d(" + (offset * (progress)) + "px,0,0)")); | |
| 8696 | } | |
| 8697 | } | |
| 8698 | }); | |
| 8699 | } | |
| 8700 | ||
| 8701 | // AnimationEnd Callback | |
| 8702 | function onDone() { | |
| 8703 | if (router.dynamicNavbar) { | |
| 8704 | if (newNavbarInner) { | |
| 8705 | newNavbarInner.removeClass('router-navbar-transition-to-large router-navbar-transition-from-large'); | |
| 8706 | newNavbarInner.addClass('navbar-no-title-large-transition'); | |
| 8707 | Utils.nextFrame(function () { | |
| 8708 | newNavbarInner.removeClass('navbar-no-title-large-transition'); | |
| 8709 | }); | |
| 8710 | } | |
| 8711 | if (oldNavbarInner) { | |
| 8712 | oldNavbarInner.removeClass('router-navbar-transition-to-large router-navbar-transition-from-large'); | |
| 8713 | } | |
| 8714 | if (newNavbarInner.hasClass('sliding')) { | |
| 8715 | newNavbarInner.find('.title, .left, .right, .left .icon, .subnavbar').transform(''); | |
| 8716 | } else { | |
| 8717 | newNavbarInner.find('.sliding').transform(''); | |
| 8718 | } | |
| 8719 | if (oldNavbarInner.hasClass('sliding')) { | |
| 8720 | oldNavbarInner.find('.title, .left, .right, .left .icon, .subnavbar').transform(''); | |
| 8721 | } else { | |
| 8722 | oldNavbarInner.find('.sliding').transform(''); | |
| 8723 | } | |
| 8724 | } | |
| 8725 | router.$el.removeClass(routerTransitionClass); | |
| 8726 | if (callback) { callback(); } | |
| 8727 | } | |
| 8728 | ||
| 8729 | (direction === 'forward' ? newPage : oldPage).animationEnd(function () { | |
| 8730 | onDone(); | |
| 8731 | }); | |
| 8732 | ||
| 8733 | // Animate | |
| 8734 | if (dynamicNavbar) { | |
| 8735 | // Prepare Navbars | |
| 8736 | animateNavbars(0); | |
| 8737 | Utils.nextFrame(function () { | |
| 8738 | // Add class, start animation | |
| 8739 | animateNavbars(1); | |
| 8740 | router.$el.addClass(routerTransitionClass); | |
| 8741 | }); | |
| 8742 | } else { | |
| 8743 | // Add class, start animation | |
| 8744 | router.$el.addClass(routerTransitionClass); | |
| 8745 | } | |
| 8746 | }; | |
| 8747 | ||
| 8748 | Router.prototype.removeModal = function removeModal (modalEl) { | |
| 8749 | var router = this; | |
| 8750 | router.removeEl(modalEl); | |
| 8751 | }; | |
| 8752 | // eslint-disable-next-line | |
| 8753 | Router.prototype.removeTabContent = function removeTabContent (tabEl) { | |
| 8754 | var $tabEl = $(tabEl); | |
| 8755 | $tabEl.html(''); | |
| 8756 | }; | |
| 8757 | ||
| 8758 | Router.prototype.removeNavbar = function removeNavbar (el) { | |
| 8759 | var router = this; | |
| 8760 | router.removeEl(el); | |
| 8761 | }; | |
| 8762 | ||
| 8763 | Router.prototype.removePage = function removePage (el) { | |
| 8764 | var $el = $(el); | |
| 8765 | var f7Page = $el && $el[0] && $el[0].f7Page; | |
| 8766 | var router = this; | |
| 8767 | if (f7Page && f7Page.route && f7Page.route.route && f7Page.route.route.keepAlive) { | |
| 8768 | $el.remove(); | |
| 8769 | return; | |
| 8770 | } | |
| 8771 | router.removeEl(el); | |
| 8772 | }; | |
| 8773 | ||
| 8774 | Router.prototype.removeEl = function removeEl (el) { | |
| 8775 | if (!el) { return; } | |
| 8776 | var router = this; | |
| 8777 | var $el = $(el); | |
| 8778 | if ($el.length === 0) { return; } | |
| 8779 | $el.find('.tab').each(function (tabIndex, tabEl) { | |
| 8780 | $(tabEl).children().each(function (index, tabChild) { | |
| 8781 | if (tabChild.f7Component) { | |
| 8782 | $(tabChild).trigger('tab:beforeremove'); | |
| 8783 | tabChild.f7Component.$destroy(); | |
| 8784 | } | |
| 8785 | }); | |
| 8786 | }); | |
| 8787 | if ($el[0].f7Component && $el[0].f7Component.$destroy) { | |
| 8788 | $el[0].f7Component.$destroy(); | |
| 8789 | } | |
| 8790 | if (!router.params.removeElements) { | |
| 8791 | return; | |
| 8792 | } | |
| 8793 | if (router.params.removeElementsWithTimeout) { | |
| 8794 | setTimeout(function () { | |
| 8795 | $el.remove(); | |
| 8796 | }, router.params.removeElementsTimeout); | |
| 8797 | } else { | |
| 8798 | $el.remove(); | |
| 8799 | } | |
| 8800 | }; | |
| 8801 | ||
| 8802 | Router.prototype.getPageEl = function getPageEl (content) { | |
| 8803 | var router = this; | |
| 8804 | if (typeof content === 'string') { | |
| 8805 | router.tempDom.innerHTML = content; | |
| 8806 | } else { | |
| 8807 | if ($(content).hasClass('page')) { | |
| 8808 | return content; | |
| 8809 | } | |
| 8810 | router.tempDom.innerHTML = ''; | |
| 8811 | $(router.tempDom).append(content); | |
| 8812 | } | |
| 8813 | ||
| 8814 | return router.findElement('.page', router.tempDom); | |
| 8815 | }; | |
| 8816 | ||
| 8817 | Router.prototype.findElement = function findElement (stringSelector, container, notStacked) { | |
| 8818 | var router = this; | |
| 8819 | var view = router.view; | |
| 8820 | var app = router.app; | |
| 8821 | ||
| 8822 | // Modals Selector | |
| 8823 | var modalsSelector = '.popup, .dialog, .popover, .actions-modal, .sheet-modal, .login-screen, .page'; | |
| 8824 | ||
| 8825 | var $container = $(container); | |
| 8826 | var selector = stringSelector; | |
| 8827 | if (notStacked) { selector += ':not(.stacked)'; } | |
| 8828 | ||
| 8829 | var found = $container | |
| 8830 | .find(selector) | |
| 8831 | .filter(function (index, el) { return $(el).parents(modalsSelector).length === 0; }); | |
| 8832 | ||
| 8833 | if (found.length > 1) { | |
| 8834 | if (typeof view.selector === 'string') { | |
| 8835 | // Search in related view | |
| 8836 | found = $container.find(((view.selector) + " " + selector)); | |
| 8837 | } | |
| 8838 | if (found.length > 1) { | |
| 8839 | // Search in main view | |
| 8840 | found = $container.find(("." + (app.params.viewMainClass) + " " + selector)); | |
| 8841 | } | |
| 8842 | } | |
| 8843 | if (found.length === 1) { return found; } | |
| 8844 | ||
| 8845 | // Try to find not stacked | |
| 8846 | if (!notStacked) { found = router.findElement(selector, $container, true); } | |
| 8847 | if (found && found.length === 1) { return found; } | |
| 8848 | if (found && found.length > 1) { return $(found[0]); } | |
| 8849 | return undefined; | |
| 8850 | }; | |
| 8851 | ||
| 8852 | Router.prototype.flattenRoutes = function flattenRoutes (routes) { | |
| 8853 | if ( routes === void 0 ) routes = this.routes; | |
| 8854 | ||
| 8855 | var router = this; | |
| 8856 | var flattenedRoutes = []; | |
| 8857 | routes.forEach(function (route) { | |
| 8858 | var hasTabRoutes = false; | |
| 8859 | if ('tabs' in route && route.tabs) { | |
| 8860 | var mergedPathsRoutes = route.tabs.map(function (tabRoute) { | |
| 8861 | var tRoute = Utils.extend({}, route, { | |
| 8862 | path: (((route.path) + "/" + (tabRoute.path))).replace('///', '/').replace('//', '/'), | |
| 8863 | parentPath: route.path, | |
| 8864 | tab: tabRoute, | |
| 8865 | }); | |
| 8866 | delete tRoute.tabs; | |
| 8867 | delete tRoute.routes; | |
| 8868 | return tRoute; | |
| 8869 | }); | |
| 8870 | hasTabRoutes = true; | |
| 8871 | flattenedRoutes = flattenedRoutes.concat(router.flattenRoutes(mergedPathsRoutes)); | |
| 8872 | } | |
| 8873 | if ('detailRoutes' in route) { | |
| 8874 | var mergedPathsRoutes$1 = route.detailRoutes.map(function (detailRoute) { | |
| 8875 | var dRoute = Utils.extend({}, detailRoute); | |
| 8876 | dRoute.masterRoute = route; | |
| 8877 | dRoute.masterRoutePath = route.path; | |
| 8878 | return dRoute; | |
| 8879 | }); | |
| 8880 | flattenedRoutes = flattenedRoutes.concat(route, router.flattenRoutes(mergedPathsRoutes$1)); | |
| 8881 | } | |
| 8882 | if ('routes' in route) { | |
| 8883 | var mergedPathsRoutes$2 = route.routes.map(function (childRoute) { | |
| 8884 | var cRoute = Utils.extend({}, childRoute); | |
| 8885 | cRoute.path = (((route.path) + "/" + (cRoute.path))).replace('///', '/').replace('//', '/'); | |
| 8886 | return cRoute; | |
| 8887 | }); | |
| 8888 | if (hasTabRoutes) { | |
| 8889 | flattenedRoutes = flattenedRoutes.concat(router.flattenRoutes(mergedPathsRoutes$2)); | |
| 8890 | } else { | |
| 8891 | flattenedRoutes = flattenedRoutes.concat(route, router.flattenRoutes(mergedPathsRoutes$2)); | |
| 8892 | } | |
| 8893 | } | |
| 8894 | if (!('routes' in route) && !('tabs' in route && route.tabs) && !('detailRoutes' in route)) { | |
| 8895 | flattenedRoutes.push(route); | |
| 8896 | } | |
| 8897 | }); | |
| 8898 | return flattenedRoutes; | |
| 8899 | }; | |
| 8900 | ||
| 8901 | // eslint-disable-next-line | |
| 8902 | Router.prototype.parseRouteUrl = function parseRouteUrl (url) { | |
| 8903 | if (!url) { return {}; } | |
| 8904 | var query = Utils.parseUrlQuery(url); | |
| 8905 | var hash = url.split('#')[1]; | |
| 8906 | var params = {}; | |
| 8907 | var path = url.split('#')[0].split('?')[0]; | |
| 8908 | return { | |
| 8909 | query: query, | |
| 8910 | hash: hash, | |
| 8911 | params: params, | |
| 8912 | url: url, | |
| 8913 | path: path, | |
| 8914 | }; | |
| 8915 | }; | |
| 8916 | ||
| 8917 | // eslint-disable-next-line | |
| 8918 | Router.prototype.constructRouteUrl = function constructRouteUrl (route, ref) { | |
| 8919 | if ( ref === void 0 ) ref = {}; | |
| 8920 | var params = ref.params; | |
| 8921 | var query = ref.query; | |
| 8922 | ||
| 8923 | var path = route.path; | |
| 8924 | var toUrl = pathToRegexp_1.compile(path); | |
| 8925 | var url; | |
| 8926 | try { | |
| 8927 | url = toUrl(params || {}); | |
| 8928 | } catch (error) { | |
| 8929 | throw new Error(("Framework7: error constructing route URL from passed params:\nRoute: " + path + "\n" + (error.toString()))); | |
| 8930 | } | |
| 8931 | ||
| 8932 | if (query) { | |
| 8933 | if (typeof query === 'string') { url += "?" + query; } | |
| 8934 | else { url += "?" + (Utils.serializeObject(query)); } | |
| 8935 | } | |
| 8936 | ||
| 8937 | return url; | |
| 8938 | }; | |
| 8939 | ||
| 8940 | Router.prototype.findTabRoute = function findTabRoute (tabEl) { | |
| 8941 | var router = this; | |
| 8942 | var $tabEl = $(tabEl); | |
| 8943 | var parentPath = router.currentRoute.route.parentPath; | |
| 8944 | var tabId = $tabEl.attr('id'); | |
| 8945 | var flattenedRoutes = router.flattenRoutes(router.routes); | |
| 8946 | var foundTabRoute; | |
| 8947 | flattenedRoutes.forEach(function (route) { | |
| 8948 | if ( | |
| 8949 | route.parentPath === parentPath | |
| 8950 | && route.tab | |
| 8951 | && route.tab.id === tabId | |
| 8952 | ) { | |
| 8953 | foundTabRoute = route; | |
| 8954 | } | |
| 8955 | }); | |
| 8956 | return foundTabRoute; | |
| 8957 | }; | |
| 8958 | ||
| 8959 | Router.prototype.findRouteByKey = function findRouteByKey (key, value) { | |
| 8960 | var router = this; | |
| 8961 | var routes = router.routes; | |
| 8962 | var flattenedRoutes = router.flattenRoutes(routes); | |
| 8963 | var matchingRoute; | |
| 8964 | ||
| 8965 | flattenedRoutes.forEach(function (route) { | |
| 8966 | if (matchingRoute) { return; } | |
| 8967 | if (route[key] === value) { | |
| 8968 | matchingRoute = route; | |
| 8969 | } | |
| 8970 | }); | |
| 8971 | return matchingRoute; | |
| 8972 | }; | |
| 8973 | ||
| 8974 | Router.prototype.findMatchingRoute = function findMatchingRoute (url) { | |
| 8975 | if (!url) { return undefined; } | |
| 8976 | var router = this; | |
| 8977 | var routes = router.routes; | |
| 8978 | var flattenedRoutes = router.flattenRoutes(routes); | |
| 8979 | var ref = router.parseRouteUrl(url); | |
| 8980 | var path = ref.path; | |
| 8981 | var query = ref.query; | |
| 8982 | var hash = ref.hash; | |
| 8983 | var params = ref.params; | |
| 8984 | var matchingRoute; | |
| 8985 | flattenedRoutes.forEach(function (route) { | |
| 8986 | if (matchingRoute) { return; } | |
| 8987 | var keys = []; | |
| 8988 | ||
| 8989 | var pathsToMatch = [route.path]; | |
| 8990 | if (route.alias) { | |
| 8991 | if (typeof route.alias === 'string') { pathsToMatch.push(route.alias); } | |
| 8992 | else if (Array.isArray(route.alias)) { | |
| 8993 | route.alias.forEach(function (aliasPath) { | |
| 8994 | pathsToMatch.push(aliasPath); | |
| 8995 | }); | |
| 8996 | } | |
| 8997 | } | |
| 8998 | ||
| 8999 | var matched; | |
| 9000 | pathsToMatch.forEach(function (pathToMatch) { | |
| 9001 | if (matched) { return; } | |
| 9002 | matched = pathToRegexp_1(pathToMatch, keys).exec(path); | |
| 9003 | }); | |
| 9004 | ||
| 9005 | if (matched) { | |
| 9006 | keys.forEach(function (keyObj, index) { | |
| 9007 | if (typeof keyObj.name === 'number') { return; } | |
| 9008 | var paramValue = matched[index + 1]; | |
| 5d51ea26 DC |
9009 | if (typeof paramValue === 'undefined' || paramValue === null) { |
| 9010 | params[keyObj.name] = paramValue; | |
| 9011 | } else { | |
| 9012 | params[keyObj.name] = decodeURIComponent(paramValue); | |
| 9013 | } | |
| 5309fbda DC |
9014 | }); |
| 9015 | ||
| 9016 | var parentPath; | |
| 9017 | if (route.parentPath) { | |
| 9018 | parentPath = path.split('/').slice(0, route.parentPath.split('/').length - 1).join('/'); | |
| 9019 | } | |
| 9020 | ||
| 9021 | matchingRoute = { | |
| 9022 | query: query, | |
| 9023 | hash: hash, | |
| 9024 | params: params, | |
| 9025 | url: url, | |
| 9026 | path: path, | |
| 9027 | parentPath: parentPath, | |
| 9028 | route: route, | |
| 9029 | name: route.name, | |
| 9030 | }; | |
| 9031 | } | |
| 9032 | }); | |
| 9033 | return matchingRoute; | |
| 9034 | }; | |
| 9035 | ||
| 9036 | // eslint-disable-next-line | |
| 9037 | Router.prototype.replaceRequestUrlParams = function replaceRequestUrlParams (url, options) { | |
| 9038 | if ( url === void 0 ) url = ''; | |
| 9039 | if ( options === void 0 ) options = {}; | |
| 9040 | ||
| 9041 | var compiledUrl = url; | |
| 9042 | if (typeof compiledUrl === 'string' | |
| 9043 | && compiledUrl.indexOf('{{') >= 0 | |
| 9044 | && options | |
| 9045 | && options.route | |
| 9046 | && options.route.params | |
| 9047 | && Object.keys(options.route.params).length | |
| 9048 | ) { | |
| 9049 | Object.keys(options.route.params).forEach(function (paramName) { | |
| 9050 | var regExp = new RegExp(("{{" + paramName + "}}"), 'g'); | |
| 9051 | compiledUrl = compiledUrl.replace(regExp, options.route.params[paramName] || ''); | |
| 9052 | }); | |
| 9053 | } | |
| 9054 | return compiledUrl; | |
| 9055 | }; | |
| 9056 | ||
| 9057 | Router.prototype.removeFromXhrCache = function removeFromXhrCache (url) { | |
| 9058 | var router = this; | |
| 9059 | var xhrCache = router.cache.xhr; | |
| 9060 | var index = false; | |
| 9061 | for (var i = 0; i < xhrCache.length; i += 1) { | |
| 9062 | if (xhrCache[i].url === url) { index = i; } | |
| 9063 | } | |
| 9064 | if (index !== false) { xhrCache.splice(index, 1); } | |
| 9065 | }; | |
| 9066 | ||
| 9067 | Router.prototype.xhrRequest = function xhrRequest (requestUrl, options) { | |
| 9068 | var router = this; | |
| 9069 | var params = router.params; | |
| 9070 | var ignoreCache = options.ignoreCache; | |
| 9071 | var url = requestUrl; | |
| 9072 | ||
| 9073 | var hasQuery = url.indexOf('?') >= 0; | |
| 9074 | if (params.passRouteQueryToRequest | |
| 9075 | && options | |
| 9076 | && options.route | |
| 9077 | && options.route.query | |
| 9078 | && Object.keys(options.route.query).length | |
| 9079 | ) { | |
| 9080 | url += "" + (hasQuery ? '&' : '?') + (Utils.serializeObject(options.route.query)); | |
| 9081 | hasQuery = true; | |
| 9082 | } | |
| 9083 | ||
| 9084 | if (params.passRouteParamsToRequest | |
| 9085 | && options | |
| 9086 | && options.route | |
| 9087 | && options.route.params | |
| 9088 | && Object.keys(options.route.params).length | |
| 9089 | ) { | |
| 9090 | url += "" + (hasQuery ? '&' : '?') + (Utils.serializeObject(options.route.params)); | |
| 9091 | hasQuery = true; | |
| 9092 | } | |
| 9093 | ||
| 9094 | if (url.indexOf('{{') >= 0) { | |
| 9095 | url = router.replaceRequestUrlParams(url, options); | |
| 9096 | } | |
| 9097 | // should we ignore get params or not | |
| 9098 | if (params.xhrCacheIgnoreGetParameters && url.indexOf('?') >= 0) { | |
| 9099 | url = url.split('?')[0]; | |
| 9100 | } | |
| 9101 | return new Promise(function (resolve, reject) { | |
| 9102 | if (params.xhrCache && !ignoreCache && url.indexOf('nocache') < 0 && params.xhrCacheIgnore.indexOf(url) < 0) { | |
| 9103 | for (var i = 0; i < router.cache.xhr.length; i += 1) { | |
| 9104 | var cachedUrl = router.cache.xhr[i]; | |
| 9105 | if (cachedUrl.url === url) { | |
| 9106 | // Check expiration | |
| 9107 | if (Utils.now() - cachedUrl.time < params.xhrCacheDuration) { | |
| 9108 | // Load from cache | |
| 9109 | resolve(cachedUrl.content); | |
| 9110 | return; | |
| 9111 | } | |
| 9112 | } | |
| 9113 | } | |
| 9114 | } | |
| 9115 | router.xhr = router.app.request({ | |
| 9116 | url: url, | |
| 9117 | method: 'GET', | |
| 9118 | beforeSend: function beforeSend(xhr) { | |
| 9119 | router.emit('routerAjaxStart', xhr, options); | |
| 9120 | }, | |
| 9121 | complete: function complete(xhr, status) { | |
| 9122 | router.emit('routerAjaxComplete', xhr); | |
| 9123 | if ((status !== 'error' && status !== 'timeout' && (xhr.status >= 200 && xhr.status < 300)) || xhr.status === 0) { | |
| 9124 | if (params.xhrCache && xhr.responseText !== '') { | |
| 9125 | router.removeFromXhrCache(url); | |
| 9126 | router.cache.xhr.push({ | |
| 9127 | url: url, | |
| 9128 | time: Utils.now(), | |
| 9129 | content: xhr.responseText, | |
| 9130 | }); | |
| 9131 | } | |
| 9132 | router.emit('routerAjaxSuccess', xhr, options); | |
| 9133 | resolve(xhr.responseText); | |
| 9134 | } else { | |
| 9135 | router.emit('routerAjaxError', xhr, options); | |
| 9136 | reject(xhr); | |
| 9137 | } | |
| 9138 | }, | |
| 9139 | error: function error(xhr) { | |
| 9140 | router.emit('routerAjaxError', xhr, options); | |
| 9141 | reject(xhr); | |
| 9142 | }, | |
| 9143 | }); | |
| 9144 | }); | |
| 9145 | }; | |
| 9146 | ||
| 9147 | // Remove theme elements | |
| 9148 | Router.prototype.removeThemeElements = function removeThemeElements (el) { | |
| 9149 | var router = this; | |
| 9150 | var theme = router.app.theme; | |
| 5d51ea26 DC |
9151 | var toRemove; |
| 9152 | if (theme === 'ios') { | |
| 9153 | toRemove = '.md-only, .aurora-only, .if-md, .if-aurora, .if-not-ios, .not-ios'; | |
| 9154 | } else if (theme === 'md') { | |
| 9155 | toRemove = '.ios-only, .aurora-only, .if-ios, .if-aurora, .if-not-md, .not-md'; | |
| 9156 | } else if (theme === 'aurora') { | |
| 9157 | toRemove = '.ios-only, .md-only, .if-ios, .if-md, .if-not-aurora, .not-aurora'; | |
| 9158 | } | |
| 9159 | $(el).find(toRemove).remove(); | |
| 5309fbda DC |
9160 | }; |
| 9161 | ||
| 9162 | Router.prototype.getPageData = function getPageData (pageEl, navbarEl, from, to, route, pageFromEl) { | |
| 9163 | if ( route === void 0 ) route = {}; | |
| 9164 | ||
| 9165 | var router = this; | |
| 9166 | var $pageEl = $(pageEl).eq(0); | |
| 9167 | var $navbarEl = $(navbarEl).eq(0); | |
| 9168 | var currentPage = $pageEl[0].f7Page || {}; | |
| 9169 | var direction; | |
| 9170 | var pageFrom; | |
| 9171 | if ((from === 'next' && to === 'current') || (from === 'current' && to === 'previous')) { direction = 'forward'; } | |
| 9172 | if ((from === 'current' && to === 'next') || (from === 'previous' && to === 'current')) { direction = 'backward'; } | |
| 9173 | if (currentPage && !currentPage.fromPage) { | |
| 9174 | var $pageFromEl = $(pageFromEl); | |
| 9175 | if ($pageFromEl.length) { | |
| 9176 | pageFrom = $pageFromEl[0].f7Page; | |
| 9177 | } | |
| 9178 | } | |
| 9179 | pageFrom = currentPage.pageFrom || pageFrom; | |
| 9180 | if (pageFrom && pageFrom.pageFrom) { | |
| 9181 | pageFrom.pageFrom = null; | |
| 9182 | } | |
| 9183 | var page = { | |
| 9184 | app: router.app, | |
| 9185 | view: router.view, | |
| 9186 | router: router, | |
| 9187 | $el: $pageEl, | |
| 9188 | el: $pageEl[0], | |
| 9189 | $pageEl: $pageEl, | |
| 9190 | pageEl: $pageEl[0], | |
| 9191 | $navbarEl: $navbarEl, | |
| 9192 | navbarEl: $navbarEl[0], | |
| 9193 | name: $pageEl.attr('data-name'), | |
| 9194 | position: from, | |
| 9195 | from: from, | |
| 9196 | to: to, | |
| 9197 | direction: direction, | |
| 9198 | route: currentPage.route ? currentPage.route : route, | |
| 9199 | pageFrom: pageFrom, | |
| 9200 | }; | |
| 9201 | ||
| 9202 | $pageEl[0].f7Page = page; | |
| 9203 | return page; | |
| 9204 | }; | |
| 9205 | ||
| 9206 | // Callbacks | |
| 9207 | Router.prototype.pageCallback = function pageCallback (callback, pageEl, navbarEl, from, to, options, pageFromEl) { | |
| 9208 | if ( options === void 0 ) options = {}; | |
| 9209 | ||
| 9210 | if (!pageEl) { return; } | |
| 9211 | var router = this; | |
| 9212 | var $pageEl = $(pageEl); | |
| 9213 | if (!$pageEl.length) { return; } | |
| 9214 | var $navbarEl = $(navbarEl); | |
| 9215 | var route = options.route; | |
| 9216 | var restoreScrollTopOnBack = router.params.restoreScrollTopOnBack | |
| 9217 | && !( | |
| 9218 | router.params.masterDetailBreakpoint > 0 | |
| 9219 | && $pageEl.hasClass('page-master') | |
| 9220 | && router.app.width >= router.params.masterDetailBreakpoint | |
| 9221 | ); | |
| 9222 | var keepAlive = $pageEl[0].f7Page && $pageEl[0].f7Page.route && $pageEl[0].f7Page.route.route && $pageEl[0].f7Page.route.route.keepAlive; | |
| 9223 | ||
| 9224 | if (callback === 'beforeRemove' && keepAlive) { | |
| 9225 | callback = 'beforeUnmount'; // eslint-disable-line | |
| 9226 | } | |
| 9227 | ||
| 9228 | var camelName = "page" + (callback[0].toUpperCase() + callback.slice(1, callback.length)); | |
| 9229 | var colonName = "page:" + (callback.toLowerCase()); | |
| 9230 | ||
| 9231 | var page = {}; | |
| 9232 | if (callback === 'beforeRemove' && $pageEl[0].f7Page) { | |
| 9233 | page = Utils.extend($pageEl[0].f7Page, { from: from, to: to, position: from }); | |
| 9234 | } else { | |
| 9235 | page = router.getPageData($pageEl[0], $navbarEl[0], from, to, route, pageFromEl); | |
| 9236 | } | |
| 9237 | page.swipeBack = !!options.swipeBack; | |
| 9238 | ||
| 9239 | var ref = options.route ? options.route.route : {}; | |
| 9240 | var on = ref.on; if ( on === void 0 ) on = {}; | |
| 9241 | var once = ref.once; if ( once === void 0 ) once = {}; | |
| 9242 | if (options.on) { | |
| 9243 | Utils.extend(on, options.on); | |
| 9244 | } | |
| 9245 | if (options.once) { | |
| 9246 | Utils.extend(once, options.once); | |
| 9247 | } | |
| 9248 | ||
| 9249 | function attachEvents() { | |
| 9250 | if ($pageEl[0].f7RouteEventsAttached) { return; } | |
| 9251 | $pageEl[0].f7RouteEventsAttached = true; | |
| 9252 | if (on && Object.keys(on).length > 0) { | |
| 9253 | $pageEl[0].f7RouteEventsOn = on; | |
| 9254 | Object.keys(on).forEach(function (eventName) { | |
| 9255 | on[eventName] = on[eventName].bind(router); | |
| 9256 | $pageEl.on(Utils.eventNameToColonCase(eventName), on[eventName]); | |
| 9257 | }); | |
| 9258 | } | |
| 9259 | if (once && Object.keys(once).length > 0) { | |
| 9260 | $pageEl[0].f7RouteEventsOnce = once; | |
| 9261 | Object.keys(once).forEach(function (eventName) { | |
| 9262 | once[eventName] = once[eventName].bind(router); | |
| 9263 | $pageEl.once(Utils.eventNameToColonCase(eventName), once[eventName]); | |
| 9264 | }); | |
| 9265 | } | |
| 9266 | } | |
| 9267 | ||
| 9268 | function detachEvents() { | |
| 9269 | if (!$pageEl[0].f7RouteEventsAttached) { return; } | |
| 9270 | if ($pageEl[0].f7RouteEventsOn) { | |
| 9271 | Object.keys($pageEl[0].f7RouteEventsOn).forEach(function (eventName) { | |
| 9272 | $pageEl.off(Utils.eventNameToColonCase(eventName), $pageEl[0].f7RouteEventsOn[eventName]); | |
| 9273 | }); | |
| 9274 | } | |
| 9275 | if ($pageEl[0].f7RouteEventsOnce) { | |
| 9276 | Object.keys($pageEl[0].f7RouteEventsOnce).forEach(function (eventName) { | |
| 9277 | $pageEl.off(Utils.eventNameToColonCase(eventName), $pageEl[0].f7RouteEventsOnce[eventName]); | |
| 9278 | }); | |
| 9279 | } | |
| 9280 | $pageEl[0].f7RouteEventsAttached = null; | |
| 9281 | $pageEl[0].f7RouteEventsOn = null; | |
| 9282 | $pageEl[0].f7RouteEventsOnce = null; | |
| 9283 | delete $pageEl[0].f7RouteEventsAttached; | |
| 9284 | delete $pageEl[0].f7RouteEventsOn; | |
| 9285 | delete $pageEl[0].f7RouteEventsOnce; | |
| 9286 | } | |
| 9287 | ||
| 9288 | if (callback === 'mounted') { | |
| 9289 | attachEvents(); | |
| 9290 | } | |
| 9291 | if (callback === 'init') { | |
| 9292 | if (restoreScrollTopOnBack && (from === 'previous' || !from) && to === 'current' && router.scrollHistory[page.route.url] && !$pageEl.hasClass('no-restore-scroll')) { | |
| 9293 | var $pageContent = $pageEl.find('.page-content'); | |
| 9294 | if ($pageContent.length > 0) { | |
| 9295 | // eslint-disable-next-line | |
| 9296 | $pageContent = $pageContent.filter(function (pageContentIndex, pageContentEl) { | |
| 9297 | return ( | |
| 9298 | $(pageContentEl).parents('.tab:not(.tab-active)').length === 0 | |
| 9299 | && !$(pageContentEl).is('.tab:not(.tab-active)') | |
| 9300 | ); | |
| 9301 | }); | |
| 9302 | } | |
| 9303 | $pageContent.scrollTop(router.scrollHistory[page.route.url]); | |
| 9304 | } | |
| 9305 | attachEvents(); | |
| 9306 | if ($pageEl[0].f7PageInitialized) { | |
| 9307 | $pageEl.trigger('page:reinit', page); | |
| 9308 | router.emit('pageReinit', page); | |
| 9309 | return; | |
| 9310 | } | |
| 9311 | $pageEl[0].f7PageInitialized = true; | |
| 9312 | } | |
| 9313 | if (restoreScrollTopOnBack && callback === 'beforeOut' && from === 'current' && to === 'previous') { | |
| 9314 | // Save scroll position | |
| 9315 | var $pageContent$1 = $pageEl.find('.page-content'); | |
| 9316 | if ($pageContent$1.length > 0) { | |
| 9317 | // eslint-disable-next-line | |
| 9318 | $pageContent$1 = $pageContent$1.filter(function (pageContentIndex, pageContentEl) { | |
| 9319 | return ( | |
| 9320 | $(pageContentEl).parents('.tab:not(.tab-active)').length === 0 | |
| 9321 | && !$(pageContentEl).is('.tab:not(.tab-active)') | |
| 9322 | ); | |
| 9323 | }); | |
| 9324 | } | |
| 9325 | router.scrollHistory[page.route.url] = $pageContent$1.scrollTop(); | |
| 9326 | } | |
| 9327 | if (restoreScrollTopOnBack && callback === 'beforeOut' && from === 'current' && to === 'next') { | |
| 9328 | // Delete scroll position | |
| 9329 | delete router.scrollHistory[page.route.url]; | |
| 9330 | } | |
| 9331 | ||
| 9332 | $pageEl.trigger(colonName, page); | |
| 9333 | router.emit(camelName, page); | |
| 9334 | ||
| 9335 | if (callback === 'beforeRemove' || callback === 'beforeUnmount') { | |
| 9336 | detachEvents(); | |
| 9337 | if (!keepAlive) { | |
| 9338 | if ($pageEl[0].f7Page && $pageEl[0].f7Page.navbarEl) { | |
| 9339 | delete $pageEl[0].f7Page.navbarEl.f7Page; | |
| 9340 | } | |
| 9341 | $pageEl[0].f7Page = null; | |
| 9342 | } | |
| 9343 | } | |
| 9344 | }; | |
| 9345 | ||
| 9346 | Router.prototype.saveHistory = function saveHistory () { | |
| 9347 | var router = this; | |
| 9348 | router.view.history = router.history; | |
| 9349 | if (router.params.pushState) { | |
| 9350 | win.localStorage[("f7router-" + (router.view.id) + "-history")] = JSON.stringify(router.history); | |
| 9351 | } | |
| 9352 | }; | |
| 9353 | ||
| 9354 | Router.prototype.restoreHistory = function restoreHistory () { | |
| 9355 | var router = this; | |
| 9356 | if (router.params.pushState && win.localStorage[("f7router-" + (router.view.id) + "-history")]) { | |
| 9357 | router.history = JSON.parse(win.localStorage[("f7router-" + (router.view.id) + "-history")]); | |
| 9358 | router.view.history = router.history; | |
| 9359 | } | |
| 9360 | }; | |
| 9361 | ||
| 9362 | Router.prototype.clearHistory = function clearHistory () { | |
| 9363 | var router = this; | |
| 9364 | router.history = []; | |
| 9365 | if (router.view) { router.view.history = []; } | |
| 9366 | router.saveHistory(); | |
| 9367 | }; | |
| 9368 | ||
| 9369 | Router.prototype.updateCurrentUrl = function updateCurrentUrl (newUrl) { | |
| 9370 | var router = this; | |
| 9371 | appRouterCheck(router, 'updateCurrentUrl'); | |
| 9372 | // Update history | |
| 9373 | if (router.history.length) { | |
| 9374 | router.history[router.history.length - 1] = newUrl; | |
| 9375 | } else { | |
| 9376 | router.history.push(newUrl); | |
| 9377 | } | |
| 9378 | ||
| 9379 | // Update current route params | |
| 9380 | var ref = router.parseRouteUrl(newUrl); | |
| 9381 | var query = ref.query; | |
| 9382 | var hash = ref.hash; | |
| 9383 | var params = ref.params; | |
| 9384 | var url = ref.url; | |
| 9385 | var path = ref.path; | |
| 9386 | if (router.currentRoute) { | |
| 9387 | Utils.extend(router.currentRoute, { | |
| 9388 | query: query, | |
| 9389 | hash: hash, | |
| 9390 | params: params, | |
| 9391 | url: url, | |
| 9392 | path: path, | |
| 9393 | }); | |
| 9394 | } | |
| 9395 | ||
| 9396 | if (router.params.pushState) { | |
| 9397 | var pushStateRoot = router.params.pushStateRoot || ''; | |
| 9398 | History.replace( | |
| 9399 | router.view.id, | |
| 9400 | { | |
| 9401 | url: newUrl, | |
| 9402 | }, | |
| 9403 | pushStateRoot + router.params.pushStateSeparator + newUrl | |
| 9404 | ); | |
| 9405 | } | |
| 9406 | ||
| 9407 | // Save History | |
| 9408 | router.saveHistory(); | |
| 9409 | ||
| 9410 | router.emit('routeUrlUpdate', router.currentRoute, router); | |
| 9411 | }; | |
| 9412 | ||
| 9413 | Router.prototype.init = function init () { | |
| 9414 | var router = this; | |
| 9415 | var app = router.app; | |
| 9416 | var view = router.view; | |
| 9417 | ||
| 9418 | // Init Swipeback | |
| 9419 | { | |
| 9420 | if ( | |
| 9421 | (view && router.params.iosSwipeBack && app.theme === 'ios') | |
| 9422 | || (view && router.params.mdSwipeBack && app.theme === 'md') | |
| 5d51ea26 | 9423 | || (view && router.params.auroraSwipeBack && app.theme === 'aurora') |
| 5309fbda DC |
9424 | ) { |
| 9425 | SwipeBack(router); | |
| 9426 | } | |
| 9427 | } | |
| 9428 | ||
| 9429 | // Dynamic not separated navbbar | |
| 9430 | if (router.dynamicNavbar && !router.separateNavbar) { | |
| 9431 | router.$el.addClass('router-dynamic-navbar-inside'); | |
| 9432 | } | |
| 9433 | ||
| 9434 | var initUrl = router.params.url; | |
| 9435 | var documentUrl = doc.location.href.split(doc.location.origin)[1]; | |
| 9436 | var historyRestored; | |
| 9437 | var ref = router.params; | |
| 9438 | var pushState = ref.pushState; | |
| 9439 | var pushStateOnLoad = ref.pushStateOnLoad; | |
| 9440 | var pushStateSeparator = ref.pushStateSeparator; | |
| 9441 | var pushStateAnimateOnLoad = ref.pushStateAnimateOnLoad; | |
| 9442 | var ref$1 = router.params; | |
| 9443 | var pushStateRoot = ref$1.pushStateRoot; | |
| 9444 | if (win.cordova && pushState && !pushStateSeparator && !pushStateRoot && doc.location.pathname.indexOf('index.html')) { | |
| 9445 | // eslint-disable-next-line | |
| 9446 | console.warn('Framework7: wrong or not complete pushState configuration, trying to guess pushStateRoot'); | |
| 9447 | pushStateRoot = doc.location.pathname.split('index.html')[0]; | |
| 9448 | } | |
| 5309fbda DC |
9449 | if (!pushState || !pushStateOnLoad) { |
| 9450 | if (!initUrl) { | |
| 9451 | initUrl = documentUrl; | |
| 9452 | } | |
| 9453 | if (doc.location.search && initUrl.indexOf('?') < 0) { | |
| 9454 | initUrl += doc.location.search; | |
| 9455 | } | |
| 9456 | if (doc.location.hash && initUrl.indexOf('#') < 0) { | |
| 9457 | initUrl += doc.location.hash; | |
| 9458 | } | |
| 9459 | } else { | |
| 9460 | if (pushStateRoot && documentUrl.indexOf(pushStateRoot) >= 0) { | |
| 9461 | documentUrl = documentUrl.split(pushStateRoot)[1]; | |
| 9462 | if (documentUrl === '') { documentUrl = '/'; } | |
| 9463 | } | |
| 9464 | if (pushStateSeparator.length > 0 && documentUrl.indexOf(pushStateSeparator) >= 0) { | |
| 9465 | initUrl = documentUrl.split(pushStateSeparator)[1]; | |
| 9466 | } else { | |
| 9467 | initUrl = documentUrl; | |
| 9468 | } | |
| 9469 | router.restoreHistory(); | |
| 9470 | if (router.history.indexOf(initUrl) >= 0) { | |
| 9471 | router.history = router.history.slice(0, router.history.indexOf(initUrl) + 1); | |
| 9472 | } else if (router.params.url === initUrl) { | |
| 9473 | router.history = [initUrl]; | |
| 9474 | } else if (History.state && History.state[view.id] && History.state[view.id].url === router.history[router.history.length - 1]) { | |
| 9475 | initUrl = router.history[router.history.length - 1]; | |
| 9476 | } else { | |
| 9477 | router.history = [documentUrl.split(pushStateSeparator)[0] || '/', initUrl]; | |
| 9478 | } | |
| 9479 | if (router.history.length > 1) { | |
| 9480 | historyRestored = true; | |
| 9481 | } else { | |
| 9482 | router.history = []; | |
| 9483 | } | |
| 9484 | router.saveHistory(); | |
| 9485 | } | |
| 9486 | var currentRoute; | |
| 9487 | if (router.history.length > 1) { | |
| 9488 | // Will load page | |
| 9489 | currentRoute = router.findMatchingRoute(router.history[0]); | |
| 9490 | if (!currentRoute) { | |
| 9491 | currentRoute = Utils.extend(router.parseRouteUrl(router.history[0]), { | |
| 9492 | route: { | |
| 9493 | url: router.history[0], | |
| 9494 | path: router.history[0].split('?')[0], | |
| 9495 | }, | |
| 9496 | }); | |
| 9497 | } | |
| 9498 | } else { | |
| 9499 | // Don't load page | |
| 9500 | currentRoute = router.findMatchingRoute(initUrl); | |
| 9501 | if (!currentRoute) { | |
| 9502 | currentRoute = Utils.extend(router.parseRouteUrl(initUrl), { | |
| 9503 | route: { | |
| 9504 | url: initUrl, | |
| 9505 | path: initUrl.split('?')[0], | |
| 9506 | }, | |
| 9507 | }); | |
| 9508 | } | |
| 9509 | } | |
| 9510 | ||
| 9511 | if (router.params.stackPages) { | |
| 9512 | router.$el.children('.page').each(function (index, pageEl) { | |
| 9513 | var $pageEl = $(pageEl); | |
| 9514 | router.initialPages.push($pageEl[0]); | |
| 9515 | if (router.separateNavbar && $pageEl.children('.navbar').length > 0) { | |
| 9516 | router.initialNavbars.push($pageEl.children('.navbar').find('.navbar-inner')[0]); | |
| 9517 | } | |
| 9518 | }); | |
| 9519 | } | |
| 9520 | ||
| 9521 | if (router.$el.children('.page:not(.stacked)').length === 0 && initUrl) { | |
| 9522 | // No pages presented in DOM, reload new page | |
| 9523 | router.navigate(initUrl, { | |
| 9524 | initial: true, | |
| 9525 | reloadCurrent: true, | |
| 9526 | pushState: false, | |
| 9527 | }); | |
| 9528 | } else { | |
| 9529 | // Init current DOM page | |
| 9530 | var hasTabRoute; | |
| 9531 | router.currentRoute = currentRoute; | |
| 9532 | router.$el.children('.page:not(.stacked)').each(function (index, pageEl) { | |
| 9533 | var $pageEl = $(pageEl); | |
| 9534 | var $navbarInnerEl; | |
| 9535 | $pageEl.addClass('page-current'); | |
| 9536 | if (router.separateNavbar) { | |
| 9537 | $navbarInnerEl = $pageEl.children('.navbar').children('.navbar-inner'); | |
| 9538 | if ($navbarInnerEl.length > 0) { | |
| 9539 | if (!router.$navbarEl.parents(doc).length) { | |
| 9540 | router.$el.prepend(router.$navbarEl); | |
| 9541 | } | |
| 9542 | $navbarInnerEl.addClass('navbar-current'); | |
| 9543 | router.$navbarEl.append($navbarInnerEl); | |
| 9544 | if ($navbarInnerEl.children('.title-large').length) { | |
| 9545 | $navbarInnerEl.addClass('navbar-inner-large'); | |
| 9546 | } | |
| 9547 | $pageEl.children('.navbar').remove(); | |
| 9548 | } else { | |
| 9549 | router.$navbarEl.addClass('navbar-hidden'); | |
| 9550 | if ($navbarInnerEl.children('.title-large').length) { | |
| 9551 | router.$navbarEl.addClass('navbar-hidden navbar-large-hidden'); | |
| 9552 | } | |
| 9553 | } | |
| 9554 | } | |
| 9555 | if (router.currentRoute && router.currentRoute.route && router.currentRoute.route.master && router.params.masterDetailBreakpoint > 0) { | |
| 9556 | $pageEl.addClass('page-master'); | |
| 9557 | $pageEl.trigger('page:role', { role: 'master' }); | |
| 9558 | if ($navbarInnerEl && $navbarInnerEl.length) { | |
| 9559 | $navbarInnerEl.addClass('navbar-master'); | |
| 9560 | } | |
| 9561 | } | |
| 9562 | var initOptions = { | |
| 9563 | route: router.currentRoute, | |
| 9564 | }; | |
| 9565 | if (router.currentRoute && router.currentRoute.route && router.currentRoute.route.options) { | |
| 9566 | Utils.extend(initOptions, router.currentRoute.route.options); | |
| 9567 | } | |
| 9568 | router.currentPageEl = $pageEl[0]; | |
| 9569 | if (router.separateNavbar && $navbarInnerEl.length) { | |
| 9570 | router.currentNavbarEl = $navbarInnerEl[0]; | |
| 9571 | } | |
| 9572 | router.removeThemeElements($pageEl); | |
| 9573 | if (router.separateNavbar && $navbarInnerEl.length) { | |
| 9574 | router.removeThemeElements($navbarInnerEl); | |
| 9575 | } | |
| 9576 | if (initOptions.route.route.tab) { | |
| 9577 | hasTabRoute = true; | |
| 9578 | router.tabLoad(initOptions.route.route.tab, Utils.extend({}, initOptions)); | |
| 9579 | } | |
| 9580 | router.pageCallback('init', $pageEl, $navbarInnerEl, 'current', undefined, initOptions); | |
| 9581 | }); | |
| 9582 | if (historyRestored) { | |
| 9583 | router.navigate(initUrl, { | |
| 9584 | initial: true, | |
| 9585 | pushState: false, | |
| 9586 | history: false, | |
| 9587 | animate: pushStateAnimateOnLoad, | |
| 9588 | once: { | |
| 9589 | pageAfterIn: function pageAfterIn() { | |
| 5d51ea26 DC |
9590 | var preloadPreviousPage = router.params.preloadPreviousPage || router.params[((app.theme) + "SwipeBack")]; |
| 9591 | if (preloadPreviousPage && router.history.length > 2) { | |
| 5309fbda DC |
9592 | router.back({ preload: true }); |
| 9593 | } | |
| 9594 | }, | |
| 9595 | }, | |
| 9596 | }); | |
| 9597 | } | |
| 9598 | if (!historyRestored && !hasTabRoute) { | |
| 9599 | router.history.push(initUrl); | |
| 9600 | router.saveHistory(); | |
| 9601 | } | |
| 9602 | } | |
| 9603 | if (initUrl && pushState && pushStateOnLoad && (!History.state || !History.state[view.id])) { | |
| 9604 | History.initViewState(view.id, { | |
| 9605 | url: initUrl, | |
| 9606 | }); | |
| 9607 | } | |
| 9608 | router.emit('local::init routerInit', router); | |
| 9609 | }; | |
| 9610 | ||
| 9611 | Router.prototype.destroy = function destroy () { | |
| 9612 | var router = this; | |
| 9613 | ||
| 9614 | router.emit('local::destroy routerDestroy', router); | |
| 9615 | ||
| 9616 | // Delete props & methods | |
| 9617 | Object.keys(router).forEach(function (routerProp) { | |
| 9618 | router[routerProp] = null; | |
| 9619 | delete router[routerProp]; | |
| 9620 | }); | |
| 9621 | ||
| 9622 | router = null; | |
| 9623 | }; | |
| 9624 | ||
| 9625 | return Router; | |
| 9626 | }(Framework7Class)); | |
| 9627 | ||
| 9628 | // Load | |
| 9629 | Router.prototype.forward = forward; | |
| 9630 | Router.prototype.load = load; | |
| 9631 | Router.prototype.navigate = navigate; | |
| 9632 | Router.prototype.refreshPage = refreshPage; | |
| 9633 | // Tab | |
| 9634 | Router.prototype.tabLoad = tabLoad; | |
| 9635 | Router.prototype.tabRemove = tabRemove; | |
| 9636 | // Modal | |
| 9637 | Router.prototype.modalLoad = modalLoad; | |
| 9638 | Router.prototype.modalRemove = modalRemove; | |
| 9639 | // Back | |
| 9640 | Router.prototype.backward = backward; | |
| 9641 | Router.prototype.loadBack = loadBack; | |
| 9642 | Router.prototype.back = back; | |
| 9643 | // Clear previoius pages from the DOM | |
| 9644 | Router.prototype.clearPreviousPages = clearPreviousPages; | |
| 9645 | // Clear history | |
| 9646 | Router.prototype.clearPreviousHistory = clearPreviousHistory; | |
| 9647 | ||
| 5d51ea26 | 9648 | var RouterModule = { |
| 5309fbda DC |
9649 | name: 'router', |
| 9650 | static: { | |
| 9651 | Router: Router, | |
| 9652 | }, | |
| 9653 | instance: { | |
| 9654 | cache: { | |
| 9655 | xhr: [], | |
| 9656 | templates: [], | |
| 9657 | components: [], | |
| 9658 | }, | |
| 9659 | }, | |
| 9660 | create: function create() { | |
| 9661 | var instance = this; | |
| 9662 | if (instance.app) { | |
| 9663 | // View Router | |
| 9664 | if (instance.params.router) { | |
| 9665 | instance.router = new Router(instance.app, instance); | |
| 9666 | } | |
| 9667 | } else { | |
| 9668 | // App Router | |
| 9669 | instance.router = new Router(instance); | |
| 9670 | } | |
| 9671 | }, | |
| 9672 | }; | |
| 9673 | ||
| 5d51ea26 | 9674 | var View = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
9675 | function View(appInstance, el, viewParams) { |
| 9676 | if ( viewParams === void 0 ) viewParams = {}; | |
| 9677 | ||
| 5d51ea26 | 9678 | Framework7Class.call(this, viewParams, [appInstance]); |
| 5309fbda DC |
9679 | |
| 9680 | var app = appInstance; | |
| 9681 | var $el = $(el); | |
| 9682 | var view = this; | |
| 9683 | ||
| 9684 | var defaults = { | |
| 9685 | routes: [], | |
| 9686 | routesAdd: [], | |
| 9687 | }; | |
| 9688 | ||
| 9689 | // Default View params | |
| 9690 | view.params = Utils.extend(defaults, app.params.view, viewParams); | |
| 9691 | ||
| 9692 | // Routes | |
| 9693 | if (view.params.routes.length > 0) { | |
| 9694 | view.routes = view.params.routes; | |
| 9695 | } else { | |
| 9696 | view.routes = [].concat(app.routes, view.params.routesAdd); | |
| 9697 | } | |
| 9698 | ||
| 9699 | // Selector | |
| 9700 | var selector; | |
| 9701 | if (typeof el === 'string') { selector = el; } | |
| 9702 | else { | |
| 9703 | // Supposed to be HTMLElement or Dom7 | |
| 9704 | selector = ($el.attr('id') ? ("#" + ($el.attr('id'))) : '') + ($el.attr('class') ? ("." + ($el.attr('class').replace(/ /g, '.').replace('.active', ''))) : ''); | |
| 9705 | } | |
| 9706 | ||
| 9707 | // DynamicNavbar | |
| 9708 | var $navbarEl; | |
| 9709 | if (app.theme === 'ios' && view.params.iosDynamicNavbar && view.params.iosSeparateDynamicNavbar) { | |
| 9710 | $navbarEl = $el.children('.navbar').eq(0); | |
| 9711 | if ($navbarEl.length === 0) { | |
| 9712 | $navbarEl = $('<div class="navbar"></div>'); | |
| 9713 | } | |
| 9714 | } | |
| 9715 | ||
| 9716 | // View Props | |
| 9717 | Utils.extend(false, view, { | |
| 9718 | app: app, | |
| 9719 | $el: $el, | |
| 9720 | el: $el[0], | |
| 9721 | name: view.params.name, | |
| 9722 | main: view.params.main || $el.hasClass('view-main'), | |
| 9723 | $navbarEl: $navbarEl, | |
| 9724 | navbarEl: $navbarEl ? $navbarEl[0] : undefined, | |
| 9725 | selector: selector, | |
| 9726 | history: [], | |
| 9727 | scrollHistory: {}, | |
| 9728 | }); | |
| 9729 | ||
| 9730 | // Save in DOM | |
| 9731 | $el[0].f7View = view; | |
| 9732 | ||
| 9733 | // Install Modules | |
| 9734 | view.useModules(); | |
| 9735 | ||
| 9736 | // Add to app | |
| 9737 | app.views.push(view); | |
| 9738 | if (view.main) { | |
| 9739 | app.views.main = view; | |
| 9740 | } | |
| 9741 | if (view.name) { | |
| 9742 | app.views[view.name] = view; | |
| 9743 | } | |
| 9744 | ||
| 9745 | // Index | |
| 9746 | view.index = app.views.indexOf(view); | |
| 9747 | ||
| 9748 | // View ID | |
| 9749 | var viewId; | |
| 9750 | if (view.name) { | |
| 9751 | viewId = "view_" + (view.name); | |
| 9752 | } else if (view.main) { | |
| 9753 | viewId = 'view_main'; | |
| 9754 | } else { | |
| 9755 | viewId = "view_" + (view.index); | |
| 9756 | } | |
| 9757 | view.id = viewId; | |
| 9758 | ||
| 9759 | // Init View | |
| 9760 | if (app.initialized) { | |
| 9761 | view.init(); | |
| 9762 | } else { | |
| 9763 | app.on('init', function () { | |
| 9764 | view.init(); | |
| 9765 | }); | |
| 9766 | } | |
| 9767 | ||
| 9768 | return view; | |
| 9769 | } | |
| 9770 | ||
| 5d51ea26 DC |
9771 | if ( Framework7Class ) View.__proto__ = Framework7Class; |
| 9772 | View.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
9773 | View.prototype.constructor = View; |
| 9774 | ||
| 9775 | View.prototype.destroy = function destroy () { | |
| 9776 | var view = this; | |
| 9777 | var app = view.app; | |
| 9778 | ||
| 9779 | view.$el.trigger('view:beforedestroy', view); | |
| 9780 | view.emit('local::beforeDestroy viewBeforeDestroy', view); | |
| 9781 | ||
| 9782 | app.off('resize', view.checkmasterDetailBreakpoint); | |
| 9783 | ||
| 9784 | if (view.main) { | |
| 9785 | app.views.main = null; | |
| 9786 | delete app.views.main; | |
| 9787 | } else if (view.name) { | |
| 9788 | app.views[view.name] = null; | |
| 9789 | delete app.views[view.name]; | |
| 9790 | } | |
| 9791 | view.$el[0].f7View = null; | |
| 9792 | delete view.$el[0].f7View; | |
| 9793 | ||
| 9794 | app.views.splice(app.views.indexOf(view), 1); | |
| 9795 | ||
| 9796 | // Destroy Router | |
| 9797 | if (view.params.router && view.router) { | |
| 9798 | view.router.destroy(); | |
| 9799 | } | |
| 9800 | ||
| 9801 | view.emit('local::destroy viewDestroy', view); | |
| 9802 | ||
| 9803 | // Delete props & methods | |
| 9804 | Object.keys(view).forEach(function (viewProp) { | |
| 9805 | view[viewProp] = null; | |
| 9806 | delete view[viewProp]; | |
| 9807 | }); | |
| 9808 | ||
| 9809 | view = null; | |
| 9810 | }; | |
| 9811 | ||
| 9812 | View.prototype.checkmasterDetailBreakpoint = function checkmasterDetailBreakpoint () { | |
| 9813 | var view = this; | |
| 9814 | var app = view.app; | |
| 9815 | var wasMasterDetail = view.$el.hasClass('view-master-detail'); | |
| 9816 | if (app.width >= view.params.masterDetailBreakpoint) { | |
| 9817 | view.$el.addClass('view-master-detail'); | |
| 9818 | if (!wasMasterDetail) { | |
| 9819 | view.emit('local::masterDetailBreakpoint viewMasterDetailBreakpoint'); | |
| 9820 | view.$el.trigger('view:masterDetailBreakpoint', view); | |
| 9821 | } | |
| 9822 | } else { | |
| 9823 | view.$el.removeClass('view-master-detail'); | |
| 9824 | if (wasMasterDetail) { | |
| 9825 | view.emit('local::masterDetailBreakpoint viewMasterDetailBreakpoint'); | |
| 9826 | view.$el.trigger('view:masterDetailBreakpoint', view); | |
| 9827 | } | |
| 9828 | } | |
| 9829 | }; | |
| 9830 | ||
| 9831 | View.prototype.initMasterDetail = function initMasterDetail () { | |
| 9832 | var view = this; | |
| 9833 | var app = view.app; | |
| 9834 | view.checkmasterDetailBreakpoint = view.checkmasterDetailBreakpoint.bind(view); | |
| 9835 | view.checkmasterDetailBreakpoint(); | |
| 9836 | app.on('resize', view.checkmasterDetailBreakpoint); | |
| 9837 | }; | |
| 9838 | ||
| 9839 | View.prototype.init = function init () { | |
| 9840 | var view = this; | |
| 9841 | if (view.params.router) { | |
| 9842 | if (view.params.masterDetailBreakpoint > 0) { | |
| 9843 | view.initMasterDetail(); | |
| 9844 | } | |
| 9845 | view.router.init(); | |
| 9846 | view.$el.trigger('view:init', view); | |
| 9847 | view.emit('local::init viewInit', view); | |
| 9848 | } | |
| 9849 | }; | |
| 9850 | ||
| 9851 | return View; | |
| 9852 | }(Framework7Class)); | |
| 9853 | ||
| 9854 | // Use Router | |
| 5d51ea26 | 9855 | View.use(RouterModule); |
| 5309fbda DC |
9856 | |
| 9857 | function initClicks(app) { | |
| 9858 | function handleClicks(e) { | |
| 9859 | var $clickedEl = $(e.target); | |
| 9860 | var $clickedLinkEl = $clickedEl.closest('a'); | |
| 9861 | var isLink = $clickedLinkEl.length > 0; | |
| 9862 | var url = isLink && $clickedLinkEl.attr('href'); | |
| 5d51ea26 | 9863 | // const isTabLink = isLink && $clickedLinkEl.hasClass('tab-link') && ($clickedLinkEl.attr('data-tab') || (url && url.indexOf('#') === 0)); |
| 5309fbda DC |
9864 | |
| 9865 | // Check if link is external | |
| 9866 | if (isLink) { | |
| 9867 | // eslint-disable-next-line | |
| 9868 | if ($clickedLinkEl.is(app.params.clicks.externalLinks) || (url && url.indexOf('javascript:') >= 0)) { | |
| 9869 | var target = $clickedLinkEl.attr('target'); | |
| 9870 | if ( | |
| 9871 | url | |
| 9872 | && win.cordova | |
| 9873 | && win.cordova.InAppBrowser | |
| 9874 | && (target === '_system' || target === '_blank') | |
| 9875 | ) { | |
| 9876 | e.preventDefault(); | |
| 9877 | win.cordova.InAppBrowser.open(url, target); | |
| 9878 | } | |
| 9879 | return; | |
| 9880 | } | |
| 9881 | } | |
| 9882 | ||
| 9883 | // Modules Clicks | |
| 9884 | Object.keys(app.modules).forEach(function (moduleName) { | |
| 9885 | var moduleClicks = app.modules[moduleName].clicks; | |
| 9886 | if (!moduleClicks) { return; } | |
| 5d51ea26 | 9887 | if (e.preventF7Router) { return; } |
| 5309fbda DC |
9888 | Object.keys(moduleClicks).forEach(function (clickSelector) { |
| 9889 | var matchingClickedElement = $clickedEl.closest(clickSelector).eq(0); | |
| 9890 | if (matchingClickedElement.length > 0) { | |
| 9891 | moduleClicks[clickSelector].call(app, matchingClickedElement, matchingClickedElement.dataset(), e); | |
| 9892 | } | |
| 9893 | }); | |
| 9894 | }); | |
| 9895 | ||
| 5309fbda DC |
9896 | // Load Page |
| 9897 | var clickedLinkData = {}; | |
| 9898 | if (isLink) { | |
| 9899 | e.preventDefault(); | |
| 9900 | clickedLinkData = $clickedLinkEl.dataset(); | |
| 9901 | } | |
| 9902 | ||
| 9903 | // Prevent Router | |
| 5d51ea26 | 9904 | if (e.preventF7Router) { return; } |
| 5309fbda DC |
9905 | if ($clickedLinkEl.hasClass('prevent-router') || $clickedLinkEl.hasClass('router-prevent')) { return; } |
| 9906 | ||
| 5d51ea26 | 9907 | var validUrl = url && url.length > 0 && url[0] !== '#'; |
| 5309fbda DC |
9908 | if (validUrl || $clickedLinkEl.hasClass('back')) { |
| 9909 | var view; | |
| 9910 | if (clickedLinkData.view) { | |
| 9911 | view = $(clickedLinkData.view)[0].f7View; | |
| 9912 | } else { | |
| 9913 | view = $clickedEl.parents('.view')[0] && $clickedEl.parents('.view')[0].f7View; | |
| 9914 | if (!$clickedLinkEl.hasClass('back') && view && view.params.linksView) { | |
| 9915 | if (typeof view.params.linksView === 'string') { view = $(view.params.linksView)[0].f7View; } | |
| 9916 | else if (view.params.linksView instanceof View) { view = view.params.linksView; } | |
| 9917 | } | |
| 9918 | } | |
| 9919 | if (!view) { | |
| 9920 | if (app.views.main) { view = app.views.main; } | |
| 9921 | } | |
| 9922 | if (!view || !view.router) { return; } | |
| 9923 | if (clickedLinkData.context && typeof clickedLinkData.context === 'string') { | |
| 9924 | try { | |
| 9925 | clickedLinkData.context = JSON.parse(clickedLinkData.context); | |
| 9926 | } catch (err) { | |
| 9927 | // something wrong there | |
| 9928 | } | |
| 9929 | } | |
| 9930 | if ($clickedLinkEl[0].f7RouteProps) { | |
| 9931 | clickedLinkData.props = $clickedLinkEl[0].f7RouteProps; | |
| 9932 | } | |
| 9933 | if ($clickedLinkEl.hasClass('back')) { view.router.back(url, clickedLinkData); } | |
| 9934 | else { view.router.navigate(url, clickedLinkData); } | |
| 9935 | } | |
| 9936 | } | |
| 9937 | ||
| 9938 | app.on('click', handleClicks); | |
| 9939 | ||
| 9940 | // TODO: check if need this in iOS | |
| 9941 | // Prevent scrolling on overlays | |
| 9942 | // function preventScrolling(e) { | |
| 9943 | // e.preventDefault(); | |
| 9944 | // } | |
| 9945 | // if (Support.touch && !Device.android) { | |
| 9946 | // const activeListener = Support.passiveListener ? { passive: false, capture: false } : false; | |
| 9947 | // $(document).on((app.params.touch.fastClicks ? 'touchstart' : 'touchmove'), '.panel-backdrop, .dialog-backdrop, .preloader-backdrop, .popup-backdrop, .searchbar-backdrop', preventScrolling, activeListener); | |
| 9948 | // } | |
| 9949 | } | |
| 9950 | var ClicksModule = { | |
| 9951 | name: 'clicks', | |
| 9952 | params: { | |
| 9953 | clicks: { | |
| 9954 | // External Links | |
| 9955 | externalLinks: '.external', | |
| 9956 | }, | |
| 9957 | }, | |
| 9958 | on: { | |
| 9959 | init: function init() { | |
| 9960 | var app = this; | |
| 9961 | initClicks(app); | |
| 9962 | }, | |
| 9963 | }, | |
| 9964 | }; | |
| 9965 | ||
| 9966 | var RouterTemplateLoaderModule = { | |
| 9967 | name: 'routerTemplateLoader', | |
| 9968 | proto: { | |
| 9969 | templateLoader: function templateLoader(template, templateUrl, options, resolve, reject) { | |
| 9970 | var router = this; | |
| 9971 | function compile(t) { | |
| 9972 | var compiledHtml; | |
| 9973 | var context; | |
| 9974 | try { | |
| 9975 | context = options.context || {}; | |
| 9976 | if (typeof context === 'function') { context = context.call(router); } | |
| 9977 | else if (typeof context === 'string') { | |
| 9978 | try { | |
| 9979 | context = JSON.parse(context); | |
| 9980 | } catch (err) { | |
| 9981 | reject(); | |
| 9982 | throw (err); | |
| 9983 | } | |
| 9984 | } | |
| 9985 | if (typeof t === 'function') { | |
| 9986 | compiledHtml = t(context); | |
| 9987 | } else { | |
| 9988 | compiledHtml = Template7.compile(t)(Utils.extend({}, context || {}, { | |
| 9989 | $app: router.app, | |
| 9990 | $root: Utils.extend({}, router.app.data, router.app.methods), | |
| 9991 | $route: options.route, | |
| 9992 | $f7route: options.route, | |
| 9993 | $router: router, | |
| 9994 | $f7router: router, | |
| 9995 | $theme: { | |
| 9996 | ios: router.app.theme === 'ios', | |
| 9997 | md: router.app.theme === 'md', | |
| 5d51ea26 | 9998 | aurora: router.app.theme === 'aurora', |
| 5309fbda DC |
9999 | }, |
| 10000 | })); | |
| 10001 | } | |
| 10002 | } catch (err) { | |
| 10003 | reject(); | |
| 10004 | throw (err); | |
| 10005 | } | |
| 10006 | resolve(compiledHtml, { context: context }); | |
| 10007 | } | |
| 10008 | if (templateUrl) { | |
| 10009 | // Load via XHR | |
| 10010 | if (router.xhr) { | |
| 10011 | router.xhr.abort(); | |
| 10012 | router.xhr = false; | |
| 10013 | } | |
| 10014 | router | |
| 10015 | .xhrRequest(templateUrl, options) | |
| 10016 | .then(function (templateContent) { | |
| 10017 | compile(templateContent); | |
| 10018 | }) | |
| 10019 | .catch(function () { | |
| 10020 | reject(); | |
| 10021 | }); | |
| 10022 | } else { | |
| 10023 | compile(template); | |
| 10024 | } | |
| 10025 | }, | |
| 10026 | ||
| 10027 | modalTemplateLoader: function modalTemplateLoader(template, templateUrl, options, resolve, reject) { | |
| 10028 | var router = this; | |
| 10029 | return router.templateLoader(template, templateUrl, options, function (html) { | |
| 10030 | resolve(html); | |
| 10031 | }, reject); | |
| 10032 | }, | |
| 10033 | ||
| 10034 | tabTemplateLoader: function tabTemplateLoader(template, templateUrl, options, resolve, reject) { | |
| 10035 | var router = this; | |
| 10036 | return router.templateLoader(template, templateUrl, options, function (html) { | |
| 10037 | resolve(html); | |
| 10038 | }, reject); | |
| 10039 | }, | |
| 10040 | ||
| 10041 | pageTemplateLoader: function pageTemplateLoader(template, templateUrl, options, resolve, reject) { | |
| 10042 | var router = this; | |
| 10043 | return router.templateLoader(template, templateUrl, options, function (html, newOptions) { | |
| 10044 | if ( newOptions === void 0 ) newOptions = {}; | |
| 10045 | ||
| 10046 | resolve(router.getPageEl(html), newOptions); | |
| 10047 | }, reject); | |
| 10048 | }, | |
| 10049 | }, | |
| 10050 | }; | |
| 10051 | ||
| 10052 | var RouterComponentLoaderModule = { | |
| 10053 | name: 'routerComponentLoader', | |
| 10054 | proto: { | |
| 10055 | componentLoader: function componentLoader(component, componentUrl, options, resolve, reject) { | |
| 10056 | if ( options === void 0 ) options = {}; | |
| 10057 | ||
| 10058 | var router = this; | |
| 10059 | var app = router.app; | |
| 10060 | var url = typeof component === 'string' ? component : componentUrl; | |
| 10061 | var compiledUrl = router.replaceRequestUrlParams(url, options); | |
| 10062 | function compile(componentOptions) { | |
| 10063 | var context = options.context || {}; | |
| 10064 | if (typeof context === 'function') { context = context.call(router); } | |
| 10065 | else if (typeof context === 'string') { | |
| 10066 | try { | |
| 10067 | context = JSON.parse(context); | |
| 10068 | } catch (err) { | |
| 10069 | reject(); | |
| 10070 | throw (err); | |
| 10071 | } | |
| 10072 | } | |
| 10073 | var extendContext = Utils.merge( | |
| 10074 | {}, | |
| 10075 | context, | |
| 10076 | { | |
| 10077 | $route: options.route, | |
| 10078 | $f7route: options.route, | |
| 10079 | $router: router, | |
| 10080 | $f7router: router, | |
| 10081 | $theme: { | |
| 10082 | ios: app.theme === 'ios', | |
| 10083 | md: app.theme === 'md', | |
| 5d51ea26 | 10084 | aurora: app.theme === 'aurora', |
| 5309fbda DC |
10085 | }, |
| 10086 | } | |
| 10087 | ); | |
| 10088 | var createdComponent = app.component.create(componentOptions, extendContext); | |
| 10089 | resolve(createdComponent.el); | |
| 10090 | } | |
| 10091 | var cachedComponent; | |
| 10092 | if (compiledUrl) { | |
| 10093 | router.cache.components.forEach(function (cached) { | |
| 10094 | if (cached.url === compiledUrl) { cachedComponent = cached.component; } | |
| 10095 | }); | |
| 10096 | } | |
| 10097 | if (compiledUrl && cachedComponent) { | |
| 10098 | compile(cachedComponent); | |
| 10099 | } else if (compiledUrl && !cachedComponent) { | |
| 10100 | // Load via XHR | |
| 10101 | if (router.xhr) { | |
| 10102 | router.xhr.abort(); | |
| 10103 | router.xhr = false; | |
| 10104 | } | |
| 10105 | router | |
| 10106 | .xhrRequest(url, options) | |
| 10107 | .then(function (loadedComponent) { | |
| 10108 | var parsedComponent = app.component.parse(loadedComponent); | |
| 10109 | router.cache.components.push({ | |
| 10110 | url: compiledUrl, | |
| 10111 | component: parsedComponent, | |
| 10112 | }); | |
| 10113 | compile(parsedComponent); | |
| 10114 | }) | |
| 10115 | .catch(function (err) { | |
| 10116 | reject(); | |
| 10117 | throw (err); | |
| 10118 | }); | |
| 10119 | } else { | |
| 10120 | compile(component); | |
| 10121 | } | |
| 10122 | }, | |
| 10123 | ||
| 10124 | modalComponentLoader: function modalComponentLoader(rootEl, component, componentUrl, options, resolve, reject) { | |
| 10125 | var router = this; | |
| 10126 | router.componentLoader(component, componentUrl, options, function (el) { | |
| 10127 | resolve(el); | |
| 10128 | }, reject); | |
| 10129 | }, | |
| 10130 | ||
| 10131 | tabComponentLoader: function tabComponentLoader(tabEl, component, componentUrl, options, resolve, reject) { | |
| 10132 | var router = this; | |
| 10133 | router.componentLoader(component, componentUrl, options, function (el) { | |
| 10134 | resolve(el); | |
| 10135 | }, reject); | |
| 10136 | }, | |
| 10137 | ||
| 10138 | pageComponentLoader: function pageComponentLoader(routerEl, component, componentUrl, options, resolve, reject) { | |
| 10139 | var router = this; | |
| 10140 | router.componentLoader(component, componentUrl, options, function (el, newOptions) { | |
| 10141 | if ( newOptions === void 0 ) newOptions = {}; | |
| 10142 | ||
| 10143 | resolve(el, newOptions); | |
| 10144 | }, reject); | |
| 10145 | }, | |
| 10146 | }, | |
| 10147 | }; | |
| 10148 | ||
| 10149 | var HistoryModule = { | |
| 10150 | name: 'history', | |
| 10151 | static: { | |
| 10152 | history: History, | |
| 10153 | }, | |
| 10154 | on: { | |
| 10155 | init: function init() { | |
| 10156 | History.init(this); | |
| 10157 | }, | |
| 10158 | }, | |
| 10159 | }; | |
| 10160 | ||
| 10161 | var keyPrefix = 'f7storage-'; | |
| 10162 | var Storage = { | |
| 10163 | get: function get(key) { | |
| 10164 | return new Promise(function (resolve, reject) { | |
| 10165 | try { | |
| 10166 | var value = JSON.parse(win.localStorage.getItem(("" + keyPrefix + key))); | |
| 10167 | resolve(value); | |
| 10168 | } catch (e) { | |
| 10169 | reject(e); | |
| 10170 | } | |
| 10171 | }); | |
| 10172 | }, | |
| 10173 | set: function set(key, value) { | |
| 10174 | return new Promise(function (resolve, reject) { | |
| 10175 | try { | |
| 10176 | win.localStorage.setItem(("" + keyPrefix + key), JSON.stringify(value)); | |
| 10177 | resolve(); | |
| 10178 | } catch (e) { | |
| 10179 | reject(e); | |
| 10180 | } | |
| 10181 | }); | |
| 10182 | }, | |
| 10183 | remove: function remove(key) { | |
| 10184 | return new Promise(function (resolve, reject) { | |
| 10185 | try { | |
| 10186 | win.localStorage.removeItem(("" + keyPrefix + key)); | |
| 10187 | resolve(); | |
| 10188 | } catch (e) { | |
| 10189 | reject(e); | |
| 10190 | } | |
| 10191 | }); | |
| 10192 | }, | |
| 10193 | clear: function clear() { | |
| 10194 | ||
| 10195 | }, | |
| 10196 | length: function length() { | |
| 10197 | ||
| 10198 | }, | |
| 10199 | keys: function keys() { | |
| 10200 | return new Promise(function (resolve, reject) { | |
| 10201 | try { | |
| 10202 | var keys = Object.keys(win.localStorage) | |
| 10203 | .filter(function (keyName) { return keyName.indexOf(keyPrefix) === 0; }) | |
| 10204 | .map(function (keyName) { return keyName.replace(keyPrefix, ''); }); | |
| 10205 | resolve(keys); | |
| 10206 | } catch (e) { | |
| 10207 | reject(e); | |
| 10208 | } | |
| 10209 | }); | |
| 10210 | }, | |
| 10211 | forEach: function forEach(callback) { | |
| 10212 | return new Promise(function (resolve, reject) { | |
| 10213 | try { | |
| 10214 | Object.keys(win.localStorage) | |
| 10215 | .filter(function (keyName) { return keyName.indexOf(keyPrefix) === 0; }) | |
| 10216 | .forEach(function (keyName, index) { | |
| 10217 | var key = keyName.replace(keyPrefix, ''); | |
| 10218 | Storage.get(key).then(function (value) { | |
| 10219 | callback(key, value, index); | |
| 10220 | }); | |
| 10221 | }); | |
| 10222 | resolve(); | |
| 10223 | } catch (e) { | |
| 10224 | reject(e); | |
| 10225 | } | |
| 10226 | }); | |
| 10227 | }, | |
| 10228 | }; | |
| 10229 | ||
| 10230 | var StorageModule = { | |
| 10231 | name: 'storage', | |
| 10232 | static: { | |
| 10233 | Storage: Storage, | |
| 10234 | storage: Storage, | |
| 10235 | }, | |
| 10236 | }; | |
| 10237 | ||
| 10238 | function vnode(sel, data, children, text, elm) { | |
| 10239 | var key = data === undefined ? undefined : data.key; | |
| 10240 | return { sel: sel, data: data, children: children, | |
| 10241 | text: text, elm: elm, key: key }; | |
| 10242 | } | |
| 10243 | ||
| 10244 | var array = Array.isArray; | |
| 10245 | function primitive(s) { | |
| 10246 | return typeof s === 'string' || typeof s === 'number'; | |
| 10247 | } | |
| 10248 | ||
| 10249 | function addNS(data, children, sel) { | |
| 10250 | data.ns = 'http://www.w3.org/2000/svg'; | |
| 10251 | if (sel !== 'foreignObject' && children !== undefined) { | |
| 10252 | for (var i = 0; i < children.length; ++i) { | |
| 10253 | var childData = children[i].data; | |
| 10254 | if (childData !== undefined) { | |
| 10255 | addNS(childData, children[i].children, children[i].sel); | |
| 10256 | } | |
| 10257 | } | |
| 10258 | } | |
| 10259 | } | |
| 10260 | function h(sel, b, c) { | |
| 10261 | var data = {}, children, text, i; | |
| 10262 | if (c !== undefined) { | |
| 10263 | data = b; | |
| 10264 | if (array(c)) { | |
| 10265 | children = c; | |
| 10266 | } | |
| 10267 | else if (primitive(c)) { | |
| 10268 | text = c; | |
| 10269 | } | |
| 10270 | else if (c && c.sel) { | |
| 10271 | children = [c]; | |
| 10272 | } | |
| 10273 | } | |
| 10274 | else if (b !== undefined) { | |
| 10275 | if (array(b)) { | |
| 10276 | children = b; | |
| 10277 | } | |
| 10278 | else if (primitive(b)) { | |
| 10279 | text = b; | |
| 10280 | } | |
| 10281 | else if (b && b.sel) { | |
| 10282 | children = [b]; | |
| 10283 | } | |
| 10284 | else { | |
| 10285 | data = b; | |
| 10286 | } | |
| 10287 | } | |
| 10288 | if (array(children)) { | |
| 10289 | for (i = 0; i < children.length; ++i) { | |
| 10290 | if (primitive(children[i])) | |
| 10291 | { children[i] = vnode(undefined, undefined, undefined, children[i], undefined); } | |
| 10292 | } | |
| 10293 | } | |
| 10294 | if (sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g' && | |
| 10295 | (sel.length === 3 || sel[3] === '.' || sel[3] === '#')) { | |
| 10296 | addNS(data, children, sel); | |
| 10297 | } | |
| 10298 | return vnode(sel, data, children, text, undefined); | |
| 10299 | } | |
| 10300 | ||
| 10301 | /* eslint no-use-before-define: "off" */ | |
| 10302 | ||
| 10303 | var selfClosing = 'area base br col command embed hr img input keygen link menuitem meta param source track wbr'.split(' '); | |
| 5d51ea26 DC |
10304 | var propsAttrs = 'hidden checked disabled readonly selected autocomplete autofocus autoplay required multiple value indeterminate'.split(' '); |
| 10305 | var booleanProps = 'hidden checked disabled readonly selected autocomplete autofocus autoplay required multiple readOnly indeterminate'.split(' '); | |
| 5309fbda DC |
10306 | var tempDom = doc.createElement('div'); |
| 10307 | ||
| 10308 | function getHooks(data, app, initial, isRoot) { | |
| 10309 | var hooks = {}; | |
| 10310 | if (!data || !data.attrs || !data.attrs.class) { return hooks; } | |
| 10311 | var classNames = data.attrs.class; | |
| 10312 | var insert = []; | |
| 10313 | var destroy = []; | |
| 10314 | var update = []; | |
| 10315 | var postpatch = []; | |
| 10316 | classNames.split(' ').forEach(function (className) { | |
| 10317 | if (!initial) { | |
| 10318 | insert.push.apply(insert, app.getVnodeHooks('insert', className)); | |
| 10319 | } | |
| 10320 | destroy.push.apply(destroy, app.getVnodeHooks('destroy', className)); | |
| 10321 | update.push.apply(update, app.getVnodeHooks('update', className)); | |
| 10322 | postpatch.push.apply(postpatch, app.getVnodeHooks('postpatch', className)); | |
| 10323 | }); | |
| 10324 | ||
| 10325 | if (isRoot && !initial) { | |
| 10326 | postpatch.push(function (oldVnode, vnode) { | |
| 10327 | var vn = vnode || oldVnode; | |
| 10328 | if (!vn) { return; } | |
| 10329 | if (vn.data && vn.data.context && vn.data.context.$options.updated) { | |
| 10330 | vn.data.context.$options.updated(); | |
| 10331 | } | |
| 10332 | }); | |
| 10333 | } | |
| 10334 | if (insert.length === 0 && destroy.length === 0 && update.length === 0 && postpatch.length === 0) { | |
| 10335 | return hooks; | |
| 10336 | } | |
| 10337 | if (insert.length) { | |
| 10338 | hooks.insert = function (vnode) { | |
| 10339 | insert.forEach(function (f) { return f(vnode); }); | |
| 10340 | }; | |
| 10341 | } | |
| 10342 | if (destroy.length) { | |
| 10343 | hooks.destroy = function (vnode) { | |
| 10344 | destroy.forEach(function (f) { return f(vnode); }); | |
| 10345 | }; | |
| 10346 | } | |
| 10347 | if (update.length) { | |
| 10348 | hooks.update = function (oldVnode, vnode) { | |
| 10349 | update.forEach(function (f) { return f(oldVnode, vnode); }); | |
| 10350 | }; | |
| 10351 | } | |
| 10352 | if (postpatch.length) { | |
| 10353 | hooks.postpatch = function (oldVnode, vnode) { | |
| 10354 | postpatch.forEach(function (f) { return f(oldVnode, vnode); }); | |
| 10355 | }; | |
| 10356 | } | |
| 10357 | ||
| 10358 | return hooks; | |
| 10359 | } | |
| 10360 | function getEventHandler(handlerString, context, ref) { | |
| 10361 | if ( ref === void 0 ) ref = {}; | |
| 10362 | var stop = ref.stop; | |
| 10363 | var prevent = ref.prevent; | |
| 10364 | var once = ref.once; | |
| 10365 | ||
| 10366 | var fired = false; | |
| 5309fbda DC |
10367 | var methodName; |
| 10368 | var method; | |
| 10369 | var customArgs = []; | |
| 10370 | var needMethodBind = true; | |
| 10371 | ||
| 10372 | if (handlerString.indexOf('(') < 0) { | |
| 10373 | methodName = handlerString; | |
| 10374 | } else { | |
| 10375 | methodName = handlerString.split('(')[0]; | |
| 10376 | } | |
| 10377 | if (methodName.indexOf('.') >= 0) { | |
| 10378 | methodName.split('.').forEach(function (path, pathIndex) { | |
| 10379 | if (pathIndex === 0 && path === 'this') { return; } | |
| 10380 | if (pathIndex === 0 && path === 'window') { | |
| 10381 | // eslint-disable-next-line | |
| 10382 | method = win; | |
| 10383 | needMethodBind = false; | |
| 10384 | return; | |
| 10385 | } | |
| 10386 | if (!method) { method = context; } | |
| 10387 | if (method[path]) { method = method[path]; } | |
| 10388 | else { | |
| 10389 | throw new Error(("Framework7: Component doesn't have method \"" + (methodName.split('.').slice(0, pathIndex + 1).join('.')) + "\"")); | |
| 10390 | } | |
| 10391 | }); | |
| 10392 | } else { | |
| 10393 | if (!context[methodName]) { | |
| 10394 | throw new Error(("Framework7: Component doesn't have method \"" + methodName + "\"")); | |
| 10395 | } | |
| 10396 | method = context[methodName]; | |
| 10397 | } | |
| 10398 | if (needMethodBind) { | |
| 10399 | method = method.bind(context); | |
| 10400 | } | |
| 10401 | ||
| 10402 | function handler() { | |
| 10403 | var args = [], len = arguments.length; | |
| 10404 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 10405 | ||
| 10406 | var e = args[0]; | |
| 10407 | if (once && fired) { return; } | |
| 10408 | if (stop) { e.stopPropagation(); } | |
| 10409 | if (prevent) { e.preventDefault(); } | |
| 10410 | fired = true; | |
| 10411 | ||
| 10412 | if (handlerString.indexOf('(') < 0) { | |
| 10413 | customArgs = args; | |
| 10414 | } else { | |
| 5d51ea26 DC |
10415 | var handlerArguments = handlerString |
| 10416 | .split('(')[1] | |
| 10417 | .split(')')[0] | |
| 10418 | .replace(/'[^']*'|"[^"]*"/g, function (a) { return a.replace(/,/g, '<_comma_>'); }) | |
| 10419 | .split(',') | |
| 10420 | .map(function (a) { return a.replace(/<_comma_>/g, ','); }); | |
| 10421 | handlerArguments.forEach(function (argument) { | |
| 5309fbda DC |
10422 | var arg = argument.trim(); |
| 10423 | // eslint-disable-next-line | |
| 10424 | if (!isNaN(arg)) { arg = parseFloat(arg); } | |
| 10425 | else if (arg === 'true') { arg = true; } | |
| 10426 | else if (arg === 'false') { arg = false; } | |
| 10427 | else if (arg === 'null') { arg = null; } | |
| 10428 | else if (arg === 'undefined') { arg = undefined; } | |
| 10429 | else if (arg[0] === '"') { arg = arg.replace(/"/g, ''); } | |
| 10430 | else if (arg[0] === '\'') { arg = arg.replace(/'/g, ''); } | |
| 10431 | else if (arg.indexOf('.') > 0) { | |
| 10432 | var deepArg; | |
| 10433 | arg.split('.').forEach(function (path) { | |
| 10434 | if (!deepArg) { deepArg = context; } | |
| 10435 | deepArg = deepArg[path]; | |
| 10436 | }); | |
| 10437 | arg = deepArg; | |
| 10438 | } else { | |
| 10439 | arg = context[arg]; | |
| 10440 | } | |
| 10441 | customArgs.push(arg); | |
| 10442 | }); | |
| 10443 | } | |
| 10444 | ||
| 10445 | method.apply(void 0, customArgs); | |
| 10446 | } | |
| 10447 | ||
| 10448 | return handler; | |
| 10449 | } | |
| 10450 | ||
| 10451 | function getData(el, context, app, initial, isRoot) { | |
| 10452 | var data = { | |
| 10453 | context: context, | |
| 10454 | }; | |
| 10455 | var attributes = el.attributes; | |
| 10456 | Array.prototype.forEach.call(attributes, function (attr) { | |
| 10457 | var attrName = attr.name; | |
| 10458 | var attrValue = attr.value; | |
| 10459 | if (propsAttrs.indexOf(attrName) >= 0) { | |
| 10460 | // Props | |
| 10461 | if (!data.props) { data.props = {}; } | |
| 10462 | if (attrName === 'readonly') { | |
| 10463 | attrName = 'readOnly'; | |
| 10464 | } | |
| 10465 | if (booleanProps.indexOf(attrName) >= 0) { | |
| 10466 | // eslint-disable-next-line | |
| 10467 | data.props[attrName] = attrValue === false ? false : true; | |
| 10468 | } else { | |
| 10469 | data.props[attrName] = attrValue; | |
| 10470 | } | |
| 10471 | } else if (attrName === 'key') { | |
| 10472 | // Key | |
| 10473 | data.key = attrValue; | |
| 10474 | } else if (attrName.indexOf('@') === 0) { | |
| 10475 | // Events | |
| 10476 | if (!data.on) { data.on = {}; } | |
| 10477 | var eventName = attrName.substr(1); | |
| 10478 | var stop = false; | |
| 10479 | var prevent = false; | |
| 10480 | var once = false; | |
| 10481 | if (eventName.indexOf('.') >= 0) { | |
| 10482 | eventName.split('.').forEach(function (eventNamePart, eventNameIndex) { | |
| 10483 | if (eventNameIndex === 0) { eventName = eventNamePart; } | |
| 10484 | else { | |
| 10485 | if (eventNamePart === 'stop') { stop = true; } | |
| 10486 | if (eventNamePart === 'prevent') { prevent = true; } | |
| 10487 | if (eventNamePart === 'once') { once = true; } | |
| 10488 | } | |
| 10489 | }); | |
| 10490 | } | |
| 10491 | data.on[eventName] = getEventHandler(attrValue, context, { stop: stop, prevent: prevent, once: once }); | |
| 10492 | } else if (attrName === 'style') { | |
| 10493 | // Style | |
| 10494 | if (attrValue.indexOf('{') >= 0 && attrValue.indexOf('}') >= 0) { | |
| 10495 | try { | |
| 10496 | data.style = JSON.parse(attrValue); | |
| 10497 | } catch (e) { | |
| 10498 | if (!data.attrs) { data.attrs = {}; } | |
| 10499 | data.attrs.style = attrValue; | |
| 10500 | } | |
| 10501 | } else { | |
| 10502 | if (!data.attrs) { data.attrs = {}; } | |
| 10503 | data.attrs.style = attrValue; | |
| 10504 | } | |
| 10505 | } else { | |
| 10506 | // Rest of attribures | |
| 10507 | if (!data.attrs) { data.attrs = {}; } | |
| 10508 | data.attrs[attrName] = attrValue; | |
| 10509 | ||
| 10510 | // ID -> Key | |
| 10511 | if (attrName === 'id' && !data.key && !isRoot) { | |
| 10512 | data.key = attrValue; | |
| 10513 | } | |
| 10514 | } | |
| 10515 | }); | |
| 10516 | var hooks = getHooks(data, app, initial, isRoot); | |
| 10517 | hooks.prepatch = function (oldVnode, vnode) { | |
| 10518 | if (!oldVnode || !vnode) { return; } | |
| 10519 | if (oldVnode && oldVnode.data && oldVnode.data.props) { | |
| 10520 | Object.keys(oldVnode.data.props).forEach(function (key) { | |
| 10521 | if (booleanProps.indexOf(key) < 0) { return; } | |
| 10522 | if (!vnode.data) { vnode.data = {}; } | |
| 10523 | if (!vnode.data.props) { vnode.data.props = {}; } | |
| 10524 | if (oldVnode.data.props[key] === true && !(key in vnode.data.props)) { | |
| 10525 | vnode.data.props[key] = false; | |
| 10526 | } | |
| 10527 | }); | |
| 10528 | } | |
| 10529 | }; | |
| 10530 | if (hooks) { | |
| 10531 | data.hook = hooks; | |
| 10532 | } | |
| 10533 | return data; | |
| 10534 | } | |
| 10535 | ||
| 10536 | function getChildren(el, context, app, initial) { | |
| 10537 | var children = []; | |
| 10538 | var nodes = el.childNodes; | |
| 10539 | for (var i = 0; i < nodes.length; i += 1) { | |
| 10540 | var childNode = nodes[i]; | |
| 10541 | var child = elementToVNode(childNode, context, app, initial); | |
| 10542 | if (child) { | |
| 10543 | children.push(child); | |
| 10544 | } | |
| 10545 | } | |
| 10546 | return children; | |
| 10547 | } | |
| 10548 | ||
| 10549 | function elementToVNode(el, context, app, initial, isRoot) { | |
| 10550 | if (el.nodeType === 1) { | |
| 5d51ea26 DC |
10551 | // element (statement adds inline SVG compatibility) |
| 10552 | var tagName = (el instanceof win.SVGElement) ? el.nodeName : el.nodeName.toLowerCase(); | |
| 5309fbda DC |
10553 | return h( |
| 10554 | tagName, | |
| 10555 | getData(el, context, app, initial, isRoot), | |
| 10556 | selfClosing.indexOf(tagName) >= 0 ? [] : getChildren(el, context, app, initial) | |
| 10557 | ); | |
| 10558 | } | |
| 10559 | if (el.nodeType === 3) { | |
| 10560 | // text | |
| 10561 | return el.textContent; | |
| 10562 | } | |
| 10563 | return null; | |
| 10564 | } | |
| 10565 | ||
| 10566 | function vdom (html, context, app, initial) { | |
| 10567 | if ( html === void 0 ) html = ''; | |
| 10568 | ||
| 10569 | // Save to temp dom | |
| 10570 | tempDom.innerHTML = html.trim(); | |
| 10571 | ||
| 10572 | // Parse DOM | |
| 10573 | var rootEl; | |
| 10574 | for (var i = 0; i < tempDom.childNodes.length; i += 1) { | |
| 10575 | if (!rootEl && tempDom.childNodes[i].nodeType === 1) { | |
| 10576 | rootEl = tempDom.childNodes[i]; | |
| 10577 | } | |
| 10578 | } | |
| 10579 | var result = elementToVNode(rootEl, context, app, initial, true); | |
| 10580 | ||
| 10581 | // Clean | |
| 10582 | tempDom.innerHTML = ''; | |
| 10583 | ||
| 10584 | return result; | |
| 10585 | } | |
| 10586 | ||
| 10587 | function createElement(tagName) { | |
| 10588 | return document.createElement(tagName); | |
| 10589 | } | |
| 10590 | function createElementNS(namespaceURI, qualifiedName) { | |
| 10591 | return document.createElementNS(namespaceURI, qualifiedName); | |
| 10592 | } | |
| 10593 | function createTextNode(text) { | |
| 10594 | return document.createTextNode(text); | |
| 10595 | } | |
| 10596 | function createComment(text) { | |
| 10597 | return document.createComment(text); | |
| 10598 | } | |
| 10599 | function insertBefore$1(parentNode, newNode, referenceNode) { | |
| 10600 | parentNode.insertBefore(newNode, referenceNode); | |
| 10601 | } | |
| 10602 | function removeChild(node, child) { | |
| 10603 | if (!node) { return; } | |
| 10604 | node.removeChild(child); | |
| 10605 | } | |
| 10606 | function appendChild(node, child) { | |
| 10607 | node.appendChild(child); | |
| 10608 | } | |
| 10609 | function parentNode(node) { | |
| 10610 | return node.parentNode; | |
| 10611 | } | |
| 10612 | function nextSibling(node) { | |
| 10613 | return node.nextSibling; | |
| 10614 | } | |
| 10615 | function tagName(elm) { | |
| 10616 | return elm.tagName; | |
| 10617 | } | |
| 10618 | function setTextContent(node, text) { | |
| 10619 | node.textContent = text; | |
| 10620 | } | |
| 10621 | function getTextContent(node) { | |
| 10622 | return node.textContent; | |
| 10623 | } | |
| 10624 | function isElement(node) { | |
| 10625 | return node.nodeType === 1; | |
| 10626 | } | |
| 10627 | function isText(node) { | |
| 10628 | return node.nodeType === 3; | |
| 10629 | } | |
| 10630 | function isComment(node) { | |
| 10631 | return node.nodeType === 8; | |
| 10632 | } | |
| 10633 | var htmlDomApi = { | |
| 10634 | createElement: createElement, | |
| 10635 | createElementNS: createElementNS, | |
| 10636 | createTextNode: createTextNode, | |
| 10637 | createComment: createComment, | |
| 10638 | insertBefore: insertBefore$1, | |
| 10639 | removeChild: removeChild, | |
| 10640 | appendChild: appendChild, | |
| 10641 | parentNode: parentNode, | |
| 10642 | nextSibling: nextSibling, | |
| 10643 | tagName: tagName, | |
| 10644 | setTextContent: setTextContent, | |
| 10645 | getTextContent: getTextContent, | |
| 10646 | isElement: isElement, | |
| 10647 | isText: isText, | |
| 10648 | isComment: isComment, | |
| 10649 | }; | |
| 10650 | ||
| 10651 | function isUndef(s) { return s === undefined; } | |
| 10652 | function isDef(s) { return s !== undefined; } | |
| 10653 | var emptyNode = vnode('', {}, [], undefined, undefined); | |
| 10654 | function sameVnode(vnode1, vnode2) { | |
| 10655 | return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel; | |
| 10656 | } | |
| 5d51ea26 DC |
10657 | function isVnode(vnode) { |
| 10658 | return vnode.sel !== undefined; | |
| 5309fbda DC |
10659 | } |
| 10660 | function createKeyToOldIdx(children, beginIdx, endIdx) { | |
| 10661 | var i, map = {}, key, ch; | |
| 10662 | for (i = beginIdx; i <= endIdx; ++i) { | |
| 10663 | ch = children[i]; | |
| 10664 | if (ch != null) { | |
| 10665 | key = ch.key; | |
| 10666 | if (key !== undefined) | |
| 10667 | { map[key] = i; } | |
| 10668 | } | |
| 10669 | } | |
| 10670 | return map; | |
| 10671 | } | |
| 10672 | var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post']; | |
| 5d51ea26 | 10673 | function init(modules, domApi) { |
| 5309fbda DC |
10674 | var i, j, cbs = {}; |
| 10675 | var api = domApi !== undefined ? domApi : htmlDomApi; | |
| 10676 | for (i = 0; i < hooks.length; ++i) { | |
| 10677 | cbs[hooks[i]] = []; | |
| 10678 | for (j = 0; j < modules.length; ++j) { | |
| 10679 | var hook = modules[j][hooks[i]]; | |
| 10680 | if (hook !== undefined) { | |
| 10681 | cbs[hooks[i]].push(hook); | |
| 10682 | } | |
| 10683 | } | |
| 10684 | } | |
| 10685 | function emptyNodeAt(elm) { | |
| 10686 | var id = elm.id ? '#' + elm.id : ''; | |
| 10687 | var c = elm.className ? '.' + elm.className.split(' ').join('.') : ''; | |
| 10688 | return vnode(api.tagName(elm).toLowerCase() + id + c, {}, [], undefined, elm); | |
| 10689 | } | |
| 10690 | function createRmCb(childElm, listeners) { | |
| 10691 | return function rmCb() { | |
| 10692 | if (--listeners === 0) { | |
| 10693 | var parent_1 = api.parentNode(childElm); | |
| 10694 | api.removeChild(parent_1, childElm); | |
| 10695 | } | |
| 10696 | }; | |
| 10697 | } | |
| 5d51ea26 DC |
10698 | function createElm(vnode, insertedVnodeQueue) { |
| 10699 | var i, data = vnode.data; | |
| 5309fbda DC |
10700 | if (data !== undefined) { |
| 10701 | if (isDef(i = data.hook) && isDef(i = i.init)) { | |
| 5d51ea26 DC |
10702 | i(vnode); |
| 10703 | data = vnode.data; | |
| 5309fbda DC |
10704 | } |
| 10705 | } | |
| 5d51ea26 | 10706 | var children = vnode.children, sel = vnode.sel; |
| 5309fbda | 10707 | if (sel === '!') { |
| 5d51ea26 DC |
10708 | if (isUndef(vnode.text)) { |
| 10709 | vnode.text = ''; | |
| 5309fbda | 10710 | } |
| 5d51ea26 | 10711 | vnode.elm = api.createComment(vnode.text); |
| 5309fbda DC |
10712 | } |
| 10713 | else if (sel !== undefined) { | |
| 10714 | // Parse selector | |
| 10715 | var hashIdx = sel.indexOf('#'); | |
| 10716 | var dotIdx = sel.indexOf('.', hashIdx); | |
| 10717 | var hash = hashIdx > 0 ? hashIdx : sel.length; | |
| 10718 | var dot = dotIdx > 0 ? dotIdx : sel.length; | |
| 10719 | var tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel; | |
| 5d51ea26 | 10720 | var elm = vnode.elm = isDef(data) && isDef(i = data.ns) ? api.createElementNS(i, tag) |
| 5309fbda DC |
10721 | : api.createElement(tag); |
| 10722 | if (hash < dot) | |
| 10723 | { elm.setAttribute('id', sel.slice(hash + 1, dot)); } | |
| 10724 | if (dotIdx > 0) | |
| 10725 | { elm.setAttribute('class', sel.slice(dot + 1).replace(/\./g, ' ')); } | |
| 10726 | for (i = 0; i < cbs.create.length; ++i) | |
| 5d51ea26 | 10727 | { cbs.create[i](emptyNode, vnode); } |
| 5309fbda DC |
10728 | if (array(children)) { |
| 10729 | for (i = 0; i < children.length; ++i) { | |
| 10730 | var ch = children[i]; | |
| 10731 | if (ch != null) { | |
| 10732 | api.appendChild(elm, createElm(ch, insertedVnodeQueue)); | |
| 10733 | } | |
| 10734 | } | |
| 10735 | } | |
| 5d51ea26 DC |
10736 | else if (primitive(vnode.text)) { |
| 10737 | api.appendChild(elm, api.createTextNode(vnode.text)); | |
| 5309fbda | 10738 | } |
| 5d51ea26 | 10739 | i = vnode.data.hook; // Reuse variable |
| 5309fbda DC |
10740 | if (isDef(i)) { |
| 10741 | if (i.create) | |
| 5d51ea26 | 10742 | { i.create(emptyNode, vnode); } |
| 5309fbda | 10743 | if (i.insert) |
| 5d51ea26 | 10744 | { insertedVnodeQueue.push(vnode); } |
| 5309fbda DC |
10745 | } |
| 10746 | } | |
| 10747 | else { | |
| 5d51ea26 | 10748 | vnode.elm = api.createTextNode(vnode.text); |
| 5309fbda | 10749 | } |
| 5d51ea26 | 10750 | return vnode.elm; |
| 5309fbda DC |
10751 | } |
| 10752 | function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) { | |
| 10753 | for (; startIdx <= endIdx; ++startIdx) { | |
| 10754 | var ch = vnodes[startIdx]; | |
| 10755 | if (ch != null) { | |
| 10756 | api.insertBefore(parentElm, createElm(ch, insertedVnodeQueue), before); | |
| 10757 | } | |
| 10758 | } | |
| 10759 | } | |
| 5d51ea26 DC |
10760 | function invokeDestroyHook(vnode) { |
| 10761 | var i, j, data = vnode.data; | |
| 5309fbda DC |
10762 | if (data !== undefined) { |
| 10763 | if (isDef(i = data.hook) && isDef(i = i.destroy)) | |
| 5d51ea26 | 10764 | { i(vnode); } |
| 5309fbda | 10765 | for (i = 0; i < cbs.destroy.length; ++i) |
| 5d51ea26 DC |
10766 | { cbs.destroy[i](vnode); } |
| 10767 | if (vnode.children !== undefined) { | |
| 10768 | for (j = 0; j < vnode.children.length; ++j) { | |
| 10769 | i = vnode.children[j]; | |
| 5309fbda DC |
10770 | if (i != null && typeof i !== "string") { |
| 10771 | invokeDestroyHook(i); | |
| 10772 | } | |
| 10773 | } | |
| 10774 | } | |
| 10775 | } | |
| 10776 | } | |
| 10777 | function removeVnodes(parentElm, vnodes, startIdx, endIdx) { | |
| 10778 | for (; startIdx <= endIdx; ++startIdx) { | |
| 10779 | var i_1 = void 0, listeners = void 0, rm = void 0, ch = vnodes[startIdx]; | |
| 10780 | if (ch != null) { | |
| 10781 | if (isDef(ch.sel)) { | |
| 10782 | invokeDestroyHook(ch); | |
| 10783 | listeners = cbs.remove.length + 1; | |
| 10784 | rm = createRmCb(ch.elm, listeners); | |
| 10785 | for (i_1 = 0; i_1 < cbs.remove.length; ++i_1) | |
| 10786 | { cbs.remove[i_1](ch, rm); } | |
| 10787 | if (isDef(i_1 = ch.data) && isDef(i_1 = i_1.hook) && isDef(i_1 = i_1.remove)) { | |
| 10788 | i_1(ch, rm); | |
| 10789 | } | |
| 10790 | else { | |
| 10791 | rm(); | |
| 10792 | } | |
| 10793 | } | |
| 10794 | else { | |
| 10795 | api.removeChild(parentElm, ch.elm); | |
| 10796 | } | |
| 10797 | } | |
| 10798 | } | |
| 10799 | } | |
| 10800 | function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) { | |
| 10801 | var oldStartIdx = 0, newStartIdx = 0; | |
| 10802 | var oldEndIdx = oldCh.length - 1; | |
| 10803 | var oldStartVnode = oldCh[0]; | |
| 10804 | var oldEndVnode = oldCh[oldEndIdx]; | |
| 10805 | var newEndIdx = newCh.length - 1; | |
| 10806 | var newStartVnode = newCh[0]; | |
| 10807 | var newEndVnode = newCh[newEndIdx]; | |
| 10808 | var oldKeyToIdx; | |
| 10809 | var idxInOld; | |
| 10810 | var elmToMove; | |
| 10811 | var before; | |
| 10812 | while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { | |
| 10813 | if (oldStartVnode == null) { | |
| 10814 | oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left | |
| 10815 | } | |
| 10816 | else if (oldEndVnode == null) { | |
| 10817 | oldEndVnode = oldCh[--oldEndIdx]; | |
| 10818 | } | |
| 10819 | else if (newStartVnode == null) { | |
| 10820 | newStartVnode = newCh[++newStartIdx]; | |
| 10821 | } | |
| 10822 | else if (newEndVnode == null) { | |
| 10823 | newEndVnode = newCh[--newEndIdx]; | |
| 10824 | } | |
| 10825 | else if (sameVnode(oldStartVnode, newStartVnode)) { | |
| 10826 | patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue); | |
| 10827 | oldStartVnode = oldCh[++oldStartIdx]; | |
| 10828 | newStartVnode = newCh[++newStartIdx]; | |
| 10829 | } | |
| 10830 | else if (sameVnode(oldEndVnode, newEndVnode)) { | |
| 10831 | patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue); | |
| 10832 | oldEndVnode = oldCh[--oldEndIdx]; | |
| 10833 | newEndVnode = newCh[--newEndIdx]; | |
| 10834 | } | |
| 10835 | else if (sameVnode(oldStartVnode, newEndVnode)) { | |
| 10836 | patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue); | |
| 10837 | api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm)); | |
| 10838 | oldStartVnode = oldCh[++oldStartIdx]; | |
| 10839 | newEndVnode = newCh[--newEndIdx]; | |
| 10840 | } | |
| 10841 | else if (sameVnode(oldEndVnode, newStartVnode)) { | |
| 10842 | patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue); | |
| 10843 | api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm); | |
| 10844 | oldEndVnode = oldCh[--oldEndIdx]; | |
| 10845 | newStartVnode = newCh[++newStartIdx]; | |
| 10846 | } | |
| 10847 | else { | |
| 10848 | if (oldKeyToIdx === undefined) { | |
| 10849 | oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx); | |
| 10850 | } | |
| 10851 | idxInOld = oldKeyToIdx[newStartVnode.key]; | |
| 10852 | if (isUndef(idxInOld)) { | |
| 10853 | api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm); | |
| 10854 | newStartVnode = newCh[++newStartIdx]; | |
| 10855 | } | |
| 10856 | else { | |
| 10857 | elmToMove = oldCh[idxInOld]; | |
| 10858 | if (elmToMove.sel !== newStartVnode.sel) { | |
| 10859 | api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm); | |
| 10860 | } | |
| 10861 | else { | |
| 10862 | patchVnode(elmToMove, newStartVnode, insertedVnodeQueue); | |
| 10863 | oldCh[idxInOld] = undefined; | |
| 10864 | api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm); | |
| 10865 | } | |
| 10866 | newStartVnode = newCh[++newStartIdx]; | |
| 10867 | } | |
| 10868 | } | |
| 10869 | } | |
| 10870 | if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) { | |
| 10871 | if (oldStartIdx > oldEndIdx) { | |
| 10872 | before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm; | |
| 10873 | addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue); | |
| 10874 | } | |
| 10875 | else { | |
| 10876 | removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx); | |
| 10877 | } | |
| 10878 | } | |
| 10879 | } | |
| 5d51ea26 | 10880 | function patchVnode(oldVnode, vnode, insertedVnodeQueue) { |
| 5309fbda | 10881 | var i, hook; |
| 5d51ea26 DC |
10882 | if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) { |
| 10883 | i(oldVnode, vnode); | |
| 5309fbda | 10884 | } |
| 5d51ea26 | 10885 | var elm = vnode.elm = oldVnode.elm; |
| 5309fbda | 10886 | var oldCh = oldVnode.children; |
| 5d51ea26 DC |
10887 | var ch = vnode.children; |
| 10888 | if (oldVnode === vnode) | |
| 5309fbda | 10889 | { return; } |
| 5d51ea26 | 10890 | if (vnode.data !== undefined) { |
| 5309fbda | 10891 | for (i = 0; i < cbs.update.length; ++i) |
| 5d51ea26 DC |
10892 | { cbs.update[i](oldVnode, vnode); } |
| 10893 | i = vnode.data.hook; | |
| 5309fbda | 10894 | if (isDef(i) && isDef(i = i.update)) |
| 5d51ea26 | 10895 | { i(oldVnode, vnode); } |
| 5309fbda | 10896 | } |
| 5d51ea26 | 10897 | if (isUndef(vnode.text)) { |
| 5309fbda DC |
10898 | if (isDef(oldCh) && isDef(ch)) { |
| 10899 | if (oldCh !== ch) | |
| 10900 | { updateChildren(elm, oldCh, ch, insertedVnodeQueue); } | |
| 10901 | } | |
| 10902 | else if (isDef(ch)) { | |
| 10903 | if (isDef(oldVnode.text)) | |
| 10904 | { api.setTextContent(elm, ''); } | |
| 10905 | addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue); | |
| 10906 | } | |
| 10907 | else if (isDef(oldCh)) { | |
| 10908 | removeVnodes(elm, oldCh, 0, oldCh.length - 1); | |
| 10909 | } | |
| 10910 | else if (isDef(oldVnode.text)) { | |
| 10911 | api.setTextContent(elm, ''); | |
| 10912 | } | |
| 10913 | } | |
| 5d51ea26 DC |
10914 | else if (oldVnode.text !== vnode.text) { |
| 10915 | api.setTextContent(elm, vnode.text); | |
| 5309fbda DC |
10916 | } |
| 10917 | if (isDef(hook) && isDef(i = hook.postpatch)) { | |
| 5d51ea26 | 10918 | i(oldVnode, vnode); |
| 5309fbda DC |
10919 | } |
| 10920 | } | |
| 5d51ea26 | 10921 | return function patch(oldVnode, vnode) { |
| 5309fbda DC |
10922 | var i, elm, parent; |
| 10923 | var insertedVnodeQueue = []; | |
| 10924 | for (i = 0; i < cbs.pre.length; ++i) | |
| 10925 | { cbs.pre[i](); } | |
| 10926 | if (!isVnode(oldVnode)) { | |
| 10927 | oldVnode = emptyNodeAt(oldVnode); | |
| 10928 | } | |
| 5d51ea26 DC |
10929 | if (sameVnode(oldVnode, vnode)) { |
| 10930 | patchVnode(oldVnode, vnode, insertedVnodeQueue); | |
| 5309fbda DC |
10931 | } |
| 10932 | else { | |
| 10933 | elm = oldVnode.elm; | |
| 10934 | parent = api.parentNode(elm); | |
| 5d51ea26 | 10935 | createElm(vnode, insertedVnodeQueue); |
| 5309fbda | 10936 | if (parent !== null) { |
| 5d51ea26 | 10937 | api.insertBefore(parent, vnode.elm, api.nextSibling(elm)); |
| 5309fbda DC |
10938 | removeVnodes(parent, [oldVnode], 0, 0); |
| 10939 | } | |
| 10940 | } | |
| 10941 | for (i = 0; i < insertedVnodeQueue.length; ++i) { | |
| 10942 | insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]); | |
| 10943 | } | |
| 10944 | for (i = 0; i < cbs.post.length; ++i) | |
| 10945 | { cbs.post[i](); } | |
| 5d51ea26 | 10946 | return vnode; |
| 5309fbda DC |
10947 | }; |
| 10948 | } | |
| 10949 | ||
| 10950 | var xlinkNS = 'http://www.w3.org/1999/xlink'; | |
| 10951 | var xmlNS = 'http://www.w3.org/XML/1998/namespace'; | |
| 10952 | var colonChar = 58; | |
| 10953 | var xChar = 120; | |
| 10954 | function updateAttrs(oldVnode, vnode) { | |
| 10955 | var key, elm = vnode.elm, oldAttrs = oldVnode.data.attrs, attrs = vnode.data.attrs; | |
| 10956 | if (!oldAttrs && !attrs) | |
| 10957 | { return; } | |
| 10958 | if (oldAttrs === attrs) | |
| 10959 | { return; } | |
| 10960 | oldAttrs = oldAttrs || {}; | |
| 10961 | attrs = attrs || {}; | |
| 10962 | // update modified attributes, add new attributes | |
| 10963 | for (key in attrs) { | |
| 10964 | var cur = attrs[key]; | |
| 10965 | var old = oldAttrs[key]; | |
| 10966 | if (old !== cur) { | |
| 10967 | if (cur === true) { | |
| 10968 | elm.setAttribute(key, ""); | |
| 10969 | } | |
| 10970 | else if (cur === false) { | |
| 10971 | elm.removeAttribute(key); | |
| 10972 | } | |
| 10973 | else { | |
| 10974 | if (key.charCodeAt(0) !== xChar) { | |
| 10975 | elm.setAttribute(key, cur); | |
| 10976 | } | |
| 10977 | else if (key.charCodeAt(3) === colonChar) { | |
| 10978 | // Assume xml namespace | |
| 10979 | elm.setAttributeNS(xmlNS, key, cur); | |
| 10980 | } | |
| 10981 | else if (key.charCodeAt(5) === colonChar) { | |
| 10982 | // Assume xlink namespace | |
| 10983 | elm.setAttributeNS(xlinkNS, key, cur); | |
| 10984 | } | |
| 10985 | else { | |
| 10986 | elm.setAttribute(key, cur); | |
| 10987 | } | |
| 10988 | } | |
| 10989 | } | |
| 10990 | } | |
| 10991 | // remove removed attributes | |
| 10992 | // use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value) | |
| 10993 | // the other option is to remove all attributes with value == undefined | |
| 10994 | for (key in oldAttrs) { | |
| 10995 | if (!(key in attrs)) { | |
| 10996 | elm.removeAttribute(key); | |
| 10997 | } | |
| 10998 | } | |
| 10999 | } | |
| 11000 | var attributesModule = { create: updateAttrs, update: updateAttrs }; | |
| 11001 | ||
| 11002 | function updateProps(oldVnode, vnode) { | |
| 11003 | var key, cur, old, elm = vnode.elm, oldProps = oldVnode.data.props, props = vnode.data.props; | |
| 11004 | if (!oldProps && !props) | |
| 11005 | { return; } | |
| 11006 | if (oldProps === props) | |
| 11007 | { return; } | |
| 11008 | oldProps = oldProps || {}; | |
| 11009 | props = props || {}; | |
| 11010 | for (key in oldProps) { | |
| 11011 | if (!props[key]) { | |
| 11012 | delete elm[key]; | |
| 11013 | } | |
| 11014 | } | |
| 11015 | for (key in props) { | |
| 11016 | cur = props[key]; | |
| 11017 | old = oldProps[key]; | |
| 11018 | if (old !== cur && (key !== 'value' || elm[key] !== cur)) { | |
| 11019 | elm[key] = cur; | |
| 11020 | } | |
| 11021 | } | |
| 11022 | } | |
| 11023 | var propsModule = { create: updateProps, update: updateProps }; | |
| 11024 | ||
| 11025 | var raf = (typeof window !== 'undefined' && window.requestAnimationFrame) || setTimeout; | |
| 11026 | var nextFrame = function (fn) { raf(function () { raf(fn); }); }; | |
| 11027 | function setNextFrame(obj, prop, val) { | |
| 11028 | nextFrame(function () { obj[prop] = val; }); | |
| 11029 | } | |
| 11030 | function updateStyle(oldVnode, vnode) { | |
| 11031 | var cur, name, elm = vnode.elm, oldStyle = oldVnode.data.style, style = vnode.data.style; | |
| 11032 | if (!oldStyle && !style) | |
| 11033 | { return; } | |
| 11034 | if (oldStyle === style) | |
| 11035 | { return; } | |
| 11036 | oldStyle = oldStyle || {}; | |
| 11037 | style = style || {}; | |
| 11038 | var oldHasDel = 'delayed' in oldStyle; | |
| 11039 | for (name in oldStyle) { | |
| 11040 | if (!style[name]) { | |
| 11041 | if (name[0] === '-' && name[1] === '-') { | |
| 11042 | elm.style.removeProperty(name); | |
| 11043 | } | |
| 11044 | else { | |
| 11045 | elm.style[name] = ''; | |
| 11046 | } | |
| 11047 | } | |
| 11048 | } | |
| 11049 | for (name in style) { | |
| 11050 | cur = style[name]; | |
| 11051 | if (name === 'delayed' && style.delayed) { | |
| 11052 | for (var name2 in style.delayed) { | |
| 11053 | cur = style.delayed[name2]; | |
| 11054 | if (!oldHasDel || cur !== oldStyle.delayed[name2]) { | |
| 11055 | setNextFrame(elm.style, name2, cur); | |
| 11056 | } | |
| 11057 | } | |
| 11058 | } | |
| 11059 | else if (name !== 'remove' && cur !== oldStyle[name]) { | |
| 11060 | if (name[0] === '-' && name[1] === '-') { | |
| 11061 | elm.style.setProperty(name, cur); | |
| 11062 | } | |
| 11063 | else { | |
| 11064 | elm.style[name] = cur; | |
| 11065 | } | |
| 11066 | } | |
| 11067 | } | |
| 11068 | } | |
| 11069 | function applyDestroyStyle(vnode) { | |
| 11070 | var style, name, elm = vnode.elm, s = vnode.data.style; | |
| 11071 | if (!s || !(style = s.destroy)) | |
| 11072 | { return; } | |
| 11073 | for (name in style) { | |
| 11074 | elm.style[name] = style[name]; | |
| 11075 | } | |
| 11076 | } | |
| 11077 | function applyRemoveStyle(vnode, rm) { | |
| 11078 | var s = vnode.data.style; | |
| 11079 | if (!s || !s.remove) { | |
| 11080 | rm(); | |
| 11081 | return; | |
| 11082 | } | |
| 11083 | var name, elm = vnode.elm, i = 0, compStyle, style = s.remove, amount = 0, applied = []; | |
| 11084 | for (name in style) { | |
| 11085 | applied.push(name); | |
| 11086 | elm.style[name] = style[name]; | |
| 11087 | } | |
| 11088 | compStyle = getComputedStyle(elm); | |
| 11089 | var props = compStyle['transition-property'].split(', '); | |
| 11090 | for (; i < props.length; ++i) { | |
| 11091 | if (applied.indexOf(props[i]) !== -1) | |
| 11092 | { amount++; } | |
| 11093 | } | |
| 11094 | elm.addEventListener('transitionend', function (ev) { | |
| 11095 | if (ev.target === elm) | |
| 11096 | { --amount; } | |
| 11097 | if (amount === 0) | |
| 11098 | { rm(); } | |
| 11099 | }); | |
| 11100 | } | |
| 11101 | var styleModule = { | |
| 11102 | create: updateStyle, | |
| 11103 | update: updateStyle, | |
| 11104 | destroy: applyDestroyStyle, | |
| 11105 | remove: applyRemoveStyle | |
| 11106 | }; | |
| 11107 | ||
| 11108 | function invokeHandler(handler, event, args) { | |
| 11109 | if (typeof handler === 'function') { | |
| 11110 | // call function handler | |
| 11111 | handler.apply(void 0, [ event ].concat( args )); | |
| 11112 | } | |
| 11113 | } | |
| 11114 | function handleEvent(event, args, vnode) { | |
| 11115 | var name = event.type; | |
| 11116 | var on = vnode.data.on; | |
| 11117 | // call event handler(s) if exists | |
| 11118 | if (on && on[name]) { | |
| 5d51ea26 | 11119 | invokeHandler(on[name], event, args); |
| 5309fbda DC |
11120 | } |
| 11121 | } | |
| 11122 | function createListener() { | |
| 11123 | return function handler(event) { | |
| 11124 | var args = [], len = arguments.length - 1; | |
| 11125 | while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | |
| 11126 | ||
| 11127 | handleEvent(event, args, handler.vnode); | |
| 11128 | }; | |
| 11129 | } | |
| 11130 | function updateEvents(oldVnode, vnode) { | |
| 11131 | var oldOn = oldVnode.data.on; | |
| 11132 | var oldListener = oldVnode.listener; | |
| 11133 | var oldElm = oldVnode.elm; | |
| 11134 | var on = vnode && vnode.data.on; | |
| 11135 | var elm = (vnode && vnode.elm); | |
| 11136 | // optimization for reused immutable handlers | |
| 11137 | if (oldOn === on) { | |
| 11138 | return; | |
| 11139 | } | |
| 11140 | // remove existing listeners which no longer used | |
| 11141 | if (oldOn && oldListener) { | |
| 11142 | // if element changed or deleted we remove all existing listeners unconditionally | |
| 11143 | if (!on) { | |
| 11144 | Object.keys(oldOn).forEach(function (name) { | |
| 11145 | $(oldElm).off(name, oldListener); | |
| 11146 | }); | |
| 11147 | } else { | |
| 11148 | Object.keys(oldOn).forEach(function (name) { | |
| 11149 | if (!on[name]) { | |
| 11150 | $(oldElm).off(name, oldListener); | |
| 11151 | } | |
| 11152 | }); | |
| 11153 | } | |
| 11154 | } | |
| 11155 | // add new listeners which has not already attached | |
| 11156 | if (on) { | |
| 11157 | // reuse existing listener or create new | |
| 11158 | var listener = oldVnode.listener || createListener(); | |
| 11159 | vnode.listener = listener; | |
| 11160 | // update vnode for listener | |
| 11161 | listener.vnode = vnode; | |
| 11162 | // if element changed or added we add all needed listeners unconditionally | |
| 11163 | if (!oldOn) { | |
| 11164 | Object.keys(on).forEach(function (name) { | |
| 11165 | $(elm).on(name, listener); | |
| 11166 | }); | |
| 11167 | } else { | |
| 11168 | Object.keys(on).forEach(function (name) { | |
| 11169 | if (!oldOn[name]) { | |
| 11170 | $(elm).on(name, listener); | |
| 11171 | } | |
| 11172 | }); | |
| 11173 | } | |
| 11174 | } | |
| 11175 | } | |
| 11176 | ||
| 11177 | var eventListenersModule = { | |
| 11178 | create: updateEvents, | |
| 11179 | update: updateEvents, | |
| 11180 | destroy: updateEvents, | |
| 11181 | }; | |
| 11182 | ||
| 11183 | /* eslint import/no-named-as-default: off */ | |
| 11184 | ||
| 5d51ea26 | 11185 | var patch = init([ |
| 5309fbda DC |
11186 | attributesModule, |
| 11187 | propsModule, | |
| 11188 | styleModule, | |
| 11189 | eventListenersModule ]); | |
| 11190 | ||
| 11191 | var Framework7Component = function Framework7Component(app, options, extendContext) { | |
| 11192 | if ( extendContext === void 0 ) extendContext = {}; | |
| 11193 | ||
| 11194 | var id = Utils.id(); | |
| 11195 | var self = Utils.merge( | |
| 11196 | this, | |
| 11197 | extendContext, | |
| 11198 | { | |
| 11199 | $: $, | |
| 11200 | $$: $, | |
| 11201 | $dom7: $, | |
| 11202 | $app: app, | |
| 11203 | $f7: app, | |
| 11204 | $options: Utils.extend({ id: id }, options), | |
| 5d51ea26 | 11205 | $id: options.id || id, |
| 5309fbda DC |
11206 | } |
| 11207 | ); | |
| 11208 | var $options = self.$options; | |
| 11209 | ||
| 11210 | // Root data and methods | |
| 11211 | Object.defineProperty(self, '$root', { | |
| 11212 | enumerable: true, | |
| 11213 | configurable: true, | |
| 11214 | get: function get() { | |
| 11215 | var root = Utils.merge({}, app.data, app.methods); | |
| 11216 | if (win && win.Proxy) { | |
| 11217 | root = new win.Proxy(root, { | |
| 11218 | set: function set(target, name, val) { | |
| 11219 | app.data[name] = val; | |
| 11220 | }, | |
| 11221 | deleteProperty: function deleteProperty(target, name) { | |
| 11222 | delete app.data[name]; | |
| 11223 | delete app.methods[name]; | |
| 11224 | }, | |
| 11225 | has: function has(target, name) { | |
| 11226 | return (name in app.data || name in app.methods); | |
| 11227 | }, | |
| 11228 | }); | |
| 11229 | } | |
| 11230 | return root; | |
| 11231 | }, | |
| 11232 | set: function set() {}, | |
| 11233 | }); | |
| 11234 | ||
| 11235 | // Apply context | |
| 11236 | ('beforeCreate created beforeMount mounted beforeDestroy destroyed updated').split(' ').forEach(function (cycleKey) { | |
| 11237 | if ($options[cycleKey]) { $options[cycleKey] = $options[cycleKey].bind(self); } | |
| 11238 | }); | |
| 11239 | ||
| 11240 | if ($options.data) { | |
| 11241 | $options.data = $options.data.bind(self); | |
| 11242 | // Data | |
| 11243 | Utils.extend(self, $options.data()); | |
| 11244 | } | |
| 11245 | if ($options.render) { $options.render = $options.render.bind(self); } | |
| 11246 | if ($options.methods) { | |
| 11247 | Object.keys($options.methods).forEach(function (methodName) { | |
| 11248 | self[methodName] = $options.methods[methodName].bind(self); | |
| 11249 | }); | |
| 11250 | } | |
| 11251 | ||
| 11252 | // Bind Events | |
| 11253 | if ($options.on) { | |
| 11254 | Object.keys($options.on).forEach(function (eventName) { | |
| 11255 | $options.on[eventName] = $options.on[eventName].bind(self); | |
| 11256 | }); | |
| 11257 | } | |
| 11258 | if ($options.once) { | |
| 11259 | Object.keys($options.once).forEach(function (eventName) { | |
| 11260 | $options.once[eventName] = $options.once[eventName].bind(self); | |
| 11261 | }); | |
| 11262 | } | |
| 11263 | ||
| 11264 | // Before create hook | |
| 11265 | if ($options.beforeCreate) { $options.beforeCreate(); } | |
| 11266 | ||
| 11267 | // Render | |
| 11268 | var html = self.$render(); | |
| 11269 | ||
| 11270 | // Make Dom | |
| 11271 | if (html && typeof html === 'string') { | |
| 11272 | html = html.trim(); | |
| 11273 | self.$vnode = vdom(html, self, app, true); | |
| 11274 | self.el = doc.createElement('div'); | |
| 11275 | patch(self.el, self.$vnode); | |
| 11276 | } else if (html) { | |
| 11277 | self.el = html; | |
| 11278 | } | |
| 11279 | self.$el = $(self.el); | |
| 11280 | ||
| 11281 | // Set styles scope ID | |
| 11282 | if ($options.style) { | |
| 11283 | self.$styleEl = doc.createElement('style'); | |
| 11284 | self.$styleEl.innerHTML = $options.style; | |
| 11285 | if ($options.styleScoped) { | |
| 11286 | self.el.setAttribute(("data-f7-" + ($options.id)), ''); | |
| 11287 | } | |
| 11288 | } | |
| 11289 | ||
| 11290 | self.$attachEvents(); | |
| 11291 | ||
| 11292 | // Created callback | |
| 11293 | if ($options.created) { $options.created(); } | |
| 11294 | ||
| 11295 | // Store component instance | |
| 11296 | self.el.f7Component = self; | |
| 11297 | ||
| 11298 | return self; | |
| 11299 | }; | |
| 11300 | ||
| 11301 | Framework7Component.prototype.$attachEvents = function $attachEvents () { | |
| 11302 | var self = this; | |
| 11303 | var $options = self.$options; | |
| 11304 | var $el = self.$el; | |
| 11305 | if ($options.on) { | |
| 11306 | Object.keys($options.on).forEach(function (eventName) { | |
| 11307 | $el.on(Utils.eventNameToColonCase(eventName), $options.on[eventName]); | |
| 11308 | }); | |
| 11309 | } | |
| 11310 | if ($options.once) { | |
| 11311 | Object.keys($options.once).forEach(function (eventName) { | |
| 11312 | $el.once(Utils.eventNameToColonCase(eventName), $options.once[eventName]); | |
| 11313 | }); | |
| 11314 | } | |
| 11315 | }; | |
| 11316 | ||
| 11317 | Framework7Component.prototype.$detachEvents = function $detachEvents () { | |
| 11318 | var self = this; | |
| 11319 | var $options = self.$options; | |
| 11320 | var $el = self.$el; | |
| 11321 | if ($options.on) { | |
| 11322 | Object.keys($options.on).forEach(function (eventName) { | |
| 11323 | $el.off(Utils.eventNameToColonCase(eventName), $options.on[eventName]); | |
| 11324 | }); | |
| 11325 | } | |
| 11326 | if ($options.once) { | |
| 11327 | Object.keys($options.once).forEach(function (eventName) { | |
| 11328 | $el.off(Utils.eventNameToColonCase(eventName), $options.once[eventName]); | |
| 11329 | }); | |
| 11330 | } | |
| 11331 | }; | |
| 11332 | ||
| 11333 | Framework7Component.prototype.$render = function $render () { | |
| 11334 | var self = this; | |
| 11335 | var $options = self.$options; | |
| 11336 | var html = ''; | |
| 11337 | if ($options.render) { | |
| 11338 | html = $options.render(); | |
| 11339 | } else if ($options.template) { | |
| 11340 | if (typeof $options.template === 'string') { | |
| 11341 | try { | |
| 11342 | html = Template7.compile($options.template)(self); | |
| 11343 | } catch (err) { | |
| 11344 | throw err; | |
| 11345 | } | |
| 11346 | } else { | |
| 11347 | // Supposed to be function | |
| 11348 | html = $options.template(self); | |
| 11349 | } | |
| 11350 | } | |
| 11351 | return html; | |
| 11352 | }; | |
| 11353 | ||
| 11354 | Framework7Component.prototype.$forceUpdate = function $forceUpdate () { | |
| 11355 | var self = this; | |
| 11356 | var html = self.$render(); | |
| 11357 | ||
| 11358 | // Make Dom | |
| 11359 | if (html && typeof html === 'string') { | |
| 11360 | html = html.trim(); | |
| 11361 | var newVNode = vdom(html, self, self.$app); | |
| 11362 | self.$vnode = patch(self.$vnode, newVNode); | |
| 11363 | } | |
| 11364 | }; | |
| 11365 | ||
| 11366 | Framework7Component.prototype.$setState = function $setState (mergeState) { | |
| 11367 | var self = this; | |
| 11368 | Utils.merge(self, mergeState); | |
| 11369 | self.$forceUpdate(); | |
| 11370 | }; | |
| 11371 | ||
| 11372 | Framework7Component.prototype.$mount = function $mount (mountMethod) { | |
| 11373 | var self = this; | |
| 11374 | if (self.$options.beforeMount) { self.$options.beforeMount(); } | |
| 11375 | if (self.$styleEl) { $('head').append(self.$styleEl); } | |
| 11376 | if (mountMethod) { mountMethod(self.el); } | |
| 11377 | if (self.$options.mounted) { self.$options.mounted(); } | |
| 11378 | }; | |
| 11379 | ||
| 11380 | Framework7Component.prototype.$destroy = function $destroy () { | |
| 11381 | var self = this; | |
| 11382 | if (self.$options.beforeDestroy) { self.$options.beforeDestroy(); } | |
| 11383 | if (self.$styleEl) { $(self.$styleEl).remove(); } | |
| 11384 | self.$detachEvents(); | |
| 11385 | if (self.$options.destroyed) { self.$options.destroyed(); } | |
| 11386 | // Delete component instance | |
| 11387 | if (self.el && self.el.f7Component) { | |
| 11388 | self.el.f7Component = null; | |
| 11389 | delete self.el.f7Component; | |
| 11390 | } | |
| 11391 | // Patch with empty node | |
| 11392 | if (self.$vnode) { | |
| 11393 | self.$vnode = patch(self.$vnode, { sel: self.$vnode.sel, data: {} }); | |
| 11394 | } | |
| 11395 | Utils.deleteProps(self); | |
| 11396 | }; | |
| 11397 | ||
| 11398 | function parseComponent(componentString) { | |
| 11399 | var id = Utils.id(); | |
| 11400 | var callbackCreateName = "f7_component_create_callback_" + id; | |
| 11401 | var callbackRenderName = "f7_component_render_callback_" + id; | |
| 11402 | ||
| 11403 | // Template | |
| 11404 | var template; | |
| 11405 | var hasTemplate = componentString.match(/<template([ ]?)([a-z0-9-]*)>/); | |
| 11406 | var templateType = hasTemplate[2] || 't7'; | |
| 11407 | if (hasTemplate) { | |
| 11408 | template = componentString | |
| 11409 | .split(/<template[ ]?[a-z0-9-]*>/) | |
| 11410 | .filter(function (item, index) { return index > 0; }) | |
| 11411 | .join('<template>') | |
| 11412 | .split('</template>') | |
| 11413 | .filter(function (item, index, arr) { return index < arr.length - 1; }) | |
| 11414 | .join('</template>') | |
| 11415 | .replace(/{{#raw}}([ \n]*)<template/g, '{{#raw}}<template') | |
| 11416 | .replace(/\/template>([ \n]*){{\/raw}}/g, '/template>{{/raw}}') | |
| 11417 | .replace(/([ \n])<template/g, '$1{{#raw}}<template') | |
| 11418 | .replace(/\/template>([ \n])/g, '/template>{{/raw}}$1'); | |
| 11419 | } | |
| 11420 | ||
| 11421 | // Parse Styles | |
| 11422 | var style = null; | |
| 11423 | var styleScoped = false; | |
| 11424 | ||
| 11425 | if (componentString.indexOf('<style>') >= 0) { | |
| 11426 | style = componentString.split('<style>')[1].split('</style>')[0]; | |
| 11427 | } else if (componentString.indexOf('<style scoped>') >= 0) { | |
| 11428 | styleScoped = true; | |
| 11429 | style = componentString.split('<style scoped>')[1].split('</style>')[0]; | |
| 11430 | style = style.split('\n').map(function (line) { | |
| 11431 | var trimmedLine = line.trim(); | |
| 11432 | if (trimmedLine.indexOf('@') === 0) { return line; } | |
| 11433 | if (line.indexOf('{') >= 0) { | |
| 11434 | if (line.indexOf('{{this}}') >= 0) { | |
| 11435 | return line.replace('{{this}}', ("[data-f7-" + id + "]")); | |
| 11436 | } | |
| 11437 | return ("[data-f7-" + id + "] " + (line.trim())); | |
| 11438 | } | |
| 11439 | return line; | |
| 11440 | }).join('\n'); | |
| 11441 | } | |
| 11442 | ||
| 11443 | // Parse Script | |
| 11444 | var scriptContent; | |
| 11445 | var scriptEl; | |
| 11446 | if (componentString.indexOf('<script>') >= 0) { | |
| 11447 | var scripts = componentString.split('<script>'); | |
| 11448 | scriptContent = scripts[scripts.length - 1].split('</script>')[0].trim(); | |
| 11449 | } else { | |
| 11450 | scriptContent = 'return {}'; | |
| 11451 | } | |
| 11452 | if (!scriptContent || !scriptContent.trim()) { scriptContent = 'return {}'; } | |
| 11453 | ||
| 11454 | scriptContent = "window." + callbackCreateName + " = function () {" + scriptContent + "}"; | |
| 11455 | ||
| 11456 | // Insert Script El | |
| 11457 | scriptEl = doc.createElement('script'); | |
| 11458 | scriptEl.innerHTML = scriptContent; | |
| 11459 | $('head').append(scriptEl); | |
| 11460 | ||
| 11461 | var component = win[callbackCreateName](); | |
| 11462 | ||
| 11463 | // Remove Script El | |
| 11464 | $(scriptEl).remove(); | |
| 11465 | win[callbackCreateName] = null; | |
| 11466 | delete win[callbackCreateName]; | |
| 11467 | ||
| 11468 | // Assign Template | |
| 11469 | if (!component.template && !component.render) { | |
| 11470 | component.template = template; | |
| 11471 | component.templateType = templateType; | |
| 11472 | } | |
| 11473 | if (component.template) { | |
| 11474 | if (component.templateType === 't7') { | |
| 11475 | component.template = Template7.compile(component.template); | |
| 11476 | } | |
| 11477 | if (component.templateType === 'es') { | |
| 11478 | var renderContent = "window." + callbackRenderName + " = function () {\n return function render() {\n return `" + (component.template) + "`;\n }\n }"; | |
| 11479 | scriptEl = doc.createElement('script'); | |
| 11480 | scriptEl.innerHTML = renderContent; | |
| 11481 | $('head').append(scriptEl); | |
| 11482 | ||
| 11483 | component.render = win[callbackRenderName](); | |
| 11484 | ||
| 11485 | // Remove Script El | |
| 11486 | $(scriptEl).remove(); | |
| 11487 | win[callbackRenderName] = null; | |
| 11488 | delete win[callbackRenderName]; | |
| 11489 | } | |
| 11490 | } | |
| 11491 | ||
| 11492 | // Assign Style | |
| 11493 | if (style) { | |
| 11494 | component.style = style; | |
| 11495 | component.styleScoped = styleScoped; | |
| 11496 | } | |
| 11497 | ||
| 11498 | // Component ID | |
| 11499 | component.id = id; | |
| 11500 | return component; | |
| 11501 | } | |
| 11502 | ||
| 11503 | var ComponentModule = { | |
| 11504 | name: 'component', | |
| 11505 | create: function create() { | |
| 11506 | var app = this; | |
| 11507 | app.component = { | |
| 11508 | parse: function parse(componentString) { | |
| 11509 | return parseComponent(componentString); | |
| 11510 | }, | |
| 11511 | create: function create(options, extendContext) { | |
| 11512 | return new Framework7Component(app, options, extendContext); | |
| 11513 | }, | |
| 11514 | }; | |
| 11515 | }, | |
| 11516 | }; | |
| 11517 | ||
| 11518 | var SW = { | |
| 11519 | registrations: [], | |
| 11520 | register: function register(path, scope) { | |
| 11521 | var app = this; | |
| 11522 | if (!('serviceWorker' in window.navigator) || !app.serviceWorker.container) { | |
| 11523 | return new Promise(function (resolve, reject) { | |
| 11524 | reject(new Error('Service worker is not supported')); | |
| 11525 | }); | |
| 11526 | } | |
| 11527 | return new Promise(function (resolve, reject) { | |
| 11528 | app.serviceWorker.container.register(path, (scope ? { scope: scope } : {})) | |
| 11529 | .then(function (reg) { | |
| 11530 | SW.registrations.push(reg); | |
| 11531 | app.emit('serviceWorkerRegisterSuccess', reg); | |
| 11532 | resolve(reg); | |
| 11533 | }).catch(function (error) { | |
| 11534 | app.emit('serviceWorkerRegisterError', error); | |
| 11535 | reject(error); | |
| 11536 | }); | |
| 11537 | }); | |
| 11538 | }, | |
| 11539 | unregister: function unregister(registration) { | |
| 11540 | var app = this; | |
| 11541 | if (!('serviceWorker' in window.navigator) || !app.serviceWorker.container) { | |
| 11542 | return new Promise(function (resolve, reject) { | |
| 11543 | reject(new Error('Service worker is not supported')); | |
| 11544 | }); | |
| 11545 | } | |
| 11546 | var registrations; | |
| 11547 | if (!registration) { registrations = SW.registrations; } | |
| 11548 | else if (Array.isArray(registration)) { registrations = registration; } | |
| 11549 | else { registrations = [registration]; } | |
| 11550 | return Promise.all(registrations.map(function (reg) { return new Promise(function (resolve, reject) { | |
| 11551 | reg.unregister() | |
| 11552 | .then(function () { | |
| 11553 | if (SW.registrations.indexOf(reg) >= 0) { | |
| 11554 | SW.registrations.splice(SW.registrations.indexOf(reg), 1); | |
| 11555 | } | |
| 11556 | app.emit('serviceWorkerUnregisterSuccess', reg); | |
| 11557 | resolve(); | |
| 11558 | }) | |
| 11559 | .catch(function (error) { | |
| 11560 | app.emit('serviceWorkerUnregisterError', reg, error); | |
| 11561 | reject(error); | |
| 11562 | }); | |
| 11563 | }); })); | |
| 11564 | }, | |
| 11565 | }; | |
| 11566 | ||
| 11567 | var ServiceWorkerModule = { | |
| 11568 | name: 'sw', | |
| 11569 | params: { | |
| 11570 | serviceWorker: { | |
| 11571 | path: undefined, | |
| 11572 | scope: undefined, | |
| 11573 | }, | |
| 11574 | }, | |
| 11575 | create: function create() { | |
| 11576 | var app = this; | |
| 11577 | Utils.extend(app, { | |
| 11578 | serviceWorker: { | |
| 11579 | container: ('serviceWorker' in window.navigator) ? window.navigator.serviceWorker : undefined, | |
| 11580 | registrations: SW.registrations, | |
| 11581 | register: SW.register.bind(app), | |
| 11582 | unregister: SW.unregister.bind(app), | |
| 11583 | }, | |
| 11584 | }); | |
| 11585 | }, | |
| 11586 | on: { | |
| 11587 | init: function init() { | |
| 11588 | if (!('serviceWorker' in window.navigator)) { return; } | |
| 11589 | var app = this; | |
| 11590 | if (!app.serviceWorker.container) { return; } | |
| 11591 | var paths = app.params.serviceWorker.path; | |
| 11592 | var scope = app.params.serviceWorker.scope; | |
| 11593 | if (!paths || (Array.isArray(paths) && !paths.length)) { return; } | |
| 11594 | var toRegister = Array.isArray(paths) ? paths : [paths]; | |
| 11595 | toRegister.forEach(function (path) { | |
| 11596 | app.serviceWorker.register(path, scope); | |
| 11597 | }); | |
| 11598 | }, | |
| 11599 | }, | |
| 11600 | }; | |
| 11601 | ||
| 11602 | var Statusbar = { | |
| 11603 | hide: function hide() { | |
| 11604 | $('html').removeClass('with-statusbar'); | |
| 11605 | if (Device.cordova && win.StatusBar) { | |
| 11606 | win.StatusBar.hide(); | |
| 11607 | } | |
| 11608 | }, | |
| 11609 | show: function show() { | |
| 11610 | if (Device.cordova && win.StatusBar) { | |
| 11611 | win.StatusBar.show(); | |
| 11612 | Utils.nextTick(function () { | |
| 11613 | if (Device.needsStatusbarOverlay()) { | |
| 11614 | $('html').addClass('with-statusbar'); | |
| 11615 | } | |
| 11616 | }); | |
| 11617 | return; | |
| 11618 | } | |
| 11619 | $('html').addClass('with-statusbar'); | |
| 11620 | }, | |
| 11621 | onClick: function onClick() { | |
| 11622 | var app = this; | |
| 11623 | var pageContent; | |
| 11624 | if ($('.popup.modal-in').length > 0) { | |
| 11625 | // Check for opened popup | |
| 11626 | pageContent = $('.popup.modal-in').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content'); | |
| 11627 | } else if ($('.panel.panel-active').length > 0) { | |
| 11628 | // Check for opened panel | |
| 11629 | pageContent = $('.panel.panel-active').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content'); | |
| 11630 | } else if ($('.views > .view.tab-active').length > 0) { | |
| 11631 | // View in tab bar app layout | |
| 11632 | pageContent = $('.views > .view.tab-active').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content'); | |
| 11633 | } else if ($('.views').length > 0) { | |
| 11634 | pageContent = $('.views').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content'); | |
| 11635 | } else { | |
| 11636 | pageContent = app.root.children('.view').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content'); | |
| 11637 | } | |
| 11638 | ||
| 11639 | if (pageContent && pageContent.length > 0) { | |
| 11640 | // Check for tab | |
| 11641 | if (pageContent.hasClass('tab')) { | |
| 11642 | pageContent = pageContent.parent('.tabs').children('.page-content.tab-active'); | |
| 11643 | } | |
| 11644 | if (pageContent.length > 0) { pageContent.scrollTop(0, 300); } | |
| 11645 | } | |
| 11646 | }, | |
| 11647 | setTextColor: function setTextColor(color) { | |
| 11648 | if (Device.cordova && win.StatusBar) { | |
| 11649 | if (color === 'white') { | |
| 11650 | win.StatusBar.styleLightContent(); | |
| 11651 | } else { | |
| 11652 | win.StatusBar.styleDefault(); | |
| 11653 | } | |
| 11654 | } | |
| 11655 | }, | |
| 11656 | setIosTextColor: function setIosTextColor(color) { | |
| 11657 | if (!Device.ios) { return; } | |
| 11658 | Statusbar.setTextColor(color); | |
| 11659 | }, | |
| 11660 | setBackgroundColor: function setBackgroundColor(color) { | |
| 11661 | $('.statusbar').css('background-color', color); | |
| 11662 | if (Device.cordova && win.StatusBar) { | |
| 11663 | win.StatusBar.backgroundColorByHexString(color); | |
| 11664 | } | |
| 11665 | }, | |
| 11666 | isVisible: function isVisible() { | |
| 11667 | if (Device.cordova && win.StatusBar) { | |
| 11668 | return win.StatusBar.isVisible; | |
| 11669 | } | |
| 11670 | return false; | |
| 11671 | }, | |
| 11672 | overlaysWebView: function overlaysWebView(overlays) { | |
| 11673 | if ( overlays === void 0 ) overlays = true; | |
| 11674 | ||
| 11675 | if (Device.cordova && win.StatusBar) { | |
| 11676 | win.StatusBar.overlaysWebView(overlays); | |
| 11677 | if (overlays) { | |
| 11678 | $('html').addClass('with-statusbar'); | |
| 11679 | } else { | |
| 11680 | $('html').removeClass('with-statusbar'); | |
| 11681 | } | |
| 11682 | } | |
| 11683 | }, | |
| 11684 | checkOverlay: function checkOverlay() { | |
| 11685 | if (Device.needsStatusbarOverlay()) { | |
| 11686 | $('html').addClass('with-statusbar'); | |
| 11687 | } else { | |
| 11688 | $('html').removeClass('with-statusbar'); | |
| 11689 | } | |
| 11690 | }, | |
| 11691 | init: function init() { | |
| 11692 | var app = this; | |
| 11693 | var params = app.params.statusbar; | |
| 11694 | if (!params.enabled) { return; } | |
| 11695 | ||
| 11696 | if (params.overlay === 'auto') { | |
| 11697 | if (Device.needsStatusbarOverlay()) { | |
| 11698 | $('html').addClass('with-statusbar'); | |
| 11699 | } else { | |
| 11700 | $('html').removeClass('with-statusbar'); | |
| 11701 | } | |
| 11702 | ||
| 11703 | if (Device.ios && (Device.cordova || Device.webView)) { | |
| 11704 | if (win.orientation === 0) { | |
| 11705 | app.once('resize', function () { | |
| 11706 | Statusbar.checkOverlay(); | |
| 11707 | }); | |
| 11708 | } | |
| 11709 | ||
| 11710 | $(doc).on('resume', function () { | |
| 11711 | Statusbar.checkOverlay(); | |
| 11712 | }, false); | |
| 11713 | ||
| 11714 | app.on(Device.ios ? 'orientationchange' : 'orientationchange resize', function () { | |
| 11715 | Statusbar.checkOverlay(); | |
| 11716 | }); | |
| 11717 | } | |
| 11718 | } else if (params.overlay === true) { | |
| 11719 | $('html').addClass('with-statusbar'); | |
| 11720 | } else if (params.overlay === false) { | |
| 11721 | $('html').removeClass('with-statusbar'); | |
| 11722 | } | |
| 11723 | ||
| 11724 | if (Device.cordova && win.StatusBar) { | |
| 11725 | if (params.scrollTopOnClick) { | |
| 11726 | $(win).on('statusTap', Statusbar.onClick.bind(app)); | |
| 11727 | } | |
| 11728 | if (Device.ios) { | |
| 11729 | if (params.iosOverlaysWebView) { | |
| 11730 | win.StatusBar.overlaysWebView(true); | |
| 11731 | } else { | |
| 11732 | win.StatusBar.overlaysWebView(false); | |
| 11733 | } | |
| 11734 | if (params.iosTextColor === 'white') { | |
| 11735 | win.StatusBar.styleLightContent(); | |
| 11736 | } else { | |
| 11737 | win.StatusBar.styleDefault(); | |
| 11738 | } | |
| 11739 | } | |
| 11740 | if (Device.android) { | |
| 11741 | if (params.androidOverlaysWebView) { | |
| 11742 | win.StatusBar.overlaysWebView(true); | |
| 11743 | } else { | |
| 11744 | win.StatusBar.overlaysWebView(false); | |
| 11745 | } | |
| 11746 | if (params.androidTextColor === 'white') { | |
| 11747 | win.StatusBar.styleLightContent(); | |
| 11748 | } else { | |
| 11749 | win.StatusBar.styleDefault(); | |
| 11750 | } | |
| 11751 | } | |
| 11752 | } | |
| 11753 | if (params.iosBackgroundColor && Device.ios) { | |
| 11754 | Statusbar.setBackgroundColor(params.iosBackgroundColor); | |
| 11755 | } | |
| 11756 | if ((params.materialBackgroundColor || params.androidBackgroundColor) && Device.android) { | |
| 11757 | Statusbar.setBackgroundColor(params.materialBackgroundColor || params.androidBackgroundColor); | |
| 11758 | } | |
| 11759 | }, | |
| 11760 | }; | |
| 11761 | ||
| 11762 | var Statusbar$1 = { | |
| 11763 | name: 'statusbar', | |
| 11764 | params: { | |
| 11765 | statusbar: { | |
| 11766 | enabled: true, | |
| 11767 | overlay: 'auto', | |
| 11768 | scrollTopOnClick: true, | |
| 11769 | ||
| 11770 | iosOverlaysWebView: true, | |
| 11771 | iosTextColor: 'black', | |
| 11772 | iosBackgroundColor: null, | |
| 11773 | ||
| 11774 | androidOverlaysWebView: false, | |
| 11775 | androidTextColor: 'black', | |
| 11776 | androidBackgroundColor: null, | |
| 11777 | }, | |
| 11778 | }, | |
| 11779 | create: function create() { | |
| 11780 | var app = this; | |
| 11781 | Utils.extend(app, { | |
| 11782 | statusbar: { | |
| 11783 | checkOverlay: Statusbar.checkOverlay, | |
| 11784 | hide: Statusbar.hide, | |
| 11785 | show: Statusbar.show, | |
| 11786 | overlaysWebView: Statusbar.overlaysWebView, | |
| 11787 | setTextColor: Statusbar.setTextColor, | |
| 11788 | setBackgroundColor: Statusbar.setBackgroundColor, | |
| 11789 | isVisible: Statusbar.isVisible, | |
| 11790 | init: Statusbar.init.bind(app), | |
| 11791 | }, | |
| 11792 | }); | |
| 11793 | }, | |
| 11794 | on: { | |
| 11795 | init: function init() { | |
| 11796 | var app = this; | |
| 11797 | Statusbar.init.call(app); | |
| 11798 | }, | |
| 11799 | }, | |
| 11800 | clicks: { | |
| 11801 | '.statusbar': function onStatusbarClick() { | |
| 11802 | var app = this; | |
| 11803 | if (!app.params.statusbar.enabled) { return; } | |
| 11804 | if (!app.params.statusbar.scrollTopOnClick) { return; } | |
| 11805 | Statusbar.onClick.call(app); | |
| 11806 | }, | |
| 11807 | }, | |
| 11808 | }; | |
| 11809 | ||
| 11810 | function getCurrentView(app) { | |
| 5d51ea26 DC |
11811 | var $popoverView = $('.popover.modal-in .view'); |
| 11812 | var $popupView = $('.popup.modal-in .view'); | |
| 11813 | var $panelView = $('.panel.panel-active .view'); | |
| 11814 | var $viewsEl = $('.views'); | |
| 11815 | if ($viewsEl.length === 0) { $viewsEl = app.root; } | |
| 5309fbda | 11816 | // Find active view as tab |
| 5d51ea26 | 11817 | var $viewEl = $viewsEl.children('.view'); |
| 5309fbda | 11818 | // Propably in tabs or split view |
| 5d51ea26 DC |
11819 | if ($viewEl.length > 1) { |
| 11820 | if ($viewEl.hasClass('tab')) { | |
| 5309fbda | 11821 | // Tabs |
| 5d51ea26 | 11822 | $viewEl = $viewsEl.children('.view.tab-active'); |
| 5309fbda DC |
11823 | } |
| 11824 | } | |
| 5d51ea26 DC |
11825 | if ($popoverView.length > 0 && $popoverView[0].f7View) { return $popoverView[0].f7View; } |
| 11826 | if ($popupView.length > 0 && $popupView[0].f7View) { return $popupView[0].f7View; } | |
| 11827 | if ($panelView.length > 0 && $panelView[0].f7View) { return $panelView[0].f7View; } | |
| 11828 | if ($viewEl.length > 0) { | |
| 11829 | if ($viewEl.length === 1 && $viewEl[0].f7View) { return $viewEl[0].f7View; } | |
| 11830 | if ($viewEl.length > 1) { | |
| 5309fbda DC |
11831 | return app.views.main; |
| 11832 | } | |
| 11833 | } | |
| 11834 | return undefined; | |
| 11835 | } | |
| 11836 | ||
| 11837 | var View$1 = { | |
| 11838 | name: 'view', | |
| 11839 | params: { | |
| 11840 | view: { | |
| 11841 | name: undefined, | |
| 11842 | main: false, | |
| 11843 | router: true, | |
| 11844 | linksView: null, | |
| 11845 | stackPages: false, | |
| 11846 | xhrCache: true, | |
| 11847 | xhrCacheIgnore: [], | |
| 11848 | xhrCacheIgnoreGetParameters: false, | |
| 11849 | xhrCacheDuration: 1000 * 60 * 10, // Ten minutes | |
| 11850 | preloadPreviousPage: true, | |
| 11851 | allowDuplicateUrls: false, | |
| 11852 | reloadPages: false, | |
| 11853 | reloadDetail: false, | |
| 11854 | masterDetailBreakpoint: 0, | |
| 11855 | removeElements: true, | |
| 11856 | removeElementsWithTimeout: false, | |
| 11857 | removeElementsTimeout: 0, | |
| 11858 | restoreScrollTopOnBack: true, | |
| 11859 | unloadTabContent: true, | |
| 11860 | passRouteQueryToRequest: true, | |
| 11861 | passRouteParamsToRequest: false, | |
| 11862 | // Swipe Back | |
| 11863 | iosSwipeBack: true, | |
| 11864 | iosSwipeBackAnimateShadow: true, | |
| 11865 | iosSwipeBackAnimateOpacity: true, | |
| 11866 | iosSwipeBackActiveArea: 30, | |
| 11867 | iosSwipeBackThreshold: 0, | |
| 11868 | mdSwipeBack: false, | |
| 11869 | mdSwipeBackAnimateShadow: true, | |
| 11870 | mdSwipeBackAnimateOpacity: false, | |
| 11871 | mdSwipeBackActiveArea: 30, | |
| 11872 | mdSwipeBackThreshold: 0, | |
| 5d51ea26 DC |
11873 | auroraSwipeBack: false, |
| 11874 | auroraSwipeBackAnimateShadow: false, | |
| 11875 | auroraSwipeBackAnimateOpacity: true, | |
| 11876 | auroraSwipeBackActiveArea: 30, | |
| 11877 | auroraSwipeBackThreshold: 0, | |
| 5309fbda DC |
11878 | // Push State |
| 11879 | pushState: false, | |
| 11880 | pushStateRoot: undefined, | |
| 11881 | pushStateAnimate: true, | |
| 11882 | pushStateAnimateOnLoad: false, | |
| 11883 | pushStateSeparator: '#!', | |
| 11884 | pushStateOnLoad: true, | |
| 11885 | // Animate Pages | |
| 11886 | animate: true, | |
| 11887 | // iOS Dynamic Navbar | |
| 11888 | iosDynamicNavbar: true, | |
| 11889 | iosSeparateDynamicNavbar: true, | |
| 11890 | // Animate iOS Navbar Back Icon | |
| 11891 | iosAnimateNavbarBackIcon: true, | |
| 11892 | // Delays | |
| 11893 | iosPageLoadDelay: 0, | |
| 11894 | mdPageLoadDelay: 0, | |
| 5d51ea26 | 11895 | auroraPageLoadDelay: 0, |
| 5309fbda DC |
11896 | // Routes hooks |
| 11897 | routesBeforeEnter: null, | |
| 11898 | routesBeforeLeave: null, | |
| 11899 | }, | |
| 11900 | }, | |
| 11901 | static: { | |
| 11902 | View: View, | |
| 11903 | }, | |
| 11904 | create: function create() { | |
| 11905 | var app = this; | |
| 11906 | Utils.extend(app, { | |
| 11907 | views: Utils.extend([], { | |
| 11908 | create: function create(el, params) { | |
| 11909 | return new View(app, el, params); | |
| 11910 | }, | |
| 11911 | get: function get(viewEl) { | |
| 11912 | var $viewEl = $(viewEl); | |
| 11913 | if ($viewEl.length && $viewEl[0].f7View) { return $viewEl[0].f7View; } | |
| 11914 | return undefined; | |
| 11915 | }, | |
| 11916 | }), | |
| 11917 | }); | |
| 11918 | Object.defineProperty(app.views, 'current', { | |
| 11919 | enumerable: true, | |
| 11920 | configurable: true, | |
| 11921 | get: function get() { | |
| 11922 | return getCurrentView(app); | |
| 11923 | }, | |
| 11924 | }); | |
| 11925 | // Alias | |
| 11926 | app.view = app.views; | |
| 11927 | }, | |
| 11928 | on: { | |
| 11929 | init: function init() { | |
| 11930 | var app = this; | |
| 11931 | $('.view-init').each(function (index, viewEl) { | |
| 11932 | if (viewEl.f7View) { return; } | |
| 11933 | var viewParams = $(viewEl).dataset(); | |
| 11934 | app.views.create(viewEl, viewParams); | |
| 11935 | }); | |
| 11936 | }, | |
| 11937 | modalOpen: function modalOpen(modal) { | |
| 11938 | var app = this; | |
| 11939 | modal.$el.find('.view-init').each(function (index, viewEl) { | |
| 11940 | if (viewEl.f7View) { return; } | |
| 11941 | var viewParams = $(viewEl).dataset(); | |
| 11942 | app.views.create(viewEl, viewParams); | |
| 11943 | }); | |
| 11944 | }, | |
| 11945 | modalBeforeDestroy: function modalBeforeDestroy(modal) { | |
| 11946 | if (!modal || !modal.$el) { return; } | |
| 11947 | modal.$el.find('.view-init').each(function (index, viewEl) { | |
| 11948 | var view = viewEl.f7View; | |
| 11949 | if (!view) { return; } | |
| 11950 | view.destroy(); | |
| 11951 | }); | |
| 11952 | }, | |
| 11953 | }, | |
| 11954 | }; | |
| 11955 | ||
| 11956 | var Navbar = { | |
| 11957 | size: function size(el) { | |
| 11958 | var app = this; | |
| 5d51ea26 DC |
11959 | if (app.theme !== 'ios' && !app.params.navbar[((app.theme) + "CenterTitle")]) { |
| 11960 | return; | |
| 11961 | } | |
| 5309fbda DC |
11962 | var $el = $(el); |
| 11963 | if ($el.hasClass('navbar')) { | |
| 11964 | $el = $el.children('.navbar-inner').each(function (index, navbarEl) { | |
| 11965 | app.navbar.size(navbarEl); | |
| 11966 | }); | |
| 11967 | return; | |
| 11968 | } | |
| 11969 | ||
| 11970 | if ( | |
| 11971 | $el.hasClass('stacked') | |
| 11972 | || $el.parents('.stacked').length > 0 | |
| 11973 | || $el.parents('.tab:not(.tab-active)').length > 0 | |
| 11974 | || $el.parents('.popup:not(.modal-in)').length > 0 | |
| 11975 | ) { | |
| 11976 | return; | |
| 11977 | } | |
| 11978 | ||
| 5d51ea26 | 11979 | if (app.theme !== 'ios' && app.params.navbar[((app.theme) + "CenterTitle")]) { |
| 5309fbda DC |
11980 | $el.addClass('navbar-inner-centered-title'); |
| 11981 | } | |
| 11982 | if (app.theme === 'ios' && !app.params.navbar.iosCenterTitle) { | |
| 11983 | $el.addClass('navbar-inner-left-title'); | |
| 11984 | } | |
| 11985 | ||
| 11986 | var $viewEl = $el.parents('.view').eq(0); | |
| 11987 | var left = app.rtl ? $el.children('.right') : $el.children('.left'); | |
| 11988 | var right = app.rtl ? $el.children('.left') : $el.children('.right'); | |
| 11989 | var title = $el.children('.title'); | |
| 11990 | var subnavbar = $el.children('.subnavbar'); | |
| 11991 | var noLeft = left.length === 0; | |
| 11992 | var noRight = right.length === 0; | |
| 11993 | var leftWidth = noLeft ? 0 : left.outerWidth(true); | |
| 11994 | var rightWidth = noRight ? 0 : right.outerWidth(true); | |
| 11995 | var titleWidth = title.outerWidth(true); | |
| 11996 | var navbarStyles = $el.styles(); | |
| 11997 | var navbarWidth = $el[0].offsetWidth; | |
| 11998 | var navbarInnerWidth = navbarWidth - parseInt(navbarStyles.paddingLeft, 10) - parseInt(navbarStyles.paddingRight, 10); | |
| 11999 | var isPrevious = $el.hasClass('navbar-previous'); | |
| 12000 | var sliding = $el.hasClass('sliding'); | |
| 12001 | ||
| 12002 | var router; | |
| 12003 | var dynamicNavbar; | |
| 12004 | var separateNavbar; | |
| 12005 | var separateNavbarRightOffset = 0; | |
| 12006 | var separateNavbarLeftOffset = 0; | |
| 12007 | ||
| 12008 | if ($viewEl.length > 0 && $viewEl[0].f7View) { | |
| 12009 | router = $viewEl[0].f7View.router; | |
| 12010 | dynamicNavbar = router && router.dynamicNavbar; | |
| 12011 | separateNavbar = router && router.separateNavbar; | |
| 12012 | if (!separateNavbar) { | |
| 12013 | separateNavbarRightOffset = navbarWidth; | |
| 12014 | separateNavbarLeftOffset = navbarWidth / 5; | |
| 12015 | } | |
| 12016 | } | |
| 12017 | ||
| 12018 | var currLeft; | |
| 12019 | var diff; | |
| 12020 | if (noRight) { | |
| 12021 | currLeft = navbarInnerWidth - titleWidth; | |
| 12022 | } | |
| 12023 | if (noLeft) { | |
| 12024 | currLeft = 0; | |
| 12025 | } | |
| 12026 | if (!noLeft && !noRight) { | |
| 12027 | currLeft = ((navbarInnerWidth - rightWidth - titleWidth) + leftWidth) / 2; | |
| 12028 | } | |
| 12029 | var requiredLeft = (navbarInnerWidth - titleWidth) / 2; | |
| 12030 | if (navbarInnerWidth - leftWidth - rightWidth > titleWidth) { | |
| 12031 | if (requiredLeft < leftWidth) { | |
| 12032 | requiredLeft = leftWidth; | |
| 12033 | } | |
| 12034 | if (requiredLeft + titleWidth > navbarInnerWidth - rightWidth) { | |
| 12035 | requiredLeft = navbarInnerWidth - rightWidth - titleWidth; | |
| 12036 | } | |
| 12037 | diff = requiredLeft - currLeft; | |
| 12038 | } else { | |
| 12039 | diff = 0; | |
| 12040 | } | |
| 12041 | ||
| 12042 | // RTL inverter | |
| 12043 | var inverter = app.rtl ? -1 : 1; | |
| 12044 | ||
| 12045 | if (dynamicNavbar && app.theme === 'ios') { | |
| 12046 | if (title.hasClass('sliding') || (title.length > 0 && sliding)) { | |
| 12047 | var titleLeftOffset = (-(currLeft + diff) * inverter) + separateNavbarLeftOffset; | |
| 12048 | var titleRightOffset = ((navbarInnerWidth - currLeft - diff - titleWidth) * inverter) - separateNavbarRightOffset; | |
| 12049 | ||
| 12050 | if (isPrevious) { | |
| 12051 | if (router && router.params.iosAnimateNavbarBackIcon) { | |
| 12052 | var activeNavbarBackLink = $el.parent().find('.navbar-current').children('.left.sliding').find('.back .icon ~ span'); | |
| 12053 | if (activeNavbarBackLink.length > 0) { | |
| 12054 | titleLeftOffset += activeNavbarBackLink[0].offsetLeft; | |
| 12055 | } | |
| 12056 | } | |
| 12057 | } | |
| 12058 | title[0].f7NavbarLeftOffset = titleLeftOffset; | |
| 12059 | title[0].f7NavbarRightOffset = titleRightOffset; | |
| 12060 | } | |
| 12061 | if (!noLeft && (left.hasClass('sliding') || sliding)) { | |
| 12062 | if (app.rtl) { | |
| 12063 | left[0].f7NavbarLeftOffset = (-(navbarInnerWidth - left[0].offsetWidth) / 2) * inverter; | |
| 12064 | left[0].f7NavbarRightOffset = leftWidth * inverter; | |
| 12065 | } else { | |
| 12066 | left[0].f7NavbarLeftOffset = -leftWidth + separateNavbarLeftOffset; | |
| 12067 | left[0].f7NavbarRightOffset = ((navbarInnerWidth - left[0].offsetWidth) / 2) - separateNavbarRightOffset; | |
| 12068 | if (router && router.params.iosAnimateNavbarBackIcon && left.find('.back .icon').length > 0) { | |
| 12069 | if (left.find('.back .icon ~ span').length) { | |
| 12070 | var leftOffset = left[0].f7NavbarLeftOffset; | |
| 12071 | var rightOffset = left[0].f7NavbarRightOffset; | |
| 12072 | left[0].f7NavbarLeftOffset = 0; | |
| 12073 | left[0].f7NavbarRightOffset = 0; | |
| 12074 | left.find('.back .icon ~ span')[0].f7NavbarLeftOffset = leftOffset; | |
| 12075 | left.find('.back .icon ~ span')[0].f7NavbarRightOffset = rightOffset - left.find('.back .icon')[0].offsetWidth; | |
| 12076 | } | |
| 12077 | } | |
| 12078 | } | |
| 12079 | } | |
| 12080 | if (!noRight && (right.hasClass('sliding') || sliding)) { | |
| 12081 | if (app.rtl) { | |
| 12082 | right[0].f7NavbarLeftOffset = -rightWidth * inverter; | |
| 12083 | right[0].f7NavbarRightOffset = ((navbarInnerWidth - right[0].offsetWidth) / 2) * inverter; | |
| 12084 | } else { | |
| 12085 | right[0].f7NavbarLeftOffset = (-(navbarInnerWidth - right[0].offsetWidth) / 2) + separateNavbarLeftOffset; | |
| 12086 | right[0].f7NavbarRightOffset = rightWidth - separateNavbarRightOffset; | |
| 12087 | } | |
| 12088 | } | |
| 12089 | if (subnavbar.length && (subnavbar.hasClass('sliding') || sliding)) { | |
| 12090 | subnavbar[0].f7NavbarLeftOffset = app.rtl ? subnavbar[0].offsetWidth : (-subnavbar[0].offsetWidth + separateNavbarLeftOffset); | |
| 12091 | subnavbar[0].f7NavbarRightOffset = (-subnavbar[0].f7NavbarLeftOffset - separateNavbarRightOffset) + separateNavbarLeftOffset; | |
| 12092 | } | |
| 12093 | } | |
| 12094 | ||
| 12095 | // Center title | |
| 5d51ea26 | 12096 | if (app.params.navbar[((app.theme) + "CenterTitle")]) { |
| 5309fbda DC |
12097 | var titleLeft = diff; |
| 12098 | if (app.rtl && noLeft && noRight && title.length > 0) { titleLeft = -titleLeft; } | |
| 12099 | title.css({ left: (titleLeft + "px") }); | |
| 12100 | } | |
| 12101 | }, | |
| 12102 | hide: function hide(el, animate) { | |
| 12103 | if ( animate === void 0 ) animate = true; | |
| 12104 | ||
| 12105 | var app = this; | |
| 12106 | var $el = $(el); | |
| 12107 | if ($el.hasClass('navbar-inner')) { $el = $el.parents('.navbar'); } | |
| 12108 | if (!$el.length) { return; } | |
| 12109 | if ($el.hasClass('navbar-hidden')) { return; } | |
| 12110 | var className = "navbar-hidden" + (animate ? ' navbar-transitioning' : ''); | |
| 5d51ea26 DC |
12111 | var currentIsLarge = app.theme === 'ios' |
| 12112 | ? $el.find('.navbar-current .title-large').length | |
| 12113 | : $el.find('.title-large').length; | |
| 5309fbda DC |
12114 | if (currentIsLarge) { |
| 12115 | className += ' navbar-large-hidden'; | |
| 12116 | } | |
| 12117 | $el.transitionEnd(function () { | |
| 12118 | $el.removeClass('navbar-transitioning'); | |
| 12119 | }); | |
| 12120 | $el.addClass(className); | |
| 5d51ea26 DC |
12121 | $el.trigger('navbar:hide'); |
| 12122 | app.emit('navbarHide', $el[0]); | |
| 5309fbda DC |
12123 | }, |
| 12124 | show: function show(el, animate) { | |
| 12125 | if ( el === void 0 ) el = '.navbar-hidden'; | |
| 12126 | if ( animate === void 0 ) animate = true; | |
| 12127 | ||
| 5d51ea26 | 12128 | var app = this; |
| 5309fbda DC |
12129 | var $el = $(el); |
| 12130 | if ($el.hasClass('navbar-inner')) { $el = $el.parents('.navbar'); } | |
| 12131 | if (!$el.length) { return; } | |
| 12132 | if (!$el.hasClass('navbar-hidden')) { return; } | |
| 12133 | if (animate) { | |
| 12134 | $el.addClass('navbar-transitioning'); | |
| 12135 | $el.transitionEnd(function () { | |
| 12136 | $el.removeClass('navbar-transitioning'); | |
| 12137 | }); | |
| 12138 | } | |
| 12139 | $el.removeClass('navbar-hidden navbar-large-hidden'); | |
| 5d51ea26 DC |
12140 | $el.trigger('navbar:show'); |
| 12141 | app.emit('navbarShow', $el[0]); | |
| 5309fbda DC |
12142 | }, |
| 12143 | getElByPage: function getElByPage(page) { | |
| 12144 | var $pageEl; | |
| 12145 | var $navbarInnerEl; | |
| 12146 | var pageData; | |
| 12147 | if (page.$navbarEl || page.$el) { | |
| 12148 | pageData = page; | |
| 12149 | $pageEl = page.$el; | |
| 12150 | } else { | |
| 12151 | $pageEl = $(page); | |
| 12152 | if ($pageEl.length > 0) { pageData = $pageEl[0].f7Page; } | |
| 12153 | } | |
| 12154 | if (pageData && pageData.$navbarEl && pageData.$navbarEl.length > 0) { | |
| 12155 | $navbarInnerEl = pageData.$navbarEl; | |
| 12156 | } else if ($pageEl) { | |
| 12157 | $navbarInnerEl = $pageEl.children('.navbar').children('.navbar-inner'); | |
| 12158 | } | |
| 12159 | if (!$navbarInnerEl || ($navbarInnerEl && $navbarInnerEl.length === 0)) { return undefined; } | |
| 12160 | return $navbarInnerEl[0]; | |
| 12161 | }, | |
| 12162 | getPageByEl: function getPageByEl(navbarInnerEl) { | |
| 12163 | var $navbarInnerEl = $(navbarInnerEl); | |
| 12164 | if ($navbarInnerEl.hasClass('navbar')) { | |
| 12165 | $navbarInnerEl = $navbarInnerEl.find('.navbar-inner'); | |
| 12166 | if ($navbarInnerEl.length > 1) { return undefined; } | |
| 12167 | } | |
| 12168 | if ($navbarInnerEl.parents('.page').length) { | |
| 12169 | return $navbarInnerEl.parents('.page')[0]; | |
| 12170 | } | |
| 12171 | var pageEl; | |
| 12172 | $navbarInnerEl.parents('.view').find('.page').each(function (index, el) { | |
| 12173 | if (el && el.f7Page && el.f7Page.navbarEl && $navbarInnerEl[0] === el.f7Page.navbarEl) { | |
| 12174 | pageEl = el; | |
| 12175 | } | |
| 12176 | }); | |
| 12177 | return pageEl; | |
| 12178 | }, | |
| 12179 | ||
| 12180 | collapseLargeTitle: function collapseLargeTitle(navbarInnerEl) { | |
| 12181 | var app = this; | |
| 12182 | var $navbarInnerEl = $(navbarInnerEl); | |
| 12183 | if ($navbarInnerEl.hasClass('navbar')) { | |
| 12184 | $navbarInnerEl = $navbarInnerEl.find('.navbar-inner-large'); | |
| 12185 | if ($navbarInnerEl.length > 1) { | |
| 12186 | $navbarInnerEl = $(navbarInnerEl).find('.navbar-inner-large.navbar-current'); | |
| 12187 | } | |
| 12188 | if ($navbarInnerEl.length > 1 || !$navbarInnerEl.length) { | |
| 12189 | return; | |
| 12190 | } | |
| 12191 | } | |
| 12192 | var $pageEl = $(app.navbar.getPageByEl($navbarInnerEl)); | |
| 12193 | $navbarInnerEl.addClass('navbar-inner-large-collapsed'); | |
| 12194 | $pageEl.eq(0).addClass('page-with-navbar-large-collapsed').trigger('page:navbarlargecollapsed'); | |
| 5d51ea26 DC |
12195 | app.emit('pageNavbarLargeCollapsed', $pageEl[0]); |
| 12196 | var $navbarEl = $navbarInnerEl.parents('.navbar'); | |
| 12197 | if (app.theme === 'md' || app.theme === 'aurora') { | |
| 12198 | $navbarEl.addClass('navbar-large-collapsed'); | |
| 5309fbda | 12199 | } |
| 5d51ea26 DC |
12200 | $navbarEl.trigger('navbar:collapse'); |
| 12201 | app.emit('navbarCollapse', $navbarEl[0]); | |
| 5309fbda DC |
12202 | }, |
| 12203 | expandLargeTitle: function expandLargeTitle(navbarInnerEl) { | |
| 12204 | var app = this; | |
| 12205 | var $navbarInnerEl = $(navbarInnerEl); | |
| 12206 | if ($navbarInnerEl.hasClass('navbar')) { | |
| 12207 | $navbarInnerEl = $navbarInnerEl.find('.navbar-inner-large'); | |
| 12208 | if ($navbarInnerEl.length > 1) { | |
| 12209 | $navbarInnerEl = $(navbarInnerEl).find('.navbar-inner-large.navbar-current'); | |
| 12210 | } | |
| 12211 | if ($navbarInnerEl.length > 1 || !$navbarInnerEl.length) { | |
| 12212 | return; | |
| 12213 | } | |
| 12214 | } | |
| 12215 | var $pageEl = $(app.navbar.getPageByEl($navbarInnerEl)); | |
| 12216 | $navbarInnerEl.removeClass('navbar-inner-large-collapsed'); | |
| 12217 | $pageEl.eq(0).removeClass('page-with-navbar-large-collapsed').trigger('page:navbarlargeexpanded'); | |
| 5d51ea26 DC |
12218 | app.emit('pageNavbarLargeExpanded', $pageEl[0]); |
| 12219 | var $navbarEl = $navbarInnerEl.parents('.navbar'); | |
| 12220 | if (app.theme === 'md' || app.theme === 'aurora') { | |
| 12221 | $navbarEl.removeClass('navbar-large-collapsed'); | |
| 5309fbda | 12222 | } |
| 5d51ea26 DC |
12223 | $navbarEl.trigger('navbar:expand'); |
| 12224 | app.emit('navbarExpand', $navbarEl[0]); | |
| 5309fbda DC |
12225 | }, |
| 12226 | toggleLargeTitle: function toggleLargeTitle(navbarInnerEl) { | |
| 12227 | var app = this; | |
| 12228 | var $navbarInnerEl = $(navbarInnerEl); | |
| 12229 | if ($navbarInnerEl.hasClass('navbar')) { | |
| 12230 | $navbarInnerEl = $navbarInnerEl.find('.navbar-inner-large'); | |
| 12231 | if ($navbarInnerEl.length > 1) { | |
| 12232 | $navbarInnerEl = $(navbarInnerEl).find('.navbar-inner-large.navbar-current'); | |
| 12233 | } | |
| 12234 | if ($navbarInnerEl.length > 1 || !$navbarInnerEl.length) { | |
| 12235 | return; | |
| 12236 | } | |
| 12237 | } | |
| 12238 | if ($navbarInnerEl.hasClass('navbar-inner-large-collapsed')) { | |
| 12239 | app.navbar.expandLargeTitle($navbarInnerEl); | |
| 12240 | } else { | |
| 12241 | app.navbar.collapseLargeTitle($navbarInnerEl); | |
| 12242 | } | |
| 12243 | }, | |
| 12244 | initNavbarOnScroll: function initNavbarOnScroll(pageEl, navbarInnerEl, needHide, needCollapse) { | |
| 12245 | var app = this; | |
| 12246 | var $pageEl = $(pageEl); | |
| 12247 | var $navbarInnerEl = $(navbarInnerEl); | |
| 5d51ea26 | 12248 | var $navbarEl = app.theme === 'md' || app.theme === 'aurora' |
| 5309fbda DC |
12249 | ? $navbarInnerEl.parents('.navbar') |
| 12250 | : $(navbarInnerEl || app.navbar.getElByPage(pageEl)).closest('.navbar'); | |
| 12251 | var isLarge = $navbarInnerEl.find('.title-large').length || $navbarInnerEl.hasClass('.navbar-inner-large'); | |
| 12252 | var navbarHideHeight = 44; | |
| 12253 | var snapPageScrollToLargeTitle = app.params.navbar.snapPageScrollToLargeTitle; | |
| 12254 | ||
| 12255 | var previousScrollTop; | |
| 12256 | var currentScrollTop; | |
| 12257 | ||
| 12258 | var scrollHeight; | |
| 12259 | var offsetHeight; | |
| 12260 | var reachEnd; | |
| 12261 | var action; | |
| 12262 | var navbarHidden; | |
| 12263 | ||
| 12264 | var navbarCollapsed; | |
| 12265 | var navbarTitleLargeHeight; | |
| 12266 | if (needCollapse || (needHide && isLarge)) { | |
| 12267 | navbarTitleLargeHeight = $navbarInnerEl.css('--f7-navbar-large-title-height'); | |
| 12268 | if (navbarTitleLargeHeight && navbarTitleLargeHeight.indexOf('px') >= 0) { | |
| 12269 | navbarTitleLargeHeight = parseInt(navbarTitleLargeHeight, 10); | |
| 12270 | if (Number.isNaN(navbarTitleLargeHeight)) { | |
| 5d51ea26 DC |
12271 | if (app.theme === 'ios') { navbarTitleLargeHeight = 52; } |
| 12272 | else if (app.theme === 'md') { navbarTitleLargeHeight = 48; } | |
| 12273 | else if (app.theme === 'aurora') { navbarTitleLargeHeight = 38; } | |
| 5309fbda | 12274 | } |
| 5d51ea26 DC |
12275 | } else { // eslint-disable-next-line |
| 12276 | if (app.theme === 'ios') { navbarTitleLargeHeight = 52; } | |
| 12277 | else if (app.theme === 'md') { navbarTitleLargeHeight = 48; } | |
| 12278 | else if (app.theme === 'aurora') { navbarTitleLargeHeight = 38; } | |
| 5309fbda DC |
12279 | } |
| 12280 | } | |
| 12281 | if (needHide && isLarge) { | |
| 12282 | navbarHideHeight += navbarTitleLargeHeight; | |
| 12283 | } | |
| 12284 | ||
| 12285 | var scrollChanged; | |
| 12286 | var scrollContent; | |
| 12287 | var scrollTimeoutId; | |
| 12288 | var touchEndTimeoutId; | |
| 12289 | var touchSnapTimeout = 70; | |
| 12290 | var desktopSnapTimeout = 300; | |
| 12291 | ||
| 12292 | function snapLargeNavbar() { | |
| 12293 | var inSearchbarExpanded = $navbarInnerEl.hasClass('with-searchbar-expandable-enabled'); | |
| 12294 | if (inSearchbarExpanded) { return; } | |
| 12295 | if (!scrollContent || currentScrollTop < 0) { return; } | |
| 12296 | if (currentScrollTop >= navbarTitleLargeHeight / 2 && currentScrollTop < navbarTitleLargeHeight) { | |
| 12297 | $(scrollContent).scrollTop(navbarTitleLargeHeight, 100); | |
| 12298 | } else if (currentScrollTop < navbarTitleLargeHeight) { | |
| 12299 | $(scrollContent).scrollTop(0, 200); | |
| 12300 | } | |
| 12301 | } | |
| 12302 | ||
| 12303 | function handleLargeNavbarCollapse() { | |
| 12304 | var collapseProgress = Math.min(Math.max((currentScrollTop / navbarTitleLargeHeight), 0), 1); | |
| 12305 | var inSearchbarExpanded = $navbarInnerEl.hasClass('with-searchbar-expandable-enabled'); | |
| 12306 | if (inSearchbarExpanded) { return; } | |
| 12307 | navbarCollapsed = $navbarInnerEl.hasClass('navbar-inner-large-collapsed'); | |
| 12308 | if (collapseProgress === 0 && navbarCollapsed) { | |
| 12309 | app.navbar.expandLargeTitle($navbarInnerEl[0]); | |
| 12310 | $navbarInnerEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| 12311 | $pageEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| 12312 | $navbarInnerEl[0].style.overflow = ''; | |
| 5d51ea26 | 12313 | if (app.theme === 'md' || app.theme === 'aurora') { |
| 5309fbda DC |
12314 | $navbarEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); |
| 12315 | } | |
| 12316 | } else if (collapseProgress === 1 && !navbarCollapsed) { | |
| 12317 | app.navbar.collapseLargeTitle($navbarInnerEl[0]); | |
| 12318 | $navbarInnerEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| 12319 | $navbarInnerEl[0].style.overflow = ''; | |
| 12320 | $pageEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| 5d51ea26 | 12321 | if (app.theme === 'md' || app.theme === 'aurora') { |
| 5309fbda DC |
12322 | $navbarEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); |
| 12323 | } | |
| 12324 | } else if ((collapseProgress === 1 && navbarCollapsed) || (collapseProgress === 0 && !navbarCollapsed)) { | |
| 12325 | $navbarInnerEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| 12326 | $navbarInnerEl[0].style.overflow = ''; | |
| 12327 | $pageEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| 5d51ea26 | 12328 | if (app.theme === 'md' || app.theme === 'aurora') { |
| 5309fbda DC |
12329 | $navbarEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); |
| 12330 | } | |
| 12331 | } else { | |
| 12332 | $navbarInnerEl[0].style.setProperty('--f7-navbar-large-collapse-progress', collapseProgress); | |
| 12333 | $navbarInnerEl[0].style.overflow = 'visible'; | |
| 12334 | $pageEl[0].style.setProperty('--f7-navbar-large-collapse-progress', collapseProgress); | |
| 5d51ea26 | 12335 | if (app.theme === 'md' || app.theme === 'aurora') { |
| 5309fbda DC |
12336 | $navbarEl[0].style.setProperty('--f7-navbar-large-collapse-progress', collapseProgress); |
| 12337 | } | |
| 12338 | } | |
| 12339 | ||
| 12340 | if (snapPageScrollToLargeTitle) { | |
| 12341 | if (!Support.touch) { | |
| 12342 | clearTimeout(scrollTimeoutId); | |
| 12343 | scrollTimeoutId = setTimeout(function () { | |
| 12344 | snapLargeNavbar(); | |
| 12345 | }, desktopSnapTimeout); | |
| 12346 | } else if (touchEndTimeoutId) { | |
| 12347 | clearTimeout(touchEndTimeoutId); | |
| 12348 | touchEndTimeoutId = null; | |
| 12349 | touchEndTimeoutId = setTimeout(function () { | |
| 12350 | snapLargeNavbar(); | |
| 12351 | clearTimeout(touchEndTimeoutId); | |
| 12352 | touchEndTimeoutId = null; | |
| 12353 | }, touchSnapTimeout); | |
| 12354 | } | |
| 12355 | } | |
| 12356 | } | |
| 12357 | ||
| 12358 | function handleTitleHideShow() { | |
| 12359 | scrollHeight = scrollContent.scrollHeight; | |
| 12360 | offsetHeight = scrollContent.offsetHeight; | |
| 12361 | reachEnd = currentScrollTop + offsetHeight >= scrollHeight; | |
| 12362 | navbarHidden = $navbarEl.hasClass('navbar-hidden'); | |
| 12363 | ||
| 12364 | if (reachEnd) { | |
| 12365 | if (app.params.navbar.showOnPageScrollEnd) { | |
| 12366 | action = 'show'; | |
| 12367 | } | |
| 12368 | } else if (previousScrollTop > currentScrollTop) { | |
| 12369 | if (app.params.navbar.showOnPageScrollTop || currentScrollTop <= navbarHideHeight) { | |
| 12370 | action = 'show'; | |
| 12371 | } else { | |
| 12372 | action = 'hide'; | |
| 12373 | } | |
| 12374 | } else if (currentScrollTop > navbarHideHeight) { | |
| 12375 | action = 'hide'; | |
| 12376 | } else { | |
| 12377 | action = 'show'; | |
| 12378 | } | |
| 12379 | ||
| 12380 | if (action === 'show' && navbarHidden) { | |
| 12381 | app.navbar.show($navbarEl); | |
| 12382 | navbarHidden = false; | |
| 12383 | } else if (action === 'hide' && !navbarHidden) { | |
| 12384 | app.navbar.hide($navbarEl); | |
| 12385 | navbarHidden = true; | |
| 12386 | } | |
| 12387 | previousScrollTop = currentScrollTop; | |
| 12388 | } | |
| 12389 | ||
| 12390 | function handleScroll() { | |
| 12391 | scrollContent = this; | |
| 12392 | currentScrollTop = scrollContent.scrollTop; | |
| 12393 | scrollChanged = currentScrollTop; | |
| 12394 | ||
| 12395 | if (needCollapse) { | |
| 12396 | handleLargeNavbarCollapse(); | |
| 12397 | } | |
| 12398 | if ($pageEl.hasClass('page-previous')) { return; } | |
| 12399 | if (needHide) { | |
| 12400 | handleTitleHideShow(); | |
| 12401 | } | |
| 12402 | } | |
| 12403 | function handeTouchStart() { | |
| 12404 | scrollChanged = false; | |
| 12405 | } | |
| 12406 | function handleTouchEnd() { | |
| 12407 | clearTimeout(touchEndTimeoutId); | |
| 12408 | touchEndTimeoutId = null; | |
| 12409 | touchEndTimeoutId = setTimeout(function () { | |
| 12410 | if (scrollChanged !== false) { | |
| 12411 | snapLargeNavbar(); | |
| 12412 | clearTimeout(touchEndTimeoutId); | |
| 12413 | touchEndTimeoutId = null; | |
| 12414 | } | |
| 12415 | }, touchSnapTimeout); | |
| 12416 | } | |
| 12417 | $pageEl.on('scroll', '.page-content', handleScroll, true); | |
| 12418 | if (Support.touch && needCollapse && snapPageScrollToLargeTitle) { | |
| 12419 | app.on('touchstart:passive', handeTouchStart); | |
| 12420 | app.on('touchend:passive', handleTouchEnd); | |
| 12421 | } | |
| 12422 | if (needCollapse) { | |
| 12423 | $pageEl.find('.page-content').each(function (pageContentIndex, pageContentEl) { | |
| 12424 | if (pageContentEl.scrollTop > 0) { handleScroll.call(pageContentEl); } | |
| 12425 | }); | |
| 12426 | } | |
| 12427 | $pageEl[0].f7DetachNavbarScrollHandlers = function f7DetachNavbarScrollHandlers() { | |
| 12428 | delete $pageEl[0].f7DetachNavbarScrollHandlers; | |
| 12429 | $pageEl.off('scroll', '.page-content', handleScroll, true); | |
| 12430 | if (Support.touch && needCollapse && snapPageScrollToLargeTitle) { | |
| 12431 | app.off('touchstart:passive', handeTouchStart); | |
| 12432 | app.off('touchend:passive', handleTouchEnd); | |
| 12433 | } | |
| 12434 | }; | |
| 12435 | }, | |
| 12436 | }; | |
| 12437 | var Navbar$1 = { | |
| 12438 | name: 'navbar', | |
| 12439 | create: function create() { | |
| 12440 | var app = this; | |
| 12441 | Utils.extend(app, { | |
| 12442 | navbar: { | |
| 12443 | size: Navbar.size.bind(app), | |
| 12444 | hide: Navbar.hide.bind(app), | |
| 12445 | show: Navbar.show.bind(app), | |
| 12446 | getElByPage: Navbar.getElByPage.bind(app), | |
| 12447 | getPageByEl: Navbar.getPageByEl.bind(app), | |
| 12448 | collapseLargeTitle: Navbar.collapseLargeTitle.bind(app), | |
| 12449 | expandLargeTitle: Navbar.expandLargeTitle.bind(app), | |
| 12450 | toggleLargeTitle: Navbar.toggleLargeTitle.bind(app), | |
| 12451 | initNavbarOnScroll: Navbar.initNavbarOnScroll.bind(app), | |
| 12452 | }, | |
| 12453 | }); | |
| 12454 | }, | |
| 12455 | params: { | |
| 12456 | navbar: { | |
| 12457 | scrollTopOnTitleClick: true, | |
| 12458 | iosCenterTitle: true, | |
| 12459 | mdCenterTitle: false, | |
| 5d51ea26 | 12460 | auroraCenterTitle: true, |
| 5309fbda DC |
12461 | hideOnPageScroll: false, |
| 12462 | showOnPageScrollEnd: true, | |
| 12463 | showOnPageScrollTop: true, | |
| 12464 | collapseLargeTitleOnScroll: true, | |
| 12465 | snapPageScrollToLargeTitle: true, | |
| 12466 | }, | |
| 12467 | }, | |
| 12468 | on: { | |
| 5d51ea26 | 12469 | 'panelBreakpoint panelResize resize viewMasterDetailBreakpoint': function onResize() { |
| 5309fbda DC |
12470 | var app = this; |
| 12471 | $('.navbar').each(function (index, navbarEl) { | |
| 12472 | app.navbar.size(navbarEl); | |
| 12473 | }); | |
| 12474 | }, | |
| 12475 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 12476 | if (page.$el[0].f7DetachNavbarScrollHandlers) { | |
| 12477 | page.$el[0].f7DetachNavbarScrollHandlers(); | |
| 12478 | } | |
| 12479 | }, | |
| 12480 | pageBeforeIn: function pageBeforeIn(page) { | |
| 12481 | var app = this; | |
| 12482 | if (app.theme !== 'ios') { return; } | |
| 12483 | var $navbarEl; | |
| 12484 | var view = page.$el.parents('.view')[0].f7View; | |
| 12485 | var navbarInnerEl = app.navbar.getElByPage(page); | |
| 12486 | if (!navbarInnerEl) { | |
| 12487 | $navbarEl = page.$el.parents('.view').children('.navbar'); | |
| 12488 | } else { | |
| 12489 | $navbarEl = $(navbarInnerEl).parents('.navbar'); | |
| 12490 | } | |
| 12491 | if (page.$el.hasClass('no-navbar') || (view.router.dynamicNavbar && !navbarInnerEl)) { | |
| 12492 | var animate = !!(page.pageFrom && page.router.history.length > 0); | |
| 12493 | app.navbar.hide($navbarEl, animate); | |
| 12494 | } else { | |
| 12495 | app.navbar.show($navbarEl); | |
| 12496 | } | |
| 12497 | }, | |
| 12498 | pageReinit: function pageReinit(page) { | |
| 12499 | var app = this; | |
| 12500 | var $navbarInnerEl = $(app.navbar.getElByPage(page)); | |
| 12501 | if (!$navbarInnerEl || $navbarInnerEl.length === 0) { return; } | |
| 12502 | app.navbar.size($navbarInnerEl); | |
| 12503 | }, | |
| 12504 | pageInit: function pageInit(page) { | |
| 12505 | var app = this; | |
| 12506 | var $navbarInnerEl = $(app.navbar.getElByPage(page)); | |
| 12507 | if (!$navbarInnerEl || $navbarInnerEl.length === 0) { return; } | |
| 12508 | ||
| 12509 | // Size | |
| 12510 | app.navbar.size($navbarInnerEl); | |
| 12511 | ||
| 12512 | // Need Collapse On Scroll | |
| 12513 | var needCollapseOnScrollHandler; | |
| 12514 | if ($navbarInnerEl.children('.title-large').length > 0) { | |
| 12515 | $navbarInnerEl.addClass('navbar-inner-large'); | |
| 12516 | } | |
| 12517 | if ($navbarInnerEl.hasClass('navbar-inner-large')) { | |
| 12518 | if (app.params.navbar.collapseLargeTitleOnScroll) { needCollapseOnScrollHandler = true; } | |
| 5d51ea26 | 12519 | if (app.theme === 'md' || app.theme === 'aurora') { |
| 5309fbda DC |
12520 | $navbarInnerEl.parents('.navbar').addClass('navbar-large'); |
| 12521 | } | |
| 12522 | page.$el.addClass('page-with-navbar-large'); | |
| 12523 | } | |
| 12524 | ||
| 12525 | // Need Hide On Scroll | |
| 12526 | var needHideOnScrollHandler; | |
| 12527 | if ( | |
| 12528 | app.params.navbar.hideOnPageScroll | |
| 12529 | || page.$el.find('.hide-navbar-on-scroll').length | |
| 12530 | || page.$el.hasClass('hide-navbar-on-scroll') | |
| 12531 | || page.$el.find('.hide-bars-on-scroll').length | |
| 12532 | || page.$el.hasClass('hide-bars-on-scroll') | |
| 12533 | ) { | |
| 12534 | if ( | |
| 12535 | page.$el.find('.keep-navbar-on-scroll').length | |
| 12536 | || page.$el.hasClass('keep-navbar-on-scroll') | |
| 12537 | || page.$el.find('.keep-bars-on-scroll').length | |
| 12538 | || page.$el.hasClass('keep-bars-on-scroll') | |
| 12539 | ) { | |
| 12540 | needHideOnScrollHandler = false; | |
| 12541 | } else { | |
| 12542 | needHideOnScrollHandler = true; | |
| 12543 | } | |
| 12544 | } | |
| 12545 | ||
| 12546 | if (needCollapseOnScrollHandler || needHideOnScrollHandler) { | |
| 12547 | app.navbar.initNavbarOnScroll(page.el, $navbarInnerEl[0], needHideOnScrollHandler, needCollapseOnScrollHandler); | |
| 12548 | } | |
| 12549 | }, | |
| 12550 | modalOpen: function modalOpen(modal) { | |
| 12551 | var app = this; | |
| 5d51ea26 | 12552 | if (!app.params.navbar[((app.theme) + "CenterTitle")]) { |
| 5309fbda DC |
12553 | return; |
| 12554 | } | |
| 12555 | modal.$el.find('.navbar:not(.navbar-previous):not(.stacked)').each(function (index, navbarEl) { | |
| 12556 | app.navbar.size(navbarEl); | |
| 12557 | }); | |
| 12558 | }, | |
| 12559 | panelOpen: function panelOpen(panel) { | |
| 12560 | var app = this; | |
| 5d51ea26 | 12561 | if (!app.params.navbar[((app.theme) + "CenterTitle")]) { |
| 5309fbda DC |
12562 | return; |
| 12563 | } | |
| 12564 | panel.$el.find('.navbar:not(.navbar-previous):not(.stacked)').each(function (index, navbarEl) { | |
| 12565 | app.navbar.size(navbarEl); | |
| 12566 | }); | |
| 12567 | }, | |
| 12568 | panelSwipeOpen: function panelSwipeOpen(panel) { | |
| 12569 | var app = this; | |
| 5d51ea26 | 12570 | if (!app.params.navbar[((app.theme) + "CenterTitle")]) { |
| 5309fbda DC |
12571 | return; |
| 12572 | } | |
| 12573 | panel.$el.find('.navbar:not(.navbar-previous):not(.stacked)').each(function (index, navbarEl) { | |
| 12574 | app.navbar.size(navbarEl); | |
| 12575 | }); | |
| 12576 | }, | |
| 12577 | tabShow: function tabShow(tabEl) { | |
| 12578 | var app = this; | |
| 5d51ea26 | 12579 | if (!app.params.navbar[((app.theme) + "CenterTitle")]) { |
| 5309fbda DC |
12580 | return; |
| 12581 | } | |
| 12582 | $(tabEl).find('.navbar:not(.navbar-previous):not(.stacked)').each(function (index, navbarEl) { | |
| 12583 | app.navbar.size(navbarEl); | |
| 12584 | }); | |
| 12585 | }, | |
| 12586 | }, | |
| 12587 | clicks: { | |
| 12588 | '.navbar .title': function onTitleClick($clickedEl) { | |
| 12589 | var app = this; | |
| 12590 | if (!app.params.navbar.scrollTopOnTitleClick) { return; } | |
| 12591 | if ($clickedEl.closest('a').length > 0) { | |
| 12592 | return; | |
| 12593 | } | |
| 12594 | var pageContent; | |
| 12595 | // Find active page | |
| 12596 | var navbar = $clickedEl.parents('.navbar'); | |
| 12597 | ||
| 12598 | // Static Layout | |
| 12599 | pageContent = navbar.parents('.page-content'); | |
| 12600 | ||
| 12601 | if (pageContent.length === 0) { | |
| 12602 | // Fixed Layout | |
| 12603 | if (navbar.parents('.page').length > 0) { | |
| 12604 | pageContent = navbar.parents('.page').find('.page-content'); | |
| 12605 | } | |
| 12606 | // Through Layout | |
| 12607 | if (pageContent.length === 0) { | |
| 12608 | if (navbar.nextAll('.page-current:not(.stacked)').length > 0) { | |
| 12609 | pageContent = navbar.nextAll('.page-current:not(.stacked)').find('.page-content'); | |
| 12610 | } | |
| 12611 | } | |
| 12612 | } | |
| 12613 | if (pageContent && pageContent.length > 0) { | |
| 12614 | // Check for tab | |
| 12615 | if (pageContent.hasClass('tab')) { | |
| 12616 | pageContent = pageContent.parent('.tabs').children('.page-content.tab-active'); | |
| 12617 | } | |
| 12618 | if (pageContent.length > 0) { pageContent.scrollTop(0, 300); } | |
| 12619 | } | |
| 12620 | }, | |
| 12621 | }, | |
| 12622 | vnode: { | |
| 12623 | 'navbar-inner': { | |
| 12624 | postpatch: function postpatch(vnode) { | |
| 12625 | var app = this; | |
| 5d51ea26 | 12626 | if (!app.params.navbar[((app.theme) + "CenterTitle")]) { |
| 5309fbda DC |
12627 | return; |
| 12628 | } | |
| 12629 | app.navbar.size(vnode.elm); | |
| 12630 | }, | |
| 12631 | }, | |
| 12632 | }, | |
| 12633 | }; | |
| 12634 | ||
| 12635 | var Toolbar = { | |
| 12636 | setHighlight: function setHighlight(tabbarEl) { | |
| 12637 | var app = this; | |
| 12638 | if (app.theme !== 'md') { return; } | |
| 12639 | ||
| 12640 | var $tabbarEl = $(tabbarEl); | |
| 12641 | ||
| 12642 | if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-labels'))) { return; } | |
| 12643 | ||
| 12644 | var $highlightEl = $tabbarEl.find('.tab-link-highlight'); | |
| 12645 | var tabLinksCount = $tabbarEl.find('.tab-link').length; | |
| 12646 | if (tabLinksCount === 0) { | |
| 12647 | $highlightEl.remove(); | |
| 12648 | return; | |
| 12649 | } | |
| 12650 | ||
| 12651 | if ($highlightEl.length === 0) { | |
| 12652 | $tabbarEl.children('.toolbar-inner').append('<span class="tab-link-highlight"></span>'); | |
| 12653 | $highlightEl = $tabbarEl.find('.tab-link-highlight'); | |
| 12654 | } else if ($highlightEl.next().length) { | |
| 12655 | $tabbarEl.children('.toolbar-inner').append($highlightEl); | |
| 12656 | } | |
| 12657 | ||
| 12658 | var $activeLink = $tabbarEl.find('.tab-link-active'); | |
| 12659 | var highlightWidth; | |
| 12660 | var highlightTranslate; | |
| 12661 | ||
| 12662 | if ($tabbarEl.hasClass('tabbar-scrollable') && $activeLink && $activeLink[0]) { | |
| 12663 | highlightWidth = ($activeLink[0].offsetWidth) + "px"; | |
| 12664 | highlightTranslate = ($activeLink[0].offsetLeft) + "px"; | |
| 12665 | } else { | |
| 12666 | var activeIndex = $activeLink.index(); | |
| 12667 | highlightWidth = (100 / tabLinksCount) + "%"; | |
| 12668 | highlightTranslate = ((app.rtl ? -activeIndex : activeIndex) * 100) + "%"; | |
| 12669 | } | |
| 12670 | ||
| 12671 | Utils.nextFrame(function () { | |
| 12672 | $highlightEl | |
| 12673 | .css('width', highlightWidth) | |
| 12674 | .transform(("translate3d(" + highlightTranslate + ",0,0)")); | |
| 12675 | }); | |
| 12676 | }, | |
| 12677 | init: function init(tabbarEl) { | |
| 12678 | var app = this; | |
| 12679 | app.toolbar.setHighlight(tabbarEl); | |
| 12680 | }, | |
| 12681 | hide: function hide(el, animate) { | |
| 12682 | if ( animate === void 0 ) animate = true; | |
| 12683 | ||
| 12684 | var $el = $(el); | |
| 12685 | if ($el.hasClass('toolbar-hidden')) { return; } | |
| 12686 | var className = "toolbar-hidden" + (animate ? ' toolbar-transitioning' : ''); | |
| 12687 | $el.transitionEnd(function () { | |
| 12688 | $el.removeClass('toolbar-transitioning'); | |
| 12689 | }); | |
| 12690 | $el.addClass(className); | |
| 12691 | }, | |
| 12692 | show: function show(el, animate) { | |
| 12693 | if ( animate === void 0 ) animate = true; | |
| 12694 | ||
| 12695 | var $el = $(el); | |
| 12696 | if (!$el.hasClass('toolbar-hidden')) { return; } | |
| 12697 | if (animate) { | |
| 12698 | $el.addClass('toolbar-transitioning'); | |
| 12699 | $el.transitionEnd(function () { | |
| 12700 | $el.removeClass('toolbar-transitioning'); | |
| 12701 | }); | |
| 12702 | } | |
| 12703 | $el.removeClass('toolbar-hidden'); | |
| 12704 | }, | |
| 12705 | initHideToolbarOnScroll: function initHideToolbarOnScroll(pageEl) { | |
| 12706 | var app = this; | |
| 12707 | var $pageEl = $(pageEl); | |
| 12708 | var $toolbarEl = $pageEl.parents('.view').children('.toolbar'); | |
| 12709 | if ($toolbarEl.length === 0) { | |
| 12710 | $toolbarEl = $pageEl.find('.toolbar'); | |
| 12711 | } | |
| 12712 | if ($toolbarEl.length === 0) { | |
| 12713 | $toolbarEl = $pageEl.parents('.views').children('.tabbar, .tabbar-labels'); | |
| 12714 | } | |
| 12715 | if ($toolbarEl.length === 0) { | |
| 12716 | return; | |
| 12717 | } | |
| 12718 | ||
| 12719 | var previousScrollTop; | |
| 12720 | var currentScrollTop; | |
| 12721 | ||
| 12722 | var scrollHeight; | |
| 12723 | var offsetHeight; | |
| 12724 | var reachEnd; | |
| 12725 | var action; | |
| 12726 | var toolbarHidden; | |
| 12727 | function handleScroll() { | |
| 12728 | var scrollContent = this; | |
| 12729 | if ($pageEl.hasClass('page-previous')) { return; } | |
| 12730 | currentScrollTop = scrollContent.scrollTop; | |
| 12731 | scrollHeight = scrollContent.scrollHeight; | |
| 12732 | offsetHeight = scrollContent.offsetHeight; | |
| 12733 | reachEnd = currentScrollTop + offsetHeight >= scrollHeight; | |
| 12734 | toolbarHidden = $toolbarEl.hasClass('toolbar-hidden'); | |
| 12735 | ||
| 12736 | if (reachEnd) { | |
| 12737 | if (app.params.toolbar.showOnPageScrollEnd) { | |
| 12738 | action = 'show'; | |
| 12739 | } | |
| 12740 | } else if (previousScrollTop > currentScrollTop) { | |
| 12741 | if (app.params.toolbar.showOnPageScrollTop || currentScrollTop <= 44) { | |
| 12742 | action = 'show'; | |
| 12743 | } else { | |
| 12744 | action = 'hide'; | |
| 12745 | } | |
| 12746 | } else if (currentScrollTop > 44) { | |
| 12747 | action = 'hide'; | |
| 12748 | } else { | |
| 12749 | action = 'show'; | |
| 12750 | } | |
| 12751 | ||
| 12752 | if (action === 'show' && toolbarHidden) { | |
| 12753 | app.toolbar.show($toolbarEl); | |
| 12754 | toolbarHidden = false; | |
| 12755 | } else if (action === 'hide' && !toolbarHidden) { | |
| 12756 | app.toolbar.hide($toolbarEl); | |
| 12757 | toolbarHidden = true; | |
| 12758 | } | |
| 12759 | ||
| 12760 | previousScrollTop = currentScrollTop; | |
| 12761 | } | |
| 12762 | $pageEl.on('scroll', '.page-content', handleScroll, true); | |
| 12763 | $pageEl[0].f7ScrollToolbarHandler = handleScroll; | |
| 12764 | }, | |
| 12765 | }; | |
| 12766 | var Toolbar$1 = { | |
| 12767 | name: 'toolbar', | |
| 12768 | create: function create() { | |
| 12769 | var app = this; | |
| 12770 | Utils.extend(app, { | |
| 12771 | toolbar: { | |
| 12772 | hide: Toolbar.hide.bind(app), | |
| 12773 | show: Toolbar.show.bind(app), | |
| 12774 | setHighlight: Toolbar.setHighlight.bind(app), | |
| 12775 | initHideToolbarOnScroll: Toolbar.initHideToolbarOnScroll.bind(app), | |
| 12776 | init: Toolbar.init.bind(app), | |
| 12777 | }, | |
| 12778 | }); | |
| 12779 | }, | |
| 12780 | params: { | |
| 12781 | toolbar: { | |
| 12782 | hideOnPageScroll: false, | |
| 12783 | showOnPageScrollEnd: true, | |
| 12784 | showOnPageScrollTop: true, | |
| 12785 | }, | |
| 12786 | }, | |
| 12787 | on: { | |
| 12788 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 12789 | if (page.$el[0].f7ScrollToolbarHandler) { | |
| 12790 | page.$el.off('scroll', '.page-content', page.$el[0].f7ScrollToolbarHandler, true); | |
| 12791 | } | |
| 12792 | }, | |
| 12793 | pageBeforeIn: function pageBeforeIn(page) { | |
| 12794 | var app = this; | |
| 12795 | var $toolbarEl = page.$el.parents('.view').children('.toolbar'); | |
| 12796 | if ($toolbarEl.length === 0) { | |
| 12797 | $toolbarEl = page.$el.parents('.views').children('.tabbar, .tabbar-labels'); | |
| 12798 | } | |
| 12799 | if ($toolbarEl.length === 0) { | |
| 12800 | $toolbarEl = page.$el.find('.toolbar'); | |
| 12801 | } | |
| 12802 | if ($toolbarEl.length === 0) { | |
| 12803 | return; | |
| 12804 | } | |
| 12805 | if (page.$el.hasClass('no-toolbar')) { | |
| 12806 | app.toolbar.hide($toolbarEl); | |
| 12807 | } else { | |
| 12808 | app.toolbar.show($toolbarEl); | |
| 12809 | } | |
| 12810 | }, | |
| 12811 | pageInit: function pageInit(page) { | |
| 12812 | var app = this; | |
| 12813 | page.$el.find('.tabbar, .tabbar-labels').each(function (index, tabbarEl) { | |
| 12814 | app.toolbar.init(tabbarEl); | |
| 12815 | }); | |
| 12816 | if ( | |
| 12817 | app.params.toolbar.hideOnPageScroll | |
| 12818 | || page.$el.find('.hide-toolbar-on-scroll').length | |
| 12819 | || page.$el.hasClass('hide-toolbar-on-scroll') | |
| 12820 | || page.$el.find('.hide-bars-on-scroll').length | |
| 12821 | || page.$el.hasClass('hide-bars-on-scroll') | |
| 12822 | ) { | |
| 12823 | if ( | |
| 12824 | page.$el.find('.keep-toolbar-on-scroll').length | |
| 12825 | || page.$el.hasClass('keep-toolbar-on-scroll') | |
| 12826 | || page.$el.find('.keep-bars-on-scroll').length | |
| 12827 | || page.$el.hasClass('keep-bars-on-scroll') | |
| 12828 | ) { | |
| 12829 | return; | |
| 12830 | } | |
| 12831 | app.toolbar.initHideToolbarOnScroll(page.el); | |
| 12832 | } | |
| 12833 | }, | |
| 12834 | init: function init() { | |
| 12835 | var app = this; | |
| 12836 | app.root.find('.tabbar, .tabbar-labels').each(function (index, tabbarEl) { | |
| 12837 | app.toolbar.init(tabbarEl); | |
| 12838 | }); | |
| 12839 | }, | |
| 12840 | }, | |
| 12841 | }; | |
| 12842 | ||
| 12843 | var Subnavbar = { | |
| 12844 | name: 'subnavbar', | |
| 12845 | on: { | |
| 12846 | pageInit: function pageInit(page) { | |
| 12847 | if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar').length) { | |
| 12848 | page.$el.addClass('page-with-subnavbar'); | |
| 12849 | } | |
| 12850 | if (page.$el.find('.subnavbar').length) { | |
| 12851 | page.$el.addClass('page-with-subnavbar'); | |
| 12852 | } | |
| 12853 | }, | |
| 12854 | }, | |
| 12855 | }; | |
| 12856 | ||
| 12857 | var TouchRipple = function TouchRipple($el, x, y) { | |
| 12858 | var ripple = this; | |
| 12859 | if (!$el) { return undefined; } | |
| 12860 | var box = $el[0].getBoundingClientRect(); | |
| 12861 | var center = { | |
| 12862 | x: x - box.left, | |
| 12863 | y: y - box.top, | |
| 12864 | }; | |
| 12865 | var width = box.width; | |
| 12866 | var height = box.height; | |
| 12867 | var diameter = Math.max((Math.pow( ((Math.pow( height, 2 )) + (Math.pow( width, 2 ))), 0.5 )), 48); | |
| 12868 | ||
| 12869 | ripple.$rippleWaveEl = $(("<div class=\"ripple-wave\" style=\"width: " + diameter + "px; height: " + diameter + "px; margin-top:-" + (diameter / 2) + "px; margin-left:-" + (diameter / 2) + "px; left:" + (center.x) + "px; top:" + (center.y) + "px;\"></div>")); | |
| 12870 | ||
| 12871 | $el.prepend(ripple.$rippleWaveEl); | |
| 12872 | ||
| 5309fbda DC |
12873 | ripple.rippleTransform = "translate3d(" + (-center.x + (width / 2)) + "px, " + (-center.y + (height / 2)) + "px, 0) scale(1)"; |
| 12874 | ||
| 12875 | Utils.nextFrame(function () { | |
| 12876 | if (!ripple || !ripple.$rippleWaveEl) { return; } | |
| 12877 | ripple.$rippleWaveEl.transform(ripple.rippleTransform); | |
| 12878 | }); | |
| 12879 | ||
| 12880 | return ripple; | |
| 12881 | }; | |
| 12882 | ||
| 5d51ea26 | 12883 | TouchRipple.prototype.destroy = function destroy () { |
| 5309fbda DC |
12884 | var ripple = this; |
| 12885 | if (ripple.$rippleWaveEl) { | |
| 12886 | ripple.$rippleWaveEl.remove(); | |
| 12887 | } | |
| 12888 | Object.keys(ripple).forEach(function (key) { | |
| 12889 | ripple[key] = null; | |
| 12890 | delete ripple[key]; | |
| 12891 | }); | |
| 12892 | ripple = null; | |
| 12893 | }; | |
| 12894 | ||
| 12895 | TouchRipple.prototype.remove = function remove () { | |
| 12896 | var ripple = this; | |
| 12897 | if (ripple.removing) { return; } | |
| 12898 | var $rippleWaveEl = this.$rippleWaveEl; | |
| 12899 | var rippleTransform = this.rippleTransform; | |
| 12900 | var removeTimeout = Utils.nextTick(function () { | |
| 5d51ea26 | 12901 | ripple.destroy(); |
| 5309fbda DC |
12902 | }, 400); |
| 12903 | ripple.removing = true; | |
| 12904 | $rippleWaveEl | |
| 12905 | .addClass('ripple-wave-fill') | |
| 12906 | .transform(rippleTransform.replace('scale(1)', 'scale(1.01)')) | |
| 12907 | .transitionEnd(function () { | |
| 12908 | clearTimeout(removeTimeout); | |
| 12909 | Utils.nextFrame(function () { | |
| 12910 | $rippleWaveEl | |
| 12911 | .addClass('ripple-wave-out') | |
| 12912 | .transform(rippleTransform.replace('scale(1)', 'scale(1.01)')); | |
| 12913 | ||
| 12914 | removeTimeout = Utils.nextTick(function () { | |
| 5d51ea26 | 12915 | ripple.destroy(); |
| 5309fbda DC |
12916 | }, 700); |
| 12917 | ||
| 12918 | $rippleWaveEl.transitionEnd(function () { | |
| 12919 | clearTimeout(removeTimeout); | |
| 5d51ea26 | 12920 | ripple.destroy(); |
| 5309fbda DC |
12921 | }); |
| 12922 | }); | |
| 12923 | }); | |
| 12924 | }; | |
| 12925 | ||
| 12926 | var TouchRipple$1 = { | |
| 12927 | name: 'touch-ripple', | |
| 12928 | static: { | |
| 12929 | TouchRipple: TouchRipple, | |
| 12930 | }, | |
| 12931 | create: function create() { | |
| 12932 | var app = this; | |
| 12933 | app.touchRipple = { | |
| 12934 | create: function create() { | |
| 12935 | var args = [], len = arguments.length; | |
| 12936 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 12937 | ||
| 12938 | return new (Function.prototype.bind.apply( TouchRipple, [ null ].concat( args) )); | |
| 12939 | }, | |
| 12940 | }; | |
| 12941 | }, | |
| 12942 | }; | |
| 12943 | ||
| 12944 | var openedModals = []; | |
| 12945 | var dialogsQueue = []; | |
| 12946 | function clearDialogsQueue() { | |
| 12947 | if (dialogsQueue.length === 0) { return; } | |
| 12948 | var dialog = dialogsQueue.shift(); | |
| 12949 | dialog.open(); | |
| 12950 | } | |
| 5d51ea26 | 12951 | var Modal = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda | 12952 | function Modal(app, params) { |
| 5d51ea26 | 12953 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
12954 | |
| 12955 | var modal = this; | |
| 12956 | ||
| 12957 | var defaults = {}; | |
| 12958 | ||
| 12959 | // Extend defaults with modules params | |
| 12960 | modal.useModulesParams(defaults); | |
| 12961 | ||
| 12962 | modal.params = Utils.extend(defaults, params); | |
| 12963 | modal.opened = false; | |
| 12964 | ||
| 12965 | // Install Modules | |
| 12966 | modal.useModules(); | |
| 12967 | ||
| 12968 | return this; | |
| 12969 | } | |
| 12970 | ||
| 5d51ea26 DC |
12971 | if ( Framework7Class ) Modal.__proto__ = Framework7Class; |
| 12972 | Modal.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
12973 | Modal.prototype.constructor = Modal; |
| 12974 | ||
| 12975 | Modal.prototype.onOpen = function onOpen () { | |
| 12976 | var modal = this; | |
| 12977 | modal.opened = true; | |
| 12978 | openedModals.push(modal); | |
| 12979 | $('html').addClass(("with-modal-" + (modal.type.toLowerCase()))); | |
| 12980 | modal.$el.trigger(("modal:open " + (modal.type.toLowerCase()) + ":open"), modal); | |
| 12981 | modal.emit(("local::open modalOpen " + (modal.type) + "Open"), modal); | |
| 12982 | }; | |
| 12983 | ||
| 12984 | Modal.prototype.onOpened = function onOpened () { | |
| 12985 | var modal = this; | |
| 12986 | modal.$el.trigger(("modal:opened " + (modal.type.toLowerCase()) + ":opened"), modal); | |
| 12987 | modal.emit(("local::opened modalOpened " + (modal.type) + "Opened"), modal); | |
| 12988 | }; | |
| 12989 | ||
| 12990 | Modal.prototype.onClose = function onClose () { | |
| 12991 | var modal = this; | |
| 12992 | modal.opened = false; | |
| 12993 | if (!modal.type || !modal.$el) { return; } | |
| 12994 | openedModals.splice(openedModals.indexOf(modal), 1); | |
| 12995 | $('html').removeClass(("with-modal-" + (modal.type.toLowerCase()))); | |
| 12996 | modal.$el.trigger(("modal:close " + (modal.type.toLowerCase()) + ":close"), modal); | |
| 12997 | modal.emit(("local::close modalClose " + (modal.type) + "Close"), modal); | |
| 12998 | }; | |
| 12999 | ||
| 13000 | Modal.prototype.onClosed = function onClosed () { | |
| 13001 | var modal = this; | |
| 13002 | if (!modal.type || !modal.$el) { return; } | |
| 13003 | modal.$el.removeClass('modal-out'); | |
| 13004 | modal.$el.hide(); | |
| 13005 | modal.$el.trigger(("modal:closed " + (modal.type.toLowerCase()) + ":closed"), modal); | |
| 13006 | modal.emit(("local::closed modalClosed " + (modal.type) + "Closed"), modal); | |
| 13007 | }; | |
| 13008 | ||
| 13009 | Modal.prototype.open = function open (animateModal) { | |
| 13010 | var modal = this; | |
| 13011 | var app = modal.app; | |
| 13012 | var $el = modal.$el; | |
| 13013 | var $backdropEl = modal.$backdropEl; | |
| 13014 | var type = modal.type; | |
| 13015 | var animate = true; | |
| 13016 | if (typeof animateModal !== 'undefined') { animate = animateModal; } | |
| 13017 | else if (typeof modal.params.animate !== 'undefined') { | |
| 13018 | animate = modal.params.animate; | |
| 13019 | } | |
| 13020 | ||
| 13021 | if (!$el || $el.hasClass('modal-in')) { | |
| 13022 | return modal; | |
| 13023 | } | |
| 13024 | ||
| 13025 | if (type === 'dialog' && app.params.modal.queueDialogs) { | |
| 13026 | var pushToQueue; | |
| 13027 | if ($('.dialog.modal-in').length > 0) { | |
| 13028 | pushToQueue = true; | |
| 13029 | } else if (openedModals.length > 0) { | |
| 13030 | openedModals.forEach(function (openedModal) { | |
| 13031 | if (openedModal.type === 'dialog') { pushToQueue = true; } | |
| 13032 | }); | |
| 13033 | } | |
| 13034 | if (pushToQueue) { | |
| 13035 | dialogsQueue.push(modal); | |
| 13036 | return modal; | |
| 13037 | } | |
| 13038 | } | |
| 13039 | ||
| 13040 | var $modalParentEl = $el.parent(); | |
| 13041 | var wasInDom = $el.parents(doc).length > 0; | |
| 13042 | if (app.params.modal.moveToRoot && !$modalParentEl.is(app.root)) { | |
| 13043 | app.root.append($el); | |
| 13044 | modal.once((type + "Closed"), function () { | |
| 13045 | if (wasInDom) { | |
| 13046 | $modalParentEl.append($el); | |
| 13047 | } else { | |
| 13048 | $el.remove(); | |
| 13049 | } | |
| 13050 | }); | |
| 13051 | } | |
| 13052 | // Show Modal | |
| 13053 | $el.show(); | |
| 13054 | ||
| 13055 | /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */ | |
| 13056 | modal._clientLeft = $el[0].clientLeft; | |
| 13057 | ||
| 13058 | // Modal | |
| 13059 | function transitionEnd() { | |
| 13060 | if ($el.hasClass('modal-out')) { | |
| 13061 | modal.onClosed(); | |
| 13062 | } else if ($el.hasClass('modal-in')) { | |
| 13063 | modal.onOpened(); | |
| 13064 | } | |
| 13065 | } | |
| 13066 | if (animate) { | |
| 13067 | if ($backdropEl) { | |
| 13068 | $backdropEl.removeClass('not-animated'); | |
| 13069 | $backdropEl.addClass('backdrop-in'); | |
| 13070 | } | |
| 13071 | $el | |
| 13072 | .animationEnd(function () { | |
| 13073 | transitionEnd(); | |
| 13074 | }); | |
| 13075 | $el | |
| 13076 | .transitionEnd(function () { | |
| 13077 | transitionEnd(); | |
| 13078 | }); | |
| 13079 | $el | |
| 13080 | .removeClass('modal-out not-animated') | |
| 13081 | .addClass('modal-in'); | |
| 13082 | modal.onOpen(); | |
| 13083 | } else { | |
| 13084 | if ($backdropEl) { | |
| 13085 | $backdropEl.addClass('backdrop-in not-animated'); | |
| 13086 | } | |
| 13087 | $el.removeClass('modal-out').addClass('modal-in not-animated'); | |
| 13088 | modal.onOpen(); | |
| 13089 | modal.onOpened(); | |
| 13090 | } | |
| 13091 | ||
| 13092 | return modal; | |
| 13093 | }; | |
| 13094 | ||
| 13095 | Modal.prototype.close = function close (animateModal) { | |
| 13096 | var modal = this; | |
| 13097 | var $el = modal.$el; | |
| 13098 | var $backdropEl = modal.$backdropEl; | |
| 13099 | ||
| 13100 | var animate = true; | |
| 13101 | if (typeof animateModal !== 'undefined') { animate = animateModal; } | |
| 13102 | else if (typeof modal.params.animate !== 'undefined') { | |
| 13103 | animate = modal.params.animate; | |
| 13104 | } | |
| 13105 | ||
| 13106 | if (!$el || !$el.hasClass('modal-in')) { | |
| 13107 | return modal; | |
| 13108 | } | |
| 13109 | ||
| 13110 | // backdrop | |
| 13111 | if ($backdropEl) { | |
| 13112 | var needToHideBackdrop = true; | |
| 13113 | if (modal.type === 'popup') { | |
| 13114 | modal.$el.prevAll('.popup.modal-in').each(function (index, popupEl) { | |
| 13115 | var popupInstance = popupEl.f7Modal; | |
| 13116 | if (!popupInstance) { return; } | |
| 13117 | if ( | |
| 13118 | popupInstance.params.closeByBackdropClick | |
| 13119 | && popupInstance.params.backdrop | |
| 13120 | && popupInstance.backdropEl === modal.backdropEl | |
| 13121 | ) { | |
| 13122 | needToHideBackdrop = false; | |
| 13123 | } | |
| 13124 | }); | |
| 13125 | } | |
| 13126 | if (needToHideBackdrop) { | |
| 13127 | $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated'); | |
| 13128 | $backdropEl.removeClass('backdrop-in'); | |
| 13129 | } | |
| 13130 | } | |
| 13131 | ||
| 13132 | // Modal | |
| 13133 | $el[animate ? 'removeClass' : 'addClass']('not-animated'); | |
| 13134 | function transitionEnd() { | |
| 13135 | if ($el.hasClass('modal-out')) { | |
| 13136 | modal.onClosed(); | |
| 13137 | } else if ($el.hasClass('modal-in')) { | |
| 13138 | modal.onOpened(); | |
| 13139 | } | |
| 13140 | } | |
| 13141 | if (animate) { | |
| 13142 | $el | |
| 13143 | .animationEnd(function () { | |
| 13144 | transitionEnd(); | |
| 13145 | }); | |
| 13146 | $el | |
| 13147 | .transitionEnd(function () { | |
| 13148 | transitionEnd(); | |
| 13149 | }); | |
| 13150 | $el | |
| 13151 | .removeClass('modal-in') | |
| 13152 | .addClass('modal-out'); | |
| 13153 | // Emit close | |
| 13154 | modal.onClose(); | |
| 13155 | } else { | |
| 13156 | $el | |
| 13157 | .addClass('not-animated') | |
| 13158 | .removeClass('modal-in') | |
| 13159 | .addClass('modal-out'); | |
| 13160 | // Emit close | |
| 13161 | modal.onClose(); | |
| 13162 | modal.onClosed(); | |
| 13163 | } | |
| 13164 | ||
| 13165 | if (modal.type === 'dialog') { | |
| 13166 | clearDialogsQueue(); | |
| 13167 | } | |
| 13168 | ||
| 13169 | return modal; | |
| 13170 | }; | |
| 13171 | ||
| 13172 | Modal.prototype.destroy = function destroy () { | |
| 13173 | var modal = this; | |
| 13174 | if (modal.destroyed) { return; } | |
| 13175 | modal.emit(("local::beforeDestroy modalBeforeDestroy " + (modal.type) + "BeforeDestroy"), modal); | |
| 13176 | if (modal.$el) { | |
| 13177 | modal.$el.trigger(("modal:beforedestroy " + (modal.type.toLowerCase()) + ":beforedestroy"), modal); | |
| 13178 | if (modal.$el.length && modal.$el[0].f7Modal) { | |
| 13179 | delete modal.$el[0].f7Modal; | |
| 13180 | } | |
| 13181 | } | |
| 13182 | Utils.deleteProps(modal); | |
| 13183 | modal.destroyed = true; | |
| 13184 | }; | |
| 13185 | ||
| 13186 | return Modal; | |
| 13187 | }(Framework7Class)); | |
| 13188 | ||
| 5d51ea26 | 13189 | var CustomModal = /*@__PURE__*/(function (Modal) { |
| 5309fbda DC |
13190 | function CustomModal(app, params) { |
| 13191 | var extendedParams = Utils.extend({ | |
| 13192 | backdrop: true, | |
| 13193 | closeByBackdropClick: true, | |
| 13194 | on: {}, | |
| 13195 | }, params); | |
| 13196 | ||
| 13197 | // Extends with open/close Modal methods; | |
| 5d51ea26 | 13198 | Modal.call(this, app, extendedParams); |
| 5309fbda DC |
13199 | |
| 13200 | var customModal = this; | |
| 13201 | ||
| 13202 | customModal.params = extendedParams; | |
| 13203 | ||
| 13204 | // Find Element | |
| 13205 | var $el; | |
| 13206 | if (!customModal.params.el) { | |
| 13207 | $el = $(customModal.params.content); | |
| 13208 | } else { | |
| 13209 | $el = $(customModal.params.el); | |
| 13210 | } | |
| 13211 | ||
| 13212 | if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| 13213 | return $el[0].f7Modal; | |
| 13214 | } | |
| 13215 | ||
| 13216 | if ($el.length === 0) { | |
| 13217 | return customModal.destroy(); | |
| 13218 | } | |
| 13219 | var $backdropEl; | |
| 13220 | if (customModal.params.backdrop) { | |
| 13221 | $backdropEl = app.root.children('.custom-modal-backdrop'); | |
| 13222 | if ($backdropEl.length === 0) { | |
| 13223 | $backdropEl = $('<div class="custom-modal-backdrop"></div>'); | |
| 13224 | app.root.append($backdropEl); | |
| 13225 | } | |
| 13226 | } | |
| 13227 | ||
| 13228 | function handleClick(e) { | |
| 13229 | if (!customModal || customModal.destroyed) { return; } | |
| 13230 | if ($backdropEl && e.target === $backdropEl[0]) { | |
| 13231 | customModal.close(); | |
| 13232 | } | |
| 13233 | } | |
| 13234 | ||
| 13235 | customModal.on('customModalOpened', function () { | |
| 13236 | if (customModal.params.closeByBackdropClick && customModal.params.backdrop) { | |
| 13237 | app.on('click', handleClick); | |
| 13238 | } | |
| 13239 | }); | |
| 13240 | customModal.on('customModalClose', function () { | |
| 13241 | if (customModal.params.closeByBackdropClick && customModal.params.backdrop) { | |
| 13242 | app.off('click', handleClick); | |
| 13243 | } | |
| 13244 | }); | |
| 13245 | ||
| 13246 | Utils.extend(customModal, { | |
| 13247 | app: app, | |
| 13248 | $el: $el, | |
| 13249 | el: $el[0], | |
| 13250 | $backdropEl: $backdropEl, | |
| 13251 | backdropEl: $backdropEl && $backdropEl[0], | |
| 13252 | type: 'customModal', | |
| 13253 | }); | |
| 13254 | ||
| 13255 | $el[0].f7Modal = customModal; | |
| 13256 | ||
| 13257 | return customModal; | |
| 13258 | } | |
| 13259 | ||
| 5d51ea26 DC |
13260 | if ( Modal ) CustomModal.__proto__ = Modal; |
| 13261 | CustomModal.prototype = Object.create( Modal && Modal.prototype ); | |
| 5309fbda DC |
13262 | CustomModal.prototype.constructor = CustomModal; |
| 13263 | ||
| 13264 | return CustomModal; | |
| 13265 | }(Modal)); | |
| 13266 | ||
| 13267 | var Modal$1 = { | |
| 13268 | name: 'modal', | |
| 13269 | static: { | |
| 13270 | Modal: Modal, | |
| 13271 | CustomModal: CustomModal, | |
| 13272 | }, | |
| 13273 | create: function create() { | |
| 13274 | var app = this; | |
| 13275 | app.customModal = { | |
| 13276 | create: function create(params) { | |
| 13277 | return new CustomModal(app, params); | |
| 13278 | }, | |
| 13279 | }; | |
| 13280 | }, | |
| 13281 | params: { | |
| 13282 | modal: { | |
| 13283 | moveToRoot: true, | |
| 13284 | queueDialogs: true, | |
| 13285 | }, | |
| 13286 | }, | |
| 13287 | }; | |
| 13288 | ||
| 5d51ea26 DC |
13289 | var Appbar = { |
| 13290 | name: 'appbar', | |
| 13291 | }; | |
| 13292 | ||
| 13293 | var Dialog = /*@__PURE__*/(function (Modal) { | |
| 5309fbda DC |
13294 | function Dialog(app, params) { |
| 13295 | var extendedParams = Utils.extend({ | |
| 13296 | title: app.params.dialog.title, | |
| 13297 | text: undefined, | |
| 13298 | content: '', | |
| 13299 | buttons: [], | |
| 13300 | verticalButtons: false, | |
| 13301 | onClick: undefined, | |
| 13302 | cssClass: undefined, | |
| 13303 | destroyOnClose: false, | |
| 13304 | on: {}, | |
| 13305 | }, params); | |
| 13306 | if (typeof extendedParams.closeByBackdropClick === 'undefined') { | |
| 13307 | extendedParams.closeByBackdropClick = app.params.dialog.closeByBackdropClick; | |
| 13308 | } | |
| 13309 | ||
| 13310 | // Extends with open/close Modal methods; | |
| 5d51ea26 | 13311 | Modal.call(this, app, extendedParams); |
| 5309fbda DC |
13312 | |
| 13313 | var dialog = this; | |
| 13314 | ||
| 13315 | var title = extendedParams.title; | |
| 13316 | var text = extendedParams.text; | |
| 13317 | var content = extendedParams.content; | |
| 13318 | var buttons = extendedParams.buttons; | |
| 13319 | var verticalButtons = extendedParams.verticalButtons; | |
| 13320 | var cssClass = extendedParams.cssClass; | |
| 13321 | ||
| 13322 | dialog.params = extendedParams; | |
| 13323 | ||
| 13324 | // Find Element | |
| 13325 | var $el; | |
| 13326 | if (!dialog.params.el) { | |
| 13327 | var dialogClasses = ['dialog']; | |
| 13328 | if (buttons.length === 0) { dialogClasses.push('dialog-no-buttons'); } | |
| 13329 | if (buttons.length > 0) { dialogClasses.push(("dialog-buttons-" + (buttons.length))); } | |
| 13330 | if (verticalButtons) { dialogClasses.push('dialog-buttons-vertical'); } | |
| 13331 | if (cssClass) { dialogClasses.push(cssClass); } | |
| 13332 | ||
| 13333 | var buttonsHTML = ''; | |
| 13334 | if (buttons.length > 0) { | |
| 13335 | buttonsHTML = "\n <div class=\"dialog-buttons\">\n " + (buttons.map(function (button) { return ("\n <span class=\"dialog-button" + (button.bold ? ' dialog-button-bold' : '') + (button.color ? (" color-" + (button.color)) : '') + (button.cssClass ? (" " + (button.cssClass)) : '') + "\">" + (button.text) + "</span>\n "); }).join('')) + "\n </div>\n "; | |
| 13336 | } | |
| 13337 | ||
| 13338 | var dialogHtml = "\n <div class=\"" + (dialogClasses.join(' ')) + "\">\n <div class=\"dialog-inner\">\n " + (title ? ("<div class=\"dialog-title\">" + title + "</div>") : '') + "\n " + (text ? ("<div class=\"dialog-text\">" + text + "</div>") : '') + "\n " + content + "\n </div>\n " + buttonsHTML + "\n </div>\n "; | |
| 13339 | $el = $(dialogHtml); | |
| 13340 | } else { | |
| 13341 | $el = $(dialog.params.el); | |
| 13342 | } | |
| 13343 | ||
| 13344 | if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| 13345 | return $el[0].f7Modal; | |
| 13346 | } | |
| 13347 | ||
| 13348 | if ($el.length === 0) { | |
| 13349 | return dialog.destroy(); | |
| 13350 | } | |
| 13351 | ||
| 13352 | var $backdropEl = app.root.children('.dialog-backdrop'); | |
| 13353 | if ($backdropEl.length === 0) { | |
| 13354 | $backdropEl = $('<div class="dialog-backdrop"></div>'); | |
| 13355 | app.root.append($backdropEl); | |
| 13356 | } | |
| 13357 | ||
| 13358 | // Assign events | |
| 13359 | function buttonOnClick(e) { | |
| 13360 | var buttonEl = this; | |
| 13361 | var index = $(buttonEl).index(); | |
| 13362 | var button = buttons[index]; | |
| 13363 | if (button.onClick) { button.onClick(dialog, e); } | |
| 13364 | if (dialog.params.onClick) { dialog.params.onClick(dialog, index); } | |
| 13365 | if (button.close !== false) { dialog.close(); } | |
| 13366 | } | |
| 13367 | var addKeyboardHander; | |
| 5d51ea26 | 13368 | function onKeyDown(e) { |
| 5309fbda DC |
13369 | var keyCode = e.keyCode; |
| 13370 | buttons.forEach(function (button, index) { | |
| 13371 | if (button.keyCodes && button.keyCodes.indexOf(keyCode) >= 0) { | |
| 13372 | if (doc.activeElement) { doc.activeElement.blur(); } | |
| 13373 | if (button.onClick) { button.onClick(dialog, e); } | |
| 13374 | if (dialog.params.onClick) { dialog.params.onClick(dialog, index); } | |
| 13375 | if (button.close !== false) { dialog.close(); } | |
| 13376 | } | |
| 13377 | }); | |
| 13378 | } | |
| 13379 | if (buttons && buttons.length > 0) { | |
| 13380 | dialog.on('open', function () { | |
| 13381 | $el.find('.dialog-button').each(function (index, buttonEl) { | |
| 13382 | var button = buttons[index]; | |
| 13383 | if (button.keyCodes) { addKeyboardHander = true; } | |
| 13384 | $(buttonEl).on('click', buttonOnClick); | |
| 13385 | }); | |
| 13386 | if ( | |
| 13387 | addKeyboardHander | |
| 13388 | && !app.device.ios | |
| 13389 | && !app.device.android | |
| 13390 | && !app.device.cordova | |
| 13391 | ) { | |
| 5d51ea26 | 13392 | $(doc).on('keydown', onKeyDown); |
| 5309fbda DC |
13393 | } |
| 13394 | }); | |
| 13395 | dialog.on('close', function () { | |
| 13396 | $el.find('.dialog-button').each(function (index, buttonEl) { | |
| 13397 | $(buttonEl).off('click', buttonOnClick); | |
| 13398 | }); | |
| 13399 | if ( | |
| 13400 | addKeyboardHander | |
| 13401 | && !app.device.ios | |
| 13402 | && !app.device.android | |
| 13403 | && !app.device.cordova | |
| 13404 | ) { | |
| 5d51ea26 | 13405 | $(doc).off('keydown', onKeyDown); |
| 5309fbda DC |
13406 | } |
| 13407 | addKeyboardHander = false; | |
| 13408 | }); | |
| 13409 | } | |
| 13410 | Utils.extend(dialog, { | |
| 13411 | app: app, | |
| 13412 | $el: $el, | |
| 13413 | el: $el[0], | |
| 13414 | $backdropEl: $backdropEl, | |
| 13415 | backdropEl: $backdropEl[0], | |
| 13416 | type: 'dialog', | |
| 13417 | setProgress: function setProgress(progress, duration) { | |
| 13418 | app.progressbar.set($el.find('.progressbar'), progress, duration); | |
| 13419 | return dialog; | |
| 13420 | }, | |
| 13421 | setText: function setText(newText) { | |
| 13422 | var $textEl = $el.find('.dialog-text'); | |
| 13423 | if ($textEl.length === 0) { | |
| 13424 | $textEl = $('<div class="dialog-text"></div>'); | |
| 13425 | if (typeof title !== 'undefined') { | |
| 13426 | $textEl.insertAfter($el.find('.dialog-title')); | |
| 13427 | } else { | |
| 13428 | $el.find('.dialog-inner').prepend($textEl); | |
| 13429 | } | |
| 13430 | } | |
| 13431 | $textEl.html(newText); | |
| 13432 | dialog.params.text = newText; | |
| 13433 | return dialog; | |
| 13434 | }, | |
| 13435 | setTitle: function setTitle(newTitle) { | |
| 13436 | var $titleEl = $el.find('.dialog-title'); | |
| 13437 | if ($titleEl.length === 0) { | |
| 13438 | $titleEl = $('<div class="dialog-title"></div>'); | |
| 13439 | $el.find('.dialog-inner').prepend($titleEl); | |
| 13440 | } | |
| 13441 | $titleEl.html(newTitle); | |
| 13442 | dialog.params.title = newTitle; | |
| 13443 | return dialog; | |
| 13444 | }, | |
| 13445 | }); | |
| 13446 | ||
| 13447 | function handleClick(e) { | |
| 13448 | var target = e.target; | |
| 13449 | var $target = $(target); | |
| 13450 | if ($target.closest(dialog.el).length === 0) { | |
| 13451 | if ( | |
| 13452 | dialog.params.closeByBackdropClick | |
| 13453 | && dialog.backdropEl | |
| 13454 | && dialog.backdropEl === target | |
| 13455 | ) { | |
| 13456 | dialog.close(); | |
| 13457 | } | |
| 13458 | } | |
| 13459 | } | |
| 13460 | ||
| 13461 | dialog.on('opened', function () { | |
| 13462 | if (dialog.params.closeByBackdropClick) { | |
| 13463 | app.on('click', handleClick); | |
| 13464 | } | |
| 13465 | }); | |
| 13466 | dialog.on('close', function () { | |
| 13467 | if (dialog.params.closeByBackdropClick) { | |
| 13468 | app.off('click', handleClick); | |
| 13469 | } | |
| 13470 | }); | |
| 13471 | ||
| 13472 | $el[0].f7Modal = dialog; | |
| 13473 | ||
| 13474 | if (dialog.params.destroyOnClose) { | |
| 13475 | dialog.once('closed', function () { | |
| 13476 | setTimeout(function () { | |
| 13477 | dialog.destroy(); | |
| 13478 | }, 0); | |
| 13479 | }); | |
| 13480 | } | |
| 13481 | ||
| 13482 | return dialog; | |
| 13483 | } | |
| 13484 | ||
| 5d51ea26 DC |
13485 | if ( Modal ) Dialog.__proto__ = Modal; |
| 13486 | Dialog.prototype = Object.create( Modal && Modal.prototype ); | |
| 5309fbda DC |
13487 | Dialog.prototype.constructor = Dialog; |
| 13488 | ||
| 13489 | return Dialog; | |
| 13490 | }(Modal)); | |
| 13491 | ||
| 13492 | var Dialog$1 = { | |
| 13493 | name: 'dialog', | |
| 13494 | params: { | |
| 13495 | dialog: { | |
| 13496 | title: undefined, | |
| 13497 | buttonOk: 'OK', | |
| 13498 | buttonCancel: 'Cancel', | |
| 13499 | usernamePlaceholder: 'Username', | |
| 13500 | passwordPlaceholder: 'Password', | |
| 13501 | preloaderTitle: 'Loading... ', | |
| 13502 | progressTitle: 'Loading... ', | |
| 13503 | closeByBackdropClick: false, | |
| 13504 | destroyPredefinedDialogs: true, | |
| 13505 | keyboardActions: true, | |
| 13506 | }, | |
| 13507 | }, | |
| 13508 | static: { | |
| 13509 | Dialog: Dialog, | |
| 13510 | }, | |
| 13511 | create: function create() { | |
| 13512 | var app = this; | |
| 13513 | function defaultDialogTitle() { | |
| 13514 | return app.params.dialog.title || app.name; | |
| 13515 | } | |
| 13516 | var destroyOnClose = app.params.dialog.destroyPredefinedDialogs; | |
| 13517 | var keyboardActions = app.params.dialog.keyboardActions; | |
| 13518 | app.dialog = Utils.extend( | |
| 13519 | ModalMethods({ | |
| 13520 | app: app, | |
| 13521 | constructor: Dialog, | |
| 13522 | defaultSelector: '.dialog.modal-in', | |
| 13523 | }), | |
| 13524 | { | |
| 13525 | // Shortcuts | |
| 13526 | alert: function alert() { | |
| 13527 | var assign; | |
| 13528 | ||
| 13529 | var args = [], len = arguments.length; | |
| 13530 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 13531 | var text = args[0]; | |
| 13532 | var title = args[1]; | |
| 13533 | var callbackOk = args[2]; | |
| 13534 | if (args.length === 2 && typeof args[1] === 'function') { | |
| 13535 | (assign = args, text = assign[0], callbackOk = assign[1], title = assign[2]); | |
| 13536 | } | |
| 13537 | return new Dialog(app, { | |
| 13538 | title: typeof title === 'undefined' ? defaultDialogTitle() : title, | |
| 13539 | text: text, | |
| 13540 | buttons: [{ | |
| 13541 | text: app.params.dialog.buttonOk, | |
| 13542 | bold: true, | |
| 13543 | onClick: callbackOk, | |
| 13544 | keyCodes: keyboardActions ? [13, 27] : null, | |
| 13545 | }], | |
| 13546 | destroyOnClose: destroyOnClose, | |
| 13547 | }).open(); | |
| 13548 | }, | |
| 13549 | prompt: function prompt() { | |
| 13550 | var assign; | |
| 13551 | ||
| 13552 | var args = [], len = arguments.length; | |
| 13553 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 13554 | var text = args[0]; | |
| 13555 | var title = args[1]; | |
| 13556 | var callbackOk = args[2]; | |
| 13557 | var callbackCancel = args[3]; | |
| 13558 | var defaultValue = args[4]; | |
| 13559 | if (typeof args[1] === 'function') { | |
| 13560 | (assign = args, text = assign[0], callbackOk = assign[1], callbackCancel = assign[2], defaultValue = assign[3], title = assign[4]); | |
| 13561 | } | |
| 13562 | defaultValue = typeof defaultValue === 'undefined' || defaultValue === null ? '' : defaultValue; | |
| 13563 | return new Dialog(app, { | |
| 13564 | title: typeof title === 'undefined' ? defaultDialogTitle() : title, | |
| 13565 | text: text, | |
| 13566 | content: ("<div class=\"dialog-input-field input\"><input type=\"text\" class=\"dialog-input\" value=\"" + defaultValue + "\"></div>"), | |
| 13567 | buttons: [ | |
| 13568 | { | |
| 13569 | text: app.params.dialog.buttonCancel, | |
| 13570 | keyCodes: keyboardActions ? [27] : null, | |
| 5d51ea26 | 13571 | color: app.theme === 'aurora' ? 'gray' : null, |
| 5309fbda DC |
13572 | }, |
| 13573 | { | |
| 13574 | text: app.params.dialog.buttonOk, | |
| 13575 | bold: true, | |
| 13576 | keyCodes: keyboardActions ? [13] : null, | |
| 13577 | } ], | |
| 13578 | onClick: function onClick(dialog, index) { | |
| 13579 | var inputValue = dialog.$el.find('.dialog-input').val(); | |
| 13580 | if (index === 0 && callbackCancel) { callbackCancel(inputValue); } | |
| 13581 | if (index === 1 && callbackOk) { callbackOk(inputValue); } | |
| 13582 | }, | |
| 13583 | destroyOnClose: destroyOnClose, | |
| 13584 | }).open(); | |
| 13585 | }, | |
| 13586 | confirm: function confirm() { | |
| 13587 | var assign; | |
| 13588 | ||
| 13589 | var args = [], len = arguments.length; | |
| 13590 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 13591 | var text = args[0]; | |
| 13592 | var title = args[1]; | |
| 13593 | var callbackOk = args[2]; | |
| 13594 | var callbackCancel = args[3]; | |
| 13595 | if (typeof args[1] === 'function') { | |
| 13596 | (assign = args, text = assign[0], callbackOk = assign[1], callbackCancel = assign[2], title = assign[3]); | |
| 13597 | } | |
| 13598 | return new Dialog(app, { | |
| 13599 | title: typeof title === 'undefined' ? defaultDialogTitle() : title, | |
| 13600 | text: text, | |
| 13601 | buttons: [ | |
| 13602 | { | |
| 13603 | text: app.params.dialog.buttonCancel, | |
| 13604 | onClick: callbackCancel, | |
| 13605 | keyCodes: keyboardActions ? [27] : null, | |
| 5d51ea26 | 13606 | color: app.theme === 'aurora' ? 'gray' : null, |
| 5309fbda DC |
13607 | }, |
| 13608 | { | |
| 13609 | text: app.params.dialog.buttonOk, | |
| 13610 | bold: true, | |
| 13611 | onClick: callbackOk, | |
| 13612 | keyCodes: keyboardActions ? [13] : null, | |
| 13613 | } ], | |
| 13614 | destroyOnClose: destroyOnClose, | |
| 13615 | }).open(); | |
| 13616 | }, | |
| 13617 | login: function login() { | |
| 13618 | var assign; | |
| 13619 | ||
| 13620 | var args = [], len = arguments.length; | |
| 13621 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 13622 | var text = args[0]; | |
| 13623 | var title = args[1]; | |
| 13624 | var callbackOk = args[2]; | |
| 13625 | var callbackCancel = args[3]; | |
| 13626 | if (typeof args[1] === 'function') { | |
| 13627 | (assign = args, text = assign[0], callbackOk = assign[1], callbackCancel = assign[2], title = assign[3]); | |
| 13628 | } | |
| 13629 | return new Dialog(app, { | |
| 13630 | title: typeof title === 'undefined' ? defaultDialogTitle() : title, | |
| 13631 | text: text, | |
| 13632 | content: ("\n <div class=\"dialog-input-field dialog-input-double input\">\n <input type=\"text\" name=\"dialog-username\" placeholder=\"" + (app.params.dialog.usernamePlaceholder) + "\" class=\"dialog-input\">\n </div>\n <div class=\"dialog-input-field dialog-input-double input\">\n <input type=\"password\" name=\"dialog-password\" placeholder=\"" + (app.params.dialog.passwordPlaceholder) + "\" class=\"dialog-input\">\n </div>"), | |
| 13633 | buttons: [ | |
| 13634 | { | |
| 13635 | text: app.params.dialog.buttonCancel, | |
| 13636 | keyCodes: keyboardActions ? [27] : null, | |
| 5d51ea26 | 13637 | color: app.theme === 'aurora' ? 'gray' : null, |
| 5309fbda DC |
13638 | }, |
| 13639 | { | |
| 13640 | text: app.params.dialog.buttonOk, | |
| 13641 | bold: true, | |
| 13642 | keyCodes: keyboardActions ? [13] : null, | |
| 13643 | } ], | |
| 13644 | onClick: function onClick(dialog, index) { | |
| 13645 | var username = dialog.$el.find('[name="dialog-username"]').val(); | |
| 13646 | var password = dialog.$el.find('[name="dialog-password"]').val(); | |
| 13647 | if (index === 0 && callbackCancel) { callbackCancel(username, password); } | |
| 13648 | if (index === 1 && callbackOk) { callbackOk(username, password); } | |
| 13649 | }, | |
| 13650 | destroyOnClose: destroyOnClose, | |
| 13651 | }).open(); | |
| 13652 | }, | |
| 13653 | password: function password() { | |
| 13654 | var assign; | |
| 13655 | ||
| 13656 | var args = [], len = arguments.length; | |
| 13657 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 13658 | var text = args[0]; | |
| 13659 | var title = args[1]; | |
| 13660 | var callbackOk = args[2]; | |
| 13661 | var callbackCancel = args[3]; | |
| 13662 | if (typeof args[1] === 'function') { | |
| 13663 | (assign = args, text = assign[0], callbackOk = assign[1], callbackCancel = assign[2], title = assign[3]); | |
| 13664 | } | |
| 13665 | return new Dialog(app, { | |
| 13666 | title: typeof title === 'undefined' ? defaultDialogTitle() : title, | |
| 13667 | text: text, | |
| 13668 | content: ("\n <div class=\"dialog-input-field input\">\n <input type=\"password\" name=\"dialog-password\" placeholder=\"" + (app.params.dialog.passwordPlaceholder) + "\" class=\"dialog-input\">\n </div>"), | |
| 13669 | buttons: [ | |
| 13670 | { | |
| 13671 | text: app.params.dialog.buttonCancel, | |
| 13672 | keyCodes: keyboardActions ? [27] : null, | |
| 5d51ea26 | 13673 | color: app.theme === 'aurora' ? 'gray' : null, |
| 5309fbda DC |
13674 | }, |
| 13675 | { | |
| 13676 | text: app.params.dialog.buttonOk, | |
| 13677 | bold: true, | |
| 13678 | keyCodes: keyboardActions ? [13] : null, | |
| 13679 | } ], | |
| 13680 | onClick: function onClick(dialog, index) { | |
| 13681 | var password = dialog.$el.find('[name="dialog-password"]').val(); | |
| 13682 | if (index === 0 && callbackCancel) { callbackCancel(password); } | |
| 13683 | if (index === 1 && callbackOk) { callbackOk(password); } | |
| 13684 | }, | |
| 13685 | destroyOnClose: destroyOnClose, | |
| 13686 | }).open(); | |
| 13687 | }, | |
| 13688 | preloader: function preloader(title, color) { | |
| 13689 | var preloaderInner = Utils[((app.theme) + "PreloaderContent")] || ''; | |
| 13690 | return new Dialog(app, { | |
| 13691 | title: typeof title === 'undefined' || title === null ? app.params.dialog.preloaderTitle : title, | |
| 13692 | content: ("<div class=\"preloader" + (color ? (" color-" + color) : '') + "\">" + preloaderInner + "</div>"), | |
| 13693 | cssClass: 'dialog-preloader', | |
| 13694 | destroyOnClose: destroyOnClose, | |
| 13695 | }).open(); | |
| 13696 | }, | |
| 13697 | progress: function progress() { | |
| 13698 | var assign, assign$1, assign$2; | |
| 13699 | ||
| 13700 | var args = [], len = arguments.length; | |
| 13701 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 13702 | var title = args[0]; | |
| 13703 | var progress = args[1]; | |
| 13704 | var color = args[2]; | |
| 13705 | if (args.length === 2) { | |
| 13706 | if (typeof args[0] === 'number') { | |
| 13707 | (assign = args, progress = assign[0], color = assign[1], title = assign[2]); | |
| 13708 | } else if (typeof args[0] === 'string' && typeof args[1] === 'string') { | |
| 13709 | (assign$1 = args, title = assign$1[0], color = assign$1[1], progress = assign$1[2]); | |
| 13710 | } | |
| 13711 | } else if (args.length === 1) { | |
| 13712 | if (typeof args[0] === 'number') { | |
| 13713 | (assign$2 = args, progress = assign$2[0], title = assign$2[1], color = assign$2[2]); | |
| 13714 | } | |
| 13715 | } | |
| 13716 | var infinite = typeof progress === 'undefined'; | |
| 13717 | var dialog = new Dialog(app, { | |
| 13718 | title: typeof title === 'undefined' ? app.params.dialog.progressTitle : title, | |
| 13719 | cssClass: 'dialog-progress', | |
| 13720 | content: ("\n <div class=\"progressbar" + (infinite ? '-infinite' : '') + (color ? (" color-" + color) : '') + "\">\n " + (!infinite ? '<span></span>' : '') + "\n </div>\n "), | |
| 13721 | destroyOnClose: destroyOnClose, | |
| 13722 | }); | |
| 13723 | if (!infinite) { dialog.setProgress(progress); } | |
| 13724 | return dialog.open(); | |
| 13725 | }, | |
| 13726 | } | |
| 13727 | ); | |
| 13728 | }, | |
| 13729 | }; | |
| 13730 | ||
| 5d51ea26 | 13731 | var Popup = /*@__PURE__*/(function (Modal) { |
| 5309fbda DC |
13732 | function Popup(app, params) { |
| 13733 | var extendedParams = Utils.extend( | |
| 13734 | { on: {} }, | |
| 13735 | app.params.popup, | |
| 13736 | params | |
| 13737 | ); | |
| 13738 | ||
| 13739 | // Extends with open/close Modal methods; | |
| 5d51ea26 | 13740 | Modal.call(this, app, extendedParams); |
| 5309fbda DC |
13741 | |
| 13742 | var popup = this; | |
| 13743 | ||
| 13744 | popup.params = extendedParams; | |
| 13745 | ||
| 13746 | // Find Element | |
| 13747 | var $el; | |
| 13748 | if (!popup.params.el) { | |
| 5d51ea26 | 13749 | $el = $(popup.params.content).filter(function (elIndex, node) { return node.nodeType === 1; }).eq(0); |
| 5309fbda | 13750 | } else { |
| 5d51ea26 | 13751 | $el = $(popup.params.el).eq(0); |
| 5309fbda DC |
13752 | } |
| 13753 | ||
| 13754 | if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| 13755 | return $el[0].f7Modal; | |
| 13756 | } | |
| 13757 | ||
| 13758 | if ($el.length === 0) { | |
| 13759 | return popup.destroy(); | |
| 13760 | } | |
| 13761 | ||
| 13762 | var $backdropEl; | |
| 5d51ea26 DC |
13763 | if (popup.params.backdrop && popup.params.backdropEl) { |
| 13764 | $backdropEl = $(popup.params.backdropEl); | |
| 13765 | } else if (popup.params.backdrop) { | |
| 5309fbda DC |
13766 | $backdropEl = app.root.children('.popup-backdrop'); |
| 13767 | if ($backdropEl.length === 0) { | |
| 13768 | $backdropEl = $('<div class="popup-backdrop"></div>'); | |
| 13769 | app.root.append($backdropEl); | |
| 13770 | } | |
| 13771 | } | |
| 13772 | ||
| 13773 | Utils.extend(popup, { | |
| 13774 | app: app, | |
| 13775 | $el: $el, | |
| 13776 | el: $el[0], | |
| 13777 | $backdropEl: $backdropEl, | |
| 13778 | backdropEl: $backdropEl && $backdropEl[0], | |
| 13779 | type: 'popup', | |
| 13780 | }); | |
| 13781 | ||
| 13782 | function handleClick(e) { | |
| 13783 | var target = e.target; | |
| 13784 | var $target = $(target); | |
| 5d51ea26 DC |
13785 | var keyboardOpened = !app.device.desktop && app.device.cordova && ((window.Keyboard && window.Keyboard.isVisible) || (window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible)); |
| 13786 | if (keyboardOpened) { return; } | |
| 5309fbda DC |
13787 | if ($target.closest(popup.el).length === 0) { |
| 13788 | if ( | |
| 13789 | popup.params | |
| 13790 | && popup.params.closeByBackdropClick | |
| 13791 | && popup.params.backdrop | |
| 13792 | && popup.backdropEl | |
| 13793 | && popup.backdropEl === target | |
| 13794 | ) { | |
| 13795 | var needToClose = true; | |
| 13796 | popup.$el.nextAll('.popup.modal-in').each(function (index, popupEl) { | |
| 13797 | var popupInstance = popupEl.f7Modal; | |
| 13798 | if (!popupInstance) { return; } | |
| 13799 | if ( | |
| 13800 | popupInstance.params.closeByBackdropClick | |
| 13801 | && popupInstance.params.backdrop | |
| 13802 | && popupInstance.backdropEl === popup.backdropEl | |
| 13803 | ) { | |
| 13804 | needToClose = false; | |
| 13805 | } | |
| 13806 | }); | |
| 13807 | if (needToClose) { | |
| 13808 | popup.close(); | |
| 13809 | } | |
| 13810 | } | |
| 13811 | } | |
| 13812 | } | |
| 13813 | ||
| 5d51ea26 DC |
13814 | function onKeyDown(e) { |
| 13815 | var keyCode = e.keyCode; | |
| 13816 | if (keyCode === 27 && popup.params.closeOnEscape) { | |
| 13817 | popup.close(); | |
| 13818 | } | |
| 13819 | } | |
| 13820 | if (popup.params.closeOnEscape) { | |
| 13821 | popup.on('popupOpen', function () { | |
| 13822 | $(document).on('keydown', onKeyDown); | |
| 13823 | }); | |
| 13824 | popup.on('popupClose', function () { | |
| 13825 | $(document).off('keydown', onKeyDown); | |
| 13826 | }); | |
| 13827 | } | |
| 13828 | ||
| 5309fbda | 13829 | popup.on('popupOpened', function () { |
| 5d51ea26 | 13830 | $el.removeClass('swipe-close-to-bottom swipe-close-to-top'); |
| 5309fbda DC |
13831 | if (popup.params.closeByBackdropClick) { |
| 13832 | app.on('click', handleClick); | |
| 13833 | } | |
| 13834 | }); | |
| 13835 | popup.on('popupClose', function () { | |
| 13836 | if (popup.params.closeByBackdropClick) { | |
| 13837 | app.off('click', handleClick); | |
| 13838 | } | |
| 13839 | }); | |
| 13840 | ||
| 5d51ea26 DC |
13841 | var allowSwipeToClose = true; |
| 13842 | var isTouched = false; | |
| 13843 | var startTouch; | |
| 13844 | var currentTouch; | |
| 13845 | var isScrolling; | |
| 13846 | var touchStartTime; | |
| 13847 | var touchesDiff; | |
| 13848 | var isMoved = false; | |
| 13849 | var pageContentEl; | |
| 13850 | var pageContentScrollTop; | |
| 13851 | var pageContentOffsetHeight; | |
| 13852 | var pageContentScrollHeight; | |
| 13853 | ||
| 13854 | function handleTouchStart(e) { | |
| 13855 | if (isTouched || !allowSwipeToClose || !popup.params.swipeToClose) { return; } | |
| 13856 | if (popup.params.swipeHandler && $(e.target).closest(popup.params.swipeHandler).length === 0) { | |
| 13857 | return; | |
| 13858 | } | |
| 13859 | isTouched = true; | |
| 13860 | isMoved = false; | |
| 13861 | startTouch = { | |
| 13862 | x: e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX, | |
| 13863 | y: e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY, | |
| 13864 | }; | |
| 13865 | touchStartTime = Utils.now(); | |
| 13866 | isScrolling = undefined; | |
| 13867 | if (!popup.params.swipeHandler && e.type === 'touchstart') { | |
| 13868 | pageContentEl = $(e.target).closest('.page-content')[0]; | |
| 13869 | } | |
| 13870 | } | |
| 13871 | function handleTouchMove(e) { | |
| 13872 | if (!isTouched) { return; } | |
| 13873 | currentTouch = { | |
| 13874 | x: e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX, | |
| 13875 | y: e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY, | |
| 13876 | }; | |
| 13877 | ||
| 13878 | if (typeof isScrolling === 'undefined') { | |
| 13879 | isScrolling = !!(isScrolling || Math.abs(currentTouch.x - startTouch.x) > Math.abs(currentTouch.y - startTouch.y)); | |
| 13880 | } | |
| 13881 | if (isScrolling) { | |
| 13882 | isTouched = false; | |
| 13883 | isMoved = false; | |
| 13884 | return; | |
| 13885 | } | |
| 13886 | ||
| 13887 | touchesDiff = startTouch.y - currentTouch.y; | |
| 13888 | var direction = touchesDiff < 0 ? 'to-bottom' : 'to-top'; | |
| 13889 | $el.transition(0); | |
| 13890 | ||
| 13891 | if (typeof popup.params.swipeToClose === 'string' && direction !== popup.params.swipeToClose) { | |
| 13892 | $el.transform(''); | |
| 13893 | return; | |
| 13894 | } | |
| 13895 | ||
| 13896 | if (!isMoved) { | |
| 13897 | if (pageContentEl) { | |
| 13898 | pageContentScrollTop = pageContentEl.scrollTop; | |
| 13899 | pageContentScrollHeight = pageContentEl.scrollHeight; | |
| 13900 | pageContentOffsetHeight = pageContentEl.offsetHeight; | |
| 13901 | if ( | |
| 13902 | !(pageContentScrollHeight === pageContentOffsetHeight) | |
| 13903 | && !(direction === 'to-bottom' && pageContentScrollTop === 0) | |
| 13904 | && !(direction === 'to-top' && pageContentScrollTop === (pageContentScrollHeight - pageContentOffsetHeight)) | |
| 13905 | ) { | |
| 13906 | $el.transform(''); | |
| 13907 | isTouched = false; | |
| 13908 | isMoved = false; | |
| 13909 | return; | |
| 13910 | } | |
| 13911 | } | |
| 13912 | isMoved = true; | |
| 13913 | } | |
| 13914 | e.preventDefault(); | |
| 13915 | $el.transition(0).transform(("translate3d(0," + (-touchesDiff) + "px,0)")); | |
| 13916 | } | |
| 13917 | function handleTouchEnd() { | |
| 13918 | isTouched = false; | |
| 13919 | if (!isMoved) { | |
| 13920 | return; | |
| 13921 | } | |
| 13922 | isMoved = false; | |
| 13923 | allowSwipeToClose = false; | |
| 13924 | $el.transition(''); | |
| 13925 | var direction = touchesDiff < 0 ? 'to-bottom' : 'to-top'; | |
| 13926 | if ((typeof popup.params.swipeToClose === 'string' && direction !== popup.params.swipeToClose)) { | |
| 13927 | $el.transform(''); | |
| 13928 | allowSwipeToClose = true; | |
| 13929 | return; | |
| 13930 | } | |
| 13931 | var diff = Math.abs(touchesDiff); | |
| 13932 | var timeDiff = (new Date()).getTime() - touchStartTime; | |
| 13933 | if ((timeDiff < 300 && diff > 20) || (timeDiff >= 300 && diff > 100)) { | |
| 13934 | Utils.nextTick(function () { | |
| 13935 | if (direction === 'to-bottom') { | |
| 13936 | $el.addClass('swipe-close-to-bottom'); | |
| 13937 | } else { | |
| 13938 | $el.addClass('swipe-close-to-top'); | |
| 13939 | } | |
| 13940 | $el.transform(''); | |
| 13941 | popup.close(); | |
| 13942 | allowSwipeToClose = true; | |
| 13943 | }); | |
| 13944 | return; | |
| 13945 | } | |
| 13946 | allowSwipeToClose = true; | |
| 13947 | $el.transform(''); | |
| 13948 | } | |
| 13949 | ||
| 13950 | var passive = Support.passiveListener ? { passive: true } : false; | |
| 13951 | if (popup.params.swipeToClose) { | |
| 13952 | $el.on(app.touchEvents.start, handleTouchStart, passive); | |
| 13953 | app.on('touchmove', handleTouchMove); | |
| 13954 | app.on('touchend:passive', handleTouchEnd); | |
| 13955 | popup.once('popupDestroy', function () { | |
| 13956 | $el.off(app.touchEvents.start, handleTouchStart, passive); | |
| 13957 | app.off('touchmove', handleTouchMove); | |
| 13958 | app.off('touchend:passive', handleTouchEnd); | |
| 13959 | }); | |
| 13960 | } | |
| 13961 | ||
| 5309fbda DC |
13962 | $el[0].f7Modal = popup; |
| 13963 | ||
| 13964 | return popup; | |
| 13965 | } | |
| 13966 | ||
| 5d51ea26 DC |
13967 | if ( Modal ) Popup.__proto__ = Modal; |
| 13968 | Popup.prototype = Object.create( Modal && Modal.prototype ); | |
| 5309fbda DC |
13969 | Popup.prototype.constructor = Popup; |
| 13970 | ||
| 13971 | return Popup; | |
| 13972 | }(Modal)); | |
| 13973 | ||
| 13974 | var Popup$1 = { | |
| 13975 | name: 'popup', | |
| 13976 | params: { | |
| 13977 | popup: { | |
| 13978 | backdrop: true, | |
| 5d51ea26 | 13979 | backdropEl: undefined, |
| 5309fbda | 13980 | closeByBackdropClick: true, |
| 5d51ea26 DC |
13981 | closeOnEscape: false, |
| 13982 | swipeToClose: false, | |
| 13983 | swipeHandler: null, | |
| 5309fbda DC |
13984 | }, |
| 13985 | }, | |
| 13986 | static: { | |
| 13987 | Popup: Popup, | |
| 13988 | }, | |
| 13989 | create: function create() { | |
| 13990 | var app = this; | |
| 13991 | app.popup = ModalMethods({ | |
| 13992 | app: app, | |
| 13993 | constructor: Popup, | |
| 13994 | defaultSelector: '.popup.modal-in', | |
| 13995 | }); | |
| 13996 | }, | |
| 13997 | clicks: { | |
| 13998 | '.popup-open': function openPopup($clickedEl, data) { | |
| 13999 | if ( data === void 0 ) data = {}; | |
| 14000 | ||
| 14001 | var app = this; | |
| 14002 | app.popup.open(data.popup, data.animate); | |
| 14003 | }, | |
| 14004 | '.popup-close': function closePopup($clickedEl, data) { | |
| 14005 | if ( data === void 0 ) data = {}; | |
| 14006 | ||
| 14007 | var app = this; | |
| 14008 | app.popup.close(data.popup, data.animate); | |
| 14009 | }, | |
| 14010 | }, | |
| 14011 | }; | |
| 14012 | ||
| 5d51ea26 | 14013 | var LoginScreen = /*@__PURE__*/(function (Modal) { |
| 5309fbda DC |
14014 | function LoginScreen(app, params) { |
| 14015 | var extendedParams = Utils.extend({ | |
| 14016 | on: {}, | |
| 14017 | }, params); | |
| 14018 | ||
| 14019 | // Extends with open/close Modal methods; | |
| 5d51ea26 | 14020 | Modal.call(this, app, extendedParams); |
| 5309fbda DC |
14021 | |
| 14022 | var loginScreen = this; | |
| 14023 | ||
| 14024 | loginScreen.params = extendedParams; | |
| 14025 | ||
| 14026 | // Find Element | |
| 14027 | var $el; | |
| 14028 | if (!loginScreen.params.el) { | |
| 5d51ea26 | 14029 | $el = $(loginScreen.params.content).filter(function (elIndex, node) { return node.nodeType === 1; }).eq(0); |
| 5309fbda | 14030 | } else { |
| 5d51ea26 | 14031 | $el = $(loginScreen.params.el).eq(0); |
| 5309fbda DC |
14032 | } |
| 14033 | ||
| 14034 | if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| 14035 | return $el[0].f7Modal; | |
| 14036 | } | |
| 14037 | ||
| 14038 | if ($el.length === 0) { | |
| 14039 | return loginScreen.destroy(); | |
| 14040 | } | |
| 14041 | ||
| 14042 | Utils.extend(loginScreen, { | |
| 14043 | app: app, | |
| 14044 | $el: $el, | |
| 14045 | el: $el[0], | |
| 14046 | type: 'loginScreen', | |
| 14047 | }); | |
| 14048 | ||
| 14049 | $el[0].f7Modal = loginScreen; | |
| 14050 | ||
| 14051 | return loginScreen; | |
| 14052 | } | |
| 14053 | ||
| 5d51ea26 DC |
14054 | if ( Modal ) LoginScreen.__proto__ = Modal; |
| 14055 | LoginScreen.prototype = Object.create( Modal && Modal.prototype ); | |
| 5309fbda DC |
14056 | LoginScreen.prototype.constructor = LoginScreen; |
| 14057 | ||
| 14058 | return LoginScreen; | |
| 14059 | }(Modal)); | |
| 14060 | ||
| 14061 | var LoginScreen$1 = { | |
| 14062 | name: 'loginScreen', | |
| 14063 | static: { | |
| 14064 | LoginScreen: LoginScreen, | |
| 14065 | }, | |
| 14066 | create: function create() { | |
| 14067 | var app = this; | |
| 14068 | app.loginScreen = ModalMethods({ | |
| 14069 | app: app, | |
| 14070 | constructor: LoginScreen, | |
| 14071 | defaultSelector: '.login-screen.modal-in', | |
| 14072 | }); | |
| 14073 | }, | |
| 14074 | clicks: { | |
| 14075 | '.login-screen-open': function openLoginScreen($clickedEl, data) { | |
| 14076 | if ( data === void 0 ) data = {}; | |
| 14077 | ||
| 14078 | var app = this; | |
| 14079 | app.loginScreen.open(data.loginScreen, data.animate); | |
| 14080 | }, | |
| 14081 | '.login-screen-close': function closeLoginScreen($clickedEl, data) { | |
| 14082 | if ( data === void 0 ) data = {}; | |
| 14083 | ||
| 14084 | var app = this; | |
| 14085 | app.loginScreen.close(data.loginScreen, data.animate); | |
| 14086 | }, | |
| 14087 | }, | |
| 14088 | }; | |
| 14089 | ||
| 5d51ea26 | 14090 | var Popover = /*@__PURE__*/(function (Modal) { |
| 5309fbda DC |
14091 | function Popover(app, params) { |
| 14092 | var extendedParams = Utils.extend( | |
| 14093 | { on: {} }, | |
| 14094 | app.params.popover, | |
| 14095 | params | |
| 14096 | ); | |
| 14097 | ||
| 14098 | // Extends with open/close Modal methods; | |
| 5d51ea26 | 14099 | Modal.call(this, app, extendedParams); |
| 5309fbda DC |
14100 | |
| 14101 | var popover = this; | |
| 14102 | ||
| 14103 | popover.params = extendedParams; | |
| 14104 | ||
| 14105 | // Find Element | |
| 14106 | var $el; | |
| 14107 | if (!popover.params.el) { | |
| 5d51ea26 | 14108 | $el = $(popover.params.content).filter(function (elIndex, node) { return node.nodeType === 1; }).eq(0); |
| 5309fbda | 14109 | } else { |
| 5d51ea26 | 14110 | $el = $(popover.params.el).eq(0); |
| 5309fbda DC |
14111 | } |
| 14112 | ||
| 14113 | if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| 14114 | return $el[0].f7Modal; | |
| 14115 | } | |
| 14116 | ||
| 14117 | // Find Target | |
| 14118 | var $targetEl = $(popover.params.targetEl).eq(0); | |
| 14119 | ||
| 14120 | if ($el.length === 0) { | |
| 14121 | return popover.destroy(); | |
| 14122 | } | |
| 14123 | ||
| 14124 | // Backdrop | |
| 14125 | var $backdropEl; | |
| 5d51ea26 DC |
14126 | if (popover.params.backdrop && popover.params.backdropEl) { |
| 14127 | $backdropEl = $(popover.params.backdropEl); | |
| 14128 | } else if (popover.params.backdrop) { | |
| 5309fbda DC |
14129 | $backdropEl = app.root.children('.popover-backdrop'); |
| 14130 | if ($backdropEl.length === 0) { | |
| 14131 | $backdropEl = $('<div class="popover-backdrop"></div>'); | |
| 14132 | app.root.append($backdropEl); | |
| 14133 | } | |
| 14134 | } | |
| 14135 | ||
| 14136 | // Find Angle | |
| 14137 | var $angleEl; | |
| 14138 | if ($el.find('.popover-angle').length === 0) { | |
| 14139 | $angleEl = $('<div class="popover-angle"></div>'); | |
| 14140 | $el.prepend($angleEl); | |
| 14141 | } else { | |
| 14142 | $angleEl = $el.find('.popover-angle'); | |
| 14143 | } | |
| 14144 | ||
| 14145 | // Open | |
| 14146 | var originalOpen = popover.open; | |
| 14147 | ||
| 14148 | Utils.extend(popover, { | |
| 14149 | app: app, | |
| 14150 | $el: $el, | |
| 14151 | el: $el[0], | |
| 14152 | $targetEl: $targetEl, | |
| 14153 | targetEl: $targetEl[0], | |
| 14154 | $angleEl: $angleEl, | |
| 14155 | angleEl: $angleEl[0], | |
| 14156 | $backdropEl: $backdropEl, | |
| 14157 | backdropEl: $backdropEl && $backdropEl[0], | |
| 14158 | type: 'popover', | |
| 14159 | open: function open() { | |
| 14160 | var assign; | |
| 14161 | ||
| 14162 | var args = [], len = arguments.length; | |
| 14163 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 14164 | var targetEl = args[0]; | |
| 14165 | var animate = args[1]; | |
| 14166 | if (typeof args[0] === 'boolean') { (assign = args, animate = assign[0], targetEl = assign[1]); } | |
| 14167 | if (targetEl) { | |
| 14168 | popover.$targetEl = $(targetEl); | |
| 14169 | popover.targetEl = popover.$targetEl[0]; | |
| 14170 | } | |
| 14171 | return originalOpen.call(popover, animate); | |
| 14172 | }, | |
| 14173 | }); | |
| 14174 | ||
| 14175 | function handleResize() { | |
| 14176 | popover.resize(); | |
| 14177 | } | |
| 14178 | popover.on('popoverOpen', function () { | |
| 14179 | popover.resize(); | |
| 14180 | app.on('resize', handleResize); | |
| 5d51ea26 | 14181 | $(window).on('keyboardDidShow keyboardDidHide', handleResize); |
| 5309fbda DC |
14182 | popover.on('popoverClose popoverBeforeDestroy', function () { |
| 14183 | app.off('resize', handleResize); | |
| 5d51ea26 | 14184 | $(window).off('keyboardDidShow keyboardDidHide', handleResize); |
| 5309fbda DC |
14185 | }); |
| 14186 | }); | |
| 14187 | ||
| 14188 | function handleClick(e) { | |
| 14189 | var target = e.target; | |
| 14190 | var $target = $(target); | |
| 5d51ea26 DC |
14191 | var keyboardOpened = !app.device.desktop && app.device.cordova && ((window.Keyboard && window.Keyboard.isVisible) || (window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible)); |
| 14192 | if (keyboardOpened) { return; } | |
| 5309fbda DC |
14193 | if ($target.closest(popover.el).length === 0) { |
| 14194 | if ( | |
| 14195 | popover.params.closeByBackdropClick | |
| 14196 | && popover.params.backdrop | |
| 14197 | && popover.backdropEl | |
| 14198 | && popover.backdropEl === target | |
| 14199 | ) { | |
| 14200 | popover.close(); | |
| 14201 | } else if (popover.params.closeByOutsideClick) { | |
| 14202 | popover.close(); | |
| 14203 | } | |
| 14204 | } | |
| 14205 | } | |
| 14206 | ||
| 5d51ea26 DC |
14207 | function onKeyDown(e) { |
| 14208 | var keyCode = e.keyCode; | |
| 14209 | if (keyCode === 27 && popover.params.closeOnEscape) { | |
| 14210 | popover.close(); | |
| 14211 | } | |
| 14212 | } | |
| 14213 | ||
| 14214 | if (popover.params.closeOnEscape) { | |
| 14215 | popover.on('popoverOpen', function () { | |
| 14216 | $(document).on('keydown', onKeyDown); | |
| 14217 | }); | |
| 14218 | popover.on('popoverClose', function () { | |
| 14219 | $(document).off('keydown', onKeyDown); | |
| 14220 | }); | |
| 14221 | } | |
| 14222 | ||
| 5309fbda DC |
14223 | popover.on('popoverOpened', function () { |
| 14224 | if (popover.params.closeByOutsideClick || popover.params.closeByBackdropClick) { | |
| 14225 | app.on('click', handleClick); | |
| 14226 | } | |
| 14227 | }); | |
| 14228 | popover.on('popoverClose', function () { | |
| 14229 | if (popover.params.closeByOutsideClick || popover.params.closeByBackdropClick) { | |
| 14230 | app.off('click', handleClick); | |
| 14231 | } | |
| 14232 | }); | |
| 14233 | ||
| 14234 | $el[0].f7Modal = popover; | |
| 14235 | ||
| 14236 | return popover; | |
| 14237 | } | |
| 14238 | ||
| 5d51ea26 DC |
14239 | if ( Modal ) Popover.__proto__ = Modal; |
| 14240 | Popover.prototype = Object.create( Modal && Modal.prototype ); | |
| 5309fbda DC |
14241 | Popover.prototype.constructor = Popover; |
| 14242 | ||
| 14243 | Popover.prototype.resize = function resize () { | |
| 14244 | var popover = this; | |
| 14245 | var app = popover.app; | |
| 14246 | var $el = popover.$el; | |
| 14247 | var $targetEl = popover.$targetEl; | |
| 14248 | var $angleEl = popover.$angleEl; | |
| 14249 | var ref = popover.params; | |
| 14250 | var targetX = ref.targetX; | |
| 14251 | var targetY = ref.targetY; | |
| 14252 | $el.css({ left: '', top: '' }); | |
| 14253 | var ref$1 = [$el.width(), $el.height()]; | |
| 14254 | var width = ref$1[0]; | |
| 14255 | var height = ref$1[1]; | |
| 14256 | var angleSize = 0; | |
| 14257 | var angleLeft; | |
| 14258 | var angleTop; | |
| 5d51ea26 | 14259 | if (app.theme === 'ios' || app.theme === 'aurora') { |
| 5309fbda DC |
14260 | $angleEl.removeClass('on-left on-right on-top on-bottom').css({ left: '', top: '' }); |
| 14261 | angleSize = $angleEl.width() / 2; | |
| 14262 | } else { | |
| 5d51ea26 | 14263 | $el.removeClass('popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle').css({ left: '', top: '' }); |
| 5309fbda DC |
14264 | } |
| 14265 | ||
| 14266 | var targetWidth; | |
| 14267 | var targetHeight; | |
| 14268 | var targetOffsetLeft; | |
| 14269 | var targetOffsetTop; | |
| 14270 | if ($targetEl && $targetEl.length > 0) { | |
| 14271 | targetWidth = $targetEl.outerWidth(); | |
| 14272 | targetHeight = $targetEl.outerHeight(); | |
| 14273 | ||
| 14274 | var targetOffset = $targetEl.offset(); | |
| 14275 | targetOffsetLeft = targetOffset.left - app.left; | |
| 14276 | targetOffsetTop = targetOffset.top - app.top; | |
| 14277 | ||
| 14278 | var targetParentPage = $targetEl.parents('.page'); | |
| 14279 | if (targetParentPage.length > 0) { | |
| 14280 | targetOffsetTop -= targetParentPage[0].scrollTop; | |
| 14281 | } | |
| 14282 | } else if (typeof targetX !== 'undefined' && targetY !== 'undefined') { | |
| 14283 | targetOffsetLeft = targetX; | |
| 14284 | targetOffsetTop = targetY; | |
| 14285 | targetWidth = popover.params.targetWidth || 0; | |
| 14286 | targetHeight = popover.params.targetHeight || 0; | |
| 14287 | } | |
| 14288 | ||
| 14289 | var ref$2 = [0, 0, 0]; | |
| 14290 | var left = ref$2[0]; | |
| 14291 | var top = ref$2[1]; | |
| 14292 | var diff = ref$2[2]; | |
| 14293 | // Top Position | |
| 14294 | var position = app.theme === 'md' ? 'bottom' : 'top'; | |
| 14295 | if (app.theme === 'md') { | |
| 14296 | if (height < app.height - targetOffsetTop - targetHeight) { | |
| 14297 | // On bottom | |
| 14298 | position = 'bottom'; | |
| 5d51ea26 | 14299 | top = targetOffsetTop + targetHeight; |
| 5309fbda DC |
14300 | } else if (height < targetOffsetTop) { |
| 14301 | // On top | |
| 5d51ea26 | 14302 | top = targetOffsetTop - height; |
| 5309fbda DC |
14303 | position = 'top'; |
| 14304 | } else { | |
| 14305 | // On middle | |
| 5d51ea26 DC |
14306 | position = 'middle'; |
| 14307 | top = ((targetHeight / 2) + targetOffsetTop) - (height / 2); | |
| 5309fbda | 14308 | } |
| 5d51ea26 | 14309 | top = Math.max(8, Math.min(top, app.height - height - 8)); |
| 5309fbda DC |
14310 | |
| 14311 | // Horizontal Position | |
| 5d51ea26 DC |
14312 | var hPosition; |
| 14313 | if (targetOffsetLeft < app.width / 2) { | |
| 14314 | hPosition = 'right'; | |
| 14315 | left = position === 'middle' | |
| 14316 | ? targetOffsetLeft + targetWidth | |
| 14317 | : targetOffsetLeft; | |
| 14318 | } else { | |
| 14319 | hPosition = 'left'; | |
| 14320 | left = position === 'middle' | |
| 14321 | ? targetOffsetLeft - width | |
| 14322 | : (targetOffsetLeft + targetWidth) - width; | |
| 5309fbda | 14323 | } |
| 5d51ea26 DC |
14324 | left = Math.max(8, Math.min(left, app.width - width - 8)); |
| 14325 | $el.addClass(("popover-on-" + position + " popover-on-" + hPosition)); | |
| 5309fbda | 14326 | } else { |
| 5d51ea26 | 14327 | // ios and aurora |
| 5309fbda DC |
14328 | if ((height + angleSize) < targetOffsetTop) { |
| 14329 | // On top | |
| 14330 | top = targetOffsetTop - height - angleSize; | |
| 14331 | } else if ((height + angleSize) < app.height - targetOffsetTop - targetHeight) { | |
| 14332 | // On bottom | |
| 14333 | position = 'bottom'; | |
| 14334 | top = targetOffsetTop + targetHeight + angleSize; | |
| 14335 | } else { | |
| 14336 | // On middle | |
| 14337 | position = 'middle'; | |
| 14338 | top = ((targetHeight / 2) + targetOffsetTop) - (height / 2); | |
| 14339 | diff = top; | |
| 5d51ea26 | 14340 | top = Math.max(5, Math.min(top, app.height - height - 5)); |
| 5309fbda DC |
14341 | diff -= top; |
| 14342 | } | |
| 14343 | ||
| 14344 | // Horizontal Position | |
| 14345 | if (position === 'top' || position === 'bottom') { | |
| 14346 | left = ((targetWidth / 2) + targetOffsetLeft) - (width / 2); | |
| 14347 | diff = left; | |
| 5d51ea26 | 14348 | left = Math.max(5, Math.min(left, app.width - width - 5)); |
| 5309fbda DC |
14349 | if (position === 'top') { |
| 14350 | $angleEl.addClass('on-bottom'); | |
| 14351 | } | |
| 14352 | if (position === 'bottom') { | |
| 14353 | $angleEl.addClass('on-top'); | |
| 14354 | } | |
| 14355 | diff -= left; | |
| 14356 | angleLeft = ((width / 2) - angleSize) + diff; | |
| 14357 | angleLeft = Math.max(Math.min(angleLeft, width - (angleSize * 2) - 13), 13); | |
| 14358 | $angleEl.css({ left: (angleLeft + "px") }); | |
| 14359 | } else if (position === 'middle') { | |
| 14360 | left = targetOffsetLeft - width - angleSize; | |
| 14361 | $angleEl.addClass('on-right'); | |
| 14362 | if (left < 5 || (left + width > app.width)) { | |
| 14363 | if (left < 5) { left = targetOffsetLeft + targetWidth + angleSize; } | |
| 14364 | if (left + width > app.width) { left = app.width - width - 5; } | |
| 14365 | $angleEl.removeClass('on-right').addClass('on-left'); | |
| 14366 | } | |
| 14367 | angleTop = ((height / 2) - angleSize) + diff; | |
| 14368 | angleTop = Math.max(Math.min(angleTop, height - (angleSize * 2) - 13), 13); | |
| 14369 | $angleEl.css({ top: (angleTop + "px") }); | |
| 14370 | } | |
| 14371 | } | |
| 14372 | ||
| 14373 | // Apply Styles | |
| 14374 | $el.css({ top: (top + "px"), left: (left + "px") }); | |
| 14375 | }; | |
| 14376 | ||
| 14377 | return Popover; | |
| 14378 | }(Modal)); | |
| 14379 | ||
| 14380 | var Popover$1 = { | |
| 14381 | name: 'popover', | |
| 14382 | params: { | |
| 14383 | popover: { | |
| 5d51ea26 DC |
14384 | backdrop: true, |
| 14385 | backdropEl: undefined, | |
| 5309fbda DC |
14386 | closeByBackdropClick: true, |
| 14387 | closeByOutsideClick: true, | |
| 5d51ea26 | 14388 | closeOnEscape: false, |
| 5309fbda DC |
14389 | }, |
| 14390 | }, | |
| 14391 | static: { | |
| 14392 | Popover: Popover, | |
| 14393 | }, | |
| 14394 | create: function create() { | |
| 14395 | var app = this; | |
| 14396 | app.popover = Utils.extend( | |
| 14397 | ModalMethods({ | |
| 14398 | app: app, | |
| 14399 | constructor: Popover, | |
| 14400 | defaultSelector: '.popover.modal-in', | |
| 14401 | }), | |
| 14402 | { | |
| 14403 | open: function open(popoverEl, targetEl, animate) { | |
| 14404 | var $popoverEl = $(popoverEl); | |
| 14405 | var popover = $popoverEl[0].f7Modal; | |
| 14406 | if (!popover) { popover = new Popover(app, { el: $popoverEl, targetEl: targetEl }); } | |
| 14407 | return popover.open(targetEl, animate); | |
| 14408 | }, | |
| 14409 | } | |
| 14410 | ); | |
| 14411 | }, | |
| 14412 | clicks: { | |
| 14413 | '.popover-open': function openPopover($clickedEl, data) { | |
| 14414 | if ( data === void 0 ) data = {}; | |
| 14415 | ||
| 14416 | var app = this; | |
| 14417 | app.popover.open(data.popover, $clickedEl, data.animate); | |
| 14418 | }, | |
| 14419 | '.popover-close': function closePopover($clickedEl, data) { | |
| 14420 | if ( data === void 0 ) data = {}; | |
| 14421 | ||
| 14422 | var app = this; | |
| 14423 | app.popover.close(data.popover, data.animate); | |
| 14424 | }, | |
| 14425 | }, | |
| 14426 | }; | |
| 14427 | ||
| 14428 | /* eslint indent: ["off"] */ | |
| 14429 | ||
| 5d51ea26 | 14430 | var Actions = /*@__PURE__*/(function (Modal) { |
| 5309fbda DC |
14431 | function Actions(app, params) { |
| 14432 | var extendedParams = Utils.extend( | |
| 14433 | { on: {} }, | |
| 14434 | app.params.actions, | |
| 14435 | params | |
| 14436 | ); | |
| 14437 | ||
| 14438 | // Extends with open/close Modal methods; | |
| 5d51ea26 | 14439 | Modal.call(this, app, extendedParams); |
| 5309fbda DC |
14440 | |
| 14441 | var actions = this; | |
| 14442 | ||
| 14443 | actions.params = extendedParams; | |
| 14444 | ||
| 14445 | // Buttons | |
| 14446 | var groups; | |
| 14447 | if (actions.params.buttons) { | |
| 14448 | groups = actions.params.buttons; | |
| 14449 | if (!Array.isArray(groups[0])) { groups = [groups]; } | |
| 14450 | } | |
| 14451 | actions.groups = groups; | |
| 14452 | ||
| 14453 | // Find Element | |
| 14454 | var $el; | |
| 14455 | if (actions.params.el) { | |
| 5d51ea26 | 14456 | $el = $(actions.params.el).eq(0); |
| 5309fbda | 14457 | } else if (actions.params.content) { |
| 5d51ea26 | 14458 | $el = $(actions.params.content).filter(function (elIndex, node) { return node.nodeType === 1; }).eq(0); |
| 5309fbda DC |
14459 | } else if (actions.params.buttons) { |
| 14460 | if (actions.params.convertToPopover) { | |
| 14461 | actions.popoverHtml = actions.renderPopover(); | |
| 14462 | } | |
| 14463 | actions.actionsHtml = actions.render(); | |
| 14464 | } | |
| 14465 | ||
| 14466 | if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| 14467 | return $el[0].f7Modal; | |
| 14468 | } | |
| 14469 | ||
| 14470 | if ($el && $el.length === 0 && !(actions.actionsHtml || actions.popoverHtml)) { | |
| 14471 | return actions.destroy(); | |
| 14472 | } | |
| 14473 | ||
| 14474 | // Backdrop | |
| 14475 | var $backdropEl; | |
| 5d51ea26 DC |
14476 | if (actions.params.backdrop && actions.params.backdropEl) { |
| 14477 | $backdropEl = $(actions.params.backdropEl); | |
| 14478 | } else if (actions.params.backdrop) { | |
| 5309fbda DC |
14479 | $backdropEl = app.root.children('.actions-backdrop'); |
| 14480 | if ($backdropEl.length === 0) { | |
| 14481 | $backdropEl = $('<div class="actions-backdrop"></div>'); | |
| 14482 | app.root.append($backdropEl); | |
| 14483 | } | |
| 14484 | } | |
| 14485 | ||
| 14486 | var originalOpen = actions.open; | |
| 14487 | var originalClose = actions.close; | |
| 14488 | ||
| 14489 | var popover; | |
| 14490 | function buttonOnClick(e) { | |
| 5d51ea26 | 14491 | var $buttonEl = $(this); |
| 5309fbda DC |
14492 | var buttonIndex; |
| 14493 | var groupIndex; | |
| 5d51ea26 DC |
14494 | if ($buttonEl.hasClass('list-button') || $buttonEl.hasClass('item-link')) { |
| 14495 | buttonIndex = $buttonEl.parents('li').index(); | |
| 14496 | groupIndex = $buttonEl.parents('.list').index(); | |
| 5309fbda | 14497 | } else { |
| 5d51ea26 DC |
14498 | buttonIndex = $buttonEl.index(); |
| 14499 | groupIndex = $buttonEl.parents('.actions-group').index(); | |
| 5309fbda DC |
14500 | } |
| 14501 | if (typeof groups !== 'undefined') { | |
| 14502 | var button = groups[groupIndex][buttonIndex]; | |
| 14503 | if (button.onClick) { button.onClick(actions, e); } | |
| 14504 | if (actions.params.onClick) { actions.params.onClick(actions, e); } | |
| 14505 | if (button.close !== false) { actions.close(); } | |
| 14506 | } | |
| 14507 | } | |
| 14508 | actions.open = function open(animate) { | |
| 14509 | var convertToPopover = false; | |
| 14510 | var ref = actions.params; | |
| 14511 | var targetEl = ref.targetEl; | |
| 14512 | var targetX = ref.targetX; | |
| 14513 | var targetY = ref.targetY; | |
| 14514 | var targetWidth = ref.targetWidth; | |
| 14515 | var targetHeight = ref.targetHeight; | |
| 14516 | if (actions.params.convertToPopover && (targetEl || (targetX !== undefined && targetY !== undefined))) { | |
| 14517 | // Popover | |
| 14518 | if ( | |
| 14519 | actions.params.forceToPopover | |
| 14520 | || (app.device.ios && app.device.ipad) | |
| 14521 | || app.width >= 768 | |
| 5d51ea26 | 14522 | || (app.device.desktop && app.theme === 'aurora') |
| 5309fbda DC |
14523 | ) { |
| 14524 | convertToPopover = true; | |
| 14525 | } | |
| 14526 | } | |
| 14527 | if (convertToPopover && actions.popoverHtml) { | |
| 14528 | popover = app.popover.create({ | |
| 14529 | content: actions.popoverHtml, | |
| 14530 | backdrop: actions.params.backdrop, | |
| 14531 | targetEl: targetEl, | |
| 14532 | targetX: targetX, | |
| 14533 | targetY: targetY, | |
| 14534 | targetWidth: targetWidth, | |
| 14535 | targetHeight: targetHeight, | |
| 14536 | }); | |
| 14537 | popover.open(animate); | |
| 14538 | popover.once('popoverOpened', function () { | |
| 5d51ea26 | 14539 | popover.$el.find('.list-button, .item-link').each(function (groupIndex, buttonEl) { |
| 5309fbda DC |
14540 | $(buttonEl).on('click', buttonOnClick); |
| 14541 | }); | |
| 14542 | }); | |
| 14543 | popover.once('popoverClosed', function () { | |
| 5d51ea26 | 14544 | popover.$el.find('.list-button, .item-link').each(function (groupIndex, buttonEl) { |
| 5309fbda DC |
14545 | $(buttonEl).off('click', buttonOnClick); |
| 14546 | }); | |
| 14547 | Utils.nextTick(function () { | |
| 14548 | popover.destroy(); | |
| 14549 | popover = undefined; | |
| 14550 | }); | |
| 14551 | }); | |
| 14552 | } else { | |
| 14553 | actions.$el = actions.actionsHtml ? $(actions.actionsHtml) : actions.$el; | |
| 14554 | actions.$el[0].f7Modal = actions; | |
| 14555 | if (actions.groups) { | |
| 14556 | actions.$el.find('.actions-button').each(function (groupIndex, buttonEl) { | |
| 14557 | $(buttonEl).on('click', buttonOnClick); | |
| 14558 | }); | |
| 14559 | actions.once('actionsClosed', function () { | |
| 14560 | actions.$el.find('.actions-button').each(function (groupIndex, buttonEl) { | |
| 14561 | $(buttonEl).off('click', buttonOnClick); | |
| 14562 | }); | |
| 14563 | }); | |
| 14564 | } | |
| 14565 | actions.el = actions.$el[0]; | |
| 14566 | originalOpen.call(actions, animate); | |
| 14567 | } | |
| 14568 | return actions; | |
| 14569 | }; | |
| 14570 | ||
| 14571 | actions.close = function close(animate) { | |
| 14572 | if (popover) { | |
| 14573 | popover.close(animate); | |
| 14574 | } else { | |
| 14575 | originalClose.call(actions, animate); | |
| 14576 | } | |
| 14577 | return actions; | |
| 14578 | }; | |
| 14579 | ||
| 14580 | Utils.extend(actions, { | |
| 14581 | app: app, | |
| 14582 | $el: $el, | |
| 14583 | el: $el ? $el[0] : undefined, | |
| 14584 | $backdropEl: $backdropEl, | |
| 14585 | backdropEl: $backdropEl && $backdropEl[0], | |
| 14586 | type: 'actions', | |
| 14587 | }); | |
| 14588 | ||
| 14589 | function handleClick(e) { | |
| 14590 | var target = e.target; | |
| 14591 | var $target = $(target); | |
| 5d51ea26 DC |
14592 | var keyboardOpened = !app.device.desktop && app.device.cordova && ((window.Keyboard && window.Keyboard.isVisible) || (window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible)); |
| 14593 | if (keyboardOpened) { return; } | |
| 5309fbda DC |
14594 | if ($target.closest(actions.el).length === 0) { |
| 14595 | if ( | |
| 14596 | actions.params.closeByBackdropClick | |
| 14597 | && actions.params.backdrop | |
| 14598 | && actions.backdropEl | |
| 14599 | && actions.backdropEl === target | |
| 14600 | ) { | |
| 14601 | actions.close(); | |
| 14602 | } else if (actions.params.closeByOutsideClick) { | |
| 14603 | actions.close(); | |
| 14604 | } | |
| 14605 | } | |
| 14606 | } | |
| 14607 | ||
| 5d51ea26 DC |
14608 | function onKeyDown(e) { |
| 14609 | var keyCode = e.keyCode; | |
| 14610 | if (keyCode === 27 && actions.params.closeOnEscape) { | |
| 14611 | actions.close(); | |
| 14612 | } | |
| 14613 | } | |
| 14614 | ||
| 14615 | if (actions.params.closeOnEscape) { | |
| 14616 | actions.on('open', function () { | |
| 14617 | $(document).on('keydown', onKeyDown); | |
| 14618 | }); | |
| 14619 | actions.on('close', function () { | |
| 14620 | $(document).off('keydown', onKeyDown); | |
| 14621 | }); | |
| 14622 | } | |
| 14623 | ||
| 5309fbda DC |
14624 | actions.on('opened', function () { |
| 14625 | if (actions.params.closeByBackdropClick || actions.params.closeByOutsideClick) { | |
| 14626 | app.on('click', handleClick); | |
| 14627 | } | |
| 14628 | }); | |
| 14629 | actions.on('close', function () { | |
| 14630 | if (actions.params.closeByBackdropClick || actions.params.closeByOutsideClick) { | |
| 14631 | app.off('click', handleClick); | |
| 14632 | } | |
| 14633 | }); | |
| 14634 | ||
| 14635 | if ($el) { | |
| 14636 | $el[0].f7Modal = actions; | |
| 14637 | } | |
| 14638 | ||
| 14639 | return actions; | |
| 14640 | } | |
| 14641 | ||
| 5d51ea26 DC |
14642 | if ( Modal ) Actions.__proto__ = Modal; |
| 14643 | Actions.prototype = Object.create( Modal && Modal.prototype ); | |
| 5309fbda DC |
14644 | Actions.prototype.constructor = Actions; |
| 14645 | ||
| 14646 | Actions.prototype.render = function render () { | |
| 14647 | var actions = this; | |
| 14648 | if (actions.params.render) { return actions.params.render.call(actions, actions); } | |
| 14649 | var groups = actions.groups; | |
| 14650 | return ("\n <div class=\"actions-modal" + (actions.params.grid ? ' actions-grid' : '') + "\">\n " + (groups.map(function (group) { return ("<div class=\"actions-group\">\n " + (group.map(function (button) { | |
| 14651 | var buttonClasses = [("actions-" + (button.label ? 'label' : 'button'))]; | |
| 14652 | var color = button.color; | |
| 14653 | var bg = button.bg; | |
| 14654 | var bold = button.bold; | |
| 14655 | var disabled = button.disabled; | |
| 14656 | var label = button.label; | |
| 14657 | var text = button.text; | |
| 14658 | var icon = button.icon; | |
| 14659 | if (color) { buttonClasses.push(("color-" + color)); } | |
| 14660 | if (bg) { buttonClasses.push(("bg-color-" + bg)); } | |
| 14661 | if (bold) { buttonClasses.push('actions-button-bold'); } | |
| 14662 | if (disabled) { buttonClasses.push('disabled'); } | |
| 14663 | if (label) { | |
| 14664 | return ("<div class=\"" + (buttonClasses.join(' ')) + "\">" + text + "</div>"); | |
| 14665 | } | |
| 14666 | return ("\n <div class=\"" + (buttonClasses.join(' ')) + "\">\n " + (icon ? ("<div class=\"actions-button-media\">" + icon + "</div>") : '') + "\n <div class=\"actions-button-text\">" + text + "</div>\n </div>").trim(); | |
| 14667 | }).join('')) + "\n </div>"); }).join('')) + "\n </div>\n ").trim(); | |
| 14668 | }; | |
| 14669 | ||
| 14670 | Actions.prototype.renderPopover = function renderPopover () { | |
| 14671 | var actions = this; | |
| 14672 | if (actions.params.renderPopover) { return actions.params.renderPopover.call(actions, actions); } | |
| 14673 | var groups = actions.groups; | |
| 14674 | return ("\n <div class=\"popover popover-from-actions\">\n <div class=\"popover-inner\">\n " + (groups.map(function (group) { return ("\n <div class=\"list\">\n <ul>\n " + (group.map(function (button) { | |
| 14675 | var itemClasses = []; | |
| 14676 | var color = button.color; | |
| 14677 | var bg = button.bg; | |
| 14678 | var bold = button.bold; | |
| 14679 | var disabled = button.disabled; | |
| 14680 | var label = button.label; | |
| 14681 | var text = button.text; | |
| 14682 | var icon = button.icon; | |
| 14683 | if (color) { itemClasses.push(("color-" + color)); } | |
| 14684 | if (bg) { itemClasses.push(("bg-color-" + bg)); } | |
| 14685 | if (bold) { itemClasses.push('popover-from-actions-bold'); } | |
| 14686 | if (disabled) { itemClasses.push('disabled'); } | |
| 14687 | if (label) { | |
| 14688 | itemClasses.push('popover-from-actions-label'); | |
| 14689 | return ("<li class=\"" + (itemClasses.join(' ')) + "\">" + text + "</li>"); | |
| 14690 | } | |
| 14691 | if (icon) { | |
| 14692 | itemClasses.push('item-link item-content'); | |
| 14693 | return ("\n <li>\n <a class=\"" + (itemClasses.join(' ')) + "\">\n <div class=\"item-media\">\n " + icon + "\n </div>\n <div class=\"item-inner\">\n <div class=\"item-title\">\n " + text + "\n </div>\n </div>\n </a>\n </li>\n "); | |
| 14694 | } | |
| 14695 | itemClasses.push('list-button'); | |
| 5d51ea26 | 14696 | return ("\n <li>\n <a class=\"" + (itemClasses.join(' ')) + "\">" + text + "</a>\n </li>\n "); |
| 5309fbda DC |
14697 | }).join('')) + "\n </ul>\n </div>\n "); }).join('')) + "\n </div>\n </div>\n ").trim(); |
| 14698 | }; | |
| 14699 | ||
| 14700 | return Actions; | |
| 14701 | }(Modal)); | |
| 14702 | ||
| 14703 | var Actions$1 = { | |
| 14704 | name: 'actions', | |
| 14705 | params: { | |
| 14706 | actions: { | |
| 14707 | convertToPopover: true, | |
| 14708 | forceToPopover: false, | |
| 5d51ea26 DC |
14709 | backdrop: true, |
| 14710 | backdropEl: undefined, | |
| 5309fbda | 14711 | closeByBackdropClick: true, |
| 5d51ea26 | 14712 | closeOnEscape: false, |
| 5309fbda DC |
14713 | render: null, |
| 14714 | renderPopover: null, | |
| 5309fbda DC |
14715 | }, |
| 14716 | }, | |
| 14717 | static: { | |
| 14718 | Actions: Actions, | |
| 14719 | }, | |
| 14720 | create: function create() { | |
| 14721 | var app = this; | |
| 14722 | app.actions = ModalMethods({ | |
| 14723 | app: app, | |
| 14724 | constructor: Actions, | |
| 14725 | defaultSelector: '.actions-modal.modal-in', | |
| 14726 | }); | |
| 14727 | }, | |
| 14728 | clicks: { | |
| 14729 | '.actions-open': function openActions($clickedEl, data) { | |
| 14730 | if ( data === void 0 ) data = {}; | |
| 14731 | ||
| 14732 | var app = this; | |
| 14733 | app.actions.open(data.actions, data.animate); | |
| 14734 | }, | |
| 14735 | '.actions-close': function closeActions($clickedEl, data) { | |
| 14736 | if ( data === void 0 ) data = {}; | |
| 14737 | ||
| 14738 | var app = this; | |
| 14739 | app.actions.close(data.actions, data.animate); | |
| 14740 | }, | |
| 14741 | }, | |
| 14742 | }; | |
| 14743 | ||
| 5d51ea26 | 14744 | var Sheet = /*@__PURE__*/(function (Modal) { |
| 5309fbda DC |
14745 | function Sheet(app, params) { |
| 14746 | var extendedParams = Utils.extend( | |
| 14747 | { on: {} }, | |
| 14748 | app.params.sheet, | |
| 14749 | params | |
| 14750 | ); | |
| 14751 | ||
| 14752 | // Extends with open/close Modal methods; | |
| 5d51ea26 | 14753 | Modal.call(this, app, extendedParams); |
| 5309fbda DC |
14754 | |
| 14755 | var sheet = this; | |
| 14756 | ||
| 14757 | sheet.params = extendedParams; | |
| 5d51ea26 DC |
14758 | if (typeof sheet.params.backdrop === 'undefined') { |
| 14759 | sheet.params.backdrop = app.theme !== 'ios'; | |
| 14760 | } | |
| 5309fbda DC |
14761 | |
| 14762 | // Find Element | |
| 14763 | var $el; | |
| 14764 | if (!sheet.params.el) { | |
| 5d51ea26 | 14765 | $el = $(sheet.params.content).filter(function (elIndex, node) { return node.nodeType === 1; }).eq(0); |
| 5309fbda | 14766 | } else { |
| 5d51ea26 | 14767 | $el = $(sheet.params.el).eq(0); |
| 5309fbda DC |
14768 | } |
| 14769 | ||
| 14770 | if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| 14771 | return $el[0].f7Modal; | |
| 14772 | } | |
| 14773 | ||
| 14774 | if ($el.length === 0) { | |
| 14775 | return sheet.destroy(); | |
| 14776 | } | |
| 14777 | var $backdropEl; | |
| 5d51ea26 DC |
14778 | |
| 14779 | if (sheet.params.backdrop && sheet.params.backdropEl) { | |
| 14780 | $backdropEl = $(sheet.params.backdropEl); | |
| 14781 | } else if (sheet.params.backdrop) { | |
| 5309fbda DC |
14782 | $backdropEl = app.root.children('.sheet-backdrop'); |
| 14783 | if ($backdropEl.length === 0) { | |
| 14784 | $backdropEl = $('<div class="sheet-backdrop"></div>'); | |
| 14785 | app.root.append($backdropEl); | |
| 14786 | } | |
| 14787 | } | |
| 14788 | ||
| 5d51ea26 DC |
14789 | Utils.extend(sheet, { |
| 14790 | app: app, | |
| 14791 | $el: $el, | |
| 14792 | el: $el[0], | |
| 14793 | $backdropEl: $backdropEl, | |
| 14794 | backdropEl: $backdropEl && $backdropEl[0], | |
| 14795 | type: 'sheet', | |
| 14796 | }); | |
| 14797 | ||
| 5309fbda | 14798 | var $pageContentEl; |
| 5d51ea26 | 14799 | function scrollToElementOnOpen() { |
| 5309fbda DC |
14800 | var $scrollEl = $(sheet.params.scrollToEl).eq(0); |
| 14801 | if ($scrollEl.length === 0) { return; } | |
| 14802 | $pageContentEl = $scrollEl.parents('.page-content'); | |
| 14803 | if ($pageContentEl.length === 0) { return; } | |
| 14804 | ||
| 14805 | var paddingTop = parseInt($pageContentEl.css('padding-top'), 10); | |
| 14806 | var paddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10); | |
| 14807 | var pageHeight = $pageContentEl[0].offsetHeight - paddingTop - $el.height(); | |
| 14808 | var pageScrollHeight = $pageContentEl[0].scrollHeight - paddingTop - $el.height(); | |
| 14809 | var pageScroll = $pageContentEl.scrollTop(); | |
| 14810 | ||
| 14811 | var newPaddingBottom; | |
| 14812 | ||
| 14813 | var scrollElTop = ($scrollEl.offset().top - paddingTop) + $scrollEl[0].offsetHeight; | |
| 14814 | if (scrollElTop > pageHeight) { | |
| 14815 | var scrollTop = (pageScroll + scrollElTop) - pageHeight; | |
| 14816 | if (scrollTop + pageHeight > pageScrollHeight) { | |
| 14817 | newPaddingBottom = ((scrollTop + pageHeight) - pageScrollHeight) + paddingBottom; | |
| 14818 | if (pageHeight === pageScrollHeight) { | |
| 14819 | newPaddingBottom = $el.height(); | |
| 14820 | } | |
| 14821 | $pageContentEl.css({ | |
| 14822 | 'padding-bottom': (newPaddingBottom + "px"), | |
| 14823 | }); | |
| 14824 | } | |
| 14825 | $pageContentEl.scrollTop(scrollTop, 300); | |
| 14826 | } | |
| 14827 | } | |
| 14828 | ||
| 5d51ea26 | 14829 | function scrollToElementOnClose() { |
| 5309fbda DC |
14830 | if ($pageContentEl && $pageContentEl.length > 0) { |
| 14831 | $pageContentEl.css({ | |
| 14832 | 'padding-bottom': '', | |
| 14833 | }); | |
| 14834 | } | |
| 14835 | } | |
| 14836 | function handleClick(e) { | |
| 14837 | var target = e.target; | |
| 14838 | var $target = $(target); | |
| 5d51ea26 DC |
14839 | var keyboardOpened = !app.device.desktop && app.device.cordova && ((window.Keyboard && window.Keyboard.isVisible) || (window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible)); |
| 14840 | if (keyboardOpened) { return; } | |
| 5309fbda DC |
14841 | if ($target.closest(sheet.el).length === 0) { |
| 14842 | if ( | |
| 14843 | sheet.params.closeByBackdropClick | |
| 14844 | && sheet.params.backdrop | |
| 14845 | && sheet.backdropEl | |
| 14846 | && sheet.backdropEl === target | |
| 14847 | ) { | |
| 14848 | sheet.close(); | |
| 14849 | } else if (sheet.params.closeByOutsideClick) { | |
| 14850 | sheet.close(); | |
| 14851 | } | |
| 14852 | } | |
| 14853 | } | |
| 14854 | ||
| 5d51ea26 DC |
14855 | function onKeyDown(e) { |
| 14856 | var keyCode = e.keyCode; | |
| 14857 | if (keyCode === 27 && sheet.params.closeOnEscape) { | |
| 14858 | sheet.close(); | |
| 14859 | } | |
| 14860 | } | |
| 14861 | ||
| 14862 | ||
| 14863 | var isTouched = false; | |
| 14864 | var startTouch; | |
| 14865 | var currentTouch; | |
| 14866 | var isScrolling; | |
| 14867 | var touchStartTime; | |
| 14868 | var touchesDiff; | |
| 14869 | var isMoved = false; | |
| 14870 | var isTopSheetModal; | |
| 14871 | var swipeStepTranslate; | |
| 14872 | var startTranslate; | |
| 14873 | var currentTranslate; | |
| 14874 | var sheetElOffsetHeight; | |
| 14875 | var minTranslate; | |
| 14876 | var maxTranslate; | |
| 14877 | ||
| 14878 | function handleTouchStart(e) { | |
| 14879 | if (isTouched || !(sheet.params.swipeToClose || sheet.params.swipeToStep)) { return; } | |
| 14880 | if (sheet.params.swipeHandler && $(e.target).closest(sheet.params.swipeHandler).length === 0) { | |
| 14881 | return; | |
| 14882 | } | |
| 14883 | isTouched = true; | |
| 14884 | isMoved = false; | |
| 14885 | startTouch = { | |
| 14886 | x: e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX, | |
| 14887 | y: e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY, | |
| 14888 | }; | |
| 14889 | touchStartTime = Utils.now(); | |
| 14890 | isScrolling = undefined; | |
| 14891 | isTopSheetModal = $el.hasClass('sheet-modal-top'); | |
| 14892 | } | |
| 14893 | function handleTouchMove(e) { | |
| 14894 | if (!isTouched) { return; } | |
| 14895 | currentTouch = { | |
| 14896 | x: e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX, | |
| 14897 | y: e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY, | |
| 14898 | }; | |
| 14899 | ||
| 14900 | if (typeof isScrolling === 'undefined') { | |
| 14901 | isScrolling = !!(isScrolling || Math.abs(currentTouch.x - startTouch.x) > Math.abs(currentTouch.y - startTouch.y)); | |
| 14902 | } | |
| 14903 | if (isScrolling) { | |
| 14904 | isTouched = false; | |
| 14905 | isMoved = false; | |
| 14906 | return; | |
| 14907 | } | |
| 14908 | ||
| 14909 | touchesDiff = startTouch.y - currentTouch.y; | |
| 14910 | if (!isMoved) { | |
| 14911 | sheetElOffsetHeight = $el[0].offsetHeight; | |
| 14912 | startTranslate = Utils.getTranslate($el[0], 'y'); | |
| 14913 | if (isTopSheetModal) { | |
| 14914 | minTranslate = sheet.params.swipeToClose ? -sheetElOffsetHeight : -swipeStepTranslate; | |
| 14915 | maxTranslate = 0; | |
| 14916 | } else { | |
| 14917 | minTranslate = 0; | |
| 14918 | maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : swipeStepTranslate; | |
| 14919 | } | |
| 14920 | isMoved = true; | |
| 14921 | } | |
| 14922 | currentTranslate = startTranslate - touchesDiff; | |
| 14923 | currentTranslate = Math.min(Math.max(currentTranslate, minTranslate), maxTranslate); | |
| 14924 | e.preventDefault(); | |
| 14925 | $el | |
| 14926 | .transition(0) | |
| 14927 | .transform(("translate3d(0," + currentTranslate + "px,0)")); | |
| 14928 | if (sheet.params.swipeToStep) { | |
| 14929 | var progress; | |
| 14930 | if (isTopSheetModal) { | |
| 14931 | progress = 1 - (currentTranslate / swipeStepTranslate); | |
| 14932 | } else { | |
| 14933 | progress = (swipeStepTranslate - currentTranslate) / swipeStepTranslate; | |
| 14934 | } | |
| 14935 | progress = Math.min(Math.max(progress, 0), 1); | |
| 14936 | $el.trigger('sheet:stepprogress', progress); | |
| 14937 | sheet.emit('local::stepProgress sheetStepProgress', sheet, progress); | |
| 14938 | } | |
| 14939 | } | |
| 14940 | function handleTouchEnd() { | |
| 14941 | isTouched = false; | |
| 14942 | if (!isMoved) { | |
| 14943 | return; | |
| 14944 | } | |
| 14945 | isMoved = false; | |
| 14946 | $el.transform('').transition(''); | |
| 14947 | ||
| 14948 | var direction = touchesDiff < 0 ? 'to-bottom' : 'to-top'; | |
| 14949 | ||
| 14950 | var diff = Math.abs(touchesDiff); | |
| 14951 | if (diff === 0 || currentTranslate === startTranslate) { return; } | |
| 14952 | ||
| 14953 | var timeDiff = (new Date()).getTime() - touchStartTime; | |
| 14954 | ||
| 14955 | if (!sheet.params.swipeToStep) { | |
| 14956 | if (direction !== (isTopSheetModal ? 'to-top' : 'to-bottom')) { | |
| 14957 | return; | |
| 14958 | } | |
| 14959 | if ((timeDiff < 300 && diff > 20) || (timeDiff >= 300 && diff > (sheetElOffsetHeight / 2))) { | |
| 14960 | sheet.close(); | |
| 14961 | } | |
| 14962 | return; | |
| 14963 | } | |
| 14964 | ||
| 14965 | var openDirection = isTopSheetModal ? 'to-bottom' : 'to-top'; | |
| 14966 | var closeDirection = isTopSheetModal ? 'to-top' : 'to-bottom'; | |
| 14967 | var absCurrentTranslate = Math.abs(currentTranslate); | |
| 14968 | var absSwipeStepTranslate = Math.abs(swipeStepTranslate); | |
| 14969 | ||
| 14970 | if (timeDiff < 300 && diff > 10) { | |
| 14971 | if (direction === openDirection && absCurrentTranslate < absSwipeStepTranslate) { | |
| 14972 | // open step | |
| 14973 | $el.removeClass('modal-in-swipe-step'); | |
| 14974 | $el.trigger('sheet:stepprogress', 1); | |
| 14975 | sheet.emit('local::stepProgress sheetStepProgress', sheet, 1); | |
| 14976 | $el.trigger('sheet:stepopen'); | |
| 14977 | sheet.emit('local::stepOpen sheetStepOpen', sheet); | |
| 14978 | } | |
| 14979 | if (direction === closeDirection && absCurrentTranslate > absSwipeStepTranslate) { | |
| 14980 | // close sheet | |
| 14981 | if (sheet.params.swipeToClose) { | |
| 14982 | sheet.close(); | |
| 14983 | } else { | |
| 14984 | // close step | |
| 14985 | $el.addClass('modal-in-swipe-step'); | |
| 14986 | $el.trigger('sheet:stepprogress', 0); | |
| 14987 | sheet.emit('local::stepProgress sheetStepProgress', sheet, 0); | |
| 14988 | $el.trigger('sheet:stepclose'); | |
| 14989 | sheet.emit('local::stepClose sheetStepClose', sheet); | |
| 14990 | } | |
| 14991 | } | |
| 14992 | if (direction === closeDirection && absCurrentTranslate <= absSwipeStepTranslate) { | |
| 14993 | // close step | |
| 14994 | $el.addClass('modal-in-swipe-step'); | |
| 14995 | $el.trigger('sheet:stepprogress', 0); | |
| 14996 | sheet.emit('local::stepProgress sheetStepProgress', sheet, 0); | |
| 14997 | $el.trigger('sheet:stepclose'); | |
| 14998 | sheet.emit('local::stepClose sheetStepClose', sheet); | |
| 14999 | } | |
| 15000 | return; | |
| 15001 | } | |
| 15002 | if (timeDiff >= 300) { | |
| 15003 | var stepOpened = !$el.hasClass('modal-in-swipe-step'); | |
| 15004 | if (!stepOpened) { | |
| 15005 | if (absCurrentTranslate < (absSwipeStepTranslate / 2)) { | |
| 15006 | // open step | |
| 15007 | $el.removeClass('modal-in-swipe-step'); | |
| 15008 | $el.trigger('sheet:stepprogress', 1); | |
| 15009 | sheet.emit('local::stepProgress sheetStepProgress', sheet, 1); | |
| 15010 | $el.trigger('sheet:stepopen'); | |
| 15011 | sheet.emit('local::stepOpen sheetStepOpen', sheet); | |
| 15012 | } else if ((absCurrentTranslate - absSwipeStepTranslate) > (sheetElOffsetHeight - absSwipeStepTranslate) / 2) { | |
| 15013 | // close sheet | |
| 15014 | if (sheet.params.swipeToClose) { sheet.close(); } | |
| 15015 | } | |
| 15016 | } else if (stepOpened) { | |
| 15017 | if (absCurrentTranslate > absSwipeStepTranslate + (sheetElOffsetHeight - absSwipeStepTranslate) / 2) { | |
| 15018 | // close sheet | |
| 15019 | if (sheet.params.swipeToClose) { sheet.close(); } | |
| 15020 | } else if (absCurrentTranslate > absSwipeStepTranslate / 2) { | |
| 15021 | // close step | |
| 15022 | $el.addClass('modal-in-swipe-step'); | |
| 15023 | $el.trigger('sheet:stepprogress', 0); | |
| 15024 | sheet.emit('local::stepProgress sheetStepProgress', sheet, 0); | |
| 15025 | $el.trigger('sheet:stepclose'); | |
| 15026 | sheet.emit('local::stepClose sheetStepClose', sheet); | |
| 15027 | } | |
| 15028 | } | |
| 15029 | } | |
| 15030 | } | |
| 15031 | ||
| 15032 | function setSwipeStep(byResize) { | |
| 15033 | var $swipeStepEl = $el.find('.sheet-modal-swipe-step').eq(0); | |
| 15034 | if (!$swipeStepEl.length) { return; } | |
| 15035 | if ($el.hasClass('sheet-modal-top')) { | |
| 15036 | swipeStepTranslate = -($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight); | |
| 15037 | } else { | |
| 15038 | swipeStepTranslate = $el[0].offsetHeight - ($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight); | |
| 15039 | } | |
| 15040 | $el[0].style.setProperty('--f7-sheet-swipe-step', (swipeStepTranslate + "px")); | |
| 15041 | if (!byResize) { | |
| 15042 | $el.addClass('modal-in-swipe-step'); | |
| 15043 | } | |
| 15044 | } | |
| 15045 | ||
| 15046 | function onResize() { | |
| 15047 | setSwipeStep(true); | |
| 15048 | } | |
| 15049 | ||
| 15050 | var passive = Support.passiveListener ? { passive: true } : false; | |
| 15051 | if (sheet.params.swipeToClose || sheet.params.swipeToStep) { | |
| 15052 | $el.on(app.touchEvents.start, handleTouchStart, passive); | |
| 15053 | app.on('touchmove', handleTouchMove); | |
| 15054 | app.on('touchend:passive', handleTouchEnd); | |
| 15055 | sheet.once('sheetDestroy', function () { | |
| 15056 | $el.off(app.touchEvents.start, handleTouchStart, passive); | |
| 15057 | app.off('touchmove', handleTouchMove); | |
| 15058 | app.off('touchend:passive', handleTouchEnd); | |
| 15059 | }); | |
| 15060 | } | |
| 15061 | ||
| 5309fbda | 15062 | sheet.on('sheetOpen', function () { |
| 5d51ea26 DC |
15063 | if (sheet.params.closeOnEscape) { |
| 15064 | $(document).on('keydown', onKeyDown); | |
| 15065 | } | |
| 15066 | if (sheet.params.swipeToStep) { | |
| 15067 | setSwipeStep(); | |
| 15068 | app.on('resize', onResize); | |
| 15069 | } | |
| 5309fbda | 15070 | if (sheet.params.scrollToEl) { |
| 5d51ea26 | 15071 | scrollToElementOnOpen(); |
| 5309fbda DC |
15072 | } |
| 15073 | }); | |
| 15074 | sheet.on('sheetOpened', function () { | |
| 15075 | if (sheet.params.closeByOutsideClick || sheet.params.closeByBackdropClick) { | |
| 15076 | app.on('click', handleClick); | |
| 15077 | } | |
| 15078 | }); | |
| 15079 | sheet.on('sheetClose', function () { | |
| 5d51ea26 DC |
15080 | if (sheet.params.swipeToStep) { |
| 15081 | $el.removeClass('modal-in-swipe-step'); | |
| 15082 | app.off('resize', onResize); | |
| 15083 | } | |
| 15084 | if (sheet.params.closeOnEscape) { | |
| 15085 | $(document).off('keydown', onKeyDown); | |
| 15086 | } | |
| 5309fbda | 15087 | if (sheet.params.scrollToEl) { |
| 5d51ea26 | 15088 | scrollToElementOnClose(); |
| 5309fbda DC |
15089 | } |
| 15090 | if (sheet.params.closeByOutsideClick || sheet.params.closeByBackdropClick) { | |
| 15091 | app.off('click', handleClick); | |
| 15092 | } | |
| 15093 | }); | |
| 15094 | ||
| 5d51ea26 DC |
15095 | sheet.stepOpen = function stepOpen() { |
| 15096 | $el.removeClass('modal-in-swipe-step'); | |
| 15097 | }; | |
| 15098 | sheet.stepClose = function stepClose() { | |
| 15099 | $el.addClass('modal-in-swipe-step'); | |
| 15100 | }; | |
| 15101 | sheet.stepToggle = function stepToggle() { | |
| 15102 | $el.toggleClass('modal-in-swipe-step'); | |
| 15103 | }; | |
| 5309fbda DC |
15104 | |
| 15105 | $el[0].f7Modal = sheet; | |
| 15106 | ||
| 15107 | return sheet; | |
| 15108 | } | |
| 15109 | ||
| 5d51ea26 DC |
15110 | if ( Modal ) Sheet.__proto__ = Modal; |
| 15111 | Sheet.prototype = Object.create( Modal && Modal.prototype ); | |
| 5309fbda DC |
15112 | Sheet.prototype.constructor = Sheet; |
| 15113 | ||
| 15114 | return Sheet; | |
| 15115 | }(Modal)); | |
| 15116 | ||
| 15117 | var Sheet$1 = { | |
| 15118 | name: 'sheet', | |
| 15119 | params: { | |
| 15120 | sheet: { | |
| 5d51ea26 DC |
15121 | backdrop: undefined, |
| 15122 | backdropEl: undefined, | |
| 5309fbda DC |
15123 | closeByBackdropClick: true, |
| 15124 | closeByOutsideClick: false, | |
| 5d51ea26 DC |
15125 | closeOnEscape: false, |
| 15126 | swipeToClose: false, | |
| 15127 | swipeToStep: false, | |
| 15128 | swipeHandler: null, | |
| 5309fbda DC |
15129 | }, |
| 15130 | }, | |
| 15131 | static: { | |
| 15132 | Sheet: Sheet, | |
| 15133 | }, | |
| 15134 | create: function create() { | |
| 15135 | var app = this; | |
| 5309fbda DC |
15136 | app.sheet = Utils.extend( |
| 15137 | {}, | |
| 15138 | ModalMethods({ | |
| 15139 | app: app, | |
| 15140 | constructor: Sheet, | |
| 15141 | defaultSelector: '.sheet-modal.modal-in', | |
| 5d51ea26 DC |
15142 | }), |
| 15143 | { | |
| 15144 | stepOpen: function stepOpen(sheet) { | |
| 15145 | var sheetInstance = app.sheet.get(sheet); | |
| 15146 | if (sheetInstance && sheetInstance.stepOpen) { return sheetInstance.stepOpen(); } | |
| 15147 | return undefined; | |
| 15148 | }, | |
| 15149 | stepClose: function stepClose(sheet) { | |
| 15150 | var sheetInstance = app.sheet.get(sheet); | |
| 15151 | if (sheetInstance && sheetInstance.stepClose) { return sheetInstance.stepClose(); } | |
| 15152 | return undefined; | |
| 15153 | }, | |
| 15154 | stepToggle: function stepToggle(sheet) { | |
| 15155 | var sheetInstance = app.sheet.get(sheet); | |
| 15156 | if (sheetInstance && sheetInstance.stepToggle) { return sheetInstance.stepToggle(); } | |
| 15157 | return undefined; | |
| 15158 | }, | |
| 15159 | } | |
| 5309fbda DC |
15160 | ); |
| 15161 | }, | |
| 15162 | clicks: { | |
| 15163 | '.sheet-open': function openSheet($clickedEl, data) { | |
| 15164 | if ( data === void 0 ) data = {}; | |
| 15165 | ||
| 15166 | var app = this; | |
| 15167 | if ($('.sheet-modal.modal-in').length > 0 && data.sheet && $(data.sheet)[0] !== $('.sheet-modal.modal-in')[0]) { | |
| 15168 | app.sheet.close('.sheet-modal.modal-in'); | |
| 15169 | } | |
| 15170 | app.sheet.open(data.sheet, data.animate); | |
| 15171 | }, | |
| 15172 | '.sheet-close': function closeSheet($clickedEl, data) { | |
| 15173 | if ( data === void 0 ) data = {}; | |
| 15174 | ||
| 15175 | var app = this; | |
| 15176 | app.sheet.close(data.sheet, data.animate); | |
| 15177 | }, | |
| 15178 | }, | |
| 15179 | }; | |
| 15180 | ||
| 5d51ea26 | 15181 | var Toast = /*@__PURE__*/(function (Modal) { |
| 5309fbda DC |
15182 | function Toast(app, params) { |
| 15183 | var extendedParams = Utils.extend({ | |
| 15184 | on: {}, | |
| 15185 | }, app.params.toast, params); | |
| 15186 | ||
| 15187 | // Extends with open/close Modal methods; | |
| 5d51ea26 | 15188 | Modal.call(this, app, extendedParams); |
| 5309fbda DC |
15189 | |
| 15190 | var toast = this; | |
| 15191 | ||
| 15192 | toast.app = app; | |
| 15193 | ||
| 15194 | toast.params = extendedParams; | |
| 15195 | ||
| 15196 | var ref = toast.params; | |
| 15197 | var closeButton = ref.closeButton; | |
| 15198 | var closeTimeout = ref.closeTimeout; | |
| 15199 | ||
| 15200 | var $el; | |
| 15201 | if (!toast.params.el) { | |
| 15202 | // Find Element | |
| 15203 | var toastHtml = toast.render(); | |
| 15204 | ||
| 15205 | $el = $(toastHtml); | |
| 15206 | } else { | |
| 15207 | $el = $(toast.params.el); | |
| 15208 | } | |
| 15209 | ||
| 15210 | if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| 15211 | return $el[0].f7Modal; | |
| 15212 | } | |
| 15213 | ||
| 15214 | if ($el.length === 0) { | |
| 15215 | return toast.destroy(); | |
| 15216 | } | |
| 15217 | ||
| 15218 | Utils.extend(toast, { | |
| 15219 | $el: $el, | |
| 15220 | el: $el[0], | |
| 15221 | type: 'toast', | |
| 15222 | }); | |
| 15223 | ||
| 15224 | $el[0].f7Modal = toast; | |
| 15225 | ||
| 15226 | if (closeButton) { | |
| 15227 | $el.find('.toast-button').on('click', function () { | |
| 15228 | toast.emit('local::closeButtonClick toastCloseButtonClick', toast); | |
| 15229 | toast.close(); | |
| 15230 | }); | |
| 15231 | ||
| 15232 | toast.on('beforeDestroy', function () { | |
| 15233 | $el.find('.toast-button').off('click'); | |
| 15234 | }); | |
| 15235 | } | |
| 15236 | ||
| 15237 | var timeoutId; | |
| 15238 | toast.on('open', function () { | |
| 15239 | $('.toast.modal-in').each(function (index, openedEl) { | |
| 15240 | var toastInstance = app.toast.get(openedEl); | |
| 15241 | if (openedEl !== toast.el && toastInstance) { | |
| 15242 | toastInstance.close(); | |
| 15243 | } | |
| 15244 | }); | |
| 15245 | if (closeTimeout) { | |
| 15246 | timeoutId = Utils.nextTick(function () { | |
| 15247 | toast.close(); | |
| 15248 | }, closeTimeout); | |
| 15249 | } | |
| 15250 | }); | |
| 15251 | toast.on('close', function () { | |
| 15252 | win.clearTimeout(timeoutId); | |
| 15253 | }); | |
| 15254 | ||
| 15255 | if (toast.params.destroyOnClose) { | |
| 15256 | toast.once('closed', function () { | |
| 15257 | setTimeout(function () { | |
| 15258 | toast.destroy(); | |
| 15259 | }, 0); | |
| 15260 | }); | |
| 15261 | } | |
| 15262 | ||
| 15263 | return toast; | |
| 15264 | } | |
| 15265 | ||
| 5d51ea26 DC |
15266 | if ( Modal ) Toast.__proto__ = Modal; |
| 15267 | Toast.prototype = Object.create( Modal && Modal.prototype ); | |
| 5309fbda DC |
15268 | Toast.prototype.constructor = Toast; |
| 15269 | ||
| 15270 | Toast.prototype.render = function render () { | |
| 15271 | var toast = this; | |
| 15272 | if (toast.params.render) { return toast.params.render.call(toast, toast); } | |
| 15273 | var ref = toast.params; | |
| 15274 | var position = ref.position; | |
| 15275 | var cssClass = ref.cssClass; | |
| 15276 | var icon = ref.icon; | |
| 15277 | var text = ref.text; | |
| 15278 | var closeButton = ref.closeButton; | |
| 15279 | var closeButtonColor = ref.closeButtonColor; | |
| 15280 | var closeButtonText = ref.closeButtonText; | |
| 15281 | return ("\n <div class=\"toast toast-" + position + " " + (cssClass || '') + " " + (icon ? 'toast-with-icon' : '') + "\">\n <div class=\"toast-content\">\n " + (icon ? ("<div class=\"toast-icon\">" + icon + "</div>") : '') + "\n <div class=\"toast-text\">" + text + "</div>\n " + (closeButton && !icon ? ("\n <a class=\"toast-button button " + (closeButtonColor ? ("color-" + closeButtonColor) : '') + "\">" + closeButtonText + "</a>\n ").trim() : '') + "\n </div>\n </div>\n ").trim(); | |
| 15282 | }; | |
| 15283 | ||
| 15284 | return Toast; | |
| 15285 | }(Modal)); | |
| 15286 | ||
| 15287 | var Toast$1 = { | |
| 15288 | name: 'toast', | |
| 15289 | static: { | |
| 15290 | Toast: Toast, | |
| 15291 | }, | |
| 15292 | create: function create() { | |
| 15293 | var app = this; | |
| 15294 | app.toast = Utils.extend( | |
| 15295 | {}, | |
| 15296 | ModalMethods({ | |
| 15297 | app: app, | |
| 15298 | constructor: Toast, | |
| 15299 | defaultSelector: '.toast.modal-in', | |
| 15300 | }), | |
| 15301 | { | |
| 15302 | // Shortcuts | |
| 15303 | show: function show(params) { | |
| 15304 | Utils.extend(params, { | |
| 15305 | destroyOnClose: true, | |
| 15306 | }); | |
| 15307 | return new Toast(app, params).open(); | |
| 15308 | }, | |
| 15309 | } | |
| 15310 | ); | |
| 15311 | }, | |
| 15312 | params: { | |
| 15313 | toast: { | |
| 15314 | icon: null, | |
| 15315 | text: null, | |
| 15316 | position: 'bottom', | |
| 15317 | closeButton: false, | |
| 15318 | closeButtonColor: null, | |
| 15319 | closeButtonText: 'Ok', | |
| 15320 | closeTimeout: null, | |
| 15321 | cssClass: null, | |
| 15322 | render: null, | |
| 15323 | }, | |
| 15324 | }, | |
| 15325 | }; | |
| 15326 | ||
| 15327 | var Preloader = { | |
| 15328 | init: function init(el) { | |
| 15329 | var app = this; | |
| 15330 | var $el = $(el); | |
| 15331 | if ($el.length === 0 || $el.children('.preloader-inner').length > 0 || $el.children('.preloader-inner-line').length > 0) { return; } | |
| 15332 | $el.append(Utils[((app.theme) + "PreloaderContent")]); | |
| 15333 | }, | |
| 15334 | // Modal | |
| 15335 | visible: false, | |
| 15336 | show: function show(color) { | |
| 15337 | if ( color === void 0 ) color = 'white'; | |
| 15338 | ||
| 15339 | var app = this; | |
| 15340 | if (Preloader.visible) { return; } | |
| 15341 | var preloaderInner = Utils[((app.theme) + "PreloaderContent")] || ''; | |
| 15342 | $('html').addClass('with-modal-preloader'); | |
| 15343 | app.root.append(("\n <div class=\"preloader-backdrop\"></div>\n <div class=\"preloader-modal\">\n <div class=\"preloader color-" + color + "\">" + preloaderInner + "</div>\n </div>\n ")); | |
| 15344 | Preloader.visible = true; | |
| 15345 | }, | |
| 15346 | hide: function hide() { | |
| 15347 | var app = this; | |
| 15348 | if (!Preloader.visible) { return; } | |
| 15349 | $('html').removeClass('with-modal-preloader'); | |
| 15350 | app.root.find('.preloader-backdrop, .preloader-modal').remove(); | |
| 15351 | Preloader.visible = false; | |
| 15352 | }, | |
| 15353 | }; | |
| 15354 | var Preloader$1 = { | |
| 15355 | name: 'preloader', | |
| 15356 | create: function create() { | |
| 15357 | var app = this; | |
| 15358 | Utils.extend(app, { | |
| 15359 | preloader: { | |
| 15360 | init: Preloader.init.bind(app), | |
| 15361 | show: Preloader.show.bind(app), | |
| 15362 | hide: Preloader.hide.bind(app), | |
| 15363 | }, | |
| 15364 | }); | |
| 15365 | }, | |
| 15366 | on: { | |
| 15367 | photoBrowserOpen: function photoBrowserOpen(pb) { | |
| 15368 | var app = this; | |
| 15369 | pb.$el.find('.preloader').each(function (index, preloaderEl) { | |
| 15370 | app.preloader.init(preloaderEl); | |
| 15371 | }); | |
| 15372 | }, | |
| 15373 | pageInit: function pageInit(page) { | |
| 15374 | var app = this; | |
| 15375 | page.$el.find('.preloader').each(function (index, preloaderEl) { | |
| 15376 | app.preloader.init(preloaderEl); | |
| 15377 | }); | |
| 15378 | }, | |
| 15379 | }, | |
| 15380 | vnode: { | |
| 15381 | preloader: { | |
| 15382 | insert: function insert(vnode) { | |
| 15383 | var app = this; | |
| 15384 | var preloaderEl = vnode.elm; | |
| 15385 | app.preloader.init(preloaderEl); | |
| 15386 | }, | |
| 15387 | }, | |
| 15388 | }, | |
| 15389 | }; | |
| 15390 | ||
| 15391 | var Progressbar = { | |
| 15392 | set: function set() { | |
| 15393 | var assign; | |
| 15394 | ||
| 15395 | var args = [], len = arguments.length; | |
| 15396 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 15397 | var app = this; | |
| 15398 | var el = args[0]; | |
| 15399 | var progress = args[1]; | |
| 15400 | var duration = args[2]; | |
| 15401 | if (typeof args[0] === 'number') { | |
| 15402 | (assign = args, progress = assign[0], duration = assign[1]); | |
| 15403 | el = app.root; | |
| 15404 | } | |
| 15405 | if (typeof progress === 'undefined' || progress === null) { return el; } | |
| 15406 | if (!progress) { progress = 0; } | |
| 15407 | ||
| 15408 | var $el = $(el || app.root); | |
| 15409 | if ($el.length === 0) { | |
| 15410 | return el; | |
| 15411 | } | |
| 15412 | var progressNormalized = Math.min(Math.max(progress, 0), 100); | |
| 15413 | var $progressbarEl; | |
| 15414 | if ($el.hasClass('progressbar')) { $progressbarEl = $el.eq(0); } | |
| 15415 | else { | |
| 15416 | $progressbarEl = $el.children('.progressbar'); | |
| 15417 | } | |
| 15418 | if ($progressbarEl.length === 0 || $progressbarEl.hasClass('progressbar-infinite')) { | |
| 15419 | return $progressbarEl; | |
| 15420 | } | |
| 15421 | var $progressbarLine = $progressbarEl.children('span'); | |
| 15422 | if ($progressbarLine.length === 0) { | |
| 15423 | $progressbarLine = $('<span></span>'); | |
| 15424 | $progressbarEl.append($progressbarLine); | |
| 15425 | } | |
| 15426 | $progressbarLine | |
| 15427 | .transition(typeof duration !== 'undefined' ? duration : '') | |
| 15428 | .transform(("translate3d(" + ((-100 + progressNormalized)) + "%,0,0)")); | |
| 15429 | ||
| 15430 | return $progressbarEl[0]; | |
| 15431 | }, | |
| 15432 | show: function show() { | |
| 15433 | var assign, assign$1; | |
| 15434 | ||
| 15435 | var args = [], len = arguments.length; | |
| 15436 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 15437 | var app = this; | |
| 15438 | ||
| 15439 | // '.page', 50, 'multi' | |
| 15440 | var el = args[0]; | |
| 15441 | var progress = args[1]; | |
| 15442 | var color = args[2]; | |
| 15443 | var type = 'determined'; | |
| 15444 | ||
| 15445 | if (args.length === 2) { | |
| 15446 | if ((typeof args[0] === 'string' || typeof args[0] === 'object') && typeof args[1] === 'string') { | |
| 15447 | // '.page', 'multi' | |
| 15448 | (assign = args, el = assign[0], color = assign[1], progress = assign[2]); | |
| 15449 | type = 'infinite'; | |
| 15450 | } else if (typeof args[0] === 'number' && typeof args[1] === 'string') { | |
| 15451 | // 50, 'multi' | |
| 15452 | (assign$1 = args, progress = assign$1[0], color = assign$1[1]); | |
| 15453 | el = app.root; | |
| 15454 | } | |
| 15455 | } else if (args.length === 1) { | |
| 15456 | if (typeof args[0] === 'number') { | |
| 15457 | el = app.root; | |
| 15458 | progress = args[0]; | |
| 15459 | } else if (typeof args[0] === 'string') { | |
| 15460 | type = 'infinite'; | |
| 15461 | el = app.root; | |
| 15462 | color = args[0]; | |
| 15463 | } | |
| 15464 | } else if (args.length === 0) { | |
| 15465 | type = 'infinite'; | |
| 15466 | el = app.root; | |
| 15467 | } | |
| 15468 | ||
| 15469 | var $el = $(el); | |
| 15470 | if ($el.length === 0) { return undefined; } | |
| 15471 | ||
| 15472 | var $progressbarEl; | |
| 15473 | if ($el.hasClass('progressbar') || $el.hasClass('progressbar-infinite')) { | |
| 15474 | $progressbarEl = $el; | |
| 15475 | } else { | |
| 15476 | $progressbarEl = $el.children('.progressbar:not(.progressbar-out), .progressbar-infinite:not(.progressbar-out)'); | |
| 15477 | if ($progressbarEl.length === 0) { | |
| 15478 | $progressbarEl = $(("\n <span class=\"progressbar" + (type === 'infinite' ? '-infinite' : '') + (color ? (" color-" + color) : '') + " progressbar-in\">\n " + (type === 'infinite' ? '' : '<span></span>') + "\n </span>")); | |
| 15479 | $el.append($progressbarEl); | |
| 15480 | } | |
| 15481 | } | |
| 15482 | ||
| 15483 | if (typeof progress !== 'undefined') { | |
| 15484 | app.progressbar.set($progressbarEl, progress); | |
| 15485 | } | |
| 15486 | ||
| 15487 | return $progressbarEl[0]; | |
| 15488 | }, | |
| 15489 | hide: function hide(el, removeAfterHide) { | |
| 15490 | if ( removeAfterHide === void 0 ) removeAfterHide = true; | |
| 15491 | ||
| 15492 | var app = this; | |
| 15493 | var $el = $(el || app.root); | |
| 15494 | if ($el.length === 0) { return undefined; } | |
| 15495 | var $progressbarEl; | |
| 15496 | if ($el.hasClass('progressbar') || $el.hasClass('progressbar-infinite')) { | |
| 15497 | $progressbarEl = $el; | |
| 15498 | } else { | |
| 15499 | $progressbarEl = $el.children('.progressbar, .progressbar-infinite'); | |
| 15500 | } | |
| 15501 | if ($progressbarEl.length === 0 || !$progressbarEl.hasClass('progressbar-in') || $progressbarEl.hasClass('progressbar-out')) { | |
| 15502 | return $progressbarEl; | |
| 15503 | } | |
| 15504 | $progressbarEl | |
| 15505 | .removeClass('progressbar-in') | |
| 15506 | .addClass('progressbar-out') | |
| 15507 | .animationEnd(function () { | |
| 15508 | if (removeAfterHide) { | |
| 15509 | $progressbarEl.remove(); | |
| 15510 | } | |
| 15511 | }); | |
| 15512 | return $progressbarEl; | |
| 15513 | }, | |
| 15514 | }; | |
| 15515 | ||
| 15516 | var Progressbar$1 = { | |
| 15517 | name: 'progressbar', | |
| 15518 | create: function create() { | |
| 15519 | var app = this; | |
| 15520 | Utils.extend(app, { | |
| 15521 | progressbar: { | |
| 15522 | set: Progressbar.set.bind(app), | |
| 15523 | show: Progressbar.show.bind(app), | |
| 15524 | hide: Progressbar.hide.bind(app), | |
| 15525 | }, | |
| 15526 | }); | |
| 15527 | }, | |
| 15528 | on: { | |
| 15529 | pageInit: function pageInit(page) { | |
| 15530 | var app = this; | |
| 15531 | page.$el.find('.progressbar').each(function (index, progressbarEl) { | |
| 15532 | var $progressbarEl = $(progressbarEl); | |
| 15533 | app.progressbar.set($progressbarEl, $progressbarEl.attr('data-progress')); | |
| 15534 | }); | |
| 15535 | }, | |
| 15536 | }, | |
| 5d51ea26 DC |
15537 | vnode: { |
| 15538 | progressbar: { | |
| 15539 | insert: function insert(vnode) { | |
| 15540 | var app = this; | |
| 15541 | var el = vnode.elm; | |
| 15542 | app.progressbar.set(el, el.getAttribute('data-progress')); | |
| 15543 | }, | |
| 15544 | update: function update(vnode) { | |
| 15545 | var app = this; | |
| 15546 | var el = vnode.elm; | |
| 15547 | app.progressbar.set(el, el.getAttribute('data-progress')); | |
| 15548 | }, | |
| 15549 | }, | |
| 15550 | }, | |
| 5309fbda DC |
15551 | }; |
| 15552 | ||
| 15553 | var Sortable = { | |
| 15554 | init: function init() { | |
| 15555 | var app = this; | |
| 15556 | var isTouched; | |
| 15557 | var isMoved; | |
| 15558 | var touchStartY; | |
| 15559 | var touchesDiff; | |
| 15560 | var $sortingEl; | |
| 15561 | var $sortingItems; | |
| 15562 | var $sortableContainer; | |
| 15563 | var sortingElHeight; | |
| 15564 | var minTop; | |
| 15565 | var maxTop; | |
| 15566 | var $insertAfterEl; | |
| 15567 | var $insertBeforeEl; | |
| 15568 | var indexFrom; | |
| 15569 | var $pageEl; | |
| 15570 | var $pageContentEl; | |
| 15571 | var pageHeight; | |
| 15572 | var pageOffset; | |
| 15573 | var sortingElOffsetLocal; | |
| 15574 | var sortingElOffsetTop; | |
| 15575 | var initialScrollTop; | |
| 15576 | ||
| 15577 | function handleTouchStart(e) { | |
| 15578 | isMoved = false; | |
| 15579 | isTouched = true; | |
| 15580 | touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 15581 | $sortingEl = $(this).parent('li'); | |
| 15582 | indexFrom = $sortingEl.index(); | |
| 15583 | $sortableContainer = $sortingEl.parents('.sortable'); | |
| 15584 | var $listGroup = $sortingEl.parents('.list-group'); | |
| 15585 | if ($listGroup.length && $listGroup.parents($sortableContainer).length) { | |
| 15586 | $sortableContainer = $listGroup; | |
| 15587 | } | |
| 15588 | $sortingItems = $sortableContainer.children('ul').children('li'); | |
| 15589 | if (app.panel) { app.panel.allowOpen = false; } | |
| 15590 | if (app.swipeout) { app.swipeout.allow = false; } | |
| 15591 | } | |
| 15592 | function handleTouchMove(e) { | |
| 15593 | if (!isTouched || !$sortingEl) { return; } | |
| 15594 | var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 15595 | if (!isMoved) { | |
| 15596 | $pageEl = $sortingEl.parents('.page'); | |
| 15597 | $pageContentEl = $sortingEl.parents('.page-content'); | |
| 15598 | var paddingTop = parseInt($pageContentEl.css('padding-top'), 10); | |
| 15599 | var paddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10); | |
| 15600 | initialScrollTop = $pageContentEl[0].scrollTop; | |
| 15601 | pageOffset = $pageEl.offset().top + paddingTop; | |
| 15602 | pageHeight = $pageEl.height() - paddingTop - paddingBottom; | |
| 15603 | $sortingEl.addClass('sorting'); | |
| 15604 | $sortableContainer.addClass('sortable-sorting'); | |
| 15605 | sortingElOffsetLocal = $sortingEl[0].offsetTop; | |
| 15606 | minTop = $sortingEl[0].offsetTop; | |
| 15607 | maxTop = $sortingEl.parent().height() - sortingElOffsetLocal - $sortingEl.height(); | |
| 15608 | sortingElHeight = $sortingEl[0].offsetHeight; | |
| 15609 | sortingElOffsetTop = $sortingEl.offset().top; | |
| 15610 | } | |
| 15611 | isMoved = true; | |
| 15612 | ||
| 15613 | e.preventDefault(); | |
| 15614 | e.f7PreventSwipePanel = true; | |
| 15615 | ||
| 15616 | touchesDiff = pageY - touchStartY; | |
| 15617 | ||
| 15618 | var translateScrollOffset = $pageContentEl[0].scrollTop - initialScrollTop; | |
| 15619 | var translate = Math.min(Math.max(touchesDiff + translateScrollOffset, -minTop), maxTop); | |
| 15620 | $sortingEl.transform(("translate3d(0," + translate + "px,0)")); | |
| 15621 | ||
| 15622 | var scrollAddition = 44; | |
| 15623 | var allowScroll = true; | |
| 15624 | if ((touchesDiff + translateScrollOffset) + scrollAddition < -minTop) { | |
| 15625 | allowScroll = false; | |
| 15626 | } | |
| 15627 | if ((touchesDiff + translateScrollOffset) - scrollAddition > maxTop) { | |
| 15628 | allowScroll = false; | |
| 15629 | } | |
| 15630 | ||
| 15631 | $insertBeforeEl = undefined; | |
| 15632 | $insertAfterEl = undefined; | |
| 15633 | ||
| 15634 | var scrollDiff; | |
| 15635 | if (allowScroll) { | |
| 15636 | if (sortingElOffsetTop + touchesDiff + sortingElHeight + scrollAddition > pageOffset + pageHeight) { | |
| 15637 | // To Bottom | |
| 15638 | scrollDiff = (sortingElOffsetTop + touchesDiff + sortingElHeight + scrollAddition) - (pageOffset + pageHeight); | |
| 15639 | } | |
| 15640 | if (sortingElOffsetTop + touchesDiff < pageOffset + scrollAddition) { | |
| 15641 | // To Top | |
| 15642 | scrollDiff = (sortingElOffsetTop + touchesDiff) - pageOffset - scrollAddition; | |
| 15643 | } | |
| 15644 | if (scrollDiff) { | |
| 15645 | $pageContentEl[0].scrollTop += scrollDiff; | |
| 15646 | } | |
| 15647 | } | |
| 15648 | ||
| 15649 | $sortingItems.each(function (index, el) { | |
| 15650 | var $currentEl = $(el); | |
| 15651 | if ($currentEl[0] === $sortingEl[0]) { return; } | |
| 15652 | var currentElOffset = $currentEl[0].offsetTop; | |
| 15653 | var currentElHeight = $currentEl.height(); | |
| 15654 | var sortingElOffset = sortingElOffsetLocal + translate; | |
| 15655 | ||
| 15656 | if ((sortingElOffset >= currentElOffset - (currentElHeight / 2)) && $sortingEl.index() < $currentEl.index()) { | |
| 15657 | $currentEl.transform(("translate3d(0, " + (-sortingElHeight) + "px,0)")); | |
| 15658 | $insertAfterEl = $currentEl; | |
| 15659 | $insertBeforeEl = undefined; | |
| 15660 | } else if ((sortingElOffset <= currentElOffset + (currentElHeight / 2)) && $sortingEl.index() > $currentEl.index()) { | |
| 15661 | $currentEl.transform(("translate3d(0, " + sortingElHeight + "px,0)")); | |
| 15662 | $insertAfterEl = undefined; | |
| 15663 | if (!$insertBeforeEl) { $insertBeforeEl = $currentEl; } | |
| 15664 | } else { | |
| 15665 | $currentEl.transform('translate3d(0, 0%,0)'); | |
| 15666 | } | |
| 15667 | }); | |
| 15668 | } | |
| 15669 | function handleTouchEnd() { | |
| 15670 | if (!isTouched || !isMoved) { | |
| 15671 | isTouched = false; | |
| 15672 | isMoved = false; | |
| 15673 | if (isTouched && !isMoved) { | |
| 15674 | if (app.panel) { app.panel.allowOpen = true; } | |
| 15675 | if (app.swipeout) { app.swipeout.allow = true; } | |
| 15676 | } | |
| 15677 | return; | |
| 15678 | } | |
| 15679 | if (app.panel) { app.panel.allowOpen = true; } | |
| 15680 | if (app.swipeout) { app.swipeout.allow = true; } | |
| 15681 | ||
| 15682 | $sortingItems.transform(''); | |
| 15683 | $sortingEl.removeClass('sorting'); | |
| 15684 | $sortableContainer.removeClass('sortable-sorting'); | |
| 15685 | ||
| 15686 | var indexTo; | |
| 15687 | if ($insertAfterEl) { indexTo = $insertAfterEl.index(); } | |
| 15688 | else if ($insertBeforeEl) { indexTo = $insertBeforeEl.index(); } | |
| 15689 | ||
| 15690 | if (app.params.sortable.moveElements) { | |
| 15691 | if ($insertAfterEl) { | |
| 15692 | $sortingEl.insertAfter($insertAfterEl); | |
| 15693 | } | |
| 15694 | if ($insertBeforeEl) { | |
| 15695 | $sortingEl.insertBefore($insertBeforeEl); | |
| 15696 | } | |
| 15697 | } | |
| 15698 | ||
| 15699 | if (($insertAfterEl || $insertBeforeEl) | |
| 15700 | && $sortableContainer.hasClass('virtual-list') | |
| 15701 | ) { | |
| 15702 | indexFrom = $sortingEl[0].f7VirtualListIndex; | |
| 15703 | if (typeof indexFrom === 'undefined') { indexFrom = $sortingEl.attr('data-virtual-list-index'); } | |
| 15704 | if ($insertBeforeEl) { | |
| 15705 | indexTo = $insertBeforeEl[0].f7VirtualListIndex; | |
| 15706 | if (typeof indexTo === 'undefined') { indexTo = $insertBeforeEl.attr('data-virtual-list-index'); } | |
| 15707 | } else { | |
| 15708 | indexTo = $insertAfterEl[0].f7VirtualListIndex; | |
| 15709 | if (typeof indexTo === 'undefined') { indexTo = $insertAfterEl.attr('data-virtual-list-index'); } | |
| 15710 | } | |
| 15711 | if (indexTo !== null) { indexTo = parseInt(indexTo, 10); } | |
| 15712 | else { indexTo = undefined; } | |
| 15713 | ||
| 15714 | var virtualList = $sortableContainer[0].f7VirtualList; | |
| 15715 | if (virtualList) { virtualList.moveItem(indexFrom, indexTo); } | |
| 15716 | } | |
| 15717 | if (typeof indexTo !== 'undefined' && !Number.isNaN(indexTo) && indexTo !== indexFrom) { | |
| 15718 | $sortingEl.trigger('sortable:sort', { from: indexFrom, to: indexTo }); | |
| 15719 | app.emit('sortableSort', $sortingEl[0], { from: indexFrom, to: indexTo }); | |
| 15720 | } | |
| 15721 | ||
| 15722 | $insertBeforeEl = undefined; | |
| 15723 | $insertAfterEl = undefined; | |
| 15724 | isTouched = false; | |
| 15725 | isMoved = false; | |
| 15726 | } | |
| 15727 | ||
| 15728 | var activeListener = app.support.passiveListener ? { passive: false, capture: false } : false; | |
| 15729 | ||
| 15730 | $(doc).on(app.touchEvents.start, '.list.sortable .sortable-handler', handleTouchStart, activeListener); | |
| 15731 | app.on('touchmove:active', handleTouchMove); | |
| 15732 | app.on('touchend:passive', handleTouchEnd); | |
| 15733 | }, | |
| 15734 | enable: function enable(el) { | |
| 15735 | if ( el === void 0 ) el = '.list.sortable'; | |
| 15736 | ||
| 15737 | var app = this; | |
| 15738 | var $el = $(el); | |
| 15739 | if ($el.length === 0) { return; } | |
| 15740 | $el.addClass('sortable-enabled'); | |
| 15741 | $el.trigger('sortable:enable'); | |
| 15742 | app.emit('sortableEnable', $el[0]); | |
| 15743 | }, | |
| 15744 | disable: function disable(el) { | |
| 15745 | if ( el === void 0 ) el = '.list.sortable'; | |
| 15746 | ||
| 15747 | var app = this; | |
| 15748 | var $el = $(el); | |
| 15749 | if ($el.length === 0) { return; } | |
| 15750 | $el.removeClass('sortable-enabled'); | |
| 15751 | $el.trigger('sortable:disable'); | |
| 15752 | app.emit('sortableDisable', $el[0]); | |
| 15753 | }, | |
| 15754 | toggle: function toggle(el) { | |
| 15755 | if ( el === void 0 ) el = '.list.sortable'; | |
| 15756 | ||
| 15757 | var app = this; | |
| 15758 | var $el = $(el); | |
| 15759 | if ($el.length === 0) { return; } | |
| 15760 | if ($el.hasClass('sortable-enabled')) { | |
| 15761 | app.sortable.disable($el); | |
| 15762 | } else { | |
| 15763 | app.sortable.enable($el); | |
| 15764 | } | |
| 15765 | }, | |
| 15766 | }; | |
| 15767 | var Sortable$1 = { | |
| 15768 | name: 'sortable', | |
| 15769 | params: { | |
| 15770 | sortable: { | |
| 15771 | moveElements: true, | |
| 15772 | }, | |
| 15773 | }, | |
| 15774 | create: function create() { | |
| 15775 | var app = this; | |
| 15776 | Utils.extend(app, { | |
| 15777 | sortable: { | |
| 15778 | init: Sortable.init.bind(app), | |
| 15779 | enable: Sortable.enable.bind(app), | |
| 15780 | disable: Sortable.disable.bind(app), | |
| 15781 | toggle: Sortable.toggle.bind(app), | |
| 15782 | }, | |
| 15783 | }); | |
| 15784 | }, | |
| 15785 | on: { | |
| 15786 | init: function init() { | |
| 15787 | var app = this; | |
| 15788 | if (!app.params.sortable) { return; } | |
| 15789 | app.sortable.init(); | |
| 15790 | }, | |
| 15791 | }, | |
| 15792 | clicks: { | |
| 15793 | '.sortable-enable': function enable($clickedEl, data) { | |
| 15794 | if ( data === void 0 ) data = {}; | |
| 15795 | ||
| 15796 | var app = this; | |
| 15797 | app.sortable.enable(data.sortable); | |
| 15798 | }, | |
| 15799 | '.sortable-disable': function disable($clickedEl, data) { | |
| 15800 | if ( data === void 0 ) data = {}; | |
| 15801 | ||
| 15802 | var app = this; | |
| 15803 | app.sortable.disable(data.sortable); | |
| 15804 | }, | |
| 15805 | '.sortable-toggle': function toggle($clickedEl, data) { | |
| 15806 | if ( data === void 0 ) data = {}; | |
| 15807 | ||
| 15808 | var app = this; | |
| 15809 | app.sortable.toggle(data.sortable); | |
| 15810 | }, | |
| 15811 | }, | |
| 15812 | }; | |
| 15813 | ||
| 15814 | var Swipeout = { | |
| 15815 | init: function init() { | |
| 15816 | var app = this; | |
| 15817 | var touchesStart = {}; | |
| 15818 | var isTouched; | |
| 15819 | var isMoved; | |
| 15820 | var isScrolling; | |
| 15821 | var touchStartTime; | |
| 15822 | var touchesDiff; | |
| 15823 | var $swipeoutEl; | |
| 15824 | var $swipeoutContent; | |
| 15825 | var $actionsRight; | |
| 15826 | var $actionsLeft; | |
| 15827 | var actionsLeftWidth; | |
| 15828 | var actionsRightWidth; | |
| 15829 | var translate; | |
| 15830 | var opened; | |
| 15831 | var openedActionsSide; | |
| 15832 | var $leftButtons; | |
| 15833 | var $rightButtons; | |
| 15834 | var direction; | |
| 15835 | var $overswipeLeftButton; | |
| 15836 | var $overswipeRightButton; | |
| 15837 | var overswipeLeft; | |
| 15838 | var overswipeRight; | |
| 15839 | ||
| 15840 | function handleTouchStart(e) { | |
| 15841 | if (!Swipeout.allow) { return; } | |
| 15842 | isMoved = false; | |
| 15843 | isTouched = true; | |
| 15844 | isScrolling = undefined; | |
| 15845 | touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 15846 | touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 15847 | touchStartTime = (new Date()).getTime(); | |
| 15848 | $swipeoutEl = $(this); | |
| 15849 | } | |
| 15850 | function handleTouchMove(e) { | |
| 15851 | if (!isTouched) { return; } | |
| 15852 | var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 15853 | var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 15854 | if (typeof isScrolling === 'undefined') { | |
| 15855 | isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x)); | |
| 15856 | } | |
| 15857 | if (isScrolling) { | |
| 15858 | isTouched = false; | |
| 15859 | return; | |
| 15860 | } | |
| 15861 | ||
| 15862 | if (!isMoved) { | |
| 15863 | if ($('.list.sortable-opened').length > 0) { return; } | |
| 15864 | $swipeoutContent = $swipeoutEl.find('.swipeout-content'); | |
| 15865 | $actionsRight = $swipeoutEl.find('.swipeout-actions-right'); | |
| 15866 | $actionsLeft = $swipeoutEl.find('.swipeout-actions-left'); | |
| 15867 | actionsLeftWidth = null; | |
| 15868 | actionsRightWidth = null; | |
| 15869 | $leftButtons = null; | |
| 15870 | $rightButtons = null; | |
| 15871 | $overswipeRightButton = null; | |
| 15872 | $overswipeLeftButton = null; | |
| 15873 | if ($actionsLeft.length > 0) { | |
| 15874 | actionsLeftWidth = $actionsLeft.outerWidth(); | |
| 15875 | $leftButtons = $actionsLeft.children('a'); | |
| 15876 | $overswipeLeftButton = $actionsLeft.find('.swipeout-overswipe'); | |
| 15877 | } | |
| 15878 | if ($actionsRight.length > 0) { | |
| 15879 | actionsRightWidth = $actionsRight.outerWidth(); | |
| 15880 | $rightButtons = $actionsRight.children('a'); | |
| 15881 | $overswipeRightButton = $actionsRight.find('.swipeout-overswipe'); | |
| 15882 | } | |
| 15883 | opened = $swipeoutEl.hasClass('swipeout-opened'); | |
| 15884 | if (opened) { | |
| 15885 | openedActionsSide = $swipeoutEl.find('.swipeout-actions-left.swipeout-actions-opened').length > 0 ? 'left' : 'right'; | |
| 15886 | } | |
| 15887 | $swipeoutEl.removeClass('swipeout-transitioning'); | |
| 15888 | if (!app.params.swipeout.noFollow) { | |
| 15889 | $swipeoutEl.find('.swipeout-actions-opened').removeClass('swipeout-actions-opened'); | |
| 15890 | $swipeoutEl.removeClass('swipeout-opened'); | |
| 15891 | } | |
| 15892 | } | |
| 15893 | isMoved = true; | |
| 15894 | e.preventDefault(); | |
| 15895 | ||
| 15896 | touchesDiff = pageX - touchesStart.x; | |
| 15897 | translate = touchesDiff; | |
| 15898 | ||
| 15899 | if (opened) { | |
| 15900 | if (openedActionsSide === 'right') { translate -= actionsRightWidth; } | |
| 15901 | else { translate += actionsLeftWidth; } | |
| 15902 | } | |
| 15903 | ||
| 15904 | if ( | |
| 15905 | (translate > 0 && $actionsLeft.length === 0) | |
| 15906 | || (translate < 0 && $actionsRight.length === 0) | |
| 15907 | ) { | |
| 15908 | if (!opened) { | |
| 15909 | isTouched = false; | |
| 15910 | isMoved = false; | |
| 15911 | $swipeoutContent.transform(''); | |
| 15912 | if ($rightButtons && $rightButtons.length > 0) { | |
| 15913 | $rightButtons.transform(''); | |
| 15914 | } | |
| 15915 | if ($leftButtons && $leftButtons.length > 0) { | |
| 15916 | $leftButtons.transform(''); | |
| 15917 | } | |
| 15918 | return; | |
| 15919 | } | |
| 15920 | translate = 0; | |
| 15921 | } | |
| 15922 | ||
| 15923 | if (translate < 0) { direction = 'to-left'; } | |
| 15924 | else if (translate > 0) { direction = 'to-right'; } | |
| 15925 | else if (!direction) { direction = 'to-left'; } | |
| 15926 | ||
| 15927 | var buttonOffset; | |
| 15928 | var progress; | |
| 15929 | ||
| 15930 | e.f7PreventSwipePanel = true; | |
| 15931 | if (app.params.swipeout.noFollow) { | |
| 15932 | if (opened) { | |
| 15933 | if (openedActionsSide === 'right' && touchesDiff > 0) { | |
| 15934 | app.swipeout.close($swipeoutEl); | |
| 15935 | } | |
| 15936 | if (openedActionsSide === 'left' && touchesDiff < 0) { | |
| 15937 | app.swipeout.close($swipeoutEl); | |
| 15938 | } | |
| 15939 | } else { | |
| 15940 | if (touchesDiff < 0 && $actionsRight.length > 0) { | |
| 15941 | app.swipeout.open($swipeoutEl, 'right'); | |
| 15942 | } | |
| 15943 | if (touchesDiff > 0 && $actionsLeft.length > 0) { | |
| 15944 | app.swipeout.open($swipeoutEl, 'left'); | |
| 15945 | } | |
| 15946 | } | |
| 15947 | isTouched = false; | |
| 15948 | isMoved = false; | |
| 15949 | return; | |
| 15950 | } | |
| 15951 | overswipeLeft = false; | |
| 15952 | overswipeRight = false; | |
| 15953 | if ($actionsRight.length > 0) { | |
| 15954 | // Show right actions | |
| 15955 | var buttonTranslate = translate; | |
| 15956 | progress = buttonTranslate / actionsRightWidth; | |
| 15957 | if (buttonTranslate < -actionsRightWidth) { | |
| 15958 | buttonTranslate = -actionsRightWidth - (Math.pow( (-buttonTranslate - actionsRightWidth), 0.8 )); | |
| 15959 | translate = buttonTranslate; | |
| 15960 | if ($overswipeRightButton.length > 0) { | |
| 15961 | overswipeRight = true; | |
| 15962 | } | |
| 15963 | } | |
| 15964 | if (direction !== 'to-left') { | |
| 15965 | progress = 0; | |
| 15966 | buttonTranslate = 0; | |
| 15967 | } | |
| 15968 | $rightButtons.each(function (index, buttonEl) { | |
| 15969 | var $buttonEl = $(buttonEl); | |
| 15970 | if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') { | |
| 15971 | $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft; | |
| 15972 | } | |
| 15973 | buttonOffset = buttonEl.f7SwipeoutButtonOffset; | |
| 15974 | if ($overswipeRightButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-left') { | |
| 15975 | $buttonEl.css({ left: ((overswipeRight ? -buttonOffset : 0) + "px") }); | |
| 15976 | if (overswipeRight) { | |
| 15977 | if (!$buttonEl.hasClass('swipeout-overswipe-active')) { | |
| 15978 | $swipeoutEl.trigger('swipeout:overswipeenter'); | |
| 15979 | app.emit('swipeoutOverswipeEnter', $swipeoutEl[0]); | |
| 15980 | } | |
| 15981 | $buttonEl.addClass('swipeout-overswipe-active'); | |
| 15982 | } else { | |
| 15983 | if ($buttonEl.hasClass('swipeout-overswipe-active')) { | |
| 15984 | $swipeoutEl.trigger('swipeout:overswipeexit'); | |
| 15985 | app.emit('swipeoutOverswipeExit', $swipeoutEl[0]); | |
| 15986 | } | |
| 15987 | $buttonEl.removeClass('swipeout-overswipe-active'); | |
| 15988 | } | |
| 15989 | } | |
| 15990 | $buttonEl.transform(("translate3d(" + (buttonTranslate - (buttonOffset * (1 + Math.max(progress, -1)))) + "px,0,0)")); | |
| 15991 | }); | |
| 15992 | } | |
| 15993 | if ($actionsLeft.length > 0) { | |
| 15994 | // Show left actions | |
| 15995 | var buttonTranslate$1 = translate; | |
| 15996 | progress = buttonTranslate$1 / actionsLeftWidth; | |
| 15997 | if (buttonTranslate$1 > actionsLeftWidth) { | |
| 15998 | buttonTranslate$1 = actionsLeftWidth + (Math.pow( (buttonTranslate$1 - actionsLeftWidth), 0.8 )); | |
| 15999 | translate = buttonTranslate$1; | |
| 16000 | if ($overswipeLeftButton.length > 0) { | |
| 16001 | overswipeLeft = true; | |
| 16002 | } | |
| 16003 | } | |
| 16004 | if (direction !== 'to-right') { | |
| 16005 | buttonTranslate$1 = 0; | |
| 16006 | progress = 0; | |
| 16007 | } | |
| 16008 | $leftButtons.each(function (index, buttonEl) { | |
| 16009 | var $buttonEl = $(buttonEl); | |
| 16010 | if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') { | |
| 16011 | $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth; | |
| 16012 | } | |
| 16013 | buttonOffset = buttonEl.f7SwipeoutButtonOffset; | |
| 16014 | if ($overswipeLeftButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-right') { | |
| 16015 | $buttonEl.css({ left: ((overswipeLeft ? buttonOffset : 0) + "px") }); | |
| 16016 | if (overswipeLeft) { | |
| 16017 | if (!$buttonEl.hasClass('swipeout-overswipe-active')) { | |
| 16018 | $swipeoutEl.trigger('swipeout:overswipeenter'); | |
| 16019 | app.emit('swipeoutOverswipeEnter', $swipeoutEl[0]); | |
| 16020 | } | |
| 16021 | $buttonEl.addClass('swipeout-overswipe-active'); | |
| 16022 | } else { | |
| 16023 | if ($buttonEl.hasClass('swipeout-overswipe-active')) { | |
| 16024 | $swipeoutEl.trigger('swipeout:overswipeexit'); | |
| 16025 | app.emit('swipeoutOverswipeExit', $swipeoutEl[0]); | |
| 16026 | } | |
| 16027 | $buttonEl.removeClass('swipeout-overswipe-active'); | |
| 16028 | } | |
| 16029 | } | |
| 16030 | if ($leftButtons.length > 1) { | |
| 16031 | $buttonEl.css('z-index', $leftButtons.length - index); | |
| 16032 | } | |
| 16033 | $buttonEl.transform(("translate3d(" + (buttonTranslate$1 + (buttonOffset * (1 - Math.min(progress, 1)))) + "px,0,0)")); | |
| 16034 | }); | |
| 16035 | } | |
| 16036 | $swipeoutEl.trigger('swipeout', progress); | |
| 16037 | app.emit('swipeout', $swipeoutEl[0], progress); | |
| 16038 | $swipeoutContent.transform(("translate3d(" + translate + "px,0,0)")); | |
| 16039 | } | |
| 16040 | function handleTouchEnd() { | |
| 16041 | if (!isTouched || !isMoved) { | |
| 16042 | isTouched = false; | |
| 16043 | isMoved = false; | |
| 16044 | return; | |
| 16045 | } | |
| 16046 | ||
| 16047 | isTouched = false; | |
| 16048 | isMoved = false; | |
| 16049 | var timeDiff = (new Date()).getTime() - touchStartTime; | |
| 16050 | var $actions = direction === 'to-left' ? $actionsRight : $actionsLeft; | |
| 16051 | var actionsWidth = direction === 'to-left' ? actionsRightWidth : actionsLeftWidth; | |
| 16052 | var action; | |
| 16053 | var $buttons; | |
| 16054 | var i; | |
| 16055 | ||
| 16056 | if ( | |
| 16057 | ( | |
| 16058 | timeDiff < 300 | |
| 16059 | && ( | |
| 16060 | (touchesDiff < -10 && direction === 'to-left') | |
| 16061 | || (touchesDiff > 10 && direction === 'to-right') | |
| 16062 | ) | |
| 16063 | ) | |
| 16064 | || ( | |
| 16065 | timeDiff >= 300 | |
| 16066 | && (Math.abs(translate) > actionsWidth / 2) | |
| 16067 | ) | |
| 16068 | ) { | |
| 16069 | action = 'open'; | |
| 16070 | } else { | |
| 16071 | action = 'close'; | |
| 16072 | } | |
| 16073 | if (timeDiff < 300) { | |
| 16074 | if (Math.abs(translate) === 0) { action = 'close'; } | |
| 16075 | if (Math.abs(translate) === actionsWidth) { action = 'open'; } | |
| 16076 | } | |
| 16077 | ||
| 16078 | if (action === 'open') { | |
| 16079 | Swipeout.el = $swipeoutEl[0]; | |
| 16080 | $swipeoutEl.trigger('swipeout:open'); | |
| 16081 | app.emit('swipeoutOpen', $swipeoutEl[0]); | |
| 16082 | $swipeoutEl.addClass('swipeout-opened swipeout-transitioning'); | |
| 16083 | var newTranslate = direction === 'to-left' ? -actionsWidth : actionsWidth; | |
| 16084 | $swipeoutContent.transform(("translate3d(" + newTranslate + "px,0,0)")); | |
| 16085 | $actions.addClass('swipeout-actions-opened'); | |
| 16086 | $buttons = direction === 'to-left' ? $rightButtons : $leftButtons; | |
| 16087 | if ($buttons) { | |
| 16088 | for (i = 0; i < $buttons.length; i += 1) { | |
| 16089 | $($buttons[i]).transform(("translate3d(" + newTranslate + "px,0,0)")); | |
| 16090 | } | |
| 16091 | } | |
| 16092 | if (overswipeRight) { | |
| 16093 | $actionsRight.find('.swipeout-overswipe')[0].click(); | |
| 16094 | } | |
| 16095 | if (overswipeLeft) { | |
| 16096 | $actionsLeft.find('.swipeout-overswipe')[0].click(); | |
| 16097 | } | |
| 16098 | } else { | |
| 16099 | $swipeoutEl.trigger('swipeout:close'); | |
| 16100 | app.emit('swipeoutClose', $swipeoutEl[0]); | |
| 16101 | Swipeout.el = undefined; | |
| 16102 | $swipeoutEl.addClass('swipeout-transitioning').removeClass('swipeout-opened'); | |
| 16103 | $swipeoutContent.transform(''); | |
| 16104 | $actions.removeClass('swipeout-actions-opened'); | |
| 16105 | } | |
| 16106 | ||
| 16107 | var buttonOffset; | |
| 16108 | if ($leftButtons && $leftButtons.length > 0 && $leftButtons !== $buttons) { | |
| 16109 | $leftButtons.each(function (index, buttonEl) { | |
| 16110 | var $buttonEl = $(buttonEl); | |
| 16111 | buttonOffset = buttonEl.f7SwipeoutButtonOffset; | |
| 16112 | if (typeof buttonOffset === 'undefined') { | |
| 16113 | $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth; | |
| 16114 | } | |
| 16115 | $buttonEl.transform(("translate3d(" + buttonOffset + "px,0,0)")); | |
| 16116 | }); | |
| 16117 | } | |
| 16118 | if ($rightButtons && $rightButtons.length > 0 && $rightButtons !== $buttons) { | |
| 16119 | $rightButtons.each(function (index, buttonEl) { | |
| 16120 | var $buttonEl = $(buttonEl); | |
| 16121 | buttonOffset = buttonEl.f7SwipeoutButtonOffset; | |
| 16122 | if (typeof buttonOffset === 'undefined') { | |
| 16123 | $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft; | |
| 16124 | } | |
| 16125 | $buttonEl.transform(("translate3d(" + (-buttonOffset) + "px,0,0)")); | |
| 16126 | }); | |
| 16127 | } | |
| 16128 | $swipeoutContent.transitionEnd(function () { | |
| 16129 | if ((opened && action === 'open') || (!opened && action === 'close')) { return; } | |
| 16130 | $swipeoutEl.trigger(action === 'open' ? 'swipeout:opened' : 'swipeout:closed'); | |
| 16131 | app.emit(action === 'open' ? 'swipeoutOpened' : 'swipeoutClosed', $swipeoutEl[0]); | |
| 16132 | $swipeoutEl.removeClass('swipeout-transitioning'); | |
| 16133 | if (opened && action === 'close') { | |
| 16134 | if ($actionsRight.length > 0) { | |
| 16135 | $rightButtons.transform(''); | |
| 16136 | } | |
| 16137 | if ($actionsLeft.length > 0) { | |
| 16138 | $leftButtons.transform(''); | |
| 16139 | } | |
| 16140 | } | |
| 16141 | }); | |
| 16142 | } | |
| 16143 | ||
| 16144 | var passiveListener = app.support.passiveListener ? { passive: true } : false; | |
| 16145 | ||
| 16146 | app.on('touchstart', function (e) { | |
| 16147 | if (Swipeout.el) { | |
| 16148 | var $targetEl = $(e.target); | |
| 16149 | if (!( | |
| 16150 | $(Swipeout.el).is($targetEl[0]) | |
| 16151 | || $targetEl.parents('.swipeout').is(Swipeout.el) | |
| 16152 | || $targetEl.hasClass('modal-in') | |
| 16153 | || ($targetEl.attr('class') || '').indexOf('-backdrop') > 0 | |
| 16154 | || $targetEl.hasClass('actions-modal') | |
| 16155 | || $targetEl.parents('.actions-modal.modal-in, .dialog.modal-in').length > 0 | |
| 16156 | )) { | |
| 16157 | app.swipeout.close(Swipeout.el); | |
| 16158 | } | |
| 16159 | } | |
| 16160 | }); | |
| 16161 | $(doc).on(app.touchEvents.start, 'li.swipeout', handleTouchStart, passiveListener); | |
| 16162 | app.on('touchmove:active', handleTouchMove); | |
| 16163 | app.on('touchend:passive', handleTouchEnd); | |
| 16164 | }, | |
| 16165 | allow: true, | |
| 16166 | el: undefined, | |
| 16167 | open: function open() { | |
| 16168 | var assign; | |
| 16169 | ||
| 16170 | var args = [], len = arguments.length; | |
| 16171 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 16172 | var app = this; | |
| 16173 | var el = args[0]; | |
| 16174 | var side = args[1]; | |
| 16175 | var callback = args[2]; | |
| 16176 | if (typeof args[1] === 'function') { | |
| 16177 | (assign = args, el = assign[0], callback = assign[1], side = assign[2]); | |
| 16178 | } | |
| 16179 | var $el = $(el).eq(0); | |
| 16180 | ||
| 16181 | if ($el.length === 0) { return; } | |
| 16182 | if (!$el.hasClass('swipeout') || $el.hasClass('swipeout-opened')) { return; } | |
| 16183 | if (!side) { | |
| 16184 | if ($el.find('.swipeout-actions-right').length > 0) { side = 'right'; } | |
| 16185 | else { side = 'left'; } | |
| 16186 | } | |
| 16187 | var $swipeoutActions = $el.find((".swipeout-actions-" + side)); | |
| 16188 | var $swipeoutContent = $el.find('.swipeout-content'); | |
| 16189 | if ($swipeoutActions.length === 0) { return; } | |
| 16190 | $el.trigger('swipeout:open').addClass('swipeout-opened').removeClass('swipeout-transitioning'); | |
| 16191 | app.emit('swipeoutOpen', $el[0]); | |
| 16192 | $swipeoutActions.addClass('swipeout-actions-opened'); | |
| 16193 | var $buttons = $swipeoutActions.children('a'); | |
| 16194 | var swipeoutActionsWidth = $swipeoutActions.outerWidth(); | |
| 16195 | var translate = side === 'right' ? -swipeoutActionsWidth : swipeoutActionsWidth; | |
| 16196 | if ($buttons.length > 1) { | |
| 16197 | $buttons.each(function (buttonIndex, buttonEl) { | |
| 16198 | var $buttonEl = $(buttonEl); | |
| 16199 | if (side === 'right') { | |
| 16200 | $buttonEl.transform(("translate3d(" + (-buttonEl.offsetLeft) + "px,0,0)")); | |
| 16201 | } else { | |
| 16202 | $buttonEl.css('z-index', $buttons.length - buttonIndex).transform(("translate3d(" + (swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft) + "px,0,0)")); | |
| 16203 | } | |
| 16204 | }); | |
| 16205 | } | |
| 16206 | $el.addClass('swipeout-transitioning'); | |
| 16207 | $swipeoutContent.transitionEnd(function () { | |
| 16208 | $el.trigger('swipeout:opened'); | |
| 16209 | app.emit('swipeoutOpened', $el[0]); | |
| 16210 | if (callback) { callback.call($el[0]); } | |
| 16211 | }); | |
| 16212 | Utils.nextFrame(function () { | |
| 16213 | $buttons.transform(("translate3d(" + translate + "px,0,0)")); | |
| 16214 | $swipeoutContent.transform(("translate3d(" + translate + "px,0,0)")); | |
| 16215 | }); | |
| 16216 | Swipeout.el = $el[0]; | |
| 16217 | }, | |
| 16218 | close: function close(el, callback) { | |
| 16219 | var app = this; | |
| 16220 | var $el = $(el).eq(0); | |
| 16221 | if ($el.length === 0) { return; } | |
| 16222 | if (!$el.hasClass('swipeout-opened')) { return; } | |
| 16223 | var side = $el.find('.swipeout-actions-opened').hasClass('swipeout-actions-right') ? 'right' : 'left'; | |
| 16224 | var $swipeoutActions = $el.find('.swipeout-actions-opened').removeClass('swipeout-actions-opened'); | |
| 16225 | var $buttons = $swipeoutActions.children('a'); | |
| 16226 | var swipeoutActionsWidth = $swipeoutActions.outerWidth(); | |
| 16227 | Swipeout.allow = false; | |
| 16228 | $el.trigger('swipeout:close'); | |
| 16229 | app.emit('swipeoutClose', $el[0]); | |
| 16230 | $el.removeClass('swipeout-opened').addClass('swipeout-transitioning'); | |
| 16231 | ||
| 16232 | var closeTimeout; | |
| 16233 | function onSwipeoutClose() { | |
| 16234 | Swipeout.allow = true; | |
| 16235 | if ($el.hasClass('swipeout-opened')) { return; } | |
| 16236 | $el.removeClass('swipeout-transitioning'); | |
| 16237 | $buttons.transform(''); | |
| 16238 | $el.trigger('swipeout:closed'); | |
| 16239 | app.emit('swipeoutClosed', $el[0]); | |
| 16240 | if (callback) { callback.call($el[0]); } | |
| 16241 | if (closeTimeout) { clearTimeout(closeTimeout); } | |
| 16242 | } | |
| 16243 | $el.find('.swipeout-content').transform('').transitionEnd(onSwipeoutClose); | |
| 16244 | closeTimeout = setTimeout(onSwipeoutClose, 500); | |
| 16245 | ||
| 16246 | $buttons.each(function (index, buttonEl) { | |
| 16247 | var $buttonEl = $(buttonEl); | |
| 16248 | if (side === 'right') { | |
| 16249 | $buttonEl.transform(("translate3d(" + (-buttonEl.offsetLeft) + "px,0,0)")); | |
| 16250 | } else { | |
| 16251 | $buttonEl.transform(("translate3d(" + (swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft) + "px,0,0)")); | |
| 16252 | } | |
| 16253 | $buttonEl.css({ left: '0px' }).removeClass('swipeout-overswipe-active'); | |
| 16254 | }); | |
| 16255 | if (Swipeout.el && Swipeout.el === $el[0]) { Swipeout.el = undefined; } | |
| 16256 | }, | |
| 16257 | delete: function delete$1(el, callback) { | |
| 16258 | var app = this; | |
| 16259 | var $el = $(el).eq(0); | |
| 16260 | if ($el.length === 0) { return; } | |
| 16261 | Swipeout.el = undefined; | |
| 16262 | $el.trigger('swipeout:delete'); | |
| 16263 | app.emit('swipeoutDelete', $el[0]); | |
| 16264 | $el.css({ height: (($el.outerHeight()) + "px") }); | |
| 16265 | $el.transitionEnd(function () { | |
| 16266 | $el.trigger('swipeout:deleted'); | |
| 16267 | app.emit('swipeoutDeleted', $el[0]); | |
| 16268 | if (callback) { callback.call($el[0]); } | |
| 16269 | if ($el.parents('.virtual-list').length > 0) { | |
| 16270 | var virtualList = $el.parents('.virtual-list')[0].f7VirtualList; | |
| 16271 | var virtualIndex = $el[0].f7VirtualListIndex; | |
| 16272 | if (virtualList && typeof virtualIndex !== 'undefined') { virtualList.deleteItem(virtualIndex); } | |
| 16273 | } else if (app.params.swipeout.removeElements) { | |
| 16274 | if (app.params.swipeout.removeElementsWithTimeout) { | |
| 16275 | setTimeout(function () { | |
| 16276 | $el.remove(); | |
| 16277 | }, app.params.swipeout.removeElementsTimeout); | |
| 16278 | } else { | |
| 16279 | $el.remove(); | |
| 16280 | } | |
| 16281 | } else { | |
| 16282 | $el.removeClass('swipeout-deleting swipeout-transitioning'); | |
| 16283 | } | |
| 16284 | }); | |
| 16285 | // eslint-disable-next-line | |
| 16286 | // $el[0]._clientLeft = $el[0].clientLeft; | |
| 16287 | Utils.nextFrame(function () { | |
| 16288 | $el | |
| 16289 | .addClass('swipeout-deleting swipeout-transitioning') | |
| 16290 | .css({ height: '0px' }) | |
| 16291 | .find('.swipeout-content') | |
| 16292 | .transform('translate3d(-100%,0,0)'); | |
| 16293 | }); | |
| 16294 | }, | |
| 16295 | }; | |
| 16296 | var Swipeout$1 = { | |
| 16297 | name: 'swipeout', | |
| 16298 | params: { | |
| 16299 | swipeout: { | |
| 16300 | actionsNoFold: false, | |
| 16301 | noFollow: false, | |
| 16302 | removeElements: true, | |
| 16303 | removeElementsWithTimeout: false, | |
| 16304 | removeElementsTimeout: 0, | |
| 16305 | }, | |
| 16306 | }, | |
| 16307 | create: function create() { | |
| 16308 | var app = this; | |
| 16309 | Utils.extend(app, { | |
| 16310 | swipeout: { | |
| 16311 | init: Swipeout.init.bind(app), | |
| 16312 | open: Swipeout.open.bind(app), | |
| 16313 | close: Swipeout.close.bind(app), | |
| 16314 | delete: Swipeout.delete.bind(app), | |
| 16315 | }, | |
| 16316 | }); | |
| 16317 | Object.defineProperty(app.swipeout, 'el', { | |
| 16318 | enumerable: true, | |
| 16319 | configurable: true, | |
| 16320 | get: function () { return Swipeout.el; }, | |
| 16321 | set: function set(el) { | |
| 16322 | Swipeout.el = el; | |
| 16323 | }, | |
| 16324 | }); | |
| 16325 | Object.defineProperty(app.swipeout, 'allow', { | |
| 16326 | enumerable: true, | |
| 16327 | configurable: true, | |
| 16328 | get: function () { return Swipeout.allow; }, | |
| 16329 | set: function set(allow) { | |
| 16330 | Swipeout.allow = allow; | |
| 16331 | }, | |
| 16332 | }); | |
| 16333 | }, | |
| 16334 | clicks: { | |
| 16335 | '.swipeout-open': function openSwipeout($clickedEl, data) { | |
| 16336 | if ( data === void 0 ) data = {}; | |
| 16337 | ||
| 16338 | var app = this; | |
| 16339 | app.swipeout.open(data.swipeout, data.side); | |
| 16340 | }, | |
| 16341 | '.swipeout-close': function closeSwipeout($clickedEl) { | |
| 16342 | var app = this; | |
| 16343 | var $swipeoutEl = $clickedEl.closest('.swipeout'); | |
| 16344 | if ($swipeoutEl.length === 0) { return; } | |
| 16345 | app.swipeout.close($swipeoutEl); | |
| 16346 | }, | |
| 16347 | '.swipeout-delete': function deleteSwipeout($clickedEl, data) { | |
| 16348 | if ( data === void 0 ) data = {}; | |
| 16349 | ||
| 16350 | var app = this; | |
| 16351 | var $swipeoutEl = $clickedEl.closest('.swipeout'); | |
| 16352 | if ($swipeoutEl.length === 0) { return; } | |
| 16353 | var confirm = data.confirm; | |
| 16354 | var confirmTitle = data.confirmTitle; | |
| 16355 | if (data.confirm) { | |
| 16356 | app.dialog.confirm(confirm, confirmTitle, function () { | |
| 16357 | app.swipeout.delete($swipeoutEl); | |
| 16358 | }); | |
| 16359 | } else { | |
| 16360 | app.swipeout.delete($swipeoutEl); | |
| 16361 | } | |
| 16362 | }, | |
| 16363 | }, | |
| 16364 | on: { | |
| 16365 | init: function init() { | |
| 16366 | var app = this; | |
| 16367 | if (!app.params.swipeout) { return; } | |
| 16368 | app.swipeout.init(); | |
| 16369 | }, | |
| 16370 | }, | |
| 16371 | }; | |
| 16372 | ||
| 5309fbda DC |
16373 | var Accordion = { |
| 16374 | toggleClicked: function toggleClicked($clickedEl) { | |
| 16375 | var app = this; | |
| 16376 | var $accordionItemEl = $clickedEl.closest('.accordion-item').eq(0); | |
| 16377 | if (!$accordionItemEl.length) { $accordionItemEl = $clickedEl.parents('li').eq(0); } | |
| 16378 | ||
| 16379 | var $accordionContent = $clickedEl.parents('.accordion-item-content').eq(0); | |
| 16380 | if ($accordionContent.length) { | |
| 16381 | if ($accordionContent.parents($accordionItemEl).length) { return; } | |
| 16382 | } | |
| 16383 | ||
| 16384 | if ($clickedEl.parents('li').length > 1 && $clickedEl.parents('li')[0] !== $accordionItemEl[0]) { return; } | |
| 16385 | app.accordion.toggle($accordionItemEl); | |
| 16386 | }, | |
| 16387 | open: function open(el) { | |
| 16388 | var app = this; | |
| 16389 | var $el = $(el); | |
| 16390 | var prevented = false; | |
| 16391 | function prevent() { | |
| 16392 | prevented = true; | |
| 16393 | } | |
| 16394 | $el.trigger('accordion:beforeopen', { prevent: prevent }, prevent); | |
| 16395 | app.emit('accordionBeforeOpen', $el[0], prevent); | |
| 16396 | if (prevented) { return; } | |
| 16397 | var $list = $el.parents('.accordion-list').eq(0); | |
| 16398 | var $contentEl = $el.children('.accordion-item-content'); | |
| 16399 | $contentEl.removeAttr('aria-hidden'); | |
| 16400 | if ($contentEl.length === 0) { $contentEl = $el.find('.accordion-item-content'); } | |
| 16401 | if ($contentEl.length === 0) { return; } | |
| 16402 | var $openedItem = $list.length > 0 && $el.parent().children('.accordion-item-opened'); | |
| 16403 | if ($openedItem.length > 0) { | |
| 16404 | app.accordion.close($openedItem); | |
| 16405 | } | |
| 16406 | $contentEl.transitionEnd(function () { | |
| 16407 | if ($el.hasClass('accordion-item-opened')) { | |
| 16408 | $contentEl.transition(0); | |
| 16409 | $contentEl.css('height', 'auto'); | |
| 16410 | Utils.nextFrame(function () { | |
| 16411 | $contentEl.transition(''); | |
| 16412 | $el.trigger('accordion:opened'); | |
| 16413 | app.emit('accordionOpened', $el[0]); | |
| 16414 | }); | |
| 16415 | } else { | |
| 16416 | $contentEl.css('height', ''); | |
| 16417 | $el.trigger('accordion:closed'); | |
| 16418 | app.emit('accordionClosed', $el[0]); | |
| 16419 | } | |
| 16420 | }); | |
| 16421 | $contentEl.css('height', (($contentEl[0].scrollHeight) + "px")); | |
| 16422 | $el.trigger('accordion:open'); | |
| 16423 | $el.addClass('accordion-item-opened'); | |
| 16424 | app.emit('accordionOpen', $el[0]); | |
| 16425 | }, | |
| 16426 | close: function close(el) { | |
| 16427 | var app = this; | |
| 16428 | var $el = $(el); | |
| 16429 | var prevented = false; | |
| 16430 | function prevent() { | |
| 16431 | prevented = true; | |
| 16432 | } | |
| 16433 | $el.trigger('accordion:beforeclose', { prevent: prevent }, prevent); | |
| 16434 | app.emit('accordionBeforeClose', $el[0], prevent); | |
| 16435 | if (prevented) { return; } | |
| 16436 | var $contentEl = $el.children('.accordion-item-content'); | |
| 16437 | if ($contentEl.length === 0) { $contentEl = $el.find('.accordion-item-content'); } | |
| 16438 | $el.removeClass('accordion-item-opened'); | |
| 16439 | $contentEl.attr('aria-hidden', true); | |
| 16440 | $contentEl.transition(0); | |
| 16441 | $contentEl.css('height', (($contentEl[0].scrollHeight) + "px")); | |
| 16442 | // Close | |
| 16443 | $contentEl.transitionEnd(function () { | |
| 16444 | if ($el.hasClass('accordion-item-opened')) { | |
| 16445 | $contentEl.transition(0); | |
| 16446 | $contentEl.css('height', 'auto'); | |
| 16447 | Utils.nextFrame(function () { | |
| 16448 | $contentEl.transition(''); | |
| 16449 | $el.trigger('accordion:opened'); | |
| 16450 | app.emit('accordionOpened', $el[0]); | |
| 16451 | }); | |
| 16452 | } else { | |
| 16453 | $contentEl.css('height', ''); | |
| 16454 | $el.trigger('accordion:closed'); | |
| 16455 | app.emit('accordionClosed', $el[0]); | |
| 16456 | } | |
| 16457 | }); | |
| 16458 | Utils.nextFrame(function () { | |
| 16459 | $contentEl.transition(''); | |
| 16460 | $contentEl.css('height', ''); | |
| 16461 | $el.trigger('accordion:close'); | |
| 16462 | app.emit('accordionClose', $el[0]); | |
| 16463 | }); | |
| 16464 | }, | |
| 16465 | toggle: function toggle(el) { | |
| 16466 | var app = this; | |
| 16467 | var $el = $(el); | |
| 16468 | if ($el.length === 0) { return; } | |
| 16469 | if ($el.hasClass('accordion-item-opened')) { app.accordion.close(el); } | |
| 16470 | else { app.accordion.open(el); } | |
| 16471 | }, | |
| 16472 | }; | |
| 16473 | ||
| 16474 | var Accordion$1 = { | |
| 16475 | name: 'accordion', | |
| 16476 | create: function create() { | |
| 16477 | var app = this; | |
| 16478 | Utils.extend(app, { | |
| 16479 | accordion: { | |
| 16480 | open: Accordion.open.bind(app), | |
| 16481 | close: Accordion.close.bind(app), | |
| 16482 | toggle: Accordion.toggle.bind(app), | |
| 16483 | }, | |
| 16484 | }); | |
| 16485 | }, | |
| 16486 | clicks: { | |
| 16487 | '.accordion-item .item-link, .accordion-item-toggle, .links-list.accordion-list > ul > li > a': function open($clickedEl) { | |
| 16488 | var app = this; | |
| 16489 | Accordion.toggleClicked.call(app, $clickedEl); | |
| 16490 | }, | |
| 16491 | }, | |
| 16492 | }; | |
| 16493 | ||
| 16494 | var ContactsList = { | |
| 16495 | name: 'contactsList', | |
| 16496 | }; | |
| 16497 | ||
| 5d51ea26 | 16498 | var VirtualList = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
16499 | function VirtualList(app, params) { |
| 16500 | if ( params === void 0 ) params = {}; | |
| 16501 | ||
| 5d51ea26 | 16502 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
16503 | var vl = this; |
| 16504 | ||
| 5d51ea26 DC |
16505 | var defaultHeight; |
| 16506 | if (app.theme === 'md') { | |
| 16507 | defaultHeight = 48; | |
| 16508 | } else if (app.theme === 'ios') { | |
| 16509 | defaultHeight = 44; | |
| 16510 | } else if (app.theme === 'aurora') { | |
| 16511 | defaultHeight = 38; | |
| 16512 | } | |
| 16513 | ||
| 5309fbda DC |
16514 | var defaults = { |
| 16515 | cols: 1, | |
| 5d51ea26 | 16516 | height: defaultHeight, |
| 5309fbda DC |
16517 | cache: true, |
| 16518 | dynamicHeightBufferSize: 1, | |
| 16519 | showFilteredItemsOnly: false, | |
| 16520 | renderExternal: undefined, | |
| 16521 | setListHeight: true, | |
| 16522 | searchByItem: undefined, | |
| 16523 | searchAll: undefined, | |
| 16524 | itemTemplate: undefined, | |
| 16525 | ul: null, | |
| 16526 | createUl: true, | |
| 5d51ea26 | 16527 | scrollableParentEl: undefined, |
| 5309fbda DC |
16528 | renderItem: function renderItem(item) { |
| 16529 | return ("\n <li>\n <div class=\"item-content\">\n <div class=\"item-inner\">\n <div class=\"item-title\">" + item + "</div>\n </div>\n </div>\n </li>\n ").trim(); | |
| 16530 | }, | |
| 16531 | on: {}, | |
| 16532 | }; | |
| 16533 | ||
| 16534 | // Extend defaults with modules params | |
| 16535 | vl.useModulesParams(defaults); | |
| 16536 | ||
| 16537 | vl.params = Utils.extend(defaults, params); | |
| 16538 | if (vl.params.height === undefined || !vl.params.height) { | |
| 5d51ea26 | 16539 | vl.params.height = defaultHeight; |
| 5309fbda DC |
16540 | } |
| 16541 | ||
| 16542 | vl.$el = $(params.el); | |
| 16543 | vl.el = vl.$el[0]; | |
| 16544 | ||
| 16545 | if (vl.$el.length === 0) { return undefined; } | |
| 16546 | vl.$el[0].f7VirtualList = vl; | |
| 16547 | ||
| 16548 | vl.items = vl.params.items; | |
| 16549 | if (vl.params.showFilteredItemsOnly) { | |
| 16550 | vl.filteredItems = []; | |
| 16551 | } | |
| 16552 | if (vl.params.itemTemplate) { | |
| 16553 | if (typeof vl.params.itemTemplate === 'string') { vl.renderItem = app.t7.compile(vl.params.itemTemplate); } | |
| 16554 | else if (typeof vl.params.itemTemplate === 'function') { vl.renderItem = vl.params.itemTemplate; } | |
| 16555 | } else if (vl.params.renderItem) { | |
| 16556 | vl.renderItem = vl.params.renderItem; | |
| 16557 | } | |
| 16558 | vl.$pageContentEl = vl.$el.parents('.page-content'); | |
| 16559 | vl.pageContentEl = vl.$pageContentEl[0]; | |
| 16560 | ||
| 5d51ea26 DC |
16561 | vl.$scrollableParentEl = vl.params.scrollableParentEl ? $(vl.params.scrollableParentEl).eq(0) : vl.$pageContentEl; |
| 16562 | if (!vl.$scrollableParentEl.length && vl.$pageContentEl.length) { | |
| 16563 | vl.$scrollableParentEl = vl.$pageContentEl; | |
| 16564 | } | |
| 16565 | vl.scrollableParentEl = vl.$scrollableParentEl[0]; | |
| 16566 | ||
| 5309fbda DC |
16567 | // Bad scroll |
| 16568 | if (typeof vl.params.updatableScroll !== 'undefined') { | |
| 16569 | vl.updatableScroll = vl.params.updatableScroll; | |
| 16570 | } else { | |
| 16571 | vl.updatableScroll = true; | |
| 16572 | if (Device.ios && Device.osVersion.split('.')[0] < 8) { | |
| 16573 | vl.updatableScroll = false; | |
| 16574 | } | |
| 16575 | } | |
| 16576 | ||
| 16577 | // Append <ul> | |
| 16578 | var ul = vl.params.ul; | |
| 16579 | vl.$ul = ul ? $(vl.params.ul) : vl.$el.children('ul'); | |
| 16580 | if (vl.$ul.length === 0 && vl.params.createUl) { | |
| 16581 | vl.$el.append('<ul></ul>'); | |
| 16582 | vl.$ul = vl.$el.children('ul'); | |
| 16583 | } | |
| 16584 | vl.ul = vl.$ul[0]; | |
| 16585 | ||
| 16586 | var $itemsWrapEl; | |
| 16587 | if (!vl.ul && !vl.params.createUl) { $itemsWrapEl = vl.$el; } | |
| 16588 | else { $itemsWrapEl = vl.$ul; } | |
| 16589 | ||
| 16590 | Utils.extend(vl, { | |
| 16591 | $itemsWrapEl: $itemsWrapEl, | |
| 16592 | itemsWrapEl: $itemsWrapEl[0], | |
| 16593 | // DOM cached items | |
| 16594 | domCache: {}, | |
| 16595 | displayDomCache: {}, | |
| 16596 | // Temporary DOM Element | |
| 16597 | tempDomElement: doc.createElement('ul'), | |
| 16598 | // Last repain position | |
| 16599 | lastRepaintY: null, | |
| 16600 | // Fragment | |
| 16601 | fragment: doc.createDocumentFragment(), | |
| 16602 | // Props | |
| 16603 | pageHeight: undefined, | |
| 16604 | rowsPerScreen: undefined, | |
| 16605 | rowsBefore: undefined, | |
| 16606 | rowsAfter: undefined, | |
| 16607 | rowsToRender: undefined, | |
| 16608 | maxBufferHeight: 0, | |
| 16609 | listHeight: undefined, | |
| 16610 | dynamicHeight: typeof vl.params.height === 'function', | |
| 16611 | }); | |
| 16612 | ||
| 16613 | // Install Modules | |
| 16614 | vl.useModules(); | |
| 16615 | ||
| 16616 | // Attach events | |
| 16617 | var handleScrollBound = vl.handleScroll.bind(vl); | |
| 16618 | var handleResizeBound = vl.handleResize.bind(vl); | |
| 16619 | var $pageEl; | |
| 16620 | var $tabEl; | |
| 16621 | var $panelEl; | |
| 16622 | var $popupEl; | |
| 16623 | vl.attachEvents = function attachEvents() { | |
| 16624 | $pageEl = vl.$el.parents('.page').eq(0); | |
| 16625 | $tabEl = vl.$el.parents('.tab').eq(0); | |
| 16626 | $panelEl = vl.$el.parents('.panel').eq(0); | |
| 16627 | $popupEl = vl.$el.parents('.popup').eq(0); | |
| 16628 | ||
| 5d51ea26 | 16629 | vl.$scrollableParentEl.on('scroll', handleScrollBound); |
| 5309fbda DC |
16630 | if ($pageEl) { $pageEl.on('page:reinit', handleResizeBound); } |
| 16631 | if ($tabEl) { $tabEl.on('tab:show', handleResizeBound); } | |
| 16632 | if ($panelEl) { $panelEl.on('panel:open', handleResizeBound); } | |
| 16633 | if ($popupEl) { $popupEl.on('popup:open', handleResizeBound); } | |
| 16634 | app.on('resize', handleResizeBound); | |
| 16635 | }; | |
| 16636 | vl.detachEvents = function attachEvents() { | |
| 5d51ea26 | 16637 | vl.$scrollableParentEl.off('scroll', handleScrollBound); |
| 5309fbda DC |
16638 | if ($pageEl) { $pageEl.off('page:reinit', handleResizeBound); } |
| 16639 | if ($tabEl) { $tabEl.off('tab:show', handleResizeBound); } | |
| 16640 | if ($panelEl) { $panelEl.off('panel:open', handleResizeBound); } | |
| 16641 | if ($popupEl) { $popupEl.off('popup:open', handleResizeBound); } | |
| 16642 | app.off('resize', handleResizeBound); | |
| 16643 | }; | |
| 16644 | // Init | |
| 16645 | vl.init(); | |
| 16646 | ||
| 16647 | return vl; | |
| 16648 | } | |
| 16649 | ||
| 5d51ea26 DC |
16650 | if ( Framework7Class ) VirtualList.__proto__ = Framework7Class; |
| 16651 | VirtualList.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
16652 | VirtualList.prototype.constructor = VirtualList; |
| 16653 | ||
| 16654 | VirtualList.prototype.setListSize = function setListSize () { | |
| 16655 | var vl = this; | |
| 16656 | var items = vl.filteredItems || vl.items; | |
| 5d51ea26 | 16657 | vl.pageHeight = vl.$scrollableParentEl[0].offsetHeight; |
| 5309fbda DC |
16658 | if (vl.dynamicHeight) { |
| 16659 | vl.listHeight = 0; | |
| 16660 | vl.heights = []; | |
| 16661 | for (var i = 0; i < items.length; i += 1) { | |
| 16662 | var itemHeight = vl.params.height(items[i]); | |
| 16663 | vl.listHeight += itemHeight; | |
| 16664 | vl.heights.push(itemHeight); | |
| 16665 | } | |
| 16666 | } else { | |
| 16667 | vl.listHeight = Math.ceil(items.length / vl.params.cols) * vl.params.height; | |
| 16668 | vl.rowsPerScreen = Math.ceil(vl.pageHeight / vl.params.height); | |
| 16669 | vl.rowsBefore = vl.params.rowsBefore || vl.rowsPerScreen * 2; | |
| 16670 | vl.rowsAfter = vl.params.rowsAfter || vl.rowsPerScreen; | |
| 16671 | vl.rowsToRender = (vl.rowsPerScreen + vl.rowsBefore + vl.rowsAfter); | |
| 16672 | vl.maxBufferHeight = (vl.rowsBefore / 2) * vl.params.height; | |
| 16673 | } | |
| 16674 | ||
| 16675 | if (vl.updatableScroll || vl.params.setListHeight) { | |
| 16676 | vl.$itemsWrapEl.css({ height: ((vl.listHeight) + "px") }); | |
| 16677 | } | |
| 16678 | }; | |
| 16679 | ||
| 16680 | VirtualList.prototype.render = function render (force, forceScrollTop) { | |
| 16681 | var vl = this; | |
| 16682 | if (force) { vl.lastRepaintY = null; } | |
| 16683 | ||
| 5d51ea26 | 16684 | var scrollTop = -(vl.$el[0].getBoundingClientRect().top - vl.$scrollableParentEl[0].getBoundingClientRect().top); |
| 5309fbda DC |
16685 | |
| 16686 | if (typeof forceScrollTop !== 'undefined') { scrollTop = forceScrollTop; } | |
| 5d51ea26 | 16687 | if (vl.lastRepaintY === null || Math.abs(scrollTop - vl.lastRepaintY) > vl.maxBufferHeight || (!vl.updatableScroll && (vl.$scrollableParentEl[0].scrollTop + vl.pageHeight >= vl.$scrollableParentEl[0].scrollHeight))) { |
| 5309fbda DC |
16688 | vl.lastRepaintY = scrollTop; |
| 16689 | } else { | |
| 16690 | return; | |
| 16691 | } | |
| 16692 | ||
| 16693 | var items = vl.filteredItems || vl.items; | |
| 16694 | var fromIndex; | |
| 16695 | var toIndex; | |
| 16696 | var heightBeforeFirstItem = 0; | |
| 16697 | var heightBeforeLastItem = 0; | |
| 16698 | if (vl.dynamicHeight) { | |
| 16699 | var itemTop = 0; | |
| 16700 | var itemHeight; | |
| 16701 | vl.maxBufferHeight = vl.pageHeight; | |
| 16702 | ||
| 16703 | for (var j = 0; j < vl.heights.length; j += 1) { | |
| 16704 | itemHeight = vl.heights[j]; | |
| 16705 | if (typeof fromIndex === 'undefined') { | |
| 16706 | if (itemTop + itemHeight >= scrollTop - (vl.pageHeight * 2 * vl.params.dynamicHeightBufferSize)) { fromIndex = j; } | |
| 16707 | else { heightBeforeFirstItem += itemHeight; } | |
| 16708 | } | |
| 16709 | ||
| 16710 | if (typeof toIndex === 'undefined') { | |
| 16711 | if (itemTop + itemHeight >= scrollTop + (vl.pageHeight * 2 * vl.params.dynamicHeightBufferSize) || j === vl.heights.length - 1) { toIndex = j + 1; } | |
| 16712 | heightBeforeLastItem += itemHeight; | |
| 16713 | } | |
| 16714 | itemTop += itemHeight; | |
| 16715 | } | |
| 16716 | toIndex = Math.min(toIndex, items.length); | |
| 16717 | } else { | |
| 16718 | fromIndex = (parseInt(scrollTop / vl.params.height, 10) - vl.rowsBefore) * vl.params.cols; | |
| 16719 | if (fromIndex < 0) { | |
| 16720 | fromIndex = 0; | |
| 16721 | } | |
| 16722 | toIndex = Math.min(fromIndex + (vl.rowsToRender * vl.params.cols), items.length); | |
| 16723 | } | |
| 16724 | ||
| 16725 | var topPosition; | |
| 16726 | var renderExternalItems = []; | |
| 16727 | vl.reachEnd = false; | |
| 16728 | var i; | |
| 16729 | for (i = fromIndex; i < toIndex; i += 1) { | |
| 16730 | var itemEl = (void 0); | |
| 16731 | // Define real item index | |
| 16732 | var index = vl.items.indexOf(items[i]); | |
| 16733 | ||
| 16734 | if (i === fromIndex) { vl.currentFromIndex = index; } | |
| 16735 | if (i === toIndex - 1) { vl.currentToIndex = index; } | |
| 16736 | if (vl.filteredItems) { | |
| 16737 | if (vl.items[index] === vl.filteredItems[vl.filteredItems.length - 1]) { vl.reachEnd = true; } | |
| 16738 | } else if (index === vl.items.length - 1) { vl.reachEnd = true; } | |
| 16739 | ||
| 16740 | // Find items | |
| 16741 | if (vl.params.renderExternal) { | |
| 16742 | renderExternalItems.push(items[i]); | |
| 16743 | } else if (vl.domCache[index]) { | |
| 16744 | itemEl = vl.domCache[index]; | |
| 16745 | itemEl.f7VirtualListIndex = index; | |
| 16746 | } else { | |
| 16747 | if (vl.renderItem) { | |
| 16748 | vl.tempDomElement.innerHTML = vl.renderItem(items[i], index).trim(); | |
| 16749 | } else { | |
| 16750 | vl.tempDomElement.innerHTML = items[i].toString().trim(); | |
| 16751 | } | |
| 16752 | itemEl = vl.tempDomElement.childNodes[0]; | |
| 16753 | if (vl.params.cache) { vl.domCache[index] = itemEl; } | |
| 16754 | itemEl.f7VirtualListIndex = index; | |
| 16755 | } | |
| 16756 | ||
| 16757 | // Set item top position | |
| 16758 | if (i === fromIndex) { | |
| 16759 | if (vl.dynamicHeight) { | |
| 16760 | topPosition = heightBeforeFirstItem; | |
| 16761 | } else { | |
| 16762 | topPosition = ((i * vl.params.height) / vl.params.cols); | |
| 16763 | } | |
| 16764 | } | |
| 16765 | if (!vl.params.renderExternal) { | |
| 16766 | itemEl.style.top = topPosition + "px"; | |
| 16767 | ||
| 16768 | // Before item insert | |
| 16769 | vl.emit('local::itemBeforeInsert vlItemBeforeInsert', vl, itemEl, items[i]); | |
| 16770 | ||
| 16771 | // Append item to fragment | |
| 16772 | vl.fragment.appendChild(itemEl); | |
| 16773 | } | |
| 16774 | } | |
| 16775 | ||
| 16776 | // Update list height with not updatable scroll | |
| 16777 | if (!vl.updatableScroll) { | |
| 16778 | if (vl.dynamicHeight) { | |
| 16779 | vl.itemsWrapEl.style.height = heightBeforeLastItem + "px"; | |
| 16780 | } else { | |
| 16781 | vl.itemsWrapEl.style.height = ((i * vl.params.height) / vl.params.cols) + "px"; | |
| 16782 | } | |
| 16783 | } | |
| 16784 | ||
| 16785 | // Update list html | |
| 16786 | if (vl.params.renderExternal) { | |
| 16787 | if (items && items.length === 0) { | |
| 16788 | vl.reachEnd = true; | |
| 16789 | } | |
| 16790 | } else { | |
| 16791 | vl.emit('local::beforeClear vlBeforeClear', vl, vl.fragment); | |
| 16792 | vl.itemsWrapEl.innerHTML = ''; | |
| 16793 | ||
| 16794 | vl.emit('local::itemsBeforeInsert vlItemsBeforeInsert', vl, vl.fragment); | |
| 16795 | ||
| 16796 | if (items && items.length === 0) { | |
| 16797 | vl.reachEnd = true; | |
| 16798 | if (vl.params.emptyTemplate) { vl.itemsWrapEl.innerHTML = vl.params.emptyTemplate; } | |
| 16799 | } else { | |
| 16800 | vl.itemsWrapEl.appendChild(vl.fragment); | |
| 16801 | } | |
| 16802 | ||
| 16803 | vl.emit('local::itemsAfterInsert vlItemsAfterInsert', vl, vl.fragment); | |
| 16804 | } | |
| 16805 | ||
| 16806 | if (typeof forceScrollTop !== 'undefined' && force) { | |
| 5d51ea26 | 16807 | vl.$scrollableParentEl.scrollTop(forceScrollTop, 0); |
| 5309fbda DC |
16808 | } |
| 16809 | if (vl.params.renderExternal) { | |
| 16810 | vl.params.renderExternal(vl, { | |
| 16811 | fromIndex: fromIndex, | |
| 16812 | toIndex: toIndex, | |
| 16813 | listHeight: vl.listHeight, | |
| 16814 | topPosition: topPosition, | |
| 16815 | items: renderExternalItems, | |
| 16816 | }); | |
| 16817 | } | |
| 16818 | }; | |
| 16819 | ||
| 16820 | // Filter | |
| 16821 | VirtualList.prototype.filterItems = function filterItems (indexes, resetScrollTop) { | |
| 16822 | if ( resetScrollTop === void 0 ) resetScrollTop = true; | |
| 16823 | ||
| 16824 | var vl = this; | |
| 16825 | vl.filteredItems = []; | |
| 16826 | for (var i = 0; i < indexes.length; i += 1) { | |
| 16827 | vl.filteredItems.push(vl.items[indexes[i]]); | |
| 16828 | } | |
| 16829 | if (resetScrollTop) { | |
| 5d51ea26 | 16830 | vl.$scrollableParentEl[0].scrollTop = 0; |
| 5309fbda DC |
16831 | } |
| 16832 | vl.update(); | |
| 16833 | }; | |
| 16834 | ||
| 16835 | VirtualList.prototype.resetFilter = function resetFilter () { | |
| 16836 | var vl = this; | |
| 16837 | if (vl.params.showFilteredItemsOnly) { | |
| 16838 | vl.filteredItems = []; | |
| 16839 | } else { | |
| 16840 | vl.filteredItems = null; | |
| 16841 | delete vl.filteredItems; | |
| 16842 | } | |
| 16843 | vl.update(); | |
| 16844 | }; | |
| 16845 | ||
| 16846 | VirtualList.prototype.scrollToItem = function scrollToItem (index) { | |
| 16847 | var vl = this; | |
| 16848 | if (index > vl.items.length) { return false; } | |
| 16849 | var itemTop = 0; | |
| 16850 | if (vl.dynamicHeight) { | |
| 16851 | for (var i = 0; i < index; i += 1) { | |
| 16852 | itemTop += vl.heights[i]; | |
| 16853 | } | |
| 16854 | } else { | |
| 16855 | itemTop = index * vl.params.height; | |
| 16856 | } | |
| 16857 | var listTop = vl.$el[0].offsetTop; | |
| 5d51ea26 | 16858 | vl.render(true, (listTop + itemTop) - parseInt(vl.$scrollableParentEl.css('padding-top'), 10)); |
| 5309fbda DC |
16859 | return true; |
| 16860 | }; | |
| 16861 | ||
| 16862 | VirtualList.prototype.handleScroll = function handleScroll () { | |
| 16863 | var vl = this; | |
| 16864 | vl.render(); | |
| 16865 | }; | |
| 16866 | ||
| 16867 | // Handle resize event | |
| 16868 | VirtualList.prototype.isVisible = function isVisible () { | |
| 16869 | var vl = this; | |
| 16870 | return !!(vl.el.offsetWidth || vl.el.offsetHeight || vl.el.getClientRects().length); | |
| 16871 | }; | |
| 16872 | ||
| 16873 | VirtualList.prototype.handleResize = function handleResize () { | |
| 16874 | var vl = this; | |
| 16875 | if (vl.isVisible()) { | |
| 16876 | vl.setListSize(); | |
| 16877 | vl.render(true); | |
| 16878 | } | |
| 16879 | }; | |
| 16880 | ||
| 16881 | // Append | |
| 16882 | VirtualList.prototype.appendItems = function appendItems (items) { | |
| 16883 | var vl = this; | |
| 16884 | for (var i = 0; i < items.length; i += 1) { | |
| 16885 | vl.items.push(items[i]); | |
| 16886 | } | |
| 16887 | vl.update(); | |
| 16888 | }; | |
| 16889 | ||
| 16890 | VirtualList.prototype.appendItem = function appendItem (item) { | |
| 16891 | var vl = this; | |
| 16892 | vl.appendItems([item]); | |
| 16893 | }; | |
| 16894 | ||
| 16895 | // Replace | |
| 16896 | VirtualList.prototype.replaceAllItems = function replaceAllItems (items) { | |
| 16897 | var vl = this; | |
| 16898 | vl.items = items; | |
| 16899 | delete vl.filteredItems; | |
| 16900 | vl.domCache = {}; | |
| 16901 | vl.update(); | |
| 16902 | }; | |
| 16903 | ||
| 16904 | VirtualList.prototype.replaceItem = function replaceItem (index, item) { | |
| 16905 | var vl = this; | |
| 16906 | vl.items[index] = item; | |
| 16907 | if (vl.params.cache) { delete vl.domCache[index]; } | |
| 16908 | vl.update(); | |
| 16909 | }; | |
| 16910 | ||
| 16911 | // Prepend | |
| 16912 | VirtualList.prototype.prependItems = function prependItems (items) { | |
| 16913 | var vl = this; | |
| 16914 | for (var i = items.length - 1; i >= 0; i -= 1) { | |
| 16915 | vl.items.unshift(items[i]); | |
| 16916 | } | |
| 16917 | if (vl.params.cache) { | |
| 16918 | var newCache = {}; | |
| 16919 | Object.keys(vl.domCache).forEach(function (cached) { | |
| 16920 | newCache[parseInt(cached, 10) + items.length] = vl.domCache[cached]; | |
| 16921 | }); | |
| 16922 | vl.domCache = newCache; | |
| 16923 | } | |
| 16924 | vl.update(); | |
| 16925 | }; | |
| 16926 | ||
| 16927 | VirtualList.prototype.prependItem = function prependItem (item) { | |
| 16928 | var vl = this; | |
| 16929 | vl.prependItems([item]); | |
| 16930 | }; | |
| 16931 | ||
| 16932 | // Move | |
| 16933 | VirtualList.prototype.moveItem = function moveItem (from, to) { | |
| 16934 | var vl = this; | |
| 16935 | var fromIndex = from; | |
| 16936 | var toIndex = to; | |
| 16937 | if (fromIndex === toIndex) { return; } | |
| 16938 | // remove item from array | |
| 16939 | var item = vl.items.splice(fromIndex, 1)[0]; | |
| 16940 | if (toIndex >= vl.items.length) { | |
| 16941 | // Add item to the end | |
| 16942 | vl.items.push(item); | |
| 16943 | toIndex = vl.items.length - 1; | |
| 16944 | } else { | |
| 16945 | // Add item to new index | |
| 16946 | vl.items.splice(toIndex, 0, item); | |
| 16947 | } | |
| 16948 | // Update cache | |
| 16949 | if (vl.params.cache) { | |
| 16950 | var newCache = {}; | |
| 16951 | Object.keys(vl.domCache).forEach(function (cached) { | |
| 16952 | var cachedIndex = parseInt(cached, 10); | |
| 16953 | var leftIndex = fromIndex < toIndex ? fromIndex : toIndex; | |
| 16954 | var rightIndex = fromIndex < toIndex ? toIndex : fromIndex; | |
| 16955 | var indexShift = fromIndex < toIndex ? -1 : 1; | |
| 16956 | if (cachedIndex < leftIndex || cachedIndex > rightIndex) { newCache[cachedIndex] = vl.domCache[cachedIndex]; } | |
| 16957 | if (cachedIndex === leftIndex) { newCache[rightIndex] = vl.domCache[cachedIndex]; } | |
| 16958 | if (cachedIndex > leftIndex && cachedIndex <= rightIndex) { newCache[cachedIndex + indexShift] = vl.domCache[cachedIndex]; } | |
| 16959 | }); | |
| 16960 | vl.domCache = newCache; | |
| 16961 | } | |
| 16962 | vl.update(); | |
| 16963 | }; | |
| 16964 | ||
| 16965 | // Insert before | |
| 16966 | VirtualList.prototype.insertItemBefore = function insertItemBefore (index, item) { | |
| 16967 | var vl = this; | |
| 16968 | if (index === 0) { | |
| 16969 | vl.prependItem(item); | |
| 16970 | return; | |
| 16971 | } | |
| 16972 | if (index >= vl.items.length) { | |
| 16973 | vl.appendItem(item); | |
| 16974 | return; | |
| 16975 | } | |
| 16976 | vl.items.splice(index, 0, item); | |
| 16977 | // Update cache | |
| 16978 | if (vl.params.cache) { | |
| 16979 | var newCache = {}; | |
| 16980 | Object.keys(vl.domCache).forEach(function (cached) { | |
| 16981 | var cachedIndex = parseInt(cached, 10); | |
| 16982 | if (cachedIndex >= index) { | |
| 16983 | newCache[cachedIndex + 1] = vl.domCache[cachedIndex]; | |
| 16984 | } | |
| 16985 | }); | |
| 16986 | vl.domCache = newCache; | |
| 16987 | } | |
| 16988 | vl.update(); | |
| 16989 | }; | |
| 16990 | ||
| 16991 | // Delete | |
| 16992 | VirtualList.prototype.deleteItems = function deleteItems (indexes) { | |
| 16993 | var vl = this; | |
| 16994 | var prevIndex; | |
| 16995 | var indexShift = 0; | |
| 16996 | var loop = function ( i ) { | |
| 16997 | var index = indexes[i]; | |
| 16998 | if (typeof prevIndex !== 'undefined') { | |
| 16999 | if (index > prevIndex) { | |
| 17000 | indexShift = -i; | |
| 17001 | } | |
| 17002 | } | |
| 17003 | index += indexShift; | |
| 17004 | prevIndex = indexes[i]; | |
| 17005 | // Delete item | |
| 17006 | var deletedItem = vl.items.splice(index, 1)[0]; | |
| 17007 | ||
| 17008 | // Delete from filtered | |
| 17009 | if (vl.filteredItems && vl.filteredItems.indexOf(deletedItem) >= 0) { | |
| 17010 | vl.filteredItems.splice(vl.filteredItems.indexOf(deletedItem), 1); | |
| 17011 | } | |
| 17012 | // Update cache | |
| 17013 | if (vl.params.cache) { | |
| 17014 | var newCache = {}; | |
| 17015 | Object.keys(vl.domCache).forEach(function (cached) { | |
| 17016 | var cachedIndex = parseInt(cached, 10); | |
| 17017 | if (cachedIndex === index) { | |
| 17018 | delete vl.domCache[index]; | |
| 17019 | } else if (parseInt(cached, 10) > index) { | |
| 17020 | newCache[cachedIndex - 1] = vl.domCache[cached]; | |
| 17021 | } else { | |
| 17022 | newCache[cachedIndex] = vl.domCache[cached]; | |
| 17023 | } | |
| 17024 | }); | |
| 17025 | vl.domCache = newCache; | |
| 17026 | } | |
| 17027 | }; | |
| 17028 | ||
| 17029 | for (var i = 0; i < indexes.length; i += 1) loop( i ); | |
| 17030 | vl.update(); | |
| 17031 | }; | |
| 17032 | ||
| 17033 | VirtualList.prototype.deleteAllItems = function deleteAllItems () { | |
| 17034 | var vl = this; | |
| 17035 | vl.items = []; | |
| 17036 | delete vl.filteredItems; | |
| 17037 | if (vl.params.cache) { vl.domCache = {}; } | |
| 17038 | vl.update(); | |
| 17039 | }; | |
| 17040 | ||
| 17041 | VirtualList.prototype.deleteItem = function deleteItem (index) { | |
| 17042 | var vl = this; | |
| 17043 | vl.deleteItems([index]); | |
| 17044 | }; | |
| 17045 | ||
| 17046 | // Clear cache | |
| 17047 | VirtualList.prototype.clearCache = function clearCache () { | |
| 17048 | var vl = this; | |
| 17049 | vl.domCache = {}; | |
| 17050 | }; | |
| 17051 | ||
| 17052 | // Update Virtual List | |
| 17053 | VirtualList.prototype.update = function update (deleteCache) { | |
| 17054 | var vl = this; | |
| 17055 | if (deleteCache && vl.params.cache) { | |
| 17056 | vl.domCache = {}; | |
| 17057 | } | |
| 17058 | vl.setListSize(); | |
| 17059 | vl.render(true); | |
| 17060 | }; | |
| 17061 | ||
| 17062 | VirtualList.prototype.init = function init () { | |
| 17063 | var vl = this; | |
| 17064 | vl.attachEvents(); | |
| 17065 | vl.setListSize(); | |
| 17066 | vl.render(); | |
| 17067 | }; | |
| 17068 | ||
| 17069 | VirtualList.prototype.destroy = function destroy () { | |
| 17070 | var vl = this; | |
| 17071 | vl.detachEvents(); | |
| 17072 | vl.$el[0].f7VirtualList = null; | |
| 17073 | delete vl.$el[0].f7VirtualList; | |
| 17074 | Utils.deleteProps(vl); | |
| 17075 | vl = null; | |
| 17076 | }; | |
| 17077 | ||
| 17078 | return VirtualList; | |
| 17079 | }(Framework7Class)); | |
| 17080 | ||
| 17081 | var VirtualList$1 = { | |
| 17082 | name: 'virtualList', | |
| 17083 | static: { | |
| 17084 | VirtualList: VirtualList, | |
| 17085 | }, | |
| 17086 | create: function create() { | |
| 17087 | var app = this; | |
| 17088 | app.virtualList = ConstructorMethods({ | |
| 17089 | defaultSelector: '.virtual-list', | |
| 17090 | constructor: VirtualList, | |
| 17091 | app: app, | |
| 17092 | domProp: 'f7VirtualList', | |
| 17093 | }); | |
| 17094 | }, | |
| 17095 | }; | |
| 17096 | ||
| 5d51ea26 | 17097 | var ListIndex = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
17098 | function ListIndex(app, params) { |
| 17099 | if ( params === void 0 ) params = {}; | |
| 17100 | ||
| 5d51ea26 | 17101 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
17102 | var index = this; |
| 17103 | ||
| 17104 | var defaults = { | |
| 17105 | el: null, // where to render indexes | |
| 17106 | listEl: null, // list el to generate indexes | |
| 17107 | indexes: 'auto', // or array of indexes | |
| 17108 | iosItemHeight: 14, | |
| 17109 | mdItemHeight: 14, | |
| 5d51ea26 | 17110 | auroraItemHeight: 14, |
| 5309fbda DC |
17111 | scrollList: true, |
| 17112 | label: false, | |
| 17113 | // eslint-disable-next-line | |
| 17114 | renderItem: function renderItem(itemContent, itemIndex) { | |
| 17115 | return ("\n <li>" + itemContent + "</li>\n ").trim(); | |
| 17116 | }, | |
| 17117 | renderSkipPlaceholder: function renderSkipPlaceholder() { | |
| 17118 | return '<li class="list-index-skip-placeholder"></li>'; | |
| 17119 | }, | |
| 17120 | on: {}, | |
| 17121 | }; | |
| 17122 | ||
| 17123 | // Extend defaults with modules params | |
| 17124 | index.useModulesParams(defaults); | |
| 17125 | ||
| 17126 | index.params = Utils.extend(defaults, params); | |
| 17127 | ||
| 17128 | var $el; | |
| 17129 | var $listEl; | |
| 17130 | var $pageContentEl; | |
| 17131 | var $ul; | |
| 17132 | ||
| 17133 | if (index.params.el) { | |
| 17134 | $el = $(index.params.el); | |
| 17135 | } else { | |
| 17136 | return index; | |
| 17137 | } | |
| 17138 | ||
| 17139 | if ($el[0].f7ListIndex) { | |
| 17140 | return $el[0].f7ListIndex; | |
| 17141 | } | |
| 17142 | ||
| 17143 | $ul = $el.find('ul'); | |
| 17144 | if ($ul.length === 0) { | |
| 17145 | $ul = $('<ul></ul>'); | |
| 17146 | $el.append($ul); | |
| 17147 | } | |
| 17148 | ||
| 17149 | if (index.params.listEl) { | |
| 17150 | $listEl = $(index.params.listEl); | |
| 17151 | } | |
| 17152 | ||
| 17153 | if (index.params.indexes === 'auto' && !$listEl) { | |
| 17154 | return index; | |
| 17155 | } | |
| 17156 | ||
| 17157 | if ($listEl) { | |
| 17158 | $pageContentEl = $listEl.parents('.page-content').eq(0); | |
| 17159 | } else { | |
| 17160 | $pageContentEl = $el.siblings('.page-content').eq(0); | |
| 17161 | if ($pageContentEl.length === 0) { | |
| 17162 | $pageContentEl = $el.parents('.page').eq(0).find('.page-content').eq(0); | |
| 17163 | } | |
| 17164 | } | |
| 17165 | ||
| 17166 | $el[0].f7ListIndex = index; | |
| 17167 | ||
| 17168 | Utils.extend(index, { | |
| 17169 | app: app, | |
| 17170 | $el: $el, | |
| 17171 | el: $el && $el[0], | |
| 17172 | $ul: $ul, | |
| 17173 | ul: $ul && $ul[0], | |
| 17174 | $listEl: $listEl, | |
| 17175 | listEl: $listEl && $listEl[0], | |
| 17176 | $pageContentEl: $pageContentEl, | |
| 17177 | pageContentEl: $pageContentEl && $pageContentEl[0], | |
| 17178 | indexes: params.indexes, | |
| 17179 | height: 0, | |
| 17180 | skipRate: 0, | |
| 17181 | }); | |
| 17182 | ||
| 17183 | // Install Modules | |
| 17184 | index.useModules(); | |
| 17185 | ||
| 17186 | // Attach events | |
| 17187 | function handleResize() { | |
| 17188 | var height = { index: index }; | |
| 17189 | index.calcSize(); | |
| 17190 | if (height !== index.height) { | |
| 17191 | index.render(); | |
| 17192 | } | |
| 17193 | } | |
| 17194 | ||
| 17195 | function handleClick(e) { | |
| 17196 | var $clickedLi = $(e.target).closest('li'); | |
| 17197 | if (!$clickedLi.length) { return; } | |
| 17198 | ||
| 17199 | var itemIndex = $clickedLi.index(); | |
| 17200 | if (index.skipRate > 0) { | |
| 17201 | var percentage = itemIndex / ($clickedLi.siblings('li').length - 1); | |
| 17202 | itemIndex = Math.round((index.indexes.length - 1) * percentage); | |
| 17203 | } | |
| 17204 | var itemContent = index.indexes[itemIndex]; | |
| 17205 | ||
| 17206 | index.$el.trigger('listindex:click', itemContent, itemIndex); | |
| 17207 | index.emit('local::click listIndexClick', index, itemContent, itemIndex); | |
| 17208 | index.$el.trigger('listindex:select', itemContent, itemIndex); | |
| 17209 | index.emit('local::select listIndexSelect', index, itemContent, itemIndex); | |
| 17210 | ||
| 17211 | if (index.$listEl && index.params.scrollList) { | |
| 17212 | index.scrollListToIndex(itemContent, itemIndex); | |
| 17213 | } | |
| 17214 | } | |
| 17215 | ||
| 17216 | var touchesStart = {}; | |
| 17217 | var isTouched; | |
| 17218 | var isMoved; | |
| 17219 | var topPoint; | |
| 17220 | var bottomPoint; | |
| 17221 | var $labelEl; | |
| 17222 | var previousIndex = null; | |
| 17223 | function handleTouchStart(e) { | |
| 17224 | var $children = $ul.children(); | |
| 17225 | if (!$children.length) { return; } | |
| 17226 | topPoint = $children[0].getBoundingClientRect().top; | |
| 17227 | bottomPoint = $children[$children.length - 1].getBoundingClientRect().top + $children[0].offsetHeight; | |
| 17228 | ||
| 17229 | touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 17230 | touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 17231 | isTouched = true; | |
| 17232 | isMoved = false; | |
| 17233 | previousIndex = null; | |
| 17234 | } | |
| 17235 | function handleTouchMove(e) { | |
| 17236 | if (!isTouched) { return; } | |
| 17237 | if (!isMoved && index.params.label) { | |
| 17238 | $labelEl = $('<span class="list-index-label"></span>'); | |
| 17239 | $el.append($labelEl); | |
| 17240 | } | |
| 17241 | isMoved = true; | |
| 17242 | var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 17243 | e.preventDefault(); | |
| 17244 | ||
| 17245 | var percentage = (pageY - topPoint) / (bottomPoint - topPoint); | |
| 17246 | percentage = Math.min(Math.max(percentage, 0), 1); | |
| 17247 | ||
| 17248 | var itemIndex = Math.round((index.indexes.length - 1) * percentage); | |
| 17249 | var itemContent = index.indexes[itemIndex]; | |
| 17250 | ||
| 17251 | ||
| 17252 | var ulHeight = bottomPoint - topPoint; | |
| 17253 | var bubbleBottom = ((index.height - ulHeight) / 2) + ((1 - percentage) * ulHeight); | |
| 17254 | ||
| 17255 | if (itemIndex !== previousIndex) { | |
| 17256 | if (index.params.label) { | |
| 17257 | $labelEl.html(itemContent).transform(("translateY(-" + bubbleBottom + "px)")); | |
| 17258 | } | |
| 17259 | ||
| 17260 | if (index.$listEl && index.params.scrollList) { | |
| 17261 | index.scrollListToIndex(itemContent, itemIndex); | |
| 17262 | } | |
| 17263 | } | |
| 17264 | ||
| 17265 | previousIndex = itemIndex; | |
| 17266 | ||
| 17267 | index.$el.trigger('listindex:select', index); | |
| 17268 | index.emit('local::select listIndexSelect', index, itemContent, itemIndex); | |
| 17269 | } | |
| 17270 | function handleTouchEnd() { | |
| 17271 | if (!isTouched) { return; } | |
| 17272 | isTouched = false; | |
| 17273 | isMoved = false; | |
| 17274 | if (index.params.label) { | |
| 17275 | if ($labelEl) { $labelEl.remove(); } | |
| 17276 | $labelEl = undefined; | |
| 17277 | } | |
| 17278 | } | |
| 17279 | var passiveListener = app.support.passiveListener ? { passive: true } : false; | |
| 17280 | index.attachEvents = function attachEvents() { | |
| 17281 | $el.parents('.tab').on('tab:show', handleResize); | |
| 17282 | $el.parents('.page').on('page:reinit', handleResize); | |
| 17283 | $el.parents('.panel').on('panel:open', handleResize); | |
| 17284 | $el | |
| 17285 | .parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast') | |
| 17286 | .on('modal:open', handleResize); | |
| 17287 | app.on('resize', handleResize); | |
| 17288 | ||
| 17289 | $el.on('click', handleClick); | |
| 17290 | $el.on(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 17291 | app.on('touchmove:active', handleTouchMove); | |
| 17292 | app.on('touchend:passive', handleTouchEnd); | |
| 17293 | }; | |
| 17294 | index.detachEvents = function attachEvents() { | |
| 17295 | $el.parents('.tab').off('tab:show', handleResize); | |
| 17296 | $el.parents('.page').off('page:reinit', handleResize); | |
| 17297 | $el.parents('.panel').off('panel:open', handleResize); | |
| 17298 | $el | |
| 17299 | .parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast') | |
| 17300 | .off('modal:open', handleResize); | |
| 17301 | app.off('resize', handleResize); | |
| 17302 | ||
| 17303 | $el.off('click', handleClick); | |
| 17304 | $el.off(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 17305 | app.off('touchmove:active', handleTouchMove); | |
| 17306 | app.off('touchend:passive', handleTouchEnd); | |
| 17307 | }; | |
| 17308 | // Init | |
| 17309 | index.init(); | |
| 17310 | ||
| 17311 | return index; | |
| 17312 | } | |
| 17313 | ||
| 5d51ea26 DC |
17314 | if ( Framework7Class ) ListIndex.__proto__ = Framework7Class; |
| 17315 | ListIndex.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
17316 | ListIndex.prototype.constructor = ListIndex; |
| 17317 | // eslint-disable-next-line | |
| 17318 | ListIndex.prototype.scrollListToIndex = function scrollListToIndex (itemContent, itemIndex) { | |
| 17319 | var index = this; | |
| 17320 | var $listEl = index.$listEl; | |
| 17321 | var $pageContentEl = index.$pageContentEl; | |
| 5d51ea26 | 17322 | var app = index.app; |
| 5309fbda DC |
17323 | if (!$listEl || !$pageContentEl || $pageContentEl.length === 0) { return index; } |
| 17324 | ||
| 17325 | var $scrollToEl; | |
| 17326 | $listEl.find('.list-group-title, .item-divider').each(function (elIndex, el) { | |
| 17327 | if ($scrollToEl) { return; } | |
| 17328 | var $el = $(el); | |
| 17329 | if ($el.text() === itemContent) { | |
| 17330 | $scrollToEl = $el; | |
| 17331 | } | |
| 17332 | }); | |
| 17333 | if (!$scrollToEl || $scrollToEl.length === 0) { return index; } | |
| 17334 | ||
| 17335 | var parentTop = $scrollToEl.parent().offset().top; | |
| 17336 | var paddingTop = parseInt($pageContentEl.css('padding-top'), 10); | |
| 17337 | var scrollTop = $pageContentEl[0].scrollTop; | |
| 17338 | var scrollToElTop = $scrollToEl.offset().top; | |
| 5d51ea26 DC |
17339 | if ($pageContentEl.parents('.page-with-navbar-large').length) { |
| 17340 | var navbarInnerEl = app.navbar.getElByPage($pageContentEl.parents('.page-with-navbar-large').eq(0)); | |
| 17341 | var $titleLargeEl = $(navbarInnerEl).find('.title-large'); | |
| 17342 | if ($titleLargeEl.length) { | |
| 17343 | paddingTop -= $titleLargeEl[0].offsetHeight || 0; | |
| 17344 | } | |
| 17345 | } | |
| 5309fbda DC |
17346 | |
| 17347 | if (parentTop <= paddingTop) { | |
| 17348 | $pageContentEl.scrollTop((parentTop + scrollTop) - paddingTop); | |
| 17349 | } else { | |
| 17350 | $pageContentEl.scrollTop((scrollToElTop + scrollTop) - paddingTop); | |
| 17351 | } | |
| 17352 | return index; | |
| 17353 | }; | |
| 17354 | ||
| 17355 | ListIndex.prototype.renderSkipPlaceholder = function renderSkipPlaceholder () { | |
| 17356 | var index = this; | |
| 17357 | return index.params.renderSkipPlaceholder.call(index); | |
| 17358 | }; | |
| 17359 | ||
| 17360 | ListIndex.prototype.renderItem = function renderItem (itemContent, itemIndex) { | |
| 17361 | var index = this; | |
| 17362 | return index.params.renderItem.call(index, itemContent, itemIndex); | |
| 17363 | }; | |
| 17364 | ||
| 17365 | ListIndex.prototype.render = function render () { | |
| 17366 | var index = this; | |
| 17367 | var $ul = index.$ul; | |
| 17368 | var indexes = index.indexes; | |
| 17369 | var skipRate = index.skipRate; | |
| 17370 | var wasSkipped; | |
| 17371 | ||
| 17372 | var html = indexes.map(function (itemContent, itemIndex) { | |
| 17373 | if (itemIndex % skipRate !== 0 && skipRate > 0) { | |
| 17374 | wasSkipped = true; | |
| 17375 | return ''; | |
| 17376 | } | |
| 17377 | var itemHtml = index.renderItem(itemContent, itemIndex); | |
| 17378 | if (wasSkipped) { | |
| 17379 | itemHtml = index.renderSkipPlaceholder() + itemHtml; | |
| 17380 | } | |
| 17381 | wasSkipped = false; | |
| 17382 | return itemHtml; | |
| 17383 | }).join(''); | |
| 17384 | ||
| 17385 | $ul.html(html); | |
| 17386 | ||
| 17387 | return index; | |
| 17388 | }; | |
| 17389 | ||
| 17390 | ListIndex.prototype.calcSize = function calcSize () { | |
| 17391 | var index = this; | |
| 17392 | var app = index.app; | |
| 17393 | var params = index.params; | |
| 17394 | var el = index.el; | |
| 17395 | var indexes = index.indexes; | |
| 17396 | var height = el.offsetHeight; | |
| 5d51ea26 | 17397 | var itemHeight = params[((app.theme) + "ItemHeight")]; |
| 5309fbda DC |
17398 | var maxItems = Math.floor(height / itemHeight); |
| 17399 | var items = indexes.length; | |
| 17400 | var skipRate = 0; | |
| 17401 | if (items > maxItems) { | |
| 17402 | skipRate = Math.ceil(((items * 2) - 1) / maxItems); | |
| 17403 | } | |
| 17404 | ||
| 17405 | index.height = height; | |
| 17406 | index.skipRate = skipRate; | |
| 17407 | ||
| 17408 | return index; | |
| 17409 | }; | |
| 17410 | ||
| 17411 | ListIndex.prototype.calcIndexes = function calcIndexes () { | |
| 17412 | var index = this; | |
| 17413 | if (index.params.indexes === 'auto') { | |
| 17414 | index.indexes = []; | |
| 17415 | ||
| 17416 | index.$listEl.find('.list-group-title, .item-divider').each(function (elIndex, el) { | |
| 17417 | var elContent = $(el).text(); | |
| 17418 | if (index.indexes.indexOf(elContent) < 0) { | |
| 17419 | index.indexes.push(elContent); | |
| 17420 | } | |
| 17421 | }); | |
| 17422 | } else { | |
| 17423 | index.indexes = index.params.indexes; | |
| 17424 | } | |
| 17425 | return index; | |
| 17426 | }; | |
| 17427 | ||
| 17428 | ListIndex.prototype.update = function update () { | |
| 17429 | var index = this; | |
| 17430 | index.calcIndexes(); | |
| 17431 | index.calcSize(); | |
| 17432 | index.render(); | |
| 17433 | ||
| 17434 | return index; | |
| 17435 | }; | |
| 17436 | ||
| 17437 | ListIndex.prototype.init = function init () { | |
| 17438 | var index = this; | |
| 17439 | index.calcIndexes(); | |
| 17440 | index.calcSize(); | |
| 17441 | index.render(); | |
| 17442 | index.attachEvents(); | |
| 17443 | }; | |
| 17444 | ||
| 17445 | ListIndex.prototype.destroy = function destroy () { | |
| 17446 | var index = this; | |
| 17447 | index.$el.trigger('listindex:beforedestroy', index); | |
| 17448 | index.emit('local::beforeDestroy listIndexBeforeDestroy', index); | |
| 17449 | index.detachEvents(); | |
| 17450 | if (index.$el[0]) { | |
| 17451 | index.$el[0].f7ListIndex = null; | |
| 17452 | delete index.$el[0].f7ListIndex; | |
| 17453 | } | |
| 17454 | Utils.deleteProps(index); | |
| 17455 | index = null; | |
| 17456 | }; | |
| 17457 | ||
| 17458 | return ListIndex; | |
| 17459 | }(Framework7Class)); | |
| 17460 | ||
| 17461 | var ListIndex$1 = { | |
| 17462 | name: 'listIndex', | |
| 17463 | static: { | |
| 17464 | ListIndex: ListIndex, | |
| 17465 | }, | |
| 17466 | create: function create() { | |
| 17467 | var app = this; | |
| 17468 | app.listIndex = ConstructorMethods({ | |
| 17469 | defaultSelector: '.list-index', | |
| 17470 | constructor: ListIndex, | |
| 17471 | app: app, | |
| 17472 | domProp: 'f7ListIndex', | |
| 17473 | }); | |
| 17474 | }, | |
| 17475 | on: { | |
| 17476 | tabMounted: function tabMounted(tabEl) { | |
| 17477 | var app = this; | |
| 17478 | $(tabEl).find('.list-index-init').each(function (index, listIndexEl) { | |
| 17479 | var params = Utils.extend($(listIndexEl).dataset(), { el: listIndexEl }); | |
| 17480 | app.listIndex.create(params); | |
| 17481 | }); | |
| 17482 | }, | |
| 17483 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 17484 | $(tabEl).find('.list-index-init').each(function (index, listIndexEl) { | |
| 17485 | if (listIndexEl.f7ListIndex) { listIndexEl.f7ListIndex.destroy(); } | |
| 17486 | }); | |
| 17487 | }, | |
| 17488 | pageInit: function pageInit(page) { | |
| 17489 | var app = this; | |
| 17490 | page.$el.find('.list-index-init').each(function (index, listIndexEl) { | |
| 17491 | var params = Utils.extend($(listIndexEl).dataset(), { el: listIndexEl }); | |
| 17492 | app.listIndex.create(params); | |
| 17493 | }); | |
| 17494 | }, | |
| 17495 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 17496 | page.$el.find('.list-index-init').each(function (index, listIndexEl) { | |
| 17497 | if (listIndexEl.f7ListIndex) { listIndexEl.f7ListIndex.destroy(); } | |
| 17498 | }); | |
| 17499 | }, | |
| 17500 | }, | |
| 17501 | vnode: { | |
| 17502 | 'list-index-init': { | |
| 17503 | insert: function insert(vnode) { | |
| 17504 | var app = this; | |
| 17505 | var listIndexEl = vnode.elm; | |
| 17506 | var params = Utils.extend($(listIndexEl).dataset(), { el: listIndexEl }); | |
| 17507 | app.listIndex.create(params); | |
| 17508 | }, | |
| 17509 | destroy: function destroy(vnode) { | |
| 17510 | var listIndexEl = vnode.elm; | |
| 17511 | if (listIndexEl.f7ListIndex) { listIndexEl.f7ListIndex.destroy(); } | |
| 17512 | }, | |
| 17513 | }, | |
| 17514 | }, | |
| 17515 | }; | |
| 17516 | ||
| 17517 | var Timeline = { | |
| 17518 | name: 'timeline', | |
| 17519 | }; | |
| 17520 | ||
| 17521 | var Tab = { | |
| 17522 | show: function show() { | |
| 17523 | var assign, assign$1, assign$2; | |
| 17524 | ||
| 17525 | var args = [], len = arguments.length; | |
| 17526 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 17527 | var app = this; | |
| 17528 | ||
| 17529 | var tabEl; | |
| 17530 | var tabLinkEl; | |
| 17531 | var animate; | |
| 17532 | var tabRoute; | |
| 17533 | if (args.length === 1 && args[0].constructor === Object) { | |
| 17534 | tabEl = args[0].tabEl; | |
| 17535 | tabLinkEl = args[0].tabLinkEl; | |
| 17536 | animate = args[0].animate; | |
| 17537 | tabRoute = args[0].tabRoute; | |
| 17538 | } else { | |
| 17539 | (assign = args, tabEl = assign[0], tabLinkEl = assign[1], animate = assign[2], tabRoute = assign[3]); | |
| 17540 | if (typeof args[1] === 'boolean') { | |
| 17541 | (assign$1 = args, tabEl = assign$1[0], animate = assign$1[1], tabLinkEl = assign$1[2], tabRoute = assign$1[3]); | |
| 17542 | if (args.length > 2 && tabLinkEl.constructor === Object) { | |
| 17543 | (assign$2 = args, tabEl = assign$2[0], animate = assign$2[1], tabRoute = assign$2[2], tabLinkEl = assign$2[3]); | |
| 17544 | } | |
| 17545 | } | |
| 17546 | } | |
| 17547 | if (typeof animate === 'undefined') { animate = true; } | |
| 17548 | ||
| 17549 | var $newTabEl = $(tabEl); | |
| 17550 | if (tabRoute && $newTabEl[0]) { | |
| 17551 | $newTabEl[0].f7TabRoute = tabRoute; | |
| 17552 | } | |
| 17553 | ||
| 17554 | if ($newTabEl.length === 0 || $newTabEl.hasClass('tab-active')) { | |
| 17555 | return { | |
| 17556 | $newTabEl: $newTabEl, | |
| 17557 | newTabEl: $newTabEl[0], | |
| 17558 | }; | |
| 17559 | } | |
| 17560 | ||
| 17561 | var $tabLinkEl; | |
| 17562 | if (tabLinkEl) { $tabLinkEl = $(tabLinkEl); } | |
| 17563 | ||
| 17564 | var $tabsEl = $newTabEl.parent('.tabs'); | |
| 17565 | if ($tabsEl.length === 0) { | |
| 17566 | return { | |
| 17567 | $newTabEl: $newTabEl, | |
| 17568 | newTabEl: $newTabEl[0], | |
| 17569 | }; | |
| 17570 | } | |
| 17571 | ||
| 17572 | // Release swipeouts in hidden tabs | |
| 17573 | if (app.swipeout) { app.swipeout.allowOpen = true; } | |
| 17574 | ||
| 17575 | // Animated tabs | |
| 17576 | var tabsChangedCallbacks = []; | |
| 17577 | ||
| 17578 | function onTabsChanged(callback) { | |
| 17579 | tabsChangedCallbacks.push(callback); | |
| 17580 | } | |
| 17581 | function tabsChanged() { | |
| 17582 | tabsChangedCallbacks.forEach(function (callback) { | |
| 17583 | callback(); | |
| 17584 | }); | |
| 17585 | } | |
| 17586 | ||
| 17587 | var animated = false; | |
| 17588 | ||
| 17589 | if ($tabsEl.parent().hasClass('tabs-animated-wrap')) { | |
| 17590 | $tabsEl.parent()[animate ? 'removeClass' : 'addClass']('not-animated'); | |
| 17591 | ||
| 17592 | var transitionDuration = parseFloat($tabsEl.css('transition-duration').replace(',', '.')); | |
| 17593 | if (animate && transitionDuration) { | |
| 17594 | $tabsEl.transitionEnd(tabsChanged); | |
| 17595 | animated = true; | |
| 17596 | } | |
| 17597 | ||
| 17598 | var tabsTranslate = (app.rtl ? $newTabEl.index() : -$newTabEl.index()) * 100; | |
| 17599 | $tabsEl.transform(("translate3d(" + tabsTranslate + "%,0,0)")); | |
| 17600 | } | |
| 17601 | ||
| 17602 | // Swipeable tabs | |
| 17603 | var swiper; | |
| 17604 | if ($tabsEl.parent().hasClass('tabs-swipeable-wrap') && app.swiper) { | |
| 17605 | swiper = $tabsEl.parent()[0].swiper; | |
| 17606 | if (swiper && swiper.activeIndex !== $newTabEl.index()) { | |
| 17607 | animated = true; | |
| 17608 | swiper | |
| 17609 | .once('slideChangeTransitionEnd', function () { | |
| 17610 | tabsChanged(); | |
| 17611 | }) | |
| 17612 | .slideTo($newTabEl.index(), animate ? undefined : 0); | |
| 17613 | } else if (swiper && swiper.animating) { | |
| 17614 | animated = true; | |
| 17615 | swiper | |
| 17616 | .once('slideChangeTransitionEnd', function () { | |
| 17617 | tabsChanged(); | |
| 17618 | }); | |
| 17619 | } | |
| 17620 | } | |
| 17621 | ||
| 17622 | // Remove active class from old tabs | |
| 17623 | var $oldTabEl = $tabsEl.children('.tab-active'); | |
| 17624 | $oldTabEl.removeClass('tab-active'); | |
| 17625 | if (!swiper || (swiper && !swiper.animating) || (swiper && tabRoute)) { | |
| 17626 | $oldTabEl.trigger('tab:hide'); | |
| 17627 | app.emit('tabHide', $oldTabEl[0]); | |
| 17628 | } | |
| 17629 | ||
| 17630 | // Trigger 'show' event on new tab | |
| 17631 | $newTabEl.addClass('tab-active'); | |
| 17632 | if (!swiper || (swiper && !swiper.animating) || (swiper && tabRoute)) { | |
| 17633 | $newTabEl.trigger('tab:show'); | |
| 17634 | app.emit('tabShow', $newTabEl[0]); | |
| 17635 | } | |
| 17636 | ||
| 17637 | // Find related link for new tab | |
| 17638 | if (!$tabLinkEl) { | |
| 17639 | // Search by id | |
| 17640 | if (typeof tabEl === 'string') { $tabLinkEl = $((".tab-link[href=\"" + tabEl + "\"]")); } | |
| 17641 | else { $tabLinkEl = $((".tab-link[href=\"#" + ($newTabEl.attr('id')) + "\"]")); } | |
| 17642 | // Search by data-tab | |
| 17643 | if (!$tabLinkEl || ($tabLinkEl && $tabLinkEl.length === 0)) { | |
| 17644 | $('[data-tab]').each(function (index, el) { | |
| 17645 | if ($newTabEl.is($(el).attr('data-tab'))) { $tabLinkEl = $(el); } | |
| 17646 | }); | |
| 17647 | } | |
| 17648 | if (tabRoute && (!$tabLinkEl || ($tabLinkEl && $tabLinkEl.length === 0))) { | |
| 17649 | $tabLinkEl = $(("[data-route-tab-id=\"" + (tabRoute.route.tab.id) + "\"]")); | |
| 17650 | if ($tabLinkEl.length === 0) { | |
| 17651 | $tabLinkEl = $((".tab-link[href=\"" + (tabRoute.url) + "\"]")); | |
| 17652 | } | |
| 17653 | } | |
| 17654 | if ($tabLinkEl.length > 1 && $newTabEl.parents('.page').length) { | |
| 17655 | // eslint-disable-next-line | |
| 17656 | $tabLinkEl = $tabLinkEl.filter(function (index, tabLinkElement) { | |
| 17657 | return $(tabLinkElement).parents('.page')[0] === $newTabEl.parents('.page')[0]; | |
| 17658 | }); | |
| 17659 | if (app.theme === 'ios' && $tabLinkEl.length === 0 && tabRoute) { | |
| 17660 | var $pageEl = $newTabEl.parents('.page'); | |
| 17661 | var $navbarEl = $(app.navbar.getElByPage($pageEl)); | |
| 17662 | $tabLinkEl = $navbarEl.find(("[data-route-tab-id=\"" + (tabRoute.route.tab.id) + "\"]")); | |
| 17663 | if ($tabLinkEl.length === 0) { | |
| 17664 | $tabLinkEl = $navbarEl.find((".tab-link[href=\"" + (tabRoute.url) + "\"]")); | |
| 17665 | } | |
| 17666 | } | |
| 17667 | } | |
| 17668 | } | |
| 17669 | if ($tabLinkEl.length > 0) { | |
| 17670 | // Find related link for old tab | |
| 17671 | var $oldTabLinkEl; | |
| 17672 | if ($oldTabEl && $oldTabEl.length > 0) { | |
| 17673 | // Search by id | |
| 17674 | var oldTabId = $oldTabEl.attr('id'); | |
| 17675 | if (oldTabId) { | |
| 17676 | $oldTabLinkEl = $((".tab-link[href=\"#" + oldTabId + "\"]")); | |
| 17677 | // Search by data-route-tab-id | |
| 17678 | if (!$oldTabLinkEl || ($oldTabLinkEl && $oldTabLinkEl.length === 0)) { | |
| 17679 | $oldTabLinkEl = $((".tab-link[data-route-tab-id=\"" + oldTabId + "\"]")); | |
| 17680 | } | |
| 17681 | } | |
| 17682 | // Search by data-tab | |
| 17683 | if (!$oldTabLinkEl || ($oldTabLinkEl && $oldTabLinkEl.length === 0)) { | |
| 17684 | $('[data-tab]').each(function (index, tabLinkElement) { | |
| 17685 | if ($oldTabEl.is($(tabLinkElement).attr('data-tab'))) { $oldTabLinkEl = $(tabLinkElement); } | |
| 17686 | }); | |
| 17687 | } | |
| 17688 | if (!$oldTabLinkEl || ($oldTabLinkEl && $oldTabLinkEl.length === 0)) { | |
| 17689 | $oldTabLinkEl = $tabLinkEl.siblings('.tab-link-active'); | |
| 17690 | } | |
| 17691 | } else if (tabRoute) { | |
| 17692 | $oldTabLinkEl = $tabLinkEl.siblings('.tab-link-active'); | |
| 17693 | } | |
| 17694 | ||
| 17695 | if ($oldTabLinkEl && $oldTabLinkEl.length > 1 && $oldTabEl && $oldTabEl.parents('.page').length) { | |
| 17696 | // eslint-disable-next-line | |
| 17697 | $oldTabLinkEl = $oldTabLinkEl.filter(function (index, tabLinkElement) { | |
| 17698 | return $(tabLinkElement).parents('.page')[0] === $oldTabEl.parents('.page')[0]; | |
| 17699 | }); | |
| 17700 | } | |
| 17701 | ||
| 17702 | if ($oldTabLinkEl && $oldTabLinkEl.length > 0) { $oldTabLinkEl.removeClass('tab-link-active'); } | |
| 17703 | ||
| 17704 | // Update links' classes | |
| 17705 | if ($tabLinkEl && $tabLinkEl.length > 0) { | |
| 17706 | $tabLinkEl.addClass('tab-link-active'); | |
| 17707 | // Material Highlight | |
| 17708 | if (app.theme === 'md' && app.toolbar) { | |
| 17709 | var $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels'); | |
| 17710 | if ($tabbarEl.length > 0) { | |
| 17711 | app.toolbar.setHighlight($tabbarEl); | |
| 17712 | } | |
| 17713 | } | |
| 17714 | } | |
| 17715 | } | |
| 17716 | return { | |
| 17717 | $newTabEl: $newTabEl, | |
| 17718 | newTabEl: $newTabEl[0], | |
| 17719 | $oldTabEl: $oldTabEl, | |
| 17720 | oldTabEl: $oldTabEl[0], | |
| 17721 | onTabsChanged: onTabsChanged, | |
| 17722 | animated: animated, | |
| 17723 | }; | |
| 17724 | }, | |
| 17725 | }; | |
| 17726 | var Tabs = { | |
| 17727 | name: 'tabs', | |
| 17728 | create: function create() { | |
| 17729 | var app = this; | |
| 17730 | Utils.extend(app, { | |
| 17731 | tab: { | |
| 17732 | show: Tab.show.bind(app), | |
| 17733 | }, | |
| 17734 | }); | |
| 17735 | }, | |
| 17736 | clicks: { | |
| 17737 | '.tab-link': function tabLinkClick($clickedEl, data) { | |
| 17738 | if ( data === void 0 ) data = {}; | |
| 17739 | ||
| 17740 | var app = this; | |
| 17741 | if (($clickedEl.attr('href') && $clickedEl.attr('href').indexOf('#') === 0) || $clickedEl.attr('data-tab')) { | |
| 17742 | app.tab.show({ | |
| 17743 | tabEl: data.tab || $clickedEl.attr('href'), | |
| 17744 | tabLinkEl: $clickedEl, | |
| 17745 | animate: data.animate, | |
| 17746 | }); | |
| 17747 | } | |
| 17748 | }, | |
| 17749 | }, | |
| 17750 | }; | |
| 17751 | ||
| 17752 | function swipePanel(panel) { | |
| 17753 | var app = panel.app; | |
| 17754 | Utils.extend(panel, { | |
| 17755 | swipeable: true, | |
| 17756 | swipeInitialized: true, | |
| 17757 | }); | |
| 17758 | var params = app.params.panel; | |
| 17759 | var $el = panel.$el; | |
| 17760 | var $backdropEl = panel.$backdropEl; | |
| 17761 | var side = panel.side; | |
| 17762 | var effect = panel.effect; | |
| 17763 | var otherPanel; | |
| 17764 | ||
| 17765 | var isTouched; | |
| 17766 | var isMoved; | |
| 17767 | var isScrolling; | |
| 17768 | var touchesStart = {}; | |
| 17769 | var touchStartTime; | |
| 17770 | var touchesDiff; | |
| 17771 | var translate; | |
| 17772 | var backdropOpacity; | |
| 17773 | var panelWidth; | |
| 17774 | var direction; | |
| 17775 | ||
| 17776 | var $viewEl; | |
| 17777 | ||
| 17778 | var touchMoves = 0; | |
| 17779 | function handleTouchStart(e) { | |
| 17780 | if (!panel.swipeable) { return; } | |
| 17781 | if (!app.panel.allowOpen || (!params.swipe && !params.swipeOnlyClose) || isTouched) { return; } | |
| 17782 | if ($('.modal-in:not(.toast):not(.notification), .photo-browser-in').length > 0) { return; } | |
| 17783 | otherPanel = app.panel[side === 'left' ? 'right' : 'left'] || {}; | |
| 17784 | if (!panel.opened && otherPanel.opened) { return; } | |
| 17785 | if (!(params.swipeCloseOpposite || params.swipeOnlyClose)) { | |
| 17786 | if (otherPanel.opened) { return; } | |
| 17787 | } | |
| 17788 | if (e.target && e.target.nodeName.toLowerCase() === 'input' && e.target.type === 'range') { return; } | |
| 17789 | if ($(e.target).closest('.range-slider, .tabs-swipeable-wrap, .calendar-months, .no-swipe-panel, .card-opened').length > 0) { return; } | |
| 17790 | touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 17791 | touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 17792 | if (params.swipeOnlyClose && !panel.opened) { | |
| 17793 | return; | |
| 17794 | } | |
| 17795 | if (params.swipe !== 'both' && params.swipeCloseOpposite && params.swipe !== side && !panel.opened) { | |
| 17796 | return; | |
| 17797 | } | |
| 17798 | if (params.swipeActiveArea && !panel.opened) { | |
| 17799 | if (side === 'left') { | |
| 17800 | if (touchesStart.x > params.swipeActiveArea) { return; } | |
| 17801 | } | |
| 17802 | if (side === 'right') { | |
| 17803 | if (touchesStart.x < app.width - params.swipeActiveArea) { return; } | |
| 17804 | } | |
| 17805 | } | |
| 17806 | if (params.swipeCloseActiveAreaSide && panel.opened) { | |
| 17807 | if (side === 'left') { | |
| 17808 | if (touchesStart.x < ($el[0].offsetWidth - params.swipeCloseActiveAreaSide)) { return; } | |
| 17809 | } | |
| 17810 | if (side === 'right') { | |
| 17811 | if (touchesStart.x > ((app.width - $el[0].offsetWidth) + params.swipeCloseActiveAreaSide)) { return; } | |
| 17812 | } | |
| 17813 | } | |
| 17814 | touchMoves = 0; | |
| 17815 | $viewEl = $(panel.getViewEl()); | |
| 17816 | isMoved = false; | |
| 17817 | isTouched = true; | |
| 17818 | isScrolling = undefined; | |
| 17819 | ||
| 17820 | touchStartTime = Utils.now(); | |
| 17821 | direction = undefined; | |
| 17822 | } | |
| 17823 | function handleTouchMove(e) { | |
| 17824 | if (!isTouched) { return; } | |
| 17825 | touchMoves += 1; | |
| 17826 | if (touchMoves < 2) { return; } | |
| 17827 | if (e.f7PreventSwipePanel || app.preventSwipePanelBySwipeBack || app.preventSwipePanel) { | |
| 17828 | isTouched = false; | |
| 17829 | return; | |
| 17830 | } | |
| 17831 | var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 17832 | var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 17833 | if (typeof isScrolling === 'undefined') { | |
| 17834 | isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x)); | |
| 17835 | } | |
| 17836 | if (isScrolling) { | |
| 17837 | isTouched = false; | |
| 17838 | return; | |
| 17839 | } | |
| 17840 | if (!direction) { | |
| 17841 | if (pageX > touchesStart.x) { | |
| 17842 | direction = 'to-right'; | |
| 17843 | } else { | |
| 17844 | direction = 'to-left'; | |
| 17845 | } | |
| 17846 | ||
| 17847 | if (params.swipe === 'both') { | |
| 17848 | if (params.swipeActiveArea > 0 && !panel.opened) { | |
| 17849 | if (side === 'left' && touchesStart.x > params.swipeActiveArea) { | |
| 17850 | isTouched = false; | |
| 17851 | return; | |
| 17852 | } | |
| 17853 | if (side === 'right' && touchesStart.x < app.width - params.swipeActiveArea) { | |
| 17854 | isTouched = false; | |
| 17855 | return; | |
| 17856 | } | |
| 17857 | } | |
| 17858 | } | |
| 17859 | if ($el.hasClass('panel-visible-by-breakpoint')) { | |
| 17860 | isTouched = false; | |
| 17861 | return; | |
| 17862 | } | |
| 17863 | ||
| 17864 | if ( | |
| 17865 | (side === 'left' | |
| 17866 | && ( | |
| 17867 | direction === 'to-left' && !$el.hasClass('panel-active') | |
| 17868 | ) | |
| 17869 | ) | |
| 17870 | || (side === 'right' | |
| 17871 | && ( | |
| 17872 | direction === 'to-right' && !$el.hasClass('panel-active') | |
| 17873 | ) | |
| 17874 | ) | |
| 17875 | ) { | |
| 17876 | isTouched = false; | |
| 17877 | return; | |
| 17878 | } | |
| 17879 | } | |
| 17880 | ||
| 17881 | var threshold = panel.opened ? 0 : -params.swipeThreshold; | |
| 17882 | if (side === 'right') { threshold = -threshold; } | |
| 17883 | ||
| 17884 | if (params.swipeNoFollow) { | |
| 17885 | var touchesDiffNoFollow = (pageX - touchesStart.x); | |
| 17886 | var timeDiff = (new Date()).getTime() - touchStartTime; | |
| 17887 | var needToSwitch; | |
| 17888 | if (!panel.opened && ( | |
| 17889 | (side === 'left' && touchesDiffNoFollow > -threshold) | |
| 17890 | || (side === 'right' && -touchesDiffNoFollow > threshold) | |
| 17891 | )) { | |
| 17892 | needToSwitch = true; | |
| 17893 | } | |
| 17894 | if (panel.opened && ( | |
| 17895 | (side === 'left' && touchesDiffNoFollow < 0) | |
| 17896 | || (side === 'right' && touchesDiffNoFollow > 0) | |
| 17897 | )) { | |
| 17898 | needToSwitch = true; | |
| 17899 | } | |
| 17900 | ||
| 17901 | if (needToSwitch) { | |
| 17902 | if (timeDiff < 300) { | |
| 17903 | if (direction === 'to-left') { | |
| 17904 | if (side === 'right') { app.panel.open(side); } | |
| 17905 | if (side === 'left' && $el.hasClass('panel-active')) { app.panel.close(); } | |
| 17906 | } | |
| 17907 | if (direction === 'to-right') { | |
| 17908 | if (side === 'left') { app.panel.open(side); } | |
| 17909 | if (side === 'right' && $el.hasClass('panel-active')) { app.panel.close(); } | |
| 17910 | } | |
| 17911 | } | |
| 17912 | isTouched = false; | |
| 17913 | isMoved = false; | |
| 17914 | } | |
| 17915 | return; | |
| 17916 | } | |
| 17917 | ||
| 17918 | if (!isMoved) { | |
| 17919 | if (!panel.opened) { | |
| 5d51ea26 DC |
17920 | $el.css('display', 'block'); |
| 17921 | $backdropEl.css('display', 'block'); | |
| 5309fbda DC |
17922 | $el.trigger('panel:swipeopen', panel); |
| 17923 | panel.emit('local::swipeOpen panelSwipeOpen', panel); | |
| 17924 | } | |
| 17925 | panelWidth = $el[0].offsetWidth; | |
| 17926 | $el.transition(0); | |
| 17927 | } | |
| 17928 | ||
| 17929 | isMoved = true; | |
| 17930 | ||
| 17931 | e.preventDefault(); | |
| 17932 | ||
| 17933 | touchesDiff = (pageX - touchesStart.x) + threshold; | |
| 17934 | ||
| 17935 | if (side === 'right') { | |
| 17936 | if (effect === 'cover') { | |
| 17937 | translate = touchesDiff + (panel.opened ? 0 : panelWidth); | |
| 17938 | if (translate < 0) { translate = 0; } | |
| 17939 | if (translate > panelWidth) { | |
| 17940 | translate = panelWidth; | |
| 17941 | } | |
| 17942 | } else { | |
| 17943 | translate = touchesDiff - (panel.opened ? panelWidth : 0); | |
| 17944 | if (translate > 0) { translate = 0; } | |
| 17945 | if (translate < -panelWidth) { | |
| 17946 | translate = -panelWidth; | |
| 17947 | } | |
| 17948 | } | |
| 17949 | } else { | |
| 17950 | translate = touchesDiff + (panel.opened ? panelWidth : 0); | |
| 17951 | if (translate < 0) { translate = 0; } | |
| 17952 | if (translate > panelWidth) { | |
| 17953 | translate = panelWidth; | |
| 17954 | } | |
| 17955 | } | |
| 17956 | if (effect === 'reveal') { | |
| 17957 | $viewEl.transform(("translate3d(" + translate + "px,0,0)")).transition(0); | |
| 17958 | $backdropEl.transform(("translate3d(" + translate + "px,0,0)")).transition(0); | |
| 17959 | ||
| 17960 | $el.trigger('panel:swipe', panel, Math.abs(translate / panelWidth)); | |
| 17961 | panel.emit('local::swipe panelSwipe', panel, Math.abs(translate / panelWidth)); | |
| 17962 | } else { | |
| 17963 | if (side === 'left') { translate -= panelWidth; } | |
| 17964 | $el.transform(("translate3d(" + translate + "px,0,0)")).transition(0); | |
| 17965 | ||
| 17966 | $backdropEl.transition(0); | |
| 17967 | backdropOpacity = 1 - Math.abs(translate / panelWidth); | |
| 17968 | $backdropEl.css({ opacity: backdropOpacity }); | |
| 17969 | ||
| 17970 | $el.trigger('panel:swipe', panel, Math.abs(translate / panelWidth)); | |
| 17971 | panel.emit('local::swipe panelSwipe', panel, Math.abs(translate / panelWidth)); | |
| 17972 | } | |
| 17973 | } | |
| 17974 | function handleTouchEnd() { | |
| 17975 | if (!isTouched || !isMoved) { | |
| 17976 | isTouched = false; | |
| 17977 | isMoved = false; | |
| 17978 | return; | |
| 17979 | } | |
| 17980 | isTouched = false; | |
| 17981 | isMoved = false; | |
| 17982 | var timeDiff = (new Date()).getTime() - touchStartTime; | |
| 17983 | var action; | |
| 17984 | var edge = (translate === 0 || Math.abs(translate) === panelWidth); | |
| 17985 | ||
| 17986 | var threshold = params.swipeThreshold || 0; | |
| 17987 | ||
| 17988 | if (!panel.opened) { | |
| 17989 | if (Math.abs(touchesDiff) < threshold) { | |
| 17990 | action = 'reset'; | |
| 17991 | } else if (effect === 'cover') { | |
| 17992 | if (translate === 0) { | |
| 17993 | action = 'swap'; // open | |
| 17994 | } else if (timeDiff < 300 && Math.abs(translate) > 0) { | |
| 17995 | action = 'swap'; // open | |
| 17996 | } else if (timeDiff >= 300 && Math.abs(translate) < panelWidth / 2) { | |
| 17997 | action = 'swap'; // open | |
| 17998 | } else { | |
| 17999 | action = 'reset'; // close | |
| 18000 | } | |
| 18001 | } else if (translate === 0) { | |
| 18002 | action = 'reset'; | |
| 18003 | } else if ( | |
| 18004 | (timeDiff < 300 && Math.abs(translate) > 0) | |
| 18005 | || (timeDiff >= 300 && (Math.abs(translate) >= panelWidth / 2)) | |
| 18006 | ) { | |
| 18007 | action = 'swap'; | |
| 18008 | } else { | |
| 18009 | action = 'reset'; | |
| 18010 | } | |
| 18011 | } else if (effect === 'cover') { | |
| 18012 | if (translate === 0) { | |
| 18013 | action = 'reset'; // open | |
| 18014 | } else if (timeDiff < 300 && Math.abs(translate) > 0) { | |
| 18015 | action = 'swap'; // open | |
| 18016 | } else if (timeDiff >= 300 && Math.abs(translate) < panelWidth / 2) { | |
| 18017 | action = 'reset'; // open | |
| 18018 | } else { | |
| 18019 | action = 'swap'; // close | |
| 18020 | } | |
| 18021 | } else if (translate === -panelWidth) { | |
| 18022 | action = 'reset'; | |
| 18023 | } else if ( | |
| 18024 | (timeDiff < 300 && Math.abs(translate) >= 0) | |
| 18025 | || (timeDiff >= 300 && (Math.abs(translate) <= panelWidth / 2)) | |
| 18026 | ) { | |
| 18027 | if (side === 'left' && translate === panelWidth) { action = 'reset'; } | |
| 18028 | else { action = 'swap'; } | |
| 18029 | } else { | |
| 18030 | action = 'reset'; | |
| 18031 | } | |
| 18032 | if (action === 'swap') { | |
| 18033 | if (panel.opened) { | |
| 18034 | panel.close(!edge); | |
| 18035 | } else { | |
| 18036 | panel.open(!edge); | |
| 18037 | } | |
| 18038 | } | |
| 18039 | if (action === 'reset') { | |
| 18040 | if (!panel.opened) { | |
| 18041 | if (edge) { | |
| 18042 | $el.css({ display: '' }); | |
| 18043 | } else { | |
| 18044 | var target = effect === 'reveal' ? $viewEl : $el; | |
| 18045 | $('html').addClass('with-panel-transitioning'); | |
| 18046 | target.transitionEnd(function () { | |
| 18047 | if ($el.hasClass('panel-active')) { return; } | |
| 18048 | $el.css({ display: '' }); | |
| 18049 | $('html').removeClass('with-panel-transitioning'); | |
| 18050 | }); | |
| 18051 | } | |
| 18052 | } | |
| 18053 | } | |
| 18054 | if (effect === 'reveal') { | |
| 18055 | Utils.nextFrame(function () { | |
| 18056 | $viewEl.transition(''); | |
| 18057 | $viewEl.transform(''); | |
| 18058 | }); | |
| 18059 | } | |
| 18060 | $el.transition('').transform(''); | |
| 18061 | $backdropEl.css({ display: '' }).transform('').transition('').css('opacity', ''); | |
| 18062 | } | |
| 18063 | ||
| 18064 | // Add Events | |
| 18065 | app.on('touchstart:passive', handleTouchStart); | |
| 18066 | app.on('touchmove:active', handleTouchMove); | |
| 18067 | app.on('touchend:passive', handleTouchEnd); | |
| 18068 | panel.on('panelDestroy', function () { | |
| 18069 | app.off('touchstart:passive', handleTouchStart); | |
| 18070 | app.off('touchmove:active', handleTouchMove); | |
| 18071 | app.off('touchend:passive', handleTouchEnd); | |
| 18072 | }); | |
| 18073 | } | |
| 18074 | ||
| 5d51ea26 DC |
18075 | function resizablePanel(panel) { |
| 18076 | var app = panel.app; | |
| 18077 | Utils.extend(panel, { | |
| 18078 | resizable: true, | |
| 18079 | resizableWidth: null, | |
| 18080 | resizableInitialized: true, | |
| 18081 | }); | |
| 18082 | var $htmlEl = $('html'); | |
| 18083 | var $el = panel.$el; | |
| 18084 | var $backdropEl = panel.$backdropEl; | |
| 18085 | var side = panel.side; | |
| 18086 | var effect = panel.effect; | |
| 18087 | if (!$el) { return; } | |
| 18088 | ||
| 18089 | var isTouched; | |
| 18090 | var isMoved; | |
| 18091 | var touchesStart = {}; | |
| 18092 | var touchesDiff; | |
| 18093 | var panelWidth; | |
| 18094 | ||
| 18095 | var $viewEl; | |
| 18096 | ||
| 18097 | var panelMinWidth; | |
| 18098 | var panelMaxWidth; | |
| 18099 | var visibleByBreakpoint; | |
| 18100 | ||
| 18101 | function transformCSSWidth(v) { | |
| 18102 | if (!v) { return null; } | |
| 18103 | if (v.indexOf('%') >= 0 || v.indexOf('vw') >= 0) { | |
| 18104 | return parseInt(v, 10) / 100 * app.width; | |
| 18105 | } | |
| 18106 | var newV = parseInt(v, 10); | |
| 18107 | if (Number.isNaN(newV)) { return null; } | |
| 18108 | return newV; | |
| 18109 | } | |
| 5309fbda | 18110 | |
| 5d51ea26 DC |
18111 | function isResizable() { |
| 18112 | return panel.resizable && $el.hasClass('panel-resizable'); | |
| 18113 | } | |
| 18114 | ||
| 18115 | function handleTouchStart(e) { | |
| 18116 | if (!isResizable()) { return; } | |
| 18117 | touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 18118 | touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 18119 | isMoved = false; | |
| 18120 | isTouched = true; | |
| 18121 | panelMinWidth = transformCSSWidth($el.css('min-width')); | |
| 18122 | panelMaxWidth = transformCSSWidth($el.css('max-width')); | |
| 18123 | visibleByBreakpoint = $el.hasClass('panel-visible-by-breakpoint'); | |
| 18124 | } | |
| 18125 | function handleTouchMove(e) { | |
| 18126 | if (!isTouched) { return; } | |
| 18127 | var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 18128 | ||
| 18129 | if (!isMoved) { | |
| 18130 | panelWidth = $el[0].offsetWidth; | |
| 18131 | $el.transition(0); | |
| 18132 | $el.addClass('panel-resizing'); | |
| 18133 | $htmlEl.css('cursor', 'col-resize'); | |
| 18134 | if (effect === 'reveal' || visibleByBreakpoint) { | |
| 18135 | $viewEl = $(panel.getViewEl()); | |
| 18136 | } | |
| 18137 | if (effect === 'reveal' && !visibleByBreakpoint) { | |
| 18138 | $backdropEl.transition(0); | |
| 18139 | $viewEl.transition(0); | |
| 18140 | } | |
| 18141 | } | |
| 18142 | ||
| 18143 | isMoved = true; | |
| 18144 | ||
| 18145 | e.preventDefault(); | |
| 18146 | ||
| 18147 | touchesDiff = (pageX - touchesStart.x); | |
| 18148 | ||
| 18149 | var newPanelWidth = side === 'left' ? panelWidth + touchesDiff : panelWidth - touchesDiff; | |
| 18150 | if (panelMinWidth && !Number.isNaN(panelMinWidth)) { | |
| 18151 | newPanelWidth = Math.max(newPanelWidth, panelMinWidth); | |
| 18152 | } | |
| 18153 | if (panelMaxWidth && !Number.isNaN(panelMaxWidth)) { | |
| 18154 | newPanelWidth = Math.min(newPanelWidth, panelMaxWidth); | |
| 18155 | } | |
| 18156 | newPanelWidth = Math.min(Math.max(newPanelWidth, 0), app.width); | |
| 18157 | ||
| 18158 | panel.resizableWidth = newPanelWidth; | |
| 18159 | $el[0].style.width = newPanelWidth + "px"; | |
| 18160 | if (effect === 'reveal' && !visibleByBreakpoint) { | |
| 18161 | if ($viewEl) { | |
| 18162 | $viewEl.transform(("translate3d(" + (side === 'left' ? newPanelWidth : -newPanelWidth) + "px, 0, 0)")); | |
| 18163 | } | |
| 18164 | if ($backdropEl) { | |
| 18165 | $backdropEl.transform(("translate3d(" + (side === 'left' ? newPanelWidth : -newPanelWidth) + "px, 0, 0)")); | |
| 18166 | } | |
| 18167 | } else if (visibleByBreakpoint && $viewEl) { | |
| 18168 | $viewEl.css(("margin-" + side), (newPanelWidth + "px")); | |
| 18169 | } | |
| 18170 | ||
| 18171 | $el.trigger('panel:resize', panel, newPanelWidth); | |
| 18172 | panel.emit('local::resize panelResize', panel, newPanelWidth); | |
| 18173 | } | |
| 18174 | function handleTouchEnd() { | |
| 18175 | $('html').css('cursor', ''); | |
| 18176 | if (!isTouched || !isMoved) { | |
| 18177 | isTouched = false; | |
| 18178 | isMoved = false; | |
| 18179 | return; | |
| 18180 | } | |
| 18181 | isTouched = false; | |
| 18182 | isMoved = false; | |
| 18183 | ||
| 18184 | $htmlEl[0].style.setProperty(("--f7-panel-" + side + "-width"), ((panel.resizableWidth) + "px")); | |
| 18185 | $el[0].style.width = ''; | |
| 18186 | if (effect === 'reveal' && !visibleByBreakpoint) { | |
| 18187 | $viewEl.transform(''); | |
| 18188 | $backdropEl.transform(''); | |
| 18189 | } | |
| 18190 | $el.removeClass('panel-resizing'); | |
| 18191 | Utils.nextFrame(function () { | |
| 18192 | if (visibleByBreakpoint) { return; } | |
| 18193 | $el.transition(''); | |
| 18194 | if (effect === 'reveal') { | |
| 18195 | $backdropEl.transition(''); | |
| 18196 | if ($viewEl) { $viewEl.transition(''); } | |
| 18197 | } | |
| 18198 | }); | |
| 18199 | } | |
| 18200 | ||
| 18201 | function handleResize() { | |
| 18202 | if (!panel.opened || !panel.resizableWidth) { return; } | |
| 18203 | panelMinWidth = transformCSSWidth($el.css('min-width')); | |
| 18204 | panelMaxWidth = transformCSSWidth($el.css('max-width')); | |
| 18205 | ||
| 18206 | if (panelMinWidth && !Number.isNaN(panelMinWidth) && panel.resizableWidth < panelMinWidth) { | |
| 18207 | panel.resizableWidth = Math.max(panel.resizableWidth, panelMinWidth); | |
| 18208 | } | |
| 18209 | if (panelMaxWidth && !Number.isNaN(panelMaxWidth) && panel.resizableWidth > panelMaxWidth) { | |
| 18210 | panel.resizableWidth = Math.min(panel.resizableWidth, panelMaxWidth); | |
| 18211 | } | |
| 18212 | panel.resizableWidth = Math.min(Math.max(panel.resizableWidth, 0), app.width); | |
| 18213 | ||
| 18214 | $htmlEl[0].style.setProperty(("--f7-panel-" + side + "-width"), ((panel.resizableWidth) + "px")); | |
| 18215 | } | |
| 18216 | ||
| 18217 | if (panel.$el.find('.panel-resize-handler').length === 0) { | |
| 18218 | panel.$el.append('<div class="panel-resize-handler"></div>'); | |
| 18219 | } | |
| 18220 | panel.$resizeHandlerEl = panel.$el.children('.panel-resize-handler'); | |
| 18221 | ||
| 18222 | $el.addClass('panel-resizable'); | |
| 18223 | ||
| 18224 | // Add Events | |
| 18225 | var passive = Support.passiveListener ? { passive: true } : false; | |
| 18226 | ||
| 18227 | panel.$el.on(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive); | |
| 18228 | app.on('touchmove:active', handleTouchMove); | |
| 18229 | app.on('touchend:passive', handleTouchEnd); | |
| 18230 | app.on('resize', handleResize); | |
| 18231 | panel.on('beforeOpen', handleResize); | |
| 18232 | ||
| 18233 | panel.once('panelDestroy', function () { | |
| 18234 | $el.removeClass('panel-resizable'); | |
| 18235 | panel.$resizeHandlerEl.remove(); | |
| 18236 | panel.$el.off(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive); | |
| 18237 | app.off('touchmove:active', handleTouchMove); | |
| 18238 | app.off('touchend:passive', handleTouchEnd); | |
| 18239 | app.off('resize', handleResize); | |
| 18240 | panel.off('beforeOpen', handleResize); | |
| 18241 | }); | |
| 18242 | } | |
| 18243 | ||
| 18244 | var Panel = /*@__PURE__*/(function (Framework7Class) { | |
| 18245 | function Panel(app, params) { | |
| 5309fbda | 18246 | if ( params === void 0 ) params = {}; |
| 5d51ea26 DC |
18247 | |
| 18248 | Framework7Class.call(this, params, [app]); | |
| 5309fbda DC |
18249 | var panel = this; |
| 18250 | ||
| 18251 | var el = params.el; | |
| 18252 | ||
| 18253 | if (!el && params.content) { | |
| 18254 | el = params.content; | |
| 18255 | } | |
| 18256 | ||
| 18257 | var $el = $(el); | |
| 18258 | if ($el.length === 0) { return panel; } | |
| 18259 | if ($el[0].f7Panel) { return $el[0].f7Panel; } | |
| 18260 | ||
| 18261 | $el[0].f7Panel = panel; | |
| 18262 | ||
| 18263 | var opened = params.opened; | |
| 18264 | var side = params.side; | |
| 18265 | var effect = params.effect; | |
| 18266 | if (typeof opened === 'undefined') { opened = $el.hasClass('panel-active'); } | |
| 18267 | if (typeof side === 'undefined') { side = $el.hasClass('panel-left') ? 'left' : 'right'; } | |
| 18268 | if (typeof effect === 'undefined') { effect = $el.hasClass('panel-cover') ? 'cover' : 'reveal'; } | |
| 18269 | ||
| 18270 | if (!app.panel[side]) { | |
| 5d51ea26 | 18271 | app.panel[side] = panel; |
| 5309fbda DC |
18272 | } else { |
| 18273 | throw new Error(("Framework7: Can't create panel; app already has a " + side + " panel!")); | |
| 18274 | } | |
| 18275 | ||
| 18276 | var $backdropEl = $('.panel-backdrop'); | |
| 18277 | ||
| 18278 | if ($backdropEl.length === 0) { | |
| 18279 | $backdropEl = $('<div class="panel-backdrop"></div>'); | |
| 18280 | $backdropEl.insertBefore($el); | |
| 18281 | } | |
| 18282 | ||
| 18283 | Utils.extend(panel, { | |
| 18284 | app: app, | |
| 18285 | side: side, | |
| 18286 | effect: effect, | |
| 18287 | $el: $el, | |
| 18288 | el: $el[0], | |
| 18289 | opened: opened, | |
| 18290 | $backdropEl: $backdropEl, | |
| 18291 | backdropEl: $backdropEl[0], | |
| 5d51ea26 | 18292 | params: params, |
| 5309fbda DC |
18293 | }); |
| 18294 | ||
| 18295 | // Install Modules | |
| 18296 | panel.useModules(); | |
| 18297 | ||
| 18298 | // Init | |
| 18299 | panel.init(); | |
| 18300 | ||
| 18301 | return panel; | |
| 18302 | } | |
| 18303 | ||
| 5d51ea26 DC |
18304 | if ( Framework7Class ) Panel.__proto__ = Framework7Class; |
| 18305 | Panel.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
18306 | Panel.prototype.constructor = Panel; |
| 18307 | ||
| 5309fbda DC |
18308 | Panel.prototype.getViewEl = function getViewEl () { |
| 18309 | var panel = this; | |
| 18310 | var app = panel.app; | |
| 18311 | var viewEl; | |
| 18312 | if (app.root.children('.views').length > 0) { | |
| 18313 | viewEl = app.root.children('.views')[0]; | |
| 18314 | } else { | |
| 18315 | viewEl = app.root.children('.view')[0]; | |
| 18316 | } | |
| 18317 | return viewEl; | |
| 18318 | }; | |
| 18319 | ||
| 5d51ea26 DC |
18320 | Panel.prototype.setBreakpoint = function setBreakpoint (emitEvents) { |
| 18321 | var obj, obj$1, obj$2; | |
| 5309fbda | 18322 | |
| 5d51ea26 | 18323 | if ( emitEvents === void 0 ) emitEvents = true; |
| 5309fbda DC |
18324 | var panel = this; |
| 18325 | var app = panel.app; | |
| 18326 | var side = panel.side; | |
| 18327 | var $el = panel.$el; | |
| 18328 | var $viewEl = $(panel.getViewEl()); | |
| 18329 | var breakpoint = app.params.panel[(side + "Breakpoint")]; | |
| 18330 | var wasVisible = $el.hasClass('panel-visible-by-breakpoint'); | |
| 18331 | ||
| 18332 | if (app.width >= breakpoint) { | |
| 18333 | if (!wasVisible) { | |
| 18334 | $('html').removeClass(("with-panel-" + side + "-reveal with-panel-" + side + "-cover with-panel")); | |
| 18335 | $el.css('display', '').addClass('panel-visible-by-breakpoint').removeClass('panel-active'); | |
| 18336 | panel.onOpen(); | |
| 18337 | panel.onOpened(); | |
| 18338 | $viewEl.css(( obj = {}, obj[("margin-" + side)] = (($el.width()) + "px"), obj )); | |
| 18339 | app.allowPanelOpen = true; | |
| 5d51ea26 DC |
18340 | if (emitEvents) { |
| 18341 | app.emit('local::breakpoint panelBreakpoint'); | |
| 18342 | panel.$el.trigger('panel:breakpoint', panel); | |
| 18343 | } | |
| 18344 | } else { | |
| 18345 | $viewEl.css(( obj$1 = {}, obj$1[("margin-" + side)] = (($el.width()) + "px"), obj$1 )); | |
| 5309fbda DC |
18346 | } |
| 18347 | } else if (wasVisible) { | |
| 18348 | $el.css('display', '').removeClass('panel-visible-by-breakpoint panel-active'); | |
| 18349 | panel.onClose(); | |
| 18350 | panel.onClosed(); | |
| 5d51ea26 DC |
18351 | $viewEl.css(( obj$2 = {}, obj$2[("margin-" + side)] = '', obj$2 )); |
| 18352 | if (emitEvents) { | |
| 18353 | app.emit('local::breakpoint panelBreakpoint'); | |
| 18354 | panel.$el.trigger('panel:breakpoint', panel); | |
| 18355 | } | |
| 5309fbda DC |
18356 | } |
| 18357 | }; | |
| 18358 | ||
| 18359 | Panel.prototype.initBreakpoints = function initBreakpoints () { | |
| 18360 | var panel = this; | |
| 18361 | var app = panel.app; | |
| 18362 | panel.resizeHandler = function resizeHandler() { | |
| 18363 | panel.setBreakpoint(); | |
| 18364 | }; | |
| 18365 | if (app.params.panel[((panel.side) + "Breakpoint")]) { | |
| 18366 | app.on('resize', panel.resizeHandler); | |
| 18367 | } | |
| 18368 | panel.setBreakpoint(); | |
| 18369 | return panel; | |
| 18370 | }; | |
| 18371 | ||
| 18372 | Panel.prototype.initSwipePanel = function initSwipePanel () { | |
| 18373 | { | |
| 18374 | swipePanel(this); | |
| 18375 | } | |
| 18376 | }; | |
| 18377 | ||
| 5d51ea26 DC |
18378 | Panel.prototype.initResizablePanel = function initResizablePanel () { |
| 18379 | resizablePanel(this); | |
| 18380 | }; | |
| 18381 | ||
| 18382 | Panel.prototype.toggle = function toggle (animate) { | |
| 18383 | if ( animate === void 0 ) animate = true; | |
| 18384 | ||
| 18385 | var panel = this; | |
| 18386 | if (panel.opened) { panel.close(animate); } | |
| 18387 | else { panel.open(animate); } | |
| 18388 | }; | |
| 18389 | ||
| 18390 | Panel.prototype.onOpen = function onOpen () { | |
| 18391 | var panel = this; | |
| 18392 | panel.opened = true; | |
| 18393 | ||
| 18394 | panel.$el.trigger('panel:beforeopen', panel); | |
| 18395 | panel.emit('local::beforeOpen panelBeforeOpen', panel); | |
| 18396 | ||
| 18397 | panel.$el.trigger('panel:open', panel); | |
| 18398 | panel.emit('local::open panelOpen', panel); | |
| 18399 | }; | |
| 18400 | ||
| 18401 | Panel.prototype.onOpened = function onOpened () { | |
| 5309fbda DC |
18402 | var panel = this; |
| 18403 | var app = panel.app; | |
| 5d51ea26 | 18404 | app.panel.allowOpen = true; |
| 5309fbda | 18405 | |
| 5d51ea26 DC |
18406 | panel.$el.trigger('panel:opened', panel); |
| 18407 | panel.emit('local::opened panelOpened', panel); | |
| 18408 | }; | |
| 5309fbda | 18409 | |
| 5d51ea26 DC |
18410 | Panel.prototype.onClose = function onClose () { |
| 18411 | var panel = this; | |
| 18412 | panel.opened = false; | |
| 18413 | panel.$el.addClass('panel-closing'); | |
| 5309fbda | 18414 | |
| 5d51ea26 DC |
18415 | panel.$el.trigger('panel:beforeclose', panel); |
| 18416 | panel.emit('local::beforeClose panelBeforeClose', panel); | |
| 18417 | ||
| 18418 | panel.$el.trigger('panel:close', panel); | |
| 18419 | panel.emit('local::close panelClose', panel); | |
| 18420 | }; | |
| 18421 | ||
| 18422 | Panel.prototype.onClosed = function onClosed () { | |
| 18423 | var panel = this; | |
| 18424 | var app = panel.app; | |
| 18425 | app.panel.allowOpen = true; | |
| 18426 | panel.$el.removeClass('panel-closing'); | |
| 18427 | panel.$el.trigger('panel:closed', panel); | |
| 18428 | panel.emit('local::closed panelClosed', panel); | |
| 5309fbda DC |
18429 | }; |
| 18430 | ||
| 18431 | Panel.prototype.open = function open (animate) { | |
| 18432 | if ( animate === void 0 ) animate = true; | |
| 18433 | ||
| 18434 | var panel = this; | |
| 18435 | var app = panel.app; | |
| 18436 | if (!app.panel.allowOpen) { return false; } | |
| 18437 | ||
| 18438 | var side = panel.side; | |
| 18439 | var effect = panel.effect; | |
| 18440 | var $el = panel.$el; | |
| 18441 | var $backdropEl = panel.$backdropEl; | |
| 18442 | var opened = panel.opened; | |
| 18443 | ||
| 18444 | var $panelParentEl = $el.parent(); | |
| 18445 | var wasInDom = $el.parents(document).length > 0; | |
| 18446 | ||
| 18447 | if (!$panelParentEl.is(app.root) || $el.prevAll('.views, .view').length) { | |
| 18448 | var $insertBeforeEl = app.root.children('.panel, .views, .view').eq(0); | |
| 18449 | var $insertAfterEl = app.root.children('.statusbar').eq(0); | |
| 18450 | ||
| 18451 | if ($insertBeforeEl.length) { | |
| 18452 | $el.insertBefore($insertBeforeEl); | |
| 18453 | } else if ($insertAfterEl.length) { | |
| 18454 | $el.insertAfter($insertBeforeEl); | |
| 18455 | } else { | |
| 18456 | app.root.prepend($el); | |
| 18457 | } | |
| 18458 | ||
| 18459 | if ($backdropEl | |
| 18460 | && $backdropEl.length | |
| 18461 | && ( | |
| 18462 | ( | |
| 18463 | !$backdropEl.parent().is(app.root) | |
| 18464 | && $backdropEl.nextAll('.panel').length === 0 | |
| 18465 | ) | |
| 18466 | || ( | |
| 18467 | $backdropEl.parent().is(app.root) | |
| 18468 | && $backdropEl.nextAll('.panel').length === 0 | |
| 18469 | ) | |
| 18470 | ) | |
| 18471 | ) { | |
| 18472 | $backdropEl.insertBefore($el); | |
| 18473 | } | |
| 18474 | ||
| 18475 | panel.once('panelClosed', function () { | |
| 18476 | if (wasInDom) { | |
| 18477 | $panelParentEl.append($el); | |
| 18478 | } else { | |
| 18479 | $el.remove(); | |
| 18480 | } | |
| 18481 | }); | |
| 18482 | } | |
| 18483 | ||
| 18484 | // Ignore if opened | |
| 18485 | if (opened || $el.hasClass('panel-visible-by-breakpoint') || $el.hasClass('panel-active')) { return false; } | |
| 18486 | ||
| 18487 | // Close if some panel is opened | |
| 18488 | app.panel.close(side === 'left' ? 'right' : 'left', animate); | |
| 18489 | ||
| 18490 | app.panel.allowOpen = false; | |
| 18491 | ||
| 18492 | $el[animate ? 'removeClass' : 'addClass']('not-animated'); | |
| 18493 | $el | |
| 18494 | .css({ display: 'block' }) | |
| 18495 | .addClass('panel-active'); | |
| 18496 | ||
| 18497 | $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated'); | |
| 5d51ea26 | 18498 | $backdropEl.css({ display: 'block' }); |
| 5309fbda DC |
18499 | |
| 18500 | /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */ | |
| 5d51ea26 | 18501 | // panel._clientLeft = $el[0].clientLeft; |
| 5309fbda DC |
18502 | |
| 18503 | // Transition End; | |
| 18504 | var transitionEndTarget = effect === 'reveal' ? $el.nextAll('.view, .views').eq(0) : $el; | |
| 18505 | ||
| 18506 | function panelTransitionEnd() { | |
| 18507 | transitionEndTarget.transitionEnd(function (e) { | |
| 18508 | if ($(e.target).is(transitionEndTarget)) { | |
| 18509 | if ($el.hasClass('panel-active')) { | |
| 18510 | panel.onOpened(); | |
| 18511 | $backdropEl.css({ display: '' }); | |
| 18512 | } else { | |
| 18513 | panel.onClosed(); | |
| 18514 | $backdropEl.css({ display: '' }); | |
| 18515 | } | |
| 18516 | } else { panelTransitionEnd(); } | |
| 18517 | }); | |
| 18518 | } | |
| 5d51ea26 | 18519 | |
| 5309fbda | 18520 | if (animate) { |
| 5d51ea26 DC |
18521 | Utils.nextFrame(function () { |
| 18522 | $('html').addClass(("with-panel with-panel-" + side + "-" + effect)); | |
| 18523 | panel.onOpen(); | |
| 18524 | panelTransitionEnd(); | |
| 18525 | }); | |
| 5309fbda | 18526 | } else { |
| 5d51ea26 DC |
18527 | $('html').addClass(("with-panel with-panel-" + side + "-" + effect)); |
| 18528 | panel.onOpen(); | |
| 5309fbda DC |
18529 | panel.onOpened(); |
| 18530 | $backdropEl.css({ display: '' }); | |
| 18531 | } | |
| 18532 | ||
| 18533 | return true; | |
| 18534 | }; | |
| 18535 | ||
| 18536 | Panel.prototype.close = function close (animate) { | |
| 18537 | if ( animate === void 0 ) animate = true; | |
| 18538 | ||
| 18539 | var panel = this; | |
| 18540 | var app = panel.app; | |
| 18541 | ||
| 18542 | var side = panel.side; | |
| 18543 | var effect = panel.effect; | |
| 18544 | var $el = panel.$el; | |
| 18545 | var $backdropEl = panel.$backdropEl; | |
| 18546 | var opened = panel.opened; | |
| 5309fbda DC |
18547 | if (!opened || $el.hasClass('panel-visible-by-breakpoint') || !$el.hasClass('panel-active')) { return false; } |
| 18548 | ||
| 18549 | $el[animate ? 'removeClass' : 'addClass']('not-animated'); | |
| 18550 | $el.removeClass('panel-active'); | |
| 18551 | ||
| 18552 | $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated'); | |
| 18553 | ||
| 18554 | var transitionEndTarget = effect === 'reveal' ? $el.nextAll('.view, .views').eq(0) : $el; | |
| 18555 | ||
| 18556 | panel.onClose(); | |
| 18557 | app.panel.allowOpen = false; | |
| 18558 | ||
| 18559 | if (animate) { | |
| 18560 | transitionEndTarget.transitionEnd(function () { | |
| 18561 | if ($el.hasClass('panel-active')) { return; } | |
| 18562 | $el.css({ display: '' }); | |
| 18563 | $('html').removeClass('with-panel-transitioning'); | |
| 18564 | panel.onClosed(); | |
| 18565 | }); | |
| 18566 | $('html') | |
| 18567 | .removeClass(("with-panel with-panel-" + side + "-" + effect)) | |
| 18568 | .addClass('with-panel-transitioning'); | |
| 18569 | } else { | |
| 18570 | $el.css({ display: '' }); | |
| 18571 | $el.removeClass('not-animated'); | |
| 18572 | $('html').removeClass(("with-panel with-panel-transitioning with-panel-" + side + "-" + effect)); | |
| 18573 | panel.onClosed(); | |
| 18574 | } | |
| 18575 | return true; | |
| 18576 | }; | |
| 18577 | ||
| 5d51ea26 | 18578 | Panel.prototype.init = function init () { |
| 5309fbda | 18579 | var panel = this; |
| 5d51ea26 DC |
18580 | var app = panel.app; |
| 18581 | if (app.params.panel[((panel.side) + "Breakpoint")]) { | |
| 18582 | panel.initBreakpoints(); | |
| 18583 | } | |
| 18584 | { | |
| 18585 | if ( | |
| 18586 | (app.params.panel.swipe === panel.side) | |
| 18587 | || (app.params.panel.swipe === 'both') | |
| 18588 | || (app.params.panel.swipe && app.params.panel.swipe !== panel.side && app.params.panel.swipeCloseOpposite) | |
| 18589 | ) { | |
| 18590 | panel.initSwipePanel(); | |
| 18591 | } | |
| 18592 | } | |
| 18593 | if (panel.params.resizable || panel.$el.hasClass('panel-resizable')) { | |
| 18594 | panel.initResizablePanel(); | |
| 18595 | } | |
| 5309fbda DC |
18596 | }; |
| 18597 | ||
| 5d51ea26 DC |
18598 | Panel.prototype.destroy = function destroy () { |
| 18599 | var obj; | |
| 18600 | ||
| 5309fbda DC |
18601 | var panel = this; |
| 18602 | var app = panel.app; | |
| 5309fbda | 18603 | |
| 5d51ea26 DC |
18604 | if (!panel.$el) { |
| 18605 | // Panel already destroyed | |
| 18606 | return; | |
| 18607 | } | |
| 5309fbda | 18608 | |
| 5d51ea26 DC |
18609 | panel.emit('local::beforeDestroy panelBeforeDestroy', panel); |
| 18610 | panel.$el.trigger('panel:beforedestroy', panel); | |
| 5309fbda | 18611 | |
| 5d51ea26 DC |
18612 | if (panel.resizeHandler) { |
| 18613 | app.off('resize', panel.resizeHandler); | |
| 18614 | } | |
| 18615 | ||
| 18616 | if (panel.$el.hasClass('panel-visible-by-breakpoint')) { | |
| 18617 | var $viewEl = $(panel.getViewEl()); | |
| 18618 | panel.$el.css('display', '').removeClass('panel-visible-by-breakpoint panel-active'); | |
| 18619 | $viewEl.css(( obj = {}, obj[("margin-" + (panel.side))] = '', obj )); | |
| 18620 | app.emit('local::breakpoint panelBreakpoint'); | |
| 18621 | panel.$el.trigger('panel:breakpoint', panel); | |
| 18622 | } | |
| 18623 | ||
| 18624 | panel.$el.trigger('panel:destroy', panel); | |
| 18625 | panel.emit('local::destroy panelDestroy'); | |
| 18626 | delete app.panel[panel.side]; | |
| 18627 | if (panel.el) { | |
| 18628 | panel.el.f7Panel = null; | |
| 18629 | delete panel.el.f7Panel; | |
| 18630 | } | |
| 18631 | Utils.deleteProps(panel); | |
| 18632 | ||
| 18633 | panel = null; | |
| 5309fbda DC |
18634 | }; |
| 18635 | ||
| 18636 | return Panel; | |
| 18637 | }(Framework7Class)); | |
| 18638 | ||
| 18639 | var Panel$1 = { | |
| 18640 | name: 'panel', | |
| 18641 | params: { | |
| 18642 | panel: { | |
| 18643 | leftBreakpoint: 0, | |
| 18644 | rightBreakpoint: 0, | |
| 18645 | swipe: undefined, // or 'left' or 'right' or 'both' | |
| 18646 | swipeActiveArea: 0, | |
| 18647 | swipeCloseActiveAreaSide: 0, | |
| 18648 | swipeCloseOpposite: true, | |
| 18649 | swipeOnlyClose: false, | |
| 18650 | swipeNoFollow: false, | |
| 18651 | swipeThreshold: 0, | |
| 18652 | closeByBackdropClick: true, | |
| 18653 | }, | |
| 18654 | }, | |
| 18655 | static: { | |
| 18656 | Panel: Panel, | |
| 18657 | }, | |
| 18658 | instance: { | |
| 18659 | panel: { | |
| 18660 | allowOpen: true, | |
| 18661 | }, | |
| 18662 | }, | |
| 18663 | create: function create() { | |
| 18664 | var app = this; | |
| 18665 | Utils.extend(app.panel, { | |
| 5d51ea26 DC |
18666 | disableResizable: function disableResizable(panel) { |
| 18667 | if ( panel === void 0 ) panel = 'both'; | |
| 18668 | ||
| 18669 | var side; | |
| 18670 | var panels = []; | |
| 18671 | if (typeof panel === 'string') { | |
| 18672 | if (panel === 'both') { | |
| 18673 | side = 'both'; | |
| 18674 | panels = [app.panel.left, app.panel.right]; | |
| 18675 | } else { | |
| 18676 | side = panel; | |
| 18677 | panels.push(app.panel[side]); | |
| 18678 | } | |
| 18679 | } else { | |
| 18680 | panels = [panel]; | |
| 18681 | } | |
| 18682 | panels.forEach(function (panelInstance) { | |
| 18683 | panelInstance.resizable = false; | |
| 18684 | panelInstance.$el.removeClass('panel-resizable'); | |
| 18685 | }); | |
| 18686 | }, | |
| 18687 | enableResizable: function enableResizable(panel) { | |
| 18688 | if ( panel === void 0 ) panel = 'both'; | |
| 18689 | ||
| 18690 | var side; | |
| 18691 | var panels = []; | |
| 18692 | if (typeof panel === 'string') { | |
| 18693 | if (panel === 'both') { | |
| 18694 | side = 'both'; | |
| 18695 | panels = [app.panel.left, app.panel.right]; | |
| 18696 | } else { | |
| 18697 | side = panel; | |
| 18698 | panels.push(app.panel[side]); | |
| 18699 | } | |
| 18700 | } else { | |
| 18701 | panels = [panel]; | |
| 18702 | } | |
| 18703 | panels.forEach(function (panelInstance) { | |
| 18704 | if (!panelInstance) { return; } | |
| 18705 | if (!panelInstance.resizableInitialized) { | |
| 18706 | panelInstance.initResizablePanel(); | |
| 18707 | } else { | |
| 18708 | panelInstance.resizable = true; | |
| 18709 | panelInstance.$el.addClass('panel-resizable'); | |
| 18710 | } | |
| 18711 | }); | |
| 18712 | }, | |
| 5309fbda DC |
18713 | disableSwipe: function disableSwipe(panel) { |
| 18714 | if ( panel === void 0 ) panel = 'both'; | |
| 18715 | ||
| 18716 | var side; | |
| 18717 | var panels = []; | |
| 18718 | if (typeof panel === 'string') { | |
| 18719 | if (panel === 'both') { | |
| 18720 | side = 'both'; | |
| 18721 | panels = [app.panel.left, app.panel.right]; | |
| 18722 | } else { | |
| 18723 | side = panel; | |
| 18724 | panels.push(app.panel[side]); | |
| 18725 | } | |
| 18726 | } else { | |
| 18727 | panels = [panel]; | |
| 18728 | } | |
| 18729 | panels.forEach(function (panelInstance) { | |
| 5d51ea26 | 18730 | panelInstance.swipeable = false; |
| 5309fbda DC |
18731 | }); |
| 18732 | }, | |
| 18733 | enableSwipe: function enableSwipe(panel) { | |
| 18734 | if ( panel === void 0 ) panel = 'both'; | |
| 18735 | ||
| 18736 | var panels = []; | |
| 18737 | var side; | |
| 18738 | if (typeof panel === 'string') { | |
| 18739 | side = panel; | |
| 18740 | if ( | |
| 18741 | (app.params.panel.swipe === 'left' && side === 'right') | |
| 18742 | || (app.params.panel.swipe === 'right' && side === 'left') | |
| 18743 | || side === 'both' | |
| 18744 | ) { | |
| 18745 | side = 'both'; | |
| 18746 | app.params.panel.swipe = side; | |
| 18747 | panels = [app.panel.left, app.panel.right]; | |
| 18748 | } else { | |
| 18749 | app.params.panel.swipe = side; | |
| 18750 | panels.push(app.panel[side]); | |
| 18751 | } | |
| 18752 | } else if (panel) { | |
| 18753 | panels.push(panel); | |
| 18754 | } | |
| 5d51ea26 DC |
18755 | panels.forEach(function (panelInstance) { |
| 18756 | if (!panelInstance) { return; } | |
| 18757 | if (!panelInstance.swipeInitialized) { | |
| 18758 | panelInstance.initSwipePanel(); | |
| 18759 | } else { | |
| 18760 | panelInstance.swipeable = true; | |
| 18761 | } | |
| 18762 | }); | |
| 5309fbda DC |
18763 | }, |
| 18764 | create: function create(params) { | |
| 18765 | return new Panel(app, params); | |
| 18766 | }, | |
| 18767 | open: function open(side, animate) { | |
| 18768 | var panelSide = side; | |
| 18769 | if (!panelSide) { | |
| 18770 | if ($('.panel').length > 1) { | |
| 18771 | return false; | |
| 18772 | } | |
| 18773 | panelSide = $('.panel').hasClass('panel-left') ? 'left' : 'right'; | |
| 18774 | } | |
| 18775 | if (!panelSide) { return false; } | |
| 18776 | if (app.panel[panelSide]) { | |
| 18777 | return app.panel[panelSide].open(animate); | |
| 18778 | } | |
| 18779 | var $panelEl = $((".panel-" + panelSide)); | |
| 18780 | if ($panelEl.length > 0) { | |
| 18781 | return app.panel.create({ el: $panelEl }).open(animate); | |
| 18782 | } | |
| 18783 | return false; | |
| 18784 | }, | |
| 18785 | close: function close(side, animate) { | |
| 18786 | var $panelEl; | |
| 18787 | var panelSide; | |
| 18788 | if (panelSide) { | |
| 18789 | panelSide = side; | |
| 18790 | $panelEl = $((".panel-" + panelSide)); | |
| 18791 | } else { | |
| 18792 | $panelEl = $('.panel.panel-active'); | |
| 18793 | panelSide = $panelEl.hasClass('panel-left') ? 'left' : 'right'; | |
| 18794 | } | |
| 18795 | if (!panelSide) { return false; } | |
| 18796 | if (app.panel[panelSide]) { | |
| 18797 | return app.panel[panelSide].close(animate); | |
| 18798 | } | |
| 18799 | if ($panelEl.length > 0) { | |
| 18800 | return app.panel.create({ el: $panelEl }).close(animate); | |
| 18801 | } | |
| 18802 | return false; | |
| 18803 | }, | |
| 5d51ea26 DC |
18804 | toggle: function toggle(side, animate) { |
| 18805 | var $panelEl; | |
| 18806 | var panelSide = side; | |
| 18807 | if (side) { | |
| 18808 | panelSide = side; | |
| 18809 | $panelEl = $((".panel-" + panelSide)); | |
| 18810 | } else if ($('.panel.panel-active').length) { | |
| 18811 | $panelEl = $('.panel.panel-active'); | |
| 18812 | panelSide = $panelEl.hasClass('panel-left') ? 'left' : 'right'; | |
| 18813 | } else { | |
| 18814 | if ($('.panel').length > 1) { | |
| 18815 | return false; | |
| 18816 | } | |
| 18817 | panelSide = $('.panel').hasClass('panel-left') ? 'left' : 'right'; | |
| 18818 | $panelEl = $((".panel-" + panelSide)); | |
| 18819 | } | |
| 18820 | if (!panelSide) { return false; } | |
| 18821 | if (app.panel[panelSide]) { | |
| 18822 | return app.panel[panelSide].toggle(animate); | |
| 18823 | } | |
| 18824 | if ($panelEl.length > 0) { | |
| 18825 | return app.panel.create({ el: $panelEl }).toggle(animate); | |
| 18826 | } | |
| 18827 | return false; | |
| 18828 | }, | |
| 5309fbda DC |
18829 | get: function get(side) { |
| 18830 | var panelSide = side; | |
| 18831 | if (!panelSide) { | |
| 18832 | if ($('.panel').length > 1) { | |
| 18833 | return undefined; | |
| 18834 | } | |
| 18835 | panelSide = $('.panel').hasClass('panel-left') ? 'left' : 'right'; | |
| 18836 | } | |
| 18837 | if (!panelSide) { return undefined; } | |
| 18838 | if (app.panel[panelSide]) { | |
| 18839 | return app.panel[panelSide]; | |
| 18840 | } | |
| 18841 | var $panelEl = $((".panel-" + panelSide)); | |
| 18842 | if ($panelEl.length > 0) { | |
| 18843 | return app.panel.create({ el: $panelEl }); | |
| 18844 | } | |
| 18845 | return undefined; | |
| 18846 | }, | |
| 18847 | }); | |
| 18848 | }, | |
| 18849 | on: { | |
| 18850 | init: function init() { | |
| 18851 | var app = this; | |
| 18852 | ||
| 18853 | // Create Panels | |
| 18854 | $('.panel').each(function (index, panelEl) { | |
| 18855 | var side = $(panelEl).hasClass('panel-left') ? 'left' : 'right'; | |
| 18856 | app.panel[side] = app.panel.create({ el: panelEl, side: side }); | |
| 18857 | }); | |
| 18858 | }, | |
| 18859 | }, | |
| 18860 | clicks: { | |
| 18861 | '.panel-open': function open(clickedEl, data) { | |
| 18862 | if ( data === void 0 ) data = {}; | |
| 18863 | ||
| 18864 | var app = this; | |
| 18865 | var side = 'left'; | |
| 18866 | if (data.panel === 'right' || ($('.panel').length === 1 && $('.panel').hasClass('panel-right'))) { | |
| 18867 | side = 'right'; | |
| 18868 | } | |
| 18869 | app.panel.open(side, data.animate); | |
| 18870 | }, | |
| 18871 | '.panel-close': function close(clickedEl, data) { | |
| 18872 | if ( data === void 0 ) data = {}; | |
| 18873 | ||
| 18874 | var app = this; | |
| 18875 | var side = data.panel; | |
| 18876 | app.panel.close(side, data.animate); | |
| 18877 | }, | |
| 5d51ea26 DC |
18878 | '.panel-toggle': function close(clickedEl, data) { |
| 18879 | if ( data === void 0 ) data = {}; | |
| 18880 | ||
| 18881 | var app = this; | |
| 18882 | var side = data.panel; | |
| 18883 | app.panel.toggle(side, data.animate); | |
| 18884 | }, | |
| 5309fbda DC |
18885 | '.panel-backdrop': function close() { |
| 18886 | var app = this; | |
| 18887 | var $panelEl = $('.panel-active'); | |
| 18888 | var instance = $panelEl[0] && $panelEl[0].f7Panel; | |
| 18889 | $panelEl.trigger('panel:backdrop-click'); | |
| 18890 | if (instance) { | |
| 18891 | instance.emit('backdropClick', instance); | |
| 18892 | } | |
| 18893 | app.emit('panelBackdropClick', instance || $panelEl[0]); | |
| 18894 | if (app.params.panel.closeByBackdropClick) { app.panel.close(); } | |
| 18895 | }, | |
| 18896 | }, | |
| 18897 | }; | |
| 18898 | ||
| 5d51ea26 DC |
18899 | /* eslint no-param-reassign: "off" */ |
| 18900 | ||
| 5309fbda DC |
18901 | var CardExpandable = { |
| 18902 | open: function open(cardEl, animate) { | |
| 18903 | var assign; | |
| 18904 | ||
| 18905 | if ( cardEl === void 0 ) cardEl = '.card-expandable'; | |
| 18906 | if ( animate === void 0 ) animate = true; | |
| 18907 | var app = this; | |
| 5d51ea26 | 18908 | |
| 5309fbda DC |
18909 | if ($('.card-opened').length) { return; } |
| 18910 | var $cardEl = $(cardEl).eq(0); | |
| 18911 | ||
| 18912 | if (!$cardEl || !$cardEl.length) { return; } | |
| 18913 | if ($cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) { return; } | |
| 18914 | ||
| 18915 | var $pageEl = $cardEl.parents('.page').eq(0); | |
| 18916 | if (!$pageEl.length) { return; } | |
| 18917 | ||
| 18918 | var prevented; | |
| 18919 | ||
| 18920 | function prevent() { | |
| 18921 | prevented = true; | |
| 18922 | } | |
| 18923 | ||
| 18924 | $cardEl.trigger('card:beforeopen', { prevent: prevent }); | |
| 18925 | app.emit('cardBeforeOpen', $cardEl[0], prevent); | |
| 18926 | ||
| 18927 | if (prevented) { return; } | |
| 18928 | ||
| 5d51ea26 DC |
18929 | var cardParams = Object.assign({ animate: animate }, app.params.card, $cardEl.dataset()); |
| 18930 | ||
| 18931 | var $pageContentEl = $cardEl.parents('.page-content'); | |
| 18932 | ||
| 18933 | var $backdropEl; | |
| 18934 | if ($cardEl.attr('data-backdrop-el')) { | |
| 18935 | $backdropEl = $($cardEl.attr('data-backdrop-el')); | |
| 18936 | } | |
| 18937 | if (!$backdropEl && cardParams.backdrop) { | |
| 18938 | $backdropEl = $pageContentEl.find('.card-backdrop'); | |
| 18939 | if (!$backdropEl.length) { | |
| 18940 | $backdropEl = $('<div class="card-backdrop"></div>'); | |
| 18941 | $pageContentEl.append($backdropEl); | |
| 5309fbda DC |
18942 | } |
| 18943 | } | |
| 18944 | ||
| 18945 | var $navbarEl; | |
| 18946 | var $toolbarEl; | |
| 5d51ea26 | 18947 | if (cardParams.hideNavbarOnOpen) { |
| 5309fbda DC |
18948 | $navbarEl = $pageEl.children('.navbar'); |
| 18949 | if (!$navbarEl.length) { | |
| 18950 | if ($pageEl[0].f7Page) { $navbarEl = $pageEl[0].f7Page.$navbarEl; } | |
| 18951 | } | |
| 18952 | } | |
| 5d51ea26 | 18953 | if (cardParams.hideToolbarOnOpen) { |
| 5309fbda DC |
18954 | $toolbarEl = $pageEl.children('.toolbar'); |
| 18955 | if (!$toolbarEl.length) { | |
| 18956 | $toolbarEl = $pageEl.parents('.view').children('.toolbar'); | |
| 18957 | } | |
| 18958 | if (!$toolbarEl.length) { | |
| 18959 | $toolbarEl = $pageEl.parents('.views').children('.toolbar'); | |
| 18960 | } | |
| 18961 | } | |
| 18962 | ||
| 18963 | var currTransform = $cardEl.css('transform'); | |
| 18964 | var hasTransform; | |
| 18965 | if (currTransform && currTransform.match(/[2-9]/)) { | |
| 18966 | hasTransform = true; | |
| 18967 | } | |
| 18968 | var $cardContentEl = $cardEl.children('.card-content'); | |
| 18969 | ||
| 18970 | var $cardSizeEl = $(document.createElement('div')).addClass('card-expandable-size'); | |
| 18971 | $cardEl.append($cardSizeEl); | |
| 18972 | ||
| 18973 | var cardWidth = $cardEl[0].offsetWidth; | |
| 18974 | var cardHeight = $cardEl[0].offsetHeight; | |
| 18975 | var pageWidth = $pageEl[0].offsetWidth; | |
| 18976 | var pageHeight = $pageEl[0].offsetHeight; | |
| 18977 | ||
| 18978 | var maxWidth = $cardSizeEl[0].offsetWidth || pageWidth; | |
| 18979 | var maxHeight = $cardSizeEl[0].offsetHeight || pageHeight; | |
| 18980 | ||
| 18981 | var scaleX = maxWidth / cardWidth; | |
| 18982 | var scaleY = maxHeight / cardHeight; | |
| 18983 | ||
| 18984 | var offset = $cardEl.offset(); | |
| 5d51ea26 DC |
18985 | var pageOffset = $pageEl.offset(); |
| 18986 | offset.left -= pageOffset.left; | |
| 5309fbda DC |
18987 | |
| 18988 | var cardLeftOffset; | |
| 18989 | var cardTopOffset; | |
| 18990 | ||
| 18991 | if (hasTransform) { | |
| 5d51ea26 DC |
18992 | var transformValues = currTransform |
| 18993 | .replace(/matrix\(|\)/g, '') | |
| 18994 | .split(',') | |
| 18995 | .map(function (el) { return el.trim(); }); | |
| 18996 | if (transformValues && transformValues.length > 1) { | |
| 18997 | var scale = parseFloat(transformValues[0]); | |
| 18998 | cardLeftOffset = offset.left - cardWidth * (1 - scale) / 2; | |
| 18999 | cardTopOffset = offset.top - pageOffset.top - cardHeight * (1 - scale) / 2; | |
| 19000 | if (app.rtl) { cardLeftOffset -= $cardEl[0].scrollLeft; } | |
| 19001 | } else { | |
| 19002 | cardLeftOffset = $cardEl[0].offsetLeft; | |
| 19003 | cardTopOffset = $cardEl[0].offsetTop - ($pageContentEl.length ? $pageContentEl[0].scrollTop : 0); | |
| 19004 | } | |
| 5309fbda DC |
19005 | } else { |
| 19006 | cardLeftOffset = offset.left; | |
| 5d51ea26 | 19007 | cardTopOffset = offset.top - pageOffset.top; |
| 5309fbda DC |
19008 | if (app.rtl) { cardLeftOffset -= $cardEl[0].scrollLeft; } |
| 19009 | } | |
| 19010 | ||
| 19011 | cardLeftOffset -= (pageWidth - maxWidth) / 2; | |
| 19012 | cardTopOffset -= (pageHeight - maxHeight) / 2; | |
| 19013 | ||
| 19014 | var cardRightOffset = maxWidth - cardWidth - cardLeftOffset; | |
| 19015 | if (app.rtl) { | |
| 19016 | (assign = [cardRightOffset, cardLeftOffset], cardLeftOffset = assign[0], cardRightOffset = assign[1]); | |
| 19017 | } | |
| 19018 | var cardBottomOffset = maxHeight - cardHeight - cardTopOffset; | |
| 19019 | var translateX = (cardRightOffset - cardLeftOffset) / 2; | |
| 19020 | var translateY = (cardBottomOffset - cardTopOffset) / 2; | |
| 5d51ea26 DC |
19021 | if (cardParams.hideNavbarOnOpen && $navbarEl && $navbarEl.length) { |
| 19022 | app.navbar.hide($navbarEl, cardParams.animate); | |
| 5309fbda | 19023 | } |
| 5d51ea26 DC |
19024 | if (cardParams.hideToolbarOnOpen && $toolbarEl && $toolbarEl.length) { |
| 19025 | app.toolbar.hide($toolbarEl, cardParams.animate); | |
| 5309fbda | 19026 | } |
| 5d51ea26 DC |
19027 | if ($backdropEl) { |
| 19028 | $backdropEl.removeClass('card-backdrop-out').addClass('card-backdrop-in'); | |
| 5309fbda DC |
19029 | } |
| 19030 | $cardEl.removeClass('card-transitioning'); | |
| 5d51ea26 | 19031 | if (cardParams.animate) { |
| 5309fbda DC |
19032 | $cardEl.addClass('card-opening'); |
| 19033 | } | |
| 19034 | $cardEl.trigger('card:open'); | |
| 19035 | app.emit('cardOpen', $cardEl[0]); | |
| 19036 | function transitionEnd() { | |
| 5d51ea26 DC |
19037 | $pageEl.addClass('page-with-card-opened'); |
| 19038 | if (app.device.ios && $pageContentEl.length) { | |
| 19039 | $pageContentEl.css('height', (($pageContentEl[0].offsetHeight + 1) + "px")); | |
| 19040 | setTimeout(function () { | |
| 19041 | $pageContentEl.css('height', ''); | |
| 19042 | }); | |
| 19043 | } | |
| 5309fbda DC |
19044 | $cardEl.addClass('card-opened'); |
| 19045 | $cardEl.removeClass('card-opening'); | |
| 19046 | $cardEl.trigger('card:opened'); | |
| 5d51ea26 | 19047 | app.emit('cardOpened', $cardEl[0], $pageEl[0]); |
| 5309fbda DC |
19048 | } |
| 19049 | $cardContentEl | |
| 19050 | .css({ | |
| 19051 | width: (maxWidth + "px"), | |
| 19052 | height: (maxHeight + "px"), | |
| 19053 | }) | |
| 19054 | .transform(("translate3d(" + (app.rtl ? (cardLeftOffset + translateX) : (-cardLeftOffset - translateX)) + "px, 0px, 0) scale(" + (1 / scaleX) + ", " + (1 / scaleY) + ")")); | |
| 19055 | ||
| 19056 | $cardEl | |
| 19057 | .transform(("translate3d(" + translateX + "px, " + translateY + "px, 0) scale(" + scaleX + ", " + scaleY + ")")); | |
| 5d51ea26 | 19058 | if (cardParams.animate) { |
| 5309fbda DC |
19059 | $cardEl.transitionEnd(function () { |
| 19060 | transitionEnd(); | |
| 19061 | }); | |
| 19062 | } else { | |
| 19063 | transitionEnd(); | |
| 19064 | } | |
| 19065 | ||
| 5309fbda DC |
19066 | function onResize() { |
| 19067 | var assign; | |
| 19068 | ||
| 19069 | $cardEl.removeClass('card-transitioning'); | |
| 19070 | cardWidth = $cardEl[0].offsetWidth; | |
| 19071 | cardHeight = $cardEl[0].offsetHeight; | |
| 19072 | pageWidth = $pageEl[0].offsetWidth; | |
| 19073 | pageHeight = $pageEl[0].offsetHeight; | |
| 19074 | maxWidth = $cardSizeEl[0].offsetWidth || pageWidth; | |
| 19075 | maxHeight = $cardSizeEl[0].offsetHeight || pageHeight; | |
| 19076 | ||
| 19077 | scaleX = maxWidth / cardWidth; | |
| 19078 | scaleY = maxHeight / cardHeight; | |
| 19079 | ||
| 19080 | $cardEl.transform('translate3d(0px, 0px, 0) scale(1)'); | |
| 19081 | offset = $cardEl.offset(); | |
| 5d51ea26 DC |
19082 | pageOffset = $pageEl.offset(); |
| 19083 | offset.left -= pageOffset.left; | |
| 19084 | offset.top -= pageOffset.top; | |
| 5309fbda DC |
19085 | |
| 19086 | cardLeftOffset = offset.left - (pageWidth - maxWidth) / 2; | |
| 19087 | if (app.rtl) { cardLeftOffset -= $cardEl[0].scrollLeft; } | |
| 19088 | cardTopOffset = offset.top - (pageHeight - maxHeight) / 2; | |
| 19089 | ||
| 19090 | cardRightOffset = maxWidth - cardWidth - cardLeftOffset; | |
| 19091 | cardBottomOffset = maxHeight - cardHeight - cardTopOffset; | |
| 19092 | if (app.rtl) { | |
| 19093 | (assign = [cardRightOffset, cardLeftOffset], cardLeftOffset = assign[0], cardRightOffset = assign[1]); | |
| 19094 | } | |
| 19095 | translateX = (cardRightOffset - cardLeftOffset) / 2; | |
| 19096 | translateY = (cardBottomOffset - cardTopOffset) / 2; | |
| 19097 | ||
| 19098 | $cardEl.transform(("translate3d(" + translateX + "px, " + translateY + "px, 0) scale(" + scaleX + ", " + scaleY + ")")); | |
| 19099 | $cardContentEl | |
| 19100 | .css({ | |
| 19101 | width: (maxWidth + "px"), | |
| 19102 | height: (maxHeight + "px"), | |
| 19103 | }) | |
| 19104 | .transform(("translate3d(" + (app.rtl ? (cardLeftOffset + translateX) : (-cardLeftOffset - translateX)) + "px, 0px, 0) scale(" + (1 / scaleX) + ", " + (1 / scaleY) + ")")); | |
| 19105 | } | |
| 19106 | ||
| 19107 | var cardScrollTop; | |
| 19108 | var isTouched; | |
| 19109 | var isMoved; | |
| 19110 | var touchStartX; | |
| 19111 | var touchStartY; | |
| 19112 | var touchEndX; | |
| 19113 | var touchEndY; | |
| 19114 | var isScrolling; | |
| 19115 | var progress; | |
| 19116 | var isV; | |
| 19117 | var isH; | |
| 19118 | function onTouchStart(e) { | |
| 19119 | if (!$(e.target).closest($cardEl).length) { return; } | |
| 19120 | if (!$cardEl.hasClass('card-opened')) { return; } | |
| 19121 | cardScrollTop = $cardContentEl.scrollTop(); | |
| 19122 | isTouched = true; | |
| 19123 | touchStartX = e.targetTouches[0].pageX; | |
| 19124 | touchStartY = e.targetTouches[0].pageY; | |
| 19125 | isScrolling = undefined; | |
| 19126 | isV = false; | |
| 19127 | isH = false; | |
| 19128 | } | |
| 19129 | function onTouchMove(e) { | |
| 19130 | if (!isTouched) { return; } | |
| 19131 | touchEndX = e.targetTouches[0].pageX; | |
| 19132 | touchEndY = e.targetTouches[0].pageY; | |
| 19133 | if (typeof isScrolling === 'undefined') { | |
| 19134 | isScrolling = !!(isScrolling || Math.abs(touchEndY - touchStartY) > Math.abs(touchEndX - touchStartX)); | |
| 19135 | } | |
| 19136 | if (!isH && !isV) { | |
| 19137 | if (!isScrolling && e.targetTouches[0].clientX <= 50) { | |
| 19138 | isH = true; | |
| 19139 | } else { | |
| 19140 | isV = true; | |
| 19141 | } | |
| 19142 | } | |
| 19143 | ||
| 19144 | if (!(isH || isV) || (isV && cardScrollTop !== 0)) { | |
| 19145 | isTouched = true; | |
| 19146 | isMoved = true; | |
| 19147 | return; | |
| 19148 | } | |
| 19149 | if (!isMoved) { | |
| 19150 | $cardEl.removeClass('card-transitioning'); | |
| 19151 | } | |
| 19152 | ||
| 19153 | isMoved = true; | |
| 19154 | progress = isV ? Math.max((touchEndY - touchStartY) / 150, 0) : Math.max((touchEndX - touchStartX) / (cardWidth / 2), 0); | |
| 19155 | if ((progress > 0 && isV) || isH) { | |
| 19156 | if (isV && app.device.ios) { | |
| 19157 | $cardContentEl.css('-webkit-overflow-scrolling', 'auto'); | |
| 19158 | $cardContentEl.scrollTop(0); | |
| 19159 | } | |
| 19160 | e.preventDefault(); | |
| 19161 | } | |
| 19162 | ||
| 19163 | if (progress > 1) { progress = Math.pow( progress, 0.3 ); } | |
| 19164 | if (progress > (isV ? 1.3 : 1.1)) { | |
| 19165 | isTouched = false; | |
| 19166 | isMoved = false; | |
| 19167 | app.card.close($cardEl); | |
| 19168 | } else { | |
| 19169 | $cardEl.transform(("translate3d(" + translateX + "px, " + translateY + "px, 0) scale(" + (scaleX * (1 - progress * 0.2)) + ", " + (scaleY * (1 - progress * 0.2)) + ")")); | |
| 19170 | } | |
| 19171 | } | |
| 19172 | function onTouchEnd() { | |
| 19173 | if (!isTouched || !isMoved) { return; } | |
| 19174 | isTouched = false; | |
| 19175 | isMoved = false; | |
| 19176 | if (app.device.ios) { | |
| 19177 | $cardContentEl.css('-webkit-overflow-scrolling', ''); | |
| 19178 | } | |
| 19179 | if (progress >= 0.8) { | |
| 19180 | app.card.close($cardEl); | |
| 19181 | } else { | |
| 19182 | $cardEl | |
| 19183 | .addClass('card-transitioning') | |
| 19184 | .transform(("translate3d(" + translateX + "px, " + translateY + "px, 0) scale(" + scaleX + ", " + scaleY + ")")); | |
| 19185 | } | |
| 19186 | } | |
| 19187 | ||
| 19188 | $cardEl[0].detachEventHandlers = function detachEventHandlers() { | |
| 19189 | app.off('resize', onResize); | |
| 5d51ea26 | 19190 | if (Support.touch && cardParams.swipeToClose) { |
| 5309fbda DC |
19191 | app.off('touchstart:passive', onTouchStart); |
| 19192 | app.off('touchmove:active', onTouchMove); | |
| 19193 | app.off('touchend:passive', onTouchEnd); | |
| 19194 | } | |
| 19195 | }; | |
| 19196 | ||
| 19197 | app.on('resize', onResize); | |
| 5d51ea26 | 19198 | if (Support.touch && cardParams.swipeToClose) { |
| 5309fbda DC |
19199 | app.on('touchstart:passive', onTouchStart); |
| 19200 | app.on('touchmove:active', onTouchMove); | |
| 19201 | app.on('touchend:passive', onTouchEnd); | |
| 19202 | } | |
| 19203 | }, | |
| 19204 | close: function close(cardEl, animate) { | |
| 19205 | if ( cardEl === void 0 ) cardEl = '.card-expandable.card-opened'; | |
| 19206 | if ( animate === void 0 ) animate = true; | |
| 19207 | ||
| 19208 | var app = this; | |
| 19209 | var $cardEl = $(cardEl).eq(0); | |
| 19210 | if (!$cardEl || !$cardEl.length) { return; } | |
| 19211 | if (!$cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) { return; } | |
| 19212 | ||
| 19213 | var $cardContentEl = $cardEl.children('.card-content'); | |
| 5d51ea26 | 19214 | var $pageContentEl = $cardEl.parents('.page-content'); |
| 5309fbda DC |
19215 | |
| 19216 | var $pageEl = $cardEl.parents('.page').eq(0); | |
| 19217 | if (!$pageEl.length) { return; } | |
| 5d51ea26 DC |
19218 | |
| 19219 | var cardParams = Object.assign({ animate: animate }, app.params.card, $cardEl.dataset()); | |
| 19220 | ||
| 5309fbda DC |
19221 | var $navbarEl; |
| 19222 | var $toolbarEl; | |
| 19223 | ||
| 5d51ea26 DC |
19224 | var $backdropEl; |
| 19225 | if ($cardEl.attr('data-backdrop-el')) { | |
| 19226 | $backdropEl = $($cardEl.attr('data-backdrop-el')); | |
| 19227 | } | |
| 19228 | if (cardParams.backdrop) { | |
| 19229 | $backdropEl = $cardEl.parents('.page-content').find('.card-backdrop'); | |
| 5309fbda DC |
19230 | } |
| 19231 | ||
| 5d51ea26 | 19232 | if (cardParams.hideNavbarOnOpen) { |
| 5309fbda DC |
19233 | $navbarEl = $pageEl.children('.navbar'); |
| 19234 | if (!$navbarEl.length) { | |
| 19235 | if ($pageEl[0].f7Page) { $navbarEl = $pageEl[0].f7Page.$navbarEl; } | |
| 19236 | } | |
| 19237 | if ($navbarEl && $navbarEl.length) { | |
| 5d51ea26 | 19238 | app.navbar.show($navbarEl, cardParams.animate); |
| 5309fbda DC |
19239 | } |
| 19240 | } | |
| 5d51ea26 | 19241 | if (cardParams.hideToolbarOnOpen) { |
| 5309fbda DC |
19242 | $toolbarEl = $pageEl.children('.toolbar'); |
| 19243 | if (!$toolbarEl.length) { | |
| 19244 | $toolbarEl = $pageEl.parents('.view').children('.toolbar'); | |
| 19245 | } | |
| 19246 | if (!$toolbarEl.length) { | |
| 19247 | $toolbarEl = $pageEl.parents('.views').children('.toolbar'); | |
| 19248 | } | |
| 19249 | if ($toolbarEl && $toolbarEl.length) { | |
| 5d51ea26 | 19250 | app.toolbar.show($toolbarEl, cardParams.animate); |
| 5309fbda DC |
19251 | } |
| 19252 | } | |
| 5d51ea26 | 19253 | |
| 5309fbda DC |
19254 | $pageEl.removeClass('page-with-card-opened'); |
| 19255 | ||
| 5d51ea26 DC |
19256 | if (app.device.ios && $pageContentEl.length) { |
| 19257 | $pageContentEl.css('height', (($pageContentEl[0].offsetHeight + 1) + "px")); | |
| 19258 | setTimeout(function () { | |
| 19259 | $pageContentEl.css('height', ''); | |
| 19260 | }); | |
| 19261 | } | |
| 5309fbda | 19262 | |
| 5d51ea26 DC |
19263 | if ($backdropEl && $backdropEl.length) { |
| 19264 | $backdropEl.removeClass('card-backdrop-in').addClass('card-backdrop-out'); | |
| 5309fbda DC |
19265 | } |
| 19266 | ||
| 19267 | $cardEl.removeClass('card-opened card-transitioning'); | |
| 5d51ea26 | 19268 | if (cardParams.animate) { |
| 5309fbda DC |
19269 | $cardEl.addClass('card-closing'); |
| 19270 | } else { | |
| 19271 | $cardEl.addClass('card-no-transition'); | |
| 19272 | } | |
| 19273 | $cardEl.transform(''); | |
| 19274 | $cardEl.trigger('card:close'); | |
| 19275 | app.emit('cardClose', $cardEl[0]); | |
| 19276 | ||
| 19277 | function transitionEnd() { | |
| 19278 | $cardEl.removeClass('card-closing card-no-transition'); | |
| 19279 | $cardEl.trigger('card:closed'); | |
| 19280 | $cardEl.find('.card-expandable-size').remove(); | |
| 5d51ea26 | 19281 | app.emit('cardClosed', $cardEl[0], $pageEl[0]); |
| 5309fbda DC |
19282 | } |
| 19283 | $cardContentEl | |
| 19284 | .css({ | |
| 19285 | width: '', | |
| 19286 | height: '', | |
| 19287 | }) | |
| 19288 | .transform('') | |
| 19289 | .scrollTop(0, animate ? 300 : 0); | |
| 19290 | if (animate) { | |
| 19291 | $cardContentEl.transitionEnd(function () { | |
| 19292 | transitionEnd(); | |
| 19293 | }); | |
| 19294 | } else { | |
| 19295 | transitionEnd(); | |
| 19296 | } | |
| 19297 | ||
| 19298 | if ($cardEl[0].detachEventHandlers) { | |
| 19299 | $cardEl[0].detachEventHandlers(); | |
| 19300 | delete $cardEl[0].detachEventHandlers; | |
| 19301 | } | |
| 19302 | }, | |
| 19303 | toggle: function toggle(cardEl, animate) { | |
| 19304 | if ( cardEl === void 0 ) cardEl = '.card-expandable'; | |
| 19305 | ||
| 19306 | var app = this; | |
| 19307 | var $cardEl = $(cardEl).eq(0); | |
| 19308 | if (!$cardEl.length) { return; } | |
| 19309 | if ($cardEl.hasClass('card-opened')) { | |
| 19310 | app.card.close($cardEl, animate); | |
| 19311 | } else { | |
| 19312 | app.card.open($cardEl, animate); | |
| 19313 | } | |
| 19314 | }, | |
| 19315 | }; | |
| 19316 | ||
| 19317 | var Card = { | |
| 19318 | name: 'card', | |
| 19319 | params: { | |
| 19320 | card: { | |
| 19321 | hideNavbarOnOpen: true, | |
| 19322 | hideToolbarOnOpen: true, | |
| 19323 | swipeToClose: true, | |
| 19324 | closeByBackdropClick: true, | |
| 5d51ea26 | 19325 | backdrop: true, |
| 5309fbda DC |
19326 | }, |
| 19327 | }, | |
| 19328 | create: function create() { | |
| 19329 | var app = this; | |
| 19330 | Utils.extend(app, { | |
| 19331 | card: { | |
| 19332 | open: CardExpandable.open.bind(app), | |
| 19333 | close: CardExpandable.close.bind(app), | |
| 19334 | toggle: CardExpandable.toggle.bind(app), | |
| 19335 | }, | |
| 19336 | }); | |
| 19337 | }, | |
| 5d51ea26 DC |
19338 | on: { |
| 19339 | pageBeforeIn: function pageBeforeIn(page) { | |
| 19340 | var app = this; | |
| 19341 | if (app.params.card.hideNavbarOnOpen && page.navbarEl && page.$el.find('.card-opened.card-expandable').length) { | |
| 19342 | app.navbar.hide(page.navbarEl); | |
| 19343 | } | |
| 19344 | ||
| 19345 | if (app.params.card.hideToolbarOnOpen && page.$el.find('.card-opened.card-expandable').length) { | |
| 19346 | var $toolbarEl = page.$el.children('.toolbar'); | |
| 19347 | if (!$toolbarEl.length) { | |
| 19348 | $toolbarEl = page.$el.parents('.view').children('.toolbar'); | |
| 19349 | } | |
| 19350 | if (!$toolbarEl.length) { | |
| 19351 | $toolbarEl = page.$el.parents('.views').children('.toolbar'); | |
| 19352 | } | |
| 19353 | if ($toolbarEl && $toolbarEl.length) { | |
| 19354 | app.toolbar.hide($toolbarEl); | |
| 19355 | } | |
| 19356 | } | |
| 19357 | }, | |
| 19358 | }, | |
| 5309fbda DC |
19359 | clicks: { |
| 19360 | '.card-close': function closeCard($clickedEl, data) { | |
| 19361 | var app = this; | |
| 5d51ea26 | 19362 | app.card.close(data.card, data.animate); |
| 5309fbda DC |
19363 | }, |
| 19364 | '.card-open': function closeCard($clickedEl, data) { | |
| 19365 | var app = this; | |
| 5d51ea26 | 19366 | app.card.open(data.card, data.animate); |
| 5309fbda DC |
19367 | }, |
| 19368 | '.card-expandable': function toggleExpandableCard($clickedEl, data, e) { | |
| 19369 | var app = this; | |
| 19370 | if ($clickedEl.hasClass('card-opened') || $clickedEl.hasClass('card-opening') || $clickedEl.hasClass('card-closing')) { return; } | |
| 5d51ea26 | 19371 | if ($(e.target).closest('.card-prevent-open, .card-close').length) { return; } |
| 5309fbda DC |
19372 | app.card.open($clickedEl); |
| 19373 | }, | |
| 19374 | '.card-backdrop-in': function onBackdropClick() { | |
| 19375 | var app = this; | |
| 19376 | var needToClose = false; | |
| 19377 | if (app.params.card.closeByBackdropClick) { needToClose = true; } | |
| 19378 | var $openedCardEl = $('.card-opened'); | |
| 19379 | if (!$openedCardEl.length) { return; } | |
| 5d51ea26 | 19380 | if ($openedCardEl.attr('data-close-by-backdrop-click') === 'true') { |
| 5309fbda | 19381 | needToClose = true; |
| 5d51ea26 | 19382 | } else if ($openedCardEl.attr('data-close-by-backdrop-click') === 'false') { |
| 5309fbda DC |
19383 | needToClose = false; |
| 19384 | } | |
| 19385 | if (needToClose) { app.card.close($openedCardEl); } | |
| 19386 | }, | |
| 19387 | }, | |
| 19388 | }; | |
| 19389 | ||
| 19390 | var Chip = { | |
| 19391 | name: 'chip', | |
| 19392 | }; | |
| 19393 | ||
| 19394 | // Form Data | |
| 19395 | var FormData$1 = { | |
| 19396 | store: function store(form, data) { | |
| 19397 | var app = this; | |
| 19398 | var formId = form; | |
| 19399 | ||
| 19400 | var $formEl = $(form); | |
| 19401 | if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) { | |
| 19402 | formId = $formEl.attr('id'); | |
| 19403 | } | |
| 19404 | // Store form data in app.formsData | |
| 19405 | app.form.data[("form-" + formId)] = data; | |
| 19406 | ||
| 19407 | // Store form data in local storage also | |
| 19408 | try { | |
| 19409 | win.localStorage[("f7form-" + formId)] = JSON.stringify(data); | |
| 19410 | } catch (e) { | |
| 19411 | throw e; | |
| 19412 | } | |
| 19413 | }, | |
| 19414 | get: function get(form) { | |
| 19415 | var app = this; | |
| 19416 | var formId = form; | |
| 19417 | ||
| 19418 | var $formEl = $(form); | |
| 19419 | if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) { | |
| 19420 | formId = $formEl.attr('id'); | |
| 19421 | } | |
| 19422 | ||
| 19423 | try { | |
| 19424 | if (win.localStorage[("f7form-" + formId)]) { | |
| 19425 | return JSON.parse(win.localStorage[("f7form-" + formId)]); | |
| 19426 | } | |
| 19427 | } catch (e) { | |
| 19428 | throw e; | |
| 19429 | } | |
| 19430 | if (app.form.data[("form-" + formId)]) { | |
| 19431 | return app.form.data[("form-" + formId)]; | |
| 19432 | } | |
| 19433 | return undefined; | |
| 19434 | }, | |
| 19435 | remove: function remove(form) { | |
| 19436 | var app = this; | |
| 19437 | var formId = form; | |
| 19438 | ||
| 19439 | var $formEl = $(form); | |
| 19440 | if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) { | |
| 19441 | formId = $formEl.attr('id'); | |
| 19442 | } | |
| 19443 | ||
| 19444 | // Delete form data from app.formsData | |
| 19445 | if (app.form.data[("form-" + formId)]) { | |
| 19446 | app.form.data[("form-" + formId)] = ''; | |
| 19447 | delete app.form.data[("form-" + formId)]; | |
| 19448 | } | |
| 19449 | ||
| 19450 | // Delete form data from local storage also | |
| 19451 | try { | |
| 19452 | if (win.localStorage[("f7form-" + formId)]) { | |
| 19453 | win.localStorage[("f7form-" + formId)] = ''; | |
| 19454 | win.localStorage.removeItem(("f7form-" + formId)); | |
| 19455 | } | |
| 19456 | } catch (e) { | |
| 19457 | throw e; | |
| 19458 | } | |
| 19459 | }, | |
| 19460 | }; | |
| 19461 | ||
| 19462 | // Form Storage | |
| 19463 | var FormStorage = { | |
| 19464 | init: function init(formEl) { | |
| 19465 | var app = this; | |
| 19466 | var $formEl = $(formEl); | |
| 19467 | var formId = $formEl.attr('id'); | |
| 19468 | if (!formId) { return; } | |
| 19469 | var initialData = app.form.getFormData(formId); | |
| 19470 | if (initialData) { | |
| 19471 | app.form.fillFromData($formEl, initialData); | |
| 19472 | } | |
| 19473 | function store() { | |
| 19474 | var data = app.form.convertToData($formEl); | |
| 19475 | if (!data) { return; } | |
| 19476 | app.form.storeFormData(formId, data); | |
| 19477 | $formEl.trigger('form:storedata', data); | |
| 19478 | app.emit('formStoreData', $formEl[0], data); | |
| 19479 | } | |
| 19480 | $formEl.on('change submit', store); | |
| 19481 | }, | |
| 19482 | destroy: function destroy(formEl) { | |
| 19483 | var $formEl = $(formEl); | |
| 19484 | $formEl.off('change submit'); | |
| 19485 | }, | |
| 19486 | }; | |
| 19487 | ||
| 19488 | // Form To/From Data | |
| 19489 | function formToData(formEl) { | |
| 19490 | var app = this; | |
| 19491 | var $formEl = $(formEl).eq(0); | |
| 19492 | if ($formEl.length === 0) { return undefined; } | |
| 19493 | ||
| 19494 | // Form data | |
| 19495 | var data = {}; | |
| 19496 | ||
| 19497 | // Skip input types | |
| 19498 | var skipTypes = ['submit', 'image', 'button', 'file']; | |
| 19499 | var skipNames = []; | |
| 19500 | $formEl.find('input, select, textarea').each(function (inputIndex, inputEl) { | |
| 19501 | var $inputEl = $(inputEl); | |
| 19502 | if ($inputEl.hasClass('ignore-store-data') || $inputEl.hasClass('no-store-data')) { | |
| 19503 | return; | |
| 19504 | } | |
| 19505 | var name = $inputEl.attr('name'); | |
| 19506 | var type = $inputEl.attr('type'); | |
| 19507 | var tag = inputEl.nodeName.toLowerCase(); | |
| 19508 | if (skipTypes.indexOf(type) >= 0) { return; } | |
| 19509 | if (skipNames.indexOf(name) >= 0 || !name) { return; } | |
| 19510 | if (tag === 'select' && $inputEl.prop('multiple')) { | |
| 19511 | skipNames.push(name); | |
| 19512 | data[name] = []; | |
| 19513 | $formEl.find(("select[name=\"" + name + "\"] option")).each(function (index, el) { | |
| 19514 | if (el.selected) { data[name].push(el.value); } | |
| 19515 | }); | |
| 19516 | } else { | |
| 19517 | switch (type) { | |
| 19518 | case 'checkbox': | |
| 19519 | skipNames.push(name); | |
| 19520 | data[name] = []; | |
| 19521 | $formEl.find(("input[name=\"" + name + "\"]")).each(function (index, el) { | |
| 19522 | if (el.checked) { data[name].push(el.value); } | |
| 19523 | }); | |
| 19524 | break; | |
| 19525 | case 'radio': | |
| 19526 | skipNames.push(name); | |
| 19527 | $formEl.find(("input[name=\"" + name + "\"]")).each(function (index, el) { | |
| 19528 | if (el.checked) { data[name] = el.value; } | |
| 19529 | }); | |
| 19530 | break; | |
| 19531 | default: | |
| 19532 | data[name] = $inputEl.val(); | |
| 19533 | break; | |
| 19534 | } | |
| 19535 | } | |
| 19536 | }); | |
| 19537 | $formEl.trigger('form:todata', data); | |
| 19538 | app.emit('formToData', $formEl[0], data); | |
| 19539 | ||
| 19540 | return data; | |
| 19541 | } | |
| 19542 | function formFromData(formEl, formData) { | |
| 19543 | var app = this; | |
| 19544 | var $formEl = $(formEl).eq(0); | |
| 19545 | if (!$formEl.length) { return; } | |
| 19546 | ||
| 19547 | var data = formData; | |
| 19548 | var formId = $formEl.attr('id'); | |
| 19549 | ||
| 19550 | if (!data && formId) { | |
| 19551 | data = app.form.getFormData(formId); | |
| 19552 | } | |
| 19553 | ||
| 19554 | if (!data) { return; } | |
| 19555 | ||
| 19556 | // Skip input types | |
| 19557 | var skipTypes = ['submit', 'image', 'button', 'file']; | |
| 19558 | var skipNames = []; | |
| 19559 | ||
| 19560 | $formEl.find('input, select, textarea').each(function (inputIndex, inputEl) { | |
| 19561 | var $inputEl = $(inputEl); | |
| 19562 | if ($inputEl.hasClass('ignore-store-data') || $inputEl.hasClass('no-store-data')) { | |
| 19563 | return; | |
| 19564 | } | |
| 19565 | var name = $inputEl.attr('name'); | |
| 19566 | var type = $inputEl.attr('type'); | |
| 19567 | var tag = inputEl.nodeName.toLowerCase(); | |
| 19568 | if (typeof data[name] === 'undefined' || data[name] === null) { return; } | |
| 19569 | if (skipTypes.indexOf(type) >= 0) { return; } | |
| 19570 | if (skipNames.indexOf(name) >= 0 || !name) { return; } | |
| 19571 | if (tag === 'select' && $inputEl.prop('multiple')) { | |
| 19572 | skipNames.push(name); | |
| 19573 | $formEl.find(("select[name=\"" + name + "\"] option")).each(function (index, el) { | |
| 19574 | var selectEl = el; | |
| 19575 | if (data[name].indexOf(el.value) >= 0) { selectEl.selected = true; } | |
| 19576 | else { selectEl.selected = false; } | |
| 19577 | }); | |
| 19578 | } else { | |
| 19579 | switch (type) { | |
| 19580 | case 'checkbox': | |
| 19581 | skipNames.push(name); | |
| 19582 | $formEl.find(("input[name=\"" + name + "\"]")).each(function (index, el) { | |
| 19583 | var checkboxEl = el; | |
| 19584 | if (data[name].indexOf(el.value) >= 0) { checkboxEl.checked = true; } | |
| 19585 | else { checkboxEl.checked = false; } | |
| 19586 | }); | |
| 19587 | break; | |
| 19588 | case 'radio': | |
| 19589 | skipNames.push(name); | |
| 19590 | $formEl.find(("input[name=\"" + name + "\"]")).each(function (index, el) { | |
| 19591 | var radioEl = el; | |
| 19592 | if (data[name] === el.value) { radioEl.checked = true; } | |
| 19593 | else { radioEl.checked = false; } | |
| 19594 | }); | |
| 19595 | break; | |
| 19596 | default: | |
| 19597 | $inputEl.val(data[name]); | |
| 19598 | break; | |
| 19599 | } | |
| 19600 | } | |
| 19601 | if (tag === 'select' || tag === 'input' || tag === 'textarea') { | |
| 19602 | $inputEl.trigger('change', 'fromdata'); | |
| 19603 | } | |
| 19604 | }); | |
| 19605 | $formEl.trigger('form:fromdata', data); | |
| 19606 | app.emit('formFromData', $formEl[0], data); | |
| 19607 | } | |
| 19608 | ||
| 19609 | function initAjaxForm() { | |
| 19610 | var app = this; | |
| 19611 | ||
| 19612 | function onSubmitChange(e, fromData) { | |
| 19613 | var $formEl = $(this); | |
| 19614 | if (e.type === 'change' && !$formEl.hasClass('form-ajax-submit-onchange')) { return; } | |
| 19615 | if (e.type === 'submit') { e.preventDefault(); } | |
| 19616 | ||
| 19617 | if (e.type === 'change' && fromData === 'fromdata') { return; } | |
| 19618 | ||
| 19619 | var method = ($formEl.attr('method') || 'GET').toUpperCase(); | |
| 19620 | var contentType = $formEl.prop('enctype') || $formEl.attr('enctype'); | |
| 19621 | ||
| 19622 | var url = $formEl.attr('action'); | |
| 19623 | if (!url) { return; } | |
| 19624 | ||
| 19625 | var data; | |
| 19626 | if (method === 'POST') { | |
| 19627 | if (contentType === 'application/x-www-form-urlencoded') { | |
| 19628 | data = app.form.convertToData($formEl[0]); | |
| 19629 | } else { | |
| 19630 | data = new win.FormData($formEl[0]); | |
| 19631 | } | |
| 19632 | } else { | |
| 19633 | data = Utils.serializeObject(app.form.convertToData($formEl[0])); | |
| 19634 | } | |
| 19635 | ||
| 19636 | app.request({ | |
| 19637 | method: method, | |
| 19638 | url: url, | |
| 19639 | contentType: contentType, | |
| 19640 | data: data, | |
| 19641 | beforeSend: function beforeSend(xhr) { | |
| 5d51ea26 | 19642 | $formEl.trigger('formajax:beforesend', { data: data, xhr: xhr }); |
| 5309fbda DC |
19643 | app.emit('formAjaxBeforeSend', $formEl[0], data, xhr); |
| 19644 | }, | |
| 19645 | error: function error(xhr) { | |
| 5d51ea26 | 19646 | $formEl.trigger('formajax:error', { data: data, xhr: xhr }); |
| 5309fbda DC |
19647 | app.emit('formAjaxError', $formEl[0], data, xhr); |
| 19648 | }, | |
| 19649 | complete: function complete(xhr) { | |
| 5d51ea26 | 19650 | $formEl.trigger('formajax:complete', { data: data, xhr: xhr }); |
| 5309fbda DC |
19651 | app.emit('formAjaxComplete', $formEl[0], data, xhr); |
| 19652 | }, | |
| 19653 | success: function success(response, status, xhr) { | |
| 5d51ea26 | 19654 | $formEl.trigger('formajax:success', { data: data, xhr: xhr }); |
| 5309fbda DC |
19655 | app.emit('formAjaxSuccess', $formEl[0], data, xhr); |
| 19656 | }, | |
| 19657 | }); | |
| 19658 | } | |
| 19659 | $(doc).on('submit change', 'form.form-ajax-submit, form.form-ajax-submit-onchange', onSubmitChange); | |
| 19660 | } | |
| 19661 | ||
| 19662 | var Form = { | |
| 19663 | name: 'form', | |
| 19664 | create: function create() { | |
| 19665 | var app = this; | |
| 19666 | Utils.extend(app, { | |
| 19667 | form: { | |
| 19668 | data: {}, | |
| 19669 | storeFormData: FormData$1.store.bind(app), | |
| 19670 | getFormData: FormData$1.get.bind(app), | |
| 19671 | removeFormData: FormData$1.remove.bind(app), | |
| 19672 | convertToData: formToData.bind(app), | |
| 19673 | fillFromData: formFromData.bind(app), | |
| 19674 | storage: { | |
| 19675 | init: FormStorage.init.bind(app), | |
| 19676 | destroy: FormStorage.destroy.bind(app), | |
| 19677 | }, | |
| 19678 | }, | |
| 19679 | }); | |
| 19680 | }, | |
| 19681 | on: { | |
| 19682 | init: function init() { | |
| 19683 | var app = this; | |
| 19684 | initAjaxForm.call(app); | |
| 19685 | }, | |
| 19686 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 19687 | var app = this; | |
| 19688 | $(tabEl).find('.form-store-data').each(function (index, formEl) { | |
| 19689 | app.form.storage.destroy(formEl); | |
| 19690 | }); | |
| 19691 | }, | |
| 19692 | tabMounted: function tabMounted(tabEl) { | |
| 19693 | var app = this; | |
| 19694 | $(tabEl).find('.form-store-data').each(function (index, formEl) { | |
| 19695 | app.form.storage.init(formEl); | |
| 19696 | }); | |
| 19697 | }, | |
| 19698 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 19699 | var app = this; | |
| 19700 | page.$el.find('.form-store-data').each(function (index, formEl) { | |
| 19701 | app.form.storage.destroy(formEl); | |
| 19702 | }); | |
| 19703 | }, | |
| 19704 | pageInit: function pageInit(page) { | |
| 19705 | var app = this; | |
| 19706 | page.$el.find('.form-store-data').each(function (index, formEl) { | |
| 19707 | app.form.storage.init(formEl); | |
| 19708 | }); | |
| 19709 | }, | |
| 19710 | }, | |
| 19711 | }; | |
| 19712 | ||
| 19713 | var Input = { | |
| 19714 | ignoreTypes: ['checkbox', 'button', 'submit', 'range', 'radio', 'image'], | |
| 19715 | createTextareaResizableShadow: function createTextareaResizableShadow() { | |
| 19716 | var $shadowEl = $(doc.createElement('textarea')); | |
| 19717 | $shadowEl.addClass('textarea-resizable-shadow'); | |
| 19718 | $shadowEl.prop({ | |
| 19719 | disabled: true, | |
| 19720 | readonly: true, | |
| 19721 | }); | |
| 19722 | Input.textareaResizableShadow = $shadowEl; | |
| 19723 | }, | |
| 19724 | textareaResizableShadow: undefined, | |
| 19725 | resizeTextarea: function resizeTextarea(textareaEl) { | |
| 19726 | var app = this; | |
| 19727 | var $textareaEl = $(textareaEl); | |
| 19728 | if (!Input.textareaResizableShadow) { | |
| 19729 | Input.createTextareaResizableShadow(); | |
| 19730 | } | |
| 19731 | var $shadowEl = Input.textareaResizableShadow; | |
| 19732 | if (!$textareaEl.length) { return; } | |
| 19733 | if (!$textareaEl.hasClass('resizable')) { return; } | |
| 19734 | if (Input.textareaResizableShadow.parents().length === 0) { | |
| 19735 | app.root.append($shadowEl); | |
| 19736 | } | |
| 19737 | ||
| 19738 | var styles = win.getComputedStyle($textareaEl[0]); | |
| 19739 | ('padding-top padding-bottom padding-left padding-right margin-left margin-right margin-top margin-bottom width font-size font-family font-style font-weight line-height font-variant text-transform letter-spacing border box-sizing display').split(' ').forEach(function (style) { | |
| 19740 | var styleValue = styles[style]; | |
| 19741 | if (('font-size line-height letter-spacing width').split(' ').indexOf(style) >= 0) { | |
| 19742 | styleValue = styleValue.replace(',', '.'); | |
| 19743 | } | |
| 19744 | $shadowEl.css(style, styleValue); | |
| 19745 | }); | |
| 19746 | var currentHeight = $textareaEl[0].clientHeight; | |
| 19747 | ||
| 19748 | $shadowEl.val(''); | |
| 19749 | var initialHeight = $shadowEl[0].scrollHeight; | |
| 19750 | ||
| 19751 | $shadowEl.val($textareaEl.val()); | |
| 19752 | $shadowEl.css('height', 0); | |
| 19753 | var scrollHeight = $shadowEl[0].scrollHeight; | |
| 19754 | ||
| 19755 | if (currentHeight !== scrollHeight) { | |
| 19756 | if (scrollHeight > initialHeight) { | |
| 19757 | $textareaEl.css('height', (scrollHeight + "px")); | |
| 19758 | $textareaEl.trigger('textarea:resize', { initialHeight: initialHeight, currentHeight: currentHeight, scrollHeight: scrollHeight }); | |
| 19759 | } else if (scrollHeight < currentHeight) { | |
| 19760 | $textareaEl.css('height', ''); | |
| 19761 | $textareaEl.trigger('textarea:resize', { initialHeight: initialHeight, currentHeight: currentHeight, scrollHeight: scrollHeight }); | |
| 19762 | } | |
| 19763 | } | |
| 19764 | }, | |
| 19765 | validate: function validate(inputEl) { | |
| 19766 | var $inputEl = $(inputEl); | |
| 19767 | if (!$inputEl.length) { return; } | |
| 19768 | var $itemInputEl = $inputEl.parents('.item-input'); | |
| 19769 | var $inputWrapEl = $inputEl.parents('.input'); | |
| 19770 | var validity = $inputEl[0].validity; | |
| 19771 | var validationMessage = $inputEl.dataset().errorMessage || $inputEl[0].validationMessage || ''; | |
| 19772 | if (!validity) { return; } | |
| 19773 | if (!validity.valid) { | |
| 19774 | var $errorEl = $inputEl.nextAll('.item-input-error-message, .input-error-message'); | |
| 19775 | if (validationMessage) { | |
| 19776 | if ($errorEl.length === 0) { | |
| 19777 | $errorEl = $(("<div class=\"" + ($inputWrapEl.length ? 'input-error-message' : 'item-input-error-message') + "\"></div>")); | |
| 19778 | $errorEl.insertAfter($inputEl); | |
| 19779 | } | |
| 19780 | $errorEl.text(validationMessage); | |
| 19781 | } | |
| 19782 | if ($errorEl.length > 0) { | |
| 19783 | $itemInputEl.addClass('item-input-with-error-message'); | |
| 5d51ea26 | 19784 | $inputWrapEl.addClass('input-with-error-message'); |
| 5309fbda DC |
19785 | } |
| 19786 | $itemInputEl.addClass('item-input-invalid'); | |
| 19787 | $inputWrapEl.addClass('input-invalid'); | |
| 19788 | $inputEl.addClass('input-invalid'); | |
| 19789 | } else { | |
| 19790 | $itemInputEl.removeClass('item-input-invalid item-input-with-error-message'); | |
| 19791 | $inputWrapEl.removeClass('input-invalid input-with-error-message'); | |
| 19792 | $inputEl.removeClass('input-invalid'); | |
| 19793 | } | |
| 19794 | }, | |
| 19795 | validateInputs: function validateInputs(el) { | |
| 19796 | var app = this; | |
| 19797 | $(el).find('input, textarea, select').each(function (index, inputEl) { | |
| 19798 | app.input.validate(inputEl); | |
| 19799 | }); | |
| 19800 | }, | |
| 19801 | focus: function focus(inputEl) { | |
| 19802 | var $inputEl = $(inputEl); | |
| 19803 | var type = $inputEl.attr('type'); | |
| 19804 | if (Input.ignoreTypes.indexOf(type) >= 0) { return; } | |
| 19805 | $inputEl.parents('.item-input').addClass('item-input-focused'); | |
| 19806 | $inputEl.parents('.input').addClass('input-focused'); | |
| 19807 | $inputEl.addClass('input-focused'); | |
| 19808 | }, | |
| 19809 | blur: function blur(inputEl) { | |
| 19810 | var $inputEl = $(inputEl); | |
| 19811 | $inputEl.parents('.item-input').removeClass('item-input-focused'); | |
| 19812 | $inputEl.parents('.input').removeClass('input-focused'); | |
| 19813 | $inputEl.removeClass('input-focused'); | |
| 19814 | }, | |
| 19815 | checkEmptyState: function checkEmptyState(inputEl) { | |
| 19816 | var $inputEl = $(inputEl); | |
| 19817 | if (!$inputEl.is('input, select, textarea')) { | |
| 19818 | $inputEl = $inputEl.find('input, select, textarea').eq(0); | |
| 19819 | } | |
| 19820 | if (!$inputEl.length) { return; } | |
| 19821 | ||
| 19822 | var value = $inputEl.val(); | |
| 19823 | var $itemInputEl = $inputEl.parents('.item-input'); | |
| 19824 | var $inputWrapEl = $inputEl.parents('.input'); | |
| 19825 | if ((value && (typeof value === 'string' && value.trim() !== '')) || (Array.isArray(value) && value.length > 0)) { | |
| 19826 | $itemInputEl.addClass('item-input-with-value'); | |
| 19827 | $inputWrapEl.addClass('input-with-value'); | |
| 19828 | $inputEl.addClass('input-with-value'); | |
| 19829 | $inputEl.trigger('input:notempty'); | |
| 19830 | } else { | |
| 19831 | $itemInputEl.removeClass('item-input-with-value'); | |
| 19832 | $inputWrapEl.removeClass('input-with-value'); | |
| 19833 | $inputEl.removeClass('input-with-value'); | |
| 19834 | $inputEl.trigger('input:empty'); | |
| 19835 | } | |
| 19836 | }, | |
| 19837 | scrollIntoView: function scrollIntoView(inputEl, duration, centered, force) { | |
| 19838 | if ( duration === void 0 ) duration = 0; | |
| 19839 | ||
| 19840 | var $inputEl = $(inputEl); | |
| 19841 | var $scrollableEl = $inputEl.parents('.page-content, .panel').eq(0); | |
| 19842 | if (!$scrollableEl.length) { | |
| 19843 | return false; | |
| 19844 | } | |
| 19845 | var contentHeight = $scrollableEl[0].offsetHeight; | |
| 19846 | var contentScrollTop = $scrollableEl[0].scrollTop; | |
| 19847 | var contentPaddingTop = parseInt($scrollableEl.css('padding-top'), 10); | |
| 19848 | var contentPaddingBottom = parseInt($scrollableEl.css('padding-bottom'), 10); | |
| 19849 | var contentOffsetTop = $scrollableEl.offset().top - contentScrollTop; | |
| 19850 | ||
| 19851 | var inputOffsetTop = $inputEl.offset().top - contentOffsetTop; | |
| 19852 | var inputHeight = $inputEl[0].offsetHeight; | |
| 19853 | ||
| 19854 | var min = (inputOffsetTop + contentScrollTop) - contentPaddingTop; | |
| 19855 | var max = ((inputOffsetTop + contentScrollTop) - contentHeight) + contentPaddingBottom + inputHeight; | |
| 19856 | var centeredPosition = min + ((max - min) / 2); | |
| 19857 | ||
| 19858 | if (contentScrollTop > min) { | |
| 19859 | $scrollableEl.scrollTop(centered ? centeredPosition : min, duration); | |
| 19860 | return true; | |
| 19861 | } | |
| 19862 | if (contentScrollTop < max) { | |
| 19863 | $scrollableEl.scrollTop(centered ? centeredPosition : max, duration); | |
| 19864 | return true; | |
| 19865 | } | |
| 19866 | if (force) { | |
| 19867 | $scrollableEl.scrollTop(centered ? centeredPosition : max, duration); | |
| 19868 | } | |
| 19869 | return false; | |
| 19870 | }, | |
| 19871 | init: function init() { | |
| 19872 | var app = this; | |
| 19873 | Input.createTextareaResizableShadow(); | |
| 19874 | function onFocus() { | |
| 19875 | var inputEl = this; | |
| 19876 | if (app.params.input.scrollIntoViewOnFocus) { | |
| 19877 | if (Device.android) { | |
| 19878 | $(win).once('resize', function () { | |
| 19879 | if (doc && doc.activeElement === inputEl) { | |
| 19880 | app.input.scrollIntoView(inputEl, app.params.input.scrollIntoViewDuration, app.params.input.scrollIntoViewCentered, app.params.input.scrollIntoViewAlways); | |
| 19881 | } | |
| 19882 | }); | |
| 19883 | } else { | |
| 19884 | app.input.scrollIntoView(inputEl, app.params.input.scrollIntoViewDuration, app.params.input.scrollIntoViewCentered, app.params.input.scrollIntoViewAlways); | |
| 19885 | } | |
| 19886 | } | |
| 19887 | app.input.focus(inputEl); | |
| 19888 | } | |
| 19889 | function onBlur() { | |
| 19890 | var $inputEl = $(this); | |
| 19891 | var tag = $inputEl[0].nodeName.toLowerCase(); | |
| 19892 | app.input.blur($inputEl); | |
| 19893 | if ($inputEl.dataset().validate || $inputEl.attr('validate') !== null || $inputEl.attr('data-validate-on-blur') !== null) { | |
| 19894 | app.input.validate($inputEl); | |
| 19895 | } | |
| 19896 | // Resize textarea | |
| 19897 | if (tag === 'textarea' && $inputEl.hasClass('resizable')) { | |
| 19898 | if (Input.textareaResizableShadow) { Input.textareaResizableShadow.remove(); } | |
| 19899 | } | |
| 19900 | } | |
| 19901 | function onChange() { | |
| 19902 | var $inputEl = $(this); | |
| 19903 | var type = $inputEl.attr('type'); | |
| 19904 | var tag = $inputEl[0].nodeName.toLowerCase(); | |
| 19905 | if (Input.ignoreTypes.indexOf(type) >= 0) { return; } | |
| 19906 | ||
| 19907 | // Check Empty State | |
| 19908 | app.input.checkEmptyState($inputEl); | |
| 19909 | ||
| 19910 | // Check validation | |
| 19911 | if ($inputEl.attr('data-validate-on-blur') === null && ($inputEl.dataset().validate || $inputEl.attr('validate') !== null)) { | |
| 19912 | app.input.validate($inputEl); | |
| 19913 | } | |
| 19914 | ||
| 19915 | // Resize textarea | |
| 19916 | if (tag === 'textarea' && $inputEl.hasClass('resizable')) { | |
| 19917 | app.input.resizeTextarea($inputEl); | |
| 19918 | } | |
| 19919 | } | |
| 19920 | function onInvalid(e) { | |
| 19921 | var $inputEl = $(this); | |
| 19922 | if ($inputEl.attr('data-validate-on-blur') === null && ($inputEl.dataset().validate || $inputEl.attr('validate') !== null)) { | |
| 19923 | e.preventDefault(); | |
| 19924 | app.input.validate($inputEl); | |
| 19925 | } | |
| 19926 | } | |
| 19927 | function clearInput() { | |
| 19928 | var $clicked = $(this); | |
| 19929 | var $inputEl = $clicked.siblings('input, textarea').eq(0); | |
| 19930 | var previousValue = $inputEl.val(); | |
| 19931 | $inputEl | |
| 19932 | .val('') | |
| 19933 | .trigger('input change') | |
| 19934 | .focus() | |
| 19935 | .trigger('input:clear', previousValue); | |
| 19936 | } | |
| 19937 | $(doc).on('click', '.input-clear-button', clearInput); | |
| 19938 | $(doc).on('change input', 'input, textarea, select', onChange, true); | |
| 19939 | $(doc).on('focus', 'input, textarea, select', onFocus, true); | |
| 19940 | $(doc).on('blur', 'input, textarea, select', onBlur, true); | |
| 19941 | $(doc).on('invalid', 'input, textarea, select', onInvalid, true); | |
| 19942 | }, | |
| 19943 | }; | |
| 19944 | ||
| 19945 | var Input$1 = { | |
| 19946 | name: 'input', | |
| 19947 | params: { | |
| 19948 | input: { | |
| 19949 | scrollIntoViewOnFocus: Device.android, | |
| 19950 | scrollIntoViewCentered: false, | |
| 19951 | scrollIntoViewDuration: 0, | |
| 19952 | scrollIntoViewAlways: false, | |
| 19953 | }, | |
| 19954 | }, | |
| 19955 | create: function create() { | |
| 19956 | var app = this; | |
| 19957 | Utils.extend(app, { | |
| 19958 | input: { | |
| 19959 | scrollIntoView: Input.scrollIntoView.bind(app), | |
| 19960 | focus: Input.focus.bind(app), | |
| 19961 | blur: Input.blur.bind(app), | |
| 19962 | validate: Input.validate.bind(app), | |
| 19963 | validateInputs: Input.validateInputs.bind(app), | |
| 19964 | checkEmptyState: Input.checkEmptyState.bind(app), | |
| 19965 | resizeTextarea: Input.resizeTextarea.bind(app), | |
| 19966 | init: Input.init.bind(app), | |
| 19967 | }, | |
| 19968 | }); | |
| 19969 | }, | |
| 19970 | on: { | |
| 19971 | init: function init() { | |
| 19972 | var app = this; | |
| 19973 | app.input.init(); | |
| 19974 | }, | |
| 19975 | tabMounted: function tabMounted(tabEl) { | |
| 19976 | var app = this; | |
| 19977 | var $tabEl = $(tabEl); | |
| 19978 | $tabEl.find('.item-input, .input').each(function (itemInputIndex, itemInputEl) { | |
| 19979 | var $itemInputEl = $(itemInputEl); | |
| 19980 | $itemInputEl.find('input, select, textarea').each(function (inputIndex, inputEl) { | |
| 19981 | var $inputEl = $(inputEl); | |
| 19982 | if (Input.ignoreTypes.indexOf($inputEl.attr('type')) >= 0) { return; } | |
| 19983 | app.input.checkEmptyState($inputEl); | |
| 19984 | }); | |
| 19985 | }); | |
| 19986 | $tabEl.find('textarea.resizable').each(function (textareaIndex, textareaEl) { | |
| 19987 | app.input.resizeTextarea(textareaEl); | |
| 19988 | }); | |
| 19989 | }, | |
| 19990 | pageInit: function pageInit(page) { | |
| 19991 | var app = this; | |
| 19992 | var $pageEl = page.$el; | |
| 19993 | $pageEl.find('.item-input, .input').each(function (itemInputIndex, itemInputEl) { | |
| 19994 | var $itemInputEl = $(itemInputEl); | |
| 19995 | $itemInputEl.find('input, select, textarea').each(function (inputIndex, inputEl) { | |
| 19996 | var $inputEl = $(inputEl); | |
| 19997 | if (Input.ignoreTypes.indexOf($inputEl.attr('type')) >= 0) { return; } | |
| 19998 | app.input.checkEmptyState($inputEl); | |
| 19999 | }); | |
| 20000 | }); | |
| 20001 | $pageEl.find('textarea.resizable').each(function (textareaIndex, textareaEl) { | |
| 20002 | app.input.resizeTextarea(textareaEl); | |
| 20003 | }); | |
| 20004 | }, | |
| 20005 | }, | |
| 20006 | }; | |
| 20007 | ||
| 20008 | var Checkbox = { | |
| 20009 | name: 'checkbox', | |
| 20010 | }; | |
| 20011 | ||
| 20012 | var Radio = { | |
| 20013 | name: 'radio', | |
| 20014 | }; | |
| 20015 | ||
| 5d51ea26 | 20016 | var Toggle = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
20017 | function Toggle(app, params) { |
| 20018 | if ( params === void 0 ) params = {}; | |
| 20019 | ||
| 5d51ea26 | 20020 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
20021 | var toggle = this; |
| 20022 | ||
| 20023 | var defaults = {}; | |
| 20024 | ||
| 20025 | // Extend defaults with modules params | |
| 20026 | toggle.useModulesParams(defaults); | |
| 20027 | ||
| 20028 | toggle.params = Utils.extend(defaults, params); | |
| 20029 | ||
| 20030 | var el = toggle.params.el; | |
| 20031 | if (!el) { return toggle; } | |
| 20032 | ||
| 20033 | var $el = $(el); | |
| 20034 | if ($el.length === 0) { return toggle; } | |
| 20035 | ||
| 20036 | if ($el[0].f7Toggle) { return $el[0].f7Toggle; } | |
| 20037 | ||
| 20038 | var $inputEl = $el.children('input[type="checkbox"]'); | |
| 20039 | ||
| 20040 | Utils.extend(toggle, { | |
| 20041 | app: app, | |
| 20042 | $el: $el, | |
| 20043 | el: $el[0], | |
| 20044 | $inputEl: $inputEl, | |
| 20045 | inputEl: $inputEl[0], | |
| 20046 | disabled: $el.hasClass('disabled') || $inputEl.hasClass('disabled') || $inputEl.attr('disabled') || $inputEl[0].disabled, | |
| 20047 | }); | |
| 20048 | ||
| 20049 | Object.defineProperty(toggle, 'checked', { | |
| 20050 | enumerable: true, | |
| 20051 | configurable: true, | |
| 20052 | set: function set(checked) { | |
| 20053 | if (!toggle || typeof toggle.$inputEl === 'undefined') { return; } | |
| 20054 | if (toggle.checked === checked) { return; } | |
| 20055 | $inputEl[0].checked = checked; | |
| 20056 | toggle.$inputEl.trigger('change'); | |
| 20057 | }, | |
| 20058 | get: function get() { | |
| 20059 | return $inputEl[0].checked; | |
| 20060 | }, | |
| 20061 | }); | |
| 20062 | ||
| 20063 | $el[0].f7Toggle = toggle; | |
| 20064 | ||
| 20065 | var isTouched; | |
| 20066 | var touchesStart = {}; | |
| 20067 | var isScrolling; | |
| 20068 | var touchesDiff; | |
| 20069 | var toggleWidth; | |
| 20070 | var touchStartTime; | |
| 20071 | var touchStartChecked; | |
| 20072 | function handleTouchStart(e) { | |
| 20073 | if (isTouched || toggle.disabled) { return; } | |
| 20074 | touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 20075 | touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 20076 | touchesDiff = 0; | |
| 20077 | ||
| 20078 | isTouched = true; | |
| 20079 | isScrolling = undefined; | |
| 20080 | touchStartTime = Utils.now(); | |
| 20081 | touchStartChecked = toggle.checked; | |
| 20082 | ||
| 20083 | toggleWidth = $el[0].offsetWidth; | |
| 20084 | Utils.nextTick(function () { | |
| 20085 | if (isTouched) { | |
| 20086 | $el.addClass('toggle-active-state'); | |
| 20087 | } | |
| 20088 | }); | |
| 20089 | } | |
| 20090 | function handleTouchMove(e) { | |
| 20091 | if (!isTouched || toggle.disabled) { return; } | |
| 20092 | var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 20093 | var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 20094 | var inverter = app.rtl ? -1 : 1; | |
| 20095 | ||
| 20096 | if (typeof isScrolling === 'undefined') { | |
| 20097 | isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x)); | |
| 20098 | } | |
| 20099 | if (isScrolling) { | |
| 20100 | isTouched = false; | |
| 20101 | return; | |
| 20102 | } | |
| 20103 | e.preventDefault(); | |
| 20104 | ||
| 20105 | touchesDiff = pageX - touchesStart.x; | |
| 20106 | ||
| 20107 | ||
| 20108 | var changed; | |
| 20109 | if (touchesDiff * inverter < 0 && Math.abs(touchesDiff) > toggleWidth / 3 && touchStartChecked) { | |
| 20110 | changed = true; | |
| 20111 | } | |
| 20112 | if (touchesDiff * inverter > 0 && Math.abs(touchesDiff) > toggleWidth / 3 && !touchStartChecked) { | |
| 20113 | changed = true; | |
| 20114 | } | |
| 20115 | if (changed) { | |
| 20116 | touchesStart.x = pageX; | |
| 20117 | toggle.checked = !touchStartChecked; | |
| 20118 | touchStartChecked = !touchStartChecked; | |
| 20119 | } | |
| 20120 | } | |
| 20121 | function handleTouchEnd() { | |
| 20122 | if (!isTouched || toggle.disabled) { | |
| 20123 | if (isScrolling) { $el.removeClass('toggle-active-state'); } | |
| 20124 | isTouched = false; | |
| 20125 | return; | |
| 20126 | } | |
| 20127 | var inverter = app.rtl ? -1 : 1; | |
| 20128 | isTouched = false; | |
| 20129 | ||
| 20130 | $el.removeClass('toggle-active-state'); | |
| 20131 | ||
| 20132 | var changed; | |
| 20133 | if ((Utils.now() - touchStartTime) < 300) { | |
| 20134 | if (touchesDiff * inverter < 0 && touchStartChecked) { | |
| 20135 | changed = true; | |
| 20136 | } | |
| 20137 | if (touchesDiff * inverter > 0 && !touchStartChecked) { | |
| 20138 | changed = true; | |
| 20139 | } | |
| 20140 | if (changed) { | |
| 20141 | toggle.checked = !touchStartChecked; | |
| 20142 | } | |
| 20143 | } | |
| 20144 | } | |
| 20145 | function handleInputChange() { | |
| 20146 | toggle.$el.trigger('toggle:change', toggle); | |
| 20147 | toggle.emit('local::change toggleChange', toggle); | |
| 20148 | } | |
| 20149 | toggle.attachEvents = function attachEvents() { | |
| 5d51ea26 | 20150 | if ( Support.touch) { |
| 5309fbda DC |
20151 | var passive = Support.passiveListener ? { passive: true } : false; |
| 20152 | $el.on(app.touchEvents.start, handleTouchStart, passive); | |
| 20153 | app.on('touchmove', handleTouchMove); | |
| 20154 | app.on('touchend:passive', handleTouchEnd); | |
| 20155 | } | |
| 20156 | toggle.$inputEl.on('change', handleInputChange); | |
| 20157 | }; | |
| 20158 | toggle.detachEvents = function detachEvents() { | |
| 5d51ea26 | 20159 | if ( Support.touch) { |
| 5309fbda DC |
20160 | var passive = Support.passiveListener ? { passive: true } : false; |
| 20161 | $el.off(app.touchEvents.start, handleTouchStart, passive); | |
| 20162 | app.off('touchmove', handleTouchMove); | |
| 20163 | app.off('touchend:passive', handleTouchEnd); | |
| 20164 | } | |
| 20165 | toggle.$inputEl.off('change', handleInputChange); | |
| 20166 | }; | |
| 20167 | ||
| 20168 | // Install Modules | |
| 20169 | toggle.useModules(); | |
| 20170 | ||
| 20171 | // Init | |
| 20172 | toggle.init(); | |
| 20173 | } | |
| 20174 | ||
| 5d51ea26 DC |
20175 | if ( Framework7Class ) Toggle.__proto__ = Framework7Class; |
| 20176 | Toggle.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
20177 | Toggle.prototype.constructor = Toggle; |
| 20178 | ||
| 20179 | Toggle.prototype.toggle = function toggle () { | |
| 20180 | var toggle = this; | |
| 20181 | toggle.checked = !toggle.checked; | |
| 20182 | }; | |
| 20183 | ||
| 20184 | Toggle.prototype.init = function init () { | |
| 20185 | var toggle = this; | |
| 20186 | toggle.attachEvents(); | |
| 20187 | }; | |
| 20188 | ||
| 20189 | Toggle.prototype.destroy = function destroy () { | |
| 20190 | var toggle = this; | |
| 20191 | toggle.$el.trigger('toggle:beforedestroy', toggle); | |
| 20192 | toggle.emit('local::beforeDestroy toggleBeforeDestroy', toggle); | |
| 20193 | delete toggle.$el[0].f7Toggle; | |
| 20194 | toggle.detachEvents(); | |
| 20195 | Utils.deleteProps(toggle); | |
| 20196 | toggle = null; | |
| 20197 | }; | |
| 20198 | ||
| 20199 | return Toggle; | |
| 20200 | }(Framework7Class)); | |
| 20201 | ||
| 20202 | var Toggle$1 = { | |
| 20203 | name: 'toggle', | |
| 20204 | create: function create() { | |
| 20205 | var app = this; | |
| 20206 | app.toggle = ConstructorMethods({ | |
| 20207 | defaultSelector: '.toggle', | |
| 20208 | constructor: Toggle, | |
| 20209 | app: app, | |
| 20210 | domProp: 'f7Toggle', | |
| 20211 | }); | |
| 20212 | }, | |
| 20213 | static: { | |
| 20214 | Toggle: Toggle, | |
| 20215 | }, | |
| 20216 | on: { | |
| 20217 | tabMounted: function tabMounted(tabEl) { | |
| 20218 | var app = this; | |
| 20219 | $(tabEl).find('.toggle-init').each(function (index, toggleEl) { return app.toggle.create({ el: toggleEl }); }); | |
| 20220 | }, | |
| 20221 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 20222 | $(tabEl).find('.toggle-init').each(function (index, toggleEl) { | |
| 20223 | if (toggleEl.f7Toggle) { toggleEl.f7Toggle.destroy(); } | |
| 20224 | }); | |
| 20225 | }, | |
| 20226 | pageInit: function pageInit(page) { | |
| 20227 | var app = this; | |
| 20228 | page.$el.find('.toggle-init').each(function (index, toggleEl) { return app.toggle.create({ el: toggleEl }); }); | |
| 20229 | }, | |
| 20230 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 20231 | page.$el.find('.toggle-init').each(function (index, toggleEl) { | |
| 20232 | if (toggleEl.f7Toggle) { toggleEl.f7Toggle.destroy(); } | |
| 20233 | }); | |
| 20234 | }, | |
| 20235 | }, | |
| 20236 | vnode: { | |
| 20237 | 'toggle-init': { | |
| 20238 | insert: function insert(vnode) { | |
| 20239 | var app = this; | |
| 20240 | var toggleEl = vnode.elm; | |
| 20241 | app.toggle.create({ el: toggleEl }); | |
| 20242 | }, | |
| 20243 | destroy: function destroy(vnode) { | |
| 20244 | var toggleEl = vnode.elm; | |
| 20245 | if (toggleEl.f7Toggle) { toggleEl.f7Toggle.destroy(); } | |
| 20246 | }, | |
| 20247 | }, | |
| 20248 | }, | |
| 20249 | }; | |
| 20250 | ||
| 5d51ea26 | 20251 | var Range = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda | 20252 | function Range(app, params) { |
| 5d51ea26 | 20253 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
20254 | |
| 20255 | var range = this; | |
| 20256 | ||
| 20257 | var defaults = { | |
| 20258 | el: null, | |
| 20259 | inputEl: null, | |
| 20260 | dual: false, | |
| 20261 | step: 1, | |
| 20262 | label: false, | |
| 20263 | min: 0, | |
| 20264 | max: 100, | |
| 20265 | value: 0, | |
| 20266 | draggableBar: true, | |
| 20267 | vertical: false, | |
| 20268 | verticalReversed: false, | |
| 20269 | formatLabel: null, | |
| 20270 | scale: false, | |
| 20271 | scaleSteps: 5, | |
| 20272 | scaleSubSteps: 0, | |
| 20273 | formatScaleLabel: null, | |
| 5d51ea26 | 20274 | limitKnobPosition: app.theme === 'ios', |
| 5309fbda DC |
20275 | }; |
| 20276 | ||
| 20277 | // Extend defaults with modules params | |
| 20278 | range.useModulesParams(defaults); | |
| 20279 | ||
| 20280 | range.params = Utils.extend(defaults, params); | |
| 20281 | ||
| 20282 | var el = range.params.el; | |
| 20283 | if (!el) { return range; } | |
| 20284 | ||
| 20285 | var $el = $(el); | |
| 20286 | if ($el.length === 0) { return range; } | |
| 20287 | ||
| 20288 | if ($el[0].f7Range) { return $el[0].f7Range; } | |
| 20289 | ||
| 20290 | var dataset = $el.dataset(); | |
| 20291 | ||
| 20292 | ('step min max value scaleSteps scaleSubSteps').split(' ').forEach(function (paramName) { | |
| 20293 | if (typeof params[paramName] === 'undefined' && typeof dataset[paramName] !== 'undefined') { | |
| 20294 | range.params[paramName] = parseFloat(dataset[paramName]); | |
| 20295 | } | |
| 20296 | }); | |
| 20297 | ('dual label vertical verticalReversed scale').split(' ').forEach(function (paramName) { | |
| 20298 | if (typeof params[paramName] === 'undefined' && typeof dataset[paramName] !== 'undefined') { | |
| 20299 | range.params[paramName] = dataset[paramName]; | |
| 20300 | } | |
| 20301 | }); | |
| 20302 | ||
| 20303 | if (!range.params.value) { | |
| 20304 | if (typeof dataset.value !== 'undefined') { range.params.value = dataset.value; } | |
| 20305 | if (typeof dataset.valueLeft !== 'undefined' && typeof dataset.valueRight !== 'undefined') { | |
| 20306 | range.params.value = [parseFloat(dataset.valueLeft), parseFloat(dataset.valueRight)]; | |
| 20307 | } | |
| 20308 | } | |
| 20309 | ||
| 20310 | var $inputEl; | |
| 20311 | if (!range.params.dual) { | |
| 20312 | if (range.params.inputEl) { | |
| 20313 | $inputEl = $(range.params.inputEl); | |
| 20314 | } else if ($el.find('input[type="range"]').length) { | |
| 20315 | $inputEl = $el.find('input[type="range"]').eq(0); | |
| 20316 | } | |
| 20317 | } | |
| 20318 | ||
| 20319 | var ref = range.params; | |
| 20320 | var dual = ref.dual; | |
| 20321 | var step = ref.step; | |
| 20322 | var label = ref.label; | |
| 20323 | var min = ref.min; | |
| 20324 | var max = ref.max; | |
| 20325 | var value = ref.value; | |
| 20326 | var vertical = ref.vertical; | |
| 20327 | var verticalReversed = ref.verticalReversed; | |
| 20328 | var scale = ref.scale; | |
| 20329 | var scaleSteps = ref.scaleSteps; | |
| 20330 | var scaleSubSteps = ref.scaleSubSteps; | |
| 5d51ea26 | 20331 | var limitKnobPosition = ref.limitKnobPosition; |
| 5309fbda DC |
20332 | |
| 20333 | Utils.extend(range, { | |
| 20334 | app: app, | |
| 20335 | $el: $el, | |
| 20336 | el: $el[0], | |
| 20337 | $inputEl: $inputEl, | |
| 20338 | inputEl: $inputEl ? $inputEl[0] : undefined, | |
| 20339 | dual: dual, | |
| 20340 | step: step, | |
| 20341 | label: label, | |
| 20342 | min: min, | |
| 20343 | max: max, | |
| 20344 | value: value, | |
| 20345 | previousValue: value, | |
| 20346 | vertical: vertical, | |
| 20347 | verticalReversed: verticalReversed, | |
| 20348 | scale: scale, | |
| 20349 | scaleSteps: scaleSteps, | |
| 20350 | scaleSubSteps: scaleSubSteps, | |
| 5d51ea26 | 20351 | limitKnobPosition: limitKnobPosition, |
| 5309fbda DC |
20352 | }); |
| 20353 | ||
| 20354 | if ($inputEl) { | |
| 20355 | ('step min max').split(' ').forEach(function (paramName) { | |
| 20356 | if (!params[paramName] && $inputEl.attr(paramName)) { | |
| 20357 | range.params[paramName] = parseFloat($inputEl.attr(paramName)); | |
| 20358 | range[paramName] = parseFloat($inputEl.attr(paramName)); | |
| 20359 | } | |
| 20360 | }); | |
| 20361 | if (typeof $inputEl.val() !== 'undefined') { | |
| 20362 | range.params.value = parseFloat($inputEl.val()); | |
| 20363 | range.value = parseFloat($inputEl.val()); | |
| 20364 | } | |
| 20365 | } | |
| 20366 | ||
| 20367 | // Dual | |
| 20368 | if (range.dual) { | |
| 20369 | $el.addClass('range-slider-dual'); | |
| 20370 | } | |
| 20371 | if (range.label) { | |
| 20372 | $el.addClass('range-slider-label'); | |
| 20373 | } | |
| 20374 | ||
| 20375 | // Vertical | |
| 20376 | if (range.vertical) { | |
| 20377 | $el.addClass('range-slider-vertical'); | |
| 20378 | if (range.verticalReversed) { | |
| 20379 | $el.addClass('range-slider-vertical-reversed'); | |
| 20380 | } | |
| 20381 | } else { | |
| 20382 | $el.addClass('range-slider-horizontal'); | |
| 20383 | } | |
| 20384 | ||
| 20385 | // Check for layout | |
| 20386 | var $barEl = $('<div class="range-bar"></div>'); | |
| 20387 | var $barActiveEl = $('<div class="range-bar-active"></div>'); | |
| 20388 | $barEl.append($barActiveEl); | |
| 20389 | ||
| 20390 | // Create Knobs | |
| 20391 | var knobHTML = "\n <div class=\"range-knob-wrap\">\n <div class=\"range-knob\"></div>\n " + (range.label ? '<div class="range-knob-label"></div>' : '') + "\n </div>\n "; | |
| 20392 | var knobs = [$(knobHTML)]; | |
| 20393 | ||
| 20394 | if (range.dual) { | |
| 20395 | knobs.push($(knobHTML)); | |
| 20396 | } | |
| 20397 | ||
| 20398 | $el.append($barEl); | |
| 20399 | knobs.forEach(function ($knobEl) { | |
| 20400 | $el.append($knobEl); | |
| 20401 | }); | |
| 20402 | ||
| 20403 | // Labels | |
| 20404 | var labels = []; | |
| 20405 | if (range.label) { | |
| 20406 | labels.push(knobs[0].find('.range-knob-label')); | |
| 20407 | if (range.dual) { | |
| 20408 | labels.push(knobs[1].find('.range-knob-label')); | |
| 20409 | } | |
| 20410 | } | |
| 20411 | ||
| 20412 | // Scale | |
| 20413 | var $scaleEl; | |
| 20414 | if (range.scale && range.scaleSteps > 1) { | |
| 20415 | $scaleEl = $(("\n <div class=\"range-scale\">\n " + (range.renderScale()) + "\n </div>\n ")); | |
| 20416 | $el.append($scaleEl); | |
| 20417 | } | |
| 20418 | ||
| 20419 | Utils.extend(range, { | |
| 20420 | knobs: knobs, | |
| 20421 | labels: labels, | |
| 20422 | $barEl: $barEl, | |
| 20423 | $barActiveEl: $barActiveEl, | |
| 20424 | $scaleEl: $scaleEl, | |
| 20425 | }); | |
| 20426 | ||
| 20427 | $el[0].f7Range = range; | |
| 20428 | ||
| 20429 | // Touch Events | |
| 20430 | var isTouched; | |
| 20431 | var touchesStart = {}; | |
| 20432 | var isScrolling; | |
| 20433 | var rangeOffset; | |
| 20434 | var rangeOffsetLeft; | |
| 20435 | var rangeOffsetTop; | |
| 20436 | var $touchedKnobEl; | |
| 20437 | var dualValueIndex; | |
| 20438 | var valueChangedByTouch; | |
| 5d51ea26 | 20439 | var targetTouchIdentifier; |
| 5309fbda DC |
20440 | function onTouchChange() { |
| 20441 | valueChangedByTouch = true; | |
| 20442 | } | |
| 20443 | function handleTouchStart(e) { | |
| 20444 | if (isTouched) { return; } | |
| 20445 | if (!range.params.draggableBar) { | |
| 20446 | if ($(e.target).closest('.range-knob').length === 0) { | |
| 20447 | return; | |
| 20448 | } | |
| 20449 | } | |
| 20450 | valueChangedByTouch = false; | |
| 20451 | touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 20452 | touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 5d51ea26 DC |
20453 | if (e.type === 'touchstart') { |
| 20454 | targetTouchIdentifier = e.targetTouches[0].identifier; | |
| 20455 | } | |
| 5309fbda DC |
20456 | |
| 20457 | isTouched = true; | |
| 20458 | isScrolling = undefined; | |
| 20459 | rangeOffset = $el.offset(); | |
| 20460 | rangeOffsetLeft = rangeOffset.left; | |
| 20461 | rangeOffsetTop = rangeOffset.top; | |
| 20462 | ||
| 20463 | var progress; | |
| 20464 | if (range.vertical) { | |
| 20465 | progress = (touchesStart.y - rangeOffsetTop) / range.rangeHeight; | |
| 20466 | if (!range.verticalReversed) { progress = 1 - progress; } | |
| 20467 | } else if (range.app.rtl) { | |
| 20468 | progress = ((rangeOffsetLeft + range.rangeWidth) - touchesStart.x) / range.rangeWidth; | |
| 20469 | } else { | |
| 20470 | progress = (touchesStart.x - rangeOffsetLeft) / range.rangeWidth; | |
| 20471 | } | |
| 20472 | ||
| 20473 | var newValue = (progress * (range.max - range.min)) + range.min; | |
| 20474 | if (range.dual) { | |
| 20475 | if (Math.abs(range.value[0] - newValue) < Math.abs(range.value[1] - newValue)) { | |
| 20476 | dualValueIndex = 0; | |
| 20477 | $touchedKnobEl = range.knobs[0]; | |
| 20478 | newValue = [newValue, range.value[1]]; | |
| 20479 | } else { | |
| 20480 | dualValueIndex = 1; | |
| 20481 | $touchedKnobEl = range.knobs[1]; | |
| 20482 | newValue = [range.value[0], newValue]; | |
| 20483 | } | |
| 20484 | } else { | |
| 20485 | $touchedKnobEl = range.knobs[0]; | |
| 20486 | newValue = (progress * (range.max - range.min)) + range.min; | |
| 20487 | } | |
| 20488 | Utils.nextTick(function () { | |
| 20489 | if (isTouched) { $touchedKnobEl.addClass('range-knob-active-state'); } | |
| 20490 | }, 70); | |
| 20491 | range.on('change', onTouchChange); | |
| 20492 | range.setValue(newValue, true); | |
| 20493 | } | |
| 20494 | function handleTouchMove(e) { | |
| 20495 | if (!isTouched) { return; } | |
| 5d51ea26 DC |
20496 | var pageX; |
| 20497 | var pageY; | |
| 20498 | if (e.type === 'touchmove') { | |
| 20499 | for (var i = 0; i < e.targetTouches.length; i += 1) { | |
| 20500 | if (e.targetTouches[i].identifier === targetTouchIdentifier) { | |
| 20501 | pageX = e.targetTouches[i].pageX; | |
| 20502 | pageY = e.targetTouches[i].pageY; | |
| 20503 | } | |
| 5309fbda | 20504 | } |
| 5d51ea26 DC |
20505 | } else { |
| 20506 | pageX = e.pageX; | |
| 20507 | pageY = e.pageY; | |
| 20508 | } | |
| 20509 | if (typeof pageX === 'undefined' && typeof pageY === 'undefined') { return; } | |
| 20510 | ||
| 20511 | if (typeof isScrolling === 'undefined' && !range.vertical) { | |
| 20512 | isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x)); | |
| 5309fbda DC |
20513 | } |
| 20514 | if (isScrolling) { | |
| 20515 | isTouched = false; | |
| 20516 | return; | |
| 20517 | } | |
| 20518 | e.preventDefault(); | |
| 20519 | ||
| 20520 | var progress; | |
| 20521 | if (range.vertical) { | |
| 20522 | progress = (pageY - rangeOffsetTop) / range.rangeHeight; | |
| 20523 | if (!range.verticalReversed) { progress = 1 - progress; } | |
| 20524 | } else if (range.app.rtl) { | |
| 20525 | progress = ((rangeOffsetLeft + range.rangeWidth) - pageX) / range.rangeWidth; | |
| 20526 | } else { | |
| 20527 | progress = (pageX - rangeOffsetLeft) / range.rangeWidth; | |
| 20528 | } | |
| 20529 | ||
| 20530 | var newValue = (progress * (range.max - range.min)) + range.min; | |
| 20531 | if (range.dual) { | |
| 20532 | var leftValue; | |
| 20533 | var rightValue; | |
| 20534 | if (dualValueIndex === 0) { | |
| 20535 | leftValue = newValue; | |
| 20536 | rightValue = range.value[1]; | |
| 20537 | if (leftValue > rightValue) { | |
| 20538 | rightValue = leftValue; | |
| 20539 | } | |
| 20540 | } else { | |
| 20541 | leftValue = range.value[0]; | |
| 20542 | rightValue = newValue; | |
| 20543 | if (rightValue < leftValue) { | |
| 20544 | leftValue = rightValue; | |
| 20545 | } | |
| 20546 | } | |
| 20547 | newValue = [leftValue, rightValue]; | |
| 20548 | } | |
| 20549 | range.setValue(newValue, true); | |
| 20550 | } | |
| 5d51ea26 DC |
20551 | function handleTouchEnd(e) { |
| 20552 | if (e.type === 'touchend') { | |
| 20553 | var touchEnded; | |
| 20554 | for (var i = 0; i < e.changedTouches.length; i += 1) { | |
| 20555 | if (e.changedTouches[i].identifier === targetTouchIdentifier) { touchEnded = true; } | |
| 20556 | } | |
| 20557 | if (!touchEnded) { return; } | |
| 20558 | } | |
| 5309fbda DC |
20559 | if (!isTouched) { |
| 20560 | if (isScrolling) { $touchedKnobEl.removeClass('range-knob-active-state'); } | |
| 20561 | isTouched = false; | |
| 20562 | return; | |
| 20563 | } | |
| 20564 | range.off('change', onTouchChange); | |
| 20565 | isTouched = false; | |
| 20566 | $touchedKnobEl.removeClass('range-knob-active-state'); | |
| 20567 | if (valueChangedByTouch && range.$inputEl && !range.dual) { | |
| 20568 | range.$inputEl.trigger('change'); | |
| 20569 | } | |
| 20570 | valueChangedByTouch = false; | |
| 20571 | if (typeof range.previousValue !== 'undefined') { | |
| 20572 | if ( | |
| 20573 | ( | |
| 20574 | range.dual | |
| 20575 | && ( | |
| 20576 | range.previousValue[0] !== range.value[0] | |
| 20577 | || range.previousValue[1] !== range.value[1] | |
| 20578 | ) | |
| 20579 | ) | |
| 20580 | || ( | |
| 20581 | !range.dual | |
| 20582 | && range.previousValue !== range.value | |
| 20583 | ) | |
| 20584 | ) { | |
| 20585 | range.$el.trigger('range:changed', range, range.value); | |
| 20586 | range.emit('local::changed rangeChanged', range, range.value); | |
| 20587 | } | |
| 20588 | } | |
| 20589 | } | |
| 20590 | ||
| 20591 | function handleResize() { | |
| 20592 | range.calcSize(); | |
| 20593 | range.layout(); | |
| 20594 | } | |
| 20595 | var parentModals; | |
| 20596 | var parentPanel; | |
| 20597 | var parentPage; | |
| 20598 | range.attachEvents = function attachEvents() { | |
| 20599 | var passive = Support.passiveListener ? { passive: true } : false; | |
| 20600 | range.$el.on(app.touchEvents.start, handleTouchStart, passive); | |
| 20601 | app.on('touchmove', handleTouchMove); | |
| 20602 | app.on('touchend:passive', handleTouchEnd); | |
| 20603 | app.on('tabShow', handleResize); | |
| 20604 | app.on('resize', handleResize); | |
| 20605 | parentModals = range.$el.parents('.sheet-modal, .actions-modal, .popup, .popover, .login-screen, .dialog, .toast'); | |
| 20606 | parentModals.on('modal:open', handleResize); | |
| 20607 | parentPanel = range.$el.parents('.panel'); | |
| 20608 | parentPanel.on('panel:open', handleResize); | |
| 20609 | parentPage = range.$el.parents('.page').eq(0); | |
| 20610 | parentPage.on('page:reinit', handleResize); | |
| 20611 | }; | |
| 20612 | range.detachEvents = function detachEvents() { | |
| 20613 | var passive = Support.passiveListener ? { passive: true } : false; | |
| 20614 | range.$el.off(app.touchEvents.start, handleTouchStart, passive); | |
| 20615 | app.off('touchmove', handleTouchMove); | |
| 20616 | app.off('touchend:passive', handleTouchEnd); | |
| 20617 | app.off('tabShow', handleResize); | |
| 20618 | app.off('resize', handleResize); | |
| 20619 | if (parentModals) { | |
| 20620 | parentModals.off('modal:open', handleResize); | |
| 20621 | } | |
| 20622 | if (parentPanel) { | |
| 20623 | parentPanel.off('panel:open', handleResize); | |
| 20624 | } | |
| 20625 | if (parentPage) { | |
| 20626 | parentPage.off('page:reinit', handleResize); | |
| 20627 | } | |
| 20628 | parentModals = null; | |
| 20629 | parentPanel = null; | |
| 20630 | parentPage = null; | |
| 20631 | }; | |
| 20632 | ||
| 20633 | // Install Modules | |
| 20634 | range.useModules(); | |
| 20635 | ||
| 20636 | // Init | |
| 20637 | range.init(); | |
| 20638 | ||
| 20639 | return range; | |
| 20640 | } | |
| 20641 | ||
| 5d51ea26 DC |
20642 | if ( Framework7Class ) Range.__proto__ = Framework7Class; |
| 20643 | Range.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
20644 | Range.prototype.constructor = Range; |
| 20645 | ||
| 20646 | Range.prototype.calcSize = function calcSize () { | |
| 20647 | var range = this; | |
| 20648 | if (range.vertical) { | |
| 20649 | var height = range.$el.outerHeight(); | |
| 20650 | if (height === 0) { return; } | |
| 20651 | range.rangeHeight = height; | |
| 20652 | range.knobHeight = range.knobs[0].outerHeight(); | |
| 20653 | } else { | |
| 20654 | var width = range.$el.outerWidth(); | |
| 20655 | if (width === 0) { return; } | |
| 20656 | range.rangeWidth = width; | |
| 20657 | range.knobWidth = range.knobs[0].outerWidth(); | |
| 20658 | } | |
| 20659 | }; | |
| 20660 | ||
| 20661 | Range.prototype.layout = function layout () { | |
| 20662 | var obj; | |
| 20663 | ||
| 20664 | var range = this; | |
| 20665 | var app = range.app; | |
| 20666 | var knobWidth = range.knobWidth; | |
| 20667 | var knobHeight = range.knobHeight; | |
| 20668 | var rangeWidth = range.rangeWidth; | |
| 20669 | var rangeHeight = range.rangeHeight; | |
| 20670 | var min = range.min; | |
| 20671 | var max = range.max; | |
| 20672 | var knobs = range.knobs; | |
| 20673 | var $barActiveEl = range.$barActiveEl; | |
| 20674 | var value = range.value; | |
| 20675 | var label = range.label; | |
| 20676 | var labels = range.labels; | |
| 20677 | var vertical = range.vertical; | |
| 20678 | var verticalReversed = range.verticalReversed; | |
| 5d51ea26 | 20679 | var limitKnobPosition = range.limitKnobPosition; |
| 5309fbda DC |
20680 | var knobSize = vertical ? knobHeight : knobWidth; |
| 20681 | var rangeSize = vertical ? rangeHeight : rangeWidth; | |
| 20682 | // eslint-disable-next-line | |
| 20683 | var positionProperty = vertical | |
| 20684 | ? (verticalReversed ? 'top' : 'bottom') | |
| 20685 | : (app.rtl ? 'right' : 'left'); | |
| 20686 | if (range.dual) { | |
| 20687 | var progress = [((value[0] - min) / (max - min)), ((value[1] - min) / (max - min))]; | |
| 20688 | $barActiveEl.css(( obj = {}, obj[positionProperty] = ((progress[0] * 100) + "%"), obj[vertical ? 'height' : 'width'] = (((progress[1] - progress[0]) * 100) + "%"), obj )); | |
| 20689 | knobs.forEach(function ($knobEl, knobIndex) { | |
| 20690 | var startPos = rangeSize * progress[knobIndex]; | |
| 5d51ea26 | 20691 | if (limitKnobPosition) { |
| 5309fbda DC |
20692 | var realStartPos = (rangeSize * progress[knobIndex]) - (knobSize / 2); |
| 20693 | if (realStartPos < 0) { startPos = knobSize / 2; } | |
| 20694 | if ((realStartPos + knobSize) > rangeSize) { startPos = rangeSize - (knobSize / 2); } | |
| 20695 | } | |
| 20696 | $knobEl.css(positionProperty, (startPos + "px")); | |
| 20697 | if (label) { labels[knobIndex].text(range.formatLabel(value[knobIndex], labels[knobIndex][0])); } | |
| 20698 | }); | |
| 20699 | } else { | |
| 20700 | var progress$1 = ((value - min) / (max - min)); | |
| 20701 | $barActiveEl.css(vertical ? 'height' : 'width', ((progress$1 * 100) + "%")); | |
| 20702 | ||
| 20703 | var startPos = rangeSize * progress$1; | |
| 5d51ea26 | 20704 | if (limitKnobPosition) { |
| 5309fbda DC |
20705 | var realStartPos = (rangeSize * progress$1) - (knobSize / 2); |
| 20706 | if (realStartPos < 0) { startPos = knobSize / 2; } | |
| 20707 | if ((realStartPos + knobSize) > rangeSize) { startPos = rangeSize - (knobSize / 2); } | |
| 20708 | } | |
| 20709 | knobs[0].css(positionProperty, (startPos + "px")); | |
| 20710 | if (label) { labels[0].text(range.formatLabel(value, labels[0][0])); } | |
| 20711 | } | |
| 20712 | if ((range.dual && value.indexOf(min) >= 0) || (!range.dual && value === min)) { | |
| 20713 | range.$el.addClass('range-slider-min'); | |
| 20714 | } else { | |
| 20715 | range.$el.removeClass('range-slider-min'); | |
| 20716 | } | |
| 20717 | if ((range.dual && value.indexOf(max) >= 0) || (!range.dual && value === max)) { | |
| 20718 | range.$el.addClass('range-slider-max'); | |
| 20719 | } else { | |
| 20720 | range.$el.removeClass('range-slider-max'); | |
| 20721 | } | |
| 20722 | }; | |
| 20723 | ||
| 20724 | Range.prototype.setValue = function setValue (newValue, byTouchMove) { | |
| 20725 | var range = this; | |
| 20726 | var step = range.step; | |
| 20727 | var min = range.min; | |
| 20728 | var max = range.max; | |
| 20729 | var valueChanged; | |
| 20730 | var oldValue; | |
| 20731 | if (range.dual) { | |
| 20732 | oldValue = [range.value[0], range.value[1]]; | |
| 20733 | var newValues = newValue; | |
| 20734 | if (!Array.isArray(newValues)) { newValues = [newValue, newValue]; } | |
| 20735 | if (newValue[0] > newValue[1]) { | |
| 20736 | newValues = [newValues[0], newValues[0]]; | |
| 20737 | } | |
| 20738 | newValues = newValues.map(function (value) { return Math.max(Math.min(Math.round(value / step) * step, max), min); }); | |
| 20739 | if (newValues[0] === range.value[0] && newValues[1] === range.value[1]) { | |
| 20740 | return range; | |
| 20741 | } | |
| 20742 | newValues.forEach(function (value, valueIndex) { | |
| 20743 | range.value[valueIndex] = value; | |
| 20744 | }); | |
| 20745 | valueChanged = oldValue[0] !== newValues[0] || oldValue[1] !== newValues[1]; | |
| 20746 | range.layout(); | |
| 20747 | } else { | |
| 20748 | oldValue = range.value; | |
| 20749 | var value = Math.max(Math.min(Math.round(newValue / step) * step, max), min); | |
| 20750 | range.value = value; | |
| 20751 | range.layout(); | |
| 20752 | valueChanged = oldValue !== value; | |
| 20753 | } | |
| 20754 | ||
| 20755 | if (valueChanged) { | |
| 20756 | range.previousValue = oldValue; | |
| 20757 | } | |
| 20758 | // Events | |
| 20759 | if (!valueChanged) { return range; } | |
| 20760 | range.$el.trigger('range:change', range, range.value); | |
| 20761 | if (range.$inputEl && !range.dual) { | |
| 20762 | range.$inputEl.val(range.value); | |
| 20763 | if (!byTouchMove) { | |
| 20764 | range.$inputEl.trigger('input change'); | |
| 20765 | } else { | |
| 20766 | range.$inputEl.trigger('input'); | |
| 20767 | } | |
| 20768 | } | |
| 20769 | if (!byTouchMove) { | |
| 20770 | range.$el.trigger('range:changed', range, range.value); | |
| 20771 | range.emit('local::changed rangeChanged', range, range.value); | |
| 20772 | } | |
| 20773 | range.emit('local::change rangeChange', range, range.value); | |
| 20774 | return range; | |
| 20775 | }; | |
| 20776 | ||
| 20777 | Range.prototype.getValue = function getValue () { | |
| 20778 | return this.value; | |
| 20779 | }; | |
| 20780 | ||
| 20781 | Range.prototype.formatLabel = function formatLabel (value, labelEl) { | |
| 20782 | var range = this; | |
| 20783 | if (range.params.formatLabel) { return range.params.formatLabel.call(range, value, labelEl); } | |
| 20784 | return value; | |
| 20785 | }; | |
| 20786 | ||
| 20787 | Range.prototype.formatScaleLabel = function formatScaleLabel (value) { | |
| 20788 | var range = this; | |
| 20789 | if (range.params.formatScaleLabel) { return range.params.formatScaleLabel.call(range, value); } | |
| 20790 | return value; | |
| 20791 | }; | |
| 20792 | ||
| 20793 | Range.prototype.renderScale = function renderScale () { | |
| 20794 | var range = this; | |
| 20795 | var app = range.app; | |
| 20796 | var verticalReversed = range.verticalReversed; | |
| 20797 | var vertical = range.vertical; | |
| 20798 | ||
| 20799 | // eslint-disable-next-line | |
| 20800 | var positionProperty = vertical | |
| 20801 | ? (verticalReversed ? 'top' : 'bottom') | |
| 20802 | : (app.rtl ? 'right' : 'left'); | |
| 20803 | ||
| 20804 | var html = ''; | |
| 20805 | ||
| 20806 | Array | |
| 20807 | .from({ length: range.scaleSteps + 1 }) | |
| 20808 | .forEach(function (scaleEl, index) { | |
| 20809 | var scaleStepValue = (range.max - range.min) / range.scaleSteps; | |
| 20810 | var scaleValue = range.min + scaleStepValue * index; | |
| 20811 | var progress = ((scaleValue - range.min) / (range.max - range.min)); | |
| 20812 | html += "<div class=\"range-scale-step\" style=\"" + positionProperty + ": " + (progress * 100) + "%\">" + (range.formatScaleLabel(scaleValue)) + "</div>"; | |
| 20813 | ||
| 20814 | if (range.scaleSubSteps && range.scaleSubSteps > 1 && index < range.scaleSteps) { | |
| 20815 | Array | |
| 20816 | .from({ length: range.scaleSubSteps - 1 }) | |
| 20817 | .forEach(function (subStepEl, subIndex) { | |
| 20818 | var subStep = scaleStepValue / range.scaleSubSteps; | |
| 20819 | var scaleSubValue = scaleValue + subStep * (subIndex + 1); | |
| 20820 | var subProgress = ((scaleSubValue - range.min) / (range.max - range.min)); | |
| 20821 | html += "<div class=\"range-scale-step range-scale-substep\" style=\"" + positionProperty + ": " + (subProgress * 100) + "%\"></div>"; | |
| 20822 | }); | |
| 20823 | } | |
| 20824 | }); | |
| 20825 | ||
| 20826 | return html; | |
| 20827 | }; | |
| 20828 | ||
| 20829 | Range.prototype.updateScale = function updateScale () { | |
| 20830 | var range = this; | |
| 20831 | if (!range.scale || range.scaleSteps < 2) { | |
| 20832 | if (range.$scaleEl) { range.$scaleEl.remove(); } | |
| 20833 | delete range.$scaleEl; | |
| 20834 | return; | |
| 20835 | } | |
| 20836 | if (!range.$scaleEl) { | |
| 20837 | range.$scaleEl = $('<div class="range-scale"></div>'); | |
| 20838 | range.$el.append(range.$scaleEl); | |
| 20839 | } | |
| 20840 | ||
| 20841 | range.$scaleEl.html(range.renderScale()); | |
| 20842 | }; | |
| 20843 | ||
| 20844 | Range.prototype.init = function init () { | |
| 20845 | var range = this; | |
| 20846 | range.calcSize(); | |
| 20847 | range.layout(); | |
| 20848 | range.attachEvents(); | |
| 20849 | return range; | |
| 20850 | }; | |
| 20851 | ||
| 20852 | Range.prototype.destroy = function destroy () { | |
| 20853 | var range = this; | |
| 20854 | range.$el.trigger('range:beforedestroy', range); | |
| 20855 | range.emit('local::beforeDestroy rangeBeforeDestroy', range); | |
| 20856 | delete range.$el[0].f7Range; | |
| 20857 | range.detachEvents(); | |
| 20858 | Utils.deleteProps(range); | |
| 20859 | range = null; | |
| 20860 | }; | |
| 20861 | ||
| 20862 | return Range; | |
| 20863 | }(Framework7Class)); | |
| 20864 | ||
| 20865 | var Range$1 = { | |
| 20866 | name: 'range', | |
| 20867 | create: function create() { | |
| 20868 | var app = this; | |
| 20869 | app.range = Utils.extend( | |
| 20870 | ConstructorMethods({ | |
| 20871 | defaultSelector: '.range-slider', | |
| 20872 | constructor: Range, | |
| 20873 | app: app, | |
| 20874 | domProp: 'f7Range', | |
| 20875 | }), | |
| 20876 | { | |
| 20877 | getValue: function getValue(el) { | |
| 20878 | if ( el === void 0 ) el = '.range-slider'; | |
| 20879 | ||
| 20880 | var range = app.range.get(el); | |
| 20881 | if (range) { return range.getValue(); } | |
| 20882 | return undefined; | |
| 20883 | }, | |
| 20884 | setValue: function setValue(el, value) { | |
| 20885 | if ( el === void 0 ) el = '.range-slider'; | |
| 20886 | ||
| 20887 | var range = app.range.get(el); | |
| 20888 | if (range) { return range.setValue(value); } | |
| 20889 | return undefined; | |
| 20890 | }, | |
| 20891 | } | |
| 20892 | ); | |
| 20893 | }, | |
| 20894 | static: { | |
| 20895 | Range: Range, | |
| 20896 | }, | |
| 20897 | on: { | |
| 20898 | tabMounted: function tabMounted(tabEl) { | |
| 20899 | var app = this; | |
| 20900 | $(tabEl).find('.range-slider-init').each(function (index, rangeEl) { return new Range(app, { | |
| 20901 | el: rangeEl, | |
| 20902 | }); }); | |
| 20903 | }, | |
| 20904 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 20905 | $(tabEl).find('.range-slider-init').each(function (index, rangeEl) { | |
| 20906 | if (rangeEl.f7Range) { rangeEl.f7Range.destroy(); } | |
| 20907 | }); | |
| 20908 | }, | |
| 20909 | pageInit: function pageInit(page) { | |
| 20910 | var app = this; | |
| 20911 | page.$el.find('.range-slider-init').each(function (index, rangeEl) { return new Range(app, { | |
| 20912 | el: rangeEl, | |
| 20913 | }); }); | |
| 20914 | }, | |
| 20915 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 20916 | page.$el.find('.range-slider-init').each(function (index, rangeEl) { | |
| 20917 | if (rangeEl.f7Range) { rangeEl.f7Range.destroy(); } | |
| 20918 | }); | |
| 20919 | }, | |
| 20920 | }, | |
| 20921 | vnode: { | |
| 20922 | 'range-slider-init': { | |
| 20923 | insert: function insert(vnode) { | |
| 20924 | var rangeEl = vnode.elm; | |
| 20925 | var app = this; | |
| 20926 | app.range.create({ el: rangeEl }); | |
| 20927 | }, | |
| 20928 | destroy: function destroy(vnode) { | |
| 20929 | var rangeEl = vnode.elm; | |
| 20930 | if (rangeEl.f7Range) { rangeEl.f7Range.destroy(); } | |
| 20931 | }, | |
| 20932 | }, | |
| 20933 | }, | |
| 20934 | }; | |
| 20935 | ||
| 5d51ea26 | 20936 | var Stepper = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda | 20937 | function Stepper(app, params) { |
| 5d51ea26 | 20938 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
20939 | var stepper = this; |
| 20940 | ||
| 20941 | var defaults = { | |
| 20942 | el: null, | |
| 20943 | inputEl: null, | |
| 20944 | valueEl: null, | |
| 20945 | value: 0, | |
| 20946 | formatValue: null, | |
| 20947 | step: 1, | |
| 20948 | min: 0, | |
| 20949 | max: 100, | |
| 20950 | watchInput: true, | |
| 20951 | autorepeat: false, | |
| 20952 | autorepeatDynamic: false, | |
| 20953 | wraps: false, | |
| 20954 | manualInputMode: false, | |
| 20955 | decimalPoint: 4, | |
| 20956 | buttonsEndInputMode: true, | |
| 20957 | }; | |
| 20958 | ||
| 20959 | // Extend defaults with modules params | |
| 20960 | stepper.useModulesParams(defaults); | |
| 20961 | ||
| 20962 | stepper.params = Utils.extend(defaults, params); | |
| 20963 | if (stepper.params.value < stepper.params.min) { | |
| 20964 | stepper.params.value = stepper.params.min; | |
| 20965 | } | |
| 20966 | if (stepper.params.value > stepper.params.max) { | |
| 20967 | stepper.params.value = stepper.params.max; | |
| 20968 | } | |
| 20969 | ||
| 20970 | var el = stepper.params.el; | |
| 20971 | if (!el) { return stepper; } | |
| 20972 | ||
| 20973 | var $el = $(el); | |
| 20974 | if ($el.length === 0) { return stepper; } | |
| 20975 | ||
| 20976 | if ($el[0].f7Stepper) { return $el[0].f7Stepper; } | |
| 20977 | ||
| 20978 | var $inputEl; | |
| 20979 | if (stepper.params.inputEl) { | |
| 20980 | $inputEl = $(stepper.params.inputEl); | |
| 20981 | } else if ($el.find('.stepper-input-wrap').find('input, textarea').length) { | |
| 20982 | $inputEl = $el.find('.stepper-input-wrap').find('input, textarea').eq(0); | |
| 20983 | } | |
| 20984 | ||
| 20985 | if ($inputEl && $inputEl.length) { | |
| 20986 | ('step min max').split(' ').forEach(function (paramName) { | |
| 20987 | if (!params[paramName] && $inputEl.attr(paramName)) { | |
| 20988 | stepper.params[paramName] = parseFloat($inputEl.attr(paramName)); | |
| 20989 | } | |
| 20990 | }); | |
| 20991 | ||
| 20992 | var decimalPoint$1 = parseInt(stepper.params.decimalPoint, 10); | |
| 20993 | if (Number.isNaN(decimalPoint$1)) { | |
| 20994 | stepper.params.decimalPoint = 0; | |
| 20995 | } else { | |
| 20996 | stepper.params.decimalPoint = decimalPoint$1; | |
| 20997 | } | |
| 20998 | ||
| 20999 | var inputValue = parseFloat($inputEl.val()); | |
| 21000 | if (typeof params.value === 'undefined' && !Number.isNaN(inputValue) && (inputValue || inputValue === 0)) { | |
| 21001 | stepper.params.value = inputValue; | |
| 21002 | } | |
| 21003 | } | |
| 21004 | ||
| 21005 | var $valueEl; | |
| 21006 | if (stepper.params.valueEl) { | |
| 21007 | $valueEl = $(stepper.params.valueEl); | |
| 21008 | } else if ($el.find('.stepper-value').length) { | |
| 21009 | $valueEl = $el.find('.stepper-value').eq(0); | |
| 21010 | } | |
| 21011 | ||
| 21012 | var $buttonPlusEl = $el.find('.stepper-button-plus'); | |
| 21013 | var $buttonMinusEl = $el.find('.stepper-button-minus'); | |
| 21014 | ||
| 21015 | var ref = stepper.params; | |
| 21016 | var step = ref.step; | |
| 21017 | var min = ref.min; | |
| 21018 | var max = ref.max; | |
| 21019 | var value = ref.value; | |
| 21020 | var decimalPoint = ref.decimalPoint; | |
| 21021 | ||
| 21022 | Utils.extend(stepper, { | |
| 21023 | app: app, | |
| 21024 | $el: $el, | |
| 21025 | el: $el[0], | |
| 21026 | $buttonPlusEl: $buttonPlusEl, | |
| 21027 | buttonPlusEl: $buttonPlusEl[0], | |
| 21028 | $buttonMinusEl: $buttonMinusEl, | |
| 21029 | buttonMinusEl: $buttonMinusEl[0], | |
| 21030 | $inputEl: $inputEl, | |
| 21031 | inputEl: $inputEl ? $inputEl[0] : undefined, | |
| 21032 | $valueEl: $valueEl, | |
| 21033 | valueEl: $valueEl ? $valueEl[0] : undefined, | |
| 21034 | step: step, | |
| 21035 | min: min, | |
| 21036 | max: max, | |
| 21037 | value: value, | |
| 21038 | decimalPoint: decimalPoint, | |
| 21039 | typeModeChanged: false, | |
| 21040 | }); | |
| 21041 | ||
| 21042 | $el[0].f7Stepper = stepper; | |
| 21043 | ||
| 21044 | // Handle Events | |
| 21045 | var touchesStart = {}; | |
| 21046 | var isTouched; | |
| 21047 | var isScrolling; | |
| 21048 | var preventButtonClick; | |
| 21049 | var intervalId; | |
| 21050 | var timeoutId; | |
| 21051 | var autorepeatAction = null; | |
| 21052 | var autorepeatInAction = false; | |
| 21053 | var manualInput = false; | |
| 21054 | ||
| 21055 | function dynamicRepeat(current, progressions, startsIn, progressionStep, repeatEvery, action) { | |
| 21056 | clearTimeout(timeoutId); | |
| 21057 | timeoutId = setTimeout(function () { | |
| 21058 | if (current === 1) { | |
| 21059 | preventButtonClick = true; | |
| 21060 | autorepeatInAction = true; | |
| 21061 | } | |
| 21062 | clearInterval(intervalId); | |
| 21063 | action(); | |
| 21064 | intervalId = setInterval(function () { | |
| 21065 | action(); | |
| 21066 | }, repeatEvery); | |
| 21067 | if (current < progressions) { | |
| 21068 | dynamicRepeat(current + 1, progressions, startsIn, progressionStep, repeatEvery / 2, action); | |
| 21069 | } | |
| 21070 | }, current === 1 ? startsIn : progressionStep); | |
| 21071 | } | |
| 21072 | ||
| 21073 | function onTouchStart(e) { | |
| 21074 | if (isTouched) { return; } | |
| 21075 | if (manualInput) { return; } | |
| 21076 | if ($(e.target).closest($buttonPlusEl).length) { | |
| 21077 | autorepeatAction = 'increment'; | |
| 21078 | } else if ($(e.target).closest($buttonMinusEl).length) { | |
| 21079 | autorepeatAction = 'decrement'; | |
| 21080 | } | |
| 21081 | if (!autorepeatAction) { return; } | |
| 21082 | ||
| 21083 | touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 21084 | touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 21085 | isTouched = true; | |
| 21086 | isScrolling = undefined; | |
| 21087 | ||
| 21088 | var progressions = stepper.params.autorepeatDynamic ? 4 : 1; | |
| 21089 | dynamicRepeat(1, progressions, 500, 1000, 300, function () { | |
| 21090 | stepper[autorepeatAction](); | |
| 21091 | }); | |
| 21092 | } | |
| 21093 | function onTouchMove(e) { | |
| 21094 | if (!isTouched) { return; } | |
| 21095 | if (manualInput) { return; } | |
| 21096 | var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 21097 | var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 21098 | ||
| 21099 | if (typeof isScrolling === 'undefined' && !autorepeatInAction) { | |
| 21100 | isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x)); | |
| 21101 | } | |
| 21102 | var distance = Math.pow( ((Math.pow( (pageX - touchesStart.x), 2 )) + (Math.pow( (pageY - touchesStart.y), 2 ))), 0.5 ); | |
| 21103 | ||
| 21104 | if (isScrolling || distance > 20) { | |
| 21105 | isTouched = false; | |
| 21106 | clearTimeout(timeoutId); | |
| 21107 | clearInterval(intervalId); | |
| 21108 | } | |
| 21109 | } | |
| 21110 | function onTouchEnd() { | |
| 21111 | clearTimeout(timeoutId); | |
| 21112 | clearInterval(intervalId); | |
| 21113 | autorepeatAction = null; | |
| 21114 | autorepeatInAction = false; | |
| 21115 | isTouched = false; | |
| 21116 | } | |
| 21117 | ||
| 21118 | function onMinusClick() { | |
| 21119 | if (manualInput) { | |
| 21120 | if (stepper.params.buttonsEndInputMode) { | |
| 21121 | manualInput = false; | |
| 21122 | stepper.endTypeMode(true); | |
| 21123 | } | |
| 21124 | return; | |
| 21125 | } | |
| 21126 | if (preventButtonClick) { | |
| 21127 | preventButtonClick = false; | |
| 21128 | return; | |
| 21129 | } | |
| 21130 | stepper.decrement(true); | |
| 21131 | } | |
| 21132 | function onPlusClick() { | |
| 21133 | if (manualInput) { | |
| 21134 | if (stepper.params.buttonsEndInputMode) { | |
| 21135 | manualInput = false; | |
| 21136 | stepper.endTypeMode(true); | |
| 21137 | } | |
| 21138 | return; | |
| 21139 | } | |
| 21140 | if (preventButtonClick) { | |
| 21141 | preventButtonClick = false; | |
| 21142 | return; | |
| 21143 | } | |
| 21144 | stepper.increment(true); | |
| 21145 | } | |
| 21146 | function onInputClick(e) { | |
| 21147 | if (!e.target.readOnly && stepper.params.manualInputMode) { | |
| 21148 | manualInput = true; | |
| 21149 | if (typeof e.target.selectionStart === 'number') { | |
| 21150 | e.target.selectionStart = e.target.value.length; | |
| 21151 | e.target.selectionEnd = e.target.value.length; | |
| 21152 | } | |
| 21153 | } | |
| 21154 | } | |
| 21155 | function onInputKey(e) { | |
| 21156 | if (e.keyCode === 13 || e.which === 13) { | |
| 21157 | e.preventDefault(); | |
| 21158 | manualInput = false; | |
| 21159 | stepper.endTypeMode(); | |
| 21160 | } | |
| 21161 | } | |
| 21162 | function onInputBlur() { | |
| 21163 | manualInput = false; | |
| 21164 | stepper.endTypeMode(true); | |
| 21165 | } | |
| 21166 | function onInput(e) { | |
| 21167 | if (manualInput) { | |
| 21168 | stepper.typeValue(e.target.value); | |
| 21169 | return; | |
| 21170 | } | |
| 21171 | if (e.detail && e.detail.sentByF7Stepper) { return; } | |
| 21172 | stepper.setValue(e.target.value, true); | |
| 21173 | } | |
| 21174 | stepper.attachEvents = function attachEvents() { | |
| 21175 | $buttonMinusEl.on('click', onMinusClick); | |
| 21176 | $buttonPlusEl.on('click', onPlusClick); | |
| 21177 | if (stepper.params.watchInput && $inputEl && $inputEl.length) { | |
| 21178 | $inputEl.on('input', onInput); | |
| 21179 | $inputEl.on('click', onInputClick); | |
| 21180 | $inputEl.on('blur', onInputBlur); | |
| 21181 | $inputEl.on('keyup', onInputKey); | |
| 21182 | } | |
| 21183 | if (stepper.params.autorepeat) { | |
| 21184 | app.on('touchstart:passive', onTouchStart); | |
| 21185 | app.on('touchmove:active', onTouchMove); | |
| 21186 | app.on('touchend:passive', onTouchEnd); | |
| 21187 | } | |
| 21188 | }; | |
| 21189 | stepper.detachEvents = function detachEvents() { | |
| 21190 | $buttonMinusEl.off('click', onMinusClick); | |
| 21191 | $buttonPlusEl.off('click', onPlusClick); | |
| 21192 | if (stepper.params.watchInput && $inputEl && $inputEl.length) { | |
| 21193 | $inputEl.off('input', onInput); | |
| 21194 | $inputEl.off('click', onInputClick); | |
| 21195 | $inputEl.off('blur', onInputBlur); | |
| 21196 | $inputEl.off('keyup', onInputKey); | |
| 21197 | } | |
| 21198 | }; | |
| 21199 | ||
| 21200 | // Install Modules | |
| 21201 | stepper.useModules(); | |
| 21202 | ||
| 21203 | // Init | |
| 21204 | stepper.init(); | |
| 21205 | ||
| 21206 | return stepper; | |
| 21207 | } | |
| 21208 | ||
| 5d51ea26 DC |
21209 | if ( Framework7Class ) Stepper.__proto__ = Framework7Class; |
| 21210 | Stepper.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
21211 | Stepper.prototype.constructor = Stepper; |
| 21212 | ||
| 21213 | Stepper.prototype.minus = function minus () { | |
| 21214 | return this.decrement(); | |
| 21215 | }; | |
| 21216 | ||
| 21217 | Stepper.prototype.plus = function plus () { | |
| 21218 | return this.increment(); | |
| 21219 | }; | |
| 21220 | ||
| 21221 | Stepper.prototype.decrement = function decrement () { | |
| 21222 | var stepper = this; | |
| 21223 | return stepper.setValue(stepper.value - stepper.step, false, true); | |
| 21224 | }; | |
| 21225 | ||
| 21226 | Stepper.prototype.increment = function increment () { | |
| 21227 | var stepper = this; | |
| 21228 | return stepper.setValue(stepper.value + stepper.step, false, true); | |
| 21229 | }; | |
| 21230 | ||
| 21231 | Stepper.prototype.setValue = function setValue (newValue, forceUpdate, withWraps) { | |
| 21232 | var stepper = this; | |
| 21233 | var step = stepper.step; | |
| 21234 | var min = stepper.min; | |
| 21235 | var max = stepper.max; | |
| 21236 | ||
| 21237 | var oldValue = stepper.value; | |
| 21238 | ||
| 21239 | var value = Math.round(newValue / step) * step; | |
| 21240 | if (stepper.params.wraps && withWraps) { | |
| 21241 | if (value > max) { value = min; } | |
| 21242 | if (value < min) { value = max; } | |
| 21243 | } else { | |
| 21244 | value = Math.max(Math.min(value, max), min); | |
| 21245 | } | |
| 21246 | ||
| 21247 | if (Number.isNaN(value)) { | |
| 21248 | value = oldValue; | |
| 21249 | } | |
| 21250 | stepper.value = value; | |
| 21251 | ||
| 21252 | var valueChanged = oldValue !== value; | |
| 21253 | ||
| 21254 | // Events | |
| 21255 | if (!valueChanged && !forceUpdate) { return stepper; } | |
| 21256 | ||
| 21257 | stepper.$el.trigger('stepper:change', stepper, stepper.value); | |
| 21258 | var formattedValue = stepper.formatValue(stepper.value); | |
| 21259 | if (stepper.$inputEl && stepper.$inputEl.length) { | |
| 21260 | stepper.$inputEl.val(formattedValue); | |
| 21261 | stepper.$inputEl.trigger('input change', { sentByF7Stepper: true }); | |
| 21262 | } | |
| 21263 | if (stepper.$valueEl && stepper.$valueEl.length) { | |
| 21264 | stepper.$valueEl.html(formattedValue); | |
| 21265 | } | |
| 21266 | stepper.emit('local::change stepperChange', stepper, stepper.value); | |
| 21267 | return stepper; | |
| 21268 | }; | |
| 21269 | ||
| 21270 | Stepper.prototype.endTypeMode = function endTypeMode (noBlur) { | |
| 21271 | var stepper = this; | |
| 21272 | var min = stepper.min; | |
| 21273 | var max = stepper.max; | |
| 21274 | var value = parseFloat(stepper.value); | |
| 21275 | ||
| 21276 | if (Number.isNaN(value)) { value = 0; } | |
| 21277 | ||
| 21278 | value = Math.max(Math.min(value, max), min); | |
| 21279 | ||
| 21280 | stepper.value = value; | |
| 21281 | if (!stepper.typeModeChanged) { | |
| 21282 | if (stepper.$inputEl && stepper.$inputEl.length && !noBlur) { | |
| 21283 | stepper.$inputEl.blur(); | |
| 21284 | } | |
| 21285 | return stepper; | |
| 21286 | } | |
| 21287 | stepper.typeModeChanged = false; | |
| 21288 | ||
| 21289 | stepper.$el.trigger('stepper:change', stepper, stepper.value); | |
| 21290 | var formattedValue = stepper.formatValue(stepper.value); | |
| 21291 | if (stepper.$inputEl && stepper.$inputEl.length) { | |
| 21292 | stepper.$inputEl.val(formattedValue); | |
| 21293 | stepper.$inputEl.trigger('input change', { sentByF7Stepper: true }); | |
| 21294 | if (!noBlur) { stepper.$inputEl.blur(); } | |
| 21295 | } | |
| 21296 | if (stepper.$valueEl && stepper.$valueEl.length) { | |
| 21297 | stepper.$valueEl.html(formattedValue); | |
| 21298 | } | |
| 21299 | stepper.emit('local::change stepperChange', stepper, stepper.value); | |
| 21300 | return stepper; | |
| 21301 | }; | |
| 21302 | ||
| 21303 | Stepper.prototype.typeValue = function typeValue (value) { | |
| 21304 | var stepper = this; | |
| 21305 | stepper.typeModeChanged = true; | |
| 21306 | var inputTxt = String(value); | |
| 21307 | if (inputTxt.lastIndexOf('.') + 1 === inputTxt.length || inputTxt.lastIndexOf(',') + 1 === inputTxt.length) { | |
| 21308 | if (inputTxt.lastIndexOf('.') !== inputTxt.indexOf('.') || inputTxt.lastIndexOf(',') !== inputTxt.indexOf(',')) { | |
| 21309 | inputTxt = inputTxt.slice(0, -1); | |
| 21310 | stepper.value = inputTxt; | |
| 21311 | stepper.$inputEl.val(stepper.value); | |
| 21312 | return stepper; | |
| 21313 | } | |
| 21314 | } else { | |
| 21315 | var newValue = parseFloat(inputTxt.replace(',', '.')); | |
| 21316 | if (newValue === 0) { | |
| 21317 | stepper.value = inputTxt.replace(',', '.'); | |
| 21318 | stepper.$inputEl.val(stepper.value); | |
| 21319 | return stepper; | |
| 21320 | } | |
| 21321 | if (Number.isNaN(newValue)) { | |
| 21322 | stepper.value = 0; | |
| 21323 | stepper.$inputEl.val(stepper.value); | |
| 21324 | return stepper; | |
| 21325 | } | |
| 21326 | var powVal = Math.pow( 10, stepper.params.decimalPoint ); | |
| 21327 | newValue = (Math.round((newValue) * powVal)).toFixed(stepper.params.decimalPoint + 1) / powVal; | |
| 21328 | stepper.value = parseFloat(String(newValue).replace(',', '.')); | |
| 21329 | stepper.$inputEl.val(stepper.value); | |
| 21330 | return stepper; | |
| 21331 | } | |
| 21332 | stepper.value = inputTxt; | |
| 21333 | stepper.$inputEl.val(inputTxt); | |
| 21334 | return stepper; | |
| 21335 | }; | |
| 21336 | ||
| 21337 | Stepper.prototype.getValue = function getValue () { | |
| 21338 | return this.value; | |
| 21339 | }; | |
| 21340 | ||
| 21341 | Stepper.prototype.formatValue = function formatValue (value) { | |
| 21342 | var stepper = this; | |
| 21343 | if (!stepper.params.formatValue) { return value; } | |
| 21344 | return stepper.params.formatValue.call(stepper, value); | |
| 21345 | }; | |
| 21346 | ||
| 21347 | Stepper.prototype.init = function init () { | |
| 21348 | var stepper = this; | |
| 21349 | stepper.attachEvents(); | |
| 21350 | if (stepper.$valueEl && stepper.$valueEl.length) { | |
| 21351 | var formattedValue = stepper.formatValue(stepper.value); | |
| 21352 | stepper.$valueEl.html(formattedValue); | |
| 21353 | } | |
| 21354 | return stepper; | |
| 21355 | }; | |
| 21356 | ||
| 21357 | Stepper.prototype.destroy = function destroy () { | |
| 21358 | var stepper = this; | |
| 21359 | stepper.$el.trigger('stepper:beforedestroy', stepper); | |
| 21360 | stepper.emit('local::beforeDestroy stepperBeforeDestroy', stepper); | |
| 21361 | delete stepper.$el[0].f7Stepper; | |
| 21362 | stepper.detachEvents(); | |
| 21363 | Utils.deleteProps(stepper); | |
| 21364 | stepper = null; | |
| 21365 | }; | |
| 21366 | ||
| 21367 | return Stepper; | |
| 21368 | }(Framework7Class)); | |
| 21369 | ||
| 21370 | var Stepper$1 = { | |
| 21371 | name: 'stepper', | |
| 21372 | create: function create() { | |
| 21373 | var app = this; | |
| 21374 | app.stepper = Utils.extend( | |
| 21375 | ConstructorMethods({ | |
| 21376 | defaultSelector: '.stepper', | |
| 21377 | constructor: Stepper, | |
| 21378 | app: app, | |
| 21379 | domProp: 'f7Stepper', | |
| 21380 | }), | |
| 21381 | { | |
| 21382 | getValue: function getValue(el) { | |
| 21383 | if ( el === void 0 ) el = '.stepper'; | |
| 21384 | ||
| 21385 | var stepper = app.stepper.get(el); | |
| 21386 | if (stepper) { return stepper.getValue(); } | |
| 21387 | return undefined; | |
| 21388 | }, | |
| 21389 | setValue: function setValue(el, value) { | |
| 21390 | if ( el === void 0 ) el = '.stepper'; | |
| 21391 | ||
| 21392 | var stepper = app.stepper.get(el); | |
| 21393 | if (stepper) { return stepper.setValue(value); } | |
| 21394 | return undefined; | |
| 21395 | }, | |
| 21396 | } | |
| 21397 | ); | |
| 21398 | }, | |
| 21399 | static: { | |
| 21400 | Stepper: Stepper, | |
| 21401 | }, | |
| 21402 | on: { | |
| 21403 | tabMounted: function tabMounted(tabEl) { | |
| 21404 | var app = this; | |
| 21405 | $(tabEl).find('.stepper-init').each(function (index, stepperEl) { | |
| 21406 | var dataset = $(stepperEl).dataset(); | |
| 21407 | app.stepper.create(Utils.extend({ el: stepperEl }, dataset || {})); | |
| 21408 | }); | |
| 21409 | }, | |
| 21410 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 21411 | $(tabEl).find('.stepper-init').each(function (index, stepperEl) { | |
| 21412 | if (stepperEl.f7Stepper) { stepperEl.f7Stepper.destroy(); } | |
| 21413 | }); | |
| 21414 | }, | |
| 21415 | pageInit: function pageInit(page) { | |
| 21416 | var app = this; | |
| 21417 | page.$el.find('.stepper-init').each(function (index, stepperEl) { | |
| 21418 | var dataset = $(stepperEl).dataset(); | |
| 21419 | app.stepper.create(Utils.extend({ el: stepperEl }, dataset || {})); | |
| 21420 | }); | |
| 21421 | }, | |
| 21422 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 21423 | page.$el.find('.stepper-init').each(function (index, stepperEl) { | |
| 21424 | if (stepperEl.f7Stepper) { stepperEl.f7Stepper.destroy(); } | |
| 21425 | }); | |
| 21426 | }, | |
| 21427 | }, | |
| 21428 | vnode: { | |
| 21429 | 'stepper-init': { | |
| 21430 | insert: function insert(vnode) { | |
| 21431 | var app = this; | |
| 21432 | var stepperEl = vnode.elm; | |
| 21433 | var dataset = $(stepperEl).dataset(); | |
| 21434 | app.stepper.create(Utils.extend({ el: stepperEl }, dataset || {})); | |
| 21435 | }, | |
| 21436 | destroy: function destroy(vnode) { | |
| 21437 | var stepperEl = vnode.elm; | |
| 21438 | if (stepperEl.f7Stepper) { stepperEl.f7Stepper.destroy(); } | |
| 21439 | }, | |
| 21440 | }, | |
| 21441 | }, | |
| 21442 | }; | |
| 21443 | ||
| 5d51ea26 | 21444 | var SmartSelect = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
21445 | function SmartSelect(app, params) { |
| 21446 | if ( params === void 0 ) params = {}; | |
| 21447 | ||
| 5d51ea26 | 21448 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
21449 | var ss = this; |
| 21450 | ||
| 21451 | var defaults = Utils.extend({ | |
| 21452 | on: {}, | |
| 21453 | }, app.params.smartSelect); | |
| 21454 | ||
| 5d51ea26 DC |
21455 | if (typeof defaults.searchbarDisableButton === 'undefined') { |
| 21456 | defaults.searchbarDisableButton = app.theme !== 'aurora'; | |
| 21457 | } | |
| 21458 | ||
| 5309fbda DC |
21459 | // Extend defaults with modules params |
| 21460 | ss.useModulesParams(defaults); | |
| 21461 | ||
| 21462 | ss.params = Utils.extend({}, defaults, params); | |
| 21463 | ||
| 21464 | ss.app = app; | |
| 21465 | ||
| 21466 | var $el = $(ss.params.el).eq(0); | |
| 21467 | if ($el.length === 0) { return ss; } | |
| 21468 | ||
| 21469 | if ($el[0].f7SmartSelect) { return $el[0].f7SmartSelect; } | |
| 21470 | ||
| 21471 | var $selectEl = $el.find('select').eq(0); | |
| 21472 | if ($selectEl.length === 0) { return ss; } | |
| 21473 | ||
| 21474 | var $valueEl = $(ss.params.valueEl); | |
| 21475 | if ($valueEl.length === 0) { | |
| 21476 | $valueEl = $el.find('.item-after'); | |
| 21477 | } | |
| 21478 | if ($valueEl.length === 0) { | |
| 21479 | $valueEl = $('<div class="item-after"></div>'); | |
| 21480 | $valueEl.insertAfter($el.find('.item-title')); | |
| 21481 | } | |
| 21482 | ||
| 21483 | // View | |
| 21484 | var view; | |
| 21485 | ||
| 21486 | // Url | |
| 21487 | var url = params.url; | |
| 21488 | if (!url) { | |
| 21489 | if ($el.attr('href') && $el.attr('href') !== '#') { url = $el.attr('href'); } | |
| 21490 | else if ($selectEl.attr('name')) { url = ($selectEl.attr('name').toLowerCase()) + "-select/"; } | |
| 21491 | } | |
| 21492 | if (!url) { url = ss.params.url; } | |
| 21493 | ||
| 21494 | var multiple = $selectEl[0].multiple; | |
| 21495 | var inputType = multiple ? 'checkbox' : 'radio'; | |
| 21496 | var id = Utils.id(); | |
| 21497 | ||
| 21498 | Utils.extend(ss, { | |
| 21499 | $el: $el, | |
| 21500 | el: $el[0], | |
| 21501 | $selectEl: $selectEl, | |
| 21502 | selectEl: $selectEl[0], | |
| 21503 | $valueEl: $valueEl, | |
| 21504 | valueEl: $valueEl[0], | |
| 21505 | url: url, | |
| 21506 | multiple: multiple, | |
| 21507 | inputType: inputType, | |
| 21508 | id: id, | |
| 21509 | view: view, | |
| 21510 | inputName: (inputType + "-" + id), | |
| 21511 | selectName: $selectEl.attr('name'), | |
| 21512 | maxLength: $selectEl.attr('maxlength') || params.maxLength, | |
| 21513 | }); | |
| 21514 | ||
| 21515 | $el[0].f7SmartSelect = ss; | |
| 21516 | ||
| 21517 | // Events | |
| 21518 | function onClick() { | |
| 21519 | ss.open(); | |
| 21520 | } | |
| 21521 | function onChange() { | |
| 21522 | var value = ss.$selectEl.val(); | |
| 21523 | ss.$el.trigger('smartselect:change', ss, value); | |
| 21524 | ss.emit('local::change smartSelectChange', ss, value); | |
| 21525 | ss.setTextValue(); | |
| 21526 | } | |
| 21527 | ss.attachEvents = function attachEvents() { | |
| 21528 | $el.on('click', onClick); | |
| 21529 | $el.on('change', 'select', onChange); | |
| 21530 | }; | |
| 21531 | ss.detachEvents = function detachEvents() { | |
| 21532 | $el.off('click', onClick); | |
| 21533 | $el.off('change', 'select', onChange); | |
| 21534 | }; | |
| 21535 | ||
| 21536 | function handleInputChange() { | |
| 21537 | var optionEl; | |
| 21538 | var text; | |
| 21539 | var inputEl = this; | |
| 21540 | var value = inputEl.value; | |
| 21541 | var optionText = []; | |
| 21542 | var displayAs; | |
| 21543 | if (inputEl.type === 'checkbox') { | |
| 21544 | for (var i = 0; i < ss.selectEl.options.length; i += 1) { | |
| 21545 | optionEl = ss.selectEl.options[i]; | |
| 21546 | if (optionEl.value === value) { | |
| 21547 | optionEl.selected = inputEl.checked; | |
| 21548 | } | |
| 21549 | if (optionEl.selected) { | |
| 21550 | displayAs = optionEl.dataset ? optionEl.dataset.displayAs : $(optionEl).data('display-value-as'); | |
| 21551 | text = displayAs && typeof displayAs !== 'undefined' ? displayAs : optionEl.textContent; | |
| 21552 | optionText.push(text.trim()); | |
| 21553 | } | |
| 21554 | } | |
| 21555 | if (ss.maxLength) { | |
| 21556 | ss.checkMaxLength(); | |
| 21557 | } | |
| 21558 | } else { | |
| 21559 | optionEl = ss.$selectEl.find(("option[value=\"" + value + "\"]"))[0]; | |
| 21560 | displayAs = optionEl.dataset ? optionEl.dataset.displayAs : $(optionEl).data('display-as'); | |
| 21561 | text = displayAs && typeof displayAs !== 'undefined' ? displayAs : optionEl.textContent; | |
| 21562 | optionText = [text]; | |
| 21563 | ss.selectEl.value = value; | |
| 21564 | } | |
| 21565 | ||
| 21566 | ss.$selectEl.trigger('change'); | |
| 21567 | ss.$valueEl.text(optionText.join(', ')); | |
| 21568 | if (ss.params.closeOnSelect && ss.inputType === 'radio') { | |
| 21569 | ss.close(); | |
| 21570 | } | |
| 21571 | } | |
| 21572 | ||
| 21573 | ss.attachInputsEvents = function attachInputsEvents() { | |
| 21574 | ss.$containerEl.on('change', 'input[type="checkbox"], input[type="radio"]', handleInputChange); | |
| 21575 | }; | |
| 21576 | ss.detachInputsEvents = function detachInputsEvents() { | |
| 21577 | ss.$containerEl.off('change', 'input[type="checkbox"], input[type="radio"]', handleInputChange); | |
| 21578 | }; | |
| 21579 | ||
| 21580 | // Install Modules | |
| 21581 | ss.useModules(); | |
| 21582 | ||
| 21583 | // Init | |
| 21584 | ss.init(); | |
| 21585 | ||
| 21586 | return ss; | |
| 21587 | } | |
| 21588 | ||
| 5d51ea26 DC |
21589 | if ( Framework7Class ) SmartSelect.__proto__ = Framework7Class; |
| 21590 | SmartSelect.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
21591 | SmartSelect.prototype.constructor = SmartSelect; |
| 21592 | ||
| 21593 | SmartSelect.prototype.setValue = function setValue (value) { | |
| 21594 | var ss = this; | |
| 21595 | var newValue = value; | |
| 21596 | var optionText = []; | |
| 21597 | var optionEl; | |
| 21598 | var displayAs; | |
| 21599 | var text; | |
| 21600 | if (ss.multiple) { | |
| 21601 | if (!Array.isArray(newValue)) { newValue = [newValue]; } | |
| 21602 | for (var i = 0; i < ss.selectEl.options.length; i += 1) { | |
| 21603 | optionEl = ss.selectEl.options[i]; | |
| 21604 | if (newValue.indexOf(optionEl.value) >= 0) { | |
| 21605 | optionEl.selected = true; | |
| 21606 | } else { | |
| 21607 | optionEl.selected = false; | |
| 21608 | } | |
| 21609 | if (optionEl.selected) { | |
| 21610 | displayAs = optionEl.dataset ? optionEl.dataset.displayAs : $(optionEl).data('display-value-as'); | |
| 21611 | text = displayAs && typeof displayAs !== 'undefined' ? displayAs : optionEl.textContent; | |
| 21612 | optionText.push(text.trim()); | |
| 21613 | } | |
| 21614 | } | |
| 21615 | } else { | |
| 21616 | optionEl = ss.$selectEl.find(("option[value=\"" + newValue + "\"]"))[0]; | |
| 5d51ea26 DC |
21617 | if (optionEl) { |
| 21618 | displayAs = optionEl.dataset ? optionEl.dataset.displayAs : $(optionEl).data('display-as'); | |
| 21619 | text = displayAs && typeof displayAs !== 'undefined' ? displayAs : optionEl.textContent; | |
| 21620 | optionText = [text]; | |
| 21621 | } | |
| 5309fbda DC |
21622 | ss.selectEl.value = newValue; |
| 21623 | } | |
| 21624 | ss.$valueEl.text(optionText.join(', ')); | |
| 5d51ea26 | 21625 | return ss; |
| 5309fbda DC |
21626 | }; |
| 21627 | ||
| 21628 | SmartSelect.prototype.getValue = function getValue () { | |
| 21629 | var ss = this; | |
| 21630 | return ss.$selectEl.val(); | |
| 21631 | }; | |
| 21632 | ||
| 21633 | SmartSelect.prototype.getView = function getView () { | |
| 21634 | var ss = this; | |
| 21635 | var view = ss.view || ss.params.view; | |
| 21636 | if (!view) { | |
| 21637 | view = ss.$el.parents('.view').length && ss.$el.parents('.view')[0].f7View; | |
| 21638 | } | |
| 21639 | if (!view) { | |
| 21640 | throw Error('Smart Select requires initialized View'); | |
| 21641 | } | |
| 21642 | ss.view = view; | |
| 21643 | return view; | |
| 21644 | }; | |
| 21645 | ||
| 21646 | SmartSelect.prototype.checkMaxLength = function checkMaxLength () { | |
| 21647 | var ss = this; | |
| 21648 | var $containerEl = ss.$containerEl; | |
| 21649 | if (ss.selectEl.selectedOptions.length >= ss.maxLength) { | |
| 21650 | $containerEl.find('input[type="checkbox"]').each(function (index, inputEl) { | |
| 21651 | if (!inputEl.checked) { | |
| 21652 | $(inputEl).parents('li').addClass('disabled'); | |
| 21653 | } else { | |
| 21654 | $(inputEl).parents('li').removeClass('disabled'); | |
| 21655 | } | |
| 21656 | }); | |
| 21657 | } else { | |
| 21658 | $containerEl.find('.disabled').removeClass('disabled'); | |
| 21659 | } | |
| 21660 | }; | |
| 21661 | ||
| 21662 | SmartSelect.prototype.setTextValue = function setTextValue (value) { | |
| 21663 | var ss = this; | |
| 21664 | var valueArray = []; | |
| 21665 | if (typeof value !== 'undefined') { | |
| 21666 | if (Array.isArray(value)) { | |
| 21667 | valueArray = value; | |
| 21668 | } else { | |
| 21669 | valueArray = [value]; | |
| 21670 | } | |
| 21671 | } else { | |
| 21672 | ss.$selectEl.find('option').each(function (optionIndex, optionEl) { | |
| 21673 | var $optionEl = $(optionEl); | |
| 21674 | if (optionEl.selected) { | |
| 21675 | var displayAs = optionEl.dataset ? optionEl.dataset.displayAs : $optionEl.data('display-value-as'); | |
| 21676 | if (displayAs && typeof displayAs !== 'undefined') { | |
| 21677 | valueArray.push(displayAs); | |
| 21678 | } else { | |
| 21679 | valueArray.push(optionEl.textContent.trim()); | |
| 21680 | } | |
| 21681 | } | |
| 21682 | }); | |
| 21683 | } | |
| 21684 | ss.$valueEl.text(valueArray.join(', ')); | |
| 21685 | }; | |
| 21686 | ||
| 21687 | SmartSelect.prototype.getItemsData = function getItemsData () { | |
| 21688 | var ss = this; | |
| 21689 | var items = []; | |
| 21690 | var previousGroupEl; | |
| 21691 | ss.$selectEl.find('option').each(function (index, optionEl) { | |
| 21692 | var $optionEl = $(optionEl); | |
| 21693 | var optionData = $optionEl.dataset(); | |
| 21694 | var optionImage = optionData.optionImage || ss.params.optionImage; | |
| 21695 | var optionIcon = optionData.optionIcon || ss.params.optionIcon; | |
| 21696 | var optionHasMedia = optionImage || optionIcon; | |
| 21697 | // if (material) optionHasMedia = optionImage || optionIcon; | |
| 21698 | var optionColor = optionData.optionColor; | |
| 21699 | ||
| 21700 | var optionClassName = optionData.optionClass || ''; | |
| 21701 | if ($optionEl[0].disabled) { optionClassName += ' disabled'; } | |
| 21702 | ||
| 21703 | var optionGroupEl = $optionEl.parent('optgroup')[0]; | |
| 21704 | var optionGroupLabel = optionGroupEl && optionGroupEl.label; | |
| 21705 | var optionIsLabel = false; | |
| 21706 | if (optionGroupEl && optionGroupEl !== previousGroupEl) { | |
| 21707 | optionIsLabel = true; | |
| 21708 | previousGroupEl = optionGroupEl; | |
| 21709 | items.push({ | |
| 21710 | groupLabel: optionGroupLabel, | |
| 21711 | isLabel: optionIsLabel, | |
| 21712 | }); | |
| 21713 | } | |
| 21714 | items.push({ | |
| 21715 | value: $optionEl[0].value, | |
| 21716 | text: $optionEl[0].textContent.trim(), | |
| 21717 | selected: $optionEl[0].selected, | |
| 21718 | groupEl: optionGroupEl, | |
| 21719 | groupLabel: optionGroupLabel, | |
| 21720 | image: optionImage, | |
| 21721 | icon: optionIcon, | |
| 21722 | color: optionColor, | |
| 21723 | className: optionClassName, | |
| 21724 | disabled: $optionEl[0].disabled, | |
| 21725 | id: ss.id, | |
| 21726 | hasMedia: optionHasMedia, | |
| 21727 | checkbox: ss.inputType === 'checkbox', | |
| 21728 | radio: ss.inputType === 'radio', | |
| 21729 | inputName: ss.inputName, | |
| 21730 | inputType: ss.inputType, | |
| 21731 | }); | |
| 21732 | }); | |
| 21733 | ss.items = items; | |
| 21734 | return items; | |
| 21735 | }; | |
| 21736 | ||
| 21737 | SmartSelect.prototype.renderSearchbar = function renderSearchbar () { | |
| 21738 | var ss = this; | |
| 21739 | if (ss.params.renderSearchbar) { return ss.params.renderSearchbar.call(ss); } | |
| 5d51ea26 | 21740 | var searchbarHTML = "\n <form class=\"searchbar\">\n <div class=\"searchbar-inner\">\n <div class=\"searchbar-input-wrap\">\n <input type=\"search\" placeholder=\"" + (ss.params.searchbarPlaceholder) + "\"/>\n <i class=\"searchbar-icon\"></i>\n <span class=\"input-clear-button\"></span>\n </div>\n " + (ss.params.searchbarDisableButton ? ("\n <span class=\"searchbar-disable-button\">" + (ss.params.searchbarDisableText) + "</span>\n ") : '') + "\n </div>\n </form>\n "; |
| 5309fbda DC |
21741 | return searchbarHTML; |
| 21742 | }; | |
| 21743 | ||
| 21744 | SmartSelect.prototype.renderItem = function renderItem (item, index) { | |
| 21745 | var ss = this; | |
| 21746 | if (ss.params.renderItem) { return ss.params.renderItem.call(ss, item, index); } | |
| 21747 | var itemHtml; | |
| 21748 | if (item.isLabel) { | |
| 21749 | itemHtml = "<li class=\"item-divider\">" + (item.groupLabel) + "</li>"; | |
| 21750 | } else { | |
| 21751 | itemHtml = "\n <li class=\"" + (item.className || '') + "\">\n <label class=\"item-" + (item.inputType) + " item-content\">\n <input type=\"" + (item.inputType) + "\" name=\"" + (item.inputName) + "\" value=\"" + (item.value) + "\" " + (item.selected ? 'checked' : '') + "/>\n <i class=\"icon icon-" + (item.inputType) + "\"></i>\n " + (item.hasMedia ? ("\n <div class=\"item-media\">\n " + (item.icon ? ("<i class=\"icon " + (item.icon) + "\"></i>") : '') + "\n " + (item.image ? ("<img src=\"" + (item.image) + "\">") : '') + "\n </div>\n ") : '') + "\n <div class=\"item-inner\">\n <div class=\"item-title" + (item.color ? (" color-" + (item.color)) : '') + "\">" + (item.text) + "</div>\n </div>\n </label>\n </li>\n "; | |
| 21752 | } | |
| 21753 | return itemHtml; | |
| 21754 | }; | |
| 21755 | ||
| 21756 | SmartSelect.prototype.renderItems = function renderItems () { | |
| 21757 | var ss = this; | |
| 21758 | if (ss.params.renderItems) { return ss.params.renderItems.call(ss, ss.items); } | |
| 21759 | var itemsHtml = "\n " + (ss.items.map(function (item, index) { return ("" + (ss.renderItem(item, index))); }).join('')) + "\n "; | |
| 21760 | return itemsHtml; | |
| 21761 | }; | |
| 21762 | ||
| 21763 | SmartSelect.prototype.renderPage = function renderPage () { | |
| 21764 | var ss = this; | |
| 21765 | if (ss.params.renderPage) { return ss.params.renderPage.call(ss, ss.items); } | |
| 21766 | var pageTitle = ss.params.pageTitle; | |
| 21767 | if (typeof pageTitle === 'undefined') { | |
| 21768 | var $itemTitleEl = ss.$el.find('.item-title'); | |
| 21769 | pageTitle = $itemTitleEl.length ? $itemTitleEl.text().trim() : ''; | |
| 21770 | } | |
| 21771 | var cssClass = ss.params.cssClass; | |
| 5d51ea26 | 21772 | var pageHtml = "\n <div class=\"page smart-select-page " + cssClass + "\" data-name=\"smart-select-page\" data-select-name=\"" + (ss.selectName) + "\">\n <div class=\"navbar " + (ss.params.navbarColorTheme ? ("color-" + (ss.params.navbarColorTheme)) : '') + "\">\n <div class=\"navbar-inner sliding " + (ss.params.navbarColorTheme ? ("color-" + (ss.params.navbarColorTheme)) : '') + "\">\n <div class=\"left\">\n <a class=\"link back\">\n <i class=\"icon icon-back\"></i>\n <span class=\"if-not-md\">" + (ss.params.pageBackLinkText) + "</span>\n </a>\n </div>\n " + (pageTitle ? ("<div class=\"title\">" + pageTitle + "</div>") : '') + "\n " + (ss.params.searchbar ? ("<div class=\"subnavbar\">" + (ss.renderSearchbar()) + "</div>") : '') + "\n </div>\n </div>\n " + (ss.params.searchbar ? '<div class="searchbar-backdrop"></div>' : '') + "\n <div class=\"page-content\">\n <div class=\"list smart-select-list-" + (ss.id) + " " + (ss.params.virtualList ? ' virtual-list' : '') + " " + (ss.params.formColorTheme ? ("color-" + (ss.params.formColorTheme)) : '') + "\">\n <ul>" + (!ss.params.virtualList && ss.renderItems(ss.items)) + "</ul>\n </div>\n </div>\n </div>\n "; |
| 5309fbda DC |
21773 | return pageHtml; |
| 21774 | }; | |
| 21775 | ||
| 21776 | SmartSelect.prototype.renderPopup = function renderPopup () { | |
| 21777 | var ss = this; | |
| 21778 | if (ss.params.renderPopup) { return ss.params.renderPopup.call(ss, ss.items); } | |
| 21779 | var pageTitle = ss.params.pageTitle; | |
| 21780 | if (typeof pageTitle === 'undefined') { | |
| 21781 | var $itemTitleEl = ss.$el.find('.item-title'); | |
| 21782 | pageTitle = $itemTitleEl.length ? $itemTitleEl.text().trim() : ''; | |
| 21783 | } | |
| 21784 | var cssClass = ss.params.cssClass || ''; | |
| 5d51ea26 | 21785 | var popupHtml = "\n <div class=\"popup smart-select-popup " + cssClass + " " + (ss.params.popupTabletFullscreen ? 'popup-tablet-fullscreen' : '') + "\" data-select-name=\"" + (ss.selectName) + "\">\n <div class=\"view\">\n <div class=\"page smart-select-page " + (ss.params.searchbar ? 'page-with-subnavbar' : '') + "\" data-name=\"smart-select-page\">\n <div class=\"navbar " + (ss.params.navbarColorTheme ? ("color-" + (ss.params.navbarColorTheme)) : '') + "\">\n <div class=\"navbar-inner sliding\">\n " + (pageTitle ? ("<div class=\"title\">" + pageTitle + "</div>") : '') + "\n <div class=\"right\">\n <a class=\"link popup-close\" data-popup=\".smart-select-popup[data-select-name='" + (ss.selectName) + "']\">" + (ss.params.popupCloseLinkText) + "</span></a>\n </div>\n " + (ss.params.searchbar ? ("<div class=\"subnavbar\">" + (ss.renderSearchbar()) + "</div>") : '') + "\n </div>\n </div>\n " + (ss.params.searchbar ? '<div class="searchbar-backdrop"></div>' : '') + "\n <div class=\"page-content\">\n <div class=\"list smart-select-list-" + (ss.id) + " " + (ss.params.virtualList ? ' virtual-list' : '') + " " + (ss.params.formColorTheme ? ("color-" + (ss.params.formColorTheme)) : '') + "\">\n <ul>" + (!ss.params.virtualList && ss.renderItems(ss.items)) + "</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n "; |
| 5309fbda DC |
21786 | return popupHtml; |
| 21787 | }; | |
| 21788 | ||
| 21789 | SmartSelect.prototype.renderSheet = function renderSheet () { | |
| 21790 | var ss = this; | |
| 21791 | if (ss.params.renderSheet) { return ss.params.renderSheet.call(ss, ss.items); } | |
| 21792 | var cssClass = ss.params.cssClass; | |
| 21793 | var sheetHtml = "\n <div class=\"sheet-modal smart-select-sheet " + cssClass + "\" data-select-name=\"" + (ss.selectName) + "\">\n <div class=\"toolbar toolbar-top " + (ss.params.toolbarColorTheme ? ("color-" + (ss.params.toolbarColorTheme)) : '') + "\">\n <div class=\"toolbar-inner\">\n <div class=\"left\"></div>\n <div class=\"right\">\n <a class=\"link sheet-close\">" + (ss.params.sheetCloseLinkText) + "</a>\n </div>\n </div>\n </div>\n <div class=\"sheet-modal-inner\">\n <div class=\"page-content\">\n <div class=\"list smart-select-list-" + (ss.id) + " " + (ss.params.virtualList ? ' virtual-list' : '') + " " + (ss.params.formColorTheme ? ("color-" + (ss.params.formColorTheme)) : '') + "\">\n <ul>" + (!ss.params.virtualList && ss.renderItems(ss.items)) + "</ul>\n </div>\n </div>\n </div>\n </div>\n "; | |
| 21794 | return sheetHtml; | |
| 21795 | }; | |
| 21796 | ||
| 21797 | SmartSelect.prototype.renderPopover = function renderPopover () { | |
| 21798 | var ss = this; | |
| 21799 | if (ss.params.renderPopover) { return ss.params.renderPopover.call(ss, ss.items); } | |
| 21800 | var cssClass = ss.params.cssClass; | |
| 21801 | var popoverHtml = "\n <div class=\"popover smart-select-popover " + cssClass + "\" data-select-name=\"" + (ss.selectName) + "\">\n <div class=\"popover-inner\">\n <div class=\"list smart-select-list-" + (ss.id) + " " + (ss.params.virtualList ? ' virtual-list' : '') + " " + (ss.params.formColorTheme ? ("color-" + (ss.params.formColorTheme)) : '') + "\">\n <ul>" + (!ss.params.virtualList && ss.renderItems(ss.items)) + "</ul>\n </div>\n </div>\n </div>\n "; | |
| 21802 | return popoverHtml; | |
| 21803 | }; | |
| 21804 | ||
| 5d51ea26 DC |
21805 | SmartSelect.prototype.scrollToSelectedItem = function scrollToSelectedItem () { |
| 21806 | var ss = this; | |
| 21807 | var params = ss.params; | |
| 21808 | var $containerEl = ss.$containerEl; | |
| 21809 | if (!ss.opened) { return ss; } | |
| 21810 | if (params.virtualList) { | |
| 21811 | var selectedIndex; | |
| 21812 | ss.vl.items.forEach(function (item, index) { | |
| 21813 | if (typeof selectedIndex === 'undefined' && item.selected) { | |
| 21814 | selectedIndex = index; | |
| 21815 | } | |
| 21816 | }); | |
| 21817 | if (typeof selectedIndex !== 'undefined') { | |
| 21818 | ss.vl.scrollToItem(selectedIndex); | |
| 21819 | } | |
| 21820 | } else { | |
| 21821 | var $selectedItemEl = $containerEl.find('input:checked').parents('li'); | |
| 21822 | var $pageContentEl = $containerEl.find('.page-content'); | |
| 21823 | $pageContentEl.scrollTop($selectedItemEl.offset().top - $pageContentEl.offset().top - parseInt($pageContentEl.css('padding-top'), 10)); | |
| 21824 | } | |
| 21825 | return ss; | |
| 21826 | }; | |
| 21827 | ||
| 5309fbda DC |
21828 | SmartSelect.prototype.onOpen = function onOpen (type, containerEl) { |
| 21829 | var ss = this; | |
| 21830 | var app = ss.app; | |
| 21831 | var $containerEl = $(containerEl); | |
| 21832 | ss.$containerEl = $containerEl; | |
| 21833 | ss.openedIn = type; | |
| 21834 | ss.opened = true; | |
| 21835 | ||
| 21836 | // Init VL | |
| 21837 | if (ss.params.virtualList) { | |
| 21838 | ss.vl = app.virtualList.create({ | |
| 21839 | el: $containerEl.find('.virtual-list'), | |
| 21840 | items: ss.items, | |
| 21841 | renderItem: ss.renderItem.bind(ss), | |
| 21842 | height: ss.params.virtualListHeight, | |
| 21843 | searchByItem: function searchByItem(query, item) { | |
| 21844 | if (item.text && item.text.toLowerCase().indexOf(query.trim().toLowerCase()) >= 0) { return true; } | |
| 21845 | return false; | |
| 21846 | }, | |
| 21847 | }); | |
| 21848 | } | |
| 5d51ea26 DC |
21849 | if (ss.params.scrollToSelectedItem) { |
| 21850 | ss.scrollToSelectedItem(); | |
| 21851 | } | |
| 5309fbda DC |
21852 | |
| 21853 | // Init SB | |
| 21854 | if (ss.params.searchbar) { | |
| 21855 | var $searchbarEl = $containerEl.find('.searchbar'); | |
| 21856 | if (type === 'page' && app.theme === 'ios') { | |
| 21857 | $searchbarEl = $(app.navbar.getElByPage($containerEl)).find('.searchbar'); | |
| 21858 | } | |
| 21859 | ||
| 21860 | if (ss.params.appendSearchbarNotFound && (type === 'page' || type === 'popup')) { | |
| 21861 | var $notFoundEl = null; | |
| 21862 | ||
| 21863 | if (typeof ss.params.appendSearchbarNotFound === 'string') { | |
| 21864 | $notFoundEl = $(("<div class=\"block searchbar-not-found\">" + (ss.params.appendSearchbarNotFound) + "</div>")); | |
| 21865 | } else if (typeof ss.params.appendSearchbarNotFound === 'boolean') { | |
| 21866 | $notFoundEl = $('<div class="block searchbar-not-found">Nothing found</div>'); | |
| 21867 | } else { | |
| 21868 | $notFoundEl = ss.params.appendSearchbarNotFound; | |
| 21869 | } | |
| 21870 | ||
| 21871 | if ($notFoundEl) { | |
| 21872 | $containerEl.find('.page-content').append($notFoundEl[0]); | |
| 21873 | } | |
| 21874 | } | |
| 21875 | ||
| 21876 | var searchbarParams = Utils.extend({ | |
| 21877 | el: $searchbarEl, | |
| 21878 | backdropEl: $containerEl.find('.searchbar-backdrop'), | |
| 21879 | searchContainer: (".smart-select-list-" + (ss.id)), | |
| 21880 | searchIn: '.item-title', | |
| 21881 | }, typeof ss.params.searchbar === 'object' ? ss.params.searchbar : {}); | |
| 21882 | ||
| 21883 | ss.searchbar = app.searchbar.create(searchbarParams); | |
| 21884 | } | |
| 21885 | ||
| 21886 | // Check for max length | |
| 21887 | if (ss.maxLength) { | |
| 21888 | ss.checkMaxLength(); | |
| 21889 | } | |
| 21890 | ||
| 21891 | // Close on select | |
| 21892 | if (ss.params.closeOnSelect) { | |
| 21893 | ss.$containerEl.find(("input[type=\"radio\"][name=\"" + (ss.inputName) + "\"]:checked")).parents('label').once('click', function () { | |
| 21894 | ss.close(); | |
| 21895 | }); | |
| 21896 | } | |
| 21897 | ||
| 21898 | // Attach input events | |
| 21899 | ss.attachInputsEvents(); | |
| 21900 | ||
| 21901 | ss.$el.trigger('smartselect:open', ss); | |
| 21902 | ss.emit('local::open smartSelectOpen', ss); | |
| 21903 | }; | |
| 21904 | ||
| 21905 | SmartSelect.prototype.onOpened = function onOpened () { | |
| 21906 | var ss = this; | |
| 21907 | ||
| 21908 | ss.$el.trigger('smartselect:opened', ss); | |
| 21909 | ss.emit('local::opened smartSelectOpened', ss); | |
| 21910 | }; | |
| 21911 | ||
| 21912 | SmartSelect.prototype.onClose = function onClose () { | |
| 21913 | var ss = this; | |
| 21914 | if (ss.destroyed) { return; } | |
| 21915 | ||
| 21916 | // Destroy VL | |
| 21917 | if (ss.vl && ss.vl.destroy) { | |
| 21918 | ss.vl.destroy(); | |
| 21919 | ss.vl = null; | |
| 21920 | delete ss.vl; | |
| 21921 | } | |
| 21922 | ||
| 21923 | // Destroy SB | |
| 21924 | if (ss.searchbar && ss.searchbar.destroy) { | |
| 21925 | ss.searchbar.destroy(); | |
| 21926 | ss.searchbar = null; | |
| 21927 | delete ss.searchbar; | |
| 21928 | } | |
| 21929 | // Detach events | |
| 21930 | ss.detachInputsEvents(); | |
| 21931 | ||
| 21932 | ss.$el.trigger('smartselect:close', ss); | |
| 21933 | ss.emit('local::close smartSelectClose', ss); | |
| 21934 | }; | |
| 21935 | ||
| 21936 | SmartSelect.prototype.onClosed = function onClosed () { | |
| 21937 | var ss = this; | |
| 21938 | if (ss.destroyed) { return; } | |
| 21939 | ss.opened = false; | |
| 21940 | ss.$containerEl = null; | |
| 21941 | delete ss.$containerEl; | |
| 21942 | ||
| 21943 | ss.$el.trigger('smartselect:closed', ss); | |
| 21944 | ss.emit('local::closed smartSelectClosed', ss); | |
| 21945 | }; | |
| 21946 | ||
| 21947 | SmartSelect.prototype.openPage = function openPage () { | |
| 21948 | var ss = this; | |
| 21949 | if (ss.opened) { return ss; } | |
| 21950 | ss.getItemsData(); | |
| 21951 | var pageHtml = ss.renderPage(ss.items); | |
| 21952 | var view = ss.getView(); | |
| 21953 | ||
| 21954 | view.router.navigate({ | |
| 21955 | url: ss.url, | |
| 21956 | route: { | |
| 21957 | content: pageHtml, | |
| 21958 | path: ss.url, | |
| 21959 | on: { | |
| 21960 | pageBeforeIn: function pageBeforeIn(e, page) { | |
| 21961 | ss.onOpen('page', page.el); | |
| 21962 | }, | |
| 21963 | pageAfterIn: function pageAfterIn(e, page) { | |
| 21964 | ss.onOpened('page', page.el); | |
| 21965 | }, | |
| 21966 | pageBeforeOut: function pageBeforeOut(e, page) { | |
| 21967 | ss.onClose('page', page.el); | |
| 21968 | }, | |
| 21969 | pageAfterOut: function pageAfterOut(e, page) { | |
| 21970 | ss.onClosed('page', page.el); | |
| 21971 | }, | |
| 21972 | }, | |
| 21973 | }, | |
| 21974 | }); | |
| 21975 | return ss; | |
| 21976 | }; | |
| 21977 | ||
| 21978 | SmartSelect.prototype.openPopup = function openPopup () { | |
| 21979 | var ss = this; | |
| 21980 | if (ss.opened) { return ss; } | |
| 21981 | ss.getItemsData(); | |
| 21982 | var popupHtml = ss.renderPopup(ss.items); | |
| 21983 | ||
| 21984 | var popupParams = { | |
| 21985 | content: popupHtml, | |
| 21986 | on: { | |
| 21987 | popupOpen: function popupOpen(popup) { | |
| 21988 | ss.onOpen('popup', popup.el); | |
| 21989 | }, | |
| 21990 | popupOpened: function popupOpened(popup) { | |
| 21991 | ss.onOpened('popup', popup.el); | |
| 21992 | }, | |
| 21993 | popupClose: function popupClose(popup) { | |
| 21994 | ss.onClose('popup', popup.el); | |
| 21995 | }, | |
| 21996 | popupClosed: function popupClosed(popup) { | |
| 21997 | ss.onClosed('popup', popup.el); | |
| 21998 | }, | |
| 21999 | }, | |
| 22000 | }; | |
| 22001 | ||
| 22002 | if (ss.params.routableModals) { | |
| 22003 | var view = ss.getView(); | |
| 22004 | view.router.navigate({ | |
| 22005 | url: ss.url, | |
| 22006 | route: { | |
| 22007 | path: ss.url, | |
| 22008 | popup: popupParams, | |
| 22009 | }, | |
| 22010 | }); | |
| 22011 | } else { | |
| 22012 | ss.modal = ss.app.popup.create(popupParams).open(); | |
| 22013 | } | |
| 22014 | return ss; | |
| 22015 | }; | |
| 22016 | ||
| 22017 | SmartSelect.prototype.openSheet = function openSheet () { | |
| 22018 | var ss = this; | |
| 22019 | if (ss.opened) { return ss; } | |
| 22020 | ss.getItemsData(); | |
| 22021 | var sheetHtml = ss.renderSheet(ss.items); | |
| 22022 | ||
| 22023 | var sheetParams = { | |
| 22024 | content: sheetHtml, | |
| 22025 | backdrop: false, | |
| 22026 | scrollToEl: ss.$el, | |
| 22027 | closeByOutsideClick: true, | |
| 22028 | on: { | |
| 22029 | sheetOpen: function sheetOpen(sheet) { | |
| 22030 | ss.onOpen('sheet', sheet.el); | |
| 22031 | }, | |
| 22032 | sheetOpened: function sheetOpened(sheet) { | |
| 22033 | ss.onOpened('sheet', sheet.el); | |
| 22034 | }, | |
| 22035 | sheetClose: function sheetClose(sheet) { | |
| 22036 | ss.onClose('sheet', sheet.el); | |
| 22037 | }, | |
| 22038 | sheetClosed: function sheetClosed(sheet) { | |
| 22039 | ss.onClosed('sheet', sheet.el); | |
| 22040 | }, | |
| 22041 | }, | |
| 22042 | }; | |
| 22043 | ||
| 22044 | if (ss.params.routableModals) { | |
| 22045 | var view = ss.getView(); | |
| 22046 | view.router.navigate({ | |
| 22047 | url: ss.url, | |
| 22048 | route: { | |
| 22049 | path: ss.url, | |
| 22050 | sheet: sheetParams, | |
| 22051 | }, | |
| 22052 | }); | |
| 22053 | } else { | |
| 22054 | ss.modal = ss.app.sheet.create(sheetParams).open(); | |
| 22055 | } | |
| 22056 | return ss; | |
| 22057 | }; | |
| 22058 | ||
| 22059 | SmartSelect.prototype.openPopover = function openPopover () { | |
| 22060 | var ss = this; | |
| 22061 | if (ss.opened) { return ss; } | |
| 22062 | ss.getItemsData(); | |
| 22063 | var popoverHtml = ss.renderPopover(ss.items); | |
| 22064 | var popoverParams = { | |
| 22065 | content: popoverHtml, | |
| 22066 | targetEl: ss.$el, | |
| 22067 | on: { | |
| 22068 | popoverOpen: function popoverOpen(popover) { | |
| 22069 | ss.onOpen('popover', popover.el); | |
| 22070 | }, | |
| 22071 | popoverOpened: function popoverOpened(popover) { | |
| 22072 | ss.onOpened('popover', popover.el); | |
| 22073 | }, | |
| 22074 | popoverClose: function popoverClose(popover) { | |
| 22075 | ss.onClose('popover', popover.el); | |
| 22076 | }, | |
| 22077 | popoverClosed: function popoverClosed(popover) { | |
| 22078 | ss.onClosed('popover', popover.el); | |
| 22079 | }, | |
| 22080 | }, | |
| 22081 | }; | |
| 22082 | if (ss.params.routableModals) { | |
| 22083 | var view = ss.getView(); | |
| 22084 | view.router.navigate({ | |
| 22085 | url: ss.url, | |
| 22086 | route: { | |
| 22087 | path: ss.url, | |
| 22088 | popover: popoverParams, | |
| 22089 | }, | |
| 22090 | }); | |
| 22091 | } else { | |
| 22092 | ss.modal = ss.app.popover.create(popoverParams).open(); | |
| 22093 | } | |
| 22094 | return ss; | |
| 22095 | }; | |
| 22096 | ||
| 22097 | SmartSelect.prototype.open = function open (type) { | |
| 22098 | var ss = this; | |
| 22099 | if (ss.opened) { return ss; } | |
| 22100 | var openIn = type || ss.params.openIn; | |
| 22101 | ss[("open" + (openIn.split('').map(function (el, index) { | |
| 22102 | if (index === 0) { return el.toUpperCase(); } | |
| 22103 | return el; | |
| 22104 | }).join('')))](); | |
| 22105 | return ss; | |
| 22106 | }; | |
| 22107 | ||
| 22108 | SmartSelect.prototype.close = function close () { | |
| 22109 | var ss = this; | |
| 22110 | if (!ss.opened) { return ss; } | |
| 22111 | if (ss.params.routableModals || ss.openedIn === 'page') { | |
| 22112 | var view = ss.getView(); | |
| 22113 | view.router.back(); | |
| 22114 | } else { | |
| 22115 | ss.modal.once('modalClosed', function () { | |
| 22116 | Utils.nextTick(function () { | |
| 22117 | ss.modal.destroy(); | |
| 22118 | delete ss.modal; | |
| 22119 | }); | |
| 22120 | }); | |
| 22121 | ss.modal.close(); | |
| 22122 | } | |
| 22123 | return ss; | |
| 22124 | }; | |
| 22125 | ||
| 22126 | SmartSelect.prototype.init = function init () { | |
| 22127 | var ss = this; | |
| 22128 | ss.attachEvents(); | |
| 22129 | ss.setTextValue(); | |
| 22130 | }; | |
| 22131 | ||
| 22132 | SmartSelect.prototype.destroy = function destroy () { | |
| 22133 | var ss = this; | |
| 22134 | ss.emit('local::beforeDestroy smartSelectBeforeDestroy', ss); | |
| 22135 | ss.$el.trigger('smartselect:beforedestroy', ss); | |
| 22136 | ss.detachEvents(); | |
| 22137 | delete ss.$el[0].f7SmartSelect; | |
| 22138 | Utils.deleteProps(ss); | |
| 22139 | ss.destroyed = true; | |
| 22140 | }; | |
| 22141 | ||
| 22142 | return SmartSelect; | |
| 22143 | }(Framework7Class)); | |
| 22144 | ||
| 22145 | var SmartSelect$1 = { | |
| 22146 | name: 'smartSelect', | |
| 22147 | params: { | |
| 22148 | smartSelect: { | |
| 22149 | el: undefined, | |
| 22150 | valueEl: undefined, | |
| 22151 | openIn: 'page', // or 'popup' or 'sheet' or 'popover' | |
| 22152 | pageTitle: undefined, | |
| 22153 | pageBackLinkText: 'Back', | |
| 22154 | popupCloseLinkText: 'Close', | |
| 22155 | popupTabletFullscreen: false, | |
| 22156 | sheetCloseLinkText: 'Done', | |
| 22157 | searchbar: false, | |
| 22158 | searchbarPlaceholder: 'Search', | |
| 22159 | searchbarDisableText: 'Cancel', | |
| 5d51ea26 | 22160 | searchbarDisableButton: undefined, |
| 5309fbda DC |
22161 | closeOnSelect: false, |
| 22162 | virtualList: false, | |
| 22163 | virtualListHeight: undefined, | |
| 5d51ea26 | 22164 | scrollToSelectedItem: false, |
| 5309fbda DC |
22165 | formColorTheme: undefined, |
| 22166 | navbarColorTheme: undefined, | |
| 22167 | routableModals: true, | |
| 22168 | url: 'select/', | |
| 22169 | cssClass: '', | |
| 22170 | /* | |
| 22171 | Custom render functions | |
| 22172 | */ | |
| 22173 | renderPage: undefined, | |
| 22174 | renderPopup: undefined, | |
| 22175 | renderSheet: undefined, | |
| 22176 | renderPopover: undefined, | |
| 22177 | renderItems: undefined, | |
| 22178 | renderItem: undefined, | |
| 22179 | renderSearchbar: undefined, | |
| 22180 | }, | |
| 22181 | }, | |
| 22182 | static: { | |
| 22183 | SmartSelect: SmartSelect, | |
| 22184 | }, | |
| 22185 | create: function create() { | |
| 22186 | var app = this; | |
| 22187 | app.smartSelect = Utils.extend( | |
| 22188 | ConstructorMethods({ | |
| 22189 | defaultSelector: '.smart-select', | |
| 22190 | constructor: SmartSelect, | |
| 22191 | app: app, | |
| 22192 | domProp: 'f7SmartSelect', | |
| 22193 | }), | |
| 22194 | { | |
| 22195 | open: function open(smartSelectEl) { | |
| 22196 | var ss = app.smartSelect.get(smartSelectEl); | |
| 22197 | if (ss && ss.open) { return ss.open(); } | |
| 22198 | return undefined; | |
| 22199 | }, | |
| 22200 | close: function close(smartSelectEl) { | |
| 22201 | var ss = app.smartSelect.get(smartSelectEl); | |
| 22202 | if (ss && ss.close) { return ss.close(); } | |
| 22203 | return undefined; | |
| 22204 | }, | |
| 22205 | } | |
| 22206 | ); | |
| 22207 | }, | |
| 22208 | ||
| 22209 | on: { | |
| 22210 | tabMounted: function tabMounted(tabEl) { | |
| 22211 | var app = this; | |
| 22212 | $(tabEl).find('.smart-select-init').each(function (index, smartSelectEl) { | |
| 22213 | app.smartSelect.create(Utils.extend({ el: smartSelectEl }, $(smartSelectEl).dataset())); | |
| 22214 | }); | |
| 22215 | }, | |
| 22216 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 22217 | $(tabEl).find('.smart-select-init').each(function (index, smartSelectEl) { | |
| 22218 | if (smartSelectEl.f7SmartSelect && smartSelectEl.f7SmartSelect.destroy) { | |
| 22219 | smartSelectEl.f7SmartSelect.destroy(); | |
| 22220 | } | |
| 22221 | }); | |
| 22222 | }, | |
| 22223 | pageInit: function pageInit(page) { | |
| 22224 | var app = this; | |
| 22225 | page.$el.find('.smart-select-init').each(function (index, smartSelectEl) { | |
| 22226 | app.smartSelect.create(Utils.extend({ el: smartSelectEl }, $(smartSelectEl).dataset())); | |
| 22227 | }); | |
| 22228 | }, | |
| 22229 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 22230 | page.$el.find('.smart-select-init').each(function (index, smartSelectEl) { | |
| 22231 | if (smartSelectEl.f7SmartSelect && smartSelectEl.f7SmartSelect.destroy) { | |
| 22232 | smartSelectEl.f7SmartSelect.destroy(); | |
| 22233 | } | |
| 22234 | }); | |
| 22235 | }, | |
| 22236 | }, | |
| 22237 | clicks: { | |
| 22238 | '.smart-select': function open($clickedEl, data) { | |
| 22239 | var app = this; | |
| 22240 | if (!$clickedEl[0].f7SmartSelect) { | |
| 22241 | var ss = app.smartSelect.create(Utils.extend({ el: $clickedEl }, data)); | |
| 22242 | ss.open(); | |
| 22243 | } | |
| 22244 | }, | |
| 22245 | }, | |
| 22246 | vnode: { | |
| 22247 | 'smart-select-init': { | |
| 22248 | insert: function insert(vnode) { | |
| 22249 | var app = this; | |
| 22250 | var smartSelectEl = vnode.elm; | |
| 22251 | app.smartSelect.create(Utils.extend({ el: smartSelectEl }, $(smartSelectEl).dataset())); | |
| 22252 | }, | |
| 22253 | destroy: function destroy(vnode) { | |
| 22254 | var smartSelectEl = vnode.elm; | |
| 22255 | if (smartSelectEl.f7SmartSelect && smartSelectEl.f7SmartSelect.destroy) { | |
| 22256 | smartSelectEl.f7SmartSelect.destroy(); | |
| 22257 | } | |
| 22258 | }, | |
| 22259 | }, | |
| 22260 | }, | |
| 22261 | }; | |
| 22262 | ||
| 22263 | var Grid = { | |
| 22264 | name: 'grid', | |
| 22265 | }; | |
| 22266 | ||
| 22267 | /* | |
| 22268 | Converts a Gregorian date to Jalaali. | |
| 22269 | */ | |
| 22270 | function toJalaali (gy, gm, gd) { | |
| 22271 | if (Object.prototype.toString.call(gy) === '[object Date]') { | |
| 22272 | gd = gy.getDate(); | |
| 22273 | gm = gy.getMonth() + 1; | |
| 22274 | gy = gy.getFullYear(); | |
| 22275 | } | |
| 22276 | return d2j(g2d(gy, gm, gd)) | |
| 22277 | } | |
| 22278 | ||
| 22279 | /* | |
| 22280 | Converts a Jalaali date to Gregorian. | |
| 22281 | */ | |
| 22282 | function toGregorian (jy, jm, jd) { | |
| 22283 | return d2g(j2d(jy, jm, jd)) | |
| 22284 | } | |
| 22285 | ||
| 22286 | // /* | |
| 22287 | // Checks whether a Jalaali date is valid or not. | |
| 22288 | // */ | |
| 22289 | // function isValidJalaaliDate (jy, jm, jd) { | |
| 22290 | // return jy >= -61 && jy <= 3177 && | |
| 22291 | // jm >= 1 && jm <= 12 && | |
| 22292 | // jd >= 1 && jd <= monthLength(jy, jm) | |
| 22293 | // } | |
| 22294 | ||
| 22295 | /* | |
| 22296 | Is this a leap year or not? | |
| 22297 | */ | |
| 22298 | function isLeapJalaaliYear (jy) { | |
| 22299 | return jalCal(jy).leap === 0 | |
| 22300 | } | |
| 22301 | ||
| 22302 | /* | |
| 22303 | Number of days in a given month in a Jalaali year. | |
| 22304 | */ | |
| 22305 | function monthLength (jy, jm) { | |
| 22306 | if (jm <= 6) { return 31 } | |
| 22307 | if (jm <= 11) { return 30 } | |
| 22308 | if (isLeapJalaaliYear(jy)) { return 30 } | |
| 22309 | return 29 | |
| 22310 | } | |
| 22311 | ||
| 22312 | /* | |
| 22313 | This function determines if the Jalaali (Persian) year is | |
| 22314 | leap (366-day long) or is the common year (365 days), and | |
| 22315 | finds the day in March (Gregorian calendar) of the first | |
| 22316 | day of the Jalaali year (jy). | |
| 22317 | @param jy Jalaali calendar year (-61 to 3177) | |
| 22318 | @return | |
| 22319 | leap: number of years since the last leap year (0 to 4) | |
| 22320 | gy: Gregorian year of the beginning of Jalaali year | |
| 22321 | march: the March day of Farvardin the 1st (1st day of jy) | |
| 22322 | @see: http://www.astro.uni.torun.pl/~kb/Papers/EMP/PersianC-EMP.htm | |
| 22323 | @see: http://www.fourmilab.ch/documents/calendar/ | |
| 22324 | */ | |
| 22325 | function jalCal (jy) { | |
| 22326 | // Jalaali years starting the 33-year rule. | |
| 22327 | var breaks = [-61, 9, 38, 199, 426, 686, 756, 818, 1111, 1181, 1210, 1635, 2060, 2097, 2192, 2262, 2324, 2394, 2456, 3178]; | |
| 22328 | var bl = breaks.length; | |
| 22329 | var gy = jy + 621; | |
| 22330 | var leapJ = -14; | |
| 22331 | var jp = breaks[0]; | |
| 22332 | var jm; | |
| 22333 | var jump; | |
| 22334 | var leap; | |
| 22335 | var leapG; | |
| 22336 | var march; | |
| 22337 | var n; | |
| 22338 | var i; | |
| 22339 | ||
| 22340 | if (jy < jp || jy >= breaks[bl - 1]) { throw new Error('Invalid Jalaali year ' + jy) } | |
| 22341 | ||
| 22342 | // Find the limiting years for the Jalaali year jy. | |
| 22343 | for (i = 1; i < bl; i += 1) { | |
| 22344 | jm = breaks[i]; | |
| 22345 | jump = jm - jp; | |
| 22346 | if (jy < jm) { break } | |
| 22347 | leapJ = leapJ + div(jump, 33) * 8 + div(mod(jump, 33), 4); | |
| 22348 | jp = jm; | |
| 22349 | } | |
| 22350 | n = jy - jp; | |
| 22351 | ||
| 22352 | // Find the number of leap years from AD 621 to the beginning | |
| 22353 | // of the current Jalaali year in the Persian calendar. | |
| 22354 | leapJ = leapJ + div(n, 33) * 8 + div(mod(n, 33) + 3, 4); | |
| 22355 | if (mod(jump, 33) === 4 && jump - n === 4) { leapJ += 1; } | |
| 22356 | ||
| 22357 | // And the same in the Gregorian calendar (until the year gy). | |
| 22358 | leapG = div(gy, 4) - div((div(gy, 100) + 1) * 3, 4) - 150; | |
| 22359 | ||
| 22360 | // Determine the Gregorian date of Farvardin the 1st. | |
| 22361 | march = 20 + leapJ - leapG; | |
| 22362 | ||
| 22363 | // Find how many years have passed since the last leap year. | |
| 22364 | if (jump - n < 6) { n = n - jump + div(jump + 4, 33) * 33; } | |
| 22365 | leap = mod(mod(n + 1, 33) - 1, 4); | |
| 22366 | if (leap === -1) { | |
| 22367 | leap = 4; | |
| 22368 | } | |
| 22369 | ||
| 22370 | return { leap: leap, | |
| 22371 | gy: gy, | |
| 22372 | march: march | |
| 22373 | } | |
| 22374 | } | |
| 22375 | ||
| 22376 | /* | |
| 22377 | Converts a date of the Jalaali calendar to the Julian Day number. | |
| 22378 | @param jy Jalaali year (1 to 3100) | |
| 22379 | @param jm Jalaali month (1 to 12) | |
| 22380 | @param jd Jalaali day (1 to 29/31) | |
| 22381 | @return Julian Day number | |
| 22382 | */ | |
| 22383 | function j2d (jy, jm, jd) { | |
| 22384 | var r = jalCal(jy); | |
| 22385 | return g2d(r.gy, 3, r.march) + (jm - 1) * 31 - div(jm, 7) * (jm - 7) + jd - 1 | |
| 22386 | } | |
| 22387 | ||
| 22388 | /* | |
| 22389 | Converts the Julian Day number to a date in the Jalaali calendar. | |
| 22390 | @param jdn Julian Day number | |
| 22391 | @return | |
| 22392 | jy: Jalaali year (1 to 3100) | |
| 22393 | jm: Jalaali month (1 to 12) | |
| 22394 | jd: Jalaali day (1 to 29/31) | |
| 22395 | */ | |
| 22396 | function d2j (jdn) { | |
| 22397 | var gy = d2g(jdn).gy; // Calculate Gregorian year (gy). | |
| 22398 | var jy = gy - 621; | |
| 22399 | var r = jalCal(jy); | |
| 22400 | var jdn1f = g2d(gy, 3, r.march); | |
| 22401 | var jd; | |
| 22402 | var jm; | |
| 22403 | var k; | |
| 22404 | ||
| 22405 | // Find number of days that passed since 1 Farvardin. | |
| 22406 | k = jdn - jdn1f; | |
| 22407 | if (k >= 0) { | |
| 22408 | if (k <= 185) { | |
| 22409 | // The first 6 months. | |
| 22410 | jm = 1 + div(k, 31); | |
| 22411 | jd = mod(k, 31) + 1; | |
| 22412 | return { jy: jy, | |
| 22413 | jm: jm, | |
| 22414 | jd: jd | |
| 22415 | } | |
| 22416 | } else { | |
| 22417 | // The remaining months. | |
| 22418 | k -= 186; | |
| 22419 | } | |
| 22420 | } else { | |
| 22421 | // Previous Jalaali year. | |
| 22422 | jy -= 1; | |
| 22423 | k += 179; | |
| 22424 | if (r.leap === 1) { k += 1; } | |
| 22425 | } | |
| 22426 | jm = 7 + div(k, 30); | |
| 22427 | jd = mod(k, 30) + 1; | |
| 22428 | return { jy: jy, | |
| 22429 | jm: jm, | |
| 22430 | jd: jd | |
| 22431 | } | |
| 22432 | } | |
| 22433 | ||
| 22434 | /* | |
| 22435 | Calculates the Julian Day number from Gregorian or Julian | |
| 22436 | calendar dates. This integer number corresponds to the noon of | |
| 22437 | the date (i.e. 12 hours of Universal Time). | |
| 22438 | The procedure was tested to be good since 1 March, -100100 (of both | |
| 22439 | calendars) up to a few million years into the future. | |
| 22440 | @param gy Calendar year (years BC numbered 0, -1, -2, ...) | |
| 22441 | @param gm Calendar month (1 to 12) | |
| 22442 | @param gd Calendar day of the month (1 to 28/29/30/31) | |
| 22443 | @return Julian Day number | |
| 22444 | */ | |
| 22445 | function g2d (gy, gm, gd) { | |
| 22446 | var d = div((gy + div(gm - 8, 6) + 100100) * 1461, 4) + | |
| 22447 | div(153 * mod(gm + 9, 12) + 2, 5) + | |
| 22448 | gd - 34840408; | |
| 22449 | d = d - div(div(gy + 100100 + div(gm - 8, 6), 100) * 3, 4) + 752; | |
| 22450 | return d | |
| 22451 | } | |
| 22452 | ||
| 22453 | /* | |
| 22454 | Calculates Gregorian and Julian calendar dates from the Julian Day number | |
| 22455 | (jdn) for the period since jdn=-34839655 (i.e. the year -100100 of both | |
| 22456 | calendars) to some millions years ahead of the present. | |
| 22457 | @param jdn Julian Day number | |
| 22458 | @return | |
| 22459 | gy: Calendar year (years BC numbered 0, -1, -2, ...) | |
| 22460 | gm: Calendar month (1 to 12) | |
| 22461 | gd: Calendar day of the month M (1 to 28/29/30/31) | |
| 22462 | */ | |
| 22463 | function d2g (jdn) { | |
| 22464 | var j, | |
| 22465 | i, | |
| 22466 | gd, | |
| 22467 | gm, | |
| 22468 | gy; | |
| 22469 | j = 4 * jdn + 139361631; | |
| 22470 | j = j + div(div(4 * jdn + 183187720, 146097) * 3, 4) * 4 - 3908; | |
| 22471 | i = div(mod(j, 1461), 4) * 5 + 308; | |
| 22472 | gd = div(mod(i, 153), 5) + 1; | |
| 22473 | gm = mod(div(i, 153), 12) + 1; | |
| 22474 | gy = div(j, 1461) - 100100 + div(8 - gm, 6); | |
| 22475 | return { gy: gy, | |
| 22476 | gm: gm, | |
| 22477 | gd: gd | |
| 22478 | } | |
| 22479 | } | |
| 22480 | ||
| 22481 | /* | |
| 22482 | Utility helper functions. | |
| 22483 | */ | |
| 22484 | ||
| 22485 | function div (a, b) { | |
| 22486 | return ~~(a / b) | |
| 22487 | } | |
| 22488 | ||
| 22489 | function mod (a, b) { | |
| 22490 | return a - ~~(a / b) * b | |
| 22491 | } | |
| 22492 | ||
| 22493 | function fixDate (y, m, d) { | |
| 22494 | if (m > 11) { | |
| 22495 | y += Math.floor(m / 12); | |
| 22496 | m = m % 12; | |
| 22497 | } | |
| 22498 | while (m < 0) { | |
| 22499 | y -= 1; | |
| 22500 | m += 12; | |
| 22501 | } | |
| 22502 | while (d > monthLength(y, m + 1)) { | |
| 22503 | m = m !== 11 ? m + 1 : 0; | |
| 22504 | y = m === 0 ? y + 1 : y; | |
| 22505 | d -= monthLength(y, m + 1); | |
| 22506 | } | |
| 22507 | while (d <= 0) { | |
| 22508 | m = m !== 0 ? m - 1 : 11; | |
| 22509 | y = m === 11 ? y - 1 : y; | |
| 22510 | d += monthLength(y, m + 1); | |
| 22511 | } | |
| 22512 | return [y, m || 0, d || 1] | |
| 22513 | } | |
| 22514 | ||
| 22515 | /* | |
| 22516 | Copyright nainemom <nainemom@gmail.com> | |
| 22517 | https://github.com/nainemom/idate/blob/dev/package.json | |
| 22518 | */ | |
| 22519 | ||
| 22520 | var methods = [ | |
| 22521 | 'getHours', | |
| 22522 | 'getMilliseconds', | |
| 22523 | 'getMinutes', | |
| 22524 | 'getSeconds', | |
| 22525 | 'getTime', | |
| 22526 | 'getTimezoneOffset', | |
| 22527 | 'getUTCDate', | |
| 22528 | 'getUTCDay', | |
| 22529 | 'getUTCFullYear', | |
| 22530 | 'getUTCHours', | |
| 22531 | 'getUTCMilliseconds', | |
| 22532 | 'getUTCMinutes', | |
| 22533 | 'getUTCMonth', | |
| 22534 | 'getUTCSeconds', | |
| 22535 | 'now', | |
| 22536 | 'parse', | |
| 22537 | 'setHours', | |
| 22538 | 'setMilliseconds', | |
| 22539 | 'setMinutes', | |
| 22540 | 'setSeconds', | |
| 22541 | 'setTime', | |
| 22542 | 'setUTCDate', | |
| 22543 | 'setUTCFullYear', | |
| 22544 | 'setUTCHours', | |
| 22545 | 'setUTCMilliseconds', | |
| 22546 | 'setUTCMinutes', | |
| 22547 | 'setUTCMonth', | |
| 22548 | 'setUTCSeconds', | |
| 22549 | 'toDateString', | |
| 22550 | 'toISOString', | |
| 22551 | 'toJSON', | |
| 22552 | 'toLocaleDateString', | |
| 22553 | 'toLocaleTimeString', | |
| 22554 | 'toLocaleString', | |
| 22555 | 'toTimeString', | |
| 22556 | 'toUTCString', | |
| 22557 | 'UTC', | |
| 22558 | 'valueOf' | |
| 22559 | ]; | |
| 22560 | ||
| 22561 | var DAY_NAMES = ['Shanbe', 'Yekshanbe', 'Doshanbe', 'Seshanbe', 'Chaharshanbe', 'Panjshanbe', 'Jom\'e']; | |
| 22562 | var PERSIAN_DAY_NAMES = ['شنبه', 'یکشنبه', 'دوشنبه', 'سهشنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه']; | |
| 22563 | var MONTH_NAMES = ['Farvardin', 'Ordibehesht', 'Khordad', 'Tir', 'Mordad', 'Shahrivar', 'Mehr', 'Aban', 'Azar', 'Dey', 'Bahman', 'Esfand']; | |
| 22564 | var PERSIAN_MONTH_NAMES = ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند']; | |
| 22565 | var PERSIAN_NUMBERS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']; | |
| 22566 | ||
| 22567 | var IDate = /*@__PURE__*/(function (Date) { | |
| 22568 | function IDate () { | |
| 5d51ea26 DC |
22569 | var args = [], len = arguments.length; |
| 22570 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 22571 | ||
| 5309fbda DC |
22572 | Date.call(this); |
| 22573 | ||
| 22574 | var date; | |
| 5309fbda DC |
22575 | if (args.length === 0) { |
| 22576 | date = Date.now(); | |
| 22577 | } else if (args.length === 1) { | |
| 22578 | date = args[0] instanceof Date ? args[0].getTime() : args[0]; | |
| 22579 | } else { | |
| 22580 | var fixed = fixDate( | |
| 22581 | args[0], | |
| 22582 | args[1] || 0, | |
| 22583 | typeof args[2] === 'undefined' ? 1 : args[2]); | |
| 22584 | var converted$1 = toGregorian(fixed[0], fixed[1] + 1, fixed[2]); | |
| 22585 | date = [converted$1.gy, converted$1.gm - 1, converted$1.gd].concat([args[3] || 0, args[4] || 0, args[5] || 0, args[6] || 0]); | |
| 22586 | } | |
| 22587 | ||
| 22588 | if (Array.isArray(date)) { | |
| 22589 | this.gdate = new (Function.prototype.bind.apply( Date, [ null ].concat( date) )); | |
| 22590 | } else { | |
| 22591 | this.gdate = new Date(date); | |
| 22592 | } | |
| 22593 | ||
| 22594 | var converted = toJalaali(this.gdate.getFullYear(), this.gdate.getMonth() + 1, this.gdate.getDate()); | |
| 22595 | this.jdate = [converted.jy, converted.jm - 1, converted.jd]; | |
| 22596 | ||
| 22597 | methods.forEach(function (method) { | |
| 22598 | IDate.prototype[method] = function () { | |
| 22599 | var ref; | |
| 22600 | ||
| 22601 | return (ref = this.gdate)[method].apply(ref, arguments) | |
| 22602 | }; | |
| 22603 | }); | |
| 22604 | } | |
| 22605 | ||
| 22606 | if ( Date ) IDate.__proto__ = Date; | |
| 22607 | IDate.prototype = Object.create( Date && Date.prototype ); | |
| 22608 | IDate.prototype.constructor = IDate; | |
| 22609 | ||
| 22610 | IDate.prototype.getFullYear = function getFullYear () { | |
| 22611 | return this.jdate[0] | |
| 22612 | }; | |
| 22613 | ||
| 22614 | IDate.prototype.setFullYear = function setFullYear (value) { | |
| 22615 | this.jdate = fixDate(value, this.jdate[1], this.jdate[2]); | |
| 22616 | this.syncDate(); | |
| 22617 | return this.gdate.getTime() | |
| 22618 | }; | |
| 22619 | ||
| 22620 | IDate.prototype.getMonth = function getMonth () { | |
| 22621 | return this.jdate[1] | |
| 22622 | }; | |
| 22623 | ||
| 22624 | IDate.prototype.setMonth = function setMonth (value) { | |
| 22625 | this.jdate = fixDate(this.jdate[0], value, this.jdate[2]); | |
| 22626 | this.syncDate(); | |
| 22627 | return this.gdate.getTime() | |
| 22628 | }; | |
| 22629 | ||
| 22630 | IDate.prototype.getDate = function getDate () { | |
| 22631 | return this.jdate[2] | |
| 22632 | }; | |
| 22633 | ||
| 22634 | IDate.prototype.setDate = function setDate (value) { | |
| 22635 | this.jdate = fixDate(this.jdate[0], this.jdate[1], value); | |
| 22636 | this.syncDate(); | |
| 22637 | return this.gdate.getTime() | |
| 22638 | }; | |
| 22639 | ||
| 22640 | IDate.prototype.getDay = function getDay () { | |
| 22641 | return (this.gdate.getDay() + 1) % 7 | |
| 22642 | }; | |
| 22643 | ||
| 22644 | IDate.prototype.syncDate = function syncDate () { | |
| 22645 | var converted = toGregorian(this.jdate[0], this.jdate[1] + 1, this.jdate[2]); | |
| 22646 | this.gdate.setFullYear(converted.gy); | |
| 22647 | this.gdate.setMonth(converted.gm - 1); | |
| 22648 | this.gdate.setDate(converted.gd); | |
| 22649 | }; | |
| 22650 | IDate.prototype.toString = function toString (persianString) { | |
| 22651 | if ( persianString === void 0 ) persianString = true; | |
| 22652 | ||
| 22653 | var replaceNums = function (str) { | |
| 22654 | return str.replace(/./g, function (c) { return PERSIAN_NUMBERS[c] || c; }) | |
| 22655 | }; | |
| 22656 | var padNumber = function (num) { return num.toString().length === 1 ? ("0" + num) : num.toString(); }; | |
| 22657 | var time = (padNumber(this.getHours())) + ":" + (padNumber(this.getMinutes())) + ":" + (padNumber(this.getSeconds())); | |
| 22658 | if (persianString) { | |
| 22659 | return replaceNums(((PERSIAN_DAY_NAMES[this.getDay()]) + " " + (this.getDate()) + " " + (PERSIAN_MONTH_NAMES[this.getMonth()]) + " " + (this.getFullYear()) + " ساعت " + time)) | |
| 22660 | } | |
| 22661 | return ((DAY_NAMES[this.getDay()]) + " " + (this.getDate()) + " " + (MONTH_NAMES[this.getMonth()]) + " " + (this.getFullYear()) + " " + time) | |
| 22662 | }; | |
| 22663 | ||
| 22664 | return IDate; | |
| 22665 | }(Date)); | |
| 22666 | ||
| 5d51ea26 | 22667 | var Calendar = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
22668 | function Calendar(app, params) { |
| 22669 | if ( params === void 0 ) params = {}; | |
| 22670 | ||
| 5d51ea26 | 22671 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
22672 | var calendar = this; |
| 22673 | ||
| 22674 | calendar.params = Utils.extend({}, app.params.calendar, params); | |
| 22675 | ||
| 22676 | if (calendar.params.calendarType === 'jalali') { | |
| 22677 | Object.keys(calendar.params.jalali).forEach(function (param) { | |
| 22678 | if (!params[param]) { | |
| 22679 | calendar.params[param] = calendar.params.jalali[param]; | |
| 22680 | } | |
| 22681 | }); | |
| 22682 | } | |
| 22683 | ||
| 22684 | if (calendar.params.calendarType === 'jalali') { | |
| 22685 | calendar.DateHandleClass = IDate; | |
| 22686 | } else { | |
| 22687 | calendar.DateHandleClass = Date; | |
| 22688 | } | |
| 22689 | ||
| 22690 | var $containerEl; | |
| 22691 | if (calendar.params.containerEl) { | |
| 22692 | $containerEl = $(calendar.params.containerEl); | |
| 22693 | if ($containerEl.length === 0) { return calendar; } | |
| 22694 | } | |
| 22695 | ||
| 22696 | var $inputEl; | |
| 22697 | if (calendar.params.inputEl) { | |
| 22698 | $inputEl = $(calendar.params.inputEl); | |
| 22699 | } | |
| 22700 | ||
| 22701 | var view; | |
| 22702 | if ($inputEl) { | |
| 22703 | view = $inputEl.parents('.view').length && $inputEl.parents('.view')[0].f7View; | |
| 22704 | } | |
| 22705 | if (!view) { view = app.views.main; } | |
| 22706 | ||
| 22707 | var isHorizontal = calendar.params.direction === 'horizontal'; | |
| 22708 | ||
| 22709 | var inverter = 1; | |
| 22710 | if (isHorizontal) { | |
| 22711 | inverter = app.rtl ? -1 : 1; | |
| 22712 | } | |
| 22713 | ||
| 22714 | Utils.extend(calendar, { | |
| 22715 | app: app, | |
| 22716 | $containerEl: $containerEl, | |
| 22717 | containerEl: $containerEl && $containerEl[0], | |
| 22718 | inline: $containerEl && $containerEl.length > 0, | |
| 22719 | $inputEl: $inputEl, | |
| 22720 | inputEl: $inputEl && $inputEl[0], | |
| 22721 | initialized: false, | |
| 22722 | opened: false, | |
| 22723 | url: calendar.params.url, | |
| 22724 | isHorizontal: isHorizontal, | |
| 22725 | inverter: inverter, | |
| 22726 | view: view, | |
| 22727 | animating: false, | |
| 22728 | }); | |
| 22729 | ||
| 22730 | function onInputClick() { | |
| 22731 | calendar.open(); | |
| 22732 | } | |
| 22733 | function onInputFocus(e) { | |
| 22734 | e.preventDefault(); | |
| 22735 | } | |
| 22736 | function onHtmlClick(e) { | |
| 22737 | var $targetEl = $(e.target); | |
| 22738 | if (calendar.isPopover()) { return; } | |
| 22739 | if (!calendar.opened || calendar.closing) { return; } | |
| 22740 | if ($targetEl.closest('[class*="backdrop"]').length) { return; } | |
| 22741 | if ($inputEl && $inputEl.length > 0) { | |
| 22742 | if ($targetEl[0] !== $inputEl[0] && $targetEl.closest('.sheet-modal, .calendar-modal').length === 0) { | |
| 22743 | calendar.close(); | |
| 22744 | } | |
| 22745 | } else if ($(e.target).closest('.sheet-modal, .calendar-modal').length === 0) { | |
| 22746 | calendar.close(); | |
| 22747 | } | |
| 22748 | } | |
| 22749 | ||
| 22750 | // Events | |
| 22751 | Utils.extend(calendar, { | |
| 22752 | attachInputEvents: function attachInputEvents() { | |
| 22753 | calendar.$inputEl.on('click', onInputClick); | |
| 22754 | if (calendar.params.inputReadOnly) { | |
| 22755 | calendar.$inputEl.on('focus mousedown', onInputFocus); | |
| 22756 | } | |
| 22757 | }, | |
| 22758 | detachInputEvents: function detachInputEvents() { | |
| 22759 | calendar.$inputEl.off('click', onInputClick); | |
| 22760 | if (calendar.params.inputReadOnly) { | |
| 22761 | calendar.$inputEl.off('focus mousedown', onInputFocus); | |
| 22762 | } | |
| 22763 | }, | |
| 22764 | attachHtmlEvents: function attachHtmlEvents() { | |
| 22765 | app.on('click', onHtmlClick); | |
| 22766 | }, | |
| 22767 | detachHtmlEvents: function detachHtmlEvents() { | |
| 22768 | app.off('click', onHtmlClick); | |
| 22769 | }, | |
| 22770 | }); | |
| 22771 | calendar.attachCalendarEvents = function attachCalendarEvents() { | |
| 22772 | var allowItemClick = true; | |
| 22773 | var isTouched; | |
| 22774 | var isMoved; | |
| 22775 | var touchStartX; | |
| 22776 | var touchStartY; | |
| 22777 | var touchCurrentX; | |
| 22778 | var touchCurrentY; | |
| 22779 | var touchStartTime; | |
| 22780 | var touchEndTime; | |
| 22781 | var currentTranslate; | |
| 22782 | var wrapperWidth; | |
| 22783 | var wrapperHeight; | |
| 22784 | var percentage; | |
| 22785 | var touchesDiff; | |
| 22786 | var isScrolling; | |
| 22787 | ||
| 22788 | var $el = calendar.$el; | |
| 22789 | var $wrapperEl = calendar.$wrapperEl; | |
| 22790 | ||
| 22791 | function handleTouchStart(e) { | |
| 22792 | if (isMoved || isTouched) { return; } | |
| 22793 | isTouched = true; | |
| 22794 | touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 22795 | touchCurrentX = touchStartX; | |
| 22796 | touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 22797 | touchCurrentY = touchStartY; | |
| 22798 | touchStartTime = (new calendar.DateHandleClass()).getTime(); | |
| 22799 | percentage = 0; | |
| 22800 | allowItemClick = true; | |
| 22801 | isScrolling = undefined; | |
| 22802 | currentTranslate = calendar.monthsTranslate; | |
| 22803 | } | |
| 22804 | function handleTouchMove(e) { | |
| 22805 | if (!isTouched) { return; } | |
| 22806 | var isH = calendar.isHorizontal; | |
| 22807 | ||
| 22808 | touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 22809 | touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 22810 | if (typeof isScrolling === 'undefined') { | |
| 22811 | isScrolling = !!(isScrolling || Math.abs(touchCurrentY - touchStartY) > Math.abs(touchCurrentX - touchStartX)); | |
| 22812 | } | |
| 22813 | if (isH && isScrolling) { | |
| 22814 | isTouched = false; | |
| 22815 | return; | |
| 22816 | } | |
| 22817 | e.preventDefault(); | |
| 22818 | if (calendar.animating) { | |
| 22819 | isTouched = false; | |
| 22820 | return; | |
| 22821 | } | |
| 22822 | allowItemClick = false; | |
| 22823 | if (!isMoved) { | |
| 22824 | // First move | |
| 22825 | isMoved = true; | |
| 22826 | wrapperWidth = $wrapperEl[0].offsetWidth; | |
| 22827 | wrapperHeight = $wrapperEl[0].offsetHeight; | |
| 22828 | $wrapperEl.transition(0); | |
| 22829 | } | |
| 22830 | ||
| 22831 | touchesDiff = isH ? touchCurrentX - touchStartX : touchCurrentY - touchStartY; | |
| 22832 | percentage = touchesDiff / (isH ? wrapperWidth : wrapperHeight); | |
| 22833 | currentTranslate = ((calendar.monthsTranslate * calendar.inverter) + percentage) * 100; | |
| 22834 | ||
| 22835 | // Transform wrapper | |
| 22836 | $wrapperEl.transform(("translate3d(" + (isH ? currentTranslate : 0) + "%, " + (isH ? 0 : currentTranslate) + "%, 0)")); | |
| 22837 | } | |
| 22838 | function handleTouchEnd() { | |
| 22839 | if (!isTouched || !isMoved) { | |
| 22840 | isTouched = false; | |
| 22841 | isMoved = false; | |
| 22842 | return; | |
| 22843 | } | |
| 22844 | isTouched = false; | |
| 22845 | isMoved = false; | |
| 22846 | ||
| 22847 | touchEndTime = new calendar.DateHandleClass().getTime(); | |
| 22848 | if (touchEndTime - touchStartTime < 300) { | |
| 22849 | if (Math.abs(touchesDiff) < 10) { | |
| 22850 | calendar.resetMonth(); | |
| 22851 | } else if (touchesDiff >= 10) { | |
| 22852 | if (app.rtl) { calendar.nextMonth(); } | |
| 22853 | else { calendar.prevMonth(); } | |
| 22854 | } else if (app.rtl) { calendar.prevMonth(); } | |
| 22855 | else { calendar.nextMonth(); } | |
| 22856 | } else if (percentage <= -0.5) { | |
| 22857 | if (app.rtl) { calendar.prevMonth(); } | |
| 22858 | else { calendar.nextMonth(); } | |
| 22859 | } else if (percentage >= 0.5) { | |
| 22860 | if (app.rtl) { calendar.nextMonth(); } | |
| 22861 | else { calendar.prevMonth(); } | |
| 22862 | } else { | |
| 22863 | calendar.resetMonth(); | |
| 22864 | } | |
| 22865 | ||
| 22866 | // Allow click | |
| 22867 | setTimeout(function () { | |
| 22868 | allowItemClick = true; | |
| 22869 | }, 100); | |
| 22870 | } | |
| 22871 | ||
| 22872 | function handleDayClick(e) { | |
| 22873 | if (!allowItemClick) { return; } | |
| 22874 | var $dayEl = $(e.target).parents('.calendar-day'); | |
| 22875 | if ($dayEl.length === 0 && $(e.target).hasClass('calendar-day')) { | |
| 22876 | $dayEl = $(e.target); | |
| 22877 | } | |
| 22878 | if ($dayEl.length === 0) { return; } | |
| 22879 | if ($dayEl.hasClass('calendar-day-disabled')) { return; } | |
| 22880 | if (!calendar.params.rangePicker) { | |
| 22881 | if ($dayEl.hasClass('calendar-day-next')) { calendar.nextMonth(); } | |
| 22882 | if ($dayEl.hasClass('calendar-day-prev')) { calendar.prevMonth(); } | |
| 22883 | } | |
| 22884 | var dateYear = parseInt($dayEl.attr('data-year'), 10); | |
| 22885 | var dateMonth = parseInt($dayEl.attr('data-month'), 10); | |
| 22886 | var dateDay = parseInt($dayEl.attr('data-day'), 10); | |
| 22887 | calendar.emit( | |
| 22888 | 'local::dayClick calendarDayClick', | |
| 22889 | calendar, | |
| 22890 | $dayEl[0], | |
| 22891 | dateYear, | |
| 22892 | dateMonth, | |
| 22893 | dateDay | |
| 22894 | ); | |
| 22895 | if (!$dayEl.hasClass('calendar-day-selected') || calendar.params.multiple || calendar.params.rangePicker) { | |
| 22896 | calendar.addValue(new calendar.DateHandleClass(dateYear, dateMonth, dateDay, 0, 0, 0)); | |
| 22897 | } | |
| 22898 | if (calendar.params.closeOnSelect) { | |
| 22899 | if ( | |
| 22900 | (calendar.params.rangePicker && calendar.value.length === 2) | |
| 22901 | || !calendar.params.rangePicker | |
| 22902 | ) { | |
| 22903 | calendar.close(); | |
| 22904 | } | |
| 22905 | } | |
| 22906 | } | |
| 22907 | ||
| 22908 | function onNextMonthClick() { | |
| 22909 | calendar.nextMonth(); | |
| 22910 | } | |
| 22911 | ||
| 22912 | function onPrevMonthClick() { | |
| 22913 | calendar.prevMonth(); | |
| 22914 | } | |
| 22915 | ||
| 22916 | function onNextYearClick() { | |
| 22917 | calendar.nextYear(); | |
| 22918 | } | |
| 22919 | ||
| 22920 | function onPrevYearClick() { | |
| 22921 | calendar.prevYear(); | |
| 22922 | } | |
| 22923 | ||
| 22924 | var passiveListener = app.touchEvents.start === 'touchstart' && app.support.passiveListener ? { passive: true, capture: false } : false; | |
| 22925 | // Selectors clicks | |
| 22926 | $el.find('.calendar-prev-month-button').on('click', onPrevMonthClick); | |
| 22927 | $el.find('.calendar-next-month-button').on('click', onNextMonthClick); | |
| 22928 | $el.find('.calendar-prev-year-button').on('click', onPrevYearClick); | |
| 22929 | $el.find('.calendar-next-year-button').on('click', onNextYearClick); | |
| 22930 | // Day clicks | |
| 22931 | $wrapperEl.on('click', handleDayClick); | |
| 22932 | // Touch events | |
| 22933 | { | |
| 22934 | if (calendar.params.touchMove) { | |
| 22935 | $wrapperEl.on(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 22936 | app.on('touchmove:active', handleTouchMove); | |
| 22937 | app.on('touchend:passive', handleTouchEnd); | |
| 22938 | } | |
| 22939 | } | |
| 22940 | ||
| 22941 | calendar.detachCalendarEvents = function detachCalendarEvents() { | |
| 22942 | $el.find('.calendar-prev-month-button').off('click', onPrevMonthClick); | |
| 22943 | $el.find('.calendar-next-month-button').off('click', onNextMonthClick); | |
| 22944 | $el.find('.calendar-prev-year-button').off('click', onPrevYearClick); | |
| 22945 | $el.find('.calendar-next-year-button').off('click', onNextYearClick); | |
| 22946 | $wrapperEl.off('click', handleDayClick); | |
| 22947 | { | |
| 22948 | if (calendar.params.touchMove) { | |
| 22949 | $wrapperEl.off(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 22950 | app.off('touchmove:active', handleTouchMove); | |
| 22951 | app.off('touchend:passive', handleTouchEnd); | |
| 22952 | } | |
| 22953 | } | |
| 22954 | }; | |
| 22955 | }; | |
| 22956 | ||
| 22957 | calendar.init(); | |
| 22958 | ||
| 22959 | return calendar; | |
| 22960 | } | |
| 22961 | ||
| 5d51ea26 DC |
22962 | if ( Framework7Class ) Calendar.__proto__ = Framework7Class; |
| 22963 | Calendar.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
22964 | Calendar.prototype.constructor = Calendar; |
| 22965 | // eslint-disable-next-line | |
| 22966 | Calendar.prototype.normalizeDate = function normalizeDate (date) { | |
| 22967 | var calendar = this; | |
| 22968 | var d = new calendar.DateHandleClass(date); | |
| 22969 | return new calendar.DateHandleClass(d.getFullYear(), d.getMonth(), d.getDate()); | |
| 22970 | }; | |
| 22971 | ||
| 22972 | Calendar.prototype.normalizeValues = function normalizeValues (values) { | |
| 22973 | var calendar = this; | |
| 22974 | var newValues = []; | |
| 22975 | if (values && Array.isArray(values)) { | |
| 22976 | newValues = values.map(function (val) { return calendar.normalizeDate(val); }); | |
| 22977 | } | |
| 22978 | return newValues; | |
| 22979 | }; | |
| 22980 | ||
| 22981 | Calendar.prototype.initInput = function initInput () { | |
| 22982 | var calendar = this; | |
| 22983 | if (!calendar.$inputEl) { return; } | |
| 22984 | if (calendar.params.inputReadOnly) { calendar.$inputEl.prop('readOnly', true); } | |
| 22985 | }; | |
| 22986 | ||
| 22987 | Calendar.prototype.isPopover = function isPopover () { | |
| 22988 | var calendar = this; | |
| 22989 | var app = calendar.app; | |
| 22990 | var modal = calendar.modal; | |
| 22991 | var params = calendar.params; | |
| 22992 | if (params.openIn === 'sheet') { return false; } | |
| 22993 | if (modal && modal.type !== 'popover') { return false; } | |
| 22994 | ||
| 22995 | if (!calendar.inline && calendar.inputEl) { | |
| 22996 | if (params.openIn === 'popover') { return true; } | |
| 22997 | if (app.device.ios) { | |
| 22998 | return !!app.device.ipad; | |
| 22999 | } | |
| 23000 | if (app.width >= 768) { | |
| 23001 | return true; | |
| 23002 | } | |
| 5d51ea26 DC |
23003 | if (app.device.desktop && app.theme === 'aurora') { |
| 23004 | return true; | |
| 23005 | } | |
| 5309fbda DC |
23006 | } |
| 23007 | return false; | |
| 23008 | }; | |
| 23009 | ||
| 23010 | Calendar.prototype.formatDate = function formatDate (d) { | |
| 23011 | var calendar = this; | |
| 23012 | var date = new calendar.DateHandleClass(d); | |
| 23013 | var year = date.getFullYear(); | |
| 23014 | var month = date.getMonth(); | |
| 23015 | var month1 = month + 1; | |
| 23016 | var day = date.getDate(); | |
| 23017 | var weekDay = date.getDay(); | |
| 23018 | var ref = calendar.params; | |
| 23019 | var dateFormat = ref.dateFormat; | |
| 23020 | var monthNames = ref.monthNames; | |
| 23021 | var monthNamesShort = ref.monthNamesShort; | |
| 23022 | var dayNames = ref.dayNames; | |
| 23023 | var dayNamesShort = ref.dayNamesShort; | |
| 23024 | ||
| 23025 | return dateFormat | |
| 23026 | .replace(/yyyy/g, year) | |
| 23027 | .replace(/yy/g, String(year).substring(2)) | |
| 23028 | .replace(/mm/g, month1 < 10 ? ("0" + month1) : month1) | |
| 23029 | .replace(/m(\W+)/g, (month1 + "$1")) | |
| 23030 | .replace(/MM/g, monthNames[month]) | |
| 23031 | .replace(/M(\W+)/g, ((monthNamesShort[month]) + "$1")) | |
| 23032 | .replace(/dd/g, day < 10 ? ("0" + day) : day) | |
| 23033 | .replace(/d(\W+)/g, (day + "$1")) | |
| 23034 | .replace(/DD/g, dayNames[weekDay]) | |
| 23035 | .replace(/D(\W+)/g, ((dayNamesShort[weekDay]) + "$1")); | |
| 23036 | }; | |
| 23037 | ||
| 23038 | Calendar.prototype.formatValue = function formatValue () { | |
| 23039 | var calendar = this; | |
| 23040 | var value = calendar.value; | |
| 23041 | if (calendar.params.formatValue) { | |
| 23042 | return calendar.params.formatValue.call(calendar, value); | |
| 23043 | } | |
| 23044 | return value | |
| 23045 | .map(function (v) { return calendar.formatDate(v); }) | |
| 23046 | .join(calendar.params.rangePicker ? ' - ' : ', '); | |
| 23047 | }; | |
| 23048 | ||
| 23049 | Calendar.prototype.addValue = function addValue (newValue) { | |
| 23050 | var calendar = this; | |
| 23051 | var ref = calendar.params; | |
| 23052 | var multiple = ref.multiple; | |
| 23053 | var rangePicker = ref.rangePicker; | |
| 23054 | var rangePickerMinDays = ref.rangePickerMinDays; | |
| 23055 | var rangePickerMaxDays = ref.rangePickerMaxDays; | |
| 23056 | if (multiple) { | |
| 23057 | if (!calendar.value) { calendar.value = []; } | |
| 23058 | var inValuesIndex; | |
| 23059 | for (var i = 0; i < calendar.value.length; i += 1) { | |
| 23060 | if (new calendar.DateHandleClass(newValue).getTime() === new calendar.DateHandleClass(calendar.value[i]).getTime()) { | |
| 23061 | inValuesIndex = i; | |
| 23062 | } | |
| 23063 | } | |
| 23064 | if (typeof inValuesIndex === 'undefined') { | |
| 23065 | calendar.value.push(newValue); | |
| 23066 | } else { | |
| 23067 | calendar.value.splice(inValuesIndex, 1); | |
| 23068 | } | |
| 23069 | calendar.updateValue(); | |
| 23070 | } else if (rangePicker) { | |
| 23071 | if (!calendar.value) { calendar.value = []; } | |
| 23072 | if (calendar.value.length === 2 || calendar.value.length === 0) { | |
| 23073 | calendar.value = []; | |
| 23074 | } | |
| 23075 | ||
| 23076 | if ((calendar.value.length === 0 | |
| 23077 | || ((Math.abs(calendar.value[0].getTime() - newValue.getTime()) >= (rangePickerMinDays - 1) * 60 * 60 * 24 * 1000) && (rangePickerMaxDays === 0 || Math.abs(calendar.value[0].getTime() - newValue.getTime()) <= (rangePickerMaxDays - 1) * 60 * 60 * 24 * 1000)))) { calendar.value.push(newValue); } | |
| 23078 | else { calendar.value = []; } | |
| 23079 | ||
| 23080 | calendar.value.sort(function (a, b) { return a - b; }); | |
| 23081 | calendar.updateValue(); | |
| 23082 | } else { | |
| 23083 | calendar.value = [newValue]; | |
| 23084 | calendar.updateValue(); | |
| 23085 | } | |
| 23086 | }; | |
| 23087 | ||
| 23088 | Calendar.prototype.setValue = function setValue (values) { | |
| 23089 | var calendar = this; | |
| 5d51ea26 DC |
23090 | var currentValue = calendar.value; |
| 23091 | if (Array.isArray(currentValue) && Array.isArray(values) && currentValue.length === values.length) { | |
| 23092 | var equal = true; | |
| 23093 | currentValue.forEach(function (v, index) { | |
| 23094 | if (v !== values[index]) { equal = false; } | |
| 23095 | }); | |
| 23096 | if (equal) { return; } | |
| 23097 | } | |
| 5309fbda DC |
23098 | calendar.value = values; |
| 23099 | calendar.updateValue(); | |
| 23100 | }; | |
| 23101 | ||
| 23102 | Calendar.prototype.getValue = function getValue () { | |
| 23103 | var calendar = this; | |
| 23104 | return calendar.value; | |
| 23105 | }; | |
| 23106 | ||
| 23107 | Calendar.prototype.updateValue = function updateValue (onlyHeader) { | |
| 23108 | var calendar = this; | |
| 23109 | var $el = calendar.$el; | |
| 23110 | var $wrapperEl = calendar.$wrapperEl; | |
| 23111 | var $inputEl = calendar.$inputEl; | |
| 23112 | var value = calendar.value; | |
| 23113 | var params = calendar.params; | |
| 23114 | var i; | |
| 23115 | if ($el && $el.length > 0) { | |
| 23116 | $wrapperEl.find('.calendar-day-selected').removeClass('calendar-day-selected'); | |
| 23117 | var valueDate; | |
| 23118 | if (params.rangePicker && value.length === 2) { | |
| 23119 | for (i = new calendar.DateHandleClass(value[0]).getTime(); i <= new calendar.DateHandleClass(value[1]).getTime(); i += 24 * 60 * 60 * 1000) { | |
| 23120 | valueDate = new calendar.DateHandleClass(i); | |
| 23121 | $wrapperEl.find((".calendar-day[data-date=\"" + (valueDate.getFullYear()) + "-" + (valueDate.getMonth()) + "-" + (valueDate.getDate()) + "\"]")).addClass('calendar-day-selected'); | |
| 23122 | } | |
| 23123 | } else { | |
| 23124 | for (i = 0; i < calendar.value.length; i += 1) { | |
| 23125 | valueDate = new calendar.DateHandleClass(value[i]); | |
| 23126 | $wrapperEl.find((".calendar-day[data-date=\"" + (valueDate.getFullYear()) + "-" + (valueDate.getMonth()) + "-" + (valueDate.getDate()) + "\"]")).addClass('calendar-day-selected'); | |
| 23127 | } | |
| 23128 | } | |
| 23129 | } | |
| 23130 | if (!onlyHeader) { | |
| 23131 | calendar.emit('local::change calendarChange', calendar, value); | |
| 23132 | } | |
| 23133 | ||
| 23134 | ||
| 23135 | if (($inputEl && $inputEl.length) || params.header) { | |
| 23136 | var inputValue = calendar.formatValue(value); | |
| 23137 | if (params.header && $el && $el.length) { | |
| 23138 | $el.find('.calendar-selected-date').text(inputValue); | |
| 23139 | } | |
| 23140 | if ($inputEl && $inputEl.length && !onlyHeader) { | |
| 23141 | $inputEl.val(inputValue); | |
| 23142 | $inputEl.trigger('change'); | |
| 23143 | } | |
| 23144 | } | |
| 23145 | }; | |
| 23146 | ||
| 23147 | Calendar.prototype.updateCurrentMonthYear = function updateCurrentMonthYear (dir) { | |
| 23148 | var calendar = this; | |
| 23149 | var $months = calendar.$months; | |
| 23150 | var $el = calendar.$el; | |
| 23151 | var params = calendar.params; | |
| 23152 | if (typeof dir === 'undefined') { | |
| 23153 | calendar.currentMonth = parseInt($months.eq(1).attr('data-month'), 10); | |
| 23154 | calendar.currentYear = parseInt($months.eq(1).attr('data-year'), 10); | |
| 23155 | } else { | |
| 23156 | calendar.currentMonth = parseInt($months.eq(dir === 'next' ? ($months.length - 1) : 0).attr('data-month'), 10); | |
| 23157 | calendar.currentYear = parseInt($months.eq(dir === 'next' ? ($months.length - 1) : 0).attr('data-year'), 10); | |
| 23158 | } | |
| 23159 | $el.find('.current-month-value').text(params.monthNames[calendar.currentMonth]); | |
| 23160 | $el.find('.current-year-value').text(calendar.currentYear); | |
| 23161 | }; | |
| 23162 | ||
| 23163 | Calendar.prototype.update = function update () { | |
| 23164 | var calendar = this; | |
| 23165 | var currentYear = calendar.currentYear; | |
| 23166 | var currentMonth = calendar.currentMonth; | |
| 23167 | var $wrapperEl = calendar.$wrapperEl; | |
| 23168 | var currentDate = new calendar.DateHandleClass(currentYear, currentMonth); | |
| 23169 | var prevMonthHtml = calendar.renderMonth(currentDate, 'prev'); | |
| 23170 | var currentMonthHtml = calendar.renderMonth(currentDate); | |
| 23171 | var nextMonthHtml = calendar.renderMonth(currentDate, 'next'); | |
| 23172 | ||
| 23173 | $wrapperEl | |
| 23174 | .transition(0) | |
| 23175 | .html(("" + prevMonthHtml + currentMonthHtml + nextMonthHtml)) | |
| 23176 | .transform('translate3d(0,0,0)'); | |
| 23177 | calendar.$months = $wrapperEl.find('.calendar-month'); | |
| 23178 | calendar.monthsTranslate = 0; | |
| 23179 | calendar.setMonthsTranslate(); | |
| 23180 | calendar.$months.each(function (index, monthEl) { | |
| 23181 | calendar.emit( | |
| 23182 | 'local::monthAdd calendarMonthAdd', | |
| 23183 | monthEl | |
| 23184 | ); | |
| 23185 | }); | |
| 23186 | }; | |
| 23187 | ||
| 23188 | Calendar.prototype.onMonthChangeStart = function onMonthChangeStart (dir) { | |
| 23189 | var calendar = this; | |
| 23190 | var $months = calendar.$months; | |
| 23191 | var currentYear = calendar.currentYear; | |
| 23192 | var currentMonth = calendar.currentMonth; | |
| 23193 | calendar.updateCurrentMonthYear(dir); | |
| 23194 | $months.removeClass('calendar-month-current calendar-month-prev calendar-month-next'); | |
| 23195 | var currentIndex = dir === 'next' ? $months.length - 1 : 0; | |
| 23196 | ||
| 23197 | $months.eq(currentIndex).addClass('calendar-month-current'); | |
| 23198 | $months.eq(dir === 'next' ? currentIndex - 1 : currentIndex + 1).addClass(dir === 'next' ? 'calendar-month-prev' : 'calendar-month-next'); | |
| 23199 | ||
| 23200 | calendar.emit( | |
| 23201 | 'local::monthYearChangeStart calendarMonthYearChangeStart', | |
| 23202 | calendar, | |
| 23203 | currentYear, | |
| 23204 | currentMonth | |
| 23205 | ); | |
| 23206 | }; | |
| 23207 | ||
| 23208 | Calendar.prototype.onMonthChangeEnd = function onMonthChangeEnd (dir, rebuildBoth) { | |
| 23209 | var calendar = this; | |
| 23210 | var currentYear = calendar.currentYear; | |
| 23211 | var currentMonth = calendar.currentMonth; | |
| 23212 | var $wrapperEl = calendar.$wrapperEl; | |
| 23213 | var monthsTranslate = calendar.monthsTranslate; | |
| 23214 | calendar.animating = false; | |
| 23215 | var nextMonthHtml; | |
| 23216 | var prevMonthHtml; | |
| 23217 | var currentMonthHtml; | |
| 23218 | $wrapperEl | |
| 23219 | .find('.calendar-month:not(.calendar-month-prev):not(.calendar-month-current):not(.calendar-month-next)') | |
| 23220 | .remove(); | |
| 23221 | ||
| 23222 | if (typeof dir === 'undefined') { | |
| 23223 | dir = 'next'; // eslint-disable-line | |
| 23224 | rebuildBoth = true; // eslint-disable-line | |
| 23225 | } | |
| 23226 | if (!rebuildBoth) { | |
| 23227 | currentMonthHtml = calendar.renderMonth(new calendar.DateHandleClass(currentYear, currentMonth), dir); | |
| 23228 | } else { | |
| 23229 | $wrapperEl.find('.calendar-month-next, .calendar-month-prev').remove(); | |
| 23230 | prevMonthHtml = calendar.renderMonth(new calendar.DateHandleClass(currentYear, currentMonth), 'prev'); | |
| 23231 | nextMonthHtml = calendar.renderMonth(new calendar.DateHandleClass(currentYear, currentMonth), 'next'); | |
| 23232 | } | |
| 23233 | if (dir === 'next' || rebuildBoth) { | |
| 23234 | $wrapperEl.append(currentMonthHtml || nextMonthHtml); | |
| 23235 | } | |
| 23236 | if (dir === 'prev' || rebuildBoth) { | |
| 23237 | $wrapperEl.prepend(currentMonthHtml || prevMonthHtml); | |
| 23238 | } | |
| 23239 | var $months = $wrapperEl.find('.calendar-month'); | |
| 23240 | calendar.$months = $months; | |
| 23241 | calendar.setMonthsTranslate(monthsTranslate); | |
| 23242 | calendar.emit( | |
| 23243 | 'local::monthAdd calendarMonthAdd', | |
| 23244 | calendar, | |
| 23245 | dir === 'next' ? $months.eq($months.length - 1)[0] : $months.eq(0)[0] | |
| 23246 | ); | |
| 23247 | calendar.emit( | |
| 23248 | 'local::monthYearChangeEnd calendarMonthYearChangeEnd', | |
| 23249 | calendar, | |
| 23250 | currentYear, | |
| 23251 | currentMonth | |
| 23252 | ); | |
| 23253 | }; | |
| 23254 | ||
| 23255 | Calendar.prototype.setMonthsTranslate = function setMonthsTranslate (translate) { | |
| 23256 | var calendar = this; | |
| 23257 | var $months = calendar.$months; | |
| 23258 | var isH = calendar.isHorizontal; | |
| 23259 | var inverter = calendar.inverter; | |
| 23260 | // eslint-disable-next-line | |
| 23261 | translate = translate || calendar.monthsTranslate || 0; | |
| 23262 | if (typeof calendar.monthsTranslate === 'undefined') { | |
| 23263 | calendar.monthsTranslate = translate; | |
| 23264 | } | |
| 23265 | $months.removeClass('calendar-month-current calendar-month-prev calendar-month-next'); | |
| 23266 | var prevMonthTranslate = -(translate + 1) * 100 * inverter; | |
| 23267 | var currentMonthTranslate = -translate * 100 * inverter; | |
| 23268 | var nextMonthTranslate = -(translate - 1) * 100 * inverter; | |
| 23269 | $months.eq(0) | |
| 23270 | .transform(("translate3d(" + (isH ? prevMonthTranslate : 0) + "%, " + (isH ? 0 : prevMonthTranslate) + "%, 0)")) | |
| 23271 | .addClass('calendar-month-prev'); | |
| 23272 | $months.eq(1) | |
| 23273 | .transform(("translate3d(" + (isH ? currentMonthTranslate : 0) + "%, " + (isH ? 0 : currentMonthTranslate) + "%, 0)")) | |
| 23274 | .addClass('calendar-month-current'); | |
| 23275 | $months.eq(2) | |
| 23276 | .transform(("translate3d(" + (isH ? nextMonthTranslate : 0) + "%, " + (isH ? 0 : nextMonthTranslate) + "%, 0)")) | |
| 23277 | .addClass('calendar-month-next'); | |
| 23278 | }; | |
| 23279 | ||
| 23280 | Calendar.prototype.nextMonth = function nextMonth (transition) { | |
| 23281 | var calendar = this; | |
| 23282 | var params = calendar.params; | |
| 23283 | var $wrapperEl = calendar.$wrapperEl; | |
| 23284 | var inverter = calendar.inverter; | |
| 23285 | var isH = calendar.isHorizontal; | |
| 23286 | if (typeof transition === 'undefined' || typeof transition === 'object') { | |
| 23287 | transition = ''; // eslint-disable-line | |
| 23288 | if (!params.animate) { transition = 0; } // eslint-disable-line | |
| 23289 | } | |
| 23290 | var nextMonth = parseInt(calendar.$months.eq(calendar.$months.length - 1).attr('data-month'), 10); | |
| 23291 | var nextYear = parseInt(calendar.$months.eq(calendar.$months.length - 1).attr('data-year'), 10); | |
| 23292 | var nextDate = new calendar.DateHandleClass(nextYear, nextMonth); | |
| 23293 | var nextDateTime = nextDate.getTime(); | |
| 23294 | var transitionEndCallback = !calendar.animating; | |
| 23295 | if (params.maxDate) { | |
| 23296 | if (nextDateTime > new calendar.DateHandleClass(params.maxDate).getTime()) { | |
| 23297 | calendar.resetMonth(); | |
| 23298 | return; | |
| 23299 | } | |
| 23300 | } | |
| 23301 | calendar.monthsTranslate -= 1; | |
| 23302 | if (nextMonth === calendar.currentMonth) { | |
| 23303 | var nextMonthTranslate = -(calendar.monthsTranslate) * 100 * inverter; | |
| 23304 | var nextMonthHtml = $(calendar.renderMonth(nextDateTime, 'next')) | |
| 23305 | .transform(("translate3d(" + (isH ? nextMonthTranslate : 0) + "%, " + (isH ? 0 : nextMonthTranslate) + "%, 0)")) | |
| 23306 | .addClass('calendar-month-next'); | |
| 23307 | $wrapperEl.append(nextMonthHtml[0]); | |
| 23308 | calendar.$months = $wrapperEl.find('.calendar-month'); | |
| 23309 | calendar.emit( | |
| 23310 | 'local::monthAdd calendarMonthAdd', | |
| 23311 | calendar.$months.eq(calendar.$months.length - 1)[0] | |
| 23312 | ); | |
| 23313 | } | |
| 23314 | calendar.animating = true; | |
| 23315 | calendar.onMonthChangeStart('next'); | |
| 23316 | var translate = (calendar.monthsTranslate * 100) * inverter; | |
| 23317 | ||
| 23318 | $wrapperEl.transition(transition).transform(("translate3d(" + (isH ? translate : 0) + "%, " + (isH ? 0 : translate) + "%, 0)")); | |
| 23319 | if (transitionEndCallback) { | |
| 23320 | $wrapperEl.transitionEnd(function () { | |
| 23321 | calendar.onMonthChangeEnd('next'); | |
| 23322 | }); | |
| 23323 | } | |
| 23324 | if (!params.animate) { | |
| 23325 | calendar.onMonthChangeEnd('next'); | |
| 23326 | } | |
| 23327 | }; | |
| 23328 | ||
| 23329 | Calendar.prototype.prevMonth = function prevMonth (transition) { | |
| 23330 | var calendar = this; | |
| 23331 | var params = calendar.params; | |
| 23332 | var $wrapperEl = calendar.$wrapperEl; | |
| 23333 | var inverter = calendar.inverter; | |
| 23334 | var isH = calendar.isHorizontal; | |
| 23335 | if (typeof transition === 'undefined' || typeof transition === 'object') { | |
| 23336 | transition = ''; // eslint-disable-line | |
| 23337 | if (!params.animate) { transition = 0; } // eslint-disable-line | |
| 23338 | } | |
| 23339 | var prevMonth = parseInt(calendar.$months.eq(0).attr('data-month'), 10); | |
| 23340 | var prevYear = parseInt(calendar.$months.eq(0).attr('data-year'), 10); | |
| 23341 | var prevDate = new calendar.DateHandleClass(prevYear, prevMonth + 1, -1); | |
| 23342 | var prevDateTime = prevDate.getTime(); | |
| 23343 | var transitionEndCallback = !calendar.animating; | |
| 23344 | if (params.minDate) { | |
| 23345 | var minDate = new calendar.DateHandleClass(params.minDate); | |
| 23346 | minDate = new calendar.DateHandleClass(minDate.getFullYear(), minDate.getMonth(), 1); | |
| 23347 | if (prevDateTime < minDate.getTime()) { | |
| 23348 | calendar.resetMonth(); | |
| 23349 | return; | |
| 23350 | } | |
| 23351 | } | |
| 23352 | calendar.monthsTranslate += 1; | |
| 23353 | if (prevMonth === calendar.currentMonth) { | |
| 23354 | var prevMonthTranslate = -(calendar.monthsTranslate) * 100 * inverter; | |
| 23355 | var prevMonthHtml = $(calendar.renderMonth(prevDateTime, 'prev')) | |
| 23356 | .transform(("translate3d(" + (isH ? prevMonthTranslate : 0) + "%, " + (isH ? 0 : prevMonthTranslate) + "%, 0)")) | |
| 23357 | .addClass('calendar-month-prev'); | |
| 23358 | $wrapperEl.prepend(prevMonthHtml[0]); | |
| 23359 | calendar.$months = $wrapperEl.find('.calendar-month'); | |
| 23360 | calendar.emit( | |
| 23361 | 'local::monthAdd calendarMonthAdd', | |
| 23362 | calendar.$months.eq(0)[0] | |
| 23363 | ); | |
| 23364 | } | |
| 23365 | calendar.animating = true; | |
| 23366 | calendar.onMonthChangeStart('prev'); | |
| 23367 | var translate = (calendar.monthsTranslate * 100) * inverter; | |
| 23368 | $wrapperEl | |
| 23369 | .transition(transition) | |
| 23370 | .transform(("translate3d(" + (isH ? translate : 0) + "%, " + (isH ? 0 : translate) + "%, 0)")); | |
| 23371 | if (transitionEndCallback) { | |
| 23372 | $wrapperEl.transitionEnd(function () { | |
| 23373 | calendar.onMonthChangeEnd('prev'); | |
| 23374 | }); | |
| 23375 | } | |
| 23376 | if (!params.animate) { | |
| 23377 | calendar.onMonthChangeEnd('prev'); | |
| 23378 | } | |
| 23379 | }; | |
| 23380 | ||
| 23381 | Calendar.prototype.resetMonth = function resetMonth (transition) { | |
| 23382 | if ( transition === void 0 ) transition = ''; | |
| 23383 | ||
| 23384 | var calendar = this; | |
| 23385 | var $wrapperEl = calendar.$wrapperEl; | |
| 23386 | var inverter = calendar.inverter; | |
| 23387 | var isH = calendar.isHorizontal; | |
| 23388 | var monthsTranslate = calendar.monthsTranslate; | |
| 23389 | var translate = (monthsTranslate * 100) * inverter; | |
| 23390 | $wrapperEl | |
| 23391 | .transition(transition) | |
| 23392 | .transform(("translate3d(" + (isH ? translate : 0) + "%, " + (isH ? 0 : translate) + "%, 0)")); | |
| 23393 | }; | |
| 23394 | // eslint-disable-next-line | |
| 23395 | Calendar.prototype.setYearMonth = function setYearMonth (year, month, transition) { | |
| 23396 | var calendar = this; | |
| 23397 | var params = calendar.params; | |
| 23398 | var isH = calendar.isHorizontal; | |
| 23399 | var $wrapperEl = calendar.$wrapperEl; | |
| 23400 | var inverter = calendar.inverter; | |
| 23401 | // eslint-disable-next-line | |
| 23402 | if (typeof year === 'undefined') { year = calendar.currentYear; } | |
| 23403 | // eslint-disable-next-line | |
| 23404 | if (typeof month === 'undefined') { month = calendar.currentMonth; } | |
| 23405 | if (typeof transition === 'undefined' || typeof transition === 'object') { | |
| 23406 | // eslint-disable-next-line | |
| 23407 | transition = ''; | |
| 23408 | // eslint-disable-next-line | |
| 23409 | if (!params.animate) { transition = 0; } | |
| 23410 | } | |
| 23411 | var targetDate; | |
| 23412 | if (year < calendar.currentYear) { | |
| 23413 | targetDate = new calendar.DateHandleClass(year, month + 1, -1).getTime(); | |
| 23414 | } else { | |
| 23415 | targetDate = new calendar.DateHandleClass(year, month).getTime(); | |
| 23416 | } | |
| 23417 | if (params.maxDate && targetDate > new calendar.DateHandleClass(params.maxDate).getTime()) { | |
| 23418 | return false; | |
| 23419 | } | |
| 23420 | if (params.minDate) { | |
| 23421 | var minDate = new calendar.DateHandleClass(params.minDate); | |
| 23422 | minDate = new calendar.DateHandleClass(minDate.getFullYear(), minDate.getMonth(), 1); | |
| 23423 | if (targetDate < minDate.getTime()) { | |
| 23424 | return false; | |
| 23425 | } | |
| 23426 | } | |
| 23427 | var currentDate = new calendar.DateHandleClass(calendar.currentYear, calendar.currentMonth).getTime(); | |
| 23428 | var dir = targetDate > currentDate ? 'next' : 'prev'; | |
| 23429 | var newMonthHTML = calendar.renderMonth(new calendar.DateHandleClass(year, month)); | |
| 23430 | calendar.monthsTranslate = calendar.monthsTranslate || 0; | |
| 23431 | var prevTranslate = calendar.monthsTranslate; | |
| 23432 | var monthTranslate; | |
| 23433 | var transitionEndCallback = !calendar.animating; | |
| 23434 | if (targetDate > currentDate) { | |
| 23435 | // To next | |
| 23436 | calendar.monthsTranslate -= 1; | |
| 23437 | if (!calendar.animating) { calendar.$months.eq(calendar.$months.length - 1).remove(); } | |
| 23438 | $wrapperEl.append(newMonthHTML); | |
| 23439 | calendar.$months = $wrapperEl.find('.calendar-month'); | |
| 23440 | monthTranslate = -(prevTranslate - 1) * 100 * inverter; | |
| 23441 | calendar.$months | |
| 23442 | .eq(calendar.$months.length - 1) | |
| 23443 | .transform(("translate3d(" + (isH ? monthTranslate : 0) + "%, " + (isH ? 0 : monthTranslate) + "%, 0)")) | |
| 23444 | .addClass('calendar-month-next'); | |
| 23445 | } else { | |
| 23446 | // To prev | |
| 23447 | calendar.monthsTranslate += 1; | |
| 23448 | if (!calendar.animating) { calendar.$months.eq(0).remove(); } | |
| 23449 | $wrapperEl.prepend(newMonthHTML); | |
| 23450 | calendar.$months = $wrapperEl.find('.calendar-month'); | |
| 23451 | monthTranslate = -(prevTranslate + 1) * 100 * inverter; | |
| 23452 | calendar.$months | |
| 23453 | .eq(0) | |
| 23454 | .transform(("translate3d(" + (isH ? monthTranslate : 0) + "%, " + (isH ? 0 : monthTranslate) + "%, 0)")) | |
| 23455 | .addClass('calendar-month-prev'); | |
| 23456 | } | |
| 23457 | calendar.emit( | |
| 23458 | 'local::monthAdd calendarMonthAdd', | |
| 23459 | dir === 'next' | |
| 23460 | ? calendar.$months.eq(calendar.$months.length - 1)[0] | |
| 23461 | : calendar.$months.eq(0)[0] | |
| 23462 | ); | |
| 23463 | ||
| 23464 | calendar.animating = true; | |
| 23465 | calendar.onMonthChangeStart(dir); | |
| 23466 | var wrapperTranslate = (calendar.monthsTranslate * 100) * inverter; | |
| 23467 | $wrapperEl | |
| 23468 | .transition(transition) | |
| 23469 | .transform(("translate3d(" + (isH ? wrapperTranslate : 0) + "%, " + (isH ? 0 : wrapperTranslate) + "%, 0)")); | |
| 23470 | if (transitionEndCallback) { | |
| 23471 | $wrapperEl.transitionEnd(function () { | |
| 23472 | calendar.onMonthChangeEnd(dir, true); | |
| 23473 | }); | |
| 23474 | } | |
| 23475 | if (!params.animate) { | |
| 23476 | calendar.onMonthChangeEnd(dir); | |
| 23477 | } | |
| 23478 | }; | |
| 23479 | ||
| 23480 | Calendar.prototype.nextYear = function nextYear () { | |
| 23481 | var calendar = this; | |
| 23482 | calendar.setYearMonth(calendar.currentYear + 1); | |
| 23483 | }; | |
| 23484 | ||
| 23485 | Calendar.prototype.prevYear = function prevYear () { | |
| 23486 | var calendar = this; | |
| 23487 | calendar.setYearMonth(calendar.currentYear - 1); | |
| 23488 | }; | |
| 23489 | // eslint-disable-next-line | |
| 23490 | Calendar.prototype.dateInRange = function dateInRange (dayDate, range) { | |
| 23491 | var calendar = this; | |
| 23492 | var match = false; | |
| 23493 | var i; | |
| 23494 | if (!range) { return false; } | |
| 23495 | if (Array.isArray(range)) { | |
| 23496 | for (i = 0; i < range.length; i += 1) { | |
| 23497 | if (range[i].from || range[i].to) { | |
| 23498 | if (range[i].from && range[i].to) { | |
| 23499 | if ((dayDate <= new calendar.DateHandleClass(range[i].to).getTime()) && (dayDate >= new calendar.DateHandleClass(range[i].from).getTime())) { | |
| 23500 | match = true; | |
| 23501 | } | |
| 23502 | } else if (range[i].from) { | |
| 23503 | if (dayDate >= new calendar.DateHandleClass(range[i].from).getTime()) { | |
| 23504 | match = true; | |
| 23505 | } | |
| 23506 | } else if (range[i].to) { | |
| 23507 | if (dayDate <= new calendar.DateHandleClass(range[i].to).getTime()) { | |
| 23508 | match = true; | |
| 23509 | } | |
| 23510 | } | |
| 23511 | } else if (range[i].date) { | |
| 23512 | if (dayDate === new calendar.DateHandleClass(range[i].date).getTime()) { | |
| 23513 | match = true; | |
| 23514 | } | |
| 23515 | } else if (dayDate === new calendar.DateHandleClass(range[i]).getTime()) { | |
| 23516 | match = true; | |
| 23517 | } | |
| 23518 | } | |
| 23519 | } else if (range.from || range.to) { | |
| 23520 | if (range.from && range.to) { | |
| 23521 | if ((dayDate <= new calendar.DateHandleClass(range.to).getTime()) && (dayDate >= new calendar.DateHandleClass(range.from).getTime())) { | |
| 23522 | match = true; | |
| 23523 | } | |
| 23524 | } else if (range.from) { | |
| 23525 | if (dayDate >= new calendar.DateHandleClass(range.from).getTime()) { | |
| 23526 | match = true; | |
| 23527 | } | |
| 23528 | } else if (range.to) { | |
| 23529 | if (dayDate <= new calendar.DateHandleClass(range.to).getTime()) { | |
| 23530 | match = true; | |
| 23531 | } | |
| 23532 | } | |
| 23533 | } else if (range.date) { | |
| 23534 | match = dayDate === new calendar.DateHandleClass(range.date).getTime(); | |
| 23535 | } else if (typeof range === 'function') { | |
| 23536 | match = range(new calendar.DateHandleClass(dayDate)); | |
| 23537 | } | |
| 23538 | return match; | |
| 23539 | }; | |
| 23540 | // eslint-disable-next-line | |
| 23541 | Calendar.prototype.daysInMonth = function daysInMonth (date) { | |
| 23542 | var calendar = this; | |
| 23543 | var d = new calendar.DateHandleClass(date); | |
| 23544 | return new calendar.DateHandleClass(d.getFullYear(), d.getMonth() + 1, 0).getDate(); | |
| 23545 | }; | |
| 23546 | ||
| 23547 | Calendar.prototype.renderMonths = function renderMonths (date) { | |
| 23548 | var calendar = this; | |
| 23549 | if (calendar.params.renderMonths) { | |
| 23550 | return calendar.params.renderMonths.call(calendar, date); | |
| 23551 | } | |
| 23552 | return ("\n <div class=\"calendar-months-wrapper\">\n " + (calendar.renderMonth(date, 'prev')) + "\n " + (calendar.renderMonth(date)) + "\n " + (calendar.renderMonth(date, 'next')) + "\n </div>\n ").trim(); | |
| 23553 | }; | |
| 23554 | ||
| 23555 | Calendar.prototype.renderMonth = function renderMonth (d, offset) { | |
| 23556 | var calendar = this; | |
| 23557 | var params = calendar.params; | |
| 23558 | var value = calendar.value; | |
| 23559 | if (params.renderMonth) { | |
| 23560 | return params.renderMonth.call(calendar, d, offset); | |
| 23561 | } | |
| 23562 | var date = new calendar.DateHandleClass(d); | |
| 23563 | var year = date.getFullYear(); | |
| 23564 | var month = date.getMonth(); | |
| 23565 | ||
| 23566 | if (offset === 'next') { | |
| 23567 | if (month === 11) { date = new calendar.DateHandleClass(year + 1, 0); } | |
| 23568 | else { date = new calendar.DateHandleClass(year, month + 1, 1); } | |
| 23569 | } | |
| 23570 | if (offset === 'prev') { | |
| 23571 | if (month === 0) { date = new calendar.DateHandleClass(year - 1, 11); } | |
| 23572 | else { date = new calendar.DateHandleClass(year, month - 1, 1); } | |
| 23573 | } | |
| 23574 | if (offset === 'next' || offset === 'prev') { | |
| 23575 | month = date.getMonth(); | |
| 23576 | year = date.getFullYear(); | |
| 23577 | } | |
| 23578 | ||
| 23579 | var currentValues = []; | |
| 23580 | var today = new calendar.DateHandleClass().setHours(0, 0, 0, 0); | |
| 23581 | var minDate = params.minDate ? new calendar.DateHandleClass(params.minDate).getTime() : null; | |
| 23582 | var maxDate = params.maxDate ? new calendar.DateHandleClass(params.maxDate).getTime() : null; | |
| 23583 | var rows = 6; | |
| 23584 | var cols = 7; | |
| 23585 | var daysInPrevMonth = calendar.daysInMonth(new calendar.DateHandleClass(date.getFullYear(), date.getMonth()).getTime() - (10 * 24 * 60 * 60 * 1000)); | |
| 23586 | var daysInMonth = calendar.daysInMonth(date); | |
| 23587 | var minDayNumber = params.firstDay === 6 ? 0 : 1; | |
| 23588 | ||
| 23589 | var monthHtml = ''; | |
| 23590 | var dayIndex = 0 + (params.firstDay - 1); | |
| 23591 | var disabled; | |
| 23592 | var hasEvents; | |
| 23593 | var firstDayOfMonthIndex = new calendar.DateHandleClass(date.getFullYear(), date.getMonth()).getDay(); | |
| 23594 | if (firstDayOfMonthIndex === 0) { firstDayOfMonthIndex = 7; } | |
| 23595 | ||
| 23596 | if (value && value.length) { | |
| 23597 | for (var i = 0; i < value.length; i += 1) { | |
| 23598 | currentValues.push(new calendar.DateHandleClass(value[i]).setHours(0, 0, 0, 0)); | |
| 23599 | } | |
| 23600 | } | |
| 23601 | ||
| 23602 | for (var row = 1; row <= rows; row += 1) { | |
| 23603 | var rowHtml = ''; | |
| 23604 | var loop = function ( col ) { | |
| 23605 | dayIndex += 1; | |
| 23606 | var dayDate = (void 0); | |
| 23607 | var dayNumber = dayIndex - firstDayOfMonthIndex; | |
| 23608 | var addClass = ''; | |
| 23609 | if (row === 1 && col === 1 && dayNumber > minDayNumber && params.firstDay !== 1) { | |
| 23610 | dayIndex -= 7; | |
| 23611 | dayNumber = dayIndex - firstDayOfMonthIndex; | |
| 23612 | } | |
| 23613 | ||
| 23614 | var weekDayIndex = ((col - 1) + params.firstDay > 6) | |
| 23615 | ? ((col - 1 - 7) + params.firstDay) | |
| 23616 | : ((col - 1) + params.firstDay); | |
| 23617 | ||
| 23618 | if (dayNumber < 0) { | |
| 23619 | dayNumber = daysInPrevMonth + dayNumber + 1; | |
| 23620 | addClass += ' calendar-day-prev'; | |
| 23621 | dayDate = new calendar.DateHandleClass(month - 1 < 0 ? year - 1 : year, month - 1 < 0 ? 11 : month - 1, dayNumber).getTime(); | |
| 23622 | } else { | |
| 23623 | dayNumber += 1; | |
| 23624 | if (dayNumber > daysInMonth) { | |
| 23625 | dayNumber -= daysInMonth; | |
| 23626 | addClass += ' calendar-day-next'; | |
| 23627 | dayDate = new calendar.DateHandleClass(month + 1 > 11 ? year + 1 : year, month + 1 > 11 ? 0 : month + 1, dayNumber).getTime(); | |
| 23628 | } else { | |
| 23629 | dayDate = new calendar.DateHandleClass(year, month, dayNumber).getTime(); | |
| 23630 | } | |
| 23631 | } | |
| 23632 | // Today | |
| 23633 | if (dayDate === today) { addClass += ' calendar-day-today'; } | |
| 23634 | ||
| 23635 | // Selected | |
| 23636 | if (params.rangePicker && currentValues.length === 2) { | |
| 23637 | if (dayDate >= currentValues[0] && dayDate <= currentValues[1]) { addClass += ' calendar-day-selected'; } | |
| 23638 | } else if (currentValues.indexOf(dayDate) >= 0) { addClass += ' calendar-day-selected'; } | |
| 23639 | // Weekend | |
| 23640 | if (params.weekendDays.indexOf(weekDayIndex) >= 0) { | |
| 23641 | addClass += ' calendar-day-weekend'; | |
| 23642 | } | |
| 23643 | // Events | |
| 23644 | var eventsHtml = ''; | |
| 23645 | hasEvents = false; | |
| 23646 | if (params.events) { | |
| 23647 | if (calendar.dateInRange(dayDate, params.events)) { | |
| 23648 | hasEvents = true; | |
| 23649 | } | |
| 23650 | } | |
| 23651 | if (hasEvents) { | |
| 23652 | addClass += ' calendar-day-has-events'; | |
| 23653 | eventsHtml = "\n <span class=\"calendar-day-events\">\n <span class=\"calendar-day-event\"></span>\n </span>\n "; | |
| 23654 | if (Array.isArray(params.events)) { | |
| 23655 | var eventDots = []; | |
| 23656 | params.events.forEach(function (ev) { | |
| 23657 | var color = ev.color || ''; | |
| 23658 | if (eventDots.indexOf(color) < 0 && calendar.dateInRange(dayDate, ev)) { | |
| 23659 | eventDots.push(color); | |
| 23660 | } | |
| 23661 | }); | |
| 23662 | eventsHtml = "\n <span class=\"calendar-day-events\">\n " + (eventDots.map(function (color) { return ("\n <span class=\"calendar-day-event\" style=\"" + (color ? ("background-color: " + color) : '') + "\"></span>\n ").trim(); }).join('')) + "\n </span>\n "; | |
| 23663 | } | |
| 23664 | } | |
| 23665 | // Custom Ranges | |
| 23666 | if (params.rangesClasses) { | |
| 23667 | for (var k = 0; k < params.rangesClasses.length; k += 1) { | |
| 23668 | if (calendar.dateInRange(dayDate, params.rangesClasses[k].range)) { | |
| 23669 | addClass += " " + (params.rangesClasses[k].cssClass); | |
| 23670 | } | |
| 23671 | } | |
| 23672 | } | |
| 23673 | // Disabled | |
| 23674 | disabled = false; | |
| 23675 | if ((minDate && dayDate < minDate) || (maxDate && dayDate > maxDate)) { | |
| 23676 | disabled = true; | |
| 23677 | } | |
| 23678 | if (params.disabled) { | |
| 23679 | if (calendar.dateInRange(dayDate, params.disabled)) { | |
| 23680 | disabled = true; | |
| 23681 | } | |
| 23682 | } | |
| 23683 | if (disabled) { | |
| 23684 | addClass += ' calendar-day-disabled'; | |
| 23685 | } | |
| 23686 | ||
| 23687 | dayDate = new calendar.DateHandleClass(dayDate); | |
| 23688 | var dayYear = dayDate.getFullYear(); | |
| 23689 | var dayMonth = dayDate.getMonth(); | |
| 23690 | rowHtml += ("\n <div data-year=\"" + dayYear + "\" data-month=\"" + dayMonth + "\" data-day=\"" + dayNumber + "\" class=\"calendar-day" + addClass + "\" data-date=\"" + dayYear + "-" + dayMonth + "-" + dayNumber + "\">\n <span class=\"calendar-day-number\">" + dayNumber + eventsHtml + "</span>\n </div>").trim(); | |
| 23691 | }; | |
| 23692 | ||
| 23693 | for (var col = 1; col <= cols; col += 1) loop( col ); | |
| 23694 | monthHtml += "<div class=\"calendar-row\">" + rowHtml + "</div>"; | |
| 23695 | } | |
| 23696 | monthHtml = "<div class=\"calendar-month\" data-year=\"" + year + "\" data-month=\"" + month + "\">" + monthHtml + "</div>"; | |
| 23697 | return monthHtml; | |
| 23698 | }; | |
| 23699 | ||
| 23700 | Calendar.prototype.renderWeekHeader = function renderWeekHeader () { | |
| 23701 | var calendar = this; | |
| 23702 | if (calendar.params.renderWeekHeader) { | |
| 23703 | return calendar.params.renderWeekHeader.call(calendar); | |
| 23704 | } | |
| 23705 | var params = calendar.params; | |
| 23706 | var weekDaysHtml = ''; | |
| 23707 | for (var i = 0; i < 7; i += 1) { | |
| 23708 | var dayIndex = (i + params.firstDay > 6) | |
| 23709 | ? ((i - 7) + params.firstDay) | |
| 23710 | : (i + params.firstDay); | |
| 23711 | var dayName = params.dayNamesShort[dayIndex]; | |
| 23712 | weekDaysHtml += "<div class=\"calendar-week-day\">" + dayName + "</div>"; | |
| 23713 | } | |
| 23714 | return ("\n <div class=\"calendar-week-header\">\n " + weekDaysHtml + "\n </div>\n ").trim(); | |
| 23715 | }; | |
| 23716 | ||
| 23717 | Calendar.prototype.renderMonthSelector = function renderMonthSelector () { | |
| 23718 | var calendar = this; | |
| 23719 | if (calendar.params.renderMonthSelector) { | |
| 23720 | return calendar.params.renderMonthSelector.call(calendar); | |
| 23721 | } | |
| 23722 | ||
| 5d51ea26 | 23723 | return "\n <div class=\"calendar-month-selector\">\n <a class=\"link icon-only calendar-prev-month-button\">\n <i class=\"icon icon-prev\"></i>\n </a>\n <span class=\"current-month-value\"></span>\n <a class=\"link icon-only calendar-next-month-button\">\n <i class=\"icon icon-next\"></i>\n </a>\n </div>\n ".trim(); |
| 5309fbda DC |
23724 | }; |
| 23725 | ||
| 23726 | Calendar.prototype.renderYearSelector = function renderYearSelector () { | |
| 23727 | var calendar = this; | |
| 23728 | if (calendar.params.renderYearSelector) { | |
| 23729 | return calendar.params.renderYearSelector.call(calendar); | |
| 23730 | } | |
| 5d51ea26 | 23731 | return "\n <div class=\"calendar-year-selector\">\n <a class=\"link icon-only calendar-prev-year-button\">\n <i class=\"icon icon-prev\"></i>\n </a>\n <span class=\"current-year-value\"></span>\n <a class=\"link icon-only calendar-next-year-button\">\n <i class=\"icon icon-next\"></i>\n </a>\n </div>\n ".trim(); |
| 5309fbda DC |
23732 | }; |
| 23733 | ||
| 23734 | Calendar.prototype.renderHeader = function renderHeader () { | |
| 23735 | var calendar = this; | |
| 23736 | if (calendar.params.renderHeader) { | |
| 23737 | return calendar.params.renderHeader.call(calendar); | |
| 23738 | } | |
| 23739 | return ("\n <div class=\"calendar-header\">\n <div class=\"calendar-selected-date\">" + (calendar.params.headerPlaceholder) + "</div>\n </div>\n ").trim(); | |
| 23740 | }; | |
| 23741 | ||
| 23742 | Calendar.prototype.renderFooter = function renderFooter () { | |
| 23743 | var calendar = this; | |
| 23744 | var app = calendar.app; | |
| 23745 | if (calendar.params.renderFooter) { | |
| 23746 | return calendar.params.renderFooter.call(calendar); | |
| 23747 | } | |
| 5d51ea26 | 23748 | return ("\n <div class=\"calendar-footer\">\n <a class=\"" + (app.theme === 'md' ? 'button' : 'link') + " calendar-close sheet-close popover-close\">" + (calendar.params.toolbarCloseText) + "</a>\n </div>\n ").trim(); |
| 5309fbda DC |
23749 | }; |
| 23750 | ||
| 23751 | Calendar.prototype.renderToolbar = function renderToolbar () { | |
| 23752 | var calendar = this; | |
| 23753 | if (calendar.params.renderToolbar) { | |
| 23754 | return calendar.params.renderToolbar.call(calendar, calendar); | |
| 23755 | } | |
| 5d51ea26 | 23756 | return ("\n <div class=\"toolbar toolbar-top no-shadow\">\n <div class=\"toolbar-inner\">\n " + (calendar.params.monthSelector ? calendar.renderMonthSelector() : '') + "\n " + (calendar.params.yearSelector ? calendar.renderYearSelector() : '') + "\n </div>\n </div>\n ").trim(); |
| 5309fbda DC |
23757 | }; |
| 23758 | // eslint-disable-next-line | |
| 23759 | Calendar.prototype.renderInline = function renderInline () { | |
| 23760 | var calendar = this; | |
| 23761 | var ref = calendar.params; | |
| 23762 | var cssClass = ref.cssClass; | |
| 23763 | var toolbar = ref.toolbar; | |
| 23764 | var header = ref.header; | |
| 23765 | var footer = ref.footer; | |
| 23766 | var rangePicker = ref.rangePicker; | |
| 23767 | var weekHeader = ref.weekHeader; | |
| 23768 | var value = calendar.value; | |
| 23769 | var date = value && value.length ? value[0] : new calendar.DateHandleClass().setHours(0, 0, 0); | |
| 23770 | var inlineHtml = ("\n <div class=\"calendar calendar-inline " + (rangePicker ? 'calendar-range' : '') + " " + (cssClass || '') + "\">\n " + (header ? calendar.renderHeader() : '') + "\n " + (toolbar ? calendar.renderToolbar() : '') + "\n " + (weekHeader ? calendar.renderWeekHeader() : '') + "\n <div class=\"calendar-months\">\n " + (calendar.renderMonths(date)) + "\n </div>\n " + (footer ? calendar.renderFooter() : '') + "\n </div>\n ").trim(); | |
| 23771 | ||
| 23772 | return inlineHtml; | |
| 23773 | }; | |
| 23774 | ||
| 23775 | Calendar.prototype.renderCustomModal = function renderCustomModal () { | |
| 23776 | var calendar = this; | |
| 23777 | var ref = calendar.params; | |
| 23778 | var cssClass = ref.cssClass; | |
| 23779 | var toolbar = ref.toolbar; | |
| 23780 | var header = ref.header; | |
| 23781 | var footer = ref.footer; | |
| 23782 | var rangePicker = ref.rangePicker; | |
| 23783 | var weekHeader = ref.weekHeader; | |
| 23784 | var value = calendar.value; | |
| 23785 | var date = value && value.length ? value[0] : new calendar.DateHandleClass().setHours(0, 0, 0); | |
| 23786 | var sheetHtml = ("\n <div class=\"calendar calendar-modal " + (rangePicker ? 'calendar-range' : '') + " " + (cssClass || '') + "\">\n " + (header ? calendar.renderHeader() : '') + "\n " + (toolbar ? calendar.renderToolbar() : '') + "\n " + (weekHeader ? calendar.renderWeekHeader() : '') + "\n <div class=\"calendar-months\">\n " + (calendar.renderMonths(date)) + "\n </div>\n " + (footer ? calendar.renderFooter() : '') + "\n </div>\n ").trim(); | |
| 23787 | ||
| 23788 | return sheetHtml; | |
| 23789 | }; | |
| 23790 | ||
| 23791 | Calendar.prototype.renderSheet = function renderSheet () { | |
| 23792 | var calendar = this; | |
| 23793 | var ref = calendar.params; | |
| 23794 | var cssClass = ref.cssClass; | |
| 23795 | var toolbar = ref.toolbar; | |
| 23796 | var header = ref.header; | |
| 23797 | var footer = ref.footer; | |
| 23798 | var rangePicker = ref.rangePicker; | |
| 23799 | var weekHeader = ref.weekHeader; | |
| 23800 | var value = calendar.value; | |
| 23801 | var date = value && value.length ? value[0] : new calendar.DateHandleClass().setHours(0, 0, 0); | |
| 23802 | var sheetHtml = ("\n <div class=\"sheet-modal calendar calendar-sheet " + (rangePicker ? 'calendar-range' : '') + " " + (cssClass || '') + "\">\n " + (header ? calendar.renderHeader() : '') + "\n " + (toolbar ? calendar.renderToolbar() : '') + "\n " + (weekHeader ? calendar.renderWeekHeader() : '') + "\n <div class=\"sheet-modal-inner calendar-months\">\n " + (calendar.renderMonths(date)) + "\n </div>\n " + (footer ? calendar.renderFooter() : '') + "\n </div>\n ").trim(); | |
| 23803 | ||
| 23804 | return sheetHtml; | |
| 23805 | }; | |
| 23806 | ||
| 23807 | Calendar.prototype.renderPopover = function renderPopover () { | |
| 23808 | var calendar = this; | |
| 23809 | var ref = calendar.params; | |
| 23810 | var cssClass = ref.cssClass; | |
| 23811 | var toolbar = ref.toolbar; | |
| 23812 | var header = ref.header; | |
| 23813 | var footer = ref.footer; | |
| 23814 | var rangePicker = ref.rangePicker; | |
| 23815 | var weekHeader = ref.weekHeader; | |
| 23816 | var value = calendar.value; | |
| 23817 | var date = value && value.length ? value[0] : new calendar.DateHandleClass().setHours(0, 0, 0); | |
| 23818 | var popoverHtml = ("\n <div class=\"popover calendar-popover\">\n <div class=\"popover-inner\">\n <div class=\"calendar " + (rangePicker ? 'calendar-range' : '') + " " + (cssClass || '') + "\">\n " + (header ? calendar.renderHeader() : '') + "\n " + (toolbar ? calendar.renderToolbar() : '') + "\n " + (weekHeader ? calendar.renderWeekHeader() : '') + "\n <div class=\"calendar-months\">\n " + (calendar.renderMonths(date)) + "\n </div>\n " + (footer ? calendar.renderFooter() : '') + "\n </div>\n </div>\n </div>\n ").trim(); | |
| 23819 | ||
| 23820 | return popoverHtml; | |
| 23821 | }; | |
| 23822 | ||
| 23823 | Calendar.prototype.render = function render () { | |
| 23824 | var calendar = this; | |
| 23825 | var params = calendar.params; | |
| 23826 | if (params.render) { return params.render.call(calendar); } | |
| 23827 | if (!calendar.inline) { | |
| 23828 | var modalType = params.openIn; | |
| 23829 | if (modalType === 'auto') { modalType = calendar.isPopover() ? 'popover' : 'sheet'; } | |
| 23830 | ||
| 23831 | if (modalType === 'popover') { return calendar.renderPopover(); } | |
| 23832 | if (modalType === 'sheet') { return calendar.renderSheet(); } | |
| 23833 | return calendar.renderCustomModal(); | |
| 23834 | } | |
| 23835 | return calendar.renderInline(); | |
| 23836 | }; | |
| 23837 | ||
| 23838 | Calendar.prototype.onOpen = function onOpen () { | |
| 23839 | var calendar = this; | |
| 23840 | var initialized = calendar.initialized; | |
| 23841 | var $el = calendar.$el; | |
| 23842 | var app = calendar.app; | |
| 23843 | var $inputEl = calendar.$inputEl; | |
| 23844 | var inline = calendar.inline; | |
| 23845 | var value = calendar.value; | |
| 23846 | var params = calendar.params; | |
| 23847 | calendar.closing = false; | |
| 23848 | calendar.opened = true; | |
| 23849 | calendar.opening = true; | |
| 23850 | ||
| 23851 | // Init main events | |
| 23852 | calendar.attachCalendarEvents(); | |
| 23853 | ||
| 23854 | var updateValue = !value && params.value; | |
| 23855 | ||
| 23856 | // Set value | |
| 23857 | if (!initialized) { | |
| 23858 | if (value) { calendar.setValue(value, 0); } | |
| 23859 | else if (params.value) { | |
| 23860 | calendar.setValue(calendar.normalizeValues(params.value), 0); | |
| 23861 | } | |
| 23862 | } else if (value) { | |
| 23863 | calendar.setValue(value, 0); | |
| 23864 | } | |
| 23865 | ||
| 23866 | // Update current month and year | |
| 23867 | calendar.updateCurrentMonthYear(); | |
| 23868 | ||
| 23869 | // Set initial translate | |
| 23870 | calendar.monthsTranslate = 0; | |
| 23871 | calendar.setMonthsTranslate(); | |
| 23872 | ||
| 23873 | // Update input value | |
| 23874 | if (updateValue) { calendar.updateValue(); } | |
| 23875 | else if (params.header && value) { | |
| 23876 | calendar.updateValue(true); | |
| 23877 | } | |
| 23878 | ||
| 23879 | // Extra focus | |
| 23880 | if (!inline && $inputEl && $inputEl.length && app.theme === 'md') { | |
| 23881 | $inputEl.trigger('focus'); | |
| 23882 | } | |
| 23883 | ||
| 23884 | calendar.initialized = true; | |
| 23885 | ||
| 23886 | calendar.$months.each(function (index, monthEl) { | |
| 23887 | calendar.emit('local::monthAdd calendarMonthAdd', monthEl); | |
| 23888 | }); | |
| 23889 | ||
| 23890 | // Trigger events | |
| 23891 | if ($el) { | |
| 23892 | $el.trigger('calendar:open', calendar); | |
| 23893 | } | |
| 23894 | if ($inputEl) { | |
| 23895 | $inputEl.trigger('calendar:open', calendar); | |
| 23896 | } | |
| 23897 | calendar.emit('local::open calendarOpen', calendar); | |
| 23898 | }; | |
| 23899 | ||
| 23900 | Calendar.prototype.onOpened = function onOpened () { | |
| 23901 | var calendar = this; | |
| 23902 | calendar.opening = false; | |
| 23903 | if (calendar.$el) { | |
| 23904 | calendar.$el.trigger('calendar:opened', calendar); | |
| 23905 | } | |
| 23906 | if (calendar.$inputEl) { | |
| 23907 | calendar.$inputEl.trigger('calendar:opened', calendar); | |
| 23908 | } | |
| 23909 | calendar.emit('local::opened calendarOpened', calendar); | |
| 23910 | }; | |
| 23911 | ||
| 23912 | Calendar.prototype.onClose = function onClose () { | |
| 23913 | var calendar = this; | |
| 23914 | var app = calendar.app; | |
| 23915 | calendar.opening = false; | |
| 23916 | calendar.closing = true; | |
| 23917 | ||
| 23918 | if (calendar.$inputEl && app.theme === 'md') { | |
| 23919 | calendar.$inputEl.trigger('blur'); | |
| 23920 | } | |
| 23921 | if (calendar.detachCalendarEvents) { | |
| 23922 | calendar.detachCalendarEvents(); | |
| 23923 | } | |
| 23924 | ||
| 23925 | if (calendar.$el) { | |
| 23926 | calendar.$el.trigger('calendar:close', calendar); | |
| 23927 | } | |
| 23928 | if (calendar.$inputEl) { | |
| 23929 | calendar.$inputEl.trigger('calendar:close', calendar); | |
| 23930 | } | |
| 23931 | calendar.emit('local::close calendarClose', calendar); | |
| 23932 | }; | |
| 23933 | ||
| 23934 | Calendar.prototype.onClosed = function onClosed () { | |
| 23935 | var calendar = this; | |
| 23936 | calendar.opened = false; | |
| 23937 | calendar.closing = false; | |
| 23938 | ||
| 23939 | if (!calendar.inline) { | |
| 23940 | Utils.nextTick(function () { | |
| 23941 | if (calendar.modal && calendar.modal.el && calendar.modal.destroy) { | |
| 23942 | if (!calendar.params.routableModals) { | |
| 23943 | calendar.modal.destroy(); | |
| 23944 | } | |
| 23945 | } | |
| 23946 | delete calendar.modal; | |
| 23947 | }); | |
| 23948 | } | |
| 23949 | if (calendar.$el) { | |
| 23950 | calendar.$el.trigger('calendar:closed', calendar); | |
| 23951 | } | |
| 23952 | if (calendar.$inputEl) { | |
| 23953 | calendar.$inputEl.trigger('calendar:closed', calendar); | |
| 23954 | } | |
| 23955 | calendar.emit('local::closed calendarClosed', calendar); | |
| 23956 | }; | |
| 23957 | ||
| 23958 | Calendar.prototype.open = function open () { | |
| 23959 | var obj; | |
| 23960 | ||
| 23961 | var calendar = this; | |
| 23962 | var app = calendar.app; | |
| 23963 | var opened = calendar.opened; | |
| 23964 | var inline = calendar.inline; | |
| 23965 | var $inputEl = calendar.$inputEl; | |
| 23966 | var params = calendar.params; | |
| 23967 | if (opened) { return; } | |
| 23968 | ||
| 23969 | if (inline) { | |
| 23970 | calendar.$el = $(calendar.render()); | |
| 23971 | calendar.$el[0].f7Calendar = calendar; | |
| 23972 | calendar.$wrapperEl = calendar.$el.find('.calendar-months-wrapper'); | |
| 23973 | calendar.$months = calendar.$wrapperEl.find('.calendar-month'); | |
| 23974 | calendar.$containerEl.append(calendar.$el); | |
| 23975 | calendar.onOpen(); | |
| 23976 | calendar.onOpened(); | |
| 23977 | return; | |
| 23978 | } | |
| 23979 | var modalType = params.openIn; | |
| 23980 | if (modalType === 'auto') { | |
| 23981 | modalType = calendar.isPopover() ? 'popover' : 'sheet'; | |
| 23982 | } | |
| 23983 | var modalContent = calendar.render(); | |
| 23984 | ||
| 23985 | var modalParams = { | |
| 23986 | targetEl: $inputEl, | |
| 23987 | scrollToEl: calendar.params.scrollToInput ? $inputEl : undefined, | |
| 23988 | content: modalContent, | |
| 23989 | backdrop: calendar.params.backdrop === true || (modalType === 'popover' && app.params.popover.backdrop !== false && calendar.params.backdrop !== false), | |
| 23990 | closeByBackdropClick: calendar.params.closeByBackdropClick, | |
| 23991 | on: { | |
| 23992 | open: function open() { | |
| 23993 | var modal = this; | |
| 23994 | calendar.modal = modal; | |
| 23995 | calendar.$el = modalType === 'popover' ? modal.$el.find('.calendar') : modal.$el; | |
| 23996 | calendar.$wrapperEl = calendar.$el.find('.calendar-months-wrapper'); | |
| 23997 | calendar.$months = calendar.$wrapperEl.find('.calendar-month'); | |
| 23998 | calendar.$el[0].f7Calendar = calendar; | |
| 23999 | if (modalType === 'customModal') { | |
| 24000 | $(calendar.$el).find('.calendar-close').once('click', function () { | |
| 24001 | calendar.close(); | |
| 24002 | }); | |
| 24003 | } | |
| 24004 | calendar.onOpen(); | |
| 24005 | }, | |
| 24006 | opened: function opened() { calendar.onOpened(); }, | |
| 24007 | close: function close() { calendar.onClose(); }, | |
| 24008 | closed: function closed() { calendar.onClosed(); }, | |
| 24009 | }, | |
| 24010 | }; | |
| 24011 | if (calendar.params.routableModals) { | |
| 24012 | calendar.view.router.navigate({ | |
| 24013 | url: calendar.url, | |
| 24014 | route: ( obj = { | |
| 24015 | path: calendar.url | |
| 24016 | }, obj[modalType] = modalParams, obj ), | |
| 24017 | }); | |
| 24018 | } else { | |
| 24019 | calendar.modal = app[modalType].create(modalParams); | |
| 24020 | calendar.modal.open(); | |
| 24021 | } | |
| 24022 | }; | |
| 24023 | ||
| 24024 | Calendar.prototype.close = function close () { | |
| 24025 | var calendar = this; | |
| 24026 | var opened = calendar.opened; | |
| 24027 | var inline = calendar.inline; | |
| 24028 | if (!opened) { return; } | |
| 24029 | if (inline) { | |
| 24030 | calendar.onClose(); | |
| 24031 | calendar.onClosed(); | |
| 24032 | return; | |
| 24033 | } | |
| 24034 | if (calendar.params.routableModals) { | |
| 24035 | calendar.view.router.back(); | |
| 24036 | } else { | |
| 24037 | calendar.modal.close(); | |
| 24038 | } | |
| 24039 | }; | |
| 24040 | ||
| 24041 | Calendar.prototype.init = function init () { | |
| 24042 | var calendar = this; | |
| 24043 | ||
| 24044 | calendar.initInput(); | |
| 24045 | ||
| 24046 | if (calendar.inline) { | |
| 24047 | calendar.open(); | |
| 24048 | calendar.emit('local::init calendarInit', calendar); | |
| 24049 | return; | |
| 24050 | } | |
| 24051 | ||
| 24052 | if (!calendar.initialized && calendar.params.value) { | |
| 24053 | calendar.setValue(calendar.normalizeValues(calendar.params.value)); | |
| 24054 | } | |
| 24055 | ||
| 24056 | // Attach input Events | |
| 24057 | if (calendar.$inputEl) { | |
| 24058 | calendar.attachInputEvents(); | |
| 24059 | } | |
| 24060 | if (calendar.params.closeByOutsideClick) { | |
| 24061 | calendar.attachHtmlEvents(); | |
| 24062 | } | |
| 24063 | calendar.emit('local::init calendarInit', calendar); | |
| 24064 | }; | |
| 24065 | ||
| 24066 | Calendar.prototype.destroy = function destroy () { | |
| 24067 | var calendar = this; | |
| 24068 | if (calendar.destroyed) { return; } | |
| 24069 | var $el = calendar.$el; | |
| 24070 | calendar.emit('local::beforeDestroy calendarBeforeDestroy', calendar); | |
| 24071 | if ($el) { $el.trigger('calendar:beforedestroy', calendar); } | |
| 24072 | ||
| 24073 | calendar.close(); | |
| 24074 | ||
| 24075 | // Detach Events | |
| 24076 | if (calendar.$inputEl) { | |
| 24077 | calendar.detachInputEvents(); | |
| 24078 | } | |
| 24079 | if (calendar.params.closeByOutsideClick) { | |
| 24080 | calendar.detachHtmlEvents(); | |
| 24081 | } | |
| 24082 | ||
| 24083 | if ($el && $el.length) { delete calendar.$el[0].f7Calendar; } | |
| 24084 | Utils.deleteProps(calendar); | |
| 24085 | calendar.destroyed = true; | |
| 24086 | }; | |
| 24087 | ||
| 24088 | return Calendar; | |
| 24089 | }(Framework7Class)); | |
| 24090 | ||
| 24091 | var Calendar$1 = { | |
| 24092 | name: 'calendar', | |
| 24093 | static: { | |
| 24094 | Calendar: Calendar, | |
| 24095 | }, | |
| 24096 | create: function create() { | |
| 24097 | var app = this; | |
| 24098 | app.calendar = ConstructorMethods({ | |
| 24099 | defaultSelector: '.calendar', | |
| 24100 | constructor: Calendar, | |
| 24101 | app: app, | |
| 24102 | domProp: 'f7Calendar', | |
| 24103 | }); | |
| 24104 | app.calendar.close = function close(el) { | |
| 24105 | if ( el === void 0 ) el = '.calendar'; | |
| 24106 | ||
| 24107 | var $el = $(el); | |
| 24108 | if ($el.length === 0) { return; } | |
| 24109 | var calendar = $el[0].f7Calendar; | |
| 24110 | if (!calendar || (calendar && !calendar.opened)) { return; } | |
| 24111 | calendar.close(); | |
| 24112 | }; | |
| 24113 | }, | |
| 24114 | params: { | |
| 24115 | calendar: { | |
| 24116 | // Calendar settings | |
| 24117 | calendarType: 'gregorian', // or 'jalali' | |
| 24118 | monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], | |
| 24119 | monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| 24120 | dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], | |
| 24121 | dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], | |
| 24122 | firstDay: 1, // First day of the week, Monday | |
| 24123 | weekendDays: [0, 6], // Sunday and Saturday | |
| 24124 | jalali: { | |
| 24125 | monthNames: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'], | |
| 24126 | monthNamesShort: ['فَر', 'اُر', 'خُر', 'تیر', 'مُر', 'شَه', 'مهر', 'آب', 'آذر', 'دی', 'بَه', 'اِس'], | |
| 24127 | dayNames: ['یکشنبه', 'دوشنبه', 'سهشنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه', 'شنبه'], | |
| 24128 | dayNamesShort: ['1ش', '۲ش', '۳ش', '۴ش', '۵ش', 'ج', 'ش'], | |
| 24129 | firstDay: 6, // Saturday | |
| 24130 | weekendDays: [5], // Friday | |
| 24131 | }, | |
| 24132 | multiple: false, | |
| 24133 | rangePicker: false, | |
| 24134 | rangePickerMinDays: 1, // when calendar is used as rangePicker | |
| 24135 | rangePickerMaxDays: 0, // when calendar is used as rangePicker, 0 means unlimited | |
| 24136 | dateFormat: 'yyyy-mm-dd', | |
| 24137 | direction: 'horizontal', // or 'vertical' | |
| 24138 | minDate: null, | |
| 24139 | maxDate: null, | |
| 24140 | disabled: null, // dates range of disabled days | |
| 24141 | events: null, // dates range of days with events | |
| 24142 | rangesClasses: null, // array with custom classes date ranges | |
| 24143 | touchMove: true, | |
| 24144 | animate: true, | |
| 24145 | closeOnSelect: false, | |
| 24146 | monthSelector: true, | |
| 24147 | yearSelector: true, | |
| 24148 | weekHeader: true, | |
| 24149 | value: null, | |
| 24150 | // Common opener settings | |
| 24151 | containerEl: null, | |
| 24152 | openIn: 'auto', // or 'popover' or 'sheet' or 'customModal' | |
| 24153 | formatValue: null, | |
| 24154 | inputEl: null, | |
| 24155 | inputReadOnly: true, | |
| 24156 | closeByOutsideClick: true, | |
| 24157 | scrollToInput: true, | |
| 24158 | header: false, | |
| 24159 | headerPlaceholder: 'Select date', | |
| 24160 | footer: false, | |
| 24161 | toolbar: true, | |
| 24162 | toolbarCloseText: 'Done', | |
| 24163 | cssClass: null, | |
| 24164 | routableModals: true, | |
| 24165 | view: null, | |
| 24166 | url: 'date/', | |
| 24167 | backdrop: null, | |
| 24168 | closeByBackdropClick: true, | |
| 24169 | // Render functions | |
| 24170 | renderWeekHeader: null, | |
| 24171 | renderMonths: null, | |
| 24172 | renderMonth: null, | |
| 24173 | renderMonthSelector: null, | |
| 24174 | renderYearSelector: null, | |
| 24175 | renderHeader: null, | |
| 24176 | renderFooter: null, | |
| 24177 | renderToolbar: null, | |
| 24178 | renderInline: null, | |
| 24179 | renderPopover: null, | |
| 24180 | renderSheet: null, | |
| 24181 | render: null, | |
| 24182 | }, | |
| 24183 | }, | |
| 24184 | }; | |
| 24185 | ||
| 24186 | function pickerColumn (colEl, updateItems) { | |
| 24187 | var picker = this; | |
| 24188 | var app = picker.app; | |
| 24189 | var $colEl = $(colEl); | |
| 24190 | var colIndex = $colEl.index(); | |
| 24191 | var col = picker.cols[colIndex]; | |
| 24192 | if (col.divider) { return; } | |
| 24193 | ||
| 24194 | col.$el = $colEl; | |
| 24195 | col.el = $colEl[0]; | |
| 24196 | col.$itemsEl = col.$el.find('.picker-items'); | |
| 24197 | col.items = col.$itemsEl.find('.picker-item'); | |
| 24198 | ||
| 24199 | var itemHeight; | |
| 24200 | var itemsHeight; | |
| 24201 | var minTranslate; | |
| 24202 | var maxTranslate; | |
| 24203 | var animationFrameId; | |
| 24204 | ||
| 24205 | function updateDuringScroll() { | |
| 24206 | animationFrameId = Utils.requestAnimationFrame(function () { | |
| 24207 | col.updateItems(undefined, undefined, 0); | |
| 24208 | updateDuringScroll(); | |
| 24209 | }); | |
| 24210 | } | |
| 24211 | ||
| 24212 | col.replaceValues = function replaceColValues(values, displayValues) { | |
| 24213 | col.detachEvents(); | |
| 24214 | col.values = values; | |
| 24215 | col.displayValues = displayValues; | |
| 24216 | col.$itemsEl.html(picker.renderColumn(col, true)); | |
| 24217 | col.items = col.$itemsEl.find('.picker-item'); | |
| 24218 | col.calcSize(); | |
| 24219 | col.setValue(col.values[0], 0, true); | |
| 24220 | col.attachEvents(); | |
| 24221 | }; | |
| 24222 | col.calcSize = function calcColSize() { | |
| 24223 | if (picker.params.rotateEffect) { | |
| 24224 | col.$el.removeClass('picker-column-absolute'); | |
| 24225 | if (!col.width) { col.$el.css({ width: '' }); } | |
| 24226 | } | |
| 24227 | var colWidth = 0; | |
| 24228 | var colHeight = col.$el[0].offsetHeight; | |
| 24229 | itemHeight = col.items[0].offsetHeight; | |
| 24230 | itemsHeight = itemHeight * col.items.length; | |
| 24231 | minTranslate = ((colHeight / 2) - itemsHeight) + (itemHeight / 2); | |
| 24232 | maxTranslate = (colHeight / 2) - (itemHeight / 2); | |
| 24233 | if (col.width) { | |
| 24234 | colWidth = col.width; | |
| 24235 | if (parseInt(colWidth, 10) === colWidth) { colWidth += 'px'; } | |
| 24236 | col.$el.css({ width: colWidth }); | |
| 24237 | } | |
| 24238 | if (picker.params.rotateEffect) { | |
| 24239 | if (!col.width) { | |
| 24240 | col.items.each(function (index, itemEl) { | |
| 24241 | var item = $(itemEl).children('span'); | |
| 24242 | colWidth = Math.max(colWidth, item[0].offsetWidth); | |
| 24243 | }); | |
| 24244 | col.$el.css({ width: ((colWidth + 2) + "px") }); | |
| 24245 | } | |
| 24246 | col.$el.addClass('picker-column-absolute'); | |
| 24247 | } | |
| 24248 | }; | |
| 24249 | ||
| 24250 | col.setValue = function setColValue(newValue, transition, valueCallbacks) { | |
| 24251 | if ( transition === void 0 ) transition = ''; | |
| 24252 | ||
| 24253 | var newActiveIndex = col.$itemsEl.find((".picker-item[data-picker-value=\"" + newValue + "\"]")).index(); | |
| 24254 | if (typeof newActiveIndex === 'undefined' || newActiveIndex === -1) { | |
| 24255 | return; | |
| 24256 | } | |
| 24257 | var newTranslate = (-newActiveIndex * itemHeight) + maxTranslate; | |
| 24258 | // Update wrapper | |
| 24259 | col.$itemsEl.transition(transition); | |
| 24260 | col.$itemsEl.transform(("translate3d(0," + newTranslate + "px,0)")); | |
| 24261 | ||
| 24262 | // Watch items | |
| 24263 | if (picker.params.updateValuesOnMomentum && col.activeIndex && col.activeIndex !== newActiveIndex) { | |
| 24264 | Utils.cancelAnimationFrame(animationFrameId); | |
| 24265 | col.$itemsEl.transitionEnd(function () { | |
| 24266 | Utils.cancelAnimationFrame(animationFrameId); | |
| 24267 | }); | |
| 24268 | updateDuringScroll(); | |
| 24269 | } | |
| 24270 | ||
| 24271 | // Update items | |
| 24272 | col.updateItems(newActiveIndex, newTranslate, transition, valueCallbacks); | |
| 24273 | }; | |
| 24274 | ||
| 24275 | col.updateItems = function updateColItems(activeIndex, translate, transition, valueCallbacks) { | |
| 24276 | if (typeof translate === 'undefined') { | |
| 24277 | // eslint-disable-next-line | |
| 24278 | translate = Utils.getTranslate(col.$itemsEl[0], 'y'); | |
| 24279 | } | |
| 24280 | // eslint-disable-next-line | |
| 24281 | if (typeof activeIndex === 'undefined') { activeIndex = -Math.round((translate - maxTranslate) / itemHeight); } | |
| 24282 | // eslint-disable-next-line | |
| 24283 | if (activeIndex < 0) { activeIndex = 0; } | |
| 24284 | // eslint-disable-next-line | |
| 24285 | if (activeIndex >= col.items.length) { activeIndex = col.items.length - 1; } | |
| 24286 | var previousActiveIndex = col.activeIndex; | |
| 24287 | col.activeIndex = activeIndex; | |
| 24288 | col.$itemsEl.find('.picker-item-selected').removeClass('picker-item-selected'); | |
| 24289 | ||
| 24290 | col.items.transition(transition); | |
| 24291 | ||
| 24292 | var selectedItem = col.items.eq(activeIndex).addClass('picker-item-selected').transform(''); | |
| 24293 | ||
| 24294 | // Set 3D rotate effect | |
| 24295 | if (picker.params.rotateEffect) { | |
| 24296 | col.items.each(function (index, itemEl) { | |
| 24297 | var $itemEl = $(itemEl); | |
| 24298 | var itemOffsetTop = $itemEl.index() * itemHeight; | |
| 24299 | var translateOffset = maxTranslate - translate; | |
| 24300 | var itemOffset = itemOffsetTop - translateOffset; | |
| 24301 | var percentage = itemOffset / itemHeight; | |
| 24302 | var itemsFit = Math.ceil(col.height / itemHeight / 2) + 1; | |
| 24303 | ||
| 24304 | var angle = (-18 * percentage); | |
| 24305 | if (angle > 180) { angle = 180; } | |
| 24306 | if (angle < -180) { angle = -180; } | |
| 24307 | if (Math.abs(percentage) > itemsFit) { | |
| 24308 | $itemEl.addClass('picker-item-far'); | |
| 24309 | } else { | |
| 24310 | $itemEl.removeClass('picker-item-far'); | |
| 24311 | } | |
| 24312 | $itemEl.transform(("translate3d(0, " + (-translate + maxTranslate) + "px, " + (picker.needsOriginFix ? -110 : 0) + "px) rotateX(" + angle + "deg)")); | |
| 24313 | }); | |
| 24314 | } | |
| 24315 | ||
| 24316 | if (valueCallbacks || typeof valueCallbacks === 'undefined') { | |
| 24317 | // Update values | |
| 24318 | col.value = selectedItem.attr('data-picker-value'); | |
| 24319 | col.displayValue = col.displayValues ? col.displayValues[activeIndex] : col.value; | |
| 24320 | // On change callback | |
| 24321 | if (previousActiveIndex !== activeIndex) { | |
| 24322 | if (col.onChange) { | |
| 24323 | col.onChange(picker, col.value, col.displayValue); | |
| 24324 | } | |
| 24325 | picker.updateValue(); | |
| 24326 | } | |
| 24327 | } | |
| 24328 | }; | |
| 24329 | ||
| 24330 | var allowItemClick = true; | |
| 24331 | var isTouched; | |
| 24332 | var isMoved; | |
| 24333 | var touchStartY; | |
| 24334 | var touchCurrentY; | |
| 24335 | var touchStartTime; | |
| 24336 | var touchEndTime; | |
| 24337 | var startTranslate; | |
| 24338 | var returnTo; | |
| 24339 | var currentTranslate; | |
| 24340 | var prevTranslate; | |
| 24341 | var velocityTranslate; | |
| 24342 | function handleTouchStart(e) { | |
| 24343 | if (isMoved || isTouched) { return; } | |
| 24344 | e.preventDefault(); | |
| 24345 | isTouched = true; | |
| 24346 | touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 24347 | touchCurrentY = touchStartY; | |
| 24348 | touchStartTime = (new Date()).getTime(); | |
| 24349 | ||
| 24350 | allowItemClick = true; | |
| 24351 | startTranslate = Utils.getTranslate(col.$itemsEl[0], 'y'); | |
| 24352 | currentTranslate = startTranslate; | |
| 24353 | } | |
| 24354 | function handleTouchMove(e) { | |
| 24355 | if (!isTouched) { return; } | |
| 24356 | e.preventDefault(); | |
| 24357 | allowItemClick = false; | |
| 24358 | touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 24359 | if (!isMoved) { | |
| 24360 | // First move | |
| 24361 | Utils.cancelAnimationFrame(animationFrameId); | |
| 24362 | isMoved = true; | |
| 24363 | startTranslate = Utils.getTranslate(col.$itemsEl[0], 'y'); | |
| 24364 | currentTranslate = startTranslate; | |
| 24365 | col.$itemsEl.transition(0); | |
| 24366 | } | |
| 24367 | ||
| 24368 | var diff = touchCurrentY - touchStartY; | |
| 24369 | currentTranslate = startTranslate + diff; | |
| 24370 | returnTo = undefined; | |
| 24371 | ||
| 24372 | // Normalize translate | |
| 24373 | if (currentTranslate < minTranslate) { | |
| 24374 | currentTranslate = minTranslate - (Math.pow( (minTranslate - currentTranslate), 0.8 )); | |
| 24375 | returnTo = 'min'; | |
| 24376 | } | |
| 24377 | if (currentTranslate > maxTranslate) { | |
| 24378 | currentTranslate = maxTranslate + (Math.pow( (currentTranslate - maxTranslate), 0.8 )); | |
| 24379 | returnTo = 'max'; | |
| 24380 | } | |
| 24381 | // Transform wrapper | |
| 24382 | col.$itemsEl.transform(("translate3d(0," + currentTranslate + "px,0)")); | |
| 24383 | ||
| 24384 | // Update items | |
| 24385 | col.updateItems(undefined, currentTranslate, 0, picker.params.updateValuesOnTouchmove); | |
| 24386 | ||
| 24387 | // Calc velocity | |
| 24388 | velocityTranslate = currentTranslate - prevTranslate || currentTranslate; | |
| 24389 | prevTranslate = currentTranslate; | |
| 24390 | } | |
| 24391 | function handleTouchEnd() { | |
| 24392 | if (!isTouched || !isMoved) { | |
| 24393 | isTouched = false; | |
| 24394 | isMoved = false; | |
| 24395 | return; | |
| 24396 | } | |
| 24397 | isTouched = false; | |
| 24398 | isMoved = false; | |
| 24399 | col.$itemsEl.transition(''); | |
| 24400 | if (returnTo) { | |
| 24401 | if (returnTo === 'min') { | |
| 24402 | col.$itemsEl.transform(("translate3d(0," + minTranslate + "px,0)")); | |
| 5d51ea26 DC |
24403 | } else { |
| 24404 | col.$itemsEl.transform(("translate3d(0," + maxTranslate + "px,0)")); | |
| 24405 | } | |
| 5309fbda DC |
24406 | } |
| 24407 | touchEndTime = new Date().getTime(); | |
| 24408 | var newTranslate; | |
| 24409 | if (touchEndTime - touchStartTime > 300) { | |
| 24410 | newTranslate = currentTranslate; | |
| 24411 | } else { | |
| 24412 | newTranslate = currentTranslate + (velocityTranslate * picker.params.momentumRatio); | |
| 24413 | } | |
| 24414 | ||
| 24415 | newTranslate = Math.max(Math.min(newTranslate, maxTranslate), minTranslate); | |
| 24416 | ||
| 24417 | // Active Index | |
| 5d51ea26 | 24418 | var activeIndex = Math.round(Math.abs(((newTranslate - maxTranslate) / itemHeight))); |
| 5309fbda DC |
24419 | |
| 24420 | // Normalize translate | |
| 24421 | if (!picker.params.freeMode) { newTranslate = (-activeIndex * itemHeight) + maxTranslate; } | |
| 24422 | ||
| 24423 | // Transform wrapper | |
| 24424 | col.$itemsEl.transform(("translate3d(0," + (parseInt(newTranslate, 10)) + "px,0)")); | |
| 24425 | ||
| 24426 | // Update items | |
| 24427 | col.updateItems(activeIndex, newTranslate, '', true); | |
| 24428 | ||
| 24429 | // Watch items | |
| 24430 | if (picker.params.updateValuesOnMomentum) { | |
| 24431 | updateDuringScroll(); | |
| 24432 | col.$itemsEl.transitionEnd(function () { | |
| 24433 | Utils.cancelAnimationFrame(animationFrameId); | |
| 24434 | }); | |
| 24435 | } | |
| 24436 | ||
| 24437 | // Allow click | |
| 24438 | setTimeout(function () { | |
| 24439 | allowItemClick = true; | |
| 24440 | }, 100); | |
| 24441 | } | |
| 24442 | ||
| 5d51ea26 DC |
24443 | var mousewheelTimeout; |
| 24444 | function handleMouseWheel(e) { | |
| 24445 | var deltaX = e.deltaX; | |
| 24446 | var deltaY = e.deltaY; | |
| 24447 | if (Math.abs(deltaX) > Math.abs(deltaY)) { return; } | |
| 24448 | clearTimeout(mousewheelTimeout); | |
| 24449 | ||
| 24450 | e.preventDefault(); | |
| 24451 | ||
| 24452 | Utils.cancelAnimationFrame(animationFrameId); | |
| 24453 | startTranslate = Utils.getTranslate(col.$itemsEl[0], 'y'); | |
| 24454 | col.$itemsEl.transition(0); | |
| 24455 | ||
| 24456 | currentTranslate = startTranslate - deltaY; | |
| 24457 | returnTo = undefined; | |
| 24458 | ||
| 24459 | // Normalize translate | |
| 24460 | if (currentTranslate < minTranslate) { | |
| 24461 | currentTranslate = minTranslate; | |
| 24462 | returnTo = 'min'; | |
| 24463 | } | |
| 24464 | if (currentTranslate > maxTranslate) { | |
| 24465 | currentTranslate = maxTranslate; | |
| 24466 | returnTo = 'max'; | |
| 24467 | } | |
| 24468 | // Transform wrapper | |
| 24469 | col.$itemsEl.transform(("translate3d(0," + currentTranslate + "px,0)")); | |
| 24470 | ||
| 24471 | // Update items | |
| 24472 | col.updateItems(undefined, currentTranslate, 0, picker.params.updateValuesOnMousewheel); | |
| 24473 | ||
| 24474 | // On end | |
| 24475 | mousewheelTimeout = setTimeout(function () { | |
| 24476 | col.$itemsEl.transition(''); | |
| 24477 | if (returnTo) { | |
| 24478 | if (returnTo === 'min') { | |
| 24479 | col.$itemsEl.transform(("translate3d(0," + minTranslate + "px,0)")); | |
| 24480 | } else { | |
| 24481 | col.$itemsEl.transform(("translate3d(0," + maxTranslate + "px,0)")); | |
| 24482 | } | |
| 24483 | } | |
| 24484 | touchEndTime = new Date().getTime(); | |
| 24485 | var newTranslate = currentTranslate; | |
| 24486 | newTranslate = Math.max(Math.min(newTranslate, maxTranslate), minTranslate); | |
| 24487 | ||
| 24488 | // Active Index | |
| 24489 | var activeIndex = Math.round(Math.abs(((newTranslate - maxTranslate) / itemHeight))); | |
| 24490 | ||
| 24491 | // Normalize translate | |
| 24492 | if (!picker.params.freeMode) { newTranslate = (-activeIndex * itemHeight) + maxTranslate; } | |
| 24493 | ||
| 24494 | // Transform wrapper | |
| 24495 | col.$itemsEl.transform(("translate3d(0," + (parseInt(newTranslate, 10)) + "px,0)")); | |
| 24496 | ||
| 24497 | // Update items | |
| 24498 | col.updateItems(activeIndex, newTranslate, '', true); | |
| 24499 | }, 200); | |
| 24500 | } | |
| 24501 | ||
| 5309fbda DC |
24502 | function handleClick() { |
| 24503 | if (!allowItemClick) { return; } | |
| 24504 | Utils.cancelAnimationFrame(animationFrameId); | |
| 24505 | var value = $(this).attr('data-picker-value'); | |
| 24506 | col.setValue(value); | |
| 24507 | } | |
| 24508 | ||
| 24509 | var activeListener = app.support.passiveListener ? { passive: false, capture: false } : false; | |
| 24510 | col.attachEvents = function attachColEvents() { | |
| 24511 | col.$el.on(app.touchEvents.start, handleTouchStart, activeListener); | |
| 24512 | app.on('touchmove:active', handleTouchMove); | |
| 24513 | app.on('touchend:passive', handleTouchEnd); | |
| 5d51ea26 DC |
24514 | if (picker.params.mousewheel) { |
| 24515 | col.$el.on('wheel', handleMouseWheel); | |
| 24516 | } | |
| 5309fbda DC |
24517 | col.items.on('click', handleClick); |
| 24518 | }; | |
| 24519 | col.detachEvents = function detachColEvents() { | |
| 24520 | col.$el.off(app.touchEvents.start, handleTouchStart, activeListener); | |
| 24521 | app.off('touchmove:active', handleTouchMove); | |
| 24522 | app.off('touchend:passive', handleTouchEnd); | |
| 5d51ea26 DC |
24523 | if (picker.params.mousewheel) { |
| 24524 | col.$el.off('wheel', handleMouseWheel); | |
| 24525 | } | |
| 5309fbda DC |
24526 | col.items.off('click', handleClick); |
| 24527 | }; | |
| 24528 | ||
| 24529 | col.init = function initCol() { | |
| 24530 | col.calcSize(); | |
| 24531 | col.$itemsEl.transform(("translate3d(0," + maxTranslate + "px,0)")).transition(0); | |
| 24532 | if (colIndex === 0) { col.$el.addClass('picker-column-first'); } | |
| 24533 | if (colIndex === picker.cols.length - 1) { col.$el.addClass('picker-column-last'); } | |
| 24534 | // Update items on init | |
| 24535 | if (updateItems) { col.updateItems(0, maxTranslate, 0); } | |
| 24536 | ||
| 24537 | col.attachEvents(); | |
| 24538 | }; | |
| 24539 | ||
| 24540 | col.destroy = function destroyCol() { | |
| 24541 | col.detachEvents(); | |
| 24542 | }; | |
| 24543 | ||
| 24544 | col.init(); | |
| 24545 | } | |
| 24546 | ||
| 5d51ea26 | 24547 | var Picker = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
24548 | function Picker(app, params) { |
| 24549 | if ( params === void 0 ) params = {}; | |
| 24550 | ||
| 5d51ea26 | 24551 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
24552 | var picker = this; |
| 24553 | picker.params = Utils.extend({}, app.params.picker, params); | |
| 24554 | ||
| 24555 | var $containerEl; | |
| 24556 | if (picker.params.containerEl) { | |
| 24557 | $containerEl = $(picker.params.containerEl); | |
| 24558 | if ($containerEl.length === 0) { return picker; } | |
| 24559 | } | |
| 24560 | ||
| 24561 | var $inputEl; | |
| 24562 | if (picker.params.inputEl) { | |
| 24563 | $inputEl = $(picker.params.inputEl); | |
| 24564 | } | |
| 24565 | ||
| 24566 | var view; | |
| 24567 | if ($inputEl) { | |
| 24568 | view = $inputEl.parents('.view').length && $inputEl.parents('.view')[0].f7View; | |
| 24569 | } | |
| 24570 | if (!view) { view = app.views.main; } | |
| 24571 | ||
| 24572 | Utils.extend(picker, { | |
| 24573 | app: app, | |
| 24574 | $containerEl: $containerEl, | |
| 24575 | containerEl: $containerEl && $containerEl[0], | |
| 24576 | inline: $containerEl && $containerEl.length > 0, | |
| 24577 | needsOriginFix: app.device.ios || ((win.navigator.userAgent.toLowerCase().indexOf('safari') >= 0 && win.navigator.userAgent.toLowerCase().indexOf('chrome') < 0) && !app.device.android), | |
| 24578 | cols: [], | |
| 24579 | $inputEl: $inputEl, | |
| 24580 | inputEl: $inputEl && $inputEl[0], | |
| 24581 | initialized: false, | |
| 24582 | opened: false, | |
| 24583 | url: picker.params.url, | |
| 24584 | view: view, | |
| 24585 | }); | |
| 24586 | ||
| 24587 | function onResize() { | |
| 24588 | picker.resizeCols(); | |
| 24589 | } | |
| 24590 | function onInputClick() { | |
| 24591 | picker.open(); | |
| 24592 | } | |
| 24593 | function onInputFocus(e) { | |
| 24594 | e.preventDefault(); | |
| 24595 | } | |
| 24596 | function onHtmlClick(e) { | |
| 24597 | var $targetEl = $(e.target); | |
| 24598 | if (picker.isPopover()) { return; } | |
| 24599 | if (!picker.opened || picker.closing) { return; } | |
| 24600 | if ($targetEl.closest('[class*="backdrop"]').length) { return; } | |
| 24601 | if ($inputEl && $inputEl.length > 0) { | |
| 24602 | if ($targetEl[0] !== $inputEl[0] && $targetEl.closest('.sheet-modal').length === 0) { | |
| 24603 | picker.close(); | |
| 24604 | } | |
| 24605 | } else if ($(e.target).closest('.sheet-modal').length === 0) { | |
| 24606 | picker.close(); | |
| 24607 | } | |
| 24608 | } | |
| 24609 | ||
| 24610 | // Events | |
| 24611 | Utils.extend(picker, { | |
| 24612 | attachResizeEvent: function attachResizeEvent() { | |
| 24613 | app.on('resize', onResize); | |
| 24614 | }, | |
| 24615 | detachResizeEvent: function detachResizeEvent() { | |
| 24616 | app.off('resize', onResize); | |
| 24617 | }, | |
| 24618 | attachInputEvents: function attachInputEvents() { | |
| 24619 | picker.$inputEl.on('click', onInputClick); | |
| 24620 | if (picker.params.inputReadOnly) { | |
| 24621 | picker.$inputEl.on('focus mousedown', onInputFocus); | |
| 24622 | } | |
| 24623 | }, | |
| 24624 | detachInputEvents: function detachInputEvents() { | |
| 24625 | picker.$inputEl.off('click', onInputClick); | |
| 24626 | if (picker.params.inputReadOnly) { | |
| 24627 | picker.$inputEl.off('focus mousedown', onInputFocus); | |
| 24628 | } | |
| 24629 | }, | |
| 24630 | attachHtmlEvents: function attachHtmlEvents() { | |
| 24631 | app.on('click', onHtmlClick); | |
| 24632 | }, | |
| 24633 | detachHtmlEvents: function detachHtmlEvents() { | |
| 24634 | app.off('click', onHtmlClick); | |
| 24635 | }, | |
| 24636 | }); | |
| 24637 | ||
| 24638 | picker.init(); | |
| 24639 | ||
| 24640 | return picker; | |
| 24641 | } | |
| 24642 | ||
| 5d51ea26 DC |
24643 | if ( Framework7Class ) Picker.__proto__ = Framework7Class; |
| 24644 | Picker.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
24645 | Picker.prototype.constructor = Picker; |
| 24646 | ||
| 24647 | Picker.prototype.initInput = function initInput () { | |
| 24648 | var picker = this; | |
| 24649 | if (!picker.$inputEl) { return; } | |
| 24650 | if (picker.params.inputReadOnly) { picker.$inputEl.prop('readOnly', true); } | |
| 24651 | }; | |
| 24652 | ||
| 24653 | Picker.prototype.resizeCols = function resizeCols () { | |
| 24654 | var picker = this; | |
| 24655 | if (!picker.opened) { return; } | |
| 24656 | for (var i = 0; i < picker.cols.length; i += 1) { | |
| 24657 | if (!picker.cols[i].divider) { | |
| 24658 | picker.cols[i].calcSize(); | |
| 24659 | picker.cols[i].setValue(picker.cols[i].value, 0, false); | |
| 24660 | } | |
| 24661 | } | |
| 24662 | }; | |
| 24663 | ||
| 24664 | Picker.prototype.isPopover = function isPopover () { | |
| 24665 | var picker = this; | |
| 24666 | var app = picker.app; | |
| 24667 | var modal = picker.modal; | |
| 24668 | var params = picker.params; | |
| 24669 | if (params.openIn === 'sheet') { return false; } | |
| 24670 | if (modal && modal.type !== 'popover') { return false; } | |
| 24671 | ||
| 24672 | if (!picker.inline && picker.inputEl) { | |
| 24673 | if (params.openIn === 'popover') { return true; } | |
| 24674 | if (app.device.ios) { | |
| 24675 | return !!app.device.ipad; | |
| 5d51ea26 DC |
24676 | } |
| 24677 | if (app.width >= 768) { | |
| 24678 | return true; | |
| 24679 | } | |
| 24680 | if (app.device.desktop && app.theme === 'aurora') { | |
| 5309fbda DC |
24681 | return true; |
| 24682 | } | |
| 24683 | } | |
| 24684 | return false; | |
| 24685 | }; | |
| 24686 | ||
| 24687 | Picker.prototype.formatValue = function formatValue () { | |
| 24688 | var picker = this; | |
| 24689 | var value = picker.value; | |
| 24690 | var displayValue = picker.displayValue; | |
| 24691 | if (picker.params.formatValue) { | |
| 24692 | return picker.params.formatValue.call(picker, value, displayValue); | |
| 24693 | } | |
| 24694 | return value.join(' '); | |
| 24695 | }; | |
| 24696 | ||
| 24697 | Picker.prototype.setValue = function setValue (values, transition) { | |
| 24698 | var picker = this; | |
| 24699 | var valueIndex = 0; | |
| 24700 | if (picker.cols.length === 0) { | |
| 24701 | picker.value = values; | |
| 24702 | picker.updateValue(values); | |
| 24703 | return; | |
| 24704 | } | |
| 24705 | for (var i = 0; i < picker.cols.length; i += 1) { | |
| 24706 | if (picker.cols[i] && !picker.cols[i].divider) { | |
| 24707 | picker.cols[i].setValue(values[valueIndex], transition); | |
| 24708 | valueIndex += 1; | |
| 24709 | } | |
| 24710 | } | |
| 24711 | }; | |
| 24712 | ||
| 24713 | Picker.prototype.getValue = function getValue () { | |
| 24714 | var picker = this; | |
| 24715 | return picker.value; | |
| 24716 | }; | |
| 24717 | ||
| 24718 | Picker.prototype.updateValue = function updateValue (forceValues) { | |
| 24719 | var picker = this; | |
| 24720 | var newValue = forceValues || []; | |
| 24721 | var newDisplayValue = []; | |
| 24722 | var column; | |
| 24723 | if (picker.cols.length === 0) { | |
| 24724 | var noDividerColumns = picker.params.cols.filter(function (c) { return !c.divider; }); | |
| 24725 | for (var i = 0; i < noDividerColumns.length; i += 1) { | |
| 24726 | column = noDividerColumns[i]; | |
| 24727 | if (column.displayValues !== undefined && column.values !== undefined && column.values.indexOf(newValue[i]) !== -1) { | |
| 24728 | newDisplayValue.push(column.displayValues[column.values.indexOf(newValue[i])]); | |
| 24729 | } else { | |
| 24730 | newDisplayValue.push(newValue[i]); | |
| 24731 | } | |
| 24732 | } | |
| 24733 | } else { | |
| 24734 | for (var i$1 = 0; i$1 < picker.cols.length; i$1 += 1) { | |
| 24735 | if (!picker.cols[i$1].divider) { | |
| 24736 | newValue.push(picker.cols[i$1].value); | |
| 24737 | newDisplayValue.push(picker.cols[i$1].displayValue); | |
| 24738 | } | |
| 24739 | } | |
| 24740 | } | |
| 24741 | ||
| 24742 | if (newValue.indexOf(undefined) >= 0) { | |
| 24743 | return; | |
| 24744 | } | |
| 24745 | picker.value = newValue; | |
| 24746 | picker.displayValue = newDisplayValue; | |
| 24747 | picker.emit('local::change pickerChange', picker, picker.value, picker.displayValue); | |
| 24748 | if (picker.inputEl) { | |
| 24749 | picker.$inputEl.val(picker.formatValue()); | |
| 24750 | picker.$inputEl.trigger('change'); | |
| 24751 | } | |
| 24752 | }; | |
| 24753 | ||
| 24754 | Picker.prototype.initColumn = function initColumn (colEl, updateItems) { | |
| 24755 | var picker = this; | |
| 24756 | pickerColumn.call(picker, colEl, updateItems); | |
| 24757 | }; | |
| 24758 | // eslint-disable-next-line | |
| 24759 | Picker.prototype.destroyColumn = function destroyColumn (colEl) { | |
| 24760 | var picker = this; | |
| 24761 | var $colEl = $(colEl); | |
| 24762 | var index = $colEl.index(); | |
| 24763 | if (picker.cols[index] && picker.cols[index].destroy) { | |
| 24764 | picker.cols[index].destroy(); | |
| 24765 | } | |
| 24766 | }; | |
| 24767 | ||
| 24768 | Picker.prototype.renderToolbar = function renderToolbar () { | |
| 24769 | var picker = this; | |
| 24770 | if (picker.params.renderToolbar) { return picker.params.renderToolbar.call(picker, picker); } | |
| 5d51ea26 | 24771 | return ("\n <div class=\"toolbar toolbar-top no-shadow\">\n <div class=\"toolbar-inner\">\n <div class=\"left\"></div>\n <div class=\"right\">\n <a class=\"link sheet-close popover-close\">" + (picker.params.toolbarCloseText) + "</a>\n </div>\n </div>\n </div>\n ").trim(); |
| 5309fbda DC |
24772 | }; |
| 24773 | // eslint-disable-next-line | |
| 24774 | Picker.prototype.renderColumn = function renderColumn (col, onlyItems) { | |
| 24775 | var colClasses = "picker-column " + (col.textAlign ? ("picker-column-" + (col.textAlign)) : '') + " " + (col.cssClass || ''); | |
| 24776 | var columnHtml; | |
| 24777 | var columnItemsHtml; | |
| 24778 | ||
| 24779 | if (col.divider) { | |
| 24780 | columnHtml = "\n <div class=\"" + colClasses + " picker-column-divider\">" + (col.content) + "</div>\n "; | |
| 24781 | } else { | |
| 24782 | columnItemsHtml = col.values.map(function (value, index) { return ("\n <div class=\"picker-item\" data-picker-value=\"" + value + "\">\n <span>" + (col.displayValues ? col.displayValues[index] : value) + "</span>\n </div>\n "); }).join(''); | |
| 24783 | columnHtml = "\n <div class=\"" + colClasses + "\">\n <div class=\"picker-items\">" + columnItemsHtml + "</div>\n </div>\n "; | |
| 24784 | } | |
| 24785 | ||
| 24786 | return onlyItems ? columnItemsHtml.trim() : columnHtml.trim(); | |
| 24787 | }; | |
| 24788 | ||
| 24789 | Picker.prototype.renderInline = function renderInline () { | |
| 24790 | var picker = this; | |
| 24791 | var ref = picker.params; | |
| 24792 | var rotateEffect = ref.rotateEffect; | |
| 24793 | var cssClass = ref.cssClass; | |
| 24794 | var toolbar = ref.toolbar; | |
| 24795 | var inlineHtml = ("\n <div class=\"picker picker-inline " + (rotateEffect ? 'picker-3d' : '') + " " + (cssClass || '') + "\">\n " + (toolbar ? picker.renderToolbar() : '') + "\n <div class=\"picker-columns\">\n " + (picker.cols.map(function (col) { return picker.renderColumn(col); }).join('')) + "\n <div class=\"picker-center-highlight\"></div>\n </div>\n </div>\n ").trim(); | |
| 24796 | ||
| 24797 | return inlineHtml; | |
| 24798 | }; | |
| 24799 | ||
| 24800 | Picker.prototype.renderSheet = function renderSheet () { | |
| 24801 | var picker = this; | |
| 24802 | var ref = picker.params; | |
| 24803 | var rotateEffect = ref.rotateEffect; | |
| 24804 | var cssClass = ref.cssClass; | |
| 24805 | var toolbar = ref.toolbar; | |
| 24806 | var sheetHtml = ("\n <div class=\"sheet-modal picker picker-sheet " + (rotateEffect ? 'picker-3d' : '') + " " + (cssClass || '') + "\">\n " + (toolbar ? picker.renderToolbar() : '') + "\n <div class=\"sheet-modal-inner picker-columns\">\n " + (picker.cols.map(function (col) { return picker.renderColumn(col); }).join('')) + "\n <div class=\"picker-center-highlight\"></div>\n </div>\n </div>\n ").trim(); | |
| 24807 | ||
| 24808 | return sheetHtml; | |
| 24809 | }; | |
| 24810 | ||
| 24811 | Picker.prototype.renderPopover = function renderPopover () { | |
| 24812 | var picker = this; | |
| 24813 | var ref = picker.params; | |
| 24814 | var rotateEffect = ref.rotateEffect; | |
| 24815 | var cssClass = ref.cssClass; | |
| 24816 | var toolbar = ref.toolbar; | |
| 24817 | var popoverHtml = ("\n <div class=\"popover picker-popover\">\n <div class=\"popover-inner\">\n <div class=\"picker " + (rotateEffect ? 'picker-3d' : '') + " " + (cssClass || '') + "\">\n " + (toolbar ? picker.renderToolbar() : '') + "\n <div class=\"picker-columns\">\n " + (picker.cols.map(function (col) { return picker.renderColumn(col); }).join('')) + "\n <div class=\"picker-center-highlight\"></div>\n </div>\n </div>\n </div>\n </div>\n ").trim(); | |
| 24818 | ||
| 24819 | return popoverHtml; | |
| 24820 | }; | |
| 24821 | ||
| 24822 | Picker.prototype.render = function render () { | |
| 24823 | var picker = this; | |
| 24824 | if (picker.params.render) { return picker.params.render.call(picker); } | |
| 24825 | if (!picker.inline) { | |
| 24826 | if (picker.isPopover()) { return picker.renderPopover(); } | |
| 24827 | return picker.renderSheet(); | |
| 24828 | } | |
| 24829 | return picker.renderInline(); | |
| 24830 | }; | |
| 24831 | ||
| 24832 | Picker.prototype.onOpen = function onOpen () { | |
| 24833 | var picker = this; | |
| 24834 | var initialized = picker.initialized; | |
| 24835 | var $el = picker.$el; | |
| 24836 | var app = picker.app; | |
| 24837 | var $inputEl = picker.$inputEl; | |
| 24838 | var inline = picker.inline; | |
| 24839 | var value = picker.value; | |
| 24840 | var params = picker.params; | |
| 24841 | picker.opened = true; | |
| 24842 | picker.closing = false; | |
| 24843 | picker.opening = true; | |
| 24844 | ||
| 24845 | // Init main events | |
| 24846 | picker.attachResizeEvent(); | |
| 24847 | ||
| 24848 | // Init cols | |
| 24849 | $el.find('.picker-column').each(function (index, colEl) { | |
| 24850 | var updateItems = true; | |
| 24851 | if ( | |
| 24852 | (!initialized && params.value) | |
| 24853 | || (initialized && value) | |
| 24854 | ) { | |
| 24855 | updateItems = false; | |
| 24856 | } | |
| 24857 | picker.initColumn(colEl, updateItems); | |
| 24858 | }); | |
| 24859 | ||
| 24860 | // Set value | |
| 24861 | if (!initialized) { | |
| 24862 | if (value) { picker.setValue(value, 0); } | |
| 24863 | else if (params.value) { | |
| 24864 | picker.setValue(params.value, 0); | |
| 24865 | } | |
| 24866 | } else if (value) { | |
| 24867 | picker.setValue(value, 0); | |
| 24868 | } | |
| 24869 | ||
| 24870 | // Extra focus | |
| 24871 | if (!inline && $inputEl && $inputEl.length && app.theme === 'md') { | |
| 24872 | $inputEl.trigger('focus'); | |
| 24873 | } | |
| 24874 | ||
| 24875 | picker.initialized = true; | |
| 24876 | ||
| 24877 | // Trigger events | |
| 24878 | if ($el) { | |
| 24879 | $el.trigger('picker:open', picker); | |
| 24880 | } | |
| 24881 | if ($inputEl) { | |
| 24882 | $inputEl.trigger('picker:open', picker); | |
| 24883 | } | |
| 24884 | picker.emit('local::open pickerOpen', picker); | |
| 24885 | }; | |
| 24886 | ||
| 24887 | Picker.prototype.onOpened = function onOpened () { | |
| 24888 | var picker = this; | |
| 24889 | picker.opening = false; | |
| 24890 | ||
| 24891 | if (picker.$el) { | |
| 24892 | picker.$el.trigger('picker:opened', picker); | |
| 24893 | } | |
| 24894 | if (picker.$inputEl) { | |
| 24895 | picker.$inputEl.trigger('picker:opened', picker); | |
| 24896 | } | |
| 24897 | picker.emit('local::opened pickerOpened', picker); | |
| 24898 | }; | |
| 24899 | ||
| 24900 | Picker.prototype.onClose = function onClose () { | |
| 24901 | var picker = this; | |
| 24902 | var app = picker.app; | |
| 24903 | picker.opening = false; | |
| 24904 | picker.closing = true; | |
| 24905 | ||
| 24906 | // Detach events | |
| 24907 | picker.detachResizeEvent(); | |
| 24908 | ||
| 24909 | picker.cols.forEach(function (col) { | |
| 24910 | if (col.destroy) { col.destroy(); } | |
| 24911 | }); | |
| 24912 | if (picker.$inputEl && app.theme === 'md') { | |
| 24913 | picker.$inputEl.trigger('blur'); | |
| 24914 | } | |
| 24915 | ||
| 24916 | if (picker.$el) { | |
| 24917 | picker.$el.trigger('picker:close', picker); | |
| 24918 | } | |
| 24919 | if (picker.$inputEl) { | |
| 24920 | picker.$inputEl.trigger('picker:close', picker); | |
| 24921 | } | |
| 24922 | picker.emit('local::close pickerClose', picker); | |
| 24923 | }; | |
| 24924 | ||
| 24925 | Picker.prototype.onClosed = function onClosed () { | |
| 24926 | var picker = this; | |
| 24927 | picker.opened = false; | |
| 24928 | picker.closing = false; | |
| 24929 | ||
| 24930 | if (!picker.inline) { | |
| 24931 | Utils.nextTick(function () { | |
| 24932 | if (picker.modal && picker.modal.el && picker.modal.destroy) { | |
| 24933 | if (!picker.params.routableModals) { | |
| 24934 | picker.modal.destroy(); | |
| 24935 | } | |
| 24936 | } | |
| 24937 | delete picker.modal; | |
| 24938 | }); | |
| 24939 | } | |
| 24940 | ||
| 24941 | if (picker.$el) { | |
| 24942 | picker.$el.trigger('picker:closed', picker); | |
| 24943 | } | |
| 24944 | if (picker.$inputEl) { | |
| 24945 | picker.$inputEl.trigger('picker:closed', picker); | |
| 24946 | } | |
| 24947 | picker.emit('local::closed pickerClosed', picker); | |
| 24948 | }; | |
| 24949 | ||
| 24950 | Picker.prototype.open = function open () { | |
| 24951 | var obj; | |
| 24952 | ||
| 24953 | var picker = this; | |
| 24954 | var app = picker.app; | |
| 24955 | var opened = picker.opened; | |
| 24956 | var inline = picker.inline; | |
| 24957 | var $inputEl = picker.$inputEl; | |
| 24958 | if (opened) { return; } | |
| 24959 | if (picker.cols.length === 0 && picker.params.cols.length) { | |
| 24960 | picker.params.cols.forEach(function (col) { | |
| 24961 | picker.cols.push(col); | |
| 24962 | }); | |
| 24963 | } | |
| 24964 | if (inline) { | |
| 24965 | picker.$el = $(picker.render()); | |
| 24966 | picker.$el[0].f7Picker = picker; | |
| 24967 | picker.$containerEl.append(picker.$el); | |
| 24968 | picker.onOpen(); | |
| 24969 | picker.onOpened(); | |
| 24970 | return; | |
| 24971 | } | |
| 24972 | var isPopover = picker.isPopover(); | |
| 24973 | var modalType = isPopover ? 'popover' : 'sheet'; | |
| 24974 | var modalParams = { | |
| 24975 | targetEl: $inputEl, | |
| 24976 | scrollToEl: picker.params.scrollToInput ? $inputEl : undefined, | |
| 24977 | content: picker.render(), | |
| 24978 | backdrop: isPopover, | |
| 24979 | on: { | |
| 24980 | open: function open() { | |
| 24981 | var modal = this; | |
| 24982 | picker.modal = modal; | |
| 24983 | picker.$el = isPopover ? modal.$el.find('.picker') : modal.$el; | |
| 24984 | picker.$el[0].f7Picker = picker; | |
| 24985 | picker.onOpen(); | |
| 24986 | }, | |
| 24987 | opened: function opened() { picker.onOpened(); }, | |
| 24988 | close: function close() { picker.onClose(); }, | |
| 24989 | closed: function closed() { picker.onClosed(); }, | |
| 24990 | }, | |
| 24991 | }; | |
| 24992 | if (picker.params.routableModals) { | |
| 24993 | picker.view.router.navigate({ | |
| 24994 | url: picker.url, | |
| 24995 | route: ( obj = { | |
| 24996 | path: picker.url | |
| 24997 | }, obj[modalType] = modalParams, obj ), | |
| 24998 | }); | |
| 24999 | } else { | |
| 25000 | picker.modal = app[modalType].create(modalParams); | |
| 25001 | picker.modal.open(); | |
| 25002 | } | |
| 25003 | }; | |
| 25004 | ||
| 25005 | Picker.prototype.close = function close () { | |
| 25006 | var picker = this; | |
| 25007 | var opened = picker.opened; | |
| 25008 | var inline = picker.inline; | |
| 25009 | if (!opened) { return; } | |
| 25010 | if (inline) { | |
| 25011 | picker.onClose(); | |
| 25012 | picker.onClosed(); | |
| 25013 | return; | |
| 25014 | } | |
| 25015 | if (picker.params.routableModals) { | |
| 25016 | picker.view.router.back(); | |
| 25017 | } else { | |
| 25018 | picker.modal.close(); | |
| 25019 | } | |
| 25020 | }; | |
| 25021 | ||
| 25022 | Picker.prototype.init = function init () { | |
| 25023 | var picker = this; | |
| 25024 | ||
| 25025 | picker.initInput(); | |
| 25026 | ||
| 25027 | if (picker.inline) { | |
| 25028 | picker.open(); | |
| 25029 | picker.emit('local::init pickerInit', picker); | |
| 25030 | return; | |
| 25031 | } | |
| 25032 | ||
| 25033 | if (!picker.initialized && picker.params.value) { | |
| 25034 | picker.setValue(picker.params.value); | |
| 25035 | } | |
| 25036 | ||
| 25037 | // Attach input Events | |
| 25038 | if (picker.$inputEl) { | |
| 25039 | picker.attachInputEvents(); | |
| 25040 | } | |
| 25041 | if (picker.params.closeByOutsideClick) { | |
| 25042 | picker.attachHtmlEvents(); | |
| 25043 | } | |
| 25044 | picker.emit('local::init pickerInit', picker); | |
| 25045 | }; | |
| 25046 | ||
| 25047 | Picker.prototype.destroy = function destroy () { | |
| 25048 | var picker = this; | |
| 25049 | if (picker.destroyed) { return; } | |
| 25050 | var $el = picker.$el; | |
| 25051 | picker.emit('local::beforeDestroy pickerBeforeDestroy', picker); | |
| 25052 | if ($el) { $el.trigger('picker:beforedestroy', picker); } | |
| 25053 | ||
| 25054 | picker.close(); | |
| 25055 | ||
| 25056 | // Detach Events | |
| 25057 | if (picker.$inputEl) { | |
| 25058 | picker.detachInputEvents(); | |
| 25059 | } | |
| 25060 | if (picker.params.closeByOutsideClick) { | |
| 25061 | picker.detachHtmlEvents(); | |
| 25062 | } | |
| 25063 | ||
| 25064 | if ($el && $el.length) { delete picker.$el[0].f7Picker; } | |
| 25065 | Utils.deleteProps(picker); | |
| 25066 | picker.destroyed = true; | |
| 25067 | }; | |
| 25068 | ||
| 25069 | return Picker; | |
| 25070 | }(Framework7Class)); | |
| 25071 | ||
| 25072 | var Picker$1 = { | |
| 25073 | name: 'picker', | |
| 25074 | static: { | |
| 25075 | Picker: Picker, | |
| 25076 | }, | |
| 25077 | create: function create() { | |
| 25078 | var app = this; | |
| 25079 | app.picker = ConstructorMethods({ | |
| 25080 | defaultSelector: '.picker', | |
| 25081 | constructor: Picker, | |
| 25082 | app: app, | |
| 25083 | domProp: 'f7Picker', | |
| 25084 | }); | |
| 25085 | app.picker.close = function close(el) { | |
| 25086 | if ( el === void 0 ) el = '.picker'; | |
| 25087 | ||
| 25088 | var $el = $(el); | |
| 25089 | if ($el.length === 0) { return; } | |
| 25090 | var picker = $el[0].f7Picker; | |
| 25091 | if (!picker || (picker && !picker.opened)) { return; } | |
| 25092 | picker.close(); | |
| 25093 | }; | |
| 25094 | }, | |
| 25095 | params: { | |
| 25096 | picker: { | |
| 25097 | // Picker settings | |
| 25098 | updateValuesOnMomentum: false, | |
| 25099 | updateValuesOnTouchmove: true, | |
| 5d51ea26 DC |
25100 | updateValuesOnMousewheel: true, |
| 25101 | mousewheel: true, | |
| 5309fbda DC |
25102 | rotateEffect: false, |
| 25103 | momentumRatio: 7, | |
| 25104 | freeMode: false, | |
| 25105 | cols: [], | |
| 25106 | // Common opener settings | |
| 25107 | containerEl: null, | |
| 25108 | openIn: 'auto', // or 'popover' or 'sheet' | |
| 25109 | formatValue: null, | |
| 25110 | inputEl: null, | |
| 25111 | inputReadOnly: true, | |
| 25112 | closeByOutsideClick: true, | |
| 25113 | scrollToInput: true, | |
| 25114 | toolbar: true, | |
| 25115 | toolbarCloseText: 'Done', | |
| 25116 | cssClass: null, | |
| 25117 | routableModals: true, | |
| 25118 | view: null, | |
| 25119 | url: 'select/', | |
| 25120 | // Render functions | |
| 25121 | renderToolbar: null, | |
| 25122 | render: null, | |
| 25123 | }, | |
| 25124 | }, | |
| 25125 | }; | |
| 25126 | ||
| 25127 | var InfiniteScroll = { | |
| 25128 | handleScroll: function handleScroll(el, e) { | |
| 25129 | var app = this; | |
| 25130 | var $el = $(el); | |
| 25131 | var scrollTop = $el[0].scrollTop; | |
| 25132 | var scrollHeight = $el[0].scrollHeight; | |
| 25133 | var height = $el[0].offsetHeight; | |
| 25134 | var distance = $el[0].getAttribute('data-infinite-distance'); | |
| 25135 | ||
| 25136 | var virtualListContainer = $el.find('.virtual-list'); | |
| 25137 | var virtualList; | |
| 25138 | ||
| 25139 | var onTop = $el.hasClass('infinite-scroll-top'); | |
| 25140 | if (!distance) { distance = 50; } | |
| 25141 | if (typeof distance === 'string' && distance.indexOf('%') >= 0) { | |
| 25142 | distance = (parseInt(distance, 10) / 100) * height; | |
| 25143 | } | |
| 25144 | if (distance > height) { distance = height; } | |
| 25145 | if (onTop) { | |
| 25146 | if (scrollTop < distance) { | |
| 25147 | $el.trigger('infinite', e); | |
| 25148 | app.emit('infinite', $el[0], e); | |
| 25149 | } | |
| 25150 | } else if (scrollTop + height >= scrollHeight - distance) { | |
| 25151 | if (virtualListContainer.length > 0) { | |
| 25152 | virtualList = virtualListContainer.eq(-1)[0].f7VirtualList; | |
| 25153 | if (virtualList && !virtualList.reachEnd && !virtualList.params.updatableScroll) { | |
| 25154 | return; | |
| 25155 | } | |
| 25156 | } | |
| 25157 | $el.trigger('infinite', e); | |
| 25158 | app.emit('infinite', $el[0], e); | |
| 25159 | } | |
| 25160 | }, | |
| 25161 | create: function create(el) { | |
| 25162 | var $el = $(el); | |
| 25163 | var app = this; | |
| 25164 | $el.on('scroll', function handle(e) { | |
| 25165 | app.infiniteScroll.handle(this, e); | |
| 25166 | }); | |
| 25167 | }, | |
| 25168 | destroy: function destroy(el) { | |
| 25169 | var $el = $(el); | |
| 25170 | $el.off('scroll'); | |
| 25171 | }, | |
| 25172 | }; | |
| 25173 | var InfiniteScroll$1 = { | |
| 25174 | name: 'infiniteScroll', | |
| 25175 | create: function create() { | |
| 25176 | var app = this; | |
| 25177 | Utils.extend(app, { | |
| 25178 | infiniteScroll: { | |
| 25179 | handle: InfiniteScroll.handleScroll.bind(app), | |
| 25180 | create: InfiniteScroll.create.bind(app), | |
| 25181 | destroy: InfiniteScroll.destroy.bind(app), | |
| 25182 | }, | |
| 25183 | }); | |
| 25184 | }, | |
| 25185 | on: { | |
| 25186 | tabMounted: function tabMounted(tabEl) { | |
| 25187 | var app = this; | |
| 25188 | var $tabEl = $(tabEl); | |
| 25189 | $tabEl.find('.infinite-scroll-content').each(function (index, el) { | |
| 25190 | app.infiniteScroll.create(el); | |
| 25191 | }); | |
| 25192 | }, | |
| 25193 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 25194 | var $tabEl = $(tabEl); | |
| 25195 | var app = this; | |
| 25196 | $tabEl.find('.infinite-scroll-content').each(function (index, el) { | |
| 25197 | app.infiniteScroll.destroy(el); | |
| 25198 | }); | |
| 25199 | }, | |
| 25200 | pageInit: function pageInit(page) { | |
| 25201 | var app = this; | |
| 25202 | page.$el.find('.infinite-scroll-content').each(function (index, el) { | |
| 25203 | app.infiniteScroll.create(el); | |
| 25204 | }); | |
| 25205 | }, | |
| 25206 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 25207 | var app = this; | |
| 25208 | page.$el.find('.infinite-scroll-content').each(function (index, el) { | |
| 25209 | app.infiniteScroll.destroy(el); | |
| 25210 | }); | |
| 25211 | }, | |
| 25212 | }, | |
| 25213 | }; | |
| 25214 | ||
| 5d51ea26 | 25215 | var PullToRefresh = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda | 25216 | function PullToRefresh(app, el) { |
| 5d51ea26 | 25217 | Framework7Class.call(this, {}, [app]); |
| 5309fbda DC |
25218 | var ptr = this; |
| 25219 | var $el = $(el); | |
| 25220 | var $preloaderEl = $el.find('.ptr-preloader'); | |
| 25221 | ||
| 25222 | ptr.$el = $el; | |
| 25223 | ptr.el = $el[0]; | |
| 25224 | ptr.app = app; | |
| 25225 | ||
| 25226 | ptr.bottom = ptr.$el.hasClass('ptr-bottom'); | |
| 25227 | ||
| 25228 | // Extend defaults with modules params | |
| 25229 | ptr.useModulesParams({}); | |
| 25230 | ||
| 25231 | var isMaterial = app.theme === 'md'; | |
| 5d51ea26 DC |
25232 | var isIos = app.theme === 'ios'; |
| 25233 | var isAurora = app.theme === 'aurora'; | |
| 5309fbda DC |
25234 | |
| 25235 | // Done | |
| 25236 | ptr.done = function done() { | |
| 25237 | var $transitionTarget = isMaterial ? $preloaderEl : $el; | |
| 25238 | $transitionTarget.transitionEnd(function () { | |
| 25239 | $el.removeClass('ptr-transitioning ptr-pull-up ptr-pull-down'); | |
| 25240 | $el.trigger('ptr:done'); | |
| 25241 | ptr.emit('local::done ptrDone', $el[0]); | |
| 25242 | }); | |
| 25243 | $el.removeClass('ptr-refreshing').addClass('ptr-transitioning'); | |
| 25244 | return ptr; | |
| 25245 | }; | |
| 25246 | ||
| 25247 | ptr.refresh = function refresh() { | |
| 25248 | if ($el.hasClass('ptr-refreshing')) { return ptr; } | |
| 25249 | $el.addClass('ptr-transitioning ptr-refreshing'); | |
| 25250 | $el.trigger('ptr:refresh', ptr.done); | |
| 25251 | ptr.emit('local::refresh ptrRefresh', $el[0], ptr.done); | |
| 25252 | return ptr; | |
| 25253 | }; | |
| 25254 | ||
| 5d51ea26 DC |
25255 | // Mousewheel |
| 25256 | ptr.mousewheel = $el.attr('data-ptr-mousewheel') === 'true'; | |
| 25257 | ||
| 5309fbda DC |
25258 | // Events handling |
| 25259 | var touchId; | |
| 25260 | var isTouched; | |
| 25261 | var isMoved; | |
| 25262 | var touchesStart = {}; | |
| 25263 | var isScrolling; | |
| 25264 | var touchesDiff; | |
| 25265 | var refresh = false; | |
| 25266 | var useTranslate = false; | |
| 25267 | var forceUseTranslate = false; | |
| 25268 | var startTranslate = 0; | |
| 25269 | var translate; | |
| 25270 | var scrollTop; | |
| 25271 | var wasScrolled; | |
| 25272 | var triggerDistance; | |
| 25273 | var dynamicTriggerDistance; | |
| 25274 | var pullStarted; | |
| 25275 | var hasNavbar = false; | |
| 25276 | var scrollHeight; | |
| 25277 | var offsetHeight; | |
| 25278 | var maxScrollTop; | |
| 25279 | var $pageEl = $el.parents('.page'); | |
| 25280 | ||
| 25281 | if ($pageEl.find('.navbar').length > 0 || $pageEl.parents('.view').children('.navbar').length > 0) { hasNavbar = true; } | |
| 25282 | if ($pageEl.hasClass('no-navbar')) { hasNavbar = false; } | |
| 25283 | if (!hasNavbar && !ptr.bottom) { $el.addClass('ptr-no-navbar'); } | |
| 25284 | ||
| 25285 | // Define trigger distance | |
| 25286 | if ($el.attr('data-ptr-distance')) { | |
| 25287 | dynamicTriggerDistance = true; | |
| 5d51ea26 DC |
25288 | } else if (isMaterial) { |
| 25289 | triggerDistance = 66; | |
| 25290 | } else if (isIos) { | |
| 25291 | triggerDistance = 44; | |
| 25292 | } else if (isAurora) { | |
| 25293 | triggerDistance = 38; | |
| 5309fbda DC |
25294 | } |
| 25295 | ||
| 25296 | function handleTouchStart(e) { | |
| 25297 | if (isTouched) { | |
| 25298 | if (Device.os === 'android') { | |
| 25299 | if ('targetTouches' in e && e.targetTouches.length > 1) { return; } | |
| 25300 | } else { return; } | |
| 25301 | } | |
| 25302 | ||
| 25303 | if ($el.hasClass('ptr-refreshing')) { | |
| 25304 | return; | |
| 25305 | } | |
| 5d51ea26 | 25306 | if ($(e.target).closest('.sortable-handler, .ptr-ignore, .card-expandable.card-opened').length) { return; } |
| 5309fbda DC |
25307 | |
| 25308 | isMoved = false; | |
| 25309 | pullStarted = false; | |
| 25310 | isTouched = true; | |
| 25311 | isScrolling = undefined; | |
| 25312 | wasScrolled = undefined; | |
| 25313 | if (e.type === 'touchstart') { touchId = e.targetTouches[0].identifier; } | |
| 25314 | touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 25315 | touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 25316 | } | |
| 25317 | ||
| 25318 | function handleTouchMove(e) { | |
| 25319 | if (!isTouched) { return; } | |
| 25320 | var pageX; | |
| 25321 | var pageY; | |
| 25322 | var touch; | |
| 25323 | if (e.type === 'touchmove') { | |
| 25324 | if (touchId && e.touches) { | |
| 25325 | for (var i = 0; i < e.touches.length; i += 1) { | |
| 25326 | if (e.touches[i].identifier === touchId) { | |
| 25327 | touch = e.touches[i]; | |
| 25328 | } | |
| 25329 | } | |
| 25330 | } | |
| 25331 | if (!touch) { touch = e.targetTouches[0]; } | |
| 25332 | pageX = touch.pageX; | |
| 25333 | pageY = touch.pageY; | |
| 25334 | } else { | |
| 25335 | pageX = e.pageX; | |
| 25336 | pageY = e.pageY; | |
| 25337 | } | |
| 25338 | if (!pageX || !pageY) { return; } | |
| 25339 | ||
| 25340 | ||
| 25341 | if (typeof isScrolling === 'undefined') { | |
| 25342 | isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x)); | |
| 25343 | } | |
| 25344 | if (!isScrolling) { | |
| 25345 | isTouched = false; | |
| 25346 | return; | |
| 25347 | } | |
| 25348 | ||
| 25349 | scrollTop = $el[0].scrollTop; | |
| 25350 | ||
| 25351 | if (!isMoved) { | |
| 25352 | $el.removeClass('ptr-transitioning'); | |
| 25353 | var targetIsScrollable; | |
| 25354 | scrollHeight = $el[0].scrollHeight; | |
| 25355 | offsetHeight = $el[0].offsetHeight; | |
| 25356 | if (ptr.bottom) { | |
| 25357 | maxScrollTop = scrollHeight - offsetHeight; | |
| 25358 | } | |
| 25359 | if (scrollTop > scrollHeight) { | |
| 25360 | isTouched = false; | |
| 25361 | return; | |
| 25362 | } | |
| 25363 | var $ptrWatchScrollable = $(e.target).closest('.ptr-watch-scroll'); | |
| 25364 | if ($ptrWatchScrollable.length) { | |
| 25365 | $ptrWatchScrollable.each(function (ptrScrollableIndex, ptrScrollableEl) { | |
| 25366 | if (ptrScrollableEl === el) { return; } | |
| 25367 | if ( | |
| 25368 | (ptrScrollableEl.scrollHeight > ptrScrollableEl.offsetHeight) | |
| 25369 | && $(ptrScrollableEl).css('overflow') === 'auto' | |
| 25370 | && ( | |
| 25371 | (!ptr.bottom && ptrScrollableEl.scrollTop > 0) | |
| 25372 | || (ptr.bottom && ptrScrollableEl.scrollTop < ptrScrollableEl.scrollHeight - ptrScrollableEl.offsetHeight) | |
| 25373 | ) | |
| 25374 | ) { | |
| 25375 | targetIsScrollable = true; | |
| 25376 | } | |
| 25377 | }); | |
| 25378 | } | |
| 25379 | if (targetIsScrollable) { | |
| 25380 | isTouched = false; | |
| 25381 | return; | |
| 25382 | } | |
| 25383 | if (dynamicTriggerDistance) { | |
| 25384 | triggerDistance = $el.attr('data-ptr-distance'); | |
| 25385 | if (triggerDistance.indexOf('%') >= 0) { triggerDistance = (scrollHeight * parseInt(triggerDistance, 10)) / 100; } | |
| 25386 | } | |
| 25387 | startTranslate = $el.hasClass('ptr-refreshing') ? triggerDistance : 0; | |
| 25388 | if (scrollHeight === offsetHeight || Device.os !== 'ios' || isMaterial) { | |
| 25389 | useTranslate = true; | |
| 25390 | } else { | |
| 25391 | useTranslate = false; | |
| 25392 | } | |
| 25393 | forceUseTranslate = false; | |
| 25394 | } | |
| 25395 | isMoved = true; | |
| 25396 | touchesDiff = pageY - touchesStart.y; | |
| 25397 | ||
| 25398 | if (typeof wasScrolled === 'undefined' && (ptr.bottom ? scrollTop !== maxScrollTop : scrollTop !== 0)) { wasScrolled = true; } | |
| 25399 | ||
| 25400 | var ptrStarted = ptr.bottom | |
| 25401 | ? (touchesDiff < 0 && scrollTop >= maxScrollTop) || scrollTop > maxScrollTop | |
| 25402 | : (touchesDiff > 0 && scrollTop <= 0) || scrollTop < 0; | |
| 25403 | ||
| 25404 | if (ptrStarted) { | |
| 25405 | // iOS 8 fix | |
| 25406 | if (Device.os === 'ios' && parseInt(Device.osVersion.split('.')[0], 10) > 7) { | |
| 25407 | if (!ptr.bottom && scrollTop === 0 && !wasScrolled) { useTranslate = true; } | |
| 25408 | if (ptr.bottom && scrollTop === maxScrollTop && !wasScrolled) { useTranslate = true; } | |
| 25409 | } | |
| 25410 | ||
| 25411 | if (!useTranslate && ptr.bottom && !isMaterial) { | |
| 25412 | $el.css('-webkit-overflow-scrolling', 'auto'); | |
| 25413 | $el.scrollTop(maxScrollTop); | |
| 25414 | forceUseTranslate = true; | |
| 25415 | } | |
| 25416 | ||
| 25417 | if (useTranslate || forceUseTranslate) { | |
| 25418 | if (e.cancelable) { | |
| 25419 | e.preventDefault(); | |
| 25420 | } | |
| 25421 | translate = (ptr.bottom ? -1 * (Math.pow( Math.abs(touchesDiff), 0.85 )) : Math.pow( touchesDiff, 0.85 )) + startTranslate; | |
| 25422 | if (isMaterial) { | |
| 25423 | $preloaderEl.transform(("translate3d(0," + translate + "px,0)")) | |
| 25424 | .find('.ptr-arrow').transform(("rotate(" + ((180 * (Math.abs(touchesDiff) / 66)) + 100) + "deg)")); | |
| 25425 | } else { | |
| 25426 | // eslint-disable-next-line | |
| 25427 | if (ptr.bottom) { | |
| 25428 | $el.children().transform(("translate3d(0," + translate + "px,0)")); | |
| 25429 | } else { | |
| 25430 | $el.transform(("translate3d(0," + translate + "px,0)")); | |
| 25431 | } | |
| 25432 | } | |
| 25433 | } | |
| 25434 | ||
| 25435 | if (((useTranslate || forceUseTranslate) && (Math.pow( Math.abs(touchesDiff), 0.85 )) > triggerDistance) || (!useTranslate && Math.abs(touchesDiff) >= triggerDistance * 2)) { | |
| 25436 | refresh = true; | |
| 25437 | $el.addClass('ptr-pull-up').removeClass('ptr-pull-down'); | |
| 25438 | } else { | |
| 25439 | refresh = false; | |
| 25440 | $el.removeClass('ptr-pull-up').addClass('ptr-pull-down'); | |
| 25441 | } | |
| 25442 | if (!pullStarted) { | |
| 25443 | $el.trigger('ptr:pullstart'); | |
| 25444 | ptr.emit('local::pullStart ptrPullStart', $el[0]); | |
| 25445 | pullStarted = true; | |
| 25446 | } | |
| 25447 | $el.trigger('ptr:pullmove', { | |
| 25448 | event: e, | |
| 25449 | scrollTop: scrollTop, | |
| 25450 | translate: translate, | |
| 25451 | touchesDiff: touchesDiff, | |
| 25452 | }); | |
| 25453 | ptr.emit('local::pullMove ptrPullMove', $el[0], { | |
| 25454 | event: e, | |
| 25455 | scrollTop: scrollTop, | |
| 25456 | translate: translate, | |
| 25457 | touchesDiff: touchesDiff, | |
| 25458 | }); | |
| 25459 | } else { | |
| 25460 | pullStarted = false; | |
| 25461 | $el.removeClass('ptr-pull-up ptr-pull-down'); | |
| 25462 | refresh = false; | |
| 25463 | } | |
| 25464 | } | |
| 25465 | function handleTouchEnd(e) { | |
| 25466 | if (e.type === 'touchend' && e.changedTouches && e.changedTouches.length > 0 && touchId) { | |
| 25467 | if (e.changedTouches[0].identifier !== touchId) { | |
| 25468 | isTouched = false; | |
| 25469 | isScrolling = false; | |
| 25470 | isMoved = false; | |
| 25471 | touchId = null; | |
| 25472 | return; | |
| 25473 | } | |
| 25474 | } | |
| 25475 | if (!isTouched || !isMoved) { | |
| 25476 | isTouched = false; | |
| 25477 | isMoved = false; | |
| 25478 | return; | |
| 25479 | } | |
| 25480 | if (translate) { | |
| 25481 | $el.addClass('ptr-transitioning'); | |
| 25482 | translate = 0; | |
| 25483 | } | |
| 25484 | if (isMaterial) { | |
| 25485 | $preloaderEl.transform('') | |
| 25486 | .find('.ptr-arrow').transform(''); | |
| 25487 | } else { | |
| 25488 | // eslint-disable-next-line | |
| 25489 | if (ptr.bottom) { | |
| 25490 | $el.children().transform(''); | |
| 25491 | } else { | |
| 25492 | $el.transform(''); | |
| 25493 | } | |
| 25494 | } | |
| 25495 | ||
| 25496 | if (!useTranslate && ptr.bottom && !isMaterial) { | |
| 25497 | $el.css('-webkit-overflow-scrolling', ''); | |
| 25498 | } | |
| 25499 | ||
| 25500 | if (refresh) { | |
| 25501 | $el.addClass('ptr-refreshing'); | |
| 25502 | $el.trigger('ptr:refresh', ptr.done); | |
| 25503 | ptr.emit('local::refresh ptrRefresh', $el[0], ptr.done); | |
| 25504 | } else { | |
| 25505 | $el.removeClass('ptr-pull-down'); | |
| 25506 | } | |
| 25507 | isTouched = false; | |
| 25508 | isMoved = false; | |
| 25509 | if (pullStarted) { | |
| 25510 | $el.trigger('ptr:pullend'); | |
| 25511 | ptr.emit('local::pullEnd ptrPullEnd', $el[0]); | |
| 25512 | } | |
| 25513 | } | |
| 25514 | ||
| 5d51ea26 DC |
25515 | var mousewheelTimeout; |
| 25516 | var mousewheelMoved; | |
| 25517 | var mousewheelAllow = true; | |
| 25518 | var mousewheelTranslate = 0; | |
| 25519 | ||
| 25520 | function handleMouseWheelRelease() { | |
| 25521 | mousewheelAllow = true; | |
| 25522 | mousewheelMoved = false; | |
| 25523 | mousewheelTranslate = 0; | |
| 25524 | if (translate) { | |
| 25525 | $el.addClass('ptr-transitioning'); | |
| 25526 | translate = 0; | |
| 25527 | } | |
| 25528 | if (isMaterial) { | |
| 25529 | $preloaderEl.transform('') | |
| 25530 | .find('.ptr-arrow').transform(''); | |
| 25531 | } else { | |
| 25532 | // eslint-disable-next-line | |
| 25533 | if (ptr.bottom) { | |
| 25534 | $el.children().transform(''); | |
| 25535 | } else { | |
| 25536 | $el.transform(''); | |
| 25537 | } | |
| 25538 | } | |
| 25539 | ||
| 25540 | if (refresh) { | |
| 25541 | $el.addClass('ptr-refreshing'); | |
| 25542 | $el.trigger('ptr:refresh', ptr.done); | |
| 25543 | ptr.emit('local::refresh ptrRefresh', $el[0], ptr.done); | |
| 25544 | } else { | |
| 25545 | $el.removeClass('ptr-pull-down'); | |
| 25546 | } | |
| 25547 | if (pullStarted) { | |
| 25548 | $el.trigger('ptr:pullend'); | |
| 25549 | ptr.emit('local::pullEnd ptrPullEnd', $el[0]); | |
| 25550 | } | |
| 25551 | } | |
| 25552 | function handleMouseWheel(e) { | |
| 25553 | if (!mousewheelAllow) { return; } | |
| 25554 | var deltaX = e.deltaX; | |
| 25555 | var deltaY = e.deltaY; | |
| 25556 | if (Math.abs(deltaX) > Math.abs(deltaY)) { return; } | |
| 25557 | if ($el.hasClass('ptr-refreshing')) { | |
| 25558 | return; | |
| 25559 | } | |
| 25560 | if ($(e.target).closest('.sortable-handler, .ptr-ignore, .card-expandable.card-opened').length) { return; } | |
| 25561 | ||
| 25562 | clearTimeout(mousewheelTimeout); | |
| 25563 | ||
| 25564 | scrollTop = $el[0].scrollTop; | |
| 25565 | ||
| 25566 | if (!mousewheelMoved) { | |
| 25567 | $el.removeClass('ptr-transitioning'); | |
| 25568 | var targetIsScrollable; | |
| 25569 | scrollHeight = $el[0].scrollHeight; | |
| 25570 | offsetHeight = $el[0].offsetHeight; | |
| 25571 | if (ptr.bottom) { | |
| 25572 | maxScrollTop = scrollHeight - offsetHeight; | |
| 25573 | } | |
| 25574 | if (scrollTop > scrollHeight) { | |
| 25575 | mousewheelAllow = false; | |
| 25576 | return; | |
| 25577 | } | |
| 25578 | var $ptrWatchScrollable = $(e.target).closest('.ptr-watch-scroll'); | |
| 25579 | if ($ptrWatchScrollable.length) { | |
| 25580 | $ptrWatchScrollable.each(function (ptrScrollableIndex, ptrScrollableEl) { | |
| 25581 | if (ptrScrollableEl === el) { return; } | |
| 25582 | if ( | |
| 25583 | (ptrScrollableEl.scrollHeight > ptrScrollableEl.offsetHeight) | |
| 25584 | && $(ptrScrollableEl).css('overflow') === 'auto' | |
| 25585 | && ( | |
| 25586 | (!ptr.bottom && ptrScrollableEl.scrollTop > 0) | |
| 25587 | || (ptr.bottom && ptrScrollableEl.scrollTop < ptrScrollableEl.scrollHeight - ptrScrollableEl.offsetHeight) | |
| 25588 | ) | |
| 25589 | ) { | |
| 25590 | targetIsScrollable = true; | |
| 25591 | } | |
| 25592 | }); | |
| 25593 | } | |
| 25594 | if (targetIsScrollable) { | |
| 25595 | mousewheelAllow = false; | |
| 25596 | return; | |
| 25597 | } | |
| 25598 | if (dynamicTriggerDistance) { | |
| 25599 | triggerDistance = $el.attr('data-ptr-distance'); | |
| 25600 | if (triggerDistance.indexOf('%') >= 0) { triggerDistance = (scrollHeight * parseInt(triggerDistance, 10)) / 100; } | |
| 25601 | } | |
| 25602 | } | |
| 25603 | isMoved = true; | |
| 25604 | mousewheelTranslate -= deltaY; | |
| 25605 | touchesDiff = mousewheelTranslate; // pageY - touchesStart.y; | |
| 25606 | ||
| 25607 | if (typeof wasScrolled === 'undefined' && (ptr.bottom ? scrollTop !== maxScrollTop : scrollTop !== 0)) { wasScrolled = true; } | |
| 25608 | ||
| 25609 | var ptrStarted = ptr.bottom | |
| 25610 | ? (touchesDiff < 0 && scrollTop >= maxScrollTop) || scrollTop > maxScrollTop | |
| 25611 | : (touchesDiff > 0 && scrollTop <= 0) || scrollTop < 0; | |
| 25612 | ||
| 25613 | if (ptrStarted) { | |
| 25614 | if (e.cancelable) { | |
| 25615 | e.preventDefault(); | |
| 25616 | } | |
| 25617 | ||
| 25618 | translate = touchesDiff; | |
| 25619 | if (Math.abs(translate) > triggerDistance) { | |
| 25620 | translate = triggerDistance + (Math.pow( (Math.abs(translate) - triggerDistance), 0.7 )); | |
| 25621 | if (ptr.bottom) { translate = -translate; } | |
| 25622 | } | |
| 25623 | ||
| 25624 | if (isMaterial) { | |
| 25625 | $preloaderEl.transform(("translate3d(0," + translate + "px,0)")) | |
| 25626 | .find('.ptr-arrow').transform(("rotate(" + ((180 * (Math.abs(touchesDiff) / 66)) + 100) + "deg)")); | |
| 25627 | } else { | |
| 25628 | // eslint-disable-next-line | |
| 25629 | if (ptr.bottom) { | |
| 25630 | $el.children().transform(("translate3d(0," + translate + "px,0)")); | |
| 25631 | } else { | |
| 25632 | $el.transform(("translate3d(0," + translate + "px,0)")); | |
| 25633 | } | |
| 25634 | } | |
| 25635 | ||
| 25636 | if (Math.abs(translate) > triggerDistance) { | |
| 25637 | refresh = true; | |
| 25638 | $el.addClass('ptr-pull-up').removeClass('ptr-pull-down'); | |
| 25639 | } else { | |
| 25640 | refresh = false; | |
| 25641 | $el.removeClass('ptr-pull-up').addClass('ptr-pull-down'); | |
| 25642 | } | |
| 25643 | if (!pullStarted) { | |
| 25644 | $el.trigger('ptr:pullstart'); | |
| 25645 | ptr.emit('local::pullStart ptrPullStart', $el[0]); | |
| 25646 | pullStarted = true; | |
| 25647 | } | |
| 25648 | $el.trigger('ptr:pullmove', { | |
| 25649 | event: e, | |
| 25650 | scrollTop: scrollTop, | |
| 25651 | translate: translate, | |
| 25652 | touchesDiff: touchesDiff, | |
| 25653 | }); | |
| 25654 | ptr.emit('local::pullMove ptrPullMove', $el[0], { | |
| 25655 | event: e, | |
| 25656 | scrollTop: scrollTop, | |
| 25657 | translate: translate, | |
| 25658 | touchesDiff: touchesDiff, | |
| 25659 | }); | |
| 25660 | } else { | |
| 25661 | pullStarted = false; | |
| 25662 | $el.removeClass('ptr-pull-up ptr-pull-down'); | |
| 25663 | refresh = false; | |
| 25664 | } | |
| 25665 | ||
| 25666 | mousewheelTimeout = setTimeout(handleMouseWheelRelease, 300); | |
| 25667 | } | |
| 25668 | ||
| 5309fbda DC |
25669 | if (!$pageEl.length || !$el.length) { return ptr; } |
| 25670 | ||
| 25671 | $el[0].f7PullToRefresh = ptr; | |
| 25672 | ||
| 25673 | // Events | |
| 25674 | ptr.attachEvents = function attachEvents() { | |
| 25675 | var passive = Support.passiveListener ? { passive: true } : false; | |
| 25676 | $el.on(app.touchEvents.start, handleTouchStart, passive); | |
| 25677 | app.on('touchmove:active', handleTouchMove); | |
| 25678 | app.on('touchend:passive', handleTouchEnd); | |
| 5d51ea26 DC |
25679 | if (ptr.mousewheel && !ptr.bottom) { |
| 25680 | $el.on('wheel', handleMouseWheel); | |
| 25681 | } | |
| 5309fbda DC |
25682 | }; |
| 25683 | ptr.detachEvents = function detachEvents() { | |
| 25684 | var passive = Support.passiveListener ? { passive: true } : false; | |
| 25685 | $el.off(app.touchEvents.start, handleTouchStart, passive); | |
| 25686 | app.off('touchmove:active', handleTouchMove); | |
| 25687 | app.off('touchend:passive', handleTouchEnd); | |
| 5d51ea26 DC |
25688 | if (ptr.mousewheel && !ptr.bottom) { |
| 25689 | $el.off('wheel', handleMouseWheel); | |
| 25690 | } | |
| 5309fbda DC |
25691 | }; |
| 25692 | ||
| 25693 | // Install Modules | |
| 25694 | ptr.useModules(); | |
| 25695 | ||
| 25696 | // Init | |
| 25697 | ptr.init(); | |
| 25698 | ||
| 25699 | return ptr; | |
| 25700 | } | |
| 25701 | ||
| 5d51ea26 DC |
25702 | if ( Framework7Class ) PullToRefresh.__proto__ = Framework7Class; |
| 25703 | PullToRefresh.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
25704 | PullToRefresh.prototype.constructor = PullToRefresh; |
| 25705 | ||
| 25706 | PullToRefresh.prototype.init = function init () { | |
| 25707 | var ptr = this; | |
| 25708 | ptr.attachEvents(); | |
| 25709 | }; | |
| 25710 | ||
| 25711 | PullToRefresh.prototype.destroy = function destroy () { | |
| 25712 | var ptr = this; | |
| 25713 | ptr.emit('local::beforeDestroy ptrBeforeDestroy', ptr); | |
| 25714 | ptr.$el.trigger('ptr:beforedestroy', ptr); | |
| 25715 | delete ptr.el.f7PullToRefresh; | |
| 25716 | ptr.detachEvents(); | |
| 25717 | Utils.deleteProps(ptr); | |
| 25718 | ptr = null; | |
| 25719 | }; | |
| 25720 | ||
| 25721 | return PullToRefresh; | |
| 25722 | }(Framework7Class)); | |
| 25723 | ||
| 25724 | var PullToRefresh$1 = { | |
| 25725 | name: 'pullToRefresh', | |
| 25726 | create: function create() { | |
| 25727 | var app = this; | |
| 25728 | app.ptr = Utils.extend( | |
| 25729 | ConstructorMethods({ | |
| 25730 | defaultSelector: '.ptr-content', | |
| 25731 | constructor: PullToRefresh, | |
| 25732 | app: app, | |
| 25733 | domProp: 'f7PullToRefresh', | |
| 25734 | }), | |
| 25735 | { | |
| 25736 | done: function done(el) { | |
| 25737 | var ptr = app.ptr.get(el); | |
| 25738 | if (ptr) { return ptr.done(); } | |
| 25739 | return undefined; | |
| 25740 | }, | |
| 25741 | refresh: function refresh(el) { | |
| 25742 | var ptr = app.ptr.get(el); | |
| 25743 | if (ptr) { return ptr.refresh(); } | |
| 25744 | return undefined; | |
| 25745 | }, | |
| 25746 | } | |
| 25747 | ); | |
| 25748 | }, | |
| 25749 | static: { | |
| 25750 | PullToRefresh: PullToRefresh, | |
| 25751 | }, | |
| 25752 | on: { | |
| 25753 | tabMounted: function tabMounted(tabEl) { | |
| 25754 | var app = this; | |
| 25755 | var $tabEl = $(tabEl); | |
| 25756 | $tabEl.find('.ptr-content').each(function (index, el) { | |
| 25757 | app.ptr.create(el); | |
| 25758 | }); | |
| 25759 | }, | |
| 25760 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 25761 | var $tabEl = $(tabEl); | |
| 25762 | var app = this; | |
| 25763 | $tabEl.find('.ptr-content').each(function (index, el) { | |
| 25764 | app.ptr.destroy(el); | |
| 25765 | }); | |
| 25766 | }, | |
| 25767 | pageInit: function pageInit(page) { | |
| 25768 | var app = this; | |
| 25769 | page.$el.find('.ptr-content').each(function (index, el) { | |
| 25770 | app.ptr.create(el); | |
| 25771 | }); | |
| 25772 | }, | |
| 25773 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 25774 | var app = this; | |
| 25775 | page.$el.find('.ptr-content').each(function (index, el) { | |
| 25776 | app.ptr.destroy(el); | |
| 25777 | }); | |
| 25778 | }, | |
| 25779 | }, | |
| 25780 | }; | |
| 25781 | ||
| 25782 | var Lazy = { | |
| 25783 | destroy: function destroy(pageEl) { | |
| 25784 | var $pageEl = $(pageEl).closest('.page'); | |
| 25785 | if (!$pageEl.length) { return; } | |
| 25786 | if ($pageEl[0].f7LazyDestroy) { | |
| 25787 | $pageEl[0].f7LazyDestroy(); | |
| 25788 | } | |
| 25789 | }, | |
| 25790 | create: function create(pageEl) { | |
| 25791 | var app = this; | |
| 25792 | var $pageEl = $(pageEl).closest('.page').eq(0); | |
| 25793 | ||
| 25794 | // Lazy images | |
| 25795 | var $lazyLoadImages = $pageEl.find('.lazy'); | |
| 25796 | if ($lazyLoadImages.length === 0 && !$pageEl.hasClass('lazy')) { return; } | |
| 25797 | ||
| 25798 | // Placeholder | |
| 25799 | var placeholderSrc = app.params.lazy.placeholder; | |
| 25800 | ||
| 25801 | if (placeholderSrc !== false) { | |
| 25802 | $lazyLoadImages.each(function (index, lazyEl) { | |
| 25803 | if ($(lazyEl).attr('data-src') && !$(lazyEl).attr('src')) { $(lazyEl).attr('src', placeholderSrc); } | |
| 25804 | }); | |
| 25805 | } | |
| 25806 | ||
| 25807 | // load image | |
| 25808 | var imagesSequence = []; | |
| 25809 | var imageIsLoading = false; | |
| 25810 | ||
| 25811 | function onImageComplete(lazyEl) { | |
| 25812 | if (imagesSequence.indexOf(lazyEl) >= 0) { | |
| 25813 | imagesSequence.splice(imagesSequence.indexOf(lazyEl), 1); | |
| 25814 | } | |
| 25815 | imageIsLoading = false; | |
| 25816 | if (app.params.lazy.sequential && imagesSequence.length > 0) { | |
| 25817 | imageIsLoading = true; | |
| 25818 | app.lazy.loadImage(imagesSequence[0], onImageComplete); | |
| 25819 | } | |
| 25820 | } | |
| 25821 | ||
| 25822 | function observerCallback(entries, observer) { | |
| 25823 | entries.forEach(function (entry) { | |
| 25824 | if (entry.isIntersecting) { | |
| 25825 | if (app.params.lazy.sequential && imageIsLoading) { | |
| 25826 | if (imagesSequence.indexOf(entry.target) < 0) { imagesSequence.push(entry.target); } | |
| 25827 | return; | |
| 25828 | } | |
| 25829 | // Load image | |
| 25830 | imageIsLoading = true; | |
| 25831 | app.lazy.loadImage(entry.target, onImageComplete); | |
| 25832 | // Detach | |
| 25833 | observer.unobserve(entry.target); | |
| 25834 | } | |
| 25835 | }); | |
| 25836 | } | |
| 25837 | if (app.params.lazy.observer && Support.intersectionObserver) { | |
| 25838 | var observer = $pageEl[0].f7LazyObserver; | |
| 25839 | if (!observer) { | |
| 25840 | observer = new win.IntersectionObserver(observerCallback, { | |
| 25841 | root: $pageEl[0], | |
| 25842 | }); | |
| 25843 | } | |
| 25844 | $lazyLoadImages.each(function (index, el) { | |
| 25845 | if (el.f7LazyObserverAdded) { return; } | |
| 25846 | el.f7LazyObserverAdded = true; | |
| 25847 | observer.observe(el); | |
| 25848 | }); | |
| 25849 | if (!$pageEl[0].f7LazyDestroy) { | |
| 25850 | $pageEl[0].f7LazyDestroy = function () { | |
| 25851 | observer.disconnect(); | |
| 25852 | delete $pageEl[0].f7LazyDestroy; | |
| 25853 | delete $pageEl[0].f7LazyObserver; | |
| 25854 | }; | |
| 25855 | } | |
| 25856 | return; | |
| 25857 | } | |
| 25858 | ||
| 25859 | function lazyHandler() { | |
| 25860 | app.lazy.load($pageEl, function (lazyEl) { | |
| 25861 | if (app.params.lazy.sequential && imageIsLoading) { | |
| 25862 | if (imagesSequence.indexOf(lazyEl) < 0) { imagesSequence.push(lazyEl); } | |
| 25863 | return; | |
| 25864 | } | |
| 25865 | imageIsLoading = true; | |
| 25866 | app.lazy.loadImage(lazyEl, onImageComplete); | |
| 25867 | }); | |
| 25868 | } | |
| 25869 | ||
| 25870 | function attachEvents() { | |
| 25871 | $pageEl[0].f7LazyAttached = true; | |
| 25872 | $pageEl.on('lazy', lazyHandler); | |
| 25873 | $pageEl.on('scroll', lazyHandler, true); | |
| 25874 | $pageEl.find('.tab').on('tab:mounted tab:show', lazyHandler); | |
| 25875 | app.on('resize', lazyHandler); | |
| 25876 | } | |
| 25877 | function detachEvents() { | |
| 25878 | $pageEl[0].f7LazyAttached = false; | |
| 25879 | delete $pageEl[0].f7LazyAttached; | |
| 25880 | $pageEl.off('lazy', lazyHandler); | |
| 25881 | $pageEl.off('scroll', lazyHandler, true); | |
| 25882 | $pageEl.find('.tab').off('tab:mounted tab:show', lazyHandler); | |
| 25883 | app.off('resize', lazyHandler); | |
| 25884 | } | |
| 25885 | ||
| 25886 | // Store detach function | |
| 25887 | if (!$pageEl[0].f7LazyDestroy) { | |
| 25888 | $pageEl[0].f7LazyDestroy = detachEvents; | |
| 25889 | } | |
| 25890 | ||
| 25891 | // Attach events | |
| 25892 | if (!$pageEl[0].f7LazyAttached) { | |
| 25893 | attachEvents(); | |
| 25894 | } | |
| 25895 | ||
| 25896 | // Run loader on page load/init | |
| 25897 | lazyHandler(); | |
| 25898 | }, | |
| 25899 | isInViewport: function isInViewport(lazyEl) { | |
| 25900 | var app = this; | |
| 25901 | var rect = lazyEl.getBoundingClientRect(); | |
| 25902 | var threshold = app.params.lazy.threshold || 0; | |
| 25903 | ||
| 25904 | return ( | |
| 25905 | rect.top >= (0 - threshold) | |
| 25906 | && rect.left >= (0 - threshold) | |
| 25907 | && rect.top <= (app.height + threshold) | |
| 25908 | && rect.left <= (app.width + threshold) | |
| 25909 | ); | |
| 25910 | }, | |
| 25911 | loadImage: function loadImage(imageEl, callback) { | |
| 25912 | var app = this; | |
| 25913 | var $imageEl = $(imageEl); | |
| 25914 | ||
| 25915 | var bg = $imageEl.attr('data-background'); | |
| 25916 | var src = bg || $imageEl.attr('data-src'); | |
| 25917 | if (!src) { return; } | |
| 25918 | function onLoad() { | |
| 25919 | $imageEl.removeClass('lazy').addClass('lazy-loaded'); | |
| 25920 | if (bg) { | |
| 25921 | $imageEl.css('background-image', ("url(" + src + ")")); | |
| 25922 | } else { | |
| 25923 | $imageEl.attr('src', src); | |
| 25924 | } | |
| 25925 | if (callback) { callback(imageEl); } | |
| 25926 | $imageEl.trigger('lazy:loaded'); | |
| 25927 | app.emit('lazyLoaded', $imageEl[0]); | |
| 25928 | } | |
| 25929 | ||
| 25930 | function onError() { | |
| 25931 | $imageEl.removeClass('lazy').addClass('lazy-loaded'); | |
| 25932 | if (bg) { | |
| 25933 | $imageEl.css('background-image', ("url(" + (app.params.lazy.placeholder || '') + ")")); | |
| 25934 | } else { | |
| 25935 | $imageEl.attr('src', app.params.lazy.placeholder || ''); | |
| 25936 | } | |
| 25937 | if (callback) { callback(imageEl); } | |
| 25938 | $imageEl.trigger('lazy:error'); | |
| 25939 | app.emit('lazyError', $imageEl[0]); | |
| 25940 | } | |
| 25941 | var image = new win.Image(); | |
| 25942 | image.onload = onLoad; | |
| 25943 | image.onerror = onError; | |
| 25944 | image.src = src; | |
| 25945 | ||
| 25946 | $imageEl.removeAttr('data-src').removeAttr('data-background'); | |
| 25947 | ||
| 25948 | // Add loaded callback and events | |
| 25949 | $imageEl.trigger('lazy:load'); | |
| 25950 | app.emit('lazyLoad', $imageEl[0]); | |
| 25951 | }, | |
| 25952 | load: function load(pageEl, callback) { | |
| 25953 | var app = this; | |
| 25954 | var $pageEl = $(pageEl); | |
| 25955 | if (!$pageEl.hasClass('page')) { $pageEl = $pageEl.parents('.page').eq(0); } | |
| 25956 | if ($pageEl.length === 0) { | |
| 25957 | return; | |
| 25958 | } | |
| 25959 | $pageEl.find('.lazy').each(function (index, lazyEl) { | |
| 25960 | var $lazyEl = $(lazyEl); | |
| 25961 | if ($lazyEl.parents('.tab:not(.tab-active)').length > 0) { | |
| 25962 | return; | |
| 25963 | } | |
| 25964 | if (app.lazy.isInViewport(lazyEl)) { | |
| 25965 | if (callback) { callback(lazyEl); } | |
| 25966 | else { app.lazy.loadImage(lazyEl); } | |
| 25967 | } | |
| 25968 | }); | |
| 25969 | }, | |
| 25970 | ||
| 25971 | }; | |
| 25972 | var Lazy$1 = { | |
| 25973 | name: 'lazy', | |
| 25974 | params: { | |
| 25975 | lazy: { | |
| 25976 | placeholder: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXCwsK592mkAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==', | |
| 25977 | threshold: 0, | |
| 25978 | sequential: true, | |
| 25979 | observer: true, | |
| 25980 | }, | |
| 25981 | }, | |
| 25982 | create: function create() { | |
| 25983 | var app = this; | |
| 25984 | Utils.extend(app, { | |
| 25985 | lazy: { | |
| 25986 | create: Lazy.create.bind(app), | |
| 25987 | destroy: Lazy.destroy.bind(app), | |
| 25988 | loadImage: Lazy.loadImage.bind(app), | |
| 25989 | load: Lazy.load.bind(app), | |
| 25990 | isInViewport: Lazy.isInViewport.bind(app), | |
| 25991 | }, | |
| 25992 | }); | |
| 25993 | }, | |
| 25994 | on: { | |
| 25995 | pageInit: function pageInit(page) { | |
| 25996 | var app = this; | |
| 25997 | if (page.$el.find('.lazy').length > 0 || page.$el.hasClass('lazy')) { | |
| 25998 | app.lazy.create(page.$el); | |
| 25999 | } | |
| 26000 | }, | |
| 26001 | pageAfterIn: function pageAfterIn(page) { | |
| 26002 | var app = this; | |
| 26003 | if (app.params.lazy.observer && Support.intersectionObserver) { return; } | |
| 26004 | if (page.$el.find('.lazy').length > 0 || page.$el.hasClass('lazy')) { | |
| 26005 | app.lazy.create(page.$el); | |
| 26006 | } | |
| 26007 | }, | |
| 26008 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 26009 | var app = this; | |
| 26010 | if (page.$el.find('.lazy').length > 0 || page.$el.hasClass('lazy')) { | |
| 26011 | app.lazy.destroy(page.$el); | |
| 26012 | } | |
| 26013 | }, | |
| 26014 | tabMounted: function tabMounted(tabEl) { | |
| 26015 | var app = this; | |
| 26016 | var $tabEl = $(tabEl); | |
| 26017 | if ($tabEl.find('.lazy').length > 0 || $tabEl.hasClass('lazy')) { | |
| 26018 | app.lazy.create($tabEl); | |
| 26019 | } | |
| 26020 | }, | |
| 26021 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 26022 | var app = this; | |
| 26023 | if (app.params.lazy.observer && Support.intersectionObserver) { return; } | |
| 26024 | var $tabEl = $(tabEl); | |
| 26025 | if ($tabEl.find('.lazy').length > 0 || $tabEl.hasClass('lazy')) { | |
| 26026 | app.lazy.destroy($tabEl); | |
| 26027 | } | |
| 26028 | }, | |
| 26029 | }, | |
| 26030 | }; | |
| 26031 | ||
| 5d51ea26 | 26032 | var DataTable = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
26033 | function DataTable(app, params) { |
| 26034 | if ( params === void 0 ) params = {}; | |
| 26035 | ||
| 5d51ea26 | 26036 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
26037 | |
| 26038 | var table = this; | |
| 26039 | ||
| 26040 | var defaults = { | |
| 26041 | ||
| 26042 | }; | |
| 26043 | ||
| 26044 | // Extend defaults with modules params | |
| 26045 | table.useModulesParams(defaults); | |
| 26046 | ||
| 26047 | table.params = Utils.extend(defaults, params); | |
| 26048 | ||
| 26049 | // El | |
| 26050 | var $el = $(table.params.el); | |
| 26051 | if ($el.length === 0) { return undefined; } | |
| 26052 | ||
| 26053 | table.$el = $el; | |
| 26054 | table.el = $el[0]; | |
| 26055 | ||
| 26056 | if (table.$el[0].f7DataTable) { | |
| 26057 | var instance = table.$el[0].f7DataTable; | |
| 26058 | table.destroy(); | |
| 26059 | return instance; | |
| 26060 | } | |
| 26061 | ||
| 26062 | table.$el[0].f7DataTable = table; | |
| 26063 | ||
| 26064 | Utils.extend(table, { | |
| 26065 | collapsible: $el.hasClass('data-table-collapsible'), | |
| 26066 | // Headers | |
| 26067 | $headerEl: $el.find('.data-table-header'), | |
| 26068 | $headerSelectedEl: $el.find('.data-table-header-selected'), | |
| 26069 | }); | |
| 26070 | ||
| 26071 | // Events | |
| 26072 | function handleChange(e) { | |
| 26073 | if (e.detail && e.detail.sentByF7DataTable) { | |
| 26074 | // Scripted event, don't do anything | |
| 26075 | return; | |
| 26076 | } | |
| 26077 | var $inputEl = $(this); | |
| 26078 | var checked = $inputEl[0].checked; | |
| 26079 | var columnIndex = $inputEl.parents('td,th').index(); | |
| 26080 | ||
| 26081 | if ($inputEl.parents('thead').length > 0) { | |
| 26082 | if (columnIndex === 0) { | |
| 26083 | $el | |
| 26084 | .find('tbody tr')[checked ? 'addClass' : 'removeClass']('data-table-row-selected'); | |
| 26085 | } | |
| 26086 | $el | |
| 26087 | .find(("tbody tr td:nth-child(" + (columnIndex + 1) + ") input")) | |
| 26088 | .prop('checked', checked) | |
| 26089 | .trigger('change', { sentByF7DataTable: true }); | |
| 5d51ea26 | 26090 | $inputEl.prop('indeterminate', false); |
| 5309fbda DC |
26091 | } else { |
| 26092 | if (columnIndex === 0) { | |
| 26093 | $inputEl.parents('tr')[checked ? 'addClass' : 'removeClass']('data-table-row-selected'); | |
| 26094 | } | |
| 5d51ea26 DC |
26095 | var checkedRows = $el.find(("tbody .checkbox-cell:nth-child(" + (columnIndex + 1) + ") input[type=\"checkbox\"]:checked")).length; |
| 26096 | var totalRows = $el.find('tbody tr').length; | |
| 26097 | var $headCheckboxEl = $el.find(("thead .checkbox-cell:nth-child(" + (columnIndex + 1) + ") input[type=\"checkbox\"]")); | |
| 5309fbda | 26098 | if (!checked) { |
| 5d51ea26 DC |
26099 | $headCheckboxEl.prop('checked', false); |
| 26100 | } else if (checkedRows === totalRows) { | |
| 26101 | $headCheckboxEl.prop('checked', true).trigger('change', { sentByF7DataTable: true }); | |
| 5309fbda | 26102 | } |
| 5d51ea26 | 26103 | $headCheckboxEl.prop('indeterminate', checkedRows > 0 && checkedRows < totalRows); |
| 5309fbda DC |
26104 | } |
| 26105 | table.checkSelectedHeader(); | |
| 26106 | } | |
| 26107 | function handleSortableClick() { | |
| 26108 | var $cellEl = $(this); | |
| 26109 | var isActive = $cellEl.hasClass('sortable-cell-active'); | |
| 26110 | var currentSort = $cellEl.hasClass('sortable-desc') ? 'desc' : 'asc'; | |
| 26111 | var newSort; | |
| 26112 | if (isActive) { | |
| 26113 | newSort = currentSort === 'desc' ? 'asc' : 'desc'; | |
| 26114 | $cellEl.removeClass('sortable-desc sortable-asc').addClass(("sortable-" + newSort)); | |
| 26115 | } else { | |
| 26116 | $el.find('thead .sortable-cell-active').removeClass('sortable-cell-active'); | |
| 26117 | $cellEl.addClass('sortable-cell-active'); | |
| 26118 | newSort = currentSort; | |
| 26119 | } | |
| 26120 | $cellEl.trigger('datatable:sort', newSort); | |
| 26121 | table.emit('local::sort dataTableSort', table, newSort); | |
| 26122 | } | |
| 26123 | table.attachEvents = function attachEvents() { | |
| 26124 | table.$el.on('change', '.checkbox-cell input[type="checkbox"]', handleChange); | |
| 26125 | table.$el.find('thead .sortable-cell').on('click', handleSortableClick); | |
| 26126 | }; | |
| 26127 | table.detachEvents = function detachEvents() { | |
| 26128 | table.$el.off('change', '.checkbox-cell input[type="checkbox"]', handleChange); | |
| 26129 | table.$el.find('thead .sortable-cell').off('click', handleSortableClick); | |
| 26130 | }; | |
| 26131 | ||
| 26132 | // Install Modules | |
| 26133 | table.useModules(); | |
| 26134 | ||
| 26135 | // Init | |
| 26136 | table.init(); | |
| 26137 | ||
| 26138 | return table; | |
| 26139 | } | |
| 26140 | ||
| 5d51ea26 DC |
26141 | if ( Framework7Class ) DataTable.__proto__ = Framework7Class; |
| 26142 | DataTable.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
26143 | DataTable.prototype.constructor = DataTable; |
| 26144 | ||
| 26145 | DataTable.prototype.setCollapsibleLabels = function setCollapsibleLabels () { | |
| 26146 | var table = this; | |
| 26147 | if (!table.collapsible) { return; } | |
| 26148 | table.$el.find('tbody td:not(.checkbox-cell)').each(function (index, el) { | |
| 26149 | var $el = $(el); | |
| 26150 | var elIndex = $el.index(); | |
| 26151 | var collpsibleTitle = $el.attr('data-collapsible-title'); | |
| 26152 | if (!collpsibleTitle && collpsibleTitle !== '') { | |
| 26153 | $el.attr('data-collapsible-title', table.$el.find('thead th').eq(elIndex).text()); | |
| 26154 | } | |
| 26155 | }); | |
| 26156 | }; | |
| 26157 | ||
| 26158 | DataTable.prototype.checkSelectedHeader = function checkSelectedHeader () { | |
| 26159 | var table = this; | |
| 26160 | if (table.$headerEl.length > 0 && table.$headerSelectedEl.length > 0) { | |
| 26161 | var checkedItems = table.$el.find('tbody .checkbox-cell input:checked').length; | |
| 26162 | table.$el[checkedItems > 0 ? 'addClass' : 'removeClass']('data-table-has-checked'); | |
| 26163 | table.$headerSelectedEl.find('.data-table-selected-count').text(checkedItems); | |
| 26164 | } | |
| 26165 | }; | |
| 26166 | ||
| 26167 | DataTable.prototype.init = function init () { | |
| 26168 | var table = this; | |
| 26169 | table.attachEvents(); | |
| 26170 | table.setCollapsibleLabels(); | |
| 26171 | table.checkSelectedHeader(); | |
| 26172 | }; | |
| 26173 | ||
| 26174 | DataTable.prototype.destroy = function destroy () { | |
| 26175 | var table = this; | |
| 26176 | ||
| 26177 | table.$el.trigger('datatable:beforedestroy', table); | |
| 26178 | table.emit('local::beforeDestroy dataTableBeforeDestroy', table); | |
| 26179 | ||
| 26180 | table.attachEvents(); | |
| 26181 | ||
| 26182 | if (table.$el[0]) { | |
| 26183 | table.$el[0].f7DataTable = null; | |
| 26184 | delete table.$el[0].f7DataTable; | |
| 26185 | } | |
| 26186 | Utils.deleteProps(table); | |
| 26187 | table = null; | |
| 26188 | }; | |
| 26189 | ||
| 26190 | return DataTable; | |
| 26191 | }(Framework7Class)); | |
| 26192 | ||
| 26193 | var DataTable$1 = { | |
| 26194 | name: 'dataTable', | |
| 26195 | static: { | |
| 26196 | DataTable: DataTable, | |
| 26197 | }, | |
| 26198 | create: function create() { | |
| 26199 | var app = this; | |
| 26200 | app.dataTable = ConstructorMethods({ | |
| 26201 | defaultSelector: '.data-table', | |
| 26202 | constructor: DataTable, | |
| 26203 | app: app, | |
| 26204 | domProp: 'f7DataTable', | |
| 26205 | }); | |
| 26206 | }, | |
| 26207 | on: { | |
| 26208 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 26209 | var app = this; | |
| 26210 | $(tabEl).find('.data-table-init').each(function (index, tableEl) { | |
| 26211 | app.dataTable.destroy(tableEl); | |
| 26212 | }); | |
| 26213 | }, | |
| 26214 | tabMounted: function tabMounted(tabEl) { | |
| 26215 | var app = this; | |
| 26216 | $(tabEl).find('.data-table-init').each(function (index, tableEl) { | |
| 26217 | app.dataTable.create({ el: tableEl }); | |
| 26218 | }); | |
| 26219 | }, | |
| 26220 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 26221 | var app = this; | |
| 26222 | page.$el.find('.data-table-init').each(function (index, tableEl) { | |
| 26223 | app.dataTable.destroy(tableEl); | |
| 26224 | }); | |
| 26225 | }, | |
| 26226 | pageInit: function pageInit(page) { | |
| 26227 | var app = this; | |
| 26228 | page.$el.find('.data-table-init').each(function (index, tableEl) { | |
| 26229 | app.dataTable.create({ el: tableEl }); | |
| 26230 | }); | |
| 26231 | }, | |
| 26232 | }, | |
| 26233 | vnode: { | |
| 26234 | 'data-table-init': { | |
| 26235 | insert: function insert(vnode) { | |
| 26236 | var app = this; | |
| 26237 | var tableEl = vnode.elm; | |
| 26238 | app.dataTable.create({ el: tableEl }); | |
| 26239 | }, | |
| 26240 | destroy: function destroy(vnode) { | |
| 26241 | var app = this; | |
| 26242 | var tableEl = vnode.elm; | |
| 26243 | app.dataTable.destroy(tableEl); | |
| 26244 | }, | |
| 26245 | }, | |
| 26246 | }, | |
| 26247 | }; | |
| 26248 | ||
| 26249 | var Fab = { | |
| 26250 | morphOpen: function morphOpen(fabEl, targetEl) { | |
| 26251 | var app = this; | |
| 26252 | var $fabEl = $(fabEl); | |
| 26253 | var $targetEl = $(targetEl); | |
| 26254 | if ($targetEl.length === 0) { return; } | |
| 26255 | ||
| 26256 | $targetEl.transition(0).addClass('fab-morph-target-visible'); | |
| 26257 | var target = { | |
| 26258 | width: $targetEl[0].offsetWidth, | |
| 26259 | height: $targetEl[0].offsetHeight, | |
| 26260 | offset: $targetEl.offset(), | |
| 26261 | borderRadius: $targetEl.css('border-radius'), | |
| 26262 | zIndex: $targetEl.css('z-index'), | |
| 26263 | }; | |
| 26264 | var fab = { | |
| 26265 | width: $fabEl[0].offsetWidth, | |
| 26266 | height: $fabEl[0].offsetHeight, | |
| 26267 | offset: $fabEl.offset(), | |
| 26268 | translateX: Utils.getTranslate($fabEl[0], 'x'), | |
| 26269 | translateY: Utils.getTranslate($fabEl[0], 'y'), | |
| 26270 | }; | |
| 26271 | ||
| 26272 | $fabEl[0].f7FabMorphData = { | |
| 26273 | $targetEl: $targetEl, | |
| 26274 | target: target, | |
| 26275 | fab: fab, | |
| 26276 | }; | |
| 26277 | ||
| 26278 | var diffX = (fab.offset.left + (fab.width / 2)) | |
| 26279 | - (target.offset.left + (target.width / 2)) | |
| 26280 | - fab.translateX; | |
| 26281 | var diffY = (fab.offset.top + (fab.height / 2)) | |
| 26282 | - (target.offset.top + (target.height / 2)) | |
| 26283 | - fab.translateY; | |
| 26284 | var scaleX = target.width / fab.width; | |
| 26285 | var scaleY = target.height / fab.height; | |
| 26286 | ||
| 26287 | var borderRadius = Math.ceil(parseInt(target.borderRadius, 10) / Math.max(scaleX, scaleY)); | |
| 26288 | if (borderRadius > 0) { borderRadius += 2; } | |
| 26289 | ||
| 26290 | $fabEl[0].f7FabMorphResizeHandler = function resizeHandler() { | |
| 26291 | $fabEl.transition(0).transform(''); | |
| 26292 | $targetEl.transition(0); | |
| 26293 | target.width = $targetEl[0].offsetWidth; | |
| 26294 | target.height = $targetEl[0].offsetHeight; | |
| 26295 | target.offset = $targetEl.offset(); | |
| 26296 | fab.offset = $fabEl.offset(); | |
| 26297 | ||
| 26298 | var diffXNew = (fab.offset.left + (fab.width / 2)) | |
| 26299 | - (target.offset.left + (target.width / 2)) | |
| 26300 | - fab.translateX; | |
| 26301 | var diffYNew = (fab.offset.top + (fab.height / 2)) | |
| 26302 | - (target.offset.top + (target.height / 2)) | |
| 26303 | - fab.translateY; | |
| 26304 | var scaleXNew = target.width / fab.width; | |
| 26305 | var scaleYNew = target.height / fab.height; | |
| 26306 | ||
| 26307 | $fabEl.transform(("translate3d(" + (-diffXNew) + "px, " + (-diffYNew) + "px, 0) scale(" + scaleXNew + ", " + scaleYNew + ")")); | |
| 26308 | }; | |
| 26309 | ||
| 26310 | $targetEl | |
| 26311 | .css('opacity', 0) | |
| 26312 | .transform(("scale(" + (1 / scaleX) + ", " + (1 / scaleY) + ")")); | |
| 26313 | $fabEl | |
| 26314 | .addClass('fab-opened') | |
| 26315 | .css('z-index', target.zIndex - 1) | |
| 26316 | .transform(("translate3d(" + (-diffX) + "px, " + (-diffY) + "px, 0)")); | |
| 26317 | $fabEl.transitionEnd(function () { | |
| 26318 | $targetEl.transition(''); | |
| 26319 | Utils.nextFrame(function () { | |
| 26320 | $targetEl.css('opacity', 1).transform('scale(1,1)'); | |
| 26321 | $fabEl | |
| 26322 | .transform(("translate3d(" + (-diffX) + "px, " + (-diffY) + "px, 0) scale(" + scaleX + ", " + scaleY + ")")) | |
| 26323 | .css('border-radius', (borderRadius + "px")) | |
| 26324 | .css('box-shadow', 'none'); | |
| 26325 | }); | |
| 26326 | app.on('resize', $fabEl[0].f7FabMorphResizeHandler); | |
| 26327 | if ($targetEl.parents('.page-content').length > 0) { | |
| 26328 | $targetEl.parents('.page-content').on('scroll', $fabEl[0].f7FabMorphResizeHandler); | |
| 26329 | } | |
| 26330 | }); | |
| 26331 | }, | |
| 26332 | morphClose: function morphClose(fabEl) { | |
| 26333 | var app = this; | |
| 26334 | var $fabEl = $(fabEl); | |
| 26335 | var morphData = $fabEl[0].f7FabMorphData; | |
| 26336 | if (!morphData) { return; } | |
| 26337 | var $targetEl = morphData.$targetEl; | |
| 26338 | var target = morphData.target; | |
| 26339 | var fab = morphData.fab; | |
| 26340 | if ($targetEl.length === 0) { return; } | |
| 26341 | ||
| 26342 | var diffX = (fab.offset.left + (fab.width / 2)) | |
| 26343 | - (target.offset.left + (target.width / 2)) | |
| 26344 | - fab.translateX; | |
| 26345 | var diffY = (fab.offset.top + (fab.height / 2)) | |
| 26346 | - (target.offset.top + (target.height / 2)) | |
| 26347 | - fab.translateY; | |
| 26348 | var scaleX = target.width / fab.width; | |
| 26349 | var scaleY = target.height / fab.height; | |
| 26350 | ||
| 26351 | app.off('resize', $fabEl[0].f7FabMorphResizeHandler); | |
| 26352 | if ($targetEl.parents('.page-content').length > 0) { | |
| 26353 | $targetEl.parents('.page-content').off('scroll', $fabEl[0].f7FabMorphResizeHandler); | |
| 26354 | } | |
| 26355 | ||
| 26356 | $targetEl | |
| 26357 | .css('opacity', 0) | |
| 26358 | .transform(("scale(" + (1 / scaleX) + ", " + (1 / scaleY) + ")")); | |
| 26359 | $fabEl | |
| 26360 | .transition('') | |
| 26361 | .css('box-shadow', '') | |
| 26362 | .css('border-radius', '') | |
| 26363 | .transform(("translate3d(" + (-diffX) + "px, " + (-diffY) + "px, 0)")); | |
| 26364 | $fabEl.transitionEnd(function () { | |
| 26365 | $fabEl | |
| 26366 | .css('z-index', '') | |
| 26367 | .removeClass('fab-opened') | |
| 26368 | .transform(''); | |
| 26369 | Utils.nextFrame(function () { | |
| 26370 | $fabEl.transitionEnd(function () { | |
| 26371 | $targetEl | |
| 26372 | .removeClass('fab-morph-target-visible') | |
| 26373 | .css('opacity', '') | |
| 26374 | .transform('') | |
| 26375 | .transition(''); | |
| 26376 | }); | |
| 26377 | }); | |
| 26378 | }); | |
| 26379 | }, | |
| 26380 | open: function open(fabEl, targetEl) { | |
| 26381 | var app = this; | |
| 26382 | var $fabEl = $(fabEl).eq(0); | |
| 26383 | var $buttonsEl = $fabEl.find('.fab-buttons'); | |
| 26384 | if (!$fabEl.length) { return; } | |
| 26385 | if ($fabEl.hasClass('fab-opened')) { return; } | |
| 26386 | if (!$buttonsEl.length && !$fabEl.hasClass('fab-morph')) { return; } | |
| 26387 | ||
| 26388 | if (app.fab.openedEl) { | |
| 26389 | if (app.fab.openedEl === $fabEl[0]) { return; } | |
| 26390 | app.fab.close(app.fab.openedEl); | |
| 26391 | } | |
| 26392 | app.fab.openedEl = $fabEl[0]; | |
| 26393 | if ($fabEl.hasClass('fab-morph')) { | |
| 26394 | app.fab.morphOpen($fabEl, targetEl || $fabEl.attr('data-morph-to')); | |
| 26395 | } else { | |
| 26396 | $fabEl.addClass('fab-opened'); | |
| 26397 | } | |
| 26398 | $fabEl.trigger('fab:open'); | |
| 26399 | }, | |
| 26400 | close: function close(fabEl) { | |
| 26401 | if ( fabEl === void 0 ) fabEl = '.fab-opened'; | |
| 26402 | ||
| 26403 | var app = this; | |
| 26404 | var $fabEl = $(fabEl).eq(0); | |
| 26405 | var $buttonsEl = $fabEl.find('.fab-buttons'); | |
| 26406 | if (!$fabEl.length) { return; } | |
| 26407 | if (!$fabEl.hasClass('fab-opened')) { return; } | |
| 26408 | if (!$buttonsEl.length && !$fabEl.hasClass('fab-morph')) { return; } | |
| 26409 | app.fab.openedEl = null; | |
| 26410 | if ($fabEl.hasClass('fab-morph')) { | |
| 26411 | app.fab.morphClose($fabEl); | |
| 26412 | } else { | |
| 26413 | $fabEl.removeClass('fab-opened'); | |
| 26414 | } | |
| 26415 | $fabEl.trigger('fab:close'); | |
| 26416 | }, | |
| 26417 | toggle: function toggle(fabEl) { | |
| 26418 | var app = this; | |
| 26419 | var $fabEl = $(fabEl); | |
| 26420 | if (!$fabEl.hasClass('fab-opened')) { app.fab.open(fabEl); } | |
| 26421 | else { app.fab.close(fabEl); } | |
| 26422 | }, | |
| 26423 | }; | |
| 26424 | ||
| 26425 | var Fab$1 = { | |
| 26426 | name: 'fab', | |
| 26427 | create: function create() { | |
| 26428 | var app = this; | |
| 26429 | Utils.extend(app, { | |
| 26430 | fab: { | |
| 26431 | openedEl: null, | |
| 26432 | morphOpen: Fab.morphOpen.bind(app), | |
| 26433 | morphClose: Fab.morphClose.bind(app), | |
| 26434 | open: Fab.open.bind(app), | |
| 26435 | close: Fab.close.bind(app), | |
| 26436 | toggle: Fab.toggle.bind(app), | |
| 26437 | }, | |
| 26438 | }); | |
| 26439 | }, | |
| 26440 | clicks: { | |
| 26441 | '.fab > a': function open($clickedEl) { | |
| 26442 | var app = this; | |
| 26443 | app.fab.toggle($clickedEl.parents('.fab')); | |
| 26444 | }, | |
| 26445 | '.fab-open': function open($clickedEl, data) { | |
| 26446 | if ( data === void 0 ) data = {}; | |
| 26447 | ||
| 26448 | var app = this; | |
| 26449 | app.fab.open(data.fab); | |
| 26450 | }, | |
| 26451 | '.fab-close': function close($clickedEl, data) { | |
| 26452 | if ( data === void 0 ) data = {}; | |
| 26453 | ||
| 26454 | var app = this; | |
| 26455 | app.fab.close(data.fab); | |
| 26456 | }, | |
| 26457 | }, | |
| 26458 | }; | |
| 26459 | ||
| 26460 | var Searchbar = /*@__PURE__*/(function (FrameworkClass) { | |
| 26461 | function Searchbar(app, params) { | |
| 26462 | if ( params === void 0 ) params = {}; | |
| 26463 | ||
| 26464 | FrameworkClass.call(this, params, [app]); | |
| 26465 | ||
| 26466 | var sb = this; | |
| 26467 | ||
| 26468 | var defaults = { | |
| 26469 | el: undefined, | |
| 26470 | inputEl: undefined, | |
| 26471 | inputEvents: 'change input compositionend', | |
| 26472 | disableButton: true, | |
| 26473 | disableButtonEl: undefined, | |
| 26474 | backdropEl: undefined, | |
| 26475 | searchContainer: undefined, // container to search, HTMLElement or CSS selector | |
| 26476 | searchItem: 'li', // single item selector, CSS selector | |
| 26477 | searchIn: undefined, // where to search in item, CSS selector | |
| 26478 | searchGroup: '.list-group', | |
| 26479 | searchGroupTitle: '.item-divider, .list-group-title', | |
| 26480 | ignore: '.searchbar-ignore', | |
| 26481 | foundEl: '.searchbar-found', | |
| 26482 | notFoundEl: '.searchbar-not-found', | |
| 26483 | hideOnEnableEl: '.searchbar-hide-on-enable', | |
| 26484 | hideOnSearchEl: '.searchbar-hide-on-search', | |
| 5d51ea26 | 26485 | backdrop: undefined, |
| 5309fbda DC |
26486 | removeDiacritics: true, |
| 26487 | customSearch: false, | |
| 26488 | hideDividers: true, | |
| 26489 | hideGroups: true, | |
| 26490 | disableOnBackdropClick: true, | |
| 26491 | expandable: false, | |
| 5d51ea26 | 26492 | inline: false, |
| 5309fbda DC |
26493 | }; |
| 26494 | ||
| 26495 | // Extend defaults with modules params | |
| 26496 | sb.useModulesParams(defaults); | |
| 26497 | ||
| 26498 | sb.params = Utils.extend(defaults, params); | |
| 26499 | ||
| 26500 | var $el = $(sb.params.el); | |
| 26501 | if ($el.length === 0) { return sb; } | |
| 26502 | ||
| 26503 | if ($el[0].f7Searchbar) { return $el[0].f7Searchbar; } | |
| 26504 | ||
| 26505 | $el[0].f7Searchbar = sb; | |
| 26506 | ||
| 26507 | var $pageEl; | |
| 26508 | var $navbarEl = $el.parents('.navbar-inner'); | |
| 26509 | if ($el.parents('.page').length > 0) { | |
| 26510 | $pageEl = $el.parents('.page'); | |
| 26511 | } else if ($navbarEl.length > 0) { | |
| 26512 | $pageEl = $(app.navbar.getPageByEl($navbarEl[0])); | |
| 26513 | if (!$pageEl.length) { | |
| 26514 | var $currentPageEl = $el.parents('.view').find('.page-current'); | |
| 26515 | if ($currentPageEl[0] && $currentPageEl[0].f7Page && $currentPageEl[0].f7Page.navbarEl === $navbarEl[0]) { | |
| 26516 | $pageEl = $currentPageEl; | |
| 26517 | } | |
| 26518 | } | |
| 26519 | } | |
| 26520 | ||
| 26521 | var $foundEl; | |
| 26522 | if (params.foundEl) { | |
| 26523 | $foundEl = $(params.foundEl); | |
| 26524 | } else if (typeof sb.params.foundEl === 'string' && $pageEl) { | |
| 26525 | $foundEl = $pageEl.find(sb.params.foundEl); | |
| 26526 | } | |
| 26527 | ||
| 26528 | var $notFoundEl; | |
| 26529 | if (params.notFoundEl) { | |
| 26530 | $notFoundEl = $(params.notFoundEl); | |
| 26531 | } else if (typeof sb.params.notFoundEl === 'string' && $pageEl) { | |
| 26532 | $notFoundEl = $pageEl.find(sb.params.notFoundEl); | |
| 26533 | } | |
| 26534 | ||
| 26535 | var $hideOnEnableEl; | |
| 26536 | if (params.hideOnEnableEl) { | |
| 26537 | $hideOnEnableEl = $(params.hideOnEnableEl); | |
| 26538 | } else if (typeof sb.params.hideOnEnableEl === 'string' && $pageEl) { | |
| 26539 | $hideOnEnableEl = $pageEl.find(sb.params.hideOnEnableEl); | |
| 26540 | } | |
| 26541 | ||
| 26542 | var $hideOnSearchEl; | |
| 26543 | if (params.hideOnSearchEl) { | |
| 26544 | $hideOnSearchEl = $(params.hideOnSearchEl); | |
| 26545 | } else if (typeof sb.params.hideOnSearchEl === 'string' && $pageEl) { | |
| 26546 | $hideOnSearchEl = $pageEl.find(sb.params.hideOnSearchEl); | |
| 26547 | } | |
| 26548 | ||
| 5d51ea26 DC |
26549 | |
| 26550 | var expandable = sb.params.expandable || $el.hasClass('searchbar-expandable'); | |
| 26551 | var inline = sb.params.inline || $el.hasClass('searchbar-inline'); | |
| 26552 | ||
| 26553 | if (typeof sb.params.backdrop === 'undefined') { | |
| 26554 | if (!inline) { sb.params.backdrop = app.theme !== 'aurora'; } | |
| 26555 | else { sb.params.backdrop = false; } | |
| 26556 | } | |
| 26557 | ||
| 5309fbda DC |
26558 | var $backdropEl; |
| 26559 | if (sb.params.backdrop) { | |
| 26560 | if (sb.params.backdropEl) { | |
| 26561 | $backdropEl = $(sb.params.backdropEl); | |
| 26562 | } else if ($pageEl && $pageEl.length > 0) { | |
| 26563 | $backdropEl = $pageEl.find('.searchbar-backdrop'); | |
| 26564 | } else { | |
| 26565 | $backdropEl = $el.siblings('.searchbar-backdrop'); | |
| 26566 | } | |
| 26567 | if ($backdropEl.length === 0) { | |
| 26568 | $backdropEl = $('<div class="searchbar-backdrop"></div>'); | |
| 26569 | if ($pageEl && $pageEl.length) { | |
| 26570 | if ($el.parents($pageEl).length > 0 && $navbarEl && $el.parents($navbarEl).length === 0) { | |
| 26571 | $backdropEl.insertBefore($el); | |
| 26572 | } else { | |
| 26573 | $backdropEl.insertBefore($pageEl.find('.page-content').eq(0)); | |
| 26574 | } | |
| 26575 | } else { | |
| 26576 | $backdropEl.insertBefore($el); | |
| 26577 | } | |
| 26578 | } | |
| 26579 | } | |
| 26580 | ||
| 26581 | var $searchContainer; | |
| 26582 | if (sb.params.searchContainer) { | |
| 26583 | $searchContainer = $(sb.params.searchContainer); | |
| 26584 | } | |
| 26585 | ||
| 26586 | var $inputEl; | |
| 26587 | if (sb.params.inputEl) { | |
| 26588 | $inputEl = $(sb.params.inputEl); | |
| 26589 | } else { | |
| 26590 | $inputEl = $el.find('input[type="search"]').eq(0); | |
| 26591 | } | |
| 26592 | ||
| 26593 | var $disableButtonEl; | |
| 26594 | if (sb.params.disableButton) { | |
| 26595 | if (sb.params.disableButtonEl) { | |
| 26596 | $disableButtonEl = $(sb.params.disableButtonEl); | |
| 26597 | } else { | |
| 26598 | $disableButtonEl = $el.find('.searchbar-disable-button'); | |
| 26599 | } | |
| 26600 | } | |
| 26601 | ||
| 26602 | Utils.extend(sb, { | |
| 26603 | app: app, | |
| 26604 | view: app.views.get($el.parents('.view')), | |
| 26605 | $el: $el, | |
| 26606 | el: $el[0], | |
| 26607 | $backdropEl: $backdropEl, | |
| 26608 | backdropEl: $backdropEl && $backdropEl[0], | |
| 26609 | $searchContainer: $searchContainer, | |
| 26610 | searchContainer: $searchContainer && $searchContainer[0], | |
| 26611 | $inputEl: $inputEl, | |
| 26612 | inputEl: $inputEl[0], | |
| 26613 | $disableButtonEl: $disableButtonEl, | |
| 26614 | disableButtonEl: $disableButtonEl && $disableButtonEl[0], | |
| 26615 | disableButtonHasMargin: false, | |
| 26616 | $pageEl: $pageEl, | |
| 26617 | pageEl: $pageEl && $pageEl[0], | |
| 26618 | $navbarEl: $navbarEl, | |
| 26619 | navbarEl: $navbarEl && $navbarEl[0], | |
| 26620 | $foundEl: $foundEl, | |
| 26621 | foundEl: $foundEl && $foundEl[0], | |
| 26622 | $notFoundEl: $notFoundEl, | |
| 26623 | notFoundEl: $notFoundEl && $notFoundEl[0], | |
| 26624 | $hideOnEnableEl: $hideOnEnableEl, | |
| 26625 | hideOnEnableEl: $hideOnEnableEl && $hideOnEnableEl[0], | |
| 26626 | $hideOnSearchEl: $hideOnSearchEl, | |
| 26627 | hideOnSearchEl: $hideOnSearchEl && $hideOnSearchEl[0], | |
| 26628 | previousQuery: '', | |
| 26629 | query: '', | |
| 26630 | isVirtualList: $searchContainer && $searchContainer.hasClass('virtual-list'), | |
| 26631 | virtualList: undefined, | |
| 26632 | enabled: false, | |
| 5d51ea26 DC |
26633 | expandable: expandable, |
| 26634 | inline: inline, | |
| 5309fbda DC |
26635 | }); |
| 26636 | ||
| 26637 | // Events | |
| 26638 | function preventSubmit(e) { | |
| 26639 | e.preventDefault(); | |
| 26640 | } | |
| 26641 | function onInputFocus(e) { | |
| 26642 | sb.enable(e); | |
| 26643 | sb.$el.addClass('searchbar-focused'); | |
| 26644 | } | |
| 26645 | function onInputBlur() { | |
| 26646 | sb.$el.removeClass('searchbar-focused'); | |
| 5d51ea26 DC |
26647 | if (app.theme === 'aurora' && (!$disableButtonEl || !$disableButtonEl.length || !sb.params.disableButton) && !sb.query) { |
| 26648 | sb.disable(); | |
| 26649 | } | |
| 5309fbda DC |
26650 | } |
| 26651 | function onInputChange() { | |
| 26652 | var value = sb.$inputEl.val().trim(); | |
| 26653 | if ( | |
| 26654 | ( | |
| 26655 | (sb.$searchContainer && sb.$searchContainer.length > 0) | |
| 26656 | && (sb.params.searchIn || sb.isVirtualList || sb.params.searchIn === sb.params.searchItem) | |
| 26657 | ) | |
| 26658 | || sb.params.customSearch | |
| 26659 | ) { | |
| 26660 | sb.search(value, true); | |
| 26661 | } | |
| 26662 | } | |
| 26663 | function onInputClear(e, previousValue) { | |
| 26664 | sb.$el.trigger('searchbar:clear', previousValue); | |
| 26665 | sb.emit('local::clear searchbarClear', sb, previousValue); | |
| 26666 | } | |
| 26667 | function disableOnClick(e) { | |
| 26668 | sb.disable(e); | |
| 26669 | } | |
| 26670 | function onPageBeforeOut() { | |
| 26671 | if (!sb || (sb && !sb.$el)) { return; } | |
| 26672 | if (sb.enabled) { | |
| 26673 | sb.$el.removeClass('searchbar-enabled'); | |
| 26674 | if (sb.expandable) { | |
| 26675 | sb.$el.parents('.navbar-inner').removeClass('with-searchbar-expandable-enabled'); | |
| 26676 | } | |
| 26677 | } | |
| 26678 | } | |
| 26679 | function onPageBeforeIn() { | |
| 26680 | if (!sb || (sb && !sb.$el)) { return; } | |
| 26681 | if (sb.enabled) { | |
| 26682 | sb.$el.addClass('searchbar-enabled'); | |
| 26683 | if (sb.expandable) { | |
| 26684 | sb.$el.parents('.navbar-inner').addClass('with-searchbar-expandable-enabled'); | |
| 26685 | } | |
| 26686 | } | |
| 26687 | } | |
| 26688 | sb.attachEvents = function attachEvents() { | |
| 26689 | $el.on('submit', preventSubmit); | |
| 26690 | if (sb.params.disableButton) { | |
| 26691 | sb.$disableButtonEl.on('click', disableOnClick); | |
| 26692 | } | |
| 26693 | if (sb.params.disableOnBackdropClick && sb.$backdropEl) { | |
| 26694 | sb.$backdropEl.on('click', disableOnClick); | |
| 26695 | } | |
| 26696 | if (sb.expandable && app.theme === 'ios' && sb.view && $navbarEl.length && sb.$pageEl) { | |
| 26697 | sb.$pageEl.on('page:beforeout', onPageBeforeOut); | |
| 26698 | sb.$pageEl.on('page:beforein', onPageBeforeIn); | |
| 26699 | } | |
| 26700 | sb.$inputEl.on('focus', onInputFocus); | |
| 26701 | sb.$inputEl.on('blur', onInputBlur); | |
| 26702 | sb.$inputEl.on(sb.params.inputEvents, onInputChange); | |
| 26703 | sb.$inputEl.on('input:clear', onInputClear); | |
| 26704 | }; | |
| 26705 | sb.detachEvents = function detachEvents() { | |
| 26706 | $el.off('submit', preventSubmit); | |
| 26707 | if (sb.params.disableButton) { | |
| 26708 | sb.$disableButtonEl.off('click', disableOnClick); | |
| 26709 | } | |
| 26710 | if (sb.params.disableOnBackdropClick && sb.$backdropEl) { | |
| 26711 | sb.$backdropEl.off('click', disableOnClick); | |
| 26712 | } | |
| 26713 | if (sb.expandable && app.theme === 'ios' && sb.view && $navbarEl.length && sb.$pageEl) { | |
| 26714 | sb.$pageEl.off('page:beforeout', onPageBeforeOut); | |
| 26715 | sb.$pageEl.off('page:beforein', onPageBeforeIn); | |
| 26716 | } | |
| 26717 | sb.$inputEl.off('focus', onInputFocus); | |
| 26718 | sb.$inputEl.off('blur', onInputBlur); | |
| 26719 | sb.$inputEl.off(sb.params.inputEvents, onInputChange); | |
| 26720 | sb.$inputEl.off('input:clear', onInputClear); | |
| 26721 | }; | |
| 26722 | ||
| 26723 | // Install Modules | |
| 26724 | sb.useModules(); | |
| 26725 | ||
| 26726 | // Init | |
| 26727 | sb.init(); | |
| 26728 | ||
| 26729 | return sb; | |
| 26730 | } | |
| 26731 | ||
| 26732 | if ( FrameworkClass ) Searchbar.__proto__ = FrameworkClass; | |
| 26733 | Searchbar.prototype = Object.create( FrameworkClass && FrameworkClass.prototype ); | |
| 26734 | Searchbar.prototype.constructor = Searchbar; | |
| 26735 | ||
| 26736 | Searchbar.prototype.clear = function clear (e) { | |
| 26737 | var sb = this; | |
| 26738 | if (!sb.query && e && $(e.target).hasClass('searchbar-clear')) { | |
| 26739 | sb.disable(); | |
| 26740 | return sb; | |
| 26741 | } | |
| 26742 | var previousQuery = sb.value; | |
| 26743 | sb.$inputEl.val('').trigger('change').focus(); | |
| 26744 | sb.$el.trigger('searchbar:clear', previousQuery); | |
| 26745 | sb.emit('local::clear searchbarClear', sb, previousQuery); | |
| 26746 | return sb; | |
| 26747 | }; | |
| 26748 | ||
| 26749 | Searchbar.prototype.setDisableButtonMargin = function setDisableButtonMargin () { | |
| 26750 | var sb = this; | |
| 26751 | if (sb.expandable) { return; } | |
| 26752 | var app = sb.app; | |
| 26753 | sb.$disableButtonEl.transition(0).show(); | |
| 26754 | sb.$disableButtonEl.css(("margin-" + (app.rtl ? 'left' : 'right')), ((-sb.disableButtonEl.offsetWidth) + "px")); | |
| 26755 | /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */ | |
| 26756 | sb._clientLeft = sb.$disableButtonEl[0].clientLeft; | |
| 26757 | sb.$disableButtonEl.transition(''); | |
| 26758 | sb.disableButtonHasMargin = true; | |
| 26759 | }; | |
| 26760 | ||
| 26761 | Searchbar.prototype.enable = function enable (setFocus) { | |
| 26762 | var sb = this; | |
| 26763 | if (sb.enabled) { return sb; } | |
| 26764 | var app = sb.app; | |
| 26765 | sb.enabled = true; | |
| 26766 | function enable() { | |
| 26767 | if (sb.$backdropEl && ((sb.$searchContainer && sb.$searchContainer.length) || sb.params.customSearch) && !sb.$el.hasClass('searchbar-enabled') && !sb.query) { | |
| 26768 | sb.backdropShow(); | |
| 26769 | } | |
| 26770 | sb.$el.addClass('searchbar-enabled'); | |
| 26771 | if (!sb.$disableButtonEl || (sb.$disableButtonEl && sb.$disableButtonEl.length === 0)) { | |
| 26772 | sb.$el.addClass('searchbar-enabled-no-disable-button'); | |
| 26773 | } | |
| 5d51ea26 | 26774 | if (!sb.expandable && sb.$disableButtonEl && sb.$disableButtonEl.length > 0 && app.theme !== 'md') { |
| 5309fbda DC |
26775 | if (!sb.disableButtonHasMargin) { |
| 26776 | sb.setDisableButtonMargin(); | |
| 26777 | } | |
| 26778 | sb.$disableButtonEl.css(("margin-" + (app.rtl ? 'left' : 'right')), '0px'); | |
| 26779 | } | |
| 26780 | if (sb.expandable) { | |
| 26781 | if (sb.$el.parents('.navbar-inner').hasClass('navbar-inner-large') && sb.$pageEl) { | |
| 26782 | sb.$pageEl.find('.page-content').addClass('with-searchbar-expandable-enabled'); | |
| 26783 | } | |
| 26784 | if (app.theme === 'md' && sb.$el.parent('.navbar-inner').parent('.navbar').length) { | |
| 26785 | sb.$el.parent('.navbar-inner').parent('.navbar').addClass('with-searchbar-expandable-enabled'); | |
| 26786 | } else { | |
| 26787 | sb.$el.parent('.navbar-inner').addClass('with-searchbar-expandable-enabled'); | |
| 26788 | sb.$el.parent('.navbar-inner-large').addClass('navbar-inner-large-collapsed'); | |
| 26789 | } | |
| 26790 | } | |
| 26791 | if (sb.$hideOnEnableEl) { sb.$hideOnEnableEl.addClass('hidden-by-searchbar'); } | |
| 26792 | sb.$el.trigger('searchbar:enable'); | |
| 26793 | sb.emit('local::enable searchbarEnable', sb); | |
| 26794 | } | |
| 26795 | var needsFocus = false; | |
| 26796 | if (setFocus === true) { | |
| 26797 | if (doc.activeElement !== sb.inputEl) { | |
| 26798 | needsFocus = true; | |
| 26799 | } | |
| 26800 | } | |
| 26801 | var isIos = app.device.ios && app.theme === 'ios'; | |
| 26802 | if (isIos) { | |
| 26803 | if (sb.expandable) { | |
| 26804 | if (needsFocus) { sb.$inputEl.focus(); } | |
| 26805 | enable(); | |
| 26806 | } else { | |
| 26807 | if (needsFocus) { sb.$inputEl.focus(); } | |
| 26808 | if (setFocus && (setFocus.type === 'focus' || setFocus === true)) { | |
| 26809 | Utils.nextTick(function () { | |
| 26810 | enable(); | |
| 26811 | }, 400); | |
| 26812 | } else { | |
| 26813 | enable(); | |
| 26814 | } | |
| 26815 | } | |
| 26816 | } else { | |
| 26817 | if (needsFocus) { sb.$inputEl.focus(); } | |
| 26818 | if (app.theme === 'md' && sb.expandable) { | |
| 26819 | sb.$el.parents('.page, .view, .navbar-inner').scrollLeft(0); | |
| 26820 | } | |
| 26821 | enable(); | |
| 26822 | } | |
| 26823 | return sb; | |
| 26824 | }; | |
| 26825 | ||
| 26826 | Searchbar.prototype.disable = function disable () { | |
| 26827 | var sb = this; | |
| 26828 | if (!sb.enabled) { return sb; } | |
| 26829 | var app = sb.app; | |
| 26830 | sb.$inputEl.val('').trigger('change'); | |
| 26831 | sb.$el.removeClass('searchbar-enabled searchbar-focused searchbar-enabled-no-disable-button'); | |
| 26832 | if (sb.expandable) { | |
| 26833 | if (sb.$el.parents('.navbar-inner').hasClass('navbar-inner-large') && sb.$pageEl) { | |
| 26834 | sb.$pageEl.find('.page-content').removeClass('with-searchbar-expandable-enabled'); | |
| 26835 | } | |
| 26836 | if (app.theme === 'md' && sb.$el.parent('.navbar-inner').parent('.navbar').length) { | |
| 26837 | sb.$el.parent('.navbar-inner').parent('.navbar').removeClass('with-searchbar-expandable-enabled'); | |
| 26838 | } else { | |
| 26839 | sb.$el.parent('.navbar-inner').removeClass('with-searchbar-expandable-enabled'); | |
| 26840 | if (sb.$pageEl) { | |
| 26841 | sb.$pageEl.find('.page-content').trigger('scroll'); | |
| 26842 | } | |
| 26843 | } | |
| 26844 | } | |
| 5d51ea26 | 26845 | if (!sb.expandable && sb.$disableButtonEl && sb.$disableButtonEl.length > 0 && app.theme !== 'md') { |
| 5309fbda DC |
26846 | sb.$disableButtonEl.css(("margin-" + (app.rtl ? 'left' : 'right')), ((-sb.disableButtonEl.offsetWidth) + "px")); |
| 26847 | } | |
| 26848 | if (sb.$backdropEl && ((sb.$searchContainer && sb.$searchContainer.length) || sb.params.customSearch)) { | |
| 26849 | sb.backdropHide(); | |
| 26850 | } | |
| 26851 | ||
| 26852 | sb.enabled = false; | |
| 26853 | ||
| 26854 | sb.$inputEl.blur(); | |
| 26855 | ||
| 26856 | if (sb.$hideOnEnableEl) { sb.$hideOnEnableEl.removeClass('hidden-by-searchbar'); } | |
| 26857 | ||
| 26858 | sb.$el.trigger('searchbar:disable'); | |
| 26859 | sb.emit('local::disable searchbarDisable', sb); | |
| 26860 | return sb; | |
| 26861 | }; | |
| 26862 | ||
| 26863 | Searchbar.prototype.toggle = function toggle () { | |
| 26864 | var sb = this; | |
| 26865 | if (sb.enabled) { sb.disable(); } | |
| 26866 | else { sb.enable(true); } | |
| 26867 | return sb; | |
| 26868 | }; | |
| 26869 | ||
| 26870 | Searchbar.prototype.backdropShow = function backdropShow () { | |
| 26871 | var sb = this; | |
| 26872 | if (sb.$backdropEl) { | |
| 26873 | sb.$backdropEl.addClass('searchbar-backdrop-in'); | |
| 26874 | } | |
| 26875 | return sb; | |
| 26876 | }; | |
| 26877 | ||
| 26878 | Searchbar.prototype.backdropHide = function backdropHide () { | |
| 26879 | var sb = this; | |
| 26880 | if (sb.$backdropEl) { | |
| 26881 | sb.$backdropEl.removeClass('searchbar-backdrop-in'); | |
| 26882 | } | |
| 26883 | return sb; | |
| 26884 | }; | |
| 26885 | ||
| 26886 | Searchbar.prototype.search = function search (query, internal) { | |
| 26887 | var sb = this; | |
| 26888 | sb.previousQuery = sb.query || ''; | |
| 26889 | if (query === sb.previousQuery) { return sb; } | |
| 26890 | ||
| 26891 | if (!internal) { | |
| 26892 | if (!sb.enabled) { | |
| 26893 | sb.enable(); | |
| 26894 | } | |
| 26895 | sb.$inputEl.val(query); | |
| 26896 | sb.$inputEl.trigger('input'); | |
| 26897 | } | |
| 26898 | sb.query = query; | |
| 26899 | sb.value = query; | |
| 26900 | ||
| 26901 | var $searchContainer = sb.$searchContainer; | |
| 26902 | var $el = sb.$el; | |
| 26903 | var $foundEl = sb.$foundEl; | |
| 26904 | var $notFoundEl = sb.$notFoundEl; | |
| 26905 | var $hideOnSearchEl = sb.$hideOnSearchEl; | |
| 26906 | var isVirtualList = sb.isVirtualList; | |
| 26907 | ||
| 26908 | // Hide on search element | |
| 26909 | if (query.length > 0 && $hideOnSearchEl) { | |
| 26910 | $hideOnSearchEl.addClass('hidden-by-searchbar'); | |
| 26911 | } else if ($hideOnSearchEl) { | |
| 26912 | $hideOnSearchEl.removeClass('hidden-by-searchbar'); | |
| 26913 | } | |
| 26914 | // Add active/inactive classes on overlay | |
| 26915 | if ( | |
| 26916 | ($searchContainer && $searchContainer.length && $el.hasClass('searchbar-enabled')) | |
| 26917 | || (sb.params.customSearch && $el.hasClass('searchbar-enabled')) | |
| 26918 | ) { | |
| 26919 | if (query.length === 0) { | |
| 26920 | sb.backdropShow(); | |
| 26921 | } else { | |
| 26922 | sb.backdropHide(); | |
| 26923 | } | |
| 26924 | } | |
| 26925 | ||
| 26926 | if (sb.params.customSearch) { | |
| 26927 | $el.trigger('searchbar:search', query, sb.previousQuery); | |
| 26928 | sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery); | |
| 26929 | return sb; | |
| 26930 | } | |
| 26931 | ||
| 26932 | var foundItems = []; | |
| 26933 | var vlQuery; | |
| 26934 | if (isVirtualList) { | |
| 26935 | sb.virtualList = $searchContainer[0].f7VirtualList; | |
| 26936 | if (query.trim() === '') { | |
| 26937 | sb.virtualList.resetFilter(); | |
| 26938 | if ($notFoundEl) { $notFoundEl.hide(); } | |
| 26939 | if ($foundEl) { $foundEl.show(); } | |
| 26940 | $el.trigger('searchbar:search', query, sb.previousQuery); | |
| 26941 | sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery); | |
| 26942 | return sb; | |
| 26943 | } | |
| 26944 | vlQuery = sb.params.removeDiacritics ? Utils.removeDiacritics(query) : query; | |
| 26945 | if (sb.virtualList.params.searchAll) { | |
| 26946 | foundItems = sb.virtualList.params.searchAll(vlQuery, sb.virtualList.items) || []; | |
| 26947 | } else if (sb.virtualList.params.searchByItem) { | |
| 26948 | for (var i = 0; i < sb.virtualList.items.length; i += 1) { | |
| 26949 | if (sb.virtualList.params.searchByItem(vlQuery, sb.virtualList.params.items[i], i)) { | |
| 26950 | foundItems.push(i); | |
| 26951 | } | |
| 26952 | } | |
| 26953 | } | |
| 26954 | } else { | |
| 26955 | var values; | |
| 26956 | if (sb.params.removeDiacritics) { values = Utils.removeDiacritics(query.trim().toLowerCase()).split(' '); } | |
| 26957 | else { | |
| 26958 | values = query.trim().toLowerCase().split(' '); | |
| 26959 | } | |
| 26960 | $searchContainer.find(sb.params.searchItem).removeClass('hidden-by-searchbar').each(function (itemIndex, itemEl) { | |
| 26961 | var $itemEl = $(itemEl); | |
| 26962 | var compareWithText = []; | |
| 26963 | var $searchIn = sb.params.searchIn ? $itemEl.find(sb.params.searchIn) : $itemEl; | |
| 26964 | if (sb.params.searchIn === sb.params.searchItem) { | |
| 26965 | $searchIn = $itemEl; | |
| 26966 | } | |
| 26967 | $searchIn.each(function (searchInIndex, searchInEl) { | |
| 26968 | var itemText = $(searchInEl).text().trim().toLowerCase(); | |
| 26969 | if (sb.params.removeDiacritics) { itemText = Utils.removeDiacritics(itemText); } | |
| 26970 | compareWithText.push(itemText); | |
| 26971 | }); | |
| 26972 | compareWithText = compareWithText.join(' '); | |
| 26973 | var wordsMatch = 0; | |
| 26974 | for (var i = 0; i < values.length; i += 1) { | |
| 26975 | if (compareWithText.indexOf(values[i]) >= 0) { wordsMatch += 1; } | |
| 26976 | } | |
| 26977 | if (wordsMatch !== values.length && !(sb.params.ignore && $itemEl.is(sb.params.ignore))) { | |
| 26978 | $itemEl.addClass('hidden-by-searchbar'); | |
| 26979 | } else { | |
| 26980 | foundItems.push($itemEl[0]); | |
| 26981 | } | |
| 26982 | }); | |
| 26983 | ||
| 26984 | if (sb.params.hideDividers) { | |
| 26985 | $searchContainer.find(sb.params.searchGroupTitle).each(function (titleIndex, titleEl) { | |
| 26986 | var $titleEl = $(titleEl); | |
| 26987 | var $nextElements = $titleEl.nextAll(sb.params.searchItem); | |
| 26988 | var hide = true; | |
| 26989 | for (var i = 0; i < $nextElements.length; i += 1) { | |
| 26990 | var $nextEl = $nextElements.eq(i); | |
| 26991 | if ($nextEl.is(sb.params.searchGroupTitle)) { break; } | |
| 26992 | if (!$nextEl.hasClass('hidden-by-searchbar')) { | |
| 26993 | hide = false; | |
| 26994 | } | |
| 26995 | } | |
| 26996 | var ignore = sb.params.ignore && $titleEl.is(sb.params.ignore); | |
| 26997 | if (hide && !ignore) { $titleEl.addClass('hidden-by-searchbar'); } | |
| 26998 | else { $titleEl.removeClass('hidden-by-searchbar'); } | |
| 26999 | }); | |
| 27000 | } | |
| 27001 | if (sb.params.hideGroups) { | |
| 27002 | $searchContainer.find(sb.params.searchGroup).each(function (groupIndex, groupEl) { | |
| 27003 | var $groupEl = $(groupEl); | |
| 27004 | var ignore = sb.params.ignore && $groupEl.is(sb.params.ignore); | |
| 27005 | // eslint-disable-next-line | |
| 27006 | var notHidden = $groupEl.find(sb.params.searchItem).filter(function (index, el) { | |
| 27007 | return !$(el).hasClass('hidden-by-searchbar'); | |
| 27008 | }); | |
| 27009 | if (notHidden.length === 0 && !ignore) { | |
| 27010 | $groupEl.addClass('hidden-by-searchbar'); | |
| 27011 | } else { | |
| 27012 | $groupEl.removeClass('hidden-by-searchbar'); | |
| 27013 | } | |
| 27014 | }); | |
| 27015 | } | |
| 27016 | } | |
| 27017 | ||
| 27018 | if (foundItems.length === 0) { | |
| 27019 | if ($notFoundEl) { $notFoundEl.show(); } | |
| 27020 | if ($foundEl) { $foundEl.hide(); } | |
| 27021 | } else { | |
| 27022 | if ($notFoundEl) { $notFoundEl.hide(); } | |
| 27023 | if ($foundEl) { $foundEl.show(); } | |
| 27024 | } | |
| 27025 | if (isVirtualList && sb.virtualList) { | |
| 27026 | sb.virtualList.filterItems(foundItems); | |
| 27027 | } | |
| 27028 | ||
| 27029 | $el.trigger('searchbar:search', query, sb.previousQuery, foundItems); | |
| 27030 | sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery, foundItems); | |
| 27031 | ||
| 27032 | return sb; | |
| 27033 | }; | |
| 27034 | ||
| 27035 | Searchbar.prototype.init = function init () { | |
| 27036 | var sb = this; | |
| 5d51ea26 DC |
27037 | if (sb.expandable && sb.$el) { sb.$el.addClass('searchbar-expandable'); } |
| 27038 | if (sb.inline && sb.$el) { sb.$el.addClass('searchbar-inline'); } | |
| 5309fbda DC |
27039 | sb.attachEvents(); |
| 27040 | }; | |
| 27041 | ||
| 27042 | Searchbar.prototype.destroy = function destroy () { | |
| 27043 | var sb = this; | |
| 27044 | sb.emit('local::beforeDestroy searchbarBeforeDestroy', sb); | |
| 27045 | sb.$el.trigger('searchbar:beforedestroy', sb); | |
| 27046 | sb.detachEvents(); | |
| 27047 | if (sb.$el[0]) { | |
| 27048 | sb.$el[0].f7Searchbar = null; | |
| 27049 | delete sb.$el[0].f7Searchbar; | |
| 27050 | } | |
| 27051 | Utils.deleteProps(sb); | |
| 27052 | }; | |
| 27053 | ||
| 27054 | return Searchbar; | |
| 27055 | }(Framework7Class)); | |
| 27056 | ||
| 27057 | var Searchbar$1 = { | |
| 27058 | name: 'searchbar', | |
| 27059 | static: { | |
| 27060 | Searchbar: Searchbar, | |
| 27061 | }, | |
| 27062 | create: function create() { | |
| 27063 | var app = this; | |
| 27064 | app.searchbar = ConstructorMethods({ | |
| 27065 | defaultSelector: '.searchbar', | |
| 27066 | constructor: Searchbar, | |
| 27067 | app: app, | |
| 27068 | domProp: 'f7Searchbar', | |
| 27069 | addMethods: 'clear enable disable toggle search'.split(' '), | |
| 27070 | }); | |
| 27071 | }, | |
| 27072 | on: { | |
| 27073 | tabMounted: function tabMounted(tabEl) { | |
| 27074 | var app = this; | |
| 27075 | $(tabEl).find('.searchbar-init').each(function (index, searchbarEl) { | |
| 27076 | var $searchbarEl = $(searchbarEl); | |
| 27077 | app.searchbar.create(Utils.extend($searchbarEl.dataset(), { el: searchbarEl })); | |
| 27078 | }); | |
| 27079 | }, | |
| 27080 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 27081 | $(tabEl).find('.searchbar-init').each(function (index, searchbarEl) { | |
| 27082 | if (searchbarEl.f7Searchbar && searchbarEl.f7Searchbar.destroy) { | |
| 27083 | searchbarEl.f7Searchbar.destroy(); | |
| 27084 | } | |
| 27085 | }); | |
| 27086 | }, | |
| 27087 | pageInit: function pageInit(page) { | |
| 27088 | var app = this; | |
| 27089 | page.$el.find('.searchbar-init').each(function (index, searchbarEl) { | |
| 27090 | var $searchbarEl = $(searchbarEl); | |
| 27091 | app.searchbar.create(Utils.extend($searchbarEl.dataset(), { el: searchbarEl })); | |
| 27092 | }); | |
| 27093 | if (app.theme === 'ios' && page.view && page.view.router.separateNavbar && page.$navbarEl && page.$navbarEl.length > 0) { | |
| 27094 | page.$navbarEl.find('.searchbar-init').each(function (index, searchbarEl) { | |
| 27095 | var $searchbarEl = $(searchbarEl); | |
| 27096 | app.searchbar.create(Utils.extend($searchbarEl.dataset(), { el: searchbarEl })); | |
| 27097 | }); | |
| 27098 | } | |
| 27099 | }, | |
| 27100 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 27101 | var app = this; | |
| 27102 | page.$el.find('.searchbar-init').each(function (index, searchbarEl) { | |
| 27103 | if (searchbarEl.f7Searchbar && searchbarEl.f7Searchbar.destroy) { | |
| 27104 | searchbarEl.f7Searchbar.destroy(); | |
| 27105 | } | |
| 27106 | }); | |
| 27107 | if (app.theme === 'ios' && page.view && page.view.router.separateNavbar && page.$navbarEl && page.$navbarEl.length > 0) { | |
| 27108 | page.$navbarEl.find('.searchbar-init').each(function (index, searchbarEl) { | |
| 27109 | if (searchbarEl.f7Searchbar && searchbarEl.f7Searchbar.destroy) { | |
| 27110 | searchbarEl.f7Searchbar.destroy(); | |
| 27111 | } | |
| 27112 | }); | |
| 27113 | } | |
| 27114 | }, | |
| 27115 | }, | |
| 27116 | clicks: { | |
| 27117 | '.searchbar-clear': function clear($clickedEl, data) { | |
| 27118 | if ( data === void 0 ) data = {}; | |
| 27119 | ||
| 27120 | var app = this; | |
| 27121 | var sb = app.searchbar.get(data.searchbar); | |
| 27122 | if (sb) { sb.clear(); } | |
| 27123 | }, | |
| 27124 | '.searchbar-enable': function enable($clickedEl, data) { | |
| 27125 | if ( data === void 0 ) data = {}; | |
| 27126 | ||
| 27127 | var app = this; | |
| 27128 | var sb = app.searchbar.get(data.searchbar); | |
| 27129 | if (sb) { sb.enable(true); } | |
| 27130 | }, | |
| 27131 | '.searchbar-disable': function disable($clickedEl, data) { | |
| 27132 | if ( data === void 0 ) data = {}; | |
| 27133 | ||
| 27134 | var app = this; | |
| 27135 | var sb = app.searchbar.get(data.searchbar); | |
| 27136 | if (sb) { sb.disable(); } | |
| 27137 | }, | |
| 27138 | '.searchbar-toggle': function toggle($clickedEl, data) { | |
| 27139 | if ( data === void 0 ) data = {}; | |
| 27140 | ||
| 27141 | var app = this; | |
| 27142 | var sb = app.searchbar.get(data.searchbar); | |
| 27143 | if (sb) { sb.toggle(); } | |
| 27144 | }, | |
| 27145 | }, | |
| 27146 | vnode: { | |
| 27147 | 'searchbar-init': { | |
| 27148 | insert: function insert(vnode) { | |
| 27149 | var app = this; | |
| 27150 | var searchbarEl = vnode.elm; | |
| 27151 | var $searchbarEl = $(searchbarEl); | |
| 27152 | app.searchbar.create(Utils.extend($searchbarEl.dataset(), { el: searchbarEl })); | |
| 27153 | }, | |
| 27154 | destroy: function destroy(vnode) { | |
| 27155 | var searchbarEl = vnode.elm; | |
| 27156 | if (searchbarEl.f7Searchbar && searchbarEl.f7Searchbar.destroy) { | |
| 27157 | searchbarEl.f7Searchbar.destroy(); | |
| 27158 | } | |
| 27159 | }, | |
| 27160 | }, | |
| 27161 | }, | |
| 27162 | }; | |
| 27163 | ||
| 5d51ea26 | 27164 | var Messages = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
27165 | function Messages(app, params) { |
| 27166 | if ( params === void 0 ) params = {}; | |
| 27167 | ||
| 5d51ea26 | 27168 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
27169 | |
| 27170 | var m = this; | |
| 27171 | ||
| 27172 | var defaults = { | |
| 27173 | autoLayout: true, | |
| 27174 | messages: [], | |
| 27175 | newMessagesFirst: false, | |
| 27176 | scrollMessages: true, | |
| 27177 | scrollMessagesOnEdge: true, | |
| 27178 | firstMessageRule: undefined, | |
| 27179 | lastMessageRule: undefined, | |
| 27180 | tailMessageRule: undefined, | |
| 27181 | sameNameMessageRule: undefined, | |
| 27182 | sameHeaderMessageRule: undefined, | |
| 27183 | sameFooterMessageRule: undefined, | |
| 27184 | sameAvatarMessageRule: undefined, | |
| 27185 | customClassMessageRule: undefined, | |
| 27186 | renderMessage: undefined, | |
| 27187 | }; | |
| 27188 | ||
| 27189 | // Extend defaults with modules params | |
| 27190 | m.useModulesParams(defaults); | |
| 27191 | ||
| 27192 | m.params = Utils.extend(defaults, params); | |
| 27193 | ||
| 27194 | var $el = $(params.el).eq(0); | |
| 27195 | if ($el.length === 0) { return m; } | |
| 27196 | ||
| 27197 | if ($el[0].f7Messages) { return $el[0].f7Messages; } | |
| 27198 | ||
| 27199 | $el[0].f7Messages = m; | |
| 27200 | ||
| 27201 | var $pageContentEl = $el.closest('.page-content').eq(0); | |
| 27202 | ||
| 27203 | Utils.extend(m, { | |
| 27204 | messages: m.params.messages, | |
| 27205 | $el: $el, | |
| 27206 | el: $el[0], | |
| 27207 | $pageContentEl: $pageContentEl, | |
| 27208 | pageContentEl: $pageContentEl[0], | |
| 27209 | ||
| 27210 | }); | |
| 27211 | // Install Modules | |
| 27212 | m.useModules(); | |
| 27213 | ||
| 27214 | // Init | |
| 27215 | m.init(); | |
| 27216 | ||
| 27217 | return m; | |
| 27218 | } | |
| 27219 | ||
| 5d51ea26 DC |
27220 | if ( Framework7Class ) Messages.__proto__ = Framework7Class; |
| 27221 | Messages.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
27222 | Messages.prototype.constructor = Messages; |
| 27223 | // eslint-disable-next-line | |
| 27224 | Messages.prototype.getMessageData = function getMessageData (messageEl) { | |
| 27225 | var $messageEl = $(messageEl); | |
| 27226 | var data = { | |
| 27227 | name: $messageEl.find('.message-name').html(), | |
| 27228 | header: $messageEl.find('.message-header').html(), | |
| 27229 | textHeader: $messageEl.find('.message-text-header').html(), | |
| 27230 | textFooter: $messageEl.find('.message-text-footer').html(), | |
| 27231 | footer: $messageEl.find('.message-footer').html(), | |
| 27232 | isTitle: $messageEl.hasClass('messages-title'), | |
| 27233 | type: $messageEl.hasClass('message-sent') ? 'sent' : 'received', | |
| 27234 | text: $messageEl.find('.message-text').html(), | |
| 27235 | image: $messageEl.find('.message-image').html(), | |
| 27236 | imageSrc: $messageEl.find('.message-image img').attr('src'), | |
| 27237 | typing: $messageEl.hasClass('message-typing'), | |
| 27238 | }; | |
| 27239 | if (data.isTitle) { | |
| 27240 | data.text = $messageEl.html(); | |
| 27241 | } | |
| 27242 | if (data.text && data.textHeader) { | |
| 27243 | data.text = data.text.replace(("<div class=\"message-text-header\">" + (data.textHeader) + "</div>"), ''); | |
| 27244 | } | |
| 27245 | if (data.text && data.textFooter) { | |
| 27246 | data.text = data.text.replace(("<div class=\"message-text-footer\">" + (data.textFooter) + "</div>"), ''); | |
| 27247 | } | |
| 27248 | var avatar = $messageEl.find('.message-avatar').css('background-image'); | |
| 27249 | if (avatar === 'none' || avatar === '') { avatar = undefined; } | |
| 27250 | if (avatar && typeof avatar === 'string') { | |
| 27251 | avatar = avatar.replace('url(', '').replace(')', '').replace(/"/g, '').replace(/'/g, ''); | |
| 27252 | } else { | |
| 27253 | avatar = undefined; | |
| 27254 | } | |
| 27255 | data.avatar = avatar; | |
| 27256 | ||
| 27257 | return data; | |
| 27258 | }; | |
| 27259 | ||
| 27260 | Messages.prototype.getMessagesData = function getMessagesData () { | |
| 27261 | var m = this; | |
| 27262 | var data = []; | |
| 27263 | m.$el.find('.message, .messages-title').each(function (index, messageEl) { | |
| 27264 | data.push(m.getMessageData(messageEl)); | |
| 27265 | }); | |
| 27266 | return data; | |
| 27267 | }; | |
| 27268 | ||
| 27269 | Messages.prototype.renderMessage = function renderMessage (messageToRender) { | |
| 27270 | var m = this; | |
| 27271 | var message = Utils.extend({ | |
| 27272 | type: 'sent', | |
| 27273 | attrs: {}, | |
| 27274 | }, messageToRender); | |
| 27275 | if (m.params.renderMessage) { | |
| 27276 | return m.params.renderMessage.call(m, message); | |
| 27277 | } | |
| 27278 | if (message.isTitle) { | |
| 27279 | return ("<div class=\"messages-title\">" + (message.text) + "</div>"); | |
| 27280 | } | |
| 27281 | var attrs = Object.keys(message.attrs).map(function (attr) { return (attr + "=\"" + (message.attrs[attr]) + "\""); }).join(' '); | |
| 27282 | return ("\n <div class=\"message message-" + (message.type) + " " + (message.isTyping ? 'message-typing' : '') + " " + (message.cssClass || '') + "\" " + attrs + ">\n " + (message.avatar ? ("\n <div class=\"message-avatar\" style=\"background-image:url(" + (message.avatar) + ")\"></div>\n ") : '') + "\n <div class=\"message-content\">\n " + (message.name ? ("<div class=\"message-name\">" + (message.name) + "</div>") : '') + "\n " + (message.header ? ("<div class=\"message-header\">" + (message.header) + "</div>") : '') + "\n <div class=\"message-bubble\">\n " + (message.textHeader ? ("<div class=\"message-text-header\">" + (message.textHeader) + "</div>") : '') + "\n " + (message.image ? ("<div class=\"message-image\">" + (message.image) + "</div>") : '') + "\n " + (message.imageSrc && !message.image ? ("<div class=\"message-image\"><img src=\"" + (message.imageSrc) + "\"></div>") : '') + "\n " + (message.text || message.isTyping ? ("<div class=\"message-text\">" + (message.text || '') + (message.isTyping ? '<div class="message-typing-indicator"><div></div><div></div><div></div></div>' : '') + "</div>") : '') + "\n " + (message.textFooter ? ("<div class=\"message-text-footer\">" + (message.textFooter) + "</div>") : '') + "\n </div>\n " + (message.footer ? ("<div class=\"message-footer\">" + (message.footer) + "</div>") : '') + "\n </div>\n </div>\n "); | |
| 27283 | }; | |
| 27284 | ||
| 27285 | Messages.prototype.renderMessages = function renderMessages (messagesToRender, method) { | |
| 27286 | if ( messagesToRender === void 0 ) messagesToRender = this.messages; | |
| 27287 | if ( method === void 0 ) method = this.params.newMessagesFirst ? 'prepend' : 'append'; | |
| 27288 | ||
| 27289 | var m = this; | |
| 27290 | var html = messagesToRender.map(function (message) { return m.renderMessage(message); }).join(''); | |
| 27291 | m.$el[method](html); | |
| 27292 | }; | |
| 27293 | ||
| 27294 | Messages.prototype.isFirstMessage = function isFirstMessage () { | |
| 27295 | var ref; | |
| 27296 | ||
| 27297 | var args = [], len = arguments.length; | |
| 27298 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 27299 | var m = this; | |
| 27300 | if (m.params.firstMessageRule) { return (ref = m.params).firstMessageRule.apply(ref, args); } | |
| 27301 | return false; | |
| 27302 | }; | |
| 27303 | ||
| 27304 | Messages.prototype.isLastMessage = function isLastMessage () { | |
| 27305 | var ref; | |
| 27306 | ||
| 27307 | var args = [], len = arguments.length; | |
| 27308 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 27309 | var m = this; | |
| 27310 | if (m.params.lastMessageRule) { return (ref = m.params).lastMessageRule.apply(ref, args); } | |
| 27311 | return false; | |
| 27312 | }; | |
| 27313 | ||
| 27314 | Messages.prototype.isTailMessage = function isTailMessage () { | |
| 27315 | var ref; | |
| 27316 | ||
| 27317 | var args = [], len = arguments.length; | |
| 27318 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 27319 | var m = this; | |
| 27320 | if (m.params.tailMessageRule) { return (ref = m.params).tailMessageRule.apply(ref, args); } | |
| 27321 | return false; | |
| 27322 | }; | |
| 27323 | ||
| 27324 | Messages.prototype.isSameNameMessage = function isSameNameMessage () { | |
| 27325 | var ref; | |
| 27326 | ||
| 27327 | var args = [], len = arguments.length; | |
| 27328 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 27329 | var m = this; | |
| 27330 | if (m.params.sameNameMessageRule) { return (ref = m.params).sameNameMessageRule.apply(ref, args); } | |
| 27331 | return false; | |
| 27332 | }; | |
| 27333 | ||
| 27334 | Messages.prototype.isSameHeaderMessage = function isSameHeaderMessage () { | |
| 27335 | var ref; | |
| 27336 | ||
| 27337 | var args = [], len = arguments.length; | |
| 27338 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 27339 | var m = this; | |
| 27340 | if (m.params.sameHeaderMessageRule) { return (ref = m.params).sameHeaderMessageRule.apply(ref, args); } | |
| 27341 | return false; | |
| 27342 | }; | |
| 27343 | ||
| 27344 | Messages.prototype.isSameFooterMessage = function isSameFooterMessage () { | |
| 27345 | var ref; | |
| 27346 | ||
| 27347 | var args = [], len = arguments.length; | |
| 27348 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 27349 | var m = this; | |
| 27350 | if (m.params.sameFooterMessageRule) { return (ref = m.params).sameFooterMessageRule.apply(ref, args); } | |
| 27351 | return false; | |
| 27352 | }; | |
| 27353 | ||
| 27354 | Messages.prototype.isSameAvatarMessage = function isSameAvatarMessage () { | |
| 27355 | var ref; | |
| 27356 | ||
| 27357 | var args = [], len = arguments.length; | |
| 27358 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 27359 | var m = this; | |
| 27360 | if (m.params.sameAvatarMessageRule) { return (ref = m.params).sameAvatarMessageRule.apply(ref, args); } | |
| 27361 | return false; | |
| 27362 | }; | |
| 27363 | ||
| 27364 | Messages.prototype.isCustomClassMessage = function isCustomClassMessage () { | |
| 27365 | var ref; | |
| 27366 | ||
| 27367 | var args = [], len = arguments.length; | |
| 27368 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 27369 | var m = this; | |
| 27370 | if (m.params.customClassMessageRule) { return (ref = m.params).customClassMessageRule.apply(ref, args); } | |
| 27371 | return undefined; | |
| 27372 | }; | |
| 27373 | ||
| 27374 | Messages.prototype.layout = function layout () { | |
| 27375 | var m = this; | |
| 27376 | m.$el.find('.message, .messages-title').each(function (index, messageEl) { | |
| 27377 | var $messageEl = $(messageEl); | |
| 27378 | if (!m.messages) { | |
| 27379 | m.messages = m.getMessagesData(); | |
| 27380 | } | |
| 27381 | var classes = []; | |
| 27382 | var message = m.messages[index]; | |
| 27383 | var previousMessage = m.messages[index - 1]; | |
| 27384 | var nextMessage = m.messages[index + 1]; | |
| 27385 | if (m.isFirstMessage(message, previousMessage, nextMessage)) { | |
| 27386 | classes.push('message-first'); | |
| 27387 | } | |
| 27388 | if (m.isLastMessage(message, previousMessage, nextMessage)) { | |
| 27389 | classes.push('message-last'); | |
| 27390 | } | |
| 27391 | if (m.isTailMessage(message, previousMessage, nextMessage)) { | |
| 27392 | classes.push('message-tail'); | |
| 27393 | } | |
| 27394 | if (m.isSameNameMessage(message, previousMessage, nextMessage)) { | |
| 27395 | classes.push('message-same-name'); | |
| 27396 | } | |
| 27397 | if (m.isSameHeaderMessage(message, previousMessage, nextMessage)) { | |
| 27398 | classes.push('message-same-header'); | |
| 27399 | } | |
| 27400 | if (m.isSameFooterMessage(message, previousMessage, nextMessage)) { | |
| 27401 | classes.push('message-same-footer'); | |
| 27402 | } | |
| 27403 | if (m.isSameAvatarMessage(message, previousMessage, nextMessage)) { | |
| 27404 | classes.push('message-same-avatar'); | |
| 27405 | } | |
| 27406 | var customMessageClasses = m.isCustomClassMessage(message, previousMessage, nextMessage); | |
| 27407 | if (customMessageClasses && customMessageClasses.length) { | |
| 27408 | if (typeof customMessageClasses === 'string') { | |
| 27409 | customMessageClasses = customMessageClasses.split(' '); | |
| 27410 | } | |
| 27411 | customMessageClasses.forEach(function (customClass) { | |
| 27412 | classes.push(customClass); | |
| 27413 | }); | |
| 27414 | } | |
| 27415 | $messageEl.removeClass('message-first message-last message-tail message-same-name message-same-header message-same-footer message-same-avatar'); | |
| 27416 | classes.forEach(function (className) { | |
| 27417 | $messageEl.addClass(className); | |
| 27418 | }); | |
| 27419 | }); | |
| 27420 | }; | |
| 27421 | ||
| 27422 | Messages.prototype.clear = function clear () { | |
| 27423 | var m = this; | |
| 27424 | m.messages = []; | |
| 27425 | m.$el.html(''); | |
| 27426 | }; | |
| 27427 | ||
| 27428 | Messages.prototype.removeMessage = function removeMessage (messageToRemove, layout) { | |
| 27429 | if ( layout === void 0 ) layout = true; | |
| 27430 | ||
| 27431 | var m = this; | |
| 27432 | // Index or El | |
| 27433 | var index; | |
| 27434 | var $el; | |
| 27435 | if (typeof messageToRemove === 'number') { | |
| 27436 | index = messageToRemove; | |
| 27437 | $el = m.$el.find('.message, .messages-title').eq(index); | |
| 27438 | } else if (m.messages && m.messages.indexOf(messageToRemove) >= 0) { | |
| 27439 | index = m.messages.indexOf(messageToRemove); | |
| 27440 | $el = m.$el.children().eq(index); | |
| 27441 | } else { | |
| 27442 | $el = $(messageToRemove); | |
| 27443 | index = $el.index(); | |
| 27444 | } | |
| 27445 | if ($el.length === 0) { | |
| 27446 | return m; | |
| 27447 | } | |
| 27448 | $el.remove(); | |
| 27449 | m.messages.splice(index, 1); | |
| 27450 | if (m.params.autoLayout && layout) { m.layout(); } | |
| 27451 | return m; | |
| 27452 | }; | |
| 27453 | ||
| 27454 | Messages.prototype.removeMessages = function removeMessages (messagesToRemove, layout) { | |
| 27455 | if ( layout === void 0 ) layout = true; | |
| 27456 | ||
| 27457 | var m = this; | |
| 27458 | if (Array.isArray(messagesToRemove)) { | |
| 27459 | var messagesToRemoveEls = []; | |
| 27460 | messagesToRemove.forEach(function (messageToRemoveIndex) { | |
| 27461 | messagesToRemoveEls.push(m.$el.find('.message, .messages-title').eq(messageToRemoveIndex)); | |
| 27462 | }); | |
| 27463 | messagesToRemoveEls.forEach(function (messageToRemove) { | |
| 27464 | m.removeMessage(messageToRemove, false); | |
| 27465 | }); | |
| 27466 | } else { | |
| 27467 | $(messagesToRemove).each(function (index, messageToRemove) { | |
| 27468 | m.removeMessage(messageToRemove, false); | |
| 27469 | }); | |
| 27470 | } | |
| 27471 | if (m.params.autoLayout && layout) { m.layout(); } | |
| 27472 | return m; | |
| 27473 | }; | |
| 27474 | ||
| 27475 | Messages.prototype.addMessage = function addMessage () { | |
| 27476 | var assign, assign$1; | |
| 27477 | ||
| 27478 | var args = [], len = arguments.length; | |
| 27479 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 27480 | var m = this; | |
| 27481 | var messageToAdd; | |
| 27482 | var animate; | |
| 27483 | var method; | |
| 27484 | if (typeof args[1] === 'boolean') { | |
| 27485 | (assign = args, messageToAdd = assign[0], animate = assign[1], method = assign[2]); | |
| 27486 | } else { | |
| 27487 | (assign$1 = args, messageToAdd = assign$1[0], method = assign$1[1], animate = assign$1[2]); | |
| 27488 | } | |
| 27489 | if (typeof animate === 'undefined') { | |
| 27490 | animate = true; | |
| 27491 | } | |
| 27492 | if (typeof method === 'undefined') { | |
| 27493 | method = m.params.newMessagesFirst ? 'prepend' : 'append'; | |
| 27494 | } | |
| 27495 | ||
| 27496 | return m.addMessages([messageToAdd], animate, method); | |
| 27497 | }; | |
| 27498 | ||
| 27499 | Messages.prototype.addMessages = function addMessages () { | |
| 27500 | var assign, assign$1; | |
| 27501 | ||
| 27502 | var args = [], len = arguments.length; | |
| 27503 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 27504 | var m = this; | |
| 27505 | var messagesToAdd; | |
| 27506 | var animate; | |
| 27507 | var method; | |
| 27508 | if (typeof args[1] === 'boolean') { | |
| 27509 | (assign = args, messagesToAdd = assign[0], animate = assign[1], method = assign[2]); | |
| 27510 | } else { | |
| 27511 | (assign$1 = args, messagesToAdd = assign$1[0], method = assign$1[1], animate = assign$1[2]); | |
| 27512 | } | |
| 27513 | if (typeof animate === 'undefined') { | |
| 27514 | animate = true; | |
| 27515 | } | |
| 27516 | if (typeof method === 'undefined') { | |
| 27517 | method = m.params.newMessagesFirst ? 'prepend' : 'append'; | |
| 27518 | } | |
| 27519 | ||
| 27520 | // Define scroll positions before new messages added | |
| 27521 | var scrollHeightBefore = m.pageContentEl.scrollHeight; | |
| 27522 | var heightBefore = m.pageContentEl.offsetHeight; | |
| 27523 | var scrollBefore = m.pageContentEl.scrollTop; | |
| 27524 | ||
| 27525 | // Add message to DOM and data | |
| 27526 | var messagesHTML = ''; | |
| 27527 | var typingMessage = m.messages.filter(function (el) { return el.isTyping; })[0]; | |
| 27528 | messagesToAdd.forEach(function (messageToAdd) { | |
| 27529 | if (typingMessage) { | |
| 27530 | if (method === 'append') { | |
| 27531 | m.messages.splice(m.messages.indexOf(typingMessage), 0, messageToAdd); | |
| 27532 | } else { | |
| 27533 | m.messages.splice(m.messages.indexOf(typingMessage) + 1, 0, messageToAdd); | |
| 27534 | } | |
| 27535 | } else { | |
| 27536 | m.messages[method === 'append' ? 'push' : 'unshift'](messageToAdd); | |
| 27537 | } | |
| 27538 | messagesHTML += m.renderMessage(messageToAdd); | |
| 27539 | }); | |
| 27540 | var $messagesEls = $(messagesHTML); | |
| 27541 | if (animate) { | |
| 27542 | if (method === 'append' && !m.params.newMessagesFirst) { | |
| 27543 | $messagesEls.addClass('message-appear-from-bottom'); | |
| 27544 | } | |
| 27545 | if (method === 'prepend' && m.params.newMessagesFirst) { | |
| 27546 | $messagesEls.addClass('message-appear-from-top'); | |
| 27547 | } | |
| 27548 | } | |
| 27549 | if (typingMessage) { | |
| 27550 | if (method === 'append') { | |
| 27551 | $messagesEls.insertBefore(m.$el.find('.message-typing')); | |
| 27552 | } else { | |
| 27553 | $messagesEls.insertAfter(m.$el.find('.message-typing')); | |
| 27554 | } | |
| 27555 | } else { | |
| 27556 | m.$el[method]($messagesEls); | |
| 27557 | } | |
| 27558 | ||
| 27559 | // Layout | |
| 27560 | if (m.params.autoLayout) { m.layout(); } | |
| 27561 | ||
| 27562 | if (method === 'prepend' && !typingMessage) { | |
| 27563 | m.pageContentEl.scrollTop = scrollBefore + (m.pageContentEl.scrollHeight - scrollHeightBefore); | |
| 27564 | } | |
| 27565 | ||
| 27566 | if (m.params.scrollMessages && ((method === 'append' && !m.params.newMessagesFirst) || (method === 'prepend' && m.params.newMessagesFirst && !typingMessage))) { | |
| 27567 | if (m.params.scrollMessagesOnEdge) { | |
| 27568 | var onEdge = false; | |
| 27569 | if (m.params.newMessagesFirst && scrollBefore === 0) { | |
| 27570 | onEdge = true; | |
| 27571 | } | |
| 27572 | if (!m.params.newMessagesFirst && (scrollBefore - (scrollHeightBefore - heightBefore) >= -10)) { | |
| 27573 | onEdge = true; | |
| 27574 | } | |
| 27575 | if (onEdge) { m.scroll(animate ? undefined : 0); } | |
| 27576 | } else { | |
| 27577 | m.scroll(animate ? undefined : 0); | |
| 27578 | } | |
| 27579 | } | |
| 27580 | ||
| 27581 | return m; | |
| 27582 | }; | |
| 27583 | ||
| 27584 | Messages.prototype.showTyping = function showTyping (message) { | |
| 27585 | if ( message === void 0 ) message = {}; | |
| 27586 | ||
| 27587 | var m = this; | |
| 27588 | var typingMessage = m.messages.filter(function (el) { return el.isTyping; })[0]; | |
| 27589 | if (typingMessage) { | |
| 27590 | m.removeMessage(m.messages.indexOf(typingMessage)); | |
| 27591 | } | |
| 27592 | m.addMessage(Utils.extend({ | |
| 27593 | type: 'received', | |
| 27594 | isTyping: true, | |
| 27595 | }, message)); | |
| 27596 | return m; | |
| 27597 | }; | |
| 27598 | ||
| 27599 | Messages.prototype.hideTyping = function hideTyping () { | |
| 27600 | var m = this; | |
| 27601 | var typingMessageIndex; | |
| 27602 | var typingFound; | |
| 27603 | m.messages.forEach(function (message, index) { | |
| 27604 | if (message.isTyping) { typingMessageIndex = index; } | |
| 27605 | }); | |
| 27606 | if (typeof typingMessageIndex !== 'undefined') { | |
| 27607 | if (m.$el.find('.message').eq(typingMessageIndex).hasClass('message-typing')) { | |
| 27608 | typingFound = true; | |
| 27609 | m.removeMessage(typingMessageIndex); | |
| 27610 | } | |
| 27611 | } | |
| 27612 | if (!typingFound) { | |
| 27613 | var $typingMessageEl = m.$el.find('.message-typing'); | |
| 27614 | if ($typingMessageEl.length) { | |
| 27615 | m.removeMessage($typingMessageEl); | |
| 27616 | } | |
| 27617 | } | |
| 27618 | return m; | |
| 27619 | }; | |
| 27620 | ||
| 27621 | Messages.prototype.scroll = function scroll (duration, scrollTop) { | |
| 27622 | if ( duration === void 0 ) duration = 300; | |
| 27623 | ||
| 27624 | var m = this; | |
| 27625 | var currentScroll = m.pageContentEl.scrollTop; | |
| 27626 | var newScrollTop; | |
| 27627 | if (typeof scrollTop !== 'undefined') { newScrollTop = scrollTop; } | |
| 27628 | else { | |
| 27629 | newScrollTop = m.params.newMessagesFirst ? 0 : m.pageContentEl.scrollHeight - m.pageContentEl.offsetHeight; | |
| 27630 | if (newScrollTop === currentScroll) { return m; } | |
| 27631 | } | |
| 27632 | m.$pageContentEl.scrollTop(newScrollTop, duration); | |
| 27633 | return m; | |
| 27634 | }; | |
| 27635 | ||
| 27636 | Messages.prototype.init = function init () { | |
| 27637 | var m = this; | |
| 27638 | if (!m.messages || m.messages.length === 0) { | |
| 27639 | m.messages = m.getMessagesData(); | |
| 27640 | } | |
| 27641 | if (m.params.messages && m.params.messages.length) { | |
| 27642 | m.renderMessages(); | |
| 27643 | } | |
| 27644 | if (m.params.autoLayout) { m.layout(); } | |
| 27645 | if (m.params.scrollMessages) { m.scroll(0); } | |
| 27646 | }; | |
| 27647 | ||
| 27648 | Messages.prototype.destroy = function destroy () { | |
| 27649 | var m = this; | |
| 27650 | m.emit('local::beforeDestroy messagesBeforeDestroy', m); | |
| 27651 | m.$el.trigger('messages:beforedestroy', m); | |
| 27652 | if (m.$el[0]) { | |
| 27653 | m.$el[0].f7Messages = null; | |
| 27654 | delete m.$el[0].f7Messages; | |
| 27655 | } | |
| 27656 | Utils.deleteProps(m); | |
| 27657 | }; | |
| 27658 | ||
| 27659 | return Messages; | |
| 27660 | }(Framework7Class)); | |
| 27661 | ||
| 27662 | var Messages$1 = { | |
| 27663 | name: 'messages', | |
| 27664 | static: { | |
| 27665 | Messages: Messages, | |
| 27666 | }, | |
| 27667 | create: function create() { | |
| 27668 | var app = this; | |
| 27669 | app.messages = ConstructorMethods({ | |
| 27670 | defaultSelector: '.messages', | |
| 27671 | constructor: Messages, | |
| 27672 | app: app, | |
| 27673 | domProp: 'f7Messages', | |
| 27674 | addMethods: 'renderMessages layout scroll clear removeMessage removeMessages addMessage addMessages'.split(' '), | |
| 27675 | }); | |
| 27676 | }, | |
| 27677 | on: { | |
| 27678 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 27679 | var app = this; | |
| 27680 | $(tabEl).find('.messages-init').each(function (index, messagesEl) { | |
| 27681 | app.messages.destroy(messagesEl); | |
| 27682 | }); | |
| 27683 | }, | |
| 27684 | tabMounted: function tabMounted(tabEl) { | |
| 27685 | var app = this; | |
| 27686 | $(tabEl).find('.messages-init').each(function (index, messagesEl) { | |
| 27687 | app.messages.create({ el: messagesEl }); | |
| 27688 | }); | |
| 27689 | }, | |
| 27690 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 27691 | var app = this; | |
| 27692 | page.$el.find('.messages-init').each(function (index, messagesEl) { | |
| 27693 | app.messages.destroy(messagesEl); | |
| 27694 | }); | |
| 27695 | }, | |
| 27696 | pageInit: function pageInit(page) { | |
| 27697 | var app = this; | |
| 27698 | page.$el.find('.messages-init').each(function (index, messagesEl) { | |
| 27699 | app.messages.create({ el: messagesEl }); | |
| 27700 | }); | |
| 27701 | }, | |
| 27702 | }, | |
| 27703 | vnode: { | |
| 27704 | 'messages-init': { | |
| 27705 | insert: function insert(vnode) { | |
| 27706 | var app = this; | |
| 27707 | var messagesEl = vnode.elm; | |
| 27708 | app.messages.create({ el: messagesEl }); | |
| 27709 | }, | |
| 27710 | destroy: function destroy(vnode) { | |
| 27711 | var app = this; | |
| 27712 | var messagesEl = vnode.elm; | |
| 27713 | app.messages.destroy(messagesEl); | |
| 27714 | }, | |
| 27715 | }, | |
| 27716 | }, | |
| 27717 | }; | |
| 27718 | ||
| 5d51ea26 | 27719 | var Messagebar = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
27720 | function Messagebar(app, params) { |
| 27721 | if ( params === void 0 ) params = {}; | |
| 27722 | ||
| 5d51ea26 | 27723 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
27724 | |
| 27725 | var messagebar = this; | |
| 27726 | ||
| 27727 | var defaults = { | |
| 27728 | top: false, | |
| 27729 | topOffset: 0, | |
| 27730 | bottomOffset: 0, | |
| 27731 | attachments: [], | |
| 27732 | renderAttachments: undefined, | |
| 27733 | renderAttachment: undefined, | |
| 27734 | maxHeight: null, | |
| 27735 | resizePage: true, | |
| 27736 | }; | |
| 27737 | ||
| 27738 | // Extend defaults with modules params | |
| 27739 | messagebar.useModulesParams(defaults); | |
| 27740 | ||
| 27741 | messagebar.params = Utils.extend(defaults, params); | |
| 27742 | ||
| 27743 | // El | |
| 27744 | var $el = $(messagebar.params.el); | |
| 27745 | if ($el.length === 0) { return messagebar; } | |
| 27746 | ||
| 27747 | if ($el[0].f7Messagebar) { return $el[0].f7Messagebar; } | |
| 27748 | ||
| 27749 | $el[0].f7Messagebar = messagebar; | |
| 27750 | ||
| 27751 | // Page and PageContent | |
| 27752 | var $pageEl = $el.parents('.page').eq(0); | |
| 27753 | var $pageContentEl = $pageEl.find('.page-content').eq(0); | |
| 27754 | ||
| 27755 | // Area | |
| 27756 | var $areaEl = $el.find('.messagebar-area'); | |
| 27757 | ||
| 27758 | // Textarea | |
| 27759 | var $textareaEl; | |
| 27760 | if (messagebar.params.textareaEl) { | |
| 27761 | $textareaEl = $(messagebar.params.textareaEl); | |
| 27762 | } else { | |
| 27763 | $textareaEl = $el.find('textarea'); | |
| 27764 | } | |
| 27765 | ||
| 27766 | // Attachments & Library | |
| 27767 | var $attachmentsEl = $el.find('.messagebar-attachments'); | |
| 27768 | var $sheetEl = $el.find('.messagebar-sheet'); | |
| 27769 | ||
| 27770 | if (messagebar.params.top) { | |
| 27771 | $el.addClass('messagebar-top'); | |
| 27772 | } | |
| 27773 | ||
| 27774 | Utils.extend(messagebar, { | |
| 27775 | $el: $el, | |
| 27776 | el: $el[0], | |
| 27777 | $areaEl: $areaEl, | |
| 27778 | areaEl: $areaEl[0], | |
| 27779 | $textareaEl: $textareaEl, | |
| 27780 | textareaEl: $textareaEl[0], | |
| 27781 | $attachmentsEl: $attachmentsEl, | |
| 27782 | attachmentsEl: $attachmentsEl[0], | |
| 27783 | attachmentsVisible: $attachmentsEl.hasClass('messagebar-attachments-visible'), | |
| 27784 | $sheetEl: $sheetEl, | |
| 27785 | sheetEl: $sheetEl[0], | |
| 27786 | sheetVisible: $sheetEl.hasClass('messagebar-sheet-visible'), | |
| 27787 | $pageEl: $pageEl, | |
| 27788 | pageEl: $pageEl[0], | |
| 27789 | $pageContentEl: $pageContentEl, | |
| 27790 | pageContentEl: $pageContentEl, | |
| 27791 | top: $el.hasClass('messagebar-top') || messagebar.params.top, | |
| 27792 | attachments: [], | |
| 27793 | }); | |
| 27794 | ||
| 27795 | // Events | |
| 27796 | function onAppResize() { | |
| 27797 | if (messagebar.params.resizePage) { | |
| 27798 | messagebar.resizePage(); | |
| 27799 | } | |
| 27800 | } | |
| 27801 | function onSubmit(e) { | |
| 27802 | e.preventDefault(); | |
| 27803 | } | |
| 27804 | function onAttachmentClick(e) { | |
| 27805 | var index = $(this).index(); | |
| 27806 | if ($(e.target).closest('.messagebar-attachment-delete').length) { | |
| 27807 | $(this).trigger('messagebar:attachmentdelete', index); | |
| 27808 | messagebar.emit('local::attachmentDelete messagebarAttachmentDelete', messagebar, this, index); | |
| 27809 | } else { | |
| 27810 | $(this).trigger('messagebar:attachmentclick', index); | |
| 27811 | messagebar.emit('local::attachmentClick messagebarAttachmentClick', messagebar, this, index); | |
| 27812 | } | |
| 27813 | } | |
| 27814 | function onTextareaChange() { | |
| 27815 | messagebar.checkEmptyState(); | |
| 27816 | messagebar.$el.trigger('messagebar:change'); | |
| 27817 | messagebar.emit('local::change messagebarChange', messagebar); | |
| 27818 | } | |
| 27819 | function onTextareaFocus() { | |
| 27820 | messagebar.sheetHide(); | |
| 27821 | messagebar.$el.addClass('messagebar-focused'); | |
| 27822 | messagebar.$el.trigger('messagebar:focus'); | |
| 27823 | messagebar.emit('local::focus messagebarFocus', messagebar); | |
| 27824 | } | |
| 27825 | function onTextareaBlur() { | |
| 27826 | messagebar.$el.removeClass('messagebar-focused'); | |
| 27827 | messagebar.$el.trigger('messagebar:blur'); | |
| 27828 | messagebar.emit('local::blur messagebarBlur', messagebar); | |
| 27829 | } | |
| 27830 | ||
| 27831 | messagebar.attachEvents = function attachEvents() { | |
| 27832 | $el.on('textarea:resize', onAppResize); | |
| 27833 | $el.on('submit', onSubmit); | |
| 27834 | $el.on('click', '.messagebar-attachment', onAttachmentClick); | |
| 27835 | $textareaEl.on('change input', onTextareaChange); | |
| 27836 | $textareaEl.on('focus', onTextareaFocus); | |
| 27837 | $textareaEl.on('blur', onTextareaBlur); | |
| 27838 | app.on('resize', onAppResize); | |
| 27839 | }; | |
| 27840 | messagebar.detachEvents = function detachEvents() { | |
| 27841 | $el.off('textarea:resize', onAppResize); | |
| 27842 | $el.off('submit', onSubmit); | |
| 27843 | $el.off('click', '.messagebar-attachment', onAttachmentClick); | |
| 27844 | $textareaEl.off('change input', onTextareaChange); | |
| 27845 | $textareaEl.off('focus', onTextareaFocus); | |
| 27846 | $textareaEl.off('blur', onTextareaBlur); | |
| 27847 | app.off('resize', onAppResize); | |
| 27848 | }; | |
| 27849 | ||
| 27850 | ||
| 27851 | // Install Modules | |
| 27852 | messagebar.useModules(); | |
| 27853 | ||
| 27854 | // Init | |
| 27855 | messagebar.init(); | |
| 27856 | ||
| 27857 | return messagebar; | |
| 27858 | } | |
| 27859 | ||
| 5d51ea26 DC |
27860 | if ( Framework7Class ) Messagebar.__proto__ = Framework7Class; |
| 27861 | Messagebar.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
27862 | Messagebar.prototype.constructor = Messagebar; |
| 27863 | ||
| 27864 | Messagebar.prototype.focus = function focus () { | |
| 27865 | var messagebar = this; | |
| 27866 | messagebar.$textareaEl.focus(); | |
| 27867 | return messagebar; | |
| 27868 | }; | |
| 27869 | ||
| 27870 | Messagebar.prototype.blur = function blur () { | |
| 27871 | var messagebar = this; | |
| 27872 | messagebar.$textareaEl.blur(); | |
| 27873 | return messagebar; | |
| 27874 | }; | |
| 27875 | ||
| 27876 | Messagebar.prototype.clear = function clear () { | |
| 27877 | var messagebar = this; | |
| 27878 | messagebar.$textareaEl.val('').trigger('change'); | |
| 27879 | return messagebar; | |
| 27880 | }; | |
| 27881 | ||
| 27882 | Messagebar.prototype.getValue = function getValue () { | |
| 27883 | var messagebar = this; | |
| 27884 | return messagebar.$textareaEl.val().trim(); | |
| 27885 | }; | |
| 27886 | ||
| 27887 | Messagebar.prototype.setValue = function setValue (value) { | |
| 27888 | var messagebar = this; | |
| 27889 | messagebar.$textareaEl.val(value).trigger('change'); | |
| 27890 | return messagebar; | |
| 27891 | }; | |
| 27892 | ||
| 27893 | Messagebar.prototype.setPlaceholder = function setPlaceholder (placeholder) { | |
| 27894 | var messagebar = this; | |
| 27895 | messagebar.$textareaEl.attr('placeholder', placeholder); | |
| 27896 | return messagebar; | |
| 27897 | }; | |
| 27898 | ||
| 27899 | Messagebar.prototype.resizePage = function resizePage () { | |
| 27900 | var messagebar = this; | |
| 27901 | var params = messagebar.params; | |
| 27902 | var $el = messagebar.$el; | |
| 27903 | var top = messagebar.top; | |
| 27904 | var $pageEl = messagebar.$pageEl; | |
| 27905 | var $pageContentEl = messagebar.$pageContentEl; | |
| 27906 | var $areaEl = messagebar.$areaEl; | |
| 27907 | var $textareaEl = messagebar.$textareaEl; | |
| 27908 | var $sheetEl = messagebar.$sheetEl; | |
| 27909 | var $attachmentsEl = messagebar.$attachmentsEl; | |
| 27910 | var elHeight = $el[0].offsetHeight; | |
| 27911 | var maxHeight = params.maxHeight; | |
| 27912 | if (top) ; else { | |
| 27913 | var currentPaddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10); | |
| 27914 | var requiredPaddingBottom = elHeight + params.bottomOffset; | |
| 27915 | if (requiredPaddingBottom !== currentPaddingBottom && $pageContentEl.length) { | |
| 27916 | var currentPaddingTop = parseInt($pageContentEl.css('padding-top'), 10); | |
| 27917 | var pageScrollHeight = $pageContentEl[0].scrollHeight; | |
| 27918 | var pageOffsetHeight = $pageContentEl[0].offsetHeight; | |
| 27919 | var pageScrollTop = $pageContentEl[0].scrollTop; | |
| 27920 | var scrollOnBottom = (pageScrollTop === pageScrollHeight - pageOffsetHeight); | |
| 27921 | if (!maxHeight) { | |
| 27922 | maxHeight = $pageEl[0].offsetHeight - currentPaddingTop - $sheetEl.outerHeight() - $attachmentsEl.outerHeight() - parseInt($areaEl.css('margin-top'), 10) - parseInt($areaEl.css('margin-bottom'), 10); | |
| 27923 | } | |
| 27924 | $textareaEl.css('max-height', (maxHeight + "px")); | |
| 27925 | $pageContentEl.css('padding-bottom', (requiredPaddingBottom + "px")); | |
| 27926 | if (scrollOnBottom) { | |
| 27927 | $pageContentEl.scrollTop($pageContentEl[0].scrollHeight - pageOffsetHeight); | |
| 27928 | } | |
| 27929 | $el.trigger('messagebar:resizepage'); | |
| 27930 | messagebar.emit('local::resizePage messagebarResizePage', messagebar); | |
| 27931 | } | |
| 27932 | } | |
| 27933 | }; | |
| 27934 | ||
| 27935 | Messagebar.prototype.checkEmptyState = function checkEmptyState () { | |
| 27936 | var messagebar = this; | |
| 27937 | var $el = messagebar.$el; | |
| 27938 | var $textareaEl = messagebar.$textareaEl; | |
| 27939 | var value = $textareaEl.val().trim(); | |
| 27940 | if (value && value.length) { | |
| 27941 | $el.addClass('messagebar-with-value'); | |
| 27942 | } else { | |
| 27943 | $el.removeClass('messagebar-with-value'); | |
| 27944 | } | |
| 27945 | }; | |
| 27946 | ||
| 27947 | Messagebar.prototype.attachmentsCreate = function attachmentsCreate (innerHTML) { | |
| 27948 | if ( innerHTML === void 0 ) innerHTML = ''; | |
| 27949 | ||
| 27950 | var messagebar = this; | |
| 27951 | var $attachmentsEl = $(("<div class=\"messagebar-attachments\">" + innerHTML + "</div>")); | |
| 27952 | $attachmentsEl.insertBefore(messagebar.$textareaEl); | |
| 27953 | Utils.extend(messagebar, { | |
| 27954 | $attachmentsEl: $attachmentsEl, | |
| 27955 | attachmentsEl: $attachmentsEl[0], | |
| 27956 | }); | |
| 27957 | return messagebar; | |
| 27958 | }; | |
| 27959 | ||
| 27960 | Messagebar.prototype.attachmentsShow = function attachmentsShow (innerHTML) { | |
| 27961 | if ( innerHTML === void 0 ) innerHTML = ''; | |
| 27962 | ||
| 27963 | var messagebar = this; | |
| 27964 | messagebar.$attachmentsEl = messagebar.$el.find('.messagebar-attachments'); | |
| 27965 | if (messagebar.$attachmentsEl.length === 0) { | |
| 27966 | messagebar.attachmentsCreate(innerHTML); | |
| 27967 | } | |
| 27968 | messagebar.$el.addClass('messagebar-attachments-visible'); | |
| 27969 | messagebar.attachmentsVisible = true; | |
| 27970 | if (messagebar.params.resizePage) { | |
| 27971 | messagebar.resizePage(); | |
| 27972 | } | |
| 27973 | return messagebar; | |
| 27974 | }; | |
| 27975 | ||
| 27976 | Messagebar.prototype.attachmentsHide = function attachmentsHide () { | |
| 27977 | var messagebar = this; | |
| 27978 | messagebar.$el.removeClass('messagebar-attachments-visible'); | |
| 27979 | messagebar.attachmentsVisible = false; | |
| 27980 | if (messagebar.params.resizePage) { | |
| 27981 | messagebar.resizePage(); | |
| 27982 | } | |
| 27983 | return messagebar; | |
| 27984 | }; | |
| 27985 | ||
| 27986 | Messagebar.prototype.attachmentsToggle = function attachmentsToggle () { | |
| 27987 | var messagebar = this; | |
| 27988 | if (messagebar.attachmentsVisible) { | |
| 27989 | messagebar.attachmentsHide(); | |
| 27990 | } else { | |
| 27991 | messagebar.attachmentsShow(); | |
| 27992 | } | |
| 27993 | return messagebar; | |
| 27994 | }; | |
| 27995 | ||
| 27996 | Messagebar.prototype.renderAttachment = function renderAttachment (attachment) { | |
| 27997 | var messagebar = this; | |
| 27998 | if (messagebar.params.renderAttachment) { | |
| 27999 | return messagebar.params.renderAttachment.call(messagebar, attachment); | |
| 28000 | } | |
| 28001 | return ("\n <div class=\"messagebar-attachment\">\n <img src=\"" + attachment + "\">\n <span class=\"messagebar-attachment-delete\"></span>\n </div>\n "); | |
| 28002 | }; | |
| 28003 | ||
| 28004 | Messagebar.prototype.renderAttachments = function renderAttachments () { | |
| 28005 | var messagebar = this; | |
| 28006 | var html; | |
| 28007 | if (messagebar.params.renderAttachments) { | |
| 28008 | html = messagebar.params.renderAttachments.call(messagebar, messagebar.attachments); | |
| 28009 | } else { | |
| 28010 | html = "" + (messagebar.attachments.map(function (attachment) { return messagebar.renderAttachment(attachment); }).join('')); | |
| 28011 | } | |
| 28012 | if (messagebar.$attachmentsEl.length === 0) { | |
| 28013 | messagebar.attachmentsCreate(html); | |
| 28014 | } else { | |
| 28015 | messagebar.$attachmentsEl.html(html); | |
| 28016 | } | |
| 28017 | }; | |
| 28018 | ||
| 28019 | Messagebar.prototype.sheetCreate = function sheetCreate (innerHTML) { | |
| 28020 | if ( innerHTML === void 0 ) innerHTML = ''; | |
| 28021 | ||
| 28022 | var messagebar = this; | |
| 28023 | var $sheetEl = $(("<div class=\"messagebar-sheet\">" + innerHTML + "</div>")); | |
| 28024 | messagebar.$el.append($sheetEl); | |
| 28025 | Utils.extend(messagebar, { | |
| 28026 | $sheetEl: $sheetEl, | |
| 28027 | sheetEl: $sheetEl[0], | |
| 28028 | }); | |
| 28029 | return messagebar; | |
| 28030 | }; | |
| 28031 | ||
| 28032 | Messagebar.prototype.sheetShow = function sheetShow (innerHTML) { | |
| 28033 | if ( innerHTML === void 0 ) innerHTML = ''; | |
| 28034 | ||
| 28035 | var messagebar = this; | |
| 28036 | messagebar.$sheetEl = messagebar.$el.find('.messagebar-sheet'); | |
| 28037 | if (messagebar.$sheetEl.length === 0) { | |
| 28038 | messagebar.sheetCreate(innerHTML); | |
| 28039 | } | |
| 28040 | messagebar.$el.addClass('messagebar-sheet-visible'); | |
| 28041 | messagebar.sheetVisible = true; | |
| 28042 | if (messagebar.params.resizePage) { | |
| 28043 | messagebar.resizePage(); | |
| 28044 | } | |
| 28045 | return messagebar; | |
| 28046 | }; | |
| 28047 | ||
| 28048 | Messagebar.prototype.sheetHide = function sheetHide () { | |
| 28049 | var messagebar = this; | |
| 28050 | messagebar.$el.removeClass('messagebar-sheet-visible'); | |
| 28051 | messagebar.sheetVisible = false; | |
| 28052 | if (messagebar.params.resizePage) { | |
| 28053 | messagebar.resizePage(); | |
| 28054 | } | |
| 28055 | return messagebar; | |
| 28056 | }; | |
| 28057 | ||
| 28058 | Messagebar.prototype.sheetToggle = function sheetToggle () { | |
| 28059 | var messagebar = this; | |
| 28060 | if (messagebar.sheetVisible) { | |
| 28061 | messagebar.sheetHide(); | |
| 28062 | } else { | |
| 28063 | messagebar.sheetShow(); | |
| 28064 | } | |
| 28065 | return messagebar; | |
| 28066 | }; | |
| 28067 | ||
| 28068 | Messagebar.prototype.init = function init () { | |
| 28069 | var messagebar = this; | |
| 28070 | messagebar.attachEvents(); | |
| 28071 | messagebar.checkEmptyState(); | |
| 28072 | return messagebar; | |
| 28073 | }; | |
| 28074 | ||
| 28075 | Messagebar.prototype.destroy = function destroy () { | |
| 28076 | var messagebar = this; | |
| 28077 | messagebar.emit('local::beforeDestroy messagebarBeforeDestroy', messagebar); | |
| 28078 | messagebar.$el.trigger('messagebar:beforedestroy', messagebar); | |
| 28079 | messagebar.detachEvents(); | |
| 28080 | if (messagebar.$el[0]) { | |
| 28081 | messagebar.$el[0].f7Messagebar = null; | |
| 28082 | delete messagebar.$el[0].f7Messagebar; | |
| 28083 | } | |
| 28084 | Utils.deleteProps(messagebar); | |
| 28085 | }; | |
| 28086 | ||
| 28087 | return Messagebar; | |
| 28088 | }(Framework7Class)); | |
| 28089 | ||
| 28090 | var Messagebar$1 = { | |
| 28091 | name: 'messagebar', | |
| 28092 | static: { | |
| 28093 | Messagebar: Messagebar, | |
| 28094 | }, | |
| 28095 | create: function create() { | |
| 28096 | var app = this; | |
| 28097 | app.messagebar = ConstructorMethods({ | |
| 28098 | defaultSelector: '.messagebar', | |
| 28099 | constructor: Messagebar, | |
| 28100 | app: app, | |
| 28101 | domProp: 'f7Messagebar', | |
| 28102 | addMethods: 'clear getValue setValue setPlaceholder resizePage focus blur attachmentsCreate attachmentsShow attachmentsHide attachmentsToggle renderAttachments sheetCreate sheetShow sheetHide sheetToggle'.split(' '), | |
| 28103 | }); | |
| 28104 | }, | |
| 28105 | on: { | |
| 28106 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 28107 | var app = this; | |
| 28108 | $(tabEl).find('.messagebar-init').each(function (index, messagebarEl) { | |
| 28109 | app.messagebar.destroy(messagebarEl); | |
| 28110 | }); | |
| 28111 | }, | |
| 28112 | tabMounted: function tabMounted(tabEl) { | |
| 28113 | var app = this; | |
| 28114 | $(tabEl).find('.messagebar-init').each(function (index, messagebarEl) { | |
| 28115 | app.messagebar.create(Utils.extend({ el: messagebarEl }, $(messagebarEl).dataset())); | |
| 28116 | }); | |
| 28117 | }, | |
| 28118 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 28119 | var app = this; | |
| 28120 | page.$el.find('.messagebar-init').each(function (index, messagebarEl) { | |
| 28121 | app.messagebar.destroy(messagebarEl); | |
| 28122 | }); | |
| 28123 | }, | |
| 28124 | pageInit: function pageInit(page) { | |
| 28125 | var app = this; | |
| 28126 | page.$el.find('.messagebar-init').each(function (index, messagebarEl) { | |
| 28127 | app.messagebar.create(Utils.extend({ el: messagebarEl }, $(messagebarEl).dataset())); | |
| 28128 | }); | |
| 28129 | }, | |
| 28130 | }, | |
| 28131 | vnode: { | |
| 28132 | 'messagebar-init': { | |
| 28133 | insert: function insert(vnode) { | |
| 28134 | var app = this; | |
| 28135 | var messagebarEl = vnode.elm; | |
| 28136 | app.messagebar.create(Utils.extend({ el: messagebarEl }, $(messagebarEl).dataset())); | |
| 28137 | }, | |
| 28138 | destroy: function destroy(vnode) { | |
| 28139 | var app = this; | |
| 28140 | var messagebarEl = vnode.elm; | |
| 28141 | app.messagebar.destroy(messagebarEl); | |
| 28142 | }, | |
| 28143 | }, | |
| 28144 | }, | |
| 28145 | }; | |
| 28146 | ||
| 5d51ea26 DC |
28147 | var Browser = (function Browser() { |
| 28148 | function isSafari() { | |
| 28149 | var ua = win.navigator.userAgent.toLowerCase(); | |
| 28150 | return (ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0 && ua.indexOf('android') < 0); | |
| 28151 | } | |
| 28152 | return { | |
| 28153 | isIE: !!win.navigator.userAgent.match(/Trident/g) || !!win.navigator.userAgent.match(/MSIE/g), | |
| 28154 | isSafari: isSafari(), | |
| 28155 | isUiWebView: /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(win.navigator.userAgent), | |
| 28156 | }; | |
| 28157 | }()); | |
| 28158 | ||
| 5309fbda DC |
28159 | function updateSize () { |
| 28160 | var swiper = this; | |
| 28161 | var width; | |
| 28162 | var height; | |
| 28163 | var $el = swiper.$el; | |
| 28164 | if (typeof swiper.params.width !== 'undefined') { | |
| 28165 | width = swiper.params.width; | |
| 28166 | } else { | |
| 28167 | width = $el[0].clientWidth; | |
| 28168 | } | |
| 28169 | if (typeof swiper.params.height !== 'undefined') { | |
| 28170 | height = swiper.params.height; | |
| 28171 | } else { | |
| 28172 | height = $el[0].clientHeight; | |
| 28173 | } | |
| 28174 | if ((width === 0 && swiper.isHorizontal()) || (height === 0 && swiper.isVertical())) { | |
| 28175 | return; | |
| 28176 | } | |
| 28177 | ||
| 28178 | // Subtract paddings | |
| 28179 | width = width - parseInt($el.css('padding-left'), 10) - parseInt($el.css('padding-right'), 10); | |
| 28180 | height = height - parseInt($el.css('padding-top'), 10) - parseInt($el.css('padding-bottom'), 10); | |
| 28181 | ||
| 28182 | Utils.extend(swiper, { | |
| 28183 | width: width, | |
| 28184 | height: height, | |
| 28185 | size: swiper.isHorizontal() ? width : height, | |
| 28186 | }); | |
| 28187 | } | |
| 28188 | ||
| 28189 | function updateSlides () { | |
| 28190 | var swiper = this; | |
| 28191 | var params = swiper.params; | |
| 28192 | ||
| 28193 | var $wrapperEl = swiper.$wrapperEl; | |
| 28194 | var swiperSize = swiper.size; | |
| 28195 | var rtl = swiper.rtlTranslate; | |
| 28196 | var wrongRTL = swiper.wrongRTL; | |
| 28197 | var isVirtual = swiper.virtual && params.virtual.enabled; | |
| 28198 | var previousSlidesLength = isVirtual ? swiper.virtual.slides.length : swiper.slides.length; | |
| 28199 | var slides = $wrapperEl.children(("." + (swiper.params.slideClass))); | |
| 28200 | var slidesLength = isVirtual ? swiper.virtual.slides.length : slides.length; | |
| 28201 | var snapGrid = []; | |
| 28202 | var slidesGrid = []; | |
| 28203 | var slidesSizesGrid = []; | |
| 28204 | ||
| 28205 | var offsetBefore = params.slidesOffsetBefore; | |
| 28206 | if (typeof offsetBefore === 'function') { | |
| 28207 | offsetBefore = params.slidesOffsetBefore.call(swiper); | |
| 28208 | } | |
| 28209 | ||
| 28210 | var offsetAfter = params.slidesOffsetAfter; | |
| 28211 | if (typeof offsetAfter === 'function') { | |
| 28212 | offsetAfter = params.slidesOffsetAfter.call(swiper); | |
| 28213 | } | |
| 28214 | ||
| 28215 | var previousSnapGridLength = swiper.snapGrid.length; | |
| 28216 | var previousSlidesGridLength = swiper.snapGrid.length; | |
| 28217 | ||
| 28218 | var spaceBetween = params.spaceBetween; | |
| 28219 | var slidePosition = -offsetBefore; | |
| 28220 | var prevSlideSize = 0; | |
| 28221 | var index = 0; | |
| 28222 | if (typeof swiperSize === 'undefined') { | |
| 28223 | return; | |
| 28224 | } | |
| 28225 | if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) { | |
| 28226 | spaceBetween = (parseFloat(spaceBetween.replace('%', '')) / 100) * swiperSize; | |
| 28227 | } | |
| 28228 | ||
| 28229 | swiper.virtualSize = -spaceBetween; | |
| 28230 | ||
| 28231 | // reset margins | |
| 28232 | if (rtl) { slides.css({ marginLeft: '', marginTop: '' }); } | |
| 28233 | else { slides.css({ marginRight: '', marginBottom: '' }); } | |
| 28234 | ||
| 28235 | var slidesNumberEvenToRows; | |
| 28236 | if (params.slidesPerColumn > 1) { | |
| 28237 | if (Math.floor(slidesLength / params.slidesPerColumn) === slidesLength / swiper.params.slidesPerColumn) { | |
| 28238 | slidesNumberEvenToRows = slidesLength; | |
| 28239 | } else { | |
| 28240 | slidesNumberEvenToRows = Math.ceil(slidesLength / params.slidesPerColumn) * params.slidesPerColumn; | |
| 28241 | } | |
| 28242 | if (params.slidesPerView !== 'auto' && params.slidesPerColumnFill === 'row') { | |
| 28243 | slidesNumberEvenToRows = Math.max(slidesNumberEvenToRows, params.slidesPerView * params.slidesPerColumn); | |
| 28244 | } | |
| 28245 | } | |
| 28246 | ||
| 28247 | // Calc slides | |
| 28248 | var slideSize; | |
| 28249 | var slidesPerColumn = params.slidesPerColumn; | |
| 28250 | var slidesPerRow = slidesNumberEvenToRows / slidesPerColumn; | |
| 28251 | var numFullColumns = Math.floor(slidesLength / params.slidesPerColumn); | |
| 28252 | for (var i = 0; i < slidesLength; i += 1) { | |
| 28253 | slideSize = 0; | |
| 28254 | var slide = slides.eq(i); | |
| 28255 | if (params.slidesPerColumn > 1) { | |
| 28256 | // Set slides order | |
| 28257 | var newSlideOrderIndex = (void 0); | |
| 28258 | var column = (void 0); | |
| 28259 | var row = (void 0); | |
| 28260 | if (params.slidesPerColumnFill === 'column') { | |
| 28261 | column = Math.floor(i / slidesPerColumn); | |
| 28262 | row = i - (column * slidesPerColumn); | |
| 28263 | if (column > numFullColumns || (column === numFullColumns && row === slidesPerColumn - 1)) { | |
| 28264 | row += 1; | |
| 28265 | if (row >= slidesPerColumn) { | |
| 28266 | row = 0; | |
| 28267 | column += 1; | |
| 28268 | } | |
| 28269 | } | |
| 28270 | newSlideOrderIndex = column + ((row * slidesNumberEvenToRows) / slidesPerColumn); | |
| 28271 | slide | |
| 28272 | .css({ | |
| 28273 | '-webkit-box-ordinal-group': newSlideOrderIndex, | |
| 28274 | '-moz-box-ordinal-group': newSlideOrderIndex, | |
| 28275 | '-ms-flex-order': newSlideOrderIndex, | |
| 28276 | '-webkit-order': newSlideOrderIndex, | |
| 28277 | order: newSlideOrderIndex, | |
| 28278 | }); | |
| 28279 | } else { | |
| 28280 | row = Math.floor(i / slidesPerRow); | |
| 28281 | column = i - (row * slidesPerRow); | |
| 28282 | } | |
| 28283 | slide | |
| 28284 | .css( | |
| 28285 | ("margin-" + (swiper.isHorizontal() ? 'top' : 'left')), | |
| 28286 | (row !== 0 && params.spaceBetween) && (((params.spaceBetween) + "px")) | |
| 28287 | ) | |
| 28288 | .attr('data-swiper-column', column) | |
| 28289 | .attr('data-swiper-row', row); | |
| 28290 | } | |
| 28291 | if (slide.css('display') === 'none') { continue; } // eslint-disable-line | |
| 28292 | ||
| 28293 | if (params.slidesPerView === 'auto') { | |
| 28294 | var slideStyles = win.getComputedStyle(slide[0], null); | |
| 28295 | var currentTransform = slide[0].style.transform; | |
| 28296 | var currentWebKitTransform = slide[0].style.webkitTransform; | |
| 28297 | if (currentTransform) { | |
| 28298 | slide[0].style.transform = 'none'; | |
| 28299 | } | |
| 28300 | if (currentWebKitTransform) { | |
| 28301 | slide[0].style.webkitTransform = 'none'; | |
| 28302 | } | |
| 28303 | if (params.roundLengths) { | |
| 28304 | slideSize = swiper.isHorizontal() | |
| 28305 | ? slide.outerWidth(true) | |
| 28306 | : slide.outerHeight(true); | |
| 28307 | } else { | |
| 28308 | // eslint-disable-next-line | |
| 28309 | if (swiper.isHorizontal()) { | |
| 28310 | var width = parseFloat(slideStyles.getPropertyValue('width')); | |
| 28311 | var paddingLeft = parseFloat(slideStyles.getPropertyValue('padding-left')); | |
| 28312 | var paddingRight = parseFloat(slideStyles.getPropertyValue('padding-right')); | |
| 28313 | var marginLeft = parseFloat(slideStyles.getPropertyValue('margin-left')); | |
| 28314 | var marginRight = parseFloat(slideStyles.getPropertyValue('margin-right')); | |
| 28315 | var boxSizing = slideStyles.getPropertyValue('box-sizing'); | |
| 28316 | if (boxSizing && boxSizing === 'border-box') { | |
| 28317 | slideSize = width + marginLeft + marginRight; | |
| 28318 | } else { | |
| 28319 | slideSize = width + paddingLeft + paddingRight + marginLeft + marginRight; | |
| 28320 | } | |
| 28321 | } else { | |
| 28322 | var height = parseFloat(slideStyles.getPropertyValue('height')); | |
| 28323 | var paddingTop = parseFloat(slideStyles.getPropertyValue('padding-top')); | |
| 28324 | var paddingBottom = parseFloat(slideStyles.getPropertyValue('padding-bottom')); | |
| 28325 | var marginTop = parseFloat(slideStyles.getPropertyValue('margin-top')); | |
| 28326 | var marginBottom = parseFloat(slideStyles.getPropertyValue('margin-bottom')); | |
| 28327 | var boxSizing$1 = slideStyles.getPropertyValue('box-sizing'); | |
| 28328 | if (boxSizing$1 && boxSizing$1 === 'border-box') { | |
| 28329 | slideSize = height + marginTop + marginBottom; | |
| 28330 | } else { | |
| 28331 | slideSize = height + paddingTop + paddingBottom + marginTop + marginBottom; | |
| 28332 | } | |
| 28333 | } | |
| 28334 | } | |
| 28335 | if (currentTransform) { | |
| 28336 | slide[0].style.transform = currentTransform; | |
| 28337 | } | |
| 28338 | if (currentWebKitTransform) { | |
| 28339 | slide[0].style.webkitTransform = currentWebKitTransform; | |
| 28340 | } | |
| 28341 | if (params.roundLengths) { slideSize = Math.floor(slideSize); } | |
| 28342 | } else { | |
| 28343 | slideSize = (swiperSize - ((params.slidesPerView - 1) * spaceBetween)) / params.slidesPerView; | |
| 28344 | if (params.roundLengths) { slideSize = Math.floor(slideSize); } | |
| 28345 | ||
| 28346 | if (slides[i]) { | |
| 28347 | if (swiper.isHorizontal()) { | |
| 28348 | slides[i].style.width = slideSize + "px"; | |
| 28349 | } else { | |
| 28350 | slides[i].style.height = slideSize + "px"; | |
| 28351 | } | |
| 28352 | } | |
| 28353 | } | |
| 28354 | if (slides[i]) { | |
| 28355 | slides[i].swiperSlideSize = slideSize; | |
| 28356 | } | |
| 28357 | slidesSizesGrid.push(slideSize); | |
| 28358 | ||
| 28359 | ||
| 28360 | if (params.centeredSlides) { | |
| 28361 | slidePosition = slidePosition + (slideSize / 2) + (prevSlideSize / 2) + spaceBetween; | |
| 28362 | if (prevSlideSize === 0 && i !== 0) { slidePosition = slidePosition - (swiperSize / 2) - spaceBetween; } | |
| 28363 | if (i === 0) { slidePosition = slidePosition - (swiperSize / 2) - spaceBetween; } | |
| 28364 | if (Math.abs(slidePosition) < 1 / 1000) { slidePosition = 0; } | |
| 28365 | if (params.roundLengths) { slidePosition = Math.floor(slidePosition); } | |
| 28366 | if ((index) % params.slidesPerGroup === 0) { snapGrid.push(slidePosition); } | |
| 28367 | slidesGrid.push(slidePosition); | |
| 28368 | } else { | |
| 28369 | if (params.roundLengths) { slidePosition = Math.floor(slidePosition); } | |
| 28370 | if ((index) % params.slidesPerGroup === 0) { snapGrid.push(slidePosition); } | |
| 28371 | slidesGrid.push(slidePosition); | |
| 28372 | slidePosition = slidePosition + slideSize + spaceBetween; | |
| 28373 | } | |
| 28374 | ||
| 28375 | swiper.virtualSize += slideSize + spaceBetween; | |
| 28376 | ||
| 28377 | prevSlideSize = slideSize; | |
| 28378 | ||
| 28379 | index += 1; | |
| 28380 | } | |
| 28381 | swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter; | |
| 28382 | var newSlidesGrid; | |
| 28383 | ||
| 28384 | if ( | |
| 28385 | rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) { | |
| 28386 | $wrapperEl.css({ width: ((swiper.virtualSize + params.spaceBetween) + "px") }); | |
| 28387 | } | |
| 28388 | if (!Support.flexbox || params.setWrapperSize) { | |
| 28389 | if (swiper.isHorizontal()) { $wrapperEl.css({ width: ((swiper.virtualSize + params.spaceBetween) + "px") }); } | |
| 28390 | else { $wrapperEl.css({ height: ((swiper.virtualSize + params.spaceBetween) + "px") }); } | |
| 28391 | } | |
| 28392 | ||
| 28393 | if (params.slidesPerColumn > 1) { | |
| 28394 | swiper.virtualSize = (slideSize + params.spaceBetween) * slidesNumberEvenToRows; | |
| 28395 | swiper.virtualSize = Math.ceil(swiper.virtualSize / params.slidesPerColumn) - params.spaceBetween; | |
| 28396 | if (swiper.isHorizontal()) { $wrapperEl.css({ width: ((swiper.virtualSize + params.spaceBetween) + "px") }); } | |
| 28397 | else { $wrapperEl.css({ height: ((swiper.virtualSize + params.spaceBetween) + "px") }); } | |
| 28398 | if (params.centeredSlides) { | |
| 28399 | newSlidesGrid = []; | |
| 28400 | for (var i$1 = 0; i$1 < snapGrid.length; i$1 += 1) { | |
| 28401 | var slidesGridItem = snapGrid[i$1]; | |
| 28402 | if (params.roundLengths) { slidesGridItem = Math.floor(slidesGridItem); } | |
| 28403 | if (snapGrid[i$1] < swiper.virtualSize + snapGrid[0]) { newSlidesGrid.push(slidesGridItem); } | |
| 28404 | } | |
| 28405 | snapGrid = newSlidesGrid; | |
| 28406 | } | |
| 28407 | } | |
| 28408 | ||
| 28409 | // Remove last grid elements depending on width | |
| 28410 | if (!params.centeredSlides) { | |
| 28411 | newSlidesGrid = []; | |
| 28412 | for (var i$2 = 0; i$2 < snapGrid.length; i$2 += 1) { | |
| 28413 | var slidesGridItem$1 = snapGrid[i$2]; | |
| 28414 | if (params.roundLengths) { slidesGridItem$1 = Math.floor(slidesGridItem$1); } | |
| 28415 | if (snapGrid[i$2] <= swiper.virtualSize - swiperSize) { | |
| 28416 | newSlidesGrid.push(slidesGridItem$1); | |
| 28417 | } | |
| 28418 | } | |
| 28419 | snapGrid = newSlidesGrid; | |
| 28420 | if (Math.floor(swiper.virtualSize - swiperSize) - Math.floor(snapGrid[snapGrid.length - 1]) > 1) { | |
| 28421 | snapGrid.push(swiper.virtualSize - swiperSize); | |
| 28422 | } | |
| 28423 | } | |
| 28424 | if (snapGrid.length === 0) { snapGrid = [0]; } | |
| 28425 | ||
| 28426 | if (params.spaceBetween !== 0) { | |
| 28427 | if (swiper.isHorizontal()) { | |
| 28428 | if (rtl) { slides.css({ marginLeft: (spaceBetween + "px") }); } | |
| 28429 | else { slides.css({ marginRight: (spaceBetween + "px") }); } | |
| 28430 | } else { slides.css({ marginBottom: (spaceBetween + "px") }); } | |
| 28431 | } | |
| 28432 | ||
| 28433 | if (params.centerInsufficientSlides) { | |
| 28434 | var allSlidesSize = 0; | |
| 28435 | slidesSizesGrid.forEach(function (slideSizeValue) { | |
| 28436 | allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0); | |
| 28437 | }); | |
| 28438 | allSlidesSize -= params.spaceBetween; | |
| 28439 | if (allSlidesSize < swiperSize) { | |
| 28440 | var allSlidesOffset = (swiperSize - allSlidesSize) / 2; | |
| 28441 | snapGrid.forEach(function (snap, snapIndex) { | |
| 28442 | snapGrid[snapIndex] = snap - allSlidesOffset; | |
| 28443 | }); | |
| 28444 | slidesGrid.forEach(function (snap, snapIndex) { | |
| 28445 | slidesGrid[snapIndex] = snap + allSlidesOffset; | |
| 28446 | }); | |
| 28447 | } | |
| 28448 | } | |
| 28449 | ||
| 28450 | Utils.extend(swiper, { | |
| 28451 | slides: slides, | |
| 28452 | snapGrid: snapGrid, | |
| 28453 | slidesGrid: slidesGrid, | |
| 28454 | slidesSizesGrid: slidesSizesGrid, | |
| 28455 | }); | |
| 28456 | ||
| 28457 | if (slidesLength !== previousSlidesLength) { | |
| 28458 | swiper.emit('slidesLengthChange'); | |
| 28459 | } | |
| 28460 | if (snapGrid.length !== previousSnapGridLength) { | |
| 28461 | if (swiper.params.watchOverflow) { swiper.checkOverflow(); } | |
| 28462 | swiper.emit('snapGridLengthChange'); | |
| 28463 | } | |
| 28464 | if (slidesGrid.length !== previousSlidesGridLength) { | |
| 28465 | swiper.emit('slidesGridLengthChange'); | |
| 28466 | } | |
| 28467 | ||
| 28468 | if (params.watchSlidesProgress || params.watchSlidesVisibility) { | |
| 28469 | swiper.updateSlidesOffset(); | |
| 28470 | } | |
| 28471 | } | |
| 28472 | ||
| 28473 | function updateAutoHeight (speed) { | |
| 28474 | var swiper = this; | |
| 28475 | var activeSlides = []; | |
| 28476 | var newHeight = 0; | |
| 28477 | var i; | |
| 28478 | if (typeof speed === 'number') { | |
| 28479 | swiper.setTransition(speed); | |
| 28480 | } else if (speed === true) { | |
| 28481 | swiper.setTransition(swiper.params.speed); | |
| 28482 | } | |
| 28483 | // Find slides currently in view | |
| 28484 | if (swiper.params.slidesPerView !== 'auto' && swiper.params.slidesPerView > 1) { | |
| 28485 | for (i = 0; i < Math.ceil(swiper.params.slidesPerView); i += 1) { | |
| 28486 | var index = swiper.activeIndex + i; | |
| 28487 | if (index > swiper.slides.length) { break; } | |
| 28488 | activeSlides.push(swiper.slides.eq(index)[0]); | |
| 28489 | } | |
| 28490 | } else { | |
| 28491 | activeSlides.push(swiper.slides.eq(swiper.activeIndex)[0]); | |
| 28492 | } | |
| 28493 | ||
| 28494 | // Find new height from highest slide in view | |
| 28495 | for (i = 0; i < activeSlides.length; i += 1) { | |
| 28496 | if (typeof activeSlides[i] !== 'undefined') { | |
| 28497 | var height = activeSlides[i].offsetHeight; | |
| 28498 | newHeight = height > newHeight ? height : newHeight; | |
| 28499 | } | |
| 28500 | } | |
| 28501 | ||
| 28502 | // Update Height | |
| 28503 | if (newHeight) { swiper.$wrapperEl.css('height', (newHeight + "px")); } | |
| 28504 | } | |
| 28505 | ||
| 28506 | function updateSlidesOffset () { | |
| 28507 | var swiper = this; | |
| 28508 | var slides = swiper.slides; | |
| 28509 | for (var i = 0; i < slides.length; i += 1) { | |
| 28510 | slides[i].swiperSlideOffset = swiper.isHorizontal() ? slides[i].offsetLeft : slides[i].offsetTop; | |
| 28511 | } | |
| 28512 | } | |
| 28513 | ||
| 28514 | function updateSlidesProgress (translate) { | |
| 28515 | if ( translate === void 0 ) translate = (this && this.translate) || 0; | |
| 28516 | ||
| 28517 | var swiper = this; | |
| 28518 | var params = swiper.params; | |
| 28519 | ||
| 28520 | var slides = swiper.slides; | |
| 28521 | var rtl = swiper.rtlTranslate; | |
| 28522 | ||
| 28523 | if (slides.length === 0) { return; } | |
| 28524 | if (typeof slides[0].swiperSlideOffset === 'undefined') { swiper.updateSlidesOffset(); } | |
| 28525 | ||
| 28526 | var offsetCenter = -translate; | |
| 28527 | if (rtl) { offsetCenter = translate; } | |
| 28528 | ||
| 28529 | // Visible Slides | |
| 28530 | slides.removeClass(params.slideVisibleClass); | |
| 28531 | ||
| 28532 | swiper.visibleSlidesIndexes = []; | |
| 28533 | swiper.visibleSlides = []; | |
| 28534 | ||
| 28535 | for (var i = 0; i < slides.length; i += 1) { | |
| 28536 | var slide = slides[i]; | |
| 28537 | var slideProgress = ( | |
| 28538 | (offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0)) - slide.swiperSlideOffset | |
| 28539 | ) / (slide.swiperSlideSize + params.spaceBetween); | |
| 28540 | if (params.watchSlidesVisibility) { | |
| 28541 | var slideBefore = -(offsetCenter - slide.swiperSlideOffset); | |
| 28542 | var slideAfter = slideBefore + swiper.slidesSizesGrid[i]; | |
| 28543 | var isVisible = (slideBefore >= 0 && slideBefore < swiper.size) | |
| 28544 | || (slideAfter > 0 && slideAfter <= swiper.size) | |
| 28545 | || (slideBefore <= 0 && slideAfter >= swiper.size); | |
| 28546 | if (isVisible) { | |
| 28547 | swiper.visibleSlides.push(slide); | |
| 28548 | swiper.visibleSlidesIndexes.push(i); | |
| 28549 | slides.eq(i).addClass(params.slideVisibleClass); | |
| 28550 | } | |
| 28551 | } | |
| 28552 | slide.progress = rtl ? -slideProgress : slideProgress; | |
| 28553 | } | |
| 28554 | swiper.visibleSlides = $(swiper.visibleSlides); | |
| 28555 | } | |
| 28556 | ||
| 28557 | function updateProgress (translate) { | |
| 28558 | if ( translate === void 0 ) translate = (this && this.translate) || 0; | |
| 28559 | ||
| 28560 | var swiper = this; | |
| 28561 | var params = swiper.params; | |
| 28562 | ||
| 28563 | var translatesDiff = swiper.maxTranslate() - swiper.minTranslate(); | |
| 28564 | var progress = swiper.progress; | |
| 28565 | var isBeginning = swiper.isBeginning; | |
| 28566 | var isEnd = swiper.isEnd; | |
| 28567 | var wasBeginning = isBeginning; | |
| 28568 | var wasEnd = isEnd; | |
| 28569 | if (translatesDiff === 0) { | |
| 28570 | progress = 0; | |
| 28571 | isBeginning = true; | |
| 28572 | isEnd = true; | |
| 28573 | } else { | |
| 28574 | progress = (translate - swiper.minTranslate()) / (translatesDiff); | |
| 28575 | isBeginning = progress <= 0; | |
| 28576 | isEnd = progress >= 1; | |
| 28577 | } | |
| 28578 | Utils.extend(swiper, { | |
| 28579 | progress: progress, | |
| 28580 | isBeginning: isBeginning, | |
| 28581 | isEnd: isEnd, | |
| 28582 | }); | |
| 28583 | ||
| 28584 | if (params.watchSlidesProgress || params.watchSlidesVisibility) { swiper.updateSlidesProgress(translate); } | |
| 28585 | ||
| 28586 | if (isBeginning && !wasBeginning) { | |
| 28587 | swiper.emit('reachBeginning toEdge'); | |
| 28588 | } | |
| 28589 | if (isEnd && !wasEnd) { | |
| 28590 | swiper.emit('reachEnd toEdge'); | |
| 28591 | } | |
| 28592 | if ((wasBeginning && !isBeginning) || (wasEnd && !isEnd)) { | |
| 28593 | swiper.emit('fromEdge'); | |
| 28594 | } | |
| 28595 | ||
| 28596 | swiper.emit('progress', progress); | |
| 28597 | } | |
| 28598 | ||
| 28599 | function updateSlidesClasses () { | |
| 28600 | var swiper = this; | |
| 28601 | ||
| 28602 | var slides = swiper.slides; | |
| 28603 | var params = swiper.params; | |
| 28604 | var $wrapperEl = swiper.$wrapperEl; | |
| 28605 | var activeIndex = swiper.activeIndex; | |
| 28606 | var realIndex = swiper.realIndex; | |
| 28607 | var isVirtual = swiper.virtual && params.virtual.enabled; | |
| 28608 | ||
| 28609 | slides.removeClass(((params.slideActiveClass) + " " + (params.slideNextClass) + " " + (params.slidePrevClass) + " " + (params.slideDuplicateActiveClass) + " " + (params.slideDuplicateNextClass) + " " + (params.slideDuplicatePrevClass))); | |
| 28610 | ||
| 28611 | var activeSlide; | |
| 28612 | if (isVirtual) { | |
| 28613 | activeSlide = swiper.$wrapperEl.find(("." + (params.slideClass) + "[data-swiper-slide-index=\"" + activeIndex + "\"]")); | |
| 28614 | } else { | |
| 28615 | activeSlide = slides.eq(activeIndex); | |
| 28616 | } | |
| 28617 | ||
| 28618 | // Active classes | |
| 28619 | activeSlide.addClass(params.slideActiveClass); | |
| 28620 | ||
| 28621 | if (params.loop) { | |
| 28622 | // Duplicate to all looped slides | |
| 28623 | if (activeSlide.hasClass(params.slideDuplicateClass)) { | |
| 28624 | $wrapperEl | |
| 28625 | .children(("." + (params.slideClass) + ":not(." + (params.slideDuplicateClass) + ")[data-swiper-slide-index=\"" + realIndex + "\"]")) | |
| 28626 | .addClass(params.slideDuplicateActiveClass); | |
| 28627 | } else { | |
| 28628 | $wrapperEl | |
| 28629 | .children(("." + (params.slideClass) + "." + (params.slideDuplicateClass) + "[data-swiper-slide-index=\"" + realIndex + "\"]")) | |
| 28630 | .addClass(params.slideDuplicateActiveClass); | |
| 28631 | } | |
| 28632 | } | |
| 28633 | // Next Slide | |
| 28634 | var nextSlide = activeSlide.nextAll(("." + (params.slideClass))).eq(0).addClass(params.slideNextClass); | |
| 28635 | if (params.loop && nextSlide.length === 0) { | |
| 28636 | nextSlide = slides.eq(0); | |
| 28637 | nextSlide.addClass(params.slideNextClass); | |
| 28638 | } | |
| 28639 | // Prev Slide | |
| 28640 | var prevSlide = activeSlide.prevAll(("." + (params.slideClass))).eq(0).addClass(params.slidePrevClass); | |
| 28641 | if (params.loop && prevSlide.length === 0) { | |
| 28642 | prevSlide = slides.eq(-1); | |
| 28643 | prevSlide.addClass(params.slidePrevClass); | |
| 28644 | } | |
| 28645 | if (params.loop) { | |
| 28646 | // Duplicate to all looped slides | |
| 28647 | if (nextSlide.hasClass(params.slideDuplicateClass)) { | |
| 28648 | $wrapperEl | |
| 28649 | .children(("." + (params.slideClass) + ":not(." + (params.slideDuplicateClass) + ")[data-swiper-slide-index=\"" + (nextSlide.attr('data-swiper-slide-index')) + "\"]")) | |
| 28650 | .addClass(params.slideDuplicateNextClass); | |
| 28651 | } else { | |
| 28652 | $wrapperEl | |
| 28653 | .children(("." + (params.slideClass) + "." + (params.slideDuplicateClass) + "[data-swiper-slide-index=\"" + (nextSlide.attr('data-swiper-slide-index')) + "\"]")) | |
| 28654 | .addClass(params.slideDuplicateNextClass); | |
| 28655 | } | |
| 28656 | if (prevSlide.hasClass(params.slideDuplicateClass)) { | |
| 28657 | $wrapperEl | |
| 28658 | .children(("." + (params.slideClass) + ":not(." + (params.slideDuplicateClass) + ")[data-swiper-slide-index=\"" + (prevSlide.attr('data-swiper-slide-index')) + "\"]")) | |
| 28659 | .addClass(params.slideDuplicatePrevClass); | |
| 28660 | } else { | |
| 28661 | $wrapperEl | |
| 28662 | .children(("." + (params.slideClass) + "." + (params.slideDuplicateClass) + "[data-swiper-slide-index=\"" + (prevSlide.attr('data-swiper-slide-index')) + "\"]")) | |
| 28663 | .addClass(params.slideDuplicatePrevClass); | |
| 28664 | } | |
| 28665 | } | |
| 28666 | } | |
| 28667 | ||
| 28668 | function updateActiveIndex (newActiveIndex) { | |
| 28669 | var swiper = this; | |
| 28670 | var translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate; | |
| 28671 | var slidesGrid = swiper.slidesGrid; | |
| 28672 | var snapGrid = swiper.snapGrid; | |
| 28673 | var params = swiper.params; | |
| 28674 | var previousIndex = swiper.activeIndex; | |
| 28675 | var previousRealIndex = swiper.realIndex; | |
| 28676 | var previousSnapIndex = swiper.snapIndex; | |
| 28677 | var activeIndex = newActiveIndex; | |
| 28678 | var snapIndex; | |
| 28679 | if (typeof activeIndex === 'undefined') { | |
| 28680 | for (var i = 0; i < slidesGrid.length; i += 1) { | |
| 28681 | if (typeof slidesGrid[i + 1] !== 'undefined') { | |
| 28682 | if (translate >= slidesGrid[i] && translate < slidesGrid[i + 1] - ((slidesGrid[i + 1] - slidesGrid[i]) / 2)) { | |
| 28683 | activeIndex = i; | |
| 28684 | } else if (translate >= slidesGrid[i] && translate < slidesGrid[i + 1]) { | |
| 28685 | activeIndex = i + 1; | |
| 28686 | } | |
| 28687 | } else if (translate >= slidesGrid[i]) { | |
| 28688 | activeIndex = i; | |
| 28689 | } | |
| 28690 | } | |
| 28691 | // Normalize slideIndex | |
| 28692 | if (params.normalizeSlideIndex) { | |
| 28693 | if (activeIndex < 0 || typeof activeIndex === 'undefined') { activeIndex = 0; } | |
| 28694 | } | |
| 28695 | } | |
| 28696 | if (snapGrid.indexOf(translate) >= 0) { | |
| 28697 | snapIndex = snapGrid.indexOf(translate); | |
| 28698 | } else { | |
| 28699 | snapIndex = Math.floor(activeIndex / params.slidesPerGroup); | |
| 28700 | } | |
| 28701 | if (snapIndex >= snapGrid.length) { snapIndex = snapGrid.length - 1; } | |
| 28702 | if (activeIndex === previousIndex) { | |
| 28703 | if (snapIndex !== previousSnapIndex) { | |
| 28704 | swiper.snapIndex = snapIndex; | |
| 28705 | swiper.emit('snapIndexChange'); | |
| 28706 | } | |
| 28707 | return; | |
| 28708 | } | |
| 28709 | ||
| 28710 | // Get real index | |
| 28711 | var realIndex = parseInt(swiper.slides.eq(activeIndex).attr('data-swiper-slide-index') || activeIndex, 10); | |
| 28712 | ||
| 28713 | Utils.extend(swiper, { | |
| 28714 | snapIndex: snapIndex, | |
| 28715 | realIndex: realIndex, | |
| 28716 | previousIndex: previousIndex, | |
| 28717 | activeIndex: activeIndex, | |
| 28718 | }); | |
| 28719 | swiper.emit('activeIndexChange'); | |
| 28720 | swiper.emit('snapIndexChange'); | |
| 28721 | if (previousRealIndex !== realIndex) { | |
| 28722 | swiper.emit('realIndexChange'); | |
| 28723 | } | |
| 28724 | swiper.emit('slideChange'); | |
| 28725 | } | |
| 28726 | ||
| 28727 | function updateClickedSlide (e) { | |
| 28728 | var swiper = this; | |
| 28729 | var params = swiper.params; | |
| 28730 | var slide = $(e.target).closest(("." + (params.slideClass)))[0]; | |
| 28731 | var slideFound = false; | |
| 28732 | if (slide) { | |
| 28733 | for (var i = 0; i < swiper.slides.length; i += 1) { | |
| 28734 | if (swiper.slides[i] === slide) { slideFound = true; } | |
| 28735 | } | |
| 28736 | } | |
| 28737 | ||
| 28738 | if (slide && slideFound) { | |
| 28739 | swiper.clickedSlide = slide; | |
| 28740 | if (swiper.virtual && swiper.params.virtual.enabled) { | |
| 28741 | swiper.clickedIndex = parseInt($(slide).attr('data-swiper-slide-index'), 10); | |
| 28742 | } else { | |
| 28743 | swiper.clickedIndex = $(slide).index(); | |
| 28744 | } | |
| 28745 | } else { | |
| 28746 | swiper.clickedSlide = undefined; | |
| 28747 | swiper.clickedIndex = undefined; | |
| 28748 | return; | |
| 28749 | } | |
| 28750 | if (params.slideToClickedSlide && swiper.clickedIndex !== undefined && swiper.clickedIndex !== swiper.activeIndex) { | |
| 28751 | swiper.slideToClickedSlide(); | |
| 28752 | } | |
| 28753 | } | |
| 28754 | ||
| 28755 | var update = { | |
| 28756 | updateSize: updateSize, | |
| 28757 | updateSlides: updateSlides, | |
| 28758 | updateAutoHeight: updateAutoHeight, | |
| 28759 | updateSlidesOffset: updateSlidesOffset, | |
| 28760 | updateSlidesProgress: updateSlidesProgress, | |
| 28761 | updateProgress: updateProgress, | |
| 28762 | updateSlidesClasses: updateSlidesClasses, | |
| 28763 | updateActiveIndex: updateActiveIndex, | |
| 28764 | updateClickedSlide: updateClickedSlide, | |
| 28765 | }; | |
| 28766 | ||
| 28767 | function getTranslate (axis) { | |
| 28768 | if ( axis === void 0 ) axis = this.isHorizontal() ? 'x' : 'y'; | |
| 28769 | ||
| 28770 | var swiper = this; | |
| 28771 | ||
| 28772 | var params = swiper.params; | |
| 28773 | var rtl = swiper.rtlTranslate; | |
| 28774 | var translate = swiper.translate; | |
| 28775 | var $wrapperEl = swiper.$wrapperEl; | |
| 28776 | ||
| 28777 | if (params.virtualTranslate) { | |
| 28778 | return rtl ? -translate : translate; | |
| 28779 | } | |
| 28780 | ||
| 28781 | var currentTranslate = Utils.getTranslate($wrapperEl[0], axis); | |
| 28782 | if (rtl) { currentTranslate = -currentTranslate; } | |
| 28783 | ||
| 28784 | return currentTranslate || 0; | |
| 28785 | } | |
| 28786 | ||
| 28787 | function setTranslate (translate, byController) { | |
| 28788 | var swiper = this; | |
| 28789 | var rtl = swiper.rtlTranslate; | |
| 28790 | var params = swiper.params; | |
| 28791 | var $wrapperEl = swiper.$wrapperEl; | |
| 28792 | var progress = swiper.progress; | |
| 28793 | var x = 0; | |
| 28794 | var y = 0; | |
| 28795 | var z = 0; | |
| 28796 | ||
| 28797 | if (swiper.isHorizontal()) { | |
| 28798 | x = rtl ? -translate : translate; | |
| 28799 | } else { | |
| 28800 | y = translate; | |
| 28801 | } | |
| 28802 | ||
| 28803 | if (params.roundLengths) { | |
| 28804 | x = Math.floor(x); | |
| 28805 | y = Math.floor(y); | |
| 28806 | } | |
| 28807 | ||
| 28808 | if (!params.virtualTranslate) { | |
| 28809 | if (Support.transforms3d) { $wrapperEl.transform(("translate3d(" + x + "px, " + y + "px, " + z + "px)")); } | |
| 28810 | else { $wrapperEl.transform(("translate(" + x + "px, " + y + "px)")); } | |
| 28811 | } | |
| 28812 | swiper.previousTranslate = swiper.translate; | |
| 28813 | swiper.translate = swiper.isHorizontal() ? x : y; | |
| 28814 | ||
| 28815 | // Check if we need to update progress | |
| 28816 | var newProgress; | |
| 28817 | var translatesDiff = swiper.maxTranslate() - swiper.minTranslate(); | |
| 28818 | if (translatesDiff === 0) { | |
| 28819 | newProgress = 0; | |
| 28820 | } else { | |
| 28821 | newProgress = (translate - swiper.minTranslate()) / (translatesDiff); | |
| 28822 | } | |
| 28823 | if (newProgress !== progress) { | |
| 28824 | swiper.updateProgress(translate); | |
| 28825 | } | |
| 28826 | ||
| 28827 | swiper.emit('setTranslate', swiper.translate, byController); | |
| 28828 | } | |
| 28829 | ||
| 28830 | function minTranslate () { | |
| 28831 | return (-this.snapGrid[0]); | |
| 28832 | } | |
| 28833 | ||
| 28834 | function maxTranslate () { | |
| 28835 | return (-this.snapGrid[this.snapGrid.length - 1]); | |
| 28836 | } | |
| 28837 | ||
| 28838 | var translate = { | |
| 28839 | getTranslate: getTranslate, | |
| 28840 | setTranslate: setTranslate, | |
| 28841 | minTranslate: minTranslate, | |
| 28842 | maxTranslate: maxTranslate, | |
| 28843 | }; | |
| 28844 | ||
| 28845 | function setTransition (duration, byController) { | |
| 28846 | var swiper = this; | |
| 28847 | ||
| 28848 | swiper.$wrapperEl.transition(duration); | |
| 28849 | ||
| 28850 | swiper.emit('setTransition', duration, byController); | |
| 28851 | } | |
| 28852 | ||
| 28853 | function transitionStart (runCallbacks, direction) { | |
| 28854 | if ( runCallbacks === void 0 ) runCallbacks = true; | |
| 28855 | ||
| 28856 | var swiper = this; | |
| 28857 | var activeIndex = swiper.activeIndex; | |
| 28858 | var params = swiper.params; | |
| 28859 | var previousIndex = swiper.previousIndex; | |
| 28860 | if (params.autoHeight) { | |
| 28861 | swiper.updateAutoHeight(); | |
| 28862 | } | |
| 28863 | ||
| 28864 | var dir = direction; | |
| 28865 | if (!dir) { | |
| 28866 | if (activeIndex > previousIndex) { dir = 'next'; } | |
| 28867 | else if (activeIndex < previousIndex) { dir = 'prev'; } | |
| 28868 | else { dir = 'reset'; } | |
| 28869 | } | |
| 28870 | ||
| 28871 | swiper.emit('transitionStart'); | |
| 28872 | ||
| 28873 | if (runCallbacks && activeIndex !== previousIndex) { | |
| 28874 | if (dir === 'reset') { | |
| 28875 | swiper.emit('slideResetTransitionStart'); | |
| 28876 | return; | |
| 28877 | } | |
| 28878 | swiper.emit('slideChangeTransitionStart'); | |
| 28879 | if (dir === 'next') { | |
| 28880 | swiper.emit('slideNextTransitionStart'); | |
| 28881 | } else { | |
| 28882 | swiper.emit('slidePrevTransitionStart'); | |
| 28883 | } | |
| 28884 | } | |
| 28885 | } | |
| 28886 | ||
| 28887 | function transitionEnd$1 (runCallbacks, direction) { | |
| 28888 | if ( runCallbacks === void 0 ) runCallbacks = true; | |
| 28889 | ||
| 28890 | var swiper = this; | |
| 28891 | var activeIndex = swiper.activeIndex; | |
| 28892 | var previousIndex = swiper.previousIndex; | |
| 28893 | swiper.animating = false; | |
| 28894 | swiper.setTransition(0); | |
| 28895 | ||
| 28896 | var dir = direction; | |
| 28897 | if (!dir) { | |
| 28898 | if (activeIndex > previousIndex) { dir = 'next'; } | |
| 28899 | else if (activeIndex < previousIndex) { dir = 'prev'; } | |
| 28900 | else { dir = 'reset'; } | |
| 28901 | } | |
| 28902 | ||
| 28903 | swiper.emit('transitionEnd'); | |
| 28904 | ||
| 28905 | if (runCallbacks && activeIndex !== previousIndex) { | |
| 28906 | if (dir === 'reset') { | |
| 28907 | swiper.emit('slideResetTransitionEnd'); | |
| 28908 | return; | |
| 28909 | } | |
| 28910 | swiper.emit('slideChangeTransitionEnd'); | |
| 28911 | if (dir === 'next') { | |
| 28912 | swiper.emit('slideNextTransitionEnd'); | |
| 28913 | } else { | |
| 28914 | swiper.emit('slidePrevTransitionEnd'); | |
| 28915 | } | |
| 28916 | } | |
| 28917 | } | |
| 28918 | ||
| 28919 | var transition$1 = { | |
| 28920 | setTransition: setTransition, | |
| 28921 | transitionStart: transitionStart, | |
| 28922 | transitionEnd: transitionEnd$1, | |
| 28923 | }; | |
| 28924 | ||
| 28925 | function slideTo (index, speed, runCallbacks, internal) { | |
| 28926 | if ( index === void 0 ) index = 0; | |
| 28927 | if ( speed === void 0 ) speed = this.params.speed; | |
| 28928 | if ( runCallbacks === void 0 ) runCallbacks = true; | |
| 28929 | ||
| 28930 | var swiper = this; | |
| 28931 | var slideIndex = index; | |
| 28932 | if (slideIndex < 0) { slideIndex = 0; } | |
| 28933 | ||
| 28934 | var params = swiper.params; | |
| 28935 | var snapGrid = swiper.snapGrid; | |
| 28936 | var slidesGrid = swiper.slidesGrid; | |
| 28937 | var previousIndex = swiper.previousIndex; | |
| 28938 | var activeIndex = swiper.activeIndex; | |
| 28939 | var rtl = swiper.rtlTranslate; | |
| 28940 | if (swiper.animating && params.preventInteractionOnTransition) { | |
| 28941 | return false; | |
| 28942 | } | |
| 28943 | ||
| 28944 | var snapIndex = Math.floor(slideIndex / params.slidesPerGroup); | |
| 28945 | if (snapIndex >= snapGrid.length) { snapIndex = snapGrid.length - 1; } | |
| 28946 | ||
| 28947 | if ((activeIndex || params.initialSlide || 0) === (previousIndex || 0) && runCallbacks) { | |
| 28948 | swiper.emit('beforeSlideChangeStart'); | |
| 28949 | } | |
| 28950 | ||
| 28951 | var translate = -snapGrid[snapIndex]; | |
| 28952 | ||
| 28953 | // Update progress | |
| 28954 | swiper.updateProgress(translate); | |
| 28955 | ||
| 28956 | // Normalize slideIndex | |
| 28957 | if (params.normalizeSlideIndex) { | |
| 28958 | for (var i = 0; i < slidesGrid.length; i += 1) { | |
| 28959 | if (-Math.floor(translate * 100) >= Math.floor(slidesGrid[i] * 100)) { | |
| 28960 | slideIndex = i; | |
| 28961 | } | |
| 28962 | } | |
| 28963 | } | |
| 28964 | // Directions locks | |
| 28965 | if (swiper.initialized && slideIndex !== activeIndex) { | |
| 28966 | if (!swiper.allowSlideNext && translate < swiper.translate && translate < swiper.minTranslate()) { | |
| 28967 | return false; | |
| 28968 | } | |
| 28969 | if (!swiper.allowSlidePrev && translate > swiper.translate && translate > swiper.maxTranslate()) { | |
| 28970 | if ((activeIndex || 0) !== slideIndex) { return false; } | |
| 28971 | } | |
| 28972 | } | |
| 28973 | ||
| 28974 | var direction; | |
| 28975 | if (slideIndex > activeIndex) { direction = 'next'; } | |
| 28976 | else if (slideIndex < activeIndex) { direction = 'prev'; } | |
| 28977 | else { direction = 'reset'; } | |
| 28978 | ||
| 28979 | ||
| 28980 | // Update Index | |
| 28981 | if ((rtl && -translate === swiper.translate) || (!rtl && translate === swiper.translate)) { | |
| 28982 | swiper.updateActiveIndex(slideIndex); | |
| 28983 | // Update Height | |
| 28984 | if (params.autoHeight) { | |
| 28985 | swiper.updateAutoHeight(); | |
| 28986 | } | |
| 28987 | swiper.updateSlidesClasses(); | |
| 28988 | if (params.effect !== 'slide') { | |
| 28989 | swiper.setTranslate(translate); | |
| 28990 | } | |
| 28991 | if (direction !== 'reset') { | |
| 28992 | swiper.transitionStart(runCallbacks, direction); | |
| 28993 | swiper.transitionEnd(runCallbacks, direction); | |
| 28994 | } | |
| 28995 | return false; | |
| 28996 | } | |
| 28997 | ||
| 28998 | if (speed === 0 || !Support.transition) { | |
| 28999 | swiper.setTransition(0); | |
| 29000 | swiper.setTranslate(translate); | |
| 29001 | swiper.updateActiveIndex(slideIndex); | |
| 29002 | swiper.updateSlidesClasses(); | |
| 29003 | swiper.emit('beforeTransitionStart', speed, internal); | |
| 29004 | swiper.transitionStart(runCallbacks, direction); | |
| 29005 | swiper.transitionEnd(runCallbacks, direction); | |
| 29006 | } else { | |
| 29007 | swiper.setTransition(speed); | |
| 29008 | swiper.setTranslate(translate); | |
| 29009 | swiper.updateActiveIndex(slideIndex); | |
| 29010 | swiper.updateSlidesClasses(); | |
| 29011 | swiper.emit('beforeTransitionStart', speed, internal); | |
| 29012 | swiper.transitionStart(runCallbacks, direction); | |
| 29013 | if (!swiper.animating) { | |
| 29014 | swiper.animating = true; | |
| 29015 | if (!swiper.onSlideToWrapperTransitionEnd) { | |
| 29016 | swiper.onSlideToWrapperTransitionEnd = function transitionEnd(e) { | |
| 29017 | if (!swiper || swiper.destroyed) { return; } | |
| 29018 | if (e.target !== this) { return; } | |
| 29019 | swiper.$wrapperEl[0].removeEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd); | |
| 29020 | swiper.$wrapperEl[0].removeEventListener('webkitTransitionEnd', swiper.onSlideToWrapperTransitionEnd); | |
| 29021 | swiper.onSlideToWrapperTransitionEnd = null; | |
| 29022 | delete swiper.onSlideToWrapperTransitionEnd; | |
| 29023 | swiper.transitionEnd(runCallbacks, direction); | |
| 29024 | }; | |
| 29025 | } | |
| 29026 | swiper.$wrapperEl[0].addEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd); | |
| 29027 | swiper.$wrapperEl[0].addEventListener('webkitTransitionEnd', swiper.onSlideToWrapperTransitionEnd); | |
| 29028 | } | |
| 29029 | } | |
| 29030 | ||
| 29031 | return true; | |
| 29032 | } | |
| 29033 | ||
| 29034 | function slideToLoop (index, speed, runCallbacks, internal) { | |
| 29035 | if ( index === void 0 ) index = 0; | |
| 29036 | if ( speed === void 0 ) speed = this.params.speed; | |
| 29037 | if ( runCallbacks === void 0 ) runCallbacks = true; | |
| 29038 | ||
| 29039 | var swiper = this; | |
| 29040 | var newIndex = index; | |
| 29041 | if (swiper.params.loop) { | |
| 29042 | newIndex += swiper.loopedSlides; | |
| 29043 | } | |
| 29044 | ||
| 29045 | return swiper.slideTo(newIndex, speed, runCallbacks, internal); | |
| 29046 | } | |
| 29047 | ||
| 29048 | /* eslint no-unused-vars: "off" */ | |
| 29049 | function slideNext (speed, runCallbacks, internal) { | |
| 29050 | if ( speed === void 0 ) speed = this.params.speed; | |
| 29051 | if ( runCallbacks === void 0 ) runCallbacks = true; | |
| 29052 | ||
| 29053 | var swiper = this; | |
| 29054 | var params = swiper.params; | |
| 29055 | var animating = swiper.animating; | |
| 29056 | if (params.loop) { | |
| 29057 | if (animating) { return false; } | |
| 29058 | swiper.loopFix(); | |
| 29059 | // eslint-disable-next-line | |
| 29060 | swiper._clientLeft = swiper.$wrapperEl[0].clientLeft; | |
| 29061 | return swiper.slideTo(swiper.activeIndex + params.slidesPerGroup, speed, runCallbacks, internal); | |
| 29062 | } | |
| 29063 | return swiper.slideTo(swiper.activeIndex + params.slidesPerGroup, speed, runCallbacks, internal); | |
| 29064 | } | |
| 29065 | ||
| 29066 | /* eslint no-unused-vars: "off" */ | |
| 29067 | function slidePrev (speed, runCallbacks, internal) { | |
| 29068 | if ( speed === void 0 ) speed = this.params.speed; | |
| 29069 | if ( runCallbacks === void 0 ) runCallbacks = true; | |
| 29070 | ||
| 29071 | var swiper = this; | |
| 29072 | var params = swiper.params; | |
| 29073 | var animating = swiper.animating; | |
| 29074 | var snapGrid = swiper.snapGrid; | |
| 29075 | var slidesGrid = swiper.slidesGrid; | |
| 29076 | var rtlTranslate = swiper.rtlTranslate; | |
| 29077 | ||
| 29078 | if (params.loop) { | |
| 29079 | if (animating) { return false; } | |
| 29080 | swiper.loopFix(); | |
| 29081 | // eslint-disable-next-line | |
| 29082 | swiper._clientLeft = swiper.$wrapperEl[0].clientLeft; | |
| 29083 | } | |
| 29084 | var translate = rtlTranslate ? swiper.translate : -swiper.translate; | |
| 29085 | function normalize(val) { | |
| 29086 | if (val < 0) { return -Math.floor(Math.abs(val)); } | |
| 29087 | return Math.floor(val); | |
| 29088 | } | |
| 29089 | var normalizedTranslate = normalize(translate); | |
| 29090 | var normalizedSnapGrid = snapGrid.map(function (val) { return normalize(val); }); | |
| 29091 | var normalizedSlidesGrid = slidesGrid.map(function (val) { return normalize(val); }); | |
| 29092 | ||
| 29093 | var currentSnap = snapGrid[normalizedSnapGrid.indexOf(normalizedTranslate)]; | |
| 29094 | var prevSnap = snapGrid[normalizedSnapGrid.indexOf(normalizedTranslate) - 1]; | |
| 29095 | var prevIndex; | |
| 29096 | if (typeof prevSnap !== 'undefined') { | |
| 29097 | prevIndex = slidesGrid.indexOf(prevSnap); | |
| 29098 | if (prevIndex < 0) { prevIndex = swiper.activeIndex - 1; } | |
| 29099 | } | |
| 29100 | return swiper.slideTo(prevIndex, speed, runCallbacks, internal); | |
| 29101 | } | |
| 29102 | ||
| 29103 | /* eslint no-unused-vars: "off" */ | |
| 29104 | function slideReset (speed, runCallbacks, internal) { | |
| 29105 | if ( speed === void 0 ) speed = this.params.speed; | |
| 29106 | if ( runCallbacks === void 0 ) runCallbacks = true; | |
| 29107 | ||
| 29108 | var swiper = this; | |
| 29109 | return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal); | |
| 29110 | } | |
| 29111 | ||
| 29112 | /* eslint no-unused-vars: "off" */ | |
| 29113 | function slideToClosest (speed, runCallbacks, internal) { | |
| 29114 | if ( speed === void 0 ) speed = this.params.speed; | |
| 29115 | if ( runCallbacks === void 0 ) runCallbacks = true; | |
| 29116 | ||
| 29117 | var swiper = this; | |
| 29118 | var index = swiper.activeIndex; | |
| 29119 | var snapIndex = Math.floor(index / swiper.params.slidesPerGroup); | |
| 29120 | ||
| 29121 | if (snapIndex < swiper.snapGrid.length - 1) { | |
| 29122 | var translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate; | |
| 29123 | ||
| 29124 | var currentSnap = swiper.snapGrid[snapIndex]; | |
| 29125 | var nextSnap = swiper.snapGrid[snapIndex + 1]; | |
| 29126 | ||
| 29127 | if ((translate - currentSnap) > (nextSnap - currentSnap) / 2) { | |
| 29128 | index = swiper.params.slidesPerGroup; | |
| 29129 | } | |
| 29130 | } | |
| 29131 | ||
| 29132 | return swiper.slideTo(index, speed, runCallbacks, internal); | |
| 29133 | } | |
| 29134 | ||
| 29135 | function slideToClickedSlide () { | |
| 29136 | var swiper = this; | |
| 29137 | var params = swiper.params; | |
| 29138 | var $wrapperEl = swiper.$wrapperEl; | |
| 29139 | ||
| 29140 | var slidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : params.slidesPerView; | |
| 29141 | var slideToIndex = swiper.clickedIndex; | |
| 29142 | var realIndex; | |
| 29143 | if (params.loop) { | |
| 29144 | if (swiper.animating) { return; } | |
| 29145 | realIndex = parseInt($(swiper.clickedSlide).attr('data-swiper-slide-index'), 10); | |
| 29146 | if (params.centeredSlides) { | |
| 29147 | if ( | |
| 29148 | (slideToIndex < swiper.loopedSlides - (slidesPerView / 2)) | |
| 29149 | || (slideToIndex > (swiper.slides.length - swiper.loopedSlides) + (slidesPerView / 2)) | |
| 29150 | ) { | |
| 29151 | swiper.loopFix(); | |
| 29152 | slideToIndex = $wrapperEl | |
| 29153 | .children(("." + (params.slideClass) + "[data-swiper-slide-index=\"" + realIndex + "\"]:not(." + (params.slideDuplicateClass) + ")")) | |
| 29154 | .eq(0) | |
| 29155 | .index(); | |
| 29156 | ||
| 29157 | Utils.nextTick(function () { | |
| 29158 | swiper.slideTo(slideToIndex); | |
| 29159 | }); | |
| 29160 | } else { | |
| 29161 | swiper.slideTo(slideToIndex); | |
| 29162 | } | |
| 29163 | } else if (slideToIndex > swiper.slides.length - slidesPerView) { | |
| 29164 | swiper.loopFix(); | |
| 29165 | slideToIndex = $wrapperEl | |
| 29166 | .children(("." + (params.slideClass) + "[data-swiper-slide-index=\"" + realIndex + "\"]:not(." + (params.slideDuplicateClass) + ")")) | |
| 29167 | .eq(0) | |
| 29168 | .index(); | |
| 29169 | ||
| 29170 | Utils.nextTick(function () { | |
| 29171 | swiper.slideTo(slideToIndex); | |
| 29172 | }); | |
| 29173 | } else { | |
| 29174 | swiper.slideTo(slideToIndex); | |
| 29175 | } | |
| 29176 | } else { | |
| 29177 | swiper.slideTo(slideToIndex); | |
| 29178 | } | |
| 29179 | } | |
| 29180 | ||
| 29181 | var slide = { | |
| 29182 | slideTo: slideTo, | |
| 29183 | slideToLoop: slideToLoop, | |
| 29184 | slideNext: slideNext, | |
| 29185 | slidePrev: slidePrev, | |
| 29186 | slideReset: slideReset, | |
| 29187 | slideToClosest: slideToClosest, | |
| 29188 | slideToClickedSlide: slideToClickedSlide, | |
| 29189 | }; | |
| 29190 | ||
| 29191 | function loopCreate () { | |
| 29192 | var swiper = this; | |
| 29193 | var params = swiper.params; | |
| 29194 | var $wrapperEl = swiper.$wrapperEl; | |
| 29195 | // Remove duplicated slides | |
| 29196 | $wrapperEl.children(("." + (params.slideClass) + "." + (params.slideDuplicateClass))).remove(); | |
| 29197 | ||
| 29198 | var slides = $wrapperEl.children(("." + (params.slideClass))); | |
| 29199 | ||
| 29200 | if (params.loopFillGroupWithBlank) { | |
| 29201 | var blankSlidesNum = params.slidesPerGroup - (slides.length % params.slidesPerGroup); | |
| 29202 | if (blankSlidesNum !== params.slidesPerGroup) { | |
| 29203 | for (var i = 0; i < blankSlidesNum; i += 1) { | |
| 29204 | var blankNode = $(doc.createElement('div')).addClass(((params.slideClass) + " " + (params.slideBlankClass))); | |
| 29205 | $wrapperEl.append(blankNode); | |
| 29206 | } | |
| 29207 | slides = $wrapperEl.children(("." + (params.slideClass))); | |
| 29208 | } | |
| 29209 | } | |
| 29210 | ||
| 29211 | if (params.slidesPerView === 'auto' && !params.loopedSlides) { params.loopedSlides = slides.length; } | |
| 29212 | ||
| 29213 | swiper.loopedSlides = parseInt(params.loopedSlides || params.slidesPerView, 10); | |
| 29214 | swiper.loopedSlides += params.loopAdditionalSlides; | |
| 29215 | if (swiper.loopedSlides > slides.length) { | |
| 29216 | swiper.loopedSlides = slides.length; | |
| 29217 | } | |
| 29218 | ||
| 29219 | var prependSlides = []; | |
| 29220 | var appendSlides = []; | |
| 29221 | slides.each(function (index, el) { | |
| 29222 | var slide = $(el); | |
| 29223 | if (index < swiper.loopedSlides) { appendSlides.push(el); } | |
| 29224 | if (index < slides.length && index >= slides.length - swiper.loopedSlides) { prependSlides.push(el); } | |
| 29225 | slide.attr('data-swiper-slide-index', index); | |
| 29226 | }); | |
| 29227 | for (var i$1 = 0; i$1 < appendSlides.length; i$1 += 1) { | |
| 29228 | $wrapperEl.append($(appendSlides[i$1].cloneNode(true)).addClass(params.slideDuplicateClass)); | |
| 29229 | } | |
| 29230 | for (var i$2 = prependSlides.length - 1; i$2 >= 0; i$2 -= 1) { | |
| 29231 | $wrapperEl.prepend($(prependSlides[i$2].cloneNode(true)).addClass(params.slideDuplicateClass)); | |
| 29232 | } | |
| 29233 | } | |
| 29234 | ||
| 29235 | function loopFix () { | |
| 29236 | var swiper = this; | |
| 29237 | var params = swiper.params; | |
| 29238 | var activeIndex = swiper.activeIndex; | |
| 29239 | var slides = swiper.slides; | |
| 29240 | var loopedSlides = swiper.loopedSlides; | |
| 29241 | var allowSlidePrev = swiper.allowSlidePrev; | |
| 29242 | var allowSlideNext = swiper.allowSlideNext; | |
| 29243 | var snapGrid = swiper.snapGrid; | |
| 29244 | var rtl = swiper.rtlTranslate; | |
| 29245 | var newIndex; | |
| 29246 | swiper.allowSlidePrev = true; | |
| 29247 | swiper.allowSlideNext = true; | |
| 29248 | ||
| 29249 | var snapTranslate = -snapGrid[activeIndex]; | |
| 29250 | var diff = snapTranslate - swiper.getTranslate(); | |
| 29251 | ||
| 29252 | ||
| 29253 | // Fix For Negative Oversliding | |
| 29254 | if (activeIndex < loopedSlides) { | |
| 29255 | newIndex = (slides.length - (loopedSlides * 3)) + activeIndex; | |
| 29256 | newIndex += loopedSlides; | |
| 29257 | var slideChanged = swiper.slideTo(newIndex, 0, false, true); | |
| 29258 | if (slideChanged && diff !== 0) { | |
| 29259 | swiper.setTranslate((rtl ? -swiper.translate : swiper.translate) - diff); | |
| 29260 | } | |
| 29261 | } else if ((params.slidesPerView === 'auto' && activeIndex >= loopedSlides * 2) || (activeIndex >= slides.length - loopedSlides)) { | |
| 29262 | // Fix For Positive Oversliding | |
| 29263 | newIndex = -slides.length + activeIndex + loopedSlides; | |
| 29264 | newIndex += loopedSlides; | |
| 29265 | var slideChanged$1 = swiper.slideTo(newIndex, 0, false, true); | |
| 29266 | if (slideChanged$1 && diff !== 0) { | |
| 29267 | swiper.setTranslate((rtl ? -swiper.translate : swiper.translate) - diff); | |
| 29268 | } | |
| 29269 | } | |
| 29270 | swiper.allowSlidePrev = allowSlidePrev; | |
| 29271 | swiper.allowSlideNext = allowSlideNext; | |
| 29272 | } | |
| 29273 | ||
| 29274 | function loopDestroy () { | |
| 29275 | var swiper = this; | |
| 29276 | var $wrapperEl = swiper.$wrapperEl; | |
| 29277 | var params = swiper.params; | |
| 29278 | var slides = swiper.slides; | |
| 29279 | $wrapperEl.children(("." + (params.slideClass) + "." + (params.slideDuplicateClass) + ",." + (params.slideClass) + "." + (params.slideBlankClass))).remove(); | |
| 29280 | slides.removeAttr('data-swiper-slide-index'); | |
| 29281 | } | |
| 29282 | ||
| 29283 | var loop = { | |
| 29284 | loopCreate: loopCreate, | |
| 29285 | loopFix: loopFix, | |
| 29286 | loopDestroy: loopDestroy, | |
| 29287 | }; | |
| 29288 | ||
| 29289 | function setGrabCursor (moving) { | |
| 29290 | var swiper = this; | |
| 29291 | if (Support.touch || !swiper.params.simulateTouch || (swiper.params.watchOverflow && swiper.isLocked)) { return; } | |
| 29292 | var el = swiper.el; | |
| 29293 | el.style.cursor = 'move'; | |
| 29294 | el.style.cursor = moving ? '-webkit-grabbing' : '-webkit-grab'; | |
| 29295 | el.style.cursor = moving ? '-moz-grabbin' : '-moz-grab'; | |
| 29296 | el.style.cursor = moving ? 'grabbing' : 'grab'; | |
| 29297 | } | |
| 29298 | ||
| 29299 | function unsetGrabCursor () { | |
| 29300 | var swiper = this; | |
| 29301 | if (Support.touch || (swiper.params.watchOverflow && swiper.isLocked)) { return; } | |
| 29302 | swiper.el.style.cursor = ''; | |
| 29303 | } | |
| 29304 | ||
| 29305 | var grabCursor = { | |
| 29306 | setGrabCursor: setGrabCursor, | |
| 29307 | unsetGrabCursor: unsetGrabCursor, | |
| 29308 | }; | |
| 29309 | ||
| 29310 | function appendSlide (slides) { | |
| 29311 | var swiper = this; | |
| 29312 | var $wrapperEl = swiper.$wrapperEl; | |
| 29313 | var params = swiper.params; | |
| 29314 | if (params.loop) { | |
| 29315 | swiper.loopDestroy(); | |
| 29316 | } | |
| 29317 | if (typeof slides === 'object' && 'length' in slides) { | |
| 29318 | for (var i = 0; i < slides.length; i += 1) { | |
| 29319 | if (slides[i]) { $wrapperEl.append(slides[i]); } | |
| 29320 | } | |
| 29321 | } else { | |
| 29322 | $wrapperEl.append(slides); | |
| 29323 | } | |
| 29324 | if (params.loop) { | |
| 29325 | swiper.loopCreate(); | |
| 29326 | } | |
| 29327 | if (!(params.observer && Support.observer)) { | |
| 29328 | swiper.update(); | |
| 29329 | } | |
| 29330 | } | |
| 29331 | ||
| 29332 | function prependSlide (slides) { | |
| 29333 | var swiper = this; | |
| 29334 | var params = swiper.params; | |
| 29335 | var $wrapperEl = swiper.$wrapperEl; | |
| 29336 | var activeIndex = swiper.activeIndex; | |
| 29337 | ||
| 29338 | if (params.loop) { | |
| 29339 | swiper.loopDestroy(); | |
| 29340 | } | |
| 29341 | var newActiveIndex = activeIndex + 1; | |
| 29342 | if (typeof slides === 'object' && 'length' in slides) { | |
| 29343 | for (var i = 0; i < slides.length; i += 1) { | |
| 29344 | if (slides[i]) { $wrapperEl.prepend(slides[i]); } | |
| 29345 | } | |
| 29346 | newActiveIndex = activeIndex + slides.length; | |
| 29347 | } else { | |
| 29348 | $wrapperEl.prepend(slides); | |
| 29349 | } | |
| 29350 | if (params.loop) { | |
| 29351 | swiper.loopCreate(); | |
| 29352 | } | |
| 29353 | if (!(params.observer && Support.observer)) { | |
| 29354 | swiper.update(); | |
| 29355 | } | |
| 29356 | swiper.slideTo(newActiveIndex, 0, false); | |
| 29357 | } | |
| 29358 | ||
| 29359 | function addSlide (index, slides) { | |
| 29360 | var swiper = this; | |
| 29361 | var $wrapperEl = swiper.$wrapperEl; | |
| 29362 | var params = swiper.params; | |
| 29363 | var activeIndex = swiper.activeIndex; | |
| 29364 | var activeIndexBuffer = activeIndex; | |
| 29365 | if (params.loop) { | |
| 29366 | activeIndexBuffer -= swiper.loopedSlides; | |
| 29367 | swiper.loopDestroy(); | |
| 29368 | swiper.slides = $wrapperEl.children(("." + (params.slideClass))); | |
| 29369 | } | |
| 29370 | var baseLength = swiper.slides.length; | |
| 29371 | if (index <= 0) { | |
| 29372 | swiper.prependSlide(slides); | |
| 29373 | return; | |
| 29374 | } | |
| 29375 | if (index >= baseLength) { | |
| 29376 | swiper.appendSlide(slides); | |
| 29377 | return; | |
| 29378 | } | |
| 29379 | var newActiveIndex = activeIndexBuffer > index ? activeIndexBuffer + 1 : activeIndexBuffer; | |
| 29380 | ||
| 29381 | var slidesBuffer = []; | |
| 29382 | for (var i = baseLength - 1; i >= index; i -= 1) { | |
| 29383 | var currentSlide = swiper.slides.eq(i); | |
| 29384 | currentSlide.remove(); | |
| 29385 | slidesBuffer.unshift(currentSlide); | |
| 29386 | } | |
| 29387 | ||
| 29388 | if (typeof slides === 'object' && 'length' in slides) { | |
| 29389 | for (var i$1 = 0; i$1 < slides.length; i$1 += 1) { | |
| 29390 | if (slides[i$1]) { $wrapperEl.append(slides[i$1]); } | |
| 29391 | } | |
| 29392 | newActiveIndex = activeIndexBuffer > index ? activeIndexBuffer + slides.length : activeIndexBuffer; | |
| 29393 | } else { | |
| 29394 | $wrapperEl.append(slides); | |
| 29395 | } | |
| 29396 | ||
| 29397 | for (var i$2 = 0; i$2 < slidesBuffer.length; i$2 += 1) { | |
| 29398 | $wrapperEl.append(slidesBuffer[i$2]); | |
| 29399 | } | |
| 29400 | ||
| 29401 | if (params.loop) { | |
| 29402 | swiper.loopCreate(); | |
| 29403 | } | |
| 29404 | if (!(params.observer && Support.observer)) { | |
| 29405 | swiper.update(); | |
| 29406 | } | |
| 29407 | if (params.loop) { | |
| 29408 | swiper.slideTo(newActiveIndex + swiper.loopedSlides, 0, false); | |
| 29409 | } else { | |
| 29410 | swiper.slideTo(newActiveIndex, 0, false); | |
| 29411 | } | |
| 29412 | } | |
| 29413 | ||
| 29414 | function removeSlide (slidesIndexes) { | |
| 29415 | var swiper = this; | |
| 29416 | var params = swiper.params; | |
| 29417 | var $wrapperEl = swiper.$wrapperEl; | |
| 29418 | var activeIndex = swiper.activeIndex; | |
| 29419 | ||
| 29420 | var activeIndexBuffer = activeIndex; | |
| 29421 | if (params.loop) { | |
| 29422 | activeIndexBuffer -= swiper.loopedSlides; | |
| 29423 | swiper.loopDestroy(); | |
| 29424 | swiper.slides = $wrapperEl.children(("." + (params.slideClass))); | |
| 29425 | } | |
| 29426 | var newActiveIndex = activeIndexBuffer; | |
| 29427 | var indexToRemove; | |
| 29428 | ||
| 29429 | if (typeof slidesIndexes === 'object' && 'length' in slidesIndexes) { | |
| 29430 | for (var i = 0; i < slidesIndexes.length; i += 1) { | |
| 29431 | indexToRemove = slidesIndexes[i]; | |
| 29432 | if (swiper.slides[indexToRemove]) { swiper.slides.eq(indexToRemove).remove(); } | |
| 29433 | if (indexToRemove < newActiveIndex) { newActiveIndex -= 1; } | |
| 29434 | } | |
| 29435 | newActiveIndex = Math.max(newActiveIndex, 0); | |
| 29436 | } else { | |
| 29437 | indexToRemove = slidesIndexes; | |
| 29438 | if (swiper.slides[indexToRemove]) { swiper.slides.eq(indexToRemove).remove(); } | |
| 29439 | if (indexToRemove < newActiveIndex) { newActiveIndex -= 1; } | |
| 29440 | newActiveIndex = Math.max(newActiveIndex, 0); | |
| 29441 | } | |
| 29442 | ||
| 29443 | if (params.loop) { | |
| 29444 | swiper.loopCreate(); | |
| 29445 | } | |
| 29446 | ||
| 29447 | if (!(params.observer && Support.observer)) { | |
| 29448 | swiper.update(); | |
| 29449 | } | |
| 29450 | if (params.loop) { | |
| 29451 | swiper.slideTo(newActiveIndex + swiper.loopedSlides, 0, false); | |
| 29452 | } else { | |
| 29453 | swiper.slideTo(newActiveIndex, 0, false); | |
| 29454 | } | |
| 29455 | } | |
| 29456 | ||
| 29457 | function removeAllSlides () { | |
| 29458 | var swiper = this; | |
| 29459 | ||
| 29460 | var slidesIndexes = []; | |
| 29461 | for (var i = 0; i < swiper.slides.length; i += 1) { | |
| 29462 | slidesIndexes.push(i); | |
| 29463 | } | |
| 29464 | swiper.removeSlide(slidesIndexes); | |
| 29465 | } | |
| 29466 | ||
| 29467 | var manipulation = { | |
| 29468 | appendSlide: appendSlide, | |
| 29469 | prependSlide: prependSlide, | |
| 29470 | addSlide: addSlide, | |
| 29471 | removeSlide: removeSlide, | |
| 29472 | removeAllSlides: removeAllSlides, | |
| 29473 | }; | |
| 29474 | ||
| 29475 | function onTouchStart (event) { | |
| 29476 | var swiper = this; | |
| 29477 | var data = swiper.touchEventsData; | |
| 29478 | var params = swiper.params; | |
| 29479 | var touches = swiper.touches; | |
| 29480 | if (swiper.animating && params.preventInteractionOnTransition) { | |
| 29481 | return; | |
| 29482 | } | |
| 29483 | var e = event; | |
| 29484 | if (e.originalEvent) { e = e.originalEvent; } | |
| 29485 | data.isTouchEvent = e.type === 'touchstart'; | |
| 29486 | if (!data.isTouchEvent && 'which' in e && e.which === 3) { return; } | |
| 29487 | if (!data.isTouchEvent && 'button' in e && e.button > 0) { return; } | |
| 29488 | if (data.isTouched && data.isMoved) { return; } | |
| 29489 | if (params.noSwiping && $(e.target).closest(params.noSwipingSelector ? params.noSwipingSelector : ("." + (params.noSwipingClass)))[0]) { | |
| 29490 | swiper.allowClick = true; | |
| 29491 | return; | |
| 29492 | } | |
| 29493 | if (params.swipeHandler) { | |
| 29494 | if (!$(e).closest(params.swipeHandler)[0]) { return; } | |
| 29495 | } | |
| 29496 | ||
| 29497 | touches.currentX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 29498 | touches.currentY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 29499 | var startX = touches.currentX; | |
| 29500 | var startY = touches.currentY; | |
| 29501 | ||
| 29502 | // Do NOT start if iOS edge swipe is detected. Otherwise iOS app (UIWebView) cannot swipe-to-go-back anymore | |
| 29503 | ||
| 29504 | var edgeSwipeDetection = params.edgeSwipeDetection || params.iOSEdgeSwipeDetection; | |
| 29505 | var edgeSwipeThreshold = params.edgeSwipeThreshold || params.iOSEdgeSwipeThreshold; | |
| 29506 | if ( | |
| 29507 | edgeSwipeDetection | |
| 29508 | && ((startX <= edgeSwipeThreshold) | |
| 29509 | || (startX >= win.screen.width - edgeSwipeThreshold)) | |
| 29510 | ) { | |
| 29511 | return; | |
| 29512 | } | |
| 29513 | ||
| 29514 | Utils.extend(data, { | |
| 29515 | isTouched: true, | |
| 29516 | isMoved: false, | |
| 29517 | allowTouchCallbacks: true, | |
| 29518 | isScrolling: undefined, | |
| 29519 | startMoving: undefined, | |
| 29520 | }); | |
| 29521 | ||
| 29522 | touches.startX = startX; | |
| 29523 | touches.startY = startY; | |
| 29524 | data.touchStartTime = Utils.now(); | |
| 29525 | swiper.allowClick = true; | |
| 29526 | swiper.updateSize(); | |
| 29527 | swiper.swipeDirection = undefined; | |
| 29528 | if (params.threshold > 0) { data.allowThresholdMove = false; } | |
| 29529 | if (e.type !== 'touchstart') { | |
| 29530 | var preventDefault = true; | |
| 29531 | if ($(e.target).is(data.formElements)) { preventDefault = false; } | |
| 29532 | if ( | |
| 29533 | doc.activeElement | |
| 29534 | && $(doc.activeElement).is(data.formElements) | |
| 29535 | && doc.activeElement !== e.target | |
| 29536 | ) { | |
| 29537 | doc.activeElement.blur(); | |
| 29538 | } | |
| 29539 | ||
| 29540 | var shouldPreventDefault = preventDefault && swiper.allowTouchMove && params.touchStartPreventDefault; | |
| 29541 | if (params.touchStartForcePreventDefault || shouldPreventDefault) { | |
| 29542 | e.preventDefault(); | |
| 29543 | } | |
| 29544 | } | |
| 29545 | swiper.emit('touchStart', e); | |
| 29546 | } | |
| 29547 | ||
| 29548 | function onTouchMove (event) { | |
| 29549 | var swiper = this; | |
| 29550 | var data = swiper.touchEventsData; | |
| 29551 | var params = swiper.params; | |
| 29552 | var touches = swiper.touches; | |
| 29553 | var rtl = swiper.rtlTranslate; | |
| 29554 | var e = event; | |
| 29555 | if (e.originalEvent) { e = e.originalEvent; } | |
| 29556 | if (!data.isTouched) { | |
| 29557 | if (data.startMoving && data.isScrolling) { | |
| 29558 | swiper.emit('touchMoveOpposite', e); | |
| 29559 | } | |
| 29560 | return; | |
| 29561 | } | |
| 29562 | if (data.isTouchEvent && e.type === 'mousemove') { return; } | |
| 29563 | var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 29564 | var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 29565 | if (e.preventedByNestedSwiper) { | |
| 29566 | touches.startX = pageX; | |
| 29567 | touches.startY = pageY; | |
| 29568 | return; | |
| 29569 | } | |
| 29570 | if (!swiper.allowTouchMove) { | |
| 29571 | // isMoved = true; | |
| 29572 | swiper.allowClick = false; | |
| 29573 | if (data.isTouched) { | |
| 29574 | Utils.extend(touches, { | |
| 29575 | startX: pageX, | |
| 29576 | startY: pageY, | |
| 29577 | currentX: pageX, | |
| 29578 | currentY: pageY, | |
| 29579 | }); | |
| 29580 | data.touchStartTime = Utils.now(); | |
| 29581 | } | |
| 29582 | return; | |
| 29583 | } | |
| 29584 | if (data.isTouchEvent && params.touchReleaseOnEdges && !params.loop) { | |
| 29585 | if (swiper.isVertical()) { | |
| 29586 | // Vertical | |
| 29587 | if ( | |
| 29588 | (pageY < touches.startY && swiper.translate <= swiper.maxTranslate()) | |
| 29589 | || (pageY > touches.startY && swiper.translate >= swiper.minTranslate()) | |
| 29590 | ) { | |
| 29591 | data.isTouched = false; | |
| 29592 | data.isMoved = false; | |
| 29593 | return; | |
| 29594 | } | |
| 29595 | } else if ( | |
| 29596 | (pageX < touches.startX && swiper.translate <= swiper.maxTranslate()) | |
| 29597 | || (pageX > touches.startX && swiper.translate >= swiper.minTranslate()) | |
| 29598 | ) { | |
| 29599 | return; | |
| 29600 | } | |
| 29601 | } | |
| 29602 | if (data.isTouchEvent && doc.activeElement) { | |
| 29603 | if (e.target === doc.activeElement && $(e.target).is(data.formElements)) { | |
| 29604 | data.isMoved = true; | |
| 29605 | swiper.allowClick = false; | |
| 29606 | return; | |
| 29607 | } | |
| 29608 | } | |
| 29609 | if (data.allowTouchCallbacks) { | |
| 29610 | swiper.emit('touchMove', e); | |
| 29611 | } | |
| 29612 | if (e.targetTouches && e.targetTouches.length > 1) { return; } | |
| 29613 | ||
| 29614 | touches.currentX = pageX; | |
| 29615 | touches.currentY = pageY; | |
| 29616 | ||
| 29617 | var diffX = touches.currentX - touches.startX; | |
| 29618 | var diffY = touches.currentY - touches.startY; | |
| 29619 | if (swiper.params.threshold && Math.sqrt((Math.pow( diffX, 2 )) + (Math.pow( diffY, 2 ))) < swiper.params.threshold) { return; } | |
| 29620 | ||
| 29621 | if (typeof data.isScrolling === 'undefined') { | |
| 29622 | var touchAngle; | |
| 29623 | if ((swiper.isHorizontal() && touches.currentY === touches.startY) || (swiper.isVertical() && touches.currentX === touches.startX)) { | |
| 29624 | data.isScrolling = false; | |
| 29625 | } else { | |
| 29626 | // eslint-disable-next-line | |
| 29627 | if ((diffX * diffX) + (diffY * diffY) >= 25) { | |
| 29628 | touchAngle = (Math.atan2(Math.abs(diffY), Math.abs(diffX)) * 180) / Math.PI; | |
| 29629 | data.isScrolling = swiper.isHorizontal() ? touchAngle > params.touchAngle : (90 - touchAngle > params.touchAngle); | |
| 29630 | } | |
| 29631 | } | |
| 29632 | } | |
| 29633 | if (data.isScrolling) { | |
| 29634 | swiper.emit('touchMoveOpposite', e); | |
| 29635 | } | |
| 29636 | if (typeof data.startMoving === 'undefined') { | |
| 29637 | if (touches.currentX !== touches.startX || touches.currentY !== touches.startY) { | |
| 29638 | data.startMoving = true; | |
| 29639 | } | |
| 29640 | } | |
| 29641 | if (data.isScrolling) { | |
| 29642 | data.isTouched = false; | |
| 29643 | return; | |
| 29644 | } | |
| 29645 | if (!data.startMoving) { | |
| 29646 | return; | |
| 29647 | } | |
| 29648 | swiper.allowClick = false; | |
| 29649 | e.preventDefault(); | |
| 29650 | if (params.touchMoveStopPropagation && !params.nested) { | |
| 29651 | e.stopPropagation(); | |
| 29652 | } | |
| 29653 | ||
| 29654 | if (!data.isMoved) { | |
| 29655 | if (params.loop) { | |
| 29656 | swiper.loopFix(); | |
| 29657 | } | |
| 29658 | data.startTranslate = swiper.getTranslate(); | |
| 29659 | swiper.setTransition(0); | |
| 29660 | if (swiper.animating) { | |
| 29661 | swiper.$wrapperEl.trigger('webkitTransitionEnd transitionend'); | |
| 29662 | } | |
| 29663 | data.allowMomentumBounce = false; | |
| 29664 | // Grab Cursor | |
| 29665 | if (params.grabCursor && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) { | |
| 29666 | swiper.setGrabCursor(true); | |
| 29667 | } | |
| 29668 | swiper.emit('sliderFirstMove', e); | |
| 29669 | } | |
| 29670 | swiper.emit('sliderMove', e); | |
| 29671 | data.isMoved = true; | |
| 29672 | ||
| 29673 | var diff = swiper.isHorizontal() ? diffX : diffY; | |
| 29674 | touches.diff = diff; | |
| 29675 | ||
| 29676 | diff *= params.touchRatio; | |
| 29677 | if (rtl) { diff = -diff; } | |
| 29678 | ||
| 29679 | swiper.swipeDirection = diff > 0 ? 'prev' : 'next'; | |
| 29680 | data.currentTranslate = diff + data.startTranslate; | |
| 29681 | ||
| 29682 | var disableParentSwiper = true; | |
| 29683 | var resistanceRatio = params.resistanceRatio; | |
| 29684 | if (params.touchReleaseOnEdges) { | |
| 29685 | resistanceRatio = 0; | |
| 29686 | } | |
| 29687 | if ((diff > 0 && data.currentTranslate > swiper.minTranslate())) { | |
| 29688 | disableParentSwiper = false; | |
| 29689 | if (params.resistance) { data.currentTranslate = (swiper.minTranslate() - 1) + (Math.pow( (-swiper.minTranslate() + data.startTranslate + diff), resistanceRatio )); } | |
| 29690 | } else if (diff < 0 && data.currentTranslate < swiper.maxTranslate()) { | |
| 29691 | disableParentSwiper = false; | |
| 29692 | if (params.resistance) { data.currentTranslate = (swiper.maxTranslate() + 1) - (Math.pow( (swiper.maxTranslate() - data.startTranslate - diff), resistanceRatio )); } | |
| 29693 | } | |
| 29694 | ||
| 29695 | if (disableParentSwiper) { | |
| 29696 | e.preventedByNestedSwiper = true; | |
| 29697 | } | |
| 29698 | ||
| 29699 | // Directions locks | |
| 29700 | if (!swiper.allowSlideNext && swiper.swipeDirection === 'next' && data.currentTranslate < data.startTranslate) { | |
| 29701 | data.currentTranslate = data.startTranslate; | |
| 29702 | } | |
| 29703 | if (!swiper.allowSlidePrev && swiper.swipeDirection === 'prev' && data.currentTranslate > data.startTranslate) { | |
| 29704 | data.currentTranslate = data.startTranslate; | |
| 29705 | } | |
| 29706 | ||
| 29707 | ||
| 29708 | // Threshold | |
| 29709 | if (params.threshold > 0) { | |
| 29710 | if (Math.abs(diff) > params.threshold || data.allowThresholdMove) { | |
| 29711 | if (!data.allowThresholdMove) { | |
| 29712 | data.allowThresholdMove = true; | |
| 29713 | touches.startX = touches.currentX; | |
| 29714 | touches.startY = touches.currentY; | |
| 29715 | data.currentTranslate = data.startTranslate; | |
| 29716 | touches.diff = swiper.isHorizontal() ? touches.currentX - touches.startX : touches.currentY - touches.startY; | |
| 29717 | return; | |
| 29718 | } | |
| 29719 | } else { | |
| 29720 | data.currentTranslate = data.startTranslate; | |
| 29721 | return; | |
| 29722 | } | |
| 29723 | } | |
| 29724 | ||
| 29725 | if (!params.followFinger) { return; } | |
| 29726 | ||
| 29727 | // Update active index in free mode | |
| 29728 | if (params.freeMode || params.watchSlidesProgress || params.watchSlidesVisibility) { | |
| 29729 | swiper.updateActiveIndex(); | |
| 29730 | swiper.updateSlidesClasses(); | |
| 29731 | } | |
| 29732 | if (params.freeMode) { | |
| 29733 | // Velocity | |
| 29734 | if (data.velocities.length === 0) { | |
| 29735 | data.velocities.push({ | |
| 29736 | position: touches[swiper.isHorizontal() ? 'startX' : 'startY'], | |
| 29737 | time: data.touchStartTime, | |
| 29738 | }); | |
| 29739 | } | |
| 29740 | data.velocities.push({ | |
| 29741 | position: touches[swiper.isHorizontal() ? 'currentX' : 'currentY'], | |
| 29742 | time: Utils.now(), | |
| 29743 | }); | |
| 29744 | } | |
| 29745 | // Update progress | |
| 29746 | swiper.updateProgress(data.currentTranslate); | |
| 29747 | // Update translate | |
| 29748 | swiper.setTranslate(data.currentTranslate); | |
| 29749 | } | |
| 29750 | ||
| 29751 | function onTouchEnd (event) { | |
| 29752 | var swiper = this; | |
| 29753 | var data = swiper.touchEventsData; | |
| 29754 | ||
| 29755 | var params = swiper.params; | |
| 29756 | var touches = swiper.touches; | |
| 29757 | var rtl = swiper.rtlTranslate; | |
| 29758 | var $wrapperEl = swiper.$wrapperEl; | |
| 29759 | var slidesGrid = swiper.slidesGrid; | |
| 29760 | var snapGrid = swiper.snapGrid; | |
| 29761 | var e = event; | |
| 29762 | if (e.originalEvent) { e = e.originalEvent; } | |
| 29763 | if (data.allowTouchCallbacks) { | |
| 29764 | swiper.emit('touchEnd', e); | |
| 29765 | } | |
| 29766 | data.allowTouchCallbacks = false; | |
| 29767 | if (!data.isTouched) { | |
| 29768 | if (data.isMoved && params.grabCursor) { | |
| 29769 | swiper.setGrabCursor(false); | |
| 29770 | } | |
| 29771 | data.isMoved = false; | |
| 29772 | data.startMoving = false; | |
| 29773 | return; | |
| 29774 | } | |
| 29775 | // Return Grab Cursor | |
| 29776 | if (params.grabCursor && data.isMoved && data.isTouched && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) { | |
| 29777 | swiper.setGrabCursor(false); | |
| 29778 | } | |
| 29779 | ||
| 29780 | // Time diff | |
| 29781 | var touchEndTime = Utils.now(); | |
| 29782 | var timeDiff = touchEndTime - data.touchStartTime; | |
| 29783 | ||
| 29784 | // Tap, doubleTap, Click | |
| 29785 | if (swiper.allowClick) { | |
| 29786 | swiper.updateClickedSlide(e); | |
| 29787 | swiper.emit('tap', e); | |
| 29788 | if (timeDiff < 300 && (touchEndTime - data.lastClickTime) > 300) { | |
| 29789 | if (data.clickTimeout) { clearTimeout(data.clickTimeout); } | |
| 29790 | data.clickTimeout = Utils.nextTick(function () { | |
| 29791 | if (!swiper || swiper.destroyed) { return; } | |
| 29792 | swiper.emit('click', e); | |
| 29793 | }, 300); | |
| 29794 | } | |
| 29795 | if (timeDiff < 300 && (touchEndTime - data.lastClickTime) < 300) { | |
| 29796 | if (data.clickTimeout) { clearTimeout(data.clickTimeout); } | |
| 29797 | swiper.emit('doubleTap', e); | |
| 29798 | } | |
| 29799 | } | |
| 29800 | ||
| 29801 | data.lastClickTime = Utils.now(); | |
| 29802 | Utils.nextTick(function () { | |
| 29803 | if (!swiper.destroyed) { swiper.allowClick = true; } | |
| 29804 | }); | |
| 29805 | ||
| 29806 | if (!data.isTouched || !data.isMoved || !swiper.swipeDirection || touches.diff === 0 || data.currentTranslate === data.startTranslate) { | |
| 29807 | data.isTouched = false; | |
| 29808 | data.isMoved = false; | |
| 29809 | data.startMoving = false; | |
| 29810 | return; | |
| 29811 | } | |
| 29812 | data.isTouched = false; | |
| 29813 | data.isMoved = false; | |
| 29814 | data.startMoving = false; | |
| 29815 | ||
| 29816 | var currentPos; | |
| 29817 | if (params.followFinger) { | |
| 29818 | currentPos = rtl ? swiper.translate : -swiper.translate; | |
| 29819 | } else { | |
| 29820 | currentPos = -data.currentTranslate; | |
| 29821 | } | |
| 29822 | ||
| 29823 | if (params.freeMode) { | |
| 29824 | if (currentPos < -swiper.minTranslate()) { | |
| 29825 | swiper.slideTo(swiper.activeIndex); | |
| 29826 | return; | |
| 29827 | } | |
| 29828 | if (currentPos > -swiper.maxTranslate()) { | |
| 29829 | if (swiper.slides.length < snapGrid.length) { | |
| 29830 | swiper.slideTo(snapGrid.length - 1); | |
| 29831 | } else { | |
| 29832 | swiper.slideTo(swiper.slides.length - 1); | |
| 29833 | } | |
| 29834 | return; | |
| 29835 | } | |
| 29836 | ||
| 29837 | if (params.freeModeMomentum) { | |
| 29838 | if (data.velocities.length > 1) { | |
| 29839 | var lastMoveEvent = data.velocities.pop(); | |
| 29840 | var velocityEvent = data.velocities.pop(); | |
| 29841 | ||
| 29842 | var distance = lastMoveEvent.position - velocityEvent.position; | |
| 29843 | var time = lastMoveEvent.time - velocityEvent.time; | |
| 29844 | swiper.velocity = distance / time; | |
| 29845 | swiper.velocity /= 2; | |
| 29846 | if (Math.abs(swiper.velocity) < params.freeModeMinimumVelocity) { | |
| 29847 | swiper.velocity = 0; | |
| 29848 | } | |
| 29849 | // this implies that the user stopped moving a finger then released. | |
| 29850 | // There would be no events with distance zero, so the last event is stale. | |
| 29851 | if (time > 150 || (Utils.now() - lastMoveEvent.time) > 300) { | |
| 29852 | swiper.velocity = 0; | |
| 29853 | } | |
| 29854 | } else { | |
| 29855 | swiper.velocity = 0; | |
| 29856 | } | |
| 29857 | swiper.velocity *= params.freeModeMomentumVelocityRatio; | |
| 29858 | ||
| 29859 | data.velocities.length = 0; | |
| 29860 | var momentumDuration = 1000 * params.freeModeMomentumRatio; | |
| 29861 | var momentumDistance = swiper.velocity * momentumDuration; | |
| 29862 | ||
| 29863 | var newPosition = swiper.translate + momentumDistance; | |
| 29864 | if (rtl) { newPosition = -newPosition; } | |
| 29865 | ||
| 29866 | var doBounce = false; | |
| 29867 | var afterBouncePosition; | |
| 29868 | var bounceAmount = Math.abs(swiper.velocity) * 20 * params.freeModeMomentumBounceRatio; | |
| 29869 | var needsLoopFix; | |
| 29870 | if (newPosition < swiper.maxTranslate()) { | |
| 29871 | if (params.freeModeMomentumBounce) { | |
| 29872 | if (newPosition + swiper.maxTranslate() < -bounceAmount) { | |
| 29873 | newPosition = swiper.maxTranslate() - bounceAmount; | |
| 29874 | } | |
| 29875 | afterBouncePosition = swiper.maxTranslate(); | |
| 29876 | doBounce = true; | |
| 29877 | data.allowMomentumBounce = true; | |
| 29878 | } else { | |
| 29879 | newPosition = swiper.maxTranslate(); | |
| 29880 | } | |
| 29881 | if (params.loop && params.centeredSlides) { needsLoopFix = true; } | |
| 29882 | } else if (newPosition > swiper.minTranslate()) { | |
| 29883 | if (params.freeModeMomentumBounce) { | |
| 29884 | if (newPosition - swiper.minTranslate() > bounceAmount) { | |
| 29885 | newPosition = swiper.minTranslate() + bounceAmount; | |
| 29886 | } | |
| 29887 | afterBouncePosition = swiper.minTranslate(); | |
| 29888 | doBounce = true; | |
| 29889 | data.allowMomentumBounce = true; | |
| 29890 | } else { | |
| 29891 | newPosition = swiper.minTranslate(); | |
| 29892 | } | |
| 29893 | if (params.loop && params.centeredSlides) { needsLoopFix = true; } | |
| 29894 | } else if (params.freeModeSticky) { | |
| 29895 | var nextSlide; | |
| 29896 | for (var j = 0; j < snapGrid.length; j += 1) { | |
| 29897 | if (snapGrid[j] > -newPosition) { | |
| 29898 | nextSlide = j; | |
| 29899 | break; | |
| 29900 | } | |
| 29901 | } | |
| 29902 | ||
| 29903 | if (Math.abs(snapGrid[nextSlide] - newPosition) < Math.abs(snapGrid[nextSlide - 1] - newPosition) || swiper.swipeDirection === 'next') { | |
| 29904 | newPosition = snapGrid[nextSlide]; | |
| 29905 | } else { | |
| 29906 | newPosition = snapGrid[nextSlide - 1]; | |
| 29907 | } | |
| 29908 | newPosition = -newPosition; | |
| 29909 | } | |
| 29910 | if (needsLoopFix) { | |
| 29911 | swiper.once('transitionEnd', function () { | |
| 29912 | swiper.loopFix(); | |
| 29913 | }); | |
| 29914 | } | |
| 29915 | // Fix duration | |
| 29916 | if (swiper.velocity !== 0) { | |
| 29917 | if (rtl) { | |
| 29918 | momentumDuration = Math.abs((-newPosition - swiper.translate) / swiper.velocity); | |
| 29919 | } else { | |
| 29920 | momentumDuration = Math.abs((newPosition - swiper.translate) / swiper.velocity); | |
| 29921 | } | |
| 29922 | } else if (params.freeModeSticky) { | |
| 29923 | swiper.slideToClosest(); | |
| 29924 | return; | |
| 29925 | } | |
| 29926 | ||
| 29927 | if (params.freeModeMomentumBounce && doBounce) { | |
| 29928 | swiper.updateProgress(afterBouncePosition); | |
| 29929 | swiper.setTransition(momentumDuration); | |
| 29930 | swiper.setTranslate(newPosition); | |
| 29931 | swiper.transitionStart(true, swiper.swipeDirection); | |
| 29932 | swiper.animating = true; | |
| 29933 | $wrapperEl.transitionEnd(function () { | |
| 29934 | if (!swiper || swiper.destroyed || !data.allowMomentumBounce) { return; } | |
| 29935 | swiper.emit('momentumBounce'); | |
| 29936 | ||
| 29937 | swiper.setTransition(params.speed); | |
| 29938 | swiper.setTranslate(afterBouncePosition); | |
| 29939 | $wrapperEl.transitionEnd(function () { | |
| 29940 | if (!swiper || swiper.destroyed) { return; } | |
| 29941 | swiper.transitionEnd(); | |
| 29942 | }); | |
| 29943 | }); | |
| 29944 | } else if (swiper.velocity) { | |
| 29945 | swiper.updateProgress(newPosition); | |
| 29946 | swiper.setTransition(momentumDuration); | |
| 29947 | swiper.setTranslate(newPosition); | |
| 29948 | swiper.transitionStart(true, swiper.swipeDirection); | |
| 29949 | if (!swiper.animating) { | |
| 29950 | swiper.animating = true; | |
| 29951 | $wrapperEl.transitionEnd(function () { | |
| 29952 | if (!swiper || swiper.destroyed) { return; } | |
| 29953 | swiper.transitionEnd(); | |
| 29954 | }); | |
| 29955 | } | |
| 29956 | } else { | |
| 29957 | swiper.updateProgress(newPosition); | |
| 29958 | } | |
| 29959 | ||
| 29960 | swiper.updateActiveIndex(); | |
| 29961 | swiper.updateSlidesClasses(); | |
| 29962 | } else if (params.freeModeSticky) { | |
| 29963 | swiper.slideToClosest(); | |
| 29964 | return; | |
| 29965 | } | |
| 29966 | ||
| 29967 | if (!params.freeModeMomentum || timeDiff >= params.longSwipesMs) { | |
| 29968 | swiper.updateProgress(); | |
| 29969 | swiper.updateActiveIndex(); | |
| 29970 | swiper.updateSlidesClasses(); | |
| 29971 | } | |
| 29972 | return; | |
| 29973 | } | |
| 29974 | ||
| 29975 | // Find current slide | |
| 29976 | var stopIndex = 0; | |
| 29977 | var groupSize = swiper.slidesSizesGrid[0]; | |
| 29978 | for (var i = 0; i < slidesGrid.length; i += params.slidesPerGroup) { | |
| 29979 | if (typeof slidesGrid[i + params.slidesPerGroup] !== 'undefined') { | |
| 29980 | if (currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + params.slidesPerGroup]) { | |
| 29981 | stopIndex = i; | |
| 29982 | groupSize = slidesGrid[i + params.slidesPerGroup] - slidesGrid[i]; | |
| 29983 | } | |
| 29984 | } else if (currentPos >= slidesGrid[i]) { | |
| 29985 | stopIndex = i; | |
| 29986 | groupSize = slidesGrid[slidesGrid.length - 1] - slidesGrid[slidesGrid.length - 2]; | |
| 29987 | } | |
| 29988 | } | |
| 29989 | ||
| 29990 | // Find current slide size | |
| 29991 | var ratio = (currentPos - slidesGrid[stopIndex]) / groupSize; | |
| 29992 | ||
| 29993 | if (timeDiff > params.longSwipesMs) { | |
| 29994 | // Long touches | |
| 29995 | if (!params.longSwipes) { | |
| 29996 | swiper.slideTo(swiper.activeIndex); | |
| 29997 | return; | |
| 29998 | } | |
| 29999 | if (swiper.swipeDirection === 'next') { | |
| 30000 | if (ratio >= params.longSwipesRatio) { swiper.slideTo(stopIndex + params.slidesPerGroup); } | |
| 30001 | else { swiper.slideTo(stopIndex); } | |
| 30002 | } | |
| 30003 | if (swiper.swipeDirection === 'prev') { | |
| 30004 | if (ratio > (1 - params.longSwipesRatio)) { swiper.slideTo(stopIndex + params.slidesPerGroup); } | |
| 30005 | else { swiper.slideTo(stopIndex); } | |
| 30006 | } | |
| 30007 | } else { | |
| 30008 | // Short swipes | |
| 30009 | if (!params.shortSwipes) { | |
| 30010 | swiper.slideTo(swiper.activeIndex); | |
| 30011 | return; | |
| 30012 | } | |
| 30013 | if (swiper.swipeDirection === 'next') { | |
| 30014 | swiper.slideTo(stopIndex + params.slidesPerGroup); | |
| 30015 | } | |
| 30016 | if (swiper.swipeDirection === 'prev') { | |
| 30017 | swiper.slideTo(stopIndex); | |
| 30018 | } | |
| 30019 | } | |
| 30020 | } | |
| 30021 | ||
| 30022 | function onResize () { | |
| 30023 | var swiper = this; | |
| 30024 | ||
| 30025 | var params = swiper.params; | |
| 30026 | var el = swiper.el; | |
| 30027 | ||
| 30028 | if (el && el.offsetWidth === 0) { return; } | |
| 30029 | ||
| 30030 | // Breakpoints | |
| 30031 | if (params.breakpoints) { | |
| 30032 | swiper.setBreakpoint(); | |
| 30033 | } | |
| 30034 | ||
| 30035 | // Save locks | |
| 30036 | var allowSlideNext = swiper.allowSlideNext; | |
| 30037 | var allowSlidePrev = swiper.allowSlidePrev; | |
| 30038 | var snapGrid = swiper.snapGrid; | |
| 30039 | ||
| 30040 | // Disable locks on resize | |
| 30041 | swiper.allowSlideNext = true; | |
| 30042 | swiper.allowSlidePrev = true; | |
| 30043 | ||
| 30044 | swiper.updateSize(); | |
| 30045 | swiper.updateSlides(); | |
| 30046 | ||
| 30047 | if (params.freeMode) { | |
| 30048 | var newTranslate = Math.min(Math.max(swiper.translate, swiper.maxTranslate()), swiper.minTranslate()); | |
| 30049 | swiper.setTranslate(newTranslate); | |
| 30050 | swiper.updateActiveIndex(); | |
| 30051 | swiper.updateSlidesClasses(); | |
| 30052 | ||
| 30053 | if (params.autoHeight) { | |
| 30054 | swiper.updateAutoHeight(); | |
| 30055 | } | |
| 30056 | } else { | |
| 30057 | swiper.updateSlidesClasses(); | |
| 30058 | if ((params.slidesPerView === 'auto' || params.slidesPerView > 1) && swiper.isEnd && !swiper.params.centeredSlides) { | |
| 30059 | swiper.slideTo(swiper.slides.length - 1, 0, false, true); | |
| 30060 | } else { | |
| 30061 | swiper.slideTo(swiper.activeIndex, 0, false, true); | |
| 30062 | } | |
| 30063 | } | |
| 30064 | // Return locks after resize | |
| 30065 | swiper.allowSlidePrev = allowSlidePrev; | |
| 30066 | swiper.allowSlideNext = allowSlideNext; | |
| 30067 | ||
| 30068 | if (swiper.params.watchOverflow && snapGrid !== swiper.snapGrid) { | |
| 30069 | swiper.checkOverflow(); | |
| 30070 | } | |
| 30071 | } | |
| 30072 | ||
| 30073 | function onClick (e) { | |
| 30074 | var swiper = this; | |
| 30075 | if (!swiper.allowClick) { | |
| 30076 | if (swiper.params.preventClicks) { e.preventDefault(); } | |
| 30077 | if (swiper.params.preventClicksPropagation && swiper.animating) { | |
| 30078 | e.stopPropagation(); | |
| 30079 | e.stopImmediatePropagation(); | |
| 30080 | } | |
| 30081 | } | |
| 30082 | } | |
| 30083 | ||
| 30084 | function attachEvents() { | |
| 30085 | var swiper = this; | |
| 30086 | var params = swiper.params; | |
| 30087 | var touchEvents = swiper.touchEvents; | |
| 30088 | var el = swiper.el; | |
| 30089 | var wrapperEl = swiper.wrapperEl; | |
| 30090 | ||
| 30091 | { | |
| 30092 | swiper.onTouchStart = onTouchStart.bind(swiper); | |
| 30093 | swiper.onTouchMove = onTouchMove.bind(swiper); | |
| 30094 | swiper.onTouchEnd = onTouchEnd.bind(swiper); | |
| 30095 | } | |
| 30096 | ||
| 30097 | swiper.onClick = onClick.bind(swiper); | |
| 30098 | ||
| 30099 | var target = params.touchEventsTarget === 'container' ? el : wrapperEl; | |
| 30100 | var capture = !!params.nested; | |
| 30101 | ||
| 30102 | // Touch Events | |
| 30103 | { | |
| 30104 | if (!Support.touch && (Support.pointerEvents || Support.prefixedPointerEvents)) { | |
| 30105 | target.addEventListener(touchEvents.start, swiper.onTouchStart, false); | |
| 30106 | doc.addEventListener(touchEvents.move, swiper.onTouchMove, capture); | |
| 30107 | doc.addEventListener(touchEvents.end, swiper.onTouchEnd, false); | |
| 30108 | } else { | |
| 30109 | if (Support.touch) { | |
| 30110 | var passiveListener = touchEvents.start === 'touchstart' && Support.passiveListener && params.passiveListeners ? { passive: true, capture: false } : false; | |
| 30111 | target.addEventListener(touchEvents.start, swiper.onTouchStart, passiveListener); | |
| 30112 | target.addEventListener(touchEvents.move, swiper.onTouchMove, Support.passiveListener ? { passive: false, capture: capture } : capture); | |
| 30113 | target.addEventListener(touchEvents.end, swiper.onTouchEnd, passiveListener); | |
| 30114 | } | |
| 30115 | if ((params.simulateTouch && !Device.ios && !Device.android) || (params.simulateTouch && !Support.touch && Device.ios)) { | |
| 30116 | target.addEventListener('mousedown', swiper.onTouchStart, false); | |
| 30117 | doc.addEventListener('mousemove', swiper.onTouchMove, capture); | |
| 30118 | doc.addEventListener('mouseup', swiper.onTouchEnd, false); | |
| 30119 | } | |
| 30120 | } | |
| 30121 | // Prevent Links Clicks | |
| 30122 | if (params.preventClicks || params.preventClicksPropagation) { | |
| 30123 | target.addEventListener('click', swiper.onClick, true); | |
| 30124 | } | |
| 30125 | } | |
| 30126 | ||
| 30127 | // Resize handler | |
| 30128 | swiper.on((Device.ios || Device.android ? 'resize orientationchange observerUpdate' : 'resize observerUpdate'), onResize, true); | |
| 30129 | } | |
| 30130 | ||
| 30131 | function detachEvents() { | |
| 30132 | var swiper = this; | |
| 30133 | ||
| 30134 | var params = swiper.params; | |
| 30135 | var touchEvents = swiper.touchEvents; | |
| 30136 | var el = swiper.el; | |
| 30137 | var wrapperEl = swiper.wrapperEl; | |
| 30138 | ||
| 30139 | var target = params.touchEventsTarget === 'container' ? el : wrapperEl; | |
| 30140 | var capture = !!params.nested; | |
| 30141 | ||
| 30142 | // Touch Events | |
| 30143 | { | |
| 30144 | if (!Support.touch && (Support.pointerEvents || Support.prefixedPointerEvents)) { | |
| 30145 | target.removeEventListener(touchEvents.start, swiper.onTouchStart, false); | |
| 30146 | doc.removeEventListener(touchEvents.move, swiper.onTouchMove, capture); | |
| 30147 | doc.removeEventListener(touchEvents.end, swiper.onTouchEnd, false); | |
| 30148 | } else { | |
| 30149 | if (Support.touch) { | |
| 30150 | var passiveListener = touchEvents.start === 'onTouchStart' && Support.passiveListener && params.passiveListeners ? { passive: true, capture: false } : false; | |
| 30151 | target.removeEventListener(touchEvents.start, swiper.onTouchStart, passiveListener); | |
| 30152 | target.removeEventListener(touchEvents.move, swiper.onTouchMove, capture); | |
| 30153 | target.removeEventListener(touchEvents.end, swiper.onTouchEnd, passiveListener); | |
| 30154 | } | |
| 30155 | if ((params.simulateTouch && !Device.ios && !Device.android) || (params.simulateTouch && !Support.touch && Device.ios)) { | |
| 30156 | target.removeEventListener('mousedown', swiper.onTouchStart, false); | |
| 30157 | doc.removeEventListener('mousemove', swiper.onTouchMove, capture); | |
| 30158 | doc.removeEventListener('mouseup', swiper.onTouchEnd, false); | |
| 30159 | } | |
| 30160 | } | |
| 30161 | // Prevent Links Clicks | |
| 30162 | if (params.preventClicks || params.preventClicksPropagation) { | |
| 30163 | target.removeEventListener('click', swiper.onClick, true); | |
| 30164 | } | |
| 30165 | } | |
| 30166 | ||
| 30167 | // Resize handler | |
| 30168 | swiper.off((Device.ios || Device.android ? 'resize orientationchange observerUpdate' : 'resize observerUpdate'), onResize); | |
| 30169 | } | |
| 30170 | ||
| 30171 | var events = { | |
| 30172 | attachEvents: attachEvents, | |
| 30173 | detachEvents: detachEvents, | |
| 30174 | }; | |
| 30175 | ||
| 30176 | function setBreakpoint () { | |
| 30177 | var swiper = this; | |
| 30178 | var activeIndex = swiper.activeIndex; | |
| 30179 | var initialized = swiper.initialized; | |
| 30180 | var loopedSlides = swiper.loopedSlides; if ( loopedSlides === void 0 ) loopedSlides = 0; | |
| 30181 | var params = swiper.params; | |
| 30182 | var breakpoints = params.breakpoints; | |
| 30183 | if (!breakpoints || (breakpoints && Object.keys(breakpoints).length === 0)) { return; } | |
| 30184 | ||
| 30185 | // Set breakpoint for window width and update parameters | |
| 30186 | var breakpoint = swiper.getBreakpoint(breakpoints); | |
| 30187 | ||
| 30188 | if (breakpoint && swiper.currentBreakpoint !== breakpoint) { | |
| 30189 | var breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined; | |
| 30190 | if (breakpointOnlyParams) { | |
| 30191 | ['slidesPerView', 'spaceBetween', 'slidesPerGroup'].forEach(function (param) { | |
| 30192 | var paramValue = breakpointOnlyParams[param]; | |
| 30193 | if (typeof paramValue === 'undefined') { return; } | |
| 30194 | if (param === 'slidesPerView' && (paramValue === 'AUTO' || paramValue === 'auto')) { | |
| 30195 | breakpointOnlyParams[param] = 'auto'; | |
| 30196 | } else if (param === 'slidesPerView') { | |
| 30197 | breakpointOnlyParams[param] = parseFloat(paramValue); | |
| 30198 | } else { | |
| 30199 | breakpointOnlyParams[param] = parseInt(paramValue, 10); | |
| 30200 | } | |
| 30201 | }); | |
| 30202 | } | |
| 30203 | ||
| 30204 | var breakpointParams = breakpointOnlyParams || swiper.originalParams; | |
| 5d51ea26 DC |
30205 | var directionChanged = breakpointParams.direction && breakpointParams.direction !== params.direction; |
| 30206 | var needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged); | |
| 30207 | ||
| 30208 | if (directionChanged && initialized) { | |
| 30209 | swiper.changeDirection(); | |
| 30210 | } | |
| 5309fbda DC |
30211 | |
| 30212 | Utils.extend(swiper.params, breakpointParams); | |
| 30213 | ||
| 30214 | Utils.extend(swiper, { | |
| 30215 | allowTouchMove: swiper.params.allowTouchMove, | |
| 30216 | allowSlideNext: swiper.params.allowSlideNext, | |
| 30217 | allowSlidePrev: swiper.params.allowSlidePrev, | |
| 30218 | }); | |
| 30219 | ||
| 30220 | swiper.currentBreakpoint = breakpoint; | |
| 30221 | ||
| 30222 | if (needsReLoop && initialized) { | |
| 30223 | swiper.loopDestroy(); | |
| 30224 | swiper.loopCreate(); | |
| 30225 | swiper.updateSlides(); | |
| 30226 | swiper.slideTo((activeIndex - loopedSlides) + swiper.loopedSlides, 0, false); | |
| 30227 | } | |
| 5d51ea26 | 30228 | |
| 5309fbda DC |
30229 | swiper.emit('breakpoint', breakpointParams); |
| 30230 | } | |
| 30231 | } | |
| 30232 | ||
| 30233 | function getBreakpoint (breakpoints) { | |
| 30234 | var swiper = this; | |
| 30235 | // Get breakpoint for window width | |
| 30236 | if (!breakpoints) { return undefined; } | |
| 30237 | var breakpoint = false; | |
| 30238 | var points = []; | |
| 30239 | Object.keys(breakpoints).forEach(function (point) { | |
| 30240 | points.push(point); | |
| 30241 | }); | |
| 30242 | points.sort(function (a, b) { return parseInt(a, 10) - parseInt(b, 10); }); | |
| 30243 | for (var i = 0; i < points.length; i += 1) { | |
| 30244 | var point = points[i]; | |
| 30245 | if (swiper.params.breakpointsInverse) { | |
| 30246 | if (point <= win.innerWidth) { | |
| 30247 | breakpoint = point; | |
| 30248 | } | |
| 30249 | } else if (point >= win.innerWidth && !breakpoint) { | |
| 30250 | breakpoint = point; | |
| 30251 | } | |
| 30252 | } | |
| 30253 | return breakpoint || 'max'; | |
| 30254 | } | |
| 30255 | ||
| 30256 | var breakpoints = { setBreakpoint: setBreakpoint, getBreakpoint: getBreakpoint }; | |
| 30257 | ||
| 5309fbda DC |
30258 | function addClasses () { |
| 30259 | var swiper = this; | |
| 30260 | var classNames = swiper.classNames; | |
| 30261 | var params = swiper.params; | |
| 30262 | var rtl = swiper.rtl; | |
| 30263 | var $el = swiper.$el; | |
| 30264 | var suffixes = []; | |
| 30265 | ||
| 5d51ea26 | 30266 | suffixes.push('initialized'); |
| 5309fbda DC |
30267 | suffixes.push(params.direction); |
| 30268 | ||
| 30269 | if (params.freeMode) { | |
| 30270 | suffixes.push('free-mode'); | |
| 30271 | } | |
| 30272 | if (!Support.flexbox) { | |
| 30273 | suffixes.push('no-flexbox'); | |
| 30274 | } | |
| 30275 | if (params.autoHeight) { | |
| 30276 | suffixes.push('autoheight'); | |
| 30277 | } | |
| 30278 | if (rtl) { | |
| 30279 | suffixes.push('rtl'); | |
| 30280 | } | |
| 30281 | if (params.slidesPerColumn > 1) { | |
| 30282 | suffixes.push('multirow'); | |
| 30283 | } | |
| 30284 | if (Device.android) { | |
| 30285 | suffixes.push('android'); | |
| 30286 | } | |
| 30287 | if (Device.ios) { | |
| 30288 | suffixes.push('ios'); | |
| 30289 | } | |
| 30290 | // WP8 Touch Events Fix | |
| 30291 | if ((Browser.isIE || Browser.isEdge) && (Support.pointerEvents || Support.prefixedPointerEvents)) { | |
| 30292 | suffixes.push(("wp8-" + (params.direction))); | |
| 30293 | } | |
| 30294 | ||
| 30295 | suffixes.forEach(function (suffix) { | |
| 30296 | classNames.push(params.containerModifierClass + suffix); | |
| 30297 | }); | |
| 30298 | ||
| 30299 | $el.addClass(classNames.join(' ')); | |
| 30300 | } | |
| 30301 | ||
| 30302 | function removeClasses () { | |
| 30303 | var swiper = this; | |
| 30304 | var $el = swiper.$el; | |
| 30305 | var classNames = swiper.classNames; | |
| 30306 | ||
| 30307 | $el.removeClass(classNames.join(' ')); | |
| 30308 | } | |
| 30309 | ||
| 30310 | var classes = { addClasses: addClasses, removeClasses: removeClasses }; | |
| 30311 | ||
| 30312 | function loadImage (imageEl, src, srcset, sizes, checkForComplete, callback) { | |
| 30313 | var image; | |
| 30314 | function onReady() { | |
| 30315 | if (callback) { callback(); } | |
| 30316 | } | |
| 30317 | if (!imageEl.complete || !checkForComplete) { | |
| 30318 | if (src) { | |
| 30319 | image = new win.Image(); | |
| 30320 | image.onload = onReady; | |
| 30321 | image.onerror = onReady; | |
| 30322 | if (sizes) { | |
| 30323 | image.sizes = sizes; | |
| 30324 | } | |
| 30325 | if (srcset) { | |
| 30326 | image.srcset = srcset; | |
| 30327 | } | |
| 30328 | if (src) { | |
| 30329 | image.src = src; | |
| 30330 | } | |
| 30331 | } else { | |
| 30332 | onReady(); | |
| 30333 | } | |
| 30334 | } else { | |
| 30335 | // image already loaded... | |
| 30336 | onReady(); | |
| 30337 | } | |
| 30338 | } | |
| 30339 | ||
| 30340 | function preloadImages () { | |
| 30341 | var swiper = this; | |
| 30342 | swiper.imagesToLoad = swiper.$el.find('img'); | |
| 30343 | function onReady() { | |
| 30344 | if (typeof swiper === 'undefined' || swiper === null || !swiper || swiper.destroyed) { return; } | |
| 30345 | if (swiper.imagesLoaded !== undefined) { swiper.imagesLoaded += 1; } | |
| 30346 | if (swiper.imagesLoaded === swiper.imagesToLoad.length) { | |
| 30347 | if (swiper.params.updateOnImagesReady) { swiper.update(); } | |
| 30348 | swiper.emit('imagesReady'); | |
| 30349 | } | |
| 30350 | } | |
| 30351 | for (var i = 0; i < swiper.imagesToLoad.length; i += 1) { | |
| 30352 | var imageEl = swiper.imagesToLoad[i]; | |
| 30353 | swiper.loadImage( | |
| 30354 | imageEl, | |
| 30355 | imageEl.currentSrc || imageEl.getAttribute('src'), | |
| 30356 | imageEl.srcset || imageEl.getAttribute('srcset'), | |
| 30357 | imageEl.sizes || imageEl.getAttribute('sizes'), | |
| 30358 | true, | |
| 30359 | onReady | |
| 30360 | ); | |
| 30361 | } | |
| 30362 | } | |
| 30363 | ||
| 30364 | var images = { | |
| 30365 | loadImage: loadImage, | |
| 30366 | preloadImages: preloadImages, | |
| 30367 | }; | |
| 30368 | ||
| 30369 | function checkOverflow() { | |
| 30370 | var swiper = this; | |
| 30371 | var wasLocked = swiper.isLocked; | |
| 30372 | ||
| 30373 | swiper.isLocked = swiper.snapGrid.length === 1; | |
| 30374 | swiper.allowSlideNext = !swiper.isLocked; | |
| 30375 | swiper.allowSlidePrev = !swiper.isLocked; | |
| 30376 | ||
| 30377 | // events | |
| 30378 | if (wasLocked !== swiper.isLocked) { swiper.emit(swiper.isLocked ? 'lock' : 'unlock'); } | |
| 30379 | ||
| 30380 | if (wasLocked && wasLocked !== swiper.isLocked) { | |
| 30381 | swiper.isEnd = false; | |
| 30382 | swiper.navigation.update(); | |
| 30383 | } | |
| 30384 | } | |
| 30385 | ||
| 30386 | var checkOverflow$1 = { checkOverflow: checkOverflow }; | |
| 30387 | ||
| 30388 | var defaults = { | |
| 30389 | init: true, | |
| 30390 | direction: 'horizontal', | |
| 30391 | touchEventsTarget: 'container', | |
| 30392 | initialSlide: 0, | |
| 30393 | speed: 300, | |
| 30394 | // | |
| 30395 | preventInteractionOnTransition: false, | |
| 30396 | ||
| 30397 | // To support iOS's swipe-to-go-back gesture (when being used in-app, with UIWebView). | |
| 30398 | edgeSwipeDetection: false, | |
| 30399 | edgeSwipeThreshold: 20, | |
| 30400 | ||
| 30401 | // Free mode | |
| 30402 | freeMode: false, | |
| 30403 | freeModeMomentum: true, | |
| 30404 | freeModeMomentumRatio: 1, | |
| 30405 | freeModeMomentumBounce: true, | |
| 30406 | freeModeMomentumBounceRatio: 1, | |
| 30407 | freeModeMomentumVelocityRatio: 1, | |
| 30408 | freeModeSticky: false, | |
| 30409 | freeModeMinimumVelocity: 0.02, | |
| 30410 | ||
| 30411 | // Autoheight | |
| 30412 | autoHeight: false, | |
| 30413 | ||
| 30414 | // Set wrapper width | |
| 30415 | setWrapperSize: false, | |
| 30416 | ||
| 30417 | // Virtual Translate | |
| 30418 | virtualTranslate: false, | |
| 30419 | ||
| 30420 | // Effects | |
| 30421 | effect: 'slide', // 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip' | |
| 30422 | ||
| 30423 | // Breakpoints | |
| 30424 | breakpoints: undefined, | |
| 30425 | breakpointsInverse: false, | |
| 30426 | ||
| 30427 | // Slides grid | |
| 30428 | spaceBetween: 0, | |
| 30429 | slidesPerView: 1, | |
| 30430 | slidesPerColumn: 1, | |
| 30431 | slidesPerColumnFill: 'column', | |
| 30432 | slidesPerGroup: 1, | |
| 30433 | centeredSlides: false, | |
| 30434 | slidesOffsetBefore: 0, // in px | |
| 30435 | slidesOffsetAfter: 0, // in px | |
| 30436 | normalizeSlideIndex: true, | |
| 30437 | centerInsufficientSlides: false, | |
| 30438 | ||
| 30439 | // Disable swiper and hide navigation when container not overflow | |
| 30440 | watchOverflow: false, | |
| 30441 | ||
| 30442 | // Round length | |
| 30443 | roundLengths: false, | |
| 30444 | ||
| 30445 | // Touches | |
| 30446 | touchRatio: 1, | |
| 30447 | touchAngle: 45, | |
| 30448 | simulateTouch: true, | |
| 30449 | shortSwipes: true, | |
| 30450 | longSwipes: true, | |
| 30451 | longSwipesRatio: 0.5, | |
| 30452 | longSwipesMs: 300, | |
| 30453 | followFinger: true, | |
| 30454 | allowTouchMove: true, | |
| 30455 | threshold: 0, | |
| 30456 | touchMoveStopPropagation: true, | |
| 30457 | touchStartPreventDefault: true, | |
| 30458 | touchStartForcePreventDefault: false, | |
| 30459 | touchReleaseOnEdges: false, | |
| 30460 | ||
| 30461 | // Unique Navigation Elements | |
| 30462 | uniqueNavElements: true, | |
| 30463 | ||
| 30464 | // Resistance | |
| 30465 | resistance: true, | |
| 30466 | resistanceRatio: 0.85, | |
| 30467 | ||
| 30468 | // Progress | |
| 30469 | watchSlidesProgress: false, | |
| 30470 | watchSlidesVisibility: false, | |
| 30471 | ||
| 30472 | // Cursor | |
| 30473 | grabCursor: false, | |
| 30474 | ||
| 30475 | // Clicks | |
| 30476 | preventClicks: true, | |
| 30477 | preventClicksPropagation: true, | |
| 30478 | slideToClickedSlide: false, | |
| 30479 | ||
| 30480 | // Images | |
| 30481 | preloadImages: true, | |
| 30482 | updateOnImagesReady: true, | |
| 30483 | ||
| 30484 | // loop | |
| 30485 | loop: false, | |
| 30486 | loopAdditionalSlides: 0, | |
| 30487 | loopedSlides: null, | |
| 30488 | loopFillGroupWithBlank: false, | |
| 30489 | ||
| 30490 | // Swiping/no swiping | |
| 30491 | allowSlidePrev: true, | |
| 30492 | allowSlideNext: true, | |
| 30493 | swipeHandler: null, // '.swipe-handler', | |
| 30494 | noSwiping: true, | |
| 30495 | noSwipingClass: 'swiper-no-swiping', | |
| 30496 | noSwipingSelector: null, | |
| 30497 | ||
| 30498 | // Passive Listeners | |
| 30499 | passiveListeners: true, | |
| 30500 | ||
| 30501 | // NS | |
| 30502 | containerModifierClass: 'swiper-container-', // NEW | |
| 30503 | slideClass: 'swiper-slide', | |
| 30504 | slideBlankClass: 'swiper-slide-invisible-blank', | |
| 30505 | slideActiveClass: 'swiper-slide-active', | |
| 30506 | slideDuplicateActiveClass: 'swiper-slide-duplicate-active', | |
| 30507 | slideVisibleClass: 'swiper-slide-visible', | |
| 30508 | slideDuplicateClass: 'swiper-slide-duplicate', | |
| 30509 | slideNextClass: 'swiper-slide-next', | |
| 30510 | slideDuplicateNextClass: 'swiper-slide-duplicate-next', | |
| 30511 | slidePrevClass: 'swiper-slide-prev', | |
| 30512 | slideDuplicatePrevClass: 'swiper-slide-duplicate-prev', | |
| 30513 | wrapperClass: 'swiper-wrapper', | |
| 30514 | ||
| 30515 | // Callbacks | |
| 30516 | runCallbacksOnInit: true, | |
| 30517 | }; | |
| 30518 | ||
| 5d51ea26 DC |
30519 | /* eslint no-param-reassign: "off" */ |
| 30520 | ||
| 5309fbda DC |
30521 | var prototypes = { |
| 30522 | update: update, | |
| 30523 | translate: translate, | |
| 30524 | transition: transition$1, | |
| 30525 | slide: slide, | |
| 30526 | loop: loop, | |
| 30527 | grabCursor: grabCursor, | |
| 30528 | manipulation: manipulation, | |
| 30529 | events: events, | |
| 30530 | breakpoints: breakpoints, | |
| 30531 | checkOverflow: checkOverflow$1, | |
| 30532 | classes: classes, | |
| 30533 | images: images, | |
| 30534 | }; | |
| 30535 | ||
| 30536 | var extendedDefaults = {}; | |
| 30537 | ||
| 30538 | var Swiper = /*@__PURE__*/(function (SwiperClass) { | |
| 30539 | function Swiper() { | |
| 30540 | var assign; | |
| 30541 | ||
| 30542 | var args = [], len = arguments.length; | |
| 30543 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 30544 | var el; | |
| 30545 | var params; | |
| 30546 | if (args.length === 1 && args[0].constructor && args[0].constructor === Object) { | |
| 30547 | params = args[0]; | |
| 30548 | } else { | |
| 30549 | (assign = args, el = assign[0], params = assign[1]); | |
| 30550 | } | |
| 30551 | if (!params) { params = {}; } | |
| 30552 | ||
| 30553 | params = Utils.extend({}, params); | |
| 30554 | if (el && !params.el) { params.el = el; } | |
| 30555 | ||
| 30556 | SwiperClass.call(this, params); | |
| 30557 | ||
| 30558 | Object.keys(prototypes).forEach(function (prototypeGroup) { | |
| 30559 | Object.keys(prototypes[prototypeGroup]).forEach(function (protoMethod) { | |
| 30560 | if (!Swiper.prototype[protoMethod]) { | |
| 30561 | Swiper.prototype[protoMethod] = prototypes[prototypeGroup][protoMethod]; | |
| 30562 | } | |
| 30563 | }); | |
| 30564 | }); | |
| 30565 | ||
| 30566 | // Swiper Instance | |
| 30567 | var swiper = this; | |
| 30568 | if (typeof swiper.modules === 'undefined') { | |
| 30569 | swiper.modules = {}; | |
| 30570 | } | |
| 30571 | Object.keys(swiper.modules).forEach(function (moduleName) { | |
| 30572 | var module = swiper.modules[moduleName]; | |
| 30573 | if (module.params) { | |
| 30574 | var moduleParamName = Object.keys(module.params)[0]; | |
| 30575 | var moduleParams = module.params[moduleParamName]; | |
| 30576 | if (typeof moduleParams !== 'object' || moduleParams === null) { return; } | |
| 30577 | if (!(moduleParamName in params && 'enabled' in moduleParams)) { return; } | |
| 30578 | if (params[moduleParamName] === true) { | |
| 30579 | params[moduleParamName] = { enabled: true }; | |
| 30580 | } | |
| 30581 | if ( | |
| 30582 | typeof params[moduleParamName] === 'object' | |
| 30583 | && !('enabled' in params[moduleParamName]) | |
| 30584 | ) { | |
| 30585 | params[moduleParamName].enabled = true; | |
| 30586 | } | |
| 30587 | if (!params[moduleParamName]) { params[moduleParamName] = { enabled: false }; } | |
| 30588 | } | |
| 30589 | }); | |
| 30590 | ||
| 30591 | // Extend defaults with modules params | |
| 30592 | var swiperParams = Utils.extend({}, defaults); | |
| 30593 | swiper.useModulesParams(swiperParams); | |
| 30594 | ||
| 30595 | // Extend defaults with passed params | |
| 30596 | swiper.params = Utils.extend({}, swiperParams, extendedDefaults, params); | |
| 30597 | swiper.originalParams = Utils.extend({}, swiper.params); | |
| 30598 | swiper.passedParams = Utils.extend({}, params); | |
| 30599 | ||
| 30600 | // Save Dom lib | |
| 30601 | swiper.$ = $; | |
| 30602 | ||
| 30603 | // Find el | |
| 30604 | var $el = $(swiper.params.el); | |
| 30605 | el = $el[0]; | |
| 30606 | ||
| 30607 | if (!el) { | |
| 30608 | return undefined; | |
| 30609 | } | |
| 30610 | ||
| 30611 | if ($el.length > 1) { | |
| 30612 | var swipers = []; | |
| 30613 | $el.each(function (index, containerEl) { | |
| 30614 | var newParams = Utils.extend({}, params, { el: containerEl }); | |
| 30615 | swipers.push(new Swiper(newParams)); | |
| 30616 | }); | |
| 30617 | return swipers; | |
| 30618 | } | |
| 30619 | ||
| 30620 | el.swiper = swiper; | |
| 30621 | $el.data('swiper', swiper); | |
| 30622 | ||
| 30623 | // Find Wrapper | |
| 30624 | var $wrapperEl = $el.children(("." + (swiper.params.wrapperClass))); | |
| 30625 | ||
| 30626 | // Extend Swiper | |
| 30627 | Utils.extend(swiper, { | |
| 30628 | $el: $el, | |
| 30629 | el: el, | |
| 30630 | $wrapperEl: $wrapperEl, | |
| 30631 | wrapperEl: $wrapperEl[0], | |
| 30632 | ||
| 30633 | // Classes | |
| 30634 | classNames: [], | |
| 30635 | ||
| 30636 | // Slides | |
| 30637 | slides: $(), | |
| 30638 | slidesGrid: [], | |
| 30639 | snapGrid: [], | |
| 30640 | slidesSizesGrid: [], | |
| 30641 | ||
| 30642 | // isDirection | |
| 30643 | isHorizontal: function isHorizontal() { | |
| 30644 | return swiper.params.direction === 'horizontal'; | |
| 30645 | }, | |
| 30646 | isVertical: function isVertical() { | |
| 30647 | return swiper.params.direction === 'vertical'; | |
| 30648 | }, | |
| 30649 | // RTL | |
| 30650 | rtl: (el.dir.toLowerCase() === 'rtl' || $el.css('direction') === 'rtl'), | |
| 30651 | rtlTranslate: swiper.params.direction === 'horizontal' && (el.dir.toLowerCase() === 'rtl' || $el.css('direction') === 'rtl'), | |
| 30652 | wrongRTL: $wrapperEl.css('display') === '-webkit-box', | |
| 30653 | ||
| 30654 | // Indexes | |
| 30655 | activeIndex: 0, | |
| 30656 | realIndex: 0, | |
| 30657 | ||
| 30658 | // | |
| 30659 | isBeginning: true, | |
| 30660 | isEnd: false, | |
| 30661 | ||
| 30662 | // Props | |
| 30663 | translate: 0, | |
| 30664 | previousTranslate: 0, | |
| 30665 | progress: 0, | |
| 30666 | velocity: 0, | |
| 30667 | animating: false, | |
| 30668 | ||
| 30669 | // Locks | |
| 30670 | allowSlideNext: swiper.params.allowSlideNext, | |
| 30671 | allowSlidePrev: swiper.params.allowSlidePrev, | |
| 30672 | ||
| 30673 | // Touch Events | |
| 30674 | touchEvents: (function touchEvents() { | |
| 30675 | var touch = ['touchstart', 'touchmove', 'touchend']; | |
| 30676 | var desktop = ['mousedown', 'mousemove', 'mouseup']; | |
| 30677 | if (Support.pointerEvents) { | |
| 30678 | desktop = ['pointerdown', 'pointermove', 'pointerup']; | |
| 30679 | } else if (Support.prefixedPointerEvents) { | |
| 30680 | desktop = ['MSPointerDown', 'MSPointerMove', 'MSPointerUp']; | |
| 30681 | } | |
| 30682 | swiper.touchEventsTouch = { | |
| 30683 | start: touch[0], | |
| 30684 | move: touch[1], | |
| 30685 | end: touch[2], | |
| 30686 | }; | |
| 30687 | swiper.touchEventsDesktop = { | |
| 30688 | start: desktop[0], | |
| 30689 | move: desktop[1], | |
| 30690 | end: desktop[2], | |
| 30691 | }; | |
| 30692 | return Support.touch || !swiper.params.simulateTouch ? swiper.touchEventsTouch : swiper.touchEventsDesktop; | |
| 30693 | }()), | |
| 30694 | touchEventsData: { | |
| 30695 | isTouched: undefined, | |
| 30696 | isMoved: undefined, | |
| 30697 | allowTouchCallbacks: undefined, | |
| 30698 | touchStartTime: undefined, | |
| 30699 | isScrolling: undefined, | |
| 30700 | currentTranslate: undefined, | |
| 30701 | startTranslate: undefined, | |
| 30702 | allowThresholdMove: undefined, | |
| 30703 | // Form elements to match | |
| 30704 | formElements: 'input, select, option, textarea, button, video', | |
| 30705 | // Last click time | |
| 30706 | lastClickTime: Utils.now(), | |
| 30707 | clickTimeout: undefined, | |
| 30708 | // Velocities | |
| 30709 | velocities: [], | |
| 30710 | allowMomentumBounce: undefined, | |
| 30711 | isTouchEvent: undefined, | |
| 30712 | startMoving: undefined, | |
| 30713 | }, | |
| 30714 | ||
| 30715 | // Clicks | |
| 30716 | allowClick: true, | |
| 30717 | ||
| 30718 | // Touches | |
| 30719 | allowTouchMove: swiper.params.allowTouchMove, | |
| 30720 | ||
| 30721 | touches: { | |
| 30722 | startX: 0, | |
| 30723 | startY: 0, | |
| 30724 | currentX: 0, | |
| 30725 | currentY: 0, | |
| 30726 | diff: 0, | |
| 30727 | }, | |
| 30728 | ||
| 30729 | // Images | |
| 30730 | imagesToLoad: [], | |
| 30731 | imagesLoaded: 0, | |
| 30732 | ||
| 30733 | }); | |
| 30734 | ||
| 30735 | // Install Modules | |
| 30736 | swiper.useModules(); | |
| 30737 | ||
| 30738 | // Init | |
| 30739 | if (swiper.params.init) { | |
| 30740 | swiper.init(); | |
| 30741 | } | |
| 30742 | ||
| 30743 | // Return app instance | |
| 30744 | return swiper; | |
| 30745 | } | |
| 30746 | ||
| 30747 | if ( SwiperClass ) Swiper.__proto__ = SwiperClass; | |
| 30748 | Swiper.prototype = Object.create( SwiperClass && SwiperClass.prototype ); | |
| 30749 | Swiper.prototype.constructor = Swiper; | |
| 30750 | ||
| 30751 | var staticAccessors = { extendedDefaults: { configurable: true },defaults: { configurable: true },Class: { configurable: true },$: { configurable: true } }; | |
| 30752 | ||
| 30753 | Swiper.prototype.slidesPerViewDynamic = function slidesPerViewDynamic () { | |
| 30754 | var swiper = this; | |
| 30755 | var params = swiper.params; | |
| 30756 | var slides = swiper.slides; | |
| 30757 | var slidesGrid = swiper.slidesGrid; | |
| 30758 | var swiperSize = swiper.size; | |
| 30759 | var activeIndex = swiper.activeIndex; | |
| 30760 | var spv = 1; | |
| 30761 | if (params.centeredSlides) { | |
| 30762 | var slideSize = slides[activeIndex].swiperSlideSize; | |
| 30763 | var breakLoop; | |
| 30764 | for (var i = activeIndex + 1; i < slides.length; i += 1) { | |
| 30765 | if (slides[i] && !breakLoop) { | |
| 30766 | slideSize += slides[i].swiperSlideSize; | |
| 30767 | spv += 1; | |
| 30768 | if (slideSize > swiperSize) { breakLoop = true; } | |
| 30769 | } | |
| 30770 | } | |
| 30771 | for (var i$1 = activeIndex - 1; i$1 >= 0; i$1 -= 1) { | |
| 30772 | if (slides[i$1] && !breakLoop) { | |
| 30773 | slideSize += slides[i$1].swiperSlideSize; | |
| 30774 | spv += 1; | |
| 30775 | if (slideSize > swiperSize) { breakLoop = true; } | |
| 30776 | } | |
| 30777 | } | |
| 30778 | } else { | |
| 30779 | for (var i$2 = activeIndex + 1; i$2 < slides.length; i$2 += 1) { | |
| 30780 | if (slidesGrid[i$2] - slidesGrid[activeIndex] < swiperSize) { | |
| 30781 | spv += 1; | |
| 30782 | } | |
| 30783 | } | |
| 30784 | } | |
| 30785 | return spv; | |
| 30786 | }; | |
| 30787 | ||
| 5d51ea26 | 30788 | Swiper.prototype.update = function update () { |
| 5309fbda DC |
30789 | var swiper = this; |
| 30790 | if (!swiper || swiper.destroyed) { return; } | |
| 30791 | var snapGrid = swiper.snapGrid; | |
| 30792 | var params = swiper.params; | |
| 30793 | // Breakpoints | |
| 30794 | if (params.breakpoints) { | |
| 30795 | swiper.setBreakpoint(); | |
| 30796 | } | |
| 30797 | swiper.updateSize(); | |
| 30798 | swiper.updateSlides(); | |
| 30799 | swiper.updateProgress(); | |
| 30800 | swiper.updateSlidesClasses(); | |
| 30801 | ||
| 30802 | function setTranslate() { | |
| 30803 | var translateValue = swiper.rtlTranslate ? swiper.translate * -1 : swiper.translate; | |
| 30804 | var newTranslate = Math.min(Math.max(translateValue, swiper.maxTranslate()), swiper.minTranslate()); | |
| 30805 | swiper.setTranslate(newTranslate); | |
| 30806 | swiper.updateActiveIndex(); | |
| 30807 | swiper.updateSlidesClasses(); | |
| 30808 | } | |
| 30809 | var translated; | |
| 30810 | if (swiper.params.freeMode) { | |
| 30811 | setTranslate(); | |
| 30812 | if (swiper.params.autoHeight) { | |
| 30813 | swiper.updateAutoHeight(); | |
| 30814 | } | |
| 30815 | } else { | |
| 30816 | if ((swiper.params.slidesPerView === 'auto' || swiper.params.slidesPerView > 1) && swiper.isEnd && !swiper.params.centeredSlides) { | |
| 30817 | translated = swiper.slideTo(swiper.slides.length - 1, 0, false, true); | |
| 30818 | } else { | |
| 30819 | translated = swiper.slideTo(swiper.activeIndex, 0, false, true); | |
| 30820 | } | |
| 30821 | if (!translated) { | |
| 30822 | setTranslate(); | |
| 30823 | } | |
| 30824 | } | |
| 30825 | if (params.watchOverflow && snapGrid !== swiper.snapGrid) { | |
| 30826 | swiper.checkOverflow(); | |
| 30827 | } | |
| 30828 | swiper.emit('update'); | |
| 30829 | }; | |
| 30830 | ||
| 5d51ea26 DC |
30831 | Swiper.prototype.changeDirection = function changeDirection (newDirection, needUpdate) { |
| 30832 | if ( needUpdate === void 0 ) needUpdate = true; | |
| 30833 | ||
| 30834 | var swiper = this; | |
| 30835 | var currentDirection = swiper.params.direction; | |
| 30836 | if (!newDirection) { | |
| 30837 | // eslint-disable-next-line | |
| 30838 | newDirection = currentDirection === 'horizontal' ? 'vertical' : 'horizontal'; | |
| 30839 | } | |
| 30840 | if ((newDirection === currentDirection) || (newDirection !== 'horizontal' && newDirection !== 'vertical')) { | |
| 30841 | return swiper; | |
| 30842 | } | |
| 30843 | ||
| 30844 | if (currentDirection === 'vertical') { | |
| 30845 | swiper.$el | |
| 30846 | .removeClass(((swiper.params.containerModifierClass) + "vertical wp8-vertical")) | |
| 30847 | .addClass(("" + (swiper.params.containerModifierClass) + newDirection)); | |
| 30848 | ||
| 30849 | if ((Browser.isIE || Browser.isEdge) && (Support.pointerEvents || Support.prefixedPointerEvents)) { | |
| 30850 | swiper.$el.addClass(((swiper.params.containerModifierClass) + "wp8-" + newDirection)); | |
| 30851 | } | |
| 30852 | } | |
| 30853 | if (currentDirection === 'horizontal') { | |
| 30854 | swiper.$el | |
| 30855 | .removeClass(((swiper.params.containerModifierClass) + "horizontal wp8-horizontal")) | |
| 30856 | .addClass(("" + (swiper.params.containerModifierClass) + newDirection)); | |
| 30857 | ||
| 30858 | if ((Browser.isIE || Browser.isEdge) && (Support.pointerEvents || Support.prefixedPointerEvents)) { | |
| 30859 | swiper.$el.addClass(((swiper.params.containerModifierClass) + "wp8-" + newDirection)); | |
| 30860 | } | |
| 30861 | } | |
| 30862 | ||
| 30863 | swiper.params.direction = newDirection; | |
| 30864 | ||
| 30865 | swiper.slides.each(function (slideIndex, slideEl) { | |
| 30866 | if (newDirection === 'vertical') { | |
| 30867 | slideEl.style.width = ''; | |
| 30868 | } else { | |
| 30869 | slideEl.style.height = ''; | |
| 30870 | } | |
| 30871 | }); | |
| 30872 | ||
| 30873 | swiper.emit('changeDirection'); | |
| 30874 | if (needUpdate) { swiper.update(); } | |
| 30875 | ||
| 30876 | return swiper; | |
| 30877 | }; | |
| 30878 | ||
| 5309fbda DC |
30879 | Swiper.prototype.init = function init () { |
| 30880 | var swiper = this; | |
| 30881 | if (swiper.initialized) { return; } | |
| 30882 | ||
| 30883 | swiper.emit('beforeInit'); | |
| 30884 | ||
| 30885 | // Set breakpoint | |
| 30886 | if (swiper.params.breakpoints) { | |
| 30887 | swiper.setBreakpoint(); | |
| 30888 | } | |
| 30889 | ||
| 30890 | // Add Classes | |
| 30891 | swiper.addClasses(); | |
| 30892 | ||
| 30893 | // Create loop | |
| 30894 | if (swiper.params.loop) { | |
| 30895 | swiper.loopCreate(); | |
| 30896 | } | |
| 30897 | ||
| 30898 | // Update size | |
| 30899 | swiper.updateSize(); | |
| 30900 | ||
| 30901 | // Update slides | |
| 30902 | swiper.updateSlides(); | |
| 30903 | ||
| 30904 | if (swiper.params.watchOverflow) { | |
| 30905 | swiper.checkOverflow(); | |
| 30906 | } | |
| 30907 | ||
| 30908 | // Set Grab Cursor | |
| 30909 | if (swiper.params.grabCursor) { | |
| 30910 | swiper.setGrabCursor(); | |
| 30911 | } | |
| 30912 | ||
| 30913 | if (swiper.params.preloadImages) { | |
| 30914 | swiper.preloadImages(); | |
| 30915 | } | |
| 30916 | ||
| 30917 | // Slide To Initial Slide | |
| 30918 | if (swiper.params.loop) { | |
| 30919 | swiper.slideTo(swiper.params.initialSlide + swiper.loopedSlides, 0, swiper.params.runCallbacksOnInit); | |
| 30920 | } else { | |
| 30921 | swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit); | |
| 30922 | } | |
| 30923 | ||
| 30924 | // Attach events | |
| 30925 | swiper.attachEvents(); | |
| 30926 | ||
| 30927 | // Init Flag | |
| 30928 | swiper.initialized = true; | |
| 30929 | ||
| 30930 | // Emit | |
| 30931 | swiper.emit('init'); | |
| 30932 | }; | |
| 30933 | ||
| 30934 | Swiper.prototype.destroy = function destroy (deleteInstance, cleanStyles) { | |
| 30935 | if ( deleteInstance === void 0 ) deleteInstance = true; | |
| 30936 | if ( cleanStyles === void 0 ) cleanStyles = true; | |
| 30937 | ||
| 30938 | var swiper = this; | |
| 30939 | var params = swiper.params; | |
| 30940 | var $el = swiper.$el; | |
| 30941 | var $wrapperEl = swiper.$wrapperEl; | |
| 30942 | var slides = swiper.slides; | |
| 30943 | ||
| 30944 | if (typeof swiper.params === 'undefined' || swiper.destroyed) { | |
| 30945 | return null; | |
| 30946 | } | |
| 30947 | ||
| 30948 | swiper.emit('beforeDestroy'); | |
| 30949 | ||
| 30950 | // Init Flag | |
| 30951 | swiper.initialized = false; | |
| 30952 | ||
| 30953 | // Detach events | |
| 30954 | swiper.detachEvents(); | |
| 30955 | ||
| 30956 | // Destroy loop | |
| 30957 | if (params.loop) { | |
| 30958 | swiper.loopDestroy(); | |
| 30959 | } | |
| 30960 | ||
| 30961 | // Cleanup styles | |
| 30962 | if (cleanStyles) { | |
| 30963 | swiper.removeClasses(); | |
| 30964 | $el.removeAttr('style'); | |
| 30965 | $wrapperEl.removeAttr('style'); | |
| 30966 | if (slides && slides.length) { | |
| 30967 | slides | |
| 30968 | .removeClass([ | |
| 30969 | params.slideVisibleClass, | |
| 30970 | params.slideActiveClass, | |
| 30971 | params.slideNextClass, | |
| 30972 | params.slidePrevClass ].join(' ')) | |
| 30973 | .removeAttr('style') | |
| 30974 | .removeAttr('data-swiper-slide-index') | |
| 30975 | .removeAttr('data-swiper-column') | |
| 30976 | .removeAttr('data-swiper-row'); | |
| 30977 | } | |
| 30978 | } | |
| 30979 | ||
| 30980 | swiper.emit('destroy'); | |
| 30981 | ||
| 30982 | // Detach emitter events | |
| 30983 | Object.keys(swiper.eventsListeners).forEach(function (eventName) { | |
| 30984 | swiper.off(eventName); | |
| 30985 | }); | |
| 30986 | ||
| 30987 | if (deleteInstance !== false) { | |
| 30988 | swiper.$el[0].swiper = null; | |
| 30989 | swiper.$el.data('swiper', null); | |
| 30990 | Utils.deleteProps(swiper); | |
| 30991 | } | |
| 30992 | swiper.destroyed = true; | |
| 30993 | ||
| 30994 | return null; | |
| 30995 | }; | |
| 30996 | ||
| 30997 | Swiper.extendDefaults = function extendDefaults (newDefaults) { | |
| 30998 | Utils.extend(extendedDefaults, newDefaults); | |
| 30999 | }; | |
| 31000 | ||
| 31001 | staticAccessors.extendedDefaults.get = function () { | |
| 31002 | return extendedDefaults; | |
| 31003 | }; | |
| 31004 | ||
| 31005 | staticAccessors.defaults.get = function () { | |
| 31006 | return defaults; | |
| 31007 | }; | |
| 31008 | ||
| 31009 | staticAccessors.Class.get = function () { | |
| 31010 | return SwiperClass; | |
| 31011 | }; | |
| 31012 | ||
| 31013 | staticAccessors.$.get = function () { | |
| 31014 | return $; | |
| 31015 | }; | |
| 31016 | ||
| 31017 | Object.defineProperties( Swiper, staticAccessors ); | |
| 31018 | ||
| 31019 | return Swiper; | |
| 31020 | }(Framework7Class)); | |
| 31021 | ||
| 31022 | var Device$1 = { | |
| 31023 | name: 'device', | |
| 31024 | proto: { | |
| 31025 | device: Device, | |
| 31026 | }, | |
| 31027 | static: { | |
| 31028 | device: Device, | |
| 31029 | }, | |
| 31030 | }; | |
| 31031 | ||
| 31032 | var Support$1 = { | |
| 31033 | name: 'support', | |
| 31034 | proto: { | |
| 31035 | support: Support, | |
| 31036 | }, | |
| 31037 | static: { | |
| 31038 | support: Support, | |
| 31039 | }, | |
| 31040 | }; | |
| 31041 | ||
| 31042 | var Browser$1 = { | |
| 31043 | name: 'browser', | |
| 31044 | proto: { | |
| 31045 | browser: Browser, | |
| 31046 | }, | |
| 31047 | static: { | |
| 31048 | browser: Browser, | |
| 31049 | }, | |
| 31050 | }; | |
| 31051 | ||
| 31052 | var Resize = { | |
| 31053 | name: 'resize', | |
| 31054 | create: function create() { | |
| 31055 | var swiper = this; | |
| 31056 | Utils.extend(swiper, { | |
| 31057 | resize: { | |
| 31058 | resizeHandler: function resizeHandler() { | |
| 31059 | if (!swiper || swiper.destroyed || !swiper.initialized) { return; } | |
| 31060 | swiper.emit('beforeResize'); | |
| 31061 | swiper.emit('resize'); | |
| 31062 | }, | |
| 31063 | orientationChangeHandler: function orientationChangeHandler() { | |
| 31064 | if (!swiper || swiper.destroyed || !swiper.initialized) { return; } | |
| 31065 | swiper.emit('orientationchange'); | |
| 31066 | }, | |
| 31067 | }, | |
| 31068 | }); | |
| 31069 | }, | |
| 31070 | on: { | |
| 31071 | init: function init() { | |
| 31072 | var swiper = this; | |
| 31073 | // Emit resize | |
| 31074 | win.addEventListener('resize', swiper.resize.resizeHandler); | |
| 31075 | ||
| 31076 | // Emit orientationchange | |
| 31077 | win.addEventListener('orientationchange', swiper.resize.orientationChangeHandler); | |
| 31078 | }, | |
| 31079 | destroy: function destroy() { | |
| 31080 | var swiper = this; | |
| 31081 | win.removeEventListener('resize', swiper.resize.resizeHandler); | |
| 31082 | win.removeEventListener('orientationchange', swiper.resize.orientationChangeHandler); | |
| 31083 | }, | |
| 31084 | }, | |
| 31085 | }; | |
| 31086 | ||
| 31087 | var Observer = { | |
| 31088 | func: win.MutationObserver || win.WebkitMutationObserver, | |
| 31089 | attach: function attach(target, options) { | |
| 31090 | if ( options === void 0 ) options = {}; | |
| 31091 | ||
| 31092 | var swiper = this; | |
| 31093 | ||
| 31094 | var ObserverFunc = Observer.func; | |
| 31095 | var observer = new ObserverFunc(function (mutations) { | |
| 31096 | // The observerUpdate event should only be triggered | |
| 31097 | // once despite the number of mutations. Additional | |
| 31098 | // triggers are redundant and are very costly | |
| 31099 | if (mutations.length === 1) { | |
| 31100 | swiper.emit('observerUpdate', mutations[0]); | |
| 31101 | return; | |
| 31102 | } | |
| 31103 | var observerUpdate = function observerUpdate() { | |
| 31104 | swiper.emit('observerUpdate', mutations[0]); | |
| 31105 | }; | |
| 31106 | ||
| 31107 | if (win.requestAnimationFrame) { | |
| 31108 | win.requestAnimationFrame(observerUpdate); | |
| 31109 | } else { | |
| 31110 | win.setTimeout(observerUpdate, 0); | |
| 31111 | } | |
| 31112 | }); | |
| 31113 | ||
| 31114 | observer.observe(target, { | |
| 31115 | attributes: typeof options.attributes === 'undefined' ? true : options.attributes, | |
| 31116 | childList: typeof options.childList === 'undefined' ? true : options.childList, | |
| 31117 | characterData: typeof options.characterData === 'undefined' ? true : options.characterData, | |
| 31118 | }); | |
| 31119 | ||
| 31120 | swiper.observer.observers.push(observer); | |
| 31121 | }, | |
| 31122 | init: function init() { | |
| 31123 | var swiper = this; | |
| 31124 | if (!Support.observer || !swiper.params.observer) { return; } | |
| 31125 | if (swiper.params.observeParents) { | |
| 31126 | var containerParents = swiper.$el.parents(); | |
| 31127 | for (var i = 0; i < containerParents.length; i += 1) { | |
| 31128 | swiper.observer.attach(containerParents[i]); | |
| 31129 | } | |
| 31130 | } | |
| 31131 | // Observe container | |
| 31132 | swiper.observer.attach(swiper.$el[0], { childList: swiper.params.observeSlideChildren }); | |
| 31133 | ||
| 31134 | // Observe wrapper | |
| 31135 | swiper.observer.attach(swiper.$wrapperEl[0], { attributes: false }); | |
| 31136 | }, | |
| 31137 | destroy: function destroy() { | |
| 31138 | var swiper = this; | |
| 31139 | swiper.observer.observers.forEach(function (observer) { | |
| 31140 | observer.disconnect(); | |
| 31141 | }); | |
| 31142 | swiper.observer.observers = []; | |
| 31143 | }, | |
| 31144 | }; | |
| 31145 | ||
| 31146 | var Observer$1 = { | |
| 31147 | name: 'observer', | |
| 31148 | params: { | |
| 31149 | observer: false, | |
| 31150 | observeParents: false, | |
| 31151 | observeSlideChildren: false, | |
| 31152 | }, | |
| 31153 | create: function create() { | |
| 31154 | var swiper = this; | |
| 31155 | Utils.extend(swiper, { | |
| 31156 | observer: { | |
| 31157 | init: Observer.init.bind(swiper), | |
| 31158 | attach: Observer.attach.bind(swiper), | |
| 31159 | destroy: Observer.destroy.bind(swiper), | |
| 31160 | observers: [], | |
| 31161 | }, | |
| 31162 | }); | |
| 31163 | }, | |
| 31164 | on: { | |
| 31165 | init: function init() { | |
| 31166 | var swiper = this; | |
| 31167 | swiper.observer.init(); | |
| 31168 | }, | |
| 31169 | destroy: function destroy() { | |
| 31170 | var swiper = this; | |
| 31171 | swiper.observer.destroy(); | |
| 31172 | }, | |
| 31173 | }, | |
| 31174 | }; | |
| 31175 | ||
| 31176 | var Virtual = { | |
| 31177 | update: function update(force) { | |
| 31178 | var swiper = this; | |
| 31179 | var ref = swiper.params; | |
| 31180 | var slidesPerView = ref.slidesPerView; | |
| 31181 | var slidesPerGroup = ref.slidesPerGroup; | |
| 31182 | var centeredSlides = ref.centeredSlides; | |
| 31183 | var ref$1 = swiper.params.virtual; | |
| 31184 | var addSlidesBefore = ref$1.addSlidesBefore; | |
| 31185 | var addSlidesAfter = ref$1.addSlidesAfter; | |
| 31186 | var ref$2 = swiper.virtual; | |
| 31187 | var previousFrom = ref$2.from; | |
| 31188 | var previousTo = ref$2.to; | |
| 31189 | var slides = ref$2.slides; | |
| 31190 | var previousSlidesGrid = ref$2.slidesGrid; | |
| 31191 | var renderSlide = ref$2.renderSlide; | |
| 31192 | var previousOffset = ref$2.offset; | |
| 31193 | swiper.updateActiveIndex(); | |
| 31194 | var activeIndex = swiper.activeIndex || 0; | |
| 31195 | ||
| 31196 | var offsetProp; | |
| 31197 | if (swiper.rtlTranslate) { offsetProp = 'right'; } | |
| 31198 | else { offsetProp = swiper.isHorizontal() ? 'left' : 'top'; } | |
| 31199 | ||
| 31200 | var slidesAfter; | |
| 31201 | var slidesBefore; | |
| 31202 | if (centeredSlides) { | |
| 31203 | slidesAfter = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesBefore; | |
| 31204 | slidesBefore = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesAfter; | |
| 31205 | } else { | |
| 31206 | slidesAfter = slidesPerView + (slidesPerGroup - 1) + addSlidesBefore; | |
| 31207 | slidesBefore = slidesPerGroup + addSlidesAfter; | |
| 31208 | } | |
| 31209 | var from = Math.max((activeIndex || 0) - slidesBefore, 0); | |
| 31210 | var to = Math.min((activeIndex || 0) + slidesAfter, slides.length - 1); | |
| 31211 | var offset = (swiper.slidesGrid[from] || 0) - (swiper.slidesGrid[0] || 0); | |
| 31212 | ||
| 31213 | Utils.extend(swiper.virtual, { | |
| 31214 | from: from, | |
| 31215 | to: to, | |
| 31216 | offset: offset, | |
| 31217 | slidesGrid: swiper.slidesGrid, | |
| 31218 | }); | |
| 31219 | ||
| 31220 | function onRendered() { | |
| 31221 | swiper.updateSlides(); | |
| 31222 | swiper.updateProgress(); | |
| 31223 | swiper.updateSlidesClasses(); | |
| 31224 | if (swiper.lazy && swiper.params.lazy.enabled) { | |
| 31225 | swiper.lazy.load(); | |
| 31226 | } | |
| 31227 | } | |
| 31228 | ||
| 31229 | if (previousFrom === from && previousTo === to && !force) { | |
| 31230 | if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) { | |
| 31231 | swiper.slides.css(offsetProp, (offset + "px")); | |
| 31232 | } | |
| 31233 | swiper.updateProgress(); | |
| 31234 | return; | |
| 31235 | } | |
| 31236 | if (swiper.params.virtual.renderExternal) { | |
| 31237 | swiper.params.virtual.renderExternal.call(swiper, { | |
| 31238 | offset: offset, | |
| 31239 | from: from, | |
| 31240 | to: to, | |
| 31241 | slides: (function getSlides() { | |
| 31242 | var slidesToRender = []; | |
| 31243 | for (var i = from; i <= to; i += 1) { | |
| 31244 | slidesToRender.push(slides[i]); | |
| 31245 | } | |
| 31246 | return slidesToRender; | |
| 31247 | }()), | |
| 31248 | }); | |
| 31249 | onRendered(); | |
| 31250 | return; | |
| 31251 | } | |
| 31252 | var prependIndexes = []; | |
| 31253 | var appendIndexes = []; | |
| 31254 | if (force) { | |
| 31255 | swiper.$wrapperEl.find(("." + (swiper.params.slideClass))).remove(); | |
| 31256 | } else { | |
| 31257 | for (var i = previousFrom; i <= previousTo; i += 1) { | |
| 31258 | if (i < from || i > to) { | |
| 31259 | swiper.$wrapperEl.find(("." + (swiper.params.slideClass) + "[data-swiper-slide-index=\"" + i + "\"]")).remove(); | |
| 31260 | } | |
| 31261 | } | |
| 31262 | } | |
| 31263 | for (var i$1 = 0; i$1 < slides.length; i$1 += 1) { | |
| 31264 | if (i$1 >= from && i$1 <= to) { | |
| 31265 | if (typeof previousTo === 'undefined' || force) { | |
| 31266 | appendIndexes.push(i$1); | |
| 31267 | } else { | |
| 31268 | if (i$1 > previousTo) { appendIndexes.push(i$1); } | |
| 31269 | if (i$1 < previousFrom) { prependIndexes.push(i$1); } | |
| 31270 | } | |
| 31271 | } | |
| 31272 | } | |
| 31273 | appendIndexes.forEach(function (index) { | |
| 31274 | swiper.$wrapperEl.append(renderSlide(slides[index], index)); | |
| 31275 | }); | |
| 31276 | prependIndexes.sort(function (a, b) { return b - a; }).forEach(function (index) { | |
| 31277 | swiper.$wrapperEl.prepend(renderSlide(slides[index], index)); | |
| 31278 | }); | |
| 31279 | swiper.$wrapperEl.children('.swiper-slide').css(offsetProp, (offset + "px")); | |
| 31280 | onRendered(); | |
| 31281 | }, | |
| 31282 | renderSlide: function renderSlide(slide, index) { | |
| 31283 | var swiper = this; | |
| 31284 | var params = swiper.params.virtual; | |
| 31285 | if (params.cache && swiper.virtual.cache[index]) { | |
| 31286 | return swiper.virtual.cache[index]; | |
| 31287 | } | |
| 31288 | var $slideEl = params.renderSlide | |
| 31289 | ? $(params.renderSlide.call(swiper, slide, index)) | |
| 31290 | : $(("<div class=\"" + (swiper.params.slideClass) + "\" data-swiper-slide-index=\"" + index + "\">" + slide + "</div>")); | |
| 31291 | if (!$slideEl.attr('data-swiper-slide-index')) { $slideEl.attr('data-swiper-slide-index', index); } | |
| 31292 | if (params.cache) { swiper.virtual.cache[index] = $slideEl; } | |
| 31293 | return $slideEl; | |
| 31294 | }, | |
| 5d51ea26 | 31295 | appendSlide: function appendSlide(slides) { |
| 5309fbda | 31296 | var swiper = this; |
| 5d51ea26 DC |
31297 | if (typeof slides === 'object' && 'length' in slides) { |
| 31298 | for (var i = 0; i < slides.length; i += 1) { | |
| 31299 | if (slides[i]) { swiper.virtual.slides.push(slides[i]); } | |
| 31300 | } | |
| 31301 | } else { | |
| 31302 | swiper.virtual.slides.push(slides); | |
| 31303 | } | |
| 5309fbda DC |
31304 | swiper.virtual.update(true); |
| 31305 | }, | |
| 5d51ea26 | 31306 | prependSlide: function prependSlide(slides) { |
| 5309fbda | 31307 | var swiper = this; |
| 5d51ea26 DC |
31308 | var activeIndex = swiper.activeIndex; |
| 31309 | var newActiveIndex = activeIndex + 1; | |
| 31310 | var numberOfNewSlides = 1; | |
| 31311 | ||
| 31312 | if (Array.isArray(slides)) { | |
| 31313 | for (var i = 0; i < slides.length; i += 1) { | |
| 31314 | if (slides[i]) { swiper.virtual.slides.unshift(slides[i]); } | |
| 31315 | } | |
| 31316 | newActiveIndex = activeIndex + slides.length; | |
| 31317 | numberOfNewSlides = slides.length; | |
| 31318 | } else { | |
| 31319 | swiper.virtual.slides.unshift(slides); | |
| 31320 | } | |
| 5309fbda DC |
31321 | if (swiper.params.virtual.cache) { |
| 31322 | var cache = swiper.virtual.cache; | |
| 31323 | var newCache = {}; | |
| 31324 | Object.keys(cache).forEach(function (cachedIndex) { | |
| 5d51ea26 | 31325 | newCache[parseInt(cachedIndex, 10) + numberOfNewSlides] = cache[cachedIndex]; |
| 5309fbda DC |
31326 | }); |
| 31327 | swiper.virtual.cache = newCache; | |
| 31328 | } | |
| 31329 | swiper.virtual.update(true); | |
| 5d51ea26 DC |
31330 | swiper.slideTo(newActiveIndex, 0); |
| 31331 | }, | |
| 31332 | removeSlide: function removeSlide(slidesIndexes) { | |
| 31333 | var swiper = this; | |
| 31334 | if (typeof slidesIndexes === 'undefined' || slidesIndexes === null) { return; } | |
| 31335 | var activeIndex = swiper.activeIndex; | |
| 31336 | if (Array.isArray(slidesIndexes)) { | |
| 31337 | for (var i = slidesIndexes.length - 1; i >= 0; i -= 1) { | |
| 31338 | swiper.virtual.slides.splice(slidesIndexes[i], 1); | |
| 31339 | if (swiper.params.virtual.cache) { | |
| 31340 | delete swiper.virtual.cache[slidesIndexes[i]]; | |
| 31341 | } | |
| 31342 | if (slidesIndexes[i] < activeIndex) { activeIndex -= 1; } | |
| 31343 | activeIndex = Math.max(activeIndex, 0); | |
| 31344 | } | |
| 31345 | } else { | |
| 31346 | swiper.virtual.slides.splice(slidesIndexes, 1); | |
| 31347 | if (swiper.params.virtual.cache) { | |
| 31348 | delete swiper.virtual.cache[slidesIndexes]; | |
| 31349 | } | |
| 31350 | if (slidesIndexes < activeIndex) { activeIndex -= 1; } | |
| 31351 | activeIndex = Math.max(activeIndex, 0); | |
| 31352 | } | |
| 31353 | swiper.virtual.update(true); | |
| 31354 | swiper.slideTo(activeIndex, 0); | |
| 31355 | }, | |
| 31356 | removeAllSlides: function removeAllSlides() { | |
| 31357 | var swiper = this; | |
| 31358 | swiper.virtual.slides = []; | |
| 31359 | if (swiper.params.virtual.cache) { | |
| 31360 | swiper.virtual.cache = {}; | |
| 31361 | } | |
| 31362 | swiper.virtual.update(true); | |
| 31363 | swiper.slideTo(0, 0); | |
| 5309fbda DC |
31364 | }, |
| 31365 | }; | |
| 31366 | ||
| 31367 | var Virtual$1 = { | |
| 31368 | name: 'virtual', | |
| 31369 | params: { | |
| 31370 | virtual: { | |
| 31371 | enabled: false, | |
| 31372 | slides: [], | |
| 31373 | cache: true, | |
| 31374 | renderSlide: null, | |
| 31375 | renderExternal: null, | |
| 31376 | addSlidesBefore: 0, | |
| 31377 | addSlidesAfter: 0, | |
| 31378 | }, | |
| 31379 | }, | |
| 31380 | create: function create() { | |
| 31381 | var swiper = this; | |
| 31382 | Utils.extend(swiper, { | |
| 31383 | virtual: { | |
| 31384 | update: Virtual.update.bind(swiper), | |
| 31385 | appendSlide: Virtual.appendSlide.bind(swiper), | |
| 31386 | prependSlide: Virtual.prependSlide.bind(swiper), | |
| 5d51ea26 DC |
31387 | removeSlide: Virtual.removeSlide.bind(swiper), |
| 31388 | removeAllSlides: Virtual.removeAllSlides.bind(swiper), | |
| 5309fbda DC |
31389 | renderSlide: Virtual.renderSlide.bind(swiper), |
| 31390 | slides: swiper.params.virtual.slides, | |
| 31391 | cache: {}, | |
| 31392 | }, | |
| 31393 | }); | |
| 31394 | }, | |
| 31395 | on: { | |
| 31396 | beforeInit: function beforeInit() { | |
| 31397 | var swiper = this; | |
| 31398 | if (!swiper.params.virtual.enabled) { return; } | |
| 31399 | swiper.classNames.push(((swiper.params.containerModifierClass) + "virtual")); | |
| 31400 | var overwriteParams = { | |
| 31401 | watchSlidesProgress: true, | |
| 31402 | }; | |
| 31403 | Utils.extend(swiper.params, overwriteParams); | |
| 31404 | Utils.extend(swiper.originalParams, overwriteParams); | |
| 31405 | ||
| 31406 | if (!swiper.params.initialSlide) { | |
| 31407 | swiper.virtual.update(); | |
| 31408 | } | |
| 31409 | }, | |
| 31410 | setTranslate: function setTranslate() { | |
| 31411 | var swiper = this; | |
| 31412 | if (!swiper.params.virtual.enabled) { return; } | |
| 31413 | swiper.virtual.update(); | |
| 31414 | }, | |
| 31415 | }, | |
| 31416 | }; | |
| 31417 | ||
| 31418 | var Navigation = { | |
| 31419 | update: function update() { | |
| 31420 | // Update Navigation Buttons | |
| 31421 | var swiper = this; | |
| 31422 | var params = swiper.params.navigation; | |
| 31423 | ||
| 31424 | if (swiper.params.loop) { return; } | |
| 31425 | var ref = swiper.navigation; | |
| 31426 | var $nextEl = ref.$nextEl; | |
| 31427 | var $prevEl = ref.$prevEl; | |
| 31428 | ||
| 31429 | if ($prevEl && $prevEl.length > 0) { | |
| 31430 | if (swiper.isBeginning) { | |
| 31431 | $prevEl.addClass(params.disabledClass); | |
| 31432 | } else { | |
| 31433 | $prevEl.removeClass(params.disabledClass); | |
| 31434 | } | |
| 31435 | $prevEl[swiper.params.watchOverflow && swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass); | |
| 31436 | } | |
| 31437 | if ($nextEl && $nextEl.length > 0) { | |
| 31438 | if (swiper.isEnd) { | |
| 31439 | $nextEl.addClass(params.disabledClass); | |
| 31440 | } else { | |
| 31441 | $nextEl.removeClass(params.disabledClass); | |
| 31442 | } | |
| 31443 | $nextEl[swiper.params.watchOverflow && swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass); | |
| 31444 | } | |
| 31445 | }, | |
| 31446 | onPrevClick: function onPrevClick(e) { | |
| 31447 | var swiper = this; | |
| 31448 | e.preventDefault(); | |
| 31449 | if (swiper.isBeginning && !swiper.params.loop) { return; } | |
| 31450 | swiper.slidePrev(); | |
| 31451 | }, | |
| 31452 | onNextClick: function onNextClick(e) { | |
| 31453 | var swiper = this; | |
| 31454 | e.preventDefault(); | |
| 31455 | if (swiper.isEnd && !swiper.params.loop) { return; } | |
| 31456 | swiper.slideNext(); | |
| 31457 | }, | |
| 31458 | init: function init() { | |
| 31459 | var swiper = this; | |
| 31460 | var params = swiper.params.navigation; | |
| 31461 | if (!(params.nextEl || params.prevEl)) { return; } | |
| 31462 | ||
| 31463 | var $nextEl; | |
| 31464 | var $prevEl; | |
| 31465 | if (params.nextEl) { | |
| 31466 | $nextEl = $(params.nextEl); | |
| 31467 | if ( | |
| 31468 | swiper.params.uniqueNavElements | |
| 31469 | && typeof params.nextEl === 'string' | |
| 31470 | && $nextEl.length > 1 | |
| 31471 | && swiper.$el.find(params.nextEl).length === 1 | |
| 31472 | ) { | |
| 31473 | $nextEl = swiper.$el.find(params.nextEl); | |
| 31474 | } | |
| 31475 | } | |
| 31476 | if (params.prevEl) { | |
| 31477 | $prevEl = $(params.prevEl); | |
| 31478 | if ( | |
| 31479 | swiper.params.uniqueNavElements | |
| 31480 | && typeof params.prevEl === 'string' | |
| 31481 | && $prevEl.length > 1 | |
| 31482 | && swiper.$el.find(params.prevEl).length === 1 | |
| 31483 | ) { | |
| 31484 | $prevEl = swiper.$el.find(params.prevEl); | |
| 31485 | } | |
| 31486 | } | |
| 31487 | ||
| 31488 | if ($nextEl && $nextEl.length > 0) { | |
| 31489 | $nextEl.on('click', swiper.navigation.onNextClick); | |
| 31490 | } | |
| 31491 | if ($prevEl && $prevEl.length > 0) { | |
| 31492 | $prevEl.on('click', swiper.navigation.onPrevClick); | |
| 31493 | } | |
| 31494 | ||
| 31495 | Utils.extend(swiper.navigation, { | |
| 31496 | $nextEl: $nextEl, | |
| 31497 | nextEl: $nextEl && $nextEl[0], | |
| 31498 | $prevEl: $prevEl, | |
| 31499 | prevEl: $prevEl && $prevEl[0], | |
| 31500 | }); | |
| 31501 | }, | |
| 31502 | destroy: function destroy() { | |
| 31503 | var swiper = this; | |
| 31504 | var ref = swiper.navigation; | |
| 31505 | var $nextEl = ref.$nextEl; | |
| 31506 | var $prevEl = ref.$prevEl; | |
| 31507 | if ($nextEl && $nextEl.length) { | |
| 31508 | $nextEl.off('click', swiper.navigation.onNextClick); | |
| 31509 | $nextEl.removeClass(swiper.params.navigation.disabledClass); | |
| 31510 | } | |
| 31511 | if ($prevEl && $prevEl.length) { | |
| 31512 | $prevEl.off('click', swiper.navigation.onPrevClick); | |
| 31513 | $prevEl.removeClass(swiper.params.navigation.disabledClass); | |
| 31514 | } | |
| 31515 | }, | |
| 31516 | }; | |
| 31517 | ||
| 31518 | var Navigation$1 = { | |
| 31519 | name: 'navigation', | |
| 31520 | params: { | |
| 31521 | navigation: { | |
| 31522 | nextEl: null, | |
| 31523 | prevEl: null, | |
| 31524 | ||
| 31525 | hideOnClick: false, | |
| 31526 | disabledClass: 'swiper-button-disabled', | |
| 31527 | hiddenClass: 'swiper-button-hidden', | |
| 31528 | lockClass: 'swiper-button-lock', | |
| 31529 | }, | |
| 31530 | }, | |
| 31531 | create: function create() { | |
| 31532 | var swiper = this; | |
| 31533 | Utils.extend(swiper, { | |
| 31534 | navigation: { | |
| 31535 | init: Navigation.init.bind(swiper), | |
| 31536 | update: Navigation.update.bind(swiper), | |
| 31537 | destroy: Navigation.destroy.bind(swiper), | |
| 31538 | onNextClick: Navigation.onNextClick.bind(swiper), | |
| 31539 | onPrevClick: Navigation.onPrevClick.bind(swiper), | |
| 31540 | }, | |
| 31541 | }); | |
| 31542 | }, | |
| 31543 | on: { | |
| 31544 | init: function init() { | |
| 31545 | var swiper = this; | |
| 31546 | swiper.navigation.init(); | |
| 31547 | swiper.navigation.update(); | |
| 31548 | }, | |
| 31549 | toEdge: function toEdge() { | |
| 31550 | var swiper = this; | |
| 31551 | swiper.navigation.update(); | |
| 31552 | }, | |
| 31553 | fromEdge: function fromEdge() { | |
| 31554 | var swiper = this; | |
| 31555 | swiper.navigation.update(); | |
| 31556 | }, | |
| 31557 | destroy: function destroy() { | |
| 31558 | var swiper = this; | |
| 31559 | swiper.navigation.destroy(); | |
| 31560 | }, | |
| 31561 | click: function click(e) { | |
| 31562 | var swiper = this; | |
| 31563 | var ref = swiper.navigation; | |
| 31564 | var $nextEl = ref.$nextEl; | |
| 31565 | var $prevEl = ref.$prevEl; | |
| 31566 | if ( | |
| 31567 | swiper.params.navigation.hideOnClick | |
| 31568 | && !$(e.target).is($prevEl) | |
| 31569 | && !$(e.target).is($nextEl) | |
| 31570 | ) { | |
| 5d51ea26 DC |
31571 | var isHidden; |
| 31572 | if ($nextEl) { | |
| 31573 | isHidden = $nextEl.hasClass(swiper.params.navigation.hiddenClass); | |
| 31574 | } else if ($prevEl) { | |
| 31575 | isHidden = $prevEl.hasClass(swiper.params.navigation.hiddenClass); | |
| 31576 | } | |
| 31577 | if (isHidden === true) { | |
| 31578 | swiper.emit('navigationShow', swiper); | |
| 31579 | } else { | |
| 31580 | swiper.emit('navigationHide', swiper); | |
| 31581 | } | |
| 31582 | if ($nextEl) { | |
| 31583 | $nextEl.toggleClass(swiper.params.navigation.hiddenClass); | |
| 31584 | } | |
| 31585 | if ($prevEl) { | |
| 31586 | $prevEl.toggleClass(swiper.params.navigation.hiddenClass); | |
| 31587 | } | |
| 5309fbda DC |
31588 | } |
| 31589 | }, | |
| 31590 | }, | |
| 31591 | }; | |
| 31592 | ||
| 31593 | var Pagination = { | |
| 31594 | update: function update() { | |
| 31595 | // Render || Update Pagination bullets/items | |
| 31596 | var swiper = this; | |
| 31597 | var rtl = swiper.rtl; | |
| 31598 | var params = swiper.params.pagination; | |
| 31599 | if (!params.el || !swiper.pagination.el || !swiper.pagination.$el || swiper.pagination.$el.length === 0) { return; } | |
| 31600 | var slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length; | |
| 31601 | var $el = swiper.pagination.$el; | |
| 31602 | // Current/Total | |
| 31603 | var current; | |
| 31604 | var total = swiper.params.loop ? Math.ceil((slidesLength - (swiper.loopedSlides * 2)) / swiper.params.slidesPerGroup) : swiper.snapGrid.length; | |
| 31605 | if (swiper.params.loop) { | |
| 31606 | current = Math.ceil((swiper.activeIndex - swiper.loopedSlides) / swiper.params.slidesPerGroup); | |
| 31607 | if (current > slidesLength - 1 - (swiper.loopedSlides * 2)) { | |
| 31608 | current -= (slidesLength - (swiper.loopedSlides * 2)); | |
| 31609 | } | |
| 31610 | if (current > total - 1) { current -= total; } | |
| 31611 | if (current < 0 && swiper.params.paginationType !== 'bullets') { current = total + current; } | |
| 31612 | } else if (typeof swiper.snapIndex !== 'undefined') { | |
| 31613 | current = swiper.snapIndex; | |
| 31614 | } else { | |
| 31615 | current = swiper.activeIndex || 0; | |
| 31616 | } | |
| 31617 | // Types | |
| 31618 | if (params.type === 'bullets' && swiper.pagination.bullets && swiper.pagination.bullets.length > 0) { | |
| 31619 | var bullets = swiper.pagination.bullets; | |
| 31620 | var firstIndex; | |
| 31621 | var lastIndex; | |
| 31622 | var midIndex; | |
| 31623 | if (params.dynamicBullets) { | |
| 31624 | swiper.pagination.bulletSize = bullets.eq(0)[swiper.isHorizontal() ? 'outerWidth' : 'outerHeight'](true); | |
| 31625 | $el.css(swiper.isHorizontal() ? 'width' : 'height', ((swiper.pagination.bulletSize * (params.dynamicMainBullets + 4)) + "px")); | |
| 31626 | if (params.dynamicMainBullets > 1 && swiper.previousIndex !== undefined) { | |
| 31627 | swiper.pagination.dynamicBulletIndex += (current - swiper.previousIndex); | |
| 31628 | if (swiper.pagination.dynamicBulletIndex > (params.dynamicMainBullets - 1)) { | |
| 31629 | swiper.pagination.dynamicBulletIndex = params.dynamicMainBullets - 1; | |
| 31630 | } else if (swiper.pagination.dynamicBulletIndex < 0) { | |
| 31631 | swiper.pagination.dynamicBulletIndex = 0; | |
| 31632 | } | |
| 31633 | } | |
| 31634 | firstIndex = current - swiper.pagination.dynamicBulletIndex; | |
| 31635 | lastIndex = firstIndex + (Math.min(bullets.length, params.dynamicMainBullets) - 1); | |
| 31636 | midIndex = (lastIndex + firstIndex) / 2; | |
| 31637 | } | |
| 31638 | bullets.removeClass(((params.bulletActiveClass) + " " + (params.bulletActiveClass) + "-next " + (params.bulletActiveClass) + "-next-next " + (params.bulletActiveClass) + "-prev " + (params.bulletActiveClass) + "-prev-prev " + (params.bulletActiveClass) + "-main")); | |
| 31639 | if ($el.length > 1) { | |
| 31640 | bullets.each(function (index, bullet) { | |
| 31641 | var $bullet = $(bullet); | |
| 31642 | var bulletIndex = $bullet.index(); | |
| 31643 | if (bulletIndex === current) { | |
| 31644 | $bullet.addClass(params.bulletActiveClass); | |
| 31645 | } | |
| 31646 | if (params.dynamicBullets) { | |
| 31647 | if (bulletIndex >= firstIndex && bulletIndex <= lastIndex) { | |
| 31648 | $bullet.addClass(((params.bulletActiveClass) + "-main")); | |
| 31649 | } | |
| 31650 | if (bulletIndex === firstIndex) { | |
| 31651 | $bullet | |
| 31652 | .prev() | |
| 31653 | .addClass(((params.bulletActiveClass) + "-prev")) | |
| 31654 | .prev() | |
| 31655 | .addClass(((params.bulletActiveClass) + "-prev-prev")); | |
| 31656 | } | |
| 31657 | if (bulletIndex === lastIndex) { | |
| 31658 | $bullet | |
| 31659 | .next() | |
| 31660 | .addClass(((params.bulletActiveClass) + "-next")) | |
| 31661 | .next() | |
| 31662 | .addClass(((params.bulletActiveClass) + "-next-next")); | |
| 31663 | } | |
| 31664 | } | |
| 31665 | }); | |
| 31666 | } else { | |
| 31667 | var $bullet = bullets.eq(current); | |
| 31668 | $bullet.addClass(params.bulletActiveClass); | |
| 31669 | if (params.dynamicBullets) { | |
| 31670 | var $firstDisplayedBullet = bullets.eq(firstIndex); | |
| 31671 | var $lastDisplayedBullet = bullets.eq(lastIndex); | |
| 31672 | for (var i = firstIndex; i <= lastIndex; i += 1) { | |
| 31673 | bullets.eq(i).addClass(((params.bulletActiveClass) + "-main")); | |
| 31674 | } | |
| 31675 | $firstDisplayedBullet | |
| 31676 | .prev() | |
| 31677 | .addClass(((params.bulletActiveClass) + "-prev")) | |
| 31678 | .prev() | |
| 31679 | .addClass(((params.bulletActiveClass) + "-prev-prev")); | |
| 31680 | $lastDisplayedBullet | |
| 31681 | .next() | |
| 31682 | .addClass(((params.bulletActiveClass) + "-next")) | |
| 31683 | .next() | |
| 31684 | .addClass(((params.bulletActiveClass) + "-next-next")); | |
| 31685 | } | |
| 31686 | } | |
| 31687 | if (params.dynamicBullets) { | |
| 31688 | var dynamicBulletsLength = Math.min(bullets.length, params.dynamicMainBullets + 4); | |
| 31689 | var bulletsOffset = (((swiper.pagination.bulletSize * dynamicBulletsLength) - (swiper.pagination.bulletSize)) / 2) - (midIndex * swiper.pagination.bulletSize); | |
| 31690 | var offsetProp = rtl ? 'right' : 'left'; | |
| 31691 | bullets.css(swiper.isHorizontal() ? offsetProp : 'top', (bulletsOffset + "px")); | |
| 31692 | } | |
| 31693 | } | |
| 31694 | if (params.type === 'fraction') { | |
| 31695 | $el.find(("." + (params.currentClass))).text(params.formatFractionCurrent(current + 1)); | |
| 31696 | $el.find(("." + (params.totalClass))).text(params.formatFractionTotal(total)); | |
| 31697 | } | |
| 31698 | if (params.type === 'progressbar') { | |
| 31699 | var progressbarDirection; | |
| 31700 | if (params.progressbarOpposite) { | |
| 31701 | progressbarDirection = swiper.isHorizontal() ? 'vertical' : 'horizontal'; | |
| 31702 | } else { | |
| 31703 | progressbarDirection = swiper.isHorizontal() ? 'horizontal' : 'vertical'; | |
| 31704 | } | |
| 31705 | var scale = (current + 1) / total; | |
| 31706 | var scaleX = 1; | |
| 31707 | var scaleY = 1; | |
| 31708 | if (progressbarDirection === 'horizontal') { | |
| 31709 | scaleX = scale; | |
| 31710 | } else { | |
| 31711 | scaleY = scale; | |
| 31712 | } | |
| 31713 | $el.find(("." + (params.progressbarFillClass))).transform(("translate3d(0,0,0) scaleX(" + scaleX + ") scaleY(" + scaleY + ")")).transition(swiper.params.speed); | |
| 31714 | } | |
| 31715 | if (params.type === 'custom' && params.renderCustom) { | |
| 31716 | $el.html(params.renderCustom(swiper, current + 1, total)); | |
| 31717 | swiper.emit('paginationRender', swiper, $el[0]); | |
| 31718 | } else { | |
| 31719 | swiper.emit('paginationUpdate', swiper, $el[0]); | |
| 31720 | } | |
| 31721 | $el[swiper.params.watchOverflow && swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass); | |
| 31722 | }, | |
| 31723 | render: function render() { | |
| 31724 | // Render Container | |
| 31725 | var swiper = this; | |
| 31726 | var params = swiper.params.pagination; | |
| 31727 | if (!params.el || !swiper.pagination.el || !swiper.pagination.$el || swiper.pagination.$el.length === 0) { return; } | |
| 31728 | var slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length; | |
| 31729 | ||
| 31730 | var $el = swiper.pagination.$el; | |
| 31731 | var paginationHTML = ''; | |
| 31732 | if (params.type === 'bullets') { | |
| 31733 | var numberOfBullets = swiper.params.loop ? Math.ceil((slidesLength - (swiper.loopedSlides * 2)) / swiper.params.slidesPerGroup) : swiper.snapGrid.length; | |
| 31734 | for (var i = 0; i < numberOfBullets; i += 1) { | |
| 31735 | if (params.renderBullet) { | |
| 31736 | paginationHTML += params.renderBullet.call(swiper, i, params.bulletClass); | |
| 31737 | } else { | |
| 31738 | paginationHTML += "<" + (params.bulletElement) + " class=\"" + (params.bulletClass) + "\"></" + (params.bulletElement) + ">"; | |
| 31739 | } | |
| 31740 | } | |
| 31741 | $el.html(paginationHTML); | |
| 31742 | swiper.pagination.bullets = $el.find(("." + (params.bulletClass))); | |
| 31743 | } | |
| 31744 | if (params.type === 'fraction') { | |
| 31745 | if (params.renderFraction) { | |
| 31746 | paginationHTML = params.renderFraction.call(swiper, params.currentClass, params.totalClass); | |
| 31747 | } else { | |
| 31748 | paginationHTML = "<span class=\"" + (params.currentClass) + "\"></span>" | |
| 31749 | + ' / ' | |
| 31750 | + "<span class=\"" + (params.totalClass) + "\"></span>"; | |
| 31751 | } | |
| 31752 | $el.html(paginationHTML); | |
| 31753 | } | |
| 31754 | if (params.type === 'progressbar') { | |
| 31755 | if (params.renderProgressbar) { | |
| 31756 | paginationHTML = params.renderProgressbar.call(swiper, params.progressbarFillClass); | |
| 31757 | } else { | |
| 31758 | paginationHTML = "<span class=\"" + (params.progressbarFillClass) + "\"></span>"; | |
| 31759 | } | |
| 31760 | $el.html(paginationHTML); | |
| 31761 | } | |
| 31762 | if (params.type !== 'custom') { | |
| 31763 | swiper.emit('paginationRender', swiper.pagination.$el[0]); | |
| 31764 | } | |
| 31765 | }, | |
| 31766 | init: function init() { | |
| 31767 | var swiper = this; | |
| 31768 | var params = swiper.params.pagination; | |
| 31769 | if (!params.el) { return; } | |
| 31770 | ||
| 31771 | var $el = $(params.el); | |
| 31772 | if ($el.length === 0) { return; } | |
| 31773 | ||
| 31774 | if ( | |
| 31775 | swiper.params.uniqueNavElements | |
| 31776 | && typeof params.el === 'string' | |
| 31777 | && $el.length > 1 | |
| 31778 | && swiper.$el.find(params.el).length === 1 | |
| 31779 | ) { | |
| 31780 | $el = swiper.$el.find(params.el); | |
| 31781 | } | |
| 31782 | ||
| 31783 | if (params.type === 'bullets' && params.clickable) { | |
| 31784 | $el.addClass(params.clickableClass); | |
| 31785 | } | |
| 31786 | ||
| 31787 | $el.addClass(params.modifierClass + params.type); | |
| 31788 | ||
| 31789 | if (params.type === 'bullets' && params.dynamicBullets) { | |
| 31790 | $el.addClass(("" + (params.modifierClass) + (params.type) + "-dynamic")); | |
| 31791 | swiper.pagination.dynamicBulletIndex = 0; | |
| 31792 | if (params.dynamicMainBullets < 1) { | |
| 31793 | params.dynamicMainBullets = 1; | |
| 31794 | } | |
| 31795 | } | |
| 31796 | if (params.type === 'progressbar' && params.progressbarOpposite) { | |
| 31797 | $el.addClass(params.progressbarOppositeClass); | |
| 31798 | } | |
| 31799 | ||
| 31800 | if (params.clickable) { | |
| 31801 | $el.on('click', ("." + (params.bulletClass)), function onClick(e) { | |
| 31802 | e.preventDefault(); | |
| 31803 | var index = $(this).index() * swiper.params.slidesPerGroup; | |
| 31804 | if (swiper.params.loop) { index += swiper.loopedSlides; } | |
| 31805 | swiper.slideTo(index); | |
| 31806 | }); | |
| 31807 | } | |
| 31808 | ||
| 31809 | Utils.extend(swiper.pagination, { | |
| 31810 | $el: $el, | |
| 31811 | el: $el[0], | |
| 31812 | }); | |
| 31813 | }, | |
| 31814 | destroy: function destroy() { | |
| 31815 | var swiper = this; | |
| 31816 | var params = swiper.params.pagination; | |
| 31817 | if (!params.el || !swiper.pagination.el || !swiper.pagination.$el || swiper.pagination.$el.length === 0) { return; } | |
| 31818 | var $el = swiper.pagination.$el; | |
| 31819 | ||
| 31820 | $el.removeClass(params.hiddenClass); | |
| 31821 | $el.removeClass(params.modifierClass + params.type); | |
| 31822 | if (swiper.pagination.bullets) { swiper.pagination.bullets.removeClass(params.bulletActiveClass); } | |
| 31823 | if (params.clickable) { | |
| 31824 | $el.off('click', ("." + (params.bulletClass))); | |
| 31825 | } | |
| 31826 | }, | |
| 31827 | }; | |
| 31828 | ||
| 31829 | var Pagination$1 = { | |
| 31830 | name: 'pagination', | |
| 31831 | params: { | |
| 31832 | pagination: { | |
| 31833 | el: null, | |
| 31834 | bulletElement: 'span', | |
| 31835 | clickable: false, | |
| 31836 | hideOnClick: false, | |
| 31837 | renderBullet: null, | |
| 31838 | renderProgressbar: null, | |
| 31839 | renderFraction: null, | |
| 31840 | renderCustom: null, | |
| 31841 | progressbarOpposite: false, | |
| 31842 | type: 'bullets', // 'bullets' or 'progressbar' or 'fraction' or 'custom' | |
| 31843 | dynamicBullets: false, | |
| 31844 | dynamicMainBullets: 1, | |
| 31845 | formatFractionCurrent: function (number) { return number; }, | |
| 31846 | formatFractionTotal: function (number) { return number; }, | |
| 31847 | bulletClass: 'swiper-pagination-bullet', | |
| 31848 | bulletActiveClass: 'swiper-pagination-bullet-active', | |
| 31849 | modifierClass: 'swiper-pagination-', // NEW | |
| 31850 | currentClass: 'swiper-pagination-current', | |
| 31851 | totalClass: 'swiper-pagination-total', | |
| 31852 | hiddenClass: 'swiper-pagination-hidden', | |
| 31853 | progressbarFillClass: 'swiper-pagination-progressbar-fill', | |
| 31854 | progressbarOppositeClass: 'swiper-pagination-progressbar-opposite', | |
| 31855 | clickableClass: 'swiper-pagination-clickable', // NEW | |
| 31856 | lockClass: 'swiper-pagination-lock', | |
| 31857 | }, | |
| 31858 | }, | |
| 31859 | create: function create() { | |
| 31860 | var swiper = this; | |
| 31861 | Utils.extend(swiper, { | |
| 31862 | pagination: { | |
| 31863 | init: Pagination.init.bind(swiper), | |
| 31864 | render: Pagination.render.bind(swiper), | |
| 31865 | update: Pagination.update.bind(swiper), | |
| 31866 | destroy: Pagination.destroy.bind(swiper), | |
| 31867 | dynamicBulletIndex: 0, | |
| 31868 | }, | |
| 31869 | }); | |
| 31870 | }, | |
| 31871 | on: { | |
| 31872 | init: function init() { | |
| 31873 | var swiper = this; | |
| 31874 | swiper.pagination.init(); | |
| 31875 | swiper.pagination.render(); | |
| 31876 | swiper.pagination.update(); | |
| 31877 | }, | |
| 31878 | activeIndexChange: function activeIndexChange() { | |
| 31879 | var swiper = this; | |
| 31880 | if (swiper.params.loop) { | |
| 31881 | swiper.pagination.update(); | |
| 31882 | } else if (typeof swiper.snapIndex === 'undefined') { | |
| 31883 | swiper.pagination.update(); | |
| 31884 | } | |
| 31885 | }, | |
| 31886 | snapIndexChange: function snapIndexChange() { | |
| 31887 | var swiper = this; | |
| 31888 | if (!swiper.params.loop) { | |
| 31889 | swiper.pagination.update(); | |
| 31890 | } | |
| 31891 | }, | |
| 31892 | slidesLengthChange: function slidesLengthChange() { | |
| 31893 | var swiper = this; | |
| 31894 | if (swiper.params.loop) { | |
| 31895 | swiper.pagination.render(); | |
| 31896 | swiper.pagination.update(); | |
| 31897 | } | |
| 31898 | }, | |
| 31899 | snapGridLengthChange: function snapGridLengthChange() { | |
| 31900 | var swiper = this; | |
| 31901 | if (!swiper.params.loop) { | |
| 31902 | swiper.pagination.render(); | |
| 31903 | swiper.pagination.update(); | |
| 31904 | } | |
| 31905 | }, | |
| 31906 | destroy: function destroy() { | |
| 31907 | var swiper = this; | |
| 31908 | swiper.pagination.destroy(); | |
| 31909 | }, | |
| 31910 | click: function click(e) { | |
| 31911 | var swiper = this; | |
| 31912 | if ( | |
| 31913 | swiper.params.pagination.el | |
| 31914 | && swiper.params.pagination.hideOnClick | |
| 31915 | && swiper.pagination.$el.length > 0 | |
| 31916 | && !$(e.target).hasClass(swiper.params.pagination.bulletClass) | |
| 31917 | ) { | |
| 5d51ea26 DC |
31918 | var isHidden = swiper.pagination.$el.hasClass(swiper.params.pagination.hiddenClass); |
| 31919 | if (isHidden === true) { | |
| 31920 | swiper.emit('paginationShow', swiper); | |
| 31921 | } else { | |
| 31922 | swiper.emit('paginationHide', swiper); | |
| 31923 | } | |
| 5309fbda DC |
31924 | swiper.pagination.$el.toggleClass(swiper.params.pagination.hiddenClass); |
| 31925 | } | |
| 31926 | }, | |
| 31927 | }, | |
| 31928 | }; | |
| 31929 | ||
| 31930 | var Scrollbar = { | |
| 31931 | setTranslate: function setTranslate() { | |
| 31932 | var swiper = this; | |
| 31933 | if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) { return; } | |
| 31934 | var scrollbar = swiper.scrollbar; | |
| 31935 | var rtl = swiper.rtlTranslate; | |
| 31936 | var progress = swiper.progress; | |
| 31937 | var dragSize = scrollbar.dragSize; | |
| 31938 | var trackSize = scrollbar.trackSize; | |
| 31939 | var $dragEl = scrollbar.$dragEl; | |
| 31940 | var $el = scrollbar.$el; | |
| 31941 | var params = swiper.params.scrollbar; | |
| 31942 | ||
| 31943 | var newSize = dragSize; | |
| 31944 | var newPos = (trackSize - dragSize) * progress; | |
| 31945 | if (rtl) { | |
| 31946 | newPos = -newPos; | |
| 31947 | if (newPos > 0) { | |
| 31948 | newSize = dragSize - newPos; | |
| 31949 | newPos = 0; | |
| 31950 | } else if (-newPos + dragSize > trackSize) { | |
| 31951 | newSize = trackSize + newPos; | |
| 31952 | } | |
| 31953 | } else if (newPos < 0) { | |
| 31954 | newSize = dragSize + newPos; | |
| 31955 | newPos = 0; | |
| 31956 | } else if (newPos + dragSize > trackSize) { | |
| 31957 | newSize = trackSize - newPos; | |
| 31958 | } | |
| 31959 | if (swiper.isHorizontal()) { | |
| 31960 | if (Support.transforms3d) { | |
| 31961 | $dragEl.transform(("translate3d(" + newPos + "px, 0, 0)")); | |
| 31962 | } else { | |
| 31963 | $dragEl.transform(("translateX(" + newPos + "px)")); | |
| 31964 | } | |
| 31965 | $dragEl[0].style.width = newSize + "px"; | |
| 31966 | } else { | |
| 31967 | if (Support.transforms3d) { | |
| 31968 | $dragEl.transform(("translate3d(0px, " + newPos + "px, 0)")); | |
| 31969 | } else { | |
| 31970 | $dragEl.transform(("translateY(" + newPos + "px)")); | |
| 31971 | } | |
| 31972 | $dragEl[0].style.height = newSize + "px"; | |
| 31973 | } | |
| 31974 | if (params.hide) { | |
| 31975 | clearTimeout(swiper.scrollbar.timeout); | |
| 31976 | $el[0].style.opacity = 1; | |
| 31977 | swiper.scrollbar.timeout = setTimeout(function () { | |
| 31978 | $el[0].style.opacity = 0; | |
| 31979 | $el.transition(400); | |
| 31980 | }, 1000); | |
| 31981 | } | |
| 31982 | }, | |
| 31983 | setTransition: function setTransition(duration) { | |
| 31984 | var swiper = this; | |
| 31985 | if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) { return; } | |
| 31986 | swiper.scrollbar.$dragEl.transition(duration); | |
| 31987 | }, | |
| 31988 | updateSize: function updateSize() { | |
| 31989 | var swiper = this; | |
| 31990 | if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) { return; } | |
| 31991 | ||
| 31992 | var scrollbar = swiper.scrollbar; | |
| 31993 | var $dragEl = scrollbar.$dragEl; | |
| 31994 | var $el = scrollbar.$el; | |
| 31995 | ||
| 31996 | $dragEl[0].style.width = ''; | |
| 31997 | $dragEl[0].style.height = ''; | |
| 31998 | var trackSize = swiper.isHorizontal() ? $el[0].offsetWidth : $el[0].offsetHeight; | |
| 31999 | ||
| 32000 | var divider = swiper.size / swiper.virtualSize; | |
| 32001 | var moveDivider = divider * (trackSize / swiper.size); | |
| 32002 | var dragSize; | |
| 32003 | if (swiper.params.scrollbar.dragSize === 'auto') { | |
| 32004 | dragSize = trackSize * divider; | |
| 32005 | } else { | |
| 32006 | dragSize = parseInt(swiper.params.scrollbar.dragSize, 10); | |
| 32007 | } | |
| 32008 | ||
| 32009 | if (swiper.isHorizontal()) { | |
| 32010 | $dragEl[0].style.width = dragSize + "px"; | |
| 32011 | } else { | |
| 32012 | $dragEl[0].style.height = dragSize + "px"; | |
| 32013 | } | |
| 32014 | ||
| 32015 | if (divider >= 1) { | |
| 32016 | $el[0].style.display = 'none'; | |
| 32017 | } else { | |
| 32018 | $el[0].style.display = ''; | |
| 32019 | } | |
| 5d51ea26 | 32020 | if (swiper.params.scrollbar.hide) { |
| 5309fbda DC |
32021 | $el[0].style.opacity = 0; |
| 32022 | } | |
| 32023 | Utils.extend(scrollbar, { | |
| 32024 | trackSize: trackSize, | |
| 32025 | divider: divider, | |
| 32026 | moveDivider: moveDivider, | |
| 32027 | dragSize: dragSize, | |
| 32028 | }); | |
| 32029 | scrollbar.$el[swiper.params.watchOverflow && swiper.isLocked ? 'addClass' : 'removeClass'](swiper.params.scrollbar.lockClass); | |
| 32030 | }, | |
| 32031 | setDragPosition: function setDragPosition(e) { | |
| 32032 | var swiper = this; | |
| 32033 | var scrollbar = swiper.scrollbar; | |
| 32034 | var rtl = swiper.rtlTranslate; | |
| 32035 | var $el = scrollbar.$el; | |
| 32036 | var dragSize = scrollbar.dragSize; | |
| 32037 | var trackSize = scrollbar.trackSize; | |
| 32038 | ||
| 32039 | var pointerPosition; | |
| 32040 | if (swiper.isHorizontal()) { | |
| 32041 | pointerPosition = ((e.type === 'touchstart' || e.type === 'touchmove') ? e.targetTouches[0].pageX : e.pageX || e.clientX); | |
| 32042 | } else { | |
| 32043 | pointerPosition = ((e.type === 'touchstart' || e.type === 'touchmove') ? e.targetTouches[0].pageY : e.pageY || e.clientY); | |
| 32044 | } | |
| 32045 | var positionRatio; | |
| 32046 | positionRatio = ((pointerPosition) - $el.offset()[swiper.isHorizontal() ? 'left' : 'top'] - (dragSize / 2)) / (trackSize - dragSize); | |
| 32047 | positionRatio = Math.max(Math.min(positionRatio, 1), 0); | |
| 32048 | if (rtl) { | |
| 32049 | positionRatio = 1 - positionRatio; | |
| 32050 | } | |
| 32051 | ||
| 32052 | var position = swiper.minTranslate() + ((swiper.maxTranslate() - swiper.minTranslate()) * positionRatio); | |
| 32053 | ||
| 32054 | swiper.updateProgress(position); | |
| 32055 | swiper.setTranslate(position); | |
| 32056 | swiper.updateActiveIndex(); | |
| 32057 | swiper.updateSlidesClasses(); | |
| 32058 | }, | |
| 32059 | onDragStart: function onDragStart(e) { | |
| 32060 | var swiper = this; | |
| 32061 | var params = swiper.params.scrollbar; | |
| 32062 | var scrollbar = swiper.scrollbar; | |
| 32063 | var $wrapperEl = swiper.$wrapperEl; | |
| 32064 | var $el = scrollbar.$el; | |
| 32065 | var $dragEl = scrollbar.$dragEl; | |
| 32066 | swiper.scrollbar.isTouched = true; | |
| 32067 | e.preventDefault(); | |
| 32068 | e.stopPropagation(); | |
| 32069 | ||
| 32070 | $wrapperEl.transition(100); | |
| 32071 | $dragEl.transition(100); | |
| 32072 | scrollbar.setDragPosition(e); | |
| 32073 | ||
| 32074 | clearTimeout(swiper.scrollbar.dragTimeout); | |
| 32075 | ||
| 32076 | $el.transition(0); | |
| 32077 | if (params.hide) { | |
| 32078 | $el.css('opacity', 1); | |
| 32079 | } | |
| 32080 | swiper.emit('scrollbarDragStart', e); | |
| 32081 | }, | |
| 32082 | onDragMove: function onDragMove(e) { | |
| 32083 | var swiper = this; | |
| 32084 | var scrollbar = swiper.scrollbar; | |
| 32085 | var $wrapperEl = swiper.$wrapperEl; | |
| 32086 | var $el = scrollbar.$el; | |
| 32087 | var $dragEl = scrollbar.$dragEl; | |
| 32088 | ||
| 32089 | if (!swiper.scrollbar.isTouched) { return; } | |
| 32090 | if (e.preventDefault) { e.preventDefault(); } | |
| 32091 | else { e.returnValue = false; } | |
| 32092 | scrollbar.setDragPosition(e); | |
| 32093 | $wrapperEl.transition(0); | |
| 32094 | $el.transition(0); | |
| 32095 | $dragEl.transition(0); | |
| 32096 | swiper.emit('scrollbarDragMove', e); | |
| 32097 | }, | |
| 32098 | onDragEnd: function onDragEnd(e) { | |
| 32099 | var swiper = this; | |
| 32100 | ||
| 32101 | var params = swiper.params.scrollbar; | |
| 32102 | var scrollbar = swiper.scrollbar; | |
| 32103 | var $el = scrollbar.$el; | |
| 32104 | ||
| 32105 | if (!swiper.scrollbar.isTouched) { return; } | |
| 32106 | swiper.scrollbar.isTouched = false; | |
| 32107 | if (params.hide) { | |
| 32108 | clearTimeout(swiper.scrollbar.dragTimeout); | |
| 32109 | swiper.scrollbar.dragTimeout = Utils.nextTick(function () { | |
| 32110 | $el.css('opacity', 0); | |
| 32111 | $el.transition(400); | |
| 32112 | }, 1000); | |
| 32113 | } | |
| 32114 | swiper.emit('scrollbarDragEnd', e); | |
| 32115 | if (params.snapOnRelease) { | |
| 32116 | swiper.slideToClosest(); | |
| 32117 | } | |
| 32118 | }, | |
| 32119 | enableDraggable: function enableDraggable() { | |
| 32120 | var swiper = this; | |
| 32121 | if (!swiper.params.scrollbar.el) { return; } | |
| 32122 | var scrollbar = swiper.scrollbar; | |
| 32123 | var touchEventsTouch = swiper.touchEventsTouch; | |
| 32124 | var touchEventsDesktop = swiper.touchEventsDesktop; | |
| 32125 | var params = swiper.params; | |
| 32126 | var $el = scrollbar.$el; | |
| 32127 | var target = $el[0]; | |
| 32128 | var activeListener = Support.passiveListener && params.passiveListeners ? { passive: false, capture: false } : false; | |
| 32129 | var passiveListener = Support.passiveListener && params.passiveListeners ? { passive: true, capture: false } : false; | |
| 32130 | if (!Support.touch) { | |
| 32131 | target.addEventListener(touchEventsDesktop.start, swiper.scrollbar.onDragStart, activeListener); | |
| 32132 | doc.addEventListener(touchEventsDesktop.move, swiper.scrollbar.onDragMove, activeListener); | |
| 32133 | doc.addEventListener(touchEventsDesktop.end, swiper.scrollbar.onDragEnd, passiveListener); | |
| 32134 | } else { | |
| 32135 | target.addEventListener(touchEventsTouch.start, swiper.scrollbar.onDragStart, activeListener); | |
| 32136 | target.addEventListener(touchEventsTouch.move, swiper.scrollbar.onDragMove, activeListener); | |
| 32137 | target.addEventListener(touchEventsTouch.end, swiper.scrollbar.onDragEnd, passiveListener); | |
| 32138 | } | |
| 32139 | }, | |
| 32140 | disableDraggable: function disableDraggable() { | |
| 32141 | var swiper = this; | |
| 32142 | if (!swiper.params.scrollbar.el) { return; } | |
| 32143 | var scrollbar = swiper.scrollbar; | |
| 32144 | var touchEventsTouch = swiper.touchEventsTouch; | |
| 32145 | var touchEventsDesktop = swiper.touchEventsDesktop; | |
| 32146 | var params = swiper.params; | |
| 32147 | var $el = scrollbar.$el; | |
| 32148 | var target = $el[0]; | |
| 32149 | var activeListener = Support.passiveListener && params.passiveListeners ? { passive: false, capture: false } : false; | |
| 32150 | var passiveListener = Support.passiveListener && params.passiveListeners ? { passive: true, capture: false } : false; | |
| 32151 | if (!Support.touch) { | |
| 32152 | target.removeEventListener(touchEventsDesktop.start, swiper.scrollbar.onDragStart, activeListener); | |
| 32153 | doc.removeEventListener(touchEventsDesktop.move, swiper.scrollbar.onDragMove, activeListener); | |
| 32154 | doc.removeEventListener(touchEventsDesktop.end, swiper.scrollbar.onDragEnd, passiveListener); | |
| 32155 | } else { | |
| 32156 | target.removeEventListener(touchEventsTouch.start, swiper.scrollbar.onDragStart, activeListener); | |
| 32157 | target.removeEventListener(touchEventsTouch.move, swiper.scrollbar.onDragMove, activeListener); | |
| 32158 | target.removeEventListener(touchEventsTouch.end, swiper.scrollbar.onDragEnd, passiveListener); | |
| 32159 | } | |
| 32160 | }, | |
| 32161 | init: function init() { | |
| 32162 | var swiper = this; | |
| 32163 | if (!swiper.params.scrollbar.el) { return; } | |
| 32164 | var scrollbar = swiper.scrollbar; | |
| 32165 | var $swiperEl = swiper.$el; | |
| 32166 | var params = swiper.params.scrollbar; | |
| 32167 | ||
| 32168 | var $el = $(params.el); | |
| 32169 | if (swiper.params.uniqueNavElements && typeof params.el === 'string' && $el.length > 1 && $swiperEl.find(params.el).length === 1) { | |
| 32170 | $el = $swiperEl.find(params.el); | |
| 32171 | } | |
| 32172 | ||
| 32173 | var $dragEl = $el.find(("." + (swiper.params.scrollbar.dragClass))); | |
| 32174 | if ($dragEl.length === 0) { | |
| 32175 | $dragEl = $(("<div class=\"" + (swiper.params.scrollbar.dragClass) + "\"></div>")); | |
| 32176 | $el.append($dragEl); | |
| 32177 | } | |
| 32178 | ||
| 32179 | Utils.extend(scrollbar, { | |
| 32180 | $el: $el, | |
| 32181 | el: $el[0], | |
| 32182 | $dragEl: $dragEl, | |
| 32183 | dragEl: $dragEl[0], | |
| 32184 | }); | |
| 32185 | ||
| 32186 | if (params.draggable) { | |
| 32187 | scrollbar.enableDraggable(); | |
| 32188 | } | |
| 32189 | }, | |
| 32190 | destroy: function destroy() { | |
| 32191 | var swiper = this; | |
| 32192 | swiper.scrollbar.disableDraggable(); | |
| 32193 | }, | |
| 32194 | }; | |
| 32195 | ||
| 32196 | var Scrollbar$1 = { | |
| 32197 | name: 'scrollbar', | |
| 32198 | params: { | |
| 32199 | scrollbar: { | |
| 32200 | el: null, | |
| 32201 | dragSize: 'auto', | |
| 32202 | hide: false, | |
| 32203 | draggable: false, | |
| 32204 | snapOnRelease: true, | |
| 32205 | lockClass: 'swiper-scrollbar-lock', | |
| 32206 | dragClass: 'swiper-scrollbar-drag', | |
| 32207 | }, | |
| 32208 | }, | |
| 32209 | create: function create() { | |
| 32210 | var swiper = this; | |
| 32211 | Utils.extend(swiper, { | |
| 32212 | scrollbar: { | |
| 32213 | init: Scrollbar.init.bind(swiper), | |
| 32214 | destroy: Scrollbar.destroy.bind(swiper), | |
| 32215 | updateSize: Scrollbar.updateSize.bind(swiper), | |
| 32216 | setTranslate: Scrollbar.setTranslate.bind(swiper), | |
| 32217 | setTransition: Scrollbar.setTransition.bind(swiper), | |
| 32218 | enableDraggable: Scrollbar.enableDraggable.bind(swiper), | |
| 32219 | disableDraggable: Scrollbar.disableDraggable.bind(swiper), | |
| 32220 | setDragPosition: Scrollbar.setDragPosition.bind(swiper), | |
| 32221 | onDragStart: Scrollbar.onDragStart.bind(swiper), | |
| 32222 | onDragMove: Scrollbar.onDragMove.bind(swiper), | |
| 32223 | onDragEnd: Scrollbar.onDragEnd.bind(swiper), | |
| 32224 | isTouched: false, | |
| 32225 | timeout: null, | |
| 32226 | dragTimeout: null, | |
| 32227 | }, | |
| 32228 | }); | |
| 32229 | }, | |
| 32230 | on: { | |
| 32231 | init: function init() { | |
| 32232 | var swiper = this; | |
| 32233 | swiper.scrollbar.init(); | |
| 32234 | swiper.scrollbar.updateSize(); | |
| 32235 | swiper.scrollbar.setTranslate(); | |
| 32236 | }, | |
| 32237 | update: function update() { | |
| 32238 | var swiper = this; | |
| 32239 | swiper.scrollbar.updateSize(); | |
| 32240 | }, | |
| 32241 | resize: function resize() { | |
| 32242 | var swiper = this; | |
| 32243 | swiper.scrollbar.updateSize(); | |
| 32244 | }, | |
| 32245 | observerUpdate: function observerUpdate() { | |
| 32246 | var swiper = this; | |
| 32247 | swiper.scrollbar.updateSize(); | |
| 32248 | }, | |
| 32249 | setTranslate: function setTranslate() { | |
| 32250 | var swiper = this; | |
| 32251 | swiper.scrollbar.setTranslate(); | |
| 32252 | }, | |
| 32253 | setTransition: function setTransition(duration) { | |
| 32254 | var swiper = this; | |
| 32255 | swiper.scrollbar.setTransition(duration); | |
| 32256 | }, | |
| 32257 | destroy: function destroy() { | |
| 32258 | var swiper = this; | |
| 32259 | swiper.scrollbar.destroy(); | |
| 32260 | }, | |
| 32261 | }, | |
| 32262 | }; | |
| 32263 | ||
| 32264 | var Parallax = { | |
| 32265 | setTransform: function setTransform(el, progress) { | |
| 32266 | var swiper = this; | |
| 32267 | var rtl = swiper.rtl; | |
| 32268 | ||
| 32269 | var $el = $(el); | |
| 32270 | var rtlFactor = rtl ? -1 : 1; | |
| 32271 | ||
| 32272 | var p = $el.attr('data-swiper-parallax') || '0'; | |
| 32273 | var x = $el.attr('data-swiper-parallax-x'); | |
| 32274 | var y = $el.attr('data-swiper-parallax-y'); | |
| 32275 | var scale = $el.attr('data-swiper-parallax-scale'); | |
| 32276 | var opacity = $el.attr('data-swiper-parallax-opacity'); | |
| 32277 | ||
| 32278 | if (x || y) { | |
| 32279 | x = x || '0'; | |
| 32280 | y = y || '0'; | |
| 32281 | } else if (swiper.isHorizontal()) { | |
| 32282 | x = p; | |
| 32283 | y = '0'; | |
| 32284 | } else { | |
| 32285 | y = p; | |
| 32286 | x = '0'; | |
| 32287 | } | |
| 32288 | ||
| 32289 | if ((x).indexOf('%') >= 0) { | |
| 32290 | x = (parseInt(x, 10) * progress * rtlFactor) + "%"; | |
| 32291 | } else { | |
| 32292 | x = (x * progress * rtlFactor) + "px"; | |
| 32293 | } | |
| 32294 | if ((y).indexOf('%') >= 0) { | |
| 32295 | y = (parseInt(y, 10) * progress) + "%"; | |
| 32296 | } else { | |
| 32297 | y = (y * progress) + "px"; | |
| 32298 | } | |
| 32299 | ||
| 32300 | if (typeof opacity !== 'undefined' && opacity !== null) { | |
| 32301 | var currentOpacity = opacity - ((opacity - 1) * (1 - Math.abs(progress))); | |
| 32302 | $el[0].style.opacity = currentOpacity; | |
| 32303 | } | |
| 32304 | if (typeof scale === 'undefined' || scale === null) { | |
| 32305 | $el.transform(("translate3d(" + x + ", " + y + ", 0px)")); | |
| 32306 | } else { | |
| 32307 | var currentScale = scale - ((scale - 1) * (1 - Math.abs(progress))); | |
| 32308 | $el.transform(("translate3d(" + x + ", " + y + ", 0px) scale(" + currentScale + ")")); | |
| 32309 | } | |
| 32310 | }, | |
| 32311 | setTranslate: function setTranslate() { | |
| 32312 | var swiper = this; | |
| 32313 | var $el = swiper.$el; | |
| 32314 | var slides = swiper.slides; | |
| 32315 | var progress = swiper.progress; | |
| 32316 | var snapGrid = swiper.snapGrid; | |
| 32317 | $el.children('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]') | |
| 32318 | .each(function (index, el) { | |
| 32319 | swiper.parallax.setTransform(el, progress); | |
| 32320 | }); | |
| 32321 | slides.each(function (slideIndex, slideEl) { | |
| 32322 | var slideProgress = slideEl.progress; | |
| 32323 | if (swiper.params.slidesPerGroup > 1 && swiper.params.slidesPerView !== 'auto') { | |
| 32324 | slideProgress += Math.ceil(slideIndex / 2) - (progress * (snapGrid.length - 1)); | |
| 32325 | } | |
| 32326 | slideProgress = Math.min(Math.max(slideProgress, -1), 1); | |
| 32327 | $(slideEl).find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]') | |
| 32328 | .each(function (index, el) { | |
| 32329 | swiper.parallax.setTransform(el, slideProgress); | |
| 32330 | }); | |
| 32331 | }); | |
| 32332 | }, | |
| 32333 | setTransition: function setTransition(duration) { | |
| 32334 | if ( duration === void 0 ) duration = this.params.speed; | |
| 32335 | ||
| 32336 | var swiper = this; | |
| 32337 | var $el = swiper.$el; | |
| 32338 | $el.find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]') | |
| 32339 | .each(function (index, parallaxEl) { | |
| 32340 | var $parallaxEl = $(parallaxEl); | |
| 32341 | var parallaxDuration = parseInt($parallaxEl.attr('data-swiper-parallax-duration'), 10) || duration; | |
| 32342 | if (duration === 0) { parallaxDuration = 0; } | |
| 32343 | $parallaxEl.transition(parallaxDuration); | |
| 32344 | }); | |
| 32345 | }, | |
| 32346 | }; | |
| 32347 | ||
| 32348 | var Parallax$1 = { | |
| 32349 | name: 'parallax', | |
| 32350 | params: { | |
| 32351 | parallax: { | |
| 32352 | enabled: false, | |
| 32353 | }, | |
| 32354 | }, | |
| 32355 | create: function create() { | |
| 32356 | var swiper = this; | |
| 32357 | Utils.extend(swiper, { | |
| 32358 | parallax: { | |
| 32359 | setTransform: Parallax.setTransform.bind(swiper), | |
| 32360 | setTranslate: Parallax.setTranslate.bind(swiper), | |
| 32361 | setTransition: Parallax.setTransition.bind(swiper), | |
| 32362 | }, | |
| 32363 | }); | |
| 32364 | }, | |
| 32365 | on: { | |
| 32366 | beforeInit: function beforeInit() { | |
| 32367 | var swiper = this; | |
| 32368 | if (!swiper.params.parallax.enabled) { return; } | |
| 32369 | swiper.params.watchSlidesProgress = true; | |
| 32370 | swiper.originalParams.watchSlidesProgress = true; | |
| 32371 | }, | |
| 32372 | init: function init() { | |
| 32373 | var swiper = this; | |
| 5d51ea26 | 32374 | if (!swiper.params.parallax.enabled) { return; } |
| 5309fbda DC |
32375 | swiper.parallax.setTranslate(); |
| 32376 | }, | |
| 32377 | setTranslate: function setTranslate() { | |
| 32378 | var swiper = this; | |
| 5d51ea26 | 32379 | if (!swiper.params.parallax.enabled) { return; } |
| 5309fbda DC |
32380 | swiper.parallax.setTranslate(); |
| 32381 | }, | |
| 32382 | setTransition: function setTransition(duration) { | |
| 32383 | var swiper = this; | |
| 5d51ea26 | 32384 | if (!swiper.params.parallax.enabled) { return; } |
| 5309fbda DC |
32385 | swiper.parallax.setTransition(duration); |
| 32386 | }, | |
| 32387 | }, | |
| 32388 | }; | |
| 32389 | ||
| 32390 | var Zoom = { | |
| 32391 | // Calc Scale From Multi-touches | |
| 32392 | getDistanceBetweenTouches: function getDistanceBetweenTouches(e) { | |
| 32393 | if (e.targetTouches.length < 2) { return 1; } | |
| 32394 | var x1 = e.targetTouches[0].pageX; | |
| 32395 | var y1 = e.targetTouches[0].pageY; | |
| 32396 | var x2 = e.targetTouches[1].pageX; | |
| 32397 | var y2 = e.targetTouches[1].pageY; | |
| 32398 | var distance = Math.sqrt((Math.pow( (x2 - x1), 2 )) + (Math.pow( (y2 - y1), 2 ))); | |
| 32399 | return distance; | |
| 32400 | }, | |
| 32401 | // Events | |
| 32402 | onGestureStart: function onGestureStart(e) { | |
| 32403 | var swiper = this; | |
| 32404 | var params = swiper.params.zoom; | |
| 32405 | var zoom = swiper.zoom; | |
| 32406 | var gesture = zoom.gesture; | |
| 32407 | zoom.fakeGestureTouched = false; | |
| 32408 | zoom.fakeGestureMoved = false; | |
| 32409 | if (!Support.gestures) { | |
| 32410 | if (e.type !== 'touchstart' || (e.type === 'touchstart' && e.targetTouches.length < 2)) { | |
| 32411 | return; | |
| 32412 | } | |
| 32413 | zoom.fakeGestureTouched = true; | |
| 32414 | gesture.scaleStart = Zoom.getDistanceBetweenTouches(e); | |
| 32415 | } | |
| 32416 | if (!gesture.$slideEl || !gesture.$slideEl.length) { | |
| 32417 | gesture.$slideEl = $(e.target).closest('.swiper-slide'); | |
| 32418 | if (gesture.$slideEl.length === 0) { gesture.$slideEl = swiper.slides.eq(swiper.activeIndex); } | |
| 32419 | gesture.$imageEl = gesture.$slideEl.find('img, svg, canvas'); | |
| 32420 | gesture.$imageWrapEl = gesture.$imageEl.parent(("." + (params.containerClass))); | |
| 32421 | gesture.maxRatio = gesture.$imageWrapEl.attr('data-swiper-zoom') || params.maxRatio; | |
| 32422 | if (gesture.$imageWrapEl.length === 0) { | |
| 32423 | gesture.$imageEl = undefined; | |
| 32424 | return; | |
| 32425 | } | |
| 32426 | } | |
| 32427 | gesture.$imageEl.transition(0); | |
| 32428 | swiper.zoom.isScaling = true; | |
| 32429 | }, | |
| 32430 | onGestureChange: function onGestureChange(e) { | |
| 32431 | var swiper = this; | |
| 32432 | var params = swiper.params.zoom; | |
| 32433 | var zoom = swiper.zoom; | |
| 32434 | var gesture = zoom.gesture; | |
| 32435 | if (!Support.gestures) { | |
| 32436 | if (e.type !== 'touchmove' || (e.type === 'touchmove' && e.targetTouches.length < 2)) { | |
| 32437 | return; | |
| 32438 | } | |
| 32439 | zoom.fakeGestureMoved = true; | |
| 32440 | gesture.scaleMove = Zoom.getDistanceBetweenTouches(e); | |
| 32441 | } | |
| 32442 | if (!gesture.$imageEl || gesture.$imageEl.length === 0) { return; } | |
| 32443 | if (Support.gestures) { | |
| 32444 | zoom.scale = e.scale * zoom.currentScale; | |
| 32445 | } else { | |
| 32446 | zoom.scale = (gesture.scaleMove / gesture.scaleStart) * zoom.currentScale; | |
| 32447 | } | |
| 32448 | if (zoom.scale > gesture.maxRatio) { | |
| 32449 | zoom.scale = (gesture.maxRatio - 1) + (Math.pow( ((zoom.scale - gesture.maxRatio) + 1), 0.5 )); | |
| 32450 | } | |
| 32451 | if (zoom.scale < params.minRatio) { | |
| 32452 | zoom.scale = (params.minRatio + 1) - (Math.pow( ((params.minRatio - zoom.scale) + 1), 0.5 )); | |
| 32453 | } | |
| 32454 | gesture.$imageEl.transform(("translate3d(0,0,0) scale(" + (zoom.scale) + ")")); | |
| 32455 | }, | |
| 32456 | onGestureEnd: function onGestureEnd(e) { | |
| 32457 | var swiper = this; | |
| 32458 | var params = swiper.params.zoom; | |
| 32459 | var zoom = swiper.zoom; | |
| 32460 | var gesture = zoom.gesture; | |
| 32461 | if (!Support.gestures) { | |
| 32462 | if (!zoom.fakeGestureTouched || !zoom.fakeGestureMoved) { | |
| 32463 | return; | |
| 32464 | } | |
| 32465 | if (e.type !== 'touchend' || (e.type === 'touchend' && e.changedTouches.length < 2 && !Device.android)) { | |
| 32466 | return; | |
| 32467 | } | |
| 32468 | zoom.fakeGestureTouched = false; | |
| 32469 | zoom.fakeGestureMoved = false; | |
| 32470 | } | |
| 32471 | if (!gesture.$imageEl || gesture.$imageEl.length === 0) { return; } | |
| 32472 | zoom.scale = Math.max(Math.min(zoom.scale, gesture.maxRatio), params.minRatio); | |
| 32473 | gesture.$imageEl.transition(swiper.params.speed).transform(("translate3d(0,0,0) scale(" + (zoom.scale) + ")")); | |
| 32474 | zoom.currentScale = zoom.scale; | |
| 32475 | zoom.isScaling = false; | |
| 32476 | if (zoom.scale === 1) { gesture.$slideEl = undefined; } | |
| 32477 | }, | |
| 32478 | onTouchStart: function onTouchStart(e) { | |
| 32479 | var swiper = this; | |
| 32480 | var zoom = swiper.zoom; | |
| 32481 | var gesture = zoom.gesture; | |
| 32482 | var image = zoom.image; | |
| 32483 | if (!gesture.$imageEl || gesture.$imageEl.length === 0) { return; } | |
| 32484 | if (image.isTouched) { return; } | |
| 32485 | if (Device.android) { e.preventDefault(); } | |
| 32486 | image.isTouched = true; | |
| 32487 | image.touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 32488 | image.touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 32489 | }, | |
| 32490 | onTouchMove: function onTouchMove(e) { | |
| 32491 | var swiper = this; | |
| 32492 | var zoom = swiper.zoom; | |
| 32493 | var gesture = zoom.gesture; | |
| 32494 | var image = zoom.image; | |
| 32495 | var velocity = zoom.velocity; | |
| 32496 | if (!gesture.$imageEl || gesture.$imageEl.length === 0) { return; } | |
| 32497 | swiper.allowClick = false; | |
| 32498 | if (!image.isTouched || !gesture.$slideEl) { return; } | |
| 32499 | ||
| 32500 | if (!image.isMoved) { | |
| 32501 | image.width = gesture.$imageEl[0].offsetWidth; | |
| 32502 | image.height = gesture.$imageEl[0].offsetHeight; | |
| 32503 | image.startX = Utils.getTranslate(gesture.$imageWrapEl[0], 'x') || 0; | |
| 32504 | image.startY = Utils.getTranslate(gesture.$imageWrapEl[0], 'y') || 0; | |
| 32505 | gesture.slideWidth = gesture.$slideEl[0].offsetWidth; | |
| 32506 | gesture.slideHeight = gesture.$slideEl[0].offsetHeight; | |
| 32507 | gesture.$imageWrapEl.transition(0); | |
| 32508 | if (swiper.rtl) { | |
| 32509 | image.startX = -image.startX; | |
| 32510 | image.startY = -image.startY; | |
| 32511 | } | |
| 32512 | } | |
| 32513 | // Define if we need image drag | |
| 32514 | var scaledWidth = image.width * zoom.scale; | |
| 32515 | var scaledHeight = image.height * zoom.scale; | |
| 32516 | ||
| 32517 | if (scaledWidth < gesture.slideWidth && scaledHeight < gesture.slideHeight) { return; } | |
| 32518 | ||
| 32519 | image.minX = Math.min(((gesture.slideWidth / 2) - (scaledWidth / 2)), 0); | |
| 32520 | image.maxX = -image.minX; | |
| 32521 | image.minY = Math.min(((gesture.slideHeight / 2) - (scaledHeight / 2)), 0); | |
| 32522 | image.maxY = -image.minY; | |
| 32523 | ||
| 32524 | image.touchesCurrent.x = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 32525 | image.touchesCurrent.y = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 32526 | ||
| 32527 | if (!image.isMoved && !zoom.isScaling) { | |
| 32528 | if ( | |
| 32529 | swiper.isHorizontal() | |
| 32530 | && ( | |
| 32531 | (Math.floor(image.minX) === Math.floor(image.startX) && image.touchesCurrent.x < image.touchesStart.x) | |
| 32532 | || (Math.floor(image.maxX) === Math.floor(image.startX) && image.touchesCurrent.x > image.touchesStart.x) | |
| 32533 | ) | |
| 32534 | ) { | |
| 32535 | image.isTouched = false; | |
| 32536 | return; | |
| 32537 | } if ( | |
| 32538 | !swiper.isHorizontal() | |
| 32539 | && ( | |
| 32540 | (Math.floor(image.minY) === Math.floor(image.startY) && image.touchesCurrent.y < image.touchesStart.y) | |
| 32541 | || (Math.floor(image.maxY) === Math.floor(image.startY) && image.touchesCurrent.y > image.touchesStart.y) | |
| 32542 | ) | |
| 32543 | ) { | |
| 32544 | image.isTouched = false; | |
| 32545 | return; | |
| 32546 | } | |
| 32547 | } | |
| 32548 | e.preventDefault(); | |
| 32549 | e.stopPropagation(); | |
| 32550 | ||
| 32551 | image.isMoved = true; | |
| 32552 | image.currentX = (image.touchesCurrent.x - image.touchesStart.x) + image.startX; | |
| 32553 | image.currentY = (image.touchesCurrent.y - image.touchesStart.y) + image.startY; | |
| 32554 | ||
| 32555 | if (image.currentX < image.minX) { | |
| 32556 | image.currentX = (image.minX + 1) - (Math.pow( ((image.minX - image.currentX) + 1), 0.8 )); | |
| 32557 | } | |
| 32558 | if (image.currentX > image.maxX) { | |
| 32559 | image.currentX = (image.maxX - 1) + (Math.pow( ((image.currentX - image.maxX) + 1), 0.8 )); | |
| 32560 | } | |
| 32561 | ||
| 32562 | if (image.currentY < image.minY) { | |
| 32563 | image.currentY = (image.minY + 1) - (Math.pow( ((image.minY - image.currentY) + 1), 0.8 )); | |
| 32564 | } | |
| 32565 | if (image.currentY > image.maxY) { | |
| 32566 | image.currentY = (image.maxY - 1) + (Math.pow( ((image.currentY - image.maxY) + 1), 0.8 )); | |
| 32567 | } | |
| 32568 | ||
| 32569 | // Velocity | |
| 32570 | if (!velocity.prevPositionX) { velocity.prevPositionX = image.touchesCurrent.x; } | |
| 32571 | if (!velocity.prevPositionY) { velocity.prevPositionY = image.touchesCurrent.y; } | |
| 32572 | if (!velocity.prevTime) { velocity.prevTime = Date.now(); } | |
| 32573 | velocity.x = (image.touchesCurrent.x - velocity.prevPositionX) / (Date.now() - velocity.prevTime) / 2; | |
| 32574 | velocity.y = (image.touchesCurrent.y - velocity.prevPositionY) / (Date.now() - velocity.prevTime) / 2; | |
| 32575 | if (Math.abs(image.touchesCurrent.x - velocity.prevPositionX) < 2) { velocity.x = 0; } | |
| 32576 | if (Math.abs(image.touchesCurrent.y - velocity.prevPositionY) < 2) { velocity.y = 0; } | |
| 32577 | velocity.prevPositionX = image.touchesCurrent.x; | |
| 32578 | velocity.prevPositionY = image.touchesCurrent.y; | |
| 32579 | velocity.prevTime = Date.now(); | |
| 32580 | ||
| 32581 | gesture.$imageWrapEl.transform(("translate3d(" + (image.currentX) + "px, " + (image.currentY) + "px,0)")); | |
| 32582 | }, | |
| 32583 | onTouchEnd: function onTouchEnd() { | |
| 32584 | var swiper = this; | |
| 32585 | var zoom = swiper.zoom; | |
| 32586 | var gesture = zoom.gesture; | |
| 32587 | var image = zoom.image; | |
| 32588 | var velocity = zoom.velocity; | |
| 32589 | if (!gesture.$imageEl || gesture.$imageEl.length === 0) { return; } | |
| 32590 | if (!image.isTouched || !image.isMoved) { | |
| 32591 | image.isTouched = false; | |
| 32592 | image.isMoved = false; | |
| 32593 | return; | |
| 32594 | } | |
| 32595 | image.isTouched = false; | |
| 32596 | image.isMoved = false; | |
| 32597 | var momentumDurationX = 300; | |
| 32598 | var momentumDurationY = 300; | |
| 32599 | var momentumDistanceX = velocity.x * momentumDurationX; | |
| 32600 | var newPositionX = image.currentX + momentumDistanceX; | |
| 32601 | var momentumDistanceY = velocity.y * momentumDurationY; | |
| 32602 | var newPositionY = image.currentY + momentumDistanceY; | |
| 32603 | ||
| 32604 | // Fix duration | |
| 32605 | if (velocity.x !== 0) { momentumDurationX = Math.abs((newPositionX - image.currentX) / velocity.x); } | |
| 32606 | if (velocity.y !== 0) { momentumDurationY = Math.abs((newPositionY - image.currentY) / velocity.y); } | |
| 32607 | var momentumDuration = Math.max(momentumDurationX, momentumDurationY); | |
| 32608 | ||
| 32609 | image.currentX = newPositionX; | |
| 32610 | image.currentY = newPositionY; | |
| 32611 | ||
| 32612 | // Define if we need image drag | |
| 32613 | var scaledWidth = image.width * zoom.scale; | |
| 32614 | var scaledHeight = image.height * zoom.scale; | |
| 32615 | image.minX = Math.min(((gesture.slideWidth / 2) - (scaledWidth / 2)), 0); | |
| 32616 | image.maxX = -image.minX; | |
| 32617 | image.minY = Math.min(((gesture.slideHeight / 2) - (scaledHeight / 2)), 0); | |
| 32618 | image.maxY = -image.minY; | |
| 32619 | image.currentX = Math.max(Math.min(image.currentX, image.maxX), image.minX); | |
| 32620 | image.currentY = Math.max(Math.min(image.currentY, image.maxY), image.minY); | |
| 32621 | ||
| 32622 | gesture.$imageWrapEl.transition(momentumDuration).transform(("translate3d(" + (image.currentX) + "px, " + (image.currentY) + "px,0)")); | |
| 32623 | }, | |
| 32624 | onTransitionEnd: function onTransitionEnd() { | |
| 32625 | var swiper = this; | |
| 32626 | var zoom = swiper.zoom; | |
| 32627 | var gesture = zoom.gesture; | |
| 32628 | if (gesture.$slideEl && swiper.previousIndex !== swiper.activeIndex) { | |
| 32629 | gesture.$imageEl.transform('translate3d(0,0,0) scale(1)'); | |
| 32630 | gesture.$imageWrapEl.transform('translate3d(0,0,0)'); | |
| 32631 | ||
| 32632 | zoom.scale = 1; | |
| 32633 | zoom.currentScale = 1; | |
| 32634 | ||
| 32635 | gesture.$slideEl = undefined; | |
| 32636 | gesture.$imageEl = undefined; | |
| 32637 | gesture.$imageWrapEl = undefined; | |
| 32638 | } | |
| 32639 | }, | |
| 32640 | // Toggle Zoom | |
| 32641 | toggle: function toggle(e) { | |
| 32642 | var swiper = this; | |
| 32643 | var zoom = swiper.zoom; | |
| 32644 | ||
| 32645 | if (zoom.scale && zoom.scale !== 1) { | |
| 32646 | // Zoom Out | |
| 32647 | zoom.out(); | |
| 32648 | } else { | |
| 32649 | // Zoom In | |
| 32650 | zoom.in(e); | |
| 32651 | } | |
| 32652 | }, | |
| 32653 | in: function in$1(e) { | |
| 32654 | var swiper = this; | |
| 32655 | ||
| 32656 | var zoom = swiper.zoom; | |
| 32657 | var params = swiper.params.zoom; | |
| 32658 | var gesture = zoom.gesture; | |
| 32659 | var image = zoom.image; | |
| 32660 | ||
| 32661 | if (!gesture.$slideEl) { | |
| 32662 | gesture.$slideEl = swiper.clickedSlide ? $(swiper.clickedSlide) : swiper.slides.eq(swiper.activeIndex); | |
| 32663 | gesture.$imageEl = gesture.$slideEl.find('img, svg, canvas'); | |
| 32664 | gesture.$imageWrapEl = gesture.$imageEl.parent(("." + (params.containerClass))); | |
| 32665 | } | |
| 32666 | if (!gesture.$imageEl || gesture.$imageEl.length === 0) { return; } | |
| 32667 | ||
| 32668 | gesture.$slideEl.addClass(("" + (params.zoomedSlideClass))); | |
| 32669 | ||
| 32670 | var touchX; | |
| 32671 | var touchY; | |
| 32672 | var offsetX; | |
| 32673 | var offsetY; | |
| 32674 | var diffX; | |
| 32675 | var diffY; | |
| 32676 | var translateX; | |
| 32677 | var translateY; | |
| 32678 | var imageWidth; | |
| 32679 | var imageHeight; | |
| 32680 | var scaledWidth; | |
| 32681 | var scaledHeight; | |
| 32682 | var translateMinX; | |
| 32683 | var translateMinY; | |
| 32684 | var translateMaxX; | |
| 32685 | var translateMaxY; | |
| 32686 | var slideWidth; | |
| 32687 | var slideHeight; | |
| 32688 | ||
| 32689 | if (typeof image.touchesStart.x === 'undefined' && e) { | |
| 32690 | touchX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX; | |
| 32691 | touchY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY; | |
| 32692 | } else { | |
| 32693 | touchX = image.touchesStart.x; | |
| 32694 | touchY = image.touchesStart.y; | |
| 32695 | } | |
| 32696 | ||
| 32697 | zoom.scale = gesture.$imageWrapEl.attr('data-swiper-zoom') || params.maxRatio; | |
| 32698 | zoom.currentScale = gesture.$imageWrapEl.attr('data-swiper-zoom') || params.maxRatio; | |
| 32699 | if (e) { | |
| 32700 | slideWidth = gesture.$slideEl[0].offsetWidth; | |
| 32701 | slideHeight = gesture.$slideEl[0].offsetHeight; | |
| 32702 | offsetX = gesture.$slideEl.offset().left; | |
| 32703 | offsetY = gesture.$slideEl.offset().top; | |
| 32704 | diffX = (offsetX + (slideWidth / 2)) - touchX; | |
| 32705 | diffY = (offsetY + (slideHeight / 2)) - touchY; | |
| 32706 | ||
| 32707 | imageWidth = gesture.$imageEl[0].offsetWidth; | |
| 32708 | imageHeight = gesture.$imageEl[0].offsetHeight; | |
| 32709 | scaledWidth = imageWidth * zoom.scale; | |
| 32710 | scaledHeight = imageHeight * zoom.scale; | |
| 32711 | ||
| 32712 | translateMinX = Math.min(((slideWidth / 2) - (scaledWidth / 2)), 0); | |
| 32713 | translateMinY = Math.min(((slideHeight / 2) - (scaledHeight / 2)), 0); | |
| 32714 | translateMaxX = -translateMinX; | |
| 32715 | translateMaxY = -translateMinY; | |
| 32716 | ||
| 32717 | translateX = diffX * zoom.scale; | |
| 32718 | translateY = diffY * zoom.scale; | |
| 32719 | ||
| 32720 | if (translateX < translateMinX) { | |
| 32721 | translateX = translateMinX; | |
| 32722 | } | |
| 32723 | if (translateX > translateMaxX) { | |
| 32724 | translateX = translateMaxX; | |
| 32725 | } | |
| 32726 | ||
| 32727 | if (translateY < translateMinY) { | |
| 32728 | translateY = translateMinY; | |
| 32729 | } | |
| 32730 | if (translateY > translateMaxY) { | |
| 32731 | translateY = translateMaxY; | |
| 32732 | } | |
| 32733 | } else { | |
| 32734 | translateX = 0; | |
| 32735 | translateY = 0; | |
| 32736 | } | |
| 32737 | gesture.$imageWrapEl.transition(300).transform(("translate3d(" + translateX + "px, " + translateY + "px,0)")); | |
| 32738 | gesture.$imageEl.transition(300).transform(("translate3d(0,0,0) scale(" + (zoom.scale) + ")")); | |
| 32739 | }, | |
| 32740 | out: function out() { | |
| 32741 | var swiper = this; | |
| 32742 | ||
| 32743 | var zoom = swiper.zoom; | |
| 32744 | var params = swiper.params.zoom; | |
| 32745 | var gesture = zoom.gesture; | |
| 32746 | ||
| 32747 | if (!gesture.$slideEl) { | |
| 32748 | gesture.$slideEl = swiper.clickedSlide ? $(swiper.clickedSlide) : swiper.slides.eq(swiper.activeIndex); | |
| 32749 | gesture.$imageEl = gesture.$slideEl.find('img, svg, canvas'); | |
| 32750 | gesture.$imageWrapEl = gesture.$imageEl.parent(("." + (params.containerClass))); | |
| 32751 | } | |
| 32752 | if (!gesture.$imageEl || gesture.$imageEl.length === 0) { return; } | |
| 32753 | ||
| 32754 | zoom.scale = 1; | |
| 32755 | zoom.currentScale = 1; | |
| 32756 | gesture.$imageWrapEl.transition(300).transform('translate3d(0,0,0)'); | |
| 32757 | gesture.$imageEl.transition(300).transform('translate3d(0,0,0) scale(1)'); | |
| 32758 | gesture.$slideEl.removeClass(("" + (params.zoomedSlideClass))); | |
| 32759 | gesture.$slideEl = undefined; | |
| 32760 | }, | |
| 32761 | // Attach/Detach Events | |
| 32762 | enable: function enable() { | |
| 32763 | var swiper = this; | |
| 32764 | var zoom = swiper.zoom; | |
| 32765 | if (zoom.enabled) { return; } | |
| 32766 | zoom.enabled = true; | |
| 32767 | ||
| 32768 | var passiveListener = swiper.touchEvents.start === 'touchstart' && Support.passiveListener && swiper.params.passiveListeners ? { passive: true, capture: false } : false; | |
| 32769 | ||
| 32770 | // Scale image | |
| 32771 | if (Support.gestures) { | |
| 32772 | swiper.$wrapperEl.on('gesturestart', '.swiper-slide', zoom.onGestureStart, passiveListener); | |
| 32773 | swiper.$wrapperEl.on('gesturechange', '.swiper-slide', zoom.onGestureChange, passiveListener); | |
| 32774 | swiper.$wrapperEl.on('gestureend', '.swiper-slide', zoom.onGestureEnd, passiveListener); | |
| 32775 | } else if (swiper.touchEvents.start === 'touchstart') { | |
| 32776 | swiper.$wrapperEl.on(swiper.touchEvents.start, '.swiper-slide', zoom.onGestureStart, passiveListener); | |
| 32777 | swiper.$wrapperEl.on(swiper.touchEvents.move, '.swiper-slide', zoom.onGestureChange, passiveListener); | |
| 32778 | swiper.$wrapperEl.on(swiper.touchEvents.end, '.swiper-slide', zoom.onGestureEnd, passiveListener); | |
| 32779 | } | |
| 32780 | ||
| 32781 | // Move image | |
| 32782 | swiper.$wrapperEl.on(swiper.touchEvents.move, ("." + (swiper.params.zoom.containerClass)), zoom.onTouchMove); | |
| 32783 | }, | |
| 32784 | disable: function disable() { | |
| 32785 | var swiper = this; | |
| 32786 | var zoom = swiper.zoom; | |
| 32787 | if (!zoom.enabled) { return; } | |
| 32788 | ||
| 32789 | swiper.zoom.enabled = false; | |
| 32790 | ||
| 32791 | var passiveListener = swiper.touchEvents.start === 'touchstart' && Support.passiveListener && swiper.params.passiveListeners ? { passive: true, capture: false } : false; | |
| 32792 | ||
| 32793 | // Scale image | |
| 32794 | if (Support.gestures) { | |
| 32795 | swiper.$wrapperEl.off('gesturestart', '.swiper-slide', zoom.onGestureStart, passiveListener); | |
| 32796 | swiper.$wrapperEl.off('gesturechange', '.swiper-slide', zoom.onGestureChange, passiveListener); | |
| 32797 | swiper.$wrapperEl.off('gestureend', '.swiper-slide', zoom.onGestureEnd, passiveListener); | |
| 32798 | } else if (swiper.touchEvents.start === 'touchstart') { | |
| 32799 | swiper.$wrapperEl.off(swiper.touchEvents.start, '.swiper-slide', zoom.onGestureStart, passiveListener); | |
| 32800 | swiper.$wrapperEl.off(swiper.touchEvents.move, '.swiper-slide', zoom.onGestureChange, passiveListener); | |
| 32801 | swiper.$wrapperEl.off(swiper.touchEvents.end, '.swiper-slide', zoom.onGestureEnd, passiveListener); | |
| 32802 | } | |
| 32803 | ||
| 32804 | // Move image | |
| 32805 | swiper.$wrapperEl.off(swiper.touchEvents.move, ("." + (swiper.params.zoom.containerClass)), zoom.onTouchMove); | |
| 32806 | }, | |
| 32807 | }; | |
| 32808 | ||
| 32809 | var Zoom$1 = { | |
| 32810 | name: 'zoom', | |
| 32811 | params: { | |
| 32812 | zoom: { | |
| 32813 | enabled: false, | |
| 32814 | maxRatio: 3, | |
| 32815 | minRatio: 1, | |
| 32816 | toggle: true, | |
| 32817 | containerClass: 'swiper-zoom-container', | |
| 32818 | zoomedSlideClass: 'swiper-slide-zoomed', | |
| 32819 | }, | |
| 32820 | }, | |
| 32821 | create: function create() { | |
| 32822 | var swiper = this; | |
| 32823 | var zoom = { | |
| 32824 | enabled: false, | |
| 32825 | scale: 1, | |
| 32826 | currentScale: 1, | |
| 32827 | isScaling: false, | |
| 32828 | gesture: { | |
| 32829 | $slideEl: undefined, | |
| 32830 | slideWidth: undefined, | |
| 32831 | slideHeight: undefined, | |
| 32832 | $imageEl: undefined, | |
| 32833 | $imageWrapEl: undefined, | |
| 32834 | maxRatio: 3, | |
| 32835 | }, | |
| 32836 | image: { | |
| 32837 | isTouched: undefined, | |
| 32838 | isMoved: undefined, | |
| 32839 | currentX: undefined, | |
| 32840 | currentY: undefined, | |
| 32841 | minX: undefined, | |
| 32842 | minY: undefined, | |
| 32843 | maxX: undefined, | |
| 32844 | maxY: undefined, | |
| 32845 | width: undefined, | |
| 32846 | height: undefined, | |
| 32847 | startX: undefined, | |
| 32848 | startY: undefined, | |
| 32849 | touchesStart: {}, | |
| 32850 | touchesCurrent: {}, | |
| 32851 | }, | |
| 32852 | velocity: { | |
| 32853 | x: undefined, | |
| 32854 | y: undefined, | |
| 32855 | prevPositionX: undefined, | |
| 32856 | prevPositionY: undefined, | |
| 32857 | prevTime: undefined, | |
| 32858 | }, | |
| 32859 | }; | |
| 32860 | ||
| 32861 | ('onGestureStart onGestureChange onGestureEnd onTouchStart onTouchMove onTouchEnd onTransitionEnd toggle enable disable in out').split(' ').forEach(function (methodName) { | |
| 32862 | zoom[methodName] = Zoom[methodName].bind(swiper); | |
| 32863 | }); | |
| 32864 | Utils.extend(swiper, { | |
| 32865 | zoom: zoom, | |
| 32866 | }); | |
| 32867 | ||
| 32868 | var scale = 1; | |
| 32869 | Object.defineProperty(swiper.zoom, 'scale', { | |
| 32870 | get: function get() { | |
| 32871 | return scale; | |
| 32872 | }, | |
| 32873 | set: function set(value) { | |
| 32874 | if (scale !== value) { | |
| 32875 | var imageEl = swiper.zoom.gesture.$imageEl ? swiper.zoom.gesture.$imageEl[0] : undefined; | |
| 32876 | var slideEl = swiper.zoom.gesture.$slideEl ? swiper.zoom.gesture.$slideEl[0] : undefined; | |
| 32877 | swiper.emit('zoomChange', value, imageEl, slideEl); | |
| 32878 | } | |
| 32879 | scale = value; | |
| 32880 | }, | |
| 32881 | }); | |
| 32882 | }, | |
| 32883 | on: { | |
| 32884 | init: function init() { | |
| 32885 | var swiper = this; | |
| 32886 | if (swiper.params.zoom.enabled) { | |
| 32887 | swiper.zoom.enable(); | |
| 32888 | } | |
| 32889 | }, | |
| 32890 | destroy: function destroy() { | |
| 32891 | var swiper = this; | |
| 32892 | swiper.zoom.disable(); | |
| 32893 | }, | |
| 32894 | touchStart: function touchStart(e) { | |
| 32895 | var swiper = this; | |
| 32896 | if (!swiper.zoom.enabled) { return; } | |
| 32897 | swiper.zoom.onTouchStart(e); | |
| 32898 | }, | |
| 32899 | touchEnd: function touchEnd(e) { | |
| 32900 | var swiper = this; | |
| 32901 | if (!swiper.zoom.enabled) { return; } | |
| 32902 | swiper.zoom.onTouchEnd(e); | |
| 32903 | }, | |
| 32904 | doubleTap: function doubleTap(e) { | |
| 32905 | var swiper = this; | |
| 32906 | if (swiper.params.zoom.enabled && swiper.zoom.enabled && swiper.params.zoom.toggle) { | |
| 32907 | swiper.zoom.toggle(e); | |
| 32908 | } | |
| 32909 | }, | |
| 32910 | transitionEnd: function transitionEnd() { | |
| 32911 | var swiper = this; | |
| 32912 | if (swiper.zoom.enabled && swiper.params.zoom.enabled) { | |
| 32913 | swiper.zoom.onTransitionEnd(); | |
| 32914 | } | |
| 32915 | }, | |
| 32916 | }, | |
| 32917 | }; | |
| 32918 | ||
| 32919 | var Lazy$2 = { | |
| 32920 | loadInSlide: function loadInSlide(index, loadInDuplicate) { | |
| 32921 | if ( loadInDuplicate === void 0 ) loadInDuplicate = true; | |
| 32922 | ||
| 32923 | var swiper = this; | |
| 32924 | var params = swiper.params.lazy; | |
| 32925 | if (typeof index === 'undefined') { return; } | |
| 32926 | if (swiper.slides.length === 0) { return; } | |
| 32927 | var isVirtual = swiper.virtual && swiper.params.virtual.enabled; | |
| 32928 | ||
| 32929 | var $slideEl = isVirtual | |
| 32930 | ? swiper.$wrapperEl.children(("." + (swiper.params.slideClass) + "[data-swiper-slide-index=\"" + index + "\"]")) | |
| 32931 | : swiper.slides.eq(index); | |
| 32932 | ||
| 32933 | var $images = $slideEl.find(("." + (params.elementClass) + ":not(." + (params.loadedClass) + "):not(." + (params.loadingClass) + ")")); | |
| 32934 | if ($slideEl.hasClass(params.elementClass) && !$slideEl.hasClass(params.loadedClass) && !$slideEl.hasClass(params.loadingClass)) { | |
| 32935 | $images = $images.add($slideEl[0]); | |
| 32936 | } | |
| 32937 | if ($images.length === 0) { return; } | |
| 32938 | ||
| 32939 | $images.each(function (imageIndex, imageEl) { | |
| 32940 | var $imageEl = $(imageEl); | |
| 32941 | $imageEl.addClass(params.loadingClass); | |
| 32942 | ||
| 32943 | var background = $imageEl.attr('data-background'); | |
| 32944 | var src = $imageEl.attr('data-src'); | |
| 32945 | var srcset = $imageEl.attr('data-srcset'); | |
| 32946 | var sizes = $imageEl.attr('data-sizes'); | |
| 32947 | ||
| 32948 | swiper.loadImage($imageEl[0], (src || background), srcset, sizes, false, function () { | |
| 32949 | if (typeof swiper === 'undefined' || swiper === null || !swiper || (swiper && !swiper.params) || swiper.destroyed) { return; } | |
| 32950 | if (background) { | |
| 32951 | $imageEl.css('background-image', ("url(\"" + background + "\")")); | |
| 32952 | $imageEl.removeAttr('data-background'); | |
| 32953 | } else { | |
| 32954 | if (srcset) { | |
| 32955 | $imageEl.attr('srcset', srcset); | |
| 32956 | $imageEl.removeAttr('data-srcset'); | |
| 32957 | } | |
| 32958 | if (sizes) { | |
| 32959 | $imageEl.attr('sizes', sizes); | |
| 32960 | $imageEl.removeAttr('data-sizes'); | |
| 32961 | } | |
| 32962 | if (src) { | |
| 32963 | $imageEl.attr('src', src); | |
| 32964 | $imageEl.removeAttr('data-src'); | |
| 32965 | } | |
| 32966 | } | |
| 32967 | ||
| 32968 | $imageEl.addClass(params.loadedClass).removeClass(params.loadingClass); | |
| 32969 | $slideEl.find(("." + (params.preloaderClass))).remove(); | |
| 32970 | if (swiper.params.loop && loadInDuplicate) { | |
| 32971 | var slideOriginalIndex = $slideEl.attr('data-swiper-slide-index'); | |
| 32972 | if ($slideEl.hasClass(swiper.params.slideDuplicateClass)) { | |
| 32973 | var originalSlide = swiper.$wrapperEl.children(("[data-swiper-slide-index=\"" + slideOriginalIndex + "\"]:not(." + (swiper.params.slideDuplicateClass) + ")")); | |
| 32974 | swiper.lazy.loadInSlide(originalSlide.index(), false); | |
| 32975 | } else { | |
| 32976 | var duplicatedSlide = swiper.$wrapperEl.children(("." + (swiper.params.slideDuplicateClass) + "[data-swiper-slide-index=\"" + slideOriginalIndex + "\"]")); | |
| 32977 | swiper.lazy.loadInSlide(duplicatedSlide.index(), false); | |
| 32978 | } | |
| 32979 | } | |
| 32980 | swiper.emit('lazyImageReady', $slideEl[0], $imageEl[0]); | |
| 32981 | }); | |
| 32982 | ||
| 32983 | swiper.emit('lazyImageLoad', $slideEl[0], $imageEl[0]); | |
| 32984 | }); | |
| 32985 | }, | |
| 32986 | load: function load() { | |
| 32987 | var swiper = this; | |
| 32988 | var $wrapperEl = swiper.$wrapperEl; | |
| 32989 | var swiperParams = swiper.params; | |
| 32990 | var slides = swiper.slides; | |
| 32991 | var activeIndex = swiper.activeIndex; | |
| 32992 | var isVirtual = swiper.virtual && swiperParams.virtual.enabled; | |
| 32993 | var params = swiperParams.lazy; | |
| 32994 | ||
| 32995 | var slidesPerView = swiperParams.slidesPerView; | |
| 32996 | if (slidesPerView === 'auto') { | |
| 32997 | slidesPerView = 0; | |
| 32998 | } | |
| 32999 | ||
| 33000 | function slideExist(index) { | |
| 33001 | if (isVirtual) { | |
| 33002 | if ($wrapperEl.children(("." + (swiperParams.slideClass) + "[data-swiper-slide-index=\"" + index + "\"]")).length) { | |
| 33003 | return true; | |
| 33004 | } | |
| 33005 | } else if (slides[index]) { return true; } | |
| 33006 | return false; | |
| 33007 | } | |
| 33008 | function slideIndex(slideEl) { | |
| 33009 | if (isVirtual) { | |
| 33010 | return $(slideEl).attr('data-swiper-slide-index'); | |
| 33011 | } | |
| 33012 | return $(slideEl).index(); | |
| 33013 | } | |
| 33014 | ||
| 33015 | if (!swiper.lazy.initialImageLoaded) { swiper.lazy.initialImageLoaded = true; } | |
| 33016 | if (swiper.params.watchSlidesVisibility) { | |
| 33017 | $wrapperEl.children(("." + (swiperParams.slideVisibleClass))).each(function (elIndex, slideEl) { | |
| 33018 | var index = isVirtual ? $(slideEl).attr('data-swiper-slide-index') : $(slideEl).index(); | |
| 33019 | swiper.lazy.loadInSlide(index); | |
| 33020 | }); | |
| 33021 | } else if (slidesPerView > 1) { | |
| 33022 | for (var i = activeIndex; i < activeIndex + slidesPerView; i += 1) { | |
| 33023 | if (slideExist(i)) { swiper.lazy.loadInSlide(i); } | |
| 33024 | } | |
| 33025 | } else { | |
| 33026 | swiper.lazy.loadInSlide(activeIndex); | |
| 33027 | } | |
| 33028 | if (params.loadPrevNext) { | |
| 33029 | if (slidesPerView > 1 || (params.loadPrevNextAmount && params.loadPrevNextAmount > 1)) { | |
| 33030 | var amount = params.loadPrevNextAmount; | |
| 33031 | var spv = slidesPerView; | |
| 33032 | var maxIndex = Math.min(activeIndex + spv + Math.max(amount, spv), slides.length); | |
| 33033 | var minIndex = Math.max(activeIndex - Math.max(spv, amount), 0); | |
| 33034 | // Next Slides | |
| 33035 | for (var i$1 = activeIndex + slidesPerView; i$1 < maxIndex; i$1 += 1) { | |
| 33036 | if (slideExist(i$1)) { swiper.lazy.loadInSlide(i$1); } | |
| 33037 | } | |
| 33038 | // Prev Slides | |
| 33039 | for (var i$2 = minIndex; i$2 < activeIndex; i$2 += 1) { | |
| 33040 | if (slideExist(i$2)) { swiper.lazy.loadInSlide(i$2); } | |
| 33041 | } | |
| 33042 | } else { | |
| 33043 | var nextSlide = $wrapperEl.children(("." + (swiperParams.slideNextClass))); | |
| 33044 | if (nextSlide.length > 0) { swiper.lazy.loadInSlide(slideIndex(nextSlide)); } | |
| 33045 | ||
| 33046 | var prevSlide = $wrapperEl.children(("." + (swiperParams.slidePrevClass))); | |
| 33047 | if (prevSlide.length > 0) { swiper.lazy.loadInSlide(slideIndex(prevSlide)); } | |
| 33048 | } | |
| 33049 | } | |
| 33050 | }, | |
| 33051 | }; | |
| 33052 | ||
| 33053 | var Lazy$3 = { | |
| 33054 | name: 'lazy', | |
| 33055 | params: { | |
| 33056 | lazy: { | |
| 33057 | enabled: false, | |
| 33058 | loadPrevNext: false, | |
| 33059 | loadPrevNextAmount: 1, | |
| 33060 | loadOnTransitionStart: false, | |
| 33061 | ||
| 33062 | elementClass: 'swiper-lazy', | |
| 33063 | loadingClass: 'swiper-lazy-loading', | |
| 33064 | loadedClass: 'swiper-lazy-loaded', | |
| 33065 | preloaderClass: 'swiper-lazy-preloader', | |
| 33066 | }, | |
| 33067 | }, | |
| 33068 | create: function create() { | |
| 33069 | var swiper = this; | |
| 33070 | Utils.extend(swiper, { | |
| 33071 | lazy: { | |
| 33072 | initialImageLoaded: false, | |
| 33073 | load: Lazy$2.load.bind(swiper), | |
| 33074 | loadInSlide: Lazy$2.loadInSlide.bind(swiper), | |
| 33075 | }, | |
| 33076 | }); | |
| 33077 | }, | |
| 33078 | on: { | |
| 33079 | beforeInit: function beforeInit() { | |
| 33080 | var swiper = this; | |
| 33081 | if (swiper.params.lazy.enabled && swiper.params.preloadImages) { | |
| 33082 | swiper.params.preloadImages = false; | |
| 33083 | } | |
| 33084 | }, | |
| 33085 | init: function init() { | |
| 33086 | var swiper = this; | |
| 33087 | if (swiper.params.lazy.enabled && !swiper.params.loop && swiper.params.initialSlide === 0) { | |
| 33088 | swiper.lazy.load(); | |
| 33089 | } | |
| 33090 | }, | |
| 33091 | scroll: function scroll() { | |
| 33092 | var swiper = this; | |
| 33093 | if (swiper.params.freeMode && !swiper.params.freeModeSticky) { | |
| 33094 | swiper.lazy.load(); | |
| 33095 | } | |
| 33096 | }, | |
| 33097 | resize: function resize() { | |
| 33098 | var swiper = this; | |
| 33099 | if (swiper.params.lazy.enabled) { | |
| 33100 | swiper.lazy.load(); | |
| 33101 | } | |
| 33102 | }, | |
| 33103 | scrollbarDragMove: function scrollbarDragMove() { | |
| 33104 | var swiper = this; | |
| 33105 | if (swiper.params.lazy.enabled) { | |
| 33106 | swiper.lazy.load(); | |
| 33107 | } | |
| 33108 | }, | |
| 33109 | transitionStart: function transitionStart() { | |
| 33110 | var swiper = this; | |
| 33111 | if (swiper.params.lazy.enabled) { | |
| 33112 | if (swiper.params.lazy.loadOnTransitionStart || (!swiper.params.lazy.loadOnTransitionStart && !swiper.lazy.initialImageLoaded)) { | |
| 33113 | swiper.lazy.load(); | |
| 33114 | } | |
| 33115 | } | |
| 33116 | }, | |
| 33117 | transitionEnd: function transitionEnd() { | |
| 33118 | var swiper = this; | |
| 33119 | if (swiper.params.lazy.enabled && !swiper.params.lazy.loadOnTransitionStart) { | |
| 33120 | swiper.lazy.load(); | |
| 33121 | } | |
| 33122 | }, | |
| 33123 | }, | |
| 33124 | }; | |
| 33125 | ||
| 33126 | /* eslint no-bitwise: ["error", { "allow": [">>"] }] */ | |
| 33127 | ||
| 33128 | var Controller = { | |
| 33129 | LinearSpline: function LinearSpline(x, y) { | |
| 33130 | var binarySearch = (function search() { | |
| 33131 | var maxIndex; | |
| 33132 | var minIndex; | |
| 33133 | var guess; | |
| 33134 | return function (array, val) { | |
| 33135 | minIndex = -1; | |
| 33136 | maxIndex = array.length; | |
| 33137 | while (maxIndex - minIndex > 1) { | |
| 33138 | guess = maxIndex + minIndex >> 1; | |
| 33139 | if (array[guess] <= val) { | |
| 33140 | minIndex = guess; | |
| 33141 | } else { | |
| 33142 | maxIndex = guess; | |
| 33143 | } | |
| 33144 | } | |
| 33145 | return maxIndex; | |
| 33146 | }; | |
| 33147 | }()); | |
| 33148 | this.x = x; | |
| 33149 | this.y = y; | |
| 33150 | this.lastIndex = x.length - 1; | |
| 33151 | // Given an x value (x2), return the expected y2 value: | |
| 33152 | // (x1,y1) is the known point before given value, | |
| 33153 | // (x3,y3) is the known point after given value. | |
| 33154 | var i1; | |
| 33155 | var i3; | |
| 33156 | ||
| 33157 | this.interpolate = function interpolate(x2) { | |
| 33158 | if (!x2) { return 0; } | |
| 33159 | ||
| 33160 | // Get the indexes of x1 and x3 (the array indexes before and after given x2): | |
| 33161 | i3 = binarySearch(this.x, x2); | |
| 33162 | i1 = i3 - 1; | |
| 33163 | ||
| 33164 | // We have our indexes i1 & i3, so we can calculate already: | |
| 33165 | // y2 := ((x2−x1) × (y3−y1)) ÷ (x3−x1) + y1 | |
| 33166 | return (((x2 - this.x[i1]) * (this.y[i3] - this.y[i1])) / (this.x[i3] - this.x[i1])) + this.y[i1]; | |
| 33167 | }; | |
| 33168 | return this; | |
| 33169 | }, | |
| 33170 | // xxx: for now i will just save one spline function to to | |
| 33171 | getInterpolateFunction: function getInterpolateFunction(c) { | |
| 33172 | var swiper = this; | |
| 33173 | if (!swiper.controller.spline) { | |
| 33174 | swiper.controller.spline = swiper.params.loop | |
| 33175 | ? new Controller.LinearSpline(swiper.slidesGrid, c.slidesGrid) | |
| 33176 | : new Controller.LinearSpline(swiper.snapGrid, c.snapGrid); | |
| 33177 | } | |
| 33178 | }, | |
| 33179 | setTranslate: function setTranslate(setTranslate$1, byController) { | |
| 33180 | var swiper = this; | |
| 33181 | var controlled = swiper.controller.control; | |
| 33182 | var multiplier; | |
| 33183 | var controlledTranslate; | |
| 33184 | function setControlledTranslate(c) { | |
| 33185 | // this will create an Interpolate function based on the snapGrids | |
| 33186 | // x is the Grid of the scrolled scroller and y will be the controlled scroller | |
| 33187 | // it makes sense to create this only once and recall it for the interpolation | |
| 33188 | // the function does a lot of value caching for performance | |
| 33189 | var translate = swiper.rtlTranslate ? -swiper.translate : swiper.translate; | |
| 33190 | if (swiper.params.controller.by === 'slide') { | |
| 33191 | swiper.controller.getInterpolateFunction(c); | |
| 33192 | // i am not sure why the values have to be multiplicated this way, tried to invert the snapGrid | |
| 33193 | // but it did not work out | |
| 33194 | controlledTranslate = -swiper.controller.spline.interpolate(-translate); | |
| 33195 | } | |
| 33196 | ||
| 33197 | if (!controlledTranslate || swiper.params.controller.by === 'container') { | |
| 33198 | multiplier = (c.maxTranslate() - c.minTranslate()) / (swiper.maxTranslate() - swiper.minTranslate()); | |
| 33199 | controlledTranslate = ((translate - swiper.minTranslate()) * multiplier) + c.minTranslate(); | |
| 33200 | } | |
| 33201 | ||
| 33202 | if (swiper.params.controller.inverse) { | |
| 33203 | controlledTranslate = c.maxTranslate() - controlledTranslate; | |
| 33204 | } | |
| 33205 | c.updateProgress(controlledTranslate); | |
| 33206 | c.setTranslate(controlledTranslate, swiper); | |
| 33207 | c.updateActiveIndex(); | |
| 33208 | c.updateSlidesClasses(); | |
| 33209 | } | |
| 33210 | if (Array.isArray(controlled)) { | |
| 33211 | for (var i = 0; i < controlled.length; i += 1) { | |
| 33212 | if (controlled[i] !== byController && controlled[i] instanceof Swiper) { | |
| 33213 | setControlledTranslate(controlled[i]); | |
| 33214 | } | |
| 33215 | } | |
| 33216 | } else if (controlled instanceof Swiper && byController !== controlled) { | |
| 33217 | setControlledTranslate(controlled); | |
| 33218 | } | |
| 33219 | }, | |
| 33220 | setTransition: function setTransition(duration, byController) { | |
| 33221 | var swiper = this; | |
| 33222 | var controlled = swiper.controller.control; | |
| 33223 | var i; | |
| 33224 | function setControlledTransition(c) { | |
| 33225 | c.setTransition(duration, swiper); | |
| 33226 | if (duration !== 0) { | |
| 33227 | c.transitionStart(); | |
| 33228 | if (c.params.autoHeight) { | |
| 33229 | Utils.nextTick(function () { | |
| 33230 | c.updateAutoHeight(); | |
| 33231 | }); | |
| 33232 | } | |
| 33233 | c.$wrapperEl.transitionEnd(function () { | |
| 33234 | if (!controlled) { return; } | |
| 33235 | if (c.params.loop && swiper.params.controller.by === 'slide') { | |
| 33236 | c.loopFix(); | |
| 33237 | } | |
| 33238 | c.transitionEnd(); | |
| 33239 | }); | |
| 33240 | } | |
| 33241 | } | |
| 33242 | if (Array.isArray(controlled)) { | |
| 33243 | for (i = 0; i < controlled.length; i += 1) { | |
| 33244 | if (controlled[i] !== byController && controlled[i] instanceof Swiper) { | |
| 33245 | setControlledTransition(controlled[i]); | |
| 33246 | } | |
| 33247 | } | |
| 33248 | } else if (controlled instanceof Swiper && byController !== controlled) { | |
| 33249 | setControlledTransition(controlled); | |
| 33250 | } | |
| 33251 | }, | |
| 33252 | }; | |
| 33253 | var Controller$1 = { | |
| 33254 | name: 'controller', | |
| 33255 | params: { | |
| 33256 | controller: { | |
| 33257 | control: undefined, | |
| 33258 | inverse: false, | |
| 33259 | by: 'slide', // or 'container' | |
| 33260 | }, | |
| 33261 | }, | |
| 33262 | create: function create() { | |
| 33263 | var swiper = this; | |
| 33264 | Utils.extend(swiper, { | |
| 33265 | controller: { | |
| 33266 | control: swiper.params.controller.control, | |
| 33267 | getInterpolateFunction: Controller.getInterpolateFunction.bind(swiper), | |
| 33268 | setTranslate: Controller.setTranslate.bind(swiper), | |
| 33269 | setTransition: Controller.setTransition.bind(swiper), | |
| 33270 | }, | |
| 33271 | }); | |
| 33272 | }, | |
| 33273 | on: { | |
| 33274 | update: function update() { | |
| 33275 | var swiper = this; | |
| 33276 | if (!swiper.controller.control) { return; } | |
| 33277 | if (swiper.controller.spline) { | |
| 33278 | swiper.controller.spline = undefined; | |
| 33279 | delete swiper.controller.spline; | |
| 33280 | } | |
| 33281 | }, | |
| 33282 | resize: function resize() { | |
| 33283 | var swiper = this; | |
| 33284 | if (!swiper.controller.control) { return; } | |
| 33285 | if (swiper.controller.spline) { | |
| 33286 | swiper.controller.spline = undefined; | |
| 33287 | delete swiper.controller.spline; | |
| 33288 | } | |
| 33289 | }, | |
| 33290 | observerUpdate: function observerUpdate() { | |
| 33291 | var swiper = this; | |
| 33292 | if (!swiper.controller.control) { return; } | |
| 33293 | if (swiper.controller.spline) { | |
| 33294 | swiper.controller.spline = undefined; | |
| 33295 | delete swiper.controller.spline; | |
| 33296 | } | |
| 33297 | }, | |
| 33298 | setTranslate: function setTranslate(translate, byController) { | |
| 33299 | var swiper = this; | |
| 33300 | if (!swiper.controller.control) { return; } | |
| 33301 | swiper.controller.setTranslate(translate, byController); | |
| 33302 | }, | |
| 33303 | setTransition: function setTransition(duration, byController) { | |
| 33304 | var swiper = this; | |
| 33305 | if (!swiper.controller.control) { return; } | |
| 33306 | swiper.controller.setTransition(duration, byController); | |
| 33307 | }, | |
| 33308 | }, | |
| 33309 | }; | |
| 33310 | ||
| 33311 | var a11y = { | |
| 33312 | makeElFocusable: function makeElFocusable($el) { | |
| 33313 | $el.attr('tabIndex', '0'); | |
| 33314 | return $el; | |
| 33315 | }, | |
| 33316 | addElRole: function addElRole($el, role) { | |
| 33317 | $el.attr('role', role); | |
| 33318 | return $el; | |
| 33319 | }, | |
| 33320 | addElLabel: function addElLabel($el, label) { | |
| 33321 | $el.attr('aria-label', label); | |
| 33322 | return $el; | |
| 33323 | }, | |
| 33324 | disableEl: function disableEl($el) { | |
| 33325 | $el.attr('aria-disabled', true); | |
| 33326 | return $el; | |
| 33327 | }, | |
| 33328 | enableEl: function enableEl($el) { | |
| 33329 | $el.attr('aria-disabled', false); | |
| 33330 | return $el; | |
| 33331 | }, | |
| 33332 | onEnterKey: function onEnterKey(e) { | |
| 33333 | var swiper = this; | |
| 33334 | var params = swiper.params.a11y; | |
| 33335 | if (e.keyCode !== 13) { return; } | |
| 33336 | var $targetEl = $(e.target); | |
| 33337 | if (swiper.navigation && swiper.navigation.$nextEl && $targetEl.is(swiper.navigation.$nextEl)) { | |
| 33338 | if (!(swiper.isEnd && !swiper.params.loop)) { | |
| 33339 | swiper.slideNext(); | |
| 33340 | } | |
| 33341 | if (swiper.isEnd) { | |
| 33342 | swiper.a11y.notify(params.lastSlideMessage); | |
| 33343 | } else { | |
| 33344 | swiper.a11y.notify(params.nextSlideMessage); | |
| 33345 | } | |
| 33346 | } | |
| 33347 | if (swiper.navigation && swiper.navigation.$prevEl && $targetEl.is(swiper.navigation.$prevEl)) { | |
| 33348 | if (!(swiper.isBeginning && !swiper.params.loop)) { | |
| 33349 | swiper.slidePrev(); | |
| 33350 | } | |
| 33351 | if (swiper.isBeginning) { | |
| 33352 | swiper.a11y.notify(params.firstSlideMessage); | |
| 33353 | } else { | |
| 33354 | swiper.a11y.notify(params.prevSlideMessage); | |
| 33355 | } | |
| 33356 | } | |
| 33357 | if (swiper.pagination && $targetEl.is(("." + (swiper.params.pagination.bulletClass)))) { | |
| 33358 | $targetEl[0].click(); | |
| 33359 | } | |
| 33360 | }, | |
| 33361 | notify: function notify(message) { | |
| 33362 | var swiper = this; | |
| 33363 | var notification = swiper.a11y.liveRegion; | |
| 33364 | if (notification.length === 0) { return; } | |
| 33365 | notification.html(''); | |
| 33366 | notification.html(message); | |
| 33367 | }, | |
| 33368 | updateNavigation: function updateNavigation() { | |
| 33369 | var swiper = this; | |
| 33370 | ||
| 33371 | if (swiper.params.loop) { return; } | |
| 33372 | var ref = swiper.navigation; | |
| 33373 | var $nextEl = ref.$nextEl; | |
| 33374 | var $prevEl = ref.$prevEl; | |
| 33375 | ||
| 33376 | if ($prevEl && $prevEl.length > 0) { | |
| 33377 | if (swiper.isBeginning) { | |
| 33378 | swiper.a11y.disableEl($prevEl); | |
| 33379 | } else { | |
| 33380 | swiper.a11y.enableEl($prevEl); | |
| 33381 | } | |
| 33382 | } | |
| 33383 | if ($nextEl && $nextEl.length > 0) { | |
| 33384 | if (swiper.isEnd) { | |
| 33385 | swiper.a11y.disableEl($nextEl); | |
| 33386 | } else { | |
| 33387 | swiper.a11y.enableEl($nextEl); | |
| 33388 | } | |
| 33389 | } | |
| 33390 | }, | |
| 33391 | updatePagination: function updatePagination() { | |
| 33392 | var swiper = this; | |
| 33393 | var params = swiper.params.a11y; | |
| 33394 | if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) { | |
| 33395 | swiper.pagination.bullets.each(function (bulletIndex, bulletEl) { | |
| 33396 | var $bulletEl = $(bulletEl); | |
| 33397 | swiper.a11y.makeElFocusable($bulletEl); | |
| 33398 | swiper.a11y.addElRole($bulletEl, 'button'); | |
| 33399 | swiper.a11y.addElLabel($bulletEl, params.paginationBulletMessage.replace(/{{index}}/, $bulletEl.index() + 1)); | |
| 33400 | }); | |
| 33401 | } | |
| 33402 | }, | |
| 33403 | init: function init() { | |
| 33404 | var swiper = this; | |
| 33405 | ||
| 33406 | swiper.$el.append(swiper.a11y.liveRegion); | |
| 33407 | ||
| 33408 | // Navigation | |
| 33409 | var params = swiper.params.a11y; | |
| 33410 | var $nextEl; | |
| 33411 | var $prevEl; | |
| 33412 | if (swiper.navigation && swiper.navigation.$nextEl) { | |
| 33413 | $nextEl = swiper.navigation.$nextEl; | |
| 33414 | } | |
| 33415 | if (swiper.navigation && swiper.navigation.$prevEl) { | |
| 33416 | $prevEl = swiper.navigation.$prevEl; | |
| 33417 | } | |
| 33418 | if ($nextEl) { | |
| 33419 | swiper.a11y.makeElFocusable($nextEl); | |
| 33420 | swiper.a11y.addElRole($nextEl, 'button'); | |
| 33421 | swiper.a11y.addElLabel($nextEl, params.nextSlideMessage); | |
| 33422 | $nextEl.on('keydown', swiper.a11y.onEnterKey); | |
| 33423 | } | |
| 33424 | if ($prevEl) { | |
| 33425 | swiper.a11y.makeElFocusable($prevEl); | |
| 33426 | swiper.a11y.addElRole($prevEl, 'button'); | |
| 33427 | swiper.a11y.addElLabel($prevEl, params.prevSlideMessage); | |
| 33428 | $prevEl.on('keydown', swiper.a11y.onEnterKey); | |
| 33429 | } | |
| 33430 | ||
| 33431 | // Pagination | |
| 33432 | if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) { | |
| 33433 | swiper.pagination.$el.on('keydown', ("." + (swiper.params.pagination.bulletClass)), swiper.a11y.onEnterKey); | |
| 33434 | } | |
| 33435 | }, | |
| 33436 | destroy: function destroy() { | |
| 33437 | var swiper = this; | |
| 33438 | if (swiper.a11y.liveRegion && swiper.a11y.liveRegion.length > 0) { swiper.a11y.liveRegion.remove(); } | |
| 33439 | ||
| 33440 | var $nextEl; | |
| 33441 | var $prevEl; | |
| 33442 | if (swiper.navigation && swiper.navigation.$nextEl) { | |
| 33443 | $nextEl = swiper.navigation.$nextEl; | |
| 33444 | } | |
| 33445 | if (swiper.navigation && swiper.navigation.$prevEl) { | |
| 33446 | $prevEl = swiper.navigation.$prevEl; | |
| 33447 | } | |
| 33448 | if ($nextEl) { | |
| 33449 | $nextEl.off('keydown', swiper.a11y.onEnterKey); | |
| 33450 | } | |
| 33451 | if ($prevEl) { | |
| 33452 | $prevEl.off('keydown', swiper.a11y.onEnterKey); | |
| 33453 | } | |
| 33454 | ||
| 33455 | // Pagination | |
| 33456 | if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) { | |
| 33457 | swiper.pagination.$el.off('keydown', ("." + (swiper.params.pagination.bulletClass)), swiper.a11y.onEnterKey); | |
| 33458 | } | |
| 33459 | }, | |
| 33460 | }; | |
| 33461 | var A11y = { | |
| 33462 | name: 'a11y', | |
| 33463 | params: { | |
| 33464 | a11y: { | |
| 33465 | enabled: true, | |
| 33466 | notificationClass: 'swiper-notification', | |
| 33467 | prevSlideMessage: 'Previous slide', | |
| 33468 | nextSlideMessage: 'Next slide', | |
| 33469 | firstSlideMessage: 'This is the first slide', | |
| 33470 | lastSlideMessage: 'This is the last slide', | |
| 33471 | paginationBulletMessage: 'Go to slide {{index}}', | |
| 33472 | }, | |
| 33473 | }, | |
| 33474 | create: function create() { | |
| 33475 | var swiper = this; | |
| 33476 | Utils.extend(swiper, { | |
| 33477 | a11y: { | |
| 33478 | liveRegion: $(("<span class=\"" + (swiper.params.a11y.notificationClass) + "\" aria-live=\"assertive\" aria-atomic=\"true\"></span>")), | |
| 33479 | }, | |
| 33480 | }); | |
| 33481 | Object.keys(a11y).forEach(function (methodName) { | |
| 33482 | swiper.a11y[methodName] = a11y[methodName].bind(swiper); | |
| 33483 | }); | |
| 33484 | }, | |
| 33485 | on: { | |
| 33486 | init: function init() { | |
| 33487 | var swiper = this; | |
| 33488 | if (!swiper.params.a11y.enabled) { return; } | |
| 33489 | swiper.a11y.init(); | |
| 33490 | swiper.a11y.updateNavigation(); | |
| 33491 | }, | |
| 33492 | toEdge: function toEdge() { | |
| 33493 | var swiper = this; | |
| 33494 | if (!swiper.params.a11y.enabled) { return; } | |
| 33495 | swiper.a11y.updateNavigation(); | |
| 33496 | }, | |
| 33497 | fromEdge: function fromEdge() { | |
| 33498 | var swiper = this; | |
| 33499 | if (!swiper.params.a11y.enabled) { return; } | |
| 33500 | swiper.a11y.updateNavigation(); | |
| 33501 | }, | |
| 33502 | paginationUpdate: function paginationUpdate() { | |
| 33503 | var swiper = this; | |
| 33504 | if (!swiper.params.a11y.enabled) { return; } | |
| 33505 | swiper.a11y.updatePagination(); | |
| 33506 | }, | |
| 33507 | destroy: function destroy() { | |
| 33508 | var swiper = this; | |
| 33509 | if (!swiper.params.a11y.enabled) { return; } | |
| 33510 | swiper.a11y.destroy(); | |
| 33511 | }, | |
| 33512 | }, | |
| 33513 | }; | |
| 33514 | ||
| 33515 | /* eslint no-underscore-dangle: "off" */ | |
| 33516 | ||
| 33517 | var Autoplay = { | |
| 33518 | run: function run() { | |
| 33519 | var swiper = this; | |
| 33520 | var $activeSlideEl = swiper.slides.eq(swiper.activeIndex); | |
| 33521 | var delay = swiper.params.autoplay.delay; | |
| 33522 | if ($activeSlideEl.attr('data-swiper-autoplay')) { | |
| 33523 | delay = $activeSlideEl.attr('data-swiper-autoplay') || swiper.params.autoplay.delay; | |
| 33524 | } | |
| 33525 | swiper.autoplay.timeout = Utils.nextTick(function () { | |
| 33526 | if (swiper.params.autoplay.reverseDirection) { | |
| 33527 | if (swiper.params.loop) { | |
| 33528 | swiper.loopFix(); | |
| 33529 | swiper.slidePrev(swiper.params.speed, true, true); | |
| 33530 | swiper.emit('autoplay'); | |
| 33531 | } else if (!swiper.isBeginning) { | |
| 33532 | swiper.slidePrev(swiper.params.speed, true, true); | |
| 33533 | swiper.emit('autoplay'); | |
| 33534 | } else if (!swiper.params.autoplay.stopOnLastSlide) { | |
| 33535 | swiper.slideTo(swiper.slides.length - 1, swiper.params.speed, true, true); | |
| 33536 | swiper.emit('autoplay'); | |
| 33537 | } else { | |
| 33538 | swiper.autoplay.stop(); | |
| 33539 | } | |
| 33540 | } else if (swiper.params.loop) { | |
| 33541 | swiper.loopFix(); | |
| 33542 | swiper.slideNext(swiper.params.speed, true, true); | |
| 33543 | swiper.emit('autoplay'); | |
| 33544 | } else if (!swiper.isEnd) { | |
| 33545 | swiper.slideNext(swiper.params.speed, true, true); | |
| 33546 | swiper.emit('autoplay'); | |
| 33547 | } else if (!swiper.params.autoplay.stopOnLastSlide) { | |
| 33548 | swiper.slideTo(0, swiper.params.speed, true, true); | |
| 33549 | swiper.emit('autoplay'); | |
| 33550 | } else { | |
| 33551 | swiper.autoplay.stop(); | |
| 33552 | } | |
| 33553 | }, delay); | |
| 33554 | }, | |
| 33555 | start: function start() { | |
| 33556 | var swiper = this; | |
| 33557 | if (typeof swiper.autoplay.timeout !== 'undefined') { return false; } | |
| 33558 | if (swiper.autoplay.running) { return false; } | |
| 33559 | swiper.autoplay.running = true; | |
| 33560 | swiper.emit('autoplayStart'); | |
| 33561 | swiper.autoplay.run(); | |
| 33562 | return true; | |
| 33563 | }, | |
| 33564 | stop: function stop() { | |
| 33565 | var swiper = this; | |
| 33566 | if (!swiper.autoplay.running) { return false; } | |
| 33567 | if (typeof swiper.autoplay.timeout === 'undefined') { return false; } | |
| 33568 | ||
| 33569 | if (swiper.autoplay.timeout) { | |
| 33570 | clearTimeout(swiper.autoplay.timeout); | |
| 33571 | swiper.autoplay.timeout = undefined; | |
| 33572 | } | |
| 33573 | swiper.autoplay.running = false; | |
| 33574 | swiper.emit('autoplayStop'); | |
| 33575 | return true; | |
| 33576 | }, | |
| 33577 | pause: function pause(speed) { | |
| 33578 | var swiper = this; | |
| 33579 | if (!swiper.autoplay.running) { return; } | |
| 33580 | if (swiper.autoplay.paused) { return; } | |
| 33581 | if (swiper.autoplay.timeout) { clearTimeout(swiper.autoplay.timeout); } | |
| 33582 | swiper.autoplay.paused = true; | |
| 33583 | if (speed === 0 || !swiper.params.autoplay.waitForTransition) { | |
| 33584 | swiper.autoplay.paused = false; | |
| 33585 | swiper.autoplay.run(); | |
| 33586 | } else { | |
| 33587 | swiper.$wrapperEl[0].addEventListener('transitionend', swiper.autoplay.onTransitionEnd); | |
| 33588 | swiper.$wrapperEl[0].addEventListener('webkitTransitionEnd', swiper.autoplay.onTransitionEnd); | |
| 33589 | } | |
| 33590 | }, | |
| 33591 | }; | |
| 33592 | ||
| 33593 | var Autoplay$1 = { | |
| 33594 | name: 'autoplay', | |
| 33595 | params: { | |
| 33596 | autoplay: { | |
| 33597 | enabled: false, | |
| 33598 | delay: 3000, | |
| 33599 | waitForTransition: true, | |
| 33600 | disableOnInteraction: true, | |
| 33601 | stopOnLastSlide: false, | |
| 33602 | reverseDirection: false, | |
| 33603 | }, | |
| 33604 | }, | |
| 33605 | create: function create() { | |
| 33606 | var swiper = this; | |
| 33607 | Utils.extend(swiper, { | |
| 33608 | autoplay: { | |
| 33609 | running: false, | |
| 33610 | paused: false, | |
| 33611 | run: Autoplay.run.bind(swiper), | |
| 33612 | start: Autoplay.start.bind(swiper), | |
| 33613 | stop: Autoplay.stop.bind(swiper), | |
| 33614 | pause: Autoplay.pause.bind(swiper), | |
| 33615 | onTransitionEnd: function onTransitionEnd(e) { | |
| 33616 | if (!swiper || swiper.destroyed || !swiper.$wrapperEl) { return; } | |
| 33617 | if (e.target !== this) { return; } | |
| 33618 | swiper.$wrapperEl[0].removeEventListener('transitionend', swiper.autoplay.onTransitionEnd); | |
| 33619 | swiper.$wrapperEl[0].removeEventListener('webkitTransitionEnd', swiper.autoplay.onTransitionEnd); | |
| 33620 | swiper.autoplay.paused = false; | |
| 33621 | if (!swiper.autoplay.running) { | |
| 33622 | swiper.autoplay.stop(); | |
| 33623 | } else { | |
| 33624 | swiper.autoplay.run(); | |
| 33625 | } | |
| 33626 | }, | |
| 33627 | }, | |
| 33628 | }); | |
| 33629 | }, | |
| 33630 | on: { | |
| 33631 | init: function init() { | |
| 33632 | var swiper = this; | |
| 33633 | if (swiper.params.autoplay.enabled) { | |
| 33634 | swiper.autoplay.start(); | |
| 33635 | } | |
| 33636 | }, | |
| 33637 | beforeTransitionStart: function beforeTransitionStart(speed, internal) { | |
| 33638 | var swiper = this; | |
| 33639 | if (swiper.autoplay.running) { | |
| 33640 | if (internal || !swiper.params.autoplay.disableOnInteraction) { | |
| 33641 | swiper.autoplay.pause(speed); | |
| 33642 | } else { | |
| 33643 | swiper.autoplay.stop(); | |
| 33644 | } | |
| 33645 | } | |
| 33646 | }, | |
| 33647 | sliderFirstMove: function sliderFirstMove() { | |
| 33648 | var swiper = this; | |
| 33649 | if (swiper.autoplay.running) { | |
| 33650 | if (swiper.params.autoplay.disableOnInteraction) { | |
| 33651 | swiper.autoplay.stop(); | |
| 33652 | } else { | |
| 33653 | swiper.autoplay.pause(); | |
| 33654 | } | |
| 33655 | } | |
| 33656 | }, | |
| 33657 | destroy: function destroy() { | |
| 33658 | var swiper = this; | |
| 33659 | if (swiper.autoplay.running) { | |
| 33660 | swiper.autoplay.stop(); | |
| 33661 | } | |
| 33662 | }, | |
| 33663 | }, | |
| 33664 | }; | |
| 33665 | ||
| 33666 | var Fade = { | |
| 33667 | setTranslate: function setTranslate() { | |
| 33668 | var swiper = this; | |
| 33669 | var slides = swiper.slides; | |
| 33670 | for (var i = 0; i < slides.length; i += 1) { | |
| 33671 | var $slideEl = swiper.slides.eq(i); | |
| 33672 | var offset = $slideEl[0].swiperSlideOffset; | |
| 33673 | var tx = -offset; | |
| 33674 | if (!swiper.params.virtualTranslate) { tx -= swiper.translate; } | |
| 33675 | var ty = 0; | |
| 33676 | if (!swiper.isHorizontal()) { | |
| 33677 | ty = tx; | |
| 33678 | tx = 0; | |
| 33679 | } | |
| 33680 | var slideOpacity = swiper.params.fadeEffect.crossFade | |
| 33681 | ? Math.max(1 - Math.abs($slideEl[0].progress), 0) | |
| 33682 | : 1 + Math.min(Math.max($slideEl[0].progress, -1), 0); | |
| 33683 | $slideEl | |
| 33684 | .css({ | |
| 33685 | opacity: slideOpacity, | |
| 33686 | }) | |
| 33687 | .transform(("translate3d(" + tx + "px, " + ty + "px, 0px)")); | |
| 33688 | } | |
| 33689 | }, | |
| 33690 | setTransition: function setTransition(duration) { | |
| 33691 | var swiper = this; | |
| 33692 | var slides = swiper.slides; | |
| 33693 | var $wrapperEl = swiper.$wrapperEl; | |
| 33694 | slides.transition(duration); | |
| 33695 | if (swiper.params.virtualTranslate && duration !== 0) { | |
| 33696 | var eventTriggered = false; | |
| 33697 | slides.transitionEnd(function () { | |
| 33698 | if (eventTriggered) { return; } | |
| 33699 | if (!swiper || swiper.destroyed) { return; } | |
| 33700 | eventTriggered = true; | |
| 33701 | swiper.animating = false; | |
| 33702 | var triggerEvents = ['webkitTransitionEnd', 'transitionend']; | |
| 33703 | for (var i = 0; i < triggerEvents.length; i += 1) { | |
| 33704 | $wrapperEl.trigger(triggerEvents[i]); | |
| 33705 | } | |
| 33706 | }); | |
| 33707 | } | |
| 33708 | }, | |
| 33709 | }; | |
| 33710 | ||
| 33711 | var EffectFade = { | |
| 33712 | name: 'effect-fade', | |
| 33713 | params: { | |
| 33714 | fadeEffect: { | |
| 33715 | crossFade: false, | |
| 33716 | }, | |
| 33717 | }, | |
| 33718 | create: function create() { | |
| 33719 | var swiper = this; | |
| 33720 | Utils.extend(swiper, { | |
| 33721 | fadeEffect: { | |
| 33722 | setTranslate: Fade.setTranslate.bind(swiper), | |
| 33723 | setTransition: Fade.setTransition.bind(swiper), | |
| 33724 | }, | |
| 33725 | }); | |
| 33726 | }, | |
| 33727 | on: { | |
| 33728 | beforeInit: function beforeInit() { | |
| 33729 | var swiper = this; | |
| 33730 | if (swiper.params.effect !== 'fade') { return; } | |
| 33731 | swiper.classNames.push(((swiper.params.containerModifierClass) + "fade")); | |
| 33732 | var overwriteParams = { | |
| 33733 | slidesPerView: 1, | |
| 33734 | slidesPerColumn: 1, | |
| 33735 | slidesPerGroup: 1, | |
| 33736 | watchSlidesProgress: true, | |
| 33737 | spaceBetween: 0, | |
| 33738 | virtualTranslate: true, | |
| 33739 | }; | |
| 33740 | Utils.extend(swiper.params, overwriteParams); | |
| 33741 | Utils.extend(swiper.originalParams, overwriteParams); | |
| 33742 | }, | |
| 33743 | setTranslate: function setTranslate() { | |
| 33744 | var swiper = this; | |
| 33745 | if (swiper.params.effect !== 'fade') { return; } | |
| 33746 | swiper.fadeEffect.setTranslate(); | |
| 33747 | }, | |
| 33748 | setTransition: function setTransition(duration) { | |
| 33749 | var swiper = this; | |
| 33750 | if (swiper.params.effect !== 'fade') { return; } | |
| 33751 | swiper.fadeEffect.setTransition(duration); | |
| 33752 | }, | |
| 33753 | }, | |
| 33754 | }; | |
| 33755 | ||
| 33756 | var Cube = { | |
| 33757 | setTranslate: function setTranslate() { | |
| 33758 | var swiper = this; | |
| 33759 | var $el = swiper.$el; | |
| 33760 | var $wrapperEl = swiper.$wrapperEl; | |
| 33761 | var slides = swiper.slides; | |
| 33762 | var swiperWidth = swiper.width; | |
| 33763 | var swiperHeight = swiper.height; | |
| 33764 | var rtl = swiper.rtlTranslate; | |
| 33765 | var swiperSize = swiper.size; | |
| 33766 | var params = swiper.params.cubeEffect; | |
| 33767 | var isHorizontal = swiper.isHorizontal(); | |
| 33768 | var isVirtual = swiper.virtual && swiper.params.virtual.enabled; | |
| 33769 | var wrapperRotate = 0; | |
| 33770 | var $cubeShadowEl; | |
| 33771 | if (params.shadow) { | |
| 33772 | if (isHorizontal) { | |
| 33773 | $cubeShadowEl = $wrapperEl.find('.swiper-cube-shadow'); | |
| 33774 | if ($cubeShadowEl.length === 0) { | |
| 33775 | $cubeShadowEl = $('<div class="swiper-cube-shadow"></div>'); | |
| 33776 | $wrapperEl.append($cubeShadowEl); | |
| 33777 | } | |
| 33778 | $cubeShadowEl.css({ height: (swiperWidth + "px") }); | |
| 33779 | } else { | |
| 33780 | $cubeShadowEl = $el.find('.swiper-cube-shadow'); | |
| 33781 | if ($cubeShadowEl.length === 0) { | |
| 33782 | $cubeShadowEl = $('<div class="swiper-cube-shadow"></div>'); | |
| 33783 | $el.append($cubeShadowEl); | |
| 33784 | } | |
| 33785 | } | |
| 33786 | } | |
| 33787 | for (var i = 0; i < slides.length; i += 1) { | |
| 33788 | var $slideEl = slides.eq(i); | |
| 33789 | var slideIndex = i; | |
| 33790 | if (isVirtual) { | |
| 33791 | slideIndex = parseInt($slideEl.attr('data-swiper-slide-index'), 10); | |
| 33792 | } | |
| 33793 | var slideAngle = slideIndex * 90; | |
| 33794 | var round = Math.floor(slideAngle / 360); | |
| 33795 | if (rtl) { | |
| 33796 | slideAngle = -slideAngle; | |
| 33797 | round = Math.floor(-slideAngle / 360); | |
| 33798 | } | |
| 33799 | var progress = Math.max(Math.min($slideEl[0].progress, 1), -1); | |
| 33800 | var tx = 0; | |
| 33801 | var ty = 0; | |
| 33802 | var tz = 0; | |
| 33803 | if (slideIndex % 4 === 0) { | |
| 33804 | tx = -round * 4 * swiperSize; | |
| 33805 | tz = 0; | |
| 33806 | } else if ((slideIndex - 1) % 4 === 0) { | |
| 33807 | tx = 0; | |
| 33808 | tz = -round * 4 * swiperSize; | |
| 33809 | } else if ((slideIndex - 2) % 4 === 0) { | |
| 33810 | tx = swiperSize + (round * 4 * swiperSize); | |
| 33811 | tz = swiperSize; | |
| 33812 | } else if ((slideIndex - 3) % 4 === 0) { | |
| 33813 | tx = -swiperSize; | |
| 33814 | tz = (3 * swiperSize) + (swiperSize * 4 * round); | |
| 33815 | } | |
| 33816 | if (rtl) { | |
| 33817 | tx = -tx; | |
| 33818 | } | |
| 33819 | ||
| 33820 | if (!isHorizontal) { | |
| 33821 | ty = tx; | |
| 33822 | tx = 0; | |
| 33823 | } | |
| 33824 | ||
| 33825 | var transform = "rotateX(" + (isHorizontal ? 0 : -slideAngle) + "deg) rotateY(" + (isHorizontal ? slideAngle : 0) + "deg) translate3d(" + tx + "px, " + ty + "px, " + tz + "px)"; | |
| 33826 | if (progress <= 1 && progress > -1) { | |
| 33827 | wrapperRotate = (slideIndex * 90) + (progress * 90); | |
| 33828 | if (rtl) { wrapperRotate = (-slideIndex * 90) - (progress * 90); } | |
| 33829 | } | |
| 33830 | $slideEl.transform(transform); | |
| 33831 | if (params.slideShadows) { | |
| 33832 | // Set shadows | |
| 33833 | var shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top'); | |
| 33834 | var shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom'); | |
| 33835 | if (shadowBefore.length === 0) { | |
| 33836 | shadowBefore = $(("<div class=\"swiper-slide-shadow-" + (isHorizontal ? 'left' : 'top') + "\"></div>")); | |
| 33837 | $slideEl.append(shadowBefore); | |
| 33838 | } | |
| 33839 | if (shadowAfter.length === 0) { | |
| 33840 | shadowAfter = $(("<div class=\"swiper-slide-shadow-" + (isHorizontal ? 'right' : 'bottom') + "\"></div>")); | |
| 33841 | $slideEl.append(shadowAfter); | |
| 33842 | } | |
| 33843 | if (shadowBefore.length) { shadowBefore[0].style.opacity = Math.max(-progress, 0); } | |
| 33844 | if (shadowAfter.length) { shadowAfter[0].style.opacity = Math.max(progress, 0); } | |
| 33845 | } | |
| 33846 | } | |
| 33847 | $wrapperEl.css({ | |
| 33848 | '-webkit-transform-origin': ("50% 50% -" + (swiperSize / 2) + "px"), | |
| 33849 | '-moz-transform-origin': ("50% 50% -" + (swiperSize / 2) + "px"), | |
| 33850 | '-ms-transform-origin': ("50% 50% -" + (swiperSize / 2) + "px"), | |
| 33851 | 'transform-origin': ("50% 50% -" + (swiperSize / 2) + "px"), | |
| 33852 | }); | |
| 33853 | ||
| 33854 | if (params.shadow) { | |
| 33855 | if (isHorizontal) { | |
| 33856 | $cubeShadowEl.transform(("translate3d(0px, " + ((swiperWidth / 2) + params.shadowOffset) + "px, " + (-swiperWidth / 2) + "px) rotateX(90deg) rotateZ(0deg) scale(" + (params.shadowScale) + ")")); | |
| 33857 | } else { | |
| 33858 | var shadowAngle = Math.abs(wrapperRotate) - (Math.floor(Math.abs(wrapperRotate) / 90) * 90); | |
| 33859 | var multiplier = 1.5 - ( | |
| 33860 | (Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2) | |
| 33861 | + (Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2) | |
| 33862 | ); | |
| 33863 | var scale1 = params.shadowScale; | |
| 33864 | var scale2 = params.shadowScale / multiplier; | |
| 33865 | var offset = params.shadowOffset; | |
| 33866 | $cubeShadowEl.transform(("scale3d(" + scale1 + ", 1, " + scale2 + ") translate3d(0px, " + ((swiperHeight / 2) + offset) + "px, " + (-swiperHeight / 2 / scale2) + "px) rotateX(-90deg)")); | |
| 33867 | } | |
| 33868 | } | |
| 33869 | var zFactor = (Browser.isSafari || Browser.isUiWebView) ? (-swiperSize / 2) : 0; | |
| 33870 | $wrapperEl | |
| 33871 | .transform(("translate3d(0px,0," + zFactor + "px) rotateX(" + (swiper.isHorizontal() ? 0 : wrapperRotate) + "deg) rotateY(" + (swiper.isHorizontal() ? -wrapperRotate : 0) + "deg)")); | |
| 33872 | }, | |
| 33873 | setTransition: function setTransition(duration) { | |
| 33874 | var swiper = this; | |
| 33875 | var $el = swiper.$el; | |
| 33876 | var slides = swiper.slides; | |
| 33877 | slides | |
| 33878 | .transition(duration) | |
| 33879 | .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left') | |
| 33880 | .transition(duration); | |
| 33881 | if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) { | |
| 33882 | $el.find('.swiper-cube-shadow').transition(duration); | |
| 33883 | } | |
| 33884 | }, | |
| 33885 | }; | |
| 33886 | ||
| 33887 | var EffectCube = { | |
| 33888 | name: 'effect-cube', | |
| 33889 | params: { | |
| 33890 | cubeEffect: { | |
| 33891 | slideShadows: true, | |
| 33892 | shadow: true, | |
| 33893 | shadowOffset: 20, | |
| 33894 | shadowScale: 0.94, | |
| 33895 | }, | |
| 33896 | }, | |
| 33897 | create: function create() { | |
| 33898 | var swiper = this; | |
| 33899 | Utils.extend(swiper, { | |
| 33900 | cubeEffect: { | |
| 33901 | setTranslate: Cube.setTranslate.bind(swiper), | |
| 33902 | setTransition: Cube.setTransition.bind(swiper), | |
| 33903 | }, | |
| 33904 | }); | |
| 33905 | }, | |
| 33906 | on: { | |
| 33907 | beforeInit: function beforeInit() { | |
| 33908 | var swiper = this; | |
| 33909 | if (swiper.params.effect !== 'cube') { return; } | |
| 33910 | swiper.classNames.push(((swiper.params.containerModifierClass) + "cube")); | |
| 33911 | swiper.classNames.push(((swiper.params.containerModifierClass) + "3d")); | |
| 33912 | var overwriteParams = { | |
| 33913 | slidesPerView: 1, | |
| 33914 | slidesPerColumn: 1, | |
| 33915 | slidesPerGroup: 1, | |
| 33916 | watchSlidesProgress: true, | |
| 33917 | resistanceRatio: 0, | |
| 33918 | spaceBetween: 0, | |
| 33919 | centeredSlides: false, | |
| 33920 | virtualTranslate: true, | |
| 33921 | }; | |
| 33922 | Utils.extend(swiper.params, overwriteParams); | |
| 33923 | Utils.extend(swiper.originalParams, overwriteParams); | |
| 33924 | }, | |
| 33925 | setTranslate: function setTranslate() { | |
| 33926 | var swiper = this; | |
| 33927 | if (swiper.params.effect !== 'cube') { return; } | |
| 33928 | swiper.cubeEffect.setTranslate(); | |
| 33929 | }, | |
| 33930 | setTransition: function setTransition(duration) { | |
| 33931 | var swiper = this; | |
| 33932 | if (swiper.params.effect !== 'cube') { return; } | |
| 33933 | swiper.cubeEffect.setTransition(duration); | |
| 33934 | }, | |
| 33935 | }, | |
| 33936 | }; | |
| 33937 | ||
| 33938 | var Flip = { | |
| 33939 | setTranslate: function setTranslate() { | |
| 33940 | var swiper = this; | |
| 33941 | var slides = swiper.slides; | |
| 33942 | var rtl = swiper.rtlTranslate; | |
| 33943 | for (var i = 0; i < slides.length; i += 1) { | |
| 33944 | var $slideEl = slides.eq(i); | |
| 33945 | var progress = $slideEl[0].progress; | |
| 33946 | if (swiper.params.flipEffect.limitRotation) { | |
| 33947 | progress = Math.max(Math.min($slideEl[0].progress, 1), -1); | |
| 33948 | } | |
| 33949 | var offset = $slideEl[0].swiperSlideOffset; | |
| 33950 | var rotate = -180 * progress; | |
| 33951 | var rotateY = rotate; | |
| 33952 | var rotateX = 0; | |
| 33953 | var tx = -offset; | |
| 33954 | var ty = 0; | |
| 33955 | if (!swiper.isHorizontal()) { | |
| 33956 | ty = tx; | |
| 33957 | tx = 0; | |
| 33958 | rotateX = -rotateY; | |
| 33959 | rotateY = 0; | |
| 33960 | } else if (rtl) { | |
| 33961 | rotateY = -rotateY; | |
| 33962 | } | |
| 33963 | ||
| 33964 | $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length; | |
| 33965 | ||
| 33966 | if (swiper.params.flipEffect.slideShadows) { | |
| 33967 | // Set shadows | |
| 33968 | var shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top'); | |
| 33969 | var shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom'); | |
| 33970 | if (shadowBefore.length === 0) { | |
| 33971 | shadowBefore = $(("<div class=\"swiper-slide-shadow-" + (swiper.isHorizontal() ? 'left' : 'top') + "\"></div>")); | |
| 33972 | $slideEl.append(shadowBefore); | |
| 33973 | } | |
| 33974 | if (shadowAfter.length === 0) { | |
| 33975 | shadowAfter = $(("<div class=\"swiper-slide-shadow-" + (swiper.isHorizontal() ? 'right' : 'bottom') + "\"></div>")); | |
| 33976 | $slideEl.append(shadowAfter); | |
| 33977 | } | |
| 33978 | if (shadowBefore.length) { shadowBefore[0].style.opacity = Math.max(-progress, 0); } | |
| 33979 | if (shadowAfter.length) { shadowAfter[0].style.opacity = Math.max(progress, 0); } | |
| 33980 | } | |
| 33981 | $slideEl | |
| 33982 | .transform(("translate3d(" + tx + "px, " + ty + "px, 0px) rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)")); | |
| 33983 | } | |
| 33984 | }, | |
| 33985 | setTransition: function setTransition(duration) { | |
| 33986 | var swiper = this; | |
| 33987 | var slides = swiper.slides; | |
| 33988 | var activeIndex = swiper.activeIndex; | |
| 33989 | var $wrapperEl = swiper.$wrapperEl; | |
| 33990 | slides | |
| 33991 | .transition(duration) | |
| 33992 | .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left') | |
| 33993 | .transition(duration); | |
| 33994 | if (swiper.params.virtualTranslate && duration !== 0) { | |
| 33995 | var eventTriggered = false; | |
| 33996 | // eslint-disable-next-line | |
| 33997 | slides.eq(activeIndex).transitionEnd(function onTransitionEnd() { | |
| 33998 | if (eventTriggered) { return; } | |
| 33999 | if (!swiper || swiper.destroyed) { return; } | |
| 34000 | // if (!$(this).hasClass(swiper.params.slideActiveClass)) return; | |
| 34001 | eventTriggered = true; | |
| 34002 | swiper.animating = false; | |
| 34003 | var triggerEvents = ['webkitTransitionEnd', 'transitionend']; | |
| 34004 | for (var i = 0; i < triggerEvents.length; i += 1) { | |
| 34005 | $wrapperEl.trigger(triggerEvents[i]); | |
| 34006 | } | |
| 34007 | }); | |
| 34008 | } | |
| 34009 | }, | |
| 34010 | }; | |
| 34011 | ||
| 34012 | var EffectFlip = { | |
| 34013 | name: 'effect-flip', | |
| 34014 | params: { | |
| 34015 | flipEffect: { | |
| 34016 | slideShadows: true, | |
| 34017 | limitRotation: true, | |
| 34018 | }, | |
| 34019 | }, | |
| 34020 | create: function create() { | |
| 34021 | var swiper = this; | |
| 34022 | Utils.extend(swiper, { | |
| 34023 | flipEffect: { | |
| 34024 | setTranslate: Flip.setTranslate.bind(swiper), | |
| 34025 | setTransition: Flip.setTransition.bind(swiper), | |
| 34026 | }, | |
| 34027 | }); | |
| 34028 | }, | |
| 34029 | on: { | |
| 34030 | beforeInit: function beforeInit() { | |
| 34031 | var swiper = this; | |
| 34032 | if (swiper.params.effect !== 'flip') { return; } | |
| 34033 | swiper.classNames.push(((swiper.params.containerModifierClass) + "flip")); | |
| 34034 | swiper.classNames.push(((swiper.params.containerModifierClass) + "3d")); | |
| 34035 | var overwriteParams = { | |
| 34036 | slidesPerView: 1, | |
| 34037 | slidesPerColumn: 1, | |
| 34038 | slidesPerGroup: 1, | |
| 34039 | watchSlidesProgress: true, | |
| 34040 | spaceBetween: 0, | |
| 34041 | virtualTranslate: true, | |
| 34042 | }; | |
| 34043 | Utils.extend(swiper.params, overwriteParams); | |
| 34044 | Utils.extend(swiper.originalParams, overwriteParams); | |
| 34045 | }, | |
| 34046 | setTranslate: function setTranslate() { | |
| 34047 | var swiper = this; | |
| 34048 | if (swiper.params.effect !== 'flip') { return; } | |
| 34049 | swiper.flipEffect.setTranslate(); | |
| 34050 | }, | |
| 34051 | setTransition: function setTransition(duration) { | |
| 34052 | var swiper = this; | |
| 34053 | if (swiper.params.effect !== 'flip') { return; } | |
| 34054 | swiper.flipEffect.setTransition(duration); | |
| 34055 | }, | |
| 34056 | }, | |
| 34057 | }; | |
| 34058 | ||
| 34059 | var Coverflow = { | |
| 34060 | setTranslate: function setTranslate() { | |
| 34061 | var swiper = this; | |
| 34062 | var swiperWidth = swiper.width; | |
| 34063 | var swiperHeight = swiper.height; | |
| 34064 | var slides = swiper.slides; | |
| 34065 | var $wrapperEl = swiper.$wrapperEl; | |
| 34066 | var slidesSizesGrid = swiper.slidesSizesGrid; | |
| 34067 | var params = swiper.params.coverflowEffect; | |
| 34068 | var isHorizontal = swiper.isHorizontal(); | |
| 34069 | var transform = swiper.translate; | |
| 34070 | var center = isHorizontal ? -transform + (swiperWidth / 2) : -transform + (swiperHeight / 2); | |
| 34071 | var rotate = isHorizontal ? params.rotate : -params.rotate; | |
| 34072 | var translate = params.depth; | |
| 34073 | // Each slide offset from center | |
| 34074 | for (var i = 0, length = slides.length; i < length; i += 1) { | |
| 34075 | var $slideEl = slides.eq(i); | |
| 34076 | var slideSize = slidesSizesGrid[i]; | |
| 34077 | var slideOffset = $slideEl[0].swiperSlideOffset; | |
| 34078 | var offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier; | |
| 34079 | ||
| 34080 | var rotateY = isHorizontal ? rotate * offsetMultiplier : 0; | |
| 34081 | var rotateX = isHorizontal ? 0 : rotate * offsetMultiplier; | |
| 34082 | // var rotateZ = 0 | |
| 34083 | var translateZ = -translate * Math.abs(offsetMultiplier); | |
| 34084 | ||
| 34085 | var translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier); | |
| 34086 | var translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0; | |
| 34087 | ||
| 34088 | // Fix for ultra small values | |
| 34089 | if (Math.abs(translateX) < 0.001) { translateX = 0; } | |
| 34090 | if (Math.abs(translateY) < 0.001) { translateY = 0; } | |
| 34091 | if (Math.abs(translateZ) < 0.001) { translateZ = 0; } | |
| 34092 | if (Math.abs(rotateY) < 0.001) { rotateY = 0; } | |
| 34093 | if (Math.abs(rotateX) < 0.001) { rotateX = 0; } | |
| 34094 | ||
| 34095 | var slideTransform = "translate3d(" + translateX + "px," + translateY + "px," + translateZ + "px) rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)"; | |
| 34096 | ||
| 34097 | $slideEl.transform(slideTransform); | |
| 34098 | $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1; | |
| 34099 | if (params.slideShadows) { | |
| 34100 | // Set shadows | |
| 34101 | var $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top'); | |
| 34102 | var $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom'); | |
| 34103 | if ($shadowBeforeEl.length === 0) { | |
| 34104 | $shadowBeforeEl = $(("<div class=\"swiper-slide-shadow-" + (isHorizontal ? 'left' : 'top') + "\"></div>")); | |
| 34105 | $slideEl.append($shadowBeforeEl); | |
| 34106 | } | |
| 34107 | if ($shadowAfterEl.length === 0) { | |
| 34108 | $shadowAfterEl = $(("<div class=\"swiper-slide-shadow-" + (isHorizontal ? 'right' : 'bottom') + "\"></div>")); | |
| 34109 | $slideEl.append($shadowAfterEl); | |
| 34110 | } | |
| 34111 | if ($shadowBeforeEl.length) { $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0; } | |
| 34112 | if ($shadowAfterEl.length) { $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0; } | |
| 34113 | } | |
| 34114 | } | |
| 34115 | ||
| 34116 | // Set correct perspective for IE10 | |
| 34117 | if (Support.pointerEvents || Support.prefixedPointerEvents) { | |
| 34118 | var ws = $wrapperEl[0].style; | |
| 34119 | ws.perspectiveOrigin = center + "px 50%"; | |
| 34120 | } | |
| 34121 | }, | |
| 34122 | setTransition: function setTransition(duration) { | |
| 34123 | var swiper = this; | |
| 34124 | swiper.slides | |
| 34125 | .transition(duration) | |
| 34126 | .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left') | |
| 34127 | .transition(duration); | |
| 34128 | }, | |
| 34129 | }; | |
| 34130 | ||
| 34131 | var EffectCoverflow = { | |
| 34132 | name: 'effect-coverflow', | |
| 34133 | params: { | |
| 34134 | coverflowEffect: { | |
| 34135 | rotate: 50, | |
| 34136 | stretch: 0, | |
| 34137 | depth: 100, | |
| 34138 | modifier: 1, | |
| 34139 | slideShadows: true, | |
| 34140 | }, | |
| 34141 | }, | |
| 34142 | create: function create() { | |
| 34143 | var swiper = this; | |
| 34144 | Utils.extend(swiper, { | |
| 34145 | coverflowEffect: { | |
| 34146 | setTranslate: Coverflow.setTranslate.bind(swiper), | |
| 34147 | setTransition: Coverflow.setTransition.bind(swiper), | |
| 34148 | }, | |
| 34149 | }); | |
| 34150 | }, | |
| 34151 | on: { | |
| 34152 | beforeInit: function beforeInit() { | |
| 34153 | var swiper = this; | |
| 34154 | if (swiper.params.effect !== 'coverflow') { return; } | |
| 34155 | ||
| 34156 | swiper.classNames.push(((swiper.params.containerModifierClass) + "coverflow")); | |
| 34157 | swiper.classNames.push(((swiper.params.containerModifierClass) + "3d")); | |
| 34158 | ||
| 34159 | swiper.params.watchSlidesProgress = true; | |
| 34160 | swiper.originalParams.watchSlidesProgress = true; | |
| 34161 | }, | |
| 34162 | setTranslate: function setTranslate() { | |
| 34163 | var swiper = this; | |
| 34164 | if (swiper.params.effect !== 'coverflow') { return; } | |
| 34165 | swiper.coverflowEffect.setTranslate(); | |
| 34166 | }, | |
| 34167 | setTransition: function setTransition(duration) { | |
| 34168 | var swiper = this; | |
| 34169 | if (swiper.params.effect !== 'coverflow') { return; } | |
| 34170 | swiper.coverflowEffect.setTransition(duration); | |
| 34171 | }, | |
| 34172 | }, | |
| 34173 | }; | |
| 34174 | ||
| 34175 | var Thumbs = { | |
| 34176 | init: function init() { | |
| 34177 | var swiper = this; | |
| 34178 | var ref = swiper.params; | |
| 34179 | var thumbsParams = ref.thumbs; | |
| 34180 | var SwiperClass = swiper.constructor; | |
| 34181 | if (thumbsParams.swiper instanceof SwiperClass) { | |
| 34182 | swiper.thumbs.swiper = thumbsParams.swiper; | |
| 34183 | Utils.extend(swiper.thumbs.swiper.originalParams, { | |
| 34184 | watchSlidesProgress: true, | |
| 34185 | slideToClickedSlide: false, | |
| 34186 | }); | |
| 34187 | Utils.extend(swiper.thumbs.swiper.params, { | |
| 34188 | watchSlidesProgress: true, | |
| 34189 | slideToClickedSlide: false, | |
| 34190 | }); | |
| 34191 | } else if (Utils.isObject(thumbsParams.swiper)) { | |
| 34192 | swiper.thumbs.swiper = new SwiperClass(Utils.extend({}, thumbsParams.swiper, { | |
| 34193 | watchSlidesVisibility: true, | |
| 34194 | watchSlidesProgress: true, | |
| 34195 | slideToClickedSlide: false, | |
| 34196 | })); | |
| 34197 | swiper.thumbs.swiperCreated = true; | |
| 34198 | } | |
| 34199 | swiper.thumbs.swiper.$el.addClass(swiper.params.thumbs.thumbsContainerClass); | |
| 34200 | swiper.thumbs.swiper.on('tap', swiper.thumbs.onThumbClick); | |
| 34201 | }, | |
| 34202 | onThumbClick: function onThumbClick() { | |
| 34203 | var swiper = this; | |
| 34204 | var thumbsSwiper = swiper.thumbs.swiper; | |
| 34205 | if (!thumbsSwiper) { return; } | |
| 34206 | var clickedIndex = thumbsSwiper.clickedIndex; | |
| 34207 | var clickedSlide = thumbsSwiper.clickedSlide; | |
| 34208 | if (clickedSlide && $(clickedSlide).hasClass(swiper.params.thumbs.slideThumbActiveClass)) { return; } | |
| 34209 | if (typeof clickedIndex === 'undefined' || clickedIndex === null) { return; } | |
| 34210 | var slideToIndex; | |
| 34211 | if (thumbsSwiper.params.loop) { | |
| 34212 | slideToIndex = parseInt($(thumbsSwiper.clickedSlide).attr('data-swiper-slide-index'), 10); | |
| 34213 | } else { | |
| 34214 | slideToIndex = clickedIndex; | |
| 34215 | } | |
| 34216 | if (swiper.params.loop) { | |
| 34217 | var currentIndex = swiper.activeIndex; | |
| 34218 | if (swiper.slides.eq(currentIndex).hasClass(swiper.params.slideDuplicateClass)) { | |
| 34219 | swiper.loopFix(); | |
| 34220 | // eslint-disable-next-line | |
| 34221 | swiper._clientLeft = swiper.$wrapperEl[0].clientLeft; | |
| 34222 | currentIndex = swiper.activeIndex; | |
| 34223 | } | |
| 34224 | var prevIndex = swiper.slides.eq(currentIndex).prevAll(("[data-swiper-slide-index=\"" + slideToIndex + "\"]")).eq(0).index(); | |
| 34225 | var nextIndex = swiper.slides.eq(currentIndex).nextAll(("[data-swiper-slide-index=\"" + slideToIndex + "\"]")).eq(0).index(); | |
| 34226 | if (typeof prevIndex === 'undefined') { slideToIndex = nextIndex; } | |
| 34227 | else if (typeof nextIndex === 'undefined') { slideToIndex = prevIndex; } | |
| 34228 | else if (nextIndex - currentIndex < currentIndex - prevIndex) { slideToIndex = nextIndex; } | |
| 34229 | else { slideToIndex = prevIndex; } | |
| 34230 | } | |
| 34231 | swiper.slideTo(slideToIndex); | |
| 34232 | }, | |
| 34233 | update: function update(initial) { | |
| 34234 | var swiper = this; | |
| 34235 | var thumbsSwiper = swiper.thumbs.swiper; | |
| 34236 | if (!thumbsSwiper) { return; } | |
| 34237 | ||
| 34238 | var slidesPerView = thumbsSwiper.params.slidesPerView === 'auto' | |
| 34239 | ? thumbsSwiper.slidesPerViewDynamic() | |
| 34240 | : thumbsSwiper.params.slidesPerView; | |
| 34241 | ||
| 34242 | if (swiper.realIndex !== thumbsSwiper.realIndex) { | |
| 34243 | var currentThumbsIndex = thumbsSwiper.activeIndex; | |
| 34244 | var newThumbsIndex; | |
| 34245 | if (thumbsSwiper.params.loop) { | |
| 34246 | if (thumbsSwiper.slides.eq(currentThumbsIndex).hasClass(thumbsSwiper.params.slideDuplicateClass)) { | |
| 34247 | thumbsSwiper.loopFix(); | |
| 34248 | // eslint-disable-next-line | |
| 34249 | thumbsSwiper._clientLeft = thumbsSwiper.$wrapperEl[0].clientLeft; | |
| 34250 | currentThumbsIndex = thumbsSwiper.activeIndex; | |
| 34251 | } | |
| 34252 | // Find actual thumbs index to slide to | |
| 34253 | var prevThumbsIndex = thumbsSwiper.slides.eq(currentThumbsIndex).prevAll(("[data-swiper-slide-index=\"" + (swiper.realIndex) + "\"]")).eq(0).index(); | |
| 34254 | var nextThumbsIndex = thumbsSwiper.slides.eq(currentThumbsIndex).nextAll(("[data-swiper-slide-index=\"" + (swiper.realIndex) + "\"]")).eq(0).index(); | |
| 34255 | if (typeof prevThumbsIndex === 'undefined') { newThumbsIndex = nextThumbsIndex; } | |
| 34256 | else if (typeof nextThumbsIndex === 'undefined') { newThumbsIndex = prevThumbsIndex; } | |
| 34257 | else if (nextThumbsIndex - currentThumbsIndex === currentThumbsIndex - prevThumbsIndex) { newThumbsIndex = currentThumbsIndex; } | |
| 34258 | else if (nextThumbsIndex - currentThumbsIndex < currentThumbsIndex - prevThumbsIndex) { newThumbsIndex = nextThumbsIndex; } | |
| 34259 | else { newThumbsIndex = prevThumbsIndex; } | |
| 34260 | } else { | |
| 34261 | newThumbsIndex = swiper.realIndex; | |
| 34262 | } | |
| 34263 | if (thumbsSwiper.visibleSlidesIndexes.indexOf(newThumbsIndex) < 0) { | |
| 34264 | if (thumbsSwiper.params.centeredSlides) { | |
| 34265 | if (newThumbsIndex > currentThumbsIndex) { | |
| 34266 | newThumbsIndex = newThumbsIndex - Math.floor(slidesPerView / 2) + 1; | |
| 34267 | } else { | |
| 34268 | newThumbsIndex = newThumbsIndex + Math.floor(slidesPerView / 2) - 1; | |
| 34269 | } | |
| 34270 | } else if (newThumbsIndex > currentThumbsIndex) { | |
| 34271 | newThumbsIndex = newThumbsIndex - slidesPerView + 1; | |
| 34272 | } | |
| 34273 | thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined); | |
| 34274 | } | |
| 34275 | } | |
| 34276 | ||
| 34277 | // Activate thumbs | |
| 34278 | var thumbsToActivate = 1; | |
| 34279 | var thumbActiveClass = swiper.params.thumbs.slideThumbActiveClass; | |
| 34280 | ||
| 34281 | if (swiper.params.slidesPerView > 1 && !swiper.params.centeredSlides) { | |
| 34282 | thumbsToActivate = swiper.params.slidesPerView; | |
| 34283 | } | |
| 34284 | ||
| 34285 | thumbsSwiper.slides.removeClass(thumbActiveClass); | |
| 34286 | if (thumbsSwiper.params.loop) { | |
| 34287 | for (var i = 0; i < thumbsToActivate; i += 1) { | |
| 34288 | thumbsSwiper.$wrapperEl.children(("[data-swiper-slide-index=\"" + (swiper.realIndex + i) + "\"]")).addClass(thumbActiveClass); | |
| 34289 | } | |
| 34290 | } else { | |
| 34291 | for (var i$1 = 0; i$1 < thumbsToActivate; i$1 += 1) { | |
| 34292 | thumbsSwiper.slides.eq(swiper.realIndex + i$1).addClass(thumbActiveClass); | |
| 34293 | } | |
| 34294 | } | |
| 34295 | }, | |
| 34296 | }; | |
| 34297 | var Thumbs$1 = { | |
| 34298 | name: 'thumbs', | |
| 34299 | params: { | |
| 34300 | thumbs: { | |
| 34301 | swiper: null, | |
| 34302 | slideThumbActiveClass: 'swiper-slide-thumb-active', | |
| 34303 | thumbsContainerClass: 'swiper-container-thumbs', | |
| 34304 | }, | |
| 34305 | }, | |
| 34306 | create: function create() { | |
| 34307 | var swiper = this; | |
| 34308 | Utils.extend(swiper, { | |
| 34309 | thumbs: { | |
| 34310 | swiper: null, | |
| 34311 | init: Thumbs.init.bind(swiper), | |
| 34312 | update: Thumbs.update.bind(swiper), | |
| 34313 | onThumbClick: Thumbs.onThumbClick.bind(swiper), | |
| 34314 | }, | |
| 34315 | }); | |
| 34316 | }, | |
| 34317 | on: { | |
| 34318 | beforeInit: function beforeInit() { | |
| 34319 | var swiper = this; | |
| 34320 | var ref = swiper.params; | |
| 34321 | var thumbs = ref.thumbs; | |
| 34322 | if (!thumbs || !thumbs.swiper) { return; } | |
| 34323 | swiper.thumbs.init(); | |
| 34324 | swiper.thumbs.update(true); | |
| 34325 | }, | |
| 34326 | slideChange: function slideChange() { | |
| 34327 | var swiper = this; | |
| 34328 | if (!swiper.thumbs.swiper) { return; } | |
| 34329 | swiper.thumbs.update(); | |
| 34330 | }, | |
| 34331 | update: function update() { | |
| 34332 | var swiper = this; | |
| 34333 | if (!swiper.thumbs.swiper) { return; } | |
| 34334 | swiper.thumbs.update(); | |
| 34335 | }, | |
| 34336 | resize: function resize() { | |
| 34337 | var swiper = this; | |
| 34338 | if (!swiper.thumbs.swiper) { return; } | |
| 34339 | swiper.thumbs.update(); | |
| 34340 | }, | |
| 34341 | observerUpdate: function observerUpdate() { | |
| 34342 | var swiper = this; | |
| 34343 | if (!swiper.thumbs.swiper) { return; } | |
| 34344 | swiper.thumbs.update(); | |
| 34345 | }, | |
| 34346 | setTransition: function setTransition(duration) { | |
| 34347 | var swiper = this; | |
| 34348 | var thumbsSwiper = swiper.thumbs.swiper; | |
| 34349 | if (!thumbsSwiper) { return; } | |
| 34350 | thumbsSwiper.setTransition(duration); | |
| 34351 | }, | |
| 34352 | beforeDestroy: function beforeDestroy() { | |
| 34353 | var swiper = this; | |
| 34354 | var thumbsSwiper = swiper.thumbs.swiper; | |
| 34355 | if (!thumbsSwiper) { return; } | |
| 34356 | if (swiper.thumbs.swiperCreated && thumbsSwiper) { | |
| 34357 | thumbsSwiper.destroy(); | |
| 34358 | } | |
| 34359 | }, | |
| 34360 | }, | |
| 34361 | }; | |
| 34362 | ||
| 34363 | // Swiper Class | |
| 34364 | ||
| 34365 | Swiper.use([ | |
| 34366 | Device$1, | |
| 34367 | Browser$1, | |
| 34368 | Support$1, | |
| 34369 | Resize, | |
| 34370 | Observer$1, | |
| 34371 | Virtual$1, | |
| 34372 | Navigation$1, | |
| 34373 | Pagination$1, | |
| 34374 | Scrollbar$1, | |
| 34375 | Parallax$1, | |
| 34376 | Zoom$1, | |
| 34377 | Lazy$3, | |
| 34378 | Controller$1, | |
| 34379 | A11y, | |
| 34380 | Autoplay$1, | |
| 34381 | EffectFade, | |
| 34382 | EffectCube, | |
| 34383 | EffectFlip, | |
| 34384 | EffectCoverflow, | |
| 34385 | Thumbs$1 ]); | |
| 34386 | ||
| 34387 | { | |
| 34388 | if (!window.Swiper) { | |
| 34389 | window.Swiper = Swiper; | |
| 34390 | } | |
| 34391 | } | |
| 34392 | ||
| 34393 | function initSwiper(swiperEl) { | |
| 34394 | var app = this; | |
| 34395 | var $swiperEl = $(swiperEl); | |
| 34396 | if ($swiperEl.length === 0) { return; } | |
| 34397 | if ($swiperEl[0].swiper) { return; } | |
| 34398 | var initialSlide; | |
| 34399 | var params = {}; | |
| 34400 | var isTabs; | |
| 34401 | var isRoutableTabs; | |
| 34402 | if ($swiperEl.hasClass('tabs-swipeable-wrap')) { | |
| 34403 | $swiperEl | |
| 34404 | .addClass('swiper-container') | |
| 34405 | .children('.tabs') | |
| 34406 | .addClass('swiper-wrapper') | |
| 34407 | .children('.tab') | |
| 34408 | .addClass('swiper-slide'); | |
| 34409 | initialSlide = $swiperEl.children('.tabs').children('.tab-active').index(); | |
| 34410 | isTabs = true; | |
| 34411 | isRoutableTabs = $swiperEl.find('.tabs-routable').length > 0; | |
| 34412 | } | |
| 34413 | if ($swiperEl.attr('data-swiper')) { | |
| 34414 | params = JSON.parse($swiperEl.attr('data-swiper')); | |
| 34415 | } else { | |
| 34416 | params = $swiperEl.dataset(); | |
| 34417 | Object.keys(params).forEach(function (key) { | |
| 34418 | var value = params[key]; | |
| 34419 | if (typeof value === 'string' && value.indexOf('{') === 0 && value.indexOf('}') > 0) { | |
| 34420 | try { | |
| 34421 | params[key] = JSON.parse(value); | |
| 34422 | } catch (e) { | |
| 34423 | // not JSON | |
| 34424 | } | |
| 34425 | } | |
| 34426 | }); | |
| 34427 | } | |
| 34428 | if (typeof params.initialSlide === 'undefined' && typeof initialSlide !== 'undefined') { | |
| 34429 | params.initialSlide = initialSlide; | |
| 34430 | } | |
| 34431 | ||
| 34432 | var swiper = app.swiper.create($swiperEl[0], params); | |
| 34433 | if (isTabs) { | |
| 34434 | swiper.on('slideChange', function () { | |
| 34435 | if (isRoutableTabs) { | |
| 34436 | var view = app.views.get($swiperEl.parents('.view')); | |
| 34437 | if (!view) { view = app.views.main; } | |
| 34438 | var router = view.router; | |
| 34439 | var tabRoute = router.findTabRoute(swiper.slides.eq(swiper.activeIndex)[0]); | |
| 34440 | if (tabRoute) { | |
| 34441 | setTimeout(function () { | |
| 34442 | router.navigate(tabRoute.path); | |
| 34443 | }, 0); | |
| 34444 | } | |
| 34445 | } else { | |
| 34446 | app.tab.show({ | |
| 34447 | tabEl: swiper.slides.eq(swiper.activeIndex), | |
| 34448 | }); | |
| 34449 | } | |
| 34450 | }); | |
| 34451 | } | |
| 34452 | } | |
| 34453 | ||
| 34454 | var Swiper$1 = { | |
| 34455 | name: 'swiper', | |
| 34456 | static: { | |
| 34457 | Swiper: Swiper, | |
| 34458 | }, | |
| 34459 | create: function create() { | |
| 34460 | var app = this; | |
| 34461 | app.swiper = ConstructorMethods({ | |
| 34462 | defaultSelector: '.swiper-container', | |
| 34463 | constructor: Swiper, | |
| 34464 | domProp: 'swiper', | |
| 34465 | }); | |
| 34466 | }, | |
| 34467 | on: { | |
| 34468 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 34469 | var app = this; | |
| 34470 | page.$el.find('.swiper-init, .tabs-swipeable-wrap').each(function (index, swiperEl) { | |
| 34471 | app.swiper.destroy(swiperEl); | |
| 34472 | }); | |
| 34473 | }, | |
| 34474 | pageMounted: function pageMounted(page) { | |
| 34475 | var app = this; | |
| 34476 | page.$el.find('.tabs-swipeable-wrap').each(function (index, swiperEl) { | |
| 34477 | initSwiper.call(app, swiperEl); | |
| 34478 | }); | |
| 34479 | }, | |
| 34480 | pageInit: function pageInit(page) { | |
| 34481 | var app = this; | |
| 34482 | page.$el.find('.swiper-init, .tabs-swipeable-wrap').each(function (index, swiperEl) { | |
| 34483 | initSwiper.call(app, swiperEl); | |
| 34484 | }); | |
| 34485 | }, | |
| 34486 | pageReinit: function pageReinit(page) { | |
| 34487 | var app = this; | |
| 34488 | page.$el.find('.swiper-init, .tabs-swipeable-wrap').each(function (index, swiperEl) { | |
| 34489 | var swiper = app.swiper.get(swiperEl); | |
| 34490 | if (swiper && swiper.update) { swiper.update(); } | |
| 34491 | }); | |
| 34492 | }, | |
| 34493 | tabMounted: function tabMounted(tabEl) { | |
| 34494 | var app = this; | |
| 34495 | $(tabEl).find('.swiper-init, .tabs-swipeable-wrap').each(function (index, swiperEl) { | |
| 34496 | initSwiper.call(app, swiperEl); | |
| 34497 | }); | |
| 34498 | }, | |
| 34499 | tabShow: function tabShow(tabEl) { | |
| 34500 | var app = this; | |
| 34501 | $(tabEl).find('.swiper-init, .tabs-swipeable-wrap').each(function (index, swiperEl) { | |
| 34502 | var swiper = app.swiper.get(swiperEl); | |
| 34503 | if (swiper && swiper.update) { swiper.update(); } | |
| 34504 | }); | |
| 34505 | }, | |
| 34506 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 34507 | var app = this; | |
| 34508 | $(tabEl).find('.swiper-init, .tabs-swipeable-wrap').each(function (index, swiperEl) { | |
| 34509 | app.swiper.destroy(swiperEl); | |
| 34510 | }); | |
| 34511 | }, | |
| 34512 | }, | |
| 34513 | vnode: { | |
| 34514 | 'swiper-init': { | |
| 34515 | insert: function insert(vnode) { | |
| 34516 | var app = this; | |
| 34517 | var swiperEl = vnode.elm; | |
| 34518 | initSwiper.call(app, swiperEl); | |
| 34519 | }, | |
| 34520 | destroy: function destroy(vnode) { | |
| 34521 | var app = this; | |
| 34522 | var swiperEl = vnode.elm; | |
| 34523 | app.swiper.destroy(swiperEl); | |
| 34524 | }, | |
| 34525 | }, | |
| 34526 | 'tabs-swipeable-wrap': { | |
| 34527 | insert: function insert(vnode) { | |
| 34528 | var app = this; | |
| 34529 | var swiperEl = vnode.elm; | |
| 34530 | initSwiper.call(app, swiperEl); | |
| 34531 | }, | |
| 34532 | destroy: function destroy(vnode) { | |
| 34533 | var app = this; | |
| 34534 | var swiperEl = vnode.elm; | |
| 34535 | app.swiper.destroy(swiperEl); | |
| 34536 | }, | |
| 34537 | }, | |
| 34538 | }, | |
| 34539 | }; | |
| 34540 | ||
| 34541 | /* eslint indent: ["off"] */ | |
| 34542 | ||
| 5d51ea26 | 34543 | var PhotoBrowser = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
34544 | function PhotoBrowser(app, params) { |
| 34545 | if ( params === void 0 ) params = {}; | |
| 34546 | ||
| 5d51ea26 | 34547 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
34548 | |
| 34549 | var pb = this; | |
| 34550 | pb.app = app; | |
| 34551 | ||
| 34552 | var defaults = Utils.extend({ | |
| 34553 | on: {}, | |
| 34554 | }, app.params.photoBrowser); | |
| 34555 | ||
| 34556 | // Extend defaults with modules params | |
| 34557 | pb.useModulesParams(defaults); | |
| 34558 | ||
| 34559 | pb.params = Utils.extend(defaults, params); | |
| 34560 | ||
| 34561 | Utils.extend(pb, { | |
| 34562 | exposed: false, | |
| 34563 | opened: false, | |
| 34564 | activeIndex: pb.params.swiper.initialSlide, | |
| 34565 | url: pb.params.url, | |
| 34566 | view: pb.params.view || app.views.main, | |
| 34567 | swipeToClose: { | |
| 34568 | allow: true, | |
| 34569 | isTouched: false, | |
| 34570 | diff: undefined, | |
| 34571 | start: undefined, | |
| 34572 | current: undefined, | |
| 34573 | started: false, | |
| 34574 | activeSlide: undefined, | |
| 34575 | timeStart: undefined, | |
| 34576 | }, | |
| 34577 | }); | |
| 34578 | ||
| 34579 | // Install Modules | |
| 34580 | pb.useModules(); | |
| 34581 | ||
| 34582 | // Init | |
| 34583 | pb.init(); | |
| 34584 | } | |
| 34585 | ||
| 5d51ea26 DC |
34586 | if ( Framework7Class ) PhotoBrowser.__proto__ = Framework7Class; |
| 34587 | PhotoBrowser.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
34588 | PhotoBrowser.prototype.constructor = PhotoBrowser; |
| 34589 | ||
| 34590 | PhotoBrowser.prototype.onSlideChange = function onSlideChange (swiper) { | |
| 34591 | var pb = this; | |
| 34592 | pb.activeIndex = swiper.activeIndex; | |
| 34593 | ||
| 34594 | var current = swiper.activeIndex + 1; | |
| 34595 | var total = pb.params.virtualSlides ? pb.params.photos.length : swiper.slides.length; | |
| 34596 | if (swiper.params.loop) { | |
| 34597 | total -= 2; | |
| 34598 | current -= swiper.loopedSlides; | |
| 34599 | if (current < 1) { current = total + current; } | |
| 34600 | if (current > total) { current -= total; } | |
| 34601 | } | |
| 34602 | ||
| 34603 | var $activeSlideEl = pb.params.virtualSlides | |
| 34604 | ? swiper.$wrapperEl.find((".swiper-slide[data-swiper-slide-index=\"" + (swiper.activeIndex) + "\"]")) | |
| 34605 | : swiper.slides.eq(swiper.activeIndex); | |
| 34606 | var $previousSlideEl = pb.params.virtualSlides | |
| 34607 | ? swiper.$wrapperEl.find((".swiper-slide[data-swiper-slide-index=\"" + (swiper.previousIndex) + "\"]")) | |
| 34608 | : swiper.slides.eq(swiper.previousIndex); | |
| 34609 | ||
| 34610 | var $currentEl = pb.$el.find('.photo-browser-current'); | |
| 34611 | var $totalEl = pb.$el.find('.photo-browser-total'); | |
| 34612 | if (pb.params.type === 'page' && pb.params.navbar && $currentEl.length === 0 && pb.app.theme === 'ios') { | |
| 34613 | var navbarEl = pb.app.navbar.getElByPage(pb.$el); | |
| 34614 | if (navbarEl) { | |
| 34615 | $currentEl = $(navbarEl).find('.photo-browser-current'); | |
| 34616 | $totalEl = $(navbarEl).find('.photo-browser-total'); | |
| 34617 | } | |
| 34618 | } | |
| 34619 | $currentEl.text(current); | |
| 34620 | $totalEl.text(total); | |
| 34621 | ||
| 34622 | // Update captions | |
| 34623 | if (pb.captions.length > 0) { | |
| 34624 | var captionIndex = swiper.params.loop ? $activeSlideEl.attr('data-swiper-slide-index') : pb.activeIndex; | |
| 34625 | pb.$captionsContainerEl.find('.photo-browser-caption-active').removeClass('photo-browser-caption-active'); | |
| 34626 | pb.$captionsContainerEl.find(("[data-caption-index=\"" + captionIndex + "\"]")).addClass('photo-browser-caption-active'); | |
| 34627 | } | |
| 34628 | ||
| 34629 | // Stop Video | |
| 34630 | var previousSlideVideo = $previousSlideEl.find('video'); | |
| 34631 | if (previousSlideVideo.length > 0) { | |
| 34632 | if ('pause' in previousSlideVideo[0]) { previousSlideVideo[0].pause(); } | |
| 34633 | } | |
| 34634 | }; | |
| 34635 | ||
| 34636 | PhotoBrowser.prototype.onTouchStart = function onTouchStart () { | |
| 34637 | var pb = this; | |
| 34638 | var swipeToClose = pb.swipeToClose; | |
| 34639 | if (!swipeToClose.allow) { return; } | |
| 34640 | swipeToClose.isTouched = true; | |
| 34641 | }; | |
| 34642 | ||
| 34643 | PhotoBrowser.prototype.onTouchMove = function onTouchMove (e) { | |
| 34644 | var pb = this; | |
| 34645 | var swipeToClose = pb.swipeToClose; | |
| 34646 | ||
| 34647 | if (!swipeToClose.isTouched) { return; } | |
| 34648 | if (!swipeToClose.started) { | |
| 34649 | swipeToClose.started = true; | |
| 34650 | swipeToClose.start = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 34651 | if (pb.params.virtualSlides) { | |
| 34652 | swipeToClose.activeSlide = pb.swiper.$wrapperEl.children('.swiper-slide-active'); | |
| 34653 | } else { | |
| 34654 | swipeToClose.activeSlide = pb.swiper.slides.eq(pb.swiper.activeIndex); | |
| 34655 | } | |
| 34656 | swipeToClose.timeStart = Utils.now(); | |
| 34657 | } | |
| 34658 | e.preventDefault(); | |
| 34659 | swipeToClose.current = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 34660 | swipeToClose.diff = swipeToClose.start - swipeToClose.current; | |
| 34661 | var opacity = 1 - (Math.abs(swipeToClose.diff) / 300); | |
| 34662 | var color = pb.exposed || pb.params.theme === 'dark' ? 0 : 255; | |
| 34663 | swipeToClose.activeSlide.transform(("translate3d(0," + (-swipeToClose.diff) + "px,0)")); | |
| 34664 | pb.swiper.$el.css('background-color', ("rgba(" + color + ", " + color + ", " + color + ", " + opacity + ")")).transition(0); | |
| 34665 | }; | |
| 34666 | ||
| 34667 | PhotoBrowser.prototype.onTouchEnd = function onTouchEnd () { | |
| 34668 | var pb = this; | |
| 34669 | var swipeToClose = pb.swipeToClose; | |
| 34670 | swipeToClose.isTouched = false; | |
| 34671 | if (!swipeToClose.started) { | |
| 34672 | swipeToClose.started = false; | |
| 34673 | return; | |
| 34674 | } | |
| 34675 | swipeToClose.started = false; | |
| 34676 | swipeToClose.allow = false; | |
| 34677 | var diff = Math.abs(swipeToClose.diff); | |
| 34678 | var timeDiff = (new Date()).getTime() - swipeToClose.timeStart; | |
| 34679 | if ((timeDiff < 300 && diff > 20) || (timeDiff >= 300 && diff > 100)) { | |
| 34680 | Utils.nextTick(function () { | |
| 34681 | if (pb.$el) { | |
| 34682 | if (swipeToClose.diff < 0) { pb.$el.addClass('swipe-close-to-bottom'); } | |
| 34683 | else { pb.$el.addClass('swipe-close-to-top'); } | |
| 34684 | } | |
| 34685 | pb.emit('local::swipeToClose', pb); | |
| 34686 | pb.close(); | |
| 34687 | swipeToClose.allow = true; | |
| 34688 | }); | |
| 34689 | return; | |
| 34690 | } | |
| 34691 | if (diff !== 0) { | |
| 34692 | swipeToClose.activeSlide.addClass('photo-browser-transitioning').transitionEnd(function () { | |
| 34693 | swipeToClose.allow = true; | |
| 34694 | swipeToClose.activeSlide.removeClass('photo-browser-transitioning'); | |
| 34695 | }); | |
| 34696 | } else { | |
| 34697 | swipeToClose.allow = true; | |
| 34698 | } | |
| 34699 | pb.swiper.$el.transition('').css('background-color', ''); | |
| 34700 | swipeToClose.activeSlide.transform(''); | |
| 34701 | }; | |
| 34702 | ||
| 34703 | // Render Functions | |
| 34704 | PhotoBrowser.prototype.renderNavbar = function renderNavbar () { | |
| 34705 | var pb = this; | |
| 34706 | if (pb.params.renderNavbar) { return pb.params.renderNavbar.call(pb); } | |
| 34707 | ||
| 34708 | var iconsColor = pb.params.iconsColor; | |
| 34709 | if (!pb.params.iconsColor && pb.params.theme === 'dark') { iconsColor = 'white'; } | |
| 34710 | ||
| 5d51ea26 | 34711 | var backLinkText = (pb.app.theme === 'ios' || pb.app.theme === 'aurora') && pb.params.backLinkText ? pb.params.backLinkText : ''; |
| 5309fbda DC |
34712 | |
| 34713 | var isPopup = pb.params.type !== 'page'; | |
| 5d51ea26 | 34714 | var navbarHtml = ("\n <div class=\"navbar\">\n <div class=\"navbar-inner sliding\">\n <div class=\"left\">\n <a class=\"link " + (isPopup ? 'popup-close' : '') + " " + (!backLinkText ? 'icon-only' : '') + " " + (!isPopup ? 'back' : '') + "\" " + (isPopup ? 'data-popup=".photo-browser-popup"' : '') + ">\n <i class=\"icon icon-back " + (iconsColor ? ("color-" + iconsColor) : '') + "\"></i>\n " + (backLinkText ? ("<span>" + backLinkText + "</span>") : '') + "\n </a>\n </div>\n <div class=\"title\">\n <span class=\"photo-browser-current\"></span>\n <span class=\"photo-browser-of\">" + (pb.params.navbarOfText) + "</span>\n <span class=\"photo-browser-total\"></span>\n </div>\n <div class=\"right\"></div>\n </div>\n </div>\n ").trim(); |
| 5309fbda DC |
34715 | return navbarHtml; |
| 34716 | }; | |
| 34717 | ||
| 34718 | PhotoBrowser.prototype.renderToolbar = function renderToolbar () { | |
| 34719 | var pb = this; | |
| 34720 | if (pb.params.renderToolbar) { return pb.params.renderToolbar.call(pb); } | |
| 34721 | ||
| 34722 | var iconsColor = pb.params.iconsColor; | |
| 34723 | if (!pb.params.iconsColor && pb.params.theme === 'dark') { iconsColor = 'white'; } | |
| 34724 | ||
| 5d51ea26 | 34725 | var toolbarHtml = ("\n <div class=\"toolbar toolbar-bottom tabbar\">\n <div class=\"toolbar-inner\">\n <a class=\"link photo-browser-prev\">\n <i class=\"icon icon-back " + (iconsColor ? ("color-" + iconsColor) : '') + "\"></i>\n </a>\n <a class=\"link photo-browser-next\">\n <i class=\"icon icon-forward " + (iconsColor ? ("color-" + iconsColor) : '') + "\"></i>\n </a>\n </div>\n </div>\n ").trim(); |
| 5309fbda DC |
34726 | return toolbarHtml; |
| 34727 | }; | |
| 34728 | ||
| 34729 | PhotoBrowser.prototype.renderCaption = function renderCaption (caption, index) { | |
| 34730 | var pb = this; | |
| 34731 | if (pb.params.renderCaption) { return pb.params.renderCaption.call(pb, caption, index); } | |
| 34732 | var captionHtml = ("\n <div class=\"photo-browser-caption\" data-caption-index=\"" + index + "\">\n " + caption + "\n </div>\n ").trim(); | |
| 34733 | return captionHtml; | |
| 34734 | }; | |
| 34735 | ||
| 34736 | PhotoBrowser.prototype.renderObject = function renderObject (photo, index) { | |
| 34737 | var pb = this; | |
| 34738 | if (pb.params.renderObject) { return pb.params.renderObject.call(pb, photo, index); } | |
| 34739 | var objHtml = "\n <div class=\"photo-browser-slide photo-browser-object-slide swiper-slide\" data-swiper-slide-index=\"" + index + "\">" + (photo.html ? photo.html : photo) + "</div>\n "; | |
| 34740 | return objHtml; | |
| 34741 | }; | |
| 34742 | ||
| 34743 | PhotoBrowser.prototype.renderLazyPhoto = function renderLazyPhoto (photo, index) { | |
| 34744 | var pb = this; | |
| 34745 | if (pb.params.renderLazyPhoto) { return pb.params.renderLazyPhoto.call(pb, photo, index); } | |
| 34746 | var photoHtml = ("\n <div class=\"photo-browser-slide photo-browser-slide-lazy swiper-slide\" data-swiper-slide-index=\"" + index + "\">\n <div class=\"preloader swiper-lazy-preloader " + (pb.params.theme === 'dark' ? 'color-white' : '') + "\">" + (Utils[((pb.app.theme) + "PreloaderContent")] || '') + "</div>\n <span class=\"swiper-zoom-container\">\n <img data-src=\"" + (photo.url ? photo.url : photo) + "\" class=\"swiper-lazy\">\n </span>\n </div>\n ").trim(); | |
| 34747 | return photoHtml; | |
| 34748 | }; | |
| 34749 | ||
| 34750 | PhotoBrowser.prototype.renderPhoto = function renderPhoto (photo, index) { | |
| 34751 | var pb = this; | |
| 34752 | if (pb.params.renderPhoto) { return pb.params.renderPhoto.call(pb, photo, index); } | |
| 34753 | var photoHtml = ("\n <div class=\"photo-browser-slide swiper-slide\" data-swiper-slide-index=\"" + index + "\">\n <span class=\"swiper-zoom-container\">\n <img src=\"" + (photo.url ? photo.url : photo) + "\">\n </span>\n </div>\n ").trim(); | |
| 34754 | return photoHtml; | |
| 34755 | }; | |
| 34756 | ||
| 34757 | PhotoBrowser.prototype.render = function render () { | |
| 34758 | var pb = this; | |
| 34759 | if (pb.params.render) { return pb.params.render.call(pb, pb.params); } | |
| 34760 | var html = ("\n <div class=\"photo-browser photo-browser-" + (pb.params.theme) + "\">\n <div class=\"view\">\n <div class=\"page photo-browser-page photo-browser-page-" + (pb.params.theme) + " no-toolbar " + (!pb.params.navbar ? 'no-navbar' : '') + "\" data-name=\"photo-browser-page\">\n " + (pb.params.navbar ? pb.renderNavbar() : '') + "\n " + (pb.params.toolbar ? pb.renderToolbar() : '') + "\n <div class=\"photo-browser-captions photo-browser-captions-" + (pb.params.captionsTheme || pb.params.theme) + "\">\n " + (pb.params.photos.map(function (photo, index) { | |
| 34761 | if (photo.caption) { return pb.renderCaption(photo.caption, index); } | |
| 34762 | return ''; | |
| 34763 | }).join(' ')) + "\n </div>\n <div class=\"photo-browser-swiper-container swiper-container\">\n <div class=\"photo-browser-swiper-wrapper swiper-wrapper\">\n " + (pb.params.virtualSlides ? '' : pb.params.photos.map(function (photo, index) { | |
| 34764 | if (photo.html || ((typeof photo === 'string' || photo instanceof String) && photo.indexOf('<') >= 0 && photo.indexOf('>') >= 0)) { | |
| 34765 | return pb.renderObject(photo, index); | |
| 34766 | } | |
| 34767 | if (pb.params.swiper.lazy === true || (pb.params.swiper.lazy && pb.params.swiper.lazy.enabled)) { | |
| 34768 | return pb.renderLazyPhoto(photo, index); | |
| 34769 | } | |
| 34770 | return pb.renderPhoto(photo, index); | |
| 34771 | }).join(' ')) + "\n </div>\n </div>\n </div>\n </div>\n </div>\n ").trim(); | |
| 34772 | return html; | |
| 34773 | }; | |
| 34774 | ||
| 34775 | PhotoBrowser.prototype.renderStandalone = function renderStandalone () { | |
| 34776 | var pb = this; | |
| 34777 | if (pb.params.renderStandalone) { return pb.params.renderStandalone.call(pb); } | |
| 34778 | var standaloneHtml = "<div class=\"popup photo-browser-popup photo-browser-standalone popup-tablet-fullscreen\">" + (pb.render()) + "</div>"; | |
| 34779 | return standaloneHtml; | |
| 34780 | }; | |
| 34781 | ||
| 34782 | PhotoBrowser.prototype.renderPage = function renderPage () { | |
| 34783 | var pb = this; | |
| 34784 | if (pb.params.renderPage) { return pb.params.renderPage.call(pb); } | |
| 34785 | var pageHtml = pb.render(); | |
| 34786 | ||
| 34787 | return pageHtml; | |
| 34788 | }; | |
| 34789 | ||
| 34790 | PhotoBrowser.prototype.renderPopup = function renderPopup () { | |
| 34791 | var pb = this; | |
| 34792 | if (pb.params.renderPopup) { return pb.params.renderPopup.call(pb); } | |
| 34793 | var popupHtml = "<div class=\"popup photo-browser-popup\">" + (pb.render()) + "</div>"; | |
| 34794 | ||
| 34795 | return popupHtml; | |
| 34796 | }; | |
| 34797 | ||
| 34798 | // Callbacks | |
| 34799 | PhotoBrowser.prototype.onOpen = function onOpen (type, el) { | |
| 34800 | var pb = this; | |
| 34801 | var app = pb.app; | |
| 34802 | var $el = $(el); | |
| 34803 | ||
| 34804 | $el[0].f7PhotoBrowser = pb; | |
| 34805 | ||
| 34806 | pb.$el = $el; | |
| 34807 | pb.el = $el[0]; | |
| 34808 | pb.openedIn = type; | |
| 34809 | pb.opened = true; | |
| 34810 | ||
| 34811 | pb.$swiperContainerEl = pb.$el.find('.photo-browser-swiper-container'); | |
| 34812 | pb.$swiperWrapperEl = pb.$el.find('.photo-browser-swiper-wrapper'); | |
| 34813 | pb.slides = pb.$el.find('.photo-browser-slide'); | |
| 34814 | pb.$captionsContainerEl = pb.$el.find('.photo-browser-captions'); | |
| 34815 | pb.captions = pb.$el.find('.photo-browser-caption'); | |
| 34816 | ||
| 34817 | // Init Swiper | |
| 34818 | var swiperParams = Utils.extend({}, pb.params.swiper, { | |
| 34819 | initialSlide: pb.activeIndex, | |
| 34820 | on: { | |
| 34821 | tap: function tap(e) { | |
| 34822 | pb.emit('local::tap', e); | |
| 34823 | }, | |
| 34824 | click: function click(e) { | |
| 34825 | if (pb.params.exposition) { | |
| 34826 | pb.expositionToggle(); | |
| 34827 | } | |
| 34828 | pb.emit('local::click', e); | |
| 34829 | }, | |
| 34830 | doubleTap: function doubleTap(e) { | |
| 34831 | pb.emit('local::doubleTap', e); | |
| 34832 | }, | |
| 34833 | slideChange: function slideChange() { | |
| 34834 | var args = [], len = arguments.length; | |
| 34835 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 34836 | ||
| 34837 | var swiper = this; | |
| 34838 | pb.onSlideChange(swiper); | |
| 34839 | pb.emit.apply(pb, [ 'local::slideChange' ].concat( args )); | |
| 34840 | }, | |
| 34841 | transitionStart: function transitionStart() { | |
| 34842 | var args = [], len = arguments.length; | |
| 34843 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 34844 | ||
| 34845 | pb.emit.apply(pb, [ 'local::transitionStart' ].concat( args )); | |
| 34846 | }, | |
| 34847 | transitionEnd: function transitionEnd() { | |
| 34848 | var args = [], len = arguments.length; | |
| 34849 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 34850 | ||
| 34851 | pb.emit.apply(pb, [ 'local::transitionEnd' ].concat( args )); | |
| 34852 | }, | |
| 34853 | slideChangeTransitionStart: function slideChangeTransitionStart() { | |
| 34854 | var args = [], len = arguments.length; | |
| 34855 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 34856 | ||
| 34857 | pb.emit.apply(pb, [ 'local::slideChangeTransitionStart' ].concat( args )); | |
| 34858 | }, | |
| 34859 | slideChangeTransitionEnd: function slideChangeTransitionEnd() { | |
| 34860 | var args = [], len = arguments.length; | |
| 34861 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 34862 | ||
| 34863 | pb.emit.apply(pb, [ 'local::slideChangeTransitionEnd' ].concat( args )); | |
| 34864 | }, | |
| 34865 | lazyImageLoad: function lazyImageLoad() { | |
| 34866 | var args = [], len = arguments.length; | |
| 34867 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 34868 | ||
| 34869 | pb.emit.apply(pb, [ 'local::lazyImageLoad' ].concat( args )); | |
| 34870 | }, | |
| 34871 | lazyImageReady: function lazyImageReady() { | |
| 34872 | var args = [], len = arguments.length; | |
| 34873 | while ( len-- ) args[ len ] = arguments[ len ]; | |
| 34874 | ||
| 34875 | var slideEl = args[0]; | |
| 34876 | $(slideEl).removeClass('photo-browser-slide-lazy'); | |
| 34877 | pb.emit.apply(pb, [ 'local::lazyImageReady' ].concat( args )); | |
| 34878 | }, | |
| 34879 | }, | |
| 34880 | }); | |
| 34881 | if (pb.params.swipeToClose && pb.params.type !== 'page') { | |
| 34882 | Utils.extend(swiperParams.on, { | |
| 34883 | touchStart: function touchStart(e) { | |
| 34884 | pb.onTouchStart(e); | |
| 34885 | pb.emit('local::touchStart', e); | |
| 34886 | }, | |
| 34887 | touchMoveOpposite: function touchMoveOpposite(e) { | |
| 34888 | pb.onTouchMove(e); | |
| 34889 | pb.emit('local::touchMoveOpposite', e); | |
| 34890 | }, | |
| 34891 | touchEnd: function touchEnd(e) { | |
| 34892 | pb.onTouchEnd(e); | |
| 34893 | pb.emit('local::touchEnd', e); | |
| 34894 | }, | |
| 34895 | }); | |
| 34896 | } | |
| 34897 | if (pb.params.virtualSlides) { | |
| 34898 | Utils.extend(swiperParams, { | |
| 34899 | virtual: { | |
| 34900 | slides: pb.params.photos, | |
| 34901 | renderSlide: function renderSlide(photo, index) { | |
| 34902 | if (photo.html || ((typeof photo === 'string' || photo instanceof String) && photo.indexOf('<') >= 0 && photo.indexOf('>') >= 0)) { | |
| 34903 | return pb.renderObject(photo, index); | |
| 34904 | } | |
| 34905 | if (pb.params.swiper.lazy === true || (pb.params.swiper.lazy && pb.params.swiper.lazy.enabled)) { | |
| 34906 | return pb.renderLazyPhoto(photo, index); | |
| 34907 | } | |
| 34908 | return pb.renderPhoto(photo, index); | |
| 34909 | }, | |
| 34910 | }, | |
| 34911 | }); | |
| 34912 | } | |
| 34913 | ||
| 34914 | pb.swiper = app.swiper.create(pb.$swiperContainerEl, swiperParams); | |
| 34915 | ||
| 34916 | if (pb.activeIndex === 0) { | |
| 34917 | pb.onSlideChange(pb.swiper); | |
| 34918 | } | |
| 34919 | if (pb.$el) { | |
| 34920 | pb.$el.trigger('photobrowser:open'); | |
| 34921 | } | |
| 34922 | pb.emit('local::open photoBrowserOpen', pb); | |
| 34923 | }; | |
| 34924 | ||
| 34925 | PhotoBrowser.prototype.onOpened = function onOpened () { | |
| 34926 | var pb = this; | |
| 34927 | ||
| 34928 | if (pb.$el) { | |
| 34929 | pb.$el.trigger('photobrowser:opened'); | |
| 34930 | } | |
| 34931 | pb.emit('local::opened photoBrowserOpened', pb); | |
| 34932 | }; | |
| 34933 | ||
| 34934 | PhotoBrowser.prototype.onClose = function onClose () { | |
| 34935 | var pb = this; | |
| 34936 | if (pb.destroyed) { return; } | |
| 34937 | ||
| 34938 | // Destroy Swiper | |
| 34939 | if (pb.swiper && pb.swiper.destroy) { | |
| 34940 | pb.swiper.destroy(true, false); | |
| 34941 | pb.swiper = null; | |
| 34942 | delete pb.swiper; | |
| 34943 | } | |
| 34944 | if (pb.$el) { | |
| 34945 | pb.$el.trigger('photobrowser:close'); | |
| 34946 | } | |
| 34947 | pb.emit('local::close photoBrowserClose', pb); | |
| 34948 | }; | |
| 34949 | ||
| 34950 | PhotoBrowser.prototype.onClosed = function onClosed () { | |
| 34951 | var pb = this; | |
| 34952 | if (pb.destroyed) { return; } | |
| 34953 | pb.opened = false; | |
| 34954 | pb.$el = null; | |
| 34955 | pb.el = null; | |
| 34956 | delete pb.$el; | |
| 34957 | delete pb.el; | |
| 34958 | if (pb.$el) { | |
| 34959 | pb.$el.trigger('photobrowser:closed'); | |
| 34960 | } | |
| 34961 | pb.emit('local::closed photoBrowserClosed', pb); | |
| 34962 | }; | |
| 34963 | ||
| 34964 | // Open | |
| 34965 | PhotoBrowser.prototype.openPage = function openPage () { | |
| 34966 | var pb = this; | |
| 34967 | if (pb.opened) { return pb; } | |
| 34968 | ||
| 34969 | var pageHtml = pb.renderPage(); | |
| 34970 | ||
| 34971 | pb.view.router.navigate({ | |
| 34972 | url: pb.url, | |
| 34973 | route: { | |
| 34974 | content: pageHtml, | |
| 34975 | path: pb.url, | |
| 34976 | on: { | |
| 34977 | pageBeforeIn: function pageBeforeIn(e, page) { | |
| 34978 | pb.view.$el.addClass(("with-photo-browser-page with-photo-browser-page-" + (pb.params.theme))); | |
| 34979 | pb.onOpen('page', page.el); | |
| 34980 | }, | |
| 34981 | pageAfterIn: function pageAfterIn(e, page) { | |
| 34982 | pb.onOpened('page', page.el); | |
| 34983 | }, | |
| 34984 | pageBeforeOut: function pageBeforeOut(e, page) { | |
| 34985 | pb.view.$el.removeClass(("with-photo-browser-page with-photo-browser-page-exposed with-photo-browser-page-" + (pb.params.theme))); | |
| 34986 | pb.onClose('page', page.el); | |
| 34987 | }, | |
| 34988 | pageAfterOut: function pageAfterOut(e, page) { | |
| 34989 | pb.onClosed('page', page.el); | |
| 34990 | }, | |
| 34991 | }, | |
| 34992 | }, | |
| 34993 | }); | |
| 34994 | return pb; | |
| 34995 | }; | |
| 34996 | ||
| 34997 | PhotoBrowser.prototype.openStandalone = function openStandalone () { | |
| 34998 | var pb = this; | |
| 34999 | if (pb.opened) { return pb; } | |
| 35000 | ||
| 35001 | var standaloneHtml = pb.renderStandalone(); | |
| 35002 | ||
| 35003 | var popupParams = { | |
| 35004 | backdrop: false, | |
| 35005 | content: standaloneHtml, | |
| 35006 | on: { | |
| 35007 | popupOpen: function popupOpen(popup) { | |
| 35008 | pb.onOpen('popup', popup.el); | |
| 35009 | }, | |
| 35010 | popupOpened: function popupOpened(popup) { | |
| 35011 | pb.onOpened('popup', popup.el); | |
| 35012 | }, | |
| 35013 | popupClose: function popupClose(popup) { | |
| 35014 | pb.onClose('popup', popup.el); | |
| 35015 | }, | |
| 35016 | popupClosed: function popupClosed(popup) { | |
| 35017 | pb.onClosed('popup', popup.el); | |
| 35018 | }, | |
| 35019 | }, | |
| 35020 | }; | |
| 35021 | ||
| 35022 | if (pb.params.routableModals) { | |
| 35023 | pb.view.router.navigate({ | |
| 35024 | url: pb.url, | |
| 35025 | route: { | |
| 35026 | path: pb.url, | |
| 35027 | popup: popupParams, | |
| 35028 | }, | |
| 35029 | }); | |
| 35030 | } else { | |
| 35031 | pb.modal = pb.app.popup.create(popupParams).open(); | |
| 35032 | } | |
| 35033 | return pb; | |
| 35034 | }; | |
| 35035 | ||
| 35036 | PhotoBrowser.prototype.openPopup = function openPopup () { | |
| 35037 | var pb = this; | |
| 35038 | if (pb.opened) { return pb; } | |
| 35039 | ||
| 35040 | var popupHtml = pb.renderPopup(); | |
| 35041 | ||
| 35042 | var popupParams = { | |
| 35043 | content: popupHtml, | |
| 35044 | on: { | |
| 35045 | popupOpen: function popupOpen(popup) { | |
| 35046 | pb.onOpen('popup', popup.el); | |
| 35047 | }, | |
| 35048 | popupOpened: function popupOpened(popup) { | |
| 35049 | pb.onOpened('popup', popup.el); | |
| 35050 | }, | |
| 35051 | popupClose: function popupClose(popup) { | |
| 35052 | pb.onClose('popup', popup.el); | |
| 35053 | }, | |
| 35054 | popupClosed: function popupClosed(popup) { | |
| 35055 | pb.onClosed('popup', popup.el); | |
| 35056 | }, | |
| 35057 | }, | |
| 35058 | }; | |
| 35059 | ||
| 35060 | if (pb.params.routableModals) { | |
| 35061 | pb.view.router.navigate({ | |
| 35062 | url: pb.url, | |
| 35063 | route: { | |
| 35064 | path: pb.url, | |
| 35065 | popup: popupParams, | |
| 35066 | }, | |
| 35067 | }); | |
| 35068 | } else { | |
| 35069 | pb.modal = pb.app.popup.create(popupParams).open(); | |
| 35070 | } | |
| 35071 | return pb; | |
| 35072 | }; | |
| 35073 | ||
| 35074 | // Exposition | |
| 35075 | PhotoBrowser.prototype.expositionEnable = function expositionEnable () { | |
| 35076 | var pb = this; | |
| 35077 | if (pb.params.type === 'page') { | |
| 35078 | pb.view.$el.addClass('with-photo-browser-page-exposed'); | |
| 35079 | } | |
| 35080 | if (pb.$el) { pb.$el.addClass('photo-browser-exposed'); } | |
| 35081 | if (pb.params.expositionHideCaptions) { pb.$captionsContainerEl.addClass('photo-browser-captions-exposed'); } | |
| 35082 | pb.exposed = true; | |
| 35083 | return pb; | |
| 35084 | }; | |
| 35085 | ||
| 35086 | PhotoBrowser.prototype.expositionDisable = function expositionDisable () { | |
| 35087 | var pb = this; | |
| 35088 | if (pb.params.type === 'page') { | |
| 35089 | pb.view.$el.removeClass('with-photo-browser-page-exposed'); | |
| 35090 | } | |
| 35091 | if (pb.$el) { pb.$el.removeClass('photo-browser-exposed'); } | |
| 35092 | if (pb.params.expositionHideCaptions) { pb.$captionsContainerEl.removeClass('photo-browser-captions-exposed'); } | |
| 35093 | pb.exposed = false; | |
| 35094 | return pb; | |
| 35095 | }; | |
| 35096 | ||
| 35097 | PhotoBrowser.prototype.expositionToggle = function expositionToggle () { | |
| 35098 | var pb = this; | |
| 35099 | if (pb.params.type === 'page') { | |
| 35100 | pb.view.$el.toggleClass('with-photo-browser-page-exposed'); | |
| 35101 | } | |
| 35102 | if (pb.$el) { pb.$el.toggleClass('photo-browser-exposed'); } | |
| 35103 | if (pb.params.expositionHideCaptions) { pb.$captionsContainerEl.toggleClass('photo-browser-captions-exposed'); } | |
| 35104 | pb.exposed = !pb.exposed; | |
| 35105 | return pb; | |
| 35106 | }; | |
| 35107 | ||
| 35108 | PhotoBrowser.prototype.open = function open (index) { | |
| 35109 | var pb = this; | |
| 35110 | var type = pb.params.type; | |
| 35111 | if (pb.opened) { | |
| 35112 | if (pb.swiper && typeof index !== 'undefined') { | |
| 35113 | pb.swiper.slideTo(parseInt(index, 10)); | |
| 35114 | } | |
| 35115 | return pb; | |
| 35116 | } | |
| 35117 | if (typeof index !== 'undefined') { | |
| 35118 | pb.activeIndex = index; | |
| 35119 | } | |
| 35120 | if (type === 'standalone') { | |
| 35121 | pb.openStandalone(); | |
| 35122 | } | |
| 35123 | if (type === 'page') { | |
| 35124 | pb.openPage(); | |
| 35125 | } | |
| 35126 | if (type === 'popup') { | |
| 35127 | pb.openPopup(); | |
| 35128 | } | |
| 35129 | return pb; | |
| 35130 | }; | |
| 35131 | ||
| 35132 | PhotoBrowser.prototype.close = function close () { | |
| 35133 | var pb = this; | |
| 35134 | if (!pb.opened) { return pb; } | |
| 35135 | if (pb.params.routableModals || pb.openedIn === 'page') { | |
| 35136 | if (pb.view) { pb.view.router.back(); } | |
| 35137 | } else { | |
| 35138 | pb.modal.once('modalClosed', function () { | |
| 35139 | Utils.nextTick(function () { | |
| 35140 | pb.modal.destroy(); | |
| 35141 | delete pb.modal; | |
| 35142 | }); | |
| 35143 | }); | |
| 35144 | pb.modal.close(); | |
| 35145 | } | |
| 35146 | return pb; | |
| 35147 | }; | |
| 35148 | // eslint-disable-next-line | |
| 35149 | PhotoBrowser.prototype.init = function init () {}; | |
| 35150 | ||
| 35151 | PhotoBrowser.prototype.destroy = function destroy () { | |
| 35152 | var pb = this; | |
| 35153 | pb.emit('local::beforeDestroy photoBrowserBeforeDestroy', pb); | |
| 35154 | if (pb.$el) { | |
| 35155 | pb.$el.trigger('photobrowser:beforedestroy'); | |
| 35156 | pb.$el[0].f7PhotoBrowser = null; | |
| 35157 | delete pb.$el[0].f7PhotoBrowser; | |
| 35158 | } | |
| 35159 | Utils.deleteProps(pb); | |
| 35160 | pb = null; | |
| 35161 | }; | |
| 35162 | ||
| 35163 | return PhotoBrowser; | |
| 35164 | }(Framework7Class)); | |
| 35165 | ||
| 35166 | var PhotoBrowser$1 = { | |
| 35167 | name: 'photoBrowser', | |
| 35168 | params: { | |
| 35169 | photoBrowser: { | |
| 35170 | photos: [], | |
| 35171 | exposition: true, | |
| 35172 | expositionHideCaptions: false, | |
| 35173 | type: 'standalone', | |
| 35174 | navbar: true, | |
| 35175 | toolbar: true, | |
| 35176 | theme: 'light', | |
| 35177 | captionsTheme: undefined, | |
| 35178 | iconsColor: undefined, | |
| 35179 | swipeToClose: true, | |
| 35180 | backLinkText: 'Close', | |
| 35181 | navbarOfText: 'of', | |
| 35182 | view: undefined, | |
| 35183 | url: 'photos/', | |
| 35184 | routableModals: true, | |
| 35185 | virtualSlides: true, | |
| 35186 | ||
| 35187 | renderNavbar: undefined, | |
| 35188 | renderToolbar: undefined, | |
| 35189 | renderCaption: undefined, | |
| 35190 | renderObject: undefined, | |
| 35191 | renderLazyPhoto: undefined, | |
| 35192 | renderPhoto: undefined, | |
| 35193 | renderPage: undefined, | |
| 35194 | renderPopup: undefined, | |
| 35195 | renderStandalone: undefined, | |
| 35196 | ||
| 35197 | swiper: { | |
| 35198 | initialSlide: 0, | |
| 35199 | spaceBetween: 20, | |
| 35200 | speed: 300, | |
| 35201 | loop: false, | |
| 35202 | preloadImages: true, | |
| 35203 | navigation: { | |
| 35204 | nextEl: '.photo-browser-next', | |
| 35205 | prevEl: '.photo-browser-prev', | |
| 35206 | }, | |
| 35207 | zoom: { | |
| 35208 | enabled: true, | |
| 35209 | maxRatio: 3, | |
| 35210 | minRatio: 1, | |
| 35211 | }, | |
| 35212 | lazy: { | |
| 35213 | enabled: true, | |
| 35214 | }, | |
| 35215 | }, | |
| 35216 | }, | |
| 35217 | }, | |
| 35218 | create: function create() { | |
| 35219 | var app = this; | |
| 35220 | app.photoBrowser = ConstructorMethods({ | |
| 35221 | defaultSelector: '.photo-browser', | |
| 35222 | constructor: PhotoBrowser, | |
| 35223 | app: app, | |
| 35224 | domProp: 'f7PhotoBrowser', | |
| 35225 | }); | |
| 35226 | }, | |
| 35227 | static: { | |
| 35228 | PhotoBrowser: PhotoBrowser, | |
| 35229 | }, | |
| 35230 | }; | |
| 35231 | ||
| 5d51ea26 | 35232 | var Notification = /*@__PURE__*/(function (Modal) { |
| 5309fbda DC |
35233 | function Notification(app, params) { |
| 35234 | var extendedParams = Utils.extend({ | |
| 35235 | on: {}, | |
| 35236 | }, app.params.notification, params); | |
| 35237 | ||
| 35238 | // Extends with open/close Modal methods; | |
| 5d51ea26 | 35239 | Modal.call(this, app, extendedParams); |
| 5309fbda DC |
35240 | |
| 35241 | var notification = this; | |
| 35242 | ||
| 35243 | notification.app = app; | |
| 35244 | ||
| 35245 | notification.params = extendedParams; | |
| 35246 | ||
| 35247 | var ref = notification.params; | |
| 35248 | var icon = ref.icon; | |
| 35249 | var title = ref.title; | |
| 35250 | var titleRightText = ref.titleRightText; | |
| 35251 | var subtitle = ref.subtitle; | |
| 35252 | var text = ref.text; | |
| 35253 | var closeButton = ref.closeButton; | |
| 35254 | var closeTimeout = ref.closeTimeout; | |
| 35255 | var cssClass = ref.cssClass; | |
| 35256 | var closeOnClick = ref.closeOnClick; | |
| 35257 | ||
| 35258 | var $el; | |
| 35259 | if (!notification.params.el) { | |
| 35260 | // Find Element | |
| 35261 | var notificationHtml = notification.render({ | |
| 35262 | icon: icon, | |
| 35263 | title: title, | |
| 35264 | titleRightText: titleRightText, | |
| 35265 | subtitle: subtitle, | |
| 35266 | text: text, | |
| 35267 | closeButton: closeButton, | |
| 35268 | cssClass: cssClass, | |
| 35269 | }); | |
| 35270 | ||
| 35271 | $el = $(notificationHtml); | |
| 35272 | } else { | |
| 35273 | $el = $(notification.params.el); | |
| 35274 | } | |
| 35275 | ||
| 35276 | if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| 35277 | return $el[0].f7Modal; | |
| 35278 | } | |
| 35279 | ||
| 35280 | if ($el.length === 0) { | |
| 35281 | return notification.destroy(); | |
| 35282 | } | |
| 35283 | ||
| 35284 | Utils.extend(notification, { | |
| 35285 | $el: $el, | |
| 35286 | el: $el[0], | |
| 35287 | type: 'notification', | |
| 35288 | }); | |
| 35289 | ||
| 35290 | $el[0].f7Modal = notification; | |
| 35291 | ||
| 35292 | if (closeButton) { | |
| 35293 | $el.find('.notification-close-button').on('click', function () { | |
| 35294 | notification.close(); | |
| 35295 | }); | |
| 35296 | } | |
| 35297 | $el.on('click', function (e) { | |
| 35298 | if (closeButton && $(e.target).closest('.notification-close-button').length) { | |
| 35299 | return; | |
| 35300 | } | |
| 35301 | notification.emit('local::click notificationClick', notification); | |
| 35302 | if (closeOnClick) { notification.close(); } | |
| 35303 | }); | |
| 35304 | ||
| 35305 | notification.on('beforeDestroy', function () { | |
| 35306 | $el.off('click'); | |
| 35307 | }); | |
| 35308 | ||
| 35309 | /* Touch Events */ | |
| 35310 | var isTouched; | |
| 35311 | var isMoved; | |
| 35312 | var isScrolling; | |
| 35313 | var touchesDiff; | |
| 35314 | var touchStartTime; | |
| 35315 | var notificationHeight; | |
| 35316 | var touchesStart = {}; | |
| 35317 | function handleTouchStart(e) { | |
| 35318 | if (isTouched) { return; } | |
| 35319 | isTouched = true; | |
| 35320 | isMoved = false; | |
| 35321 | isScrolling = undefined; | |
| 35322 | touchStartTime = Utils.now(); | |
| 35323 | touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 35324 | touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 35325 | } | |
| 35326 | function handleTouchMove(e) { | |
| 35327 | if (!isTouched) { return; } | |
| 35328 | var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 35329 | var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 35330 | if (typeof isScrolling === 'undefined') { | |
| 35331 | isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) < Math.abs(pageX - touchesStart.x)); | |
| 35332 | } | |
| 35333 | if (isScrolling) { | |
| 35334 | isTouched = false; | |
| 35335 | return; | |
| 35336 | } | |
| 35337 | e.preventDefault(); | |
| 35338 | if (!isMoved) { | |
| 35339 | notification.$el.removeClass('notification-transitioning'); | |
| 35340 | notification.$el.transition(0); | |
| 35341 | notificationHeight = notification.$el[0].offsetHeight / 2; | |
| 35342 | } | |
| 35343 | isMoved = true; | |
| 35344 | touchesDiff = (pageY - touchesStart.y); | |
| 35345 | var newTranslate = touchesDiff; | |
| 35346 | if (touchesDiff > 0) { | |
| 35347 | newTranslate = Math.pow( touchesDiff, 0.8 ); | |
| 35348 | } | |
| 35349 | notification.$el.transform(("translate3d(0, " + newTranslate + "px, 0)")); | |
| 35350 | } | |
| 35351 | function handleTouchEnd() { | |
| 35352 | if (!isTouched || !isMoved) { | |
| 35353 | isTouched = false; | |
| 35354 | isMoved = false; | |
| 35355 | return; | |
| 35356 | } | |
| 35357 | isTouched = false; | |
| 35358 | isMoved = false; | |
| 35359 | if (touchesDiff === 0) { | |
| 35360 | return; | |
| 35361 | } | |
| 35362 | ||
| 35363 | var timeDiff = Utils.now() - touchStartTime; | |
| 35364 | notification.$el.transition(''); | |
| 35365 | notification.$el.addClass('notification-transitioning'); | |
| 35366 | notification.$el.transform(''); | |
| 35367 | ||
| 35368 | if ( | |
| 35369 | (touchesDiff < -10 && timeDiff < 300) | |
| 35370 | || (-touchesDiff >= notificationHeight / 1) | |
| 35371 | ) { | |
| 35372 | notification.close(); | |
| 35373 | } | |
| 35374 | } | |
| 35375 | ||
| 35376 | function attachTouchEvents() { | |
| 35377 | { | |
| 35378 | notification.$el.on(app.touchEvents.start, handleTouchStart, { passive: true }); | |
| 35379 | app.on('touchmove:active', handleTouchMove); | |
| 35380 | app.on('touchend:passive', handleTouchEnd); | |
| 35381 | } | |
| 35382 | } | |
| 35383 | function detachTouchEvents() { | |
| 35384 | { | |
| 35385 | notification.$el.off(app.touchEvents.start, handleTouchStart, { passive: true }); | |
| 35386 | app.off('touchmove:active', handleTouchMove); | |
| 35387 | app.off('touchend:passive', handleTouchEnd); | |
| 35388 | } | |
| 35389 | } | |
| 35390 | ||
| 35391 | var timeoutId; | |
| 35392 | function closeOnTimeout() { | |
| 35393 | timeoutId = Utils.nextTick(function () { | |
| 35394 | if (isTouched && isMoved) { | |
| 35395 | closeOnTimeout(); | |
| 35396 | return; | |
| 35397 | } | |
| 35398 | notification.close(); | |
| 35399 | }, closeTimeout); | |
| 35400 | } | |
| 35401 | notification.on('open', function () { | |
| 35402 | if (notification.params.swipeToClose) { | |
| 35403 | attachTouchEvents(); | |
| 35404 | } | |
| 35405 | $('.notification.modal-in').each(function (index, openedEl) { | |
| 35406 | var notificationInstance = app.notification.get(openedEl); | |
| 35407 | if (openedEl !== notification.el && notificationInstance) { | |
| 35408 | notificationInstance.close(); | |
| 35409 | } | |
| 35410 | }); | |
| 35411 | if (closeTimeout) { | |
| 35412 | closeOnTimeout(); | |
| 35413 | } | |
| 35414 | }); | |
| 35415 | notification.on('close beforeDestroy', function () { | |
| 35416 | if (notification.params.swipeToClose) { | |
| 35417 | detachTouchEvents(); | |
| 35418 | } | |
| 35419 | win.clearTimeout(timeoutId); | |
| 35420 | }); | |
| 35421 | ||
| 35422 | return notification; | |
| 35423 | } | |
| 35424 | ||
| 5d51ea26 DC |
35425 | if ( Modal ) Notification.__proto__ = Modal; |
| 35426 | Notification.prototype = Object.create( Modal && Modal.prototype ); | |
| 5309fbda DC |
35427 | Notification.prototype.constructor = Notification; |
| 35428 | ||
| 35429 | Notification.prototype.render = function render () { | |
| 35430 | var notification = this; | |
| 35431 | if (notification.params.render) { return notification.params.render.call(notification, notification); } | |
| 35432 | var ref = notification.params; | |
| 35433 | var icon = ref.icon; | |
| 35434 | var title = ref.title; | |
| 35435 | var titleRightText = ref.titleRightText; | |
| 35436 | var subtitle = ref.subtitle; | |
| 35437 | var text = ref.text; | |
| 35438 | var closeButton = ref.closeButton; | |
| 35439 | var cssClass = ref.cssClass; | |
| 35440 | return ("\n <div class=\"notification " + (cssClass || '') + "\">\n <div class=\"notification-header\">\n " + (icon ? ("<div class=\"notification-icon\">" + icon + "</div>") : '') + "\n " + (title ? ("<div class=\"notification-title\">" + title + "</div>") : '') + "\n " + (titleRightText ? ("<div class=\"notification-title-right-text\">" + titleRightText + "</div>") : '') + "\n " + (closeButton ? '<span class="notification-close-button"></span>' : '') + "\n </div>\n <div class=\"notification-content\">\n " + (subtitle ? ("<div class=\"notification-subtitle\">" + subtitle + "</div>") : '') + "\n " + (text ? ("<div class=\"notification-text\">" + text + "</div>") : '') + "\n </div>\n </div>\n ").trim(); | |
| 35441 | }; | |
| 35442 | ||
| 35443 | return Notification; | |
| 35444 | }(Modal)); | |
| 35445 | ||
| 35446 | var Notification$1 = { | |
| 35447 | name: 'notification', | |
| 35448 | static: { | |
| 35449 | Notification: Notification, | |
| 35450 | }, | |
| 35451 | create: function create() { | |
| 35452 | var app = this; | |
| 35453 | app.notification = Utils.extend( | |
| 35454 | {}, | |
| 35455 | ModalMethods({ | |
| 35456 | app: app, | |
| 35457 | constructor: Notification, | |
| 35458 | defaultSelector: '.notification.modal-in', | |
| 35459 | }) | |
| 35460 | ); | |
| 35461 | }, | |
| 35462 | params: { | |
| 35463 | notification: { | |
| 35464 | icon: null, | |
| 35465 | title: null, | |
| 35466 | titleRightText: null, | |
| 35467 | subtitle: null, | |
| 35468 | text: null, | |
| 35469 | closeButton: false, | |
| 35470 | closeTimeout: null, | |
| 35471 | closeOnClick: false, | |
| 35472 | swipeToClose: true, | |
| 35473 | cssClass: null, | |
| 35474 | render: null, | |
| 35475 | }, | |
| 35476 | }, | |
| 35477 | }; | |
| 35478 | ||
| 35479 | /* eslint "no-useless-escape": "off" */ | |
| 35480 | ||
| 5d51ea26 | 35481 | var Autocomplete = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
35482 | function Autocomplete(app, params) { |
| 35483 | if ( params === void 0 ) params = {}; | |
| 35484 | ||
| 5d51ea26 | 35485 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
35486 | |
| 35487 | var ac = this; | |
| 35488 | ac.app = app; | |
| 35489 | ||
| 35490 | var defaults = Utils.extend({ | |
| 35491 | on: {}, | |
| 35492 | }, app.params.autocomplete); | |
| 35493 | ||
| 5d51ea26 DC |
35494 | if (typeof defaults.searchbarDisableButton === 'undefined') { |
| 35495 | defaults.searchbarDisableButton = app.theme !== 'aurora'; | |
| 35496 | } | |
| 5309fbda DC |
35497 | |
| 35498 | // Extend defaults with modules params | |
| 35499 | ac.useModulesParams(defaults); | |
| 35500 | ||
| 35501 | ac.params = Utils.extend(defaults, params); | |
| 35502 | ||
| 35503 | var $openerEl; | |
| 35504 | if (ac.params.openerEl) { | |
| 35505 | $openerEl = $(ac.params.openerEl); | |
| 35506 | if ($openerEl.length) { $openerEl[0].f7Autocomplete = ac; } | |
| 35507 | } | |
| 35508 | ||
| 35509 | var $inputEl; | |
| 35510 | if (ac.params.inputEl) { | |
| 35511 | $inputEl = $(ac.params.inputEl); | |
| 35512 | if ($inputEl.length) { $inputEl[0].f7Autocomplete = ac; } | |
| 35513 | } | |
| 35514 | ||
| 35515 | var view; | |
| 35516 | if (ac.params.view) { | |
| 35517 | view = ac.params.view; | |
| 35518 | } else if ($openerEl || $inputEl) { | |
| 5d51ea26 DC |
35519 | var $el = $openerEl || $inputEl; |
| 35520 | view = $el.closest('.view').length && $el.closest('.view')[0].f7View; | |
| 5309fbda DC |
35521 | } |
| 35522 | if (!view) { view = app.views.main; } | |
| 35523 | ||
| 35524 | var id = Utils.id(); | |
| 35525 | ||
| 35526 | var url = params.url; | |
| 35527 | if (!url && $openerEl && $openerEl.length) { | |
| 35528 | if ($openerEl.attr('href')) { url = $openerEl.attr('href'); } | |
| 35529 | else if ($openerEl.find('a').length > 0) { | |
| 35530 | url = $openerEl.find('a').attr('href'); | |
| 35531 | } | |
| 35532 | } | |
| 35533 | if (!url || url === '#' || url === '') { url = ac.params.url; } | |
| 35534 | ||
| 35535 | var inputType = ac.params.multiple ? 'checkbox' : 'radio'; | |
| 35536 | ||
| 35537 | Utils.extend(ac, { | |
| 35538 | $openerEl: $openerEl, | |
| 35539 | openerEl: $openerEl && $openerEl[0], | |
| 35540 | $inputEl: $inputEl, | |
| 35541 | inputEl: $inputEl && $inputEl[0], | |
| 35542 | id: id, | |
| 35543 | view: view, | |
| 35544 | url: url, | |
| 35545 | value: ac.params.value || [], | |
| 35546 | inputType: inputType, | |
| 35547 | inputName: (inputType + "-" + id), | |
| 35548 | $modalEl: undefined, | |
| 35549 | $dropdownEl: undefined, | |
| 35550 | }); | |
| 35551 | ||
| 35552 | var previousQuery = ''; | |
| 35553 | function onInputChange() { | |
| 35554 | var query = ac.$inputEl.val().trim(); | |
| 35555 | ||
| 35556 | if (!ac.params.source) { return; } | |
| 35557 | ac.params.source.call(ac, query, function (items) { | |
| 35558 | var itemsHTML = ''; | |
| 35559 | var limit = ac.params.limit ? Math.min(ac.params.limit, items.length) : items.length; | |
| 35560 | ac.items = items; | |
| 35561 | var regExp; | |
| 35562 | if (ac.params.highlightMatches) { | |
| 35563 | query = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'); | |
| 35564 | regExp = new RegExp(("(" + query + ")"), 'i'); | |
| 35565 | } | |
| 35566 | ||
| 35567 | var firstValue; | |
| 35568 | var firstItem; | |
| 35569 | for (var i = 0; i < limit; i += 1) { | |
| 35570 | var itemValue = typeof items[i] === 'object' ? items[i][ac.params.valueProperty] : items[i]; | |
| 35571 | var itemText = typeof items[i] === 'object' ? items[i][ac.params.textProperty] : items[i]; | |
| 35572 | if (i === 0) { | |
| 35573 | firstValue = itemValue; | |
| 35574 | firstItem = ac.items[i]; | |
| 35575 | } | |
| 35576 | itemsHTML += ac.renderItem({ | |
| 35577 | value: itemValue, | |
| 35578 | text: ac.params.highlightMatches ? itemText.replace(regExp, '<b>$1</b>') : itemText, | |
| 35579 | }, i); | |
| 35580 | } | |
| 35581 | if (itemsHTML === '' && query === '' && ac.params.dropdownPlaceholderText) { | |
| 35582 | itemsHTML += ac.renderItem({ | |
| 35583 | placeholder: true, | |
| 35584 | text: ac.params.dropdownPlaceholderText, | |
| 35585 | }); | |
| 35586 | } | |
| 35587 | ac.$dropdownEl.find('ul').html(itemsHTML); | |
| 35588 | if (ac.params.typeahead) { | |
| 35589 | if (!firstValue || !firstItem) { | |
| 35590 | return; | |
| 35591 | } | |
| 35592 | if (firstValue.toLowerCase().indexOf(query.toLowerCase()) !== 0) { | |
| 35593 | return; | |
| 35594 | } | |
| 35595 | if (previousQuery.toLowerCase() === query.toLowerCase()) { | |
| 35596 | ac.value = []; | |
| 35597 | return; | |
| 35598 | } | |
| 35599 | ||
| 35600 | if (previousQuery.toLowerCase().indexOf(query.toLowerCase()) === 0) { | |
| 35601 | previousQuery = query; | |
| 35602 | ac.value = []; | |
| 35603 | return; | |
| 35604 | } | |
| 35605 | $inputEl.val(firstValue); | |
| 35606 | $inputEl[0].setSelectionRange(query.length, firstValue.length); | |
| 35607 | ||
| 35608 | var previousValue = typeof ac.value[0] === 'object' ? ac.value[0][ac.params.valueProperty] : ac.value[0]; | |
| 35609 | if (!previousValue || firstValue.toLowerCase() !== previousValue.toLowerCase()) { | |
| 35610 | ac.value = [firstItem]; | |
| 35611 | ac.emit('local::change autocompleteChange', [firstItem]); | |
| 35612 | } | |
| 35613 | } | |
| 35614 | ||
| 35615 | previousQuery = query; | |
| 35616 | }); | |
| 35617 | } | |
| 35618 | function onPageInputChange() { | |
| 35619 | var input = this; | |
| 35620 | var value = input.value; | |
| 35621 | var isValues = $(input).parents('.autocomplete-values').length > 0; | |
| 35622 | var item; | |
| 35623 | var itemValue; | |
| 35624 | var aValue; | |
| 35625 | if (isValues) { | |
| 35626 | if (ac.inputType === 'checkbox' && !input.checked) { | |
| 35627 | for (var i = 0; i < ac.value.length; i += 1) { | |
| 35628 | aValue = typeof ac.value[i] === 'string' ? ac.value[i] : ac.value[i][ac.params.valueProperty]; | |
| 35629 | if (aValue === value || aValue * 1 === value * 1) { | |
| 35630 | ac.value.splice(i, 1); | |
| 35631 | } | |
| 35632 | } | |
| 35633 | ac.updateValues(); | |
| 35634 | ac.emit('local::change autocompleteChange', ac.value); | |
| 35635 | } | |
| 35636 | return; | |
| 35637 | } | |
| 35638 | ||
| 35639 | // Find Related Item | |
| 35640 | for (var i$1 = 0; i$1 < ac.items.length; i$1 += 1) { | |
| 35641 | itemValue = typeof ac.items[i$1] === 'object' ? ac.items[i$1][ac.params.valueProperty] : ac.items[i$1]; | |
| 35642 | if (itemValue === value || itemValue * 1 === value * 1) { item = ac.items[i$1]; } | |
| 35643 | } | |
| 35644 | if (ac.inputType === 'radio') { | |
| 35645 | ac.value = [item]; | |
| 35646 | } else if (input.checked) { | |
| 35647 | ac.value.push(item); | |
| 35648 | } else { | |
| 35649 | for (var i$2 = 0; i$2 < ac.value.length; i$2 += 1) { | |
| 35650 | aValue = typeof ac.value[i$2] === 'object' ? ac.value[i$2][ac.params.valueProperty] : ac.value[i$2]; | |
| 35651 | if (aValue === value || aValue * 1 === value * 1) { | |
| 35652 | ac.value.splice(i$2, 1); | |
| 35653 | } | |
| 35654 | } | |
| 35655 | } | |
| 35656 | ||
| 35657 | // Update Values Block | |
| 35658 | ac.updateValues(); | |
| 35659 | ||
| 35660 | // On Select Callback | |
| 35661 | if (((ac.inputType === 'radio' && input.checked) || ac.inputType === 'checkbox')) { | |
| 35662 | ac.emit('local::change autocompleteChange', ac.value); | |
| 35663 | } | |
| 35664 | } | |
| 35665 | function onHtmlClick(e) { | |
| 35666 | var $targetEl = $(e.target); | |
| 35667 | if ($targetEl.is(ac.$inputEl[0]) || (ac.$dropdownEl && $targetEl.closest(ac.$dropdownEl[0]).length)) { return; } | |
| 35668 | ac.close(); | |
| 35669 | } | |
| 35670 | function onOpenerClick() { | |
| 35671 | ac.open(); | |
| 35672 | } | |
| 35673 | function onInputFocus() { | |
| 35674 | ac.open(); | |
| 35675 | } | |
| 35676 | function onInputBlur() { | |
| 35677 | if (ac.$dropdownEl.find('label.active-state').length > 0) { return; } | |
| 5d51ea26 DC |
35678 | setTimeout(function () { |
| 35679 | ac.close(); | |
| 35680 | }, 0); | |
| 5309fbda DC |
35681 | } |
| 35682 | function onResize() { | |
| 35683 | ac.positionDropdown(); | |
| 35684 | } | |
| 35685 | ||
| 35686 | function onKeyDown(e) { | |
| 5d51ea26 DC |
35687 | if (!ac.opened) { return; } |
| 35688 | if (e.keyCode === 27) { | |
| 35689 | // ESC | |
| 5309fbda DC |
35690 | e.preventDefault(); |
| 35691 | ac.$inputEl.blur(); | |
| 5d51ea26 | 35692 | return; |
| 5309fbda | 35693 | } |
| 5d51ea26 DC |
35694 | if (e.keyCode === 13) { |
| 35695 | // Enter | |
| 35696 | var $selectedItemLabel = ac.$dropdownEl.find('.autocomplete-dropdown-selected label'); | |
| 35697 | if ($selectedItemLabel.length) { | |
| 35698 | e.preventDefault(); | |
| 35699 | $selectedItemLabel.trigger('click'); | |
| 35700 | ac.$inputEl.blur(); | |
| 35701 | return; | |
| 35702 | } | |
| 35703 | if (ac.params.typeahead) { | |
| 35704 | e.preventDefault(); | |
| 35705 | ac.$inputEl.blur(); | |
| 35706 | } | |
| 35707 | return; | |
| 35708 | } | |
| 35709 | if (e.keyCode !== 40 && e.keyCode !== 38) { return; } | |
| 35710 | e.preventDefault(); | |
| 35711 | var $selectedItem = ac.$dropdownEl.find('.autocomplete-dropdown-selected'); | |
| 35712 | var $newItem; | |
| 35713 | if ($selectedItem.length) { | |
| 35714 | $newItem = $selectedItem[e.keyCode === 40 ? 'next' : 'prev']('li'); | |
| 35715 | if (!$newItem.length) { | |
| 35716 | $newItem = ac.$dropdownEl.find('li').eq(e.keyCode === 40 ? 0 : ac.$dropdownEl.find('li').length - 1); | |
| 35717 | } | |
| 35718 | } else { | |
| 35719 | $newItem = ac.$dropdownEl.find('li').eq(e.keyCode === 40 ? 0 : ac.$dropdownEl.find('li').length - 1); | |
| 35720 | } | |
| 35721 | if ($newItem.hasClass('autocomplete-dropdown-placeholder')) { return; } | |
| 35722 | $selectedItem.removeClass('autocomplete-dropdown-selected'); | |
| 35723 | $newItem.addClass('autocomplete-dropdown-selected'); | |
| 5309fbda | 35724 | } |
| 5d51ea26 | 35725 | function onDropdownClick() { |
| 5309fbda DC |
35726 | var $clickedEl = $(this); |
| 35727 | var clickedItem; | |
| 35728 | for (var i = 0; i < ac.items.length; i += 1) { | |
| 35729 | var itemValue = typeof ac.items[i] === 'object' ? ac.items[i][ac.params.valueProperty] : ac.items[i]; | |
| 35730 | var value = $clickedEl.attr('data-value'); | |
| 35731 | if (itemValue === value || itemValue * 1 === value * 1) { | |
| 35732 | clickedItem = ac.items[i]; | |
| 35733 | } | |
| 35734 | } | |
| 35735 | if (ac.params.updateInputValueOnSelect) { | |
| 35736 | ac.$inputEl.val(typeof clickedItem === 'object' ? clickedItem[ac.params.valueProperty] : clickedItem); | |
| 35737 | ac.$inputEl.trigger('input change'); | |
| 35738 | } | |
| 35739 | ac.value = [clickedItem]; | |
| 35740 | ac.emit('local::change autocompleteChange', [clickedItem]); | |
| 5309fbda DC |
35741 | ac.close(); |
| 35742 | } | |
| 35743 | ||
| 35744 | ac.attachEvents = function attachEvents() { | |
| 35745 | if (ac.params.openIn !== 'dropdown' && ac.$openerEl) { | |
| 35746 | ac.$openerEl.on('click', onOpenerClick); | |
| 35747 | } | |
| 35748 | if (ac.params.openIn === 'dropdown' && ac.$inputEl) { | |
| 35749 | ac.$inputEl.on('focus', onInputFocus); | |
| 35750 | ac.$inputEl.on(ac.params.inputEvents, onInputChange); | |
| 35751 | if (app.device.android) { | |
| 35752 | $('html').on('click', onHtmlClick); | |
| 35753 | } else { | |
| 35754 | ac.$inputEl.on('blur', onInputBlur); | |
| 35755 | } | |
| 5d51ea26 | 35756 | ac.$inputEl.on('keydown', onKeyDown); |
| 5309fbda DC |
35757 | } |
| 35758 | }; | |
| 35759 | ac.detachEvents = function attachEvents() { | |
| 35760 | if (ac.params.openIn !== 'dropdown' && ac.$openerEl) { | |
| 35761 | ac.$openerEl.off('click', onOpenerClick); | |
| 35762 | } | |
| 35763 | if (ac.params.openIn === 'dropdown' && ac.$inputEl) { | |
| 35764 | ac.$inputEl.off('focus', onInputFocus); | |
| 35765 | ac.$inputEl.off(ac.params.inputEvents, onInputChange); | |
| 35766 | if (app.device.android) { | |
| 35767 | $('html').off('click', onHtmlClick); | |
| 35768 | } else { | |
| 35769 | ac.$inputEl.off('blur', onInputBlur); | |
| 35770 | } | |
| 5d51ea26 | 35771 | ac.$inputEl.off('keydown', onKeyDown); |
| 5309fbda DC |
35772 | } |
| 35773 | }; | |
| 35774 | ac.attachDropdownEvents = function attachDropdownEvents() { | |
| 5d51ea26 | 35775 | ac.$dropdownEl.on('click', 'label', onDropdownClick); |
| 5309fbda DC |
35776 | app.on('resize', onResize); |
| 35777 | }; | |
| 35778 | ac.detachDropdownEvents = function detachDropdownEvents() { | |
| 5d51ea26 | 35779 | ac.$dropdownEl.off('click', 'label', onDropdownClick); |
| 5309fbda DC |
35780 | app.off('resize', onResize); |
| 35781 | }; | |
| 35782 | ||
| 35783 | ac.attachPageEvents = function attachPageEvents() { | |
| 35784 | ac.$el.on('change', 'input[type="radio"], input[type="checkbox"]', onPageInputChange); | |
| 35785 | if (ac.params.closeOnSelect && !ac.params.multiple) { | |
| 35786 | ac.$el.once('click', '.list label', function () { | |
| 35787 | Utils.nextTick(function () { | |
| 35788 | ac.close(); | |
| 35789 | }); | |
| 35790 | }); | |
| 35791 | } | |
| 35792 | }; | |
| 35793 | ac.detachPageEvents = function detachPageEvents() { | |
| 35794 | ac.$el.off('change', 'input[type="radio"], input[type="checkbox"]', onPageInputChange); | |
| 35795 | }; | |
| 35796 | ||
| 35797 | // Install Modules | |
| 35798 | ac.useModules(); | |
| 35799 | ||
| 35800 | // Init | |
| 35801 | ac.init(); | |
| 35802 | ||
| 35803 | return ac; | |
| 35804 | } | |
| 35805 | ||
| 5d51ea26 DC |
35806 | if ( Framework7Class ) Autocomplete.__proto__ = Framework7Class; |
| 35807 | Autocomplete.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
35808 | Autocomplete.prototype.constructor = Autocomplete; |
| 35809 | ||
| 35810 | Autocomplete.prototype.positionDropdown = function positionDropdown () { | |
| 35811 | var obj; | |
| 35812 | ||
| 35813 | var ac = this; | |
| 35814 | var $inputEl = ac.$inputEl; | |
| 35815 | var app = ac.app; | |
| 35816 | var $dropdownEl = ac.$dropdownEl; | |
| 35817 | ||
| 35818 | var $pageContentEl = $inputEl.parents('.page-content'); | |
| 35819 | if ($pageContentEl.length === 0) { return; } | |
| 35820 | var inputOffset = $inputEl.offset(); | |
| 35821 | var inputOffsetWidth = $inputEl[0].offsetWidth; | |
| 35822 | var inputOffsetHeight = $inputEl[0].offsetHeight; | |
| 35823 | var $listEl = $inputEl.parents('.list'); | |
| 35824 | ||
| 35825 | var $listParent; | |
| 35826 | $listEl.parents().each(function (index, parentEl) { | |
| 35827 | if ($listParent) { return; } | |
| 35828 | var $parentEl = $(parentEl); | |
| 35829 | if ($parentEl.parent($pageContentEl).length) { $listParent = $parentEl; } | |
| 35830 | }); | |
| 35831 | ||
| 35832 | var listOffset = $listEl.offset(); | |
| 35833 | var paddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10); | |
| 35834 | var listOffsetLeft = $listEl.length > 0 ? listOffset.left - $pageContentEl.offset().left : 0; | |
| 35835 | var inputOffsetLeft = inputOffset.left - ($listEl.length > 0 ? listOffset.left : 0) - (app.rtl ? 0 : 0); | |
| 35836 | var inputOffsetTop = inputOffset.top - ($pageContentEl.offset().top - $pageContentEl[0].scrollTop); | |
| 35837 | ||
| 35838 | var maxHeight = $pageContentEl[0].scrollHeight - paddingBottom - (inputOffsetTop + $pageContentEl[0].scrollTop) - $inputEl[0].offsetHeight; | |
| 35839 | ||
| 35840 | var paddingProp = app.rtl ? 'padding-right' : 'padding-left'; | |
| 35841 | var paddingValue; | |
| 35842 | if ($listEl.length && !ac.params.expandInput) { | |
| 35843 | paddingValue = (app.rtl ? $listEl[0].offsetWidth - inputOffsetLeft - inputOffsetWidth : inputOffsetLeft) - (app.theme === 'md' ? 16 : 15); | |
| 35844 | } | |
| 35845 | ||
| 35846 | $dropdownEl.css({ | |
| 35847 | left: (($listEl.length > 0 ? listOffsetLeft : inputOffsetLeft) + "px"), | |
| 35848 | top: ((inputOffsetTop + $pageContentEl[0].scrollTop + inputOffsetHeight) + "px"), | |
| 35849 | width: (($listEl.length > 0 ? $listEl[0].offsetWidth : inputOffsetWidth) + "px"), | |
| 35850 | }); | |
| 35851 | $dropdownEl.children('.autocomplete-dropdown-inner').css(( obj = { | |
| 35852 | maxHeight: (maxHeight + "px") | |
| 35853 | }, obj[paddingProp] = $listEl.length > 0 && !ac.params.expandInput ? (paddingValue + "px") : '', obj )); | |
| 35854 | }; | |
| 35855 | ||
| 35856 | Autocomplete.prototype.focus = function focus () { | |
| 35857 | var ac = this; | |
| 35858 | ac.$el.find('input[type=search]').focus(); | |
| 35859 | }; | |
| 35860 | ||
| 35861 | Autocomplete.prototype.source = function source (query) { | |
| 35862 | var ac = this; | |
| 35863 | if (!ac.params.source) { return; } | |
| 35864 | ||
| 35865 | var $el = ac.$el; | |
| 35866 | ||
| 35867 | ac.params.source.call(ac, query, function (items) { | |
| 35868 | var itemsHTML = ''; | |
| 35869 | var limit = ac.params.limit ? Math.min(ac.params.limit, items.length) : items.length; | |
| 35870 | ac.items = items; | |
| 35871 | for (var i = 0; i < limit; i += 1) { | |
| 35872 | var selected = false; | |
| 35873 | var itemValue = typeof items[i] === 'object' ? items[i][ac.params.valueProperty] : items[i]; | |
| 35874 | for (var j = 0; j < ac.value.length; j += 1) { | |
| 35875 | var aValue = typeof ac.value[j] === 'object' ? ac.value[j][ac.params.valueProperty] : ac.value[j]; | |
| 35876 | if (aValue === itemValue || aValue * 1 === itemValue * 1) { selected = true; } | |
| 35877 | } | |
| 35878 | itemsHTML += ac.renderItem({ | |
| 35879 | value: itemValue, | |
| 35880 | text: typeof items[i] === 'object' ? items[i][ac.params.textProperty] : items[i], | |
| 35881 | inputType: ac.inputType, | |
| 35882 | id: ac.id, | |
| 35883 | inputName: ac.inputName, | |
| 35884 | selected: selected, | |
| 35885 | }, i); | |
| 35886 | } | |
| 35887 | $el.find('.autocomplete-found ul').html(itemsHTML); | |
| 35888 | if (items.length === 0) { | |
| 35889 | if (query.length !== 0) { | |
| 35890 | $el.find('.autocomplete-not-found').show(); | |
| 35891 | $el.find('.autocomplete-found, .autocomplete-values').hide(); | |
| 35892 | } else { | |
| 35893 | $el.find('.autocomplete-values').show(); | |
| 35894 | $el.find('.autocomplete-found, .autocomplete-not-found').hide(); | |
| 35895 | } | |
| 35896 | } else { | |
| 35897 | $el.find('.autocomplete-found').show(); | |
| 35898 | $el.find('.autocomplete-not-found, .autocomplete-values').hide(); | |
| 35899 | } | |
| 35900 | }); | |
| 35901 | }; | |
| 35902 | ||
| 35903 | Autocomplete.prototype.updateValues = function updateValues () { | |
| 35904 | var ac = this; | |
| 35905 | var valuesHTML = ''; | |
| 35906 | for (var i = 0; i < ac.value.length; i += 1) { | |
| 35907 | valuesHTML += ac.renderItem({ | |
| 35908 | value: typeof ac.value[i] === 'object' ? ac.value[i][ac.params.valueProperty] : ac.value[i], | |
| 35909 | text: typeof ac.value[i] === 'object' ? ac.value[i][ac.params.textProperty] : ac.value[i], | |
| 35910 | inputType: ac.inputType, | |
| 35911 | id: ac.id, | |
| 35912 | inputName: ((ac.inputName) + "-checked}"), | |
| 35913 | selected: true, | |
| 35914 | }, i); | |
| 35915 | } | |
| 35916 | ac.$el.find('.autocomplete-values ul').html(valuesHTML); | |
| 35917 | }; | |
| 35918 | ||
| 35919 | Autocomplete.prototype.preloaderHide = function preloaderHide () { | |
| 35920 | var ac = this; | |
| 35921 | if (ac.params.openIn === 'dropdown' && ac.$dropdownEl) { | |
| 35922 | ac.$dropdownEl.find('.autocomplete-preloader').removeClass('autocomplete-preloader-visible'); | |
| 35923 | } else { | |
| 35924 | $('.autocomplete-preloader').removeClass('autocomplete-preloader-visible'); | |
| 35925 | } | |
| 35926 | }; | |
| 35927 | ||
| 35928 | Autocomplete.prototype.preloaderShow = function preloaderShow () { | |
| 35929 | var ac = this; | |
| 35930 | if (ac.params.openIn === 'dropdown' && ac.$dropdownEl) { | |
| 35931 | ac.$dropdownEl.find('.autocomplete-preloader').addClass('autocomplete-preloader-visible'); | |
| 35932 | } else { | |
| 35933 | $('.autocomplete-preloader').addClass('autocomplete-preloader-visible'); | |
| 35934 | } | |
| 35935 | }; | |
| 35936 | ||
| 35937 | Autocomplete.prototype.renderPreloader = function renderPreloader () { | |
| 35938 | var ac = this; | |
| 35939 | return ("\n <div class=\"autocomplete-preloader preloader " + (ac.params.preloaderColor ? ("color-" + (ac.params.preloaderColor)) : '') + "\">" + (Utils[((ac.app.theme) + "PreloaderContent")] || '') + "</div>\n ").trim(); | |
| 35940 | }; | |
| 35941 | ||
| 35942 | Autocomplete.prototype.renderSearchbar = function renderSearchbar () { | |
| 35943 | var ac = this; | |
| 35944 | if (ac.params.renderSearchbar) { return ac.params.renderSearchbar.call(ac); } | |
| 5d51ea26 | 35945 | var searchbarHTML = ("\n <form class=\"searchbar\">\n <div class=\"searchbar-inner\">\n <div class=\"searchbar-input-wrap\">\n <input type=\"search\" placeholder=\"" + (ac.params.searchbarPlaceholder) + "\"/>\n <i class=\"searchbar-icon\"></i>\n <span class=\"input-clear-button\"></span>\n </div>\n " + (ac.params.searchbarDisableButton ? ("\n <span class=\"searchbar-disable-button\">" + (ac.params.searchbarDisableText) + "</span>\n ") : '') + "\n </div>\n </form>\n ").trim(); |
| 5309fbda DC |
35946 | return searchbarHTML; |
| 35947 | }; | |
| 35948 | ||
| 35949 | Autocomplete.prototype.renderItem = function renderItem (item, index) { | |
| 35950 | var ac = this; | |
| 35951 | if (ac.params.renderItem) { return ac.params.renderItem.call(ac, item, index); } | |
| 35952 | var itemHtml; | |
| 35953 | var itemValue = item.value && typeof item.value === 'string' ? item.value.replace(/"/g, '"') : item.value; | |
| 35954 | if (ac.params.openIn !== 'dropdown') { | |
| 35955 | itemHtml = "\n <li>\n <label class=\"item-" + (item.inputType) + " item-content\">\n <input type=\"" + (item.inputType) + "\" name=\"" + (item.inputName) + "\" value=\"" + itemValue + "\" " + (item.selected ? 'checked' : '') + ">\n <i class=\"icon icon-" + (item.inputType) + "\"></i>\n <div class=\"item-inner\">\n <div class=\"item-title\">" + (item.text) + "</div>\n </div>\n </label>\n </li>\n "; | |
| 35956 | } else if (!item.placeholder) { | |
| 35957 | // Dropdown | |
| 35958 | itemHtml = "\n <li>\n <label class=\"item-radio item-content\" data-value=\"" + itemValue + "\">\n <div class=\"item-inner\">\n <div class=\"item-title\">" + (item.text) + "</div>\n </div>\n </label>\n </li>\n "; | |
| 35959 | } else { | |
| 35960 | // Dropwdown placeholder | |
| 35961 | itemHtml = "\n <li class=\"autocomplete-dropdown-placeholder\">\n <label class=\"item-content\">\n <div class=\"item-inner\">\n <div class=\"item-title\">" + (item.text) + "</div>\n </div>\n </label>\n </li>\n "; | |
| 35962 | } | |
| 35963 | return itemHtml.trim(); | |
| 35964 | }; | |
| 35965 | ||
| 35966 | Autocomplete.prototype.renderNavbar = function renderNavbar () { | |
| 35967 | var ac = this; | |
| 35968 | if (ac.params.renderNavbar) { return ac.params.renderNavbar.call(ac); } | |
| 35969 | var pageTitle = ac.params.pageTitle; | |
| 35970 | if (typeof pageTitle === 'undefined' && ac.$openerEl && ac.$openerEl.length) { | |
| 35971 | pageTitle = ac.$openerEl.find('.item-title').text().trim(); | |
| 35972 | } | |
| 5d51ea26 DC |
35973 | var inPopup = ac.params.openIn === 'popup'; |
| 35974 | var navbarLeft = inPopup | |
| 35975 | ? ("\n " + (ac.params.preloader ? ("\n <div class=\"left\">\n " + (ac.renderPreloader()) + "\n </div>\n ") : '') + "\n ") | |
| 35976 | : ("\n <div class=\"left sliding\">\n <a class=\"link back\">\n <i class=\"icon icon-back\"></i>\n <span class=\"if-not-md\">" + (ac.params.pageBackLinkText) + "</span>\n </a>\n </div>\n "); | |
| 35977 | var navbarRight = inPopup | |
| 35978 | ? ("\n <div class=\"right\">\n <a class=\"link popup-close\" data-popup=\".autocomplete-popup\">\n " + (ac.params.popupCloseLinkText) + "\n </a>\n </div>\n ") | |
| 35979 | : ("\n " + (ac.params.preloader ? ("\n <div class=\"right\">\n " + (ac.renderPreloader()) + "\n </div>\n ") : '') + "\n "); | |
| 35980 | var navbarHtml = ("\n <div class=\"navbar " + (ac.params.navbarColorTheme ? ("color-" + (ac.params.navbarColorTheme)) : '') + "\">\n <div class=\"navbar-inner " + (ac.params.navbarColorTheme ? ("color-" + (ac.params.navbarColorTheme)) : '') + "\">\n " + navbarLeft + "\n " + (pageTitle ? ("<div class=\"title sliding\">" + pageTitle + "</div>") : '') + "\n " + navbarRight + "\n <div class=\"subnavbar sliding\">" + (ac.renderSearchbar()) + "</div>\n </div>\n </div>\n ").trim(); | |
| 5309fbda DC |
35981 | return navbarHtml; |
| 35982 | }; | |
| 35983 | ||
| 35984 | Autocomplete.prototype.renderDropdown = function renderDropdown () { | |
| 35985 | var ac = this; | |
| 35986 | if (ac.params.renderDropdown) { return ac.params.renderDropdown.call(ac, ac.items); } | |
| 35987 | var dropdownHtml = ("\n <div class=\"autocomplete-dropdown\">\n <div class=\"autocomplete-dropdown-inner\">\n <div class=\"list " + (!ac.params.expandInput ? 'no-safe-areas' : '') + "\">\n <ul></ul>\n </div>\n </div>\n " + (ac.params.preloader ? ac.renderPreloader() : '') + "\n </div>\n ").trim(); | |
| 35988 | return dropdownHtml; | |
| 35989 | }; | |
| 35990 | ||
| 5d51ea26 | 35991 | Autocomplete.prototype.renderPage = function renderPage (inPopup) { |
| 5309fbda DC |
35992 | var ac = this; |
| 35993 | if (ac.params.renderPage) { return ac.params.renderPage.call(ac, ac.items); } | |
| 35994 | ||
| 5d51ea26 | 35995 | var pageHtml = ("\n <div class=\"page page-with-subnavbar autocomplete-page\" data-name=\"autocomplete-page\">\n " + (ac.renderNavbar(inPopup)) + "\n <div class=\"searchbar-backdrop\"></div>\n <div class=\"page-content\">\n <div class=\"list autocomplete-list autocomplete-found autocomplete-list-" + (ac.id) + " " + (ac.params.formColorTheme ? ("color-" + (ac.params.formColorTheme)) : '') + "\">\n <ul></ul>\n </div>\n <div class=\"list autocomplete-not-found\">\n <ul>\n <li class=\"item-content\"><div class=\"item-inner\"><div class=\"item-title\">" + (ac.params.notFoundText) + "</div></div></li>\n </ul>\n </div>\n <div class=\"list autocomplete-values\">\n <ul></ul>\n </div>\n </div>\n </div>\n ").trim(); |
| 5309fbda DC |
35996 | return pageHtml; |
| 35997 | }; | |
| 35998 | ||
| 35999 | Autocomplete.prototype.renderPopup = function renderPopup () { | |
| 36000 | var ac = this; | |
| 36001 | if (ac.params.renderPopup) { return ac.params.renderPopup.call(ac, ac.items); } | |
| 5d51ea26 | 36002 | var popupHtml = ("\n <div class=\"popup autocomplete-popup\">\n <div class=\"view\">\n " + (ac.renderPage(true)) + ";\n </div>\n </div>\n ").trim(); |
| 5309fbda DC |
36003 | return popupHtml; |
| 36004 | }; | |
| 36005 | ||
| 36006 | Autocomplete.prototype.onOpen = function onOpen (type, el) { | |
| 36007 | var ac = this; | |
| 36008 | var app = ac.app; | |
| 36009 | var $el = $(el); | |
| 36010 | ac.$el = $el; | |
| 36011 | ac.el = $el[0]; | |
| 36012 | ac.openedIn = type; | |
| 36013 | ac.opened = true; | |
| 36014 | ||
| 36015 | if (ac.params.openIn === 'dropdown') { | |
| 36016 | ac.attachDropdownEvents(); | |
| 36017 | ||
| 36018 | ac.$dropdownEl.addClass('autocomplete-dropdown-in'); | |
| 36019 | ac.$inputEl.trigger('input'); | |
| 36020 | } else { | |
| 36021 | // Init SB | |
| 36022 | var $searchbarEl = $el.find('.searchbar'); | |
| 36023 | if (ac.params.openIn === 'page' && app.theme === 'ios' && $searchbarEl.length === 0) { | |
| 36024 | $searchbarEl = $(app.navbar.getElByPage($el)).find('.searchbar'); | |
| 36025 | } | |
| 36026 | ac.searchbar = app.searchbar.create({ | |
| 36027 | el: $searchbarEl, | |
| 36028 | backdropEl: $el.find('.searchbar-backdrop'), | |
| 36029 | customSearch: true, | |
| 36030 | on: { | |
| 36031 | search: function search(sb, query) { | |
| 36032 | if (query.length === 0 && ac.searchbar.enabled) { | |
| 36033 | ac.searchbar.backdropShow(); | |
| 36034 | } else { | |
| 36035 | ac.searchbar.backdropHide(); | |
| 36036 | } | |
| 36037 | ac.source(query); | |
| 36038 | }, | |
| 36039 | }, | |
| 36040 | }); | |
| 36041 | ||
| 36042 | // Attach page events | |
| 36043 | ac.attachPageEvents(); | |
| 36044 | ||
| 36045 | // Update Values On Page Init | |
| 36046 | ac.updateValues(); | |
| 36047 | ||
| 36048 | // Source on load | |
| 36049 | if (ac.params.requestSourceOnOpen) { ac.source(''); } | |
| 36050 | } | |
| 36051 | ||
| 36052 | ac.emit('local::open autocompleteOpen', ac); | |
| 36053 | }; | |
| 36054 | ||
| 36055 | Autocomplete.prototype.autoFocus = function autoFocus () { | |
| 36056 | var ac = this; | |
| 36057 | if (ac.searchbar && ac.searchbar.$inputEl) { | |
| 36058 | ac.searchbar.$inputEl.focus(); | |
| 36059 | } | |
| 36060 | return ac; | |
| 36061 | }; | |
| 36062 | ||
| 36063 | Autocomplete.prototype.onOpened = function onOpened () { | |
| 36064 | var ac = this; | |
| 36065 | if (ac.params.openIn !== 'dropdown' && ac.params.autoFocus) { | |
| 36066 | ac.autoFocus(); | |
| 36067 | } | |
| 36068 | ac.emit('local::opened autocompleteOpened', ac); | |
| 36069 | }; | |
| 36070 | ||
| 36071 | Autocomplete.prototype.onClose = function onClose () { | |
| 36072 | var ac = this; | |
| 36073 | if (ac.destroyed) { return; } | |
| 36074 | ||
| 36075 | // Destroy SB | |
| 36076 | if (ac.searchbar && ac.searchbar.destroy) { | |
| 36077 | ac.searchbar.destroy(); | |
| 36078 | ac.searchbar = null; | |
| 36079 | delete ac.searchbar; | |
| 36080 | } | |
| 36081 | ||
| 36082 | if (ac.params.openIn === 'dropdown') { | |
| 36083 | ac.detachDropdownEvents(); | |
| 36084 | ac.$dropdownEl.removeClass('autocomplete-dropdown-in').remove(); | |
| 36085 | ac.$inputEl.parents('.item-content-dropdown-expanded').removeClass('item-content-dropdown-expanded'); | |
| 36086 | } else { | |
| 36087 | ac.detachPageEvents(); | |
| 36088 | } | |
| 36089 | ||
| 36090 | ac.emit('local::close autocompleteClose', ac); | |
| 36091 | }; | |
| 36092 | ||
| 36093 | Autocomplete.prototype.onClosed = function onClosed () { | |
| 36094 | var ac = this; | |
| 36095 | if (ac.destroyed) { return; } | |
| 36096 | ac.opened = false; | |
| 36097 | ac.$el = null; | |
| 36098 | ac.el = null; | |
| 36099 | delete ac.$el; | |
| 36100 | delete ac.el; | |
| 36101 | ||
| 36102 | ac.emit('local::closed autocompleteClosed', ac); | |
| 36103 | }; | |
| 36104 | ||
| 36105 | Autocomplete.prototype.openPage = function openPage () { | |
| 36106 | var ac = this; | |
| 36107 | if (ac.opened) { return ac; } | |
| 36108 | var pageHtml = ac.renderPage(); | |
| 36109 | ac.view.router.navigate({ | |
| 36110 | url: ac.url, | |
| 36111 | route: { | |
| 36112 | content: pageHtml, | |
| 36113 | path: ac.url, | |
| 36114 | on: { | |
| 36115 | pageBeforeIn: function pageBeforeIn(e, page) { | |
| 36116 | ac.onOpen('page', page.el); | |
| 36117 | }, | |
| 36118 | pageAfterIn: function pageAfterIn(e, page) { | |
| 36119 | ac.onOpened('page', page.el); | |
| 36120 | }, | |
| 36121 | pageBeforeOut: function pageBeforeOut(e, page) { | |
| 36122 | ac.onClose('page', page.el); | |
| 36123 | }, | |
| 36124 | pageAfterOut: function pageAfterOut(e, page) { | |
| 36125 | ac.onClosed('page', page.el); | |
| 36126 | }, | |
| 36127 | }, | |
| 36128 | options: { | |
| 36129 | animate: ac.params.animate, | |
| 36130 | }, | |
| 36131 | }, | |
| 36132 | }); | |
| 36133 | return ac; | |
| 36134 | }; | |
| 36135 | ||
| 36136 | Autocomplete.prototype.openPopup = function openPopup () { | |
| 36137 | var ac = this; | |
| 36138 | if (ac.opened) { return ac; } | |
| 36139 | var popupHtml = ac.renderPopup(); | |
| 36140 | ||
| 36141 | var popupParams = { | |
| 36142 | content: popupHtml, | |
| 36143 | animate: ac.params.animate, | |
| 36144 | on: { | |
| 36145 | popupOpen: function popupOpen(popup) { | |
| 36146 | ac.onOpen('popup', popup.el); | |
| 36147 | }, | |
| 36148 | popupOpened: function popupOpened(popup) { | |
| 36149 | ac.onOpened('popup', popup.el); | |
| 36150 | }, | |
| 36151 | popupClose: function popupClose(popup) { | |
| 36152 | ac.onClose('popup', popup.el); | |
| 36153 | }, | |
| 36154 | popupClosed: function popupClosed(popup) { | |
| 36155 | ac.onClosed('popup', popup.el); | |
| 36156 | }, | |
| 36157 | }, | |
| 36158 | }; | |
| 36159 | ||
| 36160 | if (ac.params.routableModals) { | |
| 36161 | ac.view.router.navigate({ | |
| 36162 | url: ac.url, | |
| 36163 | route: { | |
| 36164 | path: ac.url, | |
| 36165 | popup: popupParams, | |
| 36166 | }, | |
| 36167 | }); | |
| 36168 | } else { | |
| 36169 | ac.modal = ac.app.popup.create(popupParams).open(ac.params.animate); | |
| 36170 | } | |
| 36171 | return ac; | |
| 36172 | }; | |
| 36173 | ||
| 36174 | Autocomplete.prototype.openDropdown = function openDropdown () { | |
| 36175 | var ac = this; | |
| 36176 | ||
| 36177 | if (!ac.$dropdownEl) { | |
| 36178 | ac.$dropdownEl = $(ac.renderDropdown()); | |
| 36179 | } | |
| 36180 | var $listEl = ac.$inputEl.parents('.list'); | |
| 36181 | if ($listEl.length && ac.$inputEl.parents('.item-content').length > 0 && ac.params.expandInput) { | |
| 36182 | ac.$inputEl.parents('.item-content').addClass('item-content-dropdown-expanded'); | |
| 36183 | } | |
| 36184 | ||
| 36185 | var $pageContentEl = ac.$inputEl.parents('.page-content'); | |
| 36186 | if (ac.params.dropdownContainerEl) { | |
| 36187 | $(ac.params.dropdownContainerEl).append(ac.$dropdownEl); | |
| 36188 | } else if ($pageContentEl.length === 0) { | |
| 36189 | ac.$dropdownEl.insertAfter(ac.$inputEl); | |
| 36190 | } else { | |
| 36191 | ac.positionDropdown(); | |
| 36192 | $pageContentEl.append(ac.$dropdownEl); | |
| 36193 | } | |
| 36194 | ac.onOpen('dropdown', ac.$dropdownEl); | |
| 36195 | ac.onOpened('dropdown', ac.$dropdownEl); | |
| 36196 | }; | |
| 36197 | ||
| 36198 | Autocomplete.prototype.open = function open () { | |
| 36199 | var ac = this; | |
| 36200 | if (ac.opened) { return ac; } | |
| 36201 | var openIn = ac.params.openIn; | |
| 36202 | ac[("open" + (openIn.split('').map(function (el, index) { | |
| 36203 | if (index === 0) { return el.toUpperCase(); } | |
| 36204 | return el; | |
| 36205 | }).join('')))](); | |
| 36206 | return ac; | |
| 36207 | }; | |
| 36208 | ||
| 36209 | Autocomplete.prototype.close = function close () { | |
| 36210 | var ac = this; | |
| 36211 | if (!ac.opened) { return ac; } | |
| 36212 | if (ac.params.openIn === 'dropdown') { | |
| 36213 | ac.onClose(); | |
| 36214 | ac.onClosed(); | |
| 36215 | } else if (ac.params.routableModals || ac.openedIn === 'page') { | |
| 36216 | ac.view.router.back({ animate: ac.params.animate }); | |
| 36217 | } else { | |
| 36218 | ac.modal.once('modalClosed', function () { | |
| 36219 | Utils.nextTick(function () { | |
| 36220 | ac.modal.destroy(); | |
| 36221 | delete ac.modal; | |
| 36222 | }); | |
| 36223 | }); | |
| 36224 | ac.modal.close(); | |
| 36225 | } | |
| 36226 | return ac; | |
| 36227 | }; | |
| 36228 | ||
| 36229 | Autocomplete.prototype.init = function init () { | |
| 36230 | var ac = this; | |
| 36231 | ac.attachEvents(); | |
| 36232 | }; | |
| 36233 | ||
| 36234 | Autocomplete.prototype.destroy = function destroy () { | |
| 36235 | var ac = this; | |
| 36236 | ac.emit('local::beforeDestroy autocompleteBeforeDestroy', ac); | |
| 36237 | ac.detachEvents(); | |
| 36238 | if (ac.$inputEl && ac.$inputEl[0]) { | |
| 36239 | delete ac.$inputEl[0].f7Autocomplete; | |
| 36240 | } | |
| 36241 | if (ac.$openerEl && ac.$openerEl[0]) { | |
| 36242 | delete ac.$openerEl[0].f7Autocomplete; | |
| 36243 | } | |
| 36244 | Utils.deleteProps(ac); | |
| 36245 | ac.destroyed = true; | |
| 36246 | }; | |
| 36247 | ||
| 36248 | return Autocomplete; | |
| 36249 | }(Framework7Class)); | |
| 36250 | ||
| 36251 | var Autocomplete$1 = { | |
| 36252 | name: 'autocomplete', | |
| 36253 | params: { | |
| 36254 | autocomplete: { | |
| 36255 | openerEl: undefined, | |
| 36256 | inputEl: undefined, | |
| 36257 | view: undefined, | |
| 36258 | ||
| 36259 | // DropDown | |
| 36260 | dropdownContainerEl: undefined, | |
| 36261 | dropdownPlaceholderText: undefined, | |
| 36262 | typeahead: false, | |
| 36263 | highlightMatches: true, | |
| 36264 | expandInput: false, | |
| 36265 | updateInputValueOnSelect: true, | |
| 36266 | inputEvents: 'input', | |
| 36267 | ||
| 36268 | value: undefined, | |
| 36269 | multiple: false, | |
| 36270 | ||
| 36271 | source: undefined, | |
| 36272 | limit: undefined, | |
| 36273 | valueProperty: 'id', | |
| 36274 | textProperty: 'text', | |
| 36275 | ||
| 36276 | openIn: 'page', // or 'popup' or 'dropdown' | |
| 36277 | pageBackLinkText: 'Back', | |
| 36278 | popupCloseLinkText: 'Close', | |
| 36279 | pageTitle: undefined, | |
| 36280 | searchbarPlaceholder: 'Search...', | |
| 36281 | searchbarDisableText: 'Cancel', | |
| 5d51ea26 | 36282 | searchbarDisableButton: undefined, |
| 5309fbda DC |
36283 | |
| 36284 | animate: true, | |
| 36285 | ||
| 36286 | autoFocus: false, | |
| 36287 | closeOnSelect: false, | |
| 36288 | notFoundText: 'Nothing found', | |
| 36289 | requestSourceOnOpen: false, | |
| 36290 | ||
| 36291 | // Preloader | |
| 36292 | preloaderColor: undefined, | |
| 36293 | preloader: false, | |
| 36294 | ||
| 36295 | // Colors | |
| 36296 | formColorTheme: undefined, | |
| 36297 | navbarColorTheme: undefined, | |
| 36298 | ||
| 36299 | // Routing | |
| 36300 | routableModals: true, | |
| 36301 | url: 'select/', | |
| 36302 | ||
| 36303 | // Custom render functions | |
| 36304 | renderDropdown: undefined, | |
| 36305 | renderPage: undefined, | |
| 36306 | renderPopup: undefined, | |
| 36307 | renderItem: undefined, | |
| 36308 | renderSearchbar: undefined, | |
| 36309 | renderNavbar: undefined, | |
| 36310 | ||
| 36311 | }, | |
| 36312 | }, | |
| 36313 | static: { | |
| 36314 | Autocomplete: Autocomplete, | |
| 36315 | }, | |
| 36316 | create: function create() { | |
| 36317 | var app = this; | |
| 36318 | app.autocomplete = Utils.extend( | |
| 36319 | ConstructorMethods({ | |
| 36320 | defaultSelector: undefined, | |
| 36321 | constructor: Autocomplete, | |
| 36322 | app: app, | |
| 36323 | domProp: 'f7Autocomplete', | |
| 36324 | }), | |
| 36325 | { | |
| 36326 | open: function open(autocompleteEl) { | |
| 36327 | var ac = app.autocomplete.get(autocompleteEl); | |
| 36328 | if (ac && ac.open) { return ac.open(); } | |
| 36329 | return undefined; | |
| 36330 | }, | |
| 36331 | close: function close(autocompleteEl) { | |
| 36332 | var ac = app.autocomplete.get(autocompleteEl); | |
| 36333 | if (ac && ac.close) { return ac.close(); } | |
| 36334 | return undefined; | |
| 36335 | }, | |
| 36336 | } | |
| 36337 | ); | |
| 36338 | }, | |
| 36339 | }; | |
| 36340 | ||
| 5d51ea26 | 36341 | var Tooltip = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
36342 | function Tooltip(app, params) { |
| 36343 | if ( params === void 0 ) params = {}; | |
| 36344 | ||
| 5d51ea26 | 36345 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
36346 | |
| 36347 | var tooltip = this; | |
| 36348 | ||
| 36349 | var defaults = Utils.extend({}, app.params.tooltip); | |
| 36350 | ||
| 36351 | // Extend defaults with modules params | |
| 36352 | tooltip.useModulesParams(defaults); | |
| 36353 | ||
| 36354 | tooltip.params = Utils.extend(defaults, params); | |
| 36355 | ||
| 36356 | var ref = tooltip.params; | |
| 36357 | var targetEl = ref.targetEl; | |
| 36358 | if (!targetEl) { return tooltip; } | |
| 36359 | ||
| 36360 | var $targetEl = $(targetEl); | |
| 36361 | if ($targetEl.length === 0) { return tooltip; } | |
| 36362 | ||
| 36363 | if ($targetEl[0].f7Tooltip) { return $targetEl[0].f7Tooltip; } | |
| 36364 | ||
| 36365 | var $el = $(tooltip.render()).eq(0); | |
| 36366 | ||
| 36367 | Utils.extend(tooltip, { | |
| 36368 | app: app, | |
| 36369 | $targetEl: $targetEl, | |
| 36370 | targetEl: $targetEl && $targetEl[0], | |
| 36371 | $el: $el, | |
| 36372 | el: $el && $el[0], | |
| 36373 | text: tooltip.params.text || '', | |
| 36374 | visible: false, | |
| 36375 | opened: false, | |
| 36376 | }); | |
| 36377 | ||
| 36378 | $targetEl[0].f7Tooltip = tooltip; | |
| 36379 | ||
| 36380 | var touchesStart = {}; | |
| 36381 | var isTouched; | |
| 36382 | function handleTouchStart(e) { | |
| 36383 | if (isTouched) { return; } | |
| 36384 | isTouched = true; | |
| 36385 | touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 36386 | touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 36387 | tooltip.show(this); | |
| 36388 | } | |
| 36389 | function handleTouchMove(e) { | |
| 36390 | if (!isTouched) { return; } | |
| 36391 | var x = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 36392 | var y = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 36393 | var distance = Math.pow( ( | |
| 36394 | (Math.pow( (x - touchesStart.x), 2 )) | |
| 36395 | + (Math.pow( (y - touchesStart.y), 2 )) | |
| 36396 | ), 0.5 ); | |
| 36397 | if (distance > 50) { | |
| 36398 | isTouched = false; | |
| 36399 | tooltip.hide(); | |
| 36400 | } | |
| 36401 | } | |
| 36402 | function handleTouchEnd() { | |
| 36403 | if (!isTouched) { return; } | |
| 36404 | isTouched = false; | |
| 36405 | tooltip.hide(); | |
| 36406 | } | |
| 36407 | function handleMouseEnter() { | |
| 36408 | tooltip.show(this); | |
| 36409 | } | |
| 36410 | function handleMouseLeave() { | |
| 36411 | tooltip.hide(); | |
| 36412 | } | |
| 36413 | function handleTransitionEnd() { | |
| 36414 | if (!$el.hasClass('tooltip-in')) { | |
| 36415 | $el.removeClass('tooltip-out').remove(); | |
| 36416 | } | |
| 36417 | } | |
| 36418 | ||
| 36419 | tooltip.attachEvents = function attachEvents() { | |
| 36420 | $el.on('transitionend', handleTransitionEnd); | |
| 36421 | if (Support.touch) { | |
| 36422 | var passive = Support.passiveListener ? { passive: true } : false; | |
| 36423 | $targetEl.on(app.touchEvents.start, handleTouchStart, passive); | |
| 36424 | app.on('touchmove', handleTouchMove); | |
| 36425 | app.on('touchend:passive', handleTouchEnd); | |
| 36426 | } else { | |
| 36427 | $targetEl.on('mouseenter', handleMouseEnter); | |
| 36428 | $targetEl.on('mouseleave', handleMouseLeave); | |
| 36429 | } | |
| 36430 | }; | |
| 36431 | tooltip.detachEvents = function detachEvents() { | |
| 36432 | $el.off('transitionend', handleTransitionEnd); | |
| 36433 | if (Support.touch) { | |
| 36434 | var passive = Support.passiveListener ? { passive: true } : false; | |
| 36435 | $targetEl.off(app.touchEvents.start, handleTouchStart, passive); | |
| 36436 | app.off('touchmove', handleTouchMove); | |
| 36437 | app.off('touchend:passive', handleTouchEnd); | |
| 36438 | } else { | |
| 36439 | $targetEl.off('mouseenter', handleMouseEnter); | |
| 36440 | $targetEl.off('mouseleave', handleMouseLeave); | |
| 36441 | } | |
| 36442 | }; | |
| 36443 | ||
| 36444 | // Install Modules | |
| 36445 | tooltip.useModules(); | |
| 36446 | ||
| 36447 | tooltip.init(); | |
| 36448 | ||
| 36449 | return tooltip; | |
| 36450 | } | |
| 36451 | ||
| 5d51ea26 DC |
36452 | if ( Framework7Class ) Tooltip.__proto__ = Framework7Class; |
| 36453 | Tooltip.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
36454 | Tooltip.prototype.constructor = Tooltip; |
| 36455 | ||
| 36456 | Tooltip.prototype.position = function position (targetEl) { | |
| 36457 | var tooltip = this; | |
| 36458 | var $el = tooltip.$el; | |
| 36459 | var app = tooltip.app; | |
| 36460 | $el.css({ left: '', top: '' }); | |
| 36461 | var $targetEl = $(targetEl || tooltip.targetEl); | |
| 36462 | var ref = [$el.width(), $el.height()]; | |
| 36463 | var width = ref[0]; | |
| 36464 | var height = ref[1]; | |
| 36465 | ||
| 36466 | $el.css({ left: '', top: '' }); | |
| 36467 | ||
| 36468 | var targetWidth; | |
| 36469 | var targetHeight; | |
| 36470 | var targetOffsetLeft; | |
| 36471 | var targetOffsetTop; | |
| 36472 | if ($targetEl && $targetEl.length > 0) { | |
| 36473 | targetWidth = $targetEl.outerWidth(); | |
| 36474 | targetHeight = $targetEl.outerHeight(); | |
| 36475 | ||
| 36476 | var targetOffset = $targetEl.offset(); | |
| 36477 | targetOffsetLeft = targetOffset.left - app.left; | |
| 36478 | targetOffsetTop = targetOffset.top - app.top; | |
| 36479 | ||
| 36480 | var targetParentPage = $targetEl.parents('.page'); | |
| 36481 | if (targetParentPage.length > 0) { | |
| 36482 | targetOffsetTop -= targetParentPage[0].scrollTop; | |
| 36483 | } | |
| 36484 | } | |
| 36485 | var ref$1 = [0, 0, 0]; | |
| 36486 | var left = ref$1[0]; | |
| 36487 | var top = ref$1[1]; | |
| 36488 | ||
| 36489 | // Top Position | |
| 36490 | var position = 'top'; | |
| 36491 | ||
| 36492 | if (height < targetOffsetTop) { | |
| 36493 | // On top | |
| 36494 | top = targetOffsetTop - height; | |
| 36495 | } else if (height < app.height - targetOffsetTop - targetHeight) { | |
| 36496 | // On bottom | |
| 36497 | position = 'bottom'; | |
| 36498 | top = targetOffsetTop + targetHeight; | |
| 36499 | } else { | |
| 36500 | // On middle | |
| 36501 | position = 'middle'; | |
| 36502 | top = ((targetHeight / 2) + targetOffsetTop) - (height / 2); | |
| 36503 | if (top <= 0) { | |
| 36504 | top = 8; | |
| 36505 | } else if (top + height >= app.height) { | |
| 36506 | top = app.height - height - 8; | |
| 36507 | } | |
| 36508 | } | |
| 36509 | ||
| 36510 | // Horizontal Position | |
| 36511 | if (position === 'top' || position === 'bottom') { | |
| 36512 | left = ((targetWidth / 2) + targetOffsetLeft) - (width / 2); | |
| 36513 | if (left < 8) { left = 8; } | |
| 36514 | if (left + width > app.width) { left = app.width - width - 8; } | |
| 36515 | if (left < 0) { left = 0; } | |
| 36516 | } else if (position === 'middle') { | |
| 36517 | left = targetOffsetLeft - width; | |
| 36518 | if (left < 8 || (left + width > app.width)) { | |
| 36519 | if (left < 8) { left = targetOffsetLeft + targetWidth; } | |
| 36520 | if (left + width > app.width) { left = app.width - width - 8; } | |
| 36521 | } | |
| 36522 | } | |
| 36523 | ||
| 36524 | // Apply Styles | |
| 36525 | $el.css({ top: (top + "px"), left: (left + "px") }); | |
| 36526 | }; | |
| 36527 | ||
| 36528 | Tooltip.prototype.show = function show (aroundEl) { | |
| 36529 | var tooltip = this; | |
| 36530 | var app = tooltip.app; | |
| 36531 | var $el = tooltip.$el; | |
| 36532 | var $targetEl = tooltip.$targetEl; | |
| 36533 | app.root.append($el); | |
| 36534 | tooltip.position(aroundEl); | |
| 36535 | var $aroundEl = $(aroundEl); | |
| 36536 | tooltip.visible = true; | |
| 36537 | tooltip.opened = true; | |
| 36538 | $targetEl.trigger('tooltip:show', tooltip); | |
| 36539 | $el.trigger('tooltip:show', tooltip); | |
| 36540 | if ($aroundEl.length && $aroundEl[0] !== $targetEl[0]) { | |
| 36541 | $aroundEl.trigger('tooltip:show', tooltip); | |
| 36542 | } | |
| 36543 | tooltip.emit('local::show tooltipShow', tooltip); | |
| 36544 | $el.removeClass('tooltip-out').addClass('tooltip-in'); | |
| 36545 | return tooltip; | |
| 36546 | }; | |
| 36547 | ||
| 36548 | Tooltip.prototype.hide = function hide () { | |
| 36549 | var tooltip = this; | |
| 36550 | var $el = tooltip.$el; | |
| 36551 | var $targetEl = tooltip.$targetEl; | |
| 36552 | tooltip.visible = false; | |
| 36553 | tooltip.opened = false; | |
| 36554 | $targetEl.trigger('tooltip:hide', tooltip); | |
| 36555 | $el.trigger('tooltip:hide', tooltip); | |
| 36556 | tooltip.emit('local::hide tooltipHide', tooltip); | |
| 36557 | $el.addClass('tooltip-out').removeClass('tooltip-in'); | |
| 36558 | return tooltip; | |
| 36559 | }; | |
| 36560 | ||
| 36561 | Tooltip.prototype.render = function render () { | |
| 36562 | var tooltip = this; | |
| 36563 | if (tooltip.params.render) { return tooltip.params.render.call(tooltip, tooltip); } | |
| 36564 | var ref = tooltip.params; | |
| 36565 | var cssClass = ref.cssClass; | |
| 36566 | var text = ref.text; | |
| 36567 | return ("\n <div class=\"tooltip " + (cssClass || '') + "\">\n <div class=\"tooltip-content\">" + (text || '') + "</div>\n </div>\n ").trim(); | |
| 36568 | }; | |
| 36569 | ||
| 36570 | Tooltip.prototype.setText = function setText (newText) { | |
| 36571 | var tooltip = this; | |
| 36572 | if (typeof newText === 'undefined') { | |
| 36573 | return tooltip; | |
| 36574 | } | |
| 36575 | tooltip.params.text = newText; | |
| 36576 | tooltip.text = newText; | |
| 36577 | if (tooltip.$el) { | |
| 36578 | tooltip.$el.children('.tooltip-content').html(newText); | |
| 36579 | } | |
| 36580 | if (tooltip.opened) { | |
| 36581 | tooltip.position(); | |
| 36582 | } | |
| 36583 | return tooltip; | |
| 36584 | }; | |
| 36585 | ||
| 36586 | Tooltip.prototype.init = function init () { | |
| 36587 | var tooltip = this; | |
| 36588 | tooltip.attachEvents(); | |
| 36589 | }; | |
| 36590 | ||
| 36591 | Tooltip.prototype.destroy = function destroy () { | |
| 36592 | var tooltip = this; | |
| 36593 | if (!tooltip.$targetEl || tooltip.destroyed) { return; } | |
| 36594 | tooltip.$targetEl.trigger('tooltip:beforedestroy', tooltip); | |
| 36595 | tooltip.emit('local::beforeDestroy tooltipBeforeDestroy', tooltip); | |
| 36596 | tooltip.$el.remove(); | |
| 36597 | delete tooltip.$targetEl[0].f7Tooltip; | |
| 36598 | tooltip.detachEvents(); | |
| 36599 | Utils.deleteProps(tooltip); | |
| 36600 | tooltip.destroyed = true; | |
| 36601 | }; | |
| 36602 | ||
| 36603 | return Tooltip; | |
| 36604 | }(Framework7Class)); | |
| 36605 | ||
| 36606 | var Tooltip$1 = { | |
| 36607 | name: 'tooltip', | |
| 36608 | static: { | |
| 36609 | Tooltip: Tooltip, | |
| 36610 | }, | |
| 36611 | create: function create() { | |
| 36612 | var app = this; | |
| 36613 | app.tooltip = ConstructorMethods({ | |
| 36614 | defaultSelector: '.tooltip', | |
| 36615 | constructor: Tooltip, | |
| 36616 | app: app, | |
| 36617 | domProp: 'f7Tooltip', | |
| 36618 | }); | |
| 36619 | app.tooltip.show = function show(el) { | |
| 36620 | var $el = $(el); | |
| 36621 | if ($el.length === 0) { return undefined; } | |
| 36622 | var tooltip = $el[0].f7Tooltip; | |
| 36623 | if (!tooltip) { return undefined; } | |
| 36624 | tooltip.show($el[0]); | |
| 36625 | return tooltip; | |
| 36626 | }; | |
| 36627 | app.tooltip.hide = function hide(el) { | |
| 36628 | var $el = $(el); | |
| 36629 | if ($el.length === 0) { return undefined; } | |
| 36630 | var tooltip = $el[0].f7Tooltip; | |
| 36631 | if (!tooltip) { return undefined; } | |
| 36632 | tooltip.hide(); | |
| 36633 | return tooltip; | |
| 36634 | }; | |
| 36635 | app.tooltip.setText = function text(el, newText) { | |
| 36636 | var $el = $(el); | |
| 36637 | if ($el.length === 0) { return undefined; } | |
| 36638 | var tooltip = $el[0].f7Tooltip; | |
| 36639 | if (!tooltip) { return undefined; } | |
| 36640 | tooltip.setText(newText); | |
| 36641 | return tooltip; | |
| 36642 | }; | |
| 36643 | }, | |
| 36644 | params: { | |
| 36645 | tooltip: { | |
| 36646 | targetEl: null, | |
| 36647 | text: null, | |
| 36648 | cssClass: null, | |
| 36649 | render: null, | |
| 36650 | }, | |
| 36651 | }, | |
| 36652 | on: { | |
| 36653 | tabMounted: function tabMounted(tabEl) { | |
| 36654 | var app = this; | |
| 36655 | $(tabEl).find('.tooltip-init').each(function (index, el) { | |
| 36656 | var text = $(el).attr('data-tooltip'); | |
| 36657 | if (!text) { return; } | |
| 36658 | app.tooltip.create({ targetEl: el, text: text }); | |
| 36659 | }); | |
| 36660 | }, | |
| 36661 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 36662 | $(tabEl).find('.tooltip-init').each(function (index, el) { | |
| 36663 | if (el.f7Tooltip) { el.f7Tooltip.destroy(); } | |
| 36664 | }); | |
| 36665 | }, | |
| 36666 | pageInit: function pageInit(page) { | |
| 36667 | var app = this; | |
| 36668 | page.$el.find('.tooltip-init').each(function (index, el) { | |
| 36669 | var text = $(el).attr('data-tooltip'); | |
| 36670 | if (!text) { return; } | |
| 36671 | app.tooltip.create({ targetEl: el, text: text }); | |
| 36672 | }); | |
| 5d51ea26 DC |
36673 | if (app.theme === 'ios' && page.view && page.view.router.separateNavbar && page.$navbarEl && page.$navbarEl.length > 0) { |
| 36674 | page.$navbarEl.find('.tooltip-init').each(function (index, el) { | |
| 36675 | var text = $(el).attr('data-tooltip'); | |
| 36676 | if (!text) { return; } | |
| 36677 | app.tooltip.create({ targetEl: el, text: text }); | |
| 36678 | }); | |
| 36679 | } | |
| 5309fbda DC |
36680 | }, |
| 36681 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 5d51ea26 | 36682 | var app = this; |
| 5309fbda DC |
36683 | page.$el.find('.tooltip-init').each(function (index, el) { |
| 36684 | if (el.f7Tooltip) { el.f7Tooltip.destroy(); } | |
| 36685 | }); | |
| 5d51ea26 DC |
36686 | if (app.theme === 'ios' && page.view && page.view.router.separateNavbar && page.$navbarEl && page.$navbarEl.length > 0) { |
| 36687 | page.$navbarEl.find('.tooltip-init').each(function (index, el) { | |
| 36688 | if (el.f7Tooltip) { el.f7Tooltip.destroy(); } | |
| 36689 | }); | |
| 36690 | } | |
| 5309fbda DC |
36691 | }, |
| 36692 | }, | |
| 36693 | vnode: { | |
| 36694 | 'tooltip-init': { | |
| 36695 | insert: function insert(vnode) { | |
| 36696 | var app = this; | |
| 36697 | var el = vnode.elm; | |
| 36698 | var text = $(el).attr('data-tooltip'); | |
| 36699 | if (!text) { return; } | |
| 36700 | app.tooltip.create({ targetEl: el, text: text }); | |
| 36701 | }, | |
| 5d51ea26 DC |
36702 | update: function update(vnode) { |
| 36703 | var el = vnode.elm; | |
| 36704 | if (!el.f7Tooltip) { return; } | |
| 36705 | if (vnode && vnode.data && vnode.data.attrs && vnode.data.attrs['data-tooltip']) { | |
| 36706 | el.f7Tooltip.setText(vnode.data.attrs['data-tooltip']); | |
| 36707 | } | |
| 36708 | }, | |
| 5309fbda DC |
36709 | destroy: function destroy(vnode) { |
| 36710 | var el = vnode.elm; | |
| 36711 | if (el.f7Tooltip) { el.f7Tooltip.destroy(); } | |
| 36712 | }, | |
| 36713 | }, | |
| 36714 | }, | |
| 36715 | }; | |
| 36716 | ||
| 36717 | /* eslint no-nested-ternary: off */ | |
| 36718 | ||
| 5d51ea26 | 36719 | var Gauge = /*@__PURE__*/(function (Framework7Class) { |
| 5309fbda DC |
36720 | function Gauge(app, params) { |
| 36721 | if ( params === void 0 ) params = {}; | |
| 36722 | ||
| 36723 | // Extends with open/close Modal methods; | |
| 5d51ea26 | 36724 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
36725 | |
| 36726 | var gauge = this; | |
| 36727 | ||
| 36728 | var defaults = Utils.extend({}, app.params.gauge); | |
| 36729 | ||
| 36730 | // Extend defaults with modules params | |
| 36731 | gauge.useModulesParams(defaults); | |
| 36732 | ||
| 36733 | gauge.params = Utils.extend(defaults, params); | |
| 36734 | ||
| 36735 | var ref = gauge.params; | |
| 36736 | var el = ref.el; | |
| 36737 | if (!el) { return gauge; } | |
| 36738 | ||
| 36739 | var $el = $(el); | |
| 36740 | if ($el.length === 0) { return gauge; } | |
| 36741 | ||
| 36742 | if ($el[0].f7Gauge) { return $el[0].f7Gauge; } | |
| 36743 | ||
| 36744 | Utils.extend(gauge, { | |
| 36745 | app: app, | |
| 36746 | $el: $el, | |
| 36747 | el: $el && $el[0], | |
| 36748 | }); | |
| 36749 | ||
| 36750 | $el[0].f7Gauge = gauge; | |
| 36751 | ||
| 36752 | // Install Modules | |
| 36753 | gauge.useModules(); | |
| 36754 | ||
| 36755 | gauge.init(); | |
| 36756 | ||
| 36757 | return gauge; | |
| 36758 | } | |
| 36759 | ||
| 5d51ea26 DC |
36760 | if ( Framework7Class ) Gauge.__proto__ = Framework7Class; |
| 36761 | Gauge.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
36762 | Gauge.prototype.constructor = Gauge; |
| 36763 | ||
| 36764 | Gauge.prototype.calcRadius = function calcRadius () { | |
| 36765 | var gauge = this; | |
| 36766 | var ref = gauge.params; | |
| 36767 | var size = ref.size; | |
| 36768 | var borderWidth = ref.borderWidth; | |
| 36769 | return (size / 2) - (borderWidth / 2); | |
| 36770 | }; | |
| 36771 | ||
| 36772 | Gauge.prototype.calcBorderLength = function calcBorderLength () { | |
| 36773 | var gauge = this; | |
| 36774 | var radius = gauge.calcRadius(); | |
| 36775 | return 2 * Math.PI * radius; | |
| 36776 | }; | |
| 36777 | ||
| 36778 | Gauge.prototype.render = function render () { | |
| 36779 | var gauge = this; | |
| 36780 | if (gauge.params.render) { return gauge.params.render.call(gauge, gauge); } | |
| 36781 | ||
| 36782 | var ref = gauge.params; | |
| 36783 | var type = ref.type; | |
| 36784 | var value = ref.value; | |
| 36785 | var size = ref.size; | |
| 36786 | var bgColor = ref.bgColor; | |
| 36787 | var borderBgColor = ref.borderBgColor; | |
| 36788 | var borderColor = ref.borderColor; | |
| 36789 | var borderWidth = ref.borderWidth; | |
| 36790 | var valueText = ref.valueText; | |
| 36791 | var valueTextColor = ref.valueTextColor; | |
| 36792 | var valueFontSize = ref.valueFontSize; | |
| 36793 | var valueFontWeight = ref.valueFontWeight; | |
| 36794 | var labelText = ref.labelText; | |
| 36795 | var labelTextColor = ref.labelTextColor; | |
| 36796 | var labelFontSize = ref.labelFontSize; | |
| 36797 | var labelFontWeight = ref.labelFontWeight; | |
| 36798 | ||
| 36799 | var semiCircle = type === 'semicircle'; | |
| 36800 | var radius = gauge.calcRadius(); | |
| 36801 | var length = gauge.calcBorderLength(); | |
| 36802 | var progress = Math.max(Math.min(value, 1), 0); | |
| 36803 | ||
| 36804 | return ("\n <svg class=\"gauge-svg\" width=\"" + size + "px\" height=\"" + (semiCircle ? size / 2 : size) + "px\" viewBox=\"0 0 " + size + " " + (semiCircle ? size / 2 : size) + "\">\n " + (semiCircle ? ("\n <path\n class=\"gauge-back-semi\"\n d=\"M" + (size - (borderWidth / 2)) + "," + (size / 2) + " a1,1 0 0,0 -" + (size - borderWidth) + ",0\"\n stroke=\"" + borderBgColor + "\"\n stroke-width=\"" + borderWidth + "\"\n fill=\"" + (bgColor || 'none') + "\"\n />\n <path\n class=\"gauge-front-semi\"\n d=\"M" + (size - (borderWidth / 2)) + "," + (size / 2) + " a1,1 0 0,0 -" + (size - borderWidth) + ",0\"\n stroke=\"" + borderColor + "\"\n stroke-width=\"" + borderWidth + "\"\n stroke-dasharray=\"" + (length / 2) + "\"\n stroke-dashoffset=\"" + ((length / 2) * (1 + progress)) + "\"\n fill=\"" + (borderBgColor ? 'none' : (bgColor || 'none')) + "\"\n />\n ") : ("\n " + (borderBgColor ? ("\n <circle\n class=\"gauge-back-circle\"\n stroke=\"" + borderBgColor + "\"\n stroke-width=\"" + borderWidth + "\"\n fill=\"" + (bgColor || 'none') + "\"\n cx=\"" + (size / 2) + "\"\n cy=\"" + (size / 2) + "\"\n r=\"" + radius + "\"\n ></circle>\n ") : '') + "\n <circle\n class=\"gauge-front-circle\"\n transform=\"" + ("rotate(-90 " + (size / 2) + " " + (size / 2) + ")") + "\"\n stroke=\"" + borderColor + "\"\n stroke-width=\"" + borderWidth + "\"\n stroke-dasharray=\"" + length + "\"\n stroke-dashoffset=\"" + (length * (1 - progress)) + "\"\n fill=\"" + (borderBgColor ? 'none' : bgColor || 'none') + "\"\n cx=\"" + (size / 2) + "\"\n cy=\"" + (size / 2) + "\"\n r=\"" + radius + "\"\n ></circle>\n ")) + "\n " + (valueText ? ("\n <text\n class=\"gauge-value-text\"\n x=\"50%\"\n y=\"" + (semiCircle ? '100%' : '50%') + "\"\n font-weight=\"" + valueFontWeight + "\"\n font-size=\"" + valueFontSize + "\"\n fill=\"" + valueTextColor + "\"\n dy=\"" + (semiCircle ? (labelText ? -labelFontSize - 15 : -5) : 0) + "\"\n text-anchor=\"middle\"\n dominant-baseline=\"" + (!semiCircle && 'middle') + "\"\n >" + valueText + "</text>\n ") : '') + "\n " + (labelText ? ("\n <text\n class=\"gauge-label-text\"\n x=\"50%\"\n y=\"" + (semiCircle ? '100%' : '50%') + "\"\n font-weight=\"" + labelFontWeight + "\"\n font-size=\"" + labelFontSize + "\"\n fill=\"" + labelTextColor + "\"\n dy=\"" + (semiCircle ? -5 : (valueText ? ((valueFontSize / 2) + 10) : 0)) + "\"\n text-anchor=\"middle\"\n dominant-baseline=\"" + (!semiCircle && 'middle') + "\"\n >" + labelText + "</text>\n ") : '') + "\n </svg>\n ").trim(); | |
| 36805 | }; | |
| 36806 | ||
| 36807 | Gauge.prototype.update = function update (newParams) { | |
| 36808 | if ( newParams === void 0 ) newParams = {}; | |
| 36809 | ||
| 36810 | var gauge = this; | |
| 36811 | var params = gauge.params; | |
| 36812 | var $gaugeSvgEl = gauge.$gaugeSvgEl; | |
| 36813 | ||
| 36814 | Object.keys(newParams).forEach(function (param) { | |
| 36815 | if (typeof newParams[param] !== 'undefined') { | |
| 36816 | params[param] = newParams[param]; | |
| 36817 | } | |
| 36818 | }); | |
| 36819 | if ($gaugeSvgEl.length === 0) { return gauge; } | |
| 36820 | ||
| 36821 | var value = params.value; | |
| 36822 | var size = params.size; | |
| 36823 | var bgColor = params.bgColor; | |
| 36824 | var borderBgColor = params.borderBgColor; | |
| 36825 | var borderColor = params.borderColor; | |
| 36826 | var borderWidth = params.borderWidth; | |
| 36827 | var valueText = params.valueText; | |
| 36828 | var valueTextColor = params.valueTextColor; | |
| 36829 | var valueFontSize = params.valueFontSize; | |
| 36830 | var valueFontWeight = params.valueFontWeight; | |
| 36831 | var labelText = params.labelText; | |
| 36832 | var labelTextColor = params.labelTextColor; | |
| 36833 | var labelFontSize = params.labelFontSize; | |
| 36834 | var labelFontWeight = params.labelFontWeight; | |
| 36835 | ||
| 36836 | var length = gauge.calcBorderLength(); | |
| 36837 | var progress = Math.max(Math.min(value, 1), 0); | |
| 36838 | var radius = gauge.calcRadius(); | |
| 36839 | var semiCircle = params.type === 'semicircle'; | |
| 36840 | ||
| 36841 | var svgAttrs = { | |
| 36842 | width: (size + "px"), | |
| 36843 | height: ((semiCircle ? size / 2 : size) + "px"), | |
| 36844 | viewBox: ("0 0 " + size + " " + (semiCircle ? size / 2 : size)), | |
| 36845 | }; | |
| 36846 | Object.keys(svgAttrs).forEach(function (attr) { | |
| 36847 | $gaugeSvgEl.attr(attr, svgAttrs[attr]); | |
| 36848 | }); | |
| 36849 | if (semiCircle) { | |
| 36850 | var backAttrs = { | |
| 36851 | d: ("M" + (size - (borderWidth / 2)) + "," + (size / 2) + " a1,1 0 0,0 -" + (size - borderWidth) + ",0"), | |
| 36852 | stroke: borderBgColor, | |
| 36853 | 'stroke-width': borderWidth, | |
| 36854 | fill: bgColor || 'none', | |
| 36855 | }; | |
| 36856 | var frontAttrs = { | |
| 36857 | d: ("M" + (size - (borderWidth / 2)) + "," + (size / 2) + " a1,1 0 0,0 -" + (size - borderWidth) + ",0"), | |
| 36858 | stroke: borderColor, | |
| 36859 | 'stroke-width': borderWidth, | |
| 36860 | 'stroke-dasharray': length / 2, | |
| 36861 | 'stroke-dashoffset': (length / 2) * (progress - 1), | |
| 36862 | fill: borderBgColor ? 'none' : (bgColor || 'none'), | |
| 36863 | }; | |
| 36864 | Object.keys(backAttrs).forEach(function (attr) { | |
| 36865 | $gaugeSvgEl.find('.gauge-back-semi').attr(attr, backAttrs[attr]); | |
| 36866 | }); | |
| 36867 | Object.keys(frontAttrs).forEach(function (attr) { | |
| 36868 | $gaugeSvgEl.find('.gauge-front-semi').attr(attr, frontAttrs[attr]); | |
| 36869 | }); | |
| 36870 | } else { | |
| 36871 | var backAttrs$1 = { | |
| 36872 | stroke: borderBgColor, | |
| 36873 | 'stroke-width': borderWidth, | |
| 36874 | fill: bgColor || 'none', | |
| 36875 | cx: size / 2, | |
| 36876 | cy: size / 2, | |
| 36877 | r: radius, | |
| 36878 | }; | |
| 36879 | var frontAttrs$1 = { | |
| 36880 | transform: ("rotate(-90 " + (size / 2) + " " + (size / 2) + ")"), | |
| 36881 | stroke: borderColor, | |
| 36882 | 'stroke-width': borderWidth, | |
| 36883 | 'stroke-dasharray': length, | |
| 36884 | 'stroke-dashoffset': length * (1 - progress), | |
| 36885 | fill: borderBgColor ? 'none' : bgColor || 'none', | |
| 36886 | cx: size / 2, | |
| 36887 | cy: size / 2, | |
| 36888 | r: radius, | |
| 36889 | }; | |
| 36890 | Object.keys(backAttrs$1).forEach(function (attr) { | |
| 36891 | $gaugeSvgEl.find('.gauge-back-circle').attr(attr, backAttrs$1[attr]); | |
| 36892 | }); | |
| 36893 | Object.keys(frontAttrs$1).forEach(function (attr) { | |
| 36894 | $gaugeSvgEl.find('.gauge-front-circle').attr(attr, frontAttrs$1[attr]); | |
| 36895 | }); | |
| 36896 | } | |
| 36897 | if (valueText) { | |
| 36898 | if (!$gaugeSvgEl.find('.gauge-value-text').length) { | |
| 36899 | $gaugeSvgEl.append('<text class="gauge-value-text"></text>'); | |
| 36900 | } | |
| 36901 | var textAttrs = { | |
| 36902 | x: '50%', | |
| 36903 | y: semiCircle ? '100%' : '50%', | |
| 36904 | 'font-weight': valueFontWeight, | |
| 36905 | 'font-size': valueFontSize, | |
| 36906 | fill: valueTextColor, | |
| 36907 | dy: semiCircle ? (labelText ? -labelFontSize - 15 : -5) : 0, | |
| 36908 | 'text-anchor': 'middle', | |
| 36909 | 'dominant-baseline': !semiCircle && 'middle', | |
| 36910 | }; | |
| 36911 | Object.keys(textAttrs).forEach(function (attr) { | |
| 36912 | $gaugeSvgEl.find('.gauge-value-text').attr(attr, textAttrs[attr]); | |
| 36913 | }); | |
| 36914 | $gaugeSvgEl.find('.gauge-value-text').text(valueText); | |
| 36915 | } else { | |
| 36916 | $gaugeSvgEl.find('.gauge-value-text').remove(); | |
| 36917 | } | |
| 36918 | if (labelText) { | |
| 36919 | if (!$gaugeSvgEl.find('.gauge-label-text').length) { | |
| 36920 | $gaugeSvgEl.append('<text class="gauge-label-text"></text>'); | |
| 36921 | } | |
| 36922 | var labelAttrs = { | |
| 36923 | x: '50%', | |
| 36924 | y: semiCircle ? '100%' : '50%', | |
| 36925 | 'font-weight': labelFontWeight, | |
| 36926 | 'font-size': labelFontSize, | |
| 36927 | fill: labelTextColor, | |
| 36928 | dy: semiCircle ? -5 : (valueText ? ((valueFontSize / 2) + 10) : 0), | |
| 36929 | 'text-anchor': 'middle', | |
| 36930 | 'dominant-baseline': !semiCircle && 'middle', | |
| 36931 | }; | |
| 36932 | Object.keys(labelAttrs).forEach(function (attr) { | |
| 36933 | $gaugeSvgEl.find('.gauge-label-text').attr(attr, labelAttrs[attr]); | |
| 36934 | }); | |
| 36935 | $gaugeSvgEl.find('.gauge-label-text').text(labelText); | |
| 36936 | } else { | |
| 36937 | $gaugeSvgEl.find('.gauge-label-text').remove(); | |
| 36938 | } | |
| 36939 | return gauge; | |
| 36940 | }; | |
| 36941 | ||
| 36942 | Gauge.prototype.init = function init () { | |
| 36943 | var gauge = this; | |
| 36944 | var $gaugeSvgEl = $(gauge.render()).eq(0); | |
| 36945 | $gaugeSvgEl.f7Gauge = gauge; | |
| 36946 | Utils.extend(gauge, { | |
| 36947 | $gaugeSvgEl: $gaugeSvgEl, | |
| 36948 | gaugeSvgEl: $gaugeSvgEl && $gaugeSvgEl[0], | |
| 36949 | }); | |
| 36950 | gauge.$el.append($gaugeSvgEl); | |
| 36951 | return gauge; | |
| 36952 | }; | |
| 36953 | ||
| 36954 | Gauge.prototype.destroy = function destroy () { | |
| 36955 | var gauge = this; | |
| 36956 | if (!gauge.$el || gauge.destroyed) { return; } | |
| 36957 | gauge.$el.trigger('gauge:beforedestroy', gauge); | |
| 36958 | gauge.emit('local::beforeDestroy gaugeBeforeDestroy', gauge); | |
| 36959 | gauge.$gaugeSvgEl.remove(); | |
| 36960 | delete gauge.$el[0].f7Gauge; | |
| 36961 | Utils.deleteProps(gauge); | |
| 36962 | gauge.destroyed = true; | |
| 36963 | }; | |
| 36964 | ||
| 36965 | return Gauge; | |
| 36966 | }(Framework7Class)); | |
| 36967 | ||
| 36968 | var Gauge$1 = { | |
| 36969 | name: 'gauge', | |
| 36970 | static: { | |
| 36971 | Gauge: Gauge, | |
| 36972 | }, | |
| 36973 | create: function create() { | |
| 36974 | var app = this; | |
| 36975 | app.gauge = ConstructorMethods({ | |
| 36976 | defaultSelector: '.gauge', | |
| 36977 | constructor: Gauge, | |
| 36978 | app: app, | |
| 36979 | domProp: 'f7Gauge', | |
| 36980 | }); | |
| 36981 | app.gauge.update = function update(el, newParams) { | |
| 36982 | var $el = $(el); | |
| 36983 | if ($el.length === 0) { return undefined; } | |
| 36984 | var gauge = app.gauge.get(el); | |
| 36985 | if (!gauge) { return undefined; } | |
| 36986 | gauge.update(newParams); | |
| 36987 | return gauge; | |
| 36988 | }; | |
| 36989 | }, | |
| 36990 | params: { | |
| 36991 | gauge: { | |
| 36992 | el: null, | |
| 36993 | type: 'circle', | |
| 36994 | value: 0, | |
| 36995 | size: 200, | |
| 36996 | bgColor: 'transparent', | |
| 36997 | borderBgColor: '#eeeeee', | |
| 36998 | borderColor: '#000000', | |
| 36999 | borderWidth: 10, | |
| 37000 | valueText: null, | |
| 37001 | valueTextColor: '#000000', | |
| 37002 | valueFontSize: 31, | |
| 37003 | valueFontWeight: 500, | |
| 37004 | labelText: null, | |
| 37005 | labelTextColor: '#888888', | |
| 37006 | labelFontSize: 14, | |
| 37007 | labelFontWeight: 400, | |
| 37008 | }, | |
| 37009 | }, | |
| 37010 | on: { | |
| 37011 | tabMounted: function tabMounted(tabEl) { | |
| 37012 | var app = this; | |
| 37013 | $(tabEl).find('.gauge-init').each(function (index, el) { | |
| 37014 | app.gauge.create(Utils.extend({ el: el }, $(el).dataset() || {})); | |
| 37015 | }); | |
| 37016 | }, | |
| 37017 | tabBeforeRemove: function tabBeforeRemove(tabEl) { | |
| 37018 | $(tabEl).find('.gauge-init').each(function (index, el) { | |
| 37019 | if (el.f7Gauge) { el.f7Gauge.destroy(); } | |
| 37020 | }); | |
| 37021 | }, | |
| 37022 | pageInit: function pageInit(page) { | |
| 37023 | var app = this; | |
| 37024 | page.$el.find('.gauge-init').each(function (index, el) { | |
| 37025 | app.gauge.create(Utils.extend({ el: el }, $(el).dataset() || {})); | |
| 37026 | }); | |
| 37027 | }, | |
| 37028 | pageBeforeRemove: function pageBeforeRemove(page) { | |
| 37029 | page.$el.find('.gauge-init').each(function (index, el) { | |
| 37030 | if (el.f7Gauge) { el.f7Gauge.destroy(); } | |
| 37031 | }); | |
| 37032 | }, | |
| 37033 | }, | |
| 37034 | vnode: { | |
| 37035 | 'gauge-init': { | |
| 37036 | insert: function insert(vnode) { | |
| 37037 | var app = this; | |
| 37038 | var el = vnode.elm; | |
| 37039 | app.gauge.create(Utils.extend({ el: el }, $(el).dataset() || {})); | |
| 37040 | }, | |
| 37041 | destroy: function destroy(vnode) { | |
| 37042 | var el = vnode.elm; | |
| 37043 | if (el.f7Gauge) { el.f7Gauge.destroy(); } | |
| 37044 | }, | |
| 37045 | }, | |
| 37046 | }, | |
| 37047 | }; | |
| 37048 | ||
| 37049 | var Skeleton = { | |
| 37050 | name: 'skeleton', | |
| 37051 | }; | |
| 37052 | ||
| 37053 | var Menu = { | |
| 37054 | open: function open(el) { | |
| 37055 | if ( el === void 0 ) el = '.menu-item-dropdown'; | |
| 37056 | ||
| 37057 | var app = this; | |
| 37058 | if (!el) { return; } | |
| 37059 | var $el = $(el).closest('.menu-item-dropdown'); | |
| 37060 | if (!$el.length) { return; } | |
| 5d51ea26 DC |
37061 | var $menuEl = $el.closest('.menu').eq(0); |
| 37062 | if ($menuEl.length) { | |
| 37063 | var zIndex = $menuEl.css('z-index'); | |
| 37064 | var originalZIndex = $menuEl[0].style.zIndex; | |
| 37065 | $menuEl.css('z-index', parseInt(zIndex || 0, 0) + 1); | |
| 37066 | $menuEl[0].f7MenuZIndex = originalZIndex; | |
| 37067 | } | |
| 5309fbda DC |
37068 | $el.eq(0).addClass('menu-item-dropdown-opened').trigger('menu:opened'); |
| 37069 | app.emit('menuOpened', $el.eq(0)[0]); | |
| 37070 | }, | |
| 37071 | close: function close(el) { | |
| 37072 | if ( el === void 0 ) el = '.menu-item-dropdown-opened'; | |
| 37073 | ||
| 37074 | var app = this; | |
| 37075 | if (!el) { return; } | |
| 37076 | var $el = $(el).closest('.menu-item-dropdown-opened'); | |
| 37077 | if (!$el.length) { return; } | |
| 5d51ea26 DC |
37078 | var $menuEl = $el.closest('.menu').eq(0); |
| 37079 | if ($menuEl.length) { | |
| 37080 | var zIndex = $menuEl[0].f7MenuZIndex; | |
| 37081 | $menuEl.css('z-index', zIndex); | |
| 37082 | delete $menuEl[0].f7MenuZIndex; | |
| 37083 | } | |
| 5309fbda DC |
37084 | $el.eq(0).removeClass('menu-item-dropdown-opened').trigger('menu:closed'); |
| 37085 | app.emit('menuClosed', $el.eq(0)[0]); | |
| 37086 | }, | |
| 37087 | }; | |
| 37088 | ||
| 37089 | var Menu$1 = { | |
| 37090 | name: 'menu', | |
| 37091 | create: function create() { | |
| 37092 | var app = this; | |
| 37093 | app.menu = { | |
| 37094 | open: Menu.open.bind(app), | |
| 37095 | close: Menu.close.bind(app), | |
| 37096 | }; | |
| 37097 | }, | |
| 37098 | on: { | |
| 37099 | click: function click(e) { | |
| 37100 | var app = this; | |
| 37101 | var openedMenus = $('.menu-item-dropdown-opened'); | |
| 37102 | if (!openedMenus.length) { return; } | |
| 37103 | openedMenus.each(function (index, el) { | |
| 37104 | if (!$(e.target).closest('.menu-item-dropdown-opened').length) { | |
| 37105 | app.menu.close(el); | |
| 37106 | } | |
| 37107 | }); | |
| 37108 | }, | |
| 37109 | }, | |
| 37110 | clicks: { | |
| 37111 | '.menu-item-dropdown': function onClick($clickedEl, dataset, e) { | |
| 37112 | var app = this; | |
| 37113 | if ($clickedEl.hasClass('menu-item-dropdown-opened')) { | |
| 37114 | if ($(e.target).closest('.menu-dropdown').length) { return; } | |
| 37115 | app.menu.close($clickedEl); | |
| 37116 | } else { | |
| 37117 | app.menu.open($clickedEl); | |
| 37118 | } | |
| 37119 | }, | |
| 37120 | '.menu-close': function onClick() { | |
| 37121 | var app = this; | |
| 37122 | app.menu.close(); | |
| 37123 | }, | |
| 37124 | }, | |
| 37125 | }; | |
| 37126 | ||
| 5d51ea26 DC |
37127 | var moduleAlphaSlider = { |
| 37128 | render: function render(self) { | |
| 37129 | var ref = self.params; | |
| 37130 | var sliderLabel = ref.sliderLabel; | |
| 37131 | var sliderValue = ref.sliderValue; | |
| 37132 | var sliderValueEditable = ref.sliderValueEditable; | |
| 37133 | var alphaLabelText = ref.alphaLabelText; | |
| 37134 | return ("\n <div class=\"color-picker-module color-picker-module-alpha-slider\">\n <div class=\"color-picker-slider-wrap\">\n " + (sliderLabel ? ("\n <div class=\"color-picker-slider-label\">" + alphaLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-slider color-picker-slider-alpha\"></div>\n " + (sliderValue ? ("\n <div class=\"color-picker-slider-value\">\n " + (sliderValueEditable ? "\n <input type=\"number\" step=\"0.01\" min=\"0\" max=\"1\" class=\"color-picker-value-alpha\">\n " : "\n <span class=\"color-picker-value-alpha\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n </div>\n "); | |
| 37135 | }, | |
| 37136 | init: function init(self) { | |
| 37137 | self.alphaRangeSlider = self.app.range.create({ | |
| 37138 | el: self.$el.find('.color-picker-slider-alpha'), | |
| 37139 | min: 0, | |
| 37140 | max: 1, | |
| 37141 | step: 0.01, | |
| 37142 | value: 1, | |
| 37143 | on: { | |
| 37144 | change: function change(range, value) { | |
| 37145 | var alpha = Math.floor(value * 100) / 100; | |
| 37146 | self.setValue({ alpha: alpha }); | |
| 37147 | }, | |
| 37148 | }, | |
| 37149 | }); | |
| 37150 | function handleInputChange(e) { | |
| 37151 | var alpha = self.value.alpha; | |
| 37152 | var value = parseFloat(e.target.value); | |
| 37153 | if (Number.isNaN(value)) { | |
| 37154 | e.target.value = alpha; | |
| 37155 | return; | |
| 37156 | } | |
| 37157 | value = Math.max(0, Math.min(1, value)); | |
| 37158 | self.setValue({ alpha: value }); | |
| 37159 | } | |
| 37160 | ||
| 37161 | self.$el.on('change', '.color-picker-module-alpha-slider input', handleInputChange); | |
| 37162 | ||
| 37163 | self.destroyAlphaSliderEvents = function destroyAlphaSliderEvents() { | |
| 37164 | self.$el.off('change', '.color-picker-module-alpha-slider input', handleInputChange); | |
| 37165 | }; | |
| 37166 | }, | |
| 37167 | update: function update(self) { | |
| 37168 | var value = self.value; | |
| 37169 | var ref = self.params; | |
| 37170 | var sliderValue = ref.sliderValue; | |
| 37171 | var sliderValueEditable = ref.sliderValueEditable; | |
| 37172 | ||
| 37173 | var alpha = value.alpha; | |
| 37174 | self.alphaRangeSlider.value = alpha; | |
| 37175 | self.alphaRangeSlider.layout(); | |
| 37176 | if (sliderValue && sliderValueEditable) { | |
| 37177 | self.$el.find('input.color-picker-value-alpha').val(alpha); | |
| 37178 | } else { | |
| 37179 | self.$el.find('span.color-picker-value-alpha').text(alpha); | |
| 37180 | } | |
| 37181 | }, | |
| 37182 | destroy: function destroy(self) { | |
| 37183 | if (self.alphaRangeSlider && self.alphaRangeSlider.destroy) { | |
| 37184 | self.alphaRangeSlider.destroy(); | |
| 37185 | } | |
| 37186 | delete self.alphaRangeSlider; | |
| 37187 | ||
| 37188 | if (self.destroyAlphaSliderEvents) { self.destroyAlphaSliderEvents(); } | |
| 37189 | delete self.destroyAlphaSliderEvents; | |
| 37190 | }, | |
| 37191 | }; | |
| 37192 | ||
| 37193 | var moduleCurrentColor = { | |
| 37194 | render: function render() { | |
| 37195 | return "\n <div class=\"color-picker-module color-picker-module-current-color\">\n <div class=\"color-picker-current-color\"></div>\n </div>\n "; | |
| 37196 | }, | |
| 37197 | update: function update(self) { | |
| 37198 | self.$el.find('.color-picker-module-current-color .color-picker-current-color').css( | |
| 37199 | 'background-color', | |
| 37200 | self.value.hex | |
| 37201 | ); | |
| 37202 | }, | |
| 37203 | }; | |
| 37204 | ||
| 37205 | var moduleHex = { | |
| 37206 | render: function render(self) { | |
| 37207 | var ref = self.params; | |
| 37208 | var hexLabel = ref.hexLabel; | |
| 37209 | var hexLabelText = ref.hexLabelText; | |
| 37210 | var hexValueEditable = ref.hexValueEditable; | |
| 37211 | return ("\n <div class=\"color-picker-module color-picker-module-hex\">\n <div class=\"color-picker-hex-wrap\">\n " + (hexLabel ? ("\n <div class=\"color-picker-hex-label\">" + hexLabelText + "</div>\n ") : '') + "\n <div class=\"color-picker-hex-value\">\n " + (hexValueEditable ? "\n <input type=\"text\" class=\"color-picker-value-hex\">\n " : "\n <span class=\"color-picker-value-hex\"></span>\n ") + "\n </div>\n </div>\n </div>\n "); | |
| 37212 | }, | |
| 37213 | init: function init(self) { | |
| 37214 | function handleInputChange(e) { | |
| 37215 | var hex = self.value.hex; | |
| 37216 | var value = e.target.value.replace(/#/g, ''); | |
| 37217 | if (Number.isNaN(value) || !value || (value.length !== 3 && value.length !== 6)) { | |
| 37218 | e.target.value = hex; | |
| 37219 | return; | |
| 37220 | } | |
| 37221 | var min = 0; | |
| 37222 | var current = parseInt(value, 16); | |
| 37223 | var max = parseInt('ffffff', 16); // eslint-disable-line | |
| 37224 | if (current > max) { | |
| 37225 | value = 'fff'; | |
| 37226 | } | |
| 37227 | if (current < min) { | |
| 37228 | value = '000'; | |
| 37229 | } | |
| 37230 | self.setValue({ hex: value }); | |
| 37231 | } | |
| 37232 | ||
| 37233 | self.$el.on('change', '.color-picker-module-hex input', handleInputChange); | |
| 37234 | ||
| 37235 | self.destroyHexEvents = function destroyHexEvents() { | |
| 37236 | self.$el.off('change', '.color-picker-module-hex input', handleInputChange); | |
| 37237 | }; | |
| 37238 | }, | |
| 37239 | update: function update(self) { | |
| 37240 | var value = self.value; | |
| 37241 | ||
| 37242 | var ref = self.params; | |
| 37243 | var hexValueEditable = ref.hexValueEditable; | |
| 37244 | ||
| 37245 | var hex = value.hex; | |
| 37246 | if (hexValueEditable) { | |
| 37247 | self.$el.find('input.color-picker-value-hex').val(hex); | |
| 37248 | } else { | |
| 37249 | self.$el.find('span.color-picker-value-hex').text(hex); | |
| 37250 | } | |
| 37251 | }, | |
| 37252 | destroy: function destroy(self) { | |
| 37253 | if (self.destroyHexEvents) { self.destroyHexEvents(); } | |
| 37254 | delete self.destroyHexEvents; | |
| 37255 | }, | |
| 37256 | }; | |
| 37257 | ||
| 37258 | var moduleHsbSliders = { | |
| 37259 | render: function render(self) { | |
| 37260 | var ref = self.params; | |
| 37261 | var sliderLabel = ref.sliderLabel; | |
| 37262 | var sliderValue = ref.sliderValue; | |
| 37263 | var sliderValueEditable = ref.sliderValueEditable; | |
| 37264 | var hueLabelText = ref.hueLabelText; | |
| 37265 | var saturationLabelText = ref.saturationLabelText; | |
| 37266 | var brightnessLabelText = ref.brightnessLabelText; | |
| 37267 | return ("\n <div class=\"color-picker-module color-picker-module-hsb-sliders\">\n <div class=\"color-picker-slider-wrap\">\n " + (sliderLabel ? ("\n <div class=\"color-picker-slider-label\">" + hueLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-slider color-picker-slider-hue\"></div>\n " + (sliderValue ? ("\n <div class=\"color-picker-slider-value\">\n " + (sliderValueEditable ? "\n <input type=\"number\" step=\"0.1\" min=\"0\" max=\"360\" class=\"color-picker-value-hue\" data-color-index=\"0\">\n " : "\n <span class=\"color-picker-value-hue\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n <div class=\"color-picker-slider-wrap\">\n " + (sliderLabel ? ("\n <div class=\"color-picker-slider-label\">" + saturationLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-slider color-picker-slider-saturation\"></div>\n " + (sliderValue ? ("\n <div class=\"color-picker-slider-value\">\n " + (sliderValueEditable ? "\n <input type=\"number\" step=\"0.1\" min=\"0\" max=\"100\" class=\"color-picker-value-saturation\" data-color-index=\"1\">\n " : "\n <span class=\"color-picker-value-saturation\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n <div class=\"color-picker-slider-wrap\">\n " + (sliderLabel ? ("\n <div class=\"color-picker-slider-label\">" + brightnessLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-slider color-picker-slider-brightness\"></div>\n " + (sliderValue ? ("\n <div class=\"color-picker-slider-value\">\n " + (sliderValueEditable ? "\n <input type=\"number\" step=\"0.1\" min=\"0\" max=\"100\" class=\"color-picker-value-brightness\" data-color-index=\"2\">\n " : "\n <span class=\"color-picker-value-brightness\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n </div>\n "); | |
| 37268 | }, | |
| 37269 | init: function init(self) { | |
| 37270 | self.hueRangeSlider = self.app.range.create({ | |
| 37271 | el: self.$el.find('.color-picker-slider-hue'), | |
| 37272 | min: 0, | |
| 37273 | max: 360, | |
| 37274 | step: 0.1, | |
| 37275 | value: 0, | |
| 37276 | on: { | |
| 37277 | change: function change(range, value) { | |
| 37278 | self.setValue({ hue: value }); | |
| 37279 | }, | |
| 37280 | }, | |
| 37281 | }); | |
| 37282 | self.saturationRangeSlider = self.app.range.create({ | |
| 37283 | el: self.$el.find('.color-picker-slider-saturation'), | |
| 37284 | min: 0, | |
| 37285 | max: 1, | |
| 37286 | step: 0.001, | |
| 37287 | value: 0, | |
| 37288 | on: { | |
| 37289 | change: function change(range, value) { | |
| 37290 | var s = Math.floor(value * 1000) / 1000; | |
| 37291 | self.setValue({ hsb: [self.value.hsb[0], s, self.value.hsb[2]] }); | |
| 37292 | }, | |
| 37293 | }, | |
| 37294 | }); | |
| 37295 | self.brightnessRangeSlider = self.app.range.create({ | |
| 37296 | el: self.$el.find('.color-picker-slider-brightness'), | |
| 37297 | min: 0, | |
| 37298 | max: 1, | |
| 37299 | step: 0.001, | |
| 37300 | value: 0, | |
| 37301 | on: { | |
| 37302 | change: function change(range, value) { | |
| 37303 | var b = Math.floor(value * 1000) / 1000; | |
| 37304 | self.setValue({ hsb: [self.value.hsb[0], self.value.hsb[1], b] }); | |
| 37305 | }, | |
| 37306 | }, | |
| 37307 | }); | |
| 37308 | ||
| 37309 | function handleInputChange(e) { | |
| 37310 | var hsb = [].concat( self.value.hsb ); | |
| 37311 | var index = parseInt($(e.target).attr('data-color-index'), 10); | |
| 37312 | var value = parseFloat(e.target.value); | |
| 37313 | if (Number.isNaN(value)) { | |
| 37314 | e.target.value = hsb[index]; | |
| 37315 | return; | |
| 37316 | } | |
| 37317 | if (index === 0) { | |
| 37318 | value = Math.max(0, Math.min(360, value)); | |
| 37319 | } else { | |
| 37320 | value = Math.max(0, Math.min(100, value)) / 100; | |
| 37321 | } | |
| 37322 | ||
| 37323 | hsb[index] = value; | |
| 37324 | self.setValue({ hsb: hsb }); | |
| 37325 | } | |
| 37326 | ||
| 37327 | self.$el.on('change', '.color-picker-module-hsb-sliders input', handleInputChange); | |
| 37328 | ||
| 37329 | self.destroyHsbSlidersEvents = function destroyHsbSlidersEvents() { | |
| 37330 | self.$el.off('change', '.color-picker-module-hsb-sliders input', handleInputChange); | |
| 37331 | }; | |
| 37332 | }, | |
| 37333 | update: function update(self) { | |
| 37334 | var app = self.app; | |
| 37335 | var value = self.value; | |
| 37336 | var ref = self.params; | |
| 37337 | var sliderValue = ref.sliderValue; | |
| 37338 | var sliderValueEditable = ref.sliderValueEditable; | |
| 37339 | ||
| 37340 | var hsb = value.hsb; | |
| 37341 | var hue = value.hue; | |
| 37342 | ||
| 37343 | self.hueRangeSlider.value = hue; | |
| 37344 | self.saturationRangeSlider.value = hsb[1]; | |
| 37345 | self.brightnessRangeSlider.value = hsb[2]; | |
| 37346 | ||
| 37347 | self.hueRangeSlider.layout(); | |
| 37348 | self.saturationRangeSlider.layout(); | |
| 37349 | self.brightnessRangeSlider.layout(); | |
| 37350 | ||
| 37351 | var hslCurrent = Utils.colorHsbToHsl(hsb[0], hsb[1], 1); | |
| 37352 | var hslLeft = Utils.colorHsbToHsl(hsb[0], 0, 1); | |
| 37353 | var hslRight = Utils.colorHsbToHsl(hsb[0], 1, 1); | |
| 37354 | var brightness = hsb[2]; | |
| 37355 | ||
| 37356 | self.hueRangeSlider.$el[0].style.setProperty( | |
| 37357 | '--f7-range-knob-color', | |
| 37358 | ("hsl(" + hue + ", 100%, 50%)") | |
| 37359 | ); | |
| 37360 | self.saturationRangeSlider.$el[0].style.setProperty( | |
| 37361 | '--f7-range-knob-color', | |
| 37362 | ("hsl(" + (hslCurrent[0]) + ", " + (hslCurrent[1] * 100) + "%, " + (hslCurrent[2] * 100) + "%)") | |
| 37363 | ); | |
| 37364 | self.brightnessRangeSlider.$el[0].style.setProperty( | |
| 37365 | '--f7-range-knob-color', | |
| 37366 | ("rgb(" + (brightness * 255) + ", " + (brightness * 255) + ", " + (brightness * 255) + ")") | |
| 37367 | ); | |
| 37368 | self.saturationRangeSlider.$el.find('.range-bar').css( | |
| 37369 | 'background-image', | |
| 37370 | ("linear-gradient(" + (app.rtl ? 'to left' : 'to right') + ", hsl(" + (hslLeft[0]) + ", " + (hslLeft[1] * 100) + "%, " + (hslLeft[2] * 100) + "%), hsl(" + (hslRight[0]) + ", " + (hslRight[1] * 100) + "%, " + (hslRight[2] * 100) + "%))") | |
| 37371 | ); | |
| 37372 | ||
| 37373 | if (sliderValue && sliderValueEditable) { | |
| 37374 | self.$el.find('input.color-picker-value-hue').val(("" + hue)); | |
| 37375 | self.$el.find('input.color-picker-value-saturation').val(("" + (hsb[1] * 1000 / 10))); | |
| 37376 | self.$el.find('input.color-picker-value-brightness').val(("" + (hsb[2] * 1000 / 10))); | |
| 37377 | } else if (sliderValue) { | |
| 37378 | self.$el.find('span.color-picker-value-hue').text(("" + hue)); | |
| 37379 | self.$el.find('span.color-picker-value-saturation').text(("" + (hsb[1] * 1000 / 10))); | |
| 37380 | self.$el.find('span.color-picker-value-brightness').text(("" + (hsb[2] * 1000 / 10))); | |
| 37381 | } | |
| 37382 | }, | |
| 37383 | destroy: function destroy(self) { | |
| 37384 | if (self.hueRangeSlider && self.hueRangeSlider.destroy) { | |
| 37385 | self.hueRangeSlider.destroy(); | |
| 37386 | } | |
| 37387 | if (self.saturationRangeSlider && self.saturationRangeSlider.destroy) { | |
| 37388 | self.saturationRangeSlider.destroy(); | |
| 37389 | } | |
| 37390 | if (self.brightnessRangeSlider && self.brightnessRangeSlider.destroy) { | |
| 37391 | self.brightnessRangeSlider.destroy(); | |
| 37392 | } | |
| 37393 | ||
| 37394 | delete self.hueRangeSlider; | |
| 37395 | delete self.saturationRangeSlider; | |
| 37396 | delete self.brightnessRangeSlider; | |
| 37397 | ||
| 37398 | if (self.destroyHsbSlidersEvents) { self.destroyHsbSlidersEvents(); } | |
| 37399 | delete self.destroyHsbSlidersEvents; | |
| 37400 | }, | |
| 37401 | }; | |
| 37402 | ||
| 37403 | var moduleHueSlider = { | |
| 37404 | render: function render(self) { | |
| 37405 | var ref = self.params; | |
| 37406 | var sliderLabel = ref.sliderLabel; | |
| 37407 | var sliderValue = ref.sliderValue; | |
| 37408 | var sliderValueEditable = ref.sliderValueEditable; | |
| 37409 | var hueLabelText = ref.hueLabelText; | |
| 37410 | return ("\n <div class=\"color-picker-module color-picker-module-hue-slider\">\n <div class=\"color-picker-slider-wrap\">\n " + (sliderLabel ? ("\n <div class=\"color-picker-slider-label\">" + hueLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-slider color-picker-slider-hue\"></div>\n " + (sliderValue ? ("\n <div class=\"color-picker-slider-value\">\n " + (sliderValueEditable ? "\n <input type=\"number\" step=\"0.1\" min=\"0\" max=\"360\" class=\"color-picker-value-hue\">\n " : "\n <span class=\"color-picker-value-hue\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n </div>\n "); | |
| 37411 | }, | |
| 37412 | init: function init(self) { | |
| 37413 | self.hueRangeSlider = self.app.range.create({ | |
| 37414 | el: self.$el.find('.color-picker-slider-hue'), | |
| 37415 | min: 0, | |
| 37416 | max: 360, | |
| 37417 | step: 0.1, | |
| 37418 | value: 0, | |
| 37419 | on: { | |
| 37420 | change: function change(range, value) { | |
| 37421 | self.setValue({ hue: value }); | |
| 37422 | }, | |
| 37423 | }, | |
| 37424 | }); | |
| 37425 | }, | |
| 37426 | update: function update(self) { | |
| 37427 | var value = self.value; | |
| 37428 | var ref = self.params; | |
| 37429 | var sliderValue = ref.sliderValue; | |
| 37430 | var sliderValueEditable = ref.sliderValueEditable; | |
| 37431 | ||
| 37432 | var hue = value.hue; | |
| 37433 | ||
| 37434 | self.hueRangeSlider.value = hue; | |
| 37435 | self.hueRangeSlider.layout(); | |
| 37436 | self.hueRangeSlider.$el[0].style.setProperty( | |
| 37437 | '--f7-range-knob-color', | |
| 37438 | ("hsl(" + hue + ", 100%, 50%)") | |
| 37439 | ); | |
| 37440 | if (sliderValue && sliderValueEditable) { | |
| 37441 | self.$el.find('input.color-picker-value-hue').val(("" + hue)); | |
| 37442 | } else if (sliderValue) { | |
| 37443 | self.$el.find('span.color-picker-value-hue').text(("" + hue)); | |
| 37444 | } | |
| 37445 | }, | |
| 37446 | destroy: function destroy(self) { | |
| 37447 | if (self.hueRangeSlider && self.hueRangeSlider.destroy) { | |
| 37448 | self.hueRangeSlider.destroy(); | |
| 37449 | } | |
| 37450 | delete self.hueRangeSlider; | |
| 37451 | }, | |
| 37452 | }; | |
| 37453 | ||
| 37454 | var moduleBrightnessSlider = { | |
| 37455 | render: function render(self) { | |
| 37456 | var ref = self.params; | |
| 37457 | var sliderLabel = ref.sliderLabel; | |
| 37458 | var sliderValue = ref.sliderValue; | |
| 37459 | var sliderValueEditable = ref.sliderValueEditable; | |
| 37460 | var brightnessLabelText = ref.brightnessLabelText; | |
| 37461 | return ("\n <div class=\"color-picker-module color-picker-module-brightness-slider\">\n <div class=\"color-picker-slider-wrap\">\n " + (sliderLabel ? ("\n <div class=\"color-picker-slider-label\">" + brightnessLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-slider color-picker-slider-brightness\"></div>\n " + (sliderValue ? ("\n <div class=\"color-picker-slider-value\">\n " + (sliderValueEditable ? "\n <input type=\"number\" step=\"0.1\" min=\"0\" max=\"100\" class=\"color-picker-value-brightness\">\n " : "\n <span class=\"color-picker-value-brightness\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n </div>\n "); | |
| 37462 | }, | |
| 37463 | init: function init(self) { | |
| 37464 | self.brightnessRangeSlider = self.app.range.create({ | |
| 37465 | el: self.$el.find('.color-picker-slider-brightness'), | |
| 37466 | min: 0, | |
| 37467 | max: 1, | |
| 37468 | step: 0.001, | |
| 37469 | value: 0, | |
| 37470 | on: { | |
| 37471 | change: function change(range, value) { | |
| 37472 | var b = Math.floor(value * 1000) / 1000; | |
| 37473 | self.setValue({ hsb: [self.value.hsb[0], self.value.hsb[1], b] }); | |
| 37474 | }, | |
| 37475 | }, | |
| 37476 | }); | |
| 37477 | }, | |
| 37478 | update: function update(self) { | |
| 37479 | var value = self.value; | |
| 37480 | var app = self.app; | |
| 37481 | var ref = self.params; | |
| 37482 | var sliderValue = ref.sliderValue; | |
| 37483 | var sliderValueEditable = ref.sliderValueEditable; | |
| 37484 | ||
| 37485 | var hsb = value.hsb; | |
| 37486 | ||
| 37487 | self.brightnessRangeSlider.value = hsb[2]; | |
| 37488 | self.brightnessRangeSlider.layout(); | |
| 37489 | ||
| 37490 | var hslCurrent = Utils.colorHsbToHsl(hsb[0], hsb[1], hsb[2]); | |
| 37491 | var hslLeft = Utils.colorHsbToHsl(hsb[0], hsb[1], 0); | |
| 37492 | var hslRight = Utils.colorHsbToHsl(hsb[0], hsb[1], 1); | |
| 37493 | ||
| 37494 | self.brightnessRangeSlider.$el[0].style.setProperty( | |
| 37495 | '--f7-range-knob-color', | |
| 37496 | ("hsl(" + (hslCurrent[0]) + ", " + (hslCurrent[1] * 100) + "%, " + (hslCurrent[2] * 100) + "%)") | |
| 37497 | ); | |
| 37498 | self.brightnessRangeSlider.$el.find('.range-bar').css( | |
| 37499 | 'background-image', | |
| 37500 | ("linear-gradient(" + (app.rtl ? 'to left' : 'to right') + ", hsl(" + (hslLeft[0]) + ", " + (hslLeft[1] * 100) + "%, " + (hslLeft[2] * 100) + "%), hsl(" + (hslRight[0]) + ", " + (hslRight[1] * 100) + "%, " + (hslRight[2] * 100) + "%))") | |
| 37501 | ); | |
| 37502 | if (sliderValue && sliderValueEditable) { | |
| 37503 | self.$el.find('input.color-picker-value-brightness').val(("" + (hsb[2] * 1000 / 10))); | |
| 37504 | } else if (sliderValue) { | |
| 37505 | self.$el.find('span.color-picker-value-brightness').text(("" + (hsb[2] * 1000 / 10))); | |
| 37506 | } | |
| 37507 | }, | |
| 37508 | destroy: function destroy(self) { | |
| 37509 | if (self.brightnessRangeSlider && self.brightnessRangeSlider.destroy) { | |
| 37510 | self.brightnessRangeSlider.destroy(); | |
| 37511 | } | |
| 37512 | delete self.brightnessRangeSlider; | |
| 37513 | }, | |
| 37514 | }; | |
| 37515 | ||
| 37516 | /* eslint indent: ["off"] */ | |
| 37517 | ||
| 37518 | var modulePalette = { | |
| 37519 | render: function render(self) { | |
| 37520 | return ("\n <div class=\"color-picker-module color-picker-module-palette\">\n <div class=\"color-picker-palette\">\n " + (self.params.palette.map(function (p) { | |
| 37521 | if (Array.isArray(p)) { | |
| 37522 | var row = '<div class="color-picker-palette-row">'; | |
| 37523 | row += p.map(function (c) { return ("\n <div class=\"color-picker-palette-value\" data-palette-color=\"" + c + "\" style=\"background-color: " + c + "\"></div>\n "); }).join(''); | |
| 37524 | row += '</div>'; | |
| 37525 | return row; | |
| 37526 | } | |
| 37527 | return ("\n <div class=\"color-picker-palette-value\" data-palette-color=\"" + p + "\" style=\"background-color: " + p + "\"></div>\n "); | |
| 37528 | }).join('')) + "\n </div>\n </div>\n "); | |
| 37529 | }, | |
| 37530 | init: function init(self) { | |
| 37531 | function handlePaletteClick(e) { | |
| 37532 | var hex = $(e.target).attr('data-palette-color'); | |
| 37533 | self.setValue({ | |
| 37534 | hex: hex, | |
| 37535 | }); | |
| 37536 | } | |
| 37537 | ||
| 37538 | self.$el.on('click', '.color-picker-module-palette .color-picker-palette-value', handlePaletteClick); | |
| 37539 | ||
| 37540 | self.destroyPaletteEvents = function destroyPaletteEvents() { | |
| 37541 | self.$el.off('click', '.color-picker-module-hex input', handlePaletteClick); | |
| 37542 | }; | |
| 37543 | }, | |
| 37544 | destroy: function destroy(self) { | |
| 37545 | if (self.destroyPaletteEvents) { | |
| 37546 | self.destroyPaletteEvents(); | |
| 37547 | } | |
| 37548 | delete self.destroyPaletteEvents; | |
| 37549 | }, | |
| 37550 | }; | |
| 37551 | ||
| 37552 | var moduleInitialCurrentColors = { | |
| 37553 | render: function render() { | |
| 37554 | return "\n <div class=\"color-picker-module color-picker-module-initial-current-colors\">\n <div class=\"color-picker-initial-current-colors\">\n <div class=\"color-picker-initial-color\"></div>\n <div class=\"color-picker-current-color\"></div>\n </div>\n </div>\n "; | |
| 37555 | }, | |
| 37556 | init: function init(self) { | |
| 37557 | function handleInitialColorClick() { | |
| 37558 | if (self.initialValue) { | |
| 37559 | var ref = self.initialValue; | |
| 37560 | var hex = ref.hex; | |
| 37561 | var alpha = ref.alpha; | |
| 37562 | self.setValue({ | |
| 37563 | hex: hex, | |
| 37564 | alpha: alpha, | |
| 37565 | }); | |
| 37566 | } | |
| 37567 | } | |
| 37568 | self.$el.on('click', '.color-picker-initial-color', handleInitialColorClick); | |
| 37569 | self.destroyInitialCurrentEvents = function destroyInitialCurrentEvents() { | |
| 37570 | self.$el.off('click', '.color-picker-initial-color', handleInitialColorClick); | |
| 37571 | }; | |
| 37572 | }, | |
| 37573 | update: function update(self) { | |
| 37574 | self.$el.find('.color-picker-module-initial-current-colors .color-picker-initial-color').css( | |
| 37575 | 'background-color', | |
| 37576 | self.initialValue.hex | |
| 37577 | ); | |
| 37578 | self.$el.find('.color-picker-module-initial-current-colors .color-picker-current-color').css( | |
| 37579 | 'background-color', | |
| 37580 | self.value.hex | |
| 37581 | ); | |
| 37582 | }, | |
| 37583 | destroy: function destroy(self) { | |
| 37584 | if (self.destroyInitialCurrentEvents) { | |
| 37585 | self.destroyInitialCurrentEvents(); | |
| 37586 | } | |
| 37587 | delete self.destroyInitialCurrentEvents; | |
| 37588 | }, | |
| 37589 | }; | |
| 37590 | ||
| 37591 | var moduleRgbBars = { | |
| 37592 | render: function render(self) { | |
| 37593 | var ref = self.params; | |
| 37594 | var barLabel = ref.barLabel; | |
| 37595 | var barValue = ref.barValue; | |
| 37596 | var barValueEditable = ref.barValueEditable; | |
| 37597 | var redLabelText = ref.redLabelText; | |
| 37598 | var greenLabelText = ref.greenLabelText; | |
| 37599 | var blueLabelText = ref.blueLabelText; | |
| 37600 | return ("\n <div class=\"color-picker-module color-picker-module-rgb-bars\">\n <div class=\"color-picker-bar-wrap\">\n " + (barLabel ? ("\n <div class=\"color-picker-bar-label\">" + redLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-bar color-picker-bar-red\"></div>\n " + (barValue ? ("\n <div class=\"color-picker-bar-value\">\n " + (barValueEditable ? "\n <input type=\"number\" step=\"1\" min=\"0\" max=\"255\" class=\"color-picker-value-bar-red\" data-color-index=\"0\">\n " : "\n <span class=\"color-picker-value-bar-red\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n <div class=\"color-picker-bar-wrap\">\n " + (barLabel ? ("\n <div class=\"color-picker-bar-label\">" + greenLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-bar color-picker-bar-green\"></div>\n " + (barValue ? ("\n <div class=\"color-picker-bar-value\">\n " + (barValueEditable ? "\n <input type=\"number\" step=\"1\" min=\"0\" max=\"255\" class=\"color-picker-value-bar-green\" data-color-index=\"1\">\n " : "\n <span class=\"color-picker-value-bar-green\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n <div class=\"color-picker-bar-wrap\">\n " + (barLabel ? ("\n <div class=\"color-picker-bar-label\">" + blueLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-bar color-picker-bar-blue\"></div>\n " + (barValue ? ("\n <div class=\"color-picker-bar-value\">\n " + (barValueEditable ? "\n <input type=\"number\" step=\"1\" min=\"0\" max=\"255\" class=\"color-picker-value-bar-blue\" data-color-index=\"2\">\n " : "\n <span class=\"color-picker-value-bar-blue\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n </div>\n "); | |
| 37601 | }, | |
| 37602 | init: function init(self) { | |
| 37603 | self.redBar = self.app.range.create({ | |
| 37604 | el: self.$el.find('.color-picker-bar-red'), | |
| 37605 | min: 0, | |
| 37606 | max: 255, | |
| 37607 | step: 1, | |
| 37608 | value: 0, | |
| 37609 | vertical: true, | |
| 37610 | on: { | |
| 37611 | change: function change(range, value) { | |
| 37612 | self.setValue({ rgb: [value, self.value.rgb[1], self.value.rgb[2]] }); | |
| 37613 | }, | |
| 37614 | }, | |
| 37615 | }); | |
| 37616 | self.greenBar = self.app.range.create({ | |
| 37617 | el: self.$el.find('.color-picker-bar-green'), | |
| 37618 | min: 0, | |
| 37619 | max: 255, | |
| 37620 | step: 1, | |
| 37621 | value: 0, | |
| 37622 | vertical: true, | |
| 37623 | on: { | |
| 37624 | change: function change(range, value) { | |
| 37625 | self.setValue({ rgb: [self.value.rgb[0], value, self.value.rgb[2]] }); | |
| 37626 | }, | |
| 37627 | }, | |
| 37628 | }); | |
| 37629 | self.blueBar = self.app.range.create({ | |
| 37630 | el: self.$el.find('.color-picker-bar-blue'), | |
| 37631 | min: 0, | |
| 37632 | max: 255, | |
| 37633 | step: 1, | |
| 37634 | value: 0, | |
| 37635 | vertical: true, | |
| 37636 | on: { | |
| 37637 | change: function change(range, value) { | |
| 37638 | self.setValue({ rgb: [self.value.rgb[0], self.value.rgb[1], value] }); | |
| 37639 | }, | |
| 37640 | }, | |
| 37641 | }); | |
| 37642 | ||
| 37643 | function handleInputChange(e) { | |
| 37644 | var rgb = [].concat( self.value.rgb ); | |
| 37645 | var index = parseInt($(e.target).attr('data-color-index'), 10); | |
| 37646 | var value = parseInt(e.target.value, 10); | |
| 37647 | if (Number.isNaN(value)) { | |
| 37648 | e.target.value = rgb[index]; | |
| 37649 | return; | |
| 37650 | } | |
| 37651 | value = Math.max(0, Math.min(255, value)); | |
| 37652 | rgb[index] = value; | |
| 37653 | self.setValue({ rgb: rgb }); | |
| 37654 | } | |
| 37655 | ||
| 37656 | self.$el.on('change', '.color-picker-module-rgb-bars input', handleInputChange); | |
| 37657 | ||
| 37658 | self.destroyRgbBarsEvents = function destroyRgbBarsEvents() { | |
| 37659 | self.$el.off('change', '.color-picker-module-rgb-bars input', handleInputChange); | |
| 37660 | }; | |
| 37661 | }, | |
| 37662 | update: function update(self) { | |
| 37663 | var value = self.value; | |
| 37664 | var redBar = self.redBar; | |
| 37665 | var greenBar = self.greenBar; | |
| 37666 | var blueBar = self.blueBar; | |
| 37667 | ||
| 37668 | var ref = self.params; | |
| 37669 | var barValue = ref.barValue; | |
| 37670 | var barValueEditable = ref.barValueEditable; | |
| 37671 | ||
| 37672 | var rgb = value.rgb; | |
| 37673 | ||
| 37674 | redBar.value = rgb[0]; | |
| 37675 | greenBar.value = rgb[1]; | |
| 37676 | blueBar.value = rgb[2]; | |
| 37677 | ||
| 37678 | redBar.layout(); | |
| 37679 | greenBar.layout(); | |
| 37680 | blueBar.layout(); | |
| 37681 | ||
| 37682 | redBar.$el.find('.range-bar').css('background-image', ("linear-gradient(to top, rgb(0, " + (rgb[1]) + ", " + (rgb[2]) + "), rgb(255, " + (rgb[1]) + ", " + (rgb[2]) + "))")); | |
| 37683 | greenBar.$el.find('.range-bar').css('background-image', ("linear-gradient(to top, rgb(" + (rgb[0]) + ", 0, " + (rgb[2]) + "), rgb(" + (rgb[0]) + ", 255, " + (rgb[2]) + "))")); | |
| 37684 | blueBar.$el.find('.range-bar').css('background-image', ("linear-gradient(to top, rgb(" + (rgb[0]) + ", " + (rgb[1]) + ", 0), rgb(" + (rgb[0]) + ", " + (rgb[1]) + ", 255))")); | |
| 37685 | ||
| 37686 | if (barValue && barValueEditable) { | |
| 37687 | self.$el.find('input.color-picker-value-bar-red').val(rgb[0]); | |
| 37688 | self.$el.find('input.color-picker-value-bar-green').val(rgb[1]); | |
| 37689 | self.$el.find('input.color-picker-value-bar-blue').val(rgb[2]); | |
| 37690 | } else if (barValue) { | |
| 37691 | self.$el.find('span.color-picker-value-bar-red').text(rgb[0]); | |
| 37692 | self.$el.find('span.color-picker-value-bar-green').text(rgb[1]); | |
| 37693 | self.$el.find('span.color-picker-value-bar-blue').text(rgb[2]); | |
| 37694 | } | |
| 37695 | }, | |
| 37696 | destroy: function destroy(self) { | |
| 37697 | if (self.redBar && self.redBar.destroy) { | |
| 37698 | self.redBar.destroy(); | |
| 37699 | } | |
| 37700 | if (self.greenBar && self.greenBar.destroy) { | |
| 37701 | self.greenBar.destroy(); | |
| 37702 | } | |
| 37703 | if (self.blueBar && self.blueBar.destroy) { | |
| 37704 | self.blueBar.destroy(); | |
| 37705 | } | |
| 37706 | ||
| 37707 | delete self.redBar; | |
| 37708 | delete self.greenBar; | |
| 37709 | delete self.blueBar; | |
| 37710 | ||
| 37711 | if (self.destroyRgbBarsEvents) { self.destroyRgbBarsEvents(); } | |
| 37712 | delete self.destroyRgbBarsEvents; | |
| 37713 | }, | |
| 37714 | }; | |
| 37715 | ||
| 37716 | var moduleRgbSliders = { | |
| 37717 | render: function render(self) { | |
| 37718 | var ref = self.params; | |
| 37719 | var sliderLabel = ref.sliderLabel; | |
| 37720 | var sliderValue = ref.sliderValue; | |
| 37721 | var sliderValueEditable = ref.sliderValueEditable; | |
| 37722 | var redLabelText = ref.redLabelText; | |
| 37723 | var greenLabelText = ref.greenLabelText; | |
| 37724 | var blueLabelText = ref.blueLabelText; | |
| 37725 | return ("\n <div class=\"color-picker-module color-picker-module-rgb-sliders\">\n <div class=\"color-picker-slider-wrap\">\n " + (sliderLabel ? ("\n <div class=\"color-picker-slider-label\">" + redLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-slider color-picker-slider-red\"></div>\n " + (sliderValue ? ("\n <div class=\"color-picker-slider-value\">\n " + (sliderValueEditable ? "\n <input type=\"number\" step=\"1\" min=\"0\" max=\"255\" class=\"color-picker-value-red\" data-color-index=\"0\">\n " : "\n <span class=\"color-picker-value-red\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n <div class=\"color-picker-slider-wrap\">\n " + (sliderLabel ? ("\n <div class=\"color-picker-slider-label\">" + greenLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-slider color-picker-slider-green\"></div>\n " + (sliderValue ? ("\n <div class=\"color-picker-slider-value\">\n " + (sliderValueEditable ? "\n <input type=\"number\" step=\"1\" min=\"0\" max=\"255\" class=\"color-picker-value-green\" data-color-index=\"1\">\n " : "\n <span class=\"color-picker-value-green\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n <div class=\"color-picker-slider-wrap\">\n " + (sliderLabel ? ("\n <div class=\"color-picker-slider-label\">" + blueLabelText + "</div>\n ") : '') + "\n <div class=\"range-slider color-picker-slider color-picker-slider-blue\"></div>\n " + (sliderValue ? ("\n <div class=\"color-picker-slider-value\">\n " + (sliderValueEditable ? "\n <input type=\"number\" step=\"1\" min=\"0\" max=\"255\" class=\"color-picker-value-blue\" data-color-index=\"2\">\n " : "\n <span class=\"color-picker-value-blue\"></span>\n ") + "\n </div>\n ") : '') + "\n </div>\n </div>\n "); | |
| 37726 | }, | |
| 37727 | init: function init(self) { | |
| 37728 | self.redRangeSlider = self.app.range.create({ | |
| 37729 | el: self.$el.find('.color-picker-slider-red'), | |
| 37730 | min: 0, | |
| 37731 | max: 255, | |
| 37732 | step: 1, | |
| 37733 | value: 0, | |
| 37734 | on: { | |
| 37735 | change: function change(range, value) { | |
| 37736 | self.setValue({ rgb: [value, self.value.rgb[1], self.value.rgb[2]] }); | |
| 37737 | }, | |
| 37738 | }, | |
| 37739 | }); | |
| 37740 | self.greenRangeSlider = self.app.range.create({ | |
| 37741 | el: self.$el.find('.color-picker-slider-green'), | |
| 37742 | min: 0, | |
| 37743 | max: 255, | |
| 37744 | step: 1, | |
| 37745 | value: 0, | |
| 37746 | on: { | |
| 37747 | change: function change(range, value) { | |
| 37748 | self.setValue({ rgb: [self.value.rgb[0], value, self.value.rgb[2]] }); | |
| 37749 | }, | |
| 37750 | }, | |
| 37751 | }); | |
| 37752 | self.blueRangeSlider = self.app.range.create({ | |
| 37753 | el: self.$el.find('.color-picker-slider-blue'), | |
| 37754 | min: 0, | |
| 37755 | max: 255, | |
| 37756 | step: 1, | |
| 37757 | value: 0, | |
| 37758 | on: { | |
| 37759 | change: function change(range, value) { | |
| 37760 | self.setValue({ rgb: [self.value.rgb[0], self.value.rgb[1], value] }); | |
| 37761 | }, | |
| 37762 | }, | |
| 37763 | }); | |
| 37764 | ||
| 37765 | function handleInputChange(e) { | |
| 37766 | var rgb = [].concat( self.value.rgb ); | |
| 37767 | var index = parseInt($(e.target).attr('data-color-index'), 10); | |
| 37768 | var value = parseInt(e.target.value, 10); | |
| 37769 | if (Number.isNaN(value)) { | |
| 37770 | e.target.value = rgb[index]; | |
| 37771 | return; | |
| 37772 | } | |
| 37773 | value = Math.max(0, Math.min(255, value)); | |
| 37774 | rgb[index] = value; | |
| 37775 | self.setValue({ rgb: rgb }); | |
| 37776 | } | |
| 37777 | ||
| 37778 | self.$el.on('change', '.color-picker-module-rgb-sliders input', handleInputChange); | |
| 37779 | ||
| 37780 | self.destroyRgbSlidersEvents = function destroyRgbSlidersEvents() { | |
| 37781 | self.$el.off('change', '.color-picker-module-rgb-sliders input', handleInputChange); | |
| 37782 | }; | |
| 37783 | }, | |
| 37784 | update: function update(self) { | |
| 37785 | var app = self.app; | |
| 37786 | var value = self.value; | |
| 37787 | var redRangeSlider = self.redRangeSlider; | |
| 37788 | var greenRangeSlider = self.greenRangeSlider; | |
| 37789 | var blueRangeSlider = self.blueRangeSlider; | |
| 37790 | ||
| 37791 | var ref = self.params; | |
| 37792 | var sliderValue = ref.sliderValue; | |
| 37793 | var sliderValueEditable = ref.sliderValueEditable; | |
| 37794 | ||
| 37795 | var rgb = value.rgb; | |
| 37796 | ||
| 37797 | redRangeSlider.value = rgb[0]; | |
| 37798 | greenRangeSlider.value = rgb[1]; | |
| 37799 | blueRangeSlider.value = rgb[2]; | |
| 37800 | ||
| 37801 | redRangeSlider.layout(); | |
| 37802 | greenRangeSlider.layout(); | |
| 37803 | blueRangeSlider.layout(); | |
| 37804 | ||
| 37805 | redRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', ("rgb(" + (rgb[0]) + ", " + (rgb[1]) + ", " + (rgb[2]) + ")")); | |
| 37806 | greenRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', ("rgb(" + (rgb[0]) + ", " + (rgb[1]) + ", " + (rgb[2]) + ")")); | |
| 37807 | blueRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', ("rgb(" + (rgb[0]) + ", " + (rgb[1]) + ", " + (rgb[2]) + ")")); | |
| 37808 | ||
| 37809 | var direction = app.rtl ? 'to left' : 'to right'; | |
| 37810 | ||
| 37811 | redRangeSlider.$el.find('.range-bar').css('background-image', ("linear-gradient(" + direction + ", rgb(0, " + (rgb[1]) + ", " + (rgb[2]) + "), rgb(255, " + (rgb[1]) + ", " + (rgb[2]) + "))")); | |
| 37812 | greenRangeSlider.$el.find('.range-bar').css('background-image', ("linear-gradient(" + direction + ", rgb(" + (rgb[0]) + ", 0, " + (rgb[2]) + "), rgb(" + (rgb[0]) + ", 255, " + (rgb[2]) + "))")); | |
| 37813 | blueRangeSlider.$el.find('.range-bar').css('background-image', ("linear-gradient(" + direction + ", rgb(" + (rgb[0]) + ", " + (rgb[1]) + ", 0), rgb(" + (rgb[0]) + ", " + (rgb[1]) + ", 255))")); | |
| 37814 | ||
| 37815 | if (sliderValue && sliderValueEditable) { | |
| 37816 | self.$el.find('input.color-picker-value-red').val(rgb[0]); | |
| 37817 | self.$el.find('input.color-picker-value-green').val(rgb[1]); | |
| 37818 | self.$el.find('input.color-picker-value-blue').val(rgb[2]); | |
| 37819 | } else if (sliderValue) { | |
| 37820 | self.$el.find('span.color-picker-value-red').text(rgb[0]); | |
| 37821 | self.$el.find('span.color-picker-value-green').text(rgb[1]); | |
| 37822 | self.$el.find('span.color-picker-value-blue').text(rgb[2]); | |
| 37823 | } | |
| 37824 | }, | |
| 37825 | destroy: function destroy(self) { | |
| 37826 | if (self.redRangeSlider && self.redRangeSlider.destroy) { | |
| 37827 | self.redRangeSlider.destroy(); | |
| 37828 | } | |
| 37829 | if (self.greenRangeSlider && self.greenRangeSlider.destroy) { | |
| 37830 | self.greenRangeSlider.destroy(); | |
| 37831 | } | |
| 37832 | if (self.blueRangeSlider && self.blueRangeSlider.destroy) { | |
| 37833 | self.blueRangeSlider.destroy(); | |
| 37834 | } | |
| 37835 | ||
| 37836 | delete self.redRangeSlider; | |
| 37837 | delete self.greenRangeSlider; | |
| 37838 | delete self.blueRangeSlider; | |
| 37839 | ||
| 37840 | if (self.destroyRgbSlidersEvents) { self.destroyRgbSlidersEvents(); } | |
| 37841 | delete self.destroyRgbSlidersEvents; | |
| 37842 | }, | |
| 37843 | }; | |
| 37844 | ||
| 37845 | var moduleSbSpectrum = { | |
| 37846 | render: function render() { | |
| 37847 | return "\n <div class=\"color-picker-module color-picker-module-sb-spectrum\">\n <div class=\"color-picker-sb-spectrum\" style=\"background-color: hsl(0, 100%, 50%)\">\n <div class=\"color-picker-sb-spectrum-handle\"></div>\n </div>\n </div>\n "; | |
| 37848 | }, | |
| 37849 | init: function init(self) { | |
| 37850 | var app = self.app; | |
| 37851 | ||
| 37852 | var isTouched; | |
| 37853 | var isMoved; | |
| 37854 | var touchStartX; | |
| 37855 | var touchStartY; | |
| 37856 | var touchCurrentX; | |
| 37857 | var touchCurrentY; | |
| 37858 | ||
| 37859 | var specterRect; | |
| 37860 | var specterIsTouched; | |
| 37861 | var specterHandleIsTouched; | |
| 37862 | ||
| 37863 | var $el = self.$el; | |
| 37864 | ||
| 37865 | function setSBFromSpecterCoords(x, y) { | |
| 37866 | var s = (x - specterRect.left) / specterRect.width; | |
| 37867 | var b = (y - specterRect.top) / specterRect.height; | |
| 37868 | s = Math.max(0, Math.min(1, s)); | |
| 37869 | b = 1 - Math.max(0, Math.min(1, b)); | |
| 37870 | ||
| 37871 | self.setValue({ hsb: [self.value.hue, s, b] }); | |
| 37872 | } | |
| 37873 | ||
| 37874 | function handleTouchStart(e) { | |
| 37875 | if (isMoved || isTouched) { return; } | |
| 37876 | touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 37877 | touchCurrentX = touchStartX; | |
| 37878 | touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 37879 | touchCurrentY = touchStartY; | |
| 37880 | var $targetEl = $(e.target); | |
| 37881 | specterHandleIsTouched = $targetEl.closest('.color-picker-sb-spectrum-handle').length > 0; | |
| 37882 | if (!specterHandleIsTouched) { | |
| 37883 | specterIsTouched = $targetEl.closest('.color-picker-sb-spectrum').length > 0; | |
| 37884 | } | |
| 37885 | if (specterIsTouched) { | |
| 37886 | specterRect = $el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect(); | |
| 37887 | setSBFromSpecterCoords(touchStartX, touchStartY); | |
| 37888 | } | |
| 37889 | if (specterHandleIsTouched || specterIsTouched) { | |
| 37890 | $el.find('.color-picker-sb-spectrum-handle').addClass('color-picker-sb-spectrum-handle-pressed'); | |
| 37891 | } | |
| 37892 | } | |
| 37893 | function handleTouchMove(e) { | |
| 37894 | if (!(specterIsTouched || specterHandleIsTouched)) { return; } | |
| 37895 | touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 37896 | touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 37897 | e.preventDefault(); | |
| 37898 | if (!isMoved) { | |
| 37899 | // First move | |
| 37900 | isMoved = true; | |
| 37901 | if (specterHandleIsTouched) { | |
| 37902 | specterRect = $el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect(); | |
| 37903 | } | |
| 37904 | } | |
| 37905 | if (specterIsTouched || specterHandleIsTouched) { | |
| 37906 | setSBFromSpecterCoords(touchCurrentX, touchCurrentY); | |
| 37907 | } | |
| 37908 | } | |
| 37909 | function handleTouchEnd() { | |
| 37910 | isMoved = false; | |
| 37911 | if (specterIsTouched || specterHandleIsTouched) { | |
| 37912 | $el.find('.color-picker-sb-spectrum-handle').removeClass('color-picker-sb-spectrum-handle-pressed'); | |
| 37913 | } | |
| 37914 | specterIsTouched = false; | |
| 37915 | specterHandleIsTouched = false; | |
| 37916 | } | |
| 37917 | ||
| 37918 | function handleResize() { | |
| 37919 | self.modules['sb-spectrum'].update(self); | |
| 37920 | } | |
| 37921 | ||
| 37922 | var passiveListener = app.touchEvents.start === 'touchstart' && app.support.passiveListener ? { passive: true, capture: false } : false; | |
| 37923 | ||
| 37924 | self.$el.on(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 37925 | app.on('touchmove:active', handleTouchMove); | |
| 37926 | app.on('touchend:passive', handleTouchEnd); | |
| 37927 | app.on('resize', handleResize); | |
| 37928 | ||
| 37929 | self.destroySpectrumEvents = function destroySpectrumEvents() { | |
| 37930 | self.$el.off(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 37931 | app.off('touchmove:active', handleTouchMove); | |
| 37932 | app.off('touchend:passive', handleTouchEnd); | |
| 37933 | app.off('resize', handleResize); | |
| 37934 | }; | |
| 37935 | }, | |
| 37936 | update: function update(self) { | |
| 37937 | var value = self.value; | |
| 37938 | ||
| 37939 | var hsl = value.hsl; | |
| 37940 | var hsb = value.hsb; | |
| 37941 | ||
| 37942 | var specterWidth = self.$el.find('.color-picker-sb-spectrum')[0].offsetWidth; | |
| 37943 | var specterHeight = self.$el.find('.color-picker-sb-spectrum')[0].offsetHeight; | |
| 37944 | ||
| 37945 | self.$el.find('.color-picker-sb-spectrum') | |
| 37946 | .css('background-color', ("hsl(" + (hsl[0]) + ", 100%, 50%)")); | |
| 37947 | ||
| 37948 | self.$el.find('.color-picker-sb-spectrum-handle') | |
| 37949 | .css('background-color', ("hsl(" + (hsl[0]) + ", " + (hsl[1] * 100) + "%, " + (hsl[2] * 100) + "%)")) | |
| 37950 | .transform(("translate(" + (specterWidth * hsb[1]) + "px, " + (specterHeight * (1 - hsb[2])) + "px)")); | |
| 37951 | }, | |
| 37952 | destroy: function destroy(self) { | |
| 37953 | if (self.destroySpectrumEvents) { self.destroySpectrumEvents(); } | |
| 37954 | delete self.destroySpectrumEvents; | |
| 37955 | }, | |
| 37956 | }; | |
| 37957 | ||
| 37958 | var moduleHsSpectrum = { | |
| 37959 | render: function render() { | |
| 37960 | return "\n <div class=\"color-picker-module color-picker-module-hs-spectrum\">\n <div class=\"color-picker-hs-spectrum\">\n <div class=\"color-picker-hs-spectrum-handle\"></div>\n </div>\n </div>\n "; | |
| 37961 | }, | |
| 37962 | init: function init(self) { | |
| 37963 | var app = self.app; | |
| 37964 | ||
| 37965 | var isTouched; | |
| 37966 | var isMoved; | |
| 37967 | var touchStartX; | |
| 37968 | var touchStartY; | |
| 37969 | var touchCurrentX; | |
| 37970 | var touchCurrentY; | |
| 37971 | ||
| 37972 | var specterRect; | |
| 37973 | var specterIsTouched; | |
| 37974 | var specterHandleIsTouched; | |
| 37975 | ||
| 37976 | var $el = self.$el; | |
| 37977 | ||
| 37978 | function setHSFromSpecterCoords(x, y) { | |
| 37979 | var h = (x - specterRect.left) / specterRect.width * 360; | |
| 37980 | var s = (y - specterRect.top) / specterRect.height; | |
| 37981 | h = Math.max(0, Math.min(360, h)); | |
| 37982 | s = 1 - Math.max(0, Math.min(1, s)); | |
| 37983 | ||
| 37984 | self.setValue({ hsb: [h, s, self.value.hsb[2]] }); | |
| 37985 | } | |
| 37986 | ||
| 37987 | function handleTouchStart(e) { | |
| 37988 | if (isMoved || isTouched) { return; } | |
| 37989 | touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 37990 | touchCurrentX = touchStartX; | |
| 37991 | touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 37992 | touchCurrentY = touchStartY; | |
| 37993 | var $targetEl = $(e.target); | |
| 37994 | specterHandleIsTouched = $targetEl.closest('.color-picker-hs-spectrum-handle').length > 0; | |
| 37995 | if (!specterHandleIsTouched) { | |
| 37996 | specterIsTouched = $targetEl.closest('.color-picker-hs-spectrum').length > 0; | |
| 37997 | } | |
| 37998 | if (specterIsTouched) { | |
| 37999 | specterRect = $el.find('.color-picker-hs-spectrum')[0].getBoundingClientRect(); | |
| 38000 | setHSFromSpecterCoords(touchStartX, touchStartY); | |
| 38001 | } | |
| 38002 | if (specterHandleIsTouched || specterIsTouched) { | |
| 38003 | $el.find('.color-picker-hs-spectrum-handle').addClass('color-picker-hs-spectrum-handle-pressed'); | |
| 38004 | } | |
| 38005 | } | |
| 38006 | function handleTouchMove(e) { | |
| 38007 | if (!(specterIsTouched || specterHandleIsTouched)) { return; } | |
| 38008 | touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 38009 | touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 38010 | e.preventDefault(); | |
| 38011 | if (!isMoved) { | |
| 38012 | // First move | |
| 38013 | isMoved = true; | |
| 38014 | if (specterHandleIsTouched) { | |
| 38015 | specterRect = $el.find('.color-picker-hs-spectrum')[0].getBoundingClientRect(); | |
| 38016 | } | |
| 38017 | } | |
| 38018 | if (specterIsTouched || specterHandleIsTouched) { | |
| 38019 | setHSFromSpecterCoords(touchCurrentX, touchCurrentY); | |
| 38020 | } | |
| 38021 | } | |
| 38022 | function handleTouchEnd() { | |
| 38023 | isMoved = false; | |
| 38024 | if (specterIsTouched || specterHandleIsTouched) { | |
| 38025 | $el.find('.color-picker-hs-spectrum-handle').removeClass('color-picker-hs-spectrum-handle-pressed'); | |
| 38026 | } | |
| 38027 | specterIsTouched = false; | |
| 38028 | specterHandleIsTouched = false; | |
| 38029 | } | |
| 38030 | ||
| 38031 | function handleResize() { | |
| 38032 | self.modules['hs-spectrum'].update(self); | |
| 38033 | } | |
| 38034 | ||
| 38035 | var passiveListener = app.touchEvents.start === 'touchstart' && app.support.passiveListener ? { passive: true, capture: false } : false; | |
| 38036 | ||
| 38037 | self.$el.on(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 38038 | app.on('touchmove:active', handleTouchMove); | |
| 38039 | app.on('touchend:passive', handleTouchEnd); | |
| 38040 | app.on('resize', handleResize); | |
| 38041 | ||
| 38042 | self.destroySpectrumEvents = function destroySpectrumEvents() { | |
| 38043 | self.$el.off(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 38044 | app.off('touchmove:active', handleTouchMove); | |
| 38045 | app.off('touchend:passive', handleTouchEnd); | |
| 38046 | app.off('resize', handleResize); | |
| 38047 | }; | |
| 38048 | }, | |
| 38049 | update: function update(self) { | |
| 38050 | var value = self.value; | |
| 38051 | ||
| 38052 | var hsb = value.hsb; | |
| 38053 | ||
| 38054 | var specterWidth = self.$el.find('.color-picker-hs-spectrum')[0].offsetWidth; | |
| 38055 | var specterHeight = self.$el.find('.color-picker-hs-spectrum')[0].offsetHeight; | |
| 38056 | ||
| 38057 | var hslBright = Utils.colorHsbToHsl(hsb[0], hsb[1], 1); | |
| 38058 | ||
| 38059 | self.$el.find('.color-picker-hs-spectrum-handle') | |
| 38060 | .css('background-color', ("hsl(" + (hslBright[0]) + ", " + (hslBright[1] * 100) + "%, " + (hslBright[2] * 100) + "%)")) | |
| 38061 | .transform(("translate(" + (specterWidth * (hsb[0] / 360)) + "px, " + (specterHeight * (1 - hsb[1])) + "px)")); | |
| 38062 | }, | |
| 38063 | destroy: function destroy(self) { | |
| 38064 | if (self.destroySpectrumEvents) { self.destroySpectrumEvents(); } | |
| 38065 | delete self.destroySpectrumEvents; | |
| 38066 | }, | |
| 38067 | }; | |
| 38068 | ||
| 38069 | function svgWheelCircles() { | |
| 38070 | var total = 256; | |
| 38071 | var circles = ''; | |
| 38072 | for (var i = total; i > 0; i -= 1) { | |
| 38073 | var angle = i * Math.PI / (total / 2); | |
| 38074 | var hue = 360 / total * i; | |
| 38075 | circles += "<circle cx=\"" + (150 - Math.sin(angle) * 125) + "\" cy=\"" + (150 - Math.cos(angle) * 125) + "\" r=\"25\" fill=\"hsl(" + hue + ", 100%, 50%)\"></circle>"; | |
| 38076 | } | |
| 38077 | return circles; | |
| 38078 | } | |
| 38079 | var moduleWheel = { | |
| 38080 | render: function render() { | |
| 38081 | return ("\n <div class=\"color-picker-module color-picker-module-wheel\">\n <div class=\"color-picker-wheel\">\n <svg viewBox=\"0 0 300 300\" width=\"300\" height=\"300\">" + (svgWheelCircles()) + "</svg>\n <div class=\"color-picker-wheel-handle\"></div>\n <div class=\"color-picker-sb-spectrum\" style=\"background-color: hsl(0, 100%, 50%)\">\n <div class=\"color-picker-sb-spectrum-handle\"></div>\n </div>\n </div>\n </div>\n "); | |
| 38082 | }, | |
| 38083 | init: function init(self) { | |
| 38084 | var app = self.app; | |
| 38085 | ||
| 38086 | var isTouched; | |
| 38087 | var isMoved; | |
| 38088 | var touchStartX; | |
| 38089 | var touchStartY; | |
| 38090 | var touchCurrentX; | |
| 38091 | var touchCurrentY; | |
| 38092 | ||
| 38093 | var wheelRect; | |
| 38094 | var wheelIsTouched; | |
| 38095 | var wheelHandleIsTouched; | |
| 38096 | var specterRect; | |
| 38097 | var specterIsTouched; | |
| 38098 | var specterHandleIsTouched; | |
| 38099 | ||
| 38100 | var $el = self.$el; | |
| 38101 | ||
| 38102 | function setHueFromWheelCoords(x, y) { | |
| 38103 | var wheelCenterX = wheelRect.left + wheelRect.width / 2; | |
| 38104 | var wheelCenterY = wheelRect.top + wheelRect.height / 2; | |
| 38105 | var angleRad = Math.atan2(y - wheelCenterY, x - wheelCenterX); | |
| 38106 | var angleDeg = angleRad * 180 / Math.PI + 90; | |
| 38107 | if (angleDeg < 0) { angleDeg += 360; } | |
| 38108 | angleDeg = 360 - angleDeg; | |
| 38109 | self.setValue({ hue: angleDeg }); | |
| 38110 | } | |
| 38111 | function setSBFromSpecterCoords(x, y) { | |
| 38112 | var s = (x - specterRect.left) / specterRect.width; | |
| 38113 | var b = (y - specterRect.top) / specterRect.height; | |
| 38114 | s = Math.max(0, Math.min(1, s)); | |
| 38115 | b = 1 - Math.max(0, Math.min(1, b)); | |
| 38116 | ||
| 38117 | self.setValue({ hsb: [self.value.hue, s, b] }); | |
| 38118 | } | |
| 38119 | ||
| 38120 | function handleTouchStart(e) { | |
| 38121 | if (isMoved || isTouched) { return; } | |
| 38122 | touchStartX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| 38123 | touchCurrentX = touchStartX; | |
| 38124 | touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| 38125 | touchCurrentY = touchStartY; | |
| 38126 | var $targetEl = $(e.target); | |
| 38127 | wheelHandleIsTouched = $targetEl.closest('.color-picker-wheel-handle').length > 0; | |
| 38128 | wheelIsTouched = $targetEl.closest('circle').length > 0; | |
| 38129 | specterHandleIsTouched = $targetEl.closest('.color-picker-sb-spectrum-handle').length > 0; | |
| 38130 | if (!specterHandleIsTouched) { | |
| 38131 | specterIsTouched = $targetEl.closest('.color-picker-sb-spectrum').length > 0; | |
| 38132 | } | |
| 38133 | if (wheelIsTouched) { | |
| 38134 | wheelRect = $el.find('.color-picker-wheel')[0].getBoundingClientRect(); | |
| 38135 | setHueFromWheelCoords(touchStartX, touchStartY); | |
| 38136 | } | |
| 38137 | if (specterIsTouched) { | |
| 38138 | specterRect = $el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect(); | |
| 38139 | setSBFromSpecterCoords(touchStartX, touchStartY); | |
| 38140 | } | |
| 38141 | if (specterHandleIsTouched || specterIsTouched) { | |
| 38142 | $el.find('.color-picker-sb-spectrum-handle').addClass('color-picker-sb-spectrum-handle-pressed'); | |
| 38143 | } | |
| 38144 | } | |
| 38145 | function handleTouchMove(e) { | |
| 38146 | if (!(wheelIsTouched || wheelHandleIsTouched) && !(specterIsTouched || specterHandleIsTouched)) { return; } | |
| 38147 | touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| 38148 | touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| 38149 | e.preventDefault(); | |
| 38150 | if (!isMoved) { | |
| 38151 | // First move | |
| 38152 | isMoved = true; | |
| 38153 | if (wheelHandleIsTouched) { | |
| 38154 | wheelRect = $el.find('.color-picker-wheel')[0].getBoundingClientRect(); | |
| 38155 | } | |
| 38156 | if (specterHandleIsTouched) { | |
| 38157 | specterRect = $el.find('.color-picker-sb-spectrum')[0].getBoundingClientRect(); | |
| 38158 | } | |
| 38159 | } | |
| 38160 | if (wheelIsTouched || wheelHandleIsTouched) { | |
| 38161 | setHueFromWheelCoords(touchCurrentX, touchCurrentY); | |
| 38162 | } | |
| 38163 | if (specterIsTouched || specterHandleIsTouched) { | |
| 38164 | setSBFromSpecterCoords(touchCurrentX, touchCurrentY); | |
| 38165 | } | |
| 38166 | } | |
| 38167 | function handleTouchEnd() { | |
| 38168 | isMoved = false; | |
| 38169 | if (specterIsTouched || specterHandleIsTouched) { | |
| 38170 | $el.find('.color-picker-sb-spectrum-handle').removeClass('color-picker-sb-spectrum-handle-pressed'); | |
| 38171 | } | |
| 38172 | wheelIsTouched = false; | |
| 38173 | wheelHandleIsTouched = false; | |
| 38174 | specterIsTouched = false; | |
| 38175 | specterHandleIsTouched = false; | |
| 38176 | } | |
| 38177 | ||
| 38178 | function handleResize() { | |
| 38179 | self.modules.wheel.update(self); | |
| 38180 | } | |
| 38181 | ||
| 38182 | var passiveListener = app.touchEvents.start === 'touchstart' && app.support.passiveListener ? { passive: true, capture: false } : false; | |
| 38183 | ||
| 38184 | self.$el.on(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 38185 | app.on('touchmove:active', handleTouchMove); | |
| 38186 | app.on('touchend:passive', handleTouchEnd); | |
| 38187 | app.on('resize', handleResize); | |
| 38188 | ||
| 38189 | self.destroyWheelEvents = function destroyWheelEvents() { | |
| 38190 | self.$el.off(app.touchEvents.start, handleTouchStart, passiveListener); | |
| 38191 | app.off('touchmove:active', handleTouchMove); | |
| 38192 | app.off('touchend:passive', handleTouchEnd); | |
| 38193 | app.off('resize', handleResize); | |
| 38194 | }; | |
| 38195 | }, | |
| 38196 | update: function update(self) { | |
| 38197 | var value = self.value; | |
| 38198 | ||
| 38199 | var hsl = value.hsl; | |
| 38200 | var hsb = value.hsb; | |
| 38201 | ||
| 38202 | var specterWidth = self.$el.find('.color-picker-sb-spectrum')[0].offsetWidth; | |
| 38203 | var specterHeight = self.$el.find('.color-picker-sb-spectrum')[0].offsetHeight; | |
| 38204 | var wheelSize = self.$el.find('.color-picker-wheel')[0].offsetWidth; | |
| 38205 | var wheelHalfSize = wheelSize / 2; | |
| 38206 | var angleRad = value.hue * Math.PI / 180; | |
| 38207 | var handleSize = wheelSize / 6; | |
| 38208 | var handleHalfSize = handleSize / 2; | |
| 38209 | var tX = wheelHalfSize - Math.sin(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize; | |
| 38210 | var tY = wheelHalfSize - Math.cos(angleRad) * (wheelHalfSize - handleHalfSize) - handleHalfSize; | |
| 38211 | self.$el.find('.color-picker-wheel-handle') | |
| 38212 | .css('background-color', ("hsl(" + (hsl[0]) + ", 100%, 50%)")) | |
| 38213 | .transform(("translate(" + tX + "px, " + tY + "px)")); | |
| 38214 | ||
| 38215 | self.$el.find('.color-picker-sb-spectrum') | |
| 38216 | .css('background-color', ("hsl(" + (hsl[0]) + ", 100%, 50%)")); | |
| 38217 | ||
| 38218 | self.$el.find('.color-picker-sb-spectrum-handle') | |
| 38219 | .css('background-color', ("hsl(" + (hsl[0]) + ", " + (hsl[1] * 100) + "%, " + (hsl[2] * 100) + "%)")) | |
| 38220 | .transform(("translate(" + (specterWidth * hsb[1]) + "px, " + (specterHeight * (1 - hsb[2])) + "px)")); | |
| 38221 | }, | |
| 38222 | destroy: function destroy(self) { | |
| 38223 | if (self.destroyWheelEvents) { self.destroyWheelEvents(); } | |
| 38224 | delete self.destroyWheelEvents; | |
| 38225 | }, | |
| 38226 | }; | |
| 38227 | ||
| 38228 | var ColorPicker = /*@__PURE__*/(function (Framework7Class) { | |
| 38229 | function ColorPicker(app, params) { | |
| 38230 | if ( params === void 0 ) params = {}; | |
| 38231 | ||
| 38232 | Framework7Class.call(this, params, [app]); | |
| 38233 | var self = this; | |
| 38234 | ||
| 38235 | self.params = Utils.extend({}, app.params.colorPicker, params); | |
| 38236 | ||
| 38237 | var $containerEl; | |
| 38238 | if (self.params.containerEl) { | |
| 38239 | $containerEl = $(self.params.containerEl); | |
| 38240 | if ($containerEl.length === 0) { return self; } | |
| 38241 | } | |
| 38242 | ||
| 38243 | var $inputEl; | |
| 38244 | if (self.params.inputEl) { | |
| 38245 | $inputEl = $(self.params.inputEl); | |
| 38246 | } | |
| 38247 | ||
| 38248 | var $targetEl; | |
| 38249 | if (self.params.targetEl) { | |
| 38250 | $targetEl = $(self.params.targetEl); | |
| 38251 | } | |
| 38252 | ||
| 38253 | var view; | |
| 38254 | if ($inputEl) { | |
| 38255 | view = $inputEl.parents('.view').length && $inputEl.parents('.view')[0].f7View; | |
| 38256 | } | |
| 38257 | if (!view && $targetEl) { | |
| 38258 | view = $targetEl.parents('.view').length && $targetEl.parents('.view')[0].f7View; | |
| 38259 | } | |
| 38260 | if (!view) { view = app.views.main; } | |
| 38261 | ||
| 38262 | Utils.extend(self, { | |
| 38263 | app: app, | |
| 38264 | $containerEl: $containerEl, | |
| 38265 | containerEl: $containerEl && $containerEl[0], | |
| 38266 | inline: $containerEl && $containerEl.length > 0, | |
| 38267 | $inputEl: $inputEl, | |
| 38268 | inputEl: $inputEl && $inputEl[0], | |
| 38269 | $targetEl: $targetEl, | |
| 38270 | targetEl: $targetEl && $targetEl[0], | |
| 38271 | initialized: false, | |
| 38272 | opened: false, | |
| 38273 | url: self.params.url, | |
| 38274 | view: view, | |
| 38275 | modules: { | |
| 38276 | 'alpha-slider': moduleAlphaSlider, | |
| 38277 | 'current-color': moduleCurrentColor, | |
| 38278 | 'hex': moduleHex, // eslint-disable-line | |
| 38279 | 'hsb-sliders': moduleHsbSliders, | |
| 38280 | 'hue-slider': moduleHueSlider, | |
| 38281 | 'brightness-slider': moduleBrightnessSlider, | |
| 38282 | 'palette': modulePalette, // eslint-disable-line | |
| 38283 | 'initial-current-colors': moduleInitialCurrentColors, | |
| 38284 | 'rgb-bars': moduleRgbBars, | |
| 38285 | 'rgb-sliders': moduleRgbSliders, | |
| 38286 | 'sb-spectrum': moduleSbSpectrum, | |
| 38287 | 'hs-spectrum': moduleHsSpectrum, | |
| 38288 | 'wheel': moduleWheel, // eslint-disable-line | |
| 38289 | }, | |
| 38290 | }); | |
| 38291 | ||
| 38292 | function onInputClick() { | |
| 38293 | self.open(); | |
| 38294 | } | |
| 38295 | function onInputFocus(e) { | |
| 38296 | e.preventDefault(); | |
| 38297 | } | |
| 38298 | function onTargetClick() { | |
| 38299 | self.open(); | |
| 38300 | } | |
| 38301 | function onHtmlClick(e) { | |
| 38302 | if (self.params.openIn === 'page') { return; } | |
| 38303 | var $clickTargetEl = $(e.target); | |
| 38304 | if (!self.opened || self.closing) { return; } | |
| 38305 | if ($clickTargetEl.closest('[class*="backdrop"]').length) { return; } | |
| 38306 | if ($clickTargetEl.closest('.color-picker-popup, .color-picker-popover').length) { return; } | |
| 38307 | if ($inputEl && $inputEl.length > 0) { | |
| 38308 | if ($clickTargetEl[0] !== $inputEl[0] && $clickTargetEl.closest('.sheet-modal').length === 0) { | |
| 38309 | self.close(); | |
| 38310 | } | |
| 38311 | } else if ($(e.target).closest('.sheet-modal').length === 0) { | |
| 38312 | self.close(); | |
| 38313 | } | |
| 38314 | } | |
| 38315 | ||
| 38316 | // Events | |
| 38317 | Utils.extend(self, { | |
| 38318 | attachInputEvents: function attachInputEvents() { | |
| 38319 | self.$inputEl.on('click', onInputClick); | |
| 38320 | if (self.params.inputReadOnly) { | |
| 38321 | self.$inputEl.on('focus mousedown', onInputFocus); | |
| 38322 | } | |
| 38323 | }, | |
| 38324 | detachInputEvents: function detachInputEvents() { | |
| 38325 | self.$inputEl.off('click', onInputClick); | |
| 38326 | if (self.params.inputReadOnly) { | |
| 38327 | self.$inputEl.off('focus mousedown', onInputFocus); | |
| 38328 | } | |
| 38329 | }, | |
| 38330 | attachTargetEvents: function attachTargetEvents() { | |
| 38331 | self.$targetEl.on('click', onTargetClick); | |
| 38332 | }, | |
| 38333 | detachTargetEvents: function detachTargetEvents() { | |
| 38334 | self.$targetEl.off('click', onTargetClick); | |
| 38335 | }, | |
| 38336 | attachHtmlEvents: function attachHtmlEvents() { | |
| 38337 | app.on('click', onHtmlClick); | |
| 38338 | }, | |
| 38339 | detachHtmlEvents: function detachHtmlEvents() { | |
| 38340 | app.off('click', onHtmlClick); | |
| 38341 | }, | |
| 38342 | }); | |
| 38343 | ||
| 38344 | self.init(); | |
| 38345 | ||
| 38346 | return self; | |
| 38347 | } | |
| 38348 | ||
| 38349 | if ( Framework7Class ) ColorPicker.__proto__ = Framework7Class; | |
| 38350 | ColorPicker.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 38351 | ColorPicker.prototype.constructor = ColorPicker; | |
| 38352 | ||
| 38353 | ColorPicker.prototype.attachEvents = function attachEvents () { | |
| 38354 | var self = this; | |
| 38355 | self.centerModules = self.centerModules.bind(self); | |
| 38356 | if (self.params.centerModules) { | |
| 38357 | self.app.on('resize', self.centerModules); | |
| 38358 | } | |
| 38359 | }; | |
| 38360 | ||
| 38361 | ColorPicker.prototype.detachEvents = function detachEvents () { | |
| 38362 | var self = this; | |
| 38363 | if (self.params.centerModules) { | |
| 38364 | self.app.off('resize', self.centerModules); | |
| 38365 | } | |
| 38366 | }; | |
| 38367 | ||
| 38368 | ColorPicker.prototype.centerModules = function centerModules () { | |
| 38369 | var self = this; | |
| 38370 | if (!self.opened || !self.$el || self.inline) { return; } | |
| 38371 | var $pageContentEl = self.$el.find('.page-content'); | |
| 38372 | if (!$pageContentEl.length) { return; } | |
| 38373 | var ref = $pageContentEl[0]; | |
| 38374 | var scrollHeight = ref.scrollHeight; | |
| 38375 | var offsetHeight = ref.offsetHeight; | |
| 38376 | if (scrollHeight <= offsetHeight) { | |
| 38377 | $pageContentEl.addClass('justify-content-center'); | |
| 38378 | } else { | |
| 38379 | $pageContentEl.removeClass('justify-content-center'); | |
| 38380 | } | |
| 38381 | }; | |
| 38382 | ||
| 38383 | ColorPicker.prototype.initInput = function initInput () { | |
| 38384 | var self = this; | |
| 38385 | if (!self.$inputEl) { return; } | |
| 38386 | if (self.params.inputReadOnly) { self.$inputEl.prop('readOnly', true); } | |
| 38387 | }; | |
| 38388 | ||
| 38389 | ColorPicker.prototype.getModalType = function getModalType () { | |
| 38390 | var self = this; | |
| 38391 | var app = self.app; | |
| 38392 | var modal = self.modal; | |
| 38393 | var params = self.params; | |
| 38394 | var openIn = params.openIn; | |
| 38395 | var openInPhone = params.openInPhone; | |
| 38396 | if (modal && modal.type) { return modal.type; } | |
| 38397 | if (openIn !== 'auto') { return openIn; } | |
| 38398 | if (self.inline) { return null; } | |
| 38399 | if (app.device.ios) { | |
| 38400 | return app.device.ipad ? 'popover' : openInPhone; | |
| 38401 | } | |
| 38402 | if (app.width >= 768 || (app.device.desktop && app.theme === 'aurora')) { | |
| 38403 | return 'popover'; | |
| 38404 | } | |
| 38405 | ||
| 38406 | return openInPhone; | |
| 38407 | }; | |
| 38408 | ||
| 38409 | ColorPicker.prototype.formatValue = function formatValue () { | |
| 38410 | var self = this; | |
| 38411 | var value = self.value; | |
| 38412 | if (self.params.formatValue) { | |
| 38413 | return self.params.formatValue.call(self, value); | |
| 38414 | } | |
| 38415 | return value.hex; | |
| 38416 | }; | |
| 38417 | ||
| 38418 | // eslint-disable-next-line | |
| 38419 | ColorPicker.prototype.normalizeHsValues = function normalizeHsValues (arr) { | |
| 38420 | return [ | |
| 38421 | Math.floor(arr[0] * 10) / 10, | |
| 38422 | Math.floor(arr[1] * 1000) / 1000, | |
| 38423 | Math.floor(arr[2] * 1000) / 1000 ]; | |
| 38424 | }; | |
| 38425 | ||
| 38426 | ColorPicker.prototype.setValue = function setValue (value, updateModules) { | |
| 38427 | if ( value === void 0 ) value = {}; | |
| 38428 | if ( updateModules === void 0 ) updateModules = true; | |
| 38429 | ||
| 38430 | var self = this; | |
| 38431 | if (typeof value === 'undefined') { return; } | |
| 38432 | ||
| 38433 | var ref = (self.value || {}); | |
| 38434 | var hex = ref.hex; | |
| 38435 | var rgb = ref.rgb; | |
| 38436 | var hsl = ref.hsl; | |
| 38437 | var hsb = ref.hsb; | |
| 38438 | var alpha = ref.alpha; if ( alpha === void 0 ) alpha = 1; | |
| 38439 | var hue = ref.hue; | |
| 38440 | var rgba = ref.rgba; | |
| 38441 | var hsla = ref.hsla; | |
| 38442 | ||
| 38443 | var needChangeEvent = self.value || (!self.value && !self.params.value); | |
| 38444 | var valueChanged; | |
| 38445 | Object.keys(value).forEach(function (k) { | |
| 38446 | if (!self.value || typeof self.value[k] === 'undefined') { | |
| 38447 | valueChanged = true; | |
| 38448 | return; | |
| 38449 | } | |
| 38450 | var v = value[k]; | |
| 38451 | if (Array.isArray(v)) { | |
| 38452 | v.forEach(function (subV, subIndex) { | |
| 38453 | if (subV !== self.value[k][subIndex]) { | |
| 38454 | valueChanged = true; | |
| 38455 | } | |
| 38456 | }); | |
| 38457 | } else if (v !== self.value[k]) { | |
| 38458 | valueChanged = true; | |
| 38459 | } | |
| 38460 | }); | |
| 38461 | if (!valueChanged) { return; } | |
| 38462 | ||
| 38463 | if (value.rgb || value.rgba) { | |
| 38464 | var ref$1 = (value.rgb || value.rgba); | |
| 38465 | var r = ref$1[0]; | |
| 38466 | var g = ref$1[1]; | |
| 38467 | var b = ref$1[2]; | |
| 38468 | var a = ref$1[3]; if ( a === void 0 ) a = alpha; | |
| 38469 | rgb = [r, g, b]; | |
| 38470 | hex = Utils.colorRgbToHex.apply(Utils, rgb); | |
| 38471 | hsl = Utils.colorRgbToHsl.apply(Utils, rgb); | |
| 38472 | hsb = Utils.colorHslToHsb.apply(Utils, hsl); | |
| 38473 | hsl = self.normalizeHsValues(hsl); | |
| 38474 | hsb = self.normalizeHsValues(hsb); | |
| 38475 | hue = hsb[0]; | |
| 38476 | alpha = a; | |
| 38477 | rgba = [rgb[0], rgb[1], rgb[2], a]; | |
| 38478 | hsla = [hsl[0], hsl[1], hsl[2], a]; | |
| 38479 | } | |
| 38480 | ||
| 38481 | if (value.hsl || value.hsla) { | |
| 38482 | var ref$2 = (value.hsl || value.hsla); | |
| 38483 | var h = ref$2[0]; | |
| 38484 | var s = ref$2[1]; | |
| 38485 | var l = ref$2[2]; | |
| 38486 | var a$1 = ref$2[3]; if ( a$1 === void 0 ) a$1 = alpha; | |
| 38487 | hsl = [h, s, l]; | |
| 38488 | rgb = Utils.colorHslToRgb.apply(Utils, hsl); | |
| 38489 | hex = Utils.colorRgbToHex.apply(Utils, rgb); | |
| 38490 | hsb = Utils.colorHslToHsb.apply(Utils, hsl); | |
| 38491 | hsl = self.normalizeHsValues(hsl); | |
| 38492 | hsb = self.normalizeHsValues(hsb); | |
| 38493 | hue = hsb[0]; | |
| 38494 | alpha = a$1; | |
| 38495 | rgba = [rgb[0], rgb[1], rgb[2], a$1]; | |
| 38496 | hsla = [hsl[0], hsl[1], hsl[2], a$1]; | |
| 38497 | } | |
| 38498 | ||
| 38499 | if (value.hsb) { | |
| 38500 | var ref$3 = value.hsb; | |
| 38501 | var h$1 = ref$3[0]; | |
| 38502 | var s$1 = ref$3[1]; | |
| 38503 | var b$1 = ref$3[2]; | |
| 38504 | var a$2 = ref$3[3]; if ( a$2 === void 0 ) a$2 = alpha; | |
| 38505 | hsb = [h$1, s$1, b$1]; | |
| 38506 | hsl = Utils.colorHsbToHsl.apply(Utils, hsb); | |
| 38507 | rgb = Utils.colorHslToRgb.apply(Utils, hsl); | |
| 38508 | hex = Utils.colorRgbToHex.apply(Utils, rgb); | |
| 38509 | hsl = self.normalizeHsValues(hsl); | |
| 38510 | hsb = self.normalizeHsValues(hsb); | |
| 38511 | hue = hsb[0]; | |
| 38512 | alpha = a$2; | |
| 38513 | rgba = [rgb[0], rgb[1], rgb[2], a$2]; | |
| 38514 | hsla = [hsl[0], hsl[1], hsl[2], a$2]; | |
| 38515 | } | |
| 38516 | ||
| 38517 | if (value.hex) { | |
| 38518 | rgb = Utils.colorHexToRgb(value.hex); | |
| 38519 | hex = Utils.colorRgbToHex.apply(Utils, rgb); | |
| 38520 | hsl = Utils.colorRgbToHsl.apply(Utils, rgb); | |
| 38521 | hsb = Utils.colorHslToHsb.apply(Utils, hsl); | |
| 38522 | hsl = self.normalizeHsValues(hsl); | |
| 38523 | hsb = self.normalizeHsValues(hsb); | |
| 38524 | hue = hsb[0]; | |
| 38525 | rgba = [rgb[0], rgb[1], rgb[2], alpha]; | |
| 38526 | hsla = [hsl[0], hsl[1], hsl[2], alpha]; | |
| 38527 | } | |
| 38528 | ||
| 38529 | if (typeof value.alpha !== 'undefined') { | |
| 38530 | alpha = value.alpha; | |
| 38531 | if (typeof rgb !== 'undefined') { | |
| 38532 | rgba = [rgb[0], rgb[1], rgb[2], alpha]; | |
| 38533 | } | |
| 38534 | if (typeof hsl !== 'undefined') { | |
| 38535 | hsla = [hsl[0], hsl[1], hsl[2], alpha]; | |
| 38536 | } | |
| 38537 | } | |
| 38538 | ||
| 38539 | if (typeof value.hue !== 'undefined') { | |
| 38540 | var h$2 = hsl[0]; | |
| 38541 | var s$2 = hsl[1]; | |
| 38542 | var l$1 = hsl[2]; // eslint-disable-line | |
| 38543 | hsl = [value.hue, s$2, l$1]; | |
| 38544 | hsb = Utils.colorHslToHsb.apply(Utils, hsl); | |
| 38545 | rgb = Utils.colorHslToRgb.apply(Utils, hsl); | |
| 38546 | hex = Utils.colorRgbToHex.apply(Utils, rgb); | |
| 38547 | hsl = self.normalizeHsValues(hsl); | |
| 38548 | hsb = self.normalizeHsValues(hsb); | |
| 38549 | hue = hsb[0]; | |
| 38550 | rgba = [rgb[0], rgb[1], rgb[2], alpha]; | |
| 38551 | hsla = [hsl[0], hsl[1], hsl[2], alpha]; | |
| 38552 | } | |
| 38553 | self.value = { | |
| 38554 | hex: hex, | |
| 38555 | alpha: alpha, | |
| 38556 | hue: hue, | |
| 38557 | rgb: rgb, | |
| 38558 | hsl: hsl, | |
| 38559 | hsb: hsb, | |
| 38560 | rgba: rgba, | |
| 38561 | hsla: hsla, | |
| 38562 | }; | |
| 38563 | if (!self.initialValue) { self.initialValue = Utils.extend({}, self.value); } | |
| 38564 | self.updateValue(needChangeEvent); | |
| 38565 | if (self.opened && updateModules) { | |
| 38566 | self.updateModules(); | |
| 38567 | } | |
| 38568 | }; | |
| 38569 | ||
| 38570 | ColorPicker.prototype.getValue = function getValue () { | |
| 38571 | var self = this; | |
| 38572 | return self.value; | |
| 38573 | }; | |
| 38574 | ||
| 38575 | ColorPicker.prototype.updateValue = function updateValue (fireEvents) { | |
| 38576 | if ( fireEvents === void 0 ) fireEvents = true; | |
| 38577 | ||
| 38578 | var self = this; | |
| 38579 | var $inputEl = self.$inputEl; | |
| 38580 | var value = self.value; | |
| 38581 | var $targetEl = self.$targetEl; | |
| 38582 | if ($targetEl && self.params.targetElSetBackgroundColor) { | |
| 38583 | var rgba = value.rgba; | |
| 38584 | $targetEl.css('background-color', ("rgba(" + (rgba.join(', ')) + ")")); | |
| 38585 | } | |
| 38586 | if (fireEvents) { | |
| 38587 | self.emit('local::change colorPickerChange', self, value); | |
| 38588 | } | |
| 38589 | ||
| 38590 | if ($inputEl && $inputEl.length) { | |
| 38591 | var inputValue = self.formatValue(value); | |
| 38592 | if ($inputEl && $inputEl.length) { | |
| 38593 | $inputEl.val(inputValue); | |
| 38594 | if (fireEvents) { | |
| 38595 | $inputEl.trigger('change'); | |
| 38596 | } | |
| 38597 | } | |
| 38598 | } | |
| 38599 | }; | |
| 38600 | ||
| 38601 | ColorPicker.prototype.updateModules = function updateModules () { | |
| 38602 | var self = this; | |
| 38603 | var modules = self.modules; | |
| 38604 | self.params.modules.forEach(function (m) { | |
| 38605 | if (typeof m === 'string' && modules[m] && modules[m].update) { | |
| 38606 | modules[m].update(self); | |
| 38607 | } else if (m && m.update) { | |
| 38608 | m.update(self); | |
| 38609 | } | |
| 38610 | }); | |
| 38611 | }; | |
| 38612 | ||
| 38613 | ColorPicker.prototype.update = function update () { | |
| 38614 | var self = this; | |
| 38615 | self.updateModules(); | |
| 38616 | }; | |
| 38617 | ||
| 38618 | ColorPicker.prototype.renderPicker = function renderPicker () { | |
| 38619 | var self = this; | |
| 38620 | var params = self.params; | |
| 38621 | var modules = self.modules; | |
| 38622 | var html = ''; | |
| 38623 | ||
| 38624 | params.modules.forEach(function (m) { | |
| 38625 | if (typeof m === 'string' && modules[m] && modules[m].render) { | |
| 38626 | html += modules[m].render(self); | |
| 38627 | } else if (m && m.render) { | |
| 38628 | html += m.render(self); | |
| 38629 | } | |
| 38630 | }); | |
| 38631 | ||
| 38632 | return html; | |
| 38633 | }; | |
| 38634 | ||
| 38635 | ColorPicker.prototype.renderNavbar = function renderNavbar () { | |
| 38636 | var self = this; | |
| 38637 | if (self.params.renderNavbar) { | |
| 38638 | return self.params.renderNavbar.call(self, self); | |
| 38639 | } | |
| 38640 | var ref = self.params; | |
| 38641 | var openIn = ref.openIn; | |
| 38642 | var navbarTitleText = ref.navbarTitleText; | |
| 38643 | var navbarBackLinkText = ref.navbarBackLinkText; | |
| 38644 | var navbarCloseText = ref.navbarCloseText; | |
| 38645 | return ("\n <div class=\"navbar\">\n <div class=\"navbar-inner sliding\">\n " + (openIn === 'page' ? ("\n <div class=\"left\">\n <a class=\"link back\">\n <i class=\"icon icon-back\"></i>\n <span class=\"if-not-md\">" + navbarBackLinkText + "</span>\n </a>\n </div>\n ") : '') + "\n <div class=\"title\">" + navbarTitleText + "</div>\n " + (openIn !== 'page' ? ("\n <div class=\"right\">\n <a class=\"link popup-close\" data-popup=\".color-picker-popup\">" + navbarCloseText + "</a>\n </div>\n ") : '') + "\n </div>\n </div>\n ").trim(); | |
| 38646 | }; | |
| 38647 | ||
| 38648 | ColorPicker.prototype.renderToolbar = function renderToolbar () { | |
| 38649 | var self = this; | |
| 38650 | if (self.params.renderToolbar) { | |
| 38651 | return self.params.renderToolbar.call(self, self); | |
| 38652 | } | |
| 38653 | return ("\n <div class=\"toolbar toolbar-top no-shadow\">\n <div class=\"toolbar-inner\">\n <div class=\"left\"></div>\n <div class=\"right\">\n <a class=\"link sheet-close popover-close\" data-sheet=\".color-picker-sheet-modal\" data-popover=\".color-picker-popover\">" + (self.params.toolbarCloseText) + "</a>\n </div>\n </div>\n </div>\n ").trim(); | |
| 38654 | }; | |
| 38655 | ||
| 38656 | ColorPicker.prototype.renderInline = function renderInline () { | |
| 38657 | var self = this; | |
| 38658 | var ref = self.params; | |
| 38659 | var cssClass = ref.cssClass; | |
| 38660 | var groupedModules = ref.groupedModules; | |
| 38661 | var inlineHtml = ("\n <div class=\"color-picker color-picker-inline " + (groupedModules ? 'color-picker-grouped-modules' : '') + " " + (cssClass || '') + "\">\n " + (self.renderPicker()) + "\n </div>\n ").trim(); | |
| 38662 | ||
| 38663 | return inlineHtml; | |
| 38664 | }; | |
| 38665 | ||
| 38666 | ColorPicker.prototype.renderSheet = function renderSheet () { | |
| 38667 | var self = this; | |
| 38668 | var ref = self.params; | |
| 38669 | var cssClass = ref.cssClass; | |
| 38670 | var toolbarSheet = ref.toolbarSheet; | |
| 38671 | var groupedModules = ref.groupedModules; | |
| 38672 | var sheetHtml = ("\n <div class=\"sheet-modal color-picker color-picker-sheet-modal " + (groupedModules ? 'color-picker-grouped-modules' : '') + " " + (cssClass || '') + "\">\n " + (toolbarSheet ? self.renderToolbar() : '') + "\n <div class=\"sheet-modal-inner\">\n <div class=\"page-content\">\n " + (self.renderPicker()) + "\n </div>\n </div>\n </div>\n ").trim(); | |
| 38673 | ||
| 38674 | return sheetHtml; | |
| 38675 | }; | |
| 38676 | ||
| 38677 | ColorPicker.prototype.renderPopover = function renderPopover () { | |
| 38678 | var self = this; | |
| 38679 | var ref = self.params; | |
| 38680 | var cssClass = ref.cssClass; | |
| 38681 | var toolbarPopover = ref.toolbarPopover; | |
| 38682 | var groupedModules = ref.groupedModules; | |
| 38683 | var popoverHtml = ("\n <div class=\"popover color-picker-popover " + (cssClass || '') + "\">\n <div class=\"popover-inner\">\n <div class=\"color-picker " + (groupedModules ? 'color-picker-grouped-modules' : '') + "\">\n " + (toolbarPopover ? self.renderToolbar() : '') + "\n <div class=\"page-content\">\n " + (self.renderPicker()) + "\n </div>\n </div>\n </div>\n </div>\n ").trim(); | |
| 38684 | ||
| 38685 | return popoverHtml; | |
| 38686 | }; | |
| 38687 | ||
| 38688 | ColorPicker.prototype.renderPopup = function renderPopup () { | |
| 38689 | var self = this; | |
| 38690 | var ref = self.params; | |
| 38691 | var cssClass = ref.cssClass; | |
| 38692 | var navbarPopup = ref.navbarPopup; | |
| 38693 | var groupedModules = ref.groupedModules; | |
| 38694 | var popupHtml = ("\n <div class=\"popup color-picker-popup " + (cssClass || '') + "\">\n <div class=\"page\">\n " + (navbarPopup ? self.renderNavbar() : '') + "\n <div class=\"color-picker " + (groupedModules ? 'color-picker-grouped-modules' : '') + "\">\n <div class=\"page-content\">\n " + (self.renderPicker()) + "\n </div>\n </div>\n </div>\n </div>\n ").trim(); | |
| 38695 | ||
| 38696 | return popupHtml; | |
| 38697 | }; | |
| 38698 | ||
| 38699 | ColorPicker.prototype.renderPage = function renderPage () { | |
| 38700 | var self = this; | |
| 38701 | var ref = self.params; | |
| 38702 | var cssClass = ref.cssClass; | |
| 38703 | var groupedModules = ref.groupedModules; | |
| 38704 | var pageHtml = ("\n <div class=\"page color-picker-page " + (cssClass || '') + "\" data-name=\"color-picker-page\">\n " + (self.renderNavbar()) + "\n <div class=\"color-picker " + (groupedModules ? 'color-picker-grouped-modules' : '') + "\">\n <div class=\"page-content\">\n " + (self.renderPicker()) + "\n </div>\n </div>\n </div>\n ").trim(); | |
| 38705 | return pageHtml; | |
| 38706 | }; | |
| 38707 | ||
| 38708 | // eslint-disable-next-line | |
| 38709 | ColorPicker.prototype.render = function render () { | |
| 38710 | var self = this; | |
| 38711 | var params = self.params; | |
| 38712 | if (params.render) { return params.render.call(self); } | |
| 38713 | if (self.inline) { return self.renderInline(); } | |
| 38714 | if (params.openIn === 'page') { | |
| 38715 | return self.renderPage(); | |
| 38716 | } | |
| 38717 | ||
| 38718 | var modalType = self.getModalType(); | |
| 38719 | if (modalType === 'popover') { return self.renderPopover(); } | |
| 38720 | if (modalType === 'sheet') { return self.renderSheet(); } | |
| 38721 | if (modalType === 'popup') { return self.renderPopup(); } | |
| 38722 | }; | |
| 38723 | ||
| 38724 | ColorPicker.prototype.onOpen = function onOpen () { | |
| 38725 | var self = this; | |
| 38726 | var initialized = self.initialized; | |
| 38727 | var $el = self.$el; | |
| 38728 | var app = self.app; | |
| 38729 | var $inputEl = self.$inputEl; | |
| 38730 | var inline = self.inline; | |
| 38731 | var value = self.value; | |
| 38732 | var params = self.params; | |
| 38733 | var modules = self.modules; | |
| 38734 | self.closing = false; | |
| 38735 | self.opened = true; | |
| 38736 | self.opening = true; | |
| 38737 | ||
| 38738 | // Init main events | |
| 38739 | self.attachEvents(); | |
| 38740 | ||
| 38741 | params.modules.forEach(function (m) { | |
| 38742 | if (typeof m === 'string' && modules[m] && modules[m].render) { | |
| 38743 | modules[m].init(self); | |
| 38744 | } else if (m && m.init) { | |
| 38745 | m.init(self); | |
| 38746 | } | |
| 38747 | }); | |
| 38748 | ||
| 38749 | var updateValue = !value && params.value; | |
| 38750 | ||
| 38751 | // Set value | |
| 38752 | if (!initialized) { | |
| 38753 | if (value) { self.setValue(value); } | |
| 38754 | else if (params.value) { | |
| 38755 | self.setValue(params.value, false); | |
| 38756 | } else if (!params.value) { | |
| 38757 | self.setValue({ hex: '#ff0000' }, false); | |
| 38758 | } | |
| 38759 | } else if (value) { | |
| 38760 | self.initialValue = Utils.extend({}, value); | |
| 38761 | self.setValue(value, false); | |
| 38762 | } | |
| 38763 | ||
| 38764 | // Update input value | |
| 38765 | if (updateValue) { self.updateValue(); } | |
| 38766 | self.updateModules(); | |
| 38767 | ||
| 38768 | // Center modules | |
| 38769 | if (params.centerModules) { | |
| 38770 | self.centerModules(); | |
| 38771 | } | |
| 38772 | ||
| 38773 | // Extra focus | |
| 38774 | if (!inline && $inputEl && $inputEl.length && app.theme === 'md') { | |
| 38775 | $inputEl.trigger('focus'); | |
| 38776 | } | |
| 38777 | ||
| 38778 | self.initialized = true; | |
| 38779 | ||
| 38780 | // Trigger events | |
| 38781 | if ($el) { | |
| 38782 | $el.trigger('colorpicker:open', self); | |
| 38783 | } | |
| 38784 | if ($inputEl) { | |
| 38785 | $inputEl.trigger('colorpicker:open', self); | |
| 38786 | } | |
| 38787 | self.emit('local::open colorPickerOpen', self); | |
| 38788 | }; | |
| 38789 | ||
| 38790 | ColorPicker.prototype.onOpened = function onOpened () { | |
| 38791 | var self = this; | |
| 38792 | self.opening = false; | |
| 38793 | if (self.$el) { | |
| 38794 | self.$el.trigger('colorpicker:opened', self); | |
| 38795 | } | |
| 38796 | if (self.$inputEl) { | |
| 38797 | self.$inputEl.trigger('colorpicker:opened', self); | |
| 38798 | } | |
| 38799 | self.emit('local::opened colorPickerOpened', self); | |
| 38800 | }; | |
| 38801 | ||
| 38802 | ColorPicker.prototype.onClose = function onClose () { | |
| 38803 | var self = this; | |
| 38804 | var app = self.app; | |
| 38805 | var params = self.params; | |
| 38806 | var modules = self.modules; | |
| 38807 | self.opening = false; | |
| 38808 | self.closing = true; | |
| 38809 | ||
| 38810 | // Detach events | |
| 38811 | self.detachEvents(); | |
| 38812 | ||
| 38813 | if (self.$inputEl && app.theme === 'md') { | |
| 38814 | self.$inputEl.trigger('blur'); | |
| 38815 | } | |
| 38816 | params.modules.forEach(function (m) { | |
| 38817 | if (typeof m === 'string' && modules[m] && modules[m].update) { | |
| 38818 | modules[m].destroy(self); | |
| 38819 | } else if (m && m.destroy) { | |
| 38820 | m.destroy(self); | |
| 38821 | } | |
| 38822 | }); | |
| 38823 | ||
| 38824 | if (self.$el) { | |
| 38825 | self.$el.trigger('colorpicker:close', self); | |
| 38826 | } | |
| 38827 | if (self.$inputEl) { | |
| 38828 | self.$inputEl.trigger('colorpicker:close', self); | |
| 38829 | } | |
| 38830 | self.emit('local::close colorPickerClose', self); | |
| 38831 | }; | |
| 38832 | ||
| 38833 | ColorPicker.prototype.onClosed = function onClosed () { | |
| 38834 | var self = this; | |
| 38835 | self.opened = false; | |
| 38836 | self.closing = false; | |
| 38837 | ||
| 38838 | if (!self.inline) { | |
| 38839 | Utils.nextTick(function () { | |
| 38840 | if (self.modal && self.modal.el && self.modal.destroy) { | |
| 38841 | if (!self.params.routableModals) { | |
| 38842 | self.modal.destroy(); | |
| 38843 | } | |
| 38844 | } | |
| 38845 | delete self.modal; | |
| 38846 | }); | |
| 38847 | } | |
| 38848 | if (self.$el) { | |
| 38849 | self.$el.trigger('colorpicker:closed', self); | |
| 38850 | } | |
| 38851 | if (self.$inputEl) { | |
| 38852 | self.$inputEl.trigger('colorpicker:closed', self); | |
| 38853 | } | |
| 38854 | self.emit('local::closed colorPickerClosed', self); | |
| 38855 | }; | |
| 38856 | ||
| 38857 | ColorPicker.prototype.open = function open () { | |
| 38858 | var obj; | |
| 38859 | ||
| 38860 | var self = this; | |
| 38861 | var app = self.app; | |
| 38862 | var opened = self.opened; | |
| 38863 | var inline = self.inline; | |
| 38864 | var $inputEl = self.$inputEl; | |
| 38865 | var $targetEl = self.$targetEl; | |
| 38866 | var params = self.params; | |
| 38867 | if (opened) { return; } | |
| 38868 | ||
| 38869 | if (inline) { | |
| 38870 | self.$el = $(self.render()); | |
| 38871 | self.$el[0].f7ColorPicker = self; | |
| 38872 | self.$containerEl.append(self.$el); | |
| 38873 | self.onOpen(); | |
| 38874 | self.onOpened(); | |
| 38875 | return; | |
| 38876 | } | |
| 38877 | ||
| 38878 | var colorPickerContent = self.render(); | |
| 38879 | ||
| 38880 | if (params.openIn === 'page') { | |
| 38881 | self.view.router.navigate({ | |
| 38882 | url: self.url, | |
| 38883 | route: { | |
| 38884 | content: colorPickerContent, | |
| 38885 | path: self.url, | |
| 38886 | on: { | |
| 38887 | pageBeforeIn: function pageBeforeIn(e, page) { | |
| 38888 | self.$el = page.$el.find('.color-picker'); | |
| 38889 | self.$el[0].f7ColorPicker = self; | |
| 38890 | self.onOpen(); | |
| 38891 | }, | |
| 38892 | pageAfterIn: function pageAfterIn() { | |
| 38893 | self.onOpened(); | |
| 38894 | }, | |
| 38895 | pageBeforeOut: function pageBeforeOut() { | |
| 38896 | self.onClose(); | |
| 38897 | }, | |
| 38898 | pageAfterOut: function pageAfterOut() { | |
| 38899 | self.onClosed(); | |
| 38900 | if (self.$el && self.$el[0]) { | |
| 38901 | self.$el[0].f7ColorPicker = null; | |
| 38902 | delete self.$el[0].f7ColorPicker; | |
| 38903 | } | |
| 38904 | }, | |
| 38905 | }, | |
| 38906 | }, | |
| 38907 | }); | |
| 38908 | } else { | |
| 38909 | var modalType = self.getModalType(); | |
| 38910 | var backdrop = params.backdrop; | |
| 38911 | if (backdrop === null || typeof backdrop === 'undefined') { | |
| 38912 | if (modalType === 'popover' && app.params.popover.backdrop !== false) { backdrop = true; } | |
| 38913 | if (modalType === 'popup') { backdrop = true; } | |
| 38914 | } | |
| 38915 | var modalParams = { | |
| 38916 | targetEl: ($targetEl || $inputEl), | |
| 38917 | scrollToEl: params.scrollToInput ? ($targetEl || $inputEl) : undefined, | |
| 38918 | content: colorPickerContent, | |
| 38919 | backdrop: backdrop, | |
| 38920 | closeByBackdropClick: params.closeByBackdropClick, | |
| 38921 | on: { | |
| 38922 | open: function open() { | |
| 38923 | var modal = this; | |
| 38924 | self.modal = modal; | |
| 38925 | self.$el = modalType === 'popover' || modalType === 'popup' ? modal.$el.find('.color-picker') : modal.$el; | |
| 38926 | self.$el[0].f7ColorPicker = self; | |
| 38927 | self.onOpen(); | |
| 38928 | }, | |
| 38929 | opened: function opened() { self.onOpened(); }, | |
| 38930 | close: function close() { self.onClose(); }, | |
| 38931 | closed: function closed() { | |
| 38932 | self.onClosed(); | |
| 38933 | if (self.$el && self.$el[0]) { | |
| 38934 | self.$el[0].f7ColorPicker = null; | |
| 38935 | delete self.$el[0].f7ColorPicker; | |
| 38936 | } | |
| 38937 | }, | |
| 38938 | }, | |
| 38939 | }; | |
| 38940 | if (params.routableModals) { | |
| 38941 | self.view.router.navigate({ | |
| 38942 | url: self.url, | |
| 38943 | route: ( obj = { | |
| 38944 | path: self.url | |
| 38945 | }, obj[modalType] = modalParams, obj ), | |
| 38946 | }); | |
| 38947 | } else { | |
| 38948 | self.modal = app[modalType].create(modalParams); | |
| 38949 | self.modal.open(); | |
| 38950 | } | |
| 38951 | } | |
| 38952 | }; | |
| 38953 | ||
| 38954 | ColorPicker.prototype.close = function close () { | |
| 38955 | var self = this; | |
| 38956 | var opened = self.opened; | |
| 38957 | var inline = self.inline; | |
| 38958 | if (!opened) { return; } | |
| 38959 | if (inline) { | |
| 38960 | self.onClose(); | |
| 38961 | self.onClosed(); | |
| 38962 | return; | |
| 38963 | } | |
| 38964 | if (self.params.routableModals) { | |
| 38965 | self.view.router.back(); | |
| 38966 | } else { | |
| 38967 | self.modal.close(); | |
| 38968 | } | |
| 38969 | }; | |
| 38970 | ||
| 38971 | ColorPicker.prototype.init = function init () { | |
| 38972 | var self = this; | |
| 38973 | ||
| 38974 | self.initInput(); | |
| 38975 | ||
| 38976 | if (self.inline) { | |
| 38977 | self.open(); | |
| 38978 | self.emit('local::init colorPickerInit', self); | |
| 38979 | return; | |
| 38980 | } | |
| 38981 | ||
| 38982 | if (!self.initialized && self.params.value) { | |
| 38983 | self.setValue(self.params.value); | |
| 38984 | } | |
| 38985 | ||
| 38986 | // Attach input Events | |
| 38987 | if (self.$inputEl) { | |
| 38988 | self.attachInputEvents(); | |
| 38989 | } | |
| 38990 | if (self.$targetEl) { | |
| 38991 | self.attachTargetEvents(); | |
| 38992 | } | |
| 38993 | if (self.params.closeByOutsideClick) { | |
| 38994 | self.attachHtmlEvents(); | |
| 38995 | } | |
| 38996 | self.emit('local::init colorPickerInit', self); | |
| 38997 | }; | |
| 38998 | ||
| 38999 | ColorPicker.prototype.destroy = function destroy () { | |
| 39000 | var self = this; | |
| 39001 | if (self.destroyed) { return; } | |
| 39002 | var $el = self.$el; | |
| 39003 | self.emit('local::beforeDestroy colorPickerBeforeDestroy', self); | |
| 39004 | if ($el) { $el.trigger('colorpicker:beforedestroy', self); } | |
| 39005 | ||
| 39006 | self.close(); | |
| 39007 | ||
| 39008 | // Detach Events | |
| 39009 | self.detachEvents(); | |
| 39010 | if (self.$inputEl) { | |
| 39011 | self.detachInputEvents(); | |
| 39012 | } | |
| 39013 | if (self.$targetEl) { | |
| 39014 | self.detachTargetEvents(); | |
| 39015 | } | |
| 39016 | if (self.params.closeByOutsideClick) { | |
| 39017 | self.detachHtmlEvents(); | |
| 39018 | } | |
| 39019 | ||
| 39020 | if ($el && $el.length) { delete self.$el[0].f7ColorPicker; } | |
| 39021 | Utils.deleteProps(self); | |
| 39022 | self.destroyed = true; | |
| 39023 | }; | |
| 39024 | ||
| 39025 | return ColorPicker; | |
| 39026 | }(Framework7Class)); | |
| 39027 | ||
| 39028 | var ColorPicker$1 = { | |
| 39029 | name: 'colorPicker', | |
| 39030 | static: { | |
| 39031 | ColorPicker: ColorPicker, | |
| 39032 | }, | |
| 39033 | create: function create() { | |
| 39034 | var app = this; | |
| 39035 | app.colorPicker = ConstructorMethods({ | |
| 39036 | defaultSelector: '.color-picker', | |
| 39037 | constructor: ColorPicker, | |
| 39038 | app: app, | |
| 39039 | domProp: 'f7ColorPicker', | |
| 39040 | }); | |
| 39041 | app.colorPicker.close = function close(el) { | |
| 39042 | if ( el === void 0 ) el = '.color-picker'; | |
| 39043 | ||
| 39044 | var $el = $(el); | |
| 39045 | if ($el.length === 0) { return; } | |
| 39046 | var colorPicker = $el[0].f7ColorPicker; | |
| 39047 | if (!colorPicker || (colorPicker && !colorPicker.opened)) { return; } | |
| 39048 | colorPicker.close(); | |
| 39049 | }; | |
| 39050 | }, | |
| 39051 | params: { | |
| 39052 | colorPicker: { | |
| 39053 | // Color picker settings | |
| 39054 | value: null, | |
| 39055 | modules: [ | |
| 39056 | 'wheel' ], | |
| 39057 | palette: [ | |
| 39058 | ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'], | |
| 39059 | ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'], | |
| 39060 | ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'], | |
| 39061 | ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'], | |
| 39062 | ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'], | |
| 39063 | ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'], | |
| 39064 | ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'], | |
| 39065 | ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'] ], | |
| 39066 | groupedModules: false, | |
| 39067 | centerModules: true, | |
| 39068 | ||
| 39069 | sliderLabel: false, | |
| 39070 | sliderValue: false, | |
| 39071 | sliderValueEdiable: false, | |
| 39072 | ||
| 39073 | barLabel: false, | |
| 39074 | barValue: false, | |
| 39075 | barValueEdiable: false, | |
| 39076 | ||
| 39077 | hexLabel: false, | |
| 39078 | hexValueEditable: false, | |
| 39079 | ||
| 39080 | redLabelText: 'R', | |
| 39081 | greenLabelText: 'G', | |
| 39082 | blueLabelText: 'B', | |
| 39083 | hueLabelText: 'H', | |
| 39084 | saturationLabelText: 'S', | |
| 39085 | brightnessLabelText: 'B', | |
| 39086 | hexLabelText: 'HEX', | |
| 39087 | alphaLabelText: 'A', | |
| 39088 | ||
| 39089 | // Common opener settings | |
| 39090 | containerEl: null, | |
| 39091 | openIn: 'popover', // or 'popover' or 'sheet' or 'popup' or 'page' or 'auto' | |
| 39092 | openInPhone: 'popup', // or 'popover' or 'sheet' or 'popup' or 'page' | |
| 39093 | formatValue: null, | |
| 39094 | targetEl: null, | |
| 39095 | targetElSetBackgroundColor: false, | |
| 39096 | inputEl: null, | |
| 39097 | inputReadOnly: true, | |
| 39098 | closeByOutsideClick: true, | |
| 39099 | scrollToInput: true, | |
| 39100 | toolbarSheet: true, | |
| 39101 | toolbarPopover: false, | |
| 39102 | toolbarCloseText: 'Done', | |
| 39103 | navbarPopup: true, | |
| 39104 | navbarCloseText: 'Done', | |
| 39105 | navbarTitleText: 'Color', | |
| 39106 | navbarBackLinkText: 'Back', | |
| 39107 | cssClass: null, | |
| 39108 | routableModals: true, | |
| 39109 | view: null, | |
| 39110 | url: 'color/', | |
| 39111 | backdrop: null, | |
| 39112 | closeByBackdropClick: true, | |
| 39113 | // Render functions | |
| 39114 | renderToolbar: null, | |
| 39115 | renderNavbar: null, | |
| 39116 | renderInline: null, | |
| 39117 | renderPopover: null, | |
| 39118 | renderSheet: null, | |
| 39119 | renderPopup: null, | |
| 39120 | render: null, | |
| 39121 | }, | |
| 39122 | }, | |
| 39123 | }; | |
| 39124 | ||
| 39125 | var Treeview = { | |
| 39126 | open: function open(itemEl) { | |
| 39127 | var app = this; | |
| 39128 | var $itemEl = $(itemEl).eq(0); | |
| 39129 | if (!$itemEl.length) { return; } | |
| 39130 | $itemEl.addClass('treeview-item-opened'); | |
| 39131 | $itemEl.trigger('treeview:open'); | |
| 39132 | app.emit('treeviewOpen', $itemEl[0]); | |
| 39133 | function done() { | |
| 39134 | $itemEl[0].f7TreeviewChildrenLoaded = true; | |
| 39135 | $itemEl.find('.treeview-toggle').removeClass('treeview-toggle-hidden'); | |
| 39136 | $itemEl.find('.treeview-preloader').remove(); | |
| 39137 | } | |
| 39138 | ||
| 39139 | if ($itemEl.hasClass('treeview-load-children') && !$itemEl[0].f7TreeviewChildrenLoaded) { | |
| 39140 | $itemEl.trigger('treeview:loadchildren', done); | |
| 39141 | app.emit('treeviewLoadChildren', $itemEl[0], done); | |
| 39142 | $itemEl.find('.treeview-toggle').addClass('treeview-toggle-hidden'); | |
| 39143 | $itemEl.find('.treeview-item-root').prepend(("<div class=\"preloader treeview-preloader\">" + (Utils[((app.theme) + "PreloaderContent")]) + "</div>")); | |
| 39144 | } | |
| 39145 | }, | |
| 39146 | close: function close(itemEl) { | |
| 39147 | var app = this; | |
| 39148 | var $itemEl = $(itemEl).eq(0); | |
| 39149 | if (!$itemEl.length) { return; } | |
| 39150 | $itemEl.removeClass('treeview-item-opened'); | |
| 39151 | $itemEl.trigger('treeview:close'); | |
| 39152 | app.emit('treeviewClose', $itemEl[0]); | |
| 39153 | }, | |
| 39154 | toggle: function toggle(itemEl) { | |
| 39155 | var app = this; | |
| 39156 | var $itemEl = $(itemEl).eq(0); | |
| 39157 | if (!$itemEl.length) { return; } | |
| 39158 | var wasOpened = $itemEl.hasClass('treeview-item-opened'); | |
| 39159 | app.treeview[wasOpened ? 'close' : 'open']($itemEl); | |
| 39160 | }, | |
| 39161 | }; | |
| 39162 | ||
| 39163 | var Treeview$1 = { | |
| 39164 | name: 'treeview', | |
| 39165 | create: function create() { | |
| 39166 | var app = this; | |
| 39167 | Utils.extend(app, { | |
| 39168 | treeview: { | |
| 39169 | open: Treeview.open.bind(app), | |
| 39170 | close: Treeview.close.bind(app), | |
| 39171 | toggle: Treeview.toggle.bind(app), | |
| 39172 | }, | |
| 39173 | }); | |
| 39174 | }, | |
| 39175 | clicks: { | |
| 39176 | '.treeview-toggle': function toggle($clickedEl, clickedData, e) { | |
| 39177 | var app = this; | |
| 39178 | if ($clickedEl.parents('.treeview-item-toggle').length) { return; } | |
| 39179 | var $treeviewItemEl = $clickedEl.parents('.treeview-item').eq(0); | |
| 39180 | if (!$treeviewItemEl.length) { return; } | |
| 39181 | e.preventF7Router = true; | |
| 39182 | app.treeview.toggle($treeviewItemEl[0]); | |
| 39183 | }, | |
| 39184 | '.treeview-item-toggle': function toggle($clickedEl, clickedData, e) { | |
| 39185 | var app = this; | |
| 39186 | var $treeviewItemEl = $clickedEl.closest('.treeview-item').eq(0); | |
| 39187 | if (!$treeviewItemEl.length) { return; } | |
| 39188 | e.preventF7Router = true; | |
| 39189 | app.treeview.toggle($treeviewItemEl[0]); | |
| 39190 | }, | |
| 39191 | }, | |
| 39192 | }; | |
| 39193 | ||
| 39194 | var ViAd = /*@__PURE__*/(function (Framework7Class) { | |
| 5309fbda DC |
39195 | function ViAd(app, params) { |
| 39196 | if ( params === void 0 ) params = {}; | |
| 39197 | ||
| 5d51ea26 | 39198 | Framework7Class.call(this, params, [app]); |
| 5309fbda DC |
39199 | var vi = this; |
| 39200 | if (!win.vi) { | |
| 39201 | throw new Error('Framework7: vi SDK not found.'); | |
| 39202 | } | |
| 39203 | ||
| 39204 | var orientation; | |
| 39205 | if (typeof win.orientation !== 'undefined') { | |
| 39206 | orientation = win.orientation === -90 || win.orientation === 90 ? 'horizontal' : 'vertical'; | |
| 39207 | } | |
| 39208 | var defaults = Utils.extend( | |
| 39209 | {}, | |
| 39210 | app.params.vi, | |
| 39211 | { | |
| 39212 | appId: app.id, | |
| 39213 | appVer: app.version, | |
| 39214 | language: app.language, | |
| 39215 | width: app.width, | |
| 39216 | height: app.height, | |
| 39217 | os: Device.os, | |
| 39218 | osVersion: Device.osVersion, | |
| 39219 | orientation: orientation, | |
| 39220 | } | |
| 39221 | ); | |
| 39222 | ||
| 39223 | // Extend defaults with modules params | |
| 39224 | vi.useModulesParams(defaults); | |
| 39225 | ||
| 39226 | vi.params = Utils.extend(defaults, params); | |
| 39227 | ||
| 39228 | var adParams = {}; | |
| 39229 | var skipParams = ('on autoplay fallbackOverlay fallbackOverlayText enabled').split(' '); | |
| 39230 | Object.keys(vi.params).forEach(function (paramName) { | |
| 39231 | if (skipParams.indexOf(paramName) >= 0) { return; } | |
| 39232 | var paramValue = vi.params[paramName]; | |
| 39233 | if ([null, undefined].indexOf(paramValue) >= 0) { return; } | |
| 39234 | adParams[paramName] = paramValue; | |
| 39235 | }); | |
| 39236 | ||
| 39237 | if (!vi.params.appId) { | |
| 39238 | throw new Error('Framework7: "app.id" is required to display an ad. Make sure you have specified it on app initialization.'); | |
| 39239 | } | |
| 39240 | if (!vi.params.placementId) { | |
| 39241 | throw new Error('Framework7: "placementId" is required to display an ad.'); | |
| 39242 | } | |
| 39243 | ||
| 39244 | function onResize() { | |
| 39245 | var $viFrame = $('iframe#viAd'); | |
| 39246 | if ($viFrame.length === 0) { return; } | |
| 39247 | $viFrame | |
| 39248 | .css({ | |
| 39249 | width: ((app.width) + "px"), | |
| 39250 | height: ((app.height) + "px"), | |
| 39251 | }); | |
| 39252 | } | |
| 39253 | ||
| 39254 | function removeOverlay() { | |
| 39255 | if (!vi.$overlayEl) { return; } | |
| 39256 | vi.$overlayEl.off('click touchstart'); | |
| 39257 | vi.$overlayEl.remove(); | |
| 39258 | } | |
| 39259 | function createOverlay(videoEl) { | |
| 39260 | if (!videoEl) { return; } | |
| 39261 | vi.$overlayEl = $(("\n <div class=\"vi-overlay no-fastclick\">\n " + (vi.params.fallbackOverlayText ? ("<div class=\"vi-overlay-text\">" + (vi.params.fallbackOverlayText) + "</div>") : '') + "\n <div class=\"vi-overlay-play-button\"></div>\n </div>\n ").trim()); | |
| 39262 | ||
| 39263 | var touchStartTime; | |
| 39264 | vi.$overlayEl.on('touchstart', function () { | |
| 39265 | touchStartTime = Utils.now(); | |
| 39266 | }); | |
| 39267 | vi.$overlayEl.on('click', function () { | |
| 39268 | var timeDiff = Utils.now() - touchStartTime; | |
| 39269 | if (timeDiff > 300) { return; } | |
| 39270 | if (videoEl) { | |
| 39271 | videoEl.play(); | |
| 39272 | removeOverlay(); | |
| 39273 | return; | |
| 39274 | } | |
| 39275 | vi.start(); | |
| 39276 | removeOverlay(); | |
| 39277 | }); | |
| 39278 | app.root.append(vi.$overlayEl); | |
| 39279 | } | |
| 39280 | ||
| 39281 | // Create ad | |
| 39282 | vi.ad = new win.vi.Ad(adParams); | |
| 39283 | ||
| 39284 | Utils.extend(vi.ad, { | |
| 39285 | onAdReady: function onAdReady() { | |
| 39286 | app.on('resize', onResize); | |
| 39287 | vi.emit('local::ready'); | |
| 39288 | if (vi.params.autoplay) { | |
| 39289 | vi.start(); | |
| 39290 | } | |
| 39291 | }, | |
| 39292 | onAdStarted: function onAdStarted() { | |
| 39293 | vi.emit('local::started'); | |
| 39294 | }, | |
| 39295 | onAdClick: function onAdClick(targetUrl) { | |
| 39296 | vi.emit('local::click', targetUrl); | |
| 39297 | }, | |
| 39298 | onAdImpression: function onAdImpression() { | |
| 39299 | vi.emit('local::impression'); | |
| 39300 | }, | |
| 39301 | onAdStopped: function onAdStopped(reason) { | |
| 39302 | app.off('resize', onResize); | |
| 39303 | removeOverlay(); | |
| 39304 | ||
| 39305 | vi.emit('local::stopped', reason); | |
| 39306 | if (reason === 'complete') { | |
| 39307 | vi.emit('local::complete'); | |
| 39308 | vi.emit('local::completed'); | |
| 39309 | } | |
| 39310 | if (reason === 'userexit') { | |
| 39311 | vi.emit('local::userexit'); | |
| 39312 | } | |
| 39313 | vi.destroyed = true; | |
| 39314 | }, | |
| 39315 | onAutoPlayFailed: function onAutoPlayFailed(reason, videoEl) { | |
| 39316 | vi.emit('local::autoplayFailed', reason, videoEl); | |
| 39317 | if (reason && reason.name && reason.name.indexOf('NotAllowedError') !== -1 && vi.params.fallbackOverlay) { | |
| 39318 | createOverlay(videoEl); | |
| 39319 | } | |
| 39320 | }, | |
| 39321 | onAdError: function onAdError(msg) { | |
| 39322 | removeOverlay(); | |
| 39323 | app.off('resize', onResize); | |
| 39324 | vi.emit('local::error', msg); | |
| 39325 | vi.destroyed = true; | |
| 39326 | }, | |
| 39327 | }); | |
| 39328 | ||
| 39329 | vi.init(); | |
| 39330 | ||
| 39331 | Utils.extend(vi, { | |
| 39332 | app: app, | |
| 39333 | }); | |
| 39334 | } | |
| 39335 | ||
| 5d51ea26 DC |
39336 | if ( Framework7Class ) ViAd.__proto__ = Framework7Class; |
| 39337 | ViAd.prototype = Object.create( Framework7Class && Framework7Class.prototype ); | |
| 5309fbda DC |
39338 | ViAd.prototype.constructor = ViAd; |
| 39339 | ||
| 39340 | ViAd.prototype.start = function start () { | |
| 39341 | var vi = this; | |
| 39342 | if (vi.destroyed) { return; } | |
| 39343 | if (vi.ad) { vi.ad.startAd(); } | |
| 39344 | }; | |
| 39345 | ||
| 39346 | ViAd.prototype.pause = function pause () { | |
| 39347 | var vi = this; | |
| 39348 | if (vi.destroyed) { return; } | |
| 39349 | if (vi.ad) { vi.ad.pauseAd(); } | |
| 39350 | }; | |
| 39351 | ||
| 39352 | ViAd.prototype.resume = function resume () { | |
| 39353 | var vi = this; | |
| 39354 | if (vi.destroyed) { return; } | |
| 39355 | if (vi.ad) { vi.ad.resumeAd(); } | |
| 39356 | }; | |
| 39357 | ||
| 39358 | ViAd.prototype.stop = function stop () { | |
| 39359 | var vi = this; | |
| 39360 | if (vi.destroyed) { return; } | |
| 39361 | if (vi.ad) { vi.ad.stopAd(); } | |
| 39362 | }; | |
| 39363 | ||
| 39364 | ViAd.prototype.init = function init () { | |
| 39365 | var vi = this; | |
| 39366 | if (vi.destroyed) { return; } | |
| 39367 | if (vi.ad) { vi.ad.initAd(); } | |
| 39368 | }; | |
| 39369 | ||
| 39370 | ViAd.prototype.destroy = function destroy () { | |
| 39371 | var vi = this; | |
| 39372 | vi.destroyed = true; | |
| 39373 | vi.emit('local::beforeDestroy'); | |
| 39374 | Utils.deleteProps(vi); | |
| 39375 | }; | |
| 39376 | ||
| 39377 | return ViAd; | |
| 39378 | }(Framework7Class)); | |
| 39379 | ||
| 39380 | var Vi = { | |
| 39381 | name: 'vi', | |
| 39382 | params: { | |
| 39383 | vi: { | |
| 39384 | enabled: false, | |
| 39385 | autoplay: true, | |
| 39386 | fallbackOverlay: true, | |
| 39387 | fallbackOverlayText: 'Please watch this ad', | |
| 39388 | showMute: true, | |
| 39389 | startMuted: (Device.ios || Device.android) && !Device.cordova, | |
| 39390 | appId: null, | |
| 39391 | appVer: null, | |
| 39392 | language: null, | |
| 39393 | width: null, | |
| 39394 | height: null, | |
| 39395 | placementId: 'pltd4o7ibb9rc653x14', | |
| 39396 | placementType: 'interstitial', | |
| 39397 | videoSlot: null, | |
| 39398 | showProgress: true, | |
| 39399 | showBranding: true, | |
| 39400 | os: null, | |
| 39401 | osVersion: null, | |
| 39402 | orientation: null, | |
| 39403 | age: null, | |
| 39404 | gender: null, | |
| 39405 | advertiserId: null, | |
| 39406 | latitude: null, | |
| 39407 | longitude: null, | |
| 39408 | accuracy: null, | |
| 39409 | storeId: null, | |
| 39410 | ip: null, | |
| 39411 | manufacturer: null, | |
| 39412 | model: null, | |
| 39413 | connectionType: null, | |
| 39414 | connectionProvider: null, | |
| 39415 | }, | |
| 39416 | }, | |
| 39417 | create: function create() { | |
| 39418 | var app = this; | |
| 39419 | app.vi = { | |
| 39420 | sdkReady: false, | |
| 39421 | createAd: function createAd(adParams) { | |
| 39422 | return new ViAd(app, adParams); | |
| 39423 | }, | |
| 39424 | loadSdk: function loadSdk() { | |
| 39425 | if (app.vi.sdkReady) { return; } | |
| 39426 | var script = doc.createElement('script'); | |
| 39427 | script.onload = function onload() { | |
| 39428 | app.emit('viSdkReady'); | |
| 39429 | app.vi.sdkReady = true; | |
| 39430 | }; | |
| 39431 | script.src = 'https://c.vi-serve.com/viadshtml/vi.min.js'; | |
| 39432 | $('head').append(script); | |
| 39433 | }, | |
| 39434 | }; | |
| 39435 | }, | |
| 39436 | on: { | |
| 39437 | init: function init() { | |
| 39438 | var app = this; | |
| 39439 | if (app.params.vi.enabled || (app.passedParams.vi && app.passedParams.vi.enabled !== false)) { app.vi.loadSdk(); } | |
| 39440 | }, | |
| 39441 | }, | |
| 39442 | }; | |
| 39443 | ||
| 39444 | var Elevation = { | |
| 39445 | name: 'elevation', | |
| 39446 | }; | |
| 39447 | ||
| 39448 | var Typography = { | |
| 39449 | name: 'typography', | |
| 39450 | }; | |
| 39451 | ||
| 39452 | { | |
| 39453 | if (typeof window !== 'undefined') { | |
| 39454 | // Template7 | |
| 39455 | if (!window.Template7) { window.Template7 = Template7; } | |
| 39456 | ||
| 39457 | // Dom7 | |
| 39458 | if (!window.Dom7) { window.Dom7 = $; } | |
| 39459 | } | |
| 39460 | } | |
| 39461 | ||
| 39462 | // Install Core Modules & Components | |
| 39463 | Router.use([ | |
| 39464 | RouterTemplateLoaderModule, | |
| 39465 | RouterComponentLoaderModule ]); | |
| 39466 | ||
| 39467 | Framework7.use([ | |
| 39468 | DeviceModule, | |
| 39469 | SupportModule, | |
| 39470 | UtilsModule, | |
| 39471 | ResizeModule, | |
| 39472 | RequestModule, | |
| 39473 | TouchModule, | |
| 39474 | ClicksModule, | |
| 5d51ea26 | 39475 | RouterModule, |
| 5309fbda DC |
39476 | HistoryModule, |
| 39477 | StorageModule, | |
| 39478 | ComponentModule, | |
| 39479 | ServiceWorkerModule, | |
| 39480 | Statusbar$1, | |
| 39481 | View$1, | |
| 39482 | Navbar$1, | |
| 39483 | Toolbar$1, | |
| 39484 | Subnavbar, | |
| 39485 | TouchRipple$1, | |
| 39486 | Modal$1, | |
| 5d51ea26 | 39487 | Appbar, |
| 5309fbda DC |
39488 | Dialog$1, |
| 39489 | Popup$1, | |
| 39490 | LoginScreen$1, | |
| 39491 | Popover$1, | |
| 39492 | Actions$1, | |
| 39493 | Sheet$1, | |
| 39494 | Toast$1, | |
| 39495 | Preloader$1, | |
| 39496 | Progressbar$1, | |
| 39497 | Sortable$1, | |
| 39498 | Swipeout$1, | |
| 39499 | Accordion$1, | |
| 39500 | ContactsList, | |
| 39501 | VirtualList$1, | |
| 39502 | ListIndex$1, | |
| 39503 | Timeline, | |
| 39504 | Tabs, | |
| 39505 | Panel$1, | |
| 39506 | Card, | |
| 39507 | Chip, | |
| 39508 | Form, | |
| 39509 | Input$1, | |
| 39510 | Checkbox, | |
| 39511 | Radio, | |
| 39512 | Toggle$1, | |
| 39513 | Range$1, | |
| 39514 | Stepper$1, | |
| 39515 | SmartSelect$1, | |
| 39516 | Grid, | |
| 39517 | Calendar$1, | |
| 39518 | Picker$1, | |
| 39519 | InfiniteScroll$1, | |
| 39520 | PullToRefresh$1, | |
| 39521 | Lazy$1, | |
| 39522 | DataTable$1, | |
| 39523 | Fab$1, | |
| 39524 | Searchbar$1, | |
| 39525 | Messages$1, | |
| 39526 | Messagebar$1, | |
| 39527 | Swiper$1, | |
| 39528 | PhotoBrowser$1, | |
| 39529 | Notification$1, | |
| 39530 | Autocomplete$1, | |
| 39531 | Tooltip$1, | |
| 39532 | Gauge$1, | |
| 39533 | Skeleton, | |
| 39534 | Menu$1, | |
| 5d51ea26 DC |
39535 | ColorPicker$1, |
| 39536 | Treeview$1, | |
| 5309fbda DC |
39537 | Vi, |
| 39538 | Elevation, | |
| 39539 | Typography | |
| 39540 | ]); | |
| 39541 | ||
| 39542 | return Framework7; | |
| 39543 | ||
| 39544 | })); |