{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"section","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Section"}}},"content":[{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A column macro in a rich body macro can't be created or edited in the new editor.","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{"width":{"value":"65%"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"paragraph","content":[{"text":"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","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"you are already familiar with HTML, Javascript and CSS","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"you are familiar with what Reorderer is and does","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"you have an existing implementation of Reorderer that worked with the 0.8 Infusion release.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"you are using the default classes","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Location Changes","type":"text"}]},{"type":"paragraph","content":[{"text":"With the directory restructuring comes the need to update your paths to our files.","type":"text"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"If you use...","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" The new path is...","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../fluid-components/js/fluid/GeometricManager.js","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../components/reorderer/js/GeometricManager.js","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../fluid-components/js/fluid/ImageReorderer.js","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../components/reorderer/js/ImageReorderer.js","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../fluid-components/js/fluid/LayoutReorderer.js","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../components/reorderer/js/LayoutReorderer.js","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../fluid-components/js/fluid/ModuleLayout.js","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../components/reorderer/js/ModuleLayout.js","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../fluid-components/js/fluid/Reorderer.js","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../components/reorderer/js/Reorderer.js","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../fluid-components/css/","type":"text"},{"text":"fluid.states.css","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"../../components/reorderer/css/","type":"text"},{"text":"Reorderer.css","type":"text","marks":[{"type":"strong"}]}]}]}]}]},{"type":"paragraph","content":[{"text":"** fluid.states.css has been removed and the reorderer classes moved to Reorderer.css. See below for a list of classes moved.","type":"text"}]}]}],"version":1},"cxhtml":"65%

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

\n\n\n

Location Changes

\n\n

With the directory restructuring comes the need to update your paths to our files.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

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

\n\n

** fluid.states.css has been removed and the reorderer classes moved to Reorderer.css. See below for a list of classes moved.

\n\n

"}}},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A column macro in a rich body macro can't be created or edited in the new editor.","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"background":"#D3E3C4","rowspan":1},"content":[{"type":"paragraph","content":[{"text":"On this Page","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"#fff","rowspan":1},"content":[{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"maxLevel":{"value":"5"},"minLevel":{"value":"2"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Table of Contents"}}}}]}]}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"include","parameters":{"macroParams":{"":{"value":"Still Need Help panel"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Include Page"}}}}]}],"version":1},"cxhtml":"

\n#fff#D3E3C4solidOn this Page#566b30

\n52

"}}}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Class Name Changes","type":"text"}]},{"type":"paragraph","content":[{"text":"For consistency, classes used as selectors have been given an \"flc-\" prefix, and ones used for styling have an \"fl-\" prefix.","type":"text"}]},{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"section","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Section"}}},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"Selection","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Image Reorderer","type":"text"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Added","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-imageTitle","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Layout Reorderer","type":"text"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" New ","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Old","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".flc-reorderer-column","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".columns","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".flc-reorderer-module","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".modules","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Reorderer","type":"text"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"New","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Old","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".flc-reorderer-dropWarning","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".drop-warning","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".flc-reorderer-movable","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".movables","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Styles Changed Programatically","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Reorderer","type":"text"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" New ","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Old","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-movable-default","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".orderable-default","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-movable-selected","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".orderable-selected","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-movable-dragging","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".orderable-dragging","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-movable-hover","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".orderable-hover","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-dropMarker","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".orderable-drop-marker","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-avatar","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".orderable-avatar","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Moved from FSS","type":"text"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Added ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-movable-default","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-movable-selected","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-movable-hover","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-movable-dragging","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-avatar","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".flc-reorderer-dropWarning","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":".fl-reorderer-dropMarker","type":"text"}]}]}]}]}]}],"version":1}

Tutorial - Reorderer 1.0 Migration

Class Name Changes