mirror of
https://github.com/tabler/tabler.git
synced 2026-08-10 05:12:28 +04:00
Merge pull request #25 from domProjects/master
JS code change with Google guide recommendations
This commit is contained in:
Paweł Kuna
GitHub
Vendored
+86
-76
@@ -1,97 +1,107 @@
|
||||
var hexToRgba = function(hex, opacity) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
var rgb = result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
/**
|
||||
*
|
||||
*/
|
||||
let hexToRgba = function(hex, opacity) {
|
||||
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
let rgb = result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
|
||||
return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', '+ opacity + ')';
|
||||
return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + opacity + ')';
|
||||
};
|
||||
|
||||
$(document).ready(function () {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
$(document).ready(function() {
|
||||
/** Constant div card */
|
||||
const DIV_CARD = 'div.card';
|
||||
|
||||
// Initialize tooltips
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
/** Initialize tooltips */
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
|
||||
// Initialize popovers
|
||||
$('[data-toggle="popover"]').popover({
|
||||
html: true
|
||||
});
|
||||
/** Initialize popovers */
|
||||
$('[data-toggle="popover"]').popover({
|
||||
html: true
|
||||
});
|
||||
|
||||
// Function for remove card
|
||||
$('[data-toggle="card-remove"]').on('click', function (e) {
|
||||
var $card = $(this).closest('div.card');
|
||||
$card.remove();
|
||||
/** Function for remove card */
|
||||
$('[data-toggle="card-remove"]').on('click', function(e) {
|
||||
let $card = $(this).closest(DIV_CARD);
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
$card.remove();
|
||||
|
||||
// Function for collapse card
|
||||
$('[data-toggle="card-collapse"]').on('click', function (e) {
|
||||
var $this = $(this),
|
||||
$card = $this.closest('div.card');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
$card.toggleClass('card-collapsed');
|
||||
/** Function for collapse card */
|
||||
$('[data-toggle="card-collapse"]').on('click', function(e) {
|
||||
let $card = $(this).closest(DIV_CARD);
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
$card.toggleClass('card-collapsed');
|
||||
|
||||
// Function for fullscreen card
|
||||
$('[data-toggle="card-fullscreen"]').on('click', function(e) {
|
||||
var $card = $(this).closest('div.card');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
|
||||
/** Function for fullscreen card */
|
||||
$('[data-toggle="card-fullscreen"]').on('click', function(e) {
|
||||
let $card = $(this).closest(DIV_CARD);
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
|
||||
|
||||
if($('[data-sparkline]').length) {
|
||||
var generateSparkline = function($elem, data, params) {
|
||||
$elem.sparkline(data, {
|
||||
type: $elem.attr('data-sparkline-type'),
|
||||
height: '100%',
|
||||
barColor: params.color,
|
||||
lineColor: params.color,
|
||||
fillColor: 'transparent',
|
||||
spotColor: params.color,
|
||||
spotRadius: 0,
|
||||
lineWidth: 2,
|
||||
highlightColor: hexToRgba(params.color, .6),
|
||||
highlightLineColor: '#666',
|
||||
defaultPixelsPerValue: 5
|
||||
});
|
||||
};
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
require(['sparkline'], function(){
|
||||
$('[data-sparkline]').each(function(){
|
||||
var $chart = $(this);
|
||||
/** */
|
||||
if ($('[data-sparkline]').length) {
|
||||
let generateSparkline = function($elem, data, params) {
|
||||
$elem.sparkline(data, {
|
||||
type: $elem.attr('data-sparkline-type'),
|
||||
height: '100%',
|
||||
barColor: params.color,
|
||||
lineColor: params.color,
|
||||
fillColor: 'transparent',
|
||||
spotColor: params.color,
|
||||
spotRadius: 0,
|
||||
lineWidth: 2,
|
||||
highlightColor: hexToRgba(params.color, .6),
|
||||
highlightLineColor: '#666',
|
||||
defaultPixelsPerValue: 5
|
||||
});
|
||||
};
|
||||
|
||||
generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
|
||||
color: $chart.attr('data-sparkline-color')
|
||||
});
|
||||
});
|
||||
require(['sparkline'], function() {
|
||||
$('[data-sparkline]').each(function() {
|
||||
let $chart = $(this);
|
||||
|
||||
generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
|
||||
color: $chart.attr('data-sparkline-color')
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** */
|
||||
if ($('.chart-circle').length) {
|
||||
require(['circle-progress'], function() {
|
||||
$('.chart-circle').each(function() {
|
||||
let $this = $(this);
|
||||
|
||||
if($('.chart-circle').length) {
|
||||
require(['circle-progress'], function () {
|
||||
$('.chart-circle').each(function () {
|
||||
var $this = $(this);
|
||||
$this.circleProgress({
|
||||
fill: {
|
||||
color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
|
||||
},
|
||||
size: $this.height(),
|
||||
startAngle: -Math.PI / 4 * 2,
|
||||
emptyFill: '#F4F4F4',
|
||||
lineCap: 'round'
|
||||
});
|
||||
});
|
||||
$this.circleProgress({
|
||||
fill: {
|
||||
color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
|
||||
},
|
||||
size: $this.height(),
|
||||
startAngle: -Math.PI / 4 * 2,
|
||||
emptyFill: '#F4F4F4',
|
||||
lineCap: 'round'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
Vendored
+33
-34
@@ -594,10 +594,10 @@
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Radios</label>
|
||||
<div class="form-label">Radios</div>
|
||||
<div class="custom-controls-stacked">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
|
||||
<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked>
|
||||
<div class="custom-control-label">Option 1</div>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
@@ -617,57 +617,56 @@
|
||||
<div class="form-group">
|
||||
<div class="form-label">Inline Radios</div>
|
||||
<div class="custom-controls-stacked">
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked>
|
||||
<span class="custom-control-label">Option 1</span>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
|
||||
<span class="custom-control-label">Option 2</span>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
|
||||
<span class="custom-control-label">Option 3</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Checkboxes</label>
|
||||
<div class="form-label">Checkboxes</div>
|
||||
<div class="custom-controls-stacked">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
|
||||
<label class="custom-control-label">Option 1</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked>
|
||||
<span class="custom-control-label">Option 1</span>
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
|
||||
<label class="custom-control-label">Option 2</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<span class="custom-control-label">Option 2</span>
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
|
||||
<label class="custom-control-label">Option Disabled</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<span class="custom-control-label">Option Disabled</span>
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
|
||||
<label class="custom-control-label">Option Disabled Checked</label>
|
||||
</div>
|
||||
<span class="custom-control-label">Option Disabled Checked</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-label">Inline Checkboxes</div>
|
||||
<div class="custom-controls-stacked">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
|
||||
checked="">
|
||||
<label class="custom-control-label">Option 1</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1" checked>
|
||||
<span class="custom-control-label">Option 1</span>
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
|
||||
<label class="custom-control-label">Option 2</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<span class="custom-control-label">Option 2</span>
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
|
||||
<label class="custom-control-label">Option 3</label>
|
||||
</div>
|
||||
<span class="custom-control-label">Option 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
||||
@@ -232,10 +232,10 @@
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Radios</label>
|
||||
<div class="form-label">Radios</div>
|
||||
<div class="custom-controls-stacked">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
|
||||
<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked>
|
||||
<div class="custom-control-label">Option 1</div>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
@@ -255,57 +255,57 @@
|
||||
<div class="form-group">
|
||||
<div class="form-label">Inline Radios</div>
|
||||
<div class="custom-controls-stacked">
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked>
|
||||
<span class="custom-control-label">Option 1</span>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
|
||||
<span class="custom-control-label">Option 2</span>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
|
||||
<span class="custom-control-label">Option 3</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Checkboxes</label>
|
||||
<div class="form-label">Checkboxes</div>
|
||||
<div class="custom-controls-stacked">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked>
|
||||
<label class="custom-control-label">Option 1</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
|
||||
<label class="custom-control-label">Option 2</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
|
||||
<label class="custom-control-label">Option Disabled</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
|
||||
<label class="custom-control-label">Option Disabled Checked</label>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-label">Inline Checkboxes</div>
|
||||
<div class="custom-controls-stacked">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
|
||||
checked="">
|
||||
checked>
|
||||
<label class="custom-control-label">Option 1</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
|
||||
<label class="custom-control-label">Option 2</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
</label>
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
|
||||
<label class="custom-control-label">Option 3</label>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
||||
+86
-76
@@ -1,97 +1,107 @@
|
||||
var hexToRgba = function(hex, opacity) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
var rgb = result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
/**
|
||||
*
|
||||
*/
|
||||
let hexToRgba = function(hex, opacity) {
|
||||
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
let rgb = result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
|
||||
return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', '+ opacity + ')';
|
||||
return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + opacity + ')';
|
||||
};
|
||||
|
||||
$(document).ready(function () {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
$(document).ready(function() {
|
||||
/** Constant div card */
|
||||
const DIV_CARD = 'div.card';
|
||||
|
||||
// Initialize tooltips
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
/** Initialize tooltips */
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
|
||||
// Initialize popovers
|
||||
$('[data-toggle="popover"]').popover({
|
||||
html: true
|
||||
});
|
||||
/** Initialize popovers */
|
||||
$('[data-toggle="popover"]').popover({
|
||||
html: true
|
||||
});
|
||||
|
||||
// Function for remove card
|
||||
$('[data-toggle="card-remove"]').on('click', function (e) {
|
||||
var $card = $(this).closest('div.card');
|
||||
$card.remove();
|
||||
/** Function for remove card */
|
||||
$('[data-toggle="card-remove"]').on('click', function(e) {
|
||||
let $card = $(this).closest(DIV_CARD);
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
$card.remove();
|
||||
|
||||
// Function for collapse card
|
||||
$('[data-toggle="card-collapse"]').on('click', function (e) {
|
||||
var $this = $(this),
|
||||
$card = $this.closest('div.card');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
$card.toggleClass('card-collapsed');
|
||||
/** Function for collapse card */
|
||||
$('[data-toggle="card-collapse"]').on('click', function(e) {
|
||||
let $card = $(this).closest(DIV_CARD);
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
$card.toggleClass('card-collapsed');
|
||||
|
||||
// Function for fullscreen card
|
||||
$('[data-toggle="card-fullscreen"]').on('click', function(e) {
|
||||
var $card = $(this).closest('div.card');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
|
||||
/** Function for fullscreen card */
|
||||
$('[data-toggle="card-fullscreen"]').on('click', function(e) {
|
||||
let $card = $(this).closest(DIV_CARD);
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
|
||||
|
||||
if($('[data-sparkline]').length) {
|
||||
var generateSparkline = function($elem, data, params) {
|
||||
$elem.sparkline(data, {
|
||||
type: $elem.attr('data-sparkline-type'),
|
||||
height: '100%',
|
||||
barColor: params.color,
|
||||
lineColor: params.color,
|
||||
fillColor: 'transparent',
|
||||
spotColor: params.color,
|
||||
spotRadius: 0,
|
||||
lineWidth: 2,
|
||||
highlightColor: hexToRgba(params.color, .6),
|
||||
highlightLineColor: '#666',
|
||||
defaultPixelsPerValue: 5
|
||||
});
|
||||
};
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
require(['sparkline'], function(){
|
||||
$('[data-sparkline]').each(function(){
|
||||
var $chart = $(this);
|
||||
/** */
|
||||
if ($('[data-sparkline]').length) {
|
||||
let generateSparkline = function($elem, data, params) {
|
||||
$elem.sparkline(data, {
|
||||
type: $elem.attr('data-sparkline-type'),
|
||||
height: '100%',
|
||||
barColor: params.color,
|
||||
lineColor: params.color,
|
||||
fillColor: 'transparent',
|
||||
spotColor: params.color,
|
||||
spotRadius: 0,
|
||||
lineWidth: 2,
|
||||
highlightColor: hexToRgba(params.color, .6),
|
||||
highlightLineColor: '#666',
|
||||
defaultPixelsPerValue: 5
|
||||
});
|
||||
};
|
||||
|
||||
generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
|
||||
color: $chart.attr('data-sparkline-color')
|
||||
});
|
||||
});
|
||||
require(['sparkline'], function() {
|
||||
$('[data-sparkline]').each(function() {
|
||||
let $chart = $(this);
|
||||
|
||||
generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
|
||||
color: $chart.attr('data-sparkline-color')
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** */
|
||||
if ($('.chart-circle').length) {
|
||||
require(['circle-progress'], function() {
|
||||
$('.chart-circle').each(function() {
|
||||
let $this = $(this);
|
||||
|
||||
if($('.chart-circle').length) {
|
||||
require(['circle-progress'], function () {
|
||||
$('.chart-circle').each(function () {
|
||||
var $this = $(this);
|
||||
$this.circleProgress({
|
||||
fill: {
|
||||
color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
|
||||
},
|
||||
size: $this.height(),
|
||||
startAngle: -Math.PI / 4 * 2,
|
||||
emptyFill: '#F4F4F4',
|
||||
lineCap: 'round'
|
||||
});
|
||||
});
|
||||
$this.circleProgress({
|
||||
fill: {
|
||||
color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
|
||||
},
|
||||
size: $this.height(),
|
||||
startAngle: -Math.PI / 4 * 2,
|
||||
emptyFill: '#F4F4F4',
|
||||
lineCap: 'round'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user