oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upgraded yui to 2.2.2 and yui-ext to 1.0.1a

Browse source
This commit is contained in:
JT Smith 2007-07-05 04:23:55 +00:00
parent 4d9af2c691
commit 547ced6500
1992 changed files with 645731 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
www/extras/yui-ext/examples/tree/Thumbs.db Normal file
View file

Binary file not shown.

BIN
www/extras/yui-ext/examples/tree/album.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

BIN
www/extras/yui-ext/examples/tree/center-bg.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 811 B

1
www/extras/yui-ext/examples/tree/dep-tree.json Normal file
View file

File diff suppressed because one or more lines are too long

52
www/extras/yui-ext/examples/tree/dependency.css Normal file
View file

@ -0,0 +1,52 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
.x-tree-node img.folder, .x-tree-node-collapsed img.folder{
background-image:url(../../resources/images/default/tree/folder.gif);
}
.x-tree-node-expanded img.folder {
background-image:url(../../resources/images/default/tree/folder-open.gif);
}
.x-tree-node .croot{
background:#c3daf9;
}
.x-tree-node div.cmp{
background:#eee url(images/cmp-bg.gif) repeat-x;
margin-top:1px;
border-top:1px solid #ddd;
border-bottom:1px solid #ccc;
padding-top:2px;
padding-bottom:1px;
}
.add-cmp .x-btn-text {
background-image:url(../shared/icons/fam/plugin_add.gif);
}
.add-opt .x-btn-text {
background-image:url(../shared/icons/fam/add.gif);
}
.remove .x-btn-text, .remove-mi .x-menu-item-icon {
background-image:url(../shared/icons/fam/delete.gif);
}
.save .x-btn-text {
background-image:url(../shared/icons/save.gif);
}
.expand-all .x-menu-item-icon {
background-image:url(../shared/icons/arrow-down.gif);
}
.collapse-all .x-menu-item-icon {
background-image:url(../shared/icons/arrow-up.gif);
}
.x-tree-node img.cmp, .menu-cmp .x-menu-item-icon{
background-image:url(../shared/icons/fam/plugin.gif);
}

33
www/extras/yui-ext/examples/tree/dependency.html Normal file
View file

@ -0,0 +1,33 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext Dependency Builder</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="dependency.css" />
<script type="text/javascript" src="dependency.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Ext Dependency Builder</h1>
<p>This is a piece of the application we use to build the Ext dependency tree.<br />
Key features it demonstrates:<br/>
* Restrictive drag and drop of nodes from tree to tree<br/>
* Restrictive reordering of nodes<br/>
* Loading and saving to/from different structures<br/>
* Dynamic tree context menu<br/>
* Inline editing of tree nodes<br/>
* Custom tree styles with CSS
</p>
<p>The js is not minified so it is readable. See <a href="dependency.js">dependency.js</a>.</p>
<div id="main-ct" style="width:700px;height:500px;"></div>
</body>
</html>

436
www/extras/yui-ext/examples/tree/dependency.js vendored Normal file
View file

@ -0,0 +1,436 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var xt = Ext.tree;
// seeds for the new node suffix
var cseed = 0, oseed = 0;
// turn on quick tips
Ext.QuickTips.init();
var cview = Ext.DomHelper.append('main-ct',
{cn:[{id:'main-tb'},{id:'cbody'}]}
);
// create the primary toolbar
var tb = new Ext.Toolbar('main-tb');
tb.add({
id:'save',
text:'Save',
disabled:true,
handler:save,
cls:'x-btn-text-icon save',
tooltip:'Saves all components to the server'
},'-', {
id:'add',
text:'Component',
handler:addComponent,
cls:'x-btn-text-icon add-cmp',
tooltip:'Add a new Component to the dependency builder'
}, {
id:'option',
text:'Option',
disabled:true,
handler:addOption,
cls:'x-btn-text-icon add-opt',
tooltip:'Add a new optional dependency to the selected component'
},'-',{
id:'remove',
text:'Remove',
disabled:true,
handler:removeNode,
cls:'x-btn-text-icon remove',
tooltip:'Remove the selected item'
});
// for enabling and disabling
var btns = tb.items.map;
// create our layout
var layout = new Ext.BorderLayout('main-ct', {
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
margins:{left:5,right:0,bottom:5,top:5}
},
center: {
title:'Components',
margins:{left:0,right:5,bottom:5,top:5}
}
}, 'main-ct');
layout.batchAdd({
west: {
id: 'source-files',
autoCreate:true,
title:'Ext Source Files',
autoScroll:true,
fitToFrame:true
},
center : {
el: cview,
autoScroll:true,
fitToFrame:true,
toolbar: tb,
resizeEl:'cbody'
}
});
// this is the source code tree
var stree = new xt.TreePanel('source-files', {
animate:true,
loader: new xt.TreeLoader({dataUrl:'dependency.php'}),
enableDrag:true,
containerScroll: true
});
new xt.TreeSorter(stree, {folderSort:true});
var sroot = new xt.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source'
});
stree.setRootNode(sroot);
stree.render();
sroot.expand(false, false);
// the component tree
var ctree = new xt.TreePanel('cbody', {
animate:true,
enableDD:true,
containerScroll: true,
lines:false,
rootVisible:false,
loader: new Ext.tree.TreeLoader()
});
ctree.el.addKeyListener(Ext.EventObject.DELETE, removeNode);
var croot = new xt.AsyncTreeNode({
allowDrag:false,
allowDrop:true,
id:'croot',
text:'Packages and Components',
cls:'croot',
loader:new Ext.tree.TreeLoader({
dataUrl:'dep-tree.json',
createNode: readNode
})
});
ctree.setRootNode(croot);
ctree.render();
croot.expand();
// some functions to determine whether is not the drop is allowed
function hasNode(t, n){
return (t.attributes.type == 'fileCt' && t.findChild('id', n.id)) ||
(t.leaf === true && t.parentNode.findChild('id', n.id));
};
function isSourceCopy(e, n){
var a = e.target.attributes;
return n.getOwnerTree() == stree && !hasNode(e.target, n) &&
((e.point == 'append' && a.type == 'fileCt') || a.leaf === true);
};
function isReorder(e, n){
return n.parentNode == e.target.parentNode && e.point != 'append';
};
// handle drag over and drag drop
ctree.on('nodedragover', function(e){
var n = e.dropNode;
return isSourceCopy(e, n) || isReorder(e, n);
});
ctree.on('beforenodedrop', function(e){
var n = e.dropNode;
// copy node from source tree
if(isSourceCopy(e, n)){
var copy = new xt.TreeNode(
Ext.apply({allowDelete:true,expanded:true}, n.attributes)
);
copy.loader = undefined;
if(e.target.attributes.options){
e.target = createOption(e.target, copy.text);
//return false;
}
e.dropNode = copy;
return true;
}
return isReorder(e, n);
});
ctree.on('contextmenu', prepareCtx);
// track whether save is allowed
ctree.on('append', trackSave);
ctree.on('remove', trackSave);
ctree.el.swallowEvent('contextmenu', true);
ctree.el.on('keypress', function(e){
if(e.isNavKeyPress()){
e.stopEvent();
}
});
// when the tree selection changes, enable/disable the toolbar buttons
var sm = ctree.getSelectionModel();
sm.on('selectionchange', function(){
var n = sm.getSelectedNode();
if(!n){
btns.remove.disable();
btns.option.disable();
return;
}
var a = n.attributes;
btns.remove.setDisabled(!a.allowDelete);
btns.option.setDisabled(!a.cmpId);
});
// create the editor for the component tree
var ge = new xt.TreeEditor(ctree, {
allowBlank:false,
blankText:'A name is required',
selectOnFocus:true
});
ge.on('beforestartedit', function(){
if(!ge.editNode.attributes.allowEdit){
return false;
}
});
// add component handler
function addComponent(){
var id = guid('c-');
var text = 'Component '+(++cseed);
var node = createComponent(id, text);
node.expand(false, false);
node.select();
node.lastChild.ensureVisible();
ge.triggerEdit(node);
}
function createComponent(id, text, cfiles, cdep, coptions){
var node = new xt.TreeNode({
text: text,
iconCls:'cmp',
cls:'cmp',
type:'cmp',
id: id,
cmpId:id,
allowDelete:true,
allowEdit:true
});
croot.appendChild(node);
var files = new xt.AsyncTreeNode({
text: 'Files',
allowDrag:false,
allowDrop:true,
iconCls:'folder',
type:'fileCt',
cmpId:id,
allowDelete:false,
children:cfiles||[],
expanded:true
});
var dep = new xt.AsyncTreeNode({
text: 'Dependencies',
allowDrag:false,
allowDrop:true,
iconCls:'folder',
type:'fileCt',
cmpId:id,
allowDelete:false,
children:cdep||[],
expanded:true,
allowCopy:true
});
var options = new xt.AsyncTreeNode({
text: 'Optional Dependencies',
allowDrag:false,
allowDrop:true,
iconCls:'folder',
type:'fileCt',
options:true,
cmpId:id,
allowDelete:false,
children:coptions||[],
expanded:true,
allowCopy:true
});
node.appendChild(files);
node.appendChild(dep);
node.appendChild(options);
return node;
}
// remove handler
function removeNode(){
var n = sm.getSelectedNode();
if(n && n.attributes.allowDelete){
ctree.getSelectionModel().selectPrevious();
n.parentNode.removeChild(n);
}
}
// add option handler
function addOption(){
var n = sm.getSelectedNode();
if(n){
createOption(n, 'Option'+(++oseed));
node.select();
ge.triggerEdit(node);
}
}
function createOption(n, text){
var cnode = ctree.getNodeById(n.attributes.cmpId);
var node = new xt.TreeNode({
text: text,
cmpId:cnode.id,
iconCls:'folder',
type:'fileCt',
allowDelete:true,
allowEdit:true,
id:guid('o-')
});
cnode.childNodes[2].appendChild(node);
cnode.childNodes[2].expand(false, false);
return node;
}
// semi unique ids across edits
function guid(prefix){
return prefix+(new Date().getTime());
}
function trackSave(){
btns.save.setDisabled(!croot.hasChildNodes());
}
function storeChildren(cmp, n, name){
if(n.childrenRendered){
cmp[name] = [];
n.eachChild(function(f){
cmp[name].push(f.attributes);
});
}else{
cmp[name] = n.attributes.children || [];
}
}
// save to the server in a format usable in PHP
function save(){
var ch = [];
croot.eachChild(function(c){
var cmp = {
text:c.text,
id: c.id,
options:[]
};
storeChildren(cmp, c.childNodes[0], 'files');
storeChildren(cmp, c.childNodes[1], 'dep');
var onode = c.childNodes[2];
if(!onode.childrenRendered){
cmp.options = onode.attributes.children || [];
}else{
onode.eachChild(function(o){
var opt = Ext.apply({}, o.attributes);
storeChildren(opt, o, 'children');
cmp.options.push(opt);
});
}
ch.push(cmp);
});
layout.el.mask('Sending data to server...', 'x-mask-loading');
var hide = layout.el.unmask.createDelegate(layout.el);
Ext.lib.Ajax.request(
'POST',
'save-dep.php',
{success:hide,failure:hide},
'data='+encodeURIComponent(Ext.encode(ch))
);
}
function readNode(o){
createComponent(o.id, o.text, o.files, o.dep, o.options);
}
// context menus
var ctxMenu = new Ext.menu.Menu({
id:'copyCtx',
items: [{
id:'expand',
handler:expandAll,
cls:'expand-all',
text:'Expand All'
},{
id:'collapse',
handler:collapseAll,
cls:'collapse-all',
text:'Collapse All'
},'-',{
id:'remove',
handler:removeNode,
cls:'remove-mi',
text: 'Remove Item'
}]
});
function prepareCtx(node, e){
node.select();
ctxMenu.items.get('remove')[node.attributes.allowDelete ? 'enable' : 'disable']();
ctxMenu.showAt(e.getXY());
}
function collapseAll(){
ctxMenu.hide();
setTimeout(function(){
croot.eachChild(function(n){
n.collapse(false, false);
});
}, 10);
}
function expandAll(){
ctxMenu.hide();
setTimeout(function(){
croot.eachChild(function(n){
n.expand(false, false);
});
}, 10);
}
});

46
www/extras/yui-ext/examples/tree/dependency.php Normal file
View file

@ -0,0 +1,46 @@
<?
// from php manual page
function formatBytes($val, $digits = 3, $mode = "SI", $bB = "B"){ //$mode == "SI"|"IEC", $bB == "b"|"B"
$si = array("", "K", "M", "G", "T", "P", "E", "Z", "Y");
$iec = array("", "Ki", "Mi", "Gi", "Ti", "Pi", "Ei", "Zi", "Yi");
switch(strtoupper($mode)) {
case "SI" : $factor = 1000; $symbols = $si; break;
case "IEC" : $factor = 1024; $symbols = $iec; break;
default : $factor = 1000; $symbols = $si; break;
}
switch($bB) {
case "b" : $val *= 8; break;
default : $bB = "B"; break;
}
for($i=0;$i<count($symbols)-1 && $val>=$factor;$i++)
$val /= $factor;
$p = strpos($val, ".");
if($p !== false && $p > $digits) $val = round($val);
elseif($p !== false) $val = round($val, $digits-$p);
return round($val, $digits) . " " . $symbols[$i] . $bB;
}
$dir = $_REQUEST['lib'] == 'yui' ? '../../../' : '../../';
$node = $_REQUEST['node'];
if(strpos($node, '..') !== false){
die('Nice try buddy.');
}
$nodes = array();
$d = dir($dir.$node);
while($f = $d->read()){
if($f == '.' || $f == '..' || substr($f, 0, 1) == '.')continue;
$lastmod = date('M j, Y, g:i a',filemtime($dir.$node.'/'.$f));
if(is_dir($dir.$node.'/'.$f)){
$qtip = 'Type: Folder<br />Last Modified: '.$lastmod;
$nodes[] = array('text'=>$f, id=>$node.'/'.$f, qtip=>$qtip, iconCls=>'folder', allowDrag=>false);
}else{
$size = formatBytes(filesize($dir.$node.'/'.$f), 2);
$qtip = 'Type: JavaScript File<br />Last Modified: '.$lastmod.'<br />Size: '.$size;
$nodes[] = array('text'=>$f, id=>$node.'/'.$f, leaf=>true, qtip=>$qtip, qtipTitle=>$f, cls=>'file');
}
}
$d->close();
echo json_encode($nodes);
?>

43
www/extras/yui-ext/examples/tree/get-nodes.php Normal file
View file

@ -0,0 +1,43 @@
<?
// from php manual page
function formatBytes($val, $digits = 3, $mode = "SI", $bB = "B"){ //$mode == "SI"|"IEC", $bB == "b"|"B"
$si = array("", "K", "M", "G", "T", "P", "E", "Z", "Y");
$iec = array("", "Ki", "Mi", "Gi", "Ti", "Pi", "Ei", "Zi", "Yi");
switch(strtoupper($mode)) {
case "SI" : $factor = 1000; $symbols = $si; break;
case "IEC" : $factor = 1024; $symbols = $iec; break;
default : $factor = 1000; $symbols = $si; break;
}
switch($bB) {
case "b" : $val *= 8; break;
default : $bB = "B"; break;
}
for($i=0;$i<count($symbols)-1 && $val>=$factor;$i++)
$val /= $factor;
$p = strpos($val, ".");
if($p !== false && $p > $digits) $val = round($val);
elseif($p !== false) $val = round($val, $digits-$p);
return round($val, $digits) . " " . $symbols[$i] . $bB;
}
$dir = $_REQUEST['lib'] == 'yui' ? '../../../' : '../../';
$node = $_REQUEST['node'];
if(strpos($node, '..') !== false){
die('Nice try buddy.');
}
$nodes = array();
$d = dir($dir.$node);
while($f = $d->read()){
if($f == '.' || $f == '..' || substr($f, 0, 1) == '.')continue;
$lastmod = date('M j, Y, g:i a',filemtime($dir.$node.'/'.$f));
if(is_dir($dir.$node.'/'.$f)){
$qtip = 'Type: Folder<br />Last Modified: '.$lastmod;
$nodes[] = array('text'=>$f, id=>$node.'/'.$f/*, qtip=>$qtip*/, cls=>'folder');
}else{
$size = formatBytes(filesize($dir.$node.'/'.$f), 2);
$qtip = 'Type: JavaScript File<br />Last Modified: '.$lastmod.'<br />Size: '.$size;
$nodes[] = array('text'=>$f, id=>$node.'/'.$f, leaf=>true/*, qtip=>$qtip, qtipTitle=>$f */, cls=>'file');
}
}
$d->close();
echo json_encode($nodes);
?>

BIN
www/extras/yui-ext/examples/tree/images/cmp-bg.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 830 B

BIN
www/extras/yui-ext/examples/tree/images/thumbs/dance_fever.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/gangster_zack.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/kids_hug.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/kids_hug2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/sara_pink.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/sara_pumpkin.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/sara_smile.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/up_to_something.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/zack.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/zack_dress.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/zack_hat.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/zack_sink.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
www/extras/yui-ext/examples/tree/images/thumbs/zacks_grill.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

94
www/extras/yui-ext/examples/tree/organizer.css Normal file
View file

@ -0,0 +1,94 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
select{
font-size:11px;
}
.image-tip{
padding:4px;
height:98px;
white-space:nowrap;
}
.image-tip img {
margin-right:10px;
border:2px solid #083772;
}
.image-tip b{
color: #083772;
display: block;
margin-bottom: 4px;
}
.image-tip span{
display: block;
margin-bottom: 5px;
margin-left: 5px;
}
#images{
background: #fff url(center-bg.gif) repeat-x top left;
font: 11px Arial, Helvetica, sans-serif;
overflow: auto;
}
#images .thumb{
background: #dddddd;
padding:3px;
}
#images .thumb img{
border:1px solid white;
height: 60px;
width: 80px;
}
#images .thumb-wrap{
float: left;
margin: 4px;
margin-right: 0;
padding: 5px;
}
#images .thumb-wrap span{
display: block;
overflow: hidden;
text-align: center;
}
#images .x-view-selected .thumb{
background:#8db2e3;
}
#images .loading-indicator {
font-size:8pt;
background-image:url(../../resources/images/default/grid/loading.gif);
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
margin:10px;
}
.x-dd-drag-proxy .multi-proxy .thumb-img{
height: 20px;
width: 30px;
margin:1px;
}
.x-dd-drag-proxy .thumb-img{
height: 60px;
width: 80px;
}
.image-node .x-tree-node-icon{
margin-bottom:1px;
height:15px;
}
.album-node .x-tree-node-icon, .album-btn .x-btn-text{
background-image:url(album.gif);
}
#layout{
height:350px;
width:650px;
overflow:hidden;
position:relative;
}
#layout-rzwrap{
background-color:#deecfd;
}
#folders{
position:relative;
}

31
www/extras/yui-ext/examples/tree/organizer.html Normal file
View file

@ -0,0 +1,31 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Organizing Images into Albums</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="organizer.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
<link rel="stylesheet" type="text/css" href="organizer.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Organizing Images into Albums</h1>
<p>This example shows demonstrates how you can drop anything into the tree.</p>
<p>This example also shows how a customized DragZone can be
applied to a JsonView to get automatic lightweight drag and drop of asynchronously loaded data.</p>
<p>The js is not minified so it is readable. See <a href="organizer.js">organizer.js</a>. The multi image drag drop added a little complexity to the code, but hopefully it is still easy to follow.
<p>For simplicity, there is no validation on the names you enter in the tree node editor and you can drag the same picture
into an album as many times as you want.</p>
<p>Hold shift/control to select multiple images in the main images view. You can drag those images into the tree.</b>
<div id="layout"></div>
<br /><br /><br /><br /><br />
</body>
</html>

241
www/extras/yui-ext/examples/tree/organizer.js vendored Normal file
View file

@ -0,0 +1,241 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
var TreeTest = function(){
// shorthand
var Tree = Ext.tree;
var newIndex = 3;
return {
init : function(){
Ext.QuickTips.init();
var layout = new Ext.BorderLayout('layout', {
west: {
initialSize:200,
split:true,
titlebar:true
},
center: {
alwaysShowTabs:true,
tabPosition:'top'
}
});
var albums = layout.getEl().createChild({tag:'div', id:'albums'});
var tb = new Ext.Toolbar(albums.createChild({tag:'div'}));
tb.addButton({
text: 'New Album',
cls: 'x-btn-text-icon album-btn',
handler: function(){
var node = root.appendChild(new Tree.TreeNode({
text:'Album ' + (++newIndex),
cls:'album-node',
allowDrag:false
}));
tree.getSelectionModel().select(node);
setTimeout(function(){
ge.editNode = node;
ge.startEdit(node.ui.textNode);
}, 10);
}
});
var viewEl = albums.createChild({tag:'div', id:'folders'});
var folders = layout.add('west', new Ext.ContentPanel(albums, {
title:'My Albums',
fitToFrame:true,
autoScroll:true,
autoCreate:true,
toolbar: tb,
resizeEl:viewEl
}));
var images = layout.add('center', new Ext.ContentPanel('images', {
title:'My Images',
fitToFrame:true,
autoScroll:true,
autoCreate:true
}));
var imgBody = images.getEl();
var tree = new Tree.TreePanel(viewEl, {
animate:true,
enableDD:true,
containerScroll: true,
ddGroup: 'organizerDD',
rootVisible:false
});
var root = new Tree.TreeNode({
text: 'Albums',
allowDrag:false,
allowDrop:false
});
tree.setRootNode(root);
root.appendChild(
new Tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}),
new Tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}),
new Tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false})
);
tree.render();
root.expand();
// add an inline editor for the nodes
var ge = new Ext.tree.TreeEditor(tree, {
allowBlank:false,
blankText:'A name is required',
selectOnFocus:true
});
// create the required templates
var tpl = new Ext.Template(
'<div class="thumb-wrap" id="{name}">' +
'<div class="thumb"><img src="{url}" class="thumb-img"></div>' +
'<span>{shortName}</span></div>'
);
var qtipTpl = new Ext.Template(
'<div class="image-tip"><img src="{url}" align="left">'+
'<b>Image Name:</b>' +
'<span>{name}</span>' +
'<b>Size:</b>' +
'<span>{sizeString}</span></div>'
);
qtipTpl.compile();
// initialize the View
var view = new Ext.JsonView(imgBody, tpl, {
multiSelect: true,
jsonRoot: 'images'
});
var lookup = {};
view.prepareData = function(data){
data.shortName = data.name.ellipse(15);
data.sizeString = (Math.round(((data.size*10) / 1024))/10) + " KB";
//data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
data.qtip = new String(qtipTpl.applyTemplate(data));
lookup[data.name] = data;
return data;
};
var dragZone = new ImageDragZone(view, {containerScroll:true,
ddGroup: 'organizerDD'});
view.load({
url: '../view/get-images.php'
});
var rz = new Ext.Resizable('layout', {
wrap:true,
pinned:true,
adjustments:[-6,-6],
minWidth:300
});
rz.on('resize', function(){
layout.layout();
});
rz.resizeTo(650, 350);
}
};
}();
Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
/**
* Create a DragZone instance for our JsonView
*/
ImageDragZone = function(view, config){
this.view = view;
ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
};
Ext.extend(ImageDragZone, Ext.dd.DragZone, {
// We don't want to register our image elements, so let's
// override the default registry lookup to fetch the image
// from the event instead
getDragData : function(e){
e = Ext.EventObject.setEvent(e);
var target = e.getTarget('.thumb-wrap');
if(target){
var view = this.view;
if(!view.isSelected(target)){
view.select(target, e.ctrlKey);
}
var selNodes = view.getSelectedNodes();
var dragData = {
nodes: selNodes
};
if(selNodes.length == 1){
dragData.ddel = target.firstChild.firstChild; // the img element
dragData.single = true;
}else{
var div = document.createElement('div'); // create the multi element drag "ghost"
div.className = 'multi-proxy';
for(var i = 0, len = selNodes.length; i < len; i++){
div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true));
if((i+1) % 3 == 0){
div.appendChild(document.createElement('br'));
}
}
dragData.ddel = div;
dragData.multi = true;
}
return dragData;
}
return false;
},
// this method is called by the TreeDropZone after a node drop
// to get the new tree node (there are also other way, but this is easiest)
getTreeNode : function(){
var treeNodes = [];
var nodeData = this.view.getNodeData(this.dragData.nodes);
for(var i = 0, len = nodeData.length; i < len; i++){
var data = nodeData[i];
treeNodes.push(new Ext.tree.TreeNode({
text: data.name,
icon: data.url,
data: data,
leaf:true,
cls: 'image-node',
qtip: data.qtip
}));
}
return treeNodes;
},
// the default action is to "highlight" after a bad drop
// but since an image can't be highlighted, let's frame it
afterRepair:function(){
for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
}
this.dragging = false;
},
// override the default repairXY with one offset for the margins and padding
getRepairXY : function(e){
if(!this.dragData.multi){
var xy = Ext.Element.fly(this.dragData.ddel).getXY();
xy[0]+=3;xy[1]+=3;
return xy;
}
return false;
}
});
// Utility functions
String.prototype.ellipse = function(maxLength){
if(this.length > maxLength){
return this.substr(0, maxLength-3) + '...';
}
return this;
};

27
www/extras/yui-ext/examples/tree/reorder.html Normal file
View file

@ -0,0 +1,27 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Reorder TreePanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="reorder.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Drag and Drop ordering in a TreePanel</h1>
<p>This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and
anything can be dropped anywhere except appending to nodes marked "leaf" (the files).</p>
<p>Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.</p>
<p>In order to demonstrate drag and drop insertion points, sorting was <b>not</b> enabled.</p>
<p>The data for this tree is asynchronously loaded with a JSON TreeLoader.</p>
<p>The js is not minified so it is readable. See <a href="reorder.js">reorder.js</a>.</p>
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
</body>
</html>

31
www/extras/yui-ext/examples/tree/reorder.js vendored Normal file
View file

@ -0,0 +1,31 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
var tree = new Tree.TreePanel('tree-div', {
animate:true,
loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
enableDD:true,
containerScroll: true
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});

4
www/extras/yui-ext/examples/tree/save-dep.php Normal file
View file

@ -0,0 +1,4 @@
<?
$tree = stripslashes($_REQUEST['data']);
file_put_contents('./dep-tree.json', $tree);
?>

43
www/extras/yui-ext/examples/tree/two-trees.html Normal file
View file

@ -0,0 +1,43 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Drag and Drop between 2 TreePanels</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="two-trees.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
<style type="text/css">
#tree, #tree2 {
float:left;
margin:20px;
border:1px solid #c3daf9;
width:250px;
height:300px;
overflow:auto;
}
.folder .x-tree-node-icon{
background:transparent url(../../resources/images/default/tree/folder.gif);
}
.x-tree-node-expanded .x-tree-node-icon{
background:transparent url(../../resources/images/default/tree/folder-open.gif);
}
</style>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Drag and Drop betweens two TreePanels</h1>
<p>The TreePanels have a TreeSorter applied in "folderSort" mode.</p>
<p>Both TreePanels are in "appendOnly" drop mode since they are sorted.</p>
<p>Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.</p>
<p>The data for this tree is asynchronously loaded with a JSON TreeLoader.</p>
<p>The js is not minified so it is readable. See <a href="two-trees.js">two-trees.js</a>.</p>
<div id="tree"></div>
<div id="tree2"></div>
</body>
</html>

72
www/extras/yui-ext/examples/tree/two-trees.js vendored Normal file
View file

@ -0,0 +1,72 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
var TreeTest = function(){
// shorthand
var Tree = Ext.tree;
return {
init : function(){
// yui-ext tree
var tree = new Tree.TreePanel('tree', {
animate:true,
loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
enableDD:true,
containerScroll: true,
dropConfig: {appendOnly:true}
});
// add a tree sorter in folder mode
new Tree.TreeSorter(tree, {folderSort:true});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false, // disable root node dragging
id:'source'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand(false, /*no anim*/ false);
//-------------------------------------------------------------
// YUI tree
var tree2 = new Tree.TreePanel('tree2', {
animate:true,
//rootVisible: false,
loader: new Ext.tree.TreeLoader({
dataUrl:'get-nodes.php',
baseParams: {lib:'yui'} // custom http params
}),
containerScroll: true,
enableDD:true,
dropConfig: {appendOnly:true}
});
// add a tree sorter in folder mode
new Tree.TreeSorter(tree2, {folderSort:true});
// add the root node
var root2 = new Tree.AsyncTreeNode({
text: 'Yahoo! UI Source',
draggable:false,
id:'yui'
});
tree2.setRootNode(root2);
tree2.render();
root2.expand(false, /*no anim*/ false);
}
};
}();
Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);