# Changes and Updates

Make sure you have a copy of your application files before making changes.

## Ace v1.3.1 to v1.3.2 (current version)

### 1. New Features / Improvements / Fixes / Updates

- Content sliders based on Bootstrap modals
- Navbar dropdowns automatically become modal like on small devices
- Updated sidebar functions allow for multiple sidebars.
  Make sure to see sidebar functions and apply the necessary changes
- Automatic scrollbars for sidebar submenus when needed
- Delay before hiding submenus in minimized mode or horizontal mode
- Automatic scrollbars for fullscreen widgets
- Horizontal menu now has minimized style as well
- Image preview for file input element
- New custom scroller option 'hideOnIdle'
- Ajax content loading can now be applied to any element
- New `data-auto-hide="true"` option for sidebar allows automatic hiding of sidebar in mobile view when users clicks/taps outside of sidebar area
- New star rating plugin
- New dual listbox plugin
- New bootstrap multiselect plugin
- jQuery mousewheel plugin included but not enabled by default.
  You can use `assets/js/jquery.mobile.custom.js` to enable it.
- Updated all scripts and plugins to their latest version
- Several fixes and improvements

### 2. Ace Changes

- Gruntfile.js build file added.
  Note that you should run `npm install` and install required node.js packages first if you want to use it.
- Also node.js modules inside `mustache/js` and `build` folders are removed and you should run `npm install` command to install them or `npm update` to update.
- CSS and JS files inside `assets` folder are not compressed (non-minified) now and minified files are inside `dist` folder
- Ace functions used to be like ace.handle_side_menu(), etc ...
  Now they are wrapped in jQuery functions and need to be initialized by calling the functions.
  For more info make sure to see sidebar functions section.
- Sidebar toggle buttons such as collapse/expand button or mobile view menu toggler should have `data-target="#sidebar_id"` attribute
- `.main-content-inner` is now necessary and should be inserted immediately inside `.main-content` as the first and only direct child:

        ... other elements and content here ...

- Ajax content loading can now be applied to any element and has several changes and new functions.
  By default `.page-content-area` element will have ajax enabled if it has `data-ajax-content="true"` attribute.
  Also ajax events are triggered for the specific element, which also can still be captured on document level.
  Please see ajax section for more info.
- You should now add `.ace-main-stylesheet` class to your main stylesheet which is "ace.css" in demo pages.

- If you've been using functions such as:
  `ace.settings.sidebar_fixed` `ace.settings.sidebar_collapsed` `ace.settings.navbar_fixed`
  now there is an extra first argument which is either null or reference to element to be changed:

       ace.settings.sidebar_fixed(null, true|false, true|false);//first element is null or reference to sidebar element
       //or
       ace.settings.sidebar_fixed(document.getElementById('sidebar'), true|false, true|false);

### 3. Third Party Changes

- There are some changes for FuelUX plugin which has been updated from v2.x to v3.x.
  Please see FuelUX for more info.
- Fullcalendar plugin doesn't need jQuery UI for dragging and resizing now and moment.js is used for date processing and should be included.
  It's available at: `assets/js/date-time/moment.js`
  Also it seems in its latest update, only events with "yyyy-mm-dd" format can be resized (not sure though)
- jQuery UI has had several changes. For example anchors (`A` tags) are not used in menu items any more.
  If you see your jQuery UI code is not working as expected, you should refer its documentation to resolve the issue as a result of recent changes.
- If you are using internationalization features of date/time plugins date depend on moment.js library, note that `lang` is deprecated now and you should use `locale` instead.
  Please see momentjs docs for more info.
- `respond.src.js` has been renamed to `respond.js`
- `jquery.colorbox-min.js` has been renamed to `jquery.colorbox.min.js`
- jQuery form validation plugin doesn't validate hidden elements by default.
  You should use `ignore` option to perform validation for a hidden element.
  See validation plugin for more info.
- Select2 has now an optional tag input styling as well.
- Chosen does not support touch devices.

## Ace v1.3.0 to v1.3.1

### 1. New Features / Improvements / Fixes / Updates

- Added Ajax version
- Added Email templates and an email tool which converts normal Bootstrap syntax to email friendly table layout
- Onpage Help feature is now available for use in your application to provide help and instructions to users.
- Option to remove sidebar (previously sidebar was almost mandatory)
- Improved and fixed CSS builder
- `.hover` submenus and `.compact` sidebar is now available only on larger devices.
- Added typeahead.js plugin
- Updated all scripts to their latest version
- Fixed several bugs and issues

### 2. Ace Changes

- In this version, typeahead.js plugin has been included.
  The older Bootstrap (v2.x) typeahead plugin is still included with the template as it's a lightweight alternative used by demo search box and tag input plugin.
  However the latter (old plugin) has been renamed to `bs_typeahead`
  For more info please see its section
- In case you modified some of Ace's functions arguments, please note that options used to be passed as separate paramaterers but now are passed as a JSON object:

       ace.sidebar_scroll(jQuery, {
         {
           'scroll_to_active': true,
           'include_shortcuts': true,
           'include_toggle': false,
           'smooth_scroll': 200,
           'outside': false
         }
       });

### 3. Third Party Changes

- dataTables plugin has been updated to latest version 1.10.0 and there may be a few changes you need to make because of some API changes.
  If your current tables are somehow messed up after script update, you may need to consult plugin's documentation for more info.
- Markdown editor now accepts more options and to use FontAwesome fonts you need to specify `data-iconlibrary="fa"` attribute.

## Ace v1.2.0 to v1.3.0

### 1. New Features / Improvements / Fixes

- Custom scrollbar plugin
- Automatic scrollbars for fixed sidebar
- Horizontal Menu
- 3 Different mobile menu styles. More info
- New mobile navbar user buttons style. More info
- New submenu style displayed on mouse hover. More info
- Compact sidebar style
- Alternative active menu item style. More info
- LESS skin files
- In-browser CSS & JS file builder to make your own minimal files
- Enhanced widget box functions and events. More info
- On-page help which lets you pick any element and see how it works
- `nativeUI` option for custom editable addons. More info
- Date addon for inline editable plugin. More info
- Added Bootstrap datetime picker plugin. More info
- Tabbed user dropdowns inside navbar. More info
- New classes for navbar user dropdowns: `.dropdown-content` & `.dropdown-footer` which allows addings scrollbars to `.dropdown-content`.
  More info
- New white button styles. More info
- ASP.net friendly checkboxes and radio buttons.
  You need to build your own custom CSS via the builder and choose More info
- Add data attribute `data-position='auto'` to dropdown elements so they become a dropup when appropriate. More info
- New `.ace-icon`(changeable) & `.menu-icon` classes which help with switching between different font icon libraries. More info
- File input whitelist & blacklist options and other fixes & enchancements. More info
- Custom color picker enhancements. More info
- Light and blurred background for login page.
  More info
- Some browser fixes. Now compatible with almost all desktop and mobile browsers.

### 2. Changes to Ace

- You should now add `.ace-icon` class name to (almost) all icons but you can rename or remove it.
  For more info and the reason for this, see Updating Fontawesome section.
- Sidebar icons now have a `.menu-icon` class name. More info
- Default mobile view sidebar should have `.responsive` class name now.
  More info
- Default mobile menu toggle button has been moved to `.navbar` but you can still use old style toggle button:
  If you want to use old style toggle button, note that the `.menu-text` element inside it has been renamed to `.toggler-text`
  For more info plese see Toggle Buttons section or use the on-page help of demo files.
- Navbar has a few markup changes. Please see Navbar section.
- For default skin, you should add `.no-skin` class name to body element now.
  For more info see Skins section.
- `label` and `.lbl` elements had `vertical-align:middle` CSS rule which is removed now.
  You should add `.middle` class to those elements that are out of place now.
- `.sidebar-collapse` element is now `.sidebar-toggle .sidebar-collapse`.
  This is because, there is now `.sidebar-toggle .sidebar-expand` for 2nd mobile menu style.
  More info
- If you are using settings box it should now be put right after `.page-content` element's opening tag.
  It also has a slightly different HTML markup. More info
- No need for `.main-container-inner` element any more.
  More info
- Treeview element had two special icons `.icon-plus` and `.icon-minus` which have been renamed to `.tree-plus` and `.tree-minus`
  More info
- Widget box title should now have `.widget-title` class and also widget color options are now applied to the box, not header.
  For example `.widget-header.header-color-blue` becomes `.widget-box.widget-color-blue`
  More info
- Login page links such as "forgot password", etc should now have a `data-target` attribute.
  More info
- ace-ie.css or ace-ie.min.css was included only for IE 8 and below. Now it should be included for IE 9 as well, thus:

      <!--[if lte IE 9>
      <link rel="stylesheet" href="path/to/assets/ace-ie.min.css" />
      <![endif]-->

- When building CSS files using the in-browser builder tool, you may be notified that output CSS file is large for IE9 and below.
  In that case, make sure to include the extra CSS file `ace-part2.css` using the provided instructions.
- Version number has been removed from jQuery file name for easier updates. Therefore:
  `jquery.2.1.9.min.js` becomes `jquery.min.js`
  `jquery-1.x.min.js` becomes `jquery1x.min.js` (which is used for IE9 and below)
  Same applies to jQuery UI:
  `jquery-ui.min.js`
  `jquery-ui.custom.min.js`
  `jquery-ui.min.css`
  `jquery-ui.custom.min.css`
- If you have used custom mobile view spacing element that add some space only in specific device widths, the naming has changed a bit.
  For example `.vspace-xs-16` has been changed to `.vspace-16-xs`.
  This helps reduce number of CSS selectors.
- If you've used Mustache templates, some files and data have been renamed:
  1. `sidenav_navList` `sidebar_items`
  2. `topbar*` `navbar*`
  3. `sidenav*` `sidebar*`

### 3. Changes to Bootstrap

- The included Bootstrap CSS file has been modified and is slightly different from original Bootstrap files.
  You can still use original Bootstrap files but you should re-compile Ace LESS files with new variables.
  See CSS/LESS files for more info on this.
- There is not much to about Bootstrap when updating from v3.0 to v3.1
  You can read more about it here:
  http://blog.getbootstrap.com/2014/01/30/bootstrap-3-1-0-released/ or https://github.com/twbs/bootstrap/issues/11734
- With dropdown menus, use `.dropdown-menu-right` instead of `.pull-right`. This includes navbar's user info dropdowns.

### 4. Third Party Changes

- If you are using Colorbox(slideshow) plugin, the latest version requires `rel` parameter to work properly, for example `rel: 'colorbox'`. More info
- Latest inline editable plugin doesn't come with datepicker option.
  I added a custom addon for it. More info
- Easy pie chart plugin's file has been renamed to `easypiechart.js`. It was `easy-pie-chart.js`.
  Also Android's default browser has a problem with latest version of easy pie chart, not rendering properly.
  https://github.com/rendro/easy-pie-chart/issues/81
  You can use an older version of the plugin `jquery.easy-pie-chart-older.js` and the problem does not exist.
- I have also changed/customized a few things with some plugins including:
  1. `nextIcon` and `prevIcon` options for daterangepicker plugin
  2. Added `function.bind` for IE in html5shiv (used by easypiechart)
  3. Added bootboxes to markdown editor
  4. And modified/customized a few things with FuelUX plugins

## Ace v1.1.3 to v1.2.0

### 1. Updating to Bootstrap 3

- The major change is upgrading your application to Bootstrap 3.
  So you may want to take a look at the following guide for migrating to BS3:
  http://bootply.com/bootstrap-3-migration-guide
  or Bootstrap's documentation:
  http://getbootstrap.com/getting-started
- Here are a few quick tips:
  - Use `.row` instead of `.row-fluid`
  - Use `.col-xs-*` `.col-sm-*` `.col-md-*` `.col-lg-*` instead of `.span*`
    With Bootstrap 2.x it was alright to randomly have `.row-fluid` elements without `.span*` children.
    But with Bootstrap 3, you should remove those unused `.row` (previously `.row-fluid`) elements that don't need/contain `.col-*-*` (previously `.span*`) inside them and use `.clearfix` class if it has floating children or use no class at all.
  - Use `.btn-xs` `.btn-sm` `.btn-lg` instead of `.btn-mini` `.btn-small` `.btn-large`
  - Use `.well-sm` `.well-lg` instead of `.well-small` `.well-large`
  - Use `.input-group` instead of `.input-append` and `.input-prepend`
  - Update Bootstrap's modal dialog HTML code:
    Now it needs `.modal-dialog` `.modal-content` classes and the `.modal` doesn't need `.hide` class.
  - Bootstrap event names have been namespaced, so for example instead of `$('#myModal').on('shown' , ...)` we now have `$('#myModal').on('shown.bs.modal' , ...)`
  - No need for bootstrap-responsive.css or ace-responsive.css now.
    They have been integrated with main CSS files.
  - No need for `<span class="divider"><i class="arrow-icon"></i></span>` as breadcrumbs divider.
  - Images were responsive by default, i.e. they were limited to their container's size. Now you should use `.img-responsive` class.
  - Use `.dropdown-header` instead of `.nav-header`. This applies to user dropdown menus inside navbar.
  - Default typeahead plugin in Bootstrap 2 has been remove in BS3.
    I've included that in Ace's Javascript file.
    It is used in search box and also Tag Input plugin.
    If you don't need it, you can build a custom Javascript without it.
  - Bootstrap 3 is now setting the CSS rule `box-sizing:border-box` on all HTML elements.
    It means that if you had custom elements with specific dimensions, paddings and borders that relied on default browser value of `box-sizing:contet-box` you may now want to recalculate those values.
    Also many third party plugins rely on the default browser value content-box.
    Some of them are reset in `assets/css/less/bs3-reset.less`
    See this for more info: http://getbootstrap.com/getting-started/#third-box-sizing

### 2. Changes to Ace

- Navbar structure and classes are now slightly different. Please see: `mustache/app/views/layouts/partials/_shared/navbar.mustache`
- Document structure and classes are now slightly different. Please see `mustache/app/views/layouts/default.mustache`
- Use `data-icon-show` `data-icon-hide` attributes inside `.accordion-toggle` elements to specify icons used when toggling panels.
  More info
- Some changes should be made to form elements inside `.form-horizontal`.
  An example could be like this:

      <div class="form-group">
        <label for="id-username" class="col-sm-3 control-label no-padding-right">
          Text Field
        </label>
        <div class="col-sm-9">
          <input type="text" class="col-xs-10 col-sm-5" placeholder="Username" id="id-username">
        </div>
      </div>

- The wizard steps container doesn't need `.hide` class
- Gallery tags should be wrapped inside `.label-holder`
- Use `.dropdown-only-icon` instead of `.dropdown-icon-only`
- Use `.vspace-*-xs` `.vspace-*-sm` `.vspace-*-md` `.vspace-*-lg` instead of `.vspace-*` for spacing that is visible only on specific sizes.
- RTL styles has now been separated into ace-rtl.css file.
  You can add or remove it as needed.

## Ace v1.1.2 to v1.1.3

### Changes to Ace

- You should now add `.ace` class name to checkbox and radio buttons to style them.
  Previously, browser checkboxes and radio buttons were hidden by default and you needed to insert an `.lbl` element after them to be displayed correctly.
  This caused some issues with environments or libraries that created checkboxes automatically or differently and wasn't easy to put `.lbl` after them.
  So now, default checkboxes are shown without change and you can style them by adding `.ace` class to checkboxes and inserting an `.lbl` element after them.
- To have sidebar fixed by default you now should add `.sidebar-fixed` class to `.sidebar` element and to fix breadcrumbs you should add `.breadcrumbs-fixed` class to `.breadcrumbs` element.
- You should now use `assets/js/ace-extra.js` inside `head` element to dynamically enable/save/retrieve some user settings using Javascript, such as fixing navbar/sidebar/breadcrumbs and sidebar collapse/expand.
- The `#sidebar-collapse` element's icon has two attributes `data-icon1` and `data-icon2` which determine the button's icon in expanded/collapsed state.
- `#ace-settings-header` has been changed to `#ace-settings-navbar` (i.e. the checkbox element inside settings box that fixes/unfixes navbar)

### Third Party Changes

- Chosen plugin now uses chosen- prefix rather than chzn- for its classes.
  If you have defined custom CSS rules or used chzn-* selectors inside your scripts, you may need to modify them accordingly.

## Ace v1.1.2

### Changes to Ace

- CSS "ID"s have been replaced with classes.

  So for example in CSS files where we had:
  `#main-content { ... }`

  It has been changed to:
  `.main-content { ... }`

  The element in HTML code still keeps the ID attribute, so previous Javascript code should work as expected.

      <div class="main-container" id="main-container">
         ...
      </div>

      ...

      <a class="menu-toggler" id="menu-toggler">
         <span class="toggler-text"></span>
      </a>

  Basically you just need to add a class with the same ID value to HTML elements. The specific changes are:
  - `#user_info` `.user-info` (Topright user menu)
  - `#user_menu` `.user-menu`
  - `#menu-toggler` `.menu-toggler`
  - `#sidebar` `.sidebar`
  - `#sidebar-shortcuts` `.sidebar-shortcuts`
  - `#sidebar-shortcuts-large` `.sidebar-shortcuts-large`
  - `#sidebar-shortcuts-mini` `.sidebar-shortcuts-mini`
  - `#sidebar-collapse` `.sidebar-collapse`
  - `#main-container` `.main-container`
  - `#main-content` `.main-content`
  - `#page-content` `.page-content`
  - `#breadcrumbs` `.breadcrumbs`
  - `#nav-search` `.nav-search`
  - `#nav-search-input` `.nav-search-input`
  - `#nav-search-icon` `.nav-search-icon`
  - `#ace-settings-container` `.ace-settings-container`
  - `#ace-settings-btn` `.ace-settings-btn`
  - `#ace-settings-box` `.ace-settings-box`
  - `#btn-scroll-up` `.btn-scroll-up`
- The text on first level links of side navigation which was `SPAN` element, should now have `.menu-text` class:

      <li>
        <a href="index.html">
          <i class="ace-icon fa fa-tachometer"></i>
          <span class="menu-text">Dashboard</span>
        </a>
      </li>

- Similar things applies to `#menu-toggler` element.
  You should add `.toggler-text` class name to its `SPAN` child:

      <a href="#" class="menu-toggler" id="menu-toggler">
         <span class="toggler-text"></span>
      </li>

- The default size of icons inside buttons have been removed.
  You may specify icon sizes using `.bigger-110` ... `.bigger-300` as described later.

      <a href="#" class="btn btn-app btn-primary">
         <i class="ace-icon fa fa-envelope bigger-200"></i>
         Email
      </li>

- Add `.home-icon` to the first breadcrumbs icon (the one indicating homepage).

## FontAwesome & Icons

### Updating Fontawesome 3.x to 4.x

- Because there are multiple Font icon libraries which you can use and each one has a different naming convention, I added a custom icon class name to be used with all fonts without the need to change CSS or JS code.
  I have added `.ace-icon` class to be used on all icons except for those that don't any special styling.
  Also `.menu-icon` should be used for sidebar icons.
- You can choose a different name other than `.ace-icon` by modifying `@icon` variable inside `assets/css/less/variables.less` and re-compiling LESS files.
  Also inside:
  `assets/js/ace.js`
  or `dist/js/ace.min.js`
  or `assets/js/ace/ace.js`,
  and
  `assets/js/ace-extra.js`,
  or `dist/js/ace-extra.min.js`
  you should change `ace.vars['icon']` and `ace.vars['.icon']` to new values.
- I have included a Javascript file which helps you to update all your files to use new icon names.
  You can find it here `build/icon.js` and use it with Node.js like this: `node icon.js --path=".../html/myfile.html"` or `node icon.js --path=".../mydir/"`
  Options include:
  1. path: Path to the folder or file you want to update.
  2. ext: if specified only this extensions will be updated.
  Example:
  `node icon.js --path="path/to/file-or-folder"`
  `node icon.js --path="path/to/file-or-folder" --ext="html|php|js"`
- If you want to use the icon.js script to update icon names, make sure you have a copy of your files first.
  Also if you want to use another name other than `.ace-icon` you should modify `var ace_icon` variable inside the script.