1
Mamba
Example of Using Vue.js in Blocks
  • 2017/11/19 4:36

  • Mamba

  • Moderator

  • Posts: 11366

  • Since: 2004/4/23


It's easy to add Vue.js to XOOPS Blocks. How about creating a block showing latest XOOPS Core commits on GitHub? We can do it by modifying the existing code from Vue.js example "GitHub Commits" We create a new XOOPS Custom Block in Admin and paste following code:
<div id="demo">
  <
h1>Latest XOOPS Commits</h1>
  <
template v-for="branch in branches">
    <
input type="radio"
      
:id="branch"
      
:value="branch"
      
name="branch"
      
v-model="currentBranch">
    <
label :for="branch">{{ branch }}</label>
  </
template>
  <
p>XOOPS/XoopsCore25@{{ currentBranch }}</p>
  <
ul>
    <
li v-for="record in commits">
      <
:href="record.html_url" target="_blank" class="commit">{{ record.sha.slice(07) }}</a>
      - <
span class="message">{{ record.commit.message truncate }}</span><br>
      
by <span class="author"><:href="record.author.html_url" target="_blank">{{ record.commit.author.name }}</a></span>
      
at <span class="date">{{ record.commit.author.date formatDate }}</span>
    </
li>
  </
ul>
</
div>

<
style>
#demo {
  
font-family'Helvetica'Arialsans-serif;
}
li {
  
line-height1.5em;
  
margin-bottom20px;
}
.
author, .date {
  
font-weightbold;
}
</
style>

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

<
script>
var 
apiURL 'https://api.github.com/repos/XOOPS/XoopsCore25/commits?per_page=3&sha='

/**
 * Actual demo
 */

var demo = new Vue({

  
el'#demo',

  
data: {
    
branches: ['master'],
    
currentBranch'master',
    
commitsnull
  
},

  
created: function () {
    
this.fetchData()
  },

  
watch: {
    
currentBranch'fetchData'
  
},

  
filters: {
    
truncate: function (v) {
      var 
newline v.indexOf('n')
      return 
newline v.slice(0newline) : v
    
},
    
formatDate: function (v) {
      return 
v.replace(/T|Z/g' ')
    }
  },

  
methods: {
    
fetchData: function () {
      var 
xhr = new XMLHttpRequest()
      var 
self this
      xhr
.open('GET'apiURL self.currentBranch)
      
xhr.onload = function () {
        
self.commits JSON.parse(xhr.responseText)
        
console.log(self.commits[0].html_url)
      }
      
xhr.send()
    }
  }
})
</
script>
Save it as HTML, and we're done!
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

2
zyspec
Re: Example of Using Vue.js in Blocks
  • 2017/11/21 1:55

  • zyspec

  • Module Developer

  • Posts: 1095

  • Since: 2004/9/21


I think it's a great idea - it should be a side block onhttps://xoops.org/modules/publisher/category.php?categoryid=1

We should have a similar block for modules (XoopsModules25x) onhttps://xoops.org/modules/publisher/category.php?categoryid=2

And for themes (Xoopsthemes) on
https://xoops.org/modules/publisher/category.php?categoryid=3

3
aerograf
Re: Example of Using Vue.js in Blocks
  • 2017/11/21 7:55

  • aerograf

  • Quite a regular

  • Posts: 214

  • Since: 2017/1/7 1


And the forum can
https://xoops.shmel.org/modules/newbb/viewtopic.php?post_id=36

4
Mamba
Re: Example of Using Vue.js in Blocks
  • 2017/11/21 11:06

  • Mamba

  • Moderator

  • Posts: 11366

  • Since: 2004/4/23


Jim, I've added the block, but GitHub is only serving commits by repository, so below the XOOPS Core 2.5.x I've added links to:

Latest XOOPS Modules Commits 

Latest XOOPS Themes Commits

Latest Docs/Tutorials Commits

Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

5
Bleekk
Re: Example of Using Vue.js in Blocks
  • 2018/2/17 10:03

  • Bleekk

  • Theme Designer

  • Posts: 940

  • Since: 2002/12/14


Be aware that the css in this code can break your design. I have changed 2 lines to prevent this: added a class to the ul tag
<ul class="gh-li"
    <
li v-for="record in commits">
changed css to
.gh-li li 
  
line-height1.5em
  
margin-bottom20px
}

6
Mamba
Re: Example of Using Vue.js in Blocks
  • 2018/2/17 19:25

  • Mamba

  • Moderator

  • Posts: 11366

  • Since: 2004/4/23


Thank you!
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

Login

Who's Online

220 user(s) are online (122 user(s) are browsing Support Forums)


Members: 0


Guests: 220


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits