@ucd-lib/theme-elements 0.0.13 → 0.0.16

package/brand/ucd-theme-list-accordion/ucd-theme-list-accordion.tpl.js

@@ -13,6 +13,9 @@ export function styles() {
     .item-title ::slotted(*) {
       pointer-events: none;
     }
+    .list--accordion {
+      margin-bottom: 0;
+    }
   `;
   return [
     listCss, 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {
@@ -10,6 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "@ucd-lib/theme-sass": "^5.0.15",
+    "ip-cidr": "^3.0.4",
     "lit": "^2.0.2",
     "photoswipe": "^4.1.3",
     "slim-select": "^1.26.2"

package/ucdlib/ucdlib-icon/ucdlib-icon.js

@@ -44,17 +44,19 @@ export default class UcdlibIcon extends LitElement {
    * @private
    */
   disconnectedCallback() {
-    window.removeEventListener('ucdlib-iconset-added', this._onAddedIconset);
+    if ( this._setListener ){
+      window.removeEventListener('ucdlib-iconset-added', this._onAddedIconset);
+    }
     super.disconnectedCallback();
   }
 
   /**
-   * @method updated
-   * @description Lit lifecyle method called after element updates
+   * @method willUpdate
+   * @description Lit lifecyle method called right before element updates
    * @param {Map} props - Updated properties
    * @private
    */
-  updated(props){
+  willUpdate(props){
     if ( props.has('icon') || props.has('src') ){
       if ( this.src ) {
         this._updateIcon();
@@ -85,17 +87,27 @@ export default class UcdlibIcon extends LitElement {
   _updateIcon(){
     // using the icon attribute
     if ( this._usesIconSet() ) {
+      
+      // previously using the src attribute. remove it.
       if ( this._img && this._img.parentNode ) this.renderRoot.removeChild(this._img);
 
+      // empty icon name, remove it
       if ( this._iconName === '') {
         if ( this._iconset ) this._iconset.removeIcon(this);
+      
+      // check if iconset exists, add event listener if it doesn't
       } else if ( this._iconsetName ){
         this._iconset = this._getIconset();
-        if ( this._iconset ) {
+        if ( this._iconset && this._iconset.applyIcon ) {
           this._iconset.applyIcon(this, this._iconName);
-          window.addEventListener('ucdlib-iconset-added', this._onAddedIconset);
+          if ( this._setListener ){
+            window.removeEventListener('ucdlib-iconset-added', this._onAddedIconset);
+            this._setListener = false;
+          }
         } else {
-          window.removeEventListener('ucdlib-iconset-added', this._onAddedIconset);
+          if ( !this._setListener ){
+            this._setListener = window.addEventListener('ucdlib-iconset-added', this._onAddedIconset);
+          }
         }
       }
 

package/ucdlib/ucdlib-iconset/ucdlib-iconset.js

@@ -10,6 +10,7 @@ import { MutationObserverController } from '../../utils/controllers';
  * @property {String} name - Name of the icon set. Usage: <ucdlib-icon icon="{thisProperty}:{icon}"></ucdlib-icon>
  * @property {Number} size - The size of an individual icon. Note that icons must be square. 
  * @property {String} label - Optional friendly label for iconset.
+ * @property {String} suppressWarnings - Suppress any "you're doing it wrong" console warnings
  * @example
  * <ucdlib-iconset name="arrows">
     <svg>
@@ -28,6 +29,7 @@ export default class UcdlibIconset extends Mixin(LitElement)
       name: {type: String},
       size: {type: Number},
       label: {type: String},
+      suppressWarnings: {type: Boolean, attribute: 'suppress-warnings'},
       _iconMap: {type: Object, state: true}
     };
   }
@@ -40,7 +42,7 @@ export default class UcdlibIconset extends Mixin(LitElement)
     this.label = "";
     this.size = 24;
     this._iconMap = {};
-    this.style.display = "none";
+    this.suppressWarnings = false;
   }
 
   /**
@@ -51,12 +53,28 @@ export default class UcdlibIconset extends Mixin(LitElement)
    */
   updated( props ){
     if (props.has('name') && this.name ) {
-      this.dispatchEvent(
-        new CustomEvent('ucdlib-iconset-added', {bubbles: true, composed: true})
-      );
+      this.dispatchLoadEvent();
     }
   }
 
+  /**
+   * @method firstUpdated
+   * @description Lit lifecycle method when element is first updated
+   */
+  firstUpdated(){
+    this.style.display = "none";
+  }
+
+  /**
+   * @method dispatchLoadEvent
+   * @description fires off a 'ucdlib-iconset-added' event so ucdlib-icon elements can re-render if applicable
+   */
+  dispatchLoadEvent(){
+    this.dispatchEvent(
+      new CustomEvent('ucdlib-iconset-added', {bubbles: true, composed: true})
+    );
+  }
+
   /**
    * @method getIconNames
    * @description Returns a list of icon names for this set
@@ -173,7 +191,7 @@ export default class UcdlibIconset extends Mixin(LitElement)
       iconMap[icon.id] = icon;
     });
 
-    if ( !Object.keys(iconMap).length ) {
+    if ( !Object.keys(iconMap).length && !this.suppressWarnings ) {
       console.warn('No g elements with an id attribute found!.');
     }
     this._iconMap = iconMap;

package/ucdlib/ucdlib-sils-search-redirect/ucdlib-sils-search-redirect.tpl.js

@@ -58,6 +58,9 @@ export function styles() {
       padding: 0;
       font-family: inherit;
     }
+    .checkbox label::before {
+      background-color: white;
+    }
     .dark h2 {
       color: ${unsafeCSS(categoryBrands.secondary.hex)}
     }

package/utils/ip-check.js

@@ -0,0 +1,133 @@
+const IPCIDR = require("ip-cidr");
+
+
+/**
+ * @class IpDetect
+ * @classdesc Utility for detecting type of IP and if it is in campus ip list and vpn ips
+ */
+export class IpDetect {
+  constructor(){
+    this.ip = '';
+    this.hasIP6 = false;
+    this.ip6 = '';
+    this.ipVPNRange = [
+      // VPN
+      {"setIP":"128.120.234.0", "mask":"24"},
+      {"setIP":"128.120.235.0", "mask":"24"},
+      {"setIP":"128.120.236.0", "mask":"24"},
+      {"setIP":"128.120.237.0", "mask":"24"},
+      {"setIP":"128.120.238.0", "mask":"24"},
+      {"setIP":"128.120.239.0", "mask":"24"},
+      {"setIP":"128.120.251.0", "mask":"24"},
+      {"setIP":"169.237.45.0", "mask":"24"},
+      // Staff VPN
+      {"setIP":"169.237.240.2", "mask":"32"},
+      {"setIP":"172.19.19.0", "mask":"24"},
+      {"setIP":"172.19.19.64", "mask":"26"}
+    ];
+
+    this.campusRange = [
+      {"setIP":"128.120.0.0", "mask":"16"},
+      {"setIP":"152.79.0.0", "mask":"16"},
+      {"setIP":"169.237.0.0", "mask":"16"},
+      {"setIP":"162.251.203.0", "mask":"27"},
+      {"setIP":"12.235.42.0", "mask":"25"},
+      {"setIP":"168.150.0.0", "mask":"17"},
+
+    ];
+    
+    this.isVPN = false;
+  }
+  /**
+   * @method runIP
+   * @description This runs the ip check services
+   * 
+   */
+  async runIP(){
+    this.isOnCampus = await this.verifyCidr(this.campusRange, this.ipVPNRange);
+  }
+
+  /**
+   * @method checkIp
+   * @description This retrieves the host's ip address
+   * 
+   */
+  async checkIp(){
+    let ips;
+    await fetch('https://api64.ipify.org?format=json', )
+      .then(response => response.json())
+      .then(data => {ips = data; });
+    this.ip = ips["ip"];
+
+    if (this.ip.includes(":")){
+      this.hasIP6 = true;
+      this.ip6 = this.ip;
+      await fetch('https://api.ipify.org?format=json', )
+        .then(response => response.json())
+        .then(data => {ips = data; });
+      this.ip = ips["ip"];
+    } 
+
+  }
+
+  /**
+   * @method isInRange
+   * @description verify if the ip is in the range given
+   * 
+   * @param {Array} range 
+   * 
+   * @returns {Boolean} 
+   */
+  checkRange(range){
+    if (range.includes(this.ip))
+      return true;
+    return false;
+  }
+
+  /**
+   * @method cidrCheck
+   * @description cidr check that takes a range
+   * 
+   * @param {Object} identifier 
+   * 
+   * @returns {Array} 
+   */
+  cidrCheck(identifier){
+    let cidr;
+
+    let currentIP = identifier["setIP"].concat('/', identifier["mask"] );
+    cidr = new IPCIDR(currentIP); 
+    let ipRange = cidr.toArray();
+
+    return ipRange;
+
+  }
+
+  /**
+   * @method verifyCidr
+   * @description verify req ip addressess in cidr array
+   * 
+   * @param {Array} campusAddress 
+   * @param {Array} vpnaddress 
+   * 
+   * @returns {Boolean} 
+   */
+  async verifyCidr(campusAddress, vpnaddress) {
+    await this.checkIp();
+    for (let i of vpnaddress){
+      let vpn_range = this.cidrCheck(i);
+      if(this.checkRange(vpn_range))
+        this.isVPN = true;
+    }
+
+    for (let i of campusAddress){
+      let campus_range = this.cidrCheck(i);
+      if(this.checkRange(campus_range))
+        return this.ip;
+    }
+    return null;
+  }
+
+
+}
+