Major design overhaul, new file uploader and lots, lots more

The update performed yesterday (d1f718e) took a lot of effort, and I'd like to give thanks to everyone that helped out with fixing the issues that showed up after it was deployed. All sites should be back to operational status. If you do notice anything that worked a few days ago but has now stopped working, please report it.

Performance improvements

• The read/unread state of an object is now fetched in a much faster way, improving rendering speed overall, but especially in container views.
• Combined YUI (Yahoo User Interface) CSS components into a single 'normalize.css' stylesheet. This should improve performance slightly, especially for older browsers. All other stylesheets have also been combined into a single stylesheet named 'design.css' for the same reason.

New features

• Sound playback events like play, pause and stop, are now automatically logged to Google Analytics, enabling us to better understand how people interact with sounds.
• Statistics about how many members are inside groups can now be fetched in templates with the get_group_member_count() template function.
• The file uploader has been completely rewritten to use modern HTML5 browser capabilities, enabling drag-and-drop uploading.
• The following user interface languages have been added: Arabic, German, Greek, Romanian and Turkish. These translations are not complete, and only the strings used by CEFR test framework have been translated.
• A new jQuery plugin named fs2tree has been added to make it possible to render a file system tree in any template. This is used by the new minimalistic layout.
• It is now possible to remove most of the default design, making it possible for designers to setup their own layouts without first needing to remove a lot of the default styles and features. This is enabled by adding a site-config boolean variable named no_default_design. When the default design is disabled, the following features are removed:
  • Default 'design.css' stylesheet is not loaded.
  • Global config variable 'stylesheet' is ignored.
  • Global config variable 'include' is ignored.
  • The PORTFOLIO.layout_fix_height() event handler is disabled.
  • The wrapper_page element in the core page template is not rendered.
• A new set of minimalistic templates have been added for designers, enabling them to quickly create flexible designs with grouping.
• The custom_init field previously only available on objects have been introduced for containers. Their usage is identical.
• Introduced new mandatory stylesheet 'behavior.css' and moved all bundled styles into a single 'design.css' file which can be disabled. This should also improve performance slightly, especially on older browsers.
• Pagination in container views can now be disabled on a site-by-site basis. Use the no_pagination site-config boolean variable to disable. Be aware that this also impact blog containers.
• Added a standard way of preloading translations in JavaScript apps without using extra AJAX requests. The HTML for the app user interface can also included in a similar way. The translation file should be named <appname>.messages.json and the HTML UI should be named <appname>.html. These dependencies will only be loaded if you declare them with the std: prefix in your .app.js file. See the client-side app documentation for more details.

Enhancements

• Placeholder images for more object types has been added in the TinyMCE WYSIWYG editor.
• The object read/unread indicator in container views has been changed from bold to just a discrete black vertical bar. This is to avoid confusion with the bold indicator used in the folder menu to highlight the active container/object. The institution blog view has been modified in the same way.
• Flash warning/error messages are now emitted in the following situations (these messages were previously only available to backend administrators):
  • During a recursive delete in the file manager.
  • When a CSV parser could not be constructed in the parse_csv() template function.
  • When invalid JSON data is encountered in the encode_json()/decode_json() template functions.
  • When a message to a supervisor could not be sent or permissions couldn't be granted during save in the object editor.
• The administrative user interface for adding and removing courses to institutions now has a toggle all checkboxes feature.
• Upgraded to version 1.11.3/2.1.3 of jQuery. Internet Explorer version 9 or older will use version 1.11.3, while all other browsers will use version 2.1.3. This should also give a slight performance improvement on modern browsers. Candy Chat was upgraded to 1.7.1 and jQuery UI was upgraded to 1.11.3 because of this upgrade. The optional jQuery Migrate plugin has been enabled to compensate for code that has not yet been upgraded to work without it.
• The 'layout.css' stylesheet was previously only loaded in framework mode. It is now always included. A CSS class has been added to the html root DOM element so it is easy to target framework and no-framework mode. This changed a lot of CSS selectors, which impacted site designs. We have fixed everything we've found, but there might be some we haven't found that could cause usability issues.
• The element_meta template was previously used to declare the page character set, which made it mandatory. This caused issues for sites that wanted to customize their meta information for improved search engine optimization (SEO) or better mobile user experience. This character set declaration has now been moved to the core page template.
• Creating new containers opened up the UI with full framework. It is now opened without the surrounding framework.
• All request handlers (except for read) now include the class wrapper_request_handler, making it easier to target content inside the main page block.
• Ordered and unordered lists (OL/UL) previously didn't display numbers and bullets, and tables were missing borders. These have been put back to avoid the need for custom style by default.
• A lot of style declared directly in the HTML markup has been removed in the user menu template.
• The course navigator is now rendered semantically as part of the page footer instead of the header. This should minimize the amount of content for navigation that is rendered before the main content. This should improve usability, especially for blind people.
• Made the left-most margin in the folder tree thinner.
• Changed the spacer in the folder tree to be a SPAN, to improve HTML semantics.
• All stylesheets are now included without a specific media type set. This makes it possible to use @media declarations without ambiguity.
• All bundled stylesheets now explicitly declare their character set as UTF-8.
• The CSS normalize we use from YUI (Yahoo User Interface) has been upgraded to version 3.18.1. It consist of the Reset, Fonts and Base components. This should improve browser rendering consistency.

Bugfixes

• The 3rd party library MathJax was upgraded to version 2.4 to solve a rendering issue with MathML in Internet Explorer 10 and older versions.
• The placeholder images used in the TinyMCE WYSIWYG object editor wasn't always showing up. This should now be fixed.
• Fixed a WebFX-related JavaScript error emitted sometimes when using the permission panel in the object editor or the file browser.
• LEXIN changed their API making our dictionary lookups fail. Some dictionary lookups didn't work properly because of character set issues. All these issues have now been fixed.
• The synthetic speech option provided by LeseWeb was broken because our 3rd party provider changed their character set encoding without informing us. This should now be fixed.
• Scrollbars were rendered in the file browser. These have been removed.
• Fixed a bug with character set encoding of content specified in object/container custom-init variables. Custom-init keys only support ASCII, but values support full Unicode defined in UTF8 via URL escaping.
• The visual design for the folder tree was declared twice. The redundant declaration has been removed.
• Fixed a bug with infinite JavaScript loop triggering when not using the default design.
• The jQuery plugin disableTextSelection was removed and use-cases rewritten, as it was not compatible with the current jQuery version.
• Improper use of the jQuery .attr() method was rewritten to use .prop().
• The new version of the jQuery UI plugin dialog changed behavior with regards to the destroy action. Previously the DIV DOM element that contained the dialog content was removed when you called destroy. It does not do that anymore. Code has been modified to compensate for this change in behavior.
• Fixed JavaScript error encountered when viewing an empty inbox.

Feature removals / deprecations

• The object custom_init_hash attribute is deprecated. New code should use the get_custom_init() method instead. The key custom_init_hash has changed name to custom_init during JSON serialization. This also applies to container instances.
• The template element_tidy_messages was removed because it is no longer in use.
• The unused 'dhtmlwindow.css' stylesheet was removed.
• The CSS rules defined in 'content.css' was moved into 'design.css'. This stylesheet was used inside the TinyMCE WYSIWYG editor to allow custom rules to be declared. This was very rarely used, so this feature was removed to simplify the features available in the editor.
• Removed IE6 bgiframe hack in popup feature. We have long since stopped supporting IE6.
• Removed IE8 kludge for width calculation in TinyMCE WYSIWYG editor. No longer required.
• Removed JavaScript functions PORTFOLIO.setCookie/getCookie/deleteCookie(), as they are no longer used by any code. Custom sites that need to store client-side information can use either the jQuery plugin 'cookie' or the session storage feature.
• Removed IE7 kludge PORTFOLIO.fix_rtl() for properly handling right-to-left text. No longer required.
• Completely removed the 3rd party Java-based file uploader JUpload. We now have a modern HTML5-based file uploader to take its place. The response mode jupload and the support features in the write request handler was also removed.