index-new.html | searchcode

/www/reference/examples/index-new.html

http://github.com/JxLib/JxLib
HTML | 301 lines | 282 code | 19 blank | 0 comment | 0 complexity | 7fc086da6545db363ea5747152916908 MD5 | raw file
Possible License(s): GPL-2.0

<!DOCTYPE html>
<html>
  <head>
    <title>JX Example</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="lib/mootools-core.js"></script>
    <script type="text/javascript" src="lib/mootools-more.js"></script>
    <script type="text/javascript" src="lib/jxlib.standalone.uncompressed.js"></script>

    <script src="js/locale.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/tests.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      window.addEvent('load', function() {

        //Change this to toggle debug mode.
        Jx.debug = true;
        console.log(Jx.debug);
        
        var mainSplitter = new Jx.Splitter('splitMain', {
          containerOptions: [{resizeWithWindow: true,width: 200},{resizeWithWindow: true}]
        });
        
        mainSplitter.elements[0].set('id','splitMainLeft');

        var mainTabs = new Jx.TabBox({
          parent: mainSplitter.elements[1]
        }).add(new Jx.Tab({
            label           : {set:'Examples',key:'navigation',value:'About'},
            // adding custom class 'tabContentExample' to add/remove the background grid on every tab opened
            contentTemplate : '<div class="tabContent tabContentExample"></div>',
            contentURL      : 'about.html'
        }));

        // open last open example from cookie ?
        var lastExample = Cookie.read('JxExamples.CurrentExample');
            lastExample = lastExample && lastExample.contains(",") ? lastExample.split(",") : false;
        if(lastExample) {
          /*
          var lastTab = new Jx.Tab({
                          label       : {set:'Examples',key:'navigation',value:lastExample[1]},
                          contentURL  : lastExample[0],
                          activeTabClass : 'tabContentActive tabContentActiveExamples',
                          close       : true,
                          // setting this to active slows down the page load a bit...
                          active      : false,
                          cacheContent: true,
                          loadOnDemand: true
                        });
          // event on content loaded to load the scripts
          lastTab.addEvents({
            'contentLoaded': function() {
              // COMMENT:
              // somehow the custom event is fired too soon so the examples don't find a tabContentActiveExamples class..
              this.content.fireEvent('loadAjax');
            },
            'down': function() {
              Cookie.write('JxExamples.CurrentExample', [this.options.contentURL,this.options.label.value]);
            },
            'close': function() {
              if(this.tabSet.tabs.length == 1) {
                Cookie.write('JxExamples.CurrentExample', false);
              }
            }
          });
          mainTabs.add(lastTab);
          */
        }

        // custom function to find out if a tab is already loaded
        mainTabs.hasTabByURL = function(url) {
          var t = this.tabSet.tabs,
              i = t.length;
          while(i--) {
            if(t[i].options.contentURL == url) {
              return t[i];
            }
          }
          return false;
        }

        var mainTree = new Jx.Tree({
          parent: mainSplitter.elements[0],
          select: true,
          onClick: function(el) {
            el = $jx(el);
            if (el instanceof Jx.Tree.Item) {
              openTab(el);
            }
          }});
        var items = {
            'Jx-Examples': [
                {'About':'about.html'},
                {'Page-Layout' : [
                    {'Layout' :'layout.html'},
                    {'Splitter' : 'splitter.html'},
                    {'Splitter-Integrated' : 'splitter_advanced.html'},
                    {'Container-Managers': [
                      {'Container' : 'container.html'},
                      {'Column-layout': 'columns.html'}
                    ]}
                ]},
                {'Panels-and-Dialogs' : [
                    {'Panel' :'panel.html'},
                    {'Panel-Set' : 'panelset.html'},
                    {'Panels-Integrated' : 'panel_advanced.html'},
                    {'Dialog' : 'dialog.html'},
                    {'Dialogs-Integrated' : 'dialog_advanced.html'}
                    
                    //{'File-Upload-Panel' : 'file_upload.html' }
                ]},
                {'Lists' : [
                    {'Grid' : 'grid.html'},
                    //{'Paginated-Grid' : 'paging-grid.html'},
                    {'Grid-Inline-Editor' : 'grid_editor.html'},
                    {'Tree' : 'tree.html'},
                    {'List-View' : 'list.html'}
                ]},
                {'Bars-and-Buttons' : [
                    {'Toolbar' :'toolbar.html'},
                    {'Buttons' : [
                        {'Basic' : 'button.html'},
                        {'Flyouts' : 'flyout.html'},
                        {'Flyouts-Integrated' : 'flyout_advanced.html'},
                        {'Multi' : 'multi.html'},
                        {'Color' : 'color.html'}
                    ]},
                    {'Tabs':[
                        {'Tabs' : 'tab.html'},
                        {'Tab-Set' : 'tab_set.html'},
                        {'Tabs-Integrated' : 'tab_box_advanced.html'}
                    ]},
                    {'Menus': [
                        {'Menu-button' : 'menu.html'},
                        {'Menu-bar' : 'menu_bar.html'},
                        {'Context-Menu' : 'menu_context.html'}
                    ]}
                ]},
                {'Extras' : [
                    {'Forms' : 'forms.html'},
                    {'Notification' : 'notification.html'},
                    {'Custom-Scrollbars' : 'custom_scrollbars.html'},
                    {'Progress-Bar' : 'progressbar.html'},
                    {'Slider' : 'slider.html'},
                    {'Editor' : 'editor.html'} 
                ]},
                {'Adaptors' : [
                    {'Tree-adaptor': 'tree_adaptors.html'},
                    {'Combo-adaptor': 'adaptor_combo.html' }
                ]}
            ]
        };

        var openExamples = [];
        
        function openTab(item) {
          var i = item.options.label.value,
              v = item.options.contentURL;
          item.setBusy(true);

          var tabExists = mainTabs.hasTabByURL(v);

          if(!tabExists) {
            openExamples.push(v);
            var newTab = new Jx.Tab({
                            label           : {set:'Examples',key:'navigation',value:i},
                            contentURL      : v,
                            activeTabClass  : 'tabContentActive tabContentActiveExamples',
                            // adding custom class 'tabContentExample' to add/remove the background grid on every tab opened
                            contentTemplate : '<div class="tabContent tabContentExample"></div>',
                            close           : true,
                            active          : true,
                            cacheContent    : true
                          });
            // event on content loaded to load the scripts
            newTab.addEvents({
              'contentLoaded': function() {
                newTab.content.fireEvent('loadAjax');
                item.setBusy(false);
                var tagsTmp   = this.req.response.text.getTags('script', true),
                    tags      = [],
                    headlines = newTab.content.getElements('h2');

                tagsTmp.each(function(t) {
                  // COMMENT: any other better 'regex' test for the script ? :)
                  if(t.test('id=')) {
                    t = t.split("\n");
                    t.pop();    // clear first script line with id
                    t.shift();  // clear last script line
                    tags.push(t.join("\n"));
                  }
                });
                beautifyDemoScripts(headlines, tags);
                makeLinksForApi(newTab.content.getElements('a'));
              },
              // anything we can do when the content load fails? shouldn't happen on the examples page ;)
              'contentLoadFailed': function() {
                //item.setBusy(false);
              },
              // if a script error occurs, the waiting icon won't stop, here we stop it when the tab is closed
              'close': function() {
                item.setBusy(false)
                if(this.tabSet.tabs.length == 1) {
                  Cookie.write('JxExamples.CurrentExample', false);
                }
              },
              'down': function() {
                Cookie.write('JxExamples.CurrentExample', [v,i]);
              }
            });
            mainTabs.tabSet.addEvents({
              'tabChange':function(tabSet, tab) {
                // select the element on the tree to the left when the tab is activated? :)
                //window.console ? console.log(mainTree.findChild([tab.options.label])) : false;
              }
            });
            mainTabs.add(newTab);
            log(i + " loaded");
          }else{
            tabExists.clicked();
            item.setBusy(false);
          }
          Cookie.write('JxExamples.CurrentExample', [v,i]);
        }
        var makeTreeItem = function(o, tree) {
            for (var i in o) {
                var v = o[i];
                if (v instanceof Array) {
                    var folder = new Jx.Tree.Folder({label: {set:'Examples',key:'navigation',value:i}, open: true});
                    tree.add(folder);
                    for (var j=0; j<v.length; j++) {
                        makeTreeItem(v[j], folder);
                    }
                    
                } else {
                    var item = new Jx.Tree.Item({
                        label: {set:'Examples',key:'navigation',value:i},
                        contentURL : v,
                        active : lastExample[0] == v ? true : false
                    });
                    item.options.contextMenu = new Jx.Menu.Context(item.domA, {reference:item}).add(
                      new Jx.Menu.Item({
                        label : {set:'Examples',key:'navigation',value:'new-window'},
                        onClick : function(ev) {
                          window.open(item.options.contentURL, item.getText(item.options.label));
                        }
                      })
                    );
                    tree.add(item);
                }
            }
        };
        makeTreeItem(items, mainTree);


        //console.log(mainTree);
        /*
        var mainContextMenu = new Jx.Menu.Context(mainTree);
        mainContextMenu.add(
          new Jx.Menu.Item({
            label : {set:'Examples',key:'navigation',value:'new-window'},
            onClick : function(a,b,c) {
              console.log(a,b,c)
            }
          })
        );
        */

        if (Browser.ie && Browser.ie4) {
            new Asset.css('../../lib/themes/crispin/ie6.css', { rel: 'stylesheet' });
        }
        if (Browser.ie && Browser.ie5) {
            new Asset.css('../../lib/themes/crispin/ie7.css', { rel: 'stylesheet' });
        }
      });
    </script>
    <style type="text/css">
      #splitMain { height: 600px !important; }
      #splitMainLeft { overflow: auto; }
    </style>
  </head>
  <body>
    <h1>JxLib Examples</h1>
    <br />
    <div id="splitMain" class="splitterBox" ></div>
    <div id="failure" style="display:none">
      <br />
      <h2>Failure :(</h2>
    </div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." :
"http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost +
"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-124914-7");
pageTracker._trackPageview();
</script>
  </body>
</html>