Posts by RaTToX

    I have one question to the filepicker, which i've copied from the hero banner widget:

    How can i select / whitelist other filetypes? For my plugin i want to select images or video files, like webm. I can select it, but i'm not able to save the selection. I've added various filetypes under the System page, but this doesn't help. Does anybody have an idea?



    Thank you SAB ! Now it looks like what i've wanted.
    If im right you have change the following files: index.php, jarallax.php and widget-jarallax.vue


    1. As your package is a theme, shortcuts like extension-name: and extension-name/views: are not registered (they are only valid for extensions!), you can simply use theme: or views:

    Ok, so you changed in the jarallax.php the Widget name and the parameters for $scripts->register to

    $scripts->register('widget-jarallax', 'theme:app/bundle/widget-jarallax.js', ['~widgets']);


    1. ...
    2. The name of your widget (defined in index.php with 'name' => 'myWidget') and which name you register your vue component are connected. To get your widget visible, use window.Widgets.components['my-widget:settings'] = module.exports. The first part my-widget has to be the kebab case version of your widget name. (kebab case: myNameIsSimon -> my-name-is-simon or my/widget -> my-widget

    I'm a bit confused. 'name' => 'myWidget' in the index.php in the index.php is the name of the theme, isn't it? Did you mean the jaralaxx.php in my case? If yes it would sense to me ^^


    Beside, remember that scripts for a widget only has to be registered in the appropiate .php widget file. The widget-theme component is only a tab in the widget edit view (therefor show on every widget type) and this kind of script has to be registered in your index.php.


    Ok, that's why you uncommented the widget-jaralaxx in the index.php.


    Thank you very much. Now it's more clearly understandable for me :):thumbup:

    Thanks for your comments! And sorry for the late response :huh:



    Yes, my webpack.config.js looks similar to this, except the js-loader, and everytime i updated my vue-file i run the webpack command.


    I want to build a parallax widget for the frontend with configurable options in the backoffice (like the 'hero-banner'). It should have a file picker to select a image or video file for example. These options should be available in the "edit widget" page in the tab "settings". I dont want to create a new tab if that is possible.


    Thank your for the github links, i'll take a look at them, but probably not before the weekend :rolleyes:



    window.Widgets.components['theme'] = module.exports;

    This is the statement i wrote into the vue file. I thought ['theme'] was for the part where to output my vue template ?( I guess i'm wrong.

    Every other script is loaded correctly. Only my script's src-path isn't correct.


    Yes, i uploaded my current status here. Please keep in mind that i'm at the beginnig of my theme and widget, so currently there aren't any controller for my widget.


    I think there are some namings wrong and parameters are missing. :|

    Files

    • rattox.zip

      (4.17 MB, downloaded 64 times, last: )


    My theme folders index.php looks currently like this:


    And my jarallax widget file (placed in my theme folder) looks like this:

    Instead of the-video-guy/jarallax:app/bundle/widget-jarallax.js i can write something like packages/rattox/the-video-guy/app/bundle/widget-jarallax.js, but i don't think that this is the correct way. However my inspector will give me than the following error message:

    Code
    1. widget-jarallax.js?v=8799:101 Uncaught TypeError: Cannot read property 'components' of undefined
    2. at Object.<anonymous> (widget-jarallax.js?v=8799:101)
    3. at __webpack_require__ (widget-jarallax.js?v=8799:20)
    4. at Object.<anonymous> (widget-jarallax.js?v=8799:49)
    5. at __webpack_require__ (widget-jarallax.js?v=8799:20)
    6. at widget-jarallax.js?v=8799:40
    7. at widget-jarallax.js?v=8799:43

    Hello Kuzmich,


    The first two sentences of w3schools:

    Quote

    CSS is a language that describes the style of an HTML document.

    CSS describes how HTML elements should be displayed.

    You can't create any kind of styled elements without a markup. At least you need HTML or JS to tell the button or link what it should do if it was clicked ;)

    Thanks for your response, yns.wtf!


    I just tried to rewrite my code correctly, but i think i didn't understand you.


    My (theme) files are located unter kai/packages/rattox/the-video-guy (See screenshot from above).


    I updated my index.php as follow:

    In your code is the option 'autoload' => ['Pastheme\\Blog\\' => 'src']. If this is necessary; What would it be in my case? ?(


    And i've updated my widgets/jarallax.php:


    But nothing really changed :/ The result in the DOM:

    <script src="the-video-guy:app/bundle/widget-jarallax.js"></script>


    If i change the widgets/jarallax.php to the following, the result is slightly different:

    PHP: widgets/jarallax.php
    1. $scripts->register('widget-jarallax', 'the-video-guy/jarallax:app/bundle/widget-jarallax.js', ['~widgets']);

    Result:

    <script src="/projects/kai/the-video-guy/jarallax:app/bundle/widget-jarallax.js"></script>


    I don't really know what's going on.

    Hey guys!


    I've started to create my own widget, which should have options on the backoffice under "Edit widget --> Settings". The problem i have is that only one (default?) input field is shown, named 'title'.


    In Chrome inspector i found out that my custom widget's js file isn't loaded, because the src-path isn't correct: src="rattox:js/widget-jarallax.js"


    I tried to follow the steps in the documentation, but i dont know how to fix this.


    First of all, my theme tree:




    And my curret result looks like this:

    Only one input field is visible and the src of the the script file is wrong.




    Does anybody knows what i'm doing wrong? I tried to compare system widgets with my own, but i have no clue what i'm doing wrong :(

    Read the last sentence please, once again, especially the not to forget part.

    Only not forget that vue.js can't be in version 2.x actually as pagekit need serious upgrades on most modules.

    Ok, i think that means it has to be under version 2.x, so the latest version is vue@1.0.28-csp?

    I've installed this version globally, but npm list -g --depth=0 will give me the follwing output:

    webpack@1.12.9 is installed, but the error message says that a higher version of webpack is needed for the current webpack-cli. ?(


    Using npm install in the project directory will start bower install && webpack && gulp. webpack again will give me the follwing error:


    Solution for webpack!

    To get rid of these error messages, i've tried the things that CopyJosh wrote: https://github.com/pagekit/pag…05#issuecomment-240128474

    Yeah, no more error messages by running webpack! <3


    After that i got errors with gulp because of using v4 instead of v3.9.1. That was because of running npm audit, which tells me # Run npm install --save-dev gulp@4.0.0 to resolve 5 vulnerabilities:

    Code
    1. npm WARN vue-loader@8.7.1 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
    2. npm WARN pagekit@ No repository field.
    3. npm WARN pagekit@ No license field.
    4. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
    5. npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    6. audited 4055 packages in 9.878s
    7. found 15 vulnerabilities (2 low, 8 moderate, 5 high)
    8. run `npm audit fix` to fix them, or `npm audit` for details

    Since these are just warnings instead of errors, i'll now try to build a theme. ^^

    Thank you guys! If some kind of problem with webpack appears, i'll write again :)

    First of all: Thank both of you for your fast response! ^^:thumbup:


    My progress wasn't that much and before i tangle up with the amounts of trial and errors, i just set up a new, clean version of pagekit. Installed, configurated, hooray it works again ^^


    first for all you need npm and then run npm install in your project directory, webpack as webpack-cli should be installed via npm as well as npm globally.

    Ok, i run npm install, everything looks fine except this part:


    I checked the packages i already installed globally:

    Code
    1. npm -v: 6.4.1
    2. node -v: v8.11.4
    3. webpack -v: 4.17.2
    4. webpack-cli -v: 3.1.0

    And for information purpose: npm list -g --depth=0 shows:


    Only not forget that vue.js can't be in version 2.x actually as pagekit need serious upgrades on most modules.

    Here comes the next question for a better understanding:

    Globally i've installed vue@2.5.17. But in the projects package.json, vue isn't listed:

    Code
    1. ...
    2. "merge-stream": "^0.1.7",
    3. "vue-hot-reload-api": "^1.2.0",
    4. "vue-html-loader": "^1.0.0",
    5. "vue-loader": "^8.2.0",
    6. "vue-style-loader": "^1.0.0",
    7. "webpack": "^1.12.9"

    What i understand is, that i need to downgrade my current globally version of vue.js, is this correct? Or can i just add a specific version of vue in the package.json (Shouldn't vue be listed too?) Does the same apply to my webpack version? :

    You need install webpack@1.12.9 and webpack-cli


    sudo npm install webpack@1.12.9 -g && sudo npm install webpack-cli -g 


    Would it be better to install the packages globally or locally?:/


    I hope for your feedback :)

    Hello community!


    I'm new to PageKit and wanted to setup everything i need on my PC (Windows 10). So my plan was following the doc's for creating a new theme, based on this page: https://pagekit.com/docs/tutorials/theme


    A few words before i describe my problem:

    - Instead of UiKit and Less i want to use Bootstrap and Sass (because i'm more familiar with them).

    - Bootstrap is included and my sass will be compiled.

    - I'm not familiar with webpack, vue and babel. Yes, i've heard of it. But no, i never configurated them by myself.

    - I have a clue of what npm does, but i'm not 100% sure how to use it correctly.


    What i want to do:

    I want to add a tab in the backoffice for a widget to set several settings.


    What i already did:

    So i added the webpack.config.js with the following code:

    Notice: I've renamed loaders to rules because everytime i run the webpack-command, i've got an error message of a "wrong api schema". Also i've renamed vue to vue-loader, because i got this error:

    Code
    1. ERROR in ./app/components/node-theme.vue
    2. Module build failed (from D:/Programme/ScotchBox/public/kai/node_modules/vue/dist/vue.runtime.common.js):
    3. TypeError: this._init is not a function
    4. at Object.Vue (D:\Programme\ScotchBox\public\kai\node_modules\vue\dist\vue.runtime.common.js:4727:8)


    So, whats the current problem?

    The current problem occurs if i run webpack in my theme-folder:


    For more information, i have added my package.json:


    Notice: I'm not really familiar with the package.json, so i'm not sure if i need all these dependencies?


    and my node-theme.vue:


    So my question is: What i'm doing wrong? Why is the babel-loader used? Didn't i understand how webpack works? Shouldn't be the vue-loader called?

    I hope somebody can help me with my ignorance. ?(