I am creating an welcomescreen for my html app. and im using a welcomescreen plugin from github. you can check it here https://github.com/valnub/welcomescreen.js
now i want to show welcome screen when localstorage value is 0. and when close button of welcomescreen is clicked i am changing the localstorage value to 1. but on page refresh the localstorage value is again set to 0.
how to do that this is my js file.
/*jslint browser: true*/
/*global console, Welcomescreen, $*/
// Init method
$(document).ready(function () {
localStorage.setItem("welscreen", "0");
var welcomeTour = localStorage.getItem("welscreen");
if (welcomeTour == 0) {
$(document).ready(function () {
var options = {
'bgcolor': '#0da6ec',
'fontcolor': '#fff',
'onOpened': function () {
console.log("welcome screen opened");
console.log(welcomeTour);
},
'onClosed': function () {
localStorage.setItem("welscreen","1");
var welcomeTour = localStorage.getItem("welscreen");
console.log("welcome screen closed");
console.log(welcomeTour);
}
},
welcomescreen_slides,
welcomescreen;
welcomescreen_slides = [
{
id: 'slide0',
picture: '<div class="tutorialicon">♥</div>',
text: 'Welcome to this tutorial. In the <a class="tutorial-next-
link" href="#">next steps</a> we will guide you through a manual that will teach you how to use this app.'
},
{
id: 'slide1',
picture: '<div class="tutorialicon">✲</div>',
text: 'This is slide 2'
},
{
id: 'slide2',
picture: '<div class="tutorialicon">♫</div>',
text: 'This is slide 3'
},
{
id: 'slide3',
picture: '<div class="tutorialicon">☆</div>',
text: 'Thanks for reading! Enjoy this app or go to <a class="tutorial-previous-slide" href="#">previous slide</a>.<br><br><a class="tutorial-close-btn" href="#">End Tutorial</a>'
}
];
welcomescreen = new Welcomescreen(welcomescreen_slides, options);
$(document).on('click', '.tutorial-close-btn', function () {
welcomescreen.close();
});
$('.tutorial-open-btn').click(function () {
welcomescreen.open();
});
$(document).on('click', '.tutorial-next-link', function (e) {
welcomescreen.next();
});
$(document).on('click', '.tutorial-previous-slide', function (e) {
welcomescreen.previous();
});
});
};
});
Change this:
localStorage.setItem("welscreen", "0");
var welcomeTour = localStorage.getItem("welscreen");
to this:
var welcomeTour = localStorage.getItem("welscreen");
if(welcomeTour === undefined || welcomeTour === null) {
localStorage.setItem("welscreen", "0");
welcomeTour = "0";
}
Related
I'm trying to open a Kendo UI kendoWindow from within an MVC View. I also use a Partial View as the content of the kendoWindow. Moreover, I use the Kendo UI MVVM pattern to bind my elements.
First let me to show you my main View and my pop-up Partial View (kendoWindow).
The important part of my main View (Parent) is as follows:
#{
ViewBag.Title = "My Main View";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/ViewModel/main.js"></script>
<script src="~/Scripts/InitView/main.js"></script>
<script type="text/javascript">
var viewModel;
$(function () {
viewModel = initVm({
GetPartialContent_Url: '#Url.Action("GetPartialContent")'
});
initView(viewModel);
kendo.bind($("#container"), viewModel);
viewModel.Onread();
});
</script>
<div id="container">
<div id="Window-box"></div>
// Some other elements like the button which opens the kendoWindow are defined here.
</div>
My initVm is as follows:
function initVm(arg) {
var vm = kendo.observable({
onOpenKendoWindow: function () {
$("#Window-box").kendoWindow({
iframe: true,
content: arg.GetPartialContent_Url,
title: 'Some Title',
width: 500,
height: 'auto',
close: function (e) {
//Is it possible to get some data from kendoWindow (Partial View) here?
}
});
var dialog = $("#Window-box").data("kendoWindow");
dialog.maximize();
}
});
return vm;
}
Until now, I showed you the important parts of my main View. Now I want to show you the important parts of my kendoWindow (Partial View).
My Partial View which is used as the content of the kendoWindow is as follows:
#{
Layout = "~/Views/Shared/_PartialLayout.cshtml";
}
<script src="~/Scripts/ViewModel/partial.js"></script>
<script src="~/Scripts/InitView/partial.js"></script>
<script type="text/javascript">
var partialVM;
$(function () {
partialVM = initPartialVm({
GetTransactions_Url: '#Url.Action("GetTransactions", "Account")'
});
initPartialView(partialVM);
kendo.bind($("#container"), partialVM);
});
</script>
<div id="container">
<div id="gridTransactions"></div>
</div>
And my initPartialVm is as follows:
function initPartialVm(arg) {
var vm = kendo.observable({
onSelectTransaction: function () {
// KendoWindow should be closed here and passing some data from here to main View (close event of kendowWindow);
}
});
return vm;
}
Note: The 'gridTransactions' is a Kendo UI GridView (inside of kendoWindow - Partial View). Each rows of this grid has a select button and the 'onSelectTransaction' function is fired when each of these select buttons is clicked.
And finally, the main question is that, how can I close the kendowWindow by clicking each select button of the GridView and pass some data to the close event of the kendowWindow?
Yes it is possible. I found it much easier and a bit cleaner to wrap all the dialog functionality up into a dialog controller and extend it a bit in javascript.
Once the .js part is done it makes for a cleaner use. If you don't prefer to do this then look for the findDialog function below (it shows how get a handle to a dialog and call the close method on it).
As far as sending data on close, It would be easy to add a callback in the dialog to be called when the dialog is closed, supplied on invocation, then add a property in the widget to set the custom data to pass through in the dialogs close() back to the consumers event handler.
Also, please note I am no javascript expert, it took me longer than I would like to admit to work the bugs out of this but it has held up solidly for about 6 years. Feel free to offer suggestions.
In Bundle Config:
bundles.Add(new ScriptBundle("~/bundles/myCustom").Include(
...
"~/Scripts/MyCustom/MyCustomDialogs.js",
...
));
Where you register scripts:
#Scripts.Render("~/bundles/MyCustom")
In your index view or parent view :
<div id="_applicationDialogs"></div>
<div id="_mainAppContentLoadsHere"></div>
var _mainDialogController;
$(document).ready(function () {
...
_mainDialogController = $("#_applicationDialogs").kendoMyCustomDialogController().data("kendoMyCustomDialogController");
...
}
Where you want to invoke the dialog: SomePartial
function lnkDetailsOnClick(someID) {
_mainDialogController.createDialog({
dialogId: "frmUserDetail_" + someID,
modal: false,
title:"Daily Details",
pin: true,
height: 575,
width: 1025,
actions: ["Refresh", "Maximize", "Minimize", "Pin", "Close"],
url: '#Url.Action("SomePartialView", "SomeController")',
data:{
someID: someID,
dialogName:'frmUserDetail_'+ someID //NOTE : This will come back in the invoked partial as Model.DialogName so it can be dismissed with ease.
}
});
}
Dismissing the Dialog Inside of SomePartial :
#model MyModelThatHasTheDialogHandle
function btnClose_Click() {
var dialog = _mainDialogController.findDialog('#Model.DialogName');
dialog.close();
}
Now for the long .js file :
(function ($) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget;
var MyCustomDialogController = Widget.extend({
init: function (element, options) {
var that = this;
Widget.fn.init.call(this, element, options);
that._create();
},
onResize: function () { },
options: {
modal: true,
dialogId: "dlgController1",
url: "",
data: null,
pin: false,
width: 300,
height: 300,
actions:["Close"],
title: "Information",
disableMaximize:false,
name: "MyCustomDialogController",
autosize: false,
onDialogClosed: null,
hideOnClose: false
},
_create: function () {
var that = this;
},
createDialog: function (options) {
var that = this;
var wrapperName = options.dialogId + "_wrapper";
that.element.append("<div id='" + wrapperName + "'></div>");
var wrapperElement = that.element.find("#" + wrapperName);
wrapperElement.kendo_MyCustomDialog(options);
},
findDialog: function (dialogId) {
that = this;
var wrapperName = dialogId+"_wrapper";
var dialog = $("#" + wrapperName);
//var dialog = wrapper.find("#" + dialogId);
return dialog.data("kendo_MyCustomDialog");
},
forceCloseAllDialogs: function ()
{
that = this;
$('.MyCustom-window').each(function () {
$(this).data("kendoWindow").close();
});
},
isModalWindowActive: function ()
{
that = this;
return $('.MyCustom-window-modal').length > 0;
},
currentModalWindow: function () {
that = this;
return that.findDialog($('.MyCustom-window-modal')[0].id);
}
});
ui.plugin(MyCustomDialogController);
})(jQuery);
(function ($) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget;
var _MyCustomDialog = Widget.extend({
init: function (element, options) {
var that = this;
Widget.fn.init.call(this, element, options);
that._create();
},
onResize: function () { },
options: {
modal: true,
dialogId: "frmMain",
url: "",
data: null,
pin: false,
width: 300,
height: 300,
actions: ["Close"],
title: "Information",
name: "_MyCustomDialog",
disableMaximize:false,
autosize: false,
onDialogClosed: null,
hideOnClose:false
},
_create: function () {
var that = this;
that.isModalWindowActive = true;
that.modifiedData = false;
that.frmElement = $("#" + that.options.dialogId).data("kendoWindow");
if (that.frmElement == null) {
var template ;
if(that.options.modal)
template = kendo.template(that._templates.divModalFormWrapper);
else
template = kendo.template(that._templates.divFormWrapper);
that.wrapper = $(template(that.options));
that.element.append(that.wrapper);
if (that.options.autosize)
{
that.options.height =null;
that.options.width = null;
}
that.frmElement = that.wrapper.kendoWindow({
title: "Loading...",
modal: that.options.modal,
visible: that.options.autosize,
draggable: true,
resizeable:!that.options.disableMaximize,
width: that.options.width,
height: that.options.height,
resizeable: true,
pinned:that.options.pin,
resize: function () {
that.onResize();
},
content: {
url: that.options.url,
data: that.options.data,
type: "POST",
datatype: "json",
traditional: true
},
refresh: function () {
that.frmElement.title(that.options.title);
if (that.options.autosize) {
that.frmElement.center();
}
},
actions: that.options.actions,
close: function (e) {
that.IsModalWindowActive = false;
if (that.options.hideOnClose == false) {
if (that.frmElement != null)
that.frmElement.destroy();
this.destroy();
that.wrapper.remove("#" + that.options.dialogId);
that.wrapper.empty();
}
if (that.options.onDialogClosed) {
that.options.onDialogClosed(that.modifiedData);
}
}
}).data("kendoWindow");
}
if (that.options.autosize)
that.frmElement.center().open();
else if (that.options.hideOnClose == true)
that.frmElement.open();
else
that.frmElement.center().open();
if (that.options.pin)
that.frmElement.pin();
},
setModifiedFlag:function(modified)
{
var that = this;
that.modifiedData = modified;
},
close: function () {
var that = this;
that.frmElement.close();
},
show: function () {
var that = this;
that.wrapper.show();
that.frmElement.open();
},
setTitle: function (title) {
var that = this;
that.frmElement.title(title);
},
height: function () {
var that = this;
var wtfHeight = that.frmElement.options.height;
if (isNaN(wtfHeight)) {
if (wtfHeight.indexOf("px") >= 0)
wtfHeight = wtfHeight.replace("px", "");
}
return wtfHeight;
},
_templates: {
divModalFormWrapper: "<div id='#=dialogId#' class='MyCustom-window MyCustom-window-modal'></div>",
divFormWrapper: "<div id='#=dialogId#' class='MyCustom-window'></div>"
}
});
// add the widget to the ui namespace so it's available
ui.plugin(_MyCustomDialog);
})(jQuery);
i want modification the base_calendar.js with new custom function like below
CalendarNotification = require('base_calendar.base_calendar');
console.log("Masuk sini bawah");
CalendarNotification.include({
'click .link2showed': function() {
console.log("ndak yo mlebu kene to");
var action = {
type: 'ir.actions.act_window',
res_model: 'crm.lead',
view_mode: 'form',
view_type: 'form',
views: [[false, 'form']],
res_id: 16644
};
this.do_action(action);
},
});
and this a base_calendar.js odoo addons
var Notification = require('web.notification').Notification;
var CalendarNotification = Notification.extend({
template: "CalendarNotification",
init: function(parent, title, text, eid) {
this._super(parent, title, text, true);
this.eid = eid;
this.events = _.extend(this.events || {}, {
'click .link2event': function() {
var self = this;
this.rpc("/web/action/load", {
action_id: "calendar.action_calendar_event_notify",
}).then(function(r) {
r.res_id = self.eid;
return self.do_action(r);
});
},
'click .link2recall': function() {
this.destroy(true);
},
'click .link2showed2': function() {
this.destroy(true);
this.rpc("/calendar/notify_ack");
},
});
},
});
How do I fix that and what causes it? I've been several times custom function JS like that and it worked well.
Thank in advance for any pointers.
I try build android and in some page I'll make edit from popup. Example if i click input it will show popup and on popup be found input text. After input some text and click OK data from input text will be sent to server. But I don't know how to make it.
This my HTML
<input class = "button" ng-click = "showPopup()">Add Popup Show />
And This my JS
$scope.showPrompt = function() {
var promptPopup = $ionicPopup.prompt({
title: 'Title',
template: 'Template text',
inputType: 'text',
inputPlaceholder: 'Placeholder'
});
promptPopup.then(function(res) {
console.log(res);
});
};
Can anybody help me to solve my problem ? Thanks
I had used ionicPopup show (hope it helps you) :
$scope.updateQ = function() {
var alertpop = $ionicPopup.show({
title: 'Quantity',
templateUrl: 'popup-template.html',
scope: $scope,
buttons: [{
text: '<p class="popup-p">Ok</p>',
type: 'button-positive',
onTap: function(e) {
//window.localStorage.setItem("tmpqty",$scope.product.quantity);
return $scope.product.quantity;
}
}, {
text: '<p class="popup-p">Cancel</p>',
type: 'popup-close',
onTap: function(e) {
//alert($scope.product.quantity);
//return 'cancel button'
$state.go('app.productdetail', { product_id: $scope.product_id }, { reload: false })
}
}]
});
alertpop.then(function(res) {
var tmp_qty = res;
var pid = $scope.product_id;
var url = "" + base_url + "?callback=JSON_CALLBACK&store=1&service=updatevproducts&productid=" + pid + "&qty=" + tmp_qty + "";
$http.jsonp(url)
.then(function(response) {
var stat = response.data;
if (stat.status == "success") {
var successPop = $ionicPopup.alert({
template: 'Inventory of Product Id : ' + pid + ' updated successfully !'
});
$state.go('app.stocks');
} else {
$state.go('app.productdetail', { product_id: $scope.product_id }, { reload: false });
}
});
});
};
I have shown a dropdown in my app using the selectfield control. It is working fine when we click the arrow button but when user taps on text (input area), keyboard also getting opened. It is not an input field.
Here is my code:
{
xtype: 'panel',
itemId: 'mypanel23',
listeners: {
fn: function (component, eOpts) {
component.add({
/***DropDown issue***/
xtype: sessionStorage.voiceOver == "on" ? 'panel' : 'selectfield',
/***DropDown issue***/
cls: 'myusage_select_list',
id: 'billedDD',
itemId: 'myselectfield',
hideOnMaskTap: true,
/***DropDown issue***/
html: sessionStorage.voiceOver == "on" ? "<select class='myusage_select_list' id='billedDD_Accessibility'></select>" : '',
/***DropDown issue***/
defaultPhonePickerConfig: {
cancelButton: {
text: BellMCare.util.config.getLocalizationValue('MobilityMyUsage_Cancel'),
listeners: {
tap: function () {
var uAgent = navigator.userAgent;
if (uAgent.match(/Alcatel/i)) {
this.up('picker').setHidden(true);
}
}
}
},
doneButton: {
//Sanity Issue - expiry date picker not working and screen struck
cls: 'pickerDoneBtn',
// Sanity Issue -End
text: BellMCare.util.config.getLocalizationValue('MobilityMyUsage_Done'),
listeners: {
tap: function () {
BellMCare.util.config.performanceLogs('PERFORMANCE LOGS | UI | Flow 4b | start ');
BellMCare.util.config.performanceLogs('PERFORMANCE LOGS | UI | Flow 4a or 4b | Changed dropdown started ');
var uAgent = navigator.userAgent;
if (uAgent.match(/Alcatel/i)) {
this.up('picker').setHidden(true);
}
}
}
}
},
listeners: {
change: function (selectfield, newValue, oldValue, eOpts) {
if (oldValue != null) {
/**Dropdown Issue**/
BellMCare.app.getController("mobilityMyUsage").onBillCycleDropDownChange();
/**Dropdown Issue**/
}
},
focus: function (comp) {
var uAgent = navigator.userAgent;
if (uAgent.match(/Alcatel/i)) {
if (comp.getPhonePicker().isHidden()) {
comp.getPhonePicker().setHidden(false);
}
}
}
}
});
/**Dropdown Issue**/
Ext.getCmp("billedDD").innerHtmlElement.dom.addEventListener("change", function () {
BellMCare.app.getController("mobilityMyUsage").onBillCycleDropDownChange();
});
/**Dropdown Issue**/
},
event: 'initialize'
}
}
I managed it by the following code:
initialize: function(fld){
var textboxEl = fld.element.query('input')[0];
textboxEl.setAttribute('readonly', true);
}
Please let me know, if you have any doubt.
Hi i'am working in Cordova v3.7 and themeablebrowser Cordova plugin
in want to get title of the page in themeablebrowser i can't get it. I have tried executeScript as specified in documentation but app crashes. here's what i have done so far.
function innAppInit(_url) {
app.Log('browser news link=' + _url);
if (_url == null) {
_url = 'http://apache.org';
}
var ref = cordova.ThemeableBrowser.open(_url, '_blank', {
backButtonCanClose: false,
hideForwardButton: true,
toolbarColor: '#239EC9',
titleColor: '#FFFFFF',
statusbarColor: '#239EC9',
navButtonAlign: 'left',
closeButtonAlign: 'right',
menuButtonAlign: 'right',
titleStaticText: 'Add New Web Page',
menuButtonImage: 'themeablebrowser_stub_menu',
menuButtonPressedImage: 'themeablebrowser_stub_menu_highlight',
closeButtonImage: 'themeablebrowser_stub_close',
closeButtonPressedImage: 'themeablebrowser_stub_close_highlight',
backButtonImage: 'themeablebrowser_stub_back',
backButtonPressedImage: 'themeablebrowser_stub_back_highlight',
// menuTitle: 'Add Url to list',
menuCancel: 'Cancel',
menuItems: [{
event: 'event_getURL',
label: 'Add'
}]
});
ref.addEventListener('loadstart', function(event) {
try {
app.Log('loadstart function');
$('.ui-loader').show();
} catch (e) {
app.ErrorLog(e);
}
});
ref.addEventListener('loadstop', function(event) {
try {
app.Log('loadstop function');
$('.ui-loader').hide();
ref.executeScript({
code: 'return document.title'
},
function(values) {
alert(values);
});
} catch (e) {
app.ErrorLog(e);
}
});
ref.addEventListener('event_getURL', function(event) {
try {
var url = event.url;
app.Log('get url=' + url);
ref.close();
} catch (e) {
app.ErrorLog(e);
}
});
ref.addEventListener('exit', function(event) {
try {
app.Log('exit function');
$('.ui-loader').hide();
} catch (e) {
app.ErrorLog(e);
}
});
}
This question has been raised and discussed on bug tracker.
https://github.com/initialxy/cordova-plugin-themeablebrowser/issues/8
The gist is that the script you execute should be
document.title
Not
return document.title