framework7 7.0.0-beta.8 → 7.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/accordion/accordion.lazy.js +1 -1
- package/components/actions/actions-class.js +6 -1
- package/components/actions/actions-rtl.css +1 -1
- package/components/actions/actions.css +1 -1
- package/components/actions/actions.d.ts +2 -0
- package/components/actions/actions.js +11 -2
- package/components/actions/actions.lazy.js +1 -1
- package/components/actions/actions.less +3 -0
- package/components/app/app-class.js +15 -9
- package/components/area-chart/area-chart-class.js +34 -18
- package/components/area-chart/area-chart.lazy.js +1 -1
- package/components/autocomplete/autocomplete-class.js +5 -1
- package/components/autocomplete/autocomplete.lazy.js +1 -1
- package/components/breadcrumbs/breadcrumbs-aurora.less +2 -0
- package/components/breadcrumbs/breadcrumbs-ios.less +2 -0
- package/components/breadcrumbs/breadcrumbs-md.less +2 -0
- package/components/breadcrumbs/breadcrumbs-rtl.css +1 -0
- package/components/breadcrumbs/breadcrumbs-vars.less +36 -0
- package/components/breadcrumbs/breadcrumbs.css +1 -0
- package/components/breadcrumbs/breadcrumbs.d.ts +15 -0
- package/components/breadcrumbs/breadcrumbs.js +13 -0
- package/components/breadcrumbs/breadcrumbs.lazy.js +1 -0
- package/components/breadcrumbs/breadcrumbs.less +100 -0
- package/components/calendar/calendar-class.js +216 -124
- package/components/calendar/calendar-rtl.css +1 -1
- package/components/calendar/calendar-vars.less +6 -10
- package/components/calendar/calendar.css +1 -1
- package/components/calendar/calendar.d.ts +2 -0
- package/components/calendar/calendar.js +6 -1
- package/components/calendar/calendar.lazy.js +1 -1
- package/components/calendar/calendar.less +21 -16
- package/components/card/card.js +23 -3
- package/components/card/card.lazy.js +1 -1
- package/components/color-picker/color-picker-class.js +19 -3
- package/components/color-picker/color-picker.js +5 -1
- package/components/color-picker/color-picker.lazy.js +1 -1
- package/components/data-table/data-table-class.js +5 -1
- package/components/data-table/data-table.lazy.js +1 -1
- package/components/data-table/data-table.less +1 -1
- package/components/dialog/dialog.js +30 -6
- package/components/dialog/dialog.lazy.js +1 -1
- package/components/fab/fab-rtl.css +1 -1
- package/components/fab/fab.css +1 -1
- package/components/fab/fab.js +15 -3
- package/components/fab/fab.lazy.js +1 -1
- package/components/form/form.lazy.js +1 -1
- package/components/gauge/gauge-class.js +10 -2
- package/components/gauge/gauge.d.ts +2 -2
- package/components/gauge/gauge.lazy.js +1 -1
- package/components/input/input.js +5 -1
- package/components/input/input.lazy.js +1 -1
- package/components/list-index/list-index-class.js +5 -1
- package/components/list-index/list-index.d.ts +1 -1
- package/components/list-index/list-index.lazy.js +1 -1
- package/components/login-screen/login-screen.js +10 -2
- package/components/login-screen/login-screen.lazy.js +1 -1
- package/components/menu/menu.js +10 -2
- package/components/menu/menu.lazy.js +1 -1
- package/components/messagebar/messagebar-class.js +25 -5
- package/components/messagebar/messagebar.lazy.js +1 -1
- package/components/messages/messages-class.js +60 -24
- package/components/messages/messages-rtl.css +1 -1
- package/components/messages/messages.css +1 -1
- package/components/messages/messages.lazy.js +1 -1
- package/components/modal/modal-class.js +10 -0
- package/components/navbar/navbar.js +26 -2
- package/components/notification/notification.d.ts +4 -4
- package/components/panel/panel-class.js +35 -7
- package/components/panel/panel.js +40 -8
- package/components/panel/panel.lazy.js +1 -1
- package/components/photo-browser/photo-browser-class.js +42 -8
- package/components/photo-browser/photo-browser.lazy.js +1 -1
- package/components/picker/picker-class.js +11 -7
- package/components/picker/picker-column.js +34 -270
- package/components/picker/picker-rtl.css +1 -1
- package/components/picker/picker.css +1 -1
- package/components/picker/picker.d.ts +2 -13
- package/components/picker/picker.js +5 -6
- package/components/picker/picker.lazy.js +1 -1
- package/components/picker/picker.less +28 -10
- package/components/pie-chart/pie-chart-class.js +16 -7
- package/components/pie-chart/pie-chart.lazy.js +1 -1
- package/components/popover/popover-class.js +20 -3
- package/components/popover/popover-rtl.css +1 -1
- package/components/popover/popover.css +1 -1
- package/components/popover/popover.d.ts +2 -0
- package/components/popover/popover.js +11 -2
- package/components/popover/popover.lazy.js +1 -1
- package/components/popover/popover.less +3 -0
- package/components/popup/popup-class.js +6 -1
- package/components/popup/popup-rtl.css +1 -1
- package/components/popup/popup.css +1 -1
- package/components/popup/popup.d.ts +4 -0
- package/components/popup/popup.js +11 -2
- package/components/popup/popup.lazy.js +1 -1
- package/components/popup/popup.less +4 -0
- package/components/preloader/preloader-ios.less +3 -0
- package/components/preloader/preloader-rtl.css +1 -1
- package/components/preloader/preloader.css +1 -1
- package/components/preloader/preloader.d.ts +4 -0
- package/components/preloader/preloader.js +10 -2
- package/components/preloader/preloader.lazy.js +1 -1
- package/components/progressbar/progressbar-aurora.less +32 -13
- package/components/progressbar/progressbar-ios.less +19 -7
- package/components/progressbar/progressbar-md.less +64 -28
- package/components/progressbar/progressbar-rtl.css +1 -1
- package/components/progressbar/progressbar.css +1 -1
- package/components/progressbar/progressbar.js +17 -4
- package/components/progressbar/progressbar.lazy.js +1 -1
- package/components/progressbar/progressbar.less +16 -4
- package/components/pull-to-refresh/pull-to-refresh-class.js +5 -1
- package/components/pull-to-refresh/pull-to-refresh.lazy.js +1 -1
- package/components/range/range.d.ts +23 -5
- package/components/range/range.js +10 -2
- package/components/range/range.lazy.js +1 -1
- package/components/searchbar/searchbar-class.js +6 -2
- package/components/searchbar/searchbar.js +20 -4
- package/components/searchbar/searchbar.lazy.js +1 -1
- package/components/sheet/sheet-class.js +21 -2
- package/components/sheet/sheet-rtl.css +1 -1
- package/components/sheet/sheet.css +1 -1
- package/components/sheet/sheet.d.ts +2 -0
- package/components/sheet/sheet.js +11 -2
- package/components/sheet/sheet.lazy.js +1 -1
- package/components/sheet/sheet.less +3 -0
- package/components/smart-select/smart-select-class.js +15 -3
- package/components/smart-select/smart-select.lazy.js +1 -1
- package/components/sortable/sortable.d.ts +5 -1
- package/components/sortable/sortable.js +45 -8
- package/components/sortable/sortable.lazy.js +1 -1
- package/components/statusbar/statusbar.d.ts +9 -9
- package/components/statusbar/statusbar.js +5 -1
- package/components/stepper/stepper.js +10 -2
- package/components/stepper/stepper.lazy.js +1 -1
- package/components/swipeout/swipeout.js +16 -3
- package/components/swipeout/swipeout.lazy.js +1 -1
- package/components/swiper/swiper-rtl.css +1 -1
- package/components/swiper/swiper.css +1 -1
- package/components/swiper/swiper.lazy.js +1 -1
- package/components/tabs/tabs.js +14 -7
- package/components/tabs/tabs.lazy.js +1 -1
- package/components/toast/toast.d.ts +2 -2
- package/components/toggle/toggle-class.js +5 -1
- package/components/toggle/toggle.lazy.js +1 -1
- package/components/toolbar/toolbar-aurora.less +0 -13
- package/components/toolbar/toolbar-md.less +0 -13
- package/components/toolbar/toolbar.js +11 -3
- package/components/toolbar/toolbar.less +13 -0
- package/components/tooltip/tooltip-class.js +5 -1
- package/components/tooltip/tooltip.lazy.js +1 -1
- package/components/touch-ripple/touch-ripple.js +5 -1
- package/components/treeview/treeview.lazy.js +1 -1
- package/components/view/view-class.js +13 -2
- package/components/view/view.d.ts +5 -1
- package/components/view/view.js +2 -0
- package/components/virtual-list/virtual-list-class.js +54 -9
- package/components/virtual-list/virtual-list.d.ts +2 -2
- package/components/virtual-list/virtual-list.lazy.js +1 -1
- package/framework7-bundle-rtl.css +253 -150
- package/framework7-bundle-rtl.min.css +4 -4
- package/framework7-bundle.css +238 -134
- package/framework7-bundle.esm.js +5 -4
- package/framework7-bundle.js +2766 -1222
- package/framework7-bundle.js.map +1 -1
- package/framework7-bundle.less +4 -3
- package/framework7-bundle.min.css +4 -4
- package/framework7-bundle.min.js +4 -4
- package/framework7-bundle.min.js.map +1 -1
- package/framework7-lite-bundle.esm.js +5 -4
- package/framework7-lite.esm.js +3 -3
- package/framework7-rtl.css +12 -21
- package/framework7-rtl.min.css +4 -4
- package/framework7-types.d.ts +5 -1
- package/framework7.css +11 -19
- package/framework7.d.ts +11 -7
- package/framework7.esm.js +3 -3
- package/framework7.js +621 -190
- package/framework7.js.map +1 -1
- package/framework7.less +3 -3
- package/framework7.min.css +4 -4
- package/framework7.min.js +4 -4
- package/framework7.min.js.map +1 -1
- package/modules/component/$h.js +5 -1
- package/modules/component/$jsx.js +5 -1
- package/modules/component/component-class.js +35 -22
- package/modules/component/component.d.ts +2 -2
- package/modules/component/component.js +7 -6
- package/modules/component/eventslisteners.js +5 -1
- package/modules/component/snabbdom/h.js +1 -1
- package/modules/component/vdom.js +32 -17
- package/modules/device/device.js +1 -1
- package/modules/router/back.js +16 -6
- package/modules/router/component-loader.js +34 -23
- package/modules/router/modal.js +5 -1
- package/modules/router/navigate.js +19 -3
- package/modules/router/redirect.js +5 -1
- package/modules/router/router-class.js +39 -10
- package/modules/router/swipe-back.js +7 -6
- package/modules/router/tab.js +6 -2
- package/modules/store/create-store.js +10 -2
- package/package.json +12 -6
- package/shared/$jsx.js +6 -1
- package/shared/class.js +33 -5
- package/shared/constructor-methods.js +25 -4
- package/shared/events-class.js +15 -3
- package/shared/get-device.d.ts +0 -2
- package/shared/get-device.js +10 -6
- package/shared/history.js +12 -1
- package/shared/modal-methods.js +10 -2
- package/shared/request.js +45 -7
- package/shared/utils.js +47 -10
package/components/tabs/tabs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import $ from '../../shared/dom7.js';
|
|
2
2
|
import { extend } from '../../shared/utils.js';
|
|
3
3
|
const Tab = {
|
|
4
|
-
show(
|
|
4
|
+
show() {
|
|
5
5
|
const app = this;
|
|
6
6
|
let tabEl;
|
|
7
7
|
let tabLinkEl;
|
|
@@ -9,6 +9,10 @@ const Tab = {
|
|
|
9
9
|
let tabRoute;
|
|
10
10
|
let animatedInit;
|
|
11
11
|
|
|
12
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
13
|
+
args[_key] = arguments[_key];
|
|
14
|
+
}
|
|
15
|
+
|
|
12
16
|
if (args.length === 1 && args[0] && args[0].constructor === Object) {
|
|
13
17
|
tabEl = args[0].tabEl;
|
|
14
18
|
tabLinkEl = args[0].tabLinkEl;
|
|
@@ -211,12 +215,11 @@ const Tab = {
|
|
|
211
215
|
if ($tabLinkEl && $tabLinkEl.length > 0) {
|
|
212
216
|
$tabLinkEl.addClass('tab-link-active'); // Material Highlight
|
|
213
217
|
|
|
214
|
-
|
|
215
|
-
|
|
218
|
+
const $tabbarEl = $tabLinkEl.parents('.tabbar, .tabbar-labels');
|
|
219
|
+
const hasHighlight = app.toolbar && $tabbarEl.length > 0 && ($tabbarEl.hasClass('tabbar-highlight') || app.theme !== 'ios');
|
|
216
220
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
}
|
|
221
|
+
if (hasHighlight) {
|
|
222
|
+
app.toolbar.setHighlight($tabbarEl);
|
|
220
223
|
}
|
|
221
224
|
}
|
|
222
225
|
}
|
|
@@ -258,7 +261,11 @@ export default {
|
|
|
258
261
|
}
|
|
259
262
|
},
|
|
260
263
|
clicks: {
|
|
261
|
-
'.tab-link': function tabLinkClick($clickedEl, data
|
|
264
|
+
'.tab-link': function tabLinkClick($clickedEl, data) {
|
|
265
|
+
if (data === void 0) {
|
|
266
|
+
data = {};
|
|
267
|
+
}
|
|
268
|
+
|
|
262
269
|
if ($clickedEl.attr('href') && $clickedEl.attr('href').indexOf('#') === 0 || $clickedEl.attr('data-tab')) {
|
|
263
270
|
const app = this;
|
|
264
271
|
app.tab.show({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function framework7ComponentLoader(t,a){void 0===a&&(a=!0);var e=t.$,n=t.utils,i=(t.getDevice,t.getSupport,t.Class,t.Modal,t.ConstructorMethods,t.ModalMethods,n.extend);const s={show(
|
|
1
|
+
(function framework7ComponentLoader(t,a){void 0===a&&(a=!0);var e=t.$,n=t.utils,i=(t.getDevice,t.getSupport,t.Class,t.Modal,t.ConstructorMethods,t.ModalMethods,n.extend);const s={show(){const t=this;let a,n,i,s,r;for(var l=arguments.length,o=new Array(l),b=0;b<l;b++)o[b]=arguments[b];1===o.length&&o[0]&&o[0].constructor===Object?(a=o[0].tabEl,n=o[0].tabLinkEl,i=o[0].animate,s=o[0].tabRoute,r=o[0].animatedInit):([a,n,i,s]=o,"boolean"==typeof o[1]&&([a,i,n,s]=o,o.length>2&&n.constructor===Object&&([a,i,s,n]=o))),void 0===i&&(i=!0);const h=e(a);if(s&&h[0]&&(h[0].f7TabRoute=s),!r&&(0===h.length||h.hasClass("tab-active")))return{$newTabEl:h,newTabEl:h[0]};let d;n&&(d=e(n));const g=h.parent(".tabs");if(0===g.length)return{$newTabEl:h,newTabEl:h[0]};t.swipeout&&(t.swipeout.allowOpen=!0);const c=[];function p(){c.forEach((t=>{t()}))}let f,u=!1;if(g.parent().hasClass("tabs-animated-wrap")){g.parent()[i?"removeClass":"addClass"]("not-animated");const a=parseFloat(g.css("transition-duration").replace(",","."));i&&a&&(g.transitionEnd(p),u=!0);const e=100*(t.rtl?h.index():-h.index());g.transform(`translate3d(${e}%,0,0)`)}g.parent().hasClass("tabs-swipeable-wrap")&&t.swiper&&(f=g.parent()[0].swiper,f&&f.activeIndex!==h.index()?(u=!0,f.once("slideChangeTransitionEnd",(()=>{p()})).slideTo(h.index(),i?void 0:0)):f&&f.animating&&(u=!0,f.once("slideChangeTransitionEnd",(()=>{p()}))));const m=g.children(".tab-active");if(m.removeClass("tab-active"),!r&&(!f||f&&!f.animating||f&&s)&&(m.hasClass("view")&&m.children(".page").length&&m.children(".page").each((a=>{e(a).trigger("page:tabhide"),t.emit("pageTabHide",a)})),m.trigger("tab:hide"),t.emit("tabHide",m[0])),h.addClass("tab-active"),!r&&(!f||f&&!f.animating||f&&s)&&(h.hasClass("view")&&h.children(".page").length&&h.children(".page").each((a=>{e(a).trigger("page:tabshow"),t.emit("pageTabShow",a)})),h.trigger("tab:show"),t.emit("tabShow",h[0])),!d&&(d=e("string"==typeof a?`.tab-link[href="${a}"]`:`.tab-link[href="#${h.attr("id")}"]`),(!d||d&&0===d.length)&&e("[data-tab]").each((t=>{h.is(e(t).attr("data-tab"))&&(d=e(t))})),s&&(!d||d&&0===d.length)&&(d=e(`[data-route-tab-id="${s.route.tab.id}"]`),0===d.length&&(d=e(`.tab-link[href="${s.url}"]`))),d.length>1&&h.parents(".page").length&&(d=d.filter((t=>e(t).parents(".page")[0]===h.parents(".page")[0])),"ios"===t.theme&&0===d.length&&s))){const a=h.parents(".page"),n=e(t.navbar.getElByPage(a));d=n.find(`[data-route-tab-id="${s.route.tab.id}"]`),0===d.length&&(d=n.find(`.tab-link[href="${s.url}"]`))}if(d.length>0){let a;if(m&&m.length>0){const t=m.attr("id");t&&(a=e(`.tab-link[href="#${t}"]`),(!a||a&&0===a.length)&&(a=e(`.tab-link[data-route-tab-id="${t}"]`))),(!a||a&&0===a.length)&&e("[data-tab]").each((t=>{m.is(e(t).attr("data-tab"))&&(a=e(t))})),(!a||a&&0===a.length)&&(a=d.siblings(".tab-link-active"))}else s&&(a=d.siblings(".tab-link-active"));if(a&&a.length>1&&m&&m.parents(".page").length&&(a=a.filter((t=>e(t).parents(".page")[0]===m.parents(".page")[0]))),a&&a.length>0&&a.removeClass("tab-link-active"),d&&d.length>0){d.addClass("tab-link-active");const a=d.parents(".tabbar, .tabbar-labels");t.toolbar&&a.length>0&&(a.hasClass("tabbar-highlight")||"ios"!==t.theme)&&t.toolbar.setHighlight(a)}}return{$newTabEl:h,newTabEl:h[0],$oldTabEl:m,oldTabEl:m[0],onTabsChanged:function(t){c.push(t)},animated:u}}};var r={name:"tabs",create(){i(this,{tab:{show:s.show.bind(this)}})},on:{"pageInit tabMounted":function(t){const a=e(t.el||t).find(".tabs-animated-wrap > .tabs > .tab-active")[0];if(!a)return;this.tab.show({tabEl:a,animatedInit:!0,animate:!1})}},clicks:{".tab-link":function(t,a){if(void 0===a&&(a={}),t.attr("href")&&0===t.attr("href").indexOf("#")||t.attr("data-tab")){this.tab.show({tabEl:a.tab||t.attr("href"),tabLinkEl:t,animate:a.animate})}}}};if(a){if(t.prototype.modules&&t.prototype.modules[r.name])return;t.use(r),t.instance&&(t.instance.useModuleParams(r,t.instance.params),t.instance.useModule(r))}return r}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
|
|
@@ -4,7 +4,11 @@ import Framework7Class from '../../shared/class.js';
|
|
|
4
4
|
import { getSupport } from '../../shared/get-support.js';
|
|
5
5
|
|
|
6
6
|
class Toggle extends Framework7Class {
|
|
7
|
-
constructor(app, params
|
|
7
|
+
constructor(app, params) {
|
|
8
|
+
if (params === void 0) {
|
|
9
|
+
params = {};
|
|
10
|
+
}
|
|
11
|
+
|
|
8
12
|
super(params, [app]);
|
|
9
13
|
const toggle = this;
|
|
10
14
|
const support = getSupport();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var o=e.$,s=e.utils,a=(e.getDevice,e.getSupport),n=e.Class,l=(e.Modal,e.ConstructorMethods),i=(e.ModalMethods,s.extend),c=s.now,g=s.nextTick,r=s.deleteProps;class d extends n{constructor(e,t={})
|
|
1
|
+
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var o=e.$,s=e.utils,a=(e.getDevice,e.getSupport),n=e.Class,l=(e.Modal,e.ConstructorMethods),i=(e.ModalMethods,s.extend),c=s.now,g=s.nextTick,r=s.deleteProps;class d extends n{constructor(e,t){void 0===t&&(t={}),super(t,[e]);const s=this,n=a(),l={};s.useModulesParams(l),s.params=i(l,t);const r=s.params.el;if(!r)return s;const d=o(r);if(0===d.length)return s;if(d[0].f7Toggle)return d[0].f7Toggle;const h=d.children('input[type="checkbox"]');let u;i(s,{app:e,$el:d,el:d[0],$inputEl:h,inputEl:h[0],disabled:d.hasClass("disabled")||h.hasClass("disabled")||h.attr("disabled")||h[0].disabled}),Object.defineProperty(s,"checked",{enumerable:!0,configurable:!0,set(e){s&&void 0!==s.$inputEl&&s.checked!==e&&(h[0].checked=e,s.$inputEl.trigger("change"))},get:()=>h[0].checked}),d[0].f7Toggle=s;const f={};let p,v,m,b,y;function T(e){u||s.disabled||(f.x="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,f.y="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,v=0,u=!0,p=void 0,b=c(),y=s.checked,m=d[0].offsetWidth,g((()=>{u&&d.addClass("toggle-active-state")})))}function M(t){if(!u||s.disabled)return;const o="touchmove"===t.type?t.targetTouches[0].pageX:t.pageX,a="touchmove"===t.type?t.targetTouches[0].pageY:t.pageY,n=e.rtl?-1:1;if(void 0===p&&(p=!!(p||Math.abs(a-f.y)>Math.abs(o-f.x))),p)return void(u=!1);let l;t.preventDefault(),v=o-f.x,v*n<0&&Math.abs(v)>m/3&&y&&(l=!0),v*n>0&&Math.abs(v)>m/3&&!y&&(l=!0),l&&(f.x=o,s.checked=!y,y=!y)}function k(){if(!u||s.disabled)return p&&d.removeClass("toggle-active-state"),void(u=!1);const t=e.rtl?-1:1;let o;u=!1,d.removeClass("toggle-active-state"),c()-b<300&&(v*t<0&&y&&(o=!0),v*t>0&&!y&&(o=!0),o&&(s.checked=!y))}function E(){s.$el.trigger("toggle:change"),s.emit("local::change toggleChange",s)}s.attachEvents=function(){const t=!!n.passiveListener&&{passive:!0};d.on(e.touchEvents.start,T,t),e.on("touchmove",M),e.on("touchend:passive",k),s.$inputEl.on("change",E)},s.detachEvents=function(){const t=!!n.passiveListener&&{passive:!0};d.off(e.touchEvents.start,T,t),e.off("touchmove",M),e.off("touchend:passive",k),s.$inputEl.off("change",E)},s.useModules(),s.init()}toggle(){this.checked=!this.checked}init(){this.attachEvents()}destroy(){let e=this;e.$el.trigger("toggle:beforedestroy"),e.emit("local::beforeDestroy toggleBeforeDestroy",e),delete e.$el[0].f7Toggle,e.detachEvents(),r(e),e=null}}var h={name:"toggle",create(){this.toggle=l({defaultSelector:".toggle",constructor:d,app:this,domProp:"f7Toggle"})},static:{Toggle:d},on:{tabMounted(e){const t=this;o(e).find(".toggle-init").each((e=>t.toggle.create({el:e})))},tabBeforeRemove(e){o(e).find(".toggle-init").each((e=>{e.f7Toggle&&e.f7Toggle.destroy()}))},pageInit(e){const t=this;e.$el.find(".toggle-init").each((e=>t.toggle.create({el:e})))},pageBeforeRemove(e){e.$el.find(".toggle-init").each((e=>{e.f7Toggle&&e.f7Toggle.destroy()}))}},vnode:{"toggle-init":{insert(e){const t=e.elm;this.toggle.create({el:t})},destroy(e){const t=e.elm;t.f7Toggle&&t.f7Toggle.destroy()}}}};if(t){if(e.prototype.modules&&e.prototype.modules[h.name])return;e.use(h),e.instance&&(e.instance.useModuleParams(h,e.instance.params),e.instance.useModule(h))}return h}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
|
|
@@ -10,19 +10,6 @@
|
|
|
10
10
|
}
|
|
11
11
|
.tabbar,
|
|
12
12
|
.tabbar-labels {
|
|
13
|
-
.tab-link-highlight {
|
|
14
|
-
position: absolute;
|
|
15
|
-
left: 0;
|
|
16
|
-
height: 2px;
|
|
17
|
-
background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
|
|
18
|
-
transition-duration: 300ms;
|
|
19
|
-
.ltr({
|
|
20
|
-
left: 0;
|
|
21
|
-
});
|
|
22
|
-
.rtl({
|
|
23
|
-
right: 0;
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
13
|
.toolbar-inner {
|
|
27
14
|
padding-left: 0;
|
|
28
15
|
padding-right: 0;
|
|
@@ -26,19 +26,6 @@
|
|
|
26
26
|
overflow: hidden;
|
|
27
27
|
position: relative;
|
|
28
28
|
}
|
|
29
|
-
.tab-link-highlight {
|
|
30
|
-
position: absolute;
|
|
31
|
-
left: 0;
|
|
32
|
-
height: 2px;
|
|
33
|
-
background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
|
|
34
|
-
transition-duration: 300ms;
|
|
35
|
-
.ltr({
|
|
36
|
-
left: 0;
|
|
37
|
-
});
|
|
38
|
-
.rtl({
|
|
39
|
-
right: 0;
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
29
|
}
|
|
43
30
|
|
|
44
31
|
.tabbar-labels {
|
|
@@ -3,8 +3,8 @@ import { nextFrame, bindMethods } from '../../shared/utils.js';
|
|
|
3
3
|
const Toolbar = {
|
|
4
4
|
setHighlight(tabbarEl) {
|
|
5
5
|
const app = this;
|
|
6
|
-
if (app.theme === 'ios') return;
|
|
7
6
|
const $tabbarEl = $(tabbarEl);
|
|
7
|
+
if (app.theme === 'ios' && !$tabbarEl.hasClass('tabbar-highlight')) return;
|
|
8
8
|
if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-labels'))) return;
|
|
9
9
|
let $highlightEl = $tabbarEl.find('.tab-link-highlight');
|
|
10
10
|
const tabLinksCount = $tabbarEl.find('.tab-link').length;
|
|
@@ -44,7 +44,11 @@ const Toolbar = {
|
|
|
44
44
|
app.toolbar.setHighlight(tabbarEl);
|
|
45
45
|
},
|
|
46
46
|
|
|
47
|
-
hide(el, animate
|
|
47
|
+
hide(el, animate) {
|
|
48
|
+
if (animate === void 0) {
|
|
49
|
+
animate = true;
|
|
50
|
+
}
|
|
51
|
+
|
|
48
52
|
const app = this;
|
|
49
53
|
const $el = $(el);
|
|
50
54
|
if ($el.hasClass('toolbar-hidden')) return;
|
|
@@ -57,7 +61,11 @@ const Toolbar = {
|
|
|
57
61
|
app.emit('toolbarHide', $el[0]);
|
|
58
62
|
},
|
|
59
63
|
|
|
60
|
-
show(el, animate
|
|
64
|
+
show(el, animate) {
|
|
65
|
+
if (animate === void 0) {
|
|
66
|
+
animate = true;
|
|
67
|
+
}
|
|
68
|
+
|
|
61
69
|
const app = this;
|
|
62
70
|
const $el = $(el);
|
|
63
71
|
if (!$el.hasClass('toolbar-hidden')) return;
|
|
@@ -153,6 +153,19 @@
|
|
|
153
153
|
height: var(--f7-tabbar-icon-size);
|
|
154
154
|
line-height: var(--f7-tabbar-icon-size);
|
|
155
155
|
}
|
|
156
|
+
.tab-link-highlight {
|
|
157
|
+
position: absolute;
|
|
158
|
+
left: 0;
|
|
159
|
+
height: 2px;
|
|
160
|
+
background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
|
|
161
|
+
transition-duration: 300ms;
|
|
162
|
+
.ltr({
|
|
163
|
+
left: 0;
|
|
164
|
+
});
|
|
165
|
+
.rtl({
|
|
166
|
+
right: 0;
|
|
167
|
+
});
|
|
168
|
+
}
|
|
156
169
|
}
|
|
157
170
|
.tabbar-labels {
|
|
158
171
|
--f7-toolbar-height: var(--f7-tabbar-labels-height);
|
|
@@ -5,7 +5,11 @@ import { getSupport } from '../../shared/get-support.js';
|
|
|
5
5
|
import Framework7Class from '../../shared/class.js';
|
|
6
6
|
|
|
7
7
|
class Tooltip extends Framework7Class {
|
|
8
|
-
constructor(app, params
|
|
8
|
+
constructor(app, params) {
|
|
9
|
+
if (params === void 0) {
|
|
10
|
+
params = {};
|
|
11
|
+
}
|
|
12
|
+
|
|
9
13
|
super(params, [app]);
|
|
10
14
|
const tooltip = this;
|
|
11
15
|
const support = getSupport();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=t.$,a=t.utils,i=(t.getDevice,t.getSupport),r=t.Class,n=(t.Modal,t.ConstructorMethods),s=(t.ModalMethods,a.extend),l=a.deleteProps;class p extends r{constructor(t,e={})
|
|
1
|
+
(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=t.$,a=t.utils,i=(t.getDevice,t.getSupport),r=t.Class,n=(t.Modal,t.ConstructorMethods),s=(t.ModalMethods,a.extend),l=a.deleteProps;class p extends r{constructor(t,e){void 0===e&&(e={}),super(e,[t]);const a=this,r=i(),n=s({},t.params.tooltip),l=getDocument();a.useModulesParams(n),a.params=s(n,e),void 0===e.offset&&r.touch&&"hover"===a.params.trigger&&(a.params.offset=10);const{targetEl:p,containerEl:c}=a.params;if(!p&&!a.params.delegated)return a;const d=o(p);if(0===d.length&&!a.params.delegated)return a;if(d[0]&&d[0].f7Tooltip&&!a.params.delegated)return d[0].f7Tooltip;let h=o(c||t.$el).eq(0);0===h.length&&(h=t.$el);const g=o(a.render()).eq(0);s(a,{app:t,$targetEl:d,targetEl:d&&d[0],$containerEl:h,containerEl:h&&h[0],$el:g,el:g&&g[0],text:a.params.text||"",visible:!1,opened:!1}),d[0]&&(d[0].f7Tooltip=a);const f={};let u;function m(){a.opened?a.hide():a.show(this)}function v(t){a.opened&&(o(t.target).closest(d).length||o(t.target).closest(a.$el).length)||a.hide()}function E(t){u||(u=!0,f.x="touchstart"===t.type?t.targetTouches[0].pageX:t.pageX,f.y="touchstart"===t.type?t.targetTouches[0].pageY:t.pageY,a.show(this))}function $(t){if(!u)return;const e="touchmove"===t.type?t.targetTouches[0].pageX:t.pageX,o="touchmove"===t.type?t.targetTouches[0].pageY:t.pageY;((e-f.x)**2+(o-f.y)**2)**.5>50&&(u=!1,a.hide())}function T(){u&&(u=!1,a.hide())}function w(){a.show(this)}function y(){a.hide()}function x(){g.hasClass("tooltip-in")||g.removeClass("tooltip-out").remove()}return a.attachEvents=function(){if(g.on("transitionend",x),"click"===a.params.trigger)return a.params.delegated?o(l).on("click",a.params.targetEl,m):a.$targetEl.on("click",m),void o("html").on("click",v);if("manual"!==a.params.trigger)if(r.touch){const e=!!r.passiveListener&&{passive:!0};a.params.delegated?o(l).on(t.touchEvents.start,a.params.targetEl,E,e):a.$targetEl.on(t.touchEvents.start,E,e),t.on("touchmove",$),t.on("touchend:passive",T)}else a.params.delegated?(o(l).on(r.pointerEvents?"pointerenter":"mouseenter",a.params.targetEl,w,!0),o(l).on(r.pointerEvents?"pointerleave":"mouseleave",a.params.targetEl,y,!0)):(a.$targetEl.on(r.pointerEvents?"pointerenter":"mouseenter",w),a.$targetEl.on(r.pointerEvents?"pointerleave":"mouseleave",y))},a.detachEvents=function(){if(g.off("transitionend",x),"click"===a.params.trigger)return a.params.delegated?o(l).on("click",a.params.targetEl,m):a.$targetEl.off("click",m),void o("html").off("click",v);if("manual"!==a.params.trigger)if(r.touch){const e=!!r.passiveListener&&{passive:!0};a.params.delegated?o(l).off(t.touchEvents.start,a.params.targetEl,E,e):a.$targetEl.off(t.touchEvents.start,E,e),t.off("touchmove",$),t.off("touchend:passive",T)}else a.params.delegated?(o(l).off(r.pointerEvents?"pointerenter":"mouseenter",a.params.targetEl,w,!0),o(l).off(r.pointerEvents?"pointerleave":"mouseleave",a.params.targetEl,y,!0)):(a.$targetEl.off(r.pointerEvents?"pointerenter":"mouseenter",w),a.$targetEl.off(r.pointerEvents?"pointerleave":"mouseleave",y))},a.useModules(),a.init(),a}setTargetEl(t){const e=this;return e.detachEvents(),e.$targetEl=o(t),e.targetEl=e.$targetEl[0],e.attachEvents(),e}position(t){const e=this,{$el:a,app:i,$containerEl:r}=e,n=!!e.params.containerEl,s=e.params.offset||0;a.css({left:"",top:""});const l=o(t||e.targetEl),[p,c]=[a.width(),a.height()];let d,h,g,f;a.css({left:"",top:""});const u=n&&r.length?r[0].getBoundingClientRect():i;if(l&&l.length>0){if(d=l.outerWidth(),h=l.outerHeight(),void 0===d&&void 0===h){const t=l[0].getBoundingClientRect();d=t.width,h=t.height}const t=l.offset();g=t.left-u.left,f=t.top-u.top;const e=l.parents(".page");e.length>0&&(f-=e[0].scrollTop)}let[m,v]=[0,0,0],E="top";c+s<f?v=f-c-s:c<u.height-f-h?(E="bottom",v=f+h+s):(E="middle",v=h/2+f-c/2,v<=0?v=8:v+c>=u.height&&(v=u.height-c-8)),"top"===E||"bottom"===E?(m=d/2+g-p/2,m<8&&(m=8),m+p>u.width&&(m=u.width-p-8),m<0&&(m=0)):"middle"===E&&(m=g-p,(m<8||m+p>u.width)&&(m<8&&(m=g+d),m+p>u.width&&(m=u.width-p-8))),a.css({top:`${v}px`,left:`${m}px`})}show(t){const e=this,{$el:a,$targetEl:i,$containerEl:r}=e;r[0]&&a[0]&&!r[0].contains(a[0])&&r.append(a),e.position(t);const n=o(t);return e.visible=!0,e.opened=!0,i.trigger("tooltip:show"),a.trigger("tooltip:show"),n.length&&n[0]!==i[0]&&n.trigger("tooltip:show"),e.emit("local::show tooltipShow",e),a.removeClass("tooltip-out").addClass("tooltip-in"),e}hide(){const t=this,{$el:e,$targetEl:o}=t;return t.visible=!1,t.opened=!1,o.trigger("tooltip:hide"),e.trigger("tooltip:hide"),t.emit("local::hide tooltipHide",t),e.addClass("tooltip-out").removeClass("tooltip-in"),t}render(){const t=this;if(t.params.render)return t.params.render.call(t,t);const{cssClass:e,text:o}=t.params;return`\n <div class="tooltip ${e||""}">\n <div class="tooltip-content">${o||""}</div>\n </div>\n `.trim()}setText(t){const e=this;return void 0===t||(e.params.text=t,e.text=t,e.$el&&e.$el.children(".tooltip-content").html(t),e.opened&&e.position()),e}init(){this.attachEvents()}destroy(){const t=this;t.$targetEl&&!t.destroyed&&(t.$targetEl.trigger("tooltip:beforedestroy"),t.emit("local::beforeDestroy tooltipBeforeDestroy",t),t.$el.remove(),t.$targetEl[0]&&delete t.$targetEl[0].f7Tooltip,t.detachEvents(),l(t),t.destroyed=!0)}}var c={name:"tooltip",static:{Tooltip:p},create(){const t=this;t.tooltip=n({defaultSelector:".tooltip",constructor:p,app:t,domProp:"f7Tooltip"}),t.tooltip.show=function(t){const e=o(t);if(0===e.length)return;const a=e[0].f7Tooltip;return a?(a.show(e[0]),a):void 0},t.tooltip.hide=function(t){const e=o(t);if(0===e.length)return;const a=e[0].f7Tooltip;return a?(a.hide(),a):void 0},t.tooltip.setText=function(t,e){const a=o(t);if(0===a.length)return;const i=a[0].f7Tooltip;return i?(i.setText(e),i):void 0}},params:{tooltip:{targetEl:null,delegated:!1,text:null,cssClass:null,render:null,offset:0,trigger:"hover",containerEl:void 0}},on:{tabMounted(t){const e=this;o(t).find(".tooltip-init").each((t=>{const a=o(t).attr("data-tooltip");a&&e.tooltip.create({targetEl:t,text:a})}))},tabBeforeRemove(t){o(t).find(".tooltip-init").each((t=>{t.f7Tooltip&&t.f7Tooltip.destroy()}))},pageInit(t){const e=this;t.$el.find(".tooltip-init").each((t=>{const a=o(t).attr("data-tooltip");a&&e.tooltip.create({targetEl:t,text:a})})),"ios"===e.theme&&t.view&&t.view.router.dynamicNavbar&&t.$navbarEl&&t.$navbarEl.length>0&&t.$navbarEl.find(".tooltip-init").each((t=>{const a=o(t).attr("data-tooltip");a&&e.tooltip.create({targetEl:t,text:a})}))},pageBeforeRemove(t){t.$el.find(".tooltip-init").each((t=>{t.f7Tooltip&&t.f7Tooltip.destroy()})),"ios"===this.theme&&t.view&&t.view.router.dynamicNavbar&&t.$navbarEl&&t.$navbarEl.length>0&&t.$navbarEl.find(".tooltip-init").each((t=>{t.f7Tooltip&&t.f7Tooltip.destroy()}))}},vnode:{"tooltip-init":{insert(t){const e=t.elm,a=o(e).attr("data-tooltip");a&&this.tooltip.create({targetEl:e,text:a})},update(t){const e=t.elm;e.f7Tooltip&&t&&t.data&&t.data.attrs&&t.data.attrs["data-tooltip"]&&e.f7Tooltip.setText(t.data.attrs["data-tooltip"])},destroy(t){const e=t.elm;e.f7Tooltip&&e.f7Tooltip.destroy()}}}};if(e){if(t.prototype.modules&&t.prototype.modules[c.name])return;t.use(c),t.instance&&(t.instance.useModuleParams(c,t.instance.params),t.instance.useModule(c))}return c}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
|
|
@@ -8,7 +8,11 @@ export default {
|
|
|
8
8
|
create() {
|
|
9
9
|
const app = this;
|
|
10
10
|
app.touchRipple = {
|
|
11
|
-
create(
|
|
11
|
+
create() {
|
|
12
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
13
|
+
args[_key] = arguments[_key];
|
|
14
|
+
}
|
|
15
|
+
|
|
12
16
|
return new TouchRipple(...args);
|
|
13
17
|
}
|
|
14
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var r=e.$,o=e.utils,i=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,o.
|
|
1
|
+
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var r=e.$,o=e.utils,i=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,o.iosPreloaderContent),n=o.mdPreloaderContent,s=o.auroraPreloaderContent,l=o.bindMethods;const d={open(e){const t=this,o=r(e).eq(0);if(o.length&&(o.addClass("treeview-item-opened"),o.trigger("treeview:open"),t.emit("treeviewOpen",o[0]),o.hasClass("treeview-load-children")&&!o[0].f7TreeviewChildrenLoaded)){const e={iosPreloaderContent:i,mdPreloaderContent:n,auroraPreloaderContent:s};o.trigger("treeview:loadchildren",l),t.emit("treeviewLoadChildren",o[0],l),o.find(".treeview-toggle").addClass("treeview-toggle-hidden"),o.find(".treeview-item-root").prepend(`<div class="preloader treeview-preloader">${e[`${t.theme}PreloaderContent`]}</div>`)}function l(e){e?(o.removeClass("treeview-item-opened"),o.trigger("treeview:close"),t.emit("treeviewClose",o[0])):o[0].f7TreeviewChildrenLoaded=!0,o.find(".treeview-toggle").removeClass("treeview-toggle-hidden"),o.find(".treeview-preloader").remove()}},close(e){const t=r(e).eq(0);t.length&&(t.removeClass("treeview-item-opened"),t.trigger("treeview:close"),this.emit("treeviewClose",t[0]))},toggle(e){const t=r(e).eq(0);if(!t.length)return;const o=t.hasClass("treeview-item-opened");this.treeview[o?"close":"open"](t)}};var a={name:"treeview",create(){l(this,{treeview:d})},clicks:{".treeview-toggle":function(e,t,r){if(e.parents(".treeview-item-toggle").length)return;const o=e.parents(".treeview-item").eq(0);o.length&&(r.preventF7Router=!0,this.treeview.toggle(o[0]))},".treeview-item-toggle":function(e,t,r){const o=e.closest(".treeview-item").eq(0);o.length&&(r.preventF7Router=!0,this.treeview.toggle(o[0]))}}};if(t){if(e.prototype.modules&&e.prototype.modules[a.name])return;e.use(a),e.instance&&(e.instance.useModuleParams(a,e.instance.params),e.instance.useModule(a))}return a}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
|
|
@@ -5,7 +5,11 @@ import Framework7Class from '../../shared/class.js';
|
|
|
5
5
|
import resizableView from './resizable-view.js';
|
|
6
6
|
|
|
7
7
|
class View extends Framework7Class {
|
|
8
|
-
constructor(app, el, viewParams
|
|
8
|
+
constructor(app, el, viewParams) {
|
|
9
|
+
if (viewParams === void 0) {
|
|
10
|
+
viewParams = {};
|
|
11
|
+
}
|
|
12
|
+
|
|
9
13
|
super(viewParams, [app]);
|
|
10
14
|
const view = this;
|
|
11
15
|
const ssr = view.params.routerId;
|
|
@@ -207,7 +211,14 @@ class View extends Framework7Class {
|
|
|
207
211
|
view.initMasterDetail();
|
|
208
212
|
}
|
|
209
213
|
|
|
210
|
-
view.
|
|
214
|
+
if (view.params.initRouterOnTabShow && view.$el.hasClass('tab') && !view.$el.hasClass('tab-active')) {
|
|
215
|
+
view.$el.once('tab:show', () => {
|
|
216
|
+
view.router.init();
|
|
217
|
+
});
|
|
218
|
+
} else {
|
|
219
|
+
view.router.init();
|
|
220
|
+
}
|
|
221
|
+
|
|
211
222
|
view.$el.trigger('view:init');
|
|
212
223
|
view.emit('local::init viewInit', view);
|
|
213
224
|
}
|
|
@@ -26,6 +26,8 @@ export namespace View {
|
|
|
26
26
|
destroy(): void;
|
|
27
27
|
}
|
|
28
28
|
interface Parameters {
|
|
29
|
+
/** If enabled and View is tab, it won't initialize router and load initial page until View tab becomes visible */
|
|
30
|
+
initRouterOnTabShow?: boolean;
|
|
29
31
|
/** View name. If view was created with name, then it may be accessed via app.views.[name] */
|
|
30
32
|
name?: string;
|
|
31
33
|
/** Specify whether this is View is main or not. If not passed then will be determined based on whether its element has view-main class or not */
|
|
@@ -142,7 +144,7 @@ export namespace View {
|
|
|
142
144
|
auroraSwipeBackAnimateShadow?: boolean;
|
|
143
145
|
/** Enable/disable opacity animation during swipe back action. You can disable it to improve performance. For Aurora theme */
|
|
144
146
|
auroraSwipeBackAnimateOpacity?: boolean;
|
|
145
|
-
/** If you develop web app (not
|
|
147
|
+
/** If you develop web app (not Cordova/Capacitor or Home Screen web app) it is useful to enable hash navigation (browser url will look like "http://my-webapp.com/#!/about.html"). User as well will be able to navigate through app's history by using browser's default back and forward buttons. */
|
|
146
148
|
browserHistory?: boolean;
|
|
147
149
|
/** Browser history root URL, for example "http://my-app.com/". It is useful only in case when you use empty ("") browserHistorySeparator */
|
|
148
150
|
browserHistoryRoot?: string;
|
|
@@ -158,6 +160,8 @@ export namespace View {
|
|
|
158
160
|
browserHistoryInitialMatch?: boolean;
|
|
159
161
|
/** When enabled (by default), it will store router history in localStorage and try to restore it on next web app visit */
|
|
160
162
|
browserHistoryStoreHistory?: boolean;
|
|
163
|
+
/** When "replace" (by default), it will replace state on routable tabs change, otherwise (if "push"), it will add to history every routable tab change, so it will be possible to switch back between tabs with browser back button */
|
|
164
|
+
browserHistoryTabs?: 'replace' | 'push';
|
|
161
165
|
/** Object with events handlers.. */
|
|
162
166
|
on?: {
|
|
163
167
|
[event in keyof Events]?: Events[event];
|
package/components/view/view.js
CHANGED
|
@@ -48,6 +48,7 @@ export default {
|
|
|
48
48
|
params: {
|
|
49
49
|
view: {
|
|
50
50
|
init: true,
|
|
51
|
+
initRouterOnTabShow: false,
|
|
51
52
|
name: undefined,
|
|
52
53
|
main: false,
|
|
53
54
|
router: true,
|
|
@@ -98,6 +99,7 @@ export default {
|
|
|
98
99
|
browserHistoryOnLoad: true,
|
|
99
100
|
browserHistoryInitialMatch: false,
|
|
100
101
|
browserHistoryStoreHistory: true,
|
|
102
|
+
browserHistoryTabs: 'replace',
|
|
101
103
|
// Animate Pages
|
|
102
104
|
animate: true,
|
|
103
105
|
// iOS Dynamic Navbar
|
|
@@ -5,7 +5,11 @@ import Framework7Class from '../../shared/class.js';
|
|
|
5
5
|
import { getDevice } from '../../shared/get-device.js';
|
|
6
6
|
|
|
7
7
|
class VirtualList extends Framework7Class {
|
|
8
|
-
constructor(app, params
|
|
8
|
+
constructor(app, params) {
|
|
9
|
+
if (params === void 0) {
|
|
10
|
+
params = {};
|
|
11
|
+
}
|
|
12
|
+
|
|
9
13
|
super(params, [app]);
|
|
10
14
|
const vl = this;
|
|
11
15
|
const device = getDevice();
|
|
@@ -122,7 +126,8 @@ class VirtualList extends Framework7Class {
|
|
|
122
126
|
rowsToRender: undefined,
|
|
123
127
|
maxBufferHeight: 0,
|
|
124
128
|
listHeight: undefined,
|
|
125
|
-
dynamicHeight: typeof vl.params.height === 'function'
|
|
129
|
+
dynamicHeight: typeof vl.params.height === 'function',
|
|
130
|
+
autoHeight: vl.params.height === 'auto'
|
|
126
131
|
}); // Install Modules
|
|
127
132
|
|
|
128
133
|
vl.useModules(); // Attach events
|
|
@@ -163,10 +168,13 @@ class VirtualList extends Framework7Class {
|
|
|
163
168
|
return vl;
|
|
164
169
|
}
|
|
165
170
|
|
|
166
|
-
setListSize() {
|
|
171
|
+
setListSize(autoHeightRerender) {
|
|
167
172
|
const vl = this;
|
|
168
173
|
const items = vl.filteredItems || vl.items;
|
|
169
|
-
|
|
174
|
+
|
|
175
|
+
if (!autoHeightRerender) {
|
|
176
|
+
vl.pageHeight = vl.$scrollableParentEl[0].offsetHeight;
|
|
177
|
+
}
|
|
170
178
|
|
|
171
179
|
if (vl.dynamicHeight) {
|
|
172
180
|
vl.listHeight = 0;
|
|
@@ -177,6 +185,31 @@ class VirtualList extends Framework7Class {
|
|
|
177
185
|
vl.listHeight += itemHeight;
|
|
178
186
|
vl.heights.push(itemHeight);
|
|
179
187
|
}
|
|
188
|
+
} else if (vl.autoHeight) {
|
|
189
|
+
vl.listHeight = 0;
|
|
190
|
+
if (!vl.heights) vl.heights = [];
|
|
191
|
+
if (!vl.heightsCalculated) vl.heightsCalculated = [];
|
|
192
|
+
const renderedItems = {};
|
|
193
|
+
vl.$itemsWrapEl.find(`[data-virtual-list-index]`).forEach(el => {
|
|
194
|
+
renderedItems[parseInt(el.getAttribute('data-virtual-list-index'), 10)] = el;
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
for (let i = 0; i < items.length; i += 1) {
|
|
198
|
+
const renderedItem = renderedItems[i];
|
|
199
|
+
|
|
200
|
+
if (renderedItem) {
|
|
201
|
+
if (!vl.heightsCalculated.includes(i)) {
|
|
202
|
+
vl.heights[i] = renderedItem.offsetHeight;
|
|
203
|
+
vl.heightsCalculated.push(i);
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
if (typeof vl.heights[i] === 'undefined') {
|
|
208
|
+
vl.heights[i] = 40;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
vl.listHeight += vl.heights[i];
|
|
212
|
+
}
|
|
180
213
|
} else {
|
|
181
214
|
vl.listHeight = Math.ceil(items.length / vl.params.cols) * vl.params.height;
|
|
182
215
|
vl.rowsPerScreen = Math.ceil(vl.pageHeight / vl.params.height);
|
|
@@ -211,7 +244,7 @@ class VirtualList extends Framework7Class {
|
|
|
211
244
|
let heightBeforeFirstItem = 0;
|
|
212
245
|
let heightBeforeLastItem = 0;
|
|
213
246
|
|
|
214
|
-
if (vl.dynamicHeight) {
|
|
247
|
+
if (vl.dynamicHeight || vl.autoHeight) {
|
|
215
248
|
let itemTop = 0;
|
|
216
249
|
let itemHeight;
|
|
217
250
|
vl.maxBufferHeight = vl.pageHeight;
|
|
@@ -278,7 +311,7 @@ class VirtualList extends Framework7Class {
|
|
|
278
311
|
|
|
279
312
|
|
|
280
313
|
if (i === fromIndex) {
|
|
281
|
-
if (vl.dynamicHeight) {
|
|
314
|
+
if (vl.dynamicHeight || vl.autoHeight) {
|
|
282
315
|
topPosition = heightBeforeFirstItem;
|
|
283
316
|
} else {
|
|
284
317
|
topPosition = i * vl.params.height / vl.params.cols;
|
|
@@ -296,7 +329,7 @@ class VirtualList extends Framework7Class {
|
|
|
296
329
|
|
|
297
330
|
|
|
298
331
|
if (!vl.updatableScroll) {
|
|
299
|
-
if (vl.dynamicHeight) {
|
|
332
|
+
if (vl.dynamicHeight || vl.autoHeight) {
|
|
300
333
|
vl.itemsWrapEl.style.height = `${heightBeforeLastItem}px`;
|
|
301
334
|
} else {
|
|
302
335
|
vl.itemsWrapEl.style.height = `${i * vl.params.height / vl.params.cols}px`;
|
|
@@ -336,10 +369,20 @@ class VirtualList extends Framework7Class {
|
|
|
336
369
|
items: renderExternalItems
|
|
337
370
|
});
|
|
338
371
|
}
|
|
372
|
+
|
|
373
|
+
if (vl.autoHeight) {
|
|
374
|
+
requestAnimationFrame(() => {
|
|
375
|
+
vl.setListSize(true);
|
|
376
|
+
});
|
|
377
|
+
}
|
|
339
378
|
} // Filter
|
|
340
379
|
|
|
341
380
|
|
|
342
|
-
filterItems(indexes, resetScrollTop
|
|
381
|
+
filterItems(indexes, resetScrollTop) {
|
|
382
|
+
if (resetScrollTop === void 0) {
|
|
383
|
+
resetScrollTop = true;
|
|
384
|
+
}
|
|
385
|
+
|
|
343
386
|
const vl = this;
|
|
344
387
|
vl.filteredItems = [];
|
|
345
388
|
|
|
@@ -372,7 +415,7 @@ class VirtualList extends Framework7Class {
|
|
|
372
415
|
if (index > vl.items.length) return false;
|
|
373
416
|
let itemTop = 0;
|
|
374
417
|
|
|
375
|
-
if (vl.dynamicHeight) {
|
|
418
|
+
if (vl.dynamicHeight || vl.autoHeight) {
|
|
376
419
|
for (let i = 0; i < index; i += 1) {
|
|
377
420
|
itemTop += vl.heights[i];
|
|
378
421
|
}
|
|
@@ -400,6 +443,7 @@ class VirtualList extends Framework7Class {
|
|
|
400
443
|
const vl = this;
|
|
401
444
|
|
|
402
445
|
if (vl.isVisible()) {
|
|
446
|
+
vl.heightsCalculated = [];
|
|
403
447
|
vl.setListSize();
|
|
404
448
|
vl.render(true);
|
|
405
449
|
}
|
|
@@ -600,6 +644,7 @@ class VirtualList extends Framework7Class {
|
|
|
600
644
|
vl.domCache = {};
|
|
601
645
|
}
|
|
602
646
|
|
|
647
|
+
vl.heightsCalculated = [];
|
|
603
648
|
vl.setListSize();
|
|
604
649
|
vl.render(true);
|
|
605
650
|
}
|
|
@@ -80,8 +80,8 @@ export namespace VirtualList {
|
|
|
80
80
|
rowsAfter?: number;
|
|
81
81
|
/** Number of items per row. Doesn't compatible when using Virtual List with dynamic height (default 1) */
|
|
82
82
|
cols?: number;
|
|
83
|
-
/** If number - list item height in px. If function then function should return item height. By default equals to 44 for iOS theme, 48 for MD theme, and 38 for Aurora theme */
|
|
84
|
-
height?: number | Function;
|
|
83
|
+
/** If number - list item height in px. If function then function should return item height. If "auto" - will automatically calculate each items heights. By default equals to 44 for iOS theme, 48 for MD theme, and 38 for Aurora theme */
|
|
84
|
+
height?: number | Function | string;
|
|
85
85
|
/** This optional function allows to use custom function to render item HTML. It could be used instead of template parameter */
|
|
86
86
|
renderItem?(item: any): string;
|
|
87
87
|
/** This optional function allows to render DOM items using some custom method. Useful in case it is used (e.g.) with Vue/React plugin to pass DOM rendering and manipulation to Vue/React. renderParameters conaints object with the following properties: fromIndex, toIndex, listHeight, topPosition, items */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var
|
|
1
|
+
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var s=e.$,a=e.utils,l=e.getDevice,r=(e.getSupport,e.Class),i=(e.Modal,e.ConstructorMethods),n=(e.ModalMethods,a.extend),o=a.deleteProps;class h extends r{constructor(e,t){void 0===t&&(t={}),super(t,[e]);const a=this,r=l(),i=getDocument();let o;"md"===e.theme?o=48:"ios"===e.theme?o=44:"aurora"===e.theme&&(o=38);const h={cols:1,height:o,cache:!0,dynamicHeightBufferSize:1,showFilteredItemsOnly:!1,renderExternal:void 0,setListHeight:!0,searchByItem:void 0,searchAll:void 0,ul:null,createUl:!0,scrollableParentEl:void 0,renderItem:e=>`\n <li>\n <div class="item-content">\n <div class="item-inner">\n <div class="item-title">${e}</div>\n </div>\n </div>\n </li>\n `.trim(),on:{}};if(a.useModulesParams(h),a.params=n(h,t),void 0!==a.params.height&&a.params.height||(a.params.height=o),a.$el=s(t.el),a.el=a.$el[0],0===a.$el.length)return;a.$el[0].f7VirtualList=a,a.items=a.params.items,a.params.showFilteredItemsOnly&&(a.filteredItems=[]),a.params.renderItem&&(a.renderItem=a.params.renderItem),a.$pageContentEl=a.$el.parents(".page-content"),a.pageContentEl=a.$pageContentEl[0],a.$scrollableParentEl=a.params.scrollableParentEl?s(a.params.scrollableParentEl).eq(0):a.$pageContentEl,!a.$scrollableParentEl.length&&a.$pageContentEl.length&&(a.$scrollableParentEl=a.$pageContentEl),a.scrollableParentEl=a.$scrollableParentEl[0],void 0!==a.params.updatableScroll?a.updatableScroll=a.params.updatableScroll:(a.updatableScroll=!0,r.ios&&r.osVersion.split(".")[0]<8&&(a.updatableScroll=!1));const m=a.params.ul;let c;a.$ul=m?s(a.params.ul):a.$el.children("ul"),0===a.$ul.length&&a.params.createUl&&(a.$el.append("<ul></ul>"),a.$ul=a.$el.children("ul")),a.ul=a.$ul[0],c=a.ul||a.params.createUl?a.$ul:a.$el,n(a,{$itemsWrapEl:c,itemsWrapEl:c[0],domCache:{},displayDomCache:{},tempDomElement:i.createElement("ul"),lastRepaintY:null,fragment:i.createDocumentFragment(),pageHeight:void 0,rowsPerScreen:void 0,rowsBefore:void 0,rowsAfter:void 0,rowsToRender:void 0,maxBufferHeight:0,listHeight:void 0,dynamicHeight:"function"==typeof a.params.height,autoHeight:"auto"===a.params.height}),a.useModules();const p=a.handleScroll.bind(a),d=a.handleResize.bind(a);let g,f,u,I;return a.attachEvents=function(){g=a.$el.parents(".page").eq(0),f=a.$el.parents(".tab").filter((e=>0===s(e).parent(".tabs").parent(".tabs-animated-wrap, .tabs-swipeable-wrap").length)).eq(0),u=a.$el.parents(".panel").eq(0),I=a.$el.parents(".popup").eq(0),a.$scrollableParentEl.on("scroll",p),g.length&&g.on("page:reinit",d),f.length&&f.on("tab:show",d),u.length&&u.on("panel:open",d),I.length&&I.on("popup:open",d),e.on("resize",d)},a.detachEvents=function(){a.$scrollableParentEl.off("scroll",p),g.length&&g.off("page:reinit",d),f.length&&f.off("tab:show",d),u.length&&u.off("panel:open",d),I.length&&I.off("popup:open",d),e.off("resize",d)},a.init(),a}setListSize(e){const t=this,s=t.filteredItems||t.items;if(e||(t.pageHeight=t.$scrollableParentEl[0].offsetHeight),t.dynamicHeight){t.listHeight=0,t.heights=[];for(let e=0;e<s.length;e+=1){const a=t.params.height(s[e]);t.listHeight+=a,t.heights.push(a)}}else if(t.autoHeight){t.listHeight=0,t.heights||(t.heights=[]),t.heightsCalculated||(t.heightsCalculated=[]);const e={};t.$itemsWrapEl.find("[data-virtual-list-index]").forEach((t=>{e[parseInt(t.getAttribute("data-virtual-list-index"),10)]=t}));for(let a=0;a<s.length;a+=1){const s=e[a];s&&(t.heightsCalculated.includes(a)||(t.heights[a]=s.offsetHeight,t.heightsCalculated.push(a))),void 0===t.heights[a]&&(t.heights[a]=40),t.listHeight+=t.heights[a]}}else t.listHeight=Math.ceil(s.length/t.params.cols)*t.params.height,t.rowsPerScreen=Math.ceil(t.pageHeight/t.params.height),t.rowsBefore=t.params.rowsBefore||2*t.rowsPerScreen,t.rowsAfter=t.params.rowsAfter||t.rowsPerScreen,t.rowsToRender=t.rowsPerScreen+t.rowsBefore+t.rowsAfter,t.maxBufferHeight=t.rowsBefore/2*t.params.height;(t.updatableScroll||t.params.setListHeight)&&t.$itemsWrapEl.css({height:`${t.listHeight}px`})}render(e,t){const s=this;e&&(s.lastRepaintY=null);let a=-(s.$el[0].getBoundingClientRect().top-s.$scrollableParentEl[0].getBoundingClientRect().top);if(void 0!==t&&(a=t),!(null===s.lastRepaintY||Math.abs(a-s.lastRepaintY)>s.maxBufferHeight||!s.updatableScroll&&s.$scrollableParentEl[0].scrollTop+s.pageHeight>=s.$scrollableParentEl[0].scrollHeight))return;s.lastRepaintY=a;const l=s.filteredItems||s.items;let r,i,n,o=0,h=0;if(s.dynamicHeight||s.autoHeight){let e,t=0;s.maxBufferHeight=s.pageHeight;for(let l=0;l<s.heights.length;l+=1)e=s.heights[l],void 0===r&&(t+e>=a-2*s.pageHeight*s.params.dynamicHeightBufferSize?r=l:o+=e),void 0===i&&((t+e>=a+2*s.pageHeight*s.params.dynamicHeightBufferSize||l===s.heights.length-1)&&(i=l+1),h+=e),t+=e;i=Math.min(i,l.length)}else r=(parseInt(a/s.params.height,10)-s.rowsBefore)*s.params.cols,r<0&&(r=0),i=Math.min(r+s.rowsToRender*s.params.cols,l.length);const m=[];let c;for(s.reachEnd=!1,c=r;c<i;c+=1){let e;const t=s.items.indexOf(l[c]);c===r&&(s.currentFromIndex=t),c===i-1&&(s.currentToIndex=t),s.filteredItems?s.items[t]===s.filteredItems[s.filteredItems.length-1]&&(s.reachEnd=!0):t===s.items.length-1&&(s.reachEnd=!0),s.params.renderExternal?m.push(l[c]):s.domCache[t]?(e=s.domCache[t],e.f7VirtualListIndex=t):(s.renderItem?s.tempDomElement.innerHTML=s.renderItem(l[c],t).trim():s.tempDomElement.innerHTML=l[c].toString().trim(),e=s.tempDomElement.childNodes[0],s.params.cache&&(s.domCache[t]=e),e.f7VirtualListIndex=t),c===r&&(n=s.dynamicHeight||s.autoHeight?o:c*s.params.height/s.params.cols),s.params.renderExternal||(e.style.top=`${n}px`,s.emit("local::itemBeforeInsert vlItemBeforeInsert",s,e,l[c]),s.fragment.appendChild(e))}s.updatableScroll||(s.dynamicHeight||s.autoHeight?s.itemsWrapEl.style.height=`${h}px`:s.itemsWrapEl.style.height=c*s.params.height/s.params.cols+"px"),s.params.renderExternal?l&&0===l.length&&(s.reachEnd=!0):(s.emit("local::beforeClear vlBeforeClear",s,s.fragment),s.itemsWrapEl.innerHTML="",s.emit("local::itemsBeforeInsert vlItemsBeforeInsert",s,s.fragment),l&&0===l.length?(s.reachEnd=!0,s.params.emptyTemplate&&(s.itemsWrapEl.innerHTML=s.params.emptyTemplate)):s.itemsWrapEl.appendChild(s.fragment),s.emit("local::itemsAfterInsert vlItemsAfterInsert",s,s.fragment)),void 0!==t&&e&&s.$scrollableParentEl.scrollTop(t,0),s.params.renderExternal&&s.params.renderExternal(s,{fromIndex:r,toIndex:i,listHeight:s.listHeight,topPosition:n,items:m}),s.autoHeight&&requestAnimationFrame((()=>{s.setListSize(!0)}))}filterItems(e,t){void 0===t&&(t=!0);const s=this;s.filteredItems=[];for(let t=0;t<e.length;t+=1)s.filteredItems.push(s.items[e[t]]);t&&(s.$scrollableParentEl[0].scrollTop=0),s.update()}resetFilter(){const e=this;e.params.showFilteredItemsOnly?e.filteredItems=[]:(e.filteredItems=null,delete e.filteredItems),e.update()}scrollToItem(e){const t=this;if(e>t.items.length)return!1;let s=0;if(t.dynamicHeight||t.autoHeight)for(let a=0;a<e;a+=1)s+=t.heights[a];else s=e*t.params.height;const a=t.$el[0].offsetTop;return t.render(!0,a+s-parseInt(t.$scrollableParentEl.css("padding-top"),10)),!0}handleScroll(){this.render()}isVisible(){const e=this;return!!(e.el.offsetWidth||e.el.offsetHeight||e.el.getClientRects().length)}handleResize(){const e=this;e.isVisible()&&(e.heightsCalculated=[],e.setListSize(),e.render(!0))}appendItems(e){const t=this;for(let s=0;s<e.length;s+=1)t.items.push(e[s]);t.update()}appendItem(e){this.appendItems([e])}replaceAllItems(e){const t=this;t.items=e,delete t.filteredItems,t.domCache={},t.update()}replaceItem(e,t){const s=this;s.items[e]=t,s.params.cache&&delete s.domCache[e],s.update()}prependItems(e){const t=this;for(let s=e.length-1;s>=0;s-=1)t.items.unshift(e[s]);if(t.params.cache){const s={};Object.keys(t.domCache).forEach((a=>{s[parseInt(a,10)+e.length]=t.domCache[a]})),t.domCache=s}t.update()}prependItem(e){this.prependItems([e])}moveItem(e,t){const s=this,a=e;let l=t;if(a===l)return;const r=s.items.splice(a,1)[0];if(l>=s.items.length?(s.items.push(r),l=s.items.length-1):s.items.splice(l,0,r),s.params.cache){const e={};Object.keys(s.domCache).forEach((t=>{const r=parseInt(t,10),i=a<l?a:l,n=a<l?l:a,o=a<l?-1:1;(r<i||r>n)&&(e[r]=s.domCache[r]),r===i&&(e[n]=s.domCache[r]),r>i&&r<=n&&(e[r+o]=s.domCache[r])})),s.domCache=e}s.update()}insertItemBefore(e,t){const s=this;if(0!==e)if(e>=s.items.length)s.appendItem(t);else{if(s.items.splice(e,0,t),s.params.cache){const t={};Object.keys(s.domCache).forEach((a=>{const l=parseInt(a,10);l>=e&&(t[l+1]=s.domCache[l])})),s.domCache=t}s.update()}else s.prependItem(t)}deleteItems(e){const t=this;let s,a=0;for(let l=0;l<e.length;l+=1){let r=e[l];void 0!==s&&r>s&&(a=-l),r+=a,s=e[l];const i=t.items.splice(r,1)[0];if(t.filteredItems&&t.filteredItems.indexOf(i)>=0&&t.filteredItems.splice(t.filteredItems.indexOf(i),1),t.params.cache){const e={};Object.keys(t.domCache).forEach((s=>{const a=parseInt(s,10);a===r?delete t.domCache[r]:parseInt(s,10)>r?e[a-1]=t.domCache[s]:e[a]=t.domCache[s]})),t.domCache=e}}t.update()}deleteAllItems(){const e=this;e.items=[],delete e.filteredItems,e.params.cache&&(e.domCache={}),e.update()}deleteItem(e){this.deleteItems([e])}clearCache(){this.domCache={}}update(e){const t=this;e&&t.params.cache&&(t.domCache={}),t.heightsCalculated=[],t.setListSize(),t.render(!0)}init(){const e=this;e.attachEvents(),e.setListSize(),e.render()}destroy(){let e=this;e.detachEvents(),e.$el[0].f7VirtualList=null,delete e.$el[0].f7VirtualList,o(e),e=null}}var m={name:"virtualList",static:{VirtualList:h},create(){this.virtualList=i({defaultSelector:".virtual-list",constructor:h,app:this,domProp:"f7VirtualList"})}};if(t){if(e.prototype.modules&&e.prototype.modules[m.name])return;e.use(m),e.instance&&(e.instance.useModuleParams(m,e.instance.params),e.instance.useModule(m))}return m}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
|