Category: javascript

This is not a beginner question. With that being said, let’s start with some context.

Context

There are the times we need to create a website with lots of duplicated elements in it. And sometimes, the elements remain exact same looking, even the nested nodes are the exact same. In these cases, this can in theory be optimized by having the elements point to the same memory. Maybe except for the exact positions of the elements that are not shared, allowing the elements to have different positions. Having cloned elements created this way will allow high performance rendering of the elements, because the processing of an element can be reused on the cloned elements.

My specific question(s)

Are there any ways to do the cloning as described in the context section above in the current implementation of DOM renderer, and is supported by any major browser? If not, are there any other technologies on the web that we may use to improve the rendering regarding duplicated elements? And briefly describe how? I don’t want any code.

I am thinking about Canvas and the other technologies utilizing it such as ThreeJS together with WASM to create something that supports this. But then I think again, is replacing the original DOM renderer the only way to achieve this?

I’m trying to write a Tampermonkey script to extend a business web app I use. In a very basic sense, certain URL’s appear on the page, I need to extract a number from the URL then use than number to build a new link and append to the parent element.

So far I have this but it’s not working when I click on the element (pagination just an UL) or on document load. I know the function works as when I set it to run on clicking anywhere in the document it works. It’s almost like the page isn’t fully loaded when JS reports it is loaded.

(function() {
    'use strict';

    //get the pagination element
    var element = document.getElementsByClassName('pagination-sm');
    element.onclick = createLinks;
    document.onload = createLinks;

    function createLinks() {
    var links = document.querySelectorAll ("a[href*='/Field/POPendingCreate/']");

        for (var J = links.length-1; J >= 0; --J) {
            var thisLink = links[J];
            console.log(thisLink.href);
            var ppon = thisLink.href.match(/d+/)[0];
            console.log(ppon);

            var a = document.createElement('a');
            var linkText = document.createTextNode("Preview Order");
            a.appendChild(linkText);
            a.title = "Preview Order";
            a.href = "https://website.com/Field/DownloadPendingPO?POPPKeyID=" + ppon + "&co=1&po=" + ppon;
            a.target = "_blank";

            var parentNode = thisLink.parentNode;
            console.log(parentNode);
            parentNode.appendChild(a);

        }
    }

 })();

The UL element just looks like this:

<ul uib-pagination="" items-per-page="formData.itemPerPage" class="pagination-sm ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope pagination ng-not-empty" data-total-items="pendingList.length" data-ng-model="formData.currentPage" data-max-size="10" data-ng-if="!attachmentView &amp;&amp; filteredDocuments.length > 0" role="menu"><!-- ngIf: ::boundaryLinks -->
<!-- ngIf: ::directionLinks --><li role="menuitem" ng-if="::directionLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="pagination-prev ng-scope disabled"><a href="" ng-click="selectPage(page - 1, $event)" ng-disabled="noPrevious()||ngDisabled" uib-tabindex-toggle="" class="ng-binding" disabled="disabled" tabindex="-1">Previous</a></li><!-- end ngIf: ::directionLinks -->
<!-- ngRepeat: page in pages track by $index --><li role="menuitem" ng-repeat="page in pages track by $index" ng-class="{active: page.active,disabled: ngDisabled&amp;&amp;!page.active}" class="pagination-page ng-scope active"><a href="" ng-click="selectPage(page.number, $event)" ng-disabled="ngDisabled&amp;&amp;!page.active" uib-tabindex-toggle="" class="ng-binding">1</a></li><!-- end ngRepeat: page in pages track by $index -->
<!-- ngIf: ::directionLinks --><li role="menuitem" ng-if="::directionLinks" ng-class="{disabled: noNext()||ngDisabled}" class="pagination-next ng-scope disabled"><a href="" ng-click="selectPage(page + 1, $event)" ng-disabled="noNext()||ngDisabled" uib-tabindex-toggle="" class="ng-binding" disabled="disabled" tabindex="-1">Next</a></li><!-- end ngIf: ::directionLinks -->
<!-- ngIf: ::boundaryLinks -->
</ul>

As I said above the function works as expected when I set it to run on clicking anywhere on the document. More puzzling to me is that it doesn’t work when using document.onload. It’s like the page only starts loading data in once I start interacting with it. The reason why I’m trying to have the function run when clicking on the pagination is because the page appears to get all the data and store it somewhere (I can’t see) then just flicks through the pages when paginating. So once the pagination is clicked I really need to run the function on the links that are generated on the new page.

Seems like I need to delay running document.onload or some other way of knowing once the document data has loaded and also work out why it won’t run when clicking on the UL pagination element?

I’m using chart.js 4.2.1 to create a scatter plot as follows:

HTML element:

<div class="chart-container" id="chart">
     <canvas id="myChart"></canvas>
</div>

Javascript:

const data = {
    datasets: [{
        backgroundColor: 'rgb(52, 110, 235)',
        borderColor: 'rgb(52, 110, 235)',
        data: {{ data }},
        pointRadius: 1,
    }]
};
const config = {
    type: 'scatter',
    data: data,
    options: {  maintainAspectRatio: true,
                events: [],
                plugins:{
                    legend: {
                        display: false
                    }
                },
                scales:{
                    x: {
                        display: false
                    },
                    y: {
                        display: false
                    }
                }
             }
};
const myChart = new Chart(
    document.getElementById('myChart'),
    config
);

Now, I would like to add a line plot on top of the scatter plot at runtime. Using Flask I’m sending the points for the line plot to the webpage as follows (x and y are floats):

newlist = [{'x': x, 'y': y}]
blob = str(newlist).replace(''', '')

I would like to create the line plot as follows:

• When the first point (blob) is received the point should be drawn in green and highlighted (e.g., 3 times blinking).
• When the second point is received the point should be drawn in red and highlighted (e.g., 3 times blinking) and then a red line between the first and second point should be drawn.
• When the third point is received the point should be drawn in red and highlighted (e.g., 3 times blinking) and then a red line between the second and third point should be drawn.
• Same procedure for all other points but only the 10 last points should be kept. So if 10 points are visualized the oldest point and the corresponding line should be removed.

How can this be done?

I have some code as follows, and everything works properly except for setting the left and top styles.

            overlay.style.position = "absolute"; //works
            overlay.style.visibility = "visible"; //works
            overlay.style.left = toString(bounds.left) + "px"; //doesn't work
            overlay.style.top = toString(bounds.top) + "px"; //doesn't work
            overlay.style.width = products[i].offsetWidth + "px"; //works
            overlay.style.height = products[i].offsetHeight + "px"; //works
            overlay.style.margin = localstyle.margin; //works

bounds is the return value of getBoundingClientRect for a div, and I have checked and confirmed that bounds.left and bounds.top have values. Everything else works fine, so overlay exists and is the correct element. When I view the resulting style of the element in testing, the left and top are simply not there.

Example output of checking the style in console

    "0": "position",
    "1": "visibility",
    "2": "width",
    "3": "height",
    "4": "margin-top",
    "5": "margin-right",
    "6": "margin-bottom",
    "7": "margin-left",
    "accentColor": "",
    "additiveSymbols": "",
    "alignContent": "",
    "alignItems": "",
    "alignSelf": "",
    "alignmentBaseline": "",
    "all": "",
    "animation": "",
    "animationComposition": "",
    "animationDelay": "",
    "animationDirection": "",
    "animationDuration": "",
    "animationFillMode": "",
    "animationIterationCount": "",
    "animationName": "",
    "animationPlayState": "",
    "animationTimingFunction": "",
    "appRegion": "",
    "appearance": "",
    "ascentOverride": "",
    "aspectRatio": "",
    "backdropFilter": "",
    "backfaceVisibility": "",
    "background": "",
    "backgroundAttachment": "",
    "backgroundBlendMode": "",
    "backgroundClip": "",
    "backgroundColor": "",
    "backgroundImage": "",
    "backgroundOrigin": "",
    "backgroundPosition": "",
    "backgroundPositionX": "",
    "backgroundPositionY": "",
    "backgroundRepeat": "",
    "backgroundRepeatX": "",
    "backgroundRepeatY": "",
    "backgroundSize": "",
    "basePalette": "",
    "baselineShift": "",
    "baselineSource": "",
    "blockSize": "",
    "border": "",
    "borderBlock": "",
    "borderBlockColor": "",
    "borderBlockEnd": "",
    "borderBlockEndColor": "",
    "borderBlockEndStyle": "",
    "borderBlockEndWidth": "",
    "borderBlockStart": "",
    "borderBlockStartColor": "",
    "borderBlockStartStyle": "",
    "borderBlockStartWidth": "",
    "borderBlockStyle": "",
    "borderBlockWidth": "",
    "borderBottom": "",
    "borderBottomColor": "",
    "borderBottomLeftRadius": "",
    "borderBottomRightRadius": "",
    "borderBottomStyle": "",
    "borderBottomWidth": "",
    "borderCollapse": "",
    "borderColor": "",
    "borderEndEndRadius": "",
    "borderEndStartRadius": "",
    "borderImage": "",
    "borderImageOutset": "",
    "borderImageRepeat": "",
    "borderImageSlice": "",
    "borderImageSource": "",
    "borderImageWidth": "",
    "borderInline": "",
    "borderInlineColor": "",
    "borderInlineEnd": "",
    "borderInlineEndColor": "",
    "borderInlineEndStyle": "",
    "borderInlineEndWidth": "",
    "borderInlineStart": "",
    "borderInlineStartColor": "",
    "borderInlineStartStyle": "",
    "borderInlineStartWidth": "",
    "borderInlineStyle": "",
    "borderInlineWidth": "",
    "borderLeft": "",
    "borderLeftColor": "",
    "borderLeftStyle": "",
    "borderLeftWidth": "",
    "borderRadius": "",
    "borderRight": "",
    "borderRightColor": "",
    "borderRightStyle": "",
    "borderRightWidth": "",
    "borderSpacing": "",
    "borderStartEndRadius": "",
    "borderStartStartRadius": "",
    "borderStyle": "",
    "borderTop": "",
    "borderTopColor": "",
    "borderTopLeftRadius": "",
    "borderTopRightRadius": "",
    "borderTopStyle": "",
    "borderTopWidth": "",
    "borderWidth": "",
    "bottom": "",
    "boxShadow": "",
    "boxSizing": "",
    "breakAfter": "",
    "breakBefore": "",
    "breakInside": "",
    "bufferedRendering": "",
    "captionSide": "",
    "caretColor": "",
    "clear": "",
    "clip": "",
    "clipPath": "",
    "clipRule": "",
    "color": "",
    "colorInterpolation": "",
    "colorInterpolationFilters": "",
    "colorRendering": "",
    "colorScheme": "",
    "columnCount": "",
    "columnFill": "",
    "columnGap": "",
    "columnRule": "",
    "columnRuleColor": "",
    "columnRuleStyle": "",
    "columnRuleWidth": "",
    "columnSpan": "",
    "columnWidth": "",
    "columns": "",
    "contain": "",
    "containIntrinsicBlockSize": "",
    "containIntrinsicHeight": "",
    "containIntrinsicInlineSize": "",
    "containIntrinsicSize": "",
    "containIntrinsicWidth": "",
    "container": "",
    "containerName": "",
    "containerType": "",
    "content": "",
    "contentVisibility": "",
    "counterIncrement": "",
    "counterReset": "",
    "counterSet": "",
    "cursor": "",
    "cx": "",
    "cy": "",
    "d": "",
    "descentOverride": "",
    "direction": "",
    "display": "",
    "dominantBaseline": "",
    "emptyCells": "",
    "fallback": "",
    "fill": "",
    "fillOpacity": "",
    "fillRule": "",
    "filter": "",
    "flex": "",
    "flexBasis": "",
    "flexDirection": "",
    "flexFlow": "",
    "flexGrow": "",
    "flexShrink": "",
    "flexWrap": "",
    "float": "",
    "floodColor": "",
    "floodOpacity": "",
    "font": "",
    "fontDisplay": "",
    "fontFamily": "",
    "fontFeatureSettings": "",
    "fontKerning": "",
    "fontOpticalSizing": "",
    "fontPalette": "",
    "fontSize": "",
    "fontStretch": "",
    "fontStyle": "",
    "fontSynthesis": "",
    "fontSynthesisSmallCaps": "",
    "fontSynthesisStyle": "",
    "fontSynthesisWeight": "",
    "fontVariant": "",
    "fontVariantAlternates": "",
    "fontVariantCaps": "",
    "fontVariantEastAsian": "",
    "fontVariantLigatures": "",
    "fontVariantNumeric": "",
    "fontVariationSettings": "",
    "fontWeight": "",
    "forcedColorAdjust": "",
    "gap": "",
    "grid": "",
    "gridArea": "",
    "gridAutoColumns": "",
    "gridAutoFlow": "",
    "gridAutoRows": "",
    "gridColumn": "",
    "gridColumnEnd": "",
    "gridColumnGap": "",
    "gridColumnStart": "",
    "gridGap": "",
    "gridRow": "",
    "gridRowEnd": "",
    "gridRowGap": "",
    "gridRowStart": "",
    "gridTemplate": "",
    "gridTemplateAreas": "",
    "gridTemplateColumns": "",
    "gridTemplateRows": "",
    "height": "293px",
    "hyphenateCharacter": "",
    "hyphenateLimitChars": "",
    "hyphens": "",
    "imageOrientation": "",
    "imageRendering": "",
    "inherits": "",
    "initialLetter": "",
    "initialValue": "",
    "inlineSize": "",
    "inset": "",
    "insetBlock": "",
    "insetBlockEnd": "",
    "insetBlockStart": "",
    "insetInline": "",
    "insetInlineEnd": "",
    "insetInlineStart": "",
    "isolation": "",
    "justifyContent": "",
    "justifyItems": "",
    "justifySelf": "",
    "left": "",
    "letterSpacing": "",
    "lightingColor": "",
    "lineBreak": "",
    "lineGapOverride": "",
    "lineHeight": "",
    "listStyle": "",
    "listStyleImage": "",
    "listStylePosition": "",
    "listStyleType": "",
    "margin": "0px 27.6328px",
    "marginBlock": "",
    "marginBlockEnd": "",
    "marginBlockStart": "",
    "marginBottom": "0px",
    "marginInline": "",
    "marginInlineEnd": "",
    "marginInlineStart": "",
    "marginLeft": "27.6328px",
    "marginRight": "27.6328px",
    "marginTop": "0px",
    "marker": "",
    "markerEnd": "",
    "markerMid": "",
    "markerStart": "",
    "mask": "",
    "maskType": "",
    "mathDepth": "",
    "mathShift": "",
    "mathStyle": "",
    "maxBlockSize": "",
    "maxHeight": "",
    "maxInlineSize": "",
    "maxWidth": "",
    "minBlockSize": "",
    "minHeight": "",
    "minInlineSize": "",
    "minWidth": "",
    "mixBlendMode": "",
    "negative": "",
    "objectFit": "",
    "objectPosition": "",
    "objectViewBox": "",
    "offset": "",
    "offsetDistance": "",
    "offsetPath": "",
    "offsetRotate": "",
    "opacity": "",
    "order": "",
    "orphans": "",
    "outline": "",
    "outlineColor": "",
    "outlineOffset": "",
    "outlineStyle": "",
    "outlineWidth": "",
    "overflow": "",
    "overflowAnchor": "",
    "overflowClipMargin": "",
    "overflowWrap": "",
    "overflowX": "",
    "overflowY": "",
    "overrideColors": "",
    "overscrollBehavior": "",
    "overscrollBehaviorBlock": "",
    "overscrollBehaviorInline": "",
    "overscrollBehaviorX": "",
    "overscrollBehaviorY": "",
    "pad": "",
    "padding": "",
    "paddingBlock": "",
    "paddingBlockEnd": "",
    "paddingBlockStart": "",
    "paddingBottom": "",
    "paddingInline": "",
    "paddingInlineEnd": "",
    "paddingInlineStart": "",
    "paddingLeft": "",
    "paddingRight": "",
    "paddingTop": "",
    "page": "",
    "pageBreakAfter": "",
    "pageBreakBefore": "",
    "pageBreakInside": "",
    "pageOrientation": "",
    "paintOrder": "",
    "perspective": "",
    "perspectiveOrigin": "",
    "placeContent": "",
    "placeItems": "",
    "placeSelf": "",
    "pointerEvents": "",
    "position": "absolute",
    "prefix": "",
    "quotes": "",
    "r": "",
    "range": "",
    "resize": "",
    "right": "",
    "rotate": "",
    "rowGap": "",
    "rubyPosition": "",
    "rx": "",
    "ry": "",
    "scale": "",
    "scrollBehavior": "",
    "scrollMargin": "",
    "scrollMarginBlock": "",
    "scrollMarginBlockEnd": "",
    "scrollMarginBlockStart": "",
    "scrollMarginBottom": "",
    "scrollMarginInline": "",
    "scrollMarginInlineEnd": "",
    "scrollMarginInlineStart": "",
    "scrollMarginLeft": "",
    "scrollMarginRight": "",
    "scrollMarginTop": "",
    "scrollPadding": "",
    "scrollPaddingBlock": "",
    "scrollPaddingBlockEnd": "",
    "scrollPaddingBlockStart": "",
    "scrollPaddingBottom": "",
    "scrollPaddingInline": "",
    "scrollPaddingInlineEnd": "",
    "scrollPaddingInlineStart": "",
    "scrollPaddingLeft": "",
    "scrollPaddingRight": "",
    "scrollPaddingTop": "",
    "scrollSnapAlign": "",
    "scrollSnapStop": "",
    "scrollSnapType": "",
    "scrollbarGutter": "",
    "shapeImageThreshold": "",
    "shapeMargin": "",
    "shapeOutside": "",
    "shapeRendering": "",
    "size": "",
    "sizeAdjust": "",
    "speak": "",
    "speakAs": "",
    "src": "",
    "stopColor": "",
    "stopOpacity": "",
    "stroke": "",
    "strokeDasharray": "",
    "strokeDashoffset": "",
    "strokeLinecap": "",
    "strokeLinejoin": "",
    "strokeMiterlimit": "",
    "strokeOpacity": "",
    "strokeWidth": "",
    "suffix": "",
    "symbols": "",
    "syntax": "",
    "system": "",
    "tabSize": "",
    "tableLayout": "",
    "textAlign": "",
    "textAlignLast": "",
    "textAnchor": "",
    "textCombineUpright": "",
    "textDecoration": "",
    "textDecorationColor": "",
    "textDecorationLine": "",
    "textDecorationSkipInk": "",
    "textDecorationStyle": "",
    "textDecorationThickness": "",
    "textEmphasis": "",
    "textEmphasisColor": "",
    "textEmphasisPosition": "",
    "textEmphasisStyle": "",
    "textIndent": "",
    "textOrientation": "",
    "textOverflow": "",
    "textRendering": "",
    "textShadow": "",
    "textSizeAdjust": "",
    "textTransform": "",
    "textUnderlineOffset": "",
    "textUnderlinePosition": "",
    "textWrap": "",
    "top": "",
    "touchAction": "",
    "transform": "",
    "transformBox": "",
    "transformOrigin": "",
    "transformStyle": "",
    "transition": "",
    "transitionDelay": "",
    "transitionDuration": "",
    "transitionProperty": "",
    "transitionTimingFunction": "",
    "translate": "",
    "unicodeBidi": "",
    "unicodeRange": "",
    "userSelect": "",
    "vectorEffect": "",
    "verticalAlign": "",
    "viewTransitionName": "",
    "visibility": "visible",
    "webkitAlignContent": "",
    "webkitAlignItems": "",
    "webkitAlignSelf": "",
    "webkitAnimation": "",
    "webkitAnimationDelay": "",
    "webkitAnimationDirection": "",
    "webkitAnimationDuration": "",
    "webkitAnimationFillMode": "",
    "webkitAnimationIterationCount": "",
    "webkitAnimationName": "",
    "webkitAnimationPlayState": "",
    "webkitAnimationTimingFunction": "",
    "webkitAppRegion": "",
    "webkitAppearance": "",
    "webkitBackfaceVisibility": "",
    "webkitBackgroundClip": "",
    "webkitBackgroundOrigin": "",
    "webkitBackgroundSize": "",
    "webkitBorderAfter": "",
    "webkitBorderAfterColor": "",
    "webkitBorderAfterStyle": "",
    "webkitBorderAfterWidth": "",
    "webkitBorderBefore": "",
    "webkitBorderBeforeColor": "",
    "webkitBorderBeforeStyle": "",
    "webkitBorderBeforeWidth": "",
    "webkitBorderBottomLeftRadius": "",
    "webkitBorderBottomRightRadius": "",
    "webkitBorderEnd": "",
    "webkitBorderEndColor": "",
    "webkitBorderEndStyle": "",
    "webkitBorderEndWidth": "",
    "webkitBorderHorizontalSpacing": "",
    "webkitBorderImage": "",
    "webkitBorderRadius": "",
    "webkitBorderStart": "",
    "webkitBorderStartColor": "",
    "webkitBorderStartStyle": "",
    "webkitBorderStartWidth": "",
    "webkitBorderTopLeftRadius": "",
    "webkitBorderTopRightRadius": "",
    "webkitBorderVerticalSpacing": "",
    "webkitBoxAlign": "",
    "webkitBoxDecorationBreak": "",
    "webkitBoxDirection": "",
    "webkitBoxFlex": "",
    "webkitBoxOrdinalGroup": "",
    "webkitBoxOrient": "",
    "webkitBoxPack": "",
    "webkitBoxReflect": "",
    "webkitBoxShadow": "",
    "webkitBoxSizing": "",
    "webkitClipPath": "",
    "webkitColumnBreakAfter": "",
    "webkitColumnBreakBefore": "",
    "webkitColumnBreakInside": "",
    "webkitColumnCount": "",
    "webkitColumnGap": "",
    "webkitColumnRule": "",
    "webkitColumnRuleColor": "",
    "webkitColumnRuleStyle": "",
    "webkitColumnRuleWidth": "",
    "webkitColumnSpan": "",
    "webkitColumnWidth": "",
    "webkitColumns": "",
    "webkitFilter": "",
    "webkitFlex": "",
    "webkitFlexBasis": "",
    "webkitFlexDirection": "",
    "webkitFlexFlow": "",
    "webkitFlexGrow": "",
    "webkitFlexShrink": "",
    "webkitFlexWrap": "",
    "webkitFontFeatureSettings": "",
    "webkitFontSmoothing": "",
    "webkitHighlight": "",
    "webkitHyphenateCharacter": "",
    "webkitJustifyContent": "",
    "webkitLineBreak": "",
    "webkitLineClamp": "",
    "webkitLocale": "",
    "webkitLogicalHeight": "",
    "webkitLogicalWidth": "",
    "webkitMarginAfter": "",
    "webkitMarginBefore": "",
    "webkitMarginEnd": "",
    "webkitMarginStart": "",
    "webkitMask": "",
    "webkitMaskBoxImage": "",
    "webkitMaskBoxImageOutset": "",
    "webkitMaskBoxImageRepeat": "",
    "webkitMaskBoxImageSlice": "",
    "webkitMaskBoxImageSource": "",
    "webkitMaskBoxImageWidth": "",
    "webkitMaskClip": "",
    "webkitMaskComposite": "",
    "webkitMaskImage": "",
    "webkitMaskOrigin": "",
    "webkitMaskPosition": "",
    "webkitMaskPositionX": "",
    "webkitMaskPositionY": "",
    "webkitMaskRepeat": "",
    "webkitMaskRepeatX": "",
    "webkitMaskRepeatY": "",
    "webkitMaskSize": "",
    "webkitMaxLogicalHeight": "",
    "webkitMaxLogicalWidth": "",
    "webkitMinLogicalHeight": "",
    "webkitMinLogicalWidth": "",
    "webkitOpacity": "",
    "webkitOrder": "",
    "webkitPaddingAfter": "",
    "webkitPaddingBefore": "",
    "webkitPaddingEnd": "",
    "webkitPaddingStart": "",
    "webkitPerspective": "",
    "webkitPerspectiveOrigin": "",
    "webkitPerspectiveOriginX": "",
    "webkitPerspectiveOriginY": "",
    "webkitPrintColorAdjust": "",
    "webkitRtlOrdering": "",
    "webkitRubyPosition": "",
    "webkitShapeImageThreshold": "",
    "webkitShapeMargin": "",
    "webkitShapeOutside": "",
    "webkitTapHighlightColor": "",
    "webkitTextCombine": "",
    "webkitTextDecorationsInEffect": "",
    "webkitTextEmphasis": "",
    "webkitTextEmphasisColor": "",
    "webkitTextEmphasisPosition": "",
    "webkitTextEmphasisStyle": "",
    "webkitTextFillColor": "",
    "webkitTextOrientation": "",
    "webkitTextSecurity": "",
    "webkitTextSizeAdjust": "",
    "webkitTextStroke": "",
    "webkitTextStrokeColor": "",
    "webkitTextStrokeWidth": "",
    "webkitTransform": "",
    "webkitTransformOrigin": "",
    "webkitTransformOriginX": "",
    "webkitTransformOriginY": "",
    "webkitTransformOriginZ": "",
    "webkitTransformStyle": "",
    "webkitTransition": "",
    "webkitTransitionDelay": "",
    "webkitTransitionDuration": "",
    "webkitTransitionProperty": "",
    "webkitTransitionTimingFunction": "",
    "webkitUserDrag": "",
    "webkitUserModify": "",
    "webkitUserSelect": "",
    "webkitWritingMode": "",
    "whiteSpace": "",
    "whiteSpaceCollapse": "",
    "widows": "",
    "width": "497px",
    "willChange": "",
    "wordBreak": "",
    "wordSpacing": "",
    "wordWrap": "",
    "writingMode": "",
    "x": "",
    "y": "",
    "zIndex": "",
    "zoom": ""
}

I am trying to create a generic DTO class for sorting via query params, the generic accepts the schema class and the properties that are permitted to be sorted on. But as you know “K” in this case is union type which can not be iterated so creating the enum that will be passed to the “@IsEnum” is not possible at the moment. I am trying for hours but i can’t find the solution.

enum SortDirection {
  ASC = 'asc',
  DESC = 'desc',
}

export class SortQueryDto<T, K extends keyof T> {
  @IsEnum(K) // This doesn't work
  @IsNotEmpty()
  field: K;

  @IsEnum(SortDirection)
  @IsNotEmpty()
  direction: SortDirection;
}


export class TasksFilterQueryDto {
  @ValidateNested()
  @IsArray()
  @IsOptional()
  @Type(() => SortQueryDto)
  sorts?: SortQueryDto<
    Task,
    | 'createdAt'
    | 'updatedAt'
    | 'title'
    | 'approvedAt'
    | 'doneAt'
    | 'dueDate'
    | 'important'
  >[];
}

i have created a form and it should take the date that the form submit at and store it on mongoose server
every thing is ok but i want to change the form of the date it give me
Tue Jul 18 2023 00:00:00 GMT+0300 (Arabian Standard Time)
i want it to be like
Tuseday Jul 18 2023
const moduleSchema = new mongoose.Schema ({ title: String, content: String, createdAt: Date })
and the doc save is
` const doh = new Doh ({
title: newTitle,
content : newContent,
createdAt : Date.now
})

})`

i tried toLocaleDateString and it did’t work

I am trying to have a Bootstrap dropdown menu when a button is clicked. I have a component structure like this:

<>
   <div className='1'>
      <navbar/>

      <div>
         <homepage/>
      </div>
   </div>
</>

The button is inside the <navbar> component, which lives at the top of the page. When the button is clicked, the component’s state is changed, and another component is rendered (this component contains all the items in the drop down menu).

When I click the button, the drop down items show up – but, they are shown to the side of the button and are squished inside the <div> containing the <navbar> component (classname=1). I want the dropdown menu to be on top of everything, including the content in the <homepage> component (sort of overlayed on top).

How can I make this happen?

Edit:

For now, I am just using simple drop downs, like from: https://getbootstrap.com/docs/4.0/components/dropdowns/

HTML:

<div class="voxel-col-6 elemento_invisivel_tela_pequena">

            <div id="carouselExampleIndicators" class="carousel slide" data-bs-interval="false"  style="margin-bottom: 100px;">

                <div class="carousel-indicators">

                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>

                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>

                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>

                  </div>

                <div class="carousel-inner">

                    <div class="carousel-item active">

                        <div class="container_carousel">

                            <div class="conteudo_esquerdo_carousel">

                                <h2>Teste Slide 1?</h2>

                                <div class="texto_container">

                                    <p class="estilo_texto_card_2">Escrever aqui sobre o teste 1</p>

                                </div>

                                <div>

                                    <p class="estilo_link_card">

                                        <a href=https://auth.mindsight.com.br/trinus/accounts/login/ aria-label="acesse o teste" target="_blank" class="voxel-link" style="display: flex; align-items: center; margin-left:none!important;">acesse o teste</a>

                                        <voxel-icon style="margin-left:4px; align-self:center; display:inherit;" size="S">link_externo_outline</voxel-icon>

                                    </p>

                                </div>

                            </div>

                            <div class="conteudo_direito">

                                <img width="100%" height="275.84" src="../../../assets/images/news/teste-mindsight.png" alt="Homem fazendo o teste de mindset">

                            </div>

                        </div>

                    </div>

                    <div class="carousel-item">

                        <div class="container_carousel" id="home_news">

                            <div class="conteudo_esquerdo_carousel">

                                <h2>Título teste 2</h2>

                                <div class="texto_container">

                                    <p class="estilo_texto_card">Escrever aqui sobre o teste 2</p>

                                 </div>

                                <div>

                                    <p class="estilo_link_card">

                                        <a href=https://www.youtube.com target="_blank" class="voxel-link" style="display: flex;">assista o vídeo</a>

                                        <voxel-icon style="margin-left:4px; align-self:center; display:inherit;" size="S">link_externo_outline</voxel-icon>

                                   </p>

                                </div>

                            </div>

                            <div class="conteudo_direito">

                                <img width="100%" height="275.84" src="../../../assets/images/news/ ">

                            </div>

                        </div>

                    </div>

                    <div class="carousel-item">

                        <div class="container_carousel" id="home_news">

                            <div class="conteudo_esquerdo_carousel">

                                <h2>Título teste 3</h2>

                                <div class="texto_container">

                                    <p class="estilo_texto_card">Detalhes para o teste 3.</p>

                                </div>

                                <div>

                                    <p class="estilo_link_card">

                                        <a href=https://google.com.br target="_blank" class="voxel-link" style="display: flex; align-items: center;">acessar o link </a>

                                        <voxel-icon style="margin-left:4px; align-self:center; display:inherit;" size="S">link_externo_outline</voxel-icon>

                                    </p>

                                </div>

                            </div>

                            <div class="conteudo_direito">

                                <img width="100%" height="100%" src="../../../assets/images/news/ ">

                            </div>

                        </div>

                    </div>

                </div>

                <button id="prevBtn" aria-label="anterior" class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">

                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

                </button>

                <button id="nextBtn"aria-label="próximo" class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">

                    <span class="carousel-control-next-icon" aria-hidden="true"></span>

                </button>

            </div>

        </div>

    </div>

   

    <div class="voxel-col-6 elemento_invisivel_tela_grande">

        <div id="carouselExampleIndicatorsMobile" class="carousel slide" data-bs-interval="false"  style="margin-bottom: 100px;">

            <div class="carousel-inner">

                <div class="carousel-item active">

                    <div class="container_carousel">

                        <div class="conteudo_direito">

                            <img width="100%" height="275.84" src="../../../assets/images/news/ ">

                        </div>

                        <div class="conteudo_esquerdo_carousel">

                            <h2>Teste 2?</h2>

                            <div class="texto_container">

                                <p class="estilo_texto_card_2">texto</p>

                            </div>

                            <div>

                                <p class="estilo_link_card">

                                    <a href=https://auth.mindsight.com.br/trinus/accounts/login/ aria-label="acesse o teste" target="_blank" class="voxel-link" style="display: flex; align-items: center; margin-left:none!important;">acesse o teste</a>

                                    <voxel-icon style="margin-left:4px; align-self:center; display:inherit;" size="S">link_externo_outline</voxel-icon>

                                </p>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="carousel-item">

                    <div class="container_carousel">

                        <div class="conteudo_direito">

                            <img width="100%" height="275.84" src="../../../assets/images/news/ ">

                        </div>

                        <div>

O código acima funciona perfeitamente

Estou usando um Carousel com Bootstrap, mas eu preciso que o botão next suma quando chegar o ultimo item e que o botão previous fique escondido enquanto estiver no primeiro conteúdo.

Consigo fazer isso somente com CSS? Ou preciso do JS?

Esse código do JS que tentei não funcionou:

  ngAfterViewInit(): void {
    const slides = document.getElementsByClassName("carousel-item");
    const nextBtn = document.getElementById("nextBtn");
    const prevBtn = document.getElementById("prevBtn");

    let slideIndex: number = 1;

    showDivs(slideIndex);

    function plusDivs(n: number) {
      const newIndex: number = slideIndex += n;

      handleDisabled(newIndex);

      showDivs(newIndex);
    }

    function showDivs(n: number) {
      let i: number;
      if (n > slides.length) {
        slideIndex = 1;
      }
      if (n < 1) {
        slideIndex = slides.length;
      }
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slides[slideIndex - 1].style.display = "block";
    }

    function handleDisabled(newIndex: number) {
      prevBtn.disabled = false;
      nextBtn.disabled = false;

      if (newIndex === slides.length) {
        nextBtn.disabled = true;
      } else if (newIndex === 1) {
        prevBtn.disabled = true;
      }
    }

    nextBtn.addEventListener("click", () => plusDivs(1));
    prevBtn.addEventListener("click", () => plusDivs(-1));
  }
}

I’m using React, and I’m trying to create some functionaility that hovers a button over a selection and then does something with that selection when the user clicks on it. However, on mobile (tested only on iOS so far), since the tap deselects, I can’t access the previous selection anymore. What’s a workaround to this that will work on both desktop and mobile, and maybe make the experience of tapping the button better on mobile?

I’ve created a MWE codesandbox: https://codesandbox.io/s/cl6mx8

(edit: it appears to work on mobile in the simulator for some reason but not if you use the full page view: https://cl6mx8.csb.app/)

If you click the button on desktop you should see “range count: 1”, whereas on mobile it should stay “range count: 0” since the deselect has already occured before that logic.

I am trying to download a file on clicking a button. My exact approach is as follows:

1. On the button click I call an API which returns the files Buffer Data
2. Convert buffer data to a base64 url and update the href of the <a> element with this base64 url
3. invoke a click to the <a> element from inside the function

This approach will download the file, however, it keeps downloading the file infinitely and I’m not sure why its doing that and how to get around it.

Here is how I’m calling the function

<button v-on:click="this.getImage([imageID, imageName], $event)"><a>View scoresheet</a></button>

Here is the function:

getImage: async function(info, event){
    fetch('endpoint' + String(info[0]) + "/" + String(info[1]) , {
        method: 'GET',
      
        })
        .then(response => response.json())
        .then(async result => {
             var image_data = await result.image_buffer.data
             var imgSrc = "data:image/jpg;base64," + btoa(
                 image_data.reduce((data, byte) => data + String.fromCharCode(byte), '')
             );

             event.target.href = imgSrc
             event.target.download = 'image.jpg'
             event.target.click()
        })
    },

For regular inserts with Knex.Js you can do something like this in order to ignore any duplicate when inserting:

knex('tableName')
  .insert({
    email: "[email protected]",
    name: "John Doe"
  })
  .onConflict('email')
  .ignore()

I’m trying to do that for batchInsert, but I’m still getting duplicate errors:

const newUsers = await knex.batchInsert("user", filteredUsers, 1000).returning('email').onConflict('userId')
 .ignore();

Is there any way to do this with batchInsert?

Documentation gives this example but it’s done with the regular Insert method, not with batchInsert. I tried it with no success
https://knexjs.org/guide/query-builder.html#onconflict

Documentation Example

I have an app that needs to retrieve some properties from a REST call, and then those properties get used at other places in the code. The problem is that sometimes the code tries to use the properties before they are fully retrieved.

@Injectable()
export class PropertiesService
{

  public properties: any = {};

  constructor(
    public http: HttpClient,
    public dialog: DialogService
  )
  {
    let url = Environment.hostUrl + "properties/";
    this.http.get<ApiResponse>(url).subscribe(
    (response) =>
    {
      console.info("Setting Remote Properties", response.message);
      this.properties = response.message;
    });
  }

  public getProperty(propertyName: string)
  {
    return this.properties[propertyName];
  }
}

And then in other places in the code it will call to get a property:

console.info(propertiesService.getProperty("propertyName"));

But if that gets called before the properties response gets back, it will return undefined and I only want the users of the properties to use them once they have been set. Generally the properties response doesn’t take very long to come back (just a few milliseconds), so I was wondering if there was a way to make the “getProperty” method wait until the property is no longer undefined before it returns with the value. But I’m not sure if that is good design and if there is a better way to do it I’d like to know about that.

I’m still learning html and Javascript, so I’m not too good at it. I’m trying to make it so that when I press a button, some text switches from “On” to “Off” and vise versa.

function switch_status() {

  //Setting status to opposite
  if (status = "Turn Appearance Off:") {
    status = "Turn Appearance On:"
  };
  
  if (status = "Turn Appearance On:") {
    status = "Turn Appearance Off:"
  };
  
  //Printing it out
  status_print.innerHTML = status;
}

var status = "Turn Appearance Off:";
var status_print = document.getElementById("status_print");

//calling function
switch_status();

<h1 id="status_print">Turn Appearance On:</h1>
<button type="button" onclick="switch_status()">Click Me!</button>

As you can see, it’s supposed to switch from On to Off when I hit the button. But it doesn’t seem to work, help would much be appreciated.

Sharjah Escorts Models +971581705103 Escort in Sharjah

| +971562430093 |
If you are in Sharjah and looking for Call girls for enjoyment. Don’t book anyone blindly. Check whether they are genuine or not. As compared to other call girls. We have a separate customer review section for every Call girl in Sharjah . All reviews are written by their clients. If you book an appointment with us. You will be going to meet the same girl as in the pictures.
Have you been looking for an Call girls agency that will be an answer to all your carnal urges? Are you tired of looking for the best agency in Sharjah ? If yes, your search must end here.
Hi guys, I am the naughty 22-year-old independent call girl of your dreams. My body is an open invitation to paradise, I have an exquisitely curvy body and smooth skin that you will love when you touch.
I love to play and fill each client with pleasure, we will enjoy a delicious and intense meeting. It will be an unforgettable experience and what I like most on a date is to make you enjoy to the fullest.
As a lover, I offer a very pleasant time, my services are very complete, with me you can enjoy to the fullest. I’ll give myself up completely and leave you with a taste of wanting more after our hot sex session.
Sharjah call girls, Call Girls in Sharjah , indian Call Girls in Sharjah , pakistani Call Girls in Sharjah , Sharjah escorts, Sharjah Call Girls number, indian Call Girls numbers, pakistani Call Girls numbers, paid sex in Sharjah , girls for Sex is also an art form, it is delightful and tasty with passion for another person, with me you will experience it. I leave you super relaxed, come and experience and delight completely.I am a lover who is very involved and who will do everything in my hands so that you have the most intense orgasm of your life. I will provide you with all the pleasure you need. We’ll have true sex and passion to the maximum,

I’m trying to figure out how to incorporate factory function closures and use Object.assign/Object.create inheritance at the same time. Probably simple, but I can’t figure out how to do it. First I build my desired factory that utilizes closure. I have methods that act on my private variables.

const projectFactory = function() {
    let _title = "new project";

    const _tabs = [];

    const getTitle = function() {
        return title;
    }

    const setTitle = function(input) {
        this.title = input;
        return;
    }

    const createTab = function() {
        // some method that fills the tabs array
        return;
    }

    return {
        getTitle,
        setTitle,
        createTab
    }
};

const factory1 = projectFactory(); 
console.log(factory1); // methods set on object, _title and _tabs not visible

`

Well all my methods are going to be the same for all these objects I’m creating when calling this factory function. So I decided to pull out my methods and store them in an object to be referenced then rewrite my factory function using Object.assign / Object.create, this way the methods are inherited.

const projectMethods = {
    getTitle() {
        return this.title;
    },
    setTitle(input) {
        this.title = input;
        return;
    },
    createTab() {
        // some method that fills the tabs array
        return;
    }
};

const projectFactory = function() {
    let title = "new project";

    const tabs = [];

    return Object.assign(Object.create(projectMethods), {
        title, tabs
    });
};

const factory1 = projectFactory();
console.log(factory1); // methods available on prototype, title and tabs visible

But now since I’m returning a whole object in my factory I no longer have private variables. How can I achieve the result:

console.log(factory1); // methods available on prototype, title and tabs not visible