From 80be76d6d7095977fbd76e4e8c4e210327a8b175 Mon Sep 17 00:00:00 2001 From: Robin Poort Date: Thu, 18 May 2017 17:58:56 +0200 Subject: [PATCH] #319 Styling backend further --- .../language/en-GB/en-GB.tpl_elysio.ini | 5 + web/administrator/log/jcontroller.log.php | 6 + .../templates/elysio/css/admin.css | 28 +- .../templates/elysio/gruntfile.js | 3 +- .../elysio/html/com_menus/item/edit.php | 33 +- .../elysio/html/com_menus/items/default.php | 43 +- .../html/layouts/joomla/edit/title_alias.php | 1 - .../html/layouts/joomla/form/field/radio.php | 92 ++ .../html/layouts/joomla/form/renderfield.php | 24 +- .../joomla/searchtools/default/filters.php | 30 +- .../html/layouts/joomla/toolbar/batch.php | 2 +- .../html/layouts/joomla/toolbar/confirm.php | 2 +- .../html/layouts/joomla/toolbar/link.php | 2 +- .../html/layouts/joomla/toolbar/modal.php | 2 +- .../html/layouts/joomla/toolbar/popup.php | 2 +- .../html/layouts/joomla/toolbar/slider.php | 2 +- .../html/layouts/joomla/toolbar/standard.php | 2 +- .../templates/elysio/html/overrides.php | 42 + .../language/en-GB/en-GB.tpl_backman.ini | 32 - .../language/en-GB/en-GB.tpl_backman.sys.ini | 20 - .../language/en-GB/en-GB.tpl_elysio.ini | 5 + .../elysio/scripts/jquery.floatThead.js | 952 ------------------ .../elysio/scripts/off-canvas-menu.js | 343 ------- .../templates/elysio/scss/_shame.scss | 61 +- .../templates/elysio/scss/admin.scss | 9 +- .../elysio/scss/bootstrap/_overrides.scss | 3 +- 26 files changed, 280 insertions(+), 1466 deletions(-) create mode 100644 app/administrator/language/en-GB/en-GB.tpl_elysio.ini create mode 100644 web/administrator/templates/elysio/html/layouts/joomla/form/field/radio.php delete mode 100644 web/administrator/templates/elysio/language/en-GB/en-GB.tpl_backman.ini delete mode 100644 web/administrator/templates/elysio/language/en-GB/en-GB.tpl_backman.sys.ini create mode 100644 web/administrator/templates/elysio/language/en-GB/en-GB.tpl_elysio.ini delete mode 100644 web/administrator/templates/elysio/scripts/jquery.floatThead.js delete mode 100644 web/administrator/templates/elysio/scripts/off-canvas-menu.js diff --git a/app/administrator/language/en-GB/en-GB.tpl_elysio.ini b/app/administrator/language/en-GB/en-GB.tpl_elysio.ini new file mode 100644 index 0000000000..e29ad38cf0 --- /dev/null +++ b/app/administrator/language/en-GB/en-GB.tpl_elysio.ini @@ -0,0 +1,5 @@ +; Filters +COM_MENUS_FILTER_PUBLISHED="Published"; +JOPTION_FILTER_ACCESS="Access"; +JOPTION_FILTER_LANGUAGE="Language"; +JOPTION_FILTER_LEVEL="Filter"; \ No newline at end of file diff --git a/web/administrator/log/jcontroller.log.php b/web/administrator/log/jcontroller.log.php index 5eaf537254..1b07918412 100644 --- a/web/administrator/log/jcontroller.log.php +++ b/web/administrator/log/jcontroller.log.php @@ -50,3 +50,9 @@ 2017-05-15T13:39:22+00:00 INFO 127.0.0.1 controller Holding edit ID com_templates.edit.style.9 Array ( [0] => 9 ) 2017-05-15T13:39:22+00:00 INFO 127.0.0.1 controller Checking edit ID com_templates.edit.style.9: 1 Array ( [0] => 9 ) 2017-05-15T13:39:26+00:00 INFO 127.0.0.1 controller Releasing edit ID com_templates.edit.style.9 Array ( ) +2017-05-18T11:33:33+00:00 INFO 127.0.0.1 controller Holding edit ID com_templates.edit.style.7 Array ( [0] => 7 ) +2017-05-18T11:33:33+00:00 INFO 127.0.0.1 controller Checking edit ID com_templates.edit.style.7: 1 Array ( [0] => 7 ) +2017-05-18T11:33:34+00:00 INFO 127.0.0.1 controller Releasing edit ID com_templates.edit.style.7 Array ( ) +2017-05-18T11:33:45+00:00 INFO 127.0.0.1 controller Holding edit ID com_templates.edit.style.8 Array ( [0] => 8 ) +2017-05-18T11:33:45+00:00 INFO 127.0.0.1 controller Checking edit ID com_templates.edit.style.8: 1 Array ( [0] => 8 ) +2017-05-18T11:33:47+00:00 INFO 127.0.0.1 controller Releasing edit ID com_templates.edit.style.8 Array ( ) diff --git a/web/administrator/templates/elysio/css/admin.css b/web/administrator/templates/elysio/css/admin.css index 6a7ec94bf2..e86ccf33cb 100644 --- a/web/administrator/templates/elysio/css/admin.css +++ b/web/administrator/templates/elysio/css/admin.css @@ -4579,7 +4579,7 @@ markup: .k-ui-namespace .k-scopebar-dropdown.k-is-active .k-scopebar-dropdown__button { background: #e9e9e9; } -.k-ui-namespace .k-scopebar-dropdown__button { position: relative; border: none; background: transparent; margin: 0; padding: 0 6px; line-height: 39px; height: 39px; font-size: 13px; } +.k-ui-namespace .k-scopebar-dropdown__button { position: relative; border: none; background: transparent; margin: 0; padding: 0 6px; line-height: 39px; height: 39px; font-size: 13px; cursor: pointer; } .k-ui-namespace .k-scopebar-dropdown__button:hover, .k-ui-namespace .k-scopebar-dropdown__button:focus { background: #e9e9e9; } @@ -5293,7 +5293,7 @@ markup: .k-ui-namespace .k-dynamic-content-holder.k-dynamic-content-holder.k-dynamic-content-holder { display: none; } -.k-ui-namespace .k-is-hidden.k-is-hidden.k-is-hidden { display: none; } +.k-ui-namespace .k-hidden.k-hidden.k-hidden { display: none; } .k-cssanimations.k-boxshadow .k-ui-namespace .k-loader { display: inline-block; color: #3071a9; font-size: 5px; margin: 0 auto 2em; position: relative; text-indent: -9999em; vertical-align: middle; /* Sizes */ } @@ -8218,3 +8218,27 @@ body.koowa > .koowa { min-height: 100%; overflow: hidden; } .k-ui-namespace .k-login__brand { display: block; height: auto; /* 1 */ width: auto; /* 1 */ max-width: 100%; text-align: center; /* 2 */ margin-left: auto; margin-right: auto; margin-bottom: 20px; /* 5 */ } .k-ui-namespace .k-login__brand img { max-height: 100%; vertical-align: middle; } + +.k-ui-namespace .chzn-container { min-width: 100%; max-width: 100%; } + +.k-ui-namespace .chzn-container-single .chzn-single { height: 32px; line-height: 30px; } + +.k-ui-namespace .chzn-container-single .chzn-single div b { background-position: 0 6px; } + +.k-ui-namespace .k-scopebar .chzn-container { min-width: 0; max-width: none; } + +.k-ui-namespace .k-container .k-container__main:last-child { margin-bottom: 0; } + +.k-ui-namespace .k-container .nav-tabs { margin-left: 10px; margin-right: 10px; } + +.k-ui-namespace .k-container .tab-content { padding-top: 20px; } + +.k-ui-namespace .k-container .tab-content:before, .k-ui-namespace .k-container .tab-content:after { content: " "; display: table; } + +.k-ui-namespace .k-container .tab-content:after { clear: both; } + +.k-ui-namespace .k-container__content:before, .k-ui-namespace .k-container__content:after { content: " "; display: table; } + +.k-ui-namespace .k-container__content:after { clear: both; } + +.k-ui-namespace .readonly { display: block; } diff --git a/web/administrator/templates/elysio/gruntfile.js b/web/administrator/templates/elysio/gruntfile.js index 26d6e17427..30630b9575 100644 --- a/web/administrator/templates/elysio/gruntfile.js +++ b/web/administrator/templates/elysio/gruntfile.js @@ -140,8 +140,7 @@ module.exports = function(grunt) { }, javascript: { files: [ - 'scripts/*.js', - 'js/*.js' + 'scripts/*.js' ], tasks: ['uglify'], options: { diff --git a/web/administrator/templates/elysio/html/com_menus/item/edit.php b/web/administrator/templates/elysio/html/com_menus/item/edit.php index e0b1bd6c6a..6518c54c8a 100644 --- a/web/administrator/templates/elysio/html/com_menus/item/edit.php +++ b/web/administrator/templates/elysio/html/com_menus/item/edit.php @@ -87,23 +87,27 @@ -
+
- item->type == 'url') - { - $this->form->setFieldAttribute('alias', 'type', 'hidden'); - } - ?> +
+ item->type == 'url') + { + $this->form->setFieldAttribute('alias', 'type', 'hidden'); + } + echo JLayoutHelper::render('joomla.edit.title_alias', $this); + ?> +
+
- +
'details')); ?> - +
@@ -122,6 +126,8 @@ echo $this->form->getControlGroups('request'); + echo $this->form->renderField('alias'); + if ($this->item->type == 'url') { $this->form->setFieldAttribute('link', 'readonly', 'false'); @@ -131,6 +137,13 @@ echo $this->form->getControlGroup('browserNav'); echo $this->form->getControlGroup('template_style_id'); ?> + + +
@@ -146,7 +159,6 @@ 'access', 'language', 'note' - ); if ($this->item->type != 'component') { @@ -156,6 +168,7 @@
+
$this), null, array('debug' => false)); ?> - - -
- -
- - -
- $this), null, array('debug' => false)); ?> -
-
- -
-
+ items): ?> +
+

It seems like you don't have any menu items yet.

+

+ +

+ +
+ -
+
@@ -247,8 +250,10 @@ - + -authorise('core.create', 'com_menus') || $user->authorise('core.edit', 'com_menus')) : ?> - loadTemplate('batch'); ?> - \ No newline at end of file +
+ authorise('core.create', 'com_menus') || $user->authorise('core.edit', 'com_menus')) : ?> + loadTemplate('batch'); ?> + +
diff --git a/web/administrator/templates/elysio/html/layouts/joomla/edit/title_alias.php b/web/administrator/templates/elysio/html/layouts/joomla/edit/title_alias.php index bfab8c0961..3e5b0e54ef 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/edit/title_alias.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/edit/title_alias.php @@ -17,5 +17,4 @@ renderField($title) : ''; - echo $form->renderField('alias'); ?> diff --git a/web/administrator/templates/elysio/html/layouts/joomla/form/field/radio.php b/web/administrator/templates/elysio/html/layouts/joomla/form/field/radio.php new file mode 100644 index 0000000000..68a2507c8c --- /dev/null +++ b/web/administrator/templates/elysio/html/layouts/joomla/form/field/radio.php @@ -0,0 +1,92 @@ + section in form XML. + * @var boolean $hidden Is this field hidden in the form? + * @var string $hint Placeholder for the field. + * @var string $id DOM id of the field. + * @var string $label Label of the field. + * @var string $labelclass Classes to apply to the label. + * @var boolean $multiple Does this field support multiple values? + * @var string $name Name of the input field. + * @var string $onchange Onchange attribute for the field. + * @var string $onclick Onclick attribute for the field. + * @var string $pattern Pattern (Reg Ex) of value of the form field. + * @var boolean $readonly Is this field read only? + * @var boolean $repeat Allows extensions to duplicate elements. + * @var boolean $required Is this field required? + * @var integer $size Size attribute of the input. + * @var boolean $spellcheck Spellcheck state for the form field. + * @var string $validate Validation rules to apply. + * @var string $value Value attribute of the field. + * @var array $options Options available for this field. + */ + +// Including fallback code for HTML5 non supported browsers. +JHtml::_('jquery.framework'); +JHtml::_('script', 'system/html5fallback.js', false, true); + +/** + * The format of the input tag to be filled in using sprintf. + * %1 - id + * %2 - name + * %3 - value + * %4 = any other attributes + */ +$format = ''; +$alt = preg_replace('/[^a-zA-Z0-9_\-]/', '_', $name); +?> + + +
+ + > + + +
+ $option) : ?> + value == $value) ? 'checked="checked"' : ''; + $optionClass = !empty($option->class) ? 'class="' . $option->class . '"' : ''; + $disabled = !empty($option->disable) || ($disabled && !$checked) ? 'disabled' : ''; + + // Initialize some JavaScript option attributes. + $onclick = !empty($option->onclick) ? 'onclick="' . $option->onclick . '"' : ''; + $onchange = !empty($option->onchange) ? 'onchange="' . $option->onchange . '"' : ''; + $oid = $id . $i; + $ovalue = htmlspecialchars($option->value, ENT_COMPAT, 'UTF-8'); + $attributes = array_filter(array($checked, $optionClass, $disabled, $onchange, $onclick)); + ?> + + + + + + + +
+
+ +
diff --git a/web/administrator/templates/elysio/html/layouts/joomla/form/renderfield.php b/web/administrator/templates/elysio/html/layouts/joomla/form/renderfield.php index 1a6f0a9483..05f6fd05b0 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/form/renderfield.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/form/renderfield.php @@ -8,6 +8,7 @@ */ defined('_JEXEC') or die; +include_once(JPATH_WEB.'/administrator/templates/elysio/html/overrides.php'); /** * Layout variables @@ -27,26 +28,15 @@ } ?> - -
> -
-
- -
- -
-
- -
> - -
+ +
+ 'k-form-control', 'placeholder' => 'Title')); ?> +
-
> +
- +
- - diff --git a/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/filters.php b/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/filters.php index 2f5ddb01bd..a4fe0823d5 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/filters.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/filters.php @@ -38,13 +38,11 @@
- $field) : ?> -
+
input; ?>
- @@ -68,31 +66,5 @@
- - - $field) : ?> - - getAttribute('dataShowOn')) - { - JHtml::_('jquery.framework'); - JHtml::_('script', 'jui/cms.js', false, true); - $showOn = " data-showon='" . $showOnData . "'"; - } - ?> -
> - input; ?> -
- - -
- - - diff --git a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/batch.php b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/batch.php index de96849c5b..ff8a188ff2 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/batch.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/batch.php @@ -12,7 +12,7 @@ $title = $displayData['title']; ?> - diff --git a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/confirm.php b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/confirm.php index f84afde2e2..b9a0d37e4a 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/confirm.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/confirm.php @@ -19,7 +19,7 @@ $class = classOverride($class); ?> - diff --git a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/link.php b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/link.php index fb83259513..4fe13f902f 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/link.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/link.php @@ -17,7 +17,7 @@ $class = classOverride($class); ?> - diff --git a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/modal.php b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/modal.php index d8b8639c0a..3cdd8739cf 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/modal.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/modal.php @@ -31,7 +31,7 @@ ?> - diff --git a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/popup.php b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/popup.php index 59041392d6..40dbfd9bc2 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/popup.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/popup.php @@ -19,7 +19,7 @@ include_once(JPATH_WEB.'/administrator/templates/elysio/html/overrides.php'); $class = classOverride($class); ?> - diff --git a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/slider.php b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/slider.php index 7937ca313e..7b7dd374c6 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/slider.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/slider.php @@ -17,7 +17,7 @@ $name = $displayData['name']; $onClose = $displayData['onClose']; ?> - diff --git a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/standard.php b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/standard.php index 7dd1ddf750..f93c7de815 100644 --- a/web/administrator/templates/elysio/html/layouts/joomla/toolbar/standard.php +++ b/web/administrator/templates/elysio/html/layouts/joomla/toolbar/standard.php @@ -27,7 +27,7 @@ $class = classOverride($class); ?> - diff --git a/web/administrator/templates/elysio/html/overrides.php b/web/administrator/templates/elysio/html/overrides.php index 184fc2d64c..f2eeab3806 100644 --- a/web/administrator/templates/elysio/html/overrides.php +++ b/web/administrator/templates/elysio/html/overrides.php @@ -50,4 +50,46 @@ function classOverride($input) { break; } return $class; +} + +// Add `k-form-control` class to textfields +function addFormControlClass($input) { + + // If the field is not a text field or textarea; return original + if (strpos($input, 'type="text') === false && strpos($input, '*:visible', //thead cells are this. - zIndex: 1001, //zindex of the floating thead (actually a container div) - position: 'auto', // 'fixed', 'absolute', 'auto'. auto picks the best for your table scrolling type. - top: 0, //String or function($table) - offset from top of window where the header should not pass above - bottom: 0, //String or function($table) - offset from the bottom of the table where the header should stop scrolling - scrollContainer: function($table){ - return $([]); //if the table has horizontal scroll bars then this is the container that has overflow:auto and causes those scroll bars - }, - getSizingRow: function($table, $cols, $fthCells){ // this is only called when using IE, - // override it if the first row of the table is going to contain colgroups (any cell spans greater than one col) - // it should return a jquery object containing a wrapped set of table cells comprising a row that contains no col spans and is visible - return $table.find('tbody tr:visible:first>*:visible'); - }, - floatTableClass: 'floatThead-table', - floatWrapperClass: 'floatThead-wrapper', - floatContainerClass: 'floatThead-container', - copyTableClass: true, //copy 'class' attribute from table into the floated table so that the styles match. - enableAria: false, //will copy header text from the floated header back into the table for screen readers. Might cause the css styling to be off. beware! - autoReflow: false, //(undocumented) - use MutationObserver api to reflow automatically when internal table DOM changes - debug: false //print possible issues (that don't prevent script loading) to console, if console exists. - }; - - var util = window._; - - var canObserveMutations = typeof MutationObserver !== 'undefined'; - - - //browser stuff - var ieVersion = function(){for(var a=3,b=document.createElement("b"),c=b.all||[];a = 1+a,b.innerHTML="",c[0];);return 4
X
'); - $("body").append($test); - var ret = ($test.find("table").width() == 0); - $test.remove(); - return ret; - } - return false; - }; - - var createElements = !isFF && !ieVersion; //FF can read width from elements, but webkit cannot - - var $window = $(window); - - /** - * @param debounceMs - * @param cb - */ - function windowResize(eventName, cb){ - if(ieVersion == 8){ //ie8 is crap: https://github.com/mkoryak/floatThead/issues/65 - var winWidth = $window.width(); - var debouncedCb = util.debounce(function(){ - var winWidthNew = $window.width(); - if(winWidth != winWidthNew){ - winWidth = winWidthNew; - cb(); - } - }, 1); - $window.on(eventName, debouncedCb); - } else { - $window.on(eventName, util.debounce(cb, 1)); - } - } - - - function debug(str){ - window && window.console && window.console.error && window.console.error("jQuery.floatThead: " + str); - } - - //returns fractional pixel widths - function getOffsetWidth(el) { - var rect = el.getBoundingClientRect(); - return rect.width || rect.right - rect.left; - } - - /** - * try to calculate the scrollbar width for your browser/os - * @return {Number} - */ - function scrollbarWidth() { - var $div = $( //borrowed from anti-scroll - '
' - + '
' - ); - $('body').append($div); - var w1 = $div.innerWidth(); - var w2 = $('div', $div).innerWidth(); - $div.remove(); - return w1 - w2; - } - /** - * Check if a given table has been datatableized (http://datatables.net) - * @param $table - * @return {Boolean} - */ - function isDatatable($table){ - if($table.dataTableSettings){ - for(var i = 0; i < $table.dataTableSettings.length; i++){ - var table = $table.dataTableSettings[i].nTable; - if($table[0] == table){ - return true; - } - } - } - return false; - } - - function tableWidth($table, $fthCells, isOuter){ - // see: https://github.com/mkoryak/floatThead/issues/108 - var fn = isOuter ? "outerWidth": "width"; - if(isTableWidthBug && $table.css("max-width")){ - var w = 0; - if(isOuter) { - w += parseInt($table.css("borderLeft"), 10); - w += parseInt($table.css("borderRight"), 10); - } - for(var i=0; i < $fthCells.length; i++){ - w += $fthCells.get(i).offsetWidth; - } - return w; - } else { - return $table[fn](); - } - } - $.fn.floatThead = function(map){ - map = map || {}; - if(!util){ //may have been included after the script? lets try to grab it again. - util = window._ || $.floatThead._; - if(!util){ - throw new Error("jquery.floatThead-slim.js requires underscore. You should use the non-lite version since you do not have underscore."); - } - } - - if(ieVersion < 8){ - return this; //no more crappy browser support. - } - - var mObs = null; //mutation observer lives in here if we can use it / make it - - if(util.isFunction(isTableWidthBug)) { - isTableWidthBug = isTableWidthBug(); - } - - if(util.isString(map)){ - var command = map; - var ret = this; - this.filter('table').each(function(){ - var $this = $(this); - var opts = $this.data('floatThead-lazy'); - if(opts){ - $this.floatThead(opts); - } - var obj = $this.data('floatThead-attached'); - if(obj && util.isFunction(obj[command])){ - var r = obj[command](); - if(typeof r !== 'undefined'){ - ret = r; - } - } - }); - return ret; - } - var opts = $.extend({}, $.floatThead.defaults || {}, map); - - $.each(map, function(key, val){ - if((!(key in $.floatThead.defaults)) && opts.debug){ - debug("Used ["+key+"] key to init plugin, but that param is not an option for the plugin. Valid options are: "+ (util.keys($.floatThead.defaults)).join(', ')); - } - }); - if(opts.debug){ - var v = $.fn.jquery.split("."); - if(parseInt(v[0], 10) == 1 && parseInt(v[1], 10) <= 7){ - debug("jQuery version "+$.fn.jquery+" detected! This plugin supports 1.8 or better, or 1.7.x with jQuery UI 1.8.24 -> http://jqueryui.com/resources/download/jquery-ui-1.8.24.zip") - } - } - - this.filter(':not(.'+opts.floatTableClass+')').each(function(){ - var floatTheadId = util.uniqueId(); - var $table = $(this); - if($table.data('floatThead-attached')){ - return true; //continue the each loop - } - if(!$table.is('table')){ - throw new Error('jQuery.floatThead must be run on a table element. ex: $("table").floatThead();'); - } - canObserveMutations = opts.autoReflow && canObserveMutations; //option defaults to false! - var $header = $table.children('thead:first'); - var $tbody = $table.children('tbody:first'); - if($header.length == 0 || $tbody.length == 0){ - $table.data('floatThead-lazy', opts); - $table.unbind("reflow").one('reflow', function(){ - $table.floatThead(opts); - }); - return; - } - if($table.data('floatThead-lazy')){ - $table.unbind("reflow"); - } - $table.data('floatThead-lazy', false); - - var headerFloated = false; - var scrollingTop, scrollingBottom; - var scrollbarOffset = {vertical: 0, horizontal: 0}; - var scWidth = scrollbarWidth(); - var lastColumnCount = 0; //used by columnNum() - var $scrollContainer = opts.scrollContainer($table) || $([]); //guard against returned nulls - var locked = $scrollContainer.length > 0; - - var useAbsolutePositioning = null; - if(typeof opts.useAbsolutePositioning !== 'undefined'){ - debug("option 'useAbsolutePositioning' has been removed in v1.3.0, use 'position' instead. See docs for more info: http://mkoryak.github.io/floatThead/#options") - } - - if (opts.position == 'auto') { - useAbsolutePositioning = null; - } else if (opts.position == 'fixed') { - useAbsolutePositioning = false; - } else if (opts.position == 'absolute'){ - useAbsolutePositioning = true; - } else if (opts.debug) { - debug('Invalid value given to "position" option, valid is "fixed", "absolute" and "auto". You passed: ', opts.position); - } - - if(useAbsolutePositioning == null){ //defaults: locked=true, !locked=false - useAbsolutePositioning = locked; - } - if(!useAbsolutePositioning){ - headerFloated = true; //#127 - } - var $caption = $table.find("caption"); - var haveCaption = $caption.length == 1; - if(haveCaption){ - var captionAlignTop = ($caption.css("caption-side") || $caption.attr("align") || "top") === "top"; - } - - var $fthGrp = $(''); - - var wrappedContainer = false; //used with absolute positioning enabled. did we need to wrap the scrollContainer/table with a relative div? - var $wrapper = $([]); //used when absolute positioning enabled - wraps the table and the float container - var absoluteToFixedOnScroll = ieVersion <= 9 && !locked && useAbsolutePositioning; //on IE using absolute positioning doesn't look good with window scrolling, so we change position to fixed on scroll, and then change it back to absolute when done. - var $floatTable = $(""); - var $floatColGroup = $(""); - var $tableColGroup = $table.children('colgroup:first'); - var existingColGroup = true; - if($tableColGroup.length == 0){ - $tableColGroup = $(""); - existingColGroup = false; - } - var $fthRow = $(''); //created unstyled elements (used for sizing the table because chrome can't read width) - var $floatContainer = $(''); - var floatTableHidden = false; //this happens when the table is hidden and we do magic when making it visible - var $newHeader = $(""); - var $sizerRow = $(''); - var $sizerCells = $([]); - var $tableCells = $([]); //used for sizing - either $sizerCells or $tableColGroup cols. $tableColGroup cols are only created in chrome for borderCollapse:collapse because of a chrome bug. - var $headerCells = $([]); - var $fthCells = $([]); //created elements - - $newHeader.append($sizerRow); - $table.prepend($tableColGroup); - if(createElements){ - $fthGrp.append($fthRow); - $table.append($fthGrp); - } - - $floatTable.append($floatColGroup); - $floatContainer.append($floatTable); - if(opts.copyTableClass){ - $floatTable.attr('class', $table.attr('class')); - } - $floatTable.attr({ //copy over some deprecated table attributes that people still like to use. Good thing people don't use colgroups... - 'cellpadding': $table.attr('cellpadding'), - 'cellspacing': $table.attr('cellspacing'), - 'border': $table.attr('border') - }); - var tableDisplayCss = $table.css('display'); - $floatTable.css({ - 'borderCollapse': $table.css('borderCollapse'), - 'border': $table.css('border'), - 'display': tableDisplayCss - }); - if(tableDisplayCss == 'none'){ - floatTableHidden = true; - } - - $floatTable.addClass(opts.floatTableClass).css({'margin': 0, 'border-bottom-width': 0}); //must have no margins or you won't be able to click on things under floating table - - if(useAbsolutePositioning){ - var makeRelative = function($container, alwaysWrap){ - var positionCss = $container.css('position'); - var relativeToScrollContainer = (positionCss == "relative" || positionCss == "absolute"); - var $containerWrap = $container; - if(!relativeToScrollContainer || alwaysWrap){ - var css = {"paddingLeft": $container.css('paddingLeft'), "paddingRight": $container.css('paddingRight')}; - $floatContainer.css(css); - $containerWrap = $container.data('floatThead-containerWrap') || $container.wrap("
").parent(); - $container.data('floatThead-containerWrap', $containerWrap); //multiple tables inside one scrolling container - #242 - wrappedContainer = true; - } - return $containerWrap; - }; - if(locked){ - $wrapper = makeRelative($scrollContainer, true); - $wrapper.prepend($floatContainer); - } else { - $wrapper = makeRelative($table); - $table.before($floatContainer); - } - } else { - $table.before($floatContainer); - } - - - $floatContainer.css({ - position: useAbsolutePositioning ? 'absolute' : 'fixed', - marginTop: 0, - top: useAbsolutePositioning ? 0 : 'auto', - zIndex: opts.zIndex - }); - $floatContainer.addClass(opts.floatContainerClass); - updateScrollingOffsets(); - - var layoutFixed = {'table-layout': 'fixed'}; - var layoutAuto = {'table-layout': $table.css('tableLayout') || 'auto'}; - var originalTableWidth = $table[0].style.width || ""; //setting this to auto is bad: #70 - var originalTableMinWidth = $table.css('minWidth') || ""; - - function eventName(name){ - return name+'.fth-'+floatTheadId+'.floatTHead' - } - - function setHeaderHeight(){ - var headerHeight = 0; - $header.children("tr:visible").each(function(){ - headerHeight += $(this).outerHeight(true); - }); - if($table.css('border-collapse') == 'collapse') { - var tableBorderTopHeight = parseInt($table.css('border-top-width'), 10); - var cellBorderTopHeight = parseInt($table.find("thead tr:first").find(">*:first").css('border-top-width'), 10); - if(tableBorderTopHeight > cellBorderTopHeight) { - headerHeight -= (tableBorderTopHeight / 2); //id love to see some docs where this magic recipe is found.. - } - } - $sizerRow.outerHeight(headerHeight); - $sizerCells.outerHeight(headerHeight); - } - - - function setFloatWidth(){ - var tw = tableWidth($table, $fthCells, true); - var width = $scrollContainer.width() || tw; - var floatContainerWidth = $scrollContainer.css("overflow-y") != 'hidden' ? width - scrollbarOffset.vertical : width; - $floatContainer.width(floatContainerWidth); - if(locked){ - var percent = 100 * tw / (floatContainerWidth); - $floatTable.css('width', percent+'%'); - } else { - $floatTable.outerWidth(tw); - } - } - - function updateScrollingOffsets(){ - scrollingTop = (util.isFunction(opts.top) ? opts.top($table) : opts.top) || 0; - scrollingBottom = (util.isFunction(opts.bottom) ? opts.bottom($table) : opts.bottom) || 0; - } - - /** - * get the number of columns and also rebuild resizer rows if the count is different than the last count - */ - function columnNum(){ - var count; - var $headerColumns = $header.find(opts.headerCellSelector); - if(existingColGroup){ - count = $tableColGroup.find('col').length; - } else { - count = 0; - $headerColumns.each(function () { - count += parseInt(($(this).attr('colspan') || 1), 10); - }); - } - if(count != lastColumnCount){ - lastColumnCount = count; - var cells = [], cols = [], psuedo = [], content; - for(var x = 0; x < count; x++){ - if (opts.enableAria && (content = $headerColumns.eq(x).text()) ) { - cells.push(''); - } else { - cells.push(''); - psuedo.push(""); - } - - cols = cols.join(''); - cells = cells.join(''); - - if(createElements){ - psuedo = psuedo.join(''); - $fthRow.html(psuedo); - $fthCells = $fthRow.find('fthtd'); - } - - $sizerRow.html(cells); - $sizerCells = $sizerRow.find("th"); - if(!existingColGroup){ - $tableColGroup.html(cols); - } - $tableCells = $tableColGroup.find('col'); - $floatColGroup.html(cols); - $headerCells = $floatColGroup.find("col"); - - } - return count; - } - - function refloat(){ //make the thing float - if(!headerFloated){ - headerFloated = true; - if(useAbsolutePositioning){ //#53, #56 - var tw = tableWidth($table, $fthCells, true); - var wrapperWidth = $wrapper.width(); - if(tw > wrapperWidth){ - $table.css('minWidth', tw); - } - } - $table.css(layoutFixed); - $floatTable.css(layoutFixed); - $floatTable.append($header); //append because colgroup must go first in chrome - $tbody.before($newHeader); - setHeaderHeight(); - } - } - function unfloat(){ //put the header back into the table - if(headerFloated){ - headerFloated = false; - if(useAbsolutePositioning){ //#53, #56 - $table.width(originalTableWidth); - } - $newHeader.detach(); - $table.prepend($header); - $table.css(layoutAuto); - $floatTable.css(layoutAuto); - $table.css('minWidth', originalTableMinWidth); //this looks weird, but it's not a bug. Think about it!! - $table.css('minWidth', tableWidth($table, $fthCells)); //#121 - } - } - var isHeaderFloatingLogical = false; //for the purpose of this event, the header is/isnt floating, even though the element - //might be in some other state. this is what the header looks like to the user - function triggerFloatEvent(isFloating){ - if(isHeaderFloatingLogical != isFloating){ - isHeaderFloatingLogical = isFloating; - $table.triggerHandler("floatThead", [isFloating, $floatContainer]) - } - } - function changePositioning(isAbsolute){ - if(useAbsolutePositioning != isAbsolute){ - useAbsolutePositioning = isAbsolute; - $floatContainer.css({ - position: useAbsolutePositioning ? 'absolute' : 'fixed' - }); - } - } - function getSizingRow($table, $cols, $fthCells, ieVersion){ - if(createElements){ - return $fthCells; - } else if(ieVersion) { - return opts.getSizingRow($table, $cols, $fthCells); - } else { - return $cols; - } - } - - /** - * returns a function that updates the floating header's cell widths. - * @return {Function} - */ - function reflow(){ - var i; - var numCols = columnNum(); //if the tables columns changed dynamically since last time (datatables), rebuild the sizer rows and get a new count - - return function(){ - $tableCells = $tableColGroup.find('col'); - var $rowCells = getSizingRow($table, $tableCells, $fthCells, ieVersion); - - if($rowCells.length == numCols && numCols > 0){ - if(!existingColGroup){ - for(i=0; i < numCols; i++){ - $tableCells.eq(i).css('width', ''); - } - } - unfloat(); - var widths = []; - for(i=0; i < numCols; i++){ - widths[i] = getOffsetWidth($rowCells.get(i)); - } - for(i=0; i < numCols; i++){ - $headerCells.eq(i).width(widths[i]); - $tableCells.eq(i).width(widths[i]); - } - refloat(); - } else { - $floatTable.append($header); - $table.css(layoutAuto); - $floatTable.css(layoutAuto); - setHeaderHeight(); - } - }; - } - - function floatContainerBorderWidth(side){ - var border = $scrollContainer.css("border-"+side+"-width"); - var w = 0; - if (border && ~border.indexOf('px')) { - w = parseInt(border, 10); - } - return w; - } - /** - * first performs initial calculations that we expect to not change when the table, window, or scrolling container are scrolled. - * returns a function that calculates the floating container's top and left coords. takes into account if we are using page scrolling or inner scrolling - * @return {Function} - */ - function calculateFloatContainerPosFn(){ - var scrollingContainerTop = $scrollContainer.scrollTop(); - - //this floatEnd calc was moved out of the returned function because we assume the table height doesn't change (otherwise we must reinit by calling calculateFloatContainerPosFn) - var floatEnd; - var tableContainerGap = 0; - var captionHeight = haveCaption ? $caption.outerHeight(true) : 0; - var captionScrollOffset = captionAlignTop ? captionHeight : -captionHeight; - - var floatContainerHeight = $floatContainer.height(); - var tableOffset = $table.offset(); - var tableLeftGap = 0; //can be caused by border on container (only in locked mode) - var tableTopGap = 0; - if(locked){ - var containerOffset = $scrollContainer.offset(); - tableContainerGap = tableOffset.top - containerOffset.top + scrollingContainerTop; - if(haveCaption && captionAlignTop){ - tableContainerGap += captionHeight; - } - tableLeftGap = floatContainerBorderWidth('left'); - tableTopGap = floatContainerBorderWidth('top'); - tableContainerGap -= tableTopGap; - } else { - floatEnd = tableOffset.top - scrollingTop - floatContainerHeight + scrollingBottom + scrollbarOffset.horizontal; - } - var windowTop = $window.scrollTop(); - var windowLeft = $window.scrollLeft(); - var scrollContainerLeft = $scrollContainer.scrollLeft(); - - return function(eventType){ - var isTableHidden = $table[0].offsetWidth <= 0 && $table[0].offsetHeight <= 0; - if(!isTableHidden && floatTableHidden) { - floatTableHidden = false; - setTimeout(function(){ - $table.triggerHandler("reflow"); - }, 1); - return null; - } - if(isTableHidden){ //it's hidden - floatTableHidden = true; - if(!useAbsolutePositioning){ - return null; - } - } - - if(eventType == 'windowScroll'){ - windowTop = $window.scrollTop(); - windowLeft = $window.scrollLeft(); - } else if(eventType == 'containerScroll'){ - scrollingContainerTop = $scrollContainer.scrollTop(); - scrollContainerLeft = $scrollContainer.scrollLeft(); - } else if(eventType != 'init') { - windowTop = $window.scrollTop(); - windowLeft = $window.scrollLeft(); - scrollingContainerTop = $scrollContainer.scrollTop(); - scrollContainerLeft = $scrollContainer.scrollLeft(); - } - if(isWebkit && (windowTop < 0 || windowLeft < 0)){ //chrome overscroll effect at the top of the page - breaks fixed positioned floated headers - return; - } - - if(absoluteToFixedOnScroll){ - if(eventType == 'windowScrollDone'){ - changePositioning(true); //change to absolute - } else { - changePositioning(false); //change to fixed - } - } else if(eventType == 'windowScrollDone'){ - return null; //event is fired when they stop scrolling. ignore it if not 'absoluteToFixedOnScroll' - } - - tableOffset = $table.offset(); - if(haveCaption && captionAlignTop){ - tableOffset.top += captionHeight; - } - var top, left; - var tableHeight = $table.outerHeight(); - - if(locked && useAbsolutePositioning){ //inner scrolling, absolute positioning - if (tableContainerGap >= scrollingContainerTop) { - var gap = tableContainerGap - scrollingContainerTop + tableTopGap; - top = gap > 0 ? gap : 0; - triggerFloatEvent(false); - } else { - top = wrappedContainer ? tableTopGap : scrollingContainerTop; - //headers stop at the top of the viewport - triggerFloatEvent(true); - } - left = tableLeftGap; - } else if(!locked && useAbsolutePositioning) { //window scrolling, absolute positioning - if(windowTop > floatEnd + tableHeight + captionScrollOffset){ - top = tableHeight - floatContainerHeight + captionScrollOffset; //scrolled past table - } else if (tableOffset.top >= windowTop + scrollingTop) { - top = 0; //scrolling to table - unfloat(); - triggerFloatEvent(false); - } else { - top = scrollingTop + windowTop - tableOffset.top + tableContainerGap + (captionAlignTop ? captionHeight : 0); - refloat(); //scrolling within table. header floated - triggerFloatEvent(true); - } - left = 0; - } else if(locked && !useAbsolutePositioning){ //inner scrolling, fixed positioning - if (tableContainerGap > scrollingContainerTop || scrollingContainerTop - tableContainerGap > tableHeight) { - top = tableOffset.top - windowTop; - unfloat(); - triggerFloatEvent(false); - } else { - top = tableOffset.top + scrollingContainerTop - windowTop - tableContainerGap; - refloat(); - triggerFloatEvent(true); - //headers stop at the top of the viewport - } - left = tableOffset.left + scrollContainerLeft - windowLeft; - } else if(!locked && !useAbsolutePositioning) { //window scrolling, fixed positioning - if(windowTop > floatEnd + tableHeight + captionScrollOffset){ - top = tableHeight + scrollingTop - windowTop + floatEnd + captionScrollOffset; - //scrolled past the bottom of the table - } else if (tableOffset.top > windowTop + scrollingTop) { - top = tableOffset.top - windowTop; - refloat(); - triggerFloatEvent(false); //this is a weird case, the header never gets unfloated and i have no no way to know - //scrolled past the top of the table - } else { - //scrolling within the table - top = scrollingTop; - triggerFloatEvent(true); - } - left = tableOffset.left - windowLeft; - } - return {top: top, left: left}; - }; - } - /** - * returns a function that caches old floating container position and only updates css when the position changes - * @return {Function} - */ - function repositionFloatContainerFn(){ - var oldTop = null; - var oldLeft = null; - var oldScrollLeft = null; - return function(pos, setWidth, setHeight){ - if(pos != null && (oldTop != pos.top || oldLeft != pos.left)){ - $floatContainer.css({ - top: pos.top, - left: pos.left - }); - oldTop = pos.top; - oldLeft = pos.left; - } - if(setWidth){ - setFloatWidth(); - } - if(setHeight){ - setHeaderHeight(); - } - var scrollLeft = $scrollContainer.scrollLeft(); - if(!useAbsolutePositioning || oldScrollLeft != scrollLeft){ - $floatContainer.scrollLeft(scrollLeft); - oldScrollLeft = scrollLeft; - } - } - } - - /** - * checks if THIS table has scrollbars, and finds their widths - */ - function calculateScrollBarSize(){ //this should happen after the floating table has been positioned - if($scrollContainer.length){ - if($scrollContainer.data().perfectScrollbar){ - scrollbarOffset = {horizontal:0, vertical:0}; - } else { - var sw = $scrollContainer.width(), sh = $scrollContainer.height(), th = $table.height(), tw = tableWidth($table, $fthCells); - var offseth = sw < tw ? scWidth : 0; - var offsetv = sh < th ? scWidth : 0; - scrollbarOffset.horizontal = sw - offsetv < tw ? scWidth : 0; - scrollbarOffset.vertical = sh - offseth < th ? scWidth : 0; - } - } - } - //finish up. create all calculation functions and bind them to events - calculateScrollBarSize(); - - var flow; - - var ensureReflow = function(){ - flow = reflow(); - flow(); - }; - - ensureReflow(); - - var calculateFloatContainerPos = calculateFloatContainerPosFn(); - var repositionFloatContainer = repositionFloatContainerFn(); - - repositionFloatContainer(calculateFloatContainerPos('init'), true); //this must come after reflow because reflow changes scrollLeft back to 0 when it rips out the thead - - var windowScrollDoneEvent = util.debounce(function(){ - repositionFloatContainer(calculateFloatContainerPos('windowScrollDone'), false); - }, 1); - - var windowScrollEvent = function(){ - repositionFloatContainer(calculateFloatContainerPos('windowScroll'), false); - if(absoluteToFixedOnScroll){ - windowScrollDoneEvent(); - } - }; - var containerScrollEvent = function(){ - repositionFloatContainer(calculateFloatContainerPos('containerScroll'), false); - }; - - - var windowResizeEvent = function(){ - if($table.is(":hidden")){ - return; - } - updateScrollingOffsets(); - calculateScrollBarSize(); - ensureReflow(); - calculateFloatContainerPos = calculateFloatContainerPosFn(); - repositionFloatContainer = repositionFloatContainerFn(); - repositionFloatContainer(calculateFloatContainerPos('resize'), true, true); - }; - var reflowEvent = util.debounce(function(){ - if($table.is(":hidden")){ - return; - } - calculateScrollBarSize(); - updateScrollingOffsets(); - ensureReflow(); - calculateFloatContainerPos = calculateFloatContainerPosFn(); - repositionFloatContainer(calculateFloatContainerPos('reflow'), true); - }, 1); - if(locked){ //internal scrolling - if(useAbsolutePositioning){ - $scrollContainer.on(eventName('scroll'), containerScrollEvent); - } else { - $scrollContainer.on(eventName('scroll'), containerScrollEvent); - $window.on(eventName('scroll'), windowScrollEvent); - } - } else { //window scrolling - $window.on(eventName('scroll'), windowScrollEvent); - } - - $window.on(eventName('load'), reflowEvent); //for tables with images - - windowResize(eventName('resize'), windowResizeEvent); - $table.on('reflow', reflowEvent); - if(isDatatable($table)){ - $table - .on('filter', reflowEvent) - .on('sort', reflowEvent) - .on('page', reflowEvent); - } - - $window.on(eventName('shown.bs.tab'), reflowEvent); // people cant seem to figure out how to use this plugin with bs3 tabs... so this :P - $window.on(eventName('tabsactivate'), reflowEvent); // same thing for jqueryui - - - if (canObserveMutations) { - var mutationElement = null; - if(_.isFunction(opts.autoReflow)){ - mutationElement = opts.autoReflow($table, $scrollContainer) - } - if(!mutationElement) { - mutationElement = $scrollContainer.length ? $scrollContainer[0] : $table[0] - } - mObs = new MutationObserver(function(e){ - var wasTableRelated = function(nodes){ - return nodes && nodes[0] && (nodes[0].nodeName == "THEAD" || nodes[0].nodeName == "TD"|| nodes[0].nodeName == "TH"); - }; - for(var i=0; i < e.length; i++){ - if(!(wasTableRelated(e[i].addedNodes) || wasTableRelated(e[i].removedNodes))){ - reflowEvent(); - break; - } - } - }); - mObs.observe(mutationElement, { - childList: true, - subtree: true - }); - } - - //attach some useful functions to the table. - $table.data('floatThead-attached', { - destroy: function(){ - var ns = '.fth-'+floatTheadId; - unfloat(); - $table.css(layoutAuto); - $tableColGroup.remove(); - createElements && $fthGrp.remove(); - if($newHeader.parent().length){ //only if it's in the DOM - $newHeader.replaceWith($header); - } - if(canObserveMutations){ - mObs.disconnect(); - mObs = null; - } - $table.off('reflow'); - $scrollContainer.off(ns); - if (wrappedContainer) { - if ($scrollContainer.length) { - $scrollContainer.unwrap(); - } - else { - $table.unwrap(); - } - } - if(locked){ - $scrollContainer.data('floatThead-containerWrap', false); - } else { - $table.data('floatThead-containerWrap', false); - } - $table.css('minWidth', originalTableMinWidth); - $floatContainer.remove(); - $table.data('floatThead-attached', false); - $window.off(ns); - }, - reflow: function(){ - reflowEvent(); - }, - setHeaderHeight: function(){ - setHeaderHeight(); - }, - getFloatContainer: function(){ - return $floatContainer; - }, - getRowGroups: function(){ - if(headerFloated){ - return $floatContainer.find('>table>thead').add($table.children("tbody,tfoot")); - } else { - return $table.children("thead,tbody,tfoot"); - } - } - }); - }); - return this; - }; -})(jQuery); -/* jQuery.floatThead.utils - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak - * License: MIT - * - * This file is required if you do not use underscore in your project and you want to use floatThead. - * It contains functions from underscore that the plugin uses. - * - * YOU DON'T NEED TO INCLUDE THIS IF YOU ALREADY INCLUDE UNDERSCORE! - * - */ - -(function($){ - - $.floatThead = $.floatThead || {}; - - $.floatThead._ = window._ || (function(){ - var that = {}; - var hasOwnProperty = Object.prototype.hasOwnProperty, isThings = ['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp']; - that.has = function(obj, key) { - return hasOwnProperty.call(obj, key); - }; - that.keys = function(obj) { - if (obj !== Object(obj)) throw new TypeError('Invalid object'); - var keys = []; - for (var key in obj) if (that.has(obj, key)) keys.push(key); - return keys; - }; - var idCounter = 0; - that.uniqueId = function(prefix) { - var id = ++idCounter + ''; - return prefix ? prefix + id : id; - }; - $.each(isThings, function(){ - var name = this; - that['is' + name] = function(obj) { - return Object.prototype.toString.call(obj) == '[object ' + name + ']'; - }; - }); - that.debounce = function(func, wait, immediate) { - var timeout, args, context, timestamp, result; - return function() { - context = this; - args = arguments; - timestamp = new Date(); - var later = function() { - var last = (new Date()) - timestamp; - if (last < wait) { - timeout = setTimeout(later, wait - last); - } else { - timeout = null; - if (!immediate) result = func.apply(context, args); - } - }; - var callNow = immediate && !timeout; - if (!timeout) { - timeout = setTimeout(later, wait); - } - if (callNow) result = func.apply(context, args); - return result; - }; - }; - return that; - })(); -})(jQuery); - diff --git a/web/administrator/templates/elysio/scripts/off-canvas-menu.js b/web/administrator/templates/elysio/scripts/off-canvas-menu.js deleted file mode 100644 index 52c8104a34..0000000000 --- a/web/administrator/templates/elysio/scripts/off-canvas-menu.js +++ /dev/null @@ -1,343 +0,0 @@ -/* @preserve - * Off canvas menu - * Copyright 2015 Robin Poort - * http://www.robinpoort.com - */ - -"use strict"; - - -(function($) { - - $.offCanvasMenu = function(element, options) { - - var defaults = { - menu: $(element), - position: 'left', - menuExpandedClass: 'show-left-menu', - openedClass: 'opened', - noTransitionClass: 'no-transition', - wrapper: $(element).parent(), - container: $('.container'), - menuToggle: [], - expandedWidth: $(element).outerWidth(), - offCanvasOverlay: 'off-canvas-overlay', - ariaControls: null - }, - plugin = this; - - - plugin.settings = {}; - - plugin.init = function() { - - plugin.settings = $.extend({}, defaults, options); - - var menu = plugin.settings.menu, - position = plugin.settings.position, - menuExpandedClass = plugin.settings.menuExpandedClass, - openedClass = plugin.settings.openedClass, - noTransitionClass = plugin.settings.noTransitionClass, - wrapper = plugin.settings.wrapper, - container = plugin.settings.container, - menuToggle = plugin.settings.menuToggle, - ariaControls = plugin.settings.ariaControls, - expandedWidth = menu.outerWidth(), - offCanvasOverlay = $('.' + plugin.settings.offCanvasOverlay), - transitionDuration = Math.round(parseFloat(container.css('transition-duration')) * 1000), - timeout; - - // Set proper menuExpandedClass if not set manually - if ( position === 'right' && !options.menuExpandedClass ) { - menuExpandedClass = 'show-right-menu'; - } - - // Set proper menuExpandedClass if not set manually - if ( wrapper.is('body') ) { - wrapper = $('html, body'); - } - - // Create overlay wrapper - if ( !offCanvasOverlay.length ) { - container.append('
'); - } - - function tabToggle(menu) { - // When tabbing on toggle button - menuToggle.bind('keydown', function(e) { - if (e.keyCode === 9 && wrapper.hasClass(menuExpandedClass) ) { - e.preventDefault(); - if ( e.shiftKey ) { - menu.find(':tabbable').last().focus(); - } else { - menu.find(':tabbable').first().focus(); - } - } - }); - - // When tabbing on first tabbable menu item - menu.find(':tabbable').first().bind('keydown', function(e) { - if (e.keyCode === 9 && wrapper.hasClass(menuExpandedClass) ) { - if ( e.shiftKey ) { - e.preventDefault(); - menuToggle.focus(); - } - } - }); - - // When tabbing on last tabbable menu item - menu.find(':tabbable').last().bind('keydown', function(e) { - if (e.keyCode === 9 && wrapper.hasClass(menuExpandedClass) ) { - if ( !e.shiftKey ) { - e.preventDefault(); - menuToggle.focus(); - } - } - }); - } - - function openMenu(menu) { - // Clear the timeout when user clicks open menu - clearTimeout(timeout); - - // Set to expanded for accessibility - menuToggle.attr({'aria-expanded': 'true'}); - - // Add classes and CSS to the wrapper - // All styling in CSS comes from this parent element - wrapper.addClass(menuExpandedClass + ' ' + openedClass + '--' + position); - - // Enable tabbing within menu - timeout = setTimeout(function() { - tabToggle(menu); - }, transitionDuration); - } - - function closeMenu() { - // Clear the timeout when user clicks close menu - clearTimeout(timeout); - - // Set to collapsed for accessibility - menuToggle.attr({'aria-expanded': 'false'}); - - // Remove the expanded class to activate the transition - wrapper.removeClass(menuExpandedClass); - - // Remove style and class when transition has ended, so the menu stays visible on closing - timeout = setTimeout(function() { - wrapper.removeClass(openedClass + '--' + position); - }, transitionDuration); - } - - function toggleMenu(menu) { - var method = !wrapper.hasClass(menuExpandedClass) ? 'closed' : 'opened'; - if ( method === 'closed' ) { openMenu(menu); } - if ( method === 'opened' ) { closeMenu(); } - } - - // If we have a toggle button available - if(menuToggle.length){ - - // Set ARIA attributes - menuToggle.attr({ - 'role': 'button', - 'aria-controls': ariaControls, - 'aria-expanded': 'false' - }); - - // Toggle button: - menuToggle.click(function(event){ - event.stopPropagation(); - toggleMenu(menu); - }); - - // Close menu by clicking anywhere - wrapper.click(function(event){ - if ( wrapper.hasClass(menuExpandedClass) ) { - event.stopPropagation(); - closeMenu(); - } - }); - - // Don't close the menu when clicked on sidemenu - menu.click(function(event){ - event.stopPropagation(); - }); - - // Close menu if esc keydown and menu is open and set focus to toggle button - $(document).bind('keydown', function(event) { - if (event.keyCode === 27 && wrapper.hasClass(menuExpandedClass)) { - event.stopPropagation(); - closeMenu(); - menuToggle.focus(); - } - }); - } - - - // Touch actions - if ('ontouchstart' in document.documentElement) { - wrapper.on('touchstart', onTouchStart); - wrapper.on('touchmove', onTouchMove); - wrapper.on('touchend', onTouchEnd); - } - - // vars - var started = null, - start = {}, - deltaX, - pageX, - overlayOpacity, - isScrolling = false; - - // Functions - function currentPosition() { - return position == 'left' ? menu.offset().left + expandedWidth - : menu.offset().left; - } - - function inBounds(newPos) { - return (position == 'left' && newPos >= -25 && newPos <= expandedWidth) || - (position == 'right' && newPos >= -(expandedWidth) && newPos <= 25); - } - - function onTouchStart(e) { - - if(!wrapper.hasClass(menuExpandedClass)) { - return; - } - - // Set started to true (used by touchend) - started = true; - - // Get original starting point - pageX = e.originalEvent.touches[0].pageX; - - // Setting the start object for 'move' and 'end' - start = { - startingX: currentPosition(), - // get touch coordinates for delta calculations in onTouchMove - pageX: pageX, - pageY: e.originalEvent.touches[0].pageY - }; - - // reset deltaX - deltaX = wrapper.position().left; - - // used for testing first onTouchMove event - isScrolling = undefined; - - // Get the opacity of the overlay - overlayOpacity = offCanvasOverlay.css('opacity'); - - // Add class to remove transition for 1-to-1 touch movement - container.addClass(noTransitionClass); - offCanvasOverlay.addClass(noTransitionClass); - - e.stopPropagation(); - - } - - function onTouchMove(e) { - - if(!wrapper.hasClass(menuExpandedClass)) { - return; - } - - deltaX = e.originalEvent.touches[0].pageX - start.pageX; - - // determine if scrolling test has run - one time test - if (typeof isScrolling == 'undefined') { - isScrolling = !!(isScrolling || Math.abs(deltaX) < Math.abs(e.originalEvent.touches[0].pageY - start.pageY)); - } - - // if user is not trying to scroll vertically - if (!isScrolling) { - - // prevent native scrolling - e.preventDefault(); - - var newPos = position == 'left' ? start.startingX + deltaX - : deltaX - ($(window).width() - start.startingX); - - var opacity = (overlayOpacity / expandedWidth) * Math.abs(newPos); - - if(!inBounds(newPos)) - return; - - // translate immediately 1-to-1 - container.css({ - '-webkit-transform' : 'translate(' + newPos + 'px, 0)', - '-moz-transform' : 'translate(' + newPos + 'px, 0)', - '-ms-transform' : 'translate(' + newPos + 'px, 0)', - '-o-transform' : 'translate(' + newPos + 'px, 0)', - 'transform' : 'translate(' + newPos + 'px, 0)' - }); - offCanvasOverlay.css('opacity', opacity); - - e.stopPropagation(); - } - - - } - - function onTouchEnd(e){ - - // Escape if invalid start: - if(!started) - return; - - // Escape if Menu is closed - if(!wrapper.hasClass(menuExpandedClass)) - return; - - var newPos = position == 'left' ? start.startingX + deltaX - : deltaX - ($(window).width() - start.startingX); - - // Converting to positive number - var absNewPos = Math.abs(newPos); - - // if not scrolling vertically - if (!isScrolling) { - - container.removeAttr('style').removeClass(noTransitionClass); - offCanvasOverlay.removeAttr('style').removeClass(noTransitionClass); - - if ( ( position == 'left' && ( absNewPos <= (expandedWidth * 0.66) || newPos <= 0 ) ) || - ( position == 'right' && ( absNewPos <= (expandedWidth * 0.66) || newPos >= 0 ) ) ) { - closeMenu(); - } else { - openMenu(menu); - } - } - - // Reset start object and starting variable: - started = null; - start = {}; - - e.stopPropagation(); - } - - }; - - plugin.init(); - - }; - - - // add the plugin to the jQuery.fn object - $.fn.offCanvasMenu = function(options) { - // iterate through the DOM elements we are attaching the plugin to - return this.each(function() { - // if plugin has not already been attached to the element - if (undefined == $(this).data('offCanvasMenu')) { - // create a new instance of the plugin - var plugin = new $.offCanvasMenu(this, options); - // in the jQuery version of the element - // store a reference to the plugin object - $(this).data('offCanvasMenu', plugin); - } - }); - } - -})(jQuery); \ No newline at end of file diff --git a/web/administrator/templates/elysio/scss/_shame.scss b/web/administrator/templates/elysio/scss/_shame.scss index 1d4d2cf62b..5e8bd489bd 100644 --- a/web/administrator/templates/elysio/scss/_shame.scss +++ b/web/administrator/templates/elysio/scss/_shame.scss @@ -1,40 +1,49 @@ -.k-overview { - margin-top: 0; +.chzn-container { + min-width: 100%; + max-width: 100%; } -button.close { - padding: 5px; - opacity: .8; - line-height: 20px; +.chzn-container-single .chzn-single { + height: 32px; + line-height: 30px; } -.k-filter-container { - .js-stools-field-filter { - margin-bottom: 7px; +.chzn-container-single .chzn-single div b { + background-position: 0 6px; +} + +.k-scopebar { + .chzn-container { + min-width: 0; + max-width: none; + } +} + +.k-container { + + // Tabs closer to previous container + .k-container__main { &:last-child { margin-bottom: 0; } } -} -.k-container__title { - h4 { - font-size: 2em; - margin: 0 0 .65em; + .nav-tabs { + margin-left: 10px; + margin-right: 10px; + } + + .tab-content { + @include clearfix; + padding-top: 20px; } } -.input-group--alias { - .input-group-addon { - label { - margin: 0; - font-weight: normal; - } +.k-container__content { + @include clearfix; +} - & + input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } -} \ No newline at end of file +.readonly { + display: block; +} diff --git a/web/administrator/templates/elysio/scss/admin.scss b/web/administrator/templates/elysio/scss/admin.scss index 0b996a7be0..32f69b2ca3 100644 --- a/web/administrator/templates/elysio/scss/admin.scss +++ b/web/administrator/templates/elysio/scss/admin.scss @@ -40,13 +40,12 @@ $k-icon-path: '../fonts'; //// Organisms @import "organisms/login"; //@import "organisms/flexbox"; - // - //// Shame... - //@import "shame"; - // + + // Shame... + @import "shame"; + //// Hacks //@import "utilities/hacks"; } - diff --git a/web/administrator/templates/elysio/scss/bootstrap/_overrides.scss b/web/administrator/templates/elysio/scss/bootstrap/_overrides.scss index a1835465b6..667ea22440 100644 --- a/web/administrator/templates/elysio/scss/bootstrap/_overrides.scss +++ b/web/administrator/templates/elysio/scss/bootstrap/_overrides.scss @@ -147,4 +147,5 @@ form { .collapse.in { height: auto; display: block !important; -} \ No newline at end of file +} +
' + content + ''); - } - cols.push('