diff --git a/src/main/resources/public/sass/global/components/containers/_board-read.scss b/src/main/resources/public/sass/global/components/containers/_board-read.scss index d5127bac..d7ccf286 100644 --- a/src/main/resources/public/sass/global/components/containers/_board-read.scss +++ b/src/main/resources/public/sass/global/components/containers/_board-read.scss @@ -98,4 +98,4 @@ overflow: hidden; } -} \ No newline at end of file +} diff --git a/src/main/resources/public/sass/global/components/directives/_card-comment.scss b/src/main/resources/public/sass/global/components/directives/_card-comment.scss index e4e6001a..2883fad1 100644 --- a/src/main/resources/public/sass/global/components/directives/_card-comment.scss +++ b/src/main/resources/public/sass/global/components/directives/_card-comment.scss @@ -64,6 +64,7 @@ &-content { line-height: 18px; margin-left: 40px; + white-space: initial !important; } -} \ No newline at end of file +} diff --git a/src/main/resources/public/sass/global/components/directives/_card-list-item.scss b/src/main/resources/public/sass/global/components/directives/_card-list-item.scss index 996b49ce..75d2651b 100644 --- a/src/main/resources/public/sass/global/components/directives/_card-list-item.scss +++ b/src/main/resources/public/sass/global/components/directives/_card-list-item.scss @@ -18,6 +18,18 @@ } } + $start: 0; + $end: 5; + @for $i from $start through $end { + &-zoom-#{$i} { + $width-value: 120 + $i * 48px; + width: #{$width-value}; + @if $i < 2 { + height: #{$width-value}; + } + } + } + &.draggable { cursor: move; } @@ -31,17 +43,25 @@ height: 15%; align-items: center; display: flex; + justify-content: space-between; &.reduced-format { height: 20% !important; } + &.dezoom{ + height: 25% !important; + margin-bottom: 0.5em; + } &-creation { - width: 80%; margin-left: 8px; display: flex; flex-direction: column; + &.dezoom{ + width: 49%; + margin-left: 0; + } &-user { @include noTextOverflow(1); } @@ -73,10 +93,27 @@ } } + &-flex-row { + display: flex; + position: relative; + align-items: end; + bottom: 0; + } &-preview { position: relative; height: 18vh; + + $start: 0; + $end: 5; + @for $i from $start through $end { + &-zoom-#{$i} { + $width-value: 3 + $i * 3em; + height: #{$width-value}; + display: flex; + flex: 1; + } + } img { margin-left: auto; margin-right: auto; @@ -120,7 +157,14 @@ bottom: 0; left: 0; z-index: 1; - + &-zoom-0{ + margin-left: -5px; + height: 1.5em; + } + &-zoom-1{ + margin-left: -5px; + height: 1.5em; + } i { font-size: $spacing-M; } @@ -137,15 +181,37 @@ } &-infos { + &-0 ,&-1{ + display: flex; + flex-direction: column; + justify-content: space-between; + flex-wrap: nowrap; + align-content: stretch; + align-items: stretch; + height: 70%; + } &-title { font-size: 16px; font-weight: bold; margin-bottom: 5px; height: 3vh; - + white-space: initial; &-ellipsis { @include noTextOverflow(1); + height: 1.5em; + &.dezoom-0{ + @include noTextOverflow(3); + width: 100%; + line-height: 18px; + height: auto; + } + &.dezoom-1{ + @include noTextOverflow(4); + line-height: 130%; + width: 100%; + height: auto; + } } &.reduced-format { @@ -183,4 +249,4 @@ font-size: 25px; right: 5px; } -} \ No newline at end of file +} diff --git a/src/main/resources/public/sass/global/components/directives/_card-list.scss b/src/main/resources/public/sass/global/components/directives/_card-list.scss index ea99a396..eaa4ad87 100644 --- a/src/main/resources/public/sass/global/components/directives/_card-list.scss +++ b/src/main/resources/public/sass/global/components/directives/_card-list.scss @@ -2,14 +2,25 @@ &.no-background-image { background: $magneto-lighter-light-grey; } + $start: 0; + $end: 5; + @for $i from $start through $end { + &-zoom-#{$i} { + $width-value: 120 + $i * 48px; + grid-template-columns: repeat(auto-fill, minmax(#{$width-value}, 1fr)); + } + } + + transform-origin: 0 0; + display: grid; + grid-gap: 10px; + column-gap: 14px; + grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); + grid-auto-rows: 0; &-free { min-height: 70vh; justify-content: center; - display: grid; - grid-gap: 10px; - grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); - grid-auto-rows: 0; } &-vertical { @@ -18,7 +29,6 @@ overflow-x: hidden; display: grid; grid-gap: 10px; - grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); grid-auto-rows: 0; } @@ -27,7 +37,6 @@ overflow-x: auto; flex-wrap: nowrap; padding-bottom: 20px; - display: flex; gap: 10px; } @@ -37,4 +46,4 @@ overflow-y: scroll; height: 55vh; } -} \ No newline at end of file +} diff --git a/src/main/resources/public/sass/global/components/directives/_section-list.scss b/src/main/resources/public/sass/global/components/directives/_section-list.scss index b185d7a3..35aa697d 100644 --- a/src/main/resources/public/sass/global/components/directives/_section-list.scss +++ b/src/main/resources/public/sass/global/components/directives/_section-list.scss @@ -5,6 +5,14 @@ overflow-y: hidden; min-width: min-content; + $start: 3; + $end: 5; + @for $i from $start through $end { + &-zoom-#{$i} { + $width-value: 100 + ($i - 3) * 20%; + width: $width-value + } + } i.magneto-card-settings { font-size: 25px; @@ -113,4 +121,4 @@ &-content-vertical:not(:first-child) { border-left: solid 2px rgba(211, 211, 211, .5); } -} \ No newline at end of file +} diff --git a/src/main/resources/public/template/board.html b/src/main/resources/public/template/board.html index 3842047b..906ddbb6 100644 --- a/src/main/resources/public/template/board.html +++ b/src/main/resources/public/template/board.html @@ -31,6 +31,11 @@

+ @@ -108,7 +113,8 @@

+ card-update-eventer="vm.cardUpdateSubject" + zoom="vm.zoomLevel" + zoom-eventer="vm.zoomEventer">
@@ -219,9 +227,5 @@

-

\ No newline at end of file diff --git a/src/main/resources/public/ts/controllers/board-view.controller.ts b/src/main/resources/public/ts/controllers/board-view.controller.ts index 046a4ce0..1f94088f 100644 --- a/src/main/resources/public/ts/controllers/board-view.controller.ts +++ b/src/main/resources/public/ts/controllers/board-view.controller.ts @@ -79,6 +79,7 @@ interface IViewModel extends ng.IController { updateFrequency: number; zoomLevel: number; + zoomEventer :Subject; goToBoards(): void; @@ -126,6 +127,7 @@ interface IBoardViewScope extends IScope { class Controller implements IViewModel { private eventBusService: EventBusService; + zoomEventer :Subject = new Subject(); displayCardLightbox: boolean; displayUpdateCardLightbox: boolean; diff --git a/src/main/resources/public/ts/directives/card-list/card-list-item-options.directive.ts b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-options/card-list-item-options.directive.ts similarity index 94% rename from src/main/resources/public/ts/directives/card-list/card-list-item-options.directive.ts rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-options/card-list-item-options.directive.ts index fcdcb907..53b840a8 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list-item-options.directive.ts +++ b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-options/card-list-item-options.directive.ts @@ -1,8 +1,8 @@ import {ng} from "entcore"; import {ILocationService, IParseService, IScope, IWindowService} from "angular"; -import {RootsConst} from "../../core/constants/roots.const"; -import {Card, Section} from "../../models"; -import {CardComment} from "../../models/card-comment.model"; +import {RootsConst} from "../../../../core/constants/roots.const"; +import {Card, Section} from "../../../../models"; +import {CardComment} from "../../../../models/card-comment.model"; interface IViewModel extends ng.IController, ICardListItemOptionsProps { openEdit?(): void; @@ -69,7 +69,7 @@ function directive($parse: IParseService) { return { replace: true, restrict: 'E', - templateUrl: `${RootsConst.directive}card-list/card-list-item-options.html`, + templateUrl: `${RootsConst.directive}card-list/card-list-item/card-list-item-options/card-list-item-options.html`, scope: { options: '=', isDisplayed: '=', diff --git a/src/main/resources/public/ts/directives/card-list/card-list-item-options.html b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-options/card-list-item-options.html similarity index 100% rename from src/main/resources/public/ts/directives/card-list/card-list-item-options.html rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-options/card-list-item-options.html diff --git a/src/main/resources/public/ts/directives/card-list/card-list-item-preview.directive.ts b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/card-list-item-preview.directive.ts similarity index 87% rename from src/main/resources/public/ts/directives/card-list/card-list-item-preview.directive.ts rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/card-list-item-preview.directive.ts index e346b1dd..db69f209 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list-item-preview.directive.ts +++ b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/card-list-item-preview.directive.ts @@ -1,10 +1,10 @@ import {idiom, ng} from "entcore"; import {ILocationService, IScope, IWindowService} from "angular"; -import {RootsConst} from "../../core/constants/roots.const"; -import {Card} from "../../models"; -import {RESOURCE_TYPE} from "../../core/enums/resource-type.enum"; -import {EXTENSION_FORMAT} from "../../core/constants/extension-format.const"; -import {Dailymotion, PeerTube, Vimeo, Youtube} from "../../models/video-platform.model"; +import {RootsConst} from "../../../../core/constants/roots.const"; +import {Card} from "../../../../models"; +import {RESOURCE_TYPE} from "../../../../core/enums/resource-type.enum"; +import {EXTENSION_FORMAT} from "../../../../core/constants/extension-format.const"; +import {Dailymotion, PeerTube, Vimeo, Youtube} from "../../../../models/video-platform.model"; interface IViewModel extends ng.IController, ICardListItemProps { getExtension(fileName: string): string; @@ -22,6 +22,7 @@ interface IViewModel extends ng.IController, ICardListItemProps { interface ICardListItemProps { card: Card; + zoom:number; } interface ICardListItemScope extends IScope, ICardListItemProps { @@ -34,6 +35,7 @@ class Controller implements IViewModel { RESOURCE_TYPES: typeof RESOURCE_TYPE; url: string; + zoom:number; constructor(private $scope: ICardListItemScope, private $location: ILocationService, @@ -124,16 +126,26 @@ class Controller implements IViewModel { return idiom.translate('magneto.card.type.' + this.card.resourceType); } + getZoomLevel(): number { + if(this.zoom >= 100){ + return (this.zoom - 100 )/15 + 3; + } + else { + return (this.zoom - 55 ) / 15 + } + } + } function directive() { return { replace: true, restrict: 'E', - templateUrl: `${RootsConst.directive}card-list/card-list-item-preview.html`, + templateUrl: `${RootsConst.directive}card-list/card-list-item/card-list-item-preview/card-list-item-preview.html`, scope: { card: '=', - resourceType: '=' + resourceType: '=', + zoom: '=' }, controllerAs: 'vm', bindToController: true, diff --git a/src/main/resources/public/ts/directives/card-list/card-list-item-preview.html b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/card-list-item-preview.html similarity index 85% rename from src/main/resources/public/ts/directives/card-list/card-list-item-preview.html rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/card-list-item-preview.html index e3b700ee..78fc01b4 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list-item-preview.html +++ b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/card-list-item-preview.html @@ -1,12 +1,12 @@ -
-
+
+
[[vm.getResourceType()]]
-
+
diff --git a/src/main/resources/public/ts/directives/card-list/card-list-item.directive.ts b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.directive.ts similarity index 90% rename from src/main/resources/public/ts/directives/card-list/card-list-item.directive.ts rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.directive.ts index 582fe4ac..db421a35 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list-item.directive.ts +++ b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.directive.ts @@ -1,12 +1,12 @@ import {angular, model, ng} from "entcore"; import {IAugmentedJQuery, ILocationService, IParseService, IScope, IWindowService} from "angular"; -import {RootsConst} from "../../core/constants/roots.const"; -import {Card, IBoardOwner} from "../../models"; -import {DateUtils} from "../../utils/date.utils"; -import {RESOURCE_TYPE} from "../../core/enums/resource-type.enum"; -import {safeApply} from "../../utils/safe-apply.utils"; +import {RootsConst} from "../../../core/constants/roots.const"; +import {Card, IBoardOwner} from "../../../models"; +import {DateUtils} from "../../../utils/date.utils"; +import {RESOURCE_TYPE} from "../../../core/enums/resource-type.enum"; +import {safeApply} from "../../../utils/safe-apply.utils"; import {Subject} from "rxjs"; -import {cardsService} from "../../services"; +import {cardsService} from "../../../services"; interface IViewModel extends ng.IController, ICardListItemProps { formatDate(date: string): string; @@ -35,6 +35,8 @@ interface IViewModel extends ng.IController, ICardListItemProps { onCardFavorite?(card_id: string, isFavorite: boolean): void; + getZoomLevel(): number; + isDisplayedOptions: boolean; isSelected: boolean; } @@ -67,6 +69,7 @@ interface ICardListItemProps { hasComments: boolean; boardOwner: IBoardOwner; hasDisplayFavNumber: boolean; + zoom:number; } interface ICardListItemScope extends IScope, ICardListItemProps { @@ -98,6 +101,7 @@ class Controller implements IViewModel { cardUpdateEventer: Subject; boardOwner: IBoardOwner; hasDisplayFavNumber: boolean; + zoom:number; constructor(private $scope: ICardListItemScope, private $location: ILocationService, @@ -134,13 +138,26 @@ class Controller implements IViewModel { return this.hasDelete || this.hasPreview || this.hasEdit || this.hasHide || this.hasDuplicate; } + getZoomLevel(): number { + if(this.zoom >= 100){ + return (this.zoom - 100 )/15 + 3; + } + else { + return (this.zoom - 55 ) / 15 + } + + } + hasImgDisplay(): boolean{ + return this.zoom >= 85; + } + } function directive($parse: IParseService) { return { replace: true, restrict: 'E', - templateUrl: `${RootsConst.directive}card-list/card-list-item.html`, + templateUrl: `${RootsConst.directive}card-list/card-list-item/card-list-item.html`, scope: { card: '=', isSelected: '=', @@ -167,7 +184,8 @@ function directive($parse: IParseService) { cardUpdateEventer: '=', hasComments: '=', boardOwner: '=', - hasDisplayFavNumber: '=' + hasDisplayFavNumber: '=', + zoom: '=' }, controllerAs: 'vm', bindToController: true, @@ -253,4 +271,4 @@ function directive($parse: IParseService) { } } -export const cardListItem = ng.directive('cardListItem', directive) \ No newline at end of file +export const cardListItem = ng.directive('cardListItem', directive) diff --git a/src/main/resources/public/ts/directives/card-list/card-list-item.html b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.html similarity index 51% rename from src/main/resources/public/ts/directives/card-list/card-list-item.html rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.html index e931d20d..11696863 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list-item.html +++ b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.html @@ -1,18 +1,23 @@
-
-
- -
+
+
+ +
- + [[vm.formatDateModification(vm.card.modificationDate)]]
- +
- + + on-board-view="vm.openBoardView" + >
-
+
- [[vm.card.title]] + [[vm.card.title]]
- - - -
+
+ + + +
- - - + + + - - + + [[vm.card.caption]] +
-
\ No newline at end of file +
diff --git a/src/main/resources/public/ts/directives/card-list/card-list.directive.ts b/src/main/resources/public/ts/directives/card-list/card-list.directive.ts index 4e28c7b8..9fc54a5a 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list.directive.ts +++ b/src/main/resources/public/ts/directives/card-list/card-list.directive.ts @@ -29,6 +29,7 @@ interface IViewModel extends ng.IController, ICardListProps { isMyCard(card: Card): boolean; + getZoomLevel(): number; } interface ICardListProps { @@ -73,6 +74,8 @@ interface ICardListProps { hasComments: boolean; simpleView: boolean; boardOwner: IBoardOwner; + zoom: number; + zoomEventer: Subject; } interface ICardListScope extends IScope, ICardListProps { @@ -109,6 +112,8 @@ class Controller implements IViewModel { displayFavorite: boolean; boardOwner: IBoardOwner; + zoom: number = 100; //default no zoom + zoomEventer: Subject; constructor(private $scope: ICardListScope, private $location: ILocationService, @@ -160,6 +165,16 @@ class Controller implements IViewModel { return card.ownerId === model.me.userId; } + //cetnralise + getZoomLevel(): number { + if(this.zoom >= 100){ + return (this.zoom - 100 )/15 + 3; + } + else { + return (this.zoom - 55 ) / 15 + } + } + } function directive($parse: IParseService, $timeout: ng.ITimeoutService): ng.IDirective { @@ -200,7 +215,9 @@ function directive($parse: IParseService, $timeout: ng.ITimeoutService): ng.IDir cardUpdateEventer: '=', hasComments: '=', simpleView: '=', - boardOwner: '=' + boardOwner: '=', + zoom:"=?", + zoomEventer:"=?" }, controllerAs: 'vm', bindToController: true, @@ -220,6 +237,13 @@ function directive($parse: IParseService, $timeout: ng.ITimeoutService): ng.IDir }, 200); }); } + if (vm.zoomEventer) { + vm.zoomEventer.asObservable().subscribe(() => { + $timeout(() => { + vm.resizeAllCardItems(); + }, 200); + }); + } if (vm.layout == LAYOUT_TYPE.FREE) { const cardList: Element = document.getElementById("card-list"); diff --git a/src/main/resources/public/ts/directives/card-list/card-list.html b/src/main/resources/public/ts/directives/card-list/card-list.html index 6c9d20fd..6cd5b3a9 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list.html +++ b/src/main/resources/public/ts/directives/card-list/card-list.html @@ -1,4 +1,4 @@ -
+
+ has-favorite="vm.hasFavorite" + zoom="vm.zoom" + >

[[card.boardTitle]]
\ No newline at end of file diff --git a/src/main/resources/public/ts/directives/card-list/card-preview-image.directive.ts b/src/main/resources/public/ts/directives/card-list/card-preview-image.directive.ts index d5a11646..d67b0cb8 100644 --- a/src/main/resources/public/ts/directives/card-list/card-preview-image.directive.ts +++ b/src/main/resources/public/ts/directives/card-list/card-preview-image.directive.ts @@ -47,7 +47,7 @@ class Controller implements IViewModel { getExtension = (): string => { let result: string = this.RESOURCE_TYPES.DEFAULT; - if (!!this.card.metadata && !!this.card.metadata.filename) { + if (this.card.metadata && !!this.card.metadata && !!this.card.metadata.filename) { let extension: string; extension = this.card.metadata.filename.split('.').pop(); result = this.getExtensionType(extension); diff --git a/src/main/resources/public/ts/directives/index.ts b/src/main/resources/public/ts/directives/index.ts index 75e3d581..d37c366f 100644 --- a/src/main/resources/public/ts/directives/index.ts +++ b/src/main/resources/public/ts/directives/index.ts @@ -5,10 +5,10 @@ export * from './board-manage-lightbox/board-layout-type/board-layout-type.direc export * from './card-display/card-display.directive'; export * from './card-preview-lightbox/card-preview-lightbox.directive'; export * from './card-list/card-list.directive'; -export * from './card-list/card-list-item.directive'; -export * from './card-list/card-list-item-preview.directive'; +export * from './card-list/card-list-item/card-list-item.directive'; +export * from './card-list/card-list-item/card-list-item-preview/card-list-item-preview.directive'; export * from './card-list/card-preview-image.directive'; -export * from './card-list/card-list-item-options.directive'; +export * from './card-list/card-list-item/card-list-item-options/card-list-item-options.directive'; export * from './card-collection/card-collection.directive'; export * from './card-move-lightbox/card-move-lightbox.directive'; export * from './card-duplicate-move-lightbox/card-duplicate-move-lightbox.directive'; diff --git a/src/main/resources/public/ts/directives/section-list/section-list-item.directive.ts b/src/main/resources/public/ts/directives/section-list/section-list-item.directive.ts index 3b33ee63..a8ea2129 100644 --- a/src/main/resources/public/ts/directives/section-list/section-list-item.directive.ts +++ b/src/main/resources/public/ts/directives/section-list/section-list-item.directive.ts @@ -54,6 +54,9 @@ interface ISectionListItemProps { onMove?; onLock?; cardUpdateEventer: Subject; + zoom: number; + zoomEventer: Subject; + } interface ISectionListItemScope extends IScope, ISectionListItemProps { @@ -72,7 +75,8 @@ class Controller implements IViewModel { isDisplayedOptions: boolean; isDomLoaded: boolean; cardUpdateEventer: Subject; - + zoom: number; + zoomEventer: Subject; constructor(private $scope: ISectionListItemScope) { this.isDisplayedOptions = false; @@ -168,7 +172,9 @@ function directive($parse: IParseService) { onTransfer: '&', onMove: '&', onLock: '&', - cardUpdateEventer: '=' + cardUpdateEventer: '=', + zoom:"=?", + zoomEventer:"=?" }, controllerAs: 'vm', bindToController: true, diff --git a/src/main/resources/public/ts/directives/section-list/section-list-item.html b/src/main/resources/public/ts/directives/section-list/section-list-item.html index b26351b3..08faef70 100644 --- a/src/main/resources/public/ts/directives/section-list/section-list-item.html +++ b/src/main/resources/public/ts/directives/section-list/section-list-item.html @@ -43,6 +43,8 @@ board-owner="vm.board.owner" has-favorite="true" display-favorite="vm.board.displayNbFavorites" + zoom="vm.zoom" + zoom-eventer="vm.zoomEventer" > diff --git a/src/main/resources/public/ts/directives/section-list/section-list.directive.ts b/src/main/resources/public/ts/directives/section-list/section-list.directive.ts index c89854b5..df25c390 100644 --- a/src/main/resources/public/ts/directives/section-list/section-list.directive.ts +++ b/src/main/resources/public/ts/directives/section-list/section-list.directive.ts @@ -29,7 +29,7 @@ interface IViewModel extends ng.IController, ISectionListProps { openDeleteSectionLightbox(section: Section): void; refresh?(): void; - + getZoomLevel(): number; } interface ISectionListProps { @@ -43,6 +43,8 @@ interface ISectionListProps { onSubmit?; onLock?; cardUpdateEventer: Subject; + zoom: number; + zoomEventer: Subject; } interface ISectionListScope extends IScope, ISectionListProps { @@ -57,7 +59,8 @@ class Controller implements IViewModel { selectedSection: Section; displayDeleteSectionLightbox: boolean; cardUpdateEventer: Subject; - + zoom: number; + zoomEventer: Subject; constructor(private $scope: ISectionListScope, private $location: ILocationService, private $window: IWindowService) { @@ -112,6 +115,15 @@ class Controller implements IViewModel { this.selectedSection = section; this.displayDeleteSectionLightbox = true; } + + getZoomLevel(): number { + if(this.zoom >= 100){ + return (this.zoom - 100 )/15 + 3; + } + else { + return (this.zoom - 55 ) / 15 + } + } } function directive($parse: IParseService) { @@ -129,7 +141,9 @@ function directive($parse: IParseService) { onMove: '&', onSubmit: '&', onLock: '&', - cardUpdateEventer: '=' + cardUpdateEventer: '=', + zoom:"=?", + zoomEventer:"=?" }, controllerAs: 'vm', bindToController: true, diff --git a/src/main/resources/public/ts/directives/section-list/section-list.html b/src/main/resources/public/ts/directives/section-list/section-list.html index 1d02a94c..2ef25721 100644 --- a/src/main/resources/public/ts/directives/section-list/section-list.html +++ b/src/main/resources/public/ts/directives/section-list/section-list.html @@ -1,4 +1,4 @@ -
+
+ card-update-eventer="vm.cardUpdateEventer" + zoom-eventer="vm.zoomEventer" + zoom="vm.zoom">
- resetZoom():void; - zoomReset:number; + resetZoom(): void; + + zoomReset: number; } interface ICardProfileProps { @@ -17,7 +20,7 @@ interface ICardProfileProps { zoomMin: number; zoomIncrement: number; preferences: string; - + zoomEventer: Subject; } interface IZoomScope extends ICardProfileProps, IViewModel { @@ -29,20 +32,20 @@ class Controller implements IViewModel { zoomMax: number; zoomMin: number; zoomIncrement: number - zoomReset:number + zoomReset: number preferences: string; + zoomEventer: Subject; constructor() { if (this.zoomMax === undefined) - this.zoomMax = 150 + this.zoomMax = 130 if (this.zoomMin === undefined) - this.zoomMin = 50 - if (this.zoomIncrement === undefined) { - this.zoomIncrement = 25 - } + this.zoomMin = 55 + if (this.zoomIncrement === undefined) + this.zoomIncrement = 15 } - async $onInit() : Promise{ + async $onInit(): Promise { await Me.preference('magneto') if (!Me.preferences['magneto']) { await Me.savePreference('magneto'); @@ -52,7 +55,7 @@ class Controller implements IViewModel { Me.preferences['magneto'][this.preferences] = this.zoomLevel; await Me.savePreference('magneto'); await Me.preference('magneto') - }else{ + } else { this.zoomLevel = Me.preferences['magneto'][this.preferences]; } this.zoomReset = this.zoomLevel; @@ -61,10 +64,11 @@ class Controller implements IViewModel { async zoomIn(): Promise { if (this.zoomLevel < this.zoomMax) this.zoomLevel += this.zoomIncrement; + this.zoomEventer.next(); await this.savePreferences(); } - async savePreferences():Promise { + async savePreferences(): Promise { Me.preferences['magneto'][this.preferences] = this.zoomLevel; await Me.savePreference('magneto'); } @@ -72,13 +76,15 @@ class Controller implements IViewModel { async zoomOut(): Promise { if (this.zoomLevel > this.zoomMin) this.zoomLevel -= this.zoomIncrement; - Me.preferences['magneto'][this.preferences] = this.zoomLevel; - await Me.savePreference('magneto'); - } + Me.preferences['magneto'][this.preferences] = this.zoomLevel; + this.zoomEventer.next(); + await Me.savePreference('magneto'); + } - resetZoom():void { + resetZoom(): void { this.zoomLevel = this.zoomReset; - } + this.zoomEventer.next(); + } } @@ -91,7 +97,8 @@ function directive() { zoomMax: '=?', zoomMin: '=?', zoomIncrement: '=?', - preferences: '@' + preferences: '@', + zoomEventer: '=' }, controllerAs: 'vm', bindToController: true, @@ -105,4 +112,4 @@ function directive() { } } -export const zoom = ng.directive('zoom', directive) \ No newline at end of file +export const zoom = ng.directive('zoom', directive)