easyprintand 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easyprintand",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Easily print the content of a DIV",
   "main": "EasyprintAnd.js",
   "scripts": {

package/prindiv.js

@@ -13,7 +13,7 @@
  *                           $("div.PrintArea").printArea( [OPTIONS] );
  *                       });
  *                     </script>
- *  options are passed as json (example: {mode: "popup", popClose: false})
+  *  options are passed as json (example: {mode: "popup", popClose: false})
  *
  *  {OPTIONS}   | [type]     | (default), values      | Explanation
  *  ---------   | ---------  | ---------------------- | -----------
@@ -38,258 +38,303 @@
  *           PARA INICIAR ASI: 
  * 
  * 
- *      var options = {extraCss:'extracss.css' , defaultCss : false };
-        EasyPrintAnd( 'EasyPrintAnd' ,   options);
-
- */
-
-
-
-    
-    function prindiv ( id_elemento = 'EasyPrintAnd' ,  options  )
-    { 
-
-
-      var counter = 0;
-      var modes = { iframe : "iframe", popup : "popup" };
-      var standards = { strict : "strict", loose : "loose", html5 : "html5" };
-      var defaults = { mode       : modes.iframe,
-                       standard   : standards.html5,
-                       popHt      : 500,
-                       popWd      : 400,
-                       popX       : 200,
-                       popY       : 200,
-                       popTitle   : '',
-                       popClose   : false,
-                       extraCss   : '',
-                       defaultCss : true,
-                       extraHead  : '',
-                       retainAttr : ["id","class","style"] };
-
-      var settings = {};//global settings
-
-
-
-      
-
-      //Combiamos el arrayd
-      Object.assign(settings, defaults, options);
-
-      //El Id del documento
-      counter++;
-
-
-
-      var idPrefix = "printArea_";
-      
-      //Se Renova el  documento actial
-      data = document.querySelector("[id^=" + idPrefix + "]" )
-      if (data) {
-          data.remove();
-      }
-
-
-      // ID Siguiente
-      settings.id = idPrefix + counter;
-
-      
-      
-
-      
-      var $printSource = document.querySelector("div#" + id_elemento );
-      
-
-      var PrintAreaWindow = getPrintWindow();
-
-
-
-      write( PrintAreaWindow.doc, $printSource );
-
-      setTimeout( function () { print( PrintAreaWindow ); }, 500 );
-
+ *    
+ * 
+     
 
+    import prindiv from 'easyprintand';
 
+        <div id='EasyPrintAnd'>
+        <div>
+            <h1>texto para imprmir </h1>
+            asdadadad
+            sada
+        </div>
+        </div>
 
 
+        <button onClick={ () => prindiv('EasyPrintAnd' ,  { extraCss : './tirilla.css' })}>Print</button>
 
+ */
 
-         function  print ( PAWindow ) {
+        'use strict';
 
-              var paWindow = PAWindow.win;
+        function onPrintDiv(event, elem, selector, handler) {
+            elem.addEventListener(event, ev => {
+                if (ev.target.matches(selector)) {
+                    handler()
+                }
+            })
+        }    
+        
+        function prindiv ( id_elemento = 'EasyPrintAnd' ,  options , modo = 'produccion' )
+            { 
+                
               
-
-
-      
-             
-               setTimeout( function () {
-
-                  paWindow.focus();
-                  paWindow.print();
-
-              }, 300 );
+               
+              var modos = modo;
+              var counter = 0;
+              var modes = { iframe : "iframe", popup : "popup" };
+              var standards = { strict : "strict", loose : "loose", html5 : "html5" };
+              var defaults = { mode       : modes.iframe,
+                               standard   : standards.html5,
+                               extraCss   : '',
+                               defaultCss : false,
+                               extraHead  : '',
+                               retainAttr : ["id","class","style"] };
         
-          }
-         
-
-
-          function write  ( PADocument, $ele ) {
-
-
-
-              PADocument.open();
-
-
-
-              //let HTML = docType() + "<html>" + getHead() + getBody( $ele ) + "</html>";
-
-               let HTML =  "<html>" + getHead() + getBody( $ele ) + "</html>";
-
-
-              PADocument.write( HTML );
-
-              PADocument.close();
-          }
-          
-
-
-
-         
-
-          function getHead(){
-
-           
-              var links = "";
-
-          
-
-              /** Busca Todos los Css y los Carga **/
-              if (settings.defaultCss) {
-
-                  /*$(document).find("link").each(function(){
-          
-                      links += '<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >';
-                                       
-                  });
-                  */
+              var settings = {};//global settings
+        
+        
+        
+              
+        
+              //Combiamos el arrayd
+              Object.assign(settings, defaults, options);
+        
+              //El Id del documento
+              counter++;
+        
+        
+        
+              var idPrefix = "printArea_";
+              
+              //Se Renova el  documento actial
+              var data = document.querySelector("[id^=" + idPrefix + "]" );
+        
+              if (data) {
+                  data.remove();
               }
-
-              /** En caso de que mandemos un CssExtra **/
-              if ( settings.extraCss ) settings.extraCss.replace( /([^,\s]+)/g , function(m){ links += '<link type="text/css" rel="stylesheet" href="' + m + '">' });
-
+        
+        
+              // ID Siguiente
+              settings.id = idPrefix + counter;
+        
+              
               
-              return "<head>" + links + "</head>";
-          }
         
-
-
-          function getBody ( elements ) {
-             
-
-              console.log(elements);
-
-              return "<body>" + elements.innerHTML + "</body>";
-          }
-         
-         
-
-
-
-          function getFormData( ele ) {
-     
-
-
-          }
-          
-
-
-
-          function getPrintWindow   () {
-
-              var f = new Iframe();
+              
+                var $printSource = document.querySelector("div#" + id_elemento );
+              
+        
+                var PrintAreaWindow = getPrintWindow();
+        
+           
+        
+                write( PrintAreaWindow.doc, $printSource );
+                
+                if( modos == "produccion"){
+                    
+                    setTimeout( function () { print( PrintAreaWindow ); }, 300 );
+        
+                }
+        
+        
+        
+                    
+        
+        
+                 function  print ( PAWindow ) {
+                      var paWindow = PAWindow.win;
+                       setTimeout( function () {
+                          paWindow.focus();
+                          paWindow.print();
+        
+                      }, 300 );
+                
+                  }
+                 
+        
+        
+                  function write  ( PADocument, $ele ) {
+        
+        
+        
+                      PADocument.open();
+        
+        
+        
+                      //let HTML = docType() + "<html>" + getHead() + getBody( $/ele ) + "</html>";
+        
+                       let HTML =  "<html>" + getHead() + getBody( $/ele ) + "</html>";
+        
+        
+                      PADocument.write( HTML );
+        
+                      PADocument.close();
+                  }
+                  
+        
+        
+        
+                 
+        
+                  function getHead(){
+        
+                  
+                      var links = "";
+        
+                  
+        
+                      /** Busca Todos los Css y los Carga **/
+                      if (settings.defaultCss) {
+        
+                          /*$(document).find("link").each(function(){
+                  
+                              links += '<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >';
+                                               
+                          });
+                          */
+                      }
+        
+                      /** En caso de que mandemos un CssExtra **/
                    
-              console.log(f);
-
-              let data =  { 
-
-                  win : f.contentWindow || f,
-
-                  doc : f.doc 
-              };
-
-
-              return data;
-
-
-         
-          }
-          
-
-
-
-
-          function Iframe() {
+                    if ( settings.extraCss ) {     
+                        settings.extraCss.replace( /([^,\s]+)/g , function(m){ 
+                            links += '<link type="text/css" rel="stylesheet" href="' + m + '">' 
+                        });
+                    }
+                    
+                   
+                    
+                  
+                    
+        
+                      
+                      if(modos == "pruebas"  ){
+                          return "<head>" + links + getFooter()+  "</head>";
+        
+                      }else{
+                        return "<head>" + links +   "</head>";
+                      }
+                  }
+                
+        
+        
+                  function getBody ( elements ) {
+                      return "<body>" + elements.innerHTML + "</body>";
+                  }
+                 
+                  function getFooter(){
+                    if(modos == "pruebas" ){
+        
+                        return  '<button  onClick="this.remove();window.print();"  id="printButton">Imprimir</button>';
+                    }
+            
+                  }
+        
+        
+        
+                  function getFormData( ele ) {
              
-
-              var frameId = settings.id;
-
-              //Estilos para ocultarlo
-              var iframeStyle =  'border:0;position:absolute;width:0px;height:0px;right:0px;top:0px;';
-              
-              var iframe;
-
+        
+        
+                  }
+                  
+        
+        
+        
+                  function getPrintWindow   () {
+        
+                      var f = new Iframe();
+                           
+                      console.log(f);
+        
+                      let data =  { 
+        
+                          win : f.contentWindow || f,
+        
+                          doc : f.doc 
+                      };
+        
+        
+                      return data;
+        
+        
+                 
+                  }
+                  
+        
+        
+        
+        
+                  function Iframe() {
+                     
+        
+                      var frameId = settings.id;
+        
+                      //Estilos para ocultarlo //'width:80mm;height:1000px' 
+                     
+                      
+        
+                      if(modos == "produccion" ){
+                        var iframeStyle = 'border:0;position:absolute;width:0px;height:0px;right:0px;top:0px;';
+                      }else{
+                        var iframeStyle = 'z-index:10000;border:0;position:relative;width:90%;height:900px;right:0px;top:0px;background: #a3a0a0; padding-left: 30px;padding-top: 20px;';
+                      }
+                      var iframe;
+                      
+                     
+                      
+                      
+                      /* Creamos un elemento Iframe **/
+                      iframe = document.createElement('iframe');
+        
+        
+                      /* Agregamos el iframe al inucio del documento */
+                      //
+                      if(modos == "produccion" ){ 
+                        //En produccion se agrega encima del HTML
+                        document.body.appendChild(iframe);
+                      }else{
+                        //En Pruebas  se agrega dentro de una eiqueta Html
+                        const el = document.querySelector(".pintDivtest"); 
+                        el.appendChild(iframe);   
+                      }
+                      
+        
+        
+        
+                      iframe.setAttribute("style", iframeStyle );
+                      iframe.setAttribute("id", frameId );
+                      iframe.setAttribute("src", "#" + new Date().getTime()  );
+        
+                      
+        
+                      iframe.doc = null;
+                      iframe.doc = iframe.contentDocument ? iframe.contentDocument :( iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
+                      return iframe;
+                  }
+                  
+                  function Popup() {
+                      var windowAttr = "location=yes,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no";
+                      windowAttr += ",width=" + settings.popWd + ",height=" + settings.popHt;
+                      windowAttr += ",resizable=yes,screenX=" + settings.popX + ",screenY=" + settings.popY + ",personalbar=no,scrollbars=yes";
+                      var newWin = window.open( "", "_blank",  windowAttr );
+                      newWin.doc = newWin.document;
+                      return newWin;
+                  }
               
-              /* Creamos un elemento Iframe **/
-              iframe = document.createElement('iframe');
-
-
-              /* Agregamos el iframe al inucio del documento */
-              document.body.appendChild(iframe);
-
-
-
-
-
-              iframe.setAttribute("style", iframeStyle );
-              iframe.setAttribute("id", frameId );
-              iframe.setAttribute("src", "#" + new Date().getTime()  );
-
               
-
-              iframe.doc = null;
-              iframe.doc = iframe.contentDocument ? iframe.contentDocument :( iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
-              return iframe;
           }
           
-          function Popup() {
-              var windowAttr = "location=yes,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no";
-              windowAttr += ",width=" + settings.popWd + ",height=" + settings.popHt;
-              windowAttr += ",resizable=yes,screenX=" + settings.popX + ",screenY=" + settings.popY + ",personalbar=no,scrollbars=yes";
-              var newWin = window.open( "", "_blank",  windowAttr );
-              newWin.doc = newWin.document;
-              return newWin;
-          }
-      
-      
-  }
-  
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    module.exports = prindiv
-
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+            module.exports = prindiv;