I'm using drupal7 Photoswipe module which uses Photoswipe jQuery plugin to build a view and display a gallery of photos.
Currently Photoswipe allows only to display image title as image caption.
Also to display other text fields from the same content node, I add content text fields to the view and change their display to add a CSS class (.photo_text).
Then I modified openPhotoSwipe function within photoswipe.jquery.js to get the image parent html node ($image .parents("td:first") ) and select it's children having the (.photo_text) CSS class, to add them as image title.
openPhotoSwipe: function(index, galleryElement, options) {
var pswpElement = $('.pswp')[0];
var items = [];
options = options || Drupal.behaviors.photoswipe.photoSwipeOptions;
var images = galleryElement.find('a.photoswipe');
images.each(function (index) {
var $image = $(this);
var $eleme = $image.parents("td:first");
var $eleme_class = $eleme.children('.photo_text');
var $photo_text = "";
if ( !!$eleme_class){
for ( var i = 0; i < $eleme_class.length; i++ ){
$photo_text += $eleme_class[i].innerHTML;
}
}else{
$photo_text = "";
}
// end of add
size = $image.data('size') ? $image.data('size').split('x') : ['',''];
items.push(
{
src : $image.attr('href'),
w: size[0],
h: size[1],
title : $image.data('overlay-title') + $photo_text
}
);
})
I'm now wondering if it exists a simplest way to do the same thing without modifying this module?
Related
In Extjs, I want to know whether I can restrict the dragging of elements within a specific x,y co-ordinates, just like an option, containment in jQuery-UI.
Currently this is my code:
abc.prototype.initDrag = function(v) {
v.dragZone = new Ext.dd.DragZone(v.getEl(), {
containerScroll : false,
getDragData : function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10);
var t = e.getTarget();
var rowIndex = abc.grid.getView().findRowIndex(t);
var columnIndex = abc.grid.getView().findCellIndex(t);
var abcDragZone = v.dragZone ; //Ext.getCmp('idabcDragZone');
var widthToScrollV = $(window).width()-((columnIndex-1)*100);
var widthToScrollH = $(window).height()-((5-rowIndex)*30);
abcDragZone.setXConstraint(0,widthToScrollV);
abcDragZone.setYConstraint(widthToScrollH,0);
if ((rowIndex !== false) && (columnIndex !== false)) {
if (sourceEl) {
abc.isDragged = true;
def.scriptGrid.isDraggableForObject = false;
def.scriptGrid.dragRowIndex = false;
d = sourceEl.cloneNode(true);
d.id = Ext.id();
d.textContent = "\$" + abc.grid.getColumnModel().getColumnHeader(columnIndex);
return {
ddel : d,
sourceEl : d,
sourceStore : v.store
}
}
}
},
getRepairXY : function() {
return this.dragData.repairXY;
},
});
}
But the problem is that the initdrag is called when the csv sheet is added to DOM. Only when its added that element can be accessed and the individual cells' drag limits can be set. So once I add a csv, the limits are not getting set. If I add it again to DOM then the limits work. Is there an option like the jQuery UI containment for draggable, here in extjs?
edit:
I even tried :
constrainTo( constrainTo, [pad], [inContent] )
body had an id of #abc
when I tried with
dragZoneObj.startDrag = function(){
this.constrainTo('abc');
};
which is a method of the DragZone class. It still did not cover the whole body tag.
I'm trying to create two panes inside a tab bar programmatically using the following code:
var middlePanel = new LayoutPanel
{
Orientation = Orientation.Vertical,
DockHeight = new GridLength(250)
};
rootPanel.Children.Add(middlePanel);
var paneGroup = new LayoutAnchorablePaneGroup
{
DockHeight = new GridLength(200)
};
middlePanel.Children.Add(new LayoutDocumentPane());
middlePanel.Children.Add(paneGroup);
var validationEditorPane = new LayoutAnchorablePane();
paneGroup.Children.Add(validationEditorPane);
validationEditorPane.Children.Add(new LayoutAnchorable { ContentId = "Validation", Title = "Validation" });
var searchEditorPane = new LayoutAnchorablePane();
paneGroup.Children.Add(searchEditorPane);
searchEditorPane.Children.Add(new LayoutAnchorable { ContentId = "Search", Title = "Search" });
However, the code above creates the two panes next to each other without tabs. During runtime I can drag the Search pane onto the Validation pane to move them into tabs. This suggests that it must be possible to achieve this programmatically, but I cannot see how.
Any suggestions?
This turned out to be easier than I thought. All I had to do was to add the LayoutAnchorables to the same LayoutAnchorablePane object:
var tabPane = new LayoutAnchorablePane();
paneGroup.Children.Add(tabPane);
tabPane.Children.Add(new LayoutAnchorable { ContentId = "Validation", Title = "Validation" });
tabPane.Children.Add(new LayoutAnchorable { ContentId = "Search", Title = "Search" });
I am using angularjs file uploader given at "https://github.com/nervgh/angular-file-upload", so my js code look like this:
var urls = ['url1', 'url2'];
var uploaders = $scope.uploaders = urls.map(function(url) {
return new FileUploader({url: url});
});
$http.get('url.php').then(function(resp) {
$scope.images = resp.data.images; // images array
uploaders[0].addToQueue($scope.images[0]);
// add first img to 1st uploader
var i;
for(i=1;i<$scope.images.length;i++){
uploaders[1].addToQueue($scope.images[i]);
}
// append other images to 2nd uploader
});
Now I can get uploaders[0].queue.length = 1 but not the other proerties like uploaders[0].queue[0].file.name ,
any suggestions?
I am trying to preview images that are selected from input type file with multiple. For that i want list of file paths and using those paths I will preview images.
But here I used ng-src in img tag, and those paths are set on ng-src and also i want create img tag according to file selection using ng-repeat.
Suppose I will select 5 files on input type=file then create 5 img tag. Suppose I change files from 5 to 2, then all 5 img tags are removed and 2 img tags are created.
I don't know if ng-repeat is a right option for creation of img tag according to file selection or not?
below this is my myfileupload directive
App.directive('myFileUpload', function (fileService) {
return {link: function (scope, element, attrs) {
element.bind('change', function () {
var index;
var index_file = 0;
for (index = 0; index < element[0].files.length; index++) {
var file=element[0].files[index];
fileService.setFile(element[0].files[index], index_file, attrs.myFileUpload);
index_file++;
var src={};
/*src["src"]=element[0].files[index];*/
fileService.setFilePath(element[0].files[index], index_file, attrs.myFileUpload);
console.log(pathss);
path.push(src);
}
index_file = 0;
});
}
};
});
this is mys service
App.service('fileService', function () {
var fileService = {};
fileService.getFile = function (name) {
return file[name];
};
fileService.setFile = function (newFile, index, name) {
if (index === 0 && file[name] === undefined)
/*file[name] = [];*/
console.log(file);
file[name][index] = newFile;
/*console.log(name);*/
};
fileService.getFilePath = function (name) {
return filepath[name];
};
fileService.setFilePath = function (newFile, index, name) {
if (index === 0 && file[name] === undefined)
/*file[name] = [];*/
console.log(file);
filepath[name][index] = newFile.val;
/*console.log(name);*/
};
return fileService;
})
controller for how i am create a input type file
$scope.add=function(){
var name="descimg["+currentg1+"]";
var pathname="imgfile["+currentg1+"]";
file[name] = [];
var $div = angular.element("<div><label id='desccodeL["+currentg1+"]' for='desccodeL["+currentg1+"]''>Code "+currentg1+"</label><textarea rows='3' cols='6' id='desccode["+currentg1+"]' name='desccode["+currentg1+"]' ng-model='blog.desccode["+currentg1+"]''></textarea></div><div><label id='descimgL["+currentg1+"]' for='descimgL["+currentg1+"]'>Image "+currentg1+"</label><input type='file' id='descimg["+currentg1+"]' class='file' name='descimg["+currentg1+"]' my-file-upload='descimg["+currentg1+"]' multiple/></div>");
var e=document.getElementById("outerdiv");
var $div2=angular.element("<div ng repeat='path in "+fileService.getFilePath("descimg["+currentg1+"]"); +"'><img ng-src=''/></div></div >);
var e2=document.getElementById("displayblog");
angular.element(e).append($div).injector().invoke(function($compile) {
var scope = angular.element($div).scope();
$compile($div)(scope);
});
angular.element(e2).append($div2).injector().invoke(function($compile) {
var scope = angular.element($div2).scope();
$compile($div2)(scope);
});
currentg1++;
};
file element is create dynamically after calling add function and also when i set the myservice.setFilePath its give error in newFile.val !!!
Okay, I don't have time to rewrite the code but here are a few things to look at:
1) In your service, I don't think filepath is ever defined and that's probably why you're getting the error.
2) I don't think this syntax will work:
filepath[name][index]
Maybe you intended to use dot notation, like this:
filepath.name[index]
3) In your controller, you have a string that isn't closed which is causing the rest of the code in the controller to be interpreted as a string.
4) Instead of all of those HTML strings in the controller, check out angular's data binding capabilities. You should be able to create all those HTML elements in your template and use angular directives or data binding to make the templat dynamic. For example:
<div>
<label id='desccodeL{{currentg1}}'for='desccodeL{{currentg1}}'>
Code {{currentg1}}
</label>
</div>
I have a generic grid component.
on click of menu item corresponding grid is displayed in independent tabs.
on rendering the grid component, store data is set dynamically and grid is populated.
The problem if I open two grids in two tabs, on navigating to the first tab, grid data is not displayed as the store data is set to second grid data.
Hoping to find solution.Thank you
code in main controller:
OnMenuItemClick: function(c){
var nodeText = c.text,
tabs = Ext.getCmp('app-tab'),
tabBar = tabs.getTabBar(),
tabIndex;
for(var i = 0; i < tabBar.items.length; i++) {
if (tabBar.items.get(i).getText() === nodeText) {
tabIndex = i;
}
}
if (Ext.isEmpty(tabIndex)) {
/* Note: While creating the Grid Panel,here we are passing the Menu/Grid Id along with it for future reference */
tabs.add(Ext.create('DemoApp.view.grid.GenericGrid',{title:nodeText,gridId:c.id,overflowY: 'scroll',closable:true}));
tabIndex = tabBar.items.length - 1 ;
}
tabs.setActiveTab(tabIndex);
}
code in generic grid controller:
renderGridMetadata: function(genericGrid) {
var store = Ext.getStore("DemoApp.store.GenericGrid"),
gridId = genericGrid.up().gridId,
resourceURL = "resources/data/" + gridId + ".json";
var serviceInput = Util.createServiceResponse(gridId);
/*Dynamically add the proxy URL to the ViewModel
DemoApp.model.GenericGrid.getProxy().setUrl(resourceURL);*/
Ext.getBody().mask("Loading... Please wait...", 'loading');
Ext.Ajax.request({
url: Util.localGridService,
method: 'POST',
headers: {
"Content-Type": "application/json",
'SM_USER': 'arun.x.kumar.ap#nielsen.com',
'SM_SERVERSESSIONID': 'asdfadsf'
},
jsonData: {
getConfigurationAndDataRequestType: serviceInput
},
success: function(conn, response, options, eOpts) {
Ext.getBody().unmask();
var data = Util.decodeJSON(conn.responseText);
/* Apply REST WebServices response Metadata to the Grid */
var recordsMetaData = data.getConfigurationAndDataReplyType.gridConfigDataResponse.data.record;
var jsonMetaDataArray = [];
for (var c = 0; c < recordsMetaData.length; c++) {
var jsonMetaDataObject = {};
var text = data.getConfigurationAndDataReplyType.gridConfigDataResponse.data.record[c].displayName;
var dataIndex = data.getConfigurationAndDataReplyType.gridConfigDataResponse.data.record[c].columnName;
jsonMetaDataObject["text"] = text;
jsonMetaDataObject["dataIndex"] = dataIndex;
jsonMetaDataArray.push(jsonMetaDataObject);
}
/* Apply REST WebServices response data to the Grid */
var recordsData = data.getConfigurationAndDataReplyType.gridDataResponse.record;
var jsonDataArray = [];
for (var r = 0; r < recordsData.length; r++) {
var columnsData = data.getConfigurationAndDataReplyType.gridDataResponse.record[r].column;
var jsonDataObject = {};
for (var c = 0; c < columnsData.length; c++) {
jsonDataObject[columnsData[c].columnId] = columnsData[c].columnValue;
}
jsonDataArray.push(jsonDataObject);
}
store.setData(jsonDataArray);
genericGrid.reconfigure(store, jsonMetaDataArray);
},
failure: function(conn, response, options, eOpts) {
Ext.getBody().unmask();
Util.showErrorMsg(conn.responseText);
}
});
store.load();
}
});
Most likely there is only one instance of DemoApp.store.GenericGrid.
Frankly, I only guess because I see that you call Ext.getStore("DemoApp.store.GenericGrid") that implies the store is declared in stores:["DemoApp.store.GenericGrid"] array probably in the application class.
If a store is declared this way then Ext automatically creates one instance of it setting storeId to the string listed in stores:[]. Hence, Ext.getStore() returns that instance.
If you want to have two independent instances of the grid you have to create store instances yourself preferably in initComponent override.