cssjs_func_lib

install

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

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

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'
			]
		},
		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>