Den Haag Design System

Textbox: Verborgen 

<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.