<div class="textbox textbox__hidden">
    <div class="newMessage">
        <button type="button" class="button button--primary newMessageBtn">+ verstuur een nieuw bericht</button>
    </div>
    <div class="textbox textbox__hidden__container">
        <div class="textbox__textarea">
            <div class="textbox__textarea__title">Schrijf uw bericht</div>
            <div class="formtextarea">
                <textarea name="comment" id="" rows="10" maxlength="500"></textarea>
                <div class="extratext" title="Aantal karakters over:"></div>
            </div>
            <div class="textbox__textarea__files">
                <div class="textbox__textarea__title">Bestand toevoegen</div>
                <div class="textbox__textarea__text">U kunt maximaal 2 bestanden toevoegen per bericht.</div>
                <div class="textbox__textarea__list">
                    <div class="file-thumbnail">
                        <div class="file-thumbnail__header">
                            <div class="file-thumbnail__name">Bestand 1</div>
                        </div>
                        <div class="file-thumbnail__meta-info">
                            <span>PDF</span>
                            <span>123 KB</span>
                            <span>23-10-2017</span>
                        </div>
                    </div>
                    <div class="file-thumbnail">
                        <div class="file-thumbnail__header">
                            <div class="file-thumbnail__name">Bestand 1</div>
                        </div>
                        <div class="file-thumbnail__meta-info">
                            <span>PDF</span>
                            <span>123 KB</span>
                            <span>23-10-2017</span>
                        </div>
                    </div>
                </div>
                <button type="button" class="button button--primary">Verzenden</button>
            </div>
        </div>
    </div>
</div>
<div class="textbox{{#if themeClass}} {{themeClass}}{{/if}}">
    <div class="newMessage">
        <button type="button" class="button button--primary newMessageBtn">+ verstuur een nieuw bericht</button>
    </div>
    <div class="textbox{{#if themeClass}} {{themeClass}}{{/if}}__container">
        <div class="textbox__textarea">
            <div class="textbox__textarea__title">Schrijf uw bericht</div>
            <div class="formtextarea">
            <textarea name="comment" id="" rows="10" maxlength="500"></textarea>
            <div class="extratext" title="Aantal karakters over:"></div>
            </div>
            <div class="textbox__textarea__files">
            <div class="textbox__textarea__title">Bestand toevoegen</div>
            <div class="textbox__textarea__text">U kunt maximaal 2 bestanden toevoegen per bericht.</div>
            <div class="textbox__textarea__list">
                {{> @file-thumbnail--upload }}
                {{> @file-thumbnail--upload }}
            </div>
            {{> @button modifier='button--primary' text='Verzenden'}}
            </div>
        </div>
    </div>
</div>
{
  "themeClass": "textbox__hidden"
}
  • Content:
    .textbox {
      $parent: &;
    
      .card {
        margin-top: $space-s;
      }
    
      .newMessage {
        padding: $space-m;
        display: none;
      }
    
      &__textarea {
        background: $white-dark;
        margin-top: $space-m;
        padding: $space-m;
    
        .button--primary {
          margin-top: $space-m;
        }
    
        .extratext {
          float: right;
        }
    
        .file-thumbnail {
          padding: 0;
          margin: $space-m 0 $space-m 0;
        }
    
        &__title {
          font-weight: $fw-bold;
        }
    
        &__files {
          margin-top: $space-m;
    
          &__title {
            font-weight: $fw-bold;
          }
    
          &__list {
            margin-top: $space-m;
          }
        }
      }
    
      //textboxHidden
      &__hidden {
    
        .newMessage {
            display: block;
          }
    
        &__container {
            display: none;
        }
      }
    }
    
  • URL: /components/raw/textbox/_textbox.scss
  • Filesystem Path: src/components/01-componenten/textbox/_textbox.scss
  • Size: 766 Bytes
  • Content:
    /**
     * Component
     *
     * @param {Element} element
     */
    
    export default function Textbox() {
        /* eslint-disable */
        var btn = document.getElementsByClassName("newMessageBtn")[0];
        var btnContainer = document.getElementsByClassName("newMessage")[0];
        var textbox = document.getElementsByClassName("textbox__hidden__container")[0];
    
        if (typeof btn !== "undefined") {
            btn.onclick = function showTextbox() {
              textbox.style.display = "block";
              textbox.focus();
              btnContainer.remove();
            }
        }
    
        // //code to test show notificiation with javascript
        // var submitButton = document.getElementsByClassName("testButton")[0];
        // if(typeof submitButton !== "undefined") {
        //   submitButton.onclick = function getValue() {
        //     var textFromForm = document.getElementsByName("comment")[0].value;
        //     localStorage.setItem("key", textFromForm);
        //     window.location.reload(false);
        //   }
        // }
    
        // window.onload = function() {
        //   var textFromForm = localStorage.getItem("key");
        //   if(typeof textFromForm !== 'undefined' && textFromForm !== null) {
        //     this.console.log(textFromForm);
        //     delete this.textFromForm;
        //     window.localStorage.removeItem("key");
        //     //show notification
        //   }
        //   else {
        //     this.console.log("Notification error");
        //   }
        // }
    }
  • URL: /components/raw/textbox/textbox.js
  • Filesystem Path: src/components/01-componenten/textbox/textbox.js
  • Size: 1.4 KB

There are no notes for this item.