API tools faq
paste
Advertisement
terorama

jsfw

terorama
Oct 1st, 2012
126
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 33.65 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3.  
  4. jsfw = function () {
  5.  
  6.    _self=this;
  7.  
  8.    //-------------------------------------
  9.    //         init object
  10.    //-------------------------------------
  11.    this.init=function() {
  12.    
  13.       this.helper = new this.f_helper();
  14.       window.onload=this.Handlers.win_load;
  15.  
  16.    }
  17.    
  18.    //-------------------------------------
  19.    //      startup object
  20.    //-------------------------------------
  21.    this.startup=function() {
  22.    
  23.      this.setup_common_Events();     
  24.      this.setupEvents('window');     
  25.      
  26.       this.doc = new this.f_doc();
  27.      
  28.       //this.setupEvents('this.doc.test_element');
  29.      
  30.    }
  31.    
  32.    //-------------------------------------
  33.    //     setup common events
  34.    //-------------------------------------
  35.    this.setup_common_Events=function() {
  36.    
  37.       window.onscroll=       this.Handlers.window_scroll;
  38.       window.onresize=       this.Handlers.window_resize;
  39.       window.onselectstart = this.Handlers.select_start;
  40.       window.oncontextmenu = this.Handlers.context_menu;
  41.      
  42.       window.onkeydown =     this.Handlers.key_down;
  43.       window.onkeypress =    this.Handlers.key_press;
  44.       window.onkeyup    =    this.Handlers.key_up;
  45.      
  46.       this.helper.add_event(document,'mousewheel',this.Handlers.mouse_wheel);
  47.    }
  48.    
  49.    //-------------------------------------
  50.    //     setup events
  51.    //-------------------------------------
  52.    this.setupEvents=function(el_string) {
  53.      
  54.       var el = eval(el_string);
  55.      
  56.       el.onmousemove= this.Handlers.mouse_move;
  57.       el.onmousedown= this.Handlers.mouse_down;
  58.       el.onmouseup=   this.Handlers.mouse_up;
  59.       el.onmouseover= this.Handlers.mouse_over;
  60.       el.onmouseout=  this.Handlers.mouse_out;
  61.      
  62.    };
  63.    
  64.    //-------------------------------------------------
  65.    //                event handlers
  66.    //-------------------------------------------------
  67.    this.Handlers= {
  68.    
  69.       //---------------------window load
  70.      
  71.       win_load: function() {
  72.          
  73.          _self.startup();
  74.          
  75.       },
  76.      
  77.       //--------------------------mouse move
  78.      
  79.       mouse_move: function(e) {
  80.      
  81.          
  82.          s_ev = _self.helper.get_event_info(e, this);
  83.          
  84.          //_self.helper.show_event_info(e, this, 'mouse_move', this.suffix);
  85.          
  86.          //----------------mouse coords (considering scroll)
  87.          
  88.          var pageX = s_ev.s_event.clientX +
  89.                         (document.documentElement && document.documentElement.scrollLeft ||
  90.                          document.body && document.body.scrollLeft || 0) -
  91.                          
  92.                          (document.documentElement.clientLeft || 0);
  93.                          
  94.          var pageY = s_ev.s_event.clientY +
  95.                           (document.documentElement && document.documentElement.scrollTop ||
  96.                              document.body && document.body.scrollTop || 0) -
  97.                              
  98.                              (document.documentElement.clientTop || 0);
  99.                            
  100.          //-------------------------mouse coords
  101.          _self.doc.status.mouse_coords =
  102.                            s_ev.s_event.clientX+'-'+
  103.                            s_ev.s_event.clientY+' ('+pageX+'-'+pageY+')';
  104.  
  105.       },
  106.      
  107.       //---------------------------------mouse down
  108.       mouse_down: function(e) {
  109.      
  110.          _self.helper.show_event_info(e, this, 'mouse_down', this.suffix);
  111.          
  112.          //--------------------------mouse button
  113.          
  114.          _self.doc.status.mouse_button = _self.helper.get_mouse_button(e);
  115.          
  116.          _self.helper.stop_event(e);
  117.        
  118.      
  119.       },
  120.      
  121.       //----------------------------------mouse up
  122.       mouse_up: function(e) {
  123.      
  124.          _self.helper.show_event_info(e, this, 'mouse_up', this.suffix);
  125.          
  126.          _self.doc.status.mouse_button = _self.helper.get_mouse_button(e);
  127.       },
  128.      
  129.       //------------------------------window scroll
  130.      
  131.       window_scroll: function(e) {
  132.      
  133.          _self.helper.show_event_info(e, this, 'window_scroll' );    
  134.      
  135.       },
  136.      
  137.       //-------------------------------window resize
  138.       window_resize: function(e) {
  139.      
  140.          _self.helper.show_event_info(e, this, 'window_resize');   
  141.       },
  142.      
  143.       //-------------------------------mouse wheel
  144.       mouse_wheel: function(e) {
  145.      
  146.          s_ev = _self.helper.get_event_info(e, this);        
  147.          _self.helper.show_event_info(e, this, 'mouse_wheel')
  148.          
  149.          //------------------set wheel delta
  150.          _self.doc.status.wheel_delta=
  151.                                      s_ev.s_event.wheelDelta;
  152.                                        
  153.            
  154.       },
  155.      
  156.       //----------------------------------select start    
  157.       select_start: function(e) {
  158.      
  159.          _self.helper.show_event_info(e, this, 'select_start');  
  160.      
  161.       },
  162.      
  163.      
  164.       //---------------------------------context menu  
  165.       context_menu: function(e) {
  166.      
  167.          _self.helper.show_event_info(e, this, 'context_menu');  
  168.      
  169.       },
  170.      
  171.       //----------------------------------key down  
  172.       key_down: function(e) {
  173.      
  174.          s_ev = _self.helper.get_event_info(e, this);  
  175.  
  176.          //---------------key and char codes
  177.          
  178.          _self.doc.status.key_code = s_ev.s_event.keyCode;
  179.          _self.doc.status.alt_key = s_ev.s_event.altKey;
  180.          _self.doc.status.ctrl_key = s_ev.s_event.ctrlKey;
  181.  
  182.          
  183.          //_self.doc.status.char_code = s_ev.s_event.charCode;
  184.          
  185.          _self.helper.show_event_info(e, this, 'key_down');  
  186.      
  187.       },
  188.      
  189.       //-----------------------------------key press      
  190.       key_press: function(e) {
  191.      
  192.           s_ev = _self.helper.get_event_info(e, this); 
  193.  
  194.          //---------------key and char codes
  195.          
  196.          //_self.doc.status.key_code = s_ev.s_event.keyCode;
  197.          _self.doc.status.char_code = s_ev.s_event.charCode;
  198.          
  199.          //---------------alt and ctrl keys
  200.          
  201.        
  202.          
  203.          _self.helper.show_event_info(e, this, 'key_press');     
  204.      
  205.       },
  206.      
  207.       //-----------------------------------key up
  208.       key_up: function(e) {
  209.      
  210.          s_ev = _self.helper.get_event_info(e, this);  
  211.  
  212.          //---------------key and char codes
  213.          
  214.          _self.doc.status.key_code = s_ev.s_event.keyCode;
  215.          //_self.doc.status.char_code = s_ev.s_event.charCode;
  216.  
  217.      
  218.          _self.helper.show_event_info(e, this, 'key_up');    
  219.      
  220.       },     
  221.      
  222.       //-----------------------------------mouse over
  223.       mouse_over: function(e) {
  224.      
  225.          _self.helper.show_event_info(e, this, 'mouse_over', this.suffix);   
  226.      
  227.       },     
  228.      
  229.       //-----------------------------------mouse out  
  230.       mouse_out: function(e) {
  231.      
  232.          _self.helper.show_event_info(e, this, 'mouse_out', this.suffix);    
  233.      
  234.       }  
  235.    }
  236.    
  237.    
  238.    //----------------------------------------------------------
  239.    //                    doc glob obj
  240.    //----------------------------------------------------------
  241.    this.f_doc=function() {
  242.      
  243.        _dself=this;
  244.        
  245.        //-------------------------doc status
  246.        this.status = {
  247.        
  248.           page_width:'',
  249.           page_height:'',
  250.           scroll_page_width:'',
  251.           scroll_page_height:'',
  252.          
  253.            //-------------------------
  254.           window_outer_width:'',
  255.           window_outer_height:'',
  256.          
  257.           window_inner_width:'',
  258.           window_inner_height:'',
  259.          
  260.           window_x_position:'',
  261.           window_y_position:'',
  262.          
  263.            //-------------------------
  264.           screen_width:'',
  265.           screen_height:'',
  266.           screen_avail_width:'',
  267.           screen_avail_height:'',
  268.           screen_color_depth:'',
  269.          
  270.           //-------------------------
  271.           navigator_appname:'',
  272.           navigator_appversion:'',
  273.           navigator_cookieenabled:'',
  274.           navigator_platform:'',
  275.           navigator_useragent:'',
  276.            
  277.           //-------------------------
  278.           scroll_left:'',
  279.           scroll_top:'',
  280.           //-------------------------
  281.           mouse_coords:'',
  282.           mouse_button:'',
  283.           wheel_delta:'',
  284.           key_code:'',
  285.           char_code:'',
  286.           alt_key:'',
  287.           ctrl_key:'',
  288.           //-------------------------
  289.          
  290.           current_time:''
  291.          
  292.       }
  293.       //------------------------doc initialization
  294.      
  295.       this.init = function () {
  296.          
  297.         //-----------------------------------active info
  298.         var inf_els = [      
  299.            {info_caption: 'scroll left: ', info_id: 'scroll_left'},    
  300.            {info_caption: 'scroll top: ', info_id: 'scroll_top'},  
  301.          
  302.            {info_caption: 'mouse coords: ', info_id: 'mouse_coords'},  
  303.            {info_caption: 'mouse button: ', info_id: 'mouse_button'},  
  304.            {info_caption: 'wheel delta: ', info_id: 'wheel_delta'},  
  305.            {info_caption: 'key code: ', info_id: 'key_code'},  
  306.            {info_caption: 'char code: ', info_id: 'char_code'},
  307.            {info_caption: 'alt key: ', info_id: 'alt_key'},  
  308.            {info_caption: 'ctrl key: ', info_id: 'ctrl_key'},
  309.            {info_caption: 'current time: ', info_id: 'current_time'}
  310.        
  311.         ];     
  312.        
  313.         this.active_info_element= _self.helper.crInfoBlock('active info', inf_els);
  314.        
  315.        
  316.         //--------------------------------------events info
  317.         var inf_els = [
  318.            {info_caption: 'current event: ', info_id: 'current_event'},
  319.            {info_caption: 'event target: ', info_id: 'event_target'},
  320.            {info_caption: 'event target id: ', info_id: 'event_target_id'},
  321.            {info_caption: 'event catcher: ', info_id: 'event_catcher'},
  322.            {info_caption: 'event catcher id: ', info_id: 'event_catcher_id'},
  323.            {info_caption: 'event type: ', info_id: 'event_type'},
  324.            {info_caption: 'event rel target: ', info_id: 'event_reltarget'},
  325.            {info_caption: 'event rel target id: ', info_id: 'event_reltarget_id'}
  326.          
  327.            
  328.        
  329.         ];
  330.        
  331.         this.events_info_element=  _self.helper.crInfoBlock('event info', inf_els );
  332.         var suffix='4';
  333.         this.events_info_element_alt = _self.helper.crInfoBlock('event info alt', inf_els,suffix);
  334.        
  335.        
  336.        
  337.         //-------------------------------common info
  338.         var inf_els = [
  339.  
  340.            {info_caption: 'page width: ', info_id: 'page_width'},
  341.            {info_caption: 'page height: ', info_id: 'page_height'},
  342.            {info_caption: 'scroll page width: ', info_id: 'scroll_page_width'},
  343.            {info_caption: 'scroll page height: ', info_id: 'scroll_page_height'},
  344.            {info_caption: 'window outer width: ', info_id: 'window_outer_width'},
  345.            {info_caption: 'window outer height: ', info_id: 'window_outer_height'},
  346.            {info_caption: 'window inner width: ', info_id: 'window_inner_width'},
  347.            {info_caption: 'window inner height: ', info_id: 'window_inner_height'},
  348.            {info_caption: 'window X: ', info_id: 'window_x_position'},
  349.            {info_caption: 'window Y: ', info_id: 'window_y_position'}
  350.        
  351.         ];
  352.        
  353.         this.common_info_element=  _self.helper.crInfoBlock('common info', inf_els );
  354.        
  355.        
  356.         //---------------------------------system info
  357.         info_els = [
  358.                   {info_caption: 'screen width: ', info_id: 'screen_width'},
  359.                   {info_caption: 'screen height: ', info_id: 'screen_height'},
  360.                   {info_caption: 'screen available width: ', info_id: 'screen_avail_width'},
  361.                   {info_caption: 'screen available height: ', info_id: 'screen_avail_height'},
  362.                   {info_caption: 'screen color depth: ', info_id: 'screen_color_depth'},
  363.                  
  364.                   {info_caption: 'navigator app name: ', info_id: 'navigator_appname'},
  365.                   {info_caption: 'navigator app version: ', info_id: 'navigator_appversion'},
  366.                   {info_caption: 'navigator cookie enabled: ', info_id: 'navigator_cookieenabled'},
  367.                   {info_caption: 'navigator platform: ', info_id: 'navigator_platform'},
  368.                   {info_caption: 'navigator user agent: ', info_id: 'navigator_useragent'},
  369.                  
  370.                ]
  371.                
  372.          this.system_info_element = _self.helper.crInfoBlock('system info', info_els);
  373.          
  374.          
  375.          //---------------------------------block position info
  376.         info_els = [
  377.                   {info_caption: 'offset Left: ', info_id: 'offset_left'},
  378.                   {info_caption: 'offset Top: ', info_id: 'offset_top'},
  379.                   {info_caption: 'offset Width ', info_id: 'offset_width'},
  380.                   {info_caption: 'offset Height: ', info_id: 'offset_height'},
  381.                   {info_caption: 'offset parent: ', info_id: 'offset_parent'},
  382.                  
  383.                   {info_caption: 'rect Left: ', info_id: 'rect_left'},
  384.                   {info_caption: 'rect Top: ', info_id: 'rect_top'},
  385.                   {info_caption: 'rect Right ', info_id: 'rect_right'},
  386.                   {info_caption: 'rect Bottom: ', info_id: 'rect_bottom'}
  387.                  
  388.                  
  389.                ]
  390.                
  391.          this.position_info_element = _self.helper.crInfoBlock('position info', info_els);
  392.          
  393.          
  394.          //-----------------------------------------------test block
  395.          
  396.          this.test_element=_self.helper.crEl('test_block');
  397.          this.test_element.style['top']='300px';
  398.          this.test_element.style['left']='500px';
  399.          this.test_element.suffix=suffix;
  400.          
  401.          _self.helper.addPar(this.test_element,'test');
  402.          
  403.          _self.DDrop.attach(this.test_element);
  404.          
  405.          //------------------------------------------test block with table
  406.          
  407.          this.table_test_element = _self.helper.crInfoBlock('Table tests', []);
  408.          
  409.          info_tab = {
  410.             tbodies : {nrows:3, ncols:5},
  411.             thead: {nrows:1, ncols: 4},
  412.             tfoot: {nrows:1, ncols:3}
  413.          }
  414.          var tabel= _self.helper.draw_table (info_tab);
  415.          
  416.          this.table_test_element.appendChild(tabel);
  417.          
  418.          //-------------------------------------test block with form
  419.          
  420.          this.form_test_element = _self.helper.crInfoBlock('Form tests',[]);
  421.          
  422.          var testform = _self.helper.draw_form();
  423.          
  424.          el= this.form_test_element;
  425.          el.appendChild(testform);
  426.          
  427.        
  428.         el.style['height']=(window.innerHeight-el.offsetTop-5)+'px';
  429.    
  430.        
  431.        
  432.       }  
  433.       //-----------------------------------------------------
  434.       //           update status
  435.       //-----------------------------------------------------
  436.       this.update_status = function () {
  437.      
  438.            //----------------------------document width and height without scroll
  439.            
  440.            this.status.page_width =
  441.                              document.documentElement.clientWidth;
  442.            
  443.            this.status.page_height =
  444.                              document.documentElement.clientHeight;
  445.                              
  446.            
  447.            //---------------------------document width and height with scroll
  448.            
  449.            this.status.scroll_page_width =         
  450.                              Math.max(document.documentElement.scrollWidth,
  451.                                       document.documentElement.clientWidth);
  452.                                      
  453.            this.status.scroll_page_height =
  454.                              Math.max(document.documentElement.scrollHeight,
  455.                                       document.documentElement.clientHeight);  
  456.                                      
  457.            //-----------------------window inner and outer width and height
  458.            
  459.            this.status.window_outer_width = window.outerWidth;
  460.            this.status.window_outer_height = window.outerHeight;
  461.            
  462.            this.status.window_inner_width = window.innerWidth;
  463.            this.status.window_inner_height = window.innerHeight;
  464.            
  465.            //-----------------------window position
  466.            
  467.            this.status.window_x_position = window.screenLeft;
  468.            this.status.window_y_position = window.screenTop;
  469.            
  470.            //----------------------screen width, height and depth
  471.            
  472.            this.status.screen_width = screen.width;
  473.            this.status.screen_height = screen.height;
  474.            
  475.            this.status.screen_avail_width = screen.availWidth;
  476.            this.status.screen_avail_height = screen.availHeight;
  477.            
  478.            this.status.screen_color_depth = screen.colorDepth; //pixelDepth
  479.            
  480.            //---------------------browser info
  481.            
  482.            this.status.navigator_appname = navigator.appName;
  483.            this.status.navigator_appversion = navigator.appVersion;
  484.            this.status.navigator_cookieenabled = navigator.cookieEnabled;
  485.            this.status.navigator_platform = navigator.platform;
  486.            this.status.navigator_useragent = navigator.userAgent;
  487.            
  488.            //--------------------current time
  489.            
  490.            var d = new Date();
  491.            this.status.current_time = d.getDay()+'.'+d.getMonth()+'.'+d.getFullYear()+' '+
  492.                                       d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
  493.         }
  494.        
  495.       //-----------------------------------------------------
  496.       //            update quick status
  497.       //-----------------------------------------------------
  498.          
  499.       this.update_quick_status = function () {
  500.      
  501.            //-----------------------------scroll left
  502.            this.status.scroll_left =                     
  503.                window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;         
  504.            //---------------------IE<8         
  505.            this.status.scroll_left-= document.documentElement.clientLeft || document.body.clientLeft;  
  506.            
  507.            //-----------------------------scroll top
  508.            this.status.scroll_top =
  509.                window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  510.            //---------------------IE<8  
  511.            this.status.scroll_top-= document.documentElement.clientTop || document.body.clientTop;
  512.            
  513.            //window.innerWidth
  514.            //document.documentElement.offsetWidth  || document.body.offsetWidth
  515.  
  516.       }
  517.      
  518.       //--------------------------------------------------------------
  519.       //                       show status
  520.       //--------------------------------------------------------------
  521.       this.show_status = function () {
  522.          
  523.          _self.helper.put_info('page_width', this.status.page_width);
  524.          _self.helper.put_info('page_height', this.status.page_height);      
  525.          _self.helper.put_info('scroll_page_width', this.status.scroll_page_width);
  526.          _self.helper.put_info('scroll_page_height', this.status.scroll_page_height);
  527.          
  528.          _self.helper.put_info('window_outer_width', this.status.window_outer_width);
  529.          _self.helper.put_info('window_outer_height', this.status.window_outer_height);
  530.          _self.helper.put_info('window_inner_width', this.status.window_inner_width);
  531.          _self.helper.put_info('window_inner_height', this.status.window_inner_height);
  532.          
  533.          _self.helper.put_info('window_x_position', this.status.window_x_position);
  534.          _self.helper.put_info('window_y_position', this.status.window_y_position);
  535.          
  536.          _self.helper.put_info('screen_width', this.status.screen_width);
  537.          _self.helper.put_info('screen_height', this.status.screen_height);
  538.          
  539.          _self.helper.put_info('screen_avail_width', this.status.screen_avail_width);
  540.          _self.helper.put_info('screen_avail_height', this.status.screen_avail_height);
  541.          
  542.          _self.helper.put_info('screen_color_depth', this.status.screen_color_depth);
  543.          
  544.          _self.helper.put_info('navigator_appname', this.status.navigator_appname);
  545.          _self.helper.put_info('navigator_appversion', this.status.navigator_appversion);
  546.          _self.helper.put_info('navigator_cookieenabled', this.status.navigator_cookieenabled);
  547.          _self.helper.put_info('navigator_platform', this.status.navigator_platform);
  548.          _self.helper.put_info('navigator_useragent', this.status.navigator_useragent);
  549.          
  550.       }
  551.      
  552.       //--------------------------------------------------------------
  553.       //                       show quick status
  554.       //--------------------------------------------------------------
  555.       this.show_quick_status= function () {
  556.      
  557.          _self.helper.put_info('mouse_coords', this.status.mouse_coords);
  558.          _self.helper.put_info('mouse_button', this.status.mouse_button);
  559.          _self.helper.put_info('wheel_delta', this.status.wheel_delta);
  560.          _self.helper.put_info('key_code', this.status.key_code);
  561.          _self.helper.put_info('char_code', this.status.char_code);
  562.          _self.helper.put_info('alt_key', this.status.alt_key);
  563.          _self.helper.put_info('ctrl_key', this.status.ctrl_key);
  564.          
  565.          _self.helper.put_info('scroll_left', this.status.scroll_left);
  566.          _self.helper.put_info('scroll_top', this.status.scroll_top);    
  567.          _self.helper.put_info('current_time', this.status.current_time);
  568.       }
  569.      
  570.      
  571.  
  572.       this.init();
  573.       this.status_interval =
  574.           setInterval( function() {_dself.update_status();_dself.show_status();}, 400);
  575.          
  576.       this.quick_status_interval =   
  577.          setInterval( function() {_dself.update_quick_status();_dself.show_quick_status();},100);
  578.    }
  579.    
  580.    //-------------------------------------------------------
  581.    //                       helper obj
  582.    //-------------------------------------------------------
  583.    this.f_helper= function() {
  584.      
  585.       this.num_infoblocks=0;
  586.       this.num_all=0;
  587.       this.event_attachment_type='listener';
  588.      
  589.       _hself = this;
  590.      
  591.       //--------------------------get event related info
  592.      
  593.       this.get_event_info = function (ev, in_catcher) {
  594.      
  595.          ev = ev || event
  596.          var target = ev.target || ev.srcElement;
  597.          var catcher = in_catcher;
  598.          
  599.          var evtype = ev.type;
  600.          
  601.          if (!ev.relatedTarget && ev.fromElement)
  602.             var relatedTarget = (ev.fromElement==ev.target) ? ev.toElement : ev.fromElement;
  603.          else
  604.             var relatedTarget = ev.relatedTarget;
  605.          
  606.          return {
  607.             s_event : ev,
  608.             s_type : evtype,
  609.             s_target : target,
  610.             s_reltarget : relatedTarget,
  611.             s_catcher : catcher
  612.          }
  613.       }
  614.      
  615.       //--------------------------------show event info
  616.      
  617.       this.show_event_info = function (ev, in_catcher, instr, suffix) {
  618.          
  619.          s_ev = _hself.get_event_info(ev, in_catcher);
  620.          
  621.          _hself.put_info('current_event'+(suffix || ''), s_ev.s_event+ ' '+instr);
  622.          
  623.          _hself.put_info('event_target'+(suffix || ''),s_ev.s_target);
  624.          _hself.put_info('event_target_id'+(suffix || ''), s_ev.s_target.id);
  625.          
  626.          _hself.put_info('event_catcher'+(suffix || ''),s_ev.s_catcher);
  627.          _hself.put_info('event_catcher_id'+(suffix || ''),s_ev.s_catcher.id);
  628.          
  629.          _hself.put_info('event_type'+(suffix || ''),s_ev.s_type);
  630.          
  631.          _hself.put_info('event_reltarget'+(suffix || ''),s_ev.s_reltarget);
  632.          _hself.put_info('event_reltarget_id'+(suffix || ''),(s_ev.s_reltarget ? s_ev.s_reltarget.id : ''));
  633.       }
  634.      
  635.       //-----------------------------get element coords
  636.      
  637.       this.get_coords_info = function (el) {
  638.      
  639.          var offset_left = el.offsetLeft;
  640.          var offset_top = el.offsetTop;
  641.          var offset_width = el.offsetWidth;
  642.          var offset_height = el.offsetHeight;
  643.          
  644.          var offset_parent = el.offsetParent;
  645.          
  646.          var xScroll = document.documentElement.scrollLeft || document.body.scrollLeft;
  647.          var yScroll = document.documentElement.scrollTop || document.body.scrollTop;
  648.          
  649.          var xClient = document.documentElement.clientLeft || document.body.clientLeft;
  650.          var yClient = document.documentElement.clientTop || document.body.clientTop;
  651.          
  652.          var z_rect= el.getBoundingClientRect();
  653.          
  654.          var rect_left = z_rect.left + xScroll - xClient;
  655.          var rect_top = z_rect.top + yScroll - yClient;
  656.          var rect_right = z_rect.right + xScroll - xClient;
  657.          var rect_bottom = z_rect.bottom + yScroll - yClient;
  658.          
  659.          return {
  660.             c_offset_left : offset_left,
  661.             c_offset_top : offset_top,
  662.             c_offset_width : offset_width,
  663.             c_offset_height : offset_height,
  664.             c_offset_parent : offset_parent,
  665.             c_rect_left : rect_left,
  666.             c_rect_top : rect_top,
  667.             c_rect_right : rect_right,
  668.             c_rect_bottom : rect_bottom  
  669.          }
  670.          
  671.       }
  672.      
  673.       //---------------------------------show element coords
  674.      
  675.       this.show_coords_info = function (el) {
  676.      
  677.          var coords = _hself.get_coords_info(el);
  678.          
  679.          _hself.put_info('offset_left', coords.c_offset_left);
  680.          _hself.put_info('offset_top', coords.c_offset_top);
  681.          _hself.put_info('offset_width', coords.c_offset_width);
  682.          _hself.put_info('offset_height', coords.c_offset_height);
  683.          _hself.put_info('offset_parent', coords.c_offset_parent);
  684.          _hself.put_info('rect_left', coords.c_rect_left);
  685.          _hself.put_info('rect_top', coords.c_rect_top);
  686.          _hself.put_info('rect_right', coords.c_rect_right);
  687.          _hself.put_info('rect_bottom', coords.c_rect_bottom);
  688.       }
  689.      
  690.       //-------------------------------get mouse button
  691.      
  692.       this.get_mouse_button = function (ev) {
  693.          
  694.          ev = ev || event;
  695.          
  696.          if (!ev.which && ev.button) {
  697.             if (ev.button & 1) ev.which=1
  698.             else if (ev.button & 4) ev.which=2
  699.             else if (ev.button & 2) ev.which=3;
  700.          }
  701.          
  702.          return ev.which;
  703.       }
  704.      
  705.       //-----------------------------------------------draw table
  706.      
  707.       this.draw_table = function (inf) {
  708.      
  709.          function draw_section(section, nrows, ncols) {
  710.            
  711.             for (var i=0; i<nrows; i++) {
  712.                var row = section.insertRow(i);
  713.                
  714.                for (var j=0; j<ncols; j++) {
  715.                   var cell=row.insertCell(j);
  716.                  
  717.                   cell.innerHTML=i+'<sup>'+j+'</sup>';
  718.                }
  719.             }
  720.          }
  721.          
  722.          var el =document.createElement('TABLE');
  723.          
  724.          if (inf.tbodies)
  725.             draw_section(el.tBodies[0] && el.tBodies[el.tBodies.length-1] || el,
  726.             inf.tbodies.nrows,
  727.             inf.tbodies.ncols);
  728.            
  729.          if (inf.thead)
  730.             draw_section(el.createTHead(), inf.thead.nrows, inf.thead.ncols);
  731.            
  732.          if (inf.tfoot)
  733.             draw_section(el.createTFoot(), inf.tfoot.nrows, inf.tfoot.ncols);
  734.            
  735.          return el;
  736.      
  737.       }
  738.      
  739.       //-----------------------------------------------draw form
  740.       this.draw_form = function () {
  741.      
  742.          function addInput(type,name,value,text,id) {
  743.          
  744.             var p_el = document.createElement('P');
  745.            
  746.             switch (type.toUpperCase()) {
  747.            
  748.                case 'TEXTAREA':
  749.                   var el = document.createElement('TEXTAREA');
  750.                   break;
  751.                          
  752.                default:
  753.                   var el = document.createElement('INPUT');
  754.                   el.type=type;
  755.             }
  756.            
  757.             el.name=name;
  758.             el.id=id;
  759.             el.value=value;
  760.            
  761.             p_el.appendChild(el);
  762.            
  763.             var tx=document.createTextNode(text);
  764.            
  765.             switch (type.toUpperCase()) {
  766.            
  767.                case 'CHECKBOX':
  768.                case 'RADIO':                 
  769.                   p_el.appendChild(tx);
  770.                   break;
  771.            
  772.                default:
  773.                   p_el.insertBefore(tx,el);
  774.             }
  775.            
  776.             this.appendChild(p_el);
  777.            
  778.          }
  779.          //-------------------------------
  780.          function addSelect(name, values, captions, id) {
  781.          
  782.             var p_el=document.createElement('P');
  783.            
  784.             var el = document.createElement('SELECT');
  785.             el.name=name;
  786.             el.id==id;
  787.             //------------------
  788.             for (var i=0; i<values.length; i++) {
  789.            
  790.                var o = new Option (captions[i], values[i], false, false);
  791.                
  792.                try {
  793.                   el.add(o, null)
  794.                }
  795.                catch(e) {
  796.                   el.add(o);
  797.                }
  798.             }
  799.             //------------------
  800.             p_el.appendChild(el);
  801.             this.appendChild(p_el);
  802.          }
  803.          
  804.          //-------------------------------
  805.          var el = document.createElement('FORM');
  806.          
  807.          addInput.call(el, 'TEXT','z_name', '','Input your name', 'el_name');
  808.          addInput.call(el, 'CHECKBOX', 'z_interests[]','', 'books', 'el_books');
  809.          addInput.call(el, 'CHECKBOX', 'z_interests[]','', 'movies', 'el_movies');
  810.          addInput.call(el, 'RADIO', 'gender','', 'male', 'el_male');
  811.          addInput.call(el, 'RADIO', 'gender','', 'female', 'el_female');
  812.          addSelect.call(el, 'country', ['n_us','n_uk','n_russia','n_china'],
  813.                                           ['US','UK','Russia','China'], 'el_country');
  814.          
  815.          return el;
  816.       }
  817.      
  818.      
  819.       //---------------------------create element;
  820.      
  821.       this.crEl= function (className, inel) {
  822.      
  823.          var el=document.createElement('DIV');
  824.          el.className=className;
  825.          
  826.          this.num_all++;
  827.          el.id='element-'+this.num_all;
  828.          
  829.          if (inel)
  830.             inel.appendChild(el);
  831.          else
  832.             document.body.appendChild(el);
  833.          
  834.          return el;
  835.       }
  836.      
  837.       //--------------------------add Paragraph;
  838.      
  839.       this.addPar = function (inel, intext) {
  840.          
  841.          var el = document.createElement('P');
  842.          var tx = document.createTextNode(intext);
  843.          
  844.          el.appendChild(tx);
  845.          
  846.          this.num_all++;
  847.          el.id='paragraph-'+this.num_all;
  848.          
  849.          inel.appendChild(el);
  850.        
  851.          return el
  852.       }
  853.      
  854.       //----------------------------create Info block
  855.      
  856.       this.crInfoBlock = function (caption_text, info_els, suffix) {
  857.      
  858.          this.num_infoblocks++;
  859.          
  860.          var el = this.crEl('info_service');
  861.          el.id='info-'+this.num_infoblocks;
  862.          
  863.          var capEl= this.crEl('info_service_caption', el);
  864.          capEl.id='infocaption-'+this.num_infoblocks;
  865.          
  866.          this.addPar(capEl, caption_text);
  867.          
  868.          for (var i=0; i<info_els.length; i++) {
  869.          
  870.             var subel=this.crEl('info_service_block',el);
  871.            
  872.             subel.info_caption=info_els[i].info_caption;
  873.             subel.id=info_els[i].info_id + (suffix || '');
  874.            
  875.             this.put_info(subel.id);
  876.            
  877.          }
  878.          this.arrange_info_blocks();
  879.          
  880.          return el;
  881.       };
  882.      
  883.      
  884.       //-----------------put info into specific info element
  885.      
  886.       this.put_info = function (element_id, intext)  {
  887.      
  888.          var el=document.getElementById(element_id);
  889.          
  890.          if (!el) return;
  891.          
  892.          if (!intext)
  893.             intext='';
  894.          
  895.          if (!el.hasChildNodes())
  896.             var inpar = this.addPar(el);
  897.          else
  898.             var inpar = el.firstChild;
  899.            
  900.           inpar.innerHTML='<b>'+el.info_caption+'</b>'+intext;
  901.              
  902.       };
  903.      
  904.       //-----------------------------arrange info blocks
  905.       this.arrange_info_blocks = function () {
  906.      
  907.          var els = document.body.childNodes;
  908.          
  909.          var cw=0;
  910.          var ch=0;
  911.          
  912.          for (var i=0; i<els.length; i++) {
  913.          
  914.          
  915.             if ((els[i].nodeName.toUpperCase()=='DIV') &&
  916.             (els[i].className.indexOf('info_service')!=-1)) {
  917.            
  918.                if (cw+els[i].offsetWidth>=screen.availWidth) {
  919.                   cw=0;
  920.                   ch+=els[i].offsetHeight+3;
  921.                }   
  922.              
  923.                els[i].style.left = cw+'px';
  924.                els[i].style.top = ch +'px';
  925.            
  926.                cw+=els[i].offsetWidth+3;
  927.            
  928.             }
  929.            
  930.          }
  931.       }
  932.      
  933.       //------------------------------setup event handler
  934.       this.add_event = function (el, ev, handler) {
  935.        
  936.        
  937.           if (this.event_attachment_type!='listener') {
  938.          
  939.              var ev4 = eval('on'+ev);
  940.              el.ev4 = handler;
  941.              return;
  942.           }
  943.  
  944.           try {
  945.              el.addEventListener(ev, handler, false);
  946.           } catch (e) {
  947.              el.attachEvent('on'+ev, handler);
  948.           }
  949.       };
  950.      
  951.       //------------------------------remove event handler
  952.       this.remove_event = function(el,ev, handler) {
  953.      
  954.          if (this.event_attachment_type!='listener') {
  955.             var ev4 = eval('on'+ev);
  956.             el.ev4 = null;
  957.             return;
  958.          }
  959.      
  960.          try {
  961.             el.removeEventListener(ev,handler, false);         
  962.          } catch (e) {
  963.             el.detachEvent('on'+ev,handler);
  964.          }
  965.       };
  966.      
  967.       //--------------------------prevent default behavior
  968.       this.cancel_event = function (ev) {
  969.          try {
  970.             ev.preventDefault();
  971.          } catch(e) {
  972.             ev.returnValue=false;
  973.          }
  974.       };
  975.       //------------------------stop event propagation
  976.       this.stop_event = function(ev) {
  977.          try {
  978.             ev.stopPropagation();
  979.          } catch(e) {
  980.             ev.cancelBubble=true;
  981.          }
  982.       };
  983.      
  984.       //--------------------get element rectangle
  985.      
  986.       this.getRect = function(el, newCoords) {
  987.        
  988.       return { left:    newCoords[0] || el.offsetLeft,
  989.                top:     newCoords[1] || el.offsetTop,
  990.                right:  (newCoords[0] || el.offsetLeft) + el.offsetWidth,
  991.                bottom: (newCoords[1] || el.offsetTop) + el.offsetHeight}
  992.       };
  993.      
  994.       //---------------------check if el coords fit screen
  995.      
  996.       this.checkRect = function(el, newCoords) {
  997.          
  998.          
  999.          var rect=this.getRect(el, newCoords);
  1000.          
  1001.          if ((rect.top<0) || (rect.left<0) ||
  1002.             (rect.right > screen.availWidth-20) || (rect.bottom > screen.availHeight-50))
  1003.             return false
  1004.          else
  1005.             return true;
  1006.      
  1007.       }
  1008.      
  1009.    }
  1010.    
  1011.    //-----------------------------------------------------------------
  1012.    //                  drag and drop handler
  1013.    //-----------------------------------------------------------------
  1014.    this.DDrop = {
  1015.    
  1016.          //------------------------
  1017.          attach: function (el) {
  1018.  
  1019.             //_self.helper.event_attachment_type='base';
  1020.            
  1021.             _self.helper.add_event(el,'mousedown', this.mouse_down);
  1022.             _self.helper.add_event(el,'mousemove',this.mouse_move);
  1023.             _self.helper.add_event(el,'mouseup',this.mouse_up);
  1024.             _self.helper.add_event(el,'mouseover', this.mouse_over);
  1025.             _self.helper.add_event(el,'mouseout', this.mouse_out);
  1026.            
  1027.          },
  1028.          //------------------------
  1029.          detach: function (el) {
  1030.          
  1031.             //_self.helper.event_attachment_type='base';
  1032.            
  1033.             _self.helper.remove_event(el, 'mousedown', this.mouse_down);
  1034.             _self.helper.remove_event(el,'mousemove',this.mouse_move);
  1035.             _self.helper.remove_event(el,'mouseup',this.mouse_up);
  1036.             _self.helper.remove_event(el,'mouseover',this.mouse_over);
  1037.             _self.helper.remove_event(el,'mouseout', this.mouse_out);
  1038.  
  1039.            
  1040.          },
  1041.          //------------------------
  1042.          
  1043.          //--------------------------mouse down event
  1044.          mouse_down: function(e) {
  1045.          
  1046.             e = e || event;
  1047.             //var target = e.target || e.srcElement;
  1048.  
  1049.             var target=this;
  1050.            
  1051.             _self.helper.show_event_info(e, this, 'mouse_down', this.suffix);
  1052.            
  1053.             target.Xdiff = e.clientX - target.offsetLeft;
  1054.             target.Ydiff = e.clientY - target.offsetTop;
  1055.            
  1056.             target.pressed=true;
  1057.            
  1058.             target.style['z-index']=1000;
  1059.            
  1060.             _self.helper.cancel_event(e);
  1061.          },
  1062.          
  1063.          //-------------------------mouse move event
  1064.          mouse_move:function(e) {
  1065.          
  1066.             e = e || event;
  1067.            
  1068.             //var target = e.target || e.srcElement;
  1069.            
  1070.             var target = this;
  1071.            
  1072.             //_self.helper.show_event_info(e, this, 'mouse_move', this.suffix);
  1073.            
  1074.             //----------------show position of target
  1075.            
  1076.             _self.helper.show_coords_info (target);
  1077.            
  1078.             var x = e.clientX - target.Xdiff;
  1079.             var y = e.clientY - target.Ydiff;
  1080.            
  1081.             if ((target.pressed) && (_self.helper.checkRect(target,[x,y]))) {
  1082.              
  1083.                target.style.left= x +'px';
  1084.                target.style.top= y +'px';
  1085.             }
  1086.            
  1087.             target.style.cursor='pointer';
  1088.            
  1089.            
  1090.          },
  1091.          
  1092.          //-------------------------mouse up event
  1093.          mouse_up:function(e) {
  1094.          
  1095.             e = e || event;
  1096.            
  1097.             //var target = e.target || e.srcElement;
  1098.             var target=this;
  1099.            
  1100.             _self.helper.show_event_info(e, this, 'mouse_up', this.suffix);
  1101.            
  1102.             if (target.pressed)
  1103.                target.pressed=false;
  1104.                
  1105.        
  1106.          },
  1107.          
  1108.          //-------------------------mouse over
  1109.          mouse_over: function(e) {
  1110.          
  1111.             e = e || event;
  1112.             //var target = e.target || e.srcElement;
  1113.             var target=this;
  1114.            
  1115.             _self.helper.show_event_info(e, this, 'mouse_over', this.suffix);
  1116.                
  1117.             target.style.cursor='pointer';
  1118.          },
  1119.          
  1120.          //-----------------------------mouse out event
  1121.          mouse_out: function(e) {
  1122.          
  1123.             e = e || event;
  1124.             //var target = e.target || e.srcElement;
  1125.             var target = this;
  1126.            
  1127.             _self.helper.show_event_info(e, this, 'mouse_out', this.suffix);
  1128.            
  1129.             target.style.cursor='default';
  1130.            
  1131.             if (target.pressed)
  1132.                target.pressed=false;
  1133.                
  1134.            
  1135.          }
  1136.  
  1137.       }
  1138.    
  1139.    
  1140.    
  1141.    //--------------------------------
  1142.    //--------------------------------
  1143.    this.init();
  1144.  
  1145.  
  1146. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!