We Keep Coding

edit Java Script to deviate a certain key and assign different values

I am trying to customize show apps icon..
tried to edit the java script
var ShowAppsIcon = new Lang.Class({
Name: 'ShowAppsIcon',
Extends: DashItemContainer,
_init() {
this.parent();
this.toggleButton = new St.Button({ style_class: 'show-apps',
track_hover: true,
can_focus: true,
toggle_mode: true });
this._iconActor = null;
this.icon = new IconGrid.BaseIcon(_("Show Applications"),
{ setSizeManually: true,
showLabel: false,
createIcon: this._createIcon.bind(this) });
this.toggleButton.add_actor(this.icon.actor);
this.toggleButton._delegate = this;
this.setChild(this.toggleButton);
this.setDragApp(null);
},
_createIcon(size) {
this._iconActor = new St.Icon({ icon_name: 'view-app-grid-symbolic',
icon_size: size,
style_class: 'show-apps-icon',
track_hover: true });
return this._iconActor;
},
this script is working as a single script for the favorite apps icons and show apps icon.
I am Using Ubuntu 18.04.
I am trying to customize the "show-apps" Icon.
Here is the Java Script file. https://superuser.com/questions/1431374/ubuntu-18-04-customize-show-apps-icon
Please have a look on below imgaes with Show-Apps button at bottom right with yellow and green color.
Question: Is it possible to alter the attached Java Script file, so that I can customize the Width of the Show-Apps Icon size keeping Show-Apps Icon Height Unchanged from the script so that when I increase the Dock Icon Size from System Settings..I will have constant height but variable width only for show apps Icon based on entire dock height.

load js on image click titanium

i am new to titanium apps, i want to load a js on image click but i get 'uncaught typeerror cannot call method 'open' of undefined' error.
app.js
Ti.include("/core/index.js");
index.js
var win = Ti.UI.createWindow({
title: 'MapApp',
layout: 'vertical',
backgroundColor: '#ffffff'
});
var home=Ti.UI.createImageView({
image:'home.png',
height : 130,
width : 130,
});
var about=Ti.UI.createImageView({
image:'about.png',
height : 130,
width : 130
});
var rss=Ti.UI.createImageView({
image:'rss.png',
height : 130,
width : 130
});
var contact=Ti.UI.createImageView({
image:'contact.png',
height : 130,
width : 130
});
home.addEventListener('click', function(e) {
var newWin = Ti.UI.createWindow({
url : 'map.js',
title : 'title',
tabBarHidden : true,
barColor : '#000000',
});
newWin.open({
animation:true
});
});
win.add(home);
win.add(about);
win.add(rss);
win.add(contact);
win.open();
map.js
var globals = require("globals");
(function(){
var config = require("Config"),
AppWindow, LocationManager, locationsHandler;
globals.theme = require("../themes/" + config.theme);
LocationManager = require("LocationManager");
Titanium.UI.backgroundColor = globals.theme.Global.backgroundColor;
locationsHandler = function(e){
AppWindow = require("../ui/AppWindow").create();
AppWindow.open();
Ti.App.removeEventListener(
LocationManager.events.LOCATIONS_READY,
locationsHandler
);
};
Ti.App.addEventListener(
LocationManager.events.LOCATIONS_READY,
locationsHandler
);
// Load locations
LocationManager.load();
})();
i searched a lot, but did not get any response, is there any problem with the code in map.js as i replaced that code from app.js from purchased theme.

You can use the Event fire and event listener for this purpose and in my sense it will be the wise thing to do also. Once you have registered an even, fire it when the image is clicked. When the event is fired, the event you registered will hear it and will load your concern js and then you can take it from there.
Here is the link that might help you to get it going. You may fire and register both the event in app.'s or in any other js you are using.
Once you get it right, the other thing will be easy to do.

Google Chrome packaged app window

I'm creating a Chrome packaged app that has two pages [for now]. And by pages a mean actual .html files. One is called login.html and the another is index.html.
Now everything related to the user is stored in chrome.storage.local.
Here is the code for launching the pages in chrome.js.
chrome.app.runtime.onLaunched.addListener(function () {
var dimensions = getDimensions(screen),
positions = getPositions(screen);
chrome.storage.local.get('login', function (result) {
if(result.login.status === "loggedOut") {
chrome.app.window.create('login.html', {
id: 'loginWindow',
'bounds': {
'width': 400,
'height': 600
},
minWidth: 400,
minHeight: 600,
maxWidth: 400,
maxHeight: 600,
frame: 'none'
});
} else {
chrome.app.window.create('index.html', {
id: 'mainWindow',
'bounds': {
'top': positions.top,
'left': positions.left,
'width': dimensions.width,
'height': dimensions.height
},
minWidth: dimensions.width,
minHeight: dimensions.height,
maxWidth: dimensions.width,
maxHeight: dimensions.height,
frame: 'none'
});
}
});
});
Now because chrome.storage.local.get login.status === loggedOut it pops the login page with the login form. So how do I proceed when the user puts the correct credentials. How do I close the login window and then open the main. The code above is just to open the index.html next time and not showing the login again.
I have done the code to check the credentials and that works, but I want to now close the login form window and open a new index.html with the same bounds, max-, minwidths and heights as you can see in the code above.
Here is what I'm looking for: [this is now in login.js which is called inside login.html]
if(login === success) {
// close login window and goto mainWindow
} else {
// Username or password is wrong
}
Thanks in advance!

What you have to do to accomplish this is to add this tho check if changes happen inside the chrome.storage.local.
chrome.storage.onChanged.addListener(function(changes, namespace) {
chrome.storage.local.get('login', function (result) {
if (result.login.status === "loggedIn") {
chrome.app.window.get('loginWindow').close();
chrome.app.window.create('index.html', {
id: 'mainWindow',
'bounds': {
'top': positions.top,
'left': positions.left,
'width': dimensions.width,
'height': dimensions.height
},
minWidth: dimensions.width,
minHeight: dimensions.height,
maxWidth: dimensions.width,
maxHeight: dimensions.height,
frame: 'none'
});
}
});
});
Of course you could use those changes and namespaces but I chose to leave them out.

MiroRauhala has answered your direct question, but maybe you should rethink how your app is structured.
Chrome apps don't have navigation like a normal site does. They have windows, and each window corresponds to a different html page. Instead of closing one window and opening a new one up with the exact same bounds, you could just have different divs within the one document which you hide and show as necessary.
I think changing your structure will lead to a simpler app in the long run.
If you do go with the separate window approach you will need to be careful. For example, if you add an id to a window and specify bounds, the bounds are only applied the first time it is shown. Afterwards it remembers the bounds. You can get around that by creating it hidden, then moving it, then showing it. You might run into other things like this as you're using the chrome apps platform in a way it wasn't designed for.

Embedding Ventus in WT

Hello fellow programmers! My goal is to embed a Ventus window manager (http://www.rlamana.es/ventus/), repo here (https://github.com/rlamana/Ventus) in a WT page (http://www.webtoolkit.eu/wt) and get the "Simple Example" running. I have the ventus window embedded in the WT page, however I am having a styling problem with the window. My guess this is a conflict with CSS of Ventus and WT. Which brings me here, as CSS is not my strong point. I am using visual studio2010 for my development, and I have the bare minimum of a WT project running, basically the hello world app with all the widgets ripped out of it. I've included all the CSS and JS that the simple.html example uses, and have been trying to figure out how to make it work with WT. Any help would be much appreciated!
void HelloApplication::InitInterface()
{
//Include the CSS
wApp->useStyleSheet("Ventus/examples/simple/css/normalize.css");
wApp->useStyleSheet("Ventus/examples/simple/css/simple.css");
wApp->useStyleSheet("Ventus/build/ventus.css");
wApp->useStyleSheet("Ventus/examples/simple/css/browseralert.css");
//Include the JS
wApp->require("Ventus/vendor/modernizr.js");
wApp->require("Ventus/vendor/jquery.js");
wApp->require("Ventus/vendor/handlebars.js");
wApp->require("Ventus/build/ventus.js");
WContainerWidget* root = this->root();
WContainerWidget* ventus_widget = new WContainerWidget(root);
//Widget ref
std::string ventus_widget_ref = ventus_widget->jsRef(); // is a text string that will be the element when executed in JS
std::string command = ventus_widget_ref + ".wm = new Ventus.WindowManager();";
//Create the window manager
ventus_widget->doJavaScript(command);
command = ventus_widget_ref + ".wm.createWindow({title: 'Ventus', x: 10, y: 10, width: 500, height: 500}).open();";
//You may also create new windows by creating container widgets and fromQuery function
//WContainerWidget* app_window = new WContainerWidget(wApp->root());
//command = ventus_widget_ref + ".wm.createWindow.fromQuery(" + app_window->jsRef() + ", {title: 'Ventus', x: 10, y: 10, width: 500, height: 500}).open();";
//You can then add widgets to the ventus window like any other WT container
//app_window->addWidget(app.get());
//Create a window
ventus_widget->doJavaScript(command);
}

Finally figured it out. When using WT instead of using "require" for loading CSS files, use "useStyleSheet".

PhotoSwipe use image to open gallery

Im looking for a solution too open the PhotoSwipe gallery with a
img link. So there is a IMG with a gallery icon. And i want if the
user click on it that the gallery open.
Have someone an idea how i can handel that?
I found this out. But this open on load the gallery.
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {
preventHide: true
},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
instance.show(0);
}, false);
}(window, window.Code.PhotoSwipe));
</script>
Best regargs

I just started working with photoSwipe so I am not positive this will work but it seems to me you only have to call instance.show(0) on a click event.
Assuming I have this element on the page: <a id="launch-gallery" href="#">Click to launch gallery</a> I could add this jQuery click event to launch the gallery:
$('#launch-gallery').click(function(evt){
evt.preventDefault(); // prevent regular click action
instance.show(0); // Make sure 'instance' variable is available to this function
});
If you are not using jQuery, you can do the same thing in native JavaScript (but a little more verbose).
I hope this helps.

Note that I use php (ajax) to deliver the image locations and sizes, so you'll still have to define the json data yourself.
This is how I did it with Jquery:
$('.element').off(); //in case it's a dynamically changing element
$('.element').on("click tap", function () {
var dataForPhpScript = $(this).parents('.gallery').attr("data-attr"); //data for php script
$.getJSON('urlToPHPFunction?dataID=' + dataForPhpScript, function (json) {
openPhotoSwipe(json);
});
});
And here is the photoswipe opening function:
function openPhotoSwipe(jsonData) {
var pswpElement = document.querySelectorAll('.pswp')[0];
// define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, jsonData, options);
gallery.init();
}
note that jsonData is supposed to look somewhat like this:
[
{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}
];
I realise this answer is late, but since this came on top while just googling something entirely different (but photoswipe related), I thought maybe this would be useful!