Open fullscreen image Modal

.gitignore

@@ -45,3 +45,5 @@ before_build.md
 # v1 compatibility
 /config.scss
 /config.json
+
+.DS_Store

dist/config.scss

@@ -10,3 +10,78 @@ $palette-accent-color: #009688 !default;
 $palette-secondary-text: #727272 !default;
 $palette-divider-color: #EAEAEA !default;
 $bar-height: 64px !default;
+html.public-custom-posts{
+	.item-image{
+		height: 100px;
+    	width: 100px;
+    	background-size: contain;
+    	float: left;
+		margin: 1px 0 0 1px;
+	}
+}
+html.public-custom-posts-id{
+	.item-image{
+		height: 100px;
+    	width: 100px;
+    	background-size: contain;
+    	float: left;
+		margin: 1px 0 0 1px;
+	}
+
+}
+.bar .subtitle {
+    display: block;
+    position: absolute;
+    top: 22px;
+    right: 0;
+    left: 0;
+    z-index: 0;
+    overflow: hidden;
+    margin: 0 10px;
+    min-width: 30px;
+    height: 63px;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 64px;
+}
+.image-modal {
+  width: 100% !important;
+  height: 100%;
+  top: 0 !important;
+  left: 0 !important;
+}
+.transparent {
+  background: transparent !important;
+}
+.fullscreen-text,
+.fullscreen-image {
+  max-width: 100%;
+  max-height: 100%;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+.fullscreen-text {
+  background-color: $palette-primary-background;
+  padding:15px;
+}
+
+/* Fix modal backdrop for smaller devices */
+@media (max-width: 679px) {
+  .active .modal-backdrop-bg {
+    opacity: .5;
+  }
+  .modal-backdrop-bg {
+    -webkit-transition: opacity 300ms ease-in-out;
+    transition: opacity 300ms ease-in-out;
+    background-color: #000;
+    opacity: 0;
+  }
+}

dist/templates/customPosts/ImageModal.html

@@ -0,0 +1,9 @@
+<ion-modal-view class="modal image-modal transparent">
+    <ion-header-bar ng-click="modal.hide()" class="bar bar-positive">
+      <h1 class="title">{{ item.title }}<span ng-if="::item.description" class="subtitle" ng-bind-html="item.description"></span></h1>
+       <button class="button button-clear" ng-click="modal.hide()"><i class="icon ion-close-round"></i></button>
+    </ion-header-bar>
+    <ion-content class="transparent">
+      <img src="{{ item.url }}" class="fullscreen-image"/>
+    </ion-content>
+</ion-modal-view>

dist/templates/customPosts/movie/item.html

@@ -1,9 +1,24 @@
-<div class="post padding">
-    <h1 class="item-title item-title-without-image" ng-bind-html="::customPostsItemCtrl.item.title.rendered"></h1>
+<div class="post padding ">
+           <div class="item item-text-wrap item-with-no-image" ng-if="::customPostsItemCtrl.item.featured_media === 0">
+           		<h3 class="item-category-title" ng-bind-html="::customPostsItemCtrl.item.category_title_combined.rendered"></h3>
+                <h1 class="item-title" ng-bind-html="::customPostsItemCtrl.item.title.rendered"></h1>
+                <h4 class="item-date" ng-bind-html="::customPostsItemCtrl.item.date.rendered"></h4>
+            </div>
+			<div class="item" ng-if="::customPostsItemCtrl.item.featured_media !== false">
+            	<div class="item item-image" wphc-img-background-cache="{{::customPostsItemCtrl.item.featured_image}}" ng-click="::customPostsItemCtrl.showImageInModal('{{::customPostsItemCtrl.item.featured_fullsize_image}}','{{::customPostsItemCtrl.item.title.rendered}}','{{::customPostsItemCtrl.item.category_title_combined.rendered}}')"></div>
+
+                <h3 class="item-category-title" ng-bind-html="::customPostsItemCtrl.item.category_title_combined.rendered"></h3>
+           		<h1 class="item-title" ng-bind-html="::customPostsItemCtrl.item.title.rendered"></h1>
+                <h4 class="item-date" ng-bind-html="::customPostsItemCtrl.item.date.rendered"></h4>
+            </div>
+                    <div class="clearfix"></div>
+
     <div class="post-content" bind-and-compile-html="::(customPostsItemCtrl.item.content.rendered | prepLink | highlight)"></div>
+
     <section class="footer">
         <a class="button button-positive button-open-browser" wphc-href href="{{::customPostsItemCtrl.item.link}}">
             {{'post.openInBrowser' | translate}}
         </a>
     </section>
+
 </div>

dist/templates/customPosts/movie/list.html

@@ -1,8 +1,14 @@
 <div list="posts">
     <div class="list card card-posts repeat-animation" ng-repeat="item in customPostsListCtrl.list">
         <div ui-sref="public.customPosts.id({ id: item.id, slug: customPostsListCtrl.type})">
-            <div class="item item-text-wrap">
+            <div class="item item-image" ng-if="::item.featured_media !== 0" wphc-img-background-cache="{{::item.featured_image}}"></div>    
+            <div class="item item-text-wrap" ng-if="::item.featured_media !== 0" style="overflow:hidden">
                 <h1 class="item-title" ng-bind-html="::item.title.rendered | truncate: 50: '...': true"></h1>
+                <h4 class="item-date" ng-bind-html="::item.date.rendered | truncate: 50: '...': true"></h4>
+            </div>
+            <div class="item item-text-wrap item-text-with-no-image" ng-if="::item.featured_media === 0">
+                <h1 class="item-title" ng-bind-html="::item.title.rendered | truncate: 50: '...': true"></h1>
+                <h4 class="item-date" ng-bind-html="::item.date.rendered | truncate: 50: '...': true"></h4>
             </div>
             <div class="item item-text-wrap" ng-if="::item.content.rendered" ng-bind-html="::item.content.rendered"></div>
         </div>

dist/templates/customPosts/textModal.html

@@ -0,0 +1,9 @@
+<ion-modal-view class="modal image-modal transparent">
+    <ion-header-bar ng-click="modal.hide()" class="bar bar-positive">
+      <h1 class="title">{{ item.title }}<span ng-if="::item.description" class="subtitle" ng-bind-html="item.description"></span></h1>
+       <button class="button button-clear" ng-click="modal.hide()"><i class="icon ion-close-round"></i></button>
+    </ion-header-bar>
+    <ion-content class="transparent">
+      <div ng-bind-html="item.text" class="fullscreen-text"></div>
+    </ion-content>
+</ion-modal-view>

lib/customPosts/customPost.service.js

@@ -1,11 +1,34 @@
 import AbstractItemService from '../abstract/AbstractItemService.js';
 
 export default class extends AbstractItemService {
-    constructor($wpApiCustom, $injector) {
+    constructor($wpApiCustom, $injector, $ionicModal, $rootScope) {
         'ngInject';
 
         super($injector);
         this.setType('customPost');
+
+		this.$ionicModal = $ionicModal;
+        this.$rootScope = $rootScope;
+        this.modal = null; 	
+	}
+
+	showImageInModal(imageUrl,imageTitle = null) {
+        let self = this;
+        if (!this.modal) {
+			this.modal = this.$ionicModal.fromTemplate(require('./modal.html'), {
+                scope: this.$rootScope.$new(),
+                animation: 'slide-in-up'
+            });
+            this.modal.scope.modal = this.modal;
+        }
+        this.modal.scope.item = {
+            imageTitle: imageTitle,
+            imageUrl: imageUrl,
+        }
+        this.modal.show().then(() => {
+            self.modal.scope.item.imageTitle = imageTitle;
+			self.modal.scope.item.imageUrl = imageUrl;
+        });
     }
 
     getCacheUniqueString(id, query){

lib/customPosts/directives/item.js

@@ -13,15 +13,82 @@ export default function() {
             <div ng-include="customPostsItemCtrl.templateUrl" ng-if="customPostsItemCtrl.type"></div>
         `
     };
-
-    function Controller($scope, $templateCache) {
-        'ngInject';
-
+	
+    function Controller($scope, $templateCache, $WPHCCustomPost /* Modal */, $injector /* Modal */ ) {
+	    'ngInject';
+		
         var vm = this;
         vm.templateUrl = `customPosts/${vm.type}/item.html`;
-
-        if (!$templateCache.get(vm.templateUrl)) {
+		
+		if (!$templateCache.get(vm.templateUrl)) {
             throw new Error(`Template ${vm.templateUrl} does not exist`);
         }
+
+		/* Modal */
+		this.$injector = $injector;
+		vm.showImageInModal = function (imageUrl, title = null, description = null) {
+            return showInModal(vm,'image', imageUrl, title, description);
+        };
+		vm.showTextInModal = function (text, title = null, description = null) {
+            return showInModal(vm,'text', text, title, description);
+        };
+		/* Modal */
+
+	}
+
+	/* Modal */
+	function showInModal(vm, type, textOrUrl, title = null, description = null) {
+
+		vm.$ionicModal = vm.$injector.get('$ionicModal');
+		vm.$rootScope = vm.$injector.get('$rootScope');
+		vm.$templateCache = vm.$injector.get('$templateCache');
+		vm.$log = vm.$injector.get('$log');
+
+		switch(type){
+			case 'text':
+			case 'image':
+				var templateType = type;
+				break;
+			default:
+				throw new Error(`showInModal type: ${type} does not exist`);
+		}
+		/* to register into cache. File: /config/templates/index.js */
+		var templateUrl = `customPosts/${templateType}Modal.html`;
+		var template = false; 
+        if (!(template = vm.$templateCache.get( templateUrl ))){;
+	        throw new Error(`Template ${templateUrl} does not exist`);
+       	}
+		vm.modal = vm.$ionicModal.fromTemplate( template, {
+			scope: vm.$rootScope.$new(),
+			animation: 'slide-in-up'
+		});
+		vm.$log.debug('[showInModal] template=', templateUrl);
+		vm.modal.scope.modal = vm.modal;
+
+        vm.modal.scope.item = {
+            title: title,
+			description: description,
+            url: textOrUrl,
+			text: textOrUrl,
+        }
+        vm.modal.show(); 
+
+		// Cleanup the modal when we're done with it!
+  		vm.modal.scope.$on('$destroy', function() {
+			vm.$log.debug('[showInModal] destroy=', templateUrl);
+  		});
+  		// Execute action on hide modal
+  		vm.modal.scope.$on('modal.hidden', function() {
+    		// Execute action
+			vm.$log.debug('[showInModal] modal.hidden=', templateUrl);
+			vm.modal.scope.modal.remove();
+  		});
+  		// Execute action on remove modal
+  		vm.modal.scope.$on('modal.removed', function() {
+    		// Execute action
+			vm.$log.debug('[showInModal] modal.removed=', templateUrl);
+  		});
     }
+	/* Modal */
+
 }

lib/customPosts/modal.html

@@ -0,0 +1,9 @@
+<ion-modal-view class="modal image-modal transparent">
+    <ion-header-bar ng-click="modal.hide()" class="bar bar-positive">
+      <h1 class="title">{{ item.imageTitle }}</h1>
+      <button class="button button-clear" ng-click="modal.hide()"><i class="icon ion-close-round"></i></button>
+    </ion-header-bar>
+    <ion-content class="transparent">
+      <img src="{{ item.imageUrl }}" class="fullscreen-image"/>
+    </ion-content>
+</ion-modal-view>

lib/directives/page/index.js

@@ -13,11 +13,18 @@ export default function() {
         `
     };
 
-    function Controller($log, $scope, $WPHCPost) {
+    function Controller($log, $scope, $WPHCPost, $WPHCConfig, $stateParams) {
         'ngInject';
 
         var vm = this;
-        vm.featured_image = undefined;
+
+		vm.page.footer = _.get($WPHCConfig, 'page.footer');
+
+		vm.page.pageTitle = _.get($stateParams, 'title' );
+        if(!vm.page.pageTitle)
+			vm.page.pageTitle = vm.page.title.rendered;
+
+		vm.featured_image = undefined;
         if (vm.page.better_featured_image) {
             vm.featured_image = _.get(vm.page, 'better_featured_image.media_details.sizes.medium.source_url');
         } else {
@@ -27,5 +34,6 @@ export default function() {
                 }
             });
         }
+		$log.debug(vm);
     }
 }

lib/directives/post/index.js

@@ -17,13 +17,15 @@ export function postDirective() {
         `
     };
 
-    function Controller($WPHCConfig, $WPHCPost) {
+    function Controller($WPHCConfig, $WPHCPost, $log) {
         'ngInject';
 
         var vm = this;
         vm.featured_image = undefined;
         vm.enabled = _.get($WPHCConfig, 'post.comments.enabled');
-
+
+		vm.post.footer = _.get($WPHCConfig, 'post.footer');
+
         if (vm.post.better_featured_image) {
             vm.featured_image = _.get(vm.post, 'better_featured_image.media_details.sizes.medium.source_url');
         } else {
@@ -34,6 +36,7 @@ export function postDirective() {
                 vm.featured_image = _.get(image, 'media_details.sizes.medium.source_url');
             });
         }
+		$log.debug(vm);
     }
 }
 

lib/scss/_post.scss

@@ -164,3 +164,37 @@ wphc-post {
     @include post-item("../img/post-img-border.png");
 
 }
+
+.image-modal {
+  width: 100% !important;
+  height: 100%;
+  top: 0 !important;
+  left: 0 !important;
+}
+.transparent {
+  background: transparent !important;
+}
+.fullscreen-image {
+  max-width: 100%;
+  max-height: 100%;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+/* Fix modal backdrop for smaller devices */
+@media (max-width: 679px) {
+  .active .modal-backdrop-bg {
+    opacity: .5;
+  }
+  .modal-backdrop-bg {
+    -webkit-transition: opacity 300ms ease-in-out;
+    transition: opacity 300ms ease-in-out;
+    background-color: #000;
+    opacity: 0;
+  }
+}

lib/templates/directive/page.html

@@ -10,9 +10,12 @@ <h1 class="item-title item-title-without-image" ng-bind-html="::pageCtrl.page.ti
     <!-- <div class="item item-divider item-toolbar">
         <wphc-post-toolbar post="::pageCtrl.page" show-share show-bookmark></wphc-post-toolbar>
     </div> -->
-    <section class="footer">
+
+    <section ng-if="((pageCtrl.page.footer.position == 2 || pageCtrl.page.footer.position == undefined) && pageCtrl.page.link)" class="footer">
         <a class="button button-positive button-open-browser" wphc-href href="{{::pageCtrl.page.link}}">
+            <i ng-if="pageCtrl.item.footer.icon.openInBrowser != undefined" class="icon ion-planet {{pageCtrl.item.footer.icon.openInBrowser}}"></i>
             {{'post.openInBrowser' | translate}}
         </a>
     </section>
+
 </div>