Actions

Widget

Difference between revisions of "TimelineTest"

From ThornsWiki
Line 103: Line 103:
 
 
 
</style>
 
</style>
−
<script
 
−
  src="https://code.jquery.com/jquery-3.4.0.min.js"
 
−
  integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
 
−
  crossorigin="anonymous"></script>
 
−
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
 
  
 +
<!-- IE 10+ / Edge support via babel-polyfill: https://babeljs.io/docs/en/babel-polyfill/ -->
 +
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
  
−
<script type="text/javascript">
+
<!-- jPList Library -->
−
$(document).ready( function() {
+
<script src="http://anaxasdiaries.com/jplist/jplist.min.js"></script>
−
// init Isotope
+
<script>
−
var $grid = $('.grid').isotope({
+
jplist.init();
−
  itemSelector: '.grid-item'
 
−
});
 
−
 
 
−
// store filter for each group
 
−
var filters = {};
 
−
 
 
−
$('.filters').on( 'click', '.button', function() {
 
−
  var $this = $(this);
 
−
  // get group key
 
−
  var $buttonGroup = $this.parents('.button-group');
 
−
  var filterGroup = $buttonGroup.attr('data-filter-group');
 
−
  // set filter for group
 
−
  filters[ filterGroup ] = $this.attr('data-filter');
 
−
  // combine filters
 
−
  var filterValue = concatValues( filters );
 
−
  // set filter for Isotope
 
−
  $grid.isotope({ filter: filterValue });
 
−
  // set sort method
 
−
  sortBy: 'XXX'
 
−
});
 
−
 
 
−
// change is-checked class on buttons
 
−
$('.button-group').each( function( i, buttonGroup ) {
 
−
  var $buttonGroup = $( buttonGroup );
 
−
  $buttonGroup.on( 'click', 'button', function() {
 
−
    $buttonGroup.find('.is-checked').removeClass('is-checked');
 
−
    $( this ).addClass('is-checked');
 
−
  });
 
−
});
 
−
 
 
−
});
 
−
 
 
−
// flatten object by concatting values
 
−
function concatValues( obj ) {
 
−
var value = '';
 
−
for ( var prop in obj ) {
 
−
  value += obj[ prop ];
 
−
}
 
−
return value;
 
−
}
 
 
</script>
 
</script>
−
 
 
<body>
 
<body>
  
Line 161: Line 117:
 
<div class="filters">
 
<div class="filters">
  
−
<div class="button-group" data-filter-group="Year"><h3 class="sort-title">Year</h3>
+
<!-- hidden sort control -->
−
<button class="button is-checked" data-filter="">All</button>
+
<div
−
<button class="button" data-filter=".2718">2718</button>
+
style="display:none;"
−
<button class="button" data-filter=".2719">2719</button>
+
data-jplist-control="hidden-sort"
−
</div>
+
data-group="TimelineEntry"
−
<div class="button-group" data-filter-group="Month"><h3 class="sort-title">Month</h3>
+
−
<button class="button is-checked" data-filter="">All</button>
+
data-path=".DateSort"
−
<button class="button" data-filter=".Intas">Intas</button>
+
data-order="asc"
−
<button class="button" data-filter=".Bethas">Bethas</button>
+
data-type="text">
−
<button class="button" data-filter=".Hamis">Hamis</button>
 
−
<button class="button" data-filter=".Loshis">Loshis</button>
 
−
<button class="button" data-filter=".Roalis">Roalis</button>
 
−
<button class="button" data-filter=".Yaris">Yaris</button>
 
−
<button class="button" data-filter=".Dentis">Dentis</button>
 
−
<button class="button" data-filter=".Vortas">Vortas</button>
 
−
<button class="button" data-filter=".Achtus">Achtus</button>
 
−
<button class="button" data-filter=".Ophus">Ophus</button>
 
−
</div>
 
−
<div class="button-group" data-filter-group="Genre"><h3 class="sort-title">Plot Genre</h3>
 
−
<button class="button is-checked" data-filter="">All</button>
 
−
<button class="button" data-filter=".Crime">Crime</button>
 
−
<button class="button" data-filter=".Magic">Magic</button>
 
−
<button class="button" data-filter=".Miscellaneous">Miscellaneous</button>
 
−
<button class="button" data-filter=".Politics">Politics</button>
 
−
<button class="button" data-filter=".Resistance">Resistance</button>
 
−
</div>
 
−
<div class="button-group" data-filter-group="Type"><h3 class="sort-title">Plot Type</h3>
 
−
<button class="button is-checked" data-filter="">All</button>
 
−
<button class="button" data-filter=".Event">Event</button>
 
−
<button class="button" data-filter=".Holiday">Holiday</button>
 
−
<button class="button" data-filter=".MainChapter">Main Chapter</button>
 
−
<button class="button" data-filter=".Other">Other</button>
 
 
</div>
 
</div>
 +
 +
<!-- checkbox filter control Year -->
 +
<label>
 +
<input
 +
type="checkbox"
 +
data-jplist-control="checkbox-text-filter"
 +
data-path=".Year"
 +
data-group="TimelineEntry"
 +
data-name="year"
 +
value="2718"
 +
checked />
 +
2718
 +
</label>
 +
 +
<label>
 +
<input
 +
type="checkbox"
 +
data-jplist-control="checkbox-text-filter"
 +
data-path=".Year"
 +
data-group="TimelineEntry"
 +
data-name="year"
 +
value="2719" />
 +
2719
 +
</label>
 +
 
</div>
 
</div>

Revision as of 11:14, 29 April 2020

<style> .sidebar { 

       max-width:100%;

margin:0px auto; 

       /*padding:15px 10px;*/
       /*background:#e8e4da;*/
       /*position:fixed;*/
       /*top:0;*/
       /*left:0;*/
   }

table tr th.infobox-label { 

   text-align: left;
   text-transform: uppercase;
   font-weight: bold;
   font-size: .9em;
   line-height: 1.25em;
   color: #deb975;
   background-color: #474440;
   vertical-align: middle;
   width: 50%;

}

.filters { 

           display: flex;
           flex-wrap: wrap;

} 

   h3.sort-title {
       font-size: 1.15rem !important;
       border-bottom: 2px solid #474440 !important;
       margin-top: 0px !important;

color:#ccc5b9; 

   }

.button-group { flex:1; padding:5px; } 

   .button {
       background-color: #deb975;
       border: none;
       border-radius:none !important;
       color: #fffcf2;
       padding: .25rem .35rem;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: .75rem;
       font-family:'Open Sans', sans-serif;
       text-transform:uppercase;
       letter-spacing:0.025rem;
       /*margin: 2px 2px;*/
       -webkit-transition-duration: 0.4s; /* Safari */
       transition-duration: 0.4s;
       cursor: pointer;
       }

   .button.is-checked {
       background:#474440 !important;

} 

   .button:hover {
     background-color: #474440;
     color: #fffcf2;
   }
   .grid {
       max-width: 100%;
       display: flex;
       flex-direction: row;
       align-content: space-between;
       flex-wrap: wrap;
       margin: 0px auto;
   }
   
   .grid-item {
       width:30%;

margin:10px; 

   }

/* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) { 

 .button-group {
   flex: 1;
 }

.grid-item { 

       min-width:350px;
       max-width:90%;

}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { 

.button-group {
   flex: 100%;
 }

.grid-item { 

       min-width:350px;
       max-width:90%;
   }

}

</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>

<script src="http://anaxasdiaries.com/jplist/jplist.min.js"></script> <script> jplist.init(); </script> <body>

<label> <input type="checkbox" data-jplist-control="checkbox-text-filter" data-path=".Year" data-group="TimelineEntry" data-name="year" value="2718" checked /> 2718 </label>

<label> <input type="checkbox" data-jplist-control="checkbox-text-filter" data-path=".Year" data-group="TimelineEntry" data-name="year" value="2719" /> 2719 </label>

Retrieved from "http://wiki.anaxasdiaries.com/index.php?title=Widget:TimelineTest&oldid=10977"