YUI 2in3 Modal Panel Example

Suppose you’re using YUI 3.2 and you’d like a modal dialog.  YUI 3 Overlay provides an easy way to position an element above the others, but it doesn’t provide modality.  The Overlay Extras gallery module sounds perfect, but it seems to work best with YUI 3.1.0.

YUI 2 has exactly what we’re looking for in its Panel widget.  Fortunately, the YUI 2in3 project makes the Panel available in YUI 3.2.  

The sample code below demonstrates usage, and you can see a demo on
demo-deluxe.heroku.com/static/1/index.html.

    <body class="yui-skin-sam">
            
        <p><button id="show">show modal</button></p>
        
        <!-- modal dialog content markup -->
        <div id="content" style="visibility:hidden">
            <div class="hd">Header</div>
            <div class="bd">
                Body
                <p><button id="hide">hide modal</button></p>
            </div>
            <div class="ft">Footer</div>
        </div>
        
        <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
        <script>
        YUI().use('yui2-container', 'yui2-dragdrop', 'event', function(Y) {

            var YAHOO = Y.YUI2;
            
            var modal = new YAHOO.widget.Panel("content", {
                width: "240px",
                fixedcenter: true,
                close: true,
                draggable: true,
                zindex: 4,
                modal: true,
                visible: false
            });
            modal.render(document.body);

            Y.one('#show').on('click', function() {
                modal.show();
            });
            Y.one('#hide').on('click', function() {
                modal.hide();
            });

        });
        </script>
        
    </body>

 

Dav Glass’ YQL module for YUI 3 is awesome

sample app:


<ul>
 <li><img/></li>
</ul>
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script type="text/javascript" src="http://github.com/davglass/yui-yql/raw/master/yql-min.js"></script>
<script>
//ref: http://davglass.github.com/yui-yql/
YUI().use('yql', 'node', function(Y) {
 var q1 = new Y.yql('select source from flickr.photos.sizes where photo_id in (select id from flickr.photos.search where text="panda" and safe_search="true")');
 q1.on('query', function(r) {
     var li = Y.get('li');
     for (var i = 0; i < r.results.size.length; i++) {
         if (-1 !== r.results.size[i].source.indexOf('_s')) {
             var clone = li.cloneNode(true);
             clone.query('img').set('src', r.results.size[i].source);
             Y.get('ul').append(clone);
         }
     }

 });

});
</script>

Update 12/13/10 YUI 3 now supports YQL natively: http://developer.yahoo.com/yui/3/yql/

notes from YUIConf 2009: “Building YUI 3 Custom Modules”, by Caridy Patino

what is a module in yui 3?
– modules are not plugins, but there is a plugin module
– module names are passed into a sandbox w/ the ‘use’ method
– prefer YUI().use instead of var Y = new YUI(); Y.use …
– you can have multiple use() calls to defer loading
– community modules vs basic yui core team modules

custom modules
– registration
— by seed YUI().use
— seed will import
— by inclusion
— manually add script include and then YUI.use
— YUI(config)
— most performant
— this takes advantage of onload handling
— reduces number of http requests req’d in ‘by inclusion’
— organization
—- use YUI_config global var to manage registration
—- you can have multiple config options

building custom modules
– YUI.add(‘foo’, fn(Y){mod code}, version, requirement list);
– naming convention: utilities are all lowercase, classes are camelcase w/ uppercase leading char
– plugins extend host modules
– stack: utilities –> classes –> plugins –> mashups

how to use and build plugins
– plugins allow us to extend an existing class at runtime
– the def of a plugin looks much like that for a module class
– instead of extending y.base, we extend y.plugin.base

mashups and legacy code
– using multiple modules, including external dependencies, enhancing dom, defining event listeners
– use case: using a pre-existing yui2-based object in yui3
– check out zakas’ talkon scalable app arch
– cool: organize app as module repo
– conclusions
— define apps at a granular level
— modular apps are easier to test
— share code thru yui3 gallery
— use yui custom modules to integrate pre-existing code

q/a
– differences btwn yui2 and yui3 lazy loading?
— yui3 will load everything as a single item, if module requirements are defined using config option
— yui3 will load items in the order they are specified
– reusing modules across multiple sandbox
— yes, if defined as such in config

github/caridy
twitter/caridy
caridy.name

notes: Bayjax Meetup (7/27) @ Yahoo! Sunnyvale: Jon Leblanc on YQL + YUI

 

Jon Leblanc talking about YQL + YUI
Jon Leblanc talking about YQL + YUI

 

 

Meetup: http://www.meetup.com/BayJax/calendar/10852424/

jonleblanc on using yui w/ yql
– “select * from internet” gets a laugh
– the console (developer.yahoo.com/yql/console) is an easy way to get started w/ yql
– there are ~80 tables of y! data
– 253 community tables on github.com/yql
– yql execute
– yql insert|update|delete
– christian heilmann’s “geomaker” tool scrapes a url, extracts locations, and plots them on a map
– github.com/jsleblanc/yql-utilities
— js-yql-display
— yql can return jsonp and jsonpx
— yql plays well w/ yui
– questions
— rate limiting
— 1000/hr/ip w/ oauth
— w/ oauth 100k/day/ip
— caching?
— defaults to 5 min
— build your own table or append a var to url to break the cache

jonleblanc on using yui w/ yql

– the console (developer.yahoo.com/yql/console) is an easy way to get started w/ yql

– there are ~80 tables of y! data

– 253 community tables on github.com/yql

– yql execute

– yql insert|update|delete

– christian heilmann’s “geomaker” tool scrapes a url, extracts locations, and plots them on a map

– github.com/jcleblanc/yql-utilities

— js-yql-display

— yql can return jsonp and jsonpx

— yql plays well w/ yui

– links are on http://speakerrate.com/jcleblanc

– questions

— rate limiting

— 1000/hr/ip w/ oauth

— w/ oauth 100k/day/ip

— caching?

— defaults to 5 min

— build your own table or append a var to url to break the cache