Skip to content
Browse files

Functional improvements:

- Add support for dragging a selection box.

Visual improvements;
- The "ghost" selection now has minimized thumbnails so that
  you're dragging a smaller div around the screen.
  • Loading branch information...
1 parent 9863743 commit e6b3886f8f6a3a526876a80470420501bdb25612 @bharat bharat committed Jan 5, 2011
View
12 modules/organize/css/organize.css
@@ -42,6 +42,18 @@
visibility: visible;
}
+.g-organize div.drag-ghost {
+ width: 300px;
+ height: 180px;
+}
+
+.g-organize div.drag-ghost div {
+ width: 72px;
+ height: 72px;
+ vertical-align: baseline;
+ float: left;
+}
+
.g-organize div.drop-target {
background: #eee;
}
View
160 modules/organize/vendor/ext/js/DataView-more.js
@@ -0,0 +1,160 @@
+/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+/**
+ * @class Ext.DataView.LabelEditor
+ * @extends Ext.Editor
+ *
+ */
+Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
+ alignment: "tl-tl",
+ hideEl : false,
+ cls: "x-small-editor",
+ shim: false,
+ completeOnEnter: true,
+ cancelOnEsc: true,
+ labelSelector: 'span.x-editable',
+
+ constructor: function(cfg, field){
+ Ext.DataView.LabelEditor.superclass.constructor.call(this,
+ field || new Ext.form.TextField({
+ allowBlank: false,
+ growMin:90,
+ growMax:240,
+ grow:true,
+ selectOnFocus:true
+ }), cfg
+ );
+ },
+
+ init : function(view){
+ this.view = view;
+ view.on('render', this.initEditor, this);
+ this.on('complete', this.onSave, this);
+ },
+
+ initEditor : function(){
+ this.view.on({
+ scope: this,
+ containerclick: this.doBlur,
+ click: this.doBlur
+ });
+ this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
+ },
+
+ doBlur: function(){
+ if(this.editing){
+ this.field.blur();
+ }
+ },
+
+ onMouseDown : function(e, target){
+ if(!e.ctrlKey && !e.shiftKey){
+ var item = this.view.findItemFromChild(target);
+ e.stopEvent();
+ var record = this.view.store.getAt(this.view.indexOf(item));
+ this.startEdit(target, record.data[this.dataIndex]);
+ this.activeRecord = record;
+ }else{
+ e.preventDefault();
+ }
+ },
+
+ onSave : function(ed, value){
+ this.activeRecord.set(this.dataIndex, value);
+ }
+});
+
+
+Ext.DataView.DragSelector = function(cfg){
+ cfg = cfg || {};
+ var view, proxy, tracker;
+ var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
+ var dragSafe = cfg.dragSafe === true;
+
+ this.init = function(dataView){
+ view = dataView;
+ view.on('render', onRender);
+ };
+
+ function fillRegions(){
+ rs = [];
+ view.all.each(function(el){
+ rs[rs.length] = el.getRegion();
+ });
+ bodyRegion = view.el.getRegion();
+ }
+
+ function cancelClick(){
+ return false;
+ }
+
+ function onBeforeStart(e){
+ return !dragSafe || e.target == view.el.dom;
+ }
+
+ function onStart(e){
+ view.on('containerclick', cancelClick, view, {single:true});
+ if(!proxy){
+ proxy = view.el.createChild({cls:'x-view-selector'});
+ }else{
+ if(proxy.dom.parentNode !== view.el.dom){
+ view.el.dom.appendChild(proxy.dom);
+ }
+ proxy.setDisplayed('block');
+ }
+ fillRegions();
+ view.clearSelections();
+ }
+
+ function onDrag(e){
+ var startXY = tracker.startXY;
+ var xy = tracker.getXY();
+
+ var x = Math.min(startXY[0], xy[0]);
+ var y = Math.min(startXY[1], xy[1]);
+ var w = Math.abs(startXY[0] - xy[0]);
+ var h = Math.abs(startXY[1] - xy[1]);
+
+ dragRegion.left = x;
+ dragRegion.top = y;
+ dragRegion.right = x+w;
+ dragRegion.bottom = y+h;
+
+ dragRegion.constrainTo(bodyRegion);
+ proxy.setRegion(dragRegion);
+
+ for(var i = 0, len = rs.length; i < len; i++){
+ var r = rs[i], sel = dragRegion.intersect(r);
+ if(sel && !r.selected){
+ r.selected = true;
+ view.select(i, true);
+ }else if(!sel && r.selected){
+ r.selected = false;
+ view.deselect(i);
+ }
+ }
+ }
+
+ function onEnd(e){
+ if (!Ext.isIE) {
+ view.un('containerclick', cancelClick, view);
+ }
+ if(proxy){
+ proxy.setDisplayed(false);
+ }
+ }
+
+ function onRender(view){
+ tracker = new Ext.dd.DragTracker({
+ onBeforeStart: onBeforeStart,
+ onStart: onStart,
+ onDrag: onDrag,
+ onEnd: onEnd
+ });
+ tracker.initEl(view.el);
+ }
+};
View
26 modules/organize/views/organize_dialog.html.php
@@ -9,6 +9,7 @@
</style>
<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-base.js") ?>"></script>
<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/ext-all.js") ?>"></script>
+<script type="text/javascript" src="<?= url::file("modules/organize/vendor/ext/js/DataView-more.js") ?>"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "<?= url::file("modules/organize/vendor/ext/images/default/s.gif") ?>";
Ext.Ajax.timeout = 1000000; // something really large
@@ -87,6 +88,9 @@
autoScroll: true,
enableDragDrop: true,
itemSelector: "div.thumb",
+ plugins: [
+ new Ext.DataView.DragSelector({dragSafe: true})
+ ],
listeners: {
"render": function(v) {
v.dragZone = new Ext.dd.DragZone(v.getEl(), {
@@ -106,15 +110,23 @@
if (selected_nodes.length == 1) {
drag_data.ddel = target;
} else {
- var div = document.createElement("div");
- div.className = "multi-proxy";
+ var drag_ghost = document.createElement("div");
+ drag_ghost.className = "drag-ghost";
for (var i = 0; i != selected_nodes.length; i++) {
- div.appendChild(Ext.get(selected_nodes[i]).dom.firstChild.cloneNode(true));
- if ((i + 1) % 3 == 0) {
- div.appendChild(document.createElement("br"));
- }
+ var inner = document.createElement("div");
+ drag_ghost.appendChild(inner);
+
+ var img = Ext.get(selected_nodes[i]).dom.firstChild;
+ var child = inner.appendChild(img.cloneNode(true));
+ Ext.get(child).setWidth(Ext.fly(img).getWidth() / 2);
+ Ext.get(child).setHeight(Ext.fly(img).getHeight() / 2);
}
- drag_data.ddel = div;
+ // The contents of the ghost float, and the ghost is wide enough for
+ // 4 images across so make sure that the ghost is tall enough. Thumbnails
+ // are max 120px high max, and ghost thumbs are half of that, but leave some
+ // padding because IE is unpredictable.
+ drag_ghost.style.height = Math.ceil(i/4) * 72 + "px";
+ drag_data.ddel = drag_ghost;
}
return drag_data;
}

0 comments on commit e6b3886

Please sign in to comment.
Something went wrong with that request. Please try again.