I`m building an app where I can click a Image and add a border to this image. I did it and when i click for the first time, the border changes, but second click does nothing.
The buttons on the bottom draw a new dice, and set dice border to no border.
I am saving a state in mutableListOf
Main Screen and Dices Composables:
#Composable
fun MainScreen() {
val viewModel = viewModel<DicesViewModel>()
val dice = viewModel.uiState.collectAsState()
Column {
Dices(dice = dice.value.dices, isSelected = dice.value.isSelected, onClick = { viewModel.isSelectedBehavior() })
Buttons(onTurnClick = { viewModel.drawDice() }, onQueueClick = { viewModel.drawDice() })
}
}
#Composable
fun Dices(#DrawableRes dice: MutableList<Int>, isSelected: MutableList<Boolean>, onClick: (Int) -> Unit) {
Column() {
Row() {
Image(painter = painterResource(id = dice[0]), contentDescription = "Dice", modifier = Modifier
.border(if (isSelected[0]) 2.dp else (-1).dp, Color.Black)
.clickable { onClick(0) })
ViewModel:
class DicesViewModel: ViewModel() {
private val _uiState = MutableStateFlow(DicesModel())
val uiState: StateFlow<DicesModel> = _uiState.asStateFlow()
fun isSelectedBehavior(index: Int = 0)
{
val list = DicesModel().isSelected
list[index] = !list[index]
_uiState.value = DicesModel(isSelected = list)
Log.d("ViewModel","$list")
}
}
Here are the logs from Run tab (the only one Log.d() is a few lines above).
D/ViewModel: [true, false, false, false, false, false] // click on image - border appears
D/ViewModel: [true, false, false, false, false, false] // click on image - nothing change (it will set first elemnt to false)
D/ViewModel: [true, false, false, false, false, false] // click on image - nothing change (it will set first elemnt to false)
D/ViewModel: [false, false, false, false, false, false] // click to button - border disappears
D/ViewModel: [true, false, false, false, false, false] // // click on image - border appears
And data class DicesModel:
data class DicesModel(
val isSelected : MutableList<Boolean> = mutableListOf(false, false, false, false, false, false)
)
I want to add or disable border after every click
Related
I tried adding an IconButton() and wanted to click the button to turn it on or off (while also clicking elsewhere to dismiss it)
But a funny qustion happend.
The trigger button is included in "Other Places", when I click the button to close the menu, this triggers onDismissRequest() first, and then triggers the button's onClick(), which makes me unable to close the menu (when clicked will instantly close and then open again)
Scaffold(
...
topBar = {
TopAppBar(
...
actions = {
var menuExpanded by remember { mutableStateOf(false) }
Box {
IconButton(onClick = { menuExpanded = !menuExpanded}) {
Icon(
painter = painterResource(id = R.drawable.menu),
contentDescription = "menu",
tint = white
)
}
DropdownMenu(
expanded = menuExpanded,
properties = PopupProperties(),
onDismissRequest = { menuExpanded = false }
) {
// items
}
}
}
)
}
) { ... }
I know I can set Modifier.offset() so that menu masks the button, but I don't want to do that.
What should I do?
This is what PopupProperties.focusable is for: true value prevents other views from getting tapped while the menu is open. By the way, this is the default value if you don't specify properties option.
DropdownMenu(
expanded = menuExpanded,
properties = PopupProperties(focusable = true),
onDismissRequest = { menuExpanded = false }
) {
Upon navigating to a view, I want the number pad to already be raised. Right now I have a solution that works the first time (albeit with a delay) but fails to raise the number pad if the user navigates back a second time. Is there a better way to raise the number pad in SwiftUI (or to have it always up)?
Example Code:
struct ParentView: View {
#FocusState var numberPadFocused: Bool
#State var isActive: Bool = false
var body: some View {
NavigationView {
VStack {
Button {
numberPadFocused = true
isActive = true
print("Called")
} label: {
Text("Navigate")
}
NavigationLink(destination: ChildView(focusState: $numberPadFocused), isActive: $isActive) { Color.white }
}
}
}
}
struct ChildView: View {
#State var text: String = ""
#FocusState.Binding var focusState: Bool
var body: some View {
TextField("Enter Number...", text: $text)
.keyboardType(.numberPad)
.focused($focusState)
}
}
So basically, i'm trying to get the position of the slide and then update the html by adding a class to that slide. But I can't figure out how to get the current position everytime I swipe, how to update the swipe_active data.
This is the vue js file.
mounted(){
let element = document.getElementById('mySwipe');
if (window.innerWidth< 550){
window.mySwipe = Swipe (element, {
startSlide: 1,
auto: 0,
autoRestart: true,
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: function(index, element) {},
transitionEnd: function(index, element) {}
});
}
this.swipe_active = window.mySwipe.getPos();
}
This is the html
<div :class="{black_swipe : swipe_active === 0 }"></div>
<div :class="{black_swipe : swipe_active === 1 }"></div>
mounted hook is called only once i.e when the component is finished mounting the DOM.
There is a callback property your have available in the config option you pass while creating a new Swipe instance. This property takes a function that will be called after every slide change
you can use this to update the swipe_active data.
mounted(){
let element = document.getElementById('mySwipe');
if (window.innerWidth< 550){
window.mySwipe = new Swipe (element, {
startSlide: 1,
auto: 0,
autoRestart: true,
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: this.swipeCallback,
transitionEnd: function(index, element) {}
});
}
this.swipe_active = window.mySwipe.getPos();
},
methods: {
swipeCallback(index, element){
this.swipe_active = window.mySwipe.getPos();
}
}
I have a table that shows a pop-up when the first cell is clicked like this:
$('#tblAllUsers tbody').on('click', 'td', function () {
var visIdx = $(this).index();
if (visIdx != 0) {
return false;
}
var par = this.parentNode.parentNode.id;
var oTable = $("#tblAllUsers").dataTable();
var rowIndex = $(this).closest('tr').index();
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
var name = aData[1];
if (name != '') {
GetUser(name, rowIndex, "#tblAllUsers");
}
else {
ErrorDialog("#MessageDialog", "#lblError", "The User ID is blank in that row.", "No User ID");
return false;
}
});
The pop-up allows the user to modify fields and save it, close the dialog and then return to the grid. If the dialog is canceled, data not saved, the scroll is maintained. But if the data is saved, and I am not reloading the table, the table moves to the top. The AJAX update function is within the pop-up:
$.ajax({
type: 'POST',
data: $("#formUserModification").serializeArray(),
url: '#Url.Action("UpdateUser")',
success: function (data) {
if (data.Errors === 'ERROR') {
ErrorDialog("#MessageDialog", "#lblError", "There was an error encountered in modifying the user, please try again later.", "Error");
}
else {
updateTable(data);
}
$("#divDetails").dialog('close');
},
beforeSend: function () {
$("#divOverlay").show();
},
complete: function () {
$("#divOverlay").hide();
}
});
The update function simply loads the row:
function updateTable(data) {
var tab = $("#tblAllUsers").dataTable();
tab.fnUpdate(data.LastName + ', ' + data.FirstName, data.RowIndex, 0);
tab.fnUpdate(data.ID, data.RowIndex, 2);
tab.fnUpdate(data.LocationText, data.RowIndex, 3);
tab.fnUpdate(data.SiteText, data.RowIndex, 4);
}
Is there a way with this setup to keep the scroll position?
I accomplished my goal by doing this:
Define a variable:
var scrollToPos;
In the dialog definition set the value when it is opened and place the scroll bar when it is closed:
$("#divAllUsersDetail").dialog({
autoOpen: false,
width: '90%',
resizable: false,
draggable: false,
title: 'Details',
position: { my: 'top', at: 'top+100' },
modal: true,
closeOnEscape: false,
open: function() {
scrollToPos = $("#divAllUsers").find(".dataTables_scrollBody").scrollTop();
},
close: function () {
$("#divAllUsers").find(".dataTables_scrollBody").scrollTop(scrollToPos);
},
show: {
effect: 'drop', direction: 'up'
},
hide: {
effect: 'fade', duration: 200
},
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
}).prev("ui-dialog-titlebar").css("cursor", "default");
This works famously.
I have used below code to simulate fixed header with vertical and horizontal scroll bars. See example on jsFiddle.
$('#liveTable').dataTable({
'bSort': false,
'destroy': true,
'aoColumns': [
{ sWidth: "85px", bSearchable: false, bSortable: false },
{ sWidth: "75px", bSearchable: false, bSortable: false },
{ sWidth: "80px", bSearchable: false, bSortable: false },
{ sWidth: "80px", bSearchable: false, bSortable: false },
{ sWidth: "85px", bSearchable: false, bSortable: false },
{ sWidth: "70px", bSearchable: false, bSortable: false },
{ sWidth: "70px", bSearchable: false, bSortable: false },
{ sWidth: "50px", bSearchable: false, bSortable: false }
],
'scrollY': 200,
'scrollX': true,
'info': false,
'paging': false
});
The above code is working fine in Desktop.
But in mobile devices when I scroll body of the content header part not moving accordingly. There is some delay (flickering effect) in header movement in mobile devices.
How to fix that header movement issue in mobile devices?
Try this if it works for you. It's the other way around, but it works. Maybe you'll just need to adjust width or whatsoever. Run it through jsFiddle to test it.
$.event.special.scrollstart = {
enabled: true,
setup: function() {
var thisObject = this,
$this = $( thisObject ),
scrolling,
timer;
function trigger( event, state ) {
scrolling = state;
var originalType = event.type;
event.type = scrolling ? "scrollstart" : "scrollstop";
$.event.handle.call( thisObject, event );
event.type = originalType;
}
$this.bind( scrollEvent, function( event ) {
if ( !$.event.special.scrollstart.enabled ) {
return;
}
if ( !scrolling ) {
trigger( event, true );
}
clearTimeout( timer );
timer = setTimeout(function() {
trigger( event, false );
}, 50 );
});
}
};
Ok, if the flickering effect exists, try something like this. Your scroll is ok. It's the effect that sucks.
document.getElementById("btn").addEventListener("click", function(){
var abc = document.getElementById("abc");
var def = document.getElementById("def");
abc.style["-webkit-transition-duration"] = "0ms";
def.style["-webkit-transition-duration"] = "0ms";
abc.style["-webkit-transform"] = "translate3d(0, 0, 0)";
def.style["-webkit-transform"] = "translate3d(100%, 0, 0)";
setTimeout(function(){
abc.style["-webkit-transition-duration"] = "1s";
def.style["-webkit-transition-duration"] = "1s";
abc.style["-webkit-transform"] = "translate3d(-100%, 0, 0)";
def.style["-webkit-transform"] = "translate3d(0, 0, 0)";
},
);
});