From fa7430d214e89bf3dc3dc87722c6675409993738 Mon Sep 17 00:00:00 2001 From: Jessica Good Date: Wed, 8 Aug 2018 19:39:19 -0700 Subject: [PATCH] Micro: Added nest to images scroll on micrograph workspace --- .../thin-section/thin-section.controller.js | 82 ++++++++++++++++--- .../thin-section/thin-section.directive.html | 81 ++++++++++++++++++ .../thin-section/thin-section.directive.js | 15 ++++ www/app/maps/thin-section/thin-section.html | 22 +---- .../maps/thin-section/thin-section.web.html | 22 +---- www/css/style.css | 6 +- www/index.html | 1 + www/indexWeb.html | 1 + 8 files changed, 176 insertions(+), 54 deletions(-) create mode 100644 www/app/maps/thin-section/thin-section.directive.html create mode 100644 www/app/maps/thin-section/thin-section.directive.js diff --git a/www/app/maps/thin-section/thin-section.controller.js b/www/app/maps/thin-section/thin-section.controller.js index c28516e4..6db78326 100644 --- a/www/app/maps/thin-section/thin-section.controller.js +++ b/www/app/maps/thin-section/thin-section.controller.js @@ -25,8 +25,8 @@ var tagsToAdd = []; var switchers = {}; - //vm.addIntervalModal = {}; vm.allTags = []; + vm.childGenerations = []; vm.clickedFeatureId = undefined; vm.data = {}; vm.images = []; @@ -34,6 +34,7 @@ vm.isNesting = SpotFactory.getActiveNesting(); vm.newNestModal = {}; vm.newNestProperties = {}; + vm.parentGenerations = []; vm.popover = {}; vm.saveEditsText = 'Save Edits'; vm.showSaveEditsBtns = {}; @@ -41,6 +42,7 @@ vm.closeModal = closeModal; vm.createTag = createTag; + vm.getImages = getImages; vm.getImageSrc = getImageSrc; vm.goBack = goBack; vm.goToSpot = goToSpot; @@ -71,6 +73,9 @@ //MapEmogeosFactory.clearSelectedSpot(); getSpotWithThinSection(); + gatherSpotGenerations(); + gatherImages(); + createModals(); createPopover(); createPageEvents(); @@ -406,24 +411,75 @@ }); } - var childrenSpots = SpotFactory.getChildrenSpots(vm.thisSpotWithThinSection); - _.each(childrenSpots, function (spot) { - _.each(spot.properties.images, function (image) { - if (image.image_type === 'micrograph_ref' || image.image_type === 'micrograph') vm.images.push(image); - var promise = ImageFactory.getImageById(image.id).then(function (src) { - if (IS_WEB) imageSources[image.id] = "https://strabospot.org/pi/" + image.id; - else if (src) imageSources[image.id] = src; - else imageSources[image.id] = 'img/image-not-found.png'; + _.each(vm.childGenerations, function (childGeneration) { + _.each(childGeneration, function (spot) { + _.each(spot.properties.images, function (image) { + vm.images.push(image); + var promise = ImageFactory.getImageById(image.id).then(function (src) { + if (IS_WEB) imageSources[image.id] = "https://strabospot.org/pi/" + image.id; + else if (src) imageSources[image.id] = src; + else imageSources[image.id] = 'img/image-not-found.png'; + }); + promises.push(promise); }); - promises.push(promise); }); }); + + _.each(vm.parentGenerations, function (parentGeneration) { + _.each(parentGeneration, function (spot) { + _.each(spot.properties.images, function (image) { + vm.images.push(image); + var promise = ImageFactory.getImageById(image.id).then(function (src) { + if (IS_WEB) imageSources[image.id] = "https://strabospot.org/pi/" + image.id; + else if (src) imageSources[image.id] = src; + else imageSources[image.id] = 'img/image-not-found.png'; + }); + promises.push(promise); + }); + }); + }); + $log.log('All Images:', vm.images); return $q.all(promises).then(function () { //$log.log('Image Sources:', imageSources); }); } + // Gather 5 generations up and down from current Spot with Micrograph Reference + function gatherSpotGenerations() { + function getChildren(spots) { + var allChildrenSpots = []; + _.each(spots, function (spot) { + var childrenSpots = SpotFactory.getChildrenSpots(spot); + if (!_.isEmpty(childrenSpots)) allChildrenSpots.push(childrenSpots); + }); + return _.flatten(allChildrenSpots); + } + + function getParents(spots) { + var allParentSpots = []; + _.each(spots, function (spot) { + var parentSpots = SpotFactory.getParentSpots(spot); + if (!_.isEmpty(parentSpots)) allParentSpots.push(parentSpots); + }); + return _.flatten(allParentSpots); + } + + var parentSpots = [vm.thisSpotWithThinSection]; + _.times(5, function (i) { + parentSpots = getParents(parentSpots); + if (!_.isEmpty(parentSpots)) vm.parentGenerations.push(parentSpots); + }); + $log.log('parentGenerations', vm.parentGenerations); + + var childSpots = [vm.thisSpotWithThinSection]; + _.times(5, function (i) { + childSpots = getChildren(childSpots); + if (!_.isEmpty(childSpots)) vm.childGenerations.push(childSpots); + }); + $log.log('childGenerations', vm.childGenerations); + } + // Get only the Spots where the image_basemap id matches the id of one of the linked images being loaded function gatherSpotsOnImage(imageId) { var activeSpots = SpotFactory.getActiveSpots(); @@ -441,7 +497,6 @@ // Get the Spot that has this Thin Section //vm.thisSpotWithThinSection = ThinSectionFactory.getSpotWithThisThinSection($state.params.thinSectionId); vm.thisSpotWithThinSection = SpotFactory.getSpotWithImageId($state.params.thinSectionId); - gatherImages(); $log.log('thisSpotWithThinSection', vm.thisSpotWithThinSection); } @@ -532,6 +587,11 @@ $location.path('/app/tags/' + id); } + function getImages(spot) { + if (!_.isEmpty(spot.properties.images)) return spot.properties.images; + return []; + } + function getImageSrc(imageId) { return imageSources[imageId] || 'img/loading-image.png'; } diff --git a/www/app/maps/thin-section/thin-section.directive.html b/www/app/maps/thin-section/thin-section.directive.html new file mode 100644 index 00000000..3a955f80 --- /dev/null +++ b/www/app/maps/thin-section/thin-section.directive.html @@ -0,0 +1,81 @@ +
+
+ +
+
+ 1st + 2nd + 3rd + 4th + 5th + Generation Parents +
+
+ +
+ {{ image.title || 'Untitled' }} + +
+
+
+
+ + + +
+ +
+ +
+ THIS SPOT +
+
+ +
+ {{ image.title || 'Untitled' }} + +
+
+
+
+ +
+ + +
+ + +
+ 1st + 2nd + 3rd + 4th + 5th + Generation Children +
+
+ +
+ {{ image.title || 'Untitled' }} + +
+
+
+
+
+ +
+ No images in this Spot, {{ vm.thisSpotWithThinSection.properties.name }}. + Add images to this Spot from the Spot page for this Micrograph. See below. + +
+
+
+
+
+ No images selected. Please select an image on the left to add it to the map workspace. +
+
\ No newline at end of file diff --git a/www/app/maps/thin-section/thin-section.directive.js b/www/app/maps/thin-section/thin-section.directive.js new file mode 100644 index 00000000..65036e37 --- /dev/null +++ b/www/app/maps/thin-section/thin-section.directive.js @@ -0,0 +1,15 @@ +(function () { + 'use strict'; + + angular + .module('app') + .directive('straboMicrographDirective', straboMicrographDirective); + + function straboMicrographDirective() { + return { + 'restrict': 'AE', + 'replace': true, + 'templateUrl': 'app/maps/thin-section/thin-section.directive.html' + }; + } +}()); \ No newline at end of file diff --git a/www/app/maps/thin-section/thin-section.html b/www/app/maps/thin-section/thin-section.html index 3a1e10b8..b6b2549c 100644 --- a/www/app/maps/thin-section/thin-section.html +++ b/www/app/maps/thin-section/thin-section.html @@ -8,27 +8,7 @@ -
- - - {{ image.title || 'Untitled' }} - - - -
- No images in this Spot, {{ vm.thisSpotWithThinSection.properties.name }}. - Add images to this Spot from the Spot page for this Thin Section. See below. - -
-
-
-
-
- No images selected. Please select an image on the left to add it to the map workspace. -
+ diff --git a/www/app/maps/thin-section/thin-section.web.html b/www/app/maps/thin-section/thin-section.web.html index aae6085d..b897d98a 100644 --- a/www/app/maps/thin-section/thin-section.web.html +++ b/www/app/maps/thin-section/thin-section.web.html @@ -1,25 +1,5 @@
-
- - - {{ image.title || 'Untitled' }} - - - -
- No images in this Spot, {{ vm.thisSpotWithThinSection.properties.name }}. - Add images to this Spot from the Spot page for this Micrograph. See below. - -
-
-
-
-
- No images selected. Please select an image on the left to add it to the map workspace. -
+
diff --git a/www/css/style.css b/www/css/style.css index c892db2b..5f9a13f2 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -1067,12 +1067,16 @@ Thin Section border-width: 2px; } -.thin-section-layout-row{ +.thin-section-layout-row { margin-right: 0; margin-left: 0; margin-bottom: 15px; } +.micrograph-nest-image-label { + width: 100%; +} + /*-------------------- Nesting ---------------------*/ diff --git a/www/index.html b/www/index.html index 305d1647..45cd1341 100644 --- a/www/index.html +++ b/www/index.html @@ -149,6 +149,7 @@ + diff --git a/www/indexWeb.html b/www/indexWeb.html index 57196971..e2a9d0b2 100644 --- a/www/indexWeb.html +++ b/www/indexWeb.html @@ -167,6 +167,7 @@ +