have been replaced with a floating button. The anchors a.toTopLink have been replaced with a floating button. Avatars should no longer receive the class framed The dl.condensed class, as seen in the editor tab menu, is no longer required. Anything related to sidebarCollapsed has been removed as sidebars are no longer collapsible.","title":"Removed Elements and Classes"},{"location":"migration/wcf21/templates/#simple-example","text":"The code below includes only the absolute minimum required to display a page, the content title is already included in the output. 1 2 3 4 5 6 7 { include file = 'header' }

Hello World!

{ include file = 'footer' }","title":"Simple Example"},{"location":"migration/wcf21/templates/#full-example","text":"1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 { * The page title is automatically set using the page definition, avoid setting it if you can! If you really need to modify the title, you can still reference the original title with: {$__wcf->getActivePage()->getTitle()} * } { capture assign = 'pageTitle' } Custom Page Title { /capture } { * NOTICE: The content header goes here, see the section after this to learn more. * } { * you must not use `headContent` for JavaScript * } { capture assign = 'headContent' } { /capture } { * optional, content will be added to the top of the left sidebar * } { capture assign = 'sidebarLeft' } \u2026 { event name = 'boxes' } { /capture } { * optional, content will be added to the top of the right sidebar * } { capture assign = 'sidebarRight' } \u2026 { event name = 'boxes' } { /capture } { capture assign = 'headerNavigation' }

{ /capture } { include file = 'header' } { hascontent }

{ content } { pages \u2026 } { /content }

{ /hascontent } { * the actual content * }

\u2026

{ * do not include `` here, the footer template is the last bit of code! * } { include file = 'footer' }","title":"Full Example"},{"location":"migration/wcf21/templates/#content-header","text":"There are two different methods to set the content header, one sets only the actual values, but leaves the outer HTML untouched, that is generated by the header template. This is the recommended approach and you should avoid using the alternative method whenever possible.","title":"Content Header"},{"location":"migration/wcf21/templates/#recommended-approach","text":"1 2 3 4 5 6 { * This is automatically set using the page data and should not be set manually! * } { capture assign = 'contentTitle' } Custom Content Title { /capture } { capture assign = 'contentDescription' } Optional description that is displayed right after the title. { /capture } { capture assign = 'contentHeaderNavigation' } List of navigation buttons displayed right next to the title. { /capture }","title":"Recommended Approach"},{"location":"migration/wcf21/templates/#alternative","text":"1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { capture assign = 'contentHeader' }

Custom Content Title

Custom Content Description

{ /capture }","title":"Alternative"},{"location":"migration/wsc30/css/","text":"Migrating from WSC 3.0 - CSS # New Style Variables # The new style variables are only applied to styles that have the compatibility set to WSC 3.1 wcfContentContainer # The page content is encapsulated in a new container that wraps around the inner content, but excludes the sidebars, header and page navigation elements. $wcfContentContainerBackground - background color $wcfContentContainerBorder - border color wcfEditorButton # These variables control the appearance of the editor toolbar and its buttons. $wcfEditorButtonBackground - button and toolbar background color $wcfEditorButtonBackgroundActive - active button background color $wcfEditorButtonText - text color for available buttons $wcfEditorButtonTextActive - text color for active buttons $wcfEditorButtonTextDisabled - text color for disabled buttons Color Variables in alert.scss # The color values for used to be hardcoded values, but have now been changed to use the values for error messages ( wcfStatusError* ) instead.","title":"CSS"},{"location":"migration/wsc30/css/#migrating-from-wsc-30-css","text":"","title":"Migrating from WSC 3.0 - CSS"},{"location":"migration/wsc30/css/#new-style-variables","text":"The new style variables are only applied to styles that have the compatibility set to WSC 3.1","title":"New Style Variables"},{"location":"migration/wsc30/css/#wcfcontentcontainer","text":"The page content is encapsulated in a new container that wraps around the inner content, but excludes the sidebars, header and page navigation elements. $wcfContentContainerBackground - background color $wcfContentContainerBorder - border color","title":"wcfContentContainer"},{"location":"migration/wsc30/css/#wcfeditorbutton","text":"These variables control the appearance of the editor toolbar and its buttons. $wcfEditorButtonBackground - button and toolbar background color $wcfEditorButtonBackgroundActive - active button background color $wcfEditorButtonText - text color for available buttons $wcfEditorButtonTextActive - text color for active buttons $wcfEditorButtonTextDisabled - text color for disabled buttons","title":"wcfEditorButton"},{"location":"migration/wsc30/css/#color-variables-in-alertscss","text":"The color values for used to be hardcoded values, but have now been changed to use the values for error messages ( wcfStatusError* ) instead.","title":"Color Variables in alert.scss"},{"location":"migration/wsc30/javascript/","text":"Migrating from WSC 3.0 - JavaScript # Accelerated Guest View / Tiny Builds # The new tiny builds are highly optimized variants of existing JavaScript files and modules, aiming for significant performance improvements for guests and search engines alike. This is accomplished by heavily restricting page interaction to read-only actions whenever possible, which in return removes the need to provide certain JavaScript modules in general. For example, disallowing guests to write any formatted messages will in return remove the need to provide the WYSIWYG editor at all. But it doesn't stop there, there are a lot of other modules that provide additional features for the editor, and by excluding the editor, we can also exclude these modules too. Long story short, the tiny mode guarantees that certain actions will never be carried out by guests or search engines, therefore some modules are not going to be needed by them ever. Code Templates for Tiny Builds # The following examples assume that you use the virtual constant COMPILER_TARGET_DEFAULT as a switch for the optimized code path. This is also the constant used by the official build scripts for JavaScript files . We recommend that you provide a mock implementation for existing code to ensure 3rd party compatibility. It is enough to provide a bare object or class that exposes the original properties using the same primitive data types. This is intended to provide a soft-fail for implementations that are not aware of the tiny mode yet, but is not required for classes that did not exist until now. Legacy JavaScript # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 if ( COMPILER_TARGET_DEFAULT ) { WCF . Example . Foo = { makeSnafucated : function () { return \"Hello World\" ; } }; WCF . Example . Bar = Class . extend ({ foobar : \"baz\" , foo : function ( $bar ) { return $bar + this . foobar ; } }); } else { WCF . Example . Foo = { makeSnafucated : function () {} }; WCF . Example . Bar = Class . extend ({ foobar : \"\" , foo : function () {} }); } require.js Modules # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 define ([ \"some\" , \"fancy\" , \"dependencies\" ], function ( Some , Fancy , Dependencies ) { \"use strict\" ; if ( ! COMPILER_TARGET_DEFAULT ) { var Fake = function () {}; Fake . prototype = { init : function () {}, makeSnafucated : function () {} }; return Fake ; } function MyAwesomeClass ( niceArgument ) { this . init ( niceArgument ); } MyAwesomeClass . prototype = { init : function ( niceArgument ) { if ( niceArgument ) { this . makeSnafucated (); } }, makeSnafucated : function () { console . log ( \"Hello World\" ); } } return MyAwesomeClass ; }); Including tinified builds through {js} # The {js} template-plugin has been updated to include support for tiny builds controlled through the optional flag hasTiny=true : 1 {js application='wcf' file='WCF.Example' hasTiny=true} This line generates a different output depending on the debug mode and the user login-state. Real Error Messages for AJAX Responses # The errorMessage property in the returned response object for failed AJAX requests contained an exception-specific but still highly generic error message. This issue has been around for quite a long time and countless of implementations are relying on this false behavior, eventually forcing us to leave the value unchanged. This problem is solved by adding the new property realErrorMessage that exposes the message exactly as it was provided and now matches the value that would be displayed to users in traditional forms. Example Code # 1 2 3 4 5 6 7 8 9 define ([ 'Ajax' ], function ( Ajax ) { return { // ... _ajaxFailure : function ( responseData , responseText , xhr , requestData ) { console . log ( responseData . realErrorMessage ); } // ... }; }); Simplified Form Submit in Dialogs # Forms embedded in dialogs often do not contain the HTML

-element and instead rely on JavaScript click- and key-handlers to emulate a -like submit behavior. This has spawned a great amount of nearly identical implementations that all aim to handle the form submit through the Enter -key, still leaving some dialogs behind. WoltLab Suite 3.1 offers automatic form submit that is enabled through a set of specific conditions and data attributes: There must be a submit button that matches the selector .formSubmit > input[type=\"submit\"], .formSubmit > button[data-type=\"submit\"] . The dialog object provided to UiDialog.open() implements the method _dialogSubmit() . Input fields require the attribute data-dialog-submit-on-enter=\"true\" to be set, the type must be one of number , password , search , tel , text or url . Clicking on the submit button or pressing the Enter -key in any watched input field will start the submit process. This is done automatically and does not require a manual interaction in your code, therefore you should not bind any click listeners on the submit button yourself. Any input field with the required attribute set will be validated to contain a non-empty string after processing the value with String.prototype.trim() . An empty field will abort the submit process and display a visible error message next to the offending field. Helper Function for Inline Error Messages # Displaying inline error messages on-the-fly required quite a few DOM operations that were quite simple but also super repetitive and thus error-prone when incorrectly copied over. The global helper function elInnerError() was added to provide a simple and consistent behavior of inline error messages. You can display an error message by invoking elInnerError(elementRef, \"Your Error Message\") , it will insert a new and sets the given message. If there is already an inner error present, then the message will be replaced instead. Hiding messages is done by setting the 2nd parameter to false or an empty string: elInnerError(elementRef, false) elInnerError(elementRef, '') The special values null and undefined are supported too, but their usage is discouraged, because they make it harder to understand the intention by reading the code: elInnerError(elementRef, null) elInnerError(elementRef) Example Code # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 require ([ 'Language' ], function ( Language )) { var input = elBySel ( 'input[type=\"text\"]' ); if ( input . value . trim () === '' ) { // displays a new inline error or replaces the message if there is one already elInnerError ( input , Language . get ( 'wcf.global.form.error.empty' )); } else { // removes the inline error if it exists elInnerError ( input , false ); } // the above condition is equivalent to this: elInnerError ( input , ( input . value . trim () === '' ? Language . get ( 'wcf.global.form.error.empty' ) : false )); }","title":"JavaScript API"},{"location":"migration/wsc30/javascript/#migrating-from-wsc-30-javascript","text":"","title":"Migrating from WSC 3.0 - JavaScript"},{"location":"migration/wsc30/javascript/#accelerated-guest-view-tiny-builds","text":"The new tiny builds are highly optimized variants of existing JavaScript files and modules, aiming for significant performance improvements for guests and search engines alike. This is accomplished by heavily restricting page interaction to read-only actions whenever possible, which in return removes the need to provide certain JavaScript modules in general. For example, disallowing guests to write any formatted messages will in return remove the need to provide the WYSIWYG editor at all. But it doesn't stop there, there are a lot of other modules that provide additional features for the editor, and by excluding the editor, we can also exclude these modules too. Long story short, the tiny mode guarantees that certain actions will never be carried out by guests or search engines, therefore some modules are not going to be needed by them ever.","title":"Accelerated Guest View / Tiny Builds"},{"location":"migration/wsc30/javascript/#code-templates-for-tiny-builds","text":"The following examples assume that you use the virtual constant COMPILER_TARGET_DEFAULT as a switch for the optimized code path. This is also the constant used by the official build scripts for JavaScript files . We recommend that you provide a mock implementation for existing code to ensure 3rd party compatibility. It is enough to provide a bare object or class that exposes the original properties using the same primitive data types. This is intended to provide a soft-fail for implementations that are not aware of the tiny mode yet, but is not required for classes that did not exist until now.","title":"Code Templates for Tiny Builds"},{"location":"migration/wsc30/javascript/#legacy-javascript","text":"1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 if ( COMPILER_TARGET_DEFAULT ) { WCF . Example . Foo = { makeSnafucated : function () { return \"Hello World\" ; } }; WCF . Example . Bar = Class . extend ({ foobar : \"baz\" , foo : function ( $bar ) { return $bar + this . foobar ; } }); } else { WCF . Example . Foo = { makeSnafucated : function () {} }; WCF . Example . Bar = Class . extend ({ foobar : \"\" , foo : function () {} }); }","title":"Legacy JavaScript"},{"location":"migration/wsc30/javascript/#requirejs-modules","text":"1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 define ([ \"some\" , \"fancy\" , \"dependencies\" ], function ( Some , Fancy , Dependencies ) { \"use strict\" ; if ( ! COMPILER_TARGET_DEFAULT ) { var Fake = function () {}; Fake . prototype = { init : function () {}, makeSnafucated : function () {} }; return Fake ; } function MyAwesomeClass ( niceArgument ) { this . init ( niceArgument ); } MyAwesomeClass . prototype = { init : function ( niceArgument ) { if ( niceArgument ) { this . makeSnafucated (); } }, makeSnafucated : function () { console . log ( \"Hello World\" ); } } return MyAwesomeClass ; });","title":"require.js Modules"},{"location":"migration/wsc30/javascript/#including-tinified-builds-through-js","text":"The {js} template-plugin has been updated to include support for tiny builds controlled through the optional flag hasTiny=true : 1 {js application='wcf' file='WCF.Example' hasTiny=true} This line generates a different output depending on the debug mode and the user login-state.","title":"Including tinified builds through {js}"},{"location":"migration/wsc30/javascript/#real-error-messages-for-ajax-responses","text":"The errorMessage property in the returned response object for failed AJAX requests contained an exception-specific but still highly generic error message. This issue has been around for quite a long time and countless of implementations are relying on this false behavior, eventually forcing us to leave the value unchanged. This problem is solved by adding the new property realErrorMessage that exposes the message exactly as it was provided and now matches the value that would be displayed to users in traditional forms.","title":"Real Error Messages for AJAX Responses"},{"location":"migration/wsc30/javascript/#example-code","text":"1 2 3 4 5 6 7 8 9 define ([ 'Ajax' ], function ( Ajax ) { return { // ... _ajaxFailure : function ( responseData , responseText , xhr , requestData ) { console . log ( responseData . realErrorMessage ); } // ... }; });","title":"Example Code"},{"location":"migration/wsc30/javascript/#simplified-form-submit-in-dialogs","text":"Forms embedded in dialogs often do not contain the HTML -element and instead rely on JavaScript click- and key-handlers to emulate a -like submit behavior. This has spawned a great amount of nearly identical implementations that all aim to handle the form submit through the Enter -key, still leaving some dialogs behind. WoltLab Suite 3.1 offers automatic form submit that is enabled through a set of specific conditions and data attributes: There must be a submit button that matches the selector .formSubmit > input[type=\"submit\"], .formSubmit > button[data-type=\"submit\"] . The dialog object provided to UiDialog.open() implements the method _dialogSubmit() . Input fields require the attribute data-dialog-submit-on-enter=\"true\" to be set, the type must be one of number , password , search , tel , text or url . Clicking on the submit button or pressing the Enter -key in any watched input field will start the submit process. This is done automatically and does not require a manual interaction in your code, therefore you should not bind any click listeners on the submit button yourself. Any input field with the required attribute set will be validated to contain a non-empty string after processing the value with String.prototype.trim() . An empty field will abort the submit process and display a visible error message next to the offending field.","title":"Simplified Form Submit in Dialogs"},{"location":"migration/wsc30/javascript/#helper-function-for-inline-error-messages","text":"Displaying inline error messages on-the-fly required quite a few DOM operations that were quite simple but also super repetitive and thus error-prone when incorrectly copied over. The global helper function elInnerError() was added to provide a simple and consistent behavior of inline error messages. You can display an error message by invoking elInnerError(elementRef, \"Your Error Message\") , it will insert a new and sets the given message. If there is already an inner error present, then the message will be replaced instead. Hiding messages is done by setting the 2nd parameter to false or an empty string: elInnerError(elementRef, false) elInnerError(elementRef, '') The special values null and undefined are supported too, but their usage is discouraged, because they make it harder to understand the intention by reading the code: elInnerError(elementRef, null) elInnerError(elementRef)","title":"Helper Function for Inline Error Messages"},{"location":"migration/wsc30/javascript/#example-code_1","text":"1 2 3 4 5 6 7 8 9 10 11 12 13 14 require ([ 'Language' ], function ( Language )) { var input = elBySel ( 'input[type=\"text\"]' ); if ( input . value . trim () === '' ) { // displays a new inline error or replaces the message if there is one already elInnerError ( input , Language . get ( 'wcf.global.form.error.empty' )); } else { // removes the inline error if it exists elInnerError ( input , false ); } // the above condition is equivalent to this: elInnerError ( input , ( input . value . trim () === '' ? Language . get ( 'wcf.global.form.error.empty' ) : false )); }","title":"Example Code"},{"location":"migration/wsc30/package/","text":"Migrating from WSC 3.0 - Package Components # Cronjob Scheduler uses Server Timezone # The execution time of cronjobs was previously calculated based on the coordinated universal time (UTC). This was changed in WoltLab Suite 3.1 to use the server timezone or, to be precise, the default timezone set in the administration control panel. Exclude Pages from becoming a Landing Page # Some pages do not qualify as landing page, because they're designed around specific expectations that aren't matched in all cases. Examples include the user control panel and its sub-pages that cannot be accessed by guests and will therefore break the landing page for those. While it is somewhat to be expected from control panel pages, there are enough pages that fall under the same restrictions, but aren't easily recognized as such by an administrator. You can exclude these pages by adding 1 (case-sensitive) to the relevant pages in your page.xml . Example Code # 1 2 3 4 5 6 7 8 9 10 1 New Package Installation Plugin for Media Providers # Please refer to the documentation of the mediaProvider.xml to learn more. Limited Forward-Compatibility for Plugins # Please refer to the documentation of the tag in the package.xml .","title":"Package Components"},{"location":"migration/wsc30/package/#migrating-from-wsc-30-package-components","text":"","title":"Migrating from WSC 3.0 - Package Components"},{"location":"migration/wsc30/package/#cronjob-scheduler-uses-server-timezone","text":"The execution time of cronjobs was previously calculated based on the coordinated universal time (UTC). This was changed in WoltLab Suite 3.1 to use the server timezone or, to be precise, the default timezone set in the administration control panel.","title":"Cronjob Scheduler uses Server Timezone"},{"location":"migration/wsc30/package/#exclude-pages-from-becoming-a-landing-page","text":"Some pages do not qualify as landing page, because they're designed around specific expectations that aren't matched in all cases. Examples include the user control panel and its sub-pages that cannot be accessed by guests and will therefore break the landing page for those. While it is somewhat to be expected from control panel pages, there are enough pages that fall under the same restrictions, but aren't easily recognized as such by an administrator. You can exclude these pages by adding 1 (case-sensitive) to the relevant pages in your page.xml .","title":"Exclude Pages from becoming a Landing Page"},{"location":"migration/wsc30/package/#example-code","text":"1 2 3 4 5 6 7 8 9 10 1 ","title":"Example Code"},{"location":"migration/wsc30/package/#new-package-installation-plugin-for-media-providers","text":"Please refer to the documentation of the mediaProvider.xml to learn more.","title":"New Package Installation Plugin for Media Providers"},{"location":"migration/wsc30/package/#limited-forward-compatibility-for-plugins","text":"Please refer to the documentation of the tag in the package.xml .","title":"Limited Forward-Compatibility for Plugins"},{"location":"migration/wsc30/php/","text":"Migrating from WSC 3.0 - PHP # Approval-System for Comments # Comments can now be set to require approval by a moderator before being published. This feature is disabled by default if you do not provide a permission in the manager class, enabling it requires a new permission that has to be provided in a special property of your manage implementation. files/lib/system/comment/manager/ExampleCommentManager.class.php 1 2 3 4 \u2026

{ objectAction action = \"toggle\" isDisabled = $foo -> isDisabled } { objectAction action = \"delete\" objectTitle = $foo -> getTitle () } { * \u2026 * }

Templates#

Template Modifiers#

Template Plugins#

Template Events#

{ lang } wcf.global.sorting { /lang }

{ $person }

{ lang } wcf.global.sorting { /lang }

{ $person }

{ anchor object = $boxPerson }

{ anchor object = $boxPerson }

{ if $information -> userID } { user object = $information -> getUserProfile () } { else } { $information -> username } { /if } { @ $information -> time | time }

{ if $information -> userID } { user object = $information -> getUserProfile () } { else } { $information -> username } { /if } { @ $information -> time | time }

Hello { plural value = $numberOfWorlds 1 = 'World' other = 'Worlds' } !

Hallo { plural value = $numberOfWorlds 1 = 'Welt' other = 'Welten' } !

Salut { plural value = $numberOfWorlds 1 = 'lume' other = 'lumi' } !

\u041f\u0440\u0438\u0432\u0435\u0442 { plural value = $numberOfWorld 1 = '\u043c\u0438\u0440' other = '\u043c\u0438\u0440\u044b' } !

{ lang } wcf.global.sorting { /lang }

{ $person }

{ lang } wcf.global.sorting { /lang }

{ $person }

{ anchor object = $boxPerson }

{ anchor object = $boxPerson }

{ if $information -> userID } { user object = $information -> getUserProfile () } { else } { $information -> username } { /if } { @ $information -> time | time }

{ if $information -> userID } { user object = $information -> getUserProfile () } { else } { $information -> username } { /if } { @ $information -> time | time }

Hello { plural value = $numberOfWorlds 1 = 'World' other = 'Worlds' } !

Hallo { plural value = $numberOfWorlds 1 = 'Welt' other = 'Welten' } !

Salut { plural value = $numberOfWorlds 1 = 'lume' other = 'lumi' } !

\u041f\u0440\u0438\u0432\u0435\u0442 { plural value = $numberOfWorld 1 = '\u043c\u0438\u0440' other = '\u043c\u0438\u0440\u044b' } !