Tiles

Tiles - UI

Tiles - Backend

• Big Bang Save!
• Nothing happens on the backend until a grid is saved (a publish implies save step) to server.
• At save-time, server receives:
• grid structure itself (in two layers: FG and BG)
• size and position x,y
• block ID (each element of a grid is generically referred to as a "block" in sys)
• tile ID (if tiled)
• serialized form config of any new tile created during this session (flynn.tiles)
• serialized config of any tile that was previously persisted but got modified during this session (flynn.tiles)
• these tiles have been assigned an id (ti_id/tiid) already
• IDs of any tiles that were deleted (flynn.trash) during this session
• these will be deleted from {flynn_tile} permanently
• any managed files (images) associated with the deleted tile will also be deleted at this time (records and files)

Tiles - Cache Layer

• final renders of tiles are cached only by size, not platform
• a 4x4 tile that has been rendered on desktop and mobile will be cached twice:
• 4x4
• 2x2 (the translated size for mobile)
• individual tile types can specify their own cache expire time (as an expression for strtotime() to consume)
• ncaa_core_cache_get() used for all cache loads
• tile cache is typically ignored when you are logged in regardless of parent grid being internal vs external (cache level is configurable)
• most of the cache layer interactions are handled in the base class
• the rest of the cache layer is handled in flynn_grid during render prep and will be covered later

Tiles - Image Management

• sdi_image_wrangler manages focal point coordinates CRUD and the actual "focal region selection" popup UI
• two steps to uploading  an image for tile:
• focal region selection
• preview crops for desktop (and mobile translation, if applicable)
• tile-upload.js
• AJAXy image upload -> focal popup
• provides form UI for uploading/modifying an existing tile image:

Tiles - Asset Management

• tile-asset-manager.js or 'TAM' for short (flynn.tam)
• dull, but extremely important
• more important for internal grid drafting than external display, but services both for the sake of consistency
• why?
• tile types are loaded and discarded at a whim
• TAM ensures they have what they need (JS, CSS, settings) to render properly
• relies on managed tiles' implementation of callbacks named after common tile-related events that occur during drafting: init, attach, detach
• prevents redundancy (won't load CSS more than once etc)
• ensures loading order of interdependent JS files (and CSS, though ordering should be less important for stylesheets)
• reconciles dependencies

Grids

• Lay of the land
• flynn_grid
• a "grid" record is basically a serialized config blob
• this is the layout, with tile IDs where relevant
• flynn_grid handles the following concerns:
• CRUD
• full grid rendering routine for internal, external (including mobile)
• index page (admin/structure/grid)
• functions for returning all assets required to render grids
• griddler.js
• internal grids (drafting interface)
• grid-browser.js
• external grids (a lot of this really belongs with arcades but I haven't had time to re-org yet)

Grid - templates

• The templates are split by internal, external, and external-mobile
• Let's take a look

Grid - rendering

• The conductors: 
• flynn_grid_render_external()
• flynn_grid_render_internal()
• The worker:
• flynn_grid_render_prep()
• Does a ton of work
• Collects tiles from both layers
• Measures grid height
• Loads and renders each tile according to the structure expected by the templates
• System-level caching decisions are made here
• Sorter:
• needed to translate a desktop grid into a mobile grid following a Z-pattern to determine priority

Grid - Saving

• This is part of the "big bang save" routine
• flynn_grid_save()
• Let's just walk through the function real quick and see what all it does

Griddler.js

• Runs the whole show when it comes to drafting UI (internal grids)
• Manages 2 gridster.js instances 
• why 2?
• Manages all the tile-level actions -
• wipe, remove, edit, resize
• Manages all the grid-level actions -
• save/publish
• Manages grid lock status (as well as ability to break lock)
• Provides "Mobile Preview" functionality (depends on server to render the preview, we can look at that function too but it is very similar to render_prep())
• This file is getting a bit cluttered.