j1-template 2021.1.18 → 2021.1.22

data/assets/themes/j1/modules/mdiPreviewer/css/previewer.css

@@ -85,7 +85,7 @@ div.copied {
     position: fixed;
     top: 100px;
     left: 50%;
-    width: 200px;
+    width: 300px;
     text-align: center;
     color: #FAFAFA;
     background-color: #2196F3;

data/assets/themes/j1/modules/mdiPreviewer/css/previewer.min.css

@@ -12,4 +12,4 @@
  # See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
  # -----------------------------------------------------------------------------
 */
-.icons{//display:none;//padding:0 20px 10px 20px;-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.icons div{line-height:3rem;color:rgba(0,0,0,0.6)}.icons div span{cursor:pointer;font-size:1rem;text-overflow:ellipsis;display:inline-block;max-width:calc(100% - 90px);overflow:hidden;vertical-align:middle;white-space:nowrap;margin-left:.5rem}.icons div code:hover,.icons div span:hover,.icons div i:hover{color:rgba(0,0,0,0.5)}.icons div code:hover{border-color:#2196f3}.icons div code{color:#424242;background-color:#e0e0e0;border:1px solid #9e9e9e;width:80px;margin-left:2px;margin-right:4px;border-radius:4px;display:inline-block;vertical-align:middle;text-align:center;line-height:24px;cursor:pointer}.icons div i{display:inline-block;width:32px;height:24px;margin-right:.5rem;text-align:center;vertical-align:middle;cursor:pointer;line-height:24px}.icons .mdi:before{font-size:24px}div.copied{position:fixed;top:100px;left:50%;width:200px;text-align:center;color:#fafafa;background-color:#2196f3;border:1px solid #0d47a1;padding:10px 15px;border-radius:4px;margin-left:-100px;box-shadow:0 0 10px rgba(0,0,0,0.2)}
+.icons{//display:none;//padding:0 20px 10px 20px;-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.icons div{line-height:3rem;color:rgba(0,0,0,0.6)}.icons div span{cursor:pointer;font-size:1rem;text-overflow:ellipsis;display:inline-block;max-width:calc(100% - 90px);overflow:hidden;vertical-align:middle;white-space:nowrap;margin-left:.5rem}.icons div code:hover,.icons div span:hover,.icons div i:hover{color:rgba(0,0,0,0.5)}.icons div code:hover{border-color:#2196f3}.icons div code{color:#424242;background-color:#e0e0e0;border:1px solid #9e9e9e;width:80px;margin-left:2px;margin-right:4px;border-radius:4px;display:inline-block;vertical-align:middle;text-align:center;line-height:24px;cursor:pointer}.icons div i{display:inline-block;width:32px;height:24px;margin-right:.5rem;text-align:center;vertical-align:middle;cursor:pointer;line-height:24px}.icons .mdi:before{font-size:24px}div.copied{position:fixed;top:100px;left:50%;width:300px;text-align:center;color:#fafafa;background-color:#2196f3;border:1px solid #0d47a1;padding:10px 15px;border-radius:4px;margin-left:-100px;box-shadow:0 0 10px rgba(0,0,0,0.2)}

data/assets/themes/j1/modules/mdiPreviewer/js/previewer.js

@@ -14,8 +14,10 @@
 */
 ;(function () {
 
-  var icons = {};
+  var icons         = {};
   var icon_database = '/assets/data/mdi_icons.json';
+  var language      = document.documentElement.lang;
+  var responseText;
 
   function load_data_database() {
     // Returns the icon database object
@@ -47,6 +49,14 @@
         //          var reference = document.querySelector("#mdi-icon");
         //          var popper = document.querySelector(".my-popper");
 
+        if (language == 'en') {
+          responseText = 'Copied to Clipboard';
+        } else if (language == 'de') {
+          responseText = 'Kopiert zur Zwischenablage';
+        } else {
+          responseText = 'Copied to Clipboard';
+        }
+
         var copyFrom = document.createElement('textarea');
         copyFrom.setAttribute("style", "position:fixed;opacity:0;top:100px;left:100px;");
         copyFrom.value = text;
@@ -55,7 +65,7 @@
         document.execCommand('copy');
         var copied = document.createElement('div');
         copied.setAttribute('class', 'copied');
-        copied.appendChild(document.createTextNode('Copied to Clipboard'));
+        copied.appendChild(document.createTextNode(responseText));
         document.body.appendChild(copied);
 
         //          Popper currently NOT used

data/assets/themes/j1/modules/mdiPreviewer/js/previewer.min.js

@@ -12,4 +12,4 @@
  # See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
  # -----------------------------------------------------------------------------
 */
-(function(){var a={};var c="/assets/data/mdi_icons.json";function b(){return $.ajax({url:c,success:function(d){if(typeof d=="string"){a=JSON.parse(d)}if(typeof d=="object"){a=d}}})}$.when(b()).done(function(h){a.push({name:"blank",codepoint:"F068C"});var k=function(m){var j=document.createElement("textarea");j.setAttribute("style","position:fixed;opacity:0;top:100px;left:100px;");j.value=m;document.body.appendChild(j);j.select();document.execCommand("copy");var i=document.createElement("div");i.setAttribute("class","copied");i.appendChild(document.createTextNode("Copied to Clipboard"));document.body.appendChild(i);setTimeout(function(){document.body.removeChild(j);document.body.removeChild(i)},1500)};for(var d=1;d<a.length;d++){var l=document.createElement("div"),e=document.createElement("i");e.className="mdi mdi-"+a[d].name;l.appendChild(e);var g=document.createElement("code");g.appendChild(document.createTextNode("#"+a[d].codepoint));l.appendChild(g);var f=document.createElement("span");f.appendChild(document.createTextNode(a[d].name));l.appendChild(f);f.onclick=(function(i){return function(){}})(a[d]);e.onmouseup=(function(i){return function(){k("\\"+i.codepoint)}})(a[d]);g.onmouseup=(function(i){return function(){k("#"+i.codepoint)}})(a[d]);f.onmouseup=(function(i){return function(){k("mdi-"+i.name)}})(a[d]);document.getElementById("icons").appendChild(l)}})})();
+(function(){var a={};var d="/assets/data/mdi_icons.json";var e=document.documentElement.lang;var b;function c(){return $.ajax({url:d,success:function(f){if(typeof f=="string"){a=JSON.parse(f)}if(typeof f=="object"){a=f}}})}$.when(c()).done(function(l){a.push({name:"blank",codepoint:"F068C"});var m=function(o){if(e=="en"){b="Copied to Clipboard"}else{if(e=="de"){b="Kopiert zur Zwischenablage"}else{b="Copied to Clipboard"}}var j=document.createElement("textarea");j.setAttribute("style","position:fixed;opacity:0;top:100px;left:100px;");j.value=o;document.body.appendChild(j);j.select();document.execCommand("copy");var i=document.createElement("div");i.setAttribute("class","copied");i.appendChild(document.createTextNode(b));document.body.appendChild(i);setTimeout(function(){document.body.removeChild(j);document.body.removeChild(i)},1500)};for(var f=1;f<a.length;f++){var n=document.createElement("div"),g=document.createElement("i");n.setAttribute("id","mdi-icon");g.className="mdi mdi-"+a[f].name;n.appendChild(g);var k=document.createElement("code");k.appendChild(document.createTextNode("#"+a[f].codepoint));n.appendChild(k);var h=document.createElement("span");h.appendChild(document.createTextNode(a[f].name));n.appendChild(h);g.onmouseup=(function(i){return function(){m(i.name)}})(a[f]);k.onmouseup=(function(i){return function(){m("#"+i.codepoint)}})(a[f]);h.onmouseup=(function(i){return function(){m("mdi-"+i.name)}})(a[f]);document.getElementById("icons").appendChild(n)}})})();

data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.css

@@ -141,7 +141,7 @@ div.copied {
     position: fixed;
     top: 100px;
     left: 50%;
-    width: 200px;
+    width: 300px;
     text-align: center;
     color: #FAFAFA;
     background-color: #2196F3;

data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.min.css

@@ -16,4 +16,4 @@
  # For details, https://github.com/xLs51/Twemoji-Picker
  # -----------------------------------------------------------------------------
 */
-ul.emoji-list *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul.emoji-list li{font-size:36px;float:left;display:inline-block;padding:2px;margin:4px}img.emoji{cursor:pointer;height:1em;width:1em;margin:0 .05em 0 .1em;vertical-align:-0.1em}.twemoji-wrap{position:relative}.twemoji-wrap img{margin:0 .05em 0 .1em;vertical-align:-0.1em}.twemoji-textarea{background-color:#FFF;border:1px solid #ccc;border-radius:3px;height:100%;padding:6px 30px 6px 12px;overflow-y:auto}.twemoji-textarea[contentEditable=true]:empty:before{content:attr(placeholder);color:#9e9e9e}.twemoji-picker{background-color:#fff;border:1px solid #e7e7e7;border-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,0.05);position:absolute;right:0;z-index:1}.twemoji-icon-picker{margin-top:.5rem;margin-bottom:.5rem}.twemoji-icon-picker img{//position:absolute;right:21px;top:6px}.twemoji-icon-picker img,.twemoji-picker img{cursor:pointer;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.twemoji-picker-category{background-color:#e7e7e7}.twemoji-picker-category img{padding:5px}.twemoji-picker-category .active,.twemoji-picker-category span:hover{border-bottom:2px solid #728691;line-height:22px}.twemoji-picker-category .close{cursor:pointer;float:right;font-size:25px;font-weight:700;line-height:1;margin-right:2px;opacity:.5}.twemoji-picker-category .close:hover{opacity:.3}.twemoji-list{//overflow-y:scroll;margin-top:1.5rem;margin-left:1.5rem;overflow-y:auto}.twemoji-list img{margin-top:2px;padding:5px}.twemoji-list img:hover{background-color:#e7e7e7}div.copied{position:fixed;top:100px;left:50%;width:200px;text-align:center;color:#fafafa;background-color:#2196f3;border:1px solid #0d47a1;padding:10px 15px;border-radius:4px;margin-left:-100px;box-shadow:0 0 10px rgba(0,0,0,0.2)}
+ul.emoji-list *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul.emoji-list li{font-size:36px;float:left;display:inline-block;padding:2px;margin:4px}img.emoji{cursor:pointer;height:1em;width:1em;margin:0 .05em 0 .1em;vertical-align:-0.1em}.twemoji-wrap{position:relative}.twemoji-wrap img{margin:0 .05em 0 .1em;vertical-align:-0.1em}.twemoji-textarea{background-color:#FFF;border:1px solid #ccc;border-radius:3px;height:100%;padding:6px 30px 6px 12px;overflow-y:auto}.twemoji-textarea[contentEditable=true]:empty:before{content:attr(placeholder);color:#9e9e9e}.twemoji-picker{background-color:#fff;border:1px solid #e7e7e7;border-radius:3px;box-shadow:0 1px 1px rgba(0,0,0,0.05);position:absolute;right:0;z-index:1}.twemoji-icon-picker{margin-top:.5rem;margin-bottom:.5rem}.twemoji-icon-picker img{//position:absolute;right:21px;top:6px}.twemoji-icon-picker img,.twemoji-picker img{cursor:pointer;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.twemoji-picker-category{background-color:#e7e7e7}.twemoji-picker-category img{padding:5px}.twemoji-picker-category .active,.twemoji-picker-category span:hover{border-bottom:2px solid #728691;line-height:22px}.twemoji-picker-category .close{cursor:pointer;float:right;font-size:25px;font-weight:700;line-height:1;margin-right:2px;opacity:.5}.twemoji-picker-category .close:hover{opacity:.3}.twemoji-list{//overflow-y:scroll;margin-top:1.5rem;margin-left:1.5rem;overflow-y:auto}.twemoji-list img{margin-top:2px;padding:5px}.twemoji-list img:hover{background-color:#e7e7e7}div.copied{position:fixed;top:100px;left:50%;width:300px;text-align:center;color:#fafafa;background-color:#2196f3;border:1px solid #0d47a1;padding:10px 15px;border-radius:4px;margin-left:-100px;box-shadow:0 0 10px rgba(0,0,0,0.2)}

data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.js

@@ -20,6 +20,8 @@
   var b = 150;
   var d = {};
   var twa_database = "/assets/data/twa_v1.json";
+  var responseText;
+  var placeholder;
 
   $.TwemojiPicker = function (element, options) {
     var h = this;
@@ -30,6 +32,7 @@
   };
   $.TwemojiPicker.defaults = {
     init: null,
+    language: "en",
     size: 25,
     icon: "grinning",
     iconSize: 25,
@@ -40,7 +43,7 @@
     pickerPosition: null,
     pickerHeight: 150,
     pickerWidth: null,
-    placeholder: "",
+    placeholder: "Click on Picker to select Emoji's from a Category",
   };
   $.TwemojiPicker.prototype = {
     _init: function (h) {
@@ -67,13 +70,39 @@
     },
     _initPicker: function () {
       var h = this;
+      var clearText;
+      var buttonsHTML;
+
+      if (h.options.language == 'en') {
+        clearText    = 'Clear';
+        responseText = 'Copied to Clipboard';
+        placeholder  = h.options.placeholder;
+      } else if (h.options.language == 'de') {
+        clearText    = 'Löschen';
+        responseText = 'Kopiert zur Zwischenablage';
+        placeholder  = "Klicken Sie auf Picker zur Auswahl von Emoji's aus einer Kategorie";
+      } else {
+        clearText    = 'Clear';
+        responseText = 'in Clipboard';
+        placeholder  = h.options.placeholder;
+      }
+
+      buttonsHTML =  '<div class="twemoji-icon-picker">';
+      buttonsHTML +=   '<span id="open-group" class="mr-2" style="width: 2rem; height: 2rem;">';
+      buttonsHTML +=     '<button type="button" name="open-group" class="btn btn-raised btn-flex btn-primary mr-2"><i class="toggle-button mdi mdi-lg mr-1 mdi-toggle-switch-off"></i> Picker </button>';
+      buttonsHTML +=   '</span>';
+      buttonsHTML +=   '<span id="clear-textarea" style="width: 2rem; height: 2rem;">';
+      buttonsHTML +=     '<button type="button" name="clear-textarea" class="btn btn-raised btn-flex btn-primary"><i class="mdi mdi-close mdi-lg mr-1"></i>' + clearText + '</button>';
+      buttonsHTML +=   '</span>';
+      buttonsHTML += '</div>';
+
       h.$id = "#" + h.$el["0"].id;
       h.$pickerHeigth = h.options.height.replace("px", "");
       h.$pickerHeigth = Number(h.$pickerHeigth);
       h.$wrapper = h.$el.wrap('<div class="twemoji-wrap"></div>').parent();
-      h.$wrapper.append('<div class="twemoji-textarea" contentEditable="true" placeholder="' + h.options.placeholder + '"></div>');
+      h.$wrapper.append('<div class="twemoji-textarea" contentEditable="true" placeholder="' + placeholder + '"></div>');
       h.$wrapper.append('<div class="twemoji-textarea-duplicate"></div>');
-      h.$wrapper.append('<div class="twemoji-icon-picker"><span id="open-group" class="mr-2" style="width: 2rem; height: 2rem;"><button type="button" name="open-group" class="btn btn-raised btn-flex btn-primary mr-2"><i class="toggle-button mdi mdi-lg mr-1 mdi-toggle-switch-off"></i> Picker <div class="ripple-container"></div></button></span><span id="clear-textarea" style="width: 2rem; height: 2rem;"><button type="button" name="clear-textarea" class="btn btn-raised btn-flex btn-primary"><i class="mdi mdi-close mdi-lg mr-1"></i> Clear </button></span></div>');
+      h.$wrapper.append(buttonsHTML);
       h.$wrapper.append('<div class="twemoji-picker"></div>');
       h.$el.hide();
       h.$textarea = h.$wrapper.find(".twemoji-textarea");
@@ -161,8 +190,8 @@
         }
       });
       this.$clearTextarea.on("click", function () {
-        h.copyTextArea("");
-        $(h.$id).val("");
+        h.copyTextArea('');
+        $(h.$id).val('');
         $(".twemoji-textarea > .emoji-span").remove()
       });
       this.$pickerCategory.find("span").on("click", function () {
@@ -187,7 +216,7 @@
         document.execCommand('copy');
         var copied = document.createElement('div');
         copied.setAttribute('class', 'copied');
-        copied.appendChild(document.createTextNode('Copied to Clipboard'));
+        copied.appendChild(document.createTextNode(responseText));
         document.body.appendChild(copied);
         setTimeout(function () {
             document.body.removeChild(copyFrom);

data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.min.js

@@ -16,4 +16,4 @@
  # For details, https://github.com/xLs51/Twemoji-Picker
  # -----------------------------------------------------------------------------
 */
-(function(i,g,k){var c=150;var j={};var e="/assets/data/twa_v1.json";i.TwemojiPicker=function(b,a){var d=this;i.when(this._loadDatabase()).done(function(f){d.$el=i(b);d._init(a)})};i.TwemojiPicker.defaults={init:null,size:25,icon:"grinning",iconSize:25,height:100,width:null,category:["smile","cherry-blossom","video-game","oncoming-automobile","symbols"],categorySize:20,pickerPosition:null,pickerHeight:150,pickerWidth:null,placeholder:"",};i.TwemojiPicker.prototype={_init:function(a){this.options=i.extend(true,{},i.TwemojiPicker.defaults,a);this._initPicker();this._initCategory();this._initTwemoji();this._initText();this._initStyle();this._initEvents()},_loadDatabase:function h(){return i.ajax({url:e,success:function(a){if(typeof a=="string"){j=JSON.parse(a)}if(typeof a=="object"){j=a}}})},_initPicker:function(){var a=this;a.$id="#"+a.$el["0"].id;a.$pickerHeigth=a.options.height.replace("px","");a.$pickerHeigth=Number(a.$pickerHeigth);a.$wrapper=a.$el.wrap('<div class="twemoji-wrap"></div>').parent();a.$wrapper.append('<div class="twemoji-textarea" contentEditable="true" placeholder="'+a.options.placeholder+'"></div>');a.$wrapper.append('<div class="twemoji-textarea-duplicate"></div>');a.$wrapper.append('<div class="twemoji-icon-picker"><span id="open-group" class="mr-2" style="width: 2rem; height: 2rem;"><button type="button" name="open-group" class="btn btn-raised btn-flex btn-primary mr-2"><i class="toggle-button mdi mdi-lg mr-1 mdi-toggle-switch-off"></i> Picker <div class="ripple-container"></div></button></span><span id="clear-textarea" style="width: 2rem; height: 2rem;"><button type="button" name="clear-textarea" class="btn btn-raised btn-flex btn-primary"><i class="mdi mdi-close mdi-lg mr-1"></i> Clear </button></span></div>');a.$wrapper.append('<div class="twemoji-picker"></div>');a.$el.hide();a.$textarea=a.$wrapper.find(".twemoji-textarea");a.$textareaDuplicate=a.$wrapper.find(".twemoji-textarea-duplicate").hide();a.$iconPicker=a.$wrapper.find("#open-group");a.$clearTextarea=a.$wrapper.find("#clear-textarea");a.$picker=a.$wrapper.find(".twemoji-picker").hide()},_initCategory:function(){var b=this;var a=this.options.category;this.categoryName=["people","nature","object","place","symbol"];this.$picker.append('<div class="twemoji-picker-category"></div>');this.$pickerCategory=this.$picker.find(".twemoji-picker-category");i.each(this.categoryName,function(f,d){b.$pickerCategory.append('<span data-category="'+d+'">'+b.imageFromName(a[f])+"</span>")});this.$pickerCategory.find("span:first").addClass("active")},_initTwemoji:function(){var a=this;i.each(this.categoryName,function(d,b){a.$picker.append('<div class="twemoji-list '+b+'"></div>');i.each(j,function(m,f){if(f.category===b){a.$wrapper.find(".twemoji-picker ."+b).append('<span><img class="emoji" draggable="false" src="'+f.base64+'" alt="'+f.value+'" title="'+f.name+'"></span>')}})});this.$twemojiList=this.$picker.find(".twemoji-list");this.$twemojiList.not(":first").hide()},_initText:function(){if(this.options.init){var a=this.options.init;var b=/:([\w-]+):/g;var d;while(d==b.exec(a)){a=a.replace(d[0],this.imageFromName(d[1],true))}this.$textarea.html(a);this.copyTextArea(this.$textarea.html())}},_initStyle:function(){this.$wrapper.css({width:this.options.width?this.options.width:"100%",height:this.options.height?this.options.height:"",});this.$wrapper.find("img").css({width:this.options.size,height:this.options.size,});this.$iconPicker.css({width:this.options.iconSize,height:this.options.iconSize,});this.$pickerCategory.find("img").css({width:this.options.categorySize,height:this.options.categorySize,});this.$twemojiList.css({width:this.options.pickerWidth?this.options.pickerWidth:"100%",height:this.options.pickerHeight,});this.$picker.css({width:this.options.pickerWidth?this.options.pickerWidth:"100%",top:this.options.pickerPosition==="top"?"-"+this.$picker.outerHeight()+"px":"",})},_initEvents:function(){var a=this;this.$textarea.on("keyup",function(){a.copyTextArea(i(this).html())});this.$iconPicker.on("click",function(){var b=i(".twemoji-picker").height()+c;i("#picker").height(b);i(".toggle-button").toggleClass("mdi-toggle-switch-off mdi-toggle-switch");if(!a.openedPicker){a.openPicker()}else{a.closePicker();i("#picker").height(a.$pickerHeigth)}});this.$clearTextarea.on("click",function(){a.copyTextArea("");i(a.$id).val("");i(".twemoji-textarea > .emoji-span").remove()});this.$pickerCategory.find("span").on("click",function(){var b=i(this).data("category");a.openCategory(i(this),b)});this.$pickerCategory.find(".close").on("click",function(){if(a.openedPicker){a.closePicker()}});this.$twemojiList.find("img").on("click",function(){a.copyTwemoji(i(this))})},copyText:function(d){var b=document.createElement("textarea");b.setAttribute("style","position:fixed;opacity:0;top:100px;left:100px;");b.value=d;document.body.appendChild(b);b.select();document.execCommand("copy");var a=document.createElement("div");a.setAttribute("class","copied");a.appendChild(document.createTextNode("Copied to Clipboard"));document.body.appendChild(a);setTimeout(function(){document.body.removeChild(b);document.body.removeChild(a)},1500)},openPicker:function(){this.$picker.show();this.openedPicker=true},closePicker:function(){this.$picker.hide();this.openedPicker=false},openCategory:function(b,a){this.$pickerCategory.find("span").removeClass("active");b.addClass("active");this.$twemojiList.not(".twemoji-picker ."+a).hide();this.$twemojiList.filter(".twemoji-picker ."+a).show()},copyTwemoji:function(a){var f=a.attr("alt");var b=a.attr("src");var d=a.attr("title");var m="emoji:"+d+"[]";this.copyText(m);this.$textarea.focus();this.pasteAtCursor('<span class="emoji-span"><img class="emoji" src="'+b+'" title="'+d+'" alt="'+f+'" width="'+this.options.size+'" height="'+this.options.size+'"> '+m+"</span> ");this.copyTextArea(this.$textarea.html())},copyTextArea:function(a){var d=this.$textareaDuplicate.html(a);d.find("img").replaceWith(function(){return this.alt});var b=d.html();this.$el.text(b)},imageFromName:function(b,a){var d=i.grep(j,function(f){return f.name==b});if(a){return'<img class="emoji" src="'+d[0].base64+'" alt="'+d[0].value+'" width="'+this.options.size+'" height="'+this.options.size+'">'}return'<img class="emoji" draggable="false" src="'+d[0].base64+'" alt="'+b+'">'},pasteAtCursor:function(a){var b,p;if(g.getSelection){b=g.getSelection();if(b.getRangeAt&&b.rangeCount){p=b.getRangeAt(0);p.deleteContents();var o=document.createElement("div");o.innerHTML=a;var q=document.createDocumentFragment(),d,f;while((d=o.firstChild)){f=q.appendChild(d)}p.insertNode(q);if(f){p=p.cloneRange();p.setStartAfter(f);p.collapse(true);b.removeAllRanges();b.addRange(p)}}}else{if(document.selection&&document.selection.type!="Control"){document.selection.createRange().pasteHTML(a)}}}};i.fn.twemojiPicker=function(a){var b=i.data(this,"twemojiPicker");this.each(function(){b?b._init():b=i.data(this,"twemojiPicker",new i.TwemojiPicker(this,a))});return b}})(jQuery,window);
+(function(c,h,a){var k=150;var i={};var e="/assets/data/twa_v1.json";var j;var l;c.TwemojiPicker=function(d,b){var f=this;c.when(this._loadDatabase()).done(function(m){f.$el=c(d);f._init(b)})};c.TwemojiPicker.defaults={init:null,language:"en",size:25,icon:"grinning",iconSize:25,height:100,width:null,category:["smile","cherry-blossom","video-game","oncoming-automobile","symbols"],categorySize:20,pickerPosition:null,pickerHeight:150,pickerWidth:null,placeholder:"Click on Picker to select Emoji's from a Category",};c.TwemojiPicker.prototype={_init:function(b){this.options=c.extend(true,{},c.TwemojiPicker.defaults,b);this._initPicker();this._initCategory();this._initTwemoji();this._initText();this._initStyle();this._initEvents()},_loadDatabase:function g(){return c.ajax({url:e,success:function(b){if(typeof b=="string"){i=JSON.parse(b)}if(typeof b=="object"){i=b}}})},_initPicker:function(){var f=this;var b;var d;if(f.options.language=="en"){b="Clear";j="Copied to Clipboard";l=f.options.placeholder}else{if(f.options.language=="de"){b="Löschen";j="Kopiert zur Zwischenablage";l="Klicken Sie auf Picker zur Auswahl von Emoji's aus einer Kategorie"}else{b="Clear";j="in Clipboard";l=f.options.placeholder}}d='<div class="twemoji-icon-picker">';d+='<span id="open-group" class="mr-2" style="width: 2rem; height: 2rem;">';d+='<button type="button" name="open-group" class="btn btn-raised btn-flex btn-primary mr-2"><i class="toggle-button mdi mdi-lg mr-1 mdi-toggle-switch-off"></i> Picker </button>';d+="</span>";d+='<span id="clear-textarea" style="width: 2rem; height: 2rem;">';d+='<button type="button" name="clear-textarea" class="btn btn-raised btn-flex btn-primary"><i class="mdi mdi-close mdi-lg mr-1"></i>'+b+"</button>";d+="</span>";d+="</div>";f.$id="#"+f.$el["0"].id;f.$pickerHeigth=f.options.height.replace("px","");f.$pickerHeigth=Number(f.$pickerHeigth);f.$wrapper=f.$el.wrap('<div class="twemoji-wrap"></div>').parent();f.$wrapper.append('<div class="twemoji-textarea" contentEditable="true" placeholder="'+l+'"></div>');f.$wrapper.append('<div class="twemoji-textarea-duplicate"></div>');f.$wrapper.append(d);f.$wrapper.append('<div class="twemoji-picker"></div>');f.$el.hide();f.$textarea=f.$wrapper.find(".twemoji-textarea");f.$textareaDuplicate=f.$wrapper.find(".twemoji-textarea-duplicate").hide();f.$iconPicker=f.$wrapper.find("#open-group");f.$clearTextarea=f.$wrapper.find("#clear-textarea");f.$picker=f.$wrapper.find(".twemoji-picker").hide()},_initCategory:function(){var d=this;var b=this.options.category;this.categoryName=["people","nature","object","place","symbol"];this.$picker.append('<div class="twemoji-picker-category"></div>');this.$pickerCategory=this.$picker.find(".twemoji-picker-category");c.each(this.categoryName,function(m,f){d.$pickerCategory.append('<span data-category="'+f+'">'+d.imageFromName(b[m])+"</span>")});this.$pickerCategory.find("span:first").addClass("active")},_initTwemoji:function(){var b=this;c.each(this.categoryName,function(f,d){b.$picker.append('<div class="twemoji-list '+d+'"></div>');c.each(i,function(n,m){if(m.category===d){b.$wrapper.find(".twemoji-picker ."+d).append('<span><img class="emoji" draggable="false" src="'+m.base64+'" alt="'+m.value+'" title="'+m.name+'"></span>')}})});this.$twemojiList=this.$picker.find(".twemoji-list");this.$twemojiList.not(":first").hide()},_initText:function(){if(this.options.init){var b=this.options.init;var d=/:([\w-]+):/g;var f;while(f==d.exec(b)){b=b.replace(f[0],this.imageFromName(f[1],true))}this.$textarea.html(b);this.copyTextArea(this.$textarea.html())}},_initStyle:function(){this.$wrapper.css({width:this.options.width?this.options.width:"100%",height:this.options.height?this.options.height:"",});this.$wrapper.find("img").css({width:this.options.size,height:this.options.size,});this.$iconPicker.css({width:this.options.iconSize,height:this.options.iconSize,});this.$pickerCategory.find("img").css({width:this.options.categorySize,height:this.options.categorySize,});this.$twemojiList.css({width:this.options.pickerWidth?this.options.pickerWidth:"100%",height:this.options.pickerHeight,});this.$picker.css({width:this.options.pickerWidth?this.options.pickerWidth:"100%",top:this.options.pickerPosition==="top"?"-"+this.$picker.outerHeight()+"px":"",})},_initEvents:function(){var b=this;this.$textarea.on("keyup",function(){b.copyTextArea(c(this).html())});this.$iconPicker.on("click",function(){var d=c(".twemoji-picker").height()+k;c("#picker").height(d);c(".toggle-button").toggleClass("mdi-toggle-switch-off mdi-toggle-switch");if(!b.openedPicker){b.openPicker()}else{b.closePicker();c("#picker").height(b.$pickerHeigth)}});this.$clearTextarea.on("click",function(){b.copyTextArea("");c(b.$id).val("");c(".twemoji-textarea > .emoji-span").remove()});this.$pickerCategory.find("span").on("click",function(){var d=c(this).data("category");b.openCategory(c(this),d)});this.$pickerCategory.find(".close").on("click",function(){if(b.openedPicker){b.closePicker()}});this.$twemojiList.find("img").on("click",function(){b.copyTwemoji(c(this))})},copyText:function(f){var d=document.createElement("textarea");d.setAttribute("style","position:fixed;opacity:0;top:100px;left:100px;");d.value=f;document.body.appendChild(d);d.select();document.execCommand("copy");var b=document.createElement("div");b.setAttribute("class","copied");b.appendChild(document.createTextNode(j));document.body.appendChild(b);setTimeout(function(){document.body.removeChild(d);document.body.removeChild(b)},1500)},openPicker:function(){this.$picker.show();this.openedPicker=true},closePicker:function(){this.$picker.hide();this.openedPicker=false},openCategory:function(d,b){this.$pickerCategory.find("span").removeClass("active");d.addClass("active");this.$twemojiList.not(".twemoji-picker ."+b).hide();this.$twemojiList.filter(".twemoji-picker ."+b).show()},copyTwemoji:function(b){var m=b.attr("alt");var d=b.attr("src");var f=b.attr("title");var n="emoji:"+f+"[]";this.copyText(n);this.$textarea.focus();this.pasteAtCursor('<span class="emoji-span"><img class="emoji" src="'+d+'" title="'+f+'" alt="'+m+'" width="'+this.options.size+'" height="'+this.options.size+'"> '+n+"</span> ");this.copyTextArea(this.$textarea.html())},copyTextArea:function(b){var f=this.$textareaDuplicate.html(b);f.find("img").replaceWith(function(){return this.alt});var d=f.html();this.$el.text(d)},imageFromName:function(d,b){var f=c.grep(i,function(m){return m.name==d});if(b){return'<img class="emoji" src="'+f[0].base64+'" alt="'+f[0].value+'" width="'+this.options.size+'" height="'+this.options.size+'">'}return'<img class="emoji" draggable="false" src="'+f[0].base64+'" alt="'+d+'">'},pasteAtCursor:function(b){var d,q;if(h.getSelection){d=h.getSelection();if(d.getRangeAt&&d.rangeCount){q=d.getRangeAt(0);q.deleteContents();var p=document.createElement("div");p.innerHTML=b;var r=document.createDocumentFragment(),f,o;while((f=p.firstChild)){o=r.appendChild(f)}q.insertNode(r);if(o){q=q.cloneRange();q.setStartAfter(o);q.collapse(true);d.removeAllRanges();d.addRange(q)}}}else{if(document.selection&&document.selection.type!="Control"){document.selection.createRange().pasteHTML(b)}}}};c.fn.twemojiPicker=function(b){var d=c.data(this,"twemojiPicker");this.each(function(){d?d._init():d=c.data(this,"twemojiPicker",new c.TwemojiPicker(this,b))});return d}})(jQuery,window);

data/lib/j1/version.rb

@@ -1,3 +1,3 @@
 module J1
-  VERSION = '2021.1.18'
+  VERSION = '2021.1.22'
 end

data/lib/starter_web/Gemfile

@@ -53,7 +53,7 @@ gem 'jekyll', '~> 4.2'
 
 # Theme Rubies, default: J1 Template (NOT used for the development system)
 #
-gem 'j1-template', '~> 2021.1.18'
+gem 'j1-template', '~> 2021.1.22'
 
 # ------------------------------------------------------------------------------
 # PRODUCTION: Gem needed for the Jekyll and J1 prod environment

data/lib/starter_web/_config.yml

@@ -53,13 +53,13 @@ environment:                            production
 # ------------------------------------------------------------------------------
 #   Sets the build version of J1 Template Gem
 #
-version:                                2021.1.18
+version:                                2021.1.22
 
 # version
 # ------------------------------------------------------------------------------
 #   Sets the build version of J1 Template
 #
-copyright:                              J1 · Copyright © 2021
+copyright:                              © 2021 J1 · All rights reserved
 
 # ==============================================================================
 # 2. THEME configuration

data/lib/starter_web/_data/_defaults/resources.yml

@@ -362,9 +362,7 @@ resources:
 
                                         ]
         files:                          [
-                                          modules/util/js/js.cookie.js,
-                                          modules/util/js/lite-url.js,
-                                          modules/util/js/platform.js,
+                                          modules/util/js/gtag-opt-in.js,
                                           adapter/js/j1.js
                                         ]
         js:                             [
@@ -460,9 +458,9 @@ resources:
         init_function:                  [ j1.adapter.navigator.init ]
 
   # ----------------------------------------------------------------------------
-  # MMenu Light
+  # Mobile Menu (Light)
   #
-  - name:                               Mobile Menu
+  - name:                               MMenu
     resource:
       id:                               mmenu
       enabled:                          true
@@ -476,8 +474,8 @@ resources:
       pass_init_data:                   false
       data:
         css:                            [
-                                          modules/mmenuLight/css/mmenu,
-                                          modules/mmenuLight/css/theme/uno
+                                          modules/mmenuLight/css/mmenu-light,
+                                          modules/mmenuLight/css/theme/uno/mmenu
                                         ]
         files:                          [
                                           modules/mmenuLight/js/mmenu.js,
@@ -676,7 +674,7 @@ resources:
       dependencies:                     false
       pass_init_data:                   false
       data:
-        css:                            [ modules/rtable/css/theme/uno ]
+        css:                            [ modules/rtable/css/theme/uno/rtable ]
         files:                          [ adapter/js/rtable.js ]
         js:                             [ modules/rtable/js/rtable ]
         init_function:                  [ j1.adapter.rtable.init ]
@@ -1180,16 +1178,14 @@ resources:
       dependencies:                     false
       pass_init_data:                   true
       data:
-        css:                            []
+        css:                            [ modules/fam/css/theme/uno/fam ]             # styles for (J1) theme Uno]
         files:                          [
-                                          modules/fam/css/uno/fam.css,          # styles for (J1) theme Uno
 #                                         modules/cash/js/cash.js,              # current version|s of Cash NOT usable
                                           modules/materialize/js/cash.js,       # adapted|old (1.3.5) version from Materialize
                                           modules/fam/js/fam.js,                # modified version for J1 (former: button.js)
                                           adapter/js/fam.js                     # adapter adopted from ssm module
                                         ]
         js:                             []
-        init_function:                  []
         init_function:                  [ j1.adapter.fam.init ]
 
   # ----------------------------------------------------------------------------
@@ -1242,5 +1238,27 @@ resources:
         js:                             [ modules/datatables/js/datatables ]
         init_function:                  []
 
+  # ----------------------------------------------------------------------------
+  # rtextResizer
+  # NOTE: This module is in state EXPERIMENTAL
+  #
+  - name:                               rtextResizer
+    resource:
+      id:                               rtextresizer
+      enabled:                          false
+      comment:                          J1 rtextResizer
+      region:                           head
+      layout:                           [ home, page, post, collection ]
+      required:                         always                                  # always | ondemand
+      preload:                          false                                   # property currently unused
+      script_load:                      defer
+      dependencies:                     false
+      pass_init_data:                   false
+      data:
+        css:                            []
+        files:                          [ adapter/js/rtextResizer.js ]
+        js:                             []
+        init_function:                  [ j1.adapter.rtextResizer.init ]
+
 # ------------------------------------------------------------------------------
 # END config

data/lib/starter_web/_data/apps/justifiedGallery.yml

@@ -374,5 +374,45 @@ settings:
           videojs:                      true
           videojsOptions:               {}
 
+    # --------------------------------------------------------------------------
+    # TikTok
+    #
+    - gallery:
+        enabled:                        true
+        type:                           video-online
+        id:                             jg_tiktok
+        show_delay:                     300
+        title:                          false
+        css_classes:
+        image_path:                     /assets/videos/tiktok
+        thumb_path:                     /assets/videos/tiktok
+        videos:                         [
+                                          "https://www.tiktok.com/@octaviaegon/video/6983746143356292357/",
+                                          "https://www.tiktok.com/@waluschka.w59/video/6984680288114756870/",
+                                          "https://www.tiktok.com/@octaviaegon/video/6983746143356292357/",
+                                        ]
+        captions_gallery:               [
+                                        "Egon - Einhorn",
+                                        "Valentina - Mahlzeit!",
+                                        "Egon - Einhorn",
+                                        ]
+        captions_lightbox:              [
+                                          "<p>Egon - Einhorn</p>",
+                                          "<p>Valentina - Mahlzeit!</p>",
+                                          "<p>Egon - Einhorn</p>"
+                                        ]
+        poster:                         [                                       # thumbnails taken from https://www.tiktok.com/oembed?url=xxx (thumbnail_url)
+                                          einhorn.jpg,                          # https://p16-sign-va.tiktokcdn.com/tos-maliva-p-0068/dd93b5e1036b47f88ecd38fdc7305c4c~tplv-dmt-logom:tos-maliva-p-0000/a6315c6d8268486c931480b6fb1e3836.image?x-expires=1629579600&x-signature=lWUMEMNw%2Byf3tTX4YOdEGRrh1%2BQ%3D
+                                          waluschka.jpg,                        # https://p16-sign-va.tiktokcdn.com/obj/tos-maliva-p-0068/03a05accd4ec443aba51f4ec8a07d3a0?x-expires=1629583200&x-signature=t%2FvV5z4I9mdjtwAzH4FOF%2Fkm9fs%3D
+                                          einhorn.jpg
+                                        ]
+        gallery_options:
+          rowHeight:                    400
+          margins:                      5
+
+        lightbox_options:
+          lightbox:                     lg
+
+
 # ------------------------------------------------------------------------------
 # END config

data/lib/starter_web/_data/blocks/banner.yml

@@ -137,8 +137,9 @@ settings:
               animate:                  fadeInUp
               title:                    Jekyll One Template
               tagline:                  <b>powerful modern static websites</b>
+              description_properties:   mr-3 mb-3
               description: >
-                                        <p>
+                                        <p class="dropcap">
                                           Jekyll One Template is the first toolbox to create modern webs and a
                                           learning platform to experience what is behind current Internet
                                           Technologies for the World Wide Web. J1 provides creative people
@@ -160,9 +161,8 @@ settings:
                   button:
                     title:              Roundtrip
                     tagline:            learn top features
-                    class:              btn btn-raised btn-xl btn-primary text-uppercase mr-2 mb-2
-#                   style:              "min-width: 370px"
-                    style:
+                    class:              btn btn-raised btn-xl btn-primary text-uppercase text-left mr-2 mb-2
+                    style:              "min-width: 250px"
                     icon:               briefcase-search-outline
                     icon_color:
                     icon_size:          3x
@@ -173,8 +173,8 @@ settings:
                   button:
                     title:              Download
                     tagline:            get on rubygems
-                    class:              btn btn-raised btn-xl btn-primary text-uppercase mr-2 mb-2
-                    style:
+                    class:              btn btn-raised btn-xl btn-primary text-uppercase text-left mr-2 mb-2
+                    style:              "min-width: 250px"
                     icon:               briefcase-download-outline
                     icon_color:
                     icon_size:          3x
@@ -185,8 +185,8 @@ settings:
                   button:
                     title:              Quickstart
                     tagline:            finished in 15 minutes
-                    class:              btn btn-raised btn-xl btn-primary text-uppercase mr-2 mb-2
-                    style:
+                    class:              btn btn-raised btn-xl btn-primary text-uppercase text-left mr-2 mb-2
+                    style:              "min-width: 250px"
                     icon:               briefcase-check-outline
                     icon_color:
                     icon_size:          3x

data/lib/starter_web/_data/blocks/footer.yml

@@ -74,10 +74,10 @@ settings:
               enabled:                  true
               type:                     copyright
               en:
-                statement:              J1 © 2021 · All rights reserved
+                statement:              © 2021 J1 · All rights reserved
                 href:                   /pages/public/legal/en/copyright/
               de:
-                statement:              J1 © 2021 · Alle Rechte vorbehalten
+                statement:              © 2021 J1 · Alle Rechte vorbehalten
                 href:                   /pages/public/legal/de/copyright/
 
           - name:                       Impress
@@ -162,11 +162,9 @@ settings:
             tagline:                    <large>powerful modern static websites</large>
             text: >
                                         J1 meets Jekyll and Bootstrap. And makes a lot of friends.
-                                        The template system combines the best of free software for the web.
-                                        Jekyll One Template is OpenSource and the modules included
-                                        are free to use as well.
-                                        <br/><br/>
-                                        No issues for private or professional use.
+                                        The template system combines the best of free software for
+                                        the web. Jekyll One Template is OpenSource and the modules
+                                        included are free to use as well.
 
           # --------------------------------------------------------------------
           # NEWS box

data/lib/starter_web/_data/blocks/panel.yml

@@ -38,13 +38,14 @@ settings:
         id:                             home_intro_panel
         comment:                        Home Intro Panel
         type:                           intro
-        animate:
+        animate:                        fadeInUp
         properties:                     mt-3 mr-3 mb-5 ml-3
 
         title:                          All in One
         tagline:                        top features
+        description_properties:         mr-3 mb-3
         description: >
-                                        <p>
+                                        <p class="dropcap">
                                           People quite often ask if static websites make sense
                                           for anything beyond a one-page website. Some others see in
                                           static websites the stone age of the World Wide Web. What's
@@ -73,8 +74,10 @@ settings:
               icon_size:                3x
               icon_color:
               text: >
-                                        The Web is everywhere. J1 Template supports modern web browsers
-                                        on all devices for best results on PCs, Tablets, and SmartPhones.
+                                        <p class="dropcap">
+                                          The Web is everywhere. J1 Template supports modern web browsers
+                                          on all devices for best results on PCs, Tablets, and SmartPhones.
+                                        </p>
 
               buttons:
 
@@ -99,8 +102,10 @@ settings:
               icon_size:                3x
               icon_color:
               text: >
-                                        Current Technology and Design. Excellent performance in running
-                                        a website. Use Jekyll One to present your content at its best.
+                                        <p class="dropcap">
+                                          Current Technology and Design. Excellent performance in running
+                                          a website. Use Jekyll One to present your content at its best.
+                                        </p>
 
               buttons:
                 - name:                 Read More
@@ -125,9 +130,11 @@ settings:
               icon_size:                3x
               icon_color:
               text: >
-                                        No programming is needed to start using J1. The Template
-                                        provides a large number of building blocks to create
-                                        modern web pages in minutes.
+                                        <p class="dropcap">
+                                          No programming is needed to start using J1. The Template
+                                          provides a large number of building blocks to create
+                                          modern web pages in minutes.
+                                        </p>
 
               buttons:
                 - name:                 Read More
@@ -154,7 +161,7 @@ settings:
         id:                             home_service_panel
         comment:                        Home Service Panel
         type:                           service
-        animate:
+        animate:                        fadeInUp
         icon_family:                    MDI
 
         style:                          flat
@@ -305,18 +312,21 @@ settings:
         id:                             home_news_panel
         comment:                        Home News Panel
         type:                           news
-        animate:
+        animate:                        fadeInUp
         properties:                     mt-5 mr-3 mb-5 ml-3
 
         title:                          Creators Blog
         tagline:                        latest news
+        description_properties:         mr-3 mb-4
         description: >
-                                        Explore the blog and find interesting articles around Jekyll and
-                                        website creation processes in general. And this blog is an excellent
-                                        example of how J1 and Jekyll can be used for blogging.
-                                        <br/>
-                                        Have fun!
-
+                                        <p class="dropcap">
+                                          Explore the blog and find interesting articles around Jekyll and
+                                          website creation processes in general. And this blog is an excellent
+                                          example of how J1 and Jekyll can be used for blogging.
+                                        </p>
+                                        <p>
+                                          Have fun!
+                                        </p>
         cards:
 
           - name:                       Recent Posts