[MUSIC]

In this lecture, we will discuss building a reusable ImageViewer component that

we'll use many times, but we'll start out by using it in the thing editor.

This will include setup of the overall component and

displaying the current image.

We will finish out the rest of this component in follow-on lectures.

In this lecture we're going to build a reusable image viewer.

However, we're going to target it's use, initially, for our things editor page.

Instead of users coming to this page and seeing thumbnail images,

we would like to replace this view with a large view of the images.

But when the organizer logs in, we still want to keep this area for

link management.

So I've checked in the specs ahead of our implementation.

We're going to worry about four different areas.

In this first area, we're going to do something really simple, it's just change

the look of the page so that non-organizer users do not see the control area.

It'll begin to see a image viewer component.

And then we'll get into the work of displaying images in that component,

paging through images within the component and then get into some image sizing.

So, getting started with the code I've added several source files.

The shell of an image viewer component and its associated HTML template and

an image query size service that we'll take a look at later.

All JavaScript files have been added to the JavaScript manifest, and

the HTML file added to the config.

So at this point in time, we want to come in to the thing editor and

change around our configuration.

So essentially what were going to do is we want to logically replace, what

we were doing with the thing images and create a new div for the related images.

What I want to do is assign a new class name to this div that we just copied over.

We want to retain the old class name with the previous div so

that we don't have to change our tests and our styling.

But, the old div is no longer there to show related images.

Although, it does to an extent.

It's there primarily to manage the links to those images.

And as such, the management of those links should only be accessible

If one can either update the image or remove the image.

And in our new we're going to add reference to our ST image viewer

which we have the shell of.

We're going to pass in and attribute obtain.

And this is mostly for debug.

If we're going to use this viewer in multiple places,

it helps diagnose where the messages are coming from.

This is not something that will be put up to the users to see.

We want to pass in a collection of images for

it to display and we wanted to take up the right three quarters of the display.

All right, based on what we have in place if we refresh our browser,

you notice related images is starting to show up.

And since we're the organizer we see both areas.

But if I were to log out,

now my unauthenticated user is seeing only related images.

If I were to inspect, we would see that we have our new thing-image-viewer div with

the sd-image-viewer component displaying the shell of an HTML file.

It's actually a bit more than a shell.

Notice, we have three images for our B&O Railroad Museum.

And notice, there are three sections showing up here already.

Except they have empty data in them.

The reason anything is showing up.

It's because within the HTML file, we have a NG repeat

that is trying to kick out a span with the id of the image and

the contents of the image which is we have no references yet.

You know we might want to put something like image id here, however, we got

to watch it because although I'm calling this image, it isn't really an image.

If we were to go to the console and look for the view model that I'm printing

out as debug, so if I go into the ImageViewerController, and

look at its debug for it's view model, you'll see that our three images that

we're displaying are not technically images, they are thing images and

thing images don't have an ID, they have an image ID to reference the image.

And then also they don't have content URL they have image content URL, all right.

So, what we would like to do is make this reusable so

it can display pure images as well as thing images.

So let's delegate some of these values to our controller to come up with.

So given something that represent an image, please give us the image ID.

And given something that represents an image, please give us the image URL,

and before we go too far, we are going to want to get rid of this NG show.

We are not ready for this just yet.

We'll bring you back when we are ready.

Now, let's go over to our component which has been given a name, has been given

an image and as you saw exposed the images on the view model already.

We want to add at least two call back methods to help populate the page.

We'll first have an image I.D. method and then if nothing is passed in.

A null will be returned, and then we want to determine what the ID should be,

and we are going to limit our choices here.

If what's passed in has an image ID property, we'll return it.

And that has the image id, but

if it doesn't, we're going to just take a reach and say, it's probably an image.

Let's return id instead of image id.

And the only reason I'm putting these on two different lines is, so

that if we have trouble deriving the id, we have a place to put a break point.

To see what the actual value was.

And image URL very similar depending on whether we find

image_id if we do we'll assumed it's a thing image and

return image_content URL if not we'll assumes it's image and return content URL.

In this particular case because it is a pretty important property

we're going to log the URL that we're going to query

then of course we need to add this to our new model.

Okay with that image exposed,

I would expect to see some content showing, wouldn't you?

So if I refresh the browser, and we do.

We're getting all three images that are associated with the B&O railroad Museum.

Of course we're only going to want one image at a time, and

that's what test are telling us right now.

That we have more than one that was expecting.

So let's go pair this down.

We going to want all images on the page, we just don't want all of them displayed.

And so if we put in some notion of, is the one in this list the current one.

Then show it otherwise hide it.

Let's delegate to our controller to tell us that information as well.

And so what we're parsing in to our controller is our dollar index

is our iteration through the loop, in the controller,

I want to expose something that's that will tell me is it the current index?

We have to add a few more things.

Let's expose that function before we forget.

And for starters, we need to set current index to a particular value.

Now when we hit refresh We get only a single image.

An awful big image, but a single image.

So if we would like to control the size of this image,

let's go over into the CSS file and start up a section for the image viewer and

tell the image, within the viewer, to take 100% of the width, and stick to that.

Now when we hit refresh, it stays within the margins.

Still pretty big though, but as we shrink and grow our display,

it actually responds pretty nicely.

However, it's using the largest image in order to satisfy all sizes.

Let's see if we can fix that down the road.

In summary, we setup a reusable ImageViewer component.

And this component will be able to display images through Image or

ThingImage references.

And like most of our other image displays uses ng repeat

except it's only going to display the image for

the current index so that we can have it occupy and much larger space.

And we implemented that, with a concept of a current index and to show and

hide images using ng-show/hide on whether they were referenced by the current index.

What's next?

Image Viewer Information Display and Controls.

Let's add the image Caption to the image and the ability to navigate to the image

page, as well as to go to the previous to next image,

because there are more images to see than just the current one.

UI: Image Viewer Content Display

Capstone: Photo Tourist Web Application

Conheça os instrutores