From aab317895b0ecfe55dfab40d65c9ba30e55023f5 Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Sat, 12 Jan 2019 05:47:19 +0300 Subject: [PATCH] Responsive layout (#593) * Mobile adaptation beginned * mobile ready * Narrow mode supported * update version * disable narrow mode testing * prod build * rm unnecessary code * Update src/styles/variables.css * rm unused code * add viewport * disable narrow mode on mobile * mobile: add bg to current block * add paddings for highlighted block * rm changelog --- dist/codex-editor.js | 8 +++--- docs/CHANGELOG.md | 15 +++++++---- example/assets/demo.css | 9 ++++++- example/example.html | 3 ++- package.json | 2 +- src/components/modules/ui.ts | 20 +++++++++++++- src/styles/block.css | 15 +++++++++++ src/styles/inline-toolbar.css | 4 +++ src/styles/settings.css | 10 +++++++ src/styles/toolbar.css | 50 ++++++++++++++++++++++++++++++++--- src/styles/toolbox.css | 44 +++++++++++++++++++++--------- src/styles/ui.css | 15 +++++++++++ src/styles/variables.css | 15 +++++++---- 13 files changed, 176 insertions(+), 34 deletions(-) diff --git a/dist/codex-editor.js b/dist/codex-editor.js index 60efe578..e9661964 100644 --- a/dist/codex-editor.js +++ b/dist/codex-editor.js @@ -1,7 +1,7 @@ /*! * Codex Editor * - * @version 2.7.26 + * @version 2.7.27 * * @licence Apache-2.0 * @author CodeX-Team @@ -9,7 +9,7 @@ * @uses html-janitor * @licence Apache-2.0 (https://github.com/guardian/html-janitor/blob/master/LICENSE) */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.CodexEditor=e():t.CodexEditor=e()}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=160)}([function(t,e,n){var o=n(9),r=n(16),i=n(22),a=n(19),s=n(31),u=function(t,e,n){var c,l,f,d,p=t&u.F,h=t&u.G,v=t&u.S,g=t&u.P,y=t&u.B,b=h?o:v?o[e]||(o[e]={}):(o[e]||{}).prototype,m=h?r:r[e]||(r[e]={}),k=m.prototype||(m.prototype={});for(c in h&&(n=e),n)f=((l=!p&&b&&void 0!==b[c])?b:n)[c],d=y&&l?s(f,o):g&&"function"==typeof f?s(Function.call,f):f,b&&a(b,c,f,t&u.U),m[c]!=f&&i(m,c,d),g&&k[c]!=f&&(k[c]=f)};o.core=r,u.F=1,u.G=2,u.S=4,u.P=8,u.B=16,u.W=32,u.U=64,u.R=128,t.exports=u},function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e){function n(t,e){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:null,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=document.createElement(t);for(var a in Array.isArray(n)?(e=r.classList).add.apply(e,(0,i.default)(n)):n&&r.classList.add(n),o)o.hasOwnProperty(a)&&(r[a]=o[a]);return r}},{key:"text",value:function(t){return document.createTextNode(t)}},{key:"svg",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:14,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:14,o=document.createElementNS("http://www.w3.org/2000/svg","svg");return o.classList.add("icon","icon--"+t),o.setAttribute("width",e+"px"),o.setAttribute("height",n+"px"),o.innerHTML=''),o}},{key:"append",value:function(t,e){Array.isArray(e)?e.forEach(function(e){return t.appendChild(e)}):t.appendChild(e)}},{key:"prepend",value:function(t,e){Array.isArray(e)?(e=e.reverse()).forEach(function(e){return t.prepend(e)}):t.prepend(e)}},{key:"swap",value:function(t,e){var n=document.createElement("div"),o=t.parentNode;o.insertBefore(n,t),o.insertBefore(t,e),o.insertBefore(e,n),o.removeChild(n)}},{key:"find",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,e=arguments.length>1?arguments[1]:void 0;return t.querySelector(e)}},{key:"get",value:function(t){return document.getElementById(t)}},{key:"findAll",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,e=arguments.length>1?arguments[1]:void 0;return t.querySelectorAll(e)}},{key:"getDeepestNode",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=n?"lastChild":"firstChild",r=n?"previousSibling":"nextSibling";if(e&&e.nodeType===Node.ELEMENT_NODE&&e[o]){var i=e[o];if(t.isSingleTag(i)&&!t.isNativeInput(i)&&!t.isLineBreakTag(i))if(i[r])i=i[r];else{if(!i.parentNode[r])return i.parentNode;i=i.parentNode[r]}return this.getDeepestNode(i,n)}return e}},{key:"isElement",value:function(t){return t&&"object"===(0,r.default)(t)&&t.nodeType&&t.nodeType===Node.ELEMENT_NODE}},{key:"isFragment",value:function(t){return t&&"object"===(0,r.default)(t)&&t.nodeType&&t.nodeType===Node.DOCUMENT_FRAGMENT_NODE}},{key:"isContentEditable",value:function(t){return"true"===t.contentEditable}},{key:"isNativeInput",value:function(t){return!(!t||!t.tagName)&&["INPUT","TEXTAREA"].includes(t.tagName)}},{key:"canSetCaret",value:function(e){var n=!0;if(t.isNativeInput(e)){var o=e;switch(o.type){case"file":case"checkbox":case"radio":case"hidden":case"submit":case"button":case"image":case"reset":n=!1}}else n=t.isContentEditable(e);return n}},{key:"isNodeEmpty",value:function(t){return!(this.isSingleTag(t)&&!this.isLineBreakTag(t))&&0===(this.isElement(t)&&this.isNativeInput(t)?t.value:t.textContent.replace("​","")).trim().length}},{key:"isLeaf",value:function(t){return!!t&&0===t.childNodes.length}},{key:"isEmpty",value:function(t){var e=this,n=[],o=[];if(!t)return!0;if(!t.childNodes.length)return this.isNodeEmpty(t);for(n.push(t.firstChild);n.length>0;)if(t=n.shift()){for(this.isLeaf(t)?o.push(t):n.push(t.firstChild);t&&t.nextSibling;)(t=t.nextSibling)&&n.push(t);if(t&&!this.isNodeEmpty(t))return!1}return o.every(function(t){return e.isNodeEmpty(t)})}},{key:"isHTMLString",value:function(e){var n=t.make("div");return n.innerHTML=e,n.childElementCount>0}},{key:"getContentLength",value:function(e){return t.isNativeInput(e)?e.value.length:e.nodeType===Node.TEXT_NODE?e.length:e.textContent.length}},{key:"containsOnlyInlineElements",value:function(e){var n;return"string"==typeof e?(n=document.createElement("div")).innerHTML=e:n=e,Array.from(n.children).every(function e(n){return!t.blockElements.includes(n.tagName.toLowerCase())&&Array.from(n.children).every(e)})}},{key:"getDeepestBlockElements",value:function(e){return t.containsOnlyInlineElements(e)?[e]:Array.from(e.children).reduce(function(e,n){return(0,i.default)(e).concat((0,i.default)(t.getDeepestBlockElements(n)))},[])}},{key:"blockElements",get:function(){return["address","article","aside","blockquote","canvas","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","li","main","nav","noscript","ol","output","p","pre","ruby","section","table","tr","tfoot","ul","video"]}}]),t}();o.default=c,c.displayName="Dom",t.exports=e.default})?o.apply(e,r):o)||(t.exports=i)},function(t,e,n){var o=n(11),r=n(98),i=n(37),a=Object.defineProperty;e.f=n(15)?Object.defineProperty:function(t,e,n){if(o(t),e=i(e,!0),o(n),r)try{return a(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){t.exports=!n(8)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){var n=t.exports={version:"2.5.7"};"number"==typeof __e&&(__e=n)},function(t,e,n){var o=n(35),r=Math.min;t.exports=function(t){return t>0?r(o(t),9007199254740991):0}},function(t,e,n){var o,r,i;r=[e,n(29),n(30),n(1),n(2),n(13)],void 0===(i="function"==typeof(o=function(o,r,i,a,s,u){"use strict";var c=n(3);Object.defineProperty(o,"__esModule",{value:!0}),o.default=void 0,r=c(r),i=c(i),a=c(a),s=c(s),u=c(u);var l=function(){function t(){(0,a.default)(this,t)}var e;return(0,s.default)(t,null,[{key:"log",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"log",n=arguments.length>2?arguments[2]:void 0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"color: inherit";if("console"in window&&window.console[e]){var r="Editor.js ".concat("2.7.26"),i="line-height: 1em;\n color: #006FEA;\n display: inline-block;\n font-size: 11px;\n line-height: 1em;\n background-color: #fff;\n padding: 4px 9px;\n border-radius: 30px;\n border: 1px solid rgba(56, 138, 229, 0.16);\n margin: 4px 5px 4px 0;";try{["time","timeEnd"].includes(e)?console[e]("( ".concat(r," ) ").concat(t)):n?console[e]("%c".concat(r,"%c ").concat(t," %o"),i,o,n):console[e]("%c".concat(r,"%c ").concat(t),i,o)}catch(t){}}}},{key:"sequence",value:(e=(0,i.default)(r.default.mark(function t(e){var n,o,a,s,u=arguments;return r.default.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return s=function(){return(s=(0,i.default)(r.default.mark(function t(e,n,o){return r.default.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,e.function(e.data);case 3:return t.next=5,n(void 0!==e.data?e.data:{});case 5:t.next=10;break;case 7:t.prev=7,t.t0=t.catch(0),o(void 0!==e.data?e.data:{});case 10:case"end":return t.stop()}},t,this,[[0,7]])}))).apply(this,arguments)},a=function(t,e,n){return s.apply(this,arguments)},n=u.length>1&&void 0!==u[1]?u[1]:function(){},o=u.length>2&&void 0!==u[2]?u[2]:function(){},t.next=6,e.reduce(function(){var t=(0,i.default)(r.default.mark(function t(e,i){return r.default.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e;case 2:return t.abrupt("return",a(i,n,o));case 3:case"end":return t.stop()}},t,this)}));return function(e,n){return t.apply(this,arguments)}}(),Promise.resolve());case 6:return t.abrupt("return",t.sent);case 7:case"end":return t.stop()}},t,this)})),function(t){return e.apply(this,arguments)})},{key:"array",value:function(t){return Array.prototype.slice.call(t)}},{key:"isFunction",value:function(t){return"function"==typeof t}},{key:"isClass",value:function(t){return"function"==typeof t&&/^\s*class\s+/.test(t.toString())}},{key:"isEmpty",value:function(t){return!t||0===Object.keys(t).length&&t.constructor===Object}},{key:"isPromise",value:function(t){return Promise.resolve(t)===t}},{key:"delay",value:function(t,e){return function(){var n=this,o=arguments;window.setTimeout(function(){return t.apply(n,o)},e)}}},{key:"getFileExtension",value:function(t){return t.name.split(".").pop()}},{key:"isValidMimeType",value:function(t){return/^[-\w]+\/([-+\w]+|\*)$/.test(t)}},{key:"debounce",value:function(t,e,n){var o,r=this,i=arguments;return function(){var a=r,s=i,u=n&&!o;window.clearTimeout(o),o=window.setTimeout(function(){o=null,n||t.apply(a,s)},e),u&&t.apply(a,s)}}},{key:"copyTextToClipboard",value:function(t){var e=u.default.make("div","codex-editor-clipboard",{innerHTML:t});document.body.appendChild(e);var n=window.getSelection(),o=document.createRange();o.selectNode(e),window.getSelection().removeAllRanges(),n.addRange(o),document.execCommand("copy"),document.body.removeChild(e)}},{key:"keyCodes",get:function(){return{BACKSPACE:8,TAB:9,ENTER:13,SHIFT:16,CTRL:17,ALT:18,ESC:27,SPACE:32,LEFT:37,UP:38,DOWN:40,RIGHT:39,DELETE:46,META:91}}}]),t}();o.default=l,l.displayName="Util",t.exports=e.default})?o.apply(e,r):o)||(t.exports=i)},function(t,e,n){var o=n(9),r=n(22),i=n(21),a=n(41)("src"),s=Function.toString,u=(""+s).split("toString");n(16).inspectSource=function(t){return s.call(t)},(t.exports=function(t,e,n,s){var c="function"==typeof n;c&&(i(n,"name")||r(n,"name",e)),t[e]!==n&&(c&&(i(n,a)||r(n,a,t[e]?""+t[e]:u.join(String(e)))),t===o?t[e]=n:s?t[e]?t[e]=n:r(t,e,n):(delete t[e],r(t,e,n)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[a]||s.call(this)})},function(t,e,n){var o=n(0),r=n(8),i=n(34),a=/"/g,s=function(t,e,n,o){var r=String(i(t)),s="<"+e;return""!==n&&(s+=" "+n+'="'+String(o).replace(a,""")+'"'),s+">"+r+""};t.exports=function(t,e){var n={};n[t]=e(s),o(o.P+o.F*r(function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}),"String",n)}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var o=n(14),r=n(40);t.exports=n(15)?function(t,e,n){return o.f(t,e,r(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var o=n(56),r=n(34);t.exports=function(t){return o(r(t))}},function(t,e,n){var o=n(34);t.exports=function(t){return Object(o(t))}},function(t,e,n){"use strict";var o=n(8);t.exports=function(t,e){return!!t&&o(function(){e?t.call(null,function(){},1):t.call(null)})}},function(t,e,n){var o=n(57),r=n(40),i=n(23),a=n(37),s=n(21),u=n(98),c=Object.getOwnPropertyDescriptor;e.f=n(15)?c:function(t,e){if(t=i(t),e=a(e,!0),u)try{return c(t,e)}catch(t){}if(s(t,e))return r(!o.f.call(t,e),t[e])}},function(t,e,n){var o=n(0),r=n(16),i=n(8);t.exports=function(t,e){var n=(r.Object||{})[t]||Object[t],a={};a[t]=e(n),o(o.S+o.F*i(function(){n(1)}),"Object",a)}},function(t,e,n){var o=n(31),r=n(56),i=n(24),a=n(17),s=n(255);t.exports=function(t,e){var n=1==t,u=2==t,c=3==t,l=4==t,f=6==t,d=5==t||f,p=e||s;return function(e,s,h){for(var v,g,y=i(e),b=r(y),m=o(s,h,3),k=a(b.length),x=0,w=n?p(e,k):u?p(e,0):void 0;k>x;x++)if((d||x in b)&&(g=m(v=b[x],x,y),t))if(n)w[x]=g;else if(g)switch(t){case 3:return!0;case 5:return v;case 6:return x;case 2:w.push(v)}else if(l)return!1;return f?-1:c||l?l:w}}},function(t,e,n){t.exports=n(330)},function(t,e){function n(t,e,n,o,r,i,a){try{var s=t[i](a),u=s.value}catch(t){return void n(t)}s.done?e(u):Promise.resolve(u).then(o,r)}t.exports=function(t){return function(){var e=this,o=arguments;return new Promise(function(r,i){var a=t.apply(e,o);function s(t){n(a,r,i,s,u,"next",t)}function u(t){n(a,r,i,s,u,"throw",t)}s(void 0)})}}},function(t,e,n){var o=n(32);t.exports=function(t,e,n){if(o(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,o){return t.call(e,n,o)};case 3:return function(n,o,r){return t.call(e,n,o,r)}}return function(){return t.apply(e,arguments)}}},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e){var n=Math.ceil,o=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?o:n)(t)}},function(t,e,n){"use strict";if(n(15)){var o=n(42),r=n(9),i=n(8),a=n(0),s=n(68),u=n(96),c=n(31),l=n(52),f=n(40),d=n(22),p=n(53),h=n(35),v=n(17),g=n(123),y=n(44),b=n(37),m=n(21),k=n(60),x=n(10),w=n(24),E=n(89),S=n(45),T=n(47),_=n(46).f,C=n(91),B=n(41),I=n(12),N=n(28),O=n(58),A=n(65),M=n(93),L=n(49),P=n(62),j=n(51),F=n(92),R=n(115),D=n(14),U=n(26),z=D.f,H=U.f,G=r.RangeError,W=r.TypeError,V=r.Uint8Array,K=Array.prototype,q=u.ArrayBuffer,X=u.DataView,Y=N(0),J=N(2),Z=N(3),$=N(4),Q=N(5),tt=N(6),et=O(!0),nt=O(!1),ot=M.values,rt=M.keys,it=M.entries,at=K.lastIndexOf,st=K.reduce,ut=K.reduceRight,ct=K.join,lt=K.sort,ft=K.slice,dt=K.toString,pt=K.toLocaleString,ht=I("iterator"),vt=I("toStringTag"),gt=B("typed_constructor"),yt=B("def_constructor"),bt=s.CONSTR,mt=s.TYPED,kt=s.VIEW,xt=N(1,function(t,e){return _t(A(t,t[yt]),e)}),wt=i(function(){return 1===new V(new Uint16Array([1]).buffer)[0]}),Et=!!V&&!!V.prototype.set&&i(function(){new V(1).set({})}),St=function(t,e){var n=h(t);if(n<0||n%e)throw G("Wrong offset!");return n},Tt=function(t){if(x(t)&&mt in t)return t;throw W(t+" is not a typed array!")},_t=function(t,e){if(!(x(t)&> in t))throw W("It is not a typed array constructor!");return new t(e)},Ct=function(t,e){return Bt(A(t,t[yt]),e)},Bt=function(t,e){for(var n=0,o=e.length,r=_t(t,o);o>n;)r[n]=e[n++];return r},It=function(t,e,n){z(t,e,{get:function(){return this._d[n]}})},Nt=function(t){var e,n,o,r,i,a,s=w(t),u=arguments.length,l=u>1?arguments[1]:void 0,f=void 0!==l,d=C(s);if(null!=d&&!E(d)){for(a=d.call(s),o=[],e=0;!(i=a.next()).done;e++)o.push(i.value);s=o}for(f&&u>2&&(l=c(l,arguments[2],2)),e=0,n=v(s.length),r=_t(this,n);n>e;e++)r[e]=f?l(s[e],e):s[e];return r},Ot=function(){for(var t=0,e=arguments.length,n=_t(this,e);e>t;)n[t]=arguments[t++];return n},At=!!V&&i(function(){pt.call(new V(1))}),Mt=function(){return pt.apply(At?ft.call(Tt(this)):Tt(this),arguments)},Lt={copyWithin:function(t,e){return R.call(Tt(this),t,e,arguments.length>2?arguments[2]:void 0)},every:function(t){return $(Tt(this),t,arguments.length>1?arguments[1]:void 0)},fill:function(t){return F.apply(Tt(this),arguments)},filter:function(t){return Ct(this,J(Tt(this),t,arguments.length>1?arguments[1]:void 0))},find:function(t){return Q(Tt(this),t,arguments.length>1?arguments[1]:void 0)},findIndex:function(t){return tt(Tt(this),t,arguments.length>1?arguments[1]:void 0)},forEach:function(t){Y(Tt(this),t,arguments.length>1?arguments[1]:void 0)},indexOf:function(t){return nt(Tt(this),t,arguments.length>1?arguments[1]:void 0)},includes:function(t){return et(Tt(this),t,arguments.length>1?arguments[1]:void 0)},join:function(t){return ct.apply(Tt(this),arguments)},lastIndexOf:function(t){return at.apply(Tt(this),arguments)},map:function(t){return xt(Tt(this),t,arguments.length>1?arguments[1]:void 0)},reduce:function(t){return st.apply(Tt(this),arguments)},reduceRight:function(t){return ut.apply(Tt(this),arguments)},reverse:function(){for(var t,e=Tt(this).length,n=Math.floor(e/2),o=0;o1?arguments[1]:void 0)},sort:function(t){return lt.call(Tt(this),t)},subarray:function(t,e){var n=Tt(this),o=n.length,r=y(t,o);return new(A(n,n[yt]))(n.buffer,n.byteOffset+r*n.BYTES_PER_ELEMENT,v((void 0===e?o:y(e,o))-r))}},Pt=function(t,e){return Ct(this,ft.call(Tt(this),t,e))},jt=function(t){Tt(this);var e=St(arguments[1],1),n=this.length,o=w(t),r=v(o.length),i=0;if(r+e>n)throw G("Wrong length!");for(;i255?255:255&o),r.v[p](n*e+r.o,o,wt)}(this,n,t)},enumerable:!0})};m?(h=n(function(t,n,o,r){l(t,h,c,"_d");var i,a,s,u,f=0,p=0;if(x(n)){if(!(n instanceof q||"ArrayBuffer"==(u=k(n))||"SharedArrayBuffer"==u))return mt in n?Bt(h,n):Nt.call(h,n);i=n,p=St(o,e);var y=n.byteLength;if(void 0===r){if(y%e)throw G("Wrong length!");if((a=y-p)<0)throw G("Wrong length!")}else if((a=v(r)*e)+p>y)throw G("Wrong length!");s=a/e}else s=g(n),i=new q(a=s*e);for(d(t,"_d",{b:i,o:p,l:a,e:s,v:new X(i)});f2&&void 0!==arguments[2]?arguments[2]:10,o=window.getSelection(),r=null;if(!o||!o.anchorNode||!o.focusNode)return null;var i=[o.anchorNode,o.focusNode];return i.forEach(function(o){for(var i=n;i>0&&o.parentNode&&(o.tagName!==t||(r=o,e&&o.classList&&!o.classList.contains(e)&&(r=null),!r));)o=o.parentNode,i--}),r}},{key:"expandToTag",value:function(t){var e=window.getSelection();e.removeAllRanges();var n=document.createRange();n.selectNodeContents(t),e.addRange(n)}}],[{key:"get",value:function(){return window.getSelection()}},{key:"CSS",get:function(){return{editorWrapper:"codex-editor",editorZone:"codex-editor__redactor"}}},{key:"anchorNode",get:function(){var t=window.getSelection();return t?t.anchorNode:null}},{key:"anchorOffset",get:function(){var t=window.getSelection();return t?t.anchorOffset:null}},{key:"isCollapsed",get:function(){var t=window.getSelection();return t?t.isCollapsed:null}},{key:"isAtEditor",get:function(){var e=t.get(),n=e.anchorNode||e.focusNode;n&&n.nodeType===Node.TEXT_NODE&&(n=n.parentNode);var o=null;return n&&(o=n.closest(".".concat(t.CSS.editorZone))),o&&o.nodeType===Node.ELEMENT_NODE}},{key:"range",get:function(){var t=window.getSelection();return t&&t.rangeCount?t.getRangeAt(0):null}},{key:"rect",get:function(){var t,e=document.selection,n={x:0,y:0,width:0,height:0};if(e&&"Control"!==e.type)return t=(e=e).createRange(),n.x=t.boundingLeft,n.y=t.boundingTop,n.width=t.boundingWidth,n.height=t.boundingHeight,n;if(!window.getSelection)return a.default.log("Method window.getSelection is not supported","warn"),n;if(null===(e=window.getSelection()).rangeCount||isNaN(e.rangeCount))return a.default.log("Method SelectionUtils.rangeCount is not supported","warn"),n;if((t=e.getRangeAt(0).cloneRange()).getBoundingClientRect&&(n=t.getBoundingClientRect()),0===n.x&&0===n.y){var o=document.createElement("span");if(o.getBoundingClientRect){o.appendChild(document.createTextNode("​")),t.insertNode(o),n=o.getBoundingClientRect();var r=o.parentNode;r.removeChild(o),r.normalize()}}return n}},{key:"text",get:function(){return window.getSelection?window.getSelection().toString():""}}]),t}();o.default=u,u.displayName="SelectionUtils",t.exports=e.default})?o.apply(e,r):o)||(t.exports=i)},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){var n=0,o=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+o).toString(36))}},function(t,e){t.exports=!1},function(t,e,n){var o=n(100),r=n(76);t.exports=Object.keys||function(t){return o(t,r)}},function(t,e,n){var o=n(35),r=Math.max,i=Math.min;t.exports=function(t,e){return(t=o(t))<0?r(t+e,0):i(t,e)}},function(t,e,n){var o=n(11),r=n(101),i=n(76),a=n(75)("IE_PROTO"),s=function(){},u=function(){var t,e=n(72)("iframe"),o=i.length;for(e.style.display="none",n(78).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write(" +
@@ -16,7 +17,7 @@ Plugins
-
+
diff --git a/package.json b/package.json index 2666afe0..bcdf1a66 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "codex.editor", - "version": "2.7.26", + "version": "2.7.27", "description": "CodeX Editor. Native JS, based on API and Open Source", "main": "dist/codex-editor.js", "types": "./types/index.d.ts", diff --git a/src/components/modules/ui.ts b/src/components/modules/ui.ts index e004b523..b5e41a4e 100644 --- a/src/components/modules/ui.ts +++ b/src/components/modules/ui.ts @@ -38,15 +38,25 @@ export default class UI extends Module { * CodeX Editor UI CSS class names * @return {{editorWrapper: string, editorZone: string}} */ - private get CSS(): {editorWrapper: string, editorZone: string, editorZoneHidden: string, editorLoader: string} { + private get CSS(): { + editorWrapper: string, editorWrapperNarrow: string, editorZone: string, editorZoneHidden: string, + editorLoader: string, + } { return { editorWrapper : 'codex-editor', + editorWrapperNarrow : 'codex-editor--narrow', editorZone : 'codex-editor__redactor', editorZoneHidden : 'codex-editor__redactor--hidden', editorLoader : 'codex-editor__loader', }; } + /** + * Width of center column of Editor + * @type {number} + */ + public contentWidth: number = 650; + /** * HTML Elements used for UI */ @@ -135,8 +145,16 @@ export default class UI extends Module { this.nodes.wrapper = $.make('div', this.CSS.editorWrapper); this.nodes.redactor = $.make('div', this.CSS.editorZone); + /** + * If Editor has injected into the narrow container, enable Narrow Mode + */ + if (this.nodes.holder.offsetWidth < this.contentWidth) { + this.nodes.wrapper.classList.add(this.CSS.editorWrapperNarrow); + } + this.nodes.wrapper.appendChild(this.nodes.redactor); this.nodes.holder.appendChild(this.nodes.wrapper); + } /** diff --git a/src/styles/block.css b/src/styles/block.css index 1b2771a5..89801f4d 100644 --- a/src/styles/block.css +++ b/src/styles/block.css @@ -6,6 +6,13 @@ &--focused { background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.03) 63.45%, rgba(207, 214, 229, 0.27) 98%); border-radius: 3px; + + @media (--mobile){ + background-image: none; + background-color: rgba(200, 199, 219, 0.17); + margin: 0 -10px; + padding: 0 10px; + } } &--selected &__content { @@ -75,3 +82,11 @@ font-style: italic; } } + + +.codex-editor--narrow .ce-block--focused { + @media (--not-mobile) { + margin-right: calc(var(--narrow-mode-right-padding) * -1); + padding-right: var(--narrow-mode-right-padding); + } +} diff --git a/src/styles/inline-toolbar.css b/src/styles/inline-toolbar.css index 2cc0859e..9b8bb20c 100644 --- a/src/styles/inline-toolbar.css +++ b/src/styles/inline-toolbar.css @@ -14,6 +14,10 @@ [hidden] { display: none !important; } + + &__buttons { + display: flex; + } } .ce-inline-tool { diff --git a/src/styles/settings.css b/src/styles/settings.css index 70210ee0..39eb6a0a 100644 --- a/src/styles/settings.css +++ b/src/styles/settings.css @@ -4,9 +4,19 @@ top: 35px; min-width: 124px; + @media (--mobile){ + bottom: 50px; + top: auto; + } + &::before{ left: auto; right: 12px; + + @media (--mobile){ + bottom: -5px; + top: auto; + } } display: none; diff --git a/src/styles/toolbar.css b/src/styles/toolbar.css index fa6bc816..ac77f7fc 100644 --- a/src/styles/toolbar.css +++ b/src/styles/toolbar.css @@ -9,27 +9,55 @@ will-change: opacity, transform; display: none; + @media (--mobile) { + position: fixed; + bottom: 0; + top: auto; + left: 0; + right: 0; + z-index: 9; + height: 50px; + background: #fff; + box-shadow: 0 -2px 12px rgba(60, 67, 81, 0.18); + transform: none !important; + } + &--opened { display: block; - /*opacity: 1;*/ - /*visibility: visible;*/ + + @media (--mobile){ + display: flex; + } } &__content { max-width: var(--content-width); margin: 0 auto; position: relative; + + @media (--mobile){ + display: flex; + align-content: center; + margin: 0; + padding: 0 10px; + max-width: calc(100% - 70px); + overflow-x: auto; + } } &__plus { @apply --toolbox-button; position: absolute; - left: calc(calc(var(--toolbox-buttons-size) + 10px) * -1); + left: calc(var(--toolbox-buttons-size) * -1); &--hidden { display: none; } + + @media (--mobile){ + display: none !important; + } } &__plus, @@ -49,6 +77,13 @@ padding-right: 16px; opacity: 0; + @media (--mobile){ + position: static; + margin-left: auto; + display: flex; + align-items: center; + } + &--opened { opacity: 1; } @@ -66,3 +101,12 @@ cursor: pointer; } } + +/** + * Styles for Narrow mode + */ +.codex-editor--narrow .ce-toolbar__plus { + @media (--not-mobile) { + left: 5px; + } +} diff --git a/src/styles/toolbox.css b/src/styles/toolbox.css index 16e292bd..f24cb19d 100644 --- a/src/styles/toolbox.css +++ b/src/styles/toolbox.css @@ -1,17 +1,35 @@ .ce-toolbox { - position: absolute; - visibility: hidden; - transition: opacity 100ms ease; - will-change: opacity; - display: flex; - flex-direction: row; + position: absolute; + visibility: hidden; + transition: opacity 100ms ease; + will-change: opacity; + display: flex; + flex-direction: row; - &--opened { - opacity: 1; - visibility: visible; - } + @media (--mobile){ + position: static; + transform: none !important; + align-items: center; + visibility: visible !important; + } - &__button { - @apply --toolbox-button; - } + &--opened { + opacity: 1; + visibility: visible; + } + + &__button { + @apply --toolbox-button; + } +} + + +/** + * Styles for Narrow mode + */ +.codex-editor--narrow .ce-toolbox { + @media (--not-mobile) { + background: #fff; + z-index: 2; + } } diff --git a/src/styles/ui.css b/src/styles/ui.css index 50917484..d5fff743 100644 --- a/src/styles/ui.css +++ b/src/styles/ui.css @@ -18,6 +18,21 @@ } } + /** + * Styles for narrow holder + */ + &--narrow &__redactor { + @media (--not-mobile) { + margin-right: var(--narrow-mode-right-padding); + } + } + + &--narrow .ce-toolbar__actions { + @media (--not-mobile) { + right: -5px; + } + } + &__loader { position: relative; height: 30vh; diff --git a/src/styles/variables.css b/src/styles/variables.css index f65ff77c..dab64efa 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -26,9 +26,15 @@ /** * Block content width + * Should be set in a constant at the modules/ui.js */ --content-width: 650px; + /** + * In narrow mode, we increase right zone contained Block Actions button + */ + --narrow-mode-right-padding: 50px; + /** * Toolbar buttons height and width */ @@ -37,13 +43,16 @@ /** * Toolbar Plus Button and Toolbox buttons height and width */ - --toolbox-buttons-size: 24px; + --toolbox-buttons-size: 34px; /** * Confirm deletion bg */ --color-confirm: #E24A4A; + @custom-media --mobile (max-width: 650px); + @custom-media --not-mobile (min-width: 651px); + --overlay-pane: { position: absolute; background-color: #FFFFFF; @@ -77,10 +86,6 @@ justify-content: center; align-items: center; - &:not(:last-of-type){ - margin-right: 10px; - } - &:hover, &--active { color: var(--color-active-icon);