diff --git a/README.md b/README.md index 23fc9d1..db56440 100644 --- a/README.md +++ b/README.md @@ -15,13 +15,22 @@ https://github.com/kamranahmedse/driver.js?ref=producthunt ## Instalação -Copie a classe "AutoTutorial.php" para a pasta app/controler/ -Copie essas 2 linhas e coloque no fim do seu arquivo app/templates/themeX/layout.html e no caso de utilizar no login ou cadastro no arquivo login.html +Para instalar no Adianti Builder, vá na aba de "composer packages" e adicione: ```html - - +andregasparin/autotutorial ``` + +É necessário que você tenha o composer instalado. + +Abra seu cmd (prompt), com o comando "cd c:/pasta/do/projeto" navegue até a raiz do seu projeto em adianti. + +Execute o seguinte comando (podem variar no caso de usar linux ou mac, ex utilizar sudo no início): + +```html +composer require andregasparin/autotutorial +``` + ## Utilização Adicione a classe para iniciar o tutorial, ex: @@ -64,7 +73,8 @@ Caso queira implementar algo no sistema, utilize os padrões do Adianti Framewor * 1.0.0 * Projeto criado - +* 1.1.0 + * Pacote composer criado ## Meta André Gasparin – [@andre-gasparin] – andre@gasparimsat.com.br / andre.gasparin@hotmail.com diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..f08b30b --- /dev/null +++ b/composer.json @@ -0,0 +1,18 @@ +{ + "name": "andregasparin/autotutorial", + "description": "Gerador simples de auto tutorial para adianti.", + "type": "library", + "license": "MIT", + "authors": [ + { + "name": "André Gasparin", + "email": "andre.gasparin@hotmail.com" + } + ], + "require": {}, + "autoload": { + "psr-4": { + "AndreGasparin\\AutoTutorial\\": "src" + } + } +} diff --git a/src/AutoTutorial.php b/src/AutoTutorial.php new file mode 100644 index 0000000..af30d66 --- /dev/null +++ b/src/AutoTutorial.php @@ -0,0 +1,105 @@ + + + '; + + $this->id = uniqid(); + $this->header = "function tutorial".$this->id."(){ const con".$this->id." = new Driver( { animate: false, doneBtnText: 'Concluir', closeBtnText: 'Fechar', nextBtnText: 'Próximo', prevBtnText: 'Anterior'} ); con".$this->id.".defineSteps([ "; + } + + public function setStepsArray( $steps ) + { + foreach($steps as $key=>$step ) + { + $this->setStep($step, $key); + } + } + + public function setStep($step, $key) + { + foreach($step as $item => $value ) + { + $this->steps[$key][$item] = $value; + } + $this->createStep($key); + } + + private function createStep($key) + { + $selector = $this->createElement($this->steps[$key]['selector'], $this->steps[$key]['selector_type']); + $position = isset($this->steps[$key]['position']) == null ? 'bottom-center' : $this->steps[$key]['position']; + $onNext = isset($this->steps[$key]['onNextPage']) == null ? null : ' onNext: () => { __adianti_load_page(\''.$this->steps[$key]['onNextPage'].'\');}'; + + $this->steps[$key]['content'] = " {"; + $this->steps[$key]['content'] .= " element: '".$selector."',"; + $this->steps[$key]['content'] .= " popover: {"; + $this->steps[$key]['content'] .= " className: 'first-step-popover-class',"; + $this->steps[$key]['content'] .= " title: '".$this->steps[$key]['title']."',"; + $this->steps[$key]['content'] .= " description: '".$this->steps[$key]['description']."',"; + $this->steps[$key]['content'] .= " position: '".$position."'"; + $this->steps[$key]['content'] .= " },"; + $this->steps[$key]['content'] .= $onNext; + $this->steps[$key]['content'] .= " },"; + + } + + private function createElement($selector, $selector_type) + { + if($selector_type == 'id') + $string_selector = '#'.$selector; + elseif($selector_type == 'class') + $string_selector = '.'.$selector; + else + $string_selector = '['. $selector_type.'="'.$selector.'"]'; + + return $string_selector; + } + + + public function run($debug = false) + { + $js = $this->header; + $js .= $this->runSteps(); + $js .= ' ]); '; + $js .= 'con'.$this->id.'.start(); '; + $js .= ' }'; + $js .= ' $( document ).ready(function() { '; + $js .= ' tutorial'.$this->id.'(); '; + $js .= ' });'; + + TScript::create($js); + echo ""; + if($debug == true) echo 'JS:
'.$js.'
'; + } + + private function runSteps() + { + $js = ''; + foreach($this->steps as $key => $value){ + $js .= ' '.$this->steps[$key]['content']; + } + return $js; + } + + public function debug() + { + echo '
';
+        print_r($this->steps);
+        echo '
'; + } + +} \ No newline at end of file diff --git a/src/driver.min.css b/src/driver.min.css new file mode 100644 index 0000000..5fa1887 --- /dev/null +++ b/src/driver.min.css @@ -0,0 +1 @@ +div#driver-popover-item{display:none;position:absolute;background:#fff;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px rgba(0,0,0,.4);z-index:1000000000}div#driver-popover-item .driver-popover-tip{border:5px solid #fff;content:"";position:absolute}div#driver-popover-item .driver-popover-tip.bottom{bottom:-10px;border-color:#fff transparent transparent}div#driver-popover-item .driver-popover-tip.bottom.position-center{left:49%}div#driver-popover-item .driver-popover-tip.bottom.position-right{right:20px}div#driver-popover-item .driver-popover-tip.left{left:-10px;top:10px;border-color:transparent #fff transparent transparent}div#driver-popover-item .driver-popover-tip.left.position-center{top:46%}div#driver-popover-item .driver-popover-tip.left.position-bottom{top:auto;bottom:20px}div#driver-popover-item .driver-popover-tip.right{right:-10px;top:10px;border-color:transparent transparent transparent #fff}div#driver-popover-item .driver-popover-tip.right.position-center{top:46%}div#driver-popover-item .driver-popover-tip.right.position-bottom{top:auto;bottom:20px}div#driver-popover-item .driver-popover-tip.top{top:-10px;border-color:transparent transparent #fff}div#driver-popover-item .driver-popover-tip.top.position-center{left:49%}div#driver-popover-item .driver-popover-tip.top.position-right{right:20px}div#driver-popover-item .driver-popover-tip.mid-center{display:none}div#driver-popover-item .driver-popover-footer{display:block;margin-top:10px}div#driver-popover-item .driver-popover-footer button{display:inline-block;padding:3px 10px;border:1px solid #d4d4d4;text-decoration:none;text-shadow:1px 1px 0 #fff;color:#2d2d2d;font:11px/normal sans-serif;cursor:pointer;outline:0;background-color:#f1f1f1;border-radius:2px;zoom:1;line-height:1.3}div#driver-popover-item .driver-popover-footer button.driver-disabled{color:grey;cursor:default;pointer-events:none}div#driver-popover-item .driver-popover-footer .driver-close-btn{float:left}div#driver-popover-item .driver-popover-footer .driver-btn-group,div#driver-popover-item .driver-popover-footer .driver-close-only-btn{float:right}div#driver-popover-item .driver-popover-title{font:19px/normal sans-serif;margin:0 0 5px;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1}div#driver-popover-item .driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;color:#2d2d2d;font-weight:400;zoom:1}.driver-clearfix:after,.driver-clearfix:before{content:"";display:table}.driver-clearfix:after{clear:both}.driver-stage-no-animation{-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important;transition:none!important;background:transparent!important;outline:5000px solid rgba(0,0,0,.75)}div#driver-page-overlay{background:#000;position:fixed;bottom:0;right:0;display:block;width:100%;height:100%;zoom:1;filter:alpha(opacity=75);opacity:.75;z-index:100002!important}div#driver-highlighted-element-stage,div#driver-page-overlay{top:0;left:0;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}div#driver-highlighted-element-stage{position:absolute;height:50px;width:300px;background:#fff;z-index:100003!important;display:none;border-radius:2px}.driver-highlighted-element{z-index:100004!important}.driver-position-relative{position:relative!important}.driver-fix-stacking{z-index:auto!important;opacity:1!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important;-webkit-filter:none!important;-moz-filter:none!important;-ms-filter:none!important;-o-filter:none!important;filter:none!important;-webkit-perspective:none!important;-moz-perspective:none!important;-ms-perspective:none!important;-o-perspective:none!important;perspective:none!important;-webkit-transform-style:flat!important;-moz-transform-style:flat!important;-ms-transform-style:flat!important;transform-style:flat!important;-webkit-transform-box:border-box!important;-moz-transform-box:border-box!important;-ms-transform-box:border-box!important;-o-transform-box:border-box!important;transform-box:border-box!important;will-change:unset!important} \ No newline at end of file diff --git a/src/driver.min.js b/src/driver.min.js new file mode 100644 index 0000000..997df23 --- /dev/null +++ b/src/driver.min.js @@ -0,0 +1,2 @@ +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Driver=e():t.Driver=e()}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.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 i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));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="/dist/",n(n.s=57)}([function(t,e,n){var o=n(2),i=n(11),r=n(4),s=n(13),a=n(22),c=function(t,e,n){var u,l,h,f,p=t&c.F,d=t&c.G,v=t&c.S,y=t&c.P,g=t&c.B,m=d?o:v?o[e]||(o[e]={}):(o[e]||{}).prototype,b=d?i:i[e]||(i[e]={}),w=b.prototype||(b.prototype={});for(u in d&&(n=e),n)h=((l=!p&&m&&void 0!==m[u])?m:n)[u],f=g&&l?a(h,o):y&&"function"==typeof h?a(Function.call,h):h,m&&s(m,u,h,t&c.U),b[u]!=h&&r(b,u,f),y&&w[u]!=h&&(w[u]=h)};o.core=i,c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,t.exports=c},function(t,e,n){var o=n(17)("wks"),i=n(14),r=n(2).Symbol,s="function"==typeof r;(t.exports=function(t){return o[t]||(o[t]=s&&r[t]||(s?r:i)("Symbol."+t))}).store=o},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){var o=n(5),i=n(16);t.exports=n(6)?function(t,e,n){return o.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var o=n(12),i=n(35),r=n(21),s=Object.defineProperty;e.f=n(6)?Object.defineProperty:function(t,e,n){if(o(t),e=r(e,!0),o(n),i)try{return s(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(7)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var o=n(39),i=n(24);t.exports=function(t){return o(i(t))}},function(t,e,n){var o=n(0);o(o.S+o.F*!n(6),"Object",{defineProperty:n(5).f})},function(t,e){var n=t.exports={version:"2.6.9"};"number"==typeof __e&&(__e=n)},function(t,e,n){var o=n(3);t.exports=function(t){if(!o(t))throw TypeError(t+" is not an object!");return t}},function(t,e,n){var o=n(2),i=n(4),r=n(8),s=n(14)("src"),a=n(59),c=(""+a).split("toString");n(11).inspectSource=function(t){return a.call(t)},(t.exports=function(t,e,n,a){var u="function"==typeof n;u&&(r(n,"name")||i(n,"name",e)),t[e]!==n&&(u&&(r(n,s)||i(n,s,t[e]?""+t[e]:c.join(String(e)))),t===o?t[e]=n:a?t[e]?t[e]=n:i(t,e,n):(delete t[e],i(t,e,n)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[s]||a.call(this)})},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,n){var o=n(45),i=n(28);t.exports=Object.keys||function(t){return o(t,i)}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var o=n(11),i=n(2),r=i["__core-js_shared__"]||(i["__core-js_shared__"]={});(t.exports=function(t,e){return r[t]||(r[t]=void 0!==e?e:{})})("versions",[]).push({version:o.version,mode:n(18)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(t,e){t.exports=!1},function(t,e,n){var o=n(24);t.exports=function(t){return Object(o(t))}},function(t,e,n){"use strict";var o=n(2),i=n(8),r=n(6),s=n(0),a=n(13),c=n(62).KEY,u=n(7),l=n(17),h=n(26),f=n(14),p=n(1),d=n(43),v=n(44),y=n(63),g=n(42),m=n(12),b=n(3),w=n(19),x=n(9),S=n(21),O=n(16),k=n(30),P=n(67),E=n(49),N=n(47),j=n(5),L=n(15),T=E.f,C=j.f,_=P.f,M=o.Symbol,H=o.JSON,B=H&&H.stringify,F=p("_hidden"),I=p("toPrimitive"),R={}.propertyIsEnumerable,A=l("symbol-registry"),z=l("symbols"),D=l("op-symbols"),V=Object.prototype,W="function"==typeof M&&!!N.f,q=o.QObject,G=!q||!q.prototype||!q.prototype.findChild,K=r&&u(function(){return 7!=k(C({},"a",{get:function(){return C(this,"a",{value:7}).a}})).a})?function(t,e,n){var o=T(V,e);o&&delete V[e],C(t,e,n),o&&t!==V&&C(V,e,o)}:C,U=function(t){var e=z[t]=k(M.prototype);return e._k=t,e},Y=W&&"symbol"==typeof M.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof M},J=function(t,e,n){return t===V&&J(D,e,n),m(t),e=S(e,!0),m(n),i(z,e)?(n.enumerable?(i(t,F)&&t[F][e]&&(t[F][e]=!1),n=k(n,{enumerable:O(0,!1)})):(i(t,F)||C(t,F,O(1,{})),t[F][e]=!0),K(t,e,n)):C(t,e,n)},X=function(t,e){m(t);for(var n,o=y(e=x(e)),i=0,r=o.length;r>i;)J(t,n=o[i++],e[n]);return t},Q=function(t){var e=R.call(this,t=S(t,!0));return!(this===V&&i(z,t)&&!i(D,t))&&(!(e||!i(this,t)||!i(z,t)||i(this,F)&&this[F][t])||e)},$=function(t,e){if(t=x(t),e=S(e,!0),t!==V||!i(z,e)||i(D,e)){var n=T(t,e);return!n||!i(z,e)||i(t,F)&&t[F][e]||(n.enumerable=!0),n}},Z=function(t){for(var e,n=_(x(t)),o=[],r=0;n.length>r;)i(z,e=n[r++])||e==F||e==c||o.push(e);return o},tt=function(t){for(var e,n=t===V,o=_(n?D:x(t)),r=[],s=0;o.length>s;)!i(z,e=o[s++])||n&&!i(V,e)||r.push(z[e]);return r};W||(a((M=function(){if(this instanceof M)throw TypeError("Symbol is not a constructor!");var t=f(arguments.length>0?arguments[0]:void 0),e=function(n){this===V&&e.call(D,n),i(this,F)&&i(this[F],t)&&(this[F][t]=!1),K(this,t,O(1,n))};return r&&G&&K(V,t,{configurable:!0,set:e}),U(t)}).prototype,"toString",function(){return this._k}),E.f=$,j.f=J,n(48).f=P.f=Z,n(29).f=Q,N.f=tt,r&&!n(18)&&a(V,"propertyIsEnumerable",Q,!0),d.f=function(t){return U(p(t))}),s(s.G+s.W+s.F*!W,{Symbol:M});for(var et="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),nt=0;et.length>nt;)p(et[nt++]);for(var ot=L(p.store),it=0;ot.length>it;)v(ot[it++]);s(s.S+s.F*!W,"Symbol",{for:function(t){return i(A,t+="")?A[t]:A[t]=M(t)},keyFor:function(t){if(!Y(t))throw TypeError(t+" is not a symbol!");for(var e in A)if(A[e]===t)return e},useSetter:function(){G=!0},useSimple:function(){G=!1}}),s(s.S+s.F*!W,"Object",{create:function(t,e){return void 0===e?k(t):X(k(t),e)},defineProperty:J,defineProperties:X,getOwnPropertyDescriptor:$,getOwnPropertyNames:Z,getOwnPropertySymbols:tt});var rt=u(function(){N.f(1)});s(s.S+s.F*rt,"Object",{getOwnPropertySymbols:function(t){return N.f(w(t))}}),H&&s(s.S+s.F*(!W||u(function(){var t=M();return"[null]"!=B([t])||"{}"!=B({a:t})||"{}"!=B(Object(t))})),"JSON",{stringify:function(t){for(var e,n,o=[t],i=1;arguments.length>i;)o.push(arguments[i++]);if(n=e=o[1],(b(e)||void 0!==t)&&!Y(t))return g(e)||(e=function(t,e){if("function"==typeof n&&(e=n.call(this,t,e)),!Y(e))return e}),o[1]=e,B.apply(H,o)}}),M.prototype[I]||n(4)(M.prototype,I,M.prototype.valueOf),h(M,"Symbol"),h(Math,"Math",!0),h(o.JSON,"JSON",!0)},function(t,e,n){var o=n(3);t.exports=function(t,e){if(!o(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!o(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!o(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!o(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var o=n(37);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,i){return t.call(e,n,o,i)}}return function(){return t.apply(e,arguments)}}},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,n){"use strict";var o=n(7);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(5).f,i=n(8),r=n(1)("toStringTag");t.exports=function(t,e,n){t&&!i(t=n?t:t.prototype,r)&&o(t,r,{configurable:!0,value:e})}},function(t,e,n){var o=n(17)("keys"),i=n(14);t.exports=function(t){return o[t]||(o[t]=i(t))}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var o=n(12),i=n(65),r=n(28),s=n(27)("IE_PROTO"),a=function(){},c=function(){var t,e=n(36)("iframe"),o=r.length;for(e.style.display="none",n(66).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write("