mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-25 19:14:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

Ran jscs, required some variable name changes. Added typography docs fn to show font properties

Browse Source
This commit is contained in:
Kevin Ross 2015-12-03 19:09:01 -06:00
parent fdfd53ac35
commit 132fa6bb30
28 changed files with 391 additions and 903 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -2,6 +2,8 @@
dist/**/*
docs/dist/**/*
docs/assets/css/*
docs/assets/js/dist/*
docs/assets/js/docs.*
js/dist/**/*
# Ignore docs files

19
Gruntfile.js
View File

@ -114,6 +114,16 @@ module.exports = function (grunt) {
//'js/dist/popover.js' : 'js/src/popover.js'
}
},
docs: {
options: {
sourceMap: true,
modules: 'ignore'
},
files: {
'docs/assets/js/dist/style.js': 'docs/assets/js/src/style.js',
'docs/assets/js/dist/application.js': 'docs/assets/js/src/application.js'
}
},
dist: {
options: {
modules: 'ignore'
@ -147,7 +157,7 @@ module.exports = function (grunt) {
options: {
configFile: 'js/.eslintrc'
},
target: 'js/src/*.js'
target: ['js/src/*.js', 'docs/assets/js/src/*.js']
},
jscs: {
@ -391,6 +401,11 @@ module.exports = function (grunt) {
tasks: ['babel:dev']
},
docsjs: {
files: ['docs/assets/js/src/*.js'],
tasks: ['docs-js']
},
// FIXME: restore this after getting fundamentals done, just trying to reduce churn while developing
//sass: {
// files: 'scss/**/*.scss',
@ -555,7 +570,7 @@ module.exports = function (grunt) {
// Docs task.
grunt.registerTask('docs-css', ['sass:docs', 'postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
grunt.registerTask('docs-js', ['uglify:docsJs']);
grunt.registerTask('docs-js', ['babel:docs', 'uglify:docsJs']);
grunt.registerTask('lint-docs-js', ['jscs:assets']);
grunt.registerTask('docs', ['copy:bs-docs-components', 'copy:bs-docs-content', 'docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);

4
docs/_includes/footer.html
View File

@ -63,7 +63,3 @@ Holder.addTheme('gray', {
fontweight: 'normal'
})
</script>
<script>
$.bootstrapMaterialDesign()
</script>

29
docs/assets/js/docs.min.js vendored
View File

File diff suppressed because one or more lines are too long

88
docs/assets/js/src/application.js
View File

@ -1,83 +1,21 @@
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
import Style from './style'
/*!
* JavaScript for Bootstrap's docs (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see https://creativecommons.org/licenses/by/3.0/.
*/
class Application {
/* global Clipboard, anchors */
!function ($) {
'use strict';
$(function () {
// Tooltip and popover demos
$('.tooltip-demo').tooltip({
selector: '[data-toggle="tooltip"]',
container: 'body'
})
$('[data-toggle="popover"]').popover()
// Demos within modals
$('.tooltip-test').tooltip()
$('.popover-test').popover()
// Indeterminate checkbox example
$('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
// Disable empty links in docs examples
$('.bd-example [href=#]').click(function (e) {
e.preventDefault()
})
// Insert copy to clipboard button before .highlight
$('.highlight').each(function () {
var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
$(this).before(btnHtml)
$('.btn-clipboard').tooltip()
})
var clipboard = new Clipboard('.btn-clipboard', {
target: function (trigger) {
return trigger.parentNode.nextElementSibling
constructor() {
}
displayTypographyProperties() {
Style.displayFontSizeWeightColor('.bd-example-type td > *:not(.type-info)', ($element) => {
return $element.closest('tr').find('td.type-info')
})
}
}
clipboard.on('success', function (e) {
$(e.triggerStart)
.attr('title', 'Copied!')
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('_fixTitle')
$(() => {
let app = new Application()
app.displayTypographyProperties()
e.clearSelection()
})
clipboard.on('error', function (e) {
var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'
$(e.triggerStart)
.attr('title', fallbackMsg)
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('_fixTitle')
})
// $.bootstrapMaterialDesign()
})
}(jQuery)
;(function () {
'use strict';
anchors.options.placement = 'left';
anchors.add('.bd-content > h1, .bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
})();

83
docs/assets/js/src/old/old_application.js Normal file
View File

@ -0,0 +1,83 @@
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
/*!
* JavaScript for Bootstrap's docs (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see https://creativecommons.org/licenses/by/3.0/.
*/
/* global Clipboard, anchors */
!function ($) {
'use strict';
$(function () {
// Tooltip and popover demos
$('.tooltip-demo').tooltip({
selector: '[data-toggle="tooltip"]',
container: 'body'
})
$('[data-toggle="popover"]').popover()
// Demos within modals
$('.tooltip-test').tooltip()
$('.popover-test').popover()
// Indeterminate checkbox example
$('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
// Disable empty links in docs examples
$('.bd-example [href=#]').click(function (e) {
e.preventDefault()
})
// Insert copy to clipboard button before .highlight
$('.highlight').each(function () {
var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
$(this).before(btnHtml)
$('.btn-clipboard').tooltip()
})
var clipboard = new Clipboard('.btn-clipboard', {
target: function (trigger) {
return trigger.parentNode.nextElementSibling
}
})
clipboard.on('success', function (e) {
$(e.triggerStart)
.attr('title', 'Copied!')
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('_fixTitle')
e.clearSelection()
})
clipboard.on('error', function (e) {
var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'
$(e.triggerStart)
.attr('title', fallbackMsg)
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('_fixTitle')
})
})
}(jQuery)
;(function () {
'use strict';
anchors.options.placement = 'left';
anchors.add('.bd-content > h1, .bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
})();

75
docs/assets/js/src/style.js Normal file
View File

@ -0,0 +1,75 @@
const Style = (($) => {
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
// const Default = {
// template: ``
// }
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class Style {
constructor() {
}
static rgbToHex(rgba) {
rgba = rgba.match(/\d+/g)
let hex = `#${String(`0${Number(rgba[0]).toString(16)}`).slice(-2)}${String(`0${Number(rgba[1]).toString(16)}`).slice(-2)}${String(`0${Number(rgba[2]).toString(16)}`).slice(-2)}`
return hex
}
static displayFontSizeWeightColor(selector, targetFn, after = false, bg = false, wrapWithMark = false) {
return $(selector).each((index, element) => {
let $element = $(element)
let $target = targetFn($element)
let rgbaBgColor = $element.css('background-color')
// let hexBgColor = Style.rgbToHex(rgbaBgColor)
let rgbaColor = $element.css('color')
// let hexColor = Style.rgbToHex(rgbaColor)
let text = ''
if (wrapWithMark) {
text += `<mark style='font-size: 10px; font-weight: normal; letter-spacing: normal'>`
}
// text += `${$element.css('font-size')} ${$element.css('font-weight')} ${hexColor}`
text += `<span>${$element.css('font-size')} ${$element.css('font-weight')} <small style='white-space: nowrap'>${rgbaColor}</small></span>`
if (bg) {
// text += ` bg: ${hexBgColor} `
text += ` bg: ${rgbaBgColor} `
}
if (wrapWithMark) {
text += `</mark>`
}
$target.text('')
$target.append($(text))
})
}
// ------------------------------------------------------------------------
// private
// ------------------------------------------------------------------------
// static
}
return Style
})(jQuery)
export default Style

2
docs/assets/js/vendor/tether.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
grunt/configBridge.json
View File

@ -4,7 +4,8 @@
"../assets/js/vendor/anchor.min.js",
"../assets/js/vendor/clipboard.min.js",
"../assets/js/vendor/holder.min.js",
"../assets/js/src/application.js"
"../assets/js/dist/style.js",
"../assets/js/dist/application.js"
]
}
}

12
js/src/autofill.js
View File

@ -20,8 +20,8 @@ const Autofill = (($) => {
*/
class Autofill {
constructor(element, config) {
this.element = element
constructor($element, config) {
this.$element = $element
this.config = $.extend({}, Default, config)
this._watchLoading()
@ -29,8 +29,8 @@ const Autofill = (($) => {
}
dispose() {
$.removeData(this.element, DATA_KEY)
this.element = null
$.removeData(this.$element, DATA_KEY)
this.$element = null
this.config = null
}
@ -48,7 +48,7 @@ const Autofill = (($) => {
_onLoading() {
setInterval(() => {
$('input[type!=checkbox]').each((index, element) => {
let $element = $(element)
let $element = $($element)
if ($element.val() && $element.val() !== $element.attr('value')) {
$element.triggerStart('change')
}
@ -65,7 +65,7 @@ const Autofill = (($) => {
let $inputs = $(event.currentTarget).closest('form').find('input').not('[type=file]')
focused = setInterval(() => {
$inputs.each((index, element) => {
let $element = $(element)
let $element = $($element)
if ($element.val() !== $element.attr('value')) {
$element.triggerStart('change')
}

10
js/src/bootstrapMaterialDesign.js vendored
View File

@ -84,8 +84,8 @@ const BootstrapMaterialDesign = (($) => {
*/
class BootstrapMaterialDesign {
constructor(element, config) {
this.element = element
constructor($element, config) {
this.$element = $element
this.config = $.extend({}, Default, config)
let $document = $(document)
@ -106,7 +106,7 @@ const BootstrapMaterialDesign = (($) => {
// add to arrive if present and enabled
if (document.arrive && this.config.arrive) {
$document.arrive(selector, (element) => { // eslint-disable-line no-loop-func
$(element)[component](componentConfig)
$($element)[component](componentConfig)
})
}
}
@ -114,8 +114,8 @@ const BootstrapMaterialDesign = (($) => {
}
dispose() {
$.removeData(this.element, DATA_KEY)
this.element = null
$.removeData(this.$element, DATA_KEY)
this.$element = null
this.config = null
}

24
js/src/checkbox.js
View File

@ -23,20 +23,20 @@ const Checkbox = (($) => {
*/
class Checkbox {
constructor(element, config) {
this.element = element
constructor($element, config) {
this.$element = $element
this.config = $.extend({}, Default, config)
this.element.after(this.config.template)
this.formGroup = Util.findFormGroup(this.element)
this.$element.after(this.config.template)
this.$formGroup = Util.findFormGroup(this.$element)
this._bindEventListeners()
}
dispose() {
$.removeData(this.element, DATA_KEY)
this.element = null
this.formGroup = null
$.removeData(this.$element, DATA_KEY)
this.$element = null
this.$formGroup = null
this.config = null
}
@ -44,14 +44,14 @@ const Checkbox = (($) => {
// private
_bindEventListeners() {
// checkboxes didn't appear to bubble to the document, so we'll bind these directly
this.formGroup.find('.checkbox label').hover(() => {
Util.addFormGroupFocus(this.formGroup)
this.$formGroup.find('.checkbox label').hover(() => {
Util.addFormGroupFocus(this.$formGroup)
}, () => {
Util.removeFormGroupFocus(this.formGroup)
Util.removeFormGroupFocus(this.$formGroup)
})
this.element.change(() => {
this.element.blur()
this.$element.change(() => {
this.$element.blur()
})
}

30
js/src/fileinput.js
View File

@ -27,38 +27,38 @@ const FileInput = (($) => {
*/
class FileInput {
constructor(element, config) {
this.element = element
constructor($element, config) {
this.$element = $element
this.config = $.extend({}, Default, config)
this.formGroup = Util.findFormGroup(this.element)
this.$formGroup = Util.findFormGroup(this.$element)
this.formGroup.addClass(ClassName.IS_FILEINPUT)
this.$formGroup.addClass(ClassName.IS_FILEINPUT)
this._bindEventListeners()
}
dispose() {
$.removeData(this.element, DATA_KEY)
this.element = null
this.formGroup = null
$.removeData(this.$element, DATA_KEY)
this.$element = null
this.$formGroup = null
this.config = null
}
// ------------------------------------------------------------------------
// private
_bindEventListeners() {
this.formGroup
this.$formGroup
.on('focus', () => {
Util.addFormGroupFocus(this.formGroup)
Util.addFormGroupFocus(this.$formGroup)
})
.on('blur', () => {
Util.removeFormGroupFocus(this.formGroup)
Util.removeFormGroupFocus(this.$formGroup)
})
// set the fileinput readonly field with the name of the file
this.element.on('change', () => {
this.$element.on('change', () => {
let value = ''
$.each(this.element.files, (i, file) => {
$.each(this.$element.files, (i, file) => {
value += `${file.name} , `
})
value = value.substring(0, value.length - 2)
@ -67,16 +67,16 @@ const FileInput = (($) => {
} else {
this._addIsEmpty()
}
this.formGroup.find('input.form-control[readonly]').val(value)
this.$formGroup.find('input.form-control[readonly]').val(value)
})
}
_addIsEmpty() {
this.formGroup.addClass(ClassName.IS_EMPTY)
this.$formGroup.addClass(ClassName.IS_EMPTY)
}
_removeIsEmpty() {
this.formGroup.removeClass(ClassName.IS_EMPTY)
this.$formGroup.removeClass(ClassName.IS_EMPTY)
}
// ------------------------------------------------------------------------

52
js/src/input.js
View File

@ -41,30 +41,30 @@ const Input = (($) => {
*/
class Input {
constructor(element, config) {
this.element = element
constructor($element, config) {
this.$element = $element
this.config = $.extend({}, Default, config)
// Requires form-group standard markup (will add it if necessary)
this.formGroup = this._findOrCreateFormGroup()
this.$formGroup = this._findOrCreateFormGroup()
this._convertInputSizeVariations()
// Initially mark as empty
if (this._isEmpty()) {
this.formGroup.addClass(ClassName.IS_EMPTY)
this.$formGroup.addClass(ClassName.IS_EMPTY)
}
// Add marker div the end of the form-group
this.formGroup.append(this.config.template)
this.$formGroup.append(this.config.template)
this._bindEventListeners()
}
dispose() {
$.removeData(this.element, DATA_KEY)
this.element = null
this.formGroup = null
$.removeData(this.$element, DATA_KEY)
this.$element = null
this.$formGroup = null
this.config = null
}
@ -73,16 +73,16 @@ const Input = (($) => {
_bindEventListeners() {
this.element
this.$element
.on('keydown paste', (event) => {
if (Util.isChar(event)) {
this._removeIsEmpty()
}
})
.on('keyup change', (event) => {
let isValid = (typeof this.element[0].checkValidity === 'undefined' || this.element[0].checkValidity())
let isValid = (typeof this.$element[0].checkValidity === 'undefined' || this.$element[0].checkValidity())
if (this.element.val() === '' && isValid) {
if (this.$element.val() === '' && isValid) {
this._addIsEmpty()
} else {
this._removeIsEmpty()
@ -101,19 +101,19 @@ const Input = (($) => {
}
})
.on('focus', () => {
Util.addFormGroupFocus(this.formGroup)
Util.addFormGroupFocus(this.$formGroup)
})
.on('blur', () => {
Util.removeFormGroupFocus(this.formGroup)
Util.removeFormGroupFocus(this.$formGroup)
})
// make sure empty is added back when there is a programmatic value change.
// NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
.on('change', () => {
if (this.element.attr('type') === 'file') {
if (this.$element.attr('type') === 'file') {
return
}
let value = this.element.val()
let value = this.$element.val()
if (value) {
this._removeIsEmpty()
} else {
@ -123,23 +123,23 @@ const Input = (($) => {
}
_addHasError() {
this.formGroup.addClass(ClassName.HAS_ERROR)
this.$formGroup.addClass(ClassName.HAS_ERROR)
}
_removeHasError() {
this.formGroup.removeClass(ClassName.HAS_ERROR)
this.$formGroup.removeClass(ClassName.HAS_ERROR)
}
_addIsEmpty() {
this.formGroup.addClass(ClassName.IS_EMPTY)
this.$formGroup.addClass(ClassName.IS_EMPTY)
}
_removeIsEmpty() {
this.formGroup.removeClass(ClassName.IS_EMPTY)
this.$formGroup.removeClass(ClassName.IS_EMPTY)
}
_isEmpty() {
return (this.element.val() === null || this.element.val() === undefined || this.element.val() === '')
return (this.$element.val() === null || this.$element.val() === undefined || this.$element.val() === '')
}
_convertInputSizeVariations() {
@ -149,18 +149,18 @@ const Input = (($) => {
// Modification - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
for (let inputSize in InputSizeConversions) {
if (this.element.hasClass(inputSize)) {
this.element.removeClass(inputSize)
this.formGroup.addClass(InputSizeConversions[inputSize])
if (this.$element.hasClass(inputSize)) {
this.$element.removeClass(inputSize)
this.$formGroup.addClass(InputSizeConversions[inputSize])
}
}
}
_findOrCreateFormGroup() {
let fg = this.element.closest(Selector.FORM_GROUP) // note that form-group may be grandparent in the case of an input-group
let fg = this.$element.closest(Selector.FORM_GROUP) // note that form-group may be grandparent in the case of an input-group
if (fg.length === 0) {
this.element.wrap(this.config.formGroup.template)
fg = this.element.closest(Selector.FORM_GROUP) // find node after attached (otherwise additional attachments don't work)
this.$element.wrap(this.config.$formGroup.template)
fg = this.$element.closest(Selector.FORM_GROUP) // find node after attached (otherwise additional attachments don't work)
}
return fg
}

8
js/src/old/es6Template.js
View File

@ -22,14 +22,14 @@ const Foo = (($) => {
*/
class Foo {
constructor(element, config) {
this.element = element
constructor($element, config) {
this.$element = $element
this.config = $.extend({}, Default, config)
}
dispose() {
$.removeData(this.element, DATA_KEY)
this.element = null
$.removeData(this.$element, DATA_KEY)
this.$element = null
this.config = null
}

301
js/src/old/material.js
View File

@ -1,301 +0,0 @@
/* globals jQuery */
(function($) {
// Selector to select only not already processed elements
//$.expr[":"].notmdproc = function(obj){
// if ($(obj).data("mdproc")) {
// return false;
// } else {
// return true;
// }
//};
//
//function isChar(evt) {
// if (typeof evt.which == "undefined") {
// return true;
// } else if (typeof evt.which == "number" && evt.which > 0) {
// return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8 && evt.which != 9;
// }
// return false;
//}
//
//function addFormGroupFocus(formGroup){
// formGroup.addClass("is-focused");
//}
//
//function removeFormGroupFocus(formGroup){
// formGroup.removeClass("is-focused"); // remove class from form-group
//}
$.material = {
"options": {
// These options set what will be started by $.material.init()
//"input": true,
//"ripples": true,
//"checkbox": true,
//"togglebutton": true,
//"radio": true,
//"arrive": true,
//"autofill": false,
//"withRipples": [
// ".btn:not(.btn-link)",
// ".card-image",
// ".navbar a:not(.ripple-none)",
// ".dropdown-menu a",
// ".nav-tabs a:not(.ripple-none)",
// ".withripple",
// ".pagination li:not(.active):not(.disabled) a:not(.ripple-none)"
//].join(","),
//"inputElements": "input.form-control, textarea.form-control, select.form-control",
//"checkboxElements": ".checkbox > label > input[type=checkbox]",
//"togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
//"radioElements": ".radio > label > input[type=radio]" ,
//"fileInputElements": 'input[type=file]'
},
//"checkbox": function(selector) {
// // Add fake-checkbox to material checkboxes
// $((selector) ? selector : this.options.checkboxElements)
// .filter(":notmdproc")
// .data("mdproc", true)
// .after("<span class='checkbox-material'><span class='check'></span></span>");
//},
//"togglebutton": function(selector) {
// $((selector) ? selector : this.options.togglebuttonElements)
// .filter(":notmdproc")
// .data("mdproc", true)
// .after("<span class='toggle'></span>");
//},
//"radio": function(selector) {
// // Add fake-radio to material radios
// $((selector) ? selector : this.options.radioElements)
// .filter(":notmdproc")
// .data("mdproc", true)
// .after("<span class='circle'></span><span class='check'></span>");
//},
//"input": function(selector) {
// $((selector) ? selector : this.options.inputElements)
// .filter(":notmdproc")
// .data("mdproc", true)
// .each( () => {
// var $input = $(this);
//
// // Requires form-group standard markup (will add it if necessary)
// var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
// if($formGroup.length === 0){
// $input.wrap("<div class='form-group'></div>");
// $formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
// }
//
// // Modification - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
// var legacySizes = {
// "input-lg": "form-group-lg",
// "input-sm": "form-group-sm"
// };
// $.each( legacySizes, function( legacySize, standardSize ) {
// if ($input.hasClass(legacySize)) {
// $input.removeClass(legacySize);
// $formGroup.addClass(standardSize);
// }
// }); // TODO: determine if we want to keep meddling this much.
//
// // Set as empty if is empty (damn I must improve this...)
// if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
// $formGroup.addClass("is-empty");
// }
//
// // Add at the end of the form-group
// $formGroup.append("<span class='material-input'></span>");
//
// // Support for file input
// if ($formGroup.find("input[type=file]").length > 0) {
// $formGroup.addClass("is-fileinput");
// }
// });
//},
//"attachInputEventHandlers": () => {
//
//// checkboxes didn't appear to bubble to the document, so we'll bind these directly
//$(".form-group .checkbox label").hover(() => {
// Util.addFormGroupFocus(this);
//}, () => {
// Util.removeFormGroupFocus(this);
//});
//
//$(document)
//.on("change", ".checkbox input[type=checkbox]", () => { $(this).blur(); })
//.on("keydown paste", ".form-control", function(e) {
// if(Util.isChar(e)) {
// $(this).closest(".form-group").removeClass("is-empty");
// }
//})
//.on("keyup change", ".form-control", () => {
// var $input = $(this);
// var $formGroup = $input.closest(".form-group");
// var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
//
// if ($input.val() === "" && isValid) {
// $formGroup.addClass("is-empty");
// }
// else {
// $formGroup.removeClass("is-empty");
// }
//
// // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
// // Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
// // the form-group on change.
// //
// // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
// // BUT, I've left it here for backwards compatibility.
// if(isValid){
// $formGroup.removeClass("has-error");
// }
// else{
// $formGroup.addClass("has-error");
// }
//})
//.on("focus", ".form-control, .form-group.is-fileinput", () => {
// Util.addFormGroupFocus(this.formGroup);
//})
//.on("blur", ".form-control, .form-group.is-fileinput", () => {
// Util.removeFormGroupFocus(this.formGroup);
//})
//// make sure empty is added back when there is a programmatic value change.
//// NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
//.on("change", ".form-group input", () => {
// var $input = $(this);
// if($input.attr("type") == "file") {
// return;
// }
//
// var $formGroup = $input.closest(".form-group");
// var value = $input.val();
// if (value) {
// $formGroup.removeClass("is-empty");
// } else {
// $formGroup.addClass("is-empty");
// }
//})
//// set the fileinput readonly field with the name of the file
//.on("change", ".form-group.is-fileinput input[type='file']", () => {
// var $input = $(this);
// var $formGroup = $input.closest(".form-group");
// var value = "";
// $.each(this.files, function(i, file) {
// value += file.name + ", ";
// });
// value = value.substring(0, value.length - 2);
// if (value) {
// $formGroup.removeClass("is-empty");
// } else {
// $formGroup.addClass("is-empty");
// }
// $formGroup.find("input.form-control[readonly]").val(value);
//});
//},
//"ripples": function(selector) {
// $((selector) ? selector : this.options.withRipples).ripples();
//},
//"autofill": () => {
// // This part of code will detect autofill when the page is loading (username and password inputs for example)
// var loading = setInterval(() => {
// $("input[type!=checkbox]").each(() => {
// var $this = $(this);
// if ($this.val() && $this.val() !== $this.attr("value")) {
// $this.triggerStart("change");
// }
// });
// }, 100);
//
// // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
// setTimeout(() => {
// clearInterval(loading);
// }, 10000);
//},
//"attachAutofillEventHandlers": () => {
// // Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
// var focused;
// $(document)
// .on("focus", "input", () => {
// var $inputs = $(this).parents("form").find("input").not("[type=file]");
// focused = setInterval(() => {
// $inputs.each(() => {
// var $this = $(this);
// if ($this.val() !== $this.attr("value")) {
// $this.triggerStart("change");
// }
// });
// }, 100);
// })
// .on("blur", ".form-group input", () => {
// clearInterval(focused);
// });
//},
"init": () => {
// var $document = $(document);
//
// if ($.fn.ripples && this.options.ripples) {
// //this.ripples();
// $(this.options.withRipples).ripples()
// }
// if (this.options.input) {
// this.input();
// this.attachInputEventHandlers();
//
// $(this.options.inputElements).input()
// }
// if (this.options.checkbox) {
// //this.checkbox();
// $(this.options.checkboxElements).checkbox()
// }
// if (this.options.togglebutton) {
// //this.togglebutton();
// $(this.options.togglebuttonElements).togglebutton()
// }
// if (this.options.radio) {
// //this.radio();
// $(this.options.radioElements).radio()
// }
// if (this.options.autofill) {
// //this.autofill();
// //this.attachAutofillEventHandlers();
// $('body').autofill();
// }
//
// $(this.options.fileInputElements).fileInput()
//
// if (document.arrive && this.options.arrive) {
// if ($.fn.ripples && this.options.ripples) {
// $document.arrive(this.options.withRipples, () => {
// $(this).ripples()
// });
// }
// if (this.options.input) {
// $document.arrive(this.options.inputElements, () => {
// $(this).input()
// });
// }
// if (this.options.checkbox) {
// $document.arrive(this.options.checkboxElements, () => {
// $(this).checkbox();
// });
// }
// if (this.options.radio) {
// $document.arrive(this.options.radioElements, () => {
// $(this).radio();
// });
// }
// if (this.options.togglebutton) {
// $document.arrive(this.options.togglebuttonElements, () => {
// $(this).togglebutton();
// });
// }
//
// $document.arrive(this.options.fileInputElements, () => {
// $(this).fileInput();
// });
// }
}
};
})(jQuery);

320
js/src/old/ripples.js
View File

@ -1,320 +0,0 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals jQuery, navigator */
(function($, window, document, undefined) {
//"use strict";
//
///**
// * Define the name of the plugin
// */
//var ripples = "ripples";
//
//
///**
// * Get an instance of the plugin
// */
//var self = null;
//
//
///**
// * Define the DEFAULT_OPTIONS of the plugin
// */
//var DEFAULT_OPTIONS = {};
//
//
///**
// * Create the main plugin function
// */
//function Ripples(element, options) {
// self = this;
//
// this._element = $(element);
// this._options = $.extend({}, DEFAULT_OPTIONS, options);
//
// this.init();
//}
//
//
/**
* Initialize the plugin
*/
//Ripples.prototype.init = function() {
// var $element = this._element;
//
// $element.on("mousedown touchstart", function(event) {
// /**
// * Verify if the user is just touching on a device and return if so
// */
// if(self.isTouch() && event.type === "mousedown") {
// return;
// }
//
//
// /**
// * Verify if the current element already has a ripple wrapper element and
// * creates if it doesn't
// */
// if(!($element.find(".ripple-container").length)) {
// $element.append("<div class=\"ripple-container\"></div>");
// }
//
//
// /**
// * Find the ripple wrapper
// */
// var $container = $element.children(".ripple-container");
//
//
// /**
// * Get relY and relX positions
// */
// var relY = self.getRelY($container, event);
// var relX = self.getRelX($container, event);
//
//
// /**
// * If relY and/or relX are false, return the event
// */
// if(!relY && !relX) {
// return;
// }
//
//
// /**
// * Get the ripple color
// */
// var rippleColor = self.getRipplesColor($element);
//
//
// /**
// * Create the ripple element
// */
// var $ripple = $("<div></div>");
//
// $ripple
// .addClass("ripple")
// .css({
// "left": relX,
// "top": relY,
// "background-color": rippleColor
// });
//
//
// /**
// * Append the ripple to the wrapper
// */
// $container.append($ripple);
//
//
// /**
// * Make sure the ripple has the styles applied (ugly hack but it works)
// */
// (function() { return window.getComputedStyle($ripple[0]).opacity; })();
//
//
// /**
// * Turn on the ripple animation
// */
// self.rippleOn($element, $ripple);
//
//
// /**
// * Call the rippleEnd function when the transition "on" ends
// */
// setTimeout(function() {
// self.rippleEnd($ripple);
// }, 500);
//
//
// /**
// * Detect when the user leaves the element
// */
// $element.on("mouseup mouseleave touchend", function() {
// $ripple.data("mousedown", "off");
//
// if($ripple.data("animating") === "off") {
// self.rippleOut($ripple);
// }
// });
//
// });
//};
//
//
///**
// * Get the new size based on the element height/width and the ripple width
// */
//Ripples.prototype.getNewSize = function($element, $ripple) {
//
// return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
//};
///**
// * Get the relX
// */
//Ripples.prototype.getRelX = function($container, event) {
// var wrapperOffset = $container.offset();
//
// if(!self.isTouch()) {
// /**
// * Get the mouse position relative to the ripple wrapper
// */
// return event.pageX - wrapperOffset.left;
// } else {
// /**
// * Make sure the user is using only one finger and then get the touch
// * position relative to the ripple wrapper
// */
// event = event.originalEvent;
//
// if(event.touches.length === 1) {
// return event.touches[0].pageX - wrapperOffset.left;
// }
//
// return false;
// }
//};
//
//
///**
// * Get the relY
// */
//Ripples.prototype.getRelY = function($container, event) {
// var wrapperOffset = $container.offset();
//
// if(!self.isTouch()) {
// /**
// * Get the mouse position relative to the ripple wrapper
// */
// return event.pageY - wrapperOffset.top;
// } else {
// /**
// * Make sure the user is using only one finger and then get the touch
// * position relative to the ripple wrapper
// */
// event = event.originalEvent;
//
// if(event.touches.length === 1) {
// return event.touches[0].pageY - wrapperOffset.top;
// }
//
// return false;
// }
//};
//
//
///**
// * Get the ripple color
// */
//Ripples.prototype.getRipplesColor = function($element) {
//
// var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
//
// return color;
//};
//
///**
// * Verify if the client browser has transistion support
// */
//Ripples.prototype.hasTransitionSupport = function() {
// var thisBody = document.body || document.documentElement;
// var thisStyle = thisBody.style;
//
// var support = (
// thisStyle.transition !== undefined ||
// thisStyle.WebkitTransition !== undefined ||
// thisStyle.MozTransition !== undefined ||
// thisStyle.MsTransition !== undefined ||
// thisStyle.OTransition !== undefined
// );
//
// return support;
//};
//
//
///**
// * Verify if the client is using a mobile device
// */
//Ripples.prototype.isTouch = function() {
// return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
//};
//
//
///**
// * End the animation of the ripple
// */
//Ripples.prototype.rippleEnd = function($ripple) {
// $ripple.data("animating", "off");
//
// if($ripple.data("mousedown") === "off") {
// self.rippleOut($ripple);
// }
//};
//
//
///**
// * Turn off the ripple effect
// */
//Ripples.prototype.rippleOut = function($ripple) {
// $ripple.off();
//
// if(self.hasTransitionSupport()) {
// $ripple.addClass("ripple-out");
// } else {
// $ripple.animate({"opacity": 0}, 100, function() {
// $ripple.trigger("transitionend");
// });
// }
//
// $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
// $ripple.remove();
// });
//};
//
//
///**
// * Turn on the ripple effect
// */
//Ripples.prototype.rippleOn = function($element, $ripple) {
// var size = self.getNewSize($element, $ripple);
//
// if(self.hasTransitionSupport()) {
// $ripple
// .css({
// "-ms-transform": "scale(" + size + ")",
// "-moz-transform": "scale(" + size + ")",
// "-webkit-transform": "scale(" + size + ")",
// "transform": "scale(" + size + ")"
// })
// .addClass("ripple-on")
// .data("animating", "on")
// .data("mousedown", "on");
// } else {
// $ripple.animate({
// "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
// "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
// "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
// "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
// "opacity": 0.2
// }, 500, function() {
// $ripple.trigger("transitionend");
// });
// }
//};
//
//
///**
// * Create the jquery plugin function
// */
//$.fn.ripples = function(options) {
// return this.each(function() {
// if(!$.data(this, "plugin_" + ripples)) {
// $.data(this, "plugin_" + ripples, new Ripples(this, options));
// }
// });
//};
})(jQuery, window, document);

10
js/src/radio.js
View File

@ -23,16 +23,16 @@ const Radio = (($) => {
*/
class Radio {
constructor(element, config) {
this.element = element
constructor($element, config) {
this.$element = $element
this.config = $.extend({}, Default, config)
this.element.after(this.config.template)
this.$element.after(this.config.template)
}
dispose() {
$.removeData(this.element, DATA_KEY)
this.element = null
$.removeData(this.$element, DATA_KEY)
this.$element = null
this.config = null
}

36
js/src/ripples.js
View File

@ -44,17 +44,17 @@ const Ripples = (($) => {
*/
class Ripples {
constructor(element, config) {
this.element = $(element)
constructor($element, config) {
this.$element = $element
this.config = $.extend({}, Default, config)
// attach initial listener
this.element.on(this.config.triggerStart, this._onStartRipple)
this.$element.on(this.config.triggerStart, this._onStartRipple)
}
dispose() {
$.removeData(this.element, DATA_KEY)
this.element = null
$.removeData(this.$element, DATA_KEY)
this.$element = null
this.containerElement = null
this.decoratorElement = null
this.config = null
@ -101,7 +101,7 @@ const Ripples = (($) => {
}, this.config.duration)
// Detect when the user leaves the element (attach only when necessary for performance)
this.element.on(this.config.triggerEnd, () => {
this.$element.on(this.config.triggerEnd, () => {
this.decoratorElement.data('mousedown', 'off')
if (this.decoratorElement.data('animating') === 'off') {
@ -112,12 +112,12 @@ const Ripples = (($) => {
_findOrCreateContainer() {
if (!this.containerElement || !this.containerElement.length > 0) {
this.element.append(this.config.container.template)
this.containerElement = this.element.find(Selector.CONTAINER)
this.$element.append(this.config.container.template)
this.containerElement = this.$element.find(Selector.CONTAINER)
}
// always add the rippleElement, it is always removed
this.containerElement.append(this.config.element.template)
this.containerElement.append(this.config.$element.template)
this.decoratorElement = this.containerElement.find(Selector.DECORATOR)
}
@ -184,7 +184,7 @@ const Ripples = (($) => {
* Get the ripple color
*/
_getRipplesColor() {
let color = this.element.data('ripple-color') ? this.element.data('ripple-color') : window.getComputedStyle(this.element[0]).color
let color = this.$element.data('ripple-color') ? this.$element.data('ripple-color') : window.getComputedStyle(this.$element[0]).color
return color
}
@ -245,10 +245,10 @@ const Ripples = (($) => {
.data('mousedown', 'on')
} else {
this.decoratorElement.animate({
width: Math.max(this.element.outerWidth(), this.element.outerHeight()) * 2,
height: Math.max(this.element.outerWidth(), this.element.outerHeight()) * 2,
'margin-left': Math.max(this.element.outerWidth(), this.element.outerHeight()) * (-1),
'margin-top': Math.max(this.element.outerWidth(), this.element.outerHeight()) * (-1),
width: Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * 2,
height: Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * 2,
'margin-left': Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * (-1),
'margin-top': Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * (-1),
opacity: 0.2
}, this.config.duration, () => {
this.decoratorElement.triggerStart('transitionend')
@ -260,7 +260,7 @@ const Ripples = (($) => {
* Get the new size based on the element height/width and the ripple width
*/
_getNewSize() {
return (Math.max(this.element.outerWidth(), this.element.outerHeight()) / this.decoratorElement.outerWidth()) * 2.5
return (Math.max(this.$element.outerWidth(), this.$element.outerHeight()) / this.decoratorElement.outerWidth()) * 2.5
}
// ------------------------------------------------------------------------
@ -268,12 +268,12 @@ const Ripples = (($) => {
static _jQueryInterface(config) {
return this.each(() => {
let element = $(this)
let data = element.data(DATA_KEY)
let $element = $(this)
let data = $element.data(DATA_KEY)
if (!data) {
data = new Ripples(this, config)
element.data(DATA_KEY, data)
$element.data(DATA_KEY, data)
}
})
}

10
js/src/togglebutton.js
View File

@ -23,16 +23,16 @@ const Togglebutton = (($) => {
*/
class Togglebutton {
constructor(element, config) {
this.element = element
constructor($element, config) {
this.$element = $element
this.config = $.extend({}, Default, config)
this.element.after(this.config.template)
this.$element.after(this.config.template)
}
dispose() {
$.removeData(this.element, DATA_KEY)
this.element = null
$.removeData(this.$element, DATA_KEY)
this.$element = null
this.config = null
}

6
js/src/util.js
View File

@ -86,10 +86,10 @@ const Util = (($) => {
/**
Find expected form-group
*/
findFormGroup(element) {
let fg = element.closest(Selector.FORM_GROUP) // note that form-group may be grandparent in the case of an input-group
findFormGroup($element) {
let fg = $element.closest(Selector.FORM_GROUP) // note that form-group may be grandparent in the case of an input-group
if (fg.length === 0) {
$.error(`Failed to find form-group for ${element}`)
$.error(`Failed to find form-group for ${$element}`)
}
return fg
}

2
js/tests/vendor/tether.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
scss/includes/_bootstrap-material-design.scss
View File

@ -5,7 +5,8 @@
@import 'bootstrap';
@import 'mixins';
@import 'scaffolding'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)
@import 'reboot';
@import 'buttons';
@import 'checkboxes';
@import 'togglebutton';
@ -23,4 +24,5 @@
@import 'dialogs';
@import 'dividers';
@import 'themes';
@import 'plugins';

12
scss/includes/_reboot.scss Normal file
View File

@ -0,0 +1,12 @@
body {
font-weight: $mdb-font-weight-base;
}
//// Prevent highlight on mobile
//* {
// -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
// -webkit-tap-highlight-color: transparent;
// &:focus {
// outline: 0;
// }
//}

39
scss/includes/_scaffolding.scss
View File

@ -1,39 +0,0 @@
body {
// Not sure we need this now that we are customizing bootstrap
// background-color: $body-bg;
// &.inverse {
// background: #333333;
// &, .form-control {
// color: $mdb-text-color-light;
// }
// .modal,
// .card {
// &,
// .form-control {
// background-color: initial;
// color: initial;
// }
// }
//
// }
//}
//
//
//a, a:hover, a:focus {
// color: $brand-primary;
//
// & .material-icons {
// vertical-align: middle;
// }
}
//// Prevent highlight on mobile
//* {
// -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
// -webkit-tap-highlight-color: transparent;
// &:focus {
// outline: 0;
// }
//}

48
scss/includes/_type.scss
View File

@ -1,25 +1,25 @@
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
//font-family: $font-family-sans-serif;
//font-weight: 300;
}
h5, h6{
font-weight: 400;
}
.text-warning {
color: $brand-warning;
}
.text-primary {
color: $brand-primary;
}
.text-danger {
color: $brand-danger;
}
.text-success {
color: $brand-success;
}
.text-info {
color: $brand-info;
}
//body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
// //font-family: $font-family-sans-serif;
// //font-weight: 300;
//}
//
//h5, h6{
// font-weight: 400;
//}
//
//.text-warning {
// color: $brand-warning;
//}
//.text-primary {
// color: $brand-primary;
//}
//.text-danger {
// color: $brand-danger;
//}
//.text-success {
// color: $brand-success;
//}
//.text-info {
// color: $brand-info;
//}

9
scss/includes/_variables.scss
View File

@ -3,6 +3,7 @@
// Typography elements FIXME: review to see if we actually need these
$mdb-text-color-light: rgba(255, 255, 255, 0.84) !default; //hsla(0, 0%, 100%, 0.84) !default; // white 0.84 //unquote("rgba(#{$rgb-white}, 0.84)") !default;
$mdb-text-color-primary: rgba(0, 0, 0, 0.87) !default;
$mdb-font-weight-base: 400;
$icon-color: rgba(0, 0, 0, 0.5) !default;
@ -13,15 +14,15 @@ $gray-dark: $mdb-text-color-primary;
// Customized BS variables
$enable-flex: true;
@import 'variables/brand';
$border-radius-base: 2px !default;
$border-radius-small: 1px !default;
@import 'variables/type';
@import 'variables/body';
@import 'variables/buttons';
$border-radius-base: 2px !default;
$border-radius-small: 1px !default;
//---
// Bootstrap Material Design variables start with mdb-
$mdb-brand-inverse: $indigo !default;

54
scss/includes/variables/_type.scss
View File

@ -1,3 +1,55 @@
// Typography
//
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
$headings-font-weight: 300 !default;
//$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
//$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
//$font-family-base: $font-family-sans-serif !default;
// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
//$font-size-root: 16px !default;
//
//$font-size-base: 1rem !default;
//$font-size-lg: 1.25rem !default;
//$font-size-sm: .875rem !default;
//$font-size-xs: .75rem !default;
//
//$font-size-h1: 2.5rem !default;
//$font-size-h2: 2rem !default;
//$font-size-h3: 1.75rem !default;
//$font-size-h4: 1.5rem !default;
//$font-size-h5: 1.25rem !default;
//$font-size-h6: 1rem !default;
//
//$display1-size: 6rem !default;
//$display2-size: 5.5rem !default;
//$display3-size: 4.5rem !default;
//$display4-size: 3.5rem !default;
//
//$display1-weight: 300 !default;
//$display2-weight: 300 !default;
//$display3-weight: 300 !default;
//$display4-weight: 300 !default;
//
//$line-height: 1.5 !default;
//
//$headings-margin-bottom: ($spacer / 2) !default;
//$headings-font-family: inherit !default;
//$headings-font-weight: 500 !default;
//$headings-line-height: 1.1 !default;
//$headings-color: inherit !default;
//
//$lead-font-size: 1.25rem !default;
//$lead-font-weight: 300 !default;
//
//$text-muted: $gray-light !default;
//
//$abbr-border-color: $gray-light !default;
//
//$blockquote-small-color: $gray-light !default;
//$blockquote-font-size: ($font-size-base * 1.25) !default;
//$blockquote-border-color: $gray-lighter !default;
//
//$hr-border-color: rgba(0,0,0,.1) !default;
//$hr-border-width: $border-width !default;