theme with boostrap4.0

.gitignore

+/.bundle/
+/.yardoc
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

CODE_OF_CONDUCT.md

+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at jyosuper@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

Gemfile

+source "https://rubygems.org"
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+# Specify your gem's dependencies in bootstrap_beagle.gemspec
+gemspec

README.md

+# BootstrapBeagle
+
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/bootstrap_beagle`. To experiment with that code, run `bin/console` for an interactive prompt.
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "bootstrap_beagle", git: "http://gitlab.ikcrm.com/gems/bootstrap_beagle.git"
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install bootstrap_beagle
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/bootstrap_beagle. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Code of Conduct
+
+Everyone interacting in the BootstrapBeagle project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/bootstrap_beagle/blob/master/CODE_OF_CONDUCT.md).

Rakefile

+require "bundler/gem_tasks"
+task :default => :spec

app/assets/javascripts/app-booking.js

+var App = (function () {
+  'use strict';
+
+  App.booking = function( ){
+
+    //Js Code
+    $(".datetimepicker").datetimepicker({
+    	autoclose: true,
+    	componentIcon: '.mdi.mdi-calendar',
+    	navIcons:{
+    		rightIcon: 'mdi mdi-chevron-right',
+    		leftIcon: 'mdi mdi-chevron-left'
+    	}
+    });
+    
+    //Select2
+    $(".select2").select2({
+      width: '100%'
+    });
+    
+    //Select2 tags
+    $(".tags").select2({tags: true, width: '100%'});
+
+    //Bootstrap Slider
+    $('.bslider').bootstrapSlider();
+    
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-charts-chartjs.js

+var App = (function () {
+	'use strict';
+
+	App.ChartJs = function( ){
+
+    var randomScalingFactor = function() {
+      return Math.round(Math.random() * 100);
+    };
+
+		function lineChart(){
+			//Set the chart colors
+      var color1 = tinycolor( App.color.primary );
+			var color2 = tinycolor( App.color.primary ).lighten( 22 );
+
+      //Get the canvas element
+			var ctx = document.getElementById("line-chart");
+			
+			var lineChartData = {
+	      labels: ["January", "February", "March", "April", "May", "June", "July"],
+	      tooltips: {
+	      	enabled: true,
+	      	position: 'average'
+	      },
+	      datasets: [{
+	        label: "My First dataset",
+	        borderColor: color1.toString(),
+	        backgroundColor: color1.setAlpha(.8).toString(),
+	        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+	      }, {
+	        label: "My Second dataset",
+	        borderColor: color2.toString(),
+	        backgroundColor: color2.setAlpha(.5).toString(),
+	        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+	      }]
+	    };
+
+	    var line = new Chart(ctx, {
+        type: 'line',
+        data: lineChartData
+      });
+		}
+
+		function barChart(){
+			//Set the chart colors
+      var color1 = tinycolor( App.color.success );
+			var color2 = tinycolor( App.color.warning );
+
+      //Get the canvas element
+			var ctx = document.getElementById("bar-chart");
+			
+			var data = {
+	      labels: ["January", "February", "March", "April", "May", "June", "July"],
+	      datasets: [{
+	        label: "Credit",
+	        borderColor: color1.toString(),
+	        backgroundColor: color1.setAlpha(.8).toString(),
+	        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+	      }, {
+	        label: "Debit",
+	        borderColor: color2.toString(),
+	        backgroundColor: color2.setAlpha(.5).toString(),
+	        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+	      }]
+	    };
+
+	    var bar = new Chart(ctx, {
+        type: 'bar',
+        data: data,
+        options: {
+          elements: {
+            rectangle: {
+              borderWidth: 2,
+              borderColor: 'rgb(0, 255, 0)',
+              borderSkipped: 'bottom'
+            }
+          },
+        }
+      });
+		}
+
+		function radarChart(){
+			//Set the chart colors
+			var color1 = tinycolor( App.color.grey );
+      var color2 = tinycolor( App.color.danger );
+
+      //Get the canvas element
+			var ctx = document.getElementById("radar-chart");
+			
+			var data = {
+			  labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
+			  datasets: [
+			    {
+			      label: "First Year",
+			      backgroundColor: color1.setAlpha(.3).toString(),
+			      borderColor: color1.toString(),
+			      pointBackgroundColor: color1.toString(),
+			      pointBorderColor: "#fff",
+			      pointHoverBackgroundColor: "#fff",
+			      pointHoverBorderColor: color1.toString(),
+			      data: [65, 59, 90, 81, 56, 55, 40]
+			    },
+			    {
+			      label: "Second Year",
+			      backgroundColor: color2.setAlpha(.4).toString(),
+			      borderColor: color2.toString(),
+			      pointBackgroundColor: color2.toString(),
+			      pointBorderColor: "#fff",
+			      pointHoverBackgroundColor: "#fff",
+			      pointHoverBorderColor: color2.toString(),
+			      data: [28, 48, 40, 19, 96, 27, 100]
+			    }
+			  ]
+			};
+
+	    var radar = new Chart(ctx, {
+        type: 'radar',
+        data: data
+      });
+		}
+
+		function polarChart(){
+			//Set the chart colors
+			var color1 = App.color.primary;
+			var color2 = App.color.success;
+			var color3 = App.color.warning;
+			var color4 = App.color.danger;
+      var color5 = App.color.grey;
+
+      //Get the canvas element
+			var ctx = document.getElementById("polar-chart");
+			
+			var data = {
+		    datasets: [{
+	        data: [11,16,7,3,14],
+	        backgroundColor: [
+            color4,
+            color2,
+            color3,
+            color5,
+            color1
+	        ],
+	        label: 'My dataset'
+		    }],
+		    labels: [
+	        "Red",
+	        "Green",
+	        "Yellow",
+	        "Grey",
+	        "Blue"
+		    ]
+			};
+
+	    var polar = new Chart(ctx, {
+        type: 'polarArea',
+        data: data
+      });
+		}
+
+		function pieChart(){
+			//Set the chart colors
+			var color1 = App.color.primary;
+			var color2 = tinycolor( App.color.primary ).lighten( 12 ).toString();
+			var color3 = tinycolor( App.color.primary ).lighten( 22 ).toString();
+
+      //Get the canvas element
+			var ctx = document.getElementById("pie-chart");
+			
+			var data = {
+			  labels: [
+			    "Red",
+			    "Blue",
+			    "Yellow"
+			  ],
+			  datasets: [{
+		      data: [300, 50, 100],
+		      backgroundColor: [
+		        color1,
+		        color2,
+		        color3
+		      ],
+		      hoverBackgroundColor: [
+		        color1,
+		        color2,
+		        color3
+		      ]
+		  	}]
+			};
+
+	    var pie = new Chart(ctx, {
+        type: 'pie',
+        data: data
+      });
+		}
+
+		function donutChart(){
+			//Set the chart colors
+			var color1 = App.color.success;
+			var color2 = tinycolor( App.color.success ).lighten( 12 ).toString();
+			var color3 = tinycolor( App.color.success ).lighten( 22 ).toString();
+
+      //Get the canvas element
+			var ctx = document.getElementById("donut-chart");
+			
+			var data = {
+			  labels: [
+			    "Red",
+			    "Blue",
+			    "Yellow"
+			  ],
+			  datasets: [
+			    {
+			      data: [300, 50, 100],
+			      backgroundColor: [
+			        color1,
+			        color2,
+			        color3
+			      ],
+			      hoverBackgroundColor: [
+			        color1,
+			        color2,
+			        color3
+			      ]
+			  	}]
+			};
+
+	    var pie = new Chart(ctx, {
+        type: 'doughnut',
+        data: data
+      });
+		}
+
+		lineChart();
+		barChart();
+		radarChart();
+		polarChart();
+		pieChart();
+		donutChart();
+	};
+
+	return App;
+})(App || {});
\ No newline at end of file

app/assets/javascripts/app-charts-morris.js

+var App = (function () {
+	'use strict';
+
+	App.chartsMorris = function( ){
+
+		// data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type
+	  var tax_data = [
+	       {"period": "2013", "licensed": 400, "sorned": 550},
+	       {"period": "2012", "licensed": 450, "sorned": 400},
+	       {"period": "2011", "licensed": 350, "sorned": 550},
+	       {"period": "2010", "licensed": 500, "sorned": 700},
+	       {"period": "2009", "licensed": 250, "sorned": 380},
+	       {"period": "2008", "licensed": 350, "sorned": 240},
+	       {"period": "2007", "licensed": 180, "sorned": 300},
+	       {"period": "2006", "licensed": 300, "sorned": 250},
+	       {"period": "2005", "licensed": 200, "sorned": 150}
+	  ];
+
+	  //Line Chart
+	  function line_chart(){
+	  	var color1 = App.color.primary;
+	  	var color2 = tinycolor( App.color.primary ).lighten( 15 ).toString();
+
+	  	new Morris.Line({
+		    element: 'line-chart',
+		    data: tax_data,
+		    xkey: 'period',
+		    ykeys: ['licensed', 'sorned'],
+		    labels: ['Licensed', 'Off the road'],
+		    lineColors: [color1, color2]
+		  });
+	  }
+
+	  //Bar chart
+	  function bar_chart(){
+			var color1 = tinycolor( App.color.success ).lighten( 15 ).toString();
+	  	var color2 = tinycolor( App.color.success ).brighten( 3 ).toString();
+
+	  	Morris.Bar({
+			  element: 'bar-chart',
+			  data: [
+			    {device: 'iPhone', geekbench: 136, macbench: 180},
+			    {device: 'iPhone 3G', geekbench: 137, macbench: 200},
+			    {device: 'iPhone 3GS', geekbench: 275, macbench: 350},
+			    {device: 'iPhone 4', geekbench: 380, macbench: 500},
+			    {device: 'iPhone 4S', geekbench: 655, macbench: 900},
+			    {device: 'iPhone 5', geekbench: 1571, macbench: 1700}
+			  ],
+			  xkey: 'device',
+			  ykeys: ['geekbench','macbench'],
+			  labels: ['Geekbench','Macbench'],
+			  barColors: [color1, color2],
+			  barRatio: 0.4,
+			  xLabelAngle: 35,
+			  hideHover: 'auto'
+			});
+	  }
+
+	  //Donut Chart
+	  function donut_chart(){
+	  	var color1 = App.color.warning;
+      var color2 = App.color.success;
+      var color3 = App.color.primary;
+
+  	  Morris.Donut({
+		    element: 'donut-chart',
+		    data: [
+		      {label: 'Facebook', value: 33 },
+		      {label: 'Google', value: 33 },
+		      {label: 'Twitter', value: 33}
+		    ],
+		    colors:[color1, color2, color3],
+		    formatter: function (y) { return y + "%" }
+		  });
+	  }
+
+	  //Area chart
+	  function area_chart(){
+	  	var color1 = App.color.primary;
+      var color2 = App.color.success;
+      var color3 = App.color.warning;
+
+
+	  	Morris.Area({
+		    element: 'area-chart',
+		    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'],
+		    lineColors: [color1, color2, color3],
+		    pointSize: 2,
+		    hideHover: 'auto'
+		  });
+	  }
+
+	  line_chart();
+	  bar_chart();
+	  donut_chart();
+	  area_chart();
+	};
+
+	return App;
+})(App || {});
\ No newline at end of file

app/assets/javascripts/app-charts-sparkline.js

+var App = (function () {
+	'use strict';
+
+	App.chartsSparklines = function( ){
+
+
+			//Top tile widgets
+	    var color1 = App.color.primary;
+	    var color2 = App.color.warning;
+	    var color3 = App.color.success;
+	    var color4 = App.color.danger;
+
+	    $('#spark1').sparkline('html', { 
+	      width: '85',
+	      height: '35',
+	      lineColor: color1,
+	      highlightSpotColor: color1,
+	      highlightLineColor: color1,
+	      fillColor: false,
+	      spotColor: false,
+	      minSpotColor: false,
+	      maxSpotColor: false,
+	      lineWidth: 1.15
+	    });
+
+	    $("#spark2").sparkline('html', { 
+	      type: 'bar', 
+	      width: '85',
+	      height: '35',
+	      barWidth: 3,
+	      barSpacing: 3,
+	      chartRangeMin: 0,
+	      barColor: color2 
+	    });
+
+	    $('#spark3').sparkline('html', { 
+	      type: 'discrete', 
+	      width: '85',
+	      height: '35',
+	      lineHeight: 20,
+	      lineColor: color3,
+	      xwidth: 18 
+	    });
+
+	    $('#spark4').sparkline('html', { 
+	      width: '85',
+	      height: '35',
+	      lineColor: color4,
+	      highlightSpotColor: color4,
+	      highlightLineColor: color4,
+	      fillColor: false,
+	      spotColor: false,
+	      minSpotColor: false,
+	      maxSpotColor: false,
+	      lineWidth: 1.15
+	    });
+
+
+		//Change default charts color (Read the official docs for more info)
+		//This change the default sparkline colors, but you can change them individually to each chart
+		var color1Src = tinycolor( App.color.primary );
+		var color2Src = tinycolor( App.color.danger );
+		var color3Src = tinycolor( App.color.warning );
+		var color4Src = tinycolor( App.color.success );
+		var color1 = color1Src.toString();
+		var color2 = color2Src.toString();
+		var color3 = color3Src.toString();
+		var color4 = color4Src.toString();
+		$.fn.sparkline.defaults.common.lineColor = color1;
+		$.fn.sparkline.defaults.common.fillColor = color1Src.setAlpha(.3).toString();
+
+		$.fn.sparkline.defaults.line.spotColor = color1;
+		$.fn.sparkline.defaults.line.minSpotColor = color1;
+		$.fn.sparkline.defaults.line.maxSpotColor = color1;
+		$.fn.sparkline.defaults.line.highlightSpotColor = color1;
+		$.fn.sparkline.defaults.line.highlightLineColor = color1;
+
+		$.fn.sparkline.defaults.bar.barColor = color1;
+		$.fn.sparkline.defaults.bar.negBarColor = color2;
+		$.fn.sparkline.defaults.bar.stackedBarColor[0] = color1;
+		$.fn.sparkline.defaults.bar.stackedBarColor[1] = color2;
+
+		$.fn.sparkline.defaults.tristate.posBarColor = color1;
+		$.fn.sparkline.defaults.tristate.negBarColor = color2;
+
+		$.fn.sparkline.defaults.discrete.thresholdColor = color2;
+
+		$.fn.sparkline.defaults.bullet.targetColor = color1;
+		$.fn.sparkline.defaults.bullet.performanceColor = color2;
+		$.fn.sparkline.defaults.bullet.rangeColors[0] = color2Src.setAlpha(.2).toString();
+		$.fn.sparkline.defaults.bullet.rangeColors[1] = color2Src.setAlpha(.50).toString();
+		$.fn.sparkline.defaults.bullet.rangeColors[2] = color2Src.setAlpha(.45).toString();
+
+		$.fn.sparkline.defaults.pie.sliceColors[0] = color1;
+		$.fn.sparkline.defaults.pie.sliceColors[1] = color2;
+		$.fn.sparkline.defaults.pie.sliceColors[2] = color3;
+
+		$.fn.sparkline.defaults.box.medianColor = color1;
+		$.fn.sparkline.defaults.box.boxFillColor = color2Src.setAlpha(.5).toString();
+		$.fn.sparkline.defaults.box.boxLineColor = color1;
+		$.fn.sparkline.defaults.box.whiskerColor = color4;
+
+		// Bar + line composite charts
+		$(".compositebar").sparkline('html', { type: 'bar', barColor: color2 });
+		$(".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 });
+
+ 		// Line charts taking their values from the tag
+    $('.sparklinebasic').sparkline();
+
+    // Customized line chart
+    $('.linecustom').sparkline('html', {height: '1.5em', width: '8em', lineColor: color3, fillColor: color3Src.setAlpha(.4).toString(), minSpotColor: false, maxSpotColor: false, spotColor: color4, spotRadius: 3});
+
+    // Bar charts using inline values
+    $('.sparkbar').sparkline('html', {type: 'bar'});
+
+    // Tri-state charts using inline values
+    $('.sparktristate').sparkline('html', {type: 'tristate'});
+
+    // 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: color2, changeRangeMin: 0, chartRangeMax: 10 });
+
+    // Line charts with normal range marker
+    $('.normalline').sparkline('html', { fillColor: false, normalRangeMin: -1, normalRangeMax: 8 });
+
+    // Discrete charts
+    $('.discrete1').sparkline('html', { type: 'discrete', xwidth: 18 });
+    $('.discrete2').sparkline('html', { type: 'discrete', 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'});
+
+	};
+
+	return App;
+})(App || {});
\ No newline at end of file

app/assets/javascripts/app-code-editor.js

+var App = (function () {
+  'use strict';
+
+  App.codeEditor = function( ){
+
+    /*Codemirror*/
+    var code = $("#code1").html();
+    code = code.replace(/&lt;/g, '<');
+    code = code.replace(/&gt;/g, '>');
+    console.log(code);
+
+    var myCodeMirror = CodeMirror($('#console')[0], {
+      lineNumbers: true,
+      theme: 'monokai',
+      value: code,
+      mode:  "text/html",
+      tabSize: 2
+    });
+    
+    setTimeout(function(){
+      myCodeMirror.refresh();
+    },200);
+    
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-form-elements.js

+var App = (function () {
+  'use strict';
+
+  App.formElements = function( ){
+
+    //Js Code
+    $(".datetimepicker").datetimepicker({
+    	autoclose: true,
+    	componentIcon: '.mdi.mdi-calendar',
+    	navIcons:{
+    		rightIcon: 'mdi mdi-chevron-right',
+    		leftIcon: 'mdi mdi-chevron-left'
+    	}
+    });
+    
+    //Select2
+    $(".select2").select2({
+      width: '100%'
+    });
+    
+    //Select2 tags
+    $(".tags").select2({tags: true, width: '100%'});
+
+    //Bootstrap Slider
+    $('.bslider').bootstrapSlider();
+
+    // File input 
+    $( '.inputfile' ).each( function(){
+      var $input   = $( this ),
+        $label   = $input.next( 'label' ),
+        labelVal = $label.html();
+
+      $input.on( 'change', function( e )
+      {
+        var fileName = '';
+
+        if( this.files && this.files.length > 1 )
+          fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
+        else if( e.target.value )
+          fileName = e.target.value.split( '\\' ).pop();
+
+        if( fileName )
+          $label.find( 'span' ).html( fileName );
+        else
+          $label.html( labelVal );
+      });
+    });
+    
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-form-masks.js

+var App = (function () {
+  'use strict';
+  
+  App.masks = function( ){
+
+    $("[data-mask='date']").mask("99/99/9999");
+    $("[data-mask='phone']").mask("(999) 999-9999");
+    $("[data-mask='phone-ext']").mask("(999) 999-9999? x99999");
+    $("[data-mask='phone-int']").mask("+33 999 999 999");
+    $("[data-mask='taxid']").mask("99-9999999");
+    $("[data-mask='ssn']").mask("999-99-9999");
+    $("[data-mask='product-key']").mask("a*-999-a999");
+    $("[data-mask='percent']").mask("99%");
+    $("[data-mask='currency']").mask("$999,999,999.99");
+    
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-form-multiselect.js

+var App = (function () {
+	'use strict';
+
+	App.formMultiselect = function( ){
+
+    //Multiselect init
+
+    $('#my-select').multiSelect()
+    $('#pre-selected-options').multiSelect();
+    $('#callbacks').multiSelect({
+      afterSelect: function(values){
+        alert("Select value: "+values);
+      },
+      afterDeselect: function(values){
+        alert("Deselect value: "+values);
+      }
+    });
+    $('#optgroup').multiSelect({ selectableOptgroup: true });
+    $('#disabled-attribute').multiSelect();
+    $('#custom-headers').multiSelect({
+      selectableHeader: "<div class='custom-header'>Selectable items</div>",
+      selectionHeader: "<div class='custom-header'>Selection items</div>",
+    });
+    $('#searchable').multiSelect({
+      selectableHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='Search'>",
+      selectionHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='Search'>",
+      afterInit: function(ms){
+        var that = this,
+            $selectableSearch = that.$selectableUl.prev(),
+            $selectionSearch = that.$selectionUl.prev(),
+            selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
+            selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
+
+        that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
+        .on('keydown', function(e){
+          if (e.which === 40){
+            that.$selectableUl.focus();
+            return false;
+          }
+        });
+
+        that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
+        .on('keydown', function(e){
+          if (e.which == 40){
+            that.$selectionUl.focus();
+            return false;
+          }
+        });
+      },
+      afterSelect: function(){
+        this.qs1.cache();
+        this.qs2.cache();
+      },
+      afterDeselect: function(){
+        this.qs1.cache();
+        this.qs2.cache();
+      }
+    });
+	};
+
+  return App;
+})(App || {});
\ No newline at end of file

app/assets/javascripts/app-form-wizard.js

+var App = (function () {
+  'use strict';
+  
+  App.wizard = function( ){
+
+    //Fuel UX
+    $('.wizard-ux').wizard();
+
+    $('.wizard-ux').on('changed.fu.wizard',function(){
+      //Bootstrap Slider
+      $('.bslider').slider();
+    });
+    
+    $(".wizard-next").click(function(e){
+      var id = $(this).data("wizard");
+      $(id).wizard('next');
+      e.preventDefault();
+    });
+    
+    $(".wizard-previous").click(function(e){
+      var id = $(this).data("wizard");
+      $(id).wizard('previous');
+      e.preventDefault();
+    });
+
+   //Select2
+    $(".select2").select2({
+      width: '100%'
+    });
+    
+    //Select2 tags
+    $(".tags").select2({tags: true, width: '100%'});
+
+    $("#credit_slider").slider().on("slide",function(e){
+      $("#credits").html("$" + e.value);
+    });
+
+    $("#rate_slider").slider().on("slide",function(e){
+      $("#rate").html(e.value + "%");
+    });
+    
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-form-wysiwyg.js

+var App = (function () {
+	'use strict';
+
+  App.textEditors = function( ){
+
+    //Summernote
+    $('#editor1').summernote({
+      height: 300
+    });
+
+  }
+
+  return App;
+})(App || {});

app/assets/javascripts/app-icons.js

+var App = (function () {
+  'use strict';
+
+  App.IconsFilter = function( ){
+    
+    //Select2
+    $(".select2").select2({
+      width: '100%'
+    });
+
+    //Icons search filter
+    var icons = [];
+    var appContainer = $('.be-icons-list');
+    var categories = $(".icon-category", appContainer);
+    var appSearchInput = $('.input-search input', appContainer);
+    var appCategorySelect = $('#icon-category', appContainer);
+
+    categories.each(function(i, el){
+      $('.icon-class',el).each(function(index, iconEl){
+        var icon = {
+          name: iconEl.innerHTML,
+          element: iconEl,
+          category: el
+        }
+        icons.push( icon );
+      });
+    });
+
+    appSearchInput.on('keyup',function(){
+      var visibleCategories = [];
+      var value = $(this).val().toLowerCase();
+
+      if( appCategorySelect.val() == 'all' ){
+        categories.show();
+      }else{
+        $('#' + appCategorySelect.val()).show();
+      }
+
+      if( value ){
+        $('.icon-visible', categories).removeClass('icon-visible');
+
+        var results = $.grep(icons,function(el, i){
+          var search = el.name.search( value ) > -1;
+          if( search && visibleCategories.indexOf( el.category ) < 0 ){
+            visibleCategories.push(el.category);
+          }
+
+          return search;
+        });
+
+        $.each(results, function(i, o){
+          $(o.element).parents('.col-sm-6').addClass('icon-visible');
+        });
+
+        appContainer.addClass('hide-icons');
+        categories.not(visibleCategories).hide().addClass('icon-category--hide-icons');
+      }else{
+        appContainer.removeClass('hide-icons');
+      }
+    });
+
+    //Icon category filter
+    appCategorySelect.on('change',function(){
+      var val = $(this).val();
+
+      if( val == 'all' ){
+        categories.show();
+      }else{
+        categories.hide();
+        $('#' + val).show();
+      }
+    }); 
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-loaders.js

+var App = (function () {
+  'use strict';
+  
+  App.loaders = function( ){
+
+    //Show loading class toggle
+    function toggleLoader(){
+      $('.toggle-loading').on('click',function(){
+        var parent = $(this).parents('.widget, .card');
+
+        if( parent.length ){
+          parent.addClass('be-loading-active');
+
+          setTimeout(function(){
+            parent.removeClass('be-loading-active');
+          }, 3000);
+        }
+      });
+    }
+
+
+    //Loader show
+    toggleLoader();
+
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-mail-compose.js

+var App = (function () {
+  'use strict';
+
+  App.mailCompose = function( ){
+
+    //Select2 Tags
+    $(".tags").select2({tags: 0,width: '100%'});
+
+   //Summernote
+    $('#email-editor').summernote({
+      height: 200
+    });
+    
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-mail-inbox.js

+var App = (function () {
+  'use strict';
+  
+  App.mailInbox = function( ){
+    
+    $(".be-select-all input").on('change',function(){
+      var checkboxes = $(".email-list").find('input[type="checkbox"]');
+      if( $(this).is(':checked') ) {
+          checkboxes.prop('checked', true);
+      } else {
+          checkboxes.prop('checked', false);
+      }
+    });
+    
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-maps-google.js

+var App = (function () {
+  'use strict';
+
+  App.mapsGoogle = function( ){
+
+    //Basic Map
+    var map;
+
+    var mapOptions = {
+      zoom: 14,
+      center: new google.maps.LatLng(-33.877827, 151.188598),
+      mapTypeId: google.maps.MapTypeId.ROADMAP
+    };
+    map = new google.maps.Map(document.getElementById('map_one'), mapOptions);
+
+    //Hybrid Map
+    var map2;
+
+    var mapOptions = {
+      zoom: 14,
+      center: new google.maps.LatLng(-33.877827, 151.188598),
+      mapTypeId: google.maps.MapTypeId.HYBRID
+    };
+    map2 = new google.maps.Map(document.getElementById('map_two'), mapOptions);
+
+     
+   //Terrain Map
+    var map3;
+
+    var mapOptions = {
+      zoom: 14,
+      center: new google.maps.LatLng(-33.877827, 151.188598),
+      mapTypeId: google.maps.MapTypeId.TERRAIN
+    };
+    map3 = new google.maps.Map(document.getElementById('map_three'), mapOptions);
+
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-maps-vector.js

+var App = (function () {
+  'use strict';
+  
+  App.mapsVector = function( ){
+
+    var color1 = App.color.primary;
+    var color2 = App.color.success;
+    var color3 = App.color.danger;
+    var color4 = App.color.warning;
+    var color5 = App.color.success;
+    var color6 = App.color.primary;
+    var color7 = tinycolor( App.color.grey ).lighten( 5 ).toString();
+    var color8 = App.color.danger;
+
+    //Maps
+    $('#usa-map').vectorMap({
+      map: 'us_merc_en',
+      backgroundColor: 'transparent',
+      regionStyle: {
+        initial: {
+          fill: color1,
+        },
+        hover: {
+          "fill-opacity": 0.8
+        }
+      }
+    });
+
+    $('#france-map').vectorMap({
+      map: 'fr_merc_en',
+      backgroundColor: 'transparent',
+      regionStyle: {
+        initial: {
+          fill: color2,
+        },
+        hover: {
+          "fill-opacity": 0.8
+        }
+      }
+    });
+
+    $('#uk-map').vectorMap({
+      map: 'uk_mill_en',
+      backgroundColor: 'transparent',
+      regionStyle: {
+        initial: {
+          fill: color3,
+        },
+        hover: {
+          "fill-opacity": 0.8
+        }
+      }
+    });
+      
+    $('#chicago-map').vectorMap({
+      map: 'us-il-chicago_mill_en',
+      backgroundColor: 'transparent',
+      regionStyle: {
+        initial: {
+          fill: color4,
+        },
+        hover: {
+          "fill-opacity": 0.8
+        }
+      }
+    });
+      
+    $('#australia-map').vectorMap({
+      map: 'au_mill_en',
+      backgroundColor: 'transparent',
+      regionStyle: {
+        initial: {
+          fill: color5,
+        },
+        hover: {
+          "fill-opacity": 0.8
+        }
+      }
+    });
+      
+    $('#india-map').vectorMap({
+      map: 'in_mill_en',
+      backgroundColor: 'transparent',
+      regionStyle: {
+        initial: {
+          fill: color6,
+        },
+        hover: {
+          "fill-opacity": 0.8
+        }
+      }
+    });
+      
+    $('#vector-map').vectorMap({
+      map: 'map',
+      backgroundColor: 'transparent',
+      regionStyle: {
+          initial: {
+            fill: color7,
+            "fill-opacity": 0.8,
+            stroke: 'none',
+            "stroke-width": 0,
+            "stroke-opacity": 1
+          },
+          hover: {
+            "fill-opacity": 0.8
+          }
+        },
+      markerStyle:{
+        initial:{
+          r: 10
+        }
+      },
+      markers: [
+          {coords: [100, 100], name: 'Marker 1', style: {fill: '#acb1b6',stroke:'#cfd5db',"stroke-width": 3}},
+          {coords: [200, 200], name: 'Marker 2', style: {fill: '#acb1b6',stroke:'#cfd5db',"stroke-width": 3}},
+      ]
+    });
+
+    $('#canada-map').vectorMap({
+      map: 'ca_lcc_en',
+      backgroundColor: 'transparent',
+      regionStyle: {
+        initial: {
+          fill: color8,
+        },
+        hover: {
+          "fill-opacity": 0.8
+        }
+      }
+    });
+
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-page-calendar.js

+var App = (function () {
+  'use strict';
+  
+  App.pageCalendar = function( ){
+
+
+    /* initialize the external events
+    -----------------------------------------------------------------*/
+
+    $('#external-events .fc-event').each(function() {
+
+      // store data so the calendar knows to render an event upon drop
+      $(this).data('event', {
+        title: $.trim($(this).text()), // use the element's text as the event title
+        stick: true // maintain when user navigates (see docs on the renderEvent method)
+      });
+
+      // make the event draggable using jQuery UI
+      $(this).draggable({
+        zIndex: 999,
+        revert: true,      // will cause the event to go back to its
+        revertDuration: 0  //  original position after the drag
+      });
+
+    });
+
+
+    /* initialize the calendar
+    -----------------------------------------------------------------*/
+
+    $('#calendar').fullCalendar({
+      header: {
+        left: 'title',
+        center: '',
+        right: 'month,agendaWeek,agendaDay, today, prev,next',
+      },
+      defaultDate: '2016-06-12',
+      editable: true,
+      eventLimit: true,
+      droppable: true, // this allows things to be dropped onto the calendar
+      drop: function() {
+        // is the "remove after drop" checkbox checked?
+        if ($('#drop-remove').is(':checked')) {
+          // if so, remove the element from the "Draggable Events" list
+          $(this).remove();
+        }
+      },
+      events: [
+        {
+          title: 'All Day Event',
+          start: '2016-06-01'
+        },
+        {
+          title: 'Long Event',
+          start: '2016-06-07',
+          end: '2016-06-10'
+        },
+        {
+          id: 999,
+          title: 'Repeating Event',
+          start: '2016-06-09T16:00:00'
+        },
+        {
+          id: 999,
+          title: 'Repeating Event',
+          start: '2016-06-16T16:00:00'
+        },
+        {
+          title: 'Conference',
+          start: '2016-06-11',
+          end: '2016-06-13'
+        },
+        {
+          title: 'Meeting',
+          start: '2016-06-12T10:30:00',
+          end: '2016-06-12T12:30:00'
+        },
+        {
+          title: 'Lunch',
+          start: '2016-06-12T12:00:00'
+        },
+        {
+          title: 'Meeting',
+          start: '2016-06-12T14:30:00'
+        },
+        {
+          title: 'Happy Hour',
+          start: '2016-06-12T17:30:00'
+        },
+        {
+          title: 'Dinner',
+          start: '2016-06-12T20:00:00'
+        },
+        {
+          title: 'Birthday Party',
+          start: '2016-06-13T07:00:00'
+        },
+        {
+          title: 'Click for Google',
+          url: 'http://google.com/',
+          start: '2016-06-28'
+        }
+      ]
+    });
+
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-page-gallery.js

+var App = (function () {
+  'use strict';
+  
+  App.pageGallery = function( ){
+
+    //Initialize Mansory
+    var $container = $('.gallery-container');
+    // initialize
+    $container.masonry({
+      columnWidth: 0,
+      itemSelector: '.item'
+    });
+    
+    //Resizes gallery items on sidebar collapse
+    $("#sidebar-collapse").click(function(){
+        $container.masonry();      
+    });
+    
+    //MagnificPopup for images zoom
+    $('.image-zoom').magnificPopup({ 
+      type: 'image',
+      mainClass: 'mfp-with-zoom', // this class is for CSS animation below
+      zoom: {
+      enabled: true, // By default it's false, so don't forget to enable it
+
+      duration: 300, // duration of the effect, in milliseconds
+      easing: 'ease-in-out', // CSS transition easing function 
+
+      // The "opener" function should return the element from which popup will be zoomed in
+      // and to which popup will be scaled down
+      // By defailt it looks for an image tag:
+      opener: function(openerElement) {
+        // openerElement is the element on which popup was initialized, in this case its <a> tag
+        // you don't need to add "opener" option if this code matches your needs, it's defailt one.
+        var parent = $(openerElement).parents("div.img");
+        return parent;
+      }
+      }
+
+    });
+
+    $container.masonry(); 
+    
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-page-profile.js

+var App = (function () {
+  'use strict';
+
+  App.pageProfile = function( ){
+
+    function bar_chart(){
+
+      var color1 = App.color.primary;
+      var color2 = tinycolor( App.color.primary ).lighten( 22 ).toString();
+
+      var plot_statistics = $.plot($("#bar-chart1"), [
+        {
+          data: [
+            [0, 7], [1, 13], [2, 17], [3, 20], [4, 26], [5, 37], [6, 35], [7, 28], [8, 38], [9, 38], [10, 32], [11, 25]
+          ],
+          label: "Page Views"
+        },
+        {
+          data: [
+            [0, 15], [1, 10], [2, 15], [3, 25], [4, 30], [5, 29], [6, 25], [7, 33], [8, 45], [9, 43], [10, 38], [11, 36]
+          ],
+          label: "Unique Visitor"
+        }
+      ], {
+        series: {
+          bars: {
+            order: 2,
+            align: 'center',
+            show: true,
+            barWidth: 0.3,
+            lineWidth: 0.7, 
+            fill: true,
+            fillColor: {
+              colors: [{
+                opacity: 1
+              }, {
+                opacity: 1
+              }
+              ]
+            } 
+          },
+          shadowSize: 2
+        },
+        legend:{
+          show: false
+        },
+        grid: {
+          margin: 0,
+          show: false,
+          labelMargin: 10,
+          axisMargin: 500,
+          hoverable: true,
+          clickable: true,
+          tickColor: "rgba(0,0,0,0.15)",
+          borderWidth: 0
+        },
+        tooltip:{
+          show: true,
+          cssClass: "tooltip-chart",
+          content: "<div class='content-chart'> <span> %s </span> <div class='label'> <div class='label-x'> %x.0 </div> - <div class='label-y'> %y.0 </div> </div></div>",
+          defaultTheme: false
+        },
+        colors: [color1, color2],
+        xaxis: {
+          ticks: 11,
+          tickDecimals: 0
+        },
+        yaxis: {
+          ticks: 4,
+          tickDecimals: 0
+        }
+      });
+
+      widget_tooltipPosition('bar-chart1', 60);      
+    }
+
+    //Positioning tooltip
+    function widget_tooltipPosition(id, top){
+      $('#'+id).bind("plothover", function (event, pos, item) {
+        var widthToolTip = $('.tooltip-chart').width();
+        if(item){
+          $(".tooltip-chart")
+            .css({top: item.pageY - top, left: item.pageX - (widthToolTip / 2)})
+            .fadeIn(200);
+        }else{
+          $(".tooltip-chart").hide();
+        }
+      });
+    }
+
+    bar_chart();
+    
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-table-filters.js

+var App = (function () {
+	'use strict';
+
+	App.tableFilters = function( ){
+		//Put your code here
+
+		//Bootstrap Slider
+    $('.bslider').bootstrapSlider({
+    	tooltip: 'hide'
+    });
+
+    $("#milestone_slider").slider().on("slide",function(e){
+      var v1 = e.value[0];
+      var v2 = e.value[1];
+
+      $("#slider-value").html( v1 + "%" + " - " + v2 + "%");
+
+    });
+
+    //Select2
+    $(".select2").select2({
+      width: '100%'
+    });
+    
+    //Select2 tags
+    $(".tags").select2({tags: true, width: '100%'});
+    
+    //Js Code
+    $(".datetimepicker").datetimepicker({
+    	autoclose: true,
+    	componentIcon: '.mdi.mdi-calendar',
+    	navIcons:{
+    		rightIcon: 'mdi mdi-chevron-right',
+    		leftIcon: 'mdi mdi-chevron-left'
+    	}
+    });
+	};
+
+	return App;
+})(App || {});
\ No newline at end of file

app/assets/javascripts/app-tables-datatables.js

+var App = (function () {
+  'use strict';
+
+  App.dataTables = function( ){
+
+    //We use this to apply style to certain elements
+    $.extend( true, $.fn.dataTable.defaults, {
+      dom:
+        "<'row be-datatable-header'<'col-sm-6'l><'col-sm-6'f>>" +
+        "<'row be-datatable-body'<'col-sm-12'tr>>" +
+        "<'row be-datatable-footer'<'col-sm-5'i><'col-sm-7'p>>"
+    } );
+
+    $("#table1").dataTable();
+
+    //Remove search & paging dropdown
+    $("#table2").dataTable({
+      pageLength: 6,
+      dom:  "<'row be-datatable-body'<'col-sm-12'tr>>" +
+            "<'row be-datatable-footer'<'col-sm-5'i><'col-sm-7'p>>"
+    });
+
+    //Enable toolbar button functions
+    $("#table3").dataTable({
+      buttons: [
+        'copy', 'excel', 'pdf', 'print'
+      ],
+      "lengthMenu": [[6, 10, 25, 50, -1], [6, 10, 25, 50, "All"]],
+      dom:  "<'row be-datatable-header'<'col-sm-6'l><'col-sm-6 text-right'B>>" +
+            "<'row be-datatable-body'<'col-sm-12'tr>>" +
+            "<'row be-datatable-footer'<'col-sm-5'i><'col-sm-7'p>>"
+    });
+
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-ui-nestable-lists.js

+var App = (function () {
+  'use strict';
+  
+  App.uiNestableLists = function( ){
+
+    $('.dd').nestable();
+    //Watch for list changes and show serialized output
+    function update_out(selector, sel2){
+      var out = $(selector).nestable('serialize');
+      $(sel2).html(window.JSON.stringify(out));
+    }
+    
+    update_out('#list1',"#out1");
+    update_out('#list2',"#out2");
+    
+    $('#list1').on('change', function() {
+      update_out('#list1',"#out1");
+    });
+    
+    $('#list2').on('change', function() {
+      update_out('#list2',"#out2");
+    });
+
+  };
+
+  return App;
+})(App || {});

app/assets/javascripts/app-ui-notifications.js

+var App = (function () {
+  'use strict';
+  
+  App.uiNotifications = function( ){  
+    
+    $('#not-basic').click(function(){
+      $.gritter.add({
+        title: 'Samantha new msg!',
+        text: "You have a new Thomas message, let's checkout your inbox.",
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/avatar.png',
+        time: '',
+        class_name: 'img-rounded'
+      });
+      return false;
+    });
+    
+    $('#not-theme').click(function(){
+      $.gritter.add({
+        title: 'Welcome home!',
+        text: 'You can start your day checking the new messages.',
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/avatar5.png',
+        class_name: 'clean img-rounded',
+        time: '',
+      });
+      return false;
+    });
+    
+    $('#not-sticky').click(function(){
+      $.gritter.add({
+        title: 'Sticky Note',
+        text: "Your daily goal is 130 new code lines, don't forget to update your work.",
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/slack_logo.png',
+        class_name: 'clean',
+        sticky: true, 
+        time: ''
+      });
+      return false;
+    });
+    
+    $('#not-text').click(function(){
+      $.gritter.add({
+        title: 'Just Text',
+        text: 'This is a simple Gritter Notification. Etiam efficitur efficitur nisl eu dictum, nullam non orci elementum.',
+        class_name: 'clean',
+        time: ''
+      });
+      return false;
+    });
+
+    /*Positions*/
+    $('#not-tr').click(function(){
+      $.extend($.gritter.options, { position: 'top-right' });
+
+      $.gritter.add({
+        title: 'Top Right',
+        text: 'This is a simple Gritter Notification. Etiam efficitur efficitur nisl eu dictum, nullam non orci elementum',
+        class_name: 'clean'
+      });
+
+      return false;
+    });
+    
+    $('#not-tl').click(function(){
+      $.extend($.gritter.options, { position: 'top-left' });
+
+      $.gritter.add({
+        title: 'Top Left',
+        text: 'This is a simple Gritter Notification. Etiam efficitur efficitur nisl eu dictum, nullam non orci elementum',
+        class_name: 'clean'
+      });
+
+      return false;
+    });
+    
+    $('#not-bl').click(function(){
+
+      $.extend($.gritter.options, { position: 'bottom-left' });
+
+      $.gritter.add({
+        title: 'Bottom Left',
+        text: 'This is a simple Gritter Notification. Etiam efficitur efficitur nisl eu dictum, nullam non orci elementum',
+        class_name: 'clean'
+      });
+
+      return false;
+    });
+    
+    $('#not-br').click(function(){
+
+      $.extend($.gritter.options, { position: 'bottom-right' });
+      
+      $.gritter.add({
+        title: 'Bottom Right',
+        text: 'This is a simple Gritter Notification. Etiam efficitur efficitur nisl eu dictum, nullam non orci elementum',
+        class_name: 'clean'
+      });
+
+      return false;
+    });
+
+    /*Social Gritters*/
+    $('#not-facebook').click(function(){
+      $.gritter.add({
+        title: 'You have comments!',
+        text: 'You can start your day checking the new messages.',
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/fb-icon.png',
+        class_name: 'color facebook'
+      });
+      return false;
+    });
+    
+    $('#not-twitter').click(function(){
+      $.gritter.add({
+        title: 'You have new followers!',
+        text: 'You can start your day checking the new messages.',
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/tw-icon.png',
+        class_name: 'color twitter'
+      });
+      return false;
+    });
+    
+    $('#not-google-plus').click(function(){
+      $.gritter.add({
+        title: 'You have new +1!',
+        text: 'You can start your day checking the new messages.',
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/gp-icon.png',
+        class_name: 'color google-plus'
+      });
+      return false;
+    });
+    
+    $('#not-dribbble').click(function(){
+      $.gritter.add({
+        title: 'You have new comments!',
+        text: 'You can start your day checking the new comments.',
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/db-icon.png',
+        class_name: 'color dribbble'
+      });
+      return false;
+    });
+    
+    $('#not-flickr').click(function(){
+      $.gritter.add({
+        title: 'You have new comments!',
+        text: 'You can start your day checking the new comments.',
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/fl-icon.png',
+        class_name: 'color flickr'
+      });
+      return false;
+    });
+    
+    $('#not-linkedin').click(function(){
+      $.gritter.add({
+        title: 'You have new comments!',
+        text: 'You can start your day checking the new comments.',
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/in-icon.png',
+        class_name: 'color linkedin'
+      });
+      return false;
+    });
+    
+    $('#not-youtube').click(function(){
+      $.gritter.add({
+        title: 'You have new comments!',
+        text: 'You can start your day checking the new comments.',
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/yt-icon.png',
+        class_name: 'color youtube'
+      });
+      return false;
+    });
+    
+    $('#not-pinterest').click(function(){
+      $.gritter.add({
+        title: 'You have new comments!',
+        text: 'You can start your day checking the new comments.',
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/pi-icon.png',
+        class_name: 'color pinterest'
+      });
+      return false;
+    });  
+    
+    $('#not-github').click(function(){
+      $.gritter.add({
+        title: 'You have new forks!',
+        text: 'You can start your day checking the new comments.',
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/gh-icon.png',
+        class_name: 'color github'
+      });
+      return false;
+    });    
+    
+    $('#not-tumblr').click(function(){
+      $.gritter.add({
+        title: 'You have new comments!',
+        text: 'You can start your day checking the new comments.',
+        image: App.conf.assetsPath + '/' +  App.conf.imgPath + '/tu-icon.png',
+        class_name: 'color tumblr'
+      });
+      return false;
+    });
+
+    /*Colors*/
+    $('#not-primary').click(function(){
+      $.gritter.add({
+        title: 'Primary',
+        text: 'This is a simple Gritter Notification.',
+        class_name: 'color primary'
+      });
+    });
+    
+    $('#not-success').click(function(){
+      $.gritter.add({
+        title: 'Success',
+        text: 'This is a simple Gritter Notification.',
+        class_name: 'color success'
+      });
+    });
+    
+    $('#not-warning').click(function(){
+      $.gritter.add({
+        title: 'Warning',
+        text: 'This is a simple Gritter Notification.',
+        class_name: 'color warning'
+      });
+    });
+    
+    $('#not-danger').click(function(){
+      $.gritter.add({
+        title: 'Danger',
+        text: 'This is a simple Gritter Notification.',
+        class_name: 'color danger'
+      });
+    });
+
+    /*Alt Colors*/
+    
+    $('#not-dark').click(function(){
+      $.gritter.add({
+        title: 'Dark Color',
+        text: 'This is a simple Gritter Notification.',
+        class_name: 'color dark'
+      });
+    });
+
+  };
+
+  return App;
+})(App || {});

bin/console

+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "bootstrap_beagle"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

bin/setup

+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

bootstrap_beagle.gemspec

+
+lib = File.expand_path("../lib", __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "bootstrap_beagle/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "bootstrap_beagle"
+  spec.version       = BootstrapBeagle::VERSION
+  spec.authors       = ["xuchao"]
+  spec.email         = ["jyosuper@gmail.com"]
+
+  spec.summary       = %q{Theme with boostrap.}
+  spec.description   = %q{Theme with boostrap.}
+  spec.homepage      = "http://gitlab.ikcrm.com/gems/bootstrap_beagle"
+
+  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
+  # to allow pushing to a single host or delete this section to allow pushing to any host.
+  if spec.respond_to?(:metadata)
+    spec.metadata["allowed_push_host"] = "http://gitlab.ikcrm.com/gems/bootstrap_beagle"
+  else
+    raise "RubyGems 2.0 or newer is required to protect against " \
+      "public gem pushes."
+  end
+
+  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.16"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

lib/bootstrap_beagle.rb

+require "bootstrap_beagle/version"
+
+module BootstrapBeagle
+  class Engine < ::Rails::Engine
+  end
+end

lib/bootstrap_beagle/version.rb

+module BootstrapBeagle
+  VERSION = "0.1.0"
+end

vendor/assets/javascripts/bs4-breakpoint-check/jquery-breakpoint-check.js

+/*!
+ * jQuery bootstrap 4 breakpoint check
+ * Check the current visibility of bootstrap 3 breakpoints
+ *
+ * @example `$.isXs()` function alias for `$.isBreakpoint("xs")`
+ * @example `$.isSm()` function alias for `$.isBreakpoint("sm")`
+ * @example `$.isMd()` function alias for `$.isBreakpoint("md")`
+ * @example `$.isLg()` function alias for `$.isBreakpoint("lg")`
+ * @example `$.isXl()` function alias for `$.isBreakpoint("xl")`
+ * @version 1.0.0
+ * @copyright Jens A. (cakebake) and other contributors
+ * @license Released under the MIT license
+ */
+
+;(function ($) {
+
+    /**
+     * Base function to check the current visibility of an bootstrap 4 breakpoint
+     *
+     * @param {string} breakPoint Something like xs|sm|md|lg
+     * @returns {boolean}
+     */
+    $.isBreakpoint = function (breakPoint) {
+        var element, erg, utilCls;
+
+        switch(breakPoint) {
+            case "xs":
+                utilCls = "d-none d-sm-block";
+                break;
+            case "sm":
+                utilCls = "d-none d-md-block";
+                break;
+            case "md":
+                utilCls = "d-none d-lg-block";
+                break;
+            case "lg":
+                utilCls = "d-none d-xl-block";
+                break;
+            case "xl":
+                utilCls = "d-none";
+                break;
+        }
+
+        element = $("<div/>", {
+            "class": utilCls
+        }).appendTo("body");
+
+        erg = element.is(":hidden");
+        element.remove();
+
+        return erg
+    };
+
+    $.extend($, {
+
+        /**
+         * Check the current visibility of bootstrap 4 "xs" breakpoint
+         * Shorthand function alias for $.isBreakpoint("xs")
+         *
+         * @returns {boolean}
+         */
+        isXs: function () {
+            return $.isBreakpoint("xs")
+        },
+
+        /**
+         * Check the current visibility of bootstrap 4 "sm" breakpoint
+         * Shorthand function alias for $.isBreakpoint("sm")
+         *
+         * @returns {boolean}
+         */
+        isSm: function () {
+            return $.isBreakpoint("sm")
+        },
+
+        /**
+         * Check the current visibility of bootstrap 4 "md" breakpoint
+         * Shorthand function alias for $.isBreakpoint("md")
+         *
+         * @returns {boolean}
+         */
+        isMd: function () {
+            return $.isBreakpoint("md")
+        },
+
+        /**
+         * Check the current visibility of bootstrap 4 "lg" breakpoint
+         * Shorthand function alias for $.isBreakpoint("lg")
+         *
+         * @returns {boolean}
+         */
+        isLg: function () {
+            return $.isBreakpoint("lg")
+        },
+
+        /**
+         * Check the current visibility of bootstrap 4 "lg" breakpoint
+         * Shorthand function alias for $.isBreakpoint("lg")
+         *
+         * @returns {boolean}
+         */
+        isXl: function () {
+            return $.isBreakpoint("xl")
+        }
+
+    });
+
+})(jQuery);
\ No newline at end of file

vendor/assets/javascripts/bs4-breakpoint-check/jquery-breakpoint-check.min.js

+/*!
+ * jQuery bootstrap 4 breakpoint check
+ * Check the current visibility of bootstrap 3 breakpoints
+ *
+ * @example `$.isXs()` function alias for `$.isBreakpoint("xs")`
+ * @example `$.isSm()` function alias for `$.isBreakpoint("sm")`
+ * @example `$.isMd()` function alias for `$.isBreakpoint("md")`
+ * @example `$.isLg()` function alias for `$.isBreakpoint("lg")`
+ * @example `$.isXl()` function alias for `$.isBreakpoint("xl")`
+ * @version 1.0.0
+ * @copyright Jens A. (cakebake) and other contributors
+ * @license Released under the MIT license
+ */
+!function(n){n.isBreakpoint=function(e){var i,s,o;switch(e){case"xs":o="d-none d-sm-block";break;case"sm":o="d-none d-md-block";break;case"md":o="d-none d-lg-block";break;case"lg":o="d-none d-xl-block";break;case"xl":o="d-none"}return i=n("<div/>",{class:o}).appendTo("body"),s=i.is(":hidden"),i.remove(),s},n.extend(n,{isXs:function(){return n.isBreakpoint("xs")},isSm:function(){return n.isBreakpoint("sm")},isMd:function(){return n.isBreakpoint("md")},isLg:function(){return n.isBreakpoint("lg")},isXl:function(){return n.isBreakpoint("xl")}})}(jQuery);
\ No newline at end of file