modx.treedrop.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
  1. Ext.dd.DragDropMgr.getZIndex = function(element) {
  2. var body = document.body,
  3. z,
  4. zIndex = -1;
  5. var overTargetEl = element;
  6. element = Ext.getDom(element);
  7. while (element !== body) {
  8. // this fixes the problem
  9. if(!element) {
  10. this._remove(overTargetEl); // remove the drop target from the manager
  11. break;
  12. }
  13. // fix end
  14. if (!isNaN(z = Number(Ext.fly(element).getStyle('zIndex')))) {
  15. zIndex = z;
  16. }
  17. element = element.parentNode;
  18. }
  19. return zIndex;
  20. };
  21. MODx.TreeDrop = function(config) {
  22. config = config || {};
  23. Ext.applyIf(config,{
  24. id: 'modx-treedrop'
  25. ,ddGroup: 'modx-treedrop-dd'
  26. });
  27. MODx.TreeDrop.superclass.constructor.call(this,config);
  28. this.config = config;
  29. this.setup();
  30. };
  31. Ext.extend(MODx.TreeDrop,Ext.Component,{
  32. setup: function() {
  33. var ddTarget = this.config.target;
  34. var ddTargetEl = this.config.targetEl;
  35. var cfg = this.config;
  36. this.targetEl = new Ext.dd.DropTarget(this.config.targetEl, {
  37. ddGroup: this.config.ddGroup
  38. ,notifyEnter: function(ddSource, e, data) {
  39. if (ddTarget.getEl) {
  40. var el = ddTarget.getEl();
  41. if (el) {
  42. el.frame();
  43. el.focus();
  44. }
  45. }
  46. }
  47. ,notifyDrop: function(ddSource, e, data) {
  48. if (!data.node || !data.node.attributes || !data.node.attributes.type) return false;
  49. if (data.node.attributes.type != 'modResource' && data.node.attributes.leaf != true) return false;
  50. var v = '';
  51. var win = false;
  52. switch (data.node.attributes.type) {
  53. case 'modResource': v = '[[~'+data.node.attributes.pk+']]'; break;
  54. case 'snippet': win = true; break;
  55. case 'chunk': win = true; break;
  56. case 'tv': win = true; break;
  57. case 'file': v = data.node.attributes.url; break;
  58. default:
  59. var dh = Ext.getCmp(data.node.attributes.type+'-drop-handler');
  60. if (dh) {
  61. return dh.handle(data,{
  62. ddTargetEl: ddTargetEl
  63. ,cfg: cfg
  64. ,iframe: cfg.iframe
  65. ,iframeEl: cfg.iframeEl
  66. ,onInsert: cfg.onInsert
  67. ,panel: cfg.panel
  68. });
  69. }
  70. return false;
  71. break;
  72. }
  73. if (win) {
  74. MODx.loadInsertElement({
  75. pk: data.node.attributes.pk
  76. ,classKey: data.node.attributes.classKey
  77. ,name: data.node.attributes.name
  78. ,output: v
  79. ,ddTargetEl: ddTargetEl
  80. ,cfg: cfg
  81. ,iframe: cfg.iframe
  82. ,iframeEl: cfg.iframeEl
  83. ,onInsert: cfg.onInsert
  84. ,panel: cfg.panel
  85. });
  86. } else {
  87. if (cfg.iframe) {
  88. MODx.insertForRTE(v,cfg);
  89. } else {
  90. var el = Ext.get(ddTargetEl);
  91. if (el.dom.id == 'modx-static-content') {
  92. v = v.substring(1);
  93. Ext.getCmp(el.dom.id).setValue('');
  94. }
  95. if (el.dom.id == 'modx-symlink-content' || el.dom.id == 'modx-weblink-content') {
  96. Ext.getCmp(el.dom.id).setValue('');
  97. if(typeof data.node.attributes.pk !== undefined && data.node.attributes.pk !== undefined){
  98. MODx.insertAtCursor(ddTargetEl,data.node.attributes.pk,cfg.onInsert);
  99. }else{
  100. MODx.insertAtCursor(ddTargetEl,v,cfg.onInsert);
  101. }
  102. } else if (el.dom.id == 'modx-resource-parent') {
  103. v = data.node.attributes.pk;
  104. var pf = Ext.getCmp('modx-resource-parent');
  105. if (v == pf.currentid) {
  106. MODx.msg.alert('',_('resource_err_own_parent'));
  107. return false;
  108. }
  109. pf.setValue(v);
  110. Ext.getCmp(pf.parentcmp).setValue(v);
  111. var p = Ext.getCmp(pf.formpanel);
  112. if (p) { p.markDirty(); }
  113. } else {
  114. MODx.insertAtCursor(ddTargetEl,v,cfg.onInsert);
  115. }
  116. if (cfg.panel) {
  117. var p = Ext.getCmp(cfg.panel);
  118. if (p) { p.markDirty(); }
  119. }
  120. }
  121. }
  122. return true;
  123. }
  124. });
  125. // Allow elements & files nodes to be dropped
  126. this.targetEl.addToGroup('modx-treedrop-elements-dd');
  127. this.targetEl.addToGroup('modx-treedrop-sources-dd');
  128. }
  129. });
  130. Ext.reg('modx-treedrop',MODx.TreeDrop);
  131. MODx.loadInsertElement = function(r) {
  132. if (MODx.InsertElementWindow) {
  133. MODx.InsertElementWindow.hide();
  134. MODx.InsertElementWindow.destroy();
  135. }
  136. MODx.InsertElementWindow = MODx.load({
  137. xtype: 'modx-window-insert-element'
  138. ,record: r
  139. ,listeners: {
  140. 'success':{fn: function() {
  141. },scope:this}
  142. ,'hide': {fn:function() { this.destroy(); }}
  143. }
  144. });
  145. MODx.InsertElementWindow.setValues(r);
  146. MODx.InsertElementWindow.show();
  147. };
  148. MODx.insertAtCursor = function(myField, myValue,h) {
  149. if (!Ext.isEmpty(h)) {
  150. var z = h(myValue);
  151. if (z != undefined) {
  152. myValue = z;
  153. }
  154. }
  155. myField.blur();
  156. if (document.selection) {
  157. sel = document.selection.createRange();
  158. sel.text = myValue;
  159. } else if (myField.selectionStart || myField.selectionStart == '0') {
  160. var startPos = myField.selectionStart;
  161. var endPos = myField.selectionEnd;
  162. myField.value = myField.value.substring(0, startPos)+ myValue+ myField.value.substring(endPos, myField.value.length);
  163. myField.selectionStart = startPos + myValue.length;
  164. myField.selectionEnd = myField.selectionStart;
  165. } else {
  166. myField.value += myValue;
  167. }
  168. myField.focus();
  169. };
  170. MODx.insertForRTE = function(v,cfg) {
  171. var fn = cfg.onInsert || false;
  172. if (fn) {
  173. fn(v,cfg);
  174. } else {
  175. if (typeof cfg.iframeEl == 'object') {
  176. var doc = cfg.iframeEl;
  177. } else {
  178. var doc = window.frames[0].document.getElementById(cfg.iframeEl);
  179. }
  180. if (doc.value) {
  181. doc.value = doc.value + v;
  182. } else {
  183. doc.innerHTML = doc.innerHTML + v;
  184. }
  185. }
  186. };
  187. MODx.insertIntoContent = function(v,opt) {
  188. if (opt.iframe) {
  189. MODx.insertForRTE(v,opt.cfg);
  190. } else {
  191. MODx.insertAtCursor(opt.ddTargetEl,v);
  192. }
  193. }
  194. MODx.window.InsertElement = function(config) {
  195. config = config || {};
  196. var resourceCmp = Ext.get('modx-resource-id');
  197. var resourceId = resourceCmp !== null ? resourceCmp.getValue() : 0;
  198. Ext.applyIf(config,{
  199. title: _('select_el_opts')
  200. ,id: 'modx-window-insert-element'
  201. ,width: 522 // match 300px fieldwidth plus the fieldset
  202. ,labelAlign: 'left'
  203. ,labelWidth: 160
  204. ,url: MODx.config.connector_url
  205. ,action: 'element/template/create'
  206. ,fields: [{
  207. xtype: 'hidden'
  208. ,name: 'pk'
  209. ,id: 'modx-dise-pk'
  210. },{
  211. xtype: 'hidden'
  212. ,name: 'classKey'
  213. ,id: 'modx-dise-classkey'
  214. },{
  215. xtype: 'xcheckbox'
  216. ,fieldLabel: _('cached')
  217. ,name: 'cached'
  218. ,id: 'modx-dise-cached'
  219. ,inputValue: 1
  220. ,checked: true
  221. },{
  222. xtype: 'modx-combo-property-set'
  223. ,fieldLabel: _('property_set')
  224. ,name: 'propertyset'
  225. ,id: 'modx-dise-propset'
  226. ,width: 300
  227. ,baseParams: {
  228. action: 'element/propertyset/getList'
  229. ,showAssociated: true
  230. ,elementId: config.record.pk
  231. ,elementType: config.record.classKey
  232. }
  233. ,listeners: {
  234. 'render': {fn:function() {Ext.getCmp('modx-dise-propset').getStore().load(); Ext.getCmp('modx-dise-propset').value = '0';},scope:this}
  235. ,'select': {fn:this.changePropertySet,scope:this}
  236. }
  237. },{
  238. id: 'modx-dise-proplist'
  239. ,autoLoad: {
  240. url: MODx.config.connector_url
  241. ,params: {
  242. 'action': 'element/getinsertproperties'
  243. ,classKey: config.record.classKey
  244. ,pk: config.record.pk
  245. ,resourceId: resourceId
  246. ,propertySet: 0
  247. }
  248. ,scripts: true
  249. ,callback: this.onPropFormLoad
  250. ,scope: this
  251. }
  252. ,style: 'display: none;'
  253. },{
  254. xtype: 'fieldset'
  255. ,title: _('properties')
  256. // ,autoHeight: true
  257. ,height: Ext.getBody().getViewSize().height * 0.6
  258. ,collapsible: true
  259. ,autoScroll: true
  260. ,items: [{
  261. html: '<div id="modx-iprops-form"></div>'
  262. ,id: 'modx-iprops-container'
  263. // ,height: 400
  264. // ,autoScroll: true
  265. }]
  266. }]
  267. ,modps: []
  268. });
  269. MODx.window.InsertElement.superclass.constructor.call(this,config);
  270. this.on('show',function() {
  271. this.center();
  272. this.mask = new Ext.LoadMask(Ext.get('modx-iprops-container'), {msg:_('loading')});
  273. this.mask.show();
  274. },this);
  275. };
  276. Ext.extend(MODx.window.InsertElement,MODx.Window,{
  277. changePropertySet: function(cb) {
  278. var fp = Ext.getCmp('modx-iprops-fp');
  279. if (fp) fp.destroy();
  280. var resourceCmp = Ext.get('modx-resource-id');
  281. var resourceId = resourceCmp !== null ? resourceCmp.getValue() : 0;
  282. var u = Ext.getCmp('modx-dise-proplist').getUpdater();
  283. u.update({
  284. url: MODx.config.connector_url
  285. ,params: {
  286. 'action': 'element/getinsertproperties'
  287. ,classKey: this.config.record.classKey
  288. ,pk: this.config.record.pk
  289. ,resourceId: resourceId
  290. ,propertySet: cb.getValue()
  291. }
  292. ,scripts: true
  293. ,callback: this.onPropFormLoad
  294. ,scope: this
  295. });
  296. this.modps = [];
  297. this.mask.show();
  298. }
  299. ,createStore: function(data) {
  300. return new Ext.data.SimpleStore({
  301. fields: ["v","d"]
  302. ,data: data
  303. });
  304. }
  305. ,onPropFormLoad: function(el,s,r) {
  306. this.mask.hide();
  307. var vs = Ext.decode(r.responseText);
  308. if (!vs || vs.length <= 0) { return false; }
  309. for (var i=0;i<vs.length;i++) {
  310. if (vs[i].store) {
  311. vs[i].store = this.createStore(vs[i].store);
  312. }
  313. }
  314. MODx.load({
  315. xtype: 'panel'
  316. ,id: 'modx-iprops-fp'
  317. ,layout: 'form'
  318. ,autoHeight: true
  319. ,autoScroll: true
  320. ,labelWidth: 150
  321. ,border: false
  322. ,items: vs
  323. ,renderTo: 'modx-iprops-form'
  324. });
  325. }
  326. ,submit: function() {
  327. var v = '[[';
  328. var n = this.config.record.name;
  329. var f = this.fp.getForm();
  330. if (f.findField('cached').getValue() != true) {
  331. v = v+'!';
  332. }
  333. switch (this.config.record.classKey) {
  334. case 'modSnippet': v = v+n; break;
  335. case 'modChunk': v = v+'$'+n; break;
  336. case 'modTemplateVar': v = v+'*'+n; break;
  337. }
  338. var ps = f.findField('propertyset').getValue();
  339. if (ps != 0 && ps !== '') {
  340. v = v+'@'+f.findField('propertyset').getRawValue();
  341. }
  342. v = v+'?';
  343. for (var i=0;i<this.modps.length;i++) {
  344. var fld = this.modps[i];
  345. var val = typeof(Ext.getCmp('modx-iprop-'+fld).getValue) === 'function' ? Ext.getCmp('modx-iprop-'+fld).getValue() : Ext.getCmp('modx-iprop-'+fld).value;
  346. if (val == true) val = 1;
  347. if (val == false) val = 0;
  348. v = v+'\n\t&'+fld+'=`'+val+'`';
  349. }
  350. v = v+'\n]]';
  351. if (this.config.record.iframe) {
  352. MODx.insertForRTE(v,this.config.record.cfg);
  353. } else {
  354. MODx.insertAtCursor(this.config.record.ddTargetEl,v);
  355. }
  356. this.hide();
  357. return true;
  358. }
  359. ,changeProp: function(k) {
  360. if (this.modps.indexOf(k) == -1) {
  361. this.modps.push(k);
  362. }
  363. }
  364. });
  365. Ext.reg('modx-window-insert-element',MODx.window.InsertElement);