Category: javascript

We have a web page with an input element on a webview App on Android.

If the input text is not empty, has text, you can touch and the clipboard manager is launched and shows:
When clipboard is empty “select all”
When clipboard is full “paste, select all”

BUT, when the input text is empty you can not launch the clipboard manager in order to paste text.

Should I implement onLongClick on Android webview app? if yes, what is the code to simply launch the Android Clipboard Manager?

Should I add an html paste button and solve it with html code?

How to return an array with the step of the sum of the previous value?

I have an input number that is 1000
I want to get [1000, 2000, 3000 … 10000]

I’m trying to:

  const range = (i: number, o: number) => {
    const arr = [0, 1, 2, 3, 4].reduce(
      (accumulator: any, currentValue: any, index: any, array: any) => {
        console.log((array[index] = accumulator + currentValue));
        return 1;
      },
      10000
    );
  };

  range(1000, 10000);

I use react and jsx. my question is how jsx is a valid js syntax? only way that I think it’s maybe true, is that react compiles all the file and converts jsx(s) to valid js. like what C preprocessor does with macros. is it true? and if it is true, is it right that we consider react as js library? I think it is higher level of a library.

if No, who it is done?

Using webglmultisamplerendertarget with outlinepass can cause problems
page delay effect

What is the best approach or best practice to consume a REST API within a multi-paged website on client side?

Lets assume I have the following REST API defined

/product -> all products, high level information 
/product/{id} -> detailed product information about product with given id

Further assume that my website has two .html pages, index.html and detail.html.

Inside the index.html I would query all products with high level information from my REST API with an AJAX call in Javascript. I then alter a table element inside the index.html page with the received JSON and display the high level information of each product inside this table.

Each table entry also has a link to the detailed product information, e.g. url/products/42.

Now to the interesting part. If I press the link of one specific product and want to show the detail.html page with detailed information about the pressed product id, how to I tell the Javascript inside detail.html which product the user pressed and is to be queried from the REST API?

I know how I perform these REST API calls in a native mobile app, since I always know, which element a user has pressed. I am a little bit lost how to do this on a multi paged website application.

Thanks to enrich my mind 🙂

I am currently unable to run gatsby on mac m1. it ends with this error

bootstrap finished - 24.261s
 [=============------------] 69/137 2.8 s 25 /s 50% Generating image thumbnails[1]    78105 segmentation fault  npm run build

I have typescript + React app. I’m using google-map-react library. It’s very easy to use and I love it. So far I was able embed a map and put a custom dot on a map of specific location. What I want is by clicking on this dot get a direction to this spot on google maps. I don’t care if google map will open in a new tab and so on and so far. What I’m thinking is by knowing lat and lng generate a link of this specific spot and redirect to it. But how to generate this link ?

Is there a library fixture or maybe google Api ?

i’m using vuejs2. Try to hide the button before or after reach the amount of value, but i can’t event get the data length to compare with limit. I try to re-assign it into an array, still not work cause the length is 1. Any idea how to do or different way to do that? Thanks

export default {
  name: 'SlideEvents',
  props: {
    dataEvents: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      limit: 6
    }
  },
  components: {
    CardSlide
  },
  computed: {
    dataFilter () {
      if (this.dataEvents) {
        return this.dataEvents.slice(0, this.limit)
      } else {
        return this.dataEvents
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div class="container-fluid more-top">
    <div class="row">
      <div class="col-md-12">
        <div class="card box-simple border-0">
          <h2>Agenda Terbaru</h2>
          <div class="mt-5 mb-5">
            <div class="row row-cols-1 row-cols-md-3 g-5 mt-2 px-4">
            
              <CardSlide class="mb-4" v-for="each in dataFilter"
              :key="each.id"
              :content="each" />
            </div>
            <button @click="limit*=2">Show More</button>
          </div>
        </div>
      </div>
    </div>
  </div>

I have built a table in which user enter’s values in first three Cols and next four get’s calculated. Till here it is working Fine but when I change a respective value in a Col the corresponding Col’s calculated value does not change and the problem which arises after deleting is the row get’s deleted but it’s value shift’s in the below row

  const row1 = [];
  const [row, setRow] = useState();
  const [NewRow2, setNewRow2] = useState([0, 1, 2, 3, 4]);
  const [allRowsAdded, updateAllRows] = useState(5);

  const [IntensificationRatio, setIntensificationRatio] = useState()

  const [editFormData, setEditFormData] = useState({
    Injection_Speed: "",
    Fill_Time: "",
    Peak_Inj_Press: "",
    Viscosity: "",
    Shear_Rate: ""
  })

  const [isRowId, setIsRowId] = useState(null)

  const handleEditFormChange = (event) => {
    event.preventDefault();
    const fieldName = event.target.getAttribute("name");
    const fieldValue = event.target.value;
    const newFormData = { ...editFormData };
    newFormData[fieldName] = fieldValue;
    setEditFormData(newFormData);
  }

  const handleEditFormSubmit = (event) => {
    event.preventDefault();
    const editedValue = {
      id: isRowId,
      Injection_Speed: editFormData.Injection_Speed,
      Fill_Time: editFormData.Fill_Time,
      Peak_Inj_Press: editFormData.Peak_Inj_Press,
      Viscosity: editFormData.Fill_Time * editFormData.Peak_Inj_Press * IntensificationRatio,
      Shear_Rate: 1 / editFormData.Fill_Time,
    }
    const newValues = [...NewRow2];
    const index = NewRow2.findIndex((value) => value === isRowId)
    newValues[index] = editedValue;
    setNewRow2(newValues);
    console.log(newValues)

  }

In this part of code “row1” array and “row” variable is to serve the purpose of increasing row’s as per user’s need. “NewRow2” is the actual array using which row’s are created and values are entered in them. “allRowsAdded” is to keep the track of row’s getting added so that the “id” doesn’t clash. The “IntensificationRatio” is needed to Calculate Viscosity as you can see in the ” handleEditFormSubmit” function.

<tr key={rowId} onClick={() => setId(rowId)}>

<td> {rowId} </td>

<td> <input type='text' className="form-control" defaultValue={NewRow2[rowId].Injection_Speed} name="Injection_Speed" onChange={handleEditFormChange} /> </td>

<td> <input type='text' className="form-control" defaultValue={NewRow2[rowId].Fill_Time} name="Fill_Time" onChange={handleEditFormChange} /></td>

<td><input type='text' className="form-control" defaultValue={NewRow2[rowId].Peak_Inj_Press} name="Peak_Inj_Press" onChange={handleEditFormChange} /> </td>

<td> <input type='text' className="form-control" name="Viscosity" value={isNaN(Math.round(element.Viscosity)) ? '-' : Math.round(element.Viscosity)} readOnly /> </td>

<td>  <input type='text' className="form-control" name="Shear_Rate" value={isNaN(Number(element.Shear_Rate)) ? '-' : Number(element.Shear_Rate).toFixed(3)} readOnly /> </td>

<td> <input type='text' name="Absolute_Viscosity" value={rowId === 0 ? '-' : (isNaN(Math.round(NewRow2[rowId - 1].Viscosity - NewRow2[rowId].Viscosity)) ? '-' : Math.round(NewRow2[rowId - 1].Viscosity - NewRow2[rowId].Viscosity))} className="form-control" readOnly /></td>

<td> <input type='text' name="Drop_Viscosity" value={rowId === 0 ? '-' : (isNaN(Number(((NewRow2[rowId - 1].Viscosity - NewRow2[rowId].Viscosity) * 100) / (NewRow2[rowId - 1].Viscosity))) ? '-' : (Number(((NewRow2[rowId - 1].Viscosity - NewRow2[rowId].Viscosity) * 100) / (NewRow2[rowId - 1].Viscosity))).toFixed(1))} className="form-control" readOnly /></td>

<td> <i className="fa fa-trash viscocity_icons" onClick={() => deleteRow2(element)}></i> </td>
</tr>

This is the Table Row with Table data’s 1st Three input field’s are editable and hence contain a “onChange” and the rest 4 are readOnly.
What changes should i make so that i can edit and delete.

CodeSandBox Link :

https://codesandbox.io/s/solitary-architecture-zur17?file=/src/App.js:77-111

I’m trying to switch between list view and grid view using the code below:

// List view
<button className={styles.viewBtn `${view === 'list' ? 'active': ''}`} onClick={() => setView('list')} type="button" title="List View">
     // <svg>
</button>

// Grid view
<button className={styles.viewBtn `${view === 'grid' ? 'active': ''}`} onClick={() => setView('grid')} type="button" title="Grid View">
    // <svg>
</button>

So to style the buttons I do import styles from ./styles.less and here’s my css for the buttons:

.viewBtn {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    border-radius: 4px;
    background-color: transparent;
    border: none;
    color: var(--main-color);
    margin-left: 8px;
    transition: .2s;
    
    &.active {
      background-color:  rgba(195, 207, 244, 0.2);
      color: #fff;
    }
    
    &:not(.active):hover {
      background-color:  rgba(195, 207, 244, 0.1);
      color: #fff;
    }
}

How do I switch between .active and :not(.active) for the style of the buttons? And would .active work in React?

Test Code:

let pim = await PassiveIncomeMethod.new(
        u.admin.address,
        "Test Method",
        sf.host.address,
        sf.agreements.cfa.address,
        daix.address
    );

    app = await Proposal.new(
        "Test project",
        "Test description.",
        1000000,
        10000,
        pim.address,
        3600 * 3 // deadline of 3 days in seconds
    );

I am using truffle to try and test a contract “Proposal” that needs the address of another contract “PassiveIncomeMethod”. I’m trying to create a PassiveIncomeMethod contract and then hand off the address to Proposal but I’m unsure of how to correctly pass the address. I’m currently getting the error:

TypeError: Cannot read properties of undefined (reading 'address')
at appStatus (test/Proposal.test.js:137:49)
at Context.<anonymous> (test/Proposal.test.js:168:19)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)

I have a custom conversion for text to convert it into span elements, but this conversion is not able to handle the nested span elements inside the p tag.

This is the given HTML data, the span‘s are nested in this

<p style="font: 10pt Times New Roman, Times, Serif; margin: 0pt 0;" xvid="f5ea22ec52553bc61525766b631e126f" class="">
    <span xvid="d224e02f7a225aa9bdc51ec18daded3d" data-fact="619959c0062c677faebd7b57" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate" class="">
        <span xvid="2b80c95cd4b851345ba4c3fe6937d30b" class="wrapped manual-map" data-fact="619959c0062c677faebd7b55">November 1, 2021</span>
    </span>
</p>

Output i get from the editor,here the span‘s are split instead of being nested.

<p style="font: 10pt Times New Roman, Times, Serif; margin: 0pt 0;" xvid="f5ea22ec52553bc61525766b631e126f">
    <span xvid="2b80c95cd4b851345ba4c3fe6937d30b" data-fact="619959c0062c677faebd7b55" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate">November 1, 2021</span>
    <span xvid="d224e02f7a225aa9bdc51ec18daded3d" data-fact="619959c0062c677faebd7b57" conceptid="619959bc062c677faebd7a6f" xbrlid="rr:ProspectusDate">&nbsp;</span>
</p>
'

This the conversion i have written for the text,here the

 const allowedAttrModelView = {
      'xvid': 'xvid',
       ....etc
}
    for (const [modelAttr, viewAttr] of Object.entries(allowedAttrModelView)) {
      conversion.for("downcast").attributeToElement({
        model: {
          key: modelAttr,
          name: "$text",
        },
        view: (value, {writer}) => {
          const attrs = {};
          attrs[viewAttr] = value;
          console.log(attrs);
          return writer.createAttributeElement("span", attrs, {
            priority: 7,
          });
        },
        converterPriority: "highest",
      });
    }

The confusing part for me is the dot notation. The dot notation is used for accessing property values of an object, which is also used in finding a length of an array

const numbers =[23,45,76,78];
console(numbers.length);

I am using the code below to reload a screen when each time it’s in focus. This works fine except when I make changes to the file during development then I get the error shown below the code example. Not sure if this matters since I won’t be saving the file while people are actually using the app. Can’t see pushing this out into production though with this issue, any help would be appreciated.

this.focusListener = navigation.addListener('didFocus', () => {

    fetchData();

});

Error message when saving file in development:

TypeError: undefined is not an object (evaluating '_this.focusListener = navigation.addListener('didFocus', function () {
        fetchData();
      })')

My app completely blows up and I have to reload it. Using Expo if that matters.

i am tying to implement dropdown

here is the image

now i want to add active class to option 1 and on keypress event like up and down i want to move between options

here is what i have tried

  useEffect(() => {
    let btns = document.getElementsByClassName("list-item");
    console.log(btns[3]);
    for (var i = 0; i < btns.length; i++) {
      btns[0].classList.add("active");
      btns[i].addEventListener("keydown", function (e) {
        if (e.key === 38 || e.key === 40) {
          var current = document.getElementsByClassName("active");
          current[0].className = current[0].className.replace("active", "");
          this.className += "active";
        }
      });
    }

  });

here is how i am rendering dropdown list

  const options = ["Option1", "Option2", "Option3", "Option4"];

 {open && (
            <ul className="list" id="lists">
              {options.map((option, i) => (
                <li
                  onClick={() => {
                    setSelected(option);
                    setOpen(false);
                  }}
                  className="list-item"
                >
                  {option}
                </li>
              ))}
            </ul>
          )}

please help me i am stuck here from 2 days.
i can add active class to first option but it is not switching on up and down key press

thanks in advance