This space is an archive space for documentation related to old versions of Fluid Infusion (i.e. versions before 1.3). For documentation related to the latest Infusion, see Infusion Documentation.
Tutorial - Reorderer 1.0 Migration
This page will walk you through the process of upgrading your existing 0.8 Reorderer implementation to the new 1.0 version. This tutorial assumes that
- you are already familiar with HTML, Javascript and CSS
- you are familiar with what Reorderer is and does
- you have an existing implementation of Reorderer that worked with the 0.8 Infusion release.
- you are using the default classes
Location Changes
With the directory restructuring comes the need to update your paths to our files.
If you use... |
The new path is... |
|---|---|
../../fluid-components/js/fluid/GeometricManager.js |
../../components/reorderer/js/GeometricManager.js |
../../fluid-components/js/fluid/ImageReorderer.js |
../../components/reorderer/js/ImageReorderer.js |
../../fluid-components/js/fluid/LayoutReorderer.js |
../../components/reorderer/js/LayoutReorderer.js |
../../fluid-components/js/fluid/ModuleLayout.js |
../../components/reorderer/js/ModuleLayout.js |
../../fluid-components/js/fluid/Reorderer.js |
../../components/reorderer/js/Reorderer.js |
../../fluid-components/css/fluid.states.css |
../../components/reorderer/css/Reorderer.css |
** fluid.states.css has been removed and the reorderer classes moved to Reorderer.css. See below for a list of classes moved.
Class Name Changes
For consistency, classes used as selectors have been given an "flc-" prefix, and ones used for styling have an "fl-" prefix.
Selection
Image Reorderer
Added |
|---|
.fl-reorderer-imageTitle |
Layout Reorderer
New |
Old |
|---|---|
.flc-reorderer-column |
.columns |
.flc-reorderer-module |
.modules |
Reorderer
New |
Old |
|---|---|
.flc-reorderer-dropWarning |
.drop-warning |
.flc-reorderer-movable |
.movables |
Styles Changed Programatically
Reorderer
New |
Old |
|---|---|
.fl-reorderer-movable-default |
.orderable-default |
.fl-reorderer-movable-selected |
.orderable-selected |
.fl-reorderer-movable-dragging |
.orderable-dragging |
.fl-reorderer-movable-hover |
.orderable-hover |
.fl-reorderer-dropMarker |
.orderable-drop-marker |
.fl-reorderer-avatar |
.orderable-avatar |
Moved from FSS
Added |
|---|
.fl-reorderer-movable-default |
.fl-reorderer-movable-selected |
.fl-reorderer-movable-hover |
.fl-reorderer-movable-dragging |
.fl-reorderer-avatar |
.flc-reorderer-dropWarning |
.fl-reorderer-dropMarker |