add blackberry themes icon selector

api/pages/settings-tab-editor-tabs.php

@@ -158,14 +158,20 @@ function get_page_settings_tab_editor_tabs($Organizr)
 		        </div>
 		    </div>
 	        <div class="row">
-		        <div class="form-group col-lg-6">
+		        <div class="form-group col-lg-4">
 		            <label class="control-label" for="new-tab-form-chooseImage" lang="en">Choose Image</label>
 		            <select class="form-control tabIconImageList" id="new-tab-form-chooseImage" name="chooseImage"><option lang="en">Select or type Image</option></select>
 		        </div>
-		        <div class="form-group col-lg-6">
+		        <div class="form-group col-lg-4">
 		            <label class="control-label" for="new-tab-form-chooseIcon" lang="en">Choose Icon</label>
 					<select class="form-control tabIconIconList" id="new-tab-form-chooseIcon" name="chooseIcon"><option lang="en">Select or type Icon</option></select>
 		        </div>
+		        <div class="form-group col-lg-4">
+		            <label class="control-label" for="new-tab-form-chooseBlackberry" lang="en">Choose Blackberry Theme Icon</label>
+		            <button id="new-tab-form-chooseBlackberry" class="btn btn-xs btn-primary waves-effect waves-light form-control" onclick="showBlackberryThemes(\'new-tab-form-inputImageNew\');" type="button">
+		                <i class="fa fa-search"></i>&nbsp; <span lang="en">Choose</span>
+		            </button>
+		        </div>
 		    </div>
 	        <div class="form-group">
 	            <label class="control-label" for="new-tab-form-inputImageNew" lang="en">Tab Image</label>
@@ -220,14 +226,20 @@ function get_page_settings_tab_editor_tabs($Organizr)
 		        </div>
 		    </div>
 	        <div class="row">
-		        <div class="form-group col-lg-6">
+		        <div class="form-group col-lg-4">
 		            <label class="control-label" for="edit-tab-form-chooseImage" lang="en">Choose Image</label>
 		            <select class="form-control tabIconImageList" id="edit-tab-form-chooseImage" name="chooseImage"><option lang="en">Select or type Image</option></select>
 		        </div>
-		        <div class="form-group col-lg-6">
+		        <div class="form-group col-lg-4">
 		            <label class="control-label" for="edit-tab-form-chooseIcon" lang="en">Choose Icon</label>
 					<select class="form-control tabIconIconList" id="edit-tab-form-chooseIcon" name="chooseIcon"><option lang="en">Select or type Icon</option></select>
 		        </div>
+		        <div class="form-group col-lg-4">
+		            <label class="control-label" for="edit-tab-form-chooseBlackberry" lang="en">Choose Blackberry Theme Icon</label>
+		            <button id="edit-tab-form-chooseBlackberry" class="btn btn-xs btn-primary waves-effect waves-light form-control" onclick="showBlackberryThemes(\'edit-tab-form-inputImage\');" type="button">
+		                <i class="fa fa-search"></i>&nbsp; <span lang="en">Choose</span>
+		            </button>
+		        </div>
 		    </div>
 	        <div class="form-group">
 	            <label class="control-label" for="edit-tab-form-inputImage" lang="en">Tab Image</label>

css/organizr.css

@@ -1397,6 +1397,9 @@ img.dark-logo-side {
     max-width: 160px;
     max-height: 35px;
 }
+.themeIcon {
+    height: 25px;
+}
 .select2-container {
     box-sizing: border-box;
     display: inline-block;
@@ -1405,9 +1408,13 @@ img.dark-logo-side {
     vertical-align: middle;
     width: 100% !important;
 }
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+    line-height: 38px;
+}
 span.select2-selection.select2-selection--single,
 span.select2-selection.select2-selection--multiple{
     background: inherit;
+    height: 38px;
 }
 img.img-chooser {
     width: 20px;

js/functions.js

@@ -9758,6 +9758,92 @@ function checkIfTabNameExists(tabName){
         return true;
     }
 }
+function getLatestBlackberryThemes() {
+	return $.ajax({
+		url: 'https://api.github.com/repos/Archmonger/Blackberry-Themes/contents/Themes',
+	});
+}
+function getBlackberryTheme(theme) {
+	return $.ajax({
+		url: 'https://api.github.com/repos/Archmonger/Blackberry-Themes/contents/Themes/' +  theme + '/Icons',
+	});
+}
+function showBlackberryThemes(target){
+	getLatestBlackberryThemes().success(function(data) {
+		try {
+			let themes = '';
+			$.each(data, function(i,v) {
+				if(v.name !== 'Beta'){
+					themes += `<a href="javascript:selectBlackberryTheme('${v.name}','${target}');" class="list-group-item"><span><img class="themeIcon pull-right" src="https://raw.githubusercontent.com/Archmonger/Blackberry-Themes/master/Themes/${v.name}/Icons/home.png"></span>${v.name}</a>`;
+				}
+			});
+			themes = `<div class="list-group">${themes}</div>`;
+			let html = `
+			<div class="panel">
+				<div class="bg-org2">
+					<div class="panel-heading">Choose a Theme</div>
+					<div class="panel-body text-left">${themes}</div>
+				</div>
+			</div>
+			`;
+			swal({
+				content: createElementFromHTML(html),
+				button: 'Close',
+				className: 'orgErrorAlert',
+				dangerMode: true
+			});
+		}catch(e) {
+			organizrCatchError(e,data);
+		}
+	}).fail(function(xhr) {
+		OrganizrApiError(xhr);
+	});
+}
+function selectBlackberryTheme(theme, target){
+	getBlackberryTheme(theme).success(function(data) {
+		try {
+			let icons = '';
+			$.each(data, function(i,v) {
+				v.name = v.name.split('.')[0];
+				v.name = cleanClass(v.name);
+				icons += `<a href="javascript:swal.close();$('#${target}').val('${v.download_url}')"><img alt="${v.name}" data-toggle="tooltip" data-placement="top" title="" data-original-title="${v.name}"src="${v.download_url}" ></a>`;
+			});
+			icons = `<div id="gallery-content-center">${icons}</div>`;
+			let html = `
+			<div class="panel">
+				<div class="bg-org2">
+					<div class="panel-heading">Choose an Icon</div>
+					<div class="panel-body text-left">${icons}</div>
+				</div>
+			</div>
+			`;
+			swal({
+				content: createElementFromHTML(html),
+				buttons: {
+					back: {
+						text: "Back To Themes",
+						value: "back",
+						dangerMode: true,
+						className: "bg-org-alt"
+					}
+				},
+				className: 'orgErrorAlert',
+				dangerMode: true
+			})
+			.then((value) => {
+				switch (value) {
+					case "back":
+						showBlackberryThemes();
+						break;
+				}
+			});
+		}catch(e) {
+			organizrCatchError(e,data);
+		}
+	}).fail(function(xhr) {
+		OrganizrApiError(xhr);
+	});
+}
 function orgErrorAlert(error){
 	let showError = false;
 	if(typeof activeInfo === 'undefined'){