Skip to content

Commit

Permalink
Allowed switch of libraries in iconfinder.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@arallsopp
arallsopp committed May 27, 2022
1 parent 4424476 commit d8959f4
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 33 deletions.
34 changes: 29 additions & 5 deletions docs/build/tester/iconfinder.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@
<div id="outer">
<div layout-padding="">
<md-card>
<md-card-title>
<md-card-title-text>
<md-card-title layout="row">
<md-card-title-text flex="">
<span class="md-headline">
<span data-ng-if="!externalLibrary">Hass Hue Icons </span>
<span data-ng-if="externalLibrary">Icon Library </span>
Expand All @@ -38,12 +38,36 @@
<span class="md-subhead">Use the search box below to look for
<span data-ng-if="!externalLibrary">a fixture name, bulb type or keyword</span>
<span data-ng-if="externalLibrary">an icon by name or keyword</span>
<div data-ng-if="mapName">
The cheat sheet is using an <a data-ng-href="{{externalLibrary}}" target="_blank">external script</a>.
To revert to hass-hue-icons, click <a href="iconfinder.html">here</a>.
<div data-ng-if="mapName">
<p>
<span data-ng-if="activeExternalLibrary">
The cheat sheet is using <strong><a ng-href="{{activeExternalLibrary.repo}}">{{activeExternalLibrary.name}}</a></strong> by {{activeExternalLibrary.author}}.
</span>
<span data-ng-if="!activeExternalLibrary">
The cheat sheet is using an <a data-ng-href="{{externalLibrary}}" target="_blank">external script</a>.
</span>To revert to hass-hue-icons, click <a href="iconfinder.html">here</a>.
</div>
</span>
</md-card-title-text>
<md-menu>
<md-button aria-label="Open library interactions menu" ng-click="openMenu($mdMenu, $event)">
Load Another Library
</md-button>
<md-menu-content>
<md-menu-item data-ng-repeat="lib in supportedLibraries">
<md-button ng-click="newWindow(lib)">
<strong>{{lib.name}}</strong> by {{lib.author}}
</md-button>
</md-menu-item>

<md-menu-divider data-ng-if="mapName"></md-menu-divider>
<md-menu-item data-ng-if="mapName">
<md-button ng-click="newWindow()">
<strong>Hass Hue Icons</strong> by arallsopp
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-card-title>
<md-card-content>
<md-input-container class="md-block" flex="">
Expand Down
90 changes: 62 additions & 28 deletions docs/build/tester/iconfinder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,94 +4,117 @@ var app = angular.module("aaIconFinder", ['ngMaterial', 'ngMessages']);
app.controller('AppCtrl', ['$scope', '$http','$mdToast',
function($scope, $http, $mdToast) {
$scope.searchTerm = '';

$scope.init = function(){
$scope.supportedLibraries = [{
name: 'bha-icons',
url: 'https://cdn.jsdelivr.net/gh/hulkhaugen/hass-bha-icons/dist/hass-bha-icons.js',
map: 'BHA_ICONS_MAP',
author: 'hulkhaugen',
repo: 'https://github.com/hulkhaugen/hass-bha-icons'
}, {
name: 'crypto-icons',
url: 'https://cdn.jsdelivr.net/gh/GH2user/hass-crypto-icons/dist/hass-crypto-icons.js',
map: 'CRYPTO_ICONS_MAP',
author: 'GH2user',
repo: 'https://github.com/GH2user/hass-crypto-icons'
}, {
name: 'custom-icons',
url: 'https://cdn.jsdelivr.net/gh/Mariusthvdb/custom-icons/custom-icons.js',
map: 'CUSTOM_ICONS_MAP',
author: 'Mariusthvdb',
repo: 'https://github.com/Mariusthvdb/custom-icons'
}];
$scope.activeExternalLibrary = false;

$scope.init = function () {
$scope.parseURLParams();
};

// set up current icon if provided
$scope.parseURLParams = function() {
$scope.parseURLParams = function () {
let params = new URLSearchParams(document.location.search);
$scope.searchTerm = params.get('search')
? params.get('search')
: '';

if(params.get('library')){
if (params.get('library')) {
console.log('loading external library');

$scope.externalLibrary = params.get('library');
$scope.mapName = params.get('map');

$scope.activeExternalLibrary = $scope.supportedLibraries.find(lib => lib.url == $scope.externalLibrary);

$scope.loadExternalIconLibrary();

}else{
} else {
console.log('using default library');
$scope.externalLibrary = false;
$scope.importFromScript();
}
};

$scope.copyDirectLink = function(){
$scope.copyDirectLink = function () {
let url = new URL(window.location.toString()),
params = new URLSearchParams(url.search);
if (params.get('search')){
params.set('search',$scope.searchTerm)
}else{
if (params.get('search')) {
params.set('search', $scope.searchTerm)
} else {
params.append('search', $scope.searchTerm);
}

$scope.copyToClipboard(url.origin + url.pathname + '?' + params.toString(),'Link copied to clipboard')
$scope.copyToClipboard(url.origin + url.pathname + '?' + params.toString(), 'Link copied to clipboard')
};

$scope.copyToClipboard = function (content,msg) {
$scope.copyToClipboard = function (content, msg) {
let copyElement = document.createElement("textarea");
copyElement.style.position = 'fixed';
copyElement.style.opacity = '0';
copyElement.textContent = (content);
copyElement.textContent = (content);

let body = document.getElementsByTagName('body')[0];
body.appendChild(copyElement);
copyElement.select();
document.execCommand('copy');
body.removeChild(copyElement);

$scope.showToast(typeof (msg)==="undefined" ? 'Copied to clipboard' : msg);
$scope.showToast(typeof (msg) === "undefined" ? 'Copied to clipboard' : msg);
};

$scope.showToast = function(message){
$scope.showToast = function (message) {
$mdToast.show(
$mdToast.simple()
.textContent(message)
.hideDelay(3000))
.then(function() {
.then(function () {
// Toast dismissed.
}).catch(function() {
}).catch(function () {
//toast failed or got closed over
});
};


$scope.updateSearchTerm = function(text){
$scope.updateSearchTerm = function (text) {
$scope.searchTerm = text;
};

$scope.loadExternalIconLibrary = function(){
$scope.loadExternalIconLibrary = function () {

var scriptEl = document.createElement('script');

console.log('starting');

scriptEl.setAttribute('src', $scope.externalLibrary);
scriptEl.setAttribute('type','text/javascript');
scriptEl.onload = function($scope){
scriptEl.setAttribute('type', 'text/javascript');
scriptEl.onload = function ($scope) {
var scope = angular.element(document.querySelector('#outer')).scope();
scope.$apply(function(){
scope.$apply(function () {
scope.importFromVariableScript();
});
};
document.head.appendChild(scriptEl);
};

$scope.importFromVariableScript = function() {
$scope.importFromVariableScript = function () {
/* BASED ON scope.importFromScript which is neater */
console.log('importing from variable script');

Expand All @@ -118,7 +141,7 @@ app.controller('AppCtrl', ['$scope', '$http','$mdToast',
};


$scope.importFromScript = function() {
$scope.importFromScript = function () {
console.log('importing!');
let icons = [];
for (const icon in HUE_ICONS_MAP) {
Expand All @@ -137,22 +160,33 @@ app.controller('AppCtrl', ['$scope', '$http','$mdToast',
};



/**
* Create filter function for a query string
*/
$scope.matchesSearchTerm = function(icon){
if(!$scope.searchTerm){
$scope.matchesSearchTerm = function (icon) {
if (!$scope.searchTerm) {
return true;
}else {
} else {
let searchTerms = $scope.searchTerm.toLowerCase().split(' ');

for(let i=0;i<searchTerms.length;i++){
for (let i = 0; i < searchTerms.length; i++) {
if (icon.value.indexOf(searchTerms[i]) !== -1) return true;
}
}
};

$scope.openMenu = function ($mdMenu, ev) {
$mdMenu.open(ev);
};

$scope.newWindow = function (library) {
if (typeof library === "undefined"){
window.open('iconfinder.html');
}else{
window.open('iconfinder.html?library=' + library.url + '&map=' + library.map);
}
}

$scope.init();
}
]);
Expand Down

0 comments on commit d8959f4

Please sign in to comment.