edit-icon-license-list.php 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <?
  2. $src = '../LICENSE-ICONS-3RD-PARTY.json';
  3. // check for ajax request
  4. if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
  5. return file_put_contents($src, json_encode($_POST['list'], JSON_PRETTY_PRINT));
  6. exit();
  7. }
  8. ?>
  9. <!doctype html>
  10. <meta charset="utf-8">
  11. <title>Zammad Icons</title>
  12. <style>
  13. html {
  14. padding: 0 14px 14px 0;
  15. }
  16. body {
  17. margin: 28px 28px 14px 14px;
  18. background: hsl(210,14%,97%);
  19. font-family: sans-serif;
  20. font-size: 13px;
  21. }
  22. .controls {
  23. border: 1px solid hsl(167,72%,60%);
  24. border-radius: 5px;
  25. margin: 0 0 28px 14px;
  26. display: table;
  27. box-shadow: 0 1px hsl(199,44%,96%);
  28. }
  29. .controls label {
  30. padding: 7px 10px;
  31. float: left;
  32. cursor: pointer;
  33. }
  34. .controls label:not(:last-child) {
  35. border-right: 1px solid hsl(167,72%,60%);
  36. }
  37. .controls input {
  38. display: none;
  39. }
  40. .controls input:checked + label {
  41. background: hsl(167,72%,60%);
  42. color: white;
  43. }
  44. .icons {
  45. display: flex;
  46. flex-wrap: wrap;
  47. }
  48. .icon-holder {
  49. border: 1px solid hsl(199,44%,93%);
  50. background: white;
  51. box-shadow: 0 2px hsl(210,7%,96%);
  52. margin: 0 0 14px 14px;
  53. display: flex;
  54. flex-direction: column;
  55. align-items: center;
  56. justify-content: center;
  57. flex: 1;
  58. }
  59. .icon-holder.is-filtered {
  60. display: none;
  61. }
  62. .icon {
  63. position: relative;
  64. padding: 14px;
  65. width: 100%;
  66. box-sizing: border-box;
  67. display: flex;
  68. justify-content: center;
  69. background: hsl(210,14%,98%);
  70. }
  71. .icon.is-light {
  72. background: hsl(210,14%,88%);
  73. }
  74. .icon svg {
  75. width: 128px;
  76. height: 128px;
  77. position: relative;
  78. }
  79. .icon-body {
  80. padding: 14px 14px 10px;
  81. display: flex;
  82. flex-direction: column;
  83. justify-content: center;
  84. }
  85. .icon-name {
  86. margin: 0 0 7px;
  87. white-space: nowrap;
  88. }
  89. input:not([type=radio]) {
  90. margin: 0 0 4px;
  91. font: inherit;
  92. border: 1px solid #ddd;
  93. padding: 3px 5px;
  94. }
  95. input:not([type=radio]):focus {
  96. outline: none;
  97. border-color: hsl(205,74%,61%);
  98. }
  99. /*.icon:before {
  100. content: "";
  101. position: absolute;
  102. left: 0;
  103. top: 0;
  104. width: 100%;
  105. height: 100%;
  106. background-image:
  107. linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
  108. linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
  109. background-size: 20px 20px;
  110. background-position: 10px 10px, 40px 40px;
  111. opacity: 0.3;
  112. }*/
  113. </style>
  114. <div class="controls">
  115. <input type="radio" value="off" name="filter" id="off"><label for="off">No Filter</label>
  116. <input type="radio" value="empty_author" name="filter" id="author"><label for="author">No Author</label>
  117. <input type="radio" value="empty_license" name="filter" id="license"><label for="license">No License</label>
  118. </div>
  119. <div class="icons">
  120. <?
  121. # Path to image folder
  122. $imageFolder = '../public/assets/images/icons/';
  123. # Show only these file types from the image folder
  124. $imageTypes = '{*.svg}';
  125. # Set to true if you prefer sorting images by name
  126. # If set to false, images will be sorted by date
  127. $sortByImageName = true;
  128. # Set to false if you want the oldest images to appear first
  129. # This is only used if images are sorted by date (see above)
  130. $newestImagesFirst = true;
  131. date_default_timezone_set('Europe/Berlin');
  132. # The rest of the code is technical
  133. # Add images to array
  134. $images = glob($imageFolder . $imageTypes, GLOB_BRACE);
  135. $author_data = json_decode(file_get_contents($src), true);
  136. # Sort images
  137. if ($sortByImageName) {
  138. $sortedImages = $images;
  139. natsort($sortedImages);
  140. } else {
  141. # Sort the images based on its 'last modified' time stamp
  142. $sortedImages = array();
  143. $count = count($images);
  144. for ($i = 0; $i < $count; $i++) {
  145. $sortedImages[date('YmdHis', filemtime($images[$i])) . $i] = $images[$i];
  146. }
  147. # Sort images in array
  148. if ($newestImagesFirst) {
  149. krsort($sortedImages);
  150. } else {
  151. ksort($sortedImages);
  152. }
  153. }
  154. ?>
  155. <? foreach ($sortedImages as $image): ?>
  156. <?
  157. # Get the name of the image, stripped from image folder path and file type extension
  158. $filename = basename($image);
  159. $name = preg_replace('/\\.[^.\\s]{3,4}$/', '', $filename);
  160. if(!array_key_exists($filename, $author_data)){
  161. $author_data[$filename] = array(
  162. 'author' => '',
  163. 'url' => '',
  164. 'license' => ''
  165. );
  166. }
  167. # Begin adding
  168. ?>
  169. <div class="icon-holder">
  170. <div class="icon">
  171. <?= file_get_contents($image) ?>
  172. </div>
  173. <form class="icon-body" data-filename="<?= $filename ?>">
  174. <div class="icon-name"><?= $name ?></div>
  175. <input name="author" value="<?= $author_data[$filename]['author'] ?>" placeholder="Author">
  176. <input type="url" name="url" value="<?= $author_data[$filename]['url'] ?>" placeholder="URL">
  177. <input name="license" value="<?= $author_data[$filename]['license'] ?>" placeholder="License">
  178. </form>
  179. </div>
  180. <? endforeach ?>
  181. </div>
  182. <script src="../app/assets/javascripts/app/lib/core/jquery-2.2.1.js"></script>
  183. <script>
  184. var self = "<?= basename($_SERVER["SCRIPT_FILENAME"]) ?>"
  185. var filter = "off"
  186. var filterTimeout
  187. if(localStorage.getItem('icon-list-filter')){
  188. filter = localStorage.getItem('icon-list-filter')
  189. applyFilter()
  190. }
  191. $('[name="filter"][value="'+ filter +'"]').prop('checked', true)
  192. $('input').on('input', storeAuthors)
  193. function storeAuthors(){
  194. var iconList = {}
  195. $('.icon-holder form').each(function(){
  196. iconList[$(this).attr('data-filename')] = {
  197. author: this.elements.author.value,
  198. url: this.elements.url.value,
  199. license: this.elements.license.value
  200. }
  201. })
  202. $.post(self, { list: iconList }, function(data){ console.log(data) })
  203. }
  204. $('[name="filter"]').change(function(){
  205. filter = this.value
  206. localStorage.setItem('icon-list-filter', filter)
  207. applyFilter()
  208. })
  209. function applyFilter(){
  210. $('.icon-holder').removeClass('is-filtered').each(function(){
  211. var holder = $(this)
  212. switch(filter){
  213. case "empty_author":
  214. if(holder.find("[name='author']").val())
  215. holder.addClass('is-filtered')
  216. break;
  217. case "empty_license":
  218. if(holder.find("[name='license']").val())
  219. holder.addClass('is-filtered')
  220. break;
  221. }
  222. });
  223. }
  224. $('svg').each(function(i, svg){
  225. var areas = []
  226. var svgBoundingBox = svg.getBoundingClientRect()
  227. var svgArea = svgBoundingBox.width * svgBoundingBox.height
  228. $(svg).find('*').each(function(i, el){
  229. var fill = $(el).attr('fill')
  230. if(fill && fill != 'none'){
  231. var childBoundingBox = el.getBoundingClientRect()
  232. areas.push({
  233. luminance: getLuminance(fill),
  234. areaPercentage: (childBoundingBox.width * childBoundingBox.height)/svgArea
  235. })
  236. }
  237. })
  238. if(!areas.length)
  239. return
  240. var averageLuminance = areas.reduce(function(previousValue, currentValue, index, array){
  241. if(array.length == 1)
  242. return currentValue.luminance
  243. else
  244. return previousValue + currentValue.luminance * currentValue.areaPercentage
  245. }, 0)
  246. if(averageLuminance > 220){
  247. $(svg).parent().addClass('is-light')
  248. }
  249. })
  250. //
  251. // from http://stackoverflow.com/questions/12043187/how-to-check-if-hex-color-is-too-black
  252. //
  253. function getLuminance(hex){
  254. var c = hex.substring(1); // strip #
  255. var rgb = parseInt(c, 16); // convert rrggbb to decimal
  256. var r = (rgb >> 16) & 0xff; // extract red
  257. var g = (rgb >> 8) & 0xff; // extract green
  258. var b = (rgb >> 0) & 0xff; // extract blue
  259. return 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
  260. }
  261. </script>