Added the new localFeed ability. This allows the consumer to be able …

…to specify where to take the feed from.
jguadagno · Nov 2, 2014 · 9963f52 · 9963f52
1 parent 3386d0c
commit 9963f52
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 28 deletions.
diff --git a/Examples/thememenu.html b/Examples/thememenu.html
@@ -4,12 +4,11 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="description" content="Introduction to Twitter Bootstrap">
+        <meta name="description" content="Twitter Bootstrap Theme Switcher">
         <meta name="author" content="Joseph Guadagno">
         <link rel="shortcut icon" href="favicon.ico">
-        <title>Introduction to Twitter Bootstrap - Theme Switcher Test</title>
-        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+        <title>Twitter Bootstrap Theme Switcher Test</title>
+        <link href="css/bootstrap.min.css" rel="stylesheet">
         <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
         <!--[if lt IE 9]>
             <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
@@ -93,37 +92,34 @@ <h1>Theme Switcher Test</h1>
             <nav class="navbar navbar-inverse navbar-fixed-bottom">
                 <div class="navbar-inner navbar-content-center">
                     <div>
-                        <div class="col-xs-1 col-sm-1 "><a href="#" class="btn btn-default"><i class="fa fa-angle-left"></i></a></div>
-                        <div class="col-xs-10 col-sm-3">
+                        <div class="col-xs-1 col-sm-1 "><a href="#" class="btn btn-default">&lt;</a></div>
+                        <div class="col-xs-10 col-sm-4">
                             <p class="text-center navbar-text">&copy;2013-2014, Joseph Guadagno</p>
                         </div>
                         <div class="hidden-xs col-sm-3">
                             <a class="text-center navbar-text" href="http://www.josephguadagno.net" target="_blank" title="josephguadagno.net">josephguadagno.net</a>
                         </div>
-                        <div class="hidden-xs col-sm-2">
+                        <div class="hidden-xs col-sm-3">
                             <a class="text-center navbar-text" href="http://www.twitter.com/jguadagno" target="_blank">@jguadagno</a>
                         </div>
-                        <div class="hidden-xs col-sm-2">
-                            <p class="text-center navbar-text"><span id="width"></span> x <span id="height"></span></p>
-                        </div>
-                        <div class="col-xs-1 col-sm-1"><a href="/tour/index.html" class="btn btn-default pull-right"><i class="fa fa-angle-right"></i></a></div>
+                        <div class="col-xs-1 col-sm-1"><a href="/tour/index.html" class="btn btn-default pull-right">&gt;</a></div>
                     </div>
                 </div>
             </nav>
         </div>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+        <script src="js/jquery-1.11.1.min.js"></script>
         <!-- Include all compiled plugins (below), or include individual files as needed -->
-        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+        <script src="js/bootstrap.min.js"></script>
         <!-- Include if you want cookie support (http://plugins.jquery.com/cookie/) -->
         <!-- <script src="/js/jquery.cookie.js"></script> -->
 		<script src="../jquery.bootstrapThemeSwitcher.js"></script>
         <script>
             $().ready(function () {
 
                 // Setup the theme selectors
-                $('#ThemeSelect').bootstrapThemeSwitcher();
                 $('#ThemeList').bootstrapThemeSwitcher();
+                $('#ThemeSelect').bootstrapThemeSwitcher({localFeed: 'themes.json'});
 
                 // Change the theme
                 //$().bootstrapThemeSwitcher('switchTheme', 'default', '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

diff --git a/Examples/themes.json b/Examples/themes.json
@@ -0,0 +1,21 @@
+{
+  "themes":
+  [
+    {"name": "amelia", "cssCdn": "css/themes/amelia/bootstrap.min.css"},
+    {"name": "cerulean", "cssCdn": "css/themes/cerulean/bootstrap.min.css"},
+    {"name": "cosmo", "cssCdn": "css/themes/cosmo/bootstrap.min.css"},
+    {"name": "cyborg", "cssCdn": "css/themes/cyborg/bootstrap.min.css"},
+    {"name": "darkly", "cssCdn": "css/themes/darkly/bootstrap.min.css"},
+    {"name": "flatly", "cssCdn": "css/themes/flatly/bootstrap.min.css"},
+    {"name": "journal", "cssCdn": "css/themes/journal/bootstrap.min.css"},
+    {"name": "lumen", "cssCdn": "css/themes/lumen/bootstrap.min.css"},
+    {"name": "readable", "cssCdn": "css/themes/readable/bootstrap.min.css"},
+    {"name": "shamrock", "cssCdn": "css/themes/shamrock/bootstrap.min.css"},
+    {"name": "simplex", "cssCdn": "css/themes/simplex/bootstrap.min.css"},
+    {"name": "slate", "cssCdn": "css/themes/slate/bootstrap.min.css"},
+    {"name": "spacelab", "cssCdn": "css/themes/spacelab/bootstrap.min.css"},
+    {"name": "superhero", "cssCdn": "css/themes/superhero/bootstrap.min.css"},
+    {"name": "united", "cssCdn": "css/themes/united/bootstrap.min.css"},
+    {"name": "yeti", "cssCdn": "css/themes/yeti/bootstrap.min.css"}
+  ]
+}
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Please read the [issue guidelines](https://github.com/jguadagno/bootstrapThemeSw
 **Dynamically Load Theme Name**
 The plugin will pull in a list of the latest themes from [Bootswatch](http://www.bootswatch.com). This will populate a `select` or `ul` element with a list of themes to choose.
 **Switch the Bootstrap Theme**
-The dynamically loaded themes will automatically switch the theme when choosen.
+The dynamically loaded themes will automatically switch the theme when chosen.
 **Saves theme to a cookie**
 Takes the selected theme information and saves it to a cookie to reload later
 **Loads a theme from a cookie**
@@ -143,4 +143,11 @@ The url for the bootswatch api
 
     bootswatchApiVersion: '3'
 
-The version of the bootswatch api to use.
+The version of the bootswatch api to use.
+
+### localFeed
+
+    localFeed: ''
+
+The path to a JSON file that contains the themes you want to use. If this parameter is used, the control will be loaded
+the themes from here and not go to the bootswatchApiUrl. A sample of the json file can be found at [themes.json](/examples/themes.json)
diff --git a/bootstrapThemeSwitcher.jquery.json b/bootstrapThemeSwitcher.jquery.json
@@ -8,7 +8,7 @@
 		"Bootswatch",
 		"Themes"
     ],
-    "version": "1.0.2",
+    "version": "1.1.3",
     "author": {
         "name": "Joseph Guadagno",
 		"email": "[email protected]",

diff --git a/jquery.bootstrapThemeSwitcher.js b/jquery.bootstrapThemeSwitcher.js
@@ -1,5 +1,5 @@
 /**
-* jQuery Twitter Bootstrap Theme Switcher v1.0.2
+* jQuery Twitter Bootstrap Theme Switcher v1.0.3
 * https://github.com/jguadagno/bootstrapThemeSwitcher
 *
 * Copyright 2014, Joseph Guadagno
@@ -17,7 +17,7 @@
 
         this.$element = $(element);
         this.settings = $.extend({}, $.fn.bootstrapThemeSwitcher.defaults, options);
-        this.themes = [];
+        this.themesList = [];
         this.getThemes();
 
         return this;
@@ -57,7 +57,12 @@
             var cssLink = $(selector);
             if (cssLink.length === 0) {
                 var cssLinkHtml = "<link rel='stylesheet' id='" + id + "' href='" + cssFile + "' type='text/css' />";
-                $('head link[rel="stylesheet"]:first').before(cssLinkHtml);
+                var firstCssLink = $('head link[rel="stylesheet"]:first');
+                if (firstCssLink.length === 0) {
+                    $('head').append(cssLinkHtml);
+                } else {
+                    firstCssLink.before(cssLinkHtml);
+                }
                 cssLink = $(selector);
             }
             cssLink.attr('href', cssFile);
@@ -83,15 +88,24 @@
             this.switchTheme(themeName, themeCss);
 
         },
-
+        addTheme: function(name, cssFile, start, deleteCount) {
+            if (start === undefined) {
+                start == 0;
+            }
+            if (deleteCount === undefined) {
+                deleteCount == 0;
+            }
+            this.themesList.splice(start, deleteCount, {name: name, cssCdn: cssFile});
+            this.addThemesToControl();
+        },
         addThemesToControl: function() {
 
             if (this.$element === undefined) {
                 console.error('bootstrapThemeSelector: addThemesToControl: Element is undefined');
                 return;
             }
 
-            if (this.themes === undefined) {
+            if (this.themesList === undefined) {
                 console.error('bootstrapThemeSelector: addThemesToControl: Themes is undefined');
                 return;
             }
@@ -102,7 +116,7 @@
 
                 console.log('bootstrapThemeSelector: UL element selected');
                 this.$element.empty();
-                $.each(this.themes, function (i, value) {
+                $.each(this.themesList, function (i, value) {
 
                     var li = $("<li />")
                         .append("<a href='#'>" + value.name + "</a>")
@@ -116,7 +130,7 @@
                 console.log('bootstrapThemeSelector: SELECT element selected');
                 this.$element.empty();
 
-                $.each(this.themes, function (i, value) {
+                $.each(this.themesList, function (i, value) {
                     base.$element.append("<option value='" + value.cssCdn + "'>" + value.name + "</option>");
                 });
                 this.$element.on('change', function () {
@@ -133,6 +147,25 @@
 
             var base = this;
 
+            if (this.settings.localFeed !== null && this.settings.localFeed !== '') {
+                // Get the file
+
+                $.ajax({
+                    url: this.settings.localFeed,
+                    async: false,
+                    dataType: 'json',
+                    success: function (data) {
+                        base.themesList = data.themes;
+                        base.addThemesToControl();
+                    },
+                    error: function (jqXHR, textStatus, errorThrown) {
+                        console.error("Failed to retrieve the local feed from '" + base.settings.localFeed + "'")
+                    }
+
+                });
+                return;
+            }
+
             $.ajax({
                 url: this.settings.bootswatchApiUrl + "/" + this.settings.bootswatchApiVersion,
                 async: false,
@@ -141,14 +174,21 @@
                     if (data.themes === undefined) {
                         return null;
                     }
-                    //base.themes = data.themes;
-                    //base.themes.push({name: 'default',cssCdn: base.settings.defaultCssFile} );
-                    base.themes = data.themes;
-                    base.themes.splice(0,0, {name: 'default',cssCdn: base.settings.defaultCssFile});
+                    base.themesList = data.themes;
+                    base.themesList.splice(0,0, {name: 'default',cssCdn: base.settings.defaultCssFile});
 
                     base.addThemesToControl();
                 }
             });
+        },
+        themes : function (newThemeList) {
+            if (newThemeList === undefined) {
+                return this.themesList;   
+            }
+            else {
+                // TODO: Set the associated control.
+                this.themesList = newThemeList;
+            }
         }
     };
 
@@ -181,6 +221,8 @@
         defaultCssFile: '//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css',
         bootswatchApiUrl: 'http://api.bootswatch.com',
         bootswatchApiVersion: '3',
+        loadFromBootswatch: true,
+        localFeed: ''
     };
 
     $.fn.bootstrapThemeSwitcher.Constructor = BootstrapThemeSwitcher;