framework7

Open full view…

Hide Tab Bar like .hideToolbar()

deanl
Thu, 15 May 2014 21:00:32 GMT

Hello Vladmir! First, my compliments and admiration on your amazing work. Thank you. I am creating a photo viewing page for our mobile site. It is using your Framework7, along with swiper and also iScroll for pinch/zoom. My layout is using the "through" layout navbar with a tabbar with icons and text on the bottom. The general layout of my html is: --- <div class="views"> <div id="main" class="view-main tab active"> <div class="navbar"></div> <div class="pages navbar-through"> <div data-page="main" class="page">...</div> </div> </div> <div id="photos" class="view tab"> <div class="navbar"></div> <div class="pages navbar-through"> <div data-page="photos" class="page">...</div> </div> </div> <div class="toolbar tabbar tabbar-labels"> <div class="toolbar-inner"> <a href="#main" class="tab-link active">...</a> <a href="#photos" class="tab-link">...<a> </div> </div> </div> --- I've added my views as such: --- var viewMain = myApp.addView('#main',{dynamicNavbar:true}); var viewPhotos = myApp.addView('#photos',{dynamicNavbar:true}); --- However, calling .hideToolbar() doesn't seem to affect my tabbar: --- viewPhotos.hideToolbar(); --- How can I hide the tabbar like .hideToolbar()? Thanks, Dean

Vladimir Kharlampidi
Thu, 15 May 2014 21:29:00 GMT

Hi Dean. The problem is because your toolbar is not related to any View. So you need to do it manually: 1) Add "hiding-toolbar" class to your div class="views" element. 2) Now to hide/show toolbar/tab bar just add/remove additional "hidden-toolbar" class on the same div class="views" element

Vladimir Kharlampidi
Thu, 15 May 2014 21:31:20 GMT

By the way, the native like photo viewer with swiper-like slider and multitouch zoom gestures will be natively released in Framework7 on a weekend ;)

Vladimir Kharlampidi
Thu, 15 May 2014 21:34:12 GMT

It will also have expose mode, when clicking on it hides its Navbar and toolbar for full screen view

Vladimir Kharlampidi
Thu, 15 May 2014 21:39:28 GMT

... and double tap to toggle image zoom

Vladimir Kharlampidi
Thu, 15 May 2014 21:41:41 GMT

... and ability to open such viewer in three ways - in popup, as a page, or as standalone element with custom animation. And all this will work from the box with almost one line of JS! :)

deanl
Thu, 15 May 2014 22:06:58 GMT

Vladimir! Thank you so much. I eagerly await this update! I've been working with one feature that you may or may not have thought of... which is the ability to swipe-down/up to go back to the gallery thumbnail index. (this is actually a feature of Facebook's photo viewing interface). To do this, I'm using iScroll's onScrollMove() event to variably change the opacity of the .page background depending on the distance of the move: --- onScrollMove: function() { if (parseInt(this.scale) == 1) { var opacity = 1 - (Math.abs(parseInt(this.y)) * 0.005); $$(this.wrapper).parents('.page').css('opacity', opacity); if (Math.abs(parseInt(this.distY)) >= 150) { $$(this.wrapper).parents('.page').css('opacity', 0.2); viewPhotos.goBack(); } } }, onScrollEnd: function(e) { if (parseInt(this.scale) == 1 && Math.abs(this.distY) < 150) { $$(this.wrapper).parents('.page').css('opacity','1') } }, --- My test code is crude, and maybe you've already thought of the distance-related opacity, but just thought I would m ention it to you just in case you haven't considered it. I assume we could use css transitions for my 2nd and 3rd opacity calls, but I hadn't gotten that far yet. I can't wait for next Monday. Last Monday felt like a birthday party with the newly-released documentation. I've been checking your site multiple times a day. Thank you, again, for the fantastic work! Dean

Vladimir Kharlampidi
Thu, 15 May 2014 22:21:56 GMT

Yes, I know about this feature, it is used in many native apps. But I will not have time to implement it to this update, so probably with next iteration. By the way it is bit more complicated than just changing opacity of page, because as you may see there opacity of image is not changing (which is inside of page, right?), only opacity of background, which could be achieved by animating rgba background color. But this approach is not pretty good from performance side. So I need to invent bicycle here, again :)

deanl
Thu, 15 May 2014 22:33:41 GMT

In my case, by changing the opacity of the .page, it also affects the child image here. --- <div class="pages"> <div data-page="fullphotos" class="page no-navbar" style="background-color:#000;"> <div class="page-content"> <div id="idPhotoSwiper" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide vertcenter"> <img class="fullphoto" src="abc" /> </div> </div> </div> </div> </div> </div> --- With all the updates you are planning, I think I will go ahead and move on to another section of the site and await your "camera roll" features. Amazing framework!!! [Fade](//res.cloudinary.com/moot/image/upload/t_d3-gallery-s1/v1400193186/:framework7:hhoW:fade.png.jpg)

deanl
Thu, 15 May 2014 22:49:24 GMT

By the way, add/removing the "hidden-toolbar" class on my class="views" did the trick. Thank you.

Vladimir Kharlampidi
Sat, 17 May 2014 17:04:39 GMT

Photo Browser is now released in 0.8.4, but still no docs to it. So you can rely to kitchen sink examples, feel free to ask questions about it