JAVASCRIPT   9

themeswitcher.js

Guest on 5th June 2021 05:23:58 PM

  1. !function($) {
  2.  
  3.     $(function() {
  4.  
  5.  
  6.        
  7.         $("head").append($('<link rel="stylesheet">').attr("href", "assets/jquery.minicolors.css") );
  8.         $("head").append($('<link rel="stylesheet">').attr("href", "assets/themeswitcher.css") );
  9.         $("head").append($('<link rel="stylesheet/less">').attr("href", "assets/theme.less") );
  10.        
  11.  
  12.         $.getScript("assets/jquery.minicolors.js", function(data, textStatus, jqxhr) {
  13.  
  14.             less = {
  15.                 env: "development"
  16.             };
  17.            
  18.             $.getScript('assets/less.js', function() {
  19.                
  20.                 build();
  21.                 events();
  22.  
  23.             })
  24.  
  25.         })
  26.  
  27.         $.getScript("assets/cssbeautify.js", function(data, textStatus, jqxhr) {});
  28.  
  29.  
  30.         function build() {
  31.  
  32.             /*var themeswitcher = $('<div/>').attr('id', 'themeswitcher').html('<p>Select a color</p>')
  33.  
  34.             var minicolor = $('<input/>').attr('id','minicolor')
  35.             var exportcss = $('<div/>').attr('id', 'exportcss').addClass('btn btn-default btn-small btn-sm').text('Get CSS');*/
  36.  
  37.             // Colors Skins
  38.             var colors = [
  39.                 {"hex": "#0088CC", "name": "Bootstrap Blue"},
  40.                 {"hex": "#63B76C", "name": "Fern"},
  41.                 {"hex": "#E28913", "name": "Golden Belt"},
  42.                 {"hex": "#C32148", "name": "Maroon Flush"},
  43.                 {"hex": "#FB8989", "name": "Geraldine"},
  44.                 {"hex": "#E97451", "name": "Burnt Sienna"},
  45.                 {"hex": "#D84437", "name": "Valencia"},
  46.                 {"hex": "#563D7C", "name": "Victoria"}
  47.             ];
  48.  
  49.             themeswitcher.append(minicolor)
  50.  
  51.             $.each(colors, function(i, v){
  52.                 var box = $('<div/>').addClass('colorbox').css('background-color', v.hex).attr('title', v.name).data('hex',v.hex)
  53.                 themeswitcher.append(box)
  54.             })    
  55.  
  56.             themeswitcher.append(exportcss);
  57.            
  58.             $('body').append(themeswitcher)
  59.  
  60.             $('input#minicolor').minicolors({
  61.                 defaultValue: '#50a846',
  62.                 position: 'bottom right',
  63.                 change: function(color) {
  64.                     setColor(color);
  65.                 }
  66.             });
  67.  
  68.             var modal =
  69.             '<div class="modal hide fade" id="exportcss-modal">'
  70.             +  '<div class="modal-dialog">'
  71.             +    '<div class="modal-content">'
  72.             +      '<div class="modal-header">'
  73.             +        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'
  74.             +        '<h4 class="modal-title">Theme CSS</h4>'
  75.             +      '</div>'
  76.             +      '<div class="modal-body">'
  77.             +        '<div class="alert alert-success">Create a new stylesheet with this css and include it after Bootstrap.</div>'
  78.             +        '<textarea id="exportcss-text" class="form-control" readonly></textarea>'
  79.             +      '</div>'
  80.             +      '<div class="modal-footer">'
  81.             +        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
  82.             +      '</div>'
  83.             +    '</div>'
  84.             +  '</div>'
  85.             +'</div>';
  86.  
  87.             $("body").append(modal);
  88.  
  89.         }
  90.         function events() {
  91.            
  92.             $('.colorbox').click(function() {
  93.                 var $this = $(this)
  94.                 setColor($this.data('hex'))
  95.  
  96.                 $('.colorbox').removeClass('selected')
  97.                 $this.addClass('selected')
  98.             })
  99.  
  100.             $('#exportcss').click(function() {
  101.                
  102.                 $("#exportcss-text").text("");
  103.  
  104.                 var $style = $('style[id^="less:"]');
  105.  
  106.                 $("#exportcss-text").text(
  107.                     $style[0].innerText  || $style[0].innerHTML || ($style[0].styleSheet && $style[0].styleSheet.cssText)
  108.                 );
  109.  
  110.  
  111.                 $("#exportcss-modal").modal("show");
  112.  
  113.                 css = $("#exportcss-text").text();
  114.  
  115.                 $("#exportcss-text").text(cssbeautify(css, {
  116.                     indent: "\t",
  117.                     autosemicolon: true
  118.                     }
  119.                 ));
  120.  
  121.             })
  122.         }
  123.  
  124.         function setColor (color) {
  125.             less.modifyVars({ themeColor : color });
  126.         }
  127.  
  128.     })
  129.  
  130. }(window.jQuery)

Raw Paste

' + '

' + '' + '
' + '
' +''; $("body").append(modal); } function events() { $('.colorbox').click(function() { var $this = $(this) setColor($this.data('hex')) $('.colorbox').removeClass('selected') $this.addClass('selected') }) $('#exportcss').click(function() { $("#exportcss-text").text(""); var $style = $('style[id^="less:"]'); $("#exportcss-text").text( $style[0].innerText || $style[0].innerHTML || ($style[0].styleSheet && $style[0].styleSheet.cssText) ); $("#exportcss-modal").modal("show"); css = $("#exportcss-text").text(); $("#exportcss-text").text(cssbeautify(css, { indent: "\t", autosemicolon: true } )); }) } function setColor (color) { less.modifyVars({ themeColor : color }); } }) }(window.jQuery)

Login or Register to edit or fork this paste. It's free.