The item_placement_class.js

// This module takes an image that acts as a container for a group of items.
//
// It places the images of the items against the backdrop of the container image.
//
// This module allows the items to be dragged to different locations and keeps track of their locations.
//
// The most important thing is that it allows the container image to be resized and handles the resizing and
// positioning of the items contained.

The ItemPlacement object

ItemPlacement object parameters

The ItemPlacement object, created in the CLASS statement in item_placement_class.js , has the following parameters

• originalBackgroundSize
• backgroundDivID
• ItemDivClass
• displayItems
• dragStopHandler
• clickHandler

ItemPlacement object constructor

It has a constructor that takes the config file as a parameter (remember, every block has a config file). The constructor initializes properties as follows:

originalBackgroundSize is set from whatever is specified for originalBackgroundSize in the config file

backgroundDivID – also set from config file – IMPORTANT, this is going to match up to the ID for a div in the html file for the block, which will usually be called ‘main’. NOTE: I think it should be called ‘main’ everywhere. In the drag_into_categories.html file that main div is inside of another div with an ID of wrapper and class of “container”.

itemDivClass – Set to images. Used to resize size of all images with respect to the background image.

displayItems – this is an array. It consists of the items in the items array in the config file. It looks as if it is initially set to an empty array.

backgroundImageClass – is either the backgroundImageClass from the config file or “bkg-img”

dragStopHandler, moveHandler, clickHandler – if any of these handlers for when a dragging stop, move or click event occurs exist in the config file then the handler is set to whatever is in the config file. NOTE: None of these appear to be in the drag_into_categories.js or in the config file

setCurrentImageSize()

IF backgroundImageClass has NOT been given a value, the current image and position is found using the width, height and position of using the backgroundDivID element, which is usually going to be the div with the ID ‘main’ in block_name.html

ELSE backgroundImageClass has been given a value, and the current image and position is found using the width, height and position of using that value.

Once we have current image height, width and position, we use the width value to scale the current image width / original image width.

QUESTION – is this the answer to getting every screen to have the same dimensions? If main is 82vh for visual novels, should we use some other class for other blocks?

stopDrag(ui)

This takes an argument of ui.

• If there is a function for dragStopHandler, then that function executes.
• The image size is scaled to fit the current container image size
• Location is updated in the itemMap array
• Something goes on with the moveHandler here but I am not sure what

scalePosition(position)

Obviously, this returns the top and left positions scaled for the current container image size. It is used in the function below

scaleSizeAndPositionOfItem(itemID, location, scaling)

For an item with the ID given, it does the following:

• scales the width using the original background size width (gotten from the block’s config file), times the imageScale (set in the SetCurrentImageSize function above)
• Positions the item to scale using the scalePosition function above

handleResize()

This iterates over all of the items in the displayItems array, calling the scaleSizeAndPositionOfItem function to scale and position each one.

addDisplayItem(item)

• Appends a div to ItemsContainer – The div is assigned an ID from displayItemID (haven’t found where that is set either.) and given a class of itemDivClass which is set in the config file. The img source is set as the item image and if there is a description for the item, it is used for the alt field and if not, “displayItem” is the alt text. HTML attributes , scale, size and position are set here. This function is used in the visual novel block if you add an image to the screen.

addDisplayItems(displayItems)

executes the addDisplayItem function for as many items as in the displayItems array

removeDisplayItem(displayItemID)

removes an item from the screen. This is used in the visual novel block (optionally)

moveDisplayItemTo(displayItemID, newPosition)