@uportal/app-framework/components/portal/main/partials/example-page.html

Application Framework for uPortal

<!--

    Licensed to Apereo under one or more contributor license
    agreements. See the NOTICE file distributed with this work
    for additional information regarding copyright ownership.
    Apereo licenses this file to you under the Apache License,
    Version 2.0 (the "License"); you may not use this file
    except in compliance with the License.  You may obtain a
    copy of the License at the following location:

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.

-->
<frame-page app-fname="'example-page-fname'"
            app-show-add-to-home="true"
            white-background="false">
  <style>
    .widget-container {
      max-width: 310px;
      width: 290px;
      margin: 4px 8px;
    }
  </style>
  <h2 style="margin-left:26px">Example expanded mode widgets</h2>
  <div layout="row" layout-align="center start" style="flex-wrap:wrap;padding:18px;">
      <div flex-xs="100" class="widget-container">
        <widget fname="sample-widget__benefits"></widget>
      </div>
      <div flex-xs="100" class="widget-container">
        <widget fname="sample-widget__rss"></widget>
      </div>
      <div flex-xs="100" class="widget-container">
        <widget fname="sample-widget__search-with-links"></widget>
      </div>
      <div flex-xs="100" class="widget-container">
        <widget fname="sample-widget__basic"></widget>
      </div>
      <div flex-xs="100" class="widget-container">
        <widget fname="sample-widget__maintenance-default"></widget>
      </div>
      <div flex-xs="100" class="widget-container">
        <widget fname="sample-widget__maintenance-custom"></widget>
      </div>
    </div>

    <h3 style="margin-left:26px">
      Example list-of-links widgets in expanded mode</h3>

      <div style="margin-left:26px">list-of-links widgets change display
        depending upon how many links. Zero links or a single link that would
        be redundant with the launch button collapse to a basic widget. Fewer
        than four links display as circle buttons. More links display as a
        list.</div>
      <div layout="row" layout-align="center start"
        style="flex-wrap:wrap;padding:18px;">
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__list-of-links"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__list-of-8-links"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__list-of-no-links"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__list-of-one-redundant-link"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__list-of-4-links-first-redundant">
          </widget>
        </div>
      </div>

    <h3 style="margin-left:26px">Example switch widgets in expanded mode</h3>
    <div style="margin-left:26px">Switch widgets dynamically change runtime type depending upon the
      response from a JSON callback. They are useful for composing existing
      widget types to create composite widgets that fulfill more complicated
      use cases without proliferating new widget types or opting out of the
      type system to use an entirely custom widget.</div>
    <div layout="row" layout-align="center start" style="flex-wrap:wrap;padding:18px;">
      <div flex-xs="100" class="widget-container">
        <widget fname="sample-widget__switch"></widget>
      </div>
      <div flex-xs="100" class="widget-container">
        <widget fname="sample-widget__switch_2"></widget>
      </div>
      <div flex-xs="100" class="widget-container">
        <widget fname="sample-widget__switch_otherwise"></widget>
      </div>
      <div flex-xs="100" class="widget-container">
        <widget fname="sample-widget__switch_broken"></widget>
      </div>
    </div>

    <h3 style="margin-left:26px">
      Example `time-sensitive-content` widgets in expanded mode</h3>
      <div style="margin-left:26px">`time-sensitive-content` widgets render
        different content depending upon the date.</div>
      <div layout="row" layout-align="center start"
        style="flex-wrap:wrap;padding:18px;">
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__time-future"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__time-soon"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__time-current"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__time-past"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__time-expired"></widget>
        </div>
      </div>

      <h3 style="margin-left:26px">
        Example `action-items` widgets in expanded mode</h3>
      <div style="margin-left:26px">`action-items` widgets render indicators of quantities. Individual quantity
      indicators fail independently. When there are more items than can be displayed, `action-items` prioritizes items that are not failing.</div>
      <div layout="row" layout-align="center start"
        style="flex-wrap:wrap;padding:18px;">
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__action-items_one"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__action-items_three"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__action-items_many"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget
            fname="sample-widget__action-items_partially-broken"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget
            fname="sample-widget__action-items_totally-broken"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget
            fname="sample-widget__action-items_empty-string"></widget>
        </div>
      </div>
    </div>

    <h3 style="margin-left:26px">
      Example custom widgets in expanded mode</h3>
      <div style="margin-left:26px">custom widgets render arbitrary AngularJS
        templates optionally applied to dynamic JSON. `generic` is a deprecated
        alias for the `custom` widget type.</div>
      <div layout="row" layout-align="center start"
        style="flex-wrap:wrap;padding:18px;">
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__custom"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="sample-widget__generic"></widget>
        </div>
      </div>

      <h3 style="margin-left:26px">
        Example remote-content widget in expanded mode</h3>
        <div style="margin-left:26px">remote-content widgets render arbitrary markup sourced from a URL.</div>
        <div layout="row" layout-align="center start"
          style="flex-wrap:wrap;padding:18px;">
          <div flex-xs="100" class="widget-container">
            <widget fname="sample-widget__remote"></widget>
          </div>
        </div>


    <h3 style="margin-left:26px">
      Example failing silently when so configured</h3>
      <div style="margin-left:26px">Demonstrates fail-silently attribute
        on widget directive. There are two widgets here with bogus fnames,
        but the second has fail-silently true, so it silently disappears.</div>
      <div layout="row" layout-align="center start"
        style="flex-wrap:wrap;padding:18px;">
        <div flex-xs="100" class="widget-container">
          <widget fname="no-exist-1"></widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <widget fname="no-exist-2" fail-silently="true"></widget>
        </div>
      </div>

    <h2 style="margin-left:26px">Example compact mode widgets</h2>
    <div layout="row" layout-align="center start" style="flex-wrap:wrap;padding:18px;">
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__benefits"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__rss"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__search-with-links">
          </compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__basic"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__maintenance-default">
          </compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__maintenance-custom">
          </compact-widget>
        </div>

        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__list-of-links"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__list-of-8-links"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__list-of-no-links"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__list-of-one-redundant-link"></compact-widget>
        </div>

        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__switch"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__switch_2"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__switch_otherwise">
          </compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__switch_broken"></compact-widget>
        </div>

        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__time-future"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__time-soon"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__time-current"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__time-past"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__time-expired"></compact-widget>
        </div>

        <div flex-xs="100" class="widget-container">
          <compact-widget
            fname="sample-widget__action-items_one"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget
            fname="sample-widget__action-items_three"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget
            fname="sample-widget__action-items_many"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget
            fname="sample-widget__action-items_partially-broken">
          </compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget
            fname="sample-widget__action-items_totally-broken"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget
            fname="sample-widget__action-items_empty-string"></compact-widget>
        </div>

        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__custom"></compact-widget>
        </div>
        <div flex-xs="100" class="widget-container">
          <compact-widget fname="sample-widget__generic"></compact-widget>
        </div>
      </div>


      <h2 style="margin-left:26px">Compact widget using new web component hurray</h2>
</frame-page>