BSBMaterial added
This commit is contained in:
Yan
21
app/assets/javascripts/BSBMaterial/pages/cards/basic.js
Normal file
21
app/assets/javascripts/BSBMaterial/pages/cards/basic.js
Normal file
@@ -0,0 +1,21 @@
|
||||
$(function () {
|
||||
initLoading();
|
||||
});
|
||||
|
||||
//Init Loading
|
||||
function initLoading() {
|
||||
$('[data-toggle="cardloading"]').on('click', function () {
|
||||
var effect = $(this).data('loadingEffect');
|
||||
var $loading = $(this).parents('.card').waitMe({
|
||||
effect: effect,
|
||||
text: 'Loading...',
|
||||
bg: 'rgba(255,255,255,0.90)',
|
||||
color: '#555'
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
//Loading hide
|
||||
$loading.waitMe('hide');
|
||||
}, 3200);
|
||||
});
|
||||
}
|
||||
23
app/assets/javascripts/BSBMaterial/pages/cards/colored.js
Normal file
23
app/assets/javascripts/BSBMaterial/pages/cards/colored.js
Normal file
@@ -0,0 +1,23 @@
|
||||
$(function () {
|
||||
initLoading();
|
||||
});
|
||||
|
||||
//Init Loading
|
||||
function initLoading() {
|
||||
$('[data-toggle="cardloading"]').on('click', function () {
|
||||
var effect = $(this).data('loadingEffect');
|
||||
var color = $.AdminBSB.options.colors[$(this).data('loadingColor')];
|
||||
|
||||
var $loading = $(this).parents('.card').waitMe({
|
||||
effect: effect,
|
||||
text: 'Loading...',
|
||||
bg: 'rgba(255,255,255,0.90)',
|
||||
color: color
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
//Loading hide
|
||||
$loading.waitMe('hide');
|
||||
}, 3200);
|
||||
});
|
||||
}
|
||||
117
app/assets/javascripts/BSBMaterial/pages/charts/chartjs.js
Normal file
117
app/assets/javascripts/BSBMaterial/pages/charts/chartjs.js
Normal file
@@ -0,0 +1,117 @@
|
||||
$(function () {
|
||||
new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
|
||||
new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
|
||||
new Chart(document.getElementById("radar_chart").getContext("2d"), getChartJs('radar'));
|
||||
new Chart(document.getElementById("pie_chart").getContext("2d"), getChartJs('pie'));
|
||||
});
|
||||
|
||||
function getChartJs(type) {
|
||||
var config = null;
|
||||
|
||||
if (type === 'line') {
|
||||
config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
borderColor: 'rgba(0, 188, 212, 0.75)',
|
||||
backgroundColor: 'rgba(0, 188, 212, 0.3)',
|
||||
pointBorderColor: 'rgba(0, 188, 212, 0)',
|
||||
pointBackgroundColor: 'rgba(0, 188, 212, 0.9)',
|
||||
pointBorderWidth: 1
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
borderColor: 'rgba(233, 30, 99, 0.75)',
|
||||
backgroundColor: 'rgba(233, 30, 99, 0.3)',
|
||||
pointBorderColor: 'rgba(233, 30, 99, 0)',
|
||||
pointBackgroundColor: 'rgba(233, 30, 99, 0.9)',
|
||||
pointBorderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (type === 'bar') {
|
||||
config = {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: 'rgba(0, 188, 212, 0.8)'
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
backgroundColor: 'rgba(233, 30, 99, 0.8)'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (type === 'radar') {
|
||||
config = {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [65, 25, 90, 81, 56, 55, 40],
|
||||
borderColor: 'rgba(0, 188, 212, 0.8)',
|
||||
backgroundColor: 'rgba(0, 188, 212, 0.5)',
|
||||
pointBorderColor: 'rgba(0, 188, 212, 0)',
|
||||
pointBackgroundColor: 'rgba(0, 188, 212, 0.8)',
|
||||
pointBorderWidth: 1
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
data: [72, 48, 40, 19, 96, 27, 100],
|
||||
borderColor: 'rgba(233, 30, 99, 0.8)',
|
||||
backgroundColor: 'rgba(233, 30, 99, 0.5)',
|
||||
pointBorderColor: 'rgba(233, 30, 99, 0)',
|
||||
pointBackgroundColor: 'rgba(233, 30, 99, 0.8)',
|
||||
pointBorderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (type === 'pie') {
|
||||
config = {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [225, 50, 100, 40],
|
||||
backgroundColor: [
|
||||
"rgb(233, 30, 99)",
|
||||
"rgb(255, 193, 7)",
|
||||
"rgb(0, 188, 212)",
|
||||
"rgb(139, 195, 74)"
|
||||
],
|
||||
}],
|
||||
labels: [
|
||||
"Pink",
|
||||
"Amber",
|
||||
"Cyan",
|
||||
"Light Green"
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
}
|
||||
return config;
|
||||
}
|
||||
251
app/assets/javascripts/BSBMaterial/pages/charts/flot.js
Normal file
251
app/assets/javascripts/BSBMaterial/pages/charts/flot.js
Normal file
File diff suppressed because one or more lines are too long
46
app/assets/javascripts/BSBMaterial/pages/charts/jquery-knob.js
vendored
Normal file
46
app/assets/javascripts/BSBMaterial/pages/charts/jquery-knob.js
vendored
Normal file
@@ -0,0 +1,46 @@
|
||||
$(function () {
|
||||
$('.knob').knob({
|
||||
draw: function () {
|
||||
// "tron" case
|
||||
if (this.$.data('skin') == 'tron') {
|
||||
|
||||
var a = this.angle(this.cv) // Angle
|
||||
, sa = this.startAngle // Previous start angle
|
||||
, sat = this.startAngle // Start angle
|
||||
, ea // Previous end angle
|
||||
, eat = sat + a // End angle
|
||||
, r = true;
|
||||
|
||||
this.g.lineWidth = this.lineWidth;
|
||||
|
||||
this.o.cursor
|
||||
&& (sat = eat - 0.3)
|
||||
&& (eat = eat + 0.3);
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
ea = this.startAngle + this.angle(this.value);
|
||||
this.o.cursor
|
||||
&& (sa = ea - 0.3)
|
||||
&& (ea = ea + 0.3);
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.previousColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
|
||||
this.g.stroke();
|
||||
}
|
||||
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
|
||||
this.g.stroke();
|
||||
|
||||
this.g.lineWidth = 2;
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.o.fgColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
|
||||
this.g.stroke();
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
168
app/assets/javascripts/BSBMaterial/pages/charts/morris.js
Normal file
168
app/assets/javascripts/BSBMaterial/pages/charts/morris.js
Normal file
@@ -0,0 +1,168 @@
|
||||
$(function () {
|
||||
getMorris('line', 'line_chart');
|
||||
getMorris('bar', 'bar_chart');
|
||||
getMorris('area', 'area_chart');
|
||||
getMorris('donut', 'donut_chart');
|
||||
});
|
||||
|
||||
|
||||
function getMorris(type, element) {
|
||||
if (type === 'line') {
|
||||
Morris.Line({
|
||||
element: element,
|
||||
data: [{
|
||||
'period': '2011 Q3',
|
||||
'licensed': 3407,
|
||||
'sorned': 660
|
||||
}, {
|
||||
'period': '2011 Q2',
|
||||
'licensed': 3351,
|
||||
'sorned': 629
|
||||
}, {
|
||||
'period': '2011 Q1',
|
||||
'licensed': 3269,
|
||||
'sorned': 618
|
||||
}, {
|
||||
'period': '2010 Q4',
|
||||
'licensed': 3246,
|
||||
'sorned': 661
|
||||
}, {
|
||||
'period': '2009 Q4',
|
||||
'licensed': 3171,
|
||||
'sorned': 676
|
||||
}, {
|
||||
'period': '2008 Q4',
|
||||
'licensed': 3155,
|
||||
'sorned': 681
|
||||
}, {
|
||||
'period': '2007 Q4',
|
||||
'licensed': 3226,
|
||||
'sorned': 620
|
||||
}, {
|
||||
'period': '2006 Q4',
|
||||
'licensed': 3245,
|
||||
'sorned': null
|
||||
}, {
|
||||
'period': '2005 Q4',
|
||||
'licensed': 3289,
|
||||
'sorned': null
|
||||
}],
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'Off the road'],
|
||||
lineColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)'],
|
||||
lineWidth: 3
|
||||
});
|
||||
} else if (type === 'bar') {
|
||||
Morris.Bar({
|
||||
element: element,
|
||||
data: [{
|
||||
x: '2011 Q1',
|
||||
y: 3,
|
||||
z: 2,
|
||||
a: 3
|
||||
}, {
|
||||
x: '2011 Q2',
|
||||
y: 2,
|
||||
z: null,
|
||||
a: 1
|
||||
}, {
|
||||
x: '2011 Q3',
|
||||
y: 0,
|
||||
z: 2,
|
||||
a: 4
|
||||
}, {
|
||||
x: '2011 Q4',
|
||||
y: 2,
|
||||
z: 4,
|
||||
a: 3
|
||||
}],
|
||||
xkey: 'x',
|
||||
ykeys: ['y', 'z', 'a'],
|
||||
labels: ['Y', 'Z', 'A'],
|
||||
barColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(0, 150, 136)'],
|
||||
});
|
||||
} else if (type === 'area') {
|
||||
Morris.Area({
|
||||
element: element,
|
||||
data: [{
|
||||
period: '2010 Q1',
|
||||
iphone: 2666,
|
||||
ipad: null,
|
||||
itouch: 2647
|
||||
}, {
|
||||
period: '2010 Q2',
|
||||
iphone: 2778,
|
||||
ipad: 2294,
|
||||
itouch: 2441
|
||||
}, {
|
||||
period: '2010 Q3',
|
||||
iphone: 4912,
|
||||
ipad: 1969,
|
||||
itouch: 2501
|
||||
}, {
|
||||
period: '2010 Q4',
|
||||
iphone: 3767,
|
||||
ipad: 3597,
|
||||
itouch: 5689
|
||||
}, {
|
||||
period: '2011 Q1',
|
||||
iphone: 6810,
|
||||
ipad: 1914,
|
||||
itouch: 2293
|
||||
}, {
|
||||
period: '2011 Q2',
|
||||
iphone: 5670,
|
||||
ipad: 4293,
|
||||
itouch: 1881
|
||||
}, {
|
||||
period: '2011 Q3',
|
||||
iphone: 4820,
|
||||
ipad: 3795,
|
||||
itouch: 1588
|
||||
}, {
|
||||
period: '2011 Q4',
|
||||
iphone: 15073,
|
||||
ipad: 5967,
|
||||
itouch: 5175
|
||||
}, {
|
||||
period: '2012 Q1',
|
||||
iphone: 10687,
|
||||
ipad: 4460,
|
||||
itouch: 2028
|
||||
}, {
|
||||
period: '2012 Q2',
|
||||
iphone: 8432,
|
||||
ipad: 5713,
|
||||
itouch: 1791
|
||||
}],
|
||||
xkey: 'period',
|
||||
ykeys: ['iphone', 'ipad', 'itouch'],
|
||||
labels: ['iPhone', 'iPad', 'iPod Touch'],
|
||||
pointSize: 2,
|
||||
hideHover: 'auto',
|
||||
lineColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(0, 150, 136)']
|
||||
});
|
||||
} else if (type === 'donut') {
|
||||
Morris.Donut({
|
||||
element: element,
|
||||
data: [{
|
||||
label: 'Jam',
|
||||
value: 25
|
||||
}, {
|
||||
label: 'Frosted',
|
||||
value: 40
|
||||
}, {
|
||||
label: 'Custard',
|
||||
value: 25
|
||||
}, {
|
||||
label: 'Sugar',
|
||||
value: 10
|
||||
}],
|
||||
colors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)', 'rgb(0, 150, 136)'],
|
||||
formatter: function (y) {
|
||||
return y + '%'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
156
app/assets/javascripts/BSBMaterial/pages/charts/sparkline.js
Normal file
156
app/assets/javascripts/BSBMaterial/pages/charts/sparkline.js
Normal file
@@ -0,0 +1,156 @@
|
||||
$(function () {
|
||||
$(".sparkline").each(function () {
|
||||
var $this = $(this);
|
||||
$this.sparkline('html', $this.data());
|
||||
});
|
||||
|
||||
$('.sparkline-pie').sparkline('html', {
|
||||
type: 'pie',
|
||||
offset: 90,
|
||||
width: '150px',
|
||||
height: '150px',
|
||||
sliceColors: ['#E91E63', '#00BCD4', '#FFC107']
|
||||
})
|
||||
|
||||
drawDocSparklines();
|
||||
drawMouseSpeedDemo();
|
||||
});
|
||||
|
||||
//Taken from http://omnipotent.net/jquery.sparkline ================
|
||||
function drawDocSparklines() {
|
||||
|
||||
// Bar + line composite charts
|
||||
$('#compositebar').sparkline('html', { type: 'bar', barColor: '#aaf' });
|
||||
$('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
|
||||
{ composite: true, fillColor: false, lineColor: 'red' });
|
||||
|
||||
|
||||
// Line charts taking their values from the tag
|
||||
$('.sparkline-1').sparkline();
|
||||
|
||||
// Larger line charts for the docs
|
||||
$('.largeline').sparkline('html',
|
||||
{ type: 'line', height: '2.5em', width: '4em' });
|
||||
|
||||
// Customized line chart
|
||||
$('#linecustom').sparkline('html',
|
||||
{
|
||||
height: '1.5em', width: '8em', lineColor: '#f00', fillColor: '#ffa',
|
||||
minSpotColor: false, maxSpotColor: false, spotColor: '#77f', spotRadius: 3
|
||||
});
|
||||
|
||||
// Bar charts using inline values
|
||||
$('.sparkbar').sparkline('html', { type: 'bar' });
|
||||
|
||||
$('.barformat').sparkline([1, 3, 5, 3, 8], {
|
||||
type: 'bar',
|
||||
tooltipFormat: '{{value:levels}} - {{value}}',
|
||||
tooltipValueLookups: {
|
||||
levels: $.range_map({ ':2': 'Low', '3:6': 'Medium', '7:': 'High' })
|
||||
}
|
||||
});
|
||||
|
||||
// Tri-state charts using inline values
|
||||
$('.sparktristate').sparkline('html', { type: 'tristate' });
|
||||
$('.sparktristatecols').sparkline('html',
|
||||
{ type: 'tristate', colorMap: { '-2': '#fa7', '2': '#44f' } });
|
||||
|
||||
// Composite line charts, the second using values supplied via javascript
|
||||
$('#compositeline').sparkline('html', { fillColor: false, changeRangeMin: 0, chartRangeMax: 10 });
|
||||
$('#compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
|
||||
{ composite: true, fillColor: false, lineColor: 'red', changeRangeMin: 0, chartRangeMax: 10 });
|
||||
|
||||
// Line charts with normal range marker
|
||||
$('#normalline').sparkline('html',
|
||||
{ fillColor: false, normalRangeMin: -1, normalRangeMax: 8 });
|
||||
$('#normalExample').sparkline('html',
|
||||
{ fillColor: false, normalRangeMin: 80, normalRangeMax: 95, normalRangeColor: '#4f4' });
|
||||
|
||||
// Discrete charts
|
||||
$('.discrete1').sparkline('html',
|
||||
{ type: 'discrete', lineColor: 'blue', xwidth: 18 });
|
||||
$('#discrete2').sparkline('html',
|
||||
{ type: 'discrete', lineColor: 'blue', thresholdColor: 'red', thresholdValue: 4 });
|
||||
|
||||
// Bullet charts
|
||||
$('.sparkbullet').sparkline('html', { type: 'bullet' });
|
||||
|
||||
// Pie charts
|
||||
$('.sparkpie').sparkline('html', { type: 'pie', height: '1.0em' });
|
||||
|
||||
// Box plots
|
||||
$('.sparkboxplot').sparkline('html', { type: 'box' });
|
||||
$('.sparkboxplotraw').sparkline([1, 3, 5, 8, 10, 15, 18],
|
||||
{ type: 'box', raw: true, showOutliers: true, target: 6 });
|
||||
|
||||
// Box plot with specific field order
|
||||
$('.boxfieldorder').sparkline('html', {
|
||||
type: 'box',
|
||||
tooltipFormatFieldlist: ['med', 'lq', 'uq'],
|
||||
tooltipFormatFieldlistKey: 'field'
|
||||
});
|
||||
|
||||
// click event demo sparkline
|
||||
$('.clickdemo').sparkline();
|
||||
$('.clickdemo').bind('sparklineClick', function (ev) {
|
||||
var sparkline = ev.sparklines[0],
|
||||
region = sparkline.getCurrentRegionFields();
|
||||
value = region.y;
|
||||
alert("Clicked on x=" + region.x + " y=" + region.y);
|
||||
});
|
||||
|
||||
// mouseover event demo sparkline
|
||||
$('.mouseoverdemo').sparkline();
|
||||
$('.mouseoverdemo').bind('sparklineRegionChange', function (ev) {
|
||||
var sparkline = ev.sparklines[0],
|
||||
region = sparkline.getCurrentRegionFields();
|
||||
value = region.y;
|
||||
$('.mouseoverregion').text("x=" + region.x + " y=" + region.y);
|
||||
}).bind('mouseleave', function () {
|
||||
$('.mouseoverregion').text('');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
** Draw the little mouse speed animated graph
|
||||
** This just attaches a handler to the mousemove event to see
|
||||
** (roughly) how far the mouse has moved
|
||||
** and then updates the display a couple of times a second via
|
||||
** setTimeout()
|
||||
**/
|
||||
function drawMouseSpeedDemo() {
|
||||
var mrefreshinterval = 500; // update display every 500ms
|
||||
var lastmousex = -1;
|
||||
var lastmousey = -1;
|
||||
var lastmousetime;
|
||||
var mousetravel = 0;
|
||||
var mpoints = [];
|
||||
var mpoints_max = 30;
|
||||
$('html').mousemove(function (e) {
|
||||
var mousex = e.pageX;
|
||||
var mousey = e.pageY;
|
||||
if (lastmousex > -1) {
|
||||
mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey));
|
||||
}
|
||||
lastmousex = mousex;
|
||||
lastmousey = mousey;
|
||||
});
|
||||
var mdraw = function () {
|
||||
var md = new Date();
|
||||
var timenow = md.getTime();
|
||||
if (lastmousetime && lastmousetime != timenow) {
|
||||
var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
|
||||
mpoints.push(pps);
|
||||
if (mpoints.length > mpoints_max)
|
||||
mpoints.splice(0, 1);
|
||||
mousetravel = 0;
|
||||
$('#mousespeed').sparkline(mpoints, { width: mpoints.length * 2, tooltipSuffix: ' pixels per second' });
|
||||
}
|
||||
lastmousetime = timenow;
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
};
|
||||
// We could use setInterval instead, but I prefer to do it this way
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
}
|
||||
|
||||
//=================================================================
|
||||
@@ -0,0 +1,14 @@
|
||||
$(function () {
|
||||
$('#forgot_password').validate({
|
||||
highlight: function (input) {
|
||||
console.log(input);
|
||||
$(input).parents('.form-line').addClass('error');
|
||||
},
|
||||
unhighlight: function (input) {
|
||||
$(input).parents('.form-line').removeClass('error');
|
||||
},
|
||||
errorPlacement: function (error, element) {
|
||||
$(element).parents('.input-group').append(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
14
app/assets/javascripts/BSBMaterial/pages/examples/sign-in.js
Normal file
14
app/assets/javascripts/BSBMaterial/pages/examples/sign-in.js
Normal file
@@ -0,0 +1,14 @@
|
||||
$(function () {
|
||||
$('#sign_in').validate({
|
||||
highlight: function (input) {
|
||||
console.log(input);
|
||||
$(input).parents('.form-line').addClass('error');
|
||||
},
|
||||
unhighlight: function (input) {
|
||||
$(input).parents('.form-line').removeClass('error');
|
||||
},
|
||||
errorPlacement: function (error, element) {
|
||||
$(element).parents('.input-group').append(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
23
app/assets/javascripts/BSBMaterial/pages/examples/sign-up.js
Normal file
23
app/assets/javascripts/BSBMaterial/pages/examples/sign-up.js
Normal file
@@ -0,0 +1,23 @@
|
||||
$(function () {
|
||||
$('#sign_up').validate({
|
||||
rules: {
|
||||
'terms': {
|
||||
required: true
|
||||
},
|
||||
'confirm': {
|
||||
equalTo: '[name="password"]'
|
||||
}
|
||||
},
|
||||
highlight: function (input) {
|
||||
console.log(input);
|
||||
$(input).parents('.form-line').addClass('error');
|
||||
},
|
||||
unhighlight: function (input) {
|
||||
$(input).parents('.form-line').removeClass('error');
|
||||
},
|
||||
errorPlacement: function (error, element) {
|
||||
$(element).parents('.input-group').append(error);
|
||||
$(element).parents('.form-group').append(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,85 @@
|
||||
$(function () {
|
||||
$('.colorpicker').colorpicker();
|
||||
|
||||
//Dropzone
|
||||
Dropzone.options.frmFileUpload = {
|
||||
paramName: "file",
|
||||
maxFilesize: 2
|
||||
};
|
||||
|
||||
//Masked Input ============================================================================================================================
|
||||
var $demoMaskedInput = $('.demo-masked-input');
|
||||
|
||||
//Date
|
||||
$demoMaskedInput.find('.date').inputmask('dd/mm/yyyy', { placeholder: '__/__/____' });
|
||||
|
||||
//Time
|
||||
$demoMaskedInput.find('.time12').inputmask('hh:mm t', { placeholder: '__:__ _m', alias: 'time12', hourFormat: '12' });
|
||||
$demoMaskedInput.find('.time24').inputmask('hh:mm', { placeholder: '__:__ _m', alias: 'time24', hourFormat: '24' });
|
||||
|
||||
//Date Time
|
||||
$demoMaskedInput.find('.datetime').inputmask('d/m/y h:s', { placeholder: '__/__/____ __:__', alias: "datetime", hourFormat: '24' });
|
||||
|
||||
//Mobile Phone Number
|
||||
$demoMaskedInput.find('.mobile-phone-number').inputmask('+99 (999) 999-99-99', { placeholder: '+__ (___) ___-__-__' });
|
||||
//Phone Number
|
||||
$demoMaskedInput.find('.phone-number').inputmask('+99 (999) 999-99-99', { placeholder: '+__ (___) ___-__-__' });
|
||||
|
||||
//Dollar Money
|
||||
$demoMaskedInput.find('.money-dollar').inputmask('99,99 $', { placeholder: '__,__ $' });
|
||||
//Euro Money
|
||||
$demoMaskedInput.find('.money-euro').inputmask('99,99 €', { placeholder: '__,__ €' });
|
||||
|
||||
//IP Address
|
||||
$demoMaskedInput.find('.ip').inputmask('999.999.999.999', { placeholder: '___.___.___.___' });
|
||||
|
||||
//Credit Card
|
||||
$demoMaskedInput.find('.credit-card').inputmask('9999 9999 9999 9999', { placeholder: '____ ____ ____ ____' });
|
||||
|
||||
//Email
|
||||
$demoMaskedInput.find('.email').inputmask({ alias: "email" });
|
||||
|
||||
//Serial Key
|
||||
$demoMaskedInput.find('.key').inputmask('****-****-****-****', { placeholder: '____-____-____-____' });
|
||||
//===========================================================================================================================================
|
||||
|
||||
//Multi-select
|
||||
$('#optgroup').multiSelect({ selectableOptgroup: true });
|
||||
|
||||
//noUISlider
|
||||
var sliderBasic = document.getElementById('nouislider_basic_example');
|
||||
noUiSlider.create(sliderBasic, {
|
||||
start: [30],
|
||||
connect: 'lower',
|
||||
step: 1,
|
||||
range: {
|
||||
'min': [0],
|
||||
'max': [100]
|
||||
}
|
||||
});
|
||||
getNoUISliderValue(sliderBasic, true);
|
||||
|
||||
//Range Example
|
||||
var rangeSlider = document.getElementById('nouislider_range_example');
|
||||
noUiSlider.create(rangeSlider, {
|
||||
start: [32500, 62500],
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 25000,
|
||||
'max': 100000
|
||||
}
|
||||
});
|
||||
getNoUISliderValue(rangeSlider, false);
|
||||
});
|
||||
|
||||
//Get noUISlider Value and write on
|
||||
function getNoUISliderValue(slider, percentage) {
|
||||
slider.noUiSlider.on('update', function () {
|
||||
var val = slider.noUiSlider.get();
|
||||
if (percentage) {
|
||||
val = parseInt(val);
|
||||
val += '%';
|
||||
}
|
||||
$(slider).parent().find('span.js-nouislider-value').text(val);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
$(function () {
|
||||
//Textare auto growth
|
||||
autosize($('textarea.auto-growth'));
|
||||
|
||||
//Datetimepicker plugin
|
||||
$('.datetimepicker').bootstrapMaterialDatePicker({
|
||||
format: 'dddd DD MMMM YYYY - HH:mm',
|
||||
clearButton: true,
|
||||
weekStart: 1
|
||||
});
|
||||
|
||||
$('.datepicker').bootstrapMaterialDatePicker({
|
||||
format: 'dddd DD MMMM YYYY',
|
||||
clearButton: true,
|
||||
weekStart: 1,
|
||||
time: false
|
||||
});
|
||||
|
||||
$('.timepicker').bootstrapMaterialDatePicker({
|
||||
format: 'HH:mm',
|
||||
clearButton: true,
|
||||
date: false
|
||||
});
|
||||
});
|
||||
23
app/assets/javascripts/BSBMaterial/pages/forms/editors.js
Normal file
23
app/assets/javascripts/BSBMaterial/pages/forms/editors.js
Normal file
@@ -0,0 +1,23 @@
|
||||
$(function () {
|
||||
//CKEditor
|
||||
CKEDITOR.replace('ckeditor');
|
||||
CKEDITOR.config.height = 300;
|
||||
|
||||
//TinyMCE
|
||||
tinymce.init({
|
||||
selector: "textarea#tinymce",
|
||||
theme: "modern",
|
||||
height: 300,
|
||||
plugins: [
|
||||
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
|
||||
'searchreplace wordcount visualblocks visualchars code fullscreen',
|
||||
'insertdatetime media nonbreaking save table contextmenu directionality',
|
||||
'emoticons template paste textcolor colorpicker textpattern imagetools'
|
||||
],
|
||||
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
|
||||
toolbar2: 'print preview media | forecolor backcolor emoticons',
|
||||
image_advtab: true
|
||||
});
|
||||
tinymce.suffix = ".min";
|
||||
tinyMCE.baseURL = '../../plugins/tinymce';
|
||||
});
|
||||
@@ -0,0 +1,58 @@
|
||||
$(function () {
|
||||
$('#form_validation').validate({
|
||||
rules: {
|
||||
'checkbox': {
|
||||
required: true
|
||||
},
|
||||
'gender': {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
highlight: function (input) {
|
||||
$(input).parents('.form-line').addClass('error');
|
||||
},
|
||||
unhighlight: function (input) {
|
||||
$(input).parents('.form-line').removeClass('error');
|
||||
},
|
||||
errorPlacement: function (error, element) {
|
||||
$(element).parents('.form-group').append(error);
|
||||
}
|
||||
});
|
||||
|
||||
//Advanced Form Validation
|
||||
$('#form_advanced_validation').validate({
|
||||
rules: {
|
||||
'date': {
|
||||
customdate: true
|
||||
},
|
||||
'creditcard': {
|
||||
creditcard: true
|
||||
}
|
||||
},
|
||||
highlight: function (input) {
|
||||
$(input).parents('.form-line').addClass('error');
|
||||
},
|
||||
unhighlight: function (input) {
|
||||
$(input).parents('.form-line').removeClass('error');
|
||||
},
|
||||
errorPlacement: function (error, element) {
|
||||
$(element).parents('.form-group').append(error);
|
||||
}
|
||||
});
|
||||
|
||||
//Custom Validations ===============================================================================
|
||||
//Date
|
||||
$.validator.addMethod('customdate', function (value, element) {
|
||||
return value.match(/^\d\d\d\d?-\d\d?-\d\d$/);
|
||||
},
|
||||
'Please enter a date in the format YYYY-MM-DD.'
|
||||
);
|
||||
|
||||
//Credit card
|
||||
$.validator.addMethod('creditcard', function (value, element) {
|
||||
return value.match(/^\d\d\d\d?-\d\d\d\d?-\d\d\d\d?-\d\d\d\d$/);
|
||||
},
|
||||
'Please enter a credit card in the format XXXX-XXXX-XXXX-XXXX.'
|
||||
);
|
||||
//==================================================================================================
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
$(function () {
|
||||
//Horizontal form basic
|
||||
$('#wizard_horizontal').steps({
|
||||
headerTag: 'h2',
|
||||
bodyTag: 'section',
|
||||
transitionEffect: 'slideLeft',
|
||||
onInit: function (event, currentIndex) {
|
||||
setButtonWavesEffect(event);
|
||||
},
|
||||
onStepChanged: function (event, currentIndex, priorIndex) {
|
||||
setButtonWavesEffect(event);
|
||||
}
|
||||
});
|
||||
|
||||
//Vertical form basic
|
||||
$('#wizard_vertical').steps({
|
||||
headerTag: 'h2',
|
||||
bodyTag: 'section',
|
||||
transitionEffect: 'slideLeft',
|
||||
stepsOrientation: 'vertical',
|
||||
onInit: function (event, currentIndex) {
|
||||
setButtonWavesEffect(event);
|
||||
},
|
||||
onStepChanged: function (event, currentIndex, priorIndex) {
|
||||
setButtonWavesEffect(event);
|
||||
}
|
||||
});
|
||||
|
||||
//Advanced form with validation
|
||||
var form = $('#wizard_with_validation').show();
|
||||
form.steps({
|
||||
headerTag: 'h3',
|
||||
bodyTag: 'fieldset',
|
||||
transitionEffect: 'slideLeft',
|
||||
onInit: function (event, currentIndex) {
|
||||
$.AdminBSB.input.activate();
|
||||
|
||||
//Set tab width
|
||||
var $tab = $(event.currentTarget).find('ul[role="tablist"] li');
|
||||
var tabCount = $tab.length;
|
||||
$tab.css('width', (100 / tabCount) + '%');
|
||||
|
||||
//set button waves effect
|
||||
setButtonWavesEffect(event);
|
||||
},
|
||||
onStepChanging: function (event, currentIndex, newIndex) {
|
||||
if (currentIndex > newIndex) { return true; }
|
||||
|
||||
if (currentIndex < newIndex) {
|
||||
form.find('.body:eq(' + newIndex + ') label.error').remove();
|
||||
form.find('.body:eq(' + newIndex + ') .error').removeClass('error');
|
||||
}
|
||||
|
||||
form.validate().settings.ignore = ':disabled,:hidden';
|
||||
return form.valid();
|
||||
},
|
||||
onStepChanged: function (event, currentIndex, priorIndex) {
|
||||
setButtonWavesEffect(event);
|
||||
},
|
||||
onFinishing: function (event, currentIndex) {
|
||||
form.validate().settings.ignore = ':disabled';
|
||||
return form.valid();
|
||||
},
|
||||
onFinished: function (event, currentIndex) {
|
||||
swal("Good job!", "Submitted!", "success");
|
||||
}
|
||||
});
|
||||
|
||||
form.validate({
|
||||
highlight: function (input) {
|
||||
$(input).parents('.form-line').addClass('error');
|
||||
},
|
||||
unhighlight: function (input) {
|
||||
$(input).parents('.form-line').removeClass('error');
|
||||
},
|
||||
errorPlacement: function (error, element) {
|
||||
$(element).parents('.form-group').append(error);
|
||||
},
|
||||
rules: {
|
||||
'confirm': {
|
||||
equalTo: '#password'
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function setButtonWavesEffect(event) {
|
||||
$(event.currentTarget).find('[role="menu"] li a').removeClass('waves-effect');
|
||||
$(event.currentTarget).find('[role="menu"] li:not(.disabled) a').addClass('waves-effect');
|
||||
}
|
||||
115
app/assets/javascripts/BSBMaterial/pages/index.js
Normal file
115
app/assets/javascripts/BSBMaterial/pages/index.js
Normal file
@@ -0,0 +1,115 @@
|
||||
$(function () {
|
||||
//Widgets count
|
||||
$('.count-to').countTo();
|
||||
|
||||
//Sales count to
|
||||
$('.sales-count-to').countTo({
|
||||
formatter: function (value, options) {
|
||||
return '$' + value.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, ' ').replace('.', ',');
|
||||
}
|
||||
});
|
||||
|
||||
initRealTimeChart();
|
||||
initDonutChart();
|
||||
initSparkline();
|
||||
});
|
||||
|
||||
var realtime = 'on';
|
||||
function initRealTimeChart() {
|
||||
//Real time ==========================================================================================
|
||||
var plot = $.plot('#real_time_chart', [getRandomData()], {
|
||||
series: {
|
||||
shadowSize: 0,
|
||||
color: 'rgb(0, 188, 212)'
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#f3f3f3',
|
||||
borderWidth: 1,
|
||||
tickColor: '#f3f3f3'
|
||||
},
|
||||
lines: {
|
||||
fill: true
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
xaxis: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
function updateRealTime() {
|
||||
plot.setData([getRandomData()]);
|
||||
plot.draw();
|
||||
|
||||
var timeout;
|
||||
if (realtime === 'on') {
|
||||
timeout = setTimeout(updateRealTime, 320);
|
||||
} else {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
}
|
||||
|
||||
updateRealTime();
|
||||
|
||||
$('#realtime').on('change', function () {
|
||||
realtime = this.checked ? 'on' : 'off';
|
||||
updateRealTime();
|
||||
});
|
||||
//====================================================================================================
|
||||
}
|
||||
|
||||
function initSparkline() {
|
||||
$(".sparkline").each(function () {
|
||||
var $this = $(this);
|
||||
$this.sparkline('html', $this.data());
|
||||
});
|
||||
}
|
||||
|
||||
function initDonutChart() {
|
||||
Morris.Donut({
|
||||
element: 'donut_chart',
|
||||
data: [{
|
||||
label: 'Chrome',
|
||||
value: 37
|
||||
}, {
|
||||
label: 'Firefox',
|
||||
value: 30
|
||||
}, {
|
||||
label: 'Safari',
|
||||
value: 18
|
||||
}, {
|
||||
label: 'Opera',
|
||||
value: 12
|
||||
},
|
||||
{
|
||||
label: 'Other',
|
||||
value: 3
|
||||
}],
|
||||
colors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)', 'rgb(0, 150, 136)', 'rgb(96, 125, 139)'],
|
||||
formatter: function (y) {
|
||||
return y + '%'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var data = [], totalPoints = 110;
|
||||
function getRandomData() {
|
||||
if (data.length > 0) data = data.slice(1);
|
||||
|
||||
while (data.length < totalPoints) {
|
||||
var prev = data.length > 0 ? data[data.length - 1] : 50, y = prev + Math.random() * 10 - 5;
|
||||
if (y < 0) { y = 0; } else if (y > 100) { y = 100; }
|
||||
|
||||
data.push(y);
|
||||
}
|
||||
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; ++i) {
|
||||
res.push([i, data[i]]);
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
98
app/assets/javascripts/BSBMaterial/pages/maps/google.js
Normal file
98
app/assets/javascripts/BSBMaterial/pages/maps/google.js
Normal file
@@ -0,0 +1,98 @@
|
||||
$(function () {
|
||||
//Basic Map
|
||||
var basicMap = new GMaps({
|
||||
el: '#gmap_basic_example',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
|
||||
//Markers
|
||||
var markers = new GMaps({
|
||||
div: '#gmap_markers',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
markers.addMarker({
|
||||
lat: -12.043333,
|
||||
lng: -77.03,
|
||||
title: 'Lima',
|
||||
details: {
|
||||
database_id: 42,
|
||||
author: 'HPNeo'
|
||||
},
|
||||
click: function (e) {
|
||||
if (console.log)
|
||||
console.log(e);
|
||||
alert('You clicked in this marker');
|
||||
}
|
||||
});
|
||||
markers.addMarker({
|
||||
lat: -12.042,
|
||||
lng: -77.028333,
|
||||
title: 'Marker with InfoWindow',
|
||||
infoWindow: {
|
||||
content: '<p>HTML Content</p>'
|
||||
}
|
||||
});
|
||||
|
||||
//Static maps
|
||||
var staticMap = GMaps.staticMapURL({
|
||||
size: [$('#gmap_static_map').width(), 400],
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
|
||||
$('<img/>').attr('src', staticMap).appendTo('#gmap_static_map');
|
||||
|
||||
//Static maps with markers
|
||||
var staticMapWithMarkers = GMaps.staticMapURL({
|
||||
size: [$('#gmap_static_map_with_markers').width(), 400],
|
||||
lat: -12.043333,
|
||||
lng: -77.028333,
|
||||
markers: [
|
||||
{ lat: -12.043333, lng: -77.028333 },
|
||||
{
|
||||
lat: -12.045333, lng: -77.034,
|
||||
size: 'small'
|
||||
},
|
||||
{
|
||||
lat: -12.045633, lng: -77.022,
|
||||
color: 'blue'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$('<img/>').attr('src', staticMapWithMarkers).appendTo('#gmap_static_map_with_markers');
|
||||
|
||||
//Static maps with polyline
|
||||
var path = [
|
||||
[-12.040397656836609, -77.03373871559225],
|
||||
[-12.040248585302038, -77.03993927003302],
|
||||
[-12.050047116528843, -77.02448169303511],
|
||||
[-12.044804866577001, -77.02154422636042],
|
||||
[-12.040397656836609, -77.03373871559225],
|
||||
];
|
||||
|
||||
var staticMapPolyline = GMaps.staticMapURL({
|
||||
size: [$('#gmap_static_map_polyline').width(), 400],
|
||||
lat: -12.043333,
|
||||
lng: -77.028333,
|
||||
|
||||
polyline: {
|
||||
path: path,
|
||||
strokeColor: '#131540',
|
||||
strokeOpacity: 0.6,
|
||||
strokeWeight: 6
|
||||
// fillColor: '#ffaf2ecc'
|
||||
}
|
||||
});
|
||||
|
||||
$('<img/>').attr('src', staticMapPolyline).appendTo('#gmap_static_map_polyline');
|
||||
|
||||
//Panorama
|
||||
var panorama = GMaps.createPanorama({
|
||||
el: '#gmap_panorama',
|
||||
lat: 42.3455,
|
||||
lng: -71.0983
|
||||
});
|
||||
});
|
||||
51
app/assets/javascripts/BSBMaterial/pages/maps/jvectormap.js
Normal file
51
app/assets/javascripts/BSBMaterial/pages/maps/jvectormap.js
Normal file
@@ -0,0 +1,51 @@
|
||||
$(function () {
|
||||
$('#world-map-markers').vectorMap({
|
||||
map: 'world_mill_en',
|
||||
normalizeFunction: 'polynomial',
|
||||
hoverOpacity: 0.7,
|
||||
hoverColor: false,
|
||||
backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: 'rgba(210, 214, 222, 1)',
|
||||
"fill-opacity": 1,
|
||||
stroke: 'none',
|
||||
"stroke-width": 0,
|
||||
"stroke-opacity": 1
|
||||
},
|
||||
hover: {
|
||||
"fill-opacity": 0.7,
|
||||
cursor: 'pointer'
|
||||
},
|
||||
selected: {
|
||||
fill: 'yellow'
|
||||
},
|
||||
selectedHover: {}
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
fill: '#009688',
|
||||
stroke: '#000'
|
||||
}
|
||||
},
|
||||
markers: [
|
||||
{ latLng: [41.90, 12.45], name: 'Vatican City' },
|
||||
{ latLng: [43.73, 7.41], name: 'Monaco' },
|
||||
{ latLng: [-0.52, 166.93], name: 'Nauru' },
|
||||
{ latLng: [-8.51, 179.21], name: 'Tuvalu' },
|
||||
{ latLng: [43.93, 12.46], name: 'San Marino' },
|
||||
{ latLng: [47.14, 9.52], name: 'Liechtenstein' },
|
||||
{ latLng: [7.11, 171.06], name: 'Marshall Islands' },
|
||||
{ latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis' },
|
||||
{ latLng: [3.2, 73.22], name: 'Maldives' },
|
||||
{ latLng: [35.88, 14.5], name: 'Malta' },
|
||||
{ latLng: [12.05, -61.75], name: 'Grenada' },
|
||||
{ latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines' },
|
||||
{ latLng: [13.16, -59.55], name: 'Barbados' },
|
||||
{ latLng: [17.11, -61.85], name: 'Antigua and Barbuda' },
|
||||
{ latLng: [-4.61, 55.45], name: 'Seychelles' },
|
||||
{ latLng: [7.35, 134.46], name: 'Palau' },
|
||||
{ latLng: [42.5, 1.51], name: 'Andorra' }
|
||||
]
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
$(function () {
|
||||
$('#aniimated-thumbnials').lightGallery({
|
||||
thumbnail: true,
|
||||
selector: 'a'
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
$(function () {
|
||||
$('#mainTable').editableTableWidget();
|
||||
});
|
||||
14
app/assets/javascripts/BSBMaterial/pages/tables/jquery-datatable.js
vendored
Normal file
14
app/assets/javascripts/BSBMaterial/pages/tables/jquery-datatable.js
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
$(function () {
|
||||
$('.js-basic-example').DataTable({
|
||||
responsive: true
|
||||
});
|
||||
|
||||
//Exportable table
|
||||
$('.js-exportable').DataTable({
|
||||
dom: 'Bfrtip',
|
||||
responsive: true,
|
||||
buttons: [
|
||||
'copy', 'csv', 'excel', 'pdf', 'print'
|
||||
]
|
||||
});
|
||||
});
|
||||
16
app/assets/javascripts/BSBMaterial/pages/ui/animations.js
Normal file
16
app/assets/javascripts/BSBMaterial/pages/ui/animations.js
Normal file
@@ -0,0 +1,16 @@
|
||||
$(function () {
|
||||
$('.js-animations').bind('change', function () {
|
||||
var animation = $(this).val();
|
||||
$('.js-animating-object').animateCss(animation);
|
||||
});
|
||||
});
|
||||
|
||||
//Copied from https://github.com/daneden/animate.css
|
||||
$.fn.extend({
|
||||
animateCss: function (animationName) {
|
||||
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
|
||||
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
|
||||
$(this).removeClass('animated ' + animationName);
|
||||
});
|
||||
}
|
||||
});
|
||||
140
app/assets/javascripts/BSBMaterial/pages/ui/dialogs.js
Normal file
140
app/assets/javascripts/BSBMaterial/pages/ui/dialogs.js
Normal file
@@ -0,0 +1,140 @@
|
||||
$(function () {
|
||||
$('.js-sweetalert button').on('click', function () {
|
||||
var type = $(this).data('type');
|
||||
if (type === 'basic') {
|
||||
showBasicMessage();
|
||||
}
|
||||
else if (type === 'with-title') {
|
||||
showWithTitleMessage();
|
||||
}
|
||||
else if (type === 'success') {
|
||||
showSuccessMessage();
|
||||
}
|
||||
else if (type === 'confirm') {
|
||||
showConfirmMessage();
|
||||
}
|
||||
else if (type === 'cancel') {
|
||||
showCancelMessage();
|
||||
}
|
||||
else if (type === 'with-custom-icon') {
|
||||
showWithCustomIconMessage();
|
||||
}
|
||||
else if (type === 'html-message') {
|
||||
showHtmlMessage();
|
||||
}
|
||||
else if (type === 'autoclose-timer') {
|
||||
showAutoCloseTimerMessage();
|
||||
}
|
||||
else if (type === 'prompt') {
|
||||
showPromptMessage();
|
||||
}
|
||||
else if (type === 'ajax-loader') {
|
||||
showAjaxLoaderMessage();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//These codes takes from http://t4t5.github.io/sweetalert/
|
||||
function showBasicMessage() {
|
||||
swal("Here's a message!");
|
||||
}
|
||||
|
||||
function showWithTitleMessage() {
|
||||
swal("Here's a message!", "It's pretty, isn't it?");
|
||||
}
|
||||
|
||||
function showSuccessMessage() {
|
||||
swal("Good job!", "You clicked the button!", "success");
|
||||
}
|
||||
|
||||
function showConfirmMessage() {
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
text: "You will not be able to recover this imaginary file!",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#DD6B55",
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
closeOnConfirm: false
|
||||
}, function () {
|
||||
swal("Deleted!", "Your imaginary file has been deleted.", "success");
|
||||
});
|
||||
}
|
||||
|
||||
function showCancelMessage() {
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
text: "You will not be able to recover this imaginary file!",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#DD6B55",
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
cancelButtonText: "No, cancel plx!",
|
||||
closeOnConfirm: false,
|
||||
closeOnCancel: false
|
||||
}, function (isConfirm) {
|
||||
if (isConfirm) {
|
||||
swal("Deleted!", "Your imaginary file has been deleted.", "success");
|
||||
} else {
|
||||
swal("Cancelled", "Your imaginary file is safe :)", "error");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showWithCustomIconMessage() {
|
||||
swal({
|
||||
title: "Sweet!",
|
||||
text: "Here's a custom image.",
|
||||
imageUrl: "../../images/thumbs-up.png"
|
||||
});
|
||||
}
|
||||
|
||||
function showHtmlMessage() {
|
||||
swal({
|
||||
title: "HTML <small>Title</small>!",
|
||||
text: "A custom <span style=\"color: #CC0000\">html<span> message.",
|
||||
html: true
|
||||
});
|
||||
}
|
||||
|
||||
function showAutoCloseTimerMessage() {
|
||||
swal({
|
||||
title: "Auto close alert!",
|
||||
text: "I will close in 2 seconds.",
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
}
|
||||
|
||||
function showPromptMessage() {
|
||||
swal({
|
||||
title: "An input!",
|
||||
text: "Write something interesting:",
|
||||
type: "input",
|
||||
showCancelButton: true,
|
||||
closeOnConfirm: false,
|
||||
animation: "slide-from-top",
|
||||
inputPlaceholder: "Write something"
|
||||
}, function (inputValue) {
|
||||
if (inputValue === false) return false;
|
||||
if (inputValue === "") {
|
||||
swal.showInputError("You need to write something!"); return false
|
||||
}
|
||||
swal("Nice!", "You wrote: " + inputValue, "success");
|
||||
});
|
||||
}
|
||||
|
||||
function showAjaxLoaderMessage() {
|
||||
swal({
|
||||
title: "Ajax request example",
|
||||
text: "Submit to run ajax request",
|
||||
type: "info",
|
||||
showCancelButton: true,
|
||||
closeOnConfirm: false,
|
||||
showLoaderOnConfirm: true,
|
||||
}, function () {
|
||||
setTimeout(function () {
|
||||
swal("Ajax request finished!");
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
7
app/assets/javascripts/BSBMaterial/pages/ui/modals.js
Normal file
7
app/assets/javascripts/BSBMaterial/pages/ui/modals.js
Normal file
@@ -0,0 +1,7 @@
|
||||
$(function () {
|
||||
$('.js-modal-buttons .btn').on('click', function () {
|
||||
var color = $(this).data('color');
|
||||
$('#mdModal .modal-content').removeAttr('class').addClass('modal-content modal-col-' + color);
|
||||
$('#mdModal').modal('show');
|
||||
});
|
||||
});
|
||||
47
app/assets/javascripts/BSBMaterial/pages/ui/notifications.js
Normal file
47
app/assets/javascripts/BSBMaterial/pages/ui/notifications.js
Normal file
@@ -0,0 +1,47 @@
|
||||
$(function () {
|
||||
$('.jsdemo-notification-button button').on('click', function () {
|
||||
var placementFrom = $(this).data('placement-from');
|
||||
var placementAlign = $(this).data('placement-align');
|
||||
var animateEnter = $(this).data('animate-enter');
|
||||
var animateExit = $(this).data('animate-exit');
|
||||
var colorName = $(this).data('color-name');
|
||||
|
||||
showNotification(colorName, null, placementFrom, placementAlign, animateEnter, animateExit);
|
||||
});
|
||||
});
|
||||
|
||||
function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
|
||||
if (colorName === null || colorName === '') { colorName = 'bg-black'; }
|
||||
if (text === null || text === '') { text = 'Turning standard Bootstrap alerts'; }
|
||||
if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
|
||||
if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
|
||||
var allowDismiss = true;
|
||||
|
||||
$.notify({
|
||||
message: text
|
||||
},
|
||||
{
|
||||
type: colorName,
|
||||
allow_dismiss: allowDismiss,
|
||||
newest_on_top: true,
|
||||
timer: 1000,
|
||||
placement: {
|
||||
from: placementFrom,
|
||||
align: placementAlign
|
||||
},
|
||||
animate: {
|
||||
enter: animateEnter,
|
||||
exit: animateExit
|
||||
},
|
||||
template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-35" : "") + '" role="alert">' +
|
||||
'<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
|
||||
'<span data-notify="icon"></span> ' +
|
||||
'<span data-notify="title">{1}</span> ' +
|
||||
'<span data-notify="message">{2}</span>' +
|
||||
'<div class="progress" data-notify="progressbar">' +
|
||||
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
|
||||
'</div>' +
|
||||
'<a href="{3}" target="{4}" data-notify="url"></a>' +
|
||||
'</div>'
|
||||
});
|
||||
}
|
||||
93
app/assets/javascripts/BSBMaterial/pages/ui/range-sliders.js
Normal file
93
app/assets/javascripts/BSBMaterial/pages/ui/range-sliders.js
Normal file
@@ -0,0 +1,93 @@
|
||||
$(function () {
|
||||
//Taken from http://ionden.com/a/plugins/ion.rangeSlider/demo.html
|
||||
|
||||
$("#range_01").ionRangeSlider();
|
||||
|
||||
$("#range_02").ionRangeSlider({
|
||||
min: 100,
|
||||
max: 1000,
|
||||
from: 550
|
||||
});
|
||||
|
||||
$("#range_03").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
from: 200,
|
||||
to: 800,
|
||||
prefix: "$"
|
||||
});
|
||||
|
||||
$("#range_04").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500
|
||||
});
|
||||
|
||||
$("#range_05").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500,
|
||||
step: 250
|
||||
});
|
||||
|
||||
|
||||
$("#range_06").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -12.8,
|
||||
max: 12.8,
|
||||
from: -3.2,
|
||||
to: 3.2,
|
||||
step: 0.1
|
||||
});
|
||||
|
||||
$("#range_07").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
from: 1,
|
||||
to: 5,
|
||||
values: [0, 10, 100, 1000, 10000, 100000, 1000000]
|
||||
});
|
||||
|
||||
|
||||
$("#range_08").ionRangeSlider({
|
||||
grid: true,
|
||||
from: 5,
|
||||
values: [
|
||||
"zero", "one",
|
||||
"two", "three",
|
||||
"four", "five",
|
||||
"six", "seven",
|
||||
"eight", "nine",
|
||||
"ten"
|
||||
]
|
||||
});
|
||||
|
||||
$("#range_09").ionRangeSlider({
|
||||
grid: true,
|
||||
from: 3,
|
||||
values: [
|
||||
"January", "February", "March",
|
||||
"April", "May", "June",
|
||||
"July", "August", "September",
|
||||
"October", "November", "December"
|
||||
]
|
||||
});
|
||||
|
||||
$("#range_10").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 1000,
|
||||
max: 1000000,
|
||||
from: 100000,
|
||||
step: 1000,
|
||||
prettify_enabled: false
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
$(function () {
|
||||
$('.dd').nestable();
|
||||
|
||||
$('.dd').on('change', function () {
|
||||
var $this = $(this);
|
||||
var serializedData = window.JSON.stringify($($this).nestable('serialize'));
|
||||
|
||||
$this.parents('div.body').find('textarea').val(serializedData);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
$(function () {
|
||||
//Tooltip
|
||||
$('[data-toggle="tooltip"]').tooltip({
|
||||
container: 'body'
|
||||
});
|
||||
|
||||
//Popover
|
||||
$('[data-toggle="popover"]').popover();
|
||||
})
|
||||
@@ -0,0 +1,43 @@
|
||||
$(function () {
|
||||
initCounters();
|
||||
initCharts();
|
||||
});
|
||||
|
||||
//Widgets count plugin
|
||||
function initCounters() {
|
||||
$('.count-to').countTo();
|
||||
}
|
||||
|
||||
//Charts
|
||||
function initCharts() {
|
||||
//Chart Bar
|
||||
$('.chart.chart-bar').sparkline(undefined, {
|
||||
type: 'bar',
|
||||
barColor: '#fff',
|
||||
negBarColor: '#fff',
|
||||
barWidth: '4px',
|
||||
height: '34px'
|
||||
});
|
||||
|
||||
//Chart Pie
|
||||
$('.chart.chart-pie').sparkline(undefined, {
|
||||
type: 'pie',
|
||||
height: '50px',
|
||||
sliceColors: ['rgba(255,255,255,0.70)', 'rgba(255,255,255,0.85)', 'rgba(255,255,255,0.95)', 'rgba(255,255,255,1)']
|
||||
});
|
||||
|
||||
//Chart Line
|
||||
$('.chart.chart-line').sparkline(undefined, {
|
||||
type: 'line',
|
||||
width: '60px',
|
||||
height: '45px',
|
||||
lineColor: '#fff',
|
||||
lineWidth: 1.3,
|
||||
fillColor: 'rgba(0,0,0,0)',
|
||||
spotColor: 'rgba(255,255,255,0.40)',
|
||||
maxSpotColor: 'rgba(255,255,255,0.40)',
|
||||
minSpotColor: 'rgba(255,255,255,0.40)',
|
||||
spotRadius: 3,
|
||||
highlightSpotColor: '#fff'
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
$(function () {
|
||||
initCounters();
|
||||
initCharts();
|
||||
});
|
||||
|
||||
//Widgets count plugin
|
||||
function initCounters() {
|
||||
$('.count-to').countTo();
|
||||
}
|
||||
|
||||
//Charts
|
||||
function initCharts() {
|
||||
//Chart Bar
|
||||
$('.chart.chart-bar').sparkline(undefined, {
|
||||
type: 'bar',
|
||||
barColor: '#fff',
|
||||
negBarColor: '#fff',
|
||||
barWidth: '4px',
|
||||
height: '34px'
|
||||
});
|
||||
|
||||
//Chart Pie
|
||||
$('.chart.chart-pie').sparkline(undefined, {
|
||||
type: 'pie',
|
||||
height: '50px',
|
||||
sliceColors: ['rgba(255,255,255,0.70)', 'rgba(255,255,255,0.85)', 'rgba(255,255,255,0.95)', 'rgba(255,255,255,1)']
|
||||
});
|
||||
|
||||
//Chart Line
|
||||
$('.chart.chart-line').sparkline(undefined, {
|
||||
type: 'line',
|
||||
width: '60px',
|
||||
height: '45px',
|
||||
lineColor: '#fff',
|
||||
lineWidth: 1.3,
|
||||
fillColor: 'rgba(0,0,0,0)',
|
||||
spotColor: 'rgba(255,255,255,0.40)',
|
||||
maxSpotColor: 'rgba(255,255,255,0.40)',
|
||||
minSpotColor: 'rgba(255,255,255,0.40)',
|
||||
spotRadius: 3,
|
||||
highlightSpotColor: '#fff'
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
$(function () {
|
||||
initCounters();
|
||||
initCharts();
|
||||
});
|
||||
|
||||
//Widgets count plugin
|
||||
function initCounters() {
|
||||
$('.count-to').countTo();
|
||||
}
|
||||
|
||||
//Charts
|
||||
function initCharts() {
|
||||
//Chart Bar
|
||||
$('.chart.chart-bar').sparkline(undefined, {
|
||||
type: 'bar',
|
||||
barColor: '#fff',
|
||||
negBarColor: '#fff',
|
||||
barWidth: '4px',
|
||||
height: '34px'
|
||||
});
|
||||
|
||||
//Chart Pie
|
||||
$('.chart.chart-pie').sparkline(undefined, {
|
||||
type: 'pie',
|
||||
height: '50px',
|
||||
sliceColors: ['rgba(255,255,255,0.70)', 'rgba(255,255,255,0.85)', 'rgba(255,255,255,0.95)', 'rgba(255,255,255,1)']
|
||||
});
|
||||
|
||||
//Chart Line
|
||||
$('.chart.chart-line').sparkline(undefined, {
|
||||
type: 'line',
|
||||
width: '60px',
|
||||
height: '45px',
|
||||
lineColor: '#fff',
|
||||
lineWidth: 1.3,
|
||||
fillColor: 'rgba(0,0,0,0)',
|
||||
spotColor: 'rgba(255,255,255,0.40)',
|
||||
maxSpotColor: 'rgba(255,255,255,0.40)',
|
||||
minSpotColor: 'rgba(255,255,255,0.40)',
|
||||
spotRadius: 3,
|
||||
highlightSpotColor: '#fff'
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
$(function () {
|
||||
initCounters();
|
||||
initCharts();
|
||||
});
|
||||
|
||||
//Widgets count plugin
|
||||
function initCounters() {
|
||||
$('.count-to').countTo();
|
||||
}
|
||||
|
||||
//Charts
|
||||
function initCharts() {
|
||||
//Chart Bar
|
||||
$('.chart.chart-bar:not(.reverse)').sparkline(undefined, {
|
||||
type: 'bar',
|
||||
barColor: 'rgba(0, 0, 0, 0.15)',
|
||||
negBarColor: 'rgba(0, 0, 0, 0.15)',
|
||||
barWidth: '8px',
|
||||
height: '34px'
|
||||
});
|
||||
|
||||
//Chart Bar Reverse
|
||||
$('.chart.chart-bar.reverse').sparkline(undefined, {
|
||||
type: 'bar',
|
||||
barColor: 'rgba(255, 255, 255, 0.15)',
|
||||
negBarColor: 'rgba(255, 255, 255, 0.15)',
|
||||
barWidth: '8px',
|
||||
height: '34px'
|
||||
});
|
||||
|
||||
//Chart Pie
|
||||
$('.chart.chart-pie').sparkline(undefined, {
|
||||
type: 'pie',
|
||||
height: '50px',
|
||||
sliceColors: ['rgba(0,0,0,0.10)', 'rgba(0,0,0,0.15)', 'rgba(0,0,0,0.20)', 'rgba(0,0,0,0.25)']
|
||||
});
|
||||
|
||||
//Chart Line
|
||||
$('.chart.chart-line').sparkline(undefined, {
|
||||
type: 'line',
|
||||
width: '60px',
|
||||
height: '45px',
|
||||
lineColor: 'rgba(0, 0, 0, 0.15)',
|
||||
lineWidth: 2,
|
||||
fillColor: 'rgba(0,0,0,0)',
|
||||
spotColor: 'rgba(0, 0, 0, 0.15)',
|
||||
maxSpotColor: 'rgba(0, 0, 0, 0.15)',
|
||||
minSpotColor: 'rgba(0, 0, 0, 0.15)',
|
||||
spotRadius: 3,
|
||||
highlightSpotColor: 'rgba(0, 0, 0, 0.15)'
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
$(function () {
|
||||
initCounters();
|
||||
initCharts();
|
||||
});
|
||||
|
||||
//Widgets count plugin
|
||||
function initCounters() {
|
||||
$('.count-to').countTo();
|
||||
}
|
||||
|
||||
//Charts
|
||||
function initCharts() {
|
||||
//Chart Bar
|
||||
$.each($('.chart.chart-bar'), function (i, key) {
|
||||
var chartColor = $.AdminBSB.options.colors[$(key).data('chartcolor')];
|
||||
$(key).sparkline(undefined, {
|
||||
type: 'bar',
|
||||
barColor: chartColor,
|
||||
negBarColor: chartColor,
|
||||
barWidth: '8px',
|
||||
height: '34px'
|
||||
});
|
||||
});
|
||||
|
||||
//Chart Pie
|
||||
$.each($('.chart.chart-pie'), function (i, key) {
|
||||
var chartColor = $.AdminBSB.options.colors[$(key).data('chartcolor')];
|
||||
$(key).sparkline(undefined, {
|
||||
type: 'pie',
|
||||
height: '50px',
|
||||
sliceColors: [hexToRgba(chartColor, '0.55'), hexToRgba(chartColor, '0.70'), hexToRgba(chartColor, '0.85'), hexToRgba(chartColor, '1')]
|
||||
});
|
||||
});
|
||||
|
||||
//Chart Line
|
||||
$.each($('.chart.chart-line'), function (i, key) {
|
||||
var chartColor = $.AdminBSB.options.colors[$(key).data('chartcolor')];
|
||||
$(key).sparkline(undefined, {
|
||||
type: 'line',
|
||||
width: '60px',
|
||||
height: '45px',
|
||||
lineColor: chartColor,
|
||||
lineWidth: 1.3,
|
||||
fillColor: 'rgba(0,0,0,0)',
|
||||
spotColor: chartColor,
|
||||
maxSpotColor: chartColor,
|
||||
minSpotColor: chartColor,
|
||||
spotRadius: 3,
|
||||
highlightSpotColor: chartColor
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user