JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id="main">&nbsp;</div>

<script id="shelf" type='text/ractive'>
    <div id="menu" class="parent" style="">
        <input class="grid_100" id="zoek_veld" type="text" name="search" value="{{searchValue}}" disabled="{{disabled}}" placeholder="Zoeken" on-enter="goSearch" on-paste="goSearch" on-double-click="alert('asd')">
        <div class="grid_100">
            <h1 on-click="viewSavedItem">Bewaard</h1>
            <div class="grid_80">Omschrijving</div>
            <div class="grid_20 container">aantal</div>
            <hr class="grid_100">
            {{#savedItems}}
                <div class="grid_90" style="overflow:hidden;white-space:nowrap;" on-click="showBarcodeItem">{{Description.split('').splice(0,23).join('')}}</div>
                <div class="grid_10 no-container">{{aantal}}</div>
            {{/savedItems}}
            {{#savedItems.length > 0}}
                <br>
                <hr class="grid_100">
                <div class="grid_100">
                    Totaal:
                    <b class="right">{{totalPrice}}</b>
                </div>
            {{/}}
        </div>
        <div class="grid_100">
            <h1>Gezocht</h1>
            <div id="pastSearches" class="grid_100 container">
                <div class="grid_80">Zoekopdracht</div>
                <div class="grid_20 container">Aantal</div>
                {{# pastSearches:i}}
                    <div class="grid_100 container {{i % 2 == 1 ? "licht":"donker"}}" intro="fade" outro="fade" on-click="restore">
                        <div class="grid_80">
                            {{value}}
                        </div>
                        <div class="grid_20">
                            {{count}}
                        </div>
                    </div>
                {{/}}
            </div>
        </div>
        <div class="grid_100">
            {{#layouts:i}}
              <div class="grid_100 {{...

JavaScript

var searchDefaults = {
            searchValue: '',          //hier staat de text in waar je mee zoekt
            activeItem: null,         //als hier gegevens in staan, krijg je het detailscherm te zien.
            disabled: false,          //als deze true staat mag je niet typen in het zoek-veld
            searchType: false,        //zoektype: barcode / gewoon
            pastSearches: [],         //hierin worden de zoekopdrachten + resultaten opgeslagen
            pastSearchesCount: 5,     //hoeveel zoekopdrachten worden er bewaard
            searchError: false,       //als deze text bevat, krijg je een foutmelding te zien
            savedItems: [],           //hierin staan de items die je wilt bewaren
            results: {},              //zoekresultaten worden hierin geplaatst
            prijsInBtw: true,        //prijzen tonen in/ex-clusief btw.
            sliderBar: 4,             //het nummer refereert naar de variabele "layouts" maar die begint bij 0 te tellen!
            layouts: ['Lijst minimaal','Lijst met foto','Rooster (2)','Rooster (3)','Rooster (max)'],
        };
Search = Ractive.extend({
        flush: function () {
            console.log('fliush'+'');
        }
    });
    var search = new Search({
        debug: false,
        el: 'main',
        template: '#shelf',
        data: searchDefaults,
        computed: {
            totalPrice: function(){
                //totalPrice is de prijs van de complete winkelwagen
                return this.get('savedItems').length === 0 ? 0 : (this.get('savedItems').map(function(e) { var bedrag = e.aantal * e.SalesPackagePrice; if (!e.btwper) { e.btwper = 21; alert('Geen btw bij item'); }; return search.get('prijsInBtw') ? bedrag : (bedrag - ((bedrag / 100) * e.btwper )) }).reduce(function(prev, cur){ return cur + prev })).toFixed(2);
            }
        },
        complete: function () {
            //Als de pagina geladen is, dan focus op het zoekveld
           ...