cssjs_func_lib

git submodule add https://git.seemsleg.it/pub/cssjs-func-lib cssjs

install

<link rel="stylesheet" type="text/css" href="/cssjs/admin.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/cssjs/jquery-ui.min.css" media="screen" />

<script src="/cssjs/jquery.min.js"></script>
<script src="/cssjs/jquery-ui.min.js"></script>
<script src="/cssjs/form.js"></script>

Dropzone

<form action="/upload" class="dropzone needsclick dz-clickable" id="demo-upload">
  <div class="dz-message needsclick">
    <button type="button" class="dz-button">Drop files here or click to upload.</button><br>
    <span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
  </div>
</form>

Parallax

<link rel="stylesheet" href="/css/parallax.css">

...

<div class="parallax" style="background-image: url(img);">&nbsp;</div>

Divs anordnen

<script src="/cssjs/masonry.pkgd.min.js"></script>

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

Checkbox Switch

<link rel="stylesheet" href="/cssjs/switch.css">

<input type="checkbox" class="switch" name="publish" id="checkPub" value="1" ' . ($data ['publish'] ? 'checked="true"' : '') . ' /><label for="checkPub"></label>

DateTimePicker

  <link rel="stylesheet" type="text/css" href="/cssjs/jquery-ui.min.css">
  <link rel="stylesheet" type="text/css" href="/cssjs/jquery.datetimepicker.min.css">

  <script src="/cssjs/jquery-ui.min.js"></script>
  <script src="/cssjs/jquery.datetimepicker.full.min.js"></script>

  <script>
    jQuery(\'.datetime\').datetimepicker({
      format:\'d.m.Y H:i\',
      step:30,
      onShow:function( ct ){
    },
    timepicker:true
    });
  </script>

textarea autoheight

<textarea style="max-height: 300px;" class="autoheight"></textarea>

<script src='/cssjs/autosize.js'></script>
<script>
  autosize(document.querySelectorAll('textarea.autoheight'));
</script>

Copy to Clipboard

<script src='/cssjs/copy-to-clipboard.js'></script>
<link rel="stylesheet" type="text/css" href="/cssjs/copy-to-clipboard.css">

<div class="copy-to-clipboard">
  <input type="text" readonly="true" value="blablabla" id="copy-to-clipboard" onclick=" copyToClipboard('copy-to-clipboard');copiedToClipboard('copy-to-clipboard-tooltip');return false;" onmouseout="resetClipboard('copy-to-clipboard-tooltip')">
  <span class="tooltiptext" id="copy-to-clipboard-tooltip">Kopieren</span>
</div>

WYSIWYG (old)

<link rel="stylesheet" type="text/css" href="/cssjs/wysiwyg.css">
...
<div class="wysiwyg"></div>
...
<script src='/cssjs/wysiwyg.js'></script>

Cookiebanner

<link href="/cssjs/cookiebanner.css" rel="stylesheet">
<script>
  var cookiebanner_cookie = 'cookieallowed';
  var cookiebanner_text = 'Dies ist ein Fanprojekt, wir haben keinerlei offizielle Beziehung zu CIG oder deren Produkten. '+
    'Notwendige Cookies helfen dabei, eine Webseite nutzbar zu machen, indem sie Grundfunktionen wie Seitennavigation und Zugriff auf sichere Bereiche der Webseite ermöglichen. Die Webseite kann ohne diese Cookies nicht richtig funktionieren. '+
    ' Statistik-Cookies helfen Webseiten-Besitzern zu verstehen, wie Besucher mit Webseiten interagieren, indem Informationen anonym gesammelt und gemeldet werden. '+
    'Dürfen Cookies gesetzt werden, um weitere Informationen zu erfassen?';
</script>
<script src="/cssjs/cookiebanner.js"></script>

ckEditor5

<script src="/cssjs/ckeditor.js"></script>

<script>ClassicEditor
  .create( document.querySelector( '.editor' ), {

    toolbar: {
      items: [
        'heading',
        '|',
        'bold',
        'italic',
        'underline',
        'link',
        'removeFormat',
        'fontSize',
        'fontFamily',
        '|',
        'bulletedList',
        'numberedList',
        'todoList',
        '|',
        'indent',
        'outdent',
        'alignment',
        'horizontalLine',
        '|',
        'imageUpload',
        'imageInsert',
        'blockQuote',
        'insertTable',
        'mediaEmbed',
        'undo',
        'redo',
        '|',
        'codeBlock',
        'exportPdf',
        'htmlEmbed',
        'exportWord',
        'highlight'
      ]
    },
    language: 'de',
    image: {
      toolbar: [
        'imageTextAlternative',
        '|',
        'imageStyle:full',
        'imageStyle:side',
        'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
                '|',
                'imageResize',
      ]
    },
    table: {
      contentToolbar: [
        'tableColumn',
        'tableRow',
        'mergeTableCells'
      ]
    },
    licenseKey: '',

  } )
  .then( editor => {
    window.editor = editor;
  } )
  .catch( error => {
    console.error( 'Oops, something went wrong!' );
    console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
    console.warn( 'Build id: p276tlu14l98-tj7z79o4qxsd' );
    console.error( error );
  } );
</script>

Heading

...
  heading: {
    options: [
      { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
      { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
      { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
    ]
  }
...

mailto

<span class="mailto">mail@<span style="display:none;">no-thx-</span>server.de</span
<script src="/cssjs/mailto.js"></script>

ajax-Feedback

<script src="/cssjs/feedback.js">
... onclick="return ajaxFeedback(this,'ajax.php','margin-top:300px;');" ...

grid divs in mehreren reihen

<link href="/cssjs/grid.css" rel="stylesheet">


<div class="grid-container">
  <section>...</section>
  <section>...</section>
  <section>...</section>
</div>

tablefilter

<script src="/cssjs/tablefilter.min.js">

Suche: <input type="text" onkeyup="myFilter()" id="suchstr" />

<div class="list" id="suchlist">
  <div class="row">a</row>
  <div class="row">b</row>
  <div class="row">c</row>
</div>

back to Top Button

<link href="/cssjs/backtotop.min.css" rel="stylesheet">
...
<script src="/cssjs/backtotop.min.js"></script>

problem melden

einfach ans ende der seite, rest macht das script

  <body data-feedbackstyle="default|dark">
  ...
    <script src="/cssjs/flag.js"></script>
    <link rel="stylesheet" href="/cssjs/flag.css">
  </body>

js error sammler

in den header, am besten vor allen anderen js

<script src="/cssjs/js-error-logger.min.js"></script>

Fader

<link rel="stylesheet" href="/cssjs/fade.min.css" />

<div class="fadeable">...</div>

zum ein und ausfaden einfach die class "visible" hinzufügen oder entfernen

Ajax ToolTip

benötigt "Fader"

<link rel="stylesheet" href="/cssjs/itooltip.min.css" />
...

<a href="bla" class="itooltip" data-url="tooltip-url">blub</a>

...
<script src="/cssjs/itooltip.min.js"></script>

Logit alternative zu matomo

  <!-- logit -->
    <script>
      var _paq = window._paq = window._paq || [];
      _paq.push(["disableCookies"]);
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      var u="https://log.seemsleg.it/";
      _paq.push(['setTrackerUrl', u+'logit']);
      _paq.push(['setSiteId', '10']);
    </script>
    <script src="/cssjs/logit.min.js"></script>
    <noscript><p><img src="https://log.seemsleg.it/logit?idsite=10&amp;rec=1" style="border:0;" alt="" /></p></noscript>
  <!-- End logit -->

nicht vergessen bei setSiteId die richtige id anzugeben

Flag

einfach folgende zeilen in den footer

  <script src="/cssjs/flag.min.js"></script>
  <link rel="stylesheet" href="/cssjs/flag.min.css">

um zusätzliche infos zu liefern muss ein

data-flaginfo="<key>:<val>"

in irgend ein html tag gepackt werden, ,das wird dann vom script abgeholt wenn es gebraucht wird.