Open Source Licenses

78 of 124

This grid of open source licenses currently approved by the Open Source Initiative features column filtering and sorting, as well as conditionality within individual body cells.

Result Full HTML CSS JS
Edit Download

Open Source Licenses approved by the Open Source Initiative

[[index.name]] [[index.identifiers.0.identifier]], [[index.identifiers.0.scheme]] [[index.other_names.0.name]], [[index.other_names.0.note]] [[index.keywords]]

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>Open Source Licenses ZingGrid</title>
  <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/open-source-licenses%2Fgeometry2.png?alt=media&token=a628a8b3-cff4-4d6d-8e85-b0c7f6f4c87c');
      padding: 50px;
    }

    [viewport="mobile"] .zg-body {
      padding: 50px;
    }

    zing-grid {
      font-size: 12px;
      max-width: 900px;
      margin: 0 auto;
      font-family: 'Work Sans', sans-serif;
      color: #00125b;
      --theme-color-primary: #0e1c3a;
      text-align: left;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 4px 8px 0 rgba(0, 0, 0, 0.09);
      -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 4px 8px 0 rgba(0, 0, 0, 0.09);
      -moz-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 4px 8px 0 rgba(0, 0, 0, 0.09);
      border: 10px solid #0e1c3a;
      opacity: 1;
    }

    zing-grid.loading {
      opacity: 0;
      transition: opacity .3s ease-out;
    }

    zg-icon {
      max-width: 15px;
    }

    zg-caption {
      background: #0e1c3a;
      padding-top: 10px;
      padding-bottom: 20px;
    }

    zg-caption h1 {
      font-size: 19px !important;
      font-weight: normal !important;
      margin-bottom: 0 !important;
      color: #ffffff !important;
      text-align: left !important;
    }

    zg-caption a {
      color: #ffffff;
      text-decoration: none;
      font-weight: bold;
    }

    zg-caption a:hover {
      color: #0bcbe5;
    }

    .zg-body .null {
      color: #a5bae2;
    }

    zg-head zg-head-cell {
      font-size: 11px;
    }

    zg-column {
      width: 11%;
    }

    zg-column:first-child {
      font-weight: 600;
    }

    zg-body zg-row {
      height: 100px;
    }

    zg-body zg-cell {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    zing-grid .main-link {
      color: #1041ef;
      text-decoration: none;
    }

    zing-grid i {
      font-size: 12px;
    }

    zing-grid .main-link:hover {
      color: #0bcbe5;
    }

    zing-grid .keyword {
      font-size: 12px;
      padding: 5px;
      margin-bottom: 10px;
      white-space: nowrap;
      text-decoration: none;
      font-weight: bold;
    }

    [viewport="tablet-portrait"] zg-body[layout="card"] {
      --zg-card-columns: 33.33%;
    }

    zing-grid .green {
      color: #ffffff;
      background: #00aa99;
      border: 2px solid #00aa99;
    }

    zing-grid .green:hover {
      border: 2px solid #00aa99;
      color: #00aa99;
      background: none;
    }

    zing-grid .red {
      color: #ffffff;
      background: #fc507e;
      border: 2px solid #fc507e;
    }

    zing-grid .red:hover {
      background: none;
      border: 2px solid #fc507e;
      color: #fc507e;
    }

    zing-grid .grey {
      color: #ffffff;
      background: #c69a1f;
      border: 2px solid #c69a1f;
    }

    zing-grid .grey:hover {
      background: none;
      border: 2px solid #c69a1f;
      color: #c69a1f;
    }

    zg-watermark {
      margin-top: -1px;
    }

    zing-grid[loading] {
      height: 994px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid sort filter pager layout-controls="disabled" page-size="5" src="https://zinggrid-examples.firebaseio.com/open-source-licenses" class="loading">
    <zg-caption>
      <h1>Open Source Licenses approved by the <a href="https://opensource.org" target="_blank" cross-origin>Open Source Initiative <i class="fas fa-external-link-alt"></i></a></h1>
    </zg-caption>
    <zg-colgroup>
      <zg-column index="name">
        <strong>[[index.name]]</strong>
      </zg-column>
      <zg-column index="id"></zg-column>
      <zg-column index="identifiers" renderer="renderIdentifiersNull">
        [[index.identifiers.0.identifier]], [[index.identifiers.0.scheme]]
      </zg-column>
      <zg-column type="url" index="links">
        <template>
          <a class="main-link" href="[[index.links.0.url]]" target="_blank" cross-origin>[[index.links.0.note]] <i class="fas fa-external-link-alt"></i></a>
        </template>
      </zg-column>
      <zg-column index="other_names" renderer="renderOtherNamesNull">
        [[index.other_names.0.name]], [[index.other_names.0.note]]
      </zg-column>
      <zg-column index="superseded_by" type="select" renderer="renderSupersededByNull" type-select-options="Apache-2.0, Artistic-2.0, EPL-1.0, ECL-2.0, EFL-2.0, GPL-3.0, LGPL-3.0, LPL-1.02, MPL-2.0, OLS-3.0, RPL-1.5"></zg-column>
      <zg-column index="keywords" type="select" renderer="renderKeyword" type-select-options="OSI-Approved, Permissive, Popular, Copyleft, Special-Purpose, Discouraged, Non-Reusable, Obsolete, Retired, Redundant, Miscellaneous">
        <span class="keyword">[[index.keywords]]</span>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // Renderer for "Identifiers" for null values
    function renderIdentifiersNull(arrayOfValues) {
      if (arrayOfValues == null) {
        return `<span class="null">N/A</span>`;
      }
      let stringNames = [...arrayOfValues].map(value => {
        return ` ${value.identifier}`;
      })
      return stringNames;
    }

    // Renderer for "Other Names" column for null values
    function renderOtherNamesNull(arrayOfValues) {
      if (arrayOfValues == null) {
        return `<span class="null">N/A</span>`;
      }
      let stringNames = [...arrayOfValues].map(value => {
        return ` ${value.name}`;
      })
      return stringNames;
    }

    // Renderer for "Superseded By" column for null values
    function renderSupersededByNull(value) {
      if (value == null) {
        return `<span class="null">N/A</span>`;
      } else {
        return `${value}`;
      }
    }

    // Renderer for "Keywords" column
    function renderKeyword(value) {

      let mapper = [];

      mapper['copyleft'] = 'green';
      mapper['permissive'] = 'green';
      mapper['popular'] = 'green';
      mapper['osi-approved'] = 'green';
      mapper['special-purpose'] = 'green';
      mapper['international'] = 'green';
      mapper['discouraged'] = 'red';
      mapper['obsolete'] = 'red';
      mapper['retired'] = 'red';
      mapper['non-reusable'] = 'red';
      mapper['redundant'] = 'red';
      mapper['miscellaneous'] = 'grey';

      let str = '';

      for (let i = 0; i < value.length; i++) {
        str += `<a class="keyword ${mapper[value[i]]}" href="https://opensource.org/licenses/category" target="_blank" cross-origin>${value[i]}</a> `
      }

      return str;
    }

    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
    });

    // Custom loading class for CSS handling
    const zgLoaded = document.querySelector('zing-grid');
    zgLoaded.addEventListener('grid:ready', () => {
      setTimeout(() => zgLoaded.classList.remove('loading'), 0);
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>Open Source Licenses ZingGrid</title>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <zing-grid
      sort
      filter
      pager
      layout-controls="disabled"
      page-size="5"
      src="https://zinggrid-examples.firebaseio.com/open-source-licenses"
      class="loading"
    >
      <zg-caption>
        <h1>Open Source Licenses approved by the <a href="https://opensource.org" target="_blank" cross-origin>Open Source Initiative <i class="fas fa-external-link-alt"></i></a></h1>
      </zg-caption>
      <zg-colgroup>
        <zg-column index="name">
          <strong>[[index.name]]</strong>
        </zg-column>
        <zg-column index="id"></zg-column>
        <zg-column index="identifiers" renderer="renderIdentifiersNull">
        	[[index.identifiers.0.identifier]], [[index.identifiers.0.scheme]]
        </zg-column>
        <zg-column type="url" index="links">
          <template>
            <a class="main-link" href="[[index.links.0.url]]" target="_blank" cross-origin>[[index.links.0.note]] <i class="fas fa-external-link-alt"></i></a>
          </template>
        </zg-column>
        <zg-column index="other_names" renderer="renderOtherNamesNull">
        	[[index.other_names.0.name]], [[index.other_names.0.note]]
        </zg-column>
        <zg-column index="superseded_by" type="select" renderer="renderSupersededByNull"
          type-select-options="Apache-2.0, Artistic-2.0, EPL-1.0, ECL-2.0, EFL-2.0, GPL-3.0, LGPL-3.0, LPL-1.02, MPL-2.0, OLS-3.0, RPL-1.5"></zg-column>
        <zg-column
          index="keywords" type="select" renderer="renderKeyword"
          type-select-options="OSI-Approved, Permissive, Popular, Copyleft, Special-Purpose, Discouraged, Non-Reusable, Obsolete, Retired, Redundant, Miscellaneous">
          <span class="keyword">[[index.keywords]]</span>
        </zg-column>
      </zg-colgroup>
    </zing-grid>
  </body>
</html>
.zg-body {
  background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/open-source-licenses%2Fgeometry2.png?alt=media&token=a628a8b3-cff4-4d6d-8e85-b0c7f6f4c87c');
  padding: 50px;
}

[viewport="mobile"] .zg-body {
  padding: 50px;
}

zing-grid {
  font-size: 12px;
  max-width: 900px;
  margin: 0 auto;
  font-family: 'Work Sans', sans-serif;
  color: #00125b;
  --theme-color-primary: #0e1c3a;
  text-align: left;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.14), 0 4px 8px 0 rgba(0,0,0,0.09);
  -webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.14), 0 4px 8px 0 rgba(0,0,0,0.09);
  -moz-shadow: 0 8px 16px 0 rgba(0,0,0,0.14), 0 4px 8px 0 rgba(0,0,0,0.09);
  border: 10px solid #0e1c3a;
  opacity: 1;
}
zing-grid.loading { opacity:0; transition:opacity .3s ease-out; }

zg-icon {
  max-width: 15px;
}

zg-caption {
  background: #0e1c3a;
  padding-top: 10px;
  padding-bottom: 20px;
}

zg-caption h1 {
  font-size: 19px!important;
  font-weight: normal!important;
  margin-bottom: 0!important;
  color: #ffffff!important;
  text-align: left!important;
}

zg-caption a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

zg-caption a:hover {
  color: #0bcbe5;
}

.zg-body .null {
  color: #a5bae2;
}

zg-head zg-head-cell {
  font-size: 11px;
}

zg-column {
  width: 11%;
}

zg-column:first-child {
  font-weight: 600;
}

zg-body zg-row {
  height: 100px;
}

zg-body zg-cell {
  padding-top: 10px;
  padding-bottom: 10px;
}

zing-grid .main-link {
  color: #1041ef;
  text-decoration: none;
}

zing-grid i {
  font-size: 12px;
}

zing-grid .main-link:hover {
  color: #0bcbe5;
}

zing-grid .keyword {
  font-size: 12px;
  padding: 5px;
  margin-bottom: 10px;
  white-space: nowrap;
  text-decoration: none;
  font-weight: bold;
}
[viewport="tablet-portrait"] zg-body[layout="card"] {
  --zg-card-columns: 33.33%;
}
zing-grid .green {
  color: #ffffff;
  background: #00aa99;
  border: 2px solid #00aa99;
}

zing-grid .green:hover {
  border: 2px solid #00aa99;
  color: #00aa99;
  background: none;
}

zing-grid .red {
  color: #ffffff;
  background: #fc507e;
  border: 2px solid #fc507e;
}

zing-grid .red:hover {
  background: none;
  border: 2px solid #fc507e;
  color: #fc507e;
}

zing-grid .grey {
  color: #ffffff;
  background: #c69a1f;
  border: 2px solid #c69a1f;
}

zing-grid .grey:hover {
  background: none;
  border: 2px solid #c69a1f;
  color: #c69a1f;
}

zg-watermark {
  margin-top: -1px;
}
// Renderer for "Identifiers" for null values
function renderIdentifiersNull(arrayOfValues) {
  if(arrayOfValues == null) {
    return `<span class="null">N/A</span>`;
  } 
  let stringNames = [...arrayOfValues].map(value => {
    return ` ${value.identifier}`;
  })
  return stringNames;
}

// Renderer for "Other Names" column for null values
function renderOtherNamesNull(arrayOfValues) {
  if(arrayOfValues == null) {
    return `<span class="null">N/A</span>`;
  } 
  let stringNames = [...arrayOfValues].map(value => {
    return ` ${value.name}`;
  })
  return stringNames;
}

// Renderer for "Superseded By" column for null values
function renderSupersededByNull(value) {
  if(value == null) {
    return `<span class="null">N/A</span>`;
  } else {
    return `${value}`;
	}
}

// Renderer for "Keywords" column
function renderKeyword(value) {
  
  let mapper = [];

  mapper['copyleft'] = 'green';
  mapper['permissive'] = 'green';
  mapper['popular'] = 'green';
  mapper['osi-approved'] = 'green';
  mapper['special-purpose'] = 'green';
  mapper['international'] = 'green';
  mapper['discouraged'] = 'red';
  mapper['obsolete'] = 'red';
  mapper['retired'] = 'red';
  mapper['non-reusable'] = 'red';
  mapper['redundant'] = 'red';
  mapper['miscellaneous'] = 'grey';
  
  let str = '';
  
  for (let i=0; i<value.length;i++) {
    str += `<a class="keyword ${mapper[value[i]]}" href="https://opensource.org/licenses/category" target="_blank" cross-origin>${value[i]}</a> `
  }
 
  return str;
}

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
});

// Custom loading class for CSS handling
const zgLoaded = document.querySelector('zing-grid');
zgLoaded.addEventListener('grid:ready', () => {
  setTimeout(() => zgLoaded.classList.remove('loading'), 0);
});

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery