Merge branch 'master' of http://git.khansia.co.id/Nahrowi/oku-gis

# Conflicts:
#	Application/urls.py

API/urls.py

@@ -13,5 +13,21 @@ urlpatterns = [
     path('edit', views.editpoly, name='edit'),
     path('validatedit', views.validatedit, name='validatedit'),
     path('hapus', views.hapus, name='hapus'),
-    path('hasilsearch', views.hasilsearch, name='ressearch')
+    path('hasilsearch', views.hasilsearch, name='ressearch'),
+    
+    
+    path('editkependudukan/', views.editkependudukan, name='kependudukan'),
+    
+    path('edit-point-rumahsakit', views.editrumahsakit, name='rumahsakit'),
+    path('edit-point-cagarbudaya', views.editcagarbudaya, name='cagarbudaya'),
+    path('edit-point-kantor', views.editkantoradmin, name='kantor'),
+    path('edit-point-puskesmas', views.editpuskesmas, name='puskesmas'),
+    path('edit-point-ibadah', views.editibadah, name='ibadah'),
+    path('edit-point-sekolah', views.editsekolah, name='sekolah'),
+    path('edit-point-spbu', views.editspbu, name='spbu'),
+    path('edit-point-stasiun', views.editstasiun, name='stasiun'),
+    path('edit-point-terminal', views.editterminal, name='terminal'),
+    
+    path('edit-tuplah', views.edittuplah, name='tuplah'),
+    path('cobsgambar', views.cobagam, name="coba"),
 ]
\ No newline at end of file

Application/edit.py

+
+from decimal import Context
+from django.shortcuts import render, redirect
+# from django.views.generic import ListView, DetailView,  DeleteView, UpdateView, CreateView
+from django.views import View, generic
+from django.db import connection as conn
+
+def editkelurahan(request):
+    if request.method == 'POST':
+        kode_dagri = request.POST.get('kode_dagri')
+        
+        with conn.cursor() as edit_poly:
+            edit_poly.execute("SELECT json_build_object('type', 'Feature', 'administrasi', (kode_desa, desa, kecamatan, kab_kota, provinsi, jumlah_pen, jumlah_kk, luas_desa),'penduduk', (pria, wanita, belum_kawin, kawin, cerai_hidup, cerai_mati, wajib_ktp, islam, kristen, khatolik, hindu, budha, konghucu, kepercayaan_lain, u0, u5, u10, u15, u20, u25, u30, u35, u40, u45, u50, u55, u60, u65, u70, u75),'pekerjaan_pendidikan', (tidak_sekolah, belum_tamat, tamat_sd, sltp, slta, diploma_i, diploma_ii, diploma_iv, strata_ii, strata_iii, tidak_bekerja, aparatur_pemerintah, tenaga_pendidik, wiraswasta, pertanian, tenaga_kesehatan, pensiunan, pegawai, tentara, kepolisian, pedagang, petani, peternak, nelayan, karyawan, buruh, pembantu, tukang, pendeta, pastor, ustadz, dosen, guru, pilot, pengacara, notaris, arsitek, akuntan, konsultan, dokter, bidan, perawat, psikiater, sopir, lainnya), 'poi',(jml_puskesma, jml_sekolah, jml_sarib),'geometry', ST_AsGeoJSON(geom :: geometry) :: json) from geo_data_kelurahan where kode_desa = '%s'"% kode_dagri)
+            res_edit_poly = edit_poly.fetchall()
+        
+        la = []
+        lo = []
+        for i in res_edit_poly[0][0]['geometry']['coordinates'][0][0]:
+            la.append(i[0])
+            lo.append(i[1])
+            
+        avg_la = sum(la)/len(la)
+        avg_lo = sum(lo)/len(lo)
+        
+        context = {'result_poly': res_edit_poly[0][0], 'avg_la':avg_la, 'avg_lo':avg_lo}
+        return render (request, 'maps/e.html', context)
+    
+    if request.method == 'GET':
+        return redirect("apps:dashboard")
\ No newline at end of file

Application/urls.py

@@ -2,6 +2,7 @@ from django.contrib import admin
 from django.urls import path, include
 from django.contrib.auth import views as auth_views
 from . import views
+from . import edit
 
 app_name = 'apps'
 urlpatterns = [
@@ -11,7 +12,11 @@ urlpatterns = [
     path('CheckByAddress', views.SearchLocation.as_view(), name='CheckByAddress'),
     path('CheckByRadius', views.SearchRadius.as_view(), name='CheckByRadius'),
     path('CheckByPolygon', views.SearchPolygon.as_view(), name='CheckByPolygon'),
+<<<<<<< HEAD
     
     # path('usermanagement', views.User.as_view(), name='User'),
     
+=======
+    path('editkelurahan', edit.editkelurahan, name='edit_kel'),
+>>>>>>> b0c9d3a5aeeba4afcaecade4a93365407e62fc2b
 ]
\ No newline at end of file

Application/views.py

@@ -2,7 +2,7 @@ from django.shortcuts import render, redirect
 # from django.views.generic import ListView, DetailView,  DeleteView, UpdateView, CreateView
 from django.views import View, generic
 from django.db import connection as conn
-
+# from edit import *
 
 # Create your views here.
 class Dashboard(generic.TemplateView):
@@ -63,7 +63,7 @@ class Dashboard(generic.TemplateView):
             puskesmas_result.append(i[0])
             
         with conn.cursor() as rumah_sakit:
-            rumah_sakit.execute("SELECT json_build_object('type', 'Feature', 'administrasi', (a.namobj, a.remark), 'geometry', ST_AsGeoJSON(a.geom :: geometry) :: json) from geo_rumah_sakit a join geo_prov_kab b on st_intersects(a.geom,b.geom)")
+            rumah_sakit.execute("SELECT json_build_object('type', 'Feature', 'administrasi', (a.namobj, a.alamat, a.remark), 'geometry', ST_AsGeoJSON(a.geom :: geometry) :: json) from geo_rumah_sakit a join geo_prov_kab b on st_intersects(a.geom,b.geom)")
             rumah_sakit_res = rumah_sakit.fetchall()
         
         rumah_sakit_result = []
@@ -130,7 +130,9 @@ class Dashboard(generic.TemplateView):
         for i in gardu_listrik_res:
             gardu_listrik_result.append(i[0])
         
-        print(all)
+        
+
+            
         context = {
         'title':'Dashboard',
         'kelurahan':kel_res,

OKU/settings.py

@@ -86,7 +86,9 @@ DATABASES = {
         'USER': 'postgres',
         'PASSWORD' : 'khansia215758',
         'HOST': '30.10.20.102',
-        'PORT': '5432',        
+        'PORT': '5432',
+        # 'HOST': '103.126.28.66',
+        # 'PORT': '8082',        
     }
 }
 

static/css/plugin.css

@@ -1073,7 +1073,7 @@
     content: "";
     display: inline-block;
     position: absolute;
-    top: 65px;
+    top: 22px;
     width: 16px;
     transform: translateY(-50%);
     -webkit-transform: translateY(-50%);

static/js/pages/alpaca_advanced.js

+/* ------------------------------------------------------------------------------
+*
+*  # Alpaca - Basic inputs
+*
+*  Specific JS code additions for alpaca_advanced.html page
+*
+*  Version: 1.0
+*  Latest update: Mar 10, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+
+    // Option trees
+    // ------------------------------
+
+    // Option tree field
+    $("#alpaca-option-tree").alpaca({
+        "schema": {
+            "type": "number",
+            "title": "What number would like for your sports jersey?"
+        },
+        "options": {
+            "type": "optiontree",
+            "tree": {
+                "selectors": {
+                    "sport": {
+                        "schema": {
+                            "type": "string"
+                        },
+                        "options": {
+                            "type": "select",
+                            "noneLabel": "Pick a Sport..."
+                        }
+                    },
+                    "team": {
+                        "schema": {
+                            "type": "string"
+                        },
+                        "options": {
+                            "type": "select",
+                            "noneLabel": "Pick a Team..."
+                        }
+                    },
+                    "player": {
+                        "schema": {
+                            "type": "string"
+                        },
+                        "options": {
+                            "type": "select",
+                            "noneLabel": "Pick a Player..."
+                        }
+                    }
+                },
+                "order": ["sport", "team", "player"],
+                "data": [{
+                    "value": 23,
+                    "attributes": {
+                        "sport": "Basketball",
+                        "team": "Chicago Bulls",
+                        "player": "Michael Jordan"
+                    }
+                }, {
+                    "value": 33,
+                    "attributes": {
+                        "sport": "Basketball",
+                        "team": "Chicago Bulls",
+                        "player": "Scotty Pippen"
+                    }
+                }, {
+                    "value": 4,
+                    "attributes": {
+                        "sport": "Football",
+                        "team": "Green Bay Packers",
+                        "player": "Brett Favre"
+                    }
+                }, {
+                    "value": 19,
+                    "attributes": {
+                        "sport": "Baseball",
+                        "team": "Milwaukee Brewers",
+                        "player": "Robin Yount"
+                    }
+                }, {
+                    "value": 99,
+                    "attributes": {
+                        "sport": "Hockey",
+                        "player": "Wayne Gretzky"
+                    }
+                }],
+                "horizontal": true
+            },
+            "focus": false
+        }
+    });
+
+
+    // Using connector
+    $("#alpaca-option-tree-connector").alpaca({
+        "schemaSource": "../default/assets/demo_data/alpaca/optiontree-custom-schema.json",
+        "optionsSource": "../default/assets/demo_data/alpaca/optiontree-custom-options.json",
+        "options": {
+            "focus": false
+        }
+    });
+
+
+
+    // Input types
+    // ------------------------------
+
+    // Lowercase
+    $("#alpaca-lowercase").alpaca({
+        "data": "Ice cream is wonderful.",
+        "schema": {
+            "format": "lowercase"
+        },
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // Uppercase
+    $("#alpaca-uppercase").alpaca({
+        "data": "Ice cream is wonderful.",
+        "schema": {
+            "format": "uppercase"
+        },
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // Search type
+    $("#alpaca-search").alpaca({
+        "data": "Where for art thou Romeo?",
+        "schema": {
+            "type": "string"
+        },
+        "options": {
+            "type": "search",
+            "focus": false,
+            "label": "Search"
+        }
+    });
+
+
+    // Integer type
+    $("#alpaca-integer").alpaca({
+        "data": 20,
+        "options": {
+            "type": "integer",
+            "label": "Age:",
+            "focus": false
+        },
+        "schema": {
+            "minimum": 18,
+            "maximum": 25,
+            "exclusiveMinimum": true,
+            "exclusiveMaximum": true,
+            "divisibleBy": 2
+        }
+    });
+
+
+    // Password type
+    $("#alpaca-password").alpaca({
+        "data": "password",
+        "schema": {
+            "format": "password"
+        },
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // Email type
+    $("#alpaca-email").alpaca({
+        "data": "support",
+        "schema": {
+            "format": "email"
+        },
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // IP address type
+    $("#alpaca-ipv4").alpaca({
+        "data": "100.60",
+        "schema": {
+            "format": "ip-address"
+        },
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // URL type
+    $("#alpaca-url").alpaca({
+        "data": "http://www.alpacajs.org",
+        "options": {
+            "type": "url",
+            "focus": false
+        },
+        "schema": {
+            "format": "uri"
+        }
+    });
+
+
+    // Currency type
+    $("#alpaca-currency").alpaca({
+        "options": {
+            "type": "currency",
+            "focus": false
+        }
+    });
+
+
+    // Personal name type
+    $("#alpaca-name").alpaca({
+        "data": "Oscar Zoroaster Phadrig Isaac Norman Henkel Emmannuel Ambroise Diggs",
+        "options": {
+            "type": "personalname",
+            "focus": false
+        }
+    });
+
+
+
+    // File inputs
+    // ------------------------------
+
+    // Basic file input
+    $("#alpaca-file").alpaca({
+        "data": "",
+        "options": {
+            "type": "file",
+            "label": "Ice Cream Photo:",
+            "helper": "Pick your favorite ice cream picture.",
+            "focus": false
+        },
+        "schema": {
+            "type": "string",
+            "format": "uri"
+        }
+    });
+
+
+    // Static mode
+    $("#alpaca-file-static").alpaca({
+        "data": "/abc.html",
+        "options": {
+            "type": "file",
+            "label": "Ice Cream Photo:",
+            "helper": "Pick your favorite ice cream picture.",
+            "focus": false
+        },
+        "schema": {
+            "type": "string",
+            "format": "uri"
+        },
+        "view": "bootstrap-display"
+    });
+
+
+    // Styled file input
+    $("#alpaca-file-styled").alpaca({
+        "data": "",
+        "options": {
+            "type": "file",
+            "label": "Ice Cream Photo:",
+            "helper": "Pick your favorite ice cream picture.",
+            "id": "file-styled",
+            "focus": false
+        },
+        "schema": {
+            "type": "string",
+            "format": "uri"
+        },
+        "postRender": function(control) {
+            $("#file-styled").uniform({
+                fileButtonClass: 'action btn bg-blue'
+            });
+        }
+    });
+
+
+    // Disabled file input
+    $("#alpaca-file-disabled").alpaca({
+        "data": "",
+        "options": {
+            "type": "file",
+            "label": "Ice Cream Photo:",
+            "helper": "Pick your favorite ice cream picture.",
+            "disabled": true,
+            "id": "file-styled-disabled",
+            "focus": false
+        },
+        "schema": {
+            "type": "string",
+            "format": "uri"
+        },
+        "postRender": function(control) {
+            $("#file-styled-disabled").uniform({
+                fileButtonClass: 'action btn bg-blue'
+            });
+        }
+    });
+
+
+
+    // Selector helpers
+    // ------------------------------
+
+    // Country selector
+    $("#alpaca-country").alpaca({
+        "options": {
+            "type": "country",
+            "focus": false
+        }
+    });
+
+
+    // Searchable country selector
+    $("#alpaca-country-search").alpaca({
+        "options": {
+            "type": "country",
+            "id": "country-search",
+            "focus": false
+        },
+        "postRender": function(control) {
+            $('#country-search').select2();
+        }
+    });
+
+
+    // State selector
+    $("#alpaca-state").alpaca({
+        "options": {
+            "type": "state",
+            "focus": false
+        }
+    });
+
+    // Searchable state selector
+    $("#alpaca-state-search").alpaca({
+        "options": {
+            "type": "state",
+            "id": "state-search",
+            "focus": false
+        },
+        "postRender": function(control) {
+            $('#state-search').select2();
+        }
+    });
+
+
+
+    // CKEditor
+    // ------------------------------
+
+    // Full featured CKEditor
+    $("#alpaca-ckeditor-full").alpaca({
+        "data": "Ice cream is a <b>frozen</b> dessert usually made from <i>dairy products</i>, such as milk and cream, and often combined with fruits or other ingredients and flavors.",
+        "options": {
+            "type": "ckeditor"
+        }
+    });
+
+});

static/js/pages/alpaca_basic.js

+/* ------------------------------------------------------------------------------
+*
+*  # Alpaca - Basic inputs
+*
+*  Specific JS code additions for alpaca_basic.html page
+*
+*  Version: 1.0
+*  Latest update: Mar 10, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Text input
+    // ------------------------------
+
+    // Basic example
+    $("#alpaca-basic").alpaca({
+        "data": "I Love Alpaca Ice Cream!",
+        "options": {
+            "focus": false
+        }
+    });
+
+
+    // Display only view
+    $("#alpaca-static").alpaca({
+        "data": "I Love Alpaca Ice Cream!",
+        "schema": {
+            "type": "string"
+        },
+        "view": "bootstrap-display"
+    });
+
+
+    // Input field label
+    $("#alpaca-input-label").alpaca({
+        "data": "I Love Alpaca Ice Cream!",
+        "options": {
+            "label": "Input label",
+            "focus": false
+        }
+    });
+
+
+    // Static input label
+    $("#alpaca-static-label").alpaca({
+        "data": "I Love Alpaca Ice Cream!",
+        "schema": {
+            "type": "string"
+        },
+        "options": {
+            "label": "Input label"
+        },
+        "view": "bootstrap-display"
+    });
+
+
+    // Validation
+    $("#alpaca-validation").alpaca({
+        "data": "Mint",
+        "schema": {
+            "minLength": 3,
+            "maxLength": 5
+        },
+        "options": {
+            "label": "Ice Cream",
+            "helper": "Your favorite ice cream?",
+            "size": 30,
+            "focus": false
+        }
+    });
+
+
+    // Validation with predefined value
+    $("#alpaca-validation-predefined").alpaca({
+        "data": "Mint Chocolate",
+        "schema": {
+            "minLength": 3,
+            "maxLength": 5
+        },
+        "options": {
+            "label": "Ice Cream",
+            "helper": "Please tell us the kind of ice cream you love most!",
+            "size": 30,
+            "focus": false,
+            "placeholder": "Enter an ice cream flavor"
+        }
+    });
+
+
+    // Disallow empty spaces
+    $("#alpaca-disallow-empty").alpaca({
+        "schema": {
+            "type": "string"
+        },
+        "options": {
+            "type": "lowercase",
+            "label": "User Name",
+            "disallowEmptySpaces": true,
+            "helper": "Type something with empty space",
+            "focus": false
+        }
+    });
+
+
+    // Disallow values
+    $("#alpaca-disallow-values").alpaca({
+        "data": "Mickey Mantle",
+        "schema": {
+            "type": "string",
+            "disallow": ["Mickey Mantle", "Mickey"]
+        },
+        "options": {
+            "label": "Name",
+            "focus": false
+        }
+    });
+
+
+    // Typeahead integration
+    $("#alpaca-typeahead").alpaca({
+        "schema": {
+            "type": "string"
+        },
+        "options": {
+            "type": "text",
+            "label": "Company Name",
+            "helper": "Select the name of a computing company",
+            "placeholder": "Enter 'a'",
+            "focus": false,
+            "typeahead": {
+                "config": {
+                    "autoselect": true,
+                    "highlight": true,
+                    "hint": true,
+                    "minLength": 1
+                },
+                "datasets": {
+                    "type": "local",
+                    "source": function(query) {
+                        var companies = ["Google", "Amazon", "Microsoft", "Apple", "Spotify", "Alpaca", "Another company", "Facebook"];
+                        var results = [];
+                        for (var i = 0; i < companies.length; i++) {
+                            var add = true;
+                            if (query) {
+                                add = (companies[i].indexOf(query) === 0);
+                            }
+                            if (add) {
+                                results.push({
+                                    "value": companies[i]
+                                });
+                            }
+                        }
+                        return results;
+                    }
+                }
+            }
+        }
+    });
+
+
+    // Maxlength integration
+    $("#alpaca-maxlength").alpaca({
+        "schema": {
+            "type": "string",
+            "minLength": 3,
+            "maxLength": 25
+        },
+        "options": {
+            "type": "text",
+            "label": "What is your name?",
+            "constrainMaxLength": true,
+            "constrainMinLength": true,
+            "showMaxLengthIndicator": true,
+            "focus": false
+        },
+        "data": "Jackie Robinson"
+    });
+
+
+
+    // Textareas
+    // ------------------------------
+
+    // Basic textarea
+    $("#alpaca-textarea").alpaca({
+        "data": "Ice cream or ice-cream is a frozen dessert usually made from dairy products, such as milk and cream, and often combined with fruits or other ingredients and flavours.",
+        "options": {
+            "type": "textarea",
+            "label": "Receipt",
+            "helper": "Receipt for Best Homemade Ice Cream",
+            "rows": 4,
+            "cols": 80,
+            "focus": false
+        }
+    });
+
+
+    // With placeholder
+    $("#alpaca-textarea-placeholder").alpaca({
+        "options": {
+            "type": "textarea",
+            "label": "Receipt",
+            "helper": "Receipt for Best Homemade Ice Cream",
+            "placeholder": "Enter your favorite ice cream here...",
+            "rows": 4,
+            "cols": 80,
+            "focus": false
+        }
+    });
+
+
+    // Display mode
+    $("#alpaca-textarea-static").alpaca({
+        "data": "Ice cream or ice-cream is a frozen dessert usually made from dairy products, such as milk and cream, and often combined with fruits or other ingredients and flavours.",
+        "options": {
+            "type": "textarea",
+            "label": "Receipt",
+            "rows": 6,
+            "cols": 80,
+            "focus": false
+        },
+        "view": "bootstrap-display"
+    });
+
+
+    // Single field render
+    $("#alpaca-textarea-override").alpaca({
+        "data": "My name is Dr. Jacobian and I am a neuroscientist from the Cornell University.  I've perfected a DNA transcription process which makes it possible for the first time to use DNA nucleotides to store pedabytes of information in real-time.",
+        "schema": {
+            "type": "string"
+        },
+        "options": {
+            "type": "textarea",
+            "label": "Tell us about yourself",
+            "view": "bootstrap-display"
+        }
+    });
+
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select
+    $("#alpaca-select").alpaca({
+        "data": "coffee",
+        "schema": {
+            "enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
+        },
+        "options": {
+            "label": "Ice cream",
+            "helper": "What flavor of ice cream do you prefer?",
+            "focus": false
+        }
+    });
+
+
+    // External data source
+    $("#alpaca-select-external").alpaca({
+        "options": {
+            "label": "Ice cream",
+            "helper": "Guess my favorite ice cream?",
+            "type": "select",
+            "focus": false,
+            "dataSource": "../default/assets/demo_data/alpaca/selects.json"
+        }
+    });
+
+
+    // Select2 select
+    $("#alpaca-select2").alpaca({
+        "data": "coffee",
+        "schema": {
+            "enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
+        },
+        "options": {
+            "label": "Ice cream",
+            "helper": "What flavor of ice cream do you prefer?",
+            "id": "select2-basic",
+            "focus": false
+        },
+        "postRender": function(control) {
+            $('#select2-basic').select2({
+                minimumResultsForSearch: Infinity
+            });
+        }
+    });
+
+
+    // Select2 select with search
+    $("#alpaca-select2-search").alpaca({
+        "data": "coffee",
+        "schema": {
+            "enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
+        },
+        "options": {
+            "label": "Ice cream",
+            "helper": "What flavor of ice cream do you prefer?",
+            "id": "select2-search",
+            "focus": false
+        },
+        "postRender": function(control) {
+            $('#select2-search').select2();
+        }
+    });
+
+
+    // Multiselect
+    $("#alpaca-multiselect").alpaca({
+        "data": ["Vanilla", "Chocolate"],
+        "schema": {
+            "type": "array",
+            "items": {
+                "title": "Ice Cream",
+                "type": "string",
+                "enum": ["Vanilla", "Chocolate", "Strawberry", "Mint"],
+                "minItems": 2,
+                "maxItems": 3
+            }
+        },
+        "options": {
+            "label": "Ice cream",
+            "helper": "Guess my favorite ice cream?",
+            "type": "select",
+            "size": 5,
+            "id": "multiselect",
+            "focus": false
+        },
+        "postRender": function(control) {
+            $("#multiselect").parent().find("input[type=checkbox]").uniform();
+        }
+    });
+
+
+    // Multiselect with remote data
+    $("#alpaca-multiselect-remote").alpaca({
+        "options": {
+            "label": "Select your favorite flavor of ice cream",
+            "type": "select",
+            "multiple": true,
+            "helper": "Guess my favorite ice cream?",
+            "size": 3,
+            "focus": false,
+            "id": "multiselect-remote",
+            "dataSource": "../default/assets/demo_data/alpaca/selects.json"
+        },
+        "postRender": function(control) {
+            $("#multiselect-remote").parent().find("input[type=checkbox]").uniform();
+        }
+    });
+
+});

static/js/pages/alpaca_controls.js

+/* ------------------------------------------------------------------------------
+*
+*  # Alpaca - Basic inputs
+*
+*  Specific JS code additions for alpaca_controls.html page
+*
+*  Version: 1.0
+*  Latest update: Mar 10, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Checkboxes
+    // ------------------------------
+
+    // Checkbox with label
+    $("#alpaca-checkbox-label").alpaca({
+        "data": true,
+        "options": {
+            "label": "Question:",
+            "rightLabel": "Do you like Alpaca?"
+        }
+    });
+
+
+    // Display only mode
+    $("#alpaca-checkbox-static").alpaca({
+        "data": false,
+        "view": "bootstrap-display",
+        "options": {
+            "label": "Registered?"
+        }
+    });
+
+
+    // Styled checkbox
+    $("#alpaca-checkbox-styled").alpaca({
+        "data": true,
+        "options": {
+            "label": "Question:",
+            "rightLabel": "Do you like Alpaca?",
+            "fieldClass": "checkbox-styled"
+        },
+        "postRender": function(control) {
+            $('.checkbox-styled').find('input[type=checkbox]').uniform();
+        }
+    });
+
+
+    // Disabled checkbox
+    $("#alpaca-checkbox-styled-disabled").alpaca({
+        "data": true,
+        "options": {
+            "label": "Question:",
+            "rightLabel": "Do you like Alpaca?",
+            "fieldClass": "checkbox-styled-disabled",
+            "disabled": true
+        },
+        "postRender": function(control) {
+            $('.checkbox-styled-disabled').find('input[type=checkbox]').uniform();
+        }
+    });
+
+
+    // Switchery toggle
+    $("#alpaca-switchery").alpaca({
+        "data": true,
+        "options": {
+            "label": "Question:",
+            "rightLabel": "Do you like Alpaca?",
+            "fieldClass": "switchery-demo"
+        },
+        "postRender": function(control) {
+
+            // Init Switchery
+            var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery-demo input[type=checkbox]'));
+            elems.forEach(function(html) {
+              var switchery = new Switchery(html);
+            });
+
+            // Add proper spacing
+            $('.switchery-demo').find('.checkbox').addClass('checkbox-switchery');
+        }
+    });
+
+
+    // Switchery toggle
+    $("#alpaca-switchery-disabled").alpaca({
+        "data": true,
+        "options": {
+            "label": "Question:",
+            "rightLabel": "Do you like Alpaca?",
+            "fieldClass": "switchery-disabled-demo",
+            "disabled": true
+        },
+        "postRender": function(control) {
+
+            // Init Switchery
+            var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery-disabled-demo input[type=checkbox]'));
+            elems.forEach(function(html) {
+              var switchery = new Switchery(html);
+            });
+
+            // Add proper spacing
+            $('.switchery-disabled-demo').find('.checkbox').addClass('checkbox-switchery');
+        }
+    });
+
+
+    // Basic checkbox list
+    $("#alpaca-checkbox-list").alpaca({
+        "data": ["sandwich", "cookie", "drink"],
+        "schema": {
+            "type": "array",
+            "enum": ["sandwich", "chips", "cookie", "drink"]
+        },
+        "options": {
+            "type": "checkbox",
+            "label": "What would you like with your order?",
+            "optionLabels": ["A Sandwich", "Potato Chips", "A Cookie", "Soft Drink"]
+        }
+    });
+
+
+    // Styled checkbox list
+    $("#alpaca-checkbox-list-styled").alpaca({
+        "data": ["sandwich", "cookie", "drink"],
+        "schema": {
+            "type": "array",
+            "enum": ["sandwich", "chips", "cookie", "drink"]
+        },
+        "options": {
+            "type": "checkbox",
+            "label": "What would you like with your order?",
+            "optionLabels": ["A Sandwich", "Potato Chips", "A Cookie", "Soft Drink"],
+            "fieldClass": "checkbox-styled-list"
+        },
+        "postRender": function(control) {
+            $('.checkbox-styled-list').find('input[type=checkbox]').uniform();
+        }
+    });
+
+
+
+    // Radios
+    // ------------------------------
+
+    // Basic radios
+    $("#alpaca-radio-basic").alpaca({
+        "data": "green",
+        "options": {
+            "type": "radio",
+            "label": "Favorite Color",
+            "helper": "Pick your favorite color",
+            "optionLabels": {
+                "red": "Red",
+                "green": "Green",
+                "blue": "Blue",
+                "white": "White",
+                "black": "Black"
+            }
+        },
+        "schema": {
+            "required": true,
+            "enum": ["red", "green", "blue", "white", "black"]
+        }
+    });
+
+
+    // Disabled mode
+    $("#alpaca-radio-basic-disabled").alpaca({
+        "data": "Jimi Hendrix",
+        "schema": {
+            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
+        },
+        "options": {
+            "type": "radio",
+            "label": "Who is your favorite guitarist?",
+            "vertical": true,
+            "disabled": true
+        }
+    });
+
+
+    // Styled radios
+    $("#alpaca-radio-styled").alpaca({
+        "data": "Jimi Hendrix",
+        "schema": {
+            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
+        },
+        "options": {
+            "type": "radio",
+            "label": "Who is your favorite guitarist?",
+            "fieldClass": "radio-styled-demo",
+            "vertical": true
+        },
+        "postRender": function(control) {
+            $('.radio-styled-demo').find('input[type=radio]').uniform({
+                radioClass: 'choice'
+            });
+        }
+    });
+
+
+    // Disabled mode
+    $("#alpaca-radio-styled-disabled").alpaca({
+        "data": "Jimi Hendrix",
+        "schema": {
+            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
+        },
+        "options": {
+            "type": "radio",
+            "label": "Who is your favorite guitarist?",
+            "vertical": true,
+            "fieldClass": "radio-styled-disabled-demo",
+            "disabled": true
+        },
+        "postRender": function(control) {
+            $('.radio-styled-disabled-demo').find('input[type=radio]').uniform({
+                radioClass: 'choice'
+            });
+        }
+    });
+
+
+    // Required radios
+    $("#alpaca-radio-required").alpaca({
+        "data": "Coffee2",
+        "options": {
+            "label": "Ice cream",
+            "helper": "Guess my favorite ice cream?",
+            "optionLabels": ["Vanilla Flavor", "Chocolate Flavor", "Coffee Flavor"]
+        },
+        "schema": {
+            "required": true,
+            "enum": ["Vanilla", "Chocolate", "Coffee"]
+        }
+    });
+
+
+    // Options
+    $("#alpaca-radio-options").alpaca({
+        "data": "Jimi Hendrix",
+        "schema": {
+            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
+        },
+        "options": {
+            "type": "radio",
+            "label": "Who is your favorite guitarist?",
+            "removeDefaultNone": true,
+            "vertical": true
+        }
+    });
+
+
+
+    // Tokenfield
+    // ------------------------------
+
+    // Basic setup
+    $("#alpaca-tokenfield").alpaca({
+        "schema": {
+            "title": "Character Names",
+            "type": "string"
+        },
+        "options": {
+            "type": "token",
+            "focus": false,
+            "tokenfield": {
+                "autocomplete": {
+                    "source": ["marty", "doc", "george", "biff", "lorraine", "mr. strickland"],
+                    "delay": 100
+                },
+                "showAutocompleteOnFocus": true
+            }
+        },
+        "data": "marty,doc,george,biff"
+    });
+
+
+    // Display only mode
+    $("#alpaca-tokenfield-static").alpaca({
+        "schema": {
+            "title": "Character Names",
+            "type": "string"
+        },
+        "options": {
+            "type": "token",
+            "focus": false,
+            "tokenfield": {
+                "autocomplete": {
+                    "source": ["marty", "doc", "george", "biff", "lorraine", "mr. strickland"],
+                    "delay": 100
+                },
+                "showAutocompleteOnFocus": true
+            }
+        },
+        "data": "marty,doc,george,biff",
+        "view": "bootstrap-display"
+    });
+
+});

static/js/pages/animations_css3.js

+/* ------------------------------------------------------------------------------
+*
+*  # CSS animations
+*
+*  Specific JS code additions for components_animations.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Toggle animations
+    $("body").on("click", ".animation", function (e) {
+
+        // Get animation class from "data" attribute
+        var animation = $(this).data("animation");
+
+        // Apply animation once per click
+        $(this).parents(".panel").addClass("animated " + animation).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () {
+            $(this).removeClass("animated " + animation);
+        });
+        e.preventDefault();
+    });
+
+});

static/js/pages/animations_velocity_basic.js

+/* ------------------------------------------------------------------------------
+*
+*  # Basic Velocity.js animations
+*
+*  Specific JS code additions for extension_velocity_basic.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Run basic animations
+    $('.velocity-property').on('click', function (e) {
+        e.preventDefault();
+        
+        // Get animation class and panel
+        var property = $(this).data("property");
+        var value = $(this).data("value");
+
+        var property2 = $(this).data("property2");
+        var value2 = $(this).data("value2");
+
+        var property3 = $(this).data("property3");
+        var value3 = $(this).data("value3");
+
+        // Add options
+		var animateMap = {},
+		animateOptions = {
+			easing: 'easeInOut',
+			duration: 250
+		};
+		animateMap[property] = value;
+		animateMap[property2] = value2;
+		animateMap[property3] = value3;
+
+
+        // Add animation class to panel element
+        $(this).parents(".demo-velocity-box")
+        .velocity(animateMap, animateOptions)
+        .velocity("reverse", {
+        	delay: 1000,
+        	complete: function() {
+        		$(this).removeAttr('style');
+        	}
+        });
+    });
+    
+});

static/js/pages/animations_velocity_examples.js

+/* ------------------------------------------------------------------------------
+*
+*  # Advanced Velocity.js examples
+*
+*  Specific JS code additions for extension_velocity_examples.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Animation options
+    // ------------------------------
+
+	// Properties animation
+	$('.velocity-properties').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Chained animation
+	$('.velocity-chained').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity({
+			marginLeft: 20
+		}).velocity('reverse', {
+			delay: 1000
+		}).velocity({
+			marginRight: 20 
+		}).velocity('reverse', {
+			delay: 1000
+		}).velocity({
+			opacity: 0.5
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Stagger animation
+	$('.velocity-stagger').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity('transition.slideUpIn', {
+			stagger: 500
+		});
+	});
+
+
+	// Drag animation
+	$('.velocity-drag').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity('transition.slideUpBigIn', {
+			duration: 1000,
+			drag: true
+		});
+	});
+
+
+	// Backwards animation
+	$('.velocity-backwards').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next().find('.panel').velocity('transition.slideDownOut', {
+			stagger: 400,
+			backwards: true
+		})
+	    .velocity({ opacity: 1 }, {
+	      duration: 500,
+	      display: "block"
+	    });
+	});
+
+
+
+    // Animation callbacks
+    // ------------------------------
+
+	// Begin callback
+	$('.velocity-begin').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next('.row').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}, {
+			begin: function() {
+				alert('Begin callback example');
+			}
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Complete callback
+	$('.velocity-complete').on('click', function (e) {
+		e.preventDefault();
+
+		$(this).parent().next('.row').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}, {
+			complete: function() {
+				alert('Complete callback example');
+			}
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+	// Progress callback animation
+	$('.velocity-progress').on('click', function (e) {
+		e.preventDefault();
+
+		var $percentComplete = $("#percentComplete"),
+		    $timeRemaining = $("#timeRemaining");
+
+		$(this).parent().next('.row').velocity({
+			marginLeft: 20,
+			marginRight: 20,
+			opacity: 0.5
+		}, {
+			duration: 1000,
+			progress: function(elements, percentComplete, timeRemaining, timeStart) {
+				$percentComplete.html(Math.round(percentComplete * 100) + "% complete.");
+				$timeRemaining.html(timeRemaining + "ms remaining.");
+			}
+		}).velocity('reverse', {
+			delay: 1000,
+	    	complete: function() {
+	    		$(this).removeAttr('style');
+	    	}
+		})
+	});
+
+
+
+    // Animate layout on page load
+    // ------------------------------
+
+	// Hide elements first
+	$(".sidebar, .navbar, .navbar-brand, .navbar-text, .navbar-nav > li, .page-header, .page-title, .page-header .heading-elements, .breadcrumb, .breadcrumb-elements > li, .content > .panel, .content .row > [class*=col-], .footer")
+		.css('opacity', 0);
+
+
+	// Animate when Pace loading is done
+    Pace.on('done', function () {
+
+		// Layout parts
+		$(".navbar, .navbar-brand, .navbar-text, .navbar-nav > li, .page-header, .page-title, .page-header .heading-elements, .breadcrumb, .breadcrumb-elements > li, .content > .panel, .content .row > [class*=col-], .footer")
+			.css('opacity', 1)
+			.velocity("transition.slideDownIn", {
+				stagger: 200,
+				duration: 200,
+				complete: function(elements) {
+					$(this).removeAttr('style');
+				}
+		});
+
+
+		// Sidebar
+		$(".sidebar")
+			.css({opacity: 0, borderColor: 'transparent'})
+			.velocity("transition.slideUpIn", {
+				delay: 100,
+				duration: 500,
+				display: 'table-cell',
+				complete: function(elements) {
+					$(this).removeAttr('style');
+				}
+		});
+
+
+		// Navigation list on load
+		$(".navigation > li")
+			.css('opacity', 0)
+			.velocity("transition.slideLeftIn", {
+				delay: 500,
+				stagger: 75,
+				duration: 200,
+				complete: function(elements) {
+					$(this).removeAttr('style')
+				}
+		});
+
+
+		// Navigation list on click
+		$(".navigation .has-ul").on('click', function() {
+			if ($(this).parent('li').hasClass('active')) {
+				$(this).next('ul').children('li').css('opacity', 0).velocity("transition.fadeIn", {
+					delay: 150,
+					stagger: 30,
+					duration: 200,
+					complete: function(elements) {
+						$(this).removeAttr('style')
+					}
+				});
+			} else {
+				$(this).next('ul').children('li').css('opacity', 0).velocity("transition.slideLeftOut", {
+					duration: 200,
+					complete: function(elements) {
+						$(this).removeAttr('style')
+					}
+				});
+			}
+		});
+    });
+
+});

static/js/pages/animations_velocity_ui.js

+/* ------------------------------------------------------------------------------
+*
+*  # Velocity.js UI
+*
+*  Specific JS code additions for extension_velocity_ui.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Run animations
+    $('.velocity-animation').on('click', function (e) {
+
+        // Get animation class and panel
+        var animation = $(this).data("animation");
+
+        // Add animation class to panel element
+        $(this).parents(".panel").velocity("callout." + animation, { stagger: 500 });
+        e.preventDefault();
+    });
+
+
+    // Run transitions
+    $('.velocity-transition').on('click', function (e) {
+
+        // Get animation class and panel
+        var transition = $(this).data("transition");
+
+        // Add animation class to panel element
+        $(this).parents(".panel").velocity("transition." + transition, { 
+        	stagger: 1000,
+        	duration: 1000
+		});
+
+        e.preventDefault();
+    });
+
+
+	// Clear styles after 2 seconds
+	window.setInterval(function(){
+		$('.velocity-transition').parents('.panel').removeAttr('style');
+	}, 2000);
+
+});

static/js/pages/appearance_draggable_panels.js

+/* ------------------------------------------------------------------------------
+ *
+ *  # Draggable panels
+ *
+ *  Specific JS code additions for appearance_draggable_panels.html page
+ *
+ *  Version: 1.0
+ *  Latest update: Aug 1, 2015
+ *
+ * ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Sortable rows
+    $(".row-sortable").sortable({
+        connectWith: '.row-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Sortable column
+    $(".column-panel-sortable").sortable({
+        connectWith: '.column-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Exclude element from sort
+    $(".sortable-exclude").sortable({
+        connectWith: '.custom-sortable',
+        items: '.panel:not(.skip-sort)',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Change sort handle
+    $(".sortable-heading").sortable({
+        connectWith: '.heading-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '.panel-title, [data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Sortable panel
+    $(".sortable-panel").sortable({
+        connectWith: '.panel-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Sortable elements
+    $(".elements-sortable").sortable({
+        connectWith: '.elements-sortable',
+        items: '.panel-heading, .table-responsive',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+});

static/js/pages/appearance_panel_heading.js

+/* ------------------------------------------------------------------------------
+*
+*  # Panel heading elements
+*
+*  Specific JS code additions for appearance_panel_heading.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Sliders
+    // -------------------------
+
+    // jQuery UI slider
+    $(".ui-slider").slider({
+        range: true,
+        min: 0,
+        max: 60,
+        values: [ 10, 50 ]
+    });
+
+
+    // NoUI slider
+    var slider_noui = document.getElementById('noui-slider-demo');
+    noUiSlider.create(slider_noui, {
+        start: [ 4000, 8000 ],
+        connect: true,
+        range: {
+            'min': [  2000 ],
+            'max': [ 10000 ]
+        }
+    });
+
+
+
+    // Selects
+    // -------------------------
+
+    // SelectBoxIt dropdowns
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        width: 220
+    });
+
+
+    // Bootstrap select
+    $('.bootstrap-select').selectpicker();
+
+
+    // Select2 selects
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        width: 220
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        dropRight: true,
+        onChange: function(option, checked, select) {
+            $.uniform.update();
+        }
+    });
+
+
+
+    // Form components
+    // -------------------------
+
+    // Touchspin spinners
+    $(".touchspin-postfix").TouchSpin({
+        min: 0,
+        max: 100,
+        step: 0.1,
+        decimals: 2,
+        postfix: '%'
+    });
+
+
+    // Switchery toggles
+    if (Array.prototype.forEach) {
+        var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
+        elems.forEach(function(html) {
+            var switchery = new Switchery(html);
+        });
+    }
+    else {
+        var elems = document.querySelectorAll('.switchery');
+
+        for (var i = 0; i < elems.length; i++) {
+            var switchery = new Switchery(elems[i]);
+        }
+    }
+
+    // Bootstrap switches
+    $(".switch").bootstrapSwitch();
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({ radioClass: 'choice' });
+
+
+    // Single file uploader
+    $('.file-styled').uniform({
+        fileButtonClass: 'action btn bg-warning-400 btn-icon',
+        fileButtonHtml: '<i class="icon-upload"></i>'
+    });
+
+
+
+    // Other components
+    // -------------------------
+
+    // jQuery UI Sortable
+    $(".sortable").sortable({
+        connectWith: '.sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+});

static/js/pages/blog_single.js

+/* ------------------------------------------------------------------------------
+*
+*  # Blog page - detailed
+*
+*  Specific JS code additions for blog page kit - detailed view
+*
+*  Version: 1.0
+*  Latest update: Oct 10, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+    
+
+    // CKEditor
+    // ------------------------------
+
+    CKEDITOR.replace( 'add-comment', {
+        height: '200px',
+        removeButtons: 'Subscript,Superscript',
+        toolbarGroups: [
+            { name: 'styles' },
+            { name: 'editing',     groups: [ 'find', 'selection' ] },
+            { name: 'basicstyles', groups: [ 'basicstyles' ] },
+            { name: 'paragraph',   groups: [ 'list', 'blocks', 'align' ] },
+            { name: 'links' },
+            { name: 'insert' },
+            { name: 'colors' },
+            { name: 'tools' },
+            { name: 'others' },
+            { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] }
+        ]
+    });    
+});

static/js/pages/chat_layouts.js

+/* ------------------------------------------------------------------------------
+*
+*  # Chat layouts
+*
+*  Specific JS code additions for chat_layouts.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+	// Scroll to bottom of the chat on page load. Mainly for demo
+	$('.chat-list, .chat-stacked').scrollTop($(this).height());
+
+});

static/js/pages/colors_blue.js

+/* ------------------------------------------------------------------------------
+*
+*  # Blue palette colors
+*
+*  Specific JS code additions for colors_blue.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-blue'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-blue'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-blue',
+        dropdownCssClass: 'bg-blue'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-blue',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted blue notice..', { theme: 'bg-blue-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'blue Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-blue22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-blue-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#03A9F4'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-blue text-blue-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-blue'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-blue"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-blue"><div class="arrow"></div><h3 class="popover-title bg-blue"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-blue"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_brown.js

+/* ------------------------------------------------------------------------------
+*
+*  # Brown palette colors
+*
+*  Specific JS code additions for colors_brown.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-brown'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-brown'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-brown',
+        dropdownCssClass: 'bg-brown'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-brown',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted brown notice..', { theme: 'bg-brown-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'brown Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-brown22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-brown-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#795548'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-brown text-brown-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-brown'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-brown"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-brown"><div class="arrow"></div><h3 class="popover-title bg-brown"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-brown"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_danger.js

+/* ------------------------------------------------------------------------------
+*
+*  # Danger palette colors
+*
+*  Specific JS code additions for colors_danger.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-danger-400'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-danger-400'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-danger-400',
+        dropdownCssClass: 'bg-danger-400'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-danger-400',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted danger notice..', { theme: 'bg-danger-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-danger'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#EF5350'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-danger text-danger-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-danger'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-danger-400"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-danger-400"><div class="arrow"></div><h3 class="popover-title bg-danger-400"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-danger-400"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_green.js

+/* ------------------------------------------------------------------------------
+*
+*  # Green palette colors
+*
+*  Specific JS code additions for colors_green.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-green-600'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-green-600'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-green-600',
+        dropdownCssClass: 'bg-green-600'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-green-600',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted green notice..', { theme: 'bg-green', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-green'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#7CB342'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-green text-green-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-green'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-green-600"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-green-600"><div class="arrow"></div><h3 class="popover-title bg-green-600"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-green-600"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_grey.js

+/* ------------------------------------------------------------------------------
+*
+*  # Grey palette colors
+*
+*  Specific JS code additions for colors_grey.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-grey-600'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-grey-600'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-grey-600',
+        dropdownCssClass: 'bg-grey-600'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-grey-600',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted grey notice..', { theme: 'bg-grey', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-grey'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#757575'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-grey text-grey-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-grey'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-grey-600"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-grey-600"><div class="arrow"></div><h3 class="popover-title bg-grey-600"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-grey-600"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_indigo.js

+/* ------------------------------------------------------------------------------
+*
+*  # Indigo palette colors
+*
+*  Specific JS code additions for colors_indigo.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-indigo-400'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-indigo-400'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-indigo-400',
+        dropdownCssClass: 'bg-indigo-400'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-indigo',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted indigo notice..', { theme: 'bg-indigo-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'indigo Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-indigo22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-indigo-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#3F51B5'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-indigo text-indigo-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-indigo'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-indigo"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-indigo"><div class="arrow"></div><h3 class="popover-title bg-indigo"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-indigo"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_info.js

+/* ------------------------------------------------------------------------------
+*
+*  # Info palette colors
+*
+*  Specific JS code additions for colors_info.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-info'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-info'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-info',
+        dropdownCssClass: 'bg-info'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-info',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted info notice..', { theme: 'bg-info-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-info-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#00BCD4'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-info text-info-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-info'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-info"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-info"><div class="arrow"></div><h3 class="popover-title bg-info"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-info"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_orange.js

+/* ------------------------------------------------------------------------------
+*
+*  # Orange palette colors
+*
+*  Specific JS code additions for colors_orange.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-orange-600'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-orange-600'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-orange-600',
+        dropdownCssClass: 'bg-orange-600'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-orange-600',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted orange notice..', { theme: 'bg-orange', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-orange'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#FB8C00'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-orange text-orange-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-orange'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-orange-600"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-orange-600"><div class="arrow"></div><h3 class="popover-title bg-orange-600"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-orange-600"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_pink.js

+/* ------------------------------------------------------------------------------
+*
+*  # Pink palette colors
+*
+*  Specific JS code additions for colors_pink.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-pink'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-pink'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-pink',
+        dropdownCssClass: 'bg-pink'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-pink',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted pink notice..', { theme: 'bg-pink-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'pink Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-pink22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-pink-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#E91E63'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-pink text-pink-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-pink'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-pink"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-pink"><div class="arrow"></div><h3 class="popover-title bg-pink"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-pink"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_primary.js

+/* ------------------------------------------------------------------------------
+*
+*  # Primary palette colors
+*
+*  Specific JS code additions for colors_primary.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-primary'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-primary'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-primary',
+        dropdownCssClass: 'bg-primary'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-primary',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted primary notice..', { theme: 'bg-primary-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-primary-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#2196F3'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-primary text-primary-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-primary'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-primary"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-primary"><div class="arrow"></div><h3 class="popover-title bg-primary"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-primary"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_purple.js

+/* ------------------------------------------------------------------------------
+*
+*  # Purple palette colors
+*
+*  Specific JS code additions for colors_purple.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-purple-400'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-purple-400'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-purple-400',
+        dropdownCssClass: 'bg-purple-400'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-purple-400',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted purple notice..', { theme: 'bg-purple-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-purple'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#7E57C2'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-purple text-purple-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-purple'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-purple-400"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-purple-400"><div class="arrow"></div><h3 class="popover-title bg-purple-400"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-purple-400"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_slate.js

+/* ------------------------------------------------------------------------------
+*
+*  # Slate palette colors
+*
+*  Specific JS code additions for colors_slate.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-slate'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-slate'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-slate',
+        dropdownCssClass: 'bg-slate'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-slate',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted slate notice..', { theme: 'bg-slate-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'slate Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-slate22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-slate-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#607D8B'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-slate text-slate-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-slate'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-slate"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-slate"><div class="arrow"></div><h3 class="popover-title bg-slate"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-slate"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_success.js

+/* ------------------------------------------------------------------------------
+*
+*  # Success palette colors
+*
+*  Specific JS code additions for colors_success.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-success'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-success'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-success',
+        dropdownCssClass: 'bg-success'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-success',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted success notice..', { theme: 'bg-success-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-success-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#4CAF50'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-success text-success-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-success'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-success"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-success"><div class="arrow"></div><h3 class="popover-title bg-success"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-success"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_teal.js

+/* ------------------------------------------------------------------------------
+*
+*  # Teal palette colors
+*
+*  Specific JS code additions for colors_teal.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-teal'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-teal'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-teal',
+        dropdownCssClass: 'bg-teal'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-teal',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted teal notice..', { theme: 'bg-teal-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'teal Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-teal22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-teal-400'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#009688'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-teal text-teal-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-teal'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-teal"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-teal"><div class="arrow"></div><h3 class="popover-title bg-teal"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-teal"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_violet.js

+/* ------------------------------------------------------------------------------
+*
+*  # Violet palette colors
+*
+*  Specific JS code additions for colors_violet.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-violet-400'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-violet-400'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-violet-400',
+        dropdownCssClass: 'bg-violet-400'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-violet-400',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted violet notice..', { theme: 'bg-violet-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-violet'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#7E57C2'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-violet text-violet-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-violet'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-violet-400"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-violet-400"><div class="arrow"></div><h3 class="popover-title bg-violet-400"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-violet-400"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/colors_warning.js

+/* ------------------------------------------------------------------------------
+*
+*  # Warning palette colors
+*
+*  Specific JS code additions for colors_warning.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Selects
+    // ------------------------------
+
+    // Basic select2
+    $('.select').select2({
+        minimumResultsForSearch: Infinity,
+        containerCssClass: 'bg-warning-400'
+    });
+
+
+    // Select2 ultiselect item color
+    $('.select-item-color').select2({
+        containerCssClass: 'bg-warning-400'
+    });
+
+
+    // Select2 dropdown menu color
+    $('.select-menu-color').select2({
+        containerCssClass: 'bg-warning-400',
+        dropdownCssClass: 'bg-warning-400'
+    });
+
+
+    // Multiselect
+    $('.multiselect').multiselect({
+        buttonClass: 'btn bg-warning-400',
+        nonSelectedText: 'Select your state',
+        onChange: function() {
+            $.uniform.update();
+        }
+    });
+
+
+    // SelectBoxIt
+    $(".selectbox").selectBoxIt({
+        autoWidth: false,
+        theme: "bootstrap"
+    });
+
+
+    // Bootstrap select
+    $.fn.selectpicker.defaults = {
+        iconBase: '',
+        tickIcon: 'icon-checkmark-circle'
+    }
+    $('.bootstrap-select').selectpicker();
+
+
+
+    // Notifications
+    // ------------------------------
+
+    // jGrowl
+    $('.growl-launch').on('click', function () {
+        $.jGrowl('I am a well highlighted warning notice..', { theme: 'bg-warning-400', header: 'Well highlighted' });
+    });
+
+
+    // PNotify
+    $('.pnotify-launch').on('click', function () {
+        new PNotify({
+            title: 'Info Notice',
+            text: 'Check me out! I\'m a notice.',
+            icon: 'icon-info22',
+            animate_speed: 200,
+            delay: 5000,
+            addclass: 'bg-warning'
+        });
+    });
+
+
+
+    // Form components
+    // ------------------------------
+
+    // Switchery toggle
+    var switchery = document.querySelector('.switch');
+    var init = new Switchery(switchery, {color: '#FF7043'});
+
+
+    // Checkboxes and radios
+    $(".styled, .multiselect-container input").uniform({
+        radioClass: 'choice',
+        checkboxClass: 'checker',
+        wrapperClass: "border-warning text-warning-600"
+    });
+
+
+    // File input
+    $(".file-styled").uniform({
+        fileButtonClass: 'action btn bg-warning'
+    });
+
+
+
+    // Popups
+    // ------------------------------
+
+    // Tooltip
+    $('[data-popup=tooltip-custom]').tooltip({
+        template: '<div class="tooltip"><div class="bg-warning-400"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div></div>'
+    });
+
+
+    // Popover title
+    $('[data-popup=popover-custom]').popover({
+        template: '<div class="popover border-warning-400"><div class="arrow"></div><h3 class="popover-title bg-warning-400"></h3><div class="popover-content"></div></div>'
+    });
+
+
+    // Popover background color
+    $('[data-popup=popover-solid]').popover({
+        template: '<div class="popover bg-warning-400"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    });
+
+});

static/js/pages/components_affix.js

+/* ------------------------------------------------------------------------------
+*
+*  # Affix and scrollspy
+*
+*  Specific JS code additions for components_affix.html page
+*
+*  Version: 1.1
+*  Latest update: Feb 25, 2016
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+	// Resize sidebar on scroll
+    // ------------------------------
+
+    // Resize fixed sidebar vertically when bottom reached
+    function resizeFixed() {
+        $(window).on('load scroll', function() {
+          if ($(window).scrollTop() > $(document).height() - $(window).height() - 70) {
+            $('.sidebar-fixed').addClass('fixed-sidebar-space');
+          }
+          else {
+            $('.sidebar-fixed').removeClass('fixed-sidebar-space');
+          }
+        });
+    }
+
+
+    // Nice scroll
+    // ------------------------------
+
+	// Setup
+	function initScroll() {
+	    $(".sidebar-fixed .sidebar-content").niceScroll({
+	        mousescrollstep: 100,
+	        cursorcolor: '#ccc',
+	        cursorborder: '',
+	        cursorwidth: 3,
+	        hidecursordelay: 100,
+	        autohidemode: 'scroll',
+	        horizrailenabled: false,
+	        preservenativescrolling: false,
+	        railpadding: {
+	        	right: 0.5,
+	        	top: 1.5,
+	        	bottom: 1.5
+	        }
+	    });
+	}
+
+	// Resize
+	function resizeScroll() {
+		$('.sidebar-fixed .sidebar-content').getNiceScroll().resize();
+	}
+
+	// Remove
+	function removeScroll() {
+		$(".sidebar-fixed .sidebar-content").getNiceScroll().remove();
+		$(".sidebar-fixed .sidebar-content").removeAttr('style').removeAttr('tabindex');
+	}
+
+
+    // Affix detached sidebar
+    // ------------------------------
+
+    // Init nicescroll when sidebar affixed
+	$('.sidebar-fixed').on('affix.bs.affix', function() {
+		initScroll();
+		resizeFixed();
+	});
+
+    // When effixed top, remove scrollbar and its data
+    $('.sidebar-fixed').on('affix-top.bs.affix', function() {
+		removeScroll();
+
+        $(".sidebar-fixed .sidebar-content").removeAttr('style').removeAttr('tabindex');
+    });
+
+	// Attach BS affix component to the sidebar
+	$('.sidebar-fixed').affix({
+		offset: {
+			top: $('.sidebar-fixed').offset().top - 20 // top offset - computed line height
+		}
+	});
+
+
+    // Remove affix and scrollbar on mobile
+    $(window).on('resize', function() {
+        setTimeout(function() {            
+            if($(window).width() <= 768) {
+
+                // Remove nicescroll on mobiles
+                removeScroll();
+
+                // Remove affix on mobile
+                $(window).off('.affix')
+                $('.sidebar-fixed').removeData('affix').removeClass('affix affix-top affix-bottom');
+            }
+        }, 100);
+    }).resize();
+
+});

static/js/pages/components_buttons.js

+/* ------------------------------------------------------------------------------
+*
+*  # Buttons and button dropdowns
+*
+*  Specific JS code additions for components_buttons.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+
+    // Buttons with progress/spinner
+    // ------------------------------
+
+    // Initialize on button click
+    $('.btn-loading').click(function () {
+        var btn = $(this);
+        btn.button('loading')
+        setTimeout(function () {
+            btn.button('reset')
+        }, 3000)
+    });
+
+    // Button with spinner
+    Ladda.bind('.btn-ladda-spinner', {
+        dataSpinnerSize: 16,
+        timeout: 2000
+    });
+
+    // Button with progress
+    Ladda.bind('.btn-ladda-progress', {
+        callback: function(instance) {
+            var progress = 0;
+            var interval = setInterval(function() {
+                progress = Math.min(progress + Math.random() * 0.1, 1);
+                instance.setProgress(progress);
+
+                if( progress === 1 ) {
+                    instance.stop();
+                    clearInterval(interval);
+                }
+            }, 200);
+        }
+    });
+
+
+
+    // Animated dropdowns
+    // ------------------------------
+
+    // CSS3 animations
+    $('.dropdown-animated, .btn-group-animated').on('show.bs.dropdown', function(e){
+        $(this).find('.dropdown-menu').addClass('animated bounceIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
+            $(this).removeClass('animated bounceIn')
+        });
+    });
+
+
+    //
+    // Velocity animations
+    //
+
+    // Open
+    $('.dropdown-velocity, .btn-group-velocity').on('show.bs.dropdown', function(e){
+        $(this).find('.dropdown-menu').velocity('transition.slideUpIn', {
+            duration: 200
+        })
+    });
+
+    // Close
+    $('.dropdown-velocity, .btn-group-velocity').on('hide.bs.dropdown', function(e){
+        $(this).find('.dropdown-menu').velocity('transition.slideLeftOut', {
+            duration: 200,
+            complete: function() {
+                $(this).removeAttr('style');
+            }
+        })
+    });
+
+
+    //
+    // jQuery animations
+    //
+
+    // Open
+    $('.dropdown-fade, .btn-group-fade').on('show.bs.dropdown', function(e){
+        $(this).find('.dropdown-menu').fadeIn(250);
+    });
+
+    // Close
+    $('.dropdown-fade, .btn-group-fade').on('hide.bs.dropdown', function(e){
+        $(this).find('.dropdown-menu').fadeOut(250);
+    });
+
+});

static/js/pages/components_dropdowns.js

+/* ------------------------------------------------------------------------------
+*
+*  # Dropdown menus
+*
+*  Specific JS code additions for components_dropdowns.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+	// Styled checkboxes/radios
+	$('.styled').uniform({
+		radioClass: 'choice'
+	});
+
+
+	// Switchery toggles
+	var toggle = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
+	
+	toggle.forEach(function(html) {
+		var switchery = new Switchery(html);
+    });
+
+});

static/js/pages/components_media.js

+/* ------------------------------------------------------------------------------
+*
+*  # Media objects and lists
+*
+*  Specific JS code additions for components_media.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+	// Switchery toggles
+	var elems = Array.prototype.slice.call(document.querySelectorAll('.switch'));
+
+	elems.forEach(function(html) {
+		var switchery = new Switchery(html);
+	});
+
+
+    // Styled checkboxes/radios
+	$(".styled").uniform({
+		radioClass: 'choice'
+    });
+
+});

static/js/pages/components_navs.js

+/* ------------------------------------------------------------------------------
+*
+*  # Collapsible, accordion and other navs
+*
+*  Specific JS code additions for components_navs.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Accordion component sorting
+    $(".accordion-sortable").sortable({
+        connectWith: '.accordion-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+
+    // Collapsible component sorting
+    $(".collapsible-sortable").sortable({
+        connectWith: '.collapsible-sortable',
+        items: '.panel',
+        helper: 'original',
+        cursor: 'move',
+        handle: '[data-action=move]',
+        revert: 100,
+        containment: '.content-wrapper',
+        forceHelperSize: true,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        tolerance: 'pointer',
+        start: function(e, ui){
+            ui.placeholder.height(ui.item.outerHeight());
+        }
+    });
+
+});

static/js/pages/components_thumbnails.js

+/* ------------------------------------------------------------------------------
+*
+*  # Thumbnails
+*
+*  Specific JS code additions for components_thumbnails.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+	// Switchery toggle
+    var elems = Array.prototype.slice.call(document.querySelectorAll('.switch'));
+    elems.forEach(function(html) {
+		var switchery = new Switchery(html);
+    });
+
+
+    // Styled checkboxes/radios
+    $('.styled').uniform();
+
+
+    // Image lightbox
+    $('[data-popup="lightbox"]').fancybox({
+	    padding: 3
+    });
+
+});